/* ============================================================
   LearnOff Code — UI редактора задач (CodeMirror 5 из ядра WP)
   Стилистика сайта: шрифт Onest, акцент #01A97D,
   текст #1E1E1E, светлый акцент #ECFBF8, границы #E9E9E9.
   ============================================================ */

:root {
  --code-ink: #1e1e1e;
  --code-ink-soft: #272a41;
  --code-muted: #6b7280;
  --code-green: #01a97d;
  --code-green-dark: #029f76;
  --code-green-soft: #ecfbf8;
  --code-border: #e9e9e9;
  --code-border-strong: #d5d5d5;
  --code-red: #e5484d;
  --code-red-soft: #fdecec;
  --code-radius: 10px;
  --code-radius-sm: 8px;
  --code-font: Onest, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --code-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", monospace;
  --code-shadow: 0 12px 32px rgba(30, 30, 30, 0.08);
}

/* ---------- Панель управления ---------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: #ffffff;
  border: 1px solid var(--code-border);
  border-bottom: none;
  border-radius: var(--code-radius) var(--code-radius) 0 0;
  font-family: var(--code-font);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* Select языка */
#language-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 9.5rem;
  padding: 0.5em 2.25em 0.5em 0.875em;
  border: 1px solid var(--code-border-strong);
  border-radius: var(--code-radius-sm);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  font-family: var(--code-font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--code-ink-soft);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#language-select:hover {
  border-color: var(--code-green);
}

#language-select:focus-visible {
  outline: none;
  border-color: var(--code-green);
  box-shadow: 0 0 0 3px rgba(1, 169, 125, 0.2);
}

/* Таймер */
#timer-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--code-border);
  border-radius: 999px;
  background: #fff;
}

#timer-container span {
  font-family: var(--code-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--code-ink-soft);
  min-width: 4.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#start-timer,
#stop-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#start-timer {
  background: var(--code-green);
}

#start-timer:hover {
  background: var(--code-green-dark);
}

#stop-timer {
  background: var(--code-red);
}

#stop-timer:hover {
  background: #c9363b;
}

#start-timer:active,
#stop-timer:active {
  transform: scale(0.94);
}

/* ---------- Кнопки действий ---------- */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.55em 1.1em;
  border: 1px solid transparent;
  border-radius: var(--code-radius-sm);
  font-family: var(--code-font);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.button-primary:active {
  transform: scale(0.97);
}

.button-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.button-primary:focus-visible,
#start-timer:focus-visible,
#stop-timer:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 169, 125, 0.25);
}

.button-primary,
#submit-code {
  background: var(--code-green);
  color: #fff;
}

.button-primary:hover,
#submit-code:hover {
  background: var(--code-green-dark);
}

#review-code {
  background: var(--code-green-soft);
  color: var(--code-green-dark);
  border-color: rgba(1, 169, 125, 0.25);
}

#review-code:hover {
  background: #d7f4ec;
  border-color: var(--code-green);
}

#clear-editor-comments,
#restore-editor {
  background: #fff;
  color: var(--code-ink-soft);
  border-color: var(--code-border-strong);
}

#clear-editor-comments:hover,
#restore-editor:hover {
  background: #f5f5f5;
  border-color: #c4c4c4;
  color: var(--code-ink);
}

/* ---------- Редактор (CodeMirror) ---------- */
#mymonaco-editor {
  width: 100%;
  height: clamp(420px, 70vh, 900px);
  border: 1px solid var(--code-border);
  border-radius: 0 0 var(--code-radius) var(--code-radius);
  background: #fff;
  box-shadow: var(--code-shadow);
  overflow: hidden;
  position: relative;
  font-family: var(--code-mono);
  font-size: 13px;
  line-height: 1.55;
}

#mymonaco-editor .CodeMirror {
  height: 100%;
  font-family: var(--code-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--code-ink);
  background: #fff;
}

#mymonaco-editor .CodeMirror-gutters {
  background: #fafafa;
  border-right: 1px solid var(--code-border);
}

#mymonaco-editor .CodeMirror-linenumber {
  color: var(--code-muted);
  padding: 0 8px 0 5px;
  min-width: 24px;
}

#mymonaco-editor .CodeMirror-cursor {
  border-left: 2px solid var(--code-green);
}

#mymonaco-editor .CodeMirror-selected {
  background: rgba(1, 169, 125, 0.15);
}

#mymonaco-editor .CodeMirror-line {
  padding: 0 16px;
}

#mymonaco-editor .CodeMirror-activeline-background {
  background: transparent;
}

/* ---------- Токены подсветки Go ---------- */
#mymonaco-editor .cm-keyword { color: #0da88c; font-weight: 600; }
#mymonaco-editor .cm-atom { color: #0369a1; }
#mymonaco-editor .cm-number { color: #1d4ed8; }
#mymonaco-editor .cm-string { color: #b45309; }
#mymonaco-editor .cm-comment { color: #9ca3af; font-style: italic; }
#mymonaco-editor .cm-operator { color: #374151; }
#mymonaco-editor .cm-variable { color: var(--code-ink); }
#mymonaco-editor .cm-variable-2 { color: #0f766e; }
#mymonaco-editor .cm-def { color: #0f766e; }
#mymonaco-editor .cm-builtin { color: #0369a1; }
#mymonaco-editor .cm-error { color: var(--code-red); }

/* ---------- Подсветка строк с ошибками ---------- */
#mymonaco-editor .code-line--error {
  background: rgba(229, 72, 77, 0.14);
}

#mymonaco-editor .code-line--info {
  background: rgba(1, 169, 125, 0.12);
}

/* ---------- Карточки ошибок (между строками, через addLineWidget) ---------- */
.CodeMirror-linewidget .code-err {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin: 2px 0;
  border-radius: 8px;
  border-left: 3px solid var(--code-red);
  background: var(--code-red-soft);
  color: #7a2024;
  font-family: var(--code-font);
  font-size: 0.8125rem;
  line-height: 1.45;
  box-sizing: border-box;
}

.CodeMirror-linewidget .code-err--error {
  background: var(--code-red-soft);
  border-left-color: var(--code-red);
  color: #7a2024;
}

.CodeMirror-linewidget .code-err--info {
  background: var(--code-green-soft);
  border-left-color: var(--code-green);
  color: #0b6b52;
}

.code-err__pos {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
}

.code-err__msgs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.code-err__msg {
  word-break: break-word;
}

.code-err__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  color: inherit;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.code-err__close:hover {
  opacity: 1;
}

/* ---------- Оверлей (результаты тестов) ---------- */
.monaco-one-shot-overlay {
  background: rgba(30, 30, 30, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.monaco-one-shot-overlay-close {
  color: var(--code-muted);
  transition: color 0.2s ease;
}

.monaco-one-shot-overlay-close:hover {
  color: var(--code-red);
}

/* ---------- Карточка «Результаты тестов» ---------- */
.test-results {
  background: #fff;
  color: var(--code-ink);
  width: min(680px, 100%);
  max-height: 70vh;
  border: 1px solid var(--code-border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(30, 30, 30, 0.2);
  font-family: var(--code-font);
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.test-results__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 1rem 3rem 1rem 1.25rem;
  border-bottom: 1px solid var(--code-border);
}

.test-results__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--code-ink);
}

.test-results__summary {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.test-results__stat {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: #f4f4f5;
  color: var(--code-muted);
}

.test-results__stat--passed {
  background: var(--code-green-soft);
  color: var(--code-green-dark);
}

.test-results__stat--failed {
  background: var(--code-red-soft);
  color: var(--code-red);
}

.test-results__content {
  padding: 0.875rem 1.25rem;
  overflow: auto;
}

.test-results__table {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 96px minmax(140px, 1.4fr);
  gap: 0.5rem 0.75rem;
  align-items: start;
}

.tr-head {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--code-muted);
  padding-bottom: 0.25rem;
}

.tr-name {
  font-weight: 600;
  color: var(--code-ink);
  word-break: break-word;
  padding: 0.35rem 0;
}

.tr-status {
  justify-self: start;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
  text-align: center;
}

.tr-status--success {
  background: var(--code-green-soft);
  color: var(--code-green-dark);
}

.tr-status--fail,
.tr-status--failed,
.tr-status--error {
  background: var(--code-red-soft);
  color: var(--code-red);
}

.tr-error {
  color: var(--code-muted);
  font-family: var(--code-mono);
  font-size: 0.8125rem;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.35rem 0;
}

.test-results__footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--code-border);
  background: #fafafa;
}

.test-results__next {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.2em;
  border: none;
  border-radius: var(--code-radius-sm);
  background: var(--code-green);
  color: #fff;
  text-decoration: none;
  font-family: var(--code-font);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.test-results__next:hover {
  background: var(--code-green-dark);
  color: #fff;
}

/* ============================================================
   Адаптив
   ============================================================ */

@media (max-width: 48em) {
  .code-page .has-inner-padding {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .toolbar {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .toolbar-left {
    flex: 1 1 100%;
    width: 100%;
  }

  #language-select {
    flex: 1 1 auto;
  }

  #timer-container {
    margin-left: auto;
  }

  #clear-editor-comments,
  #restore-editor,
  #review-code,
  #submit-code {
    flex: 1 1 calc(50% - 0.25rem);
  }

  #mymonaco-editor {
    height: 60vh;
    min-height: 360px;
  }

  .code-page .gutena-tabs-block > .gutena-tabs-tab.tab-flex {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .code-page .gutena-tabs-block > .gutena-tabs-tab.tab-flex .gutena-tab-title {
    flex: 0 0 auto;
  }
}

@media (max-width: 30em) {
  #clear-editor-comments,
  #restore-editor,
  #review-code,
  #submit-code {
    flex: 1 1 100%;
  }

  #mymonaco-editor {
    height: 65vh;
    min-height: 320px;
  }

  .test-results {
    width: 100%;
    max-height: 82vh;
  }

  .test-results__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .test-results__table {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .tr-head {
    display: none;
  }

  .tr-name {
    padding-top: 0.75rem;
  }

  .tr-status {
    justify-self: start;
  }

  .tr-error {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--code-border);
  }
}