/* Styles for /trainers/ only - loaded via {% block extra_css %}, not globally.
   Design concept: the whole section reads as a terminal session - directory
   listings for navigation, `grep -E` as the regex input, matched substrings
   highlighted like `grep --color` instead of whole rows tinted, a +/-/blank
   diff-style gutter for correctness, exit-code line on success. Reuses main.css
   tokens (--surface, --border, --accent, --font-mono, --radius-*) and adds a
   few local tokens (ok/bad/warn) that main.css doesn't define. */

.tr-hub, .tr-shell {
  --tr-ok: #2f9e58;
  --tr-ok-bg: rgba(47, 158, 88, .12);
  --tr-bad: #d94b4b;
  --tr-bad-bg: rgba(217, 75, 75, .12);
  --tr-warn: #b8860b;
  --tr-warn-bg: rgba(184, 134, 11, .14);
}
[data-theme="dark"] .tr-hub, [data-theme="dark"] .tr-shell {
  --tr-ok: #4ade80;
  --tr-ok-bg: rgba(74, 222, 128, .14);
  --tr-bad: #f87171;
  --tr-bad-bg: rgba(248, 113, 113, .16);
  --tr-warn: #f0b45a;
  --tr-warn-bg: rgba(240, 180, 90, .16);
}

.tr-back { font-family: var(--font-mono); font-size: .88rem; margin-bottom: 18px; }

/* ---- shared "shell line" devices ---- */

.tr-shell-line, .tr-stats-line {
  font-family: var(--font-mono); font-size: .88rem; color: var(--text-muted);
  margin: 0 0 10px;
}
.tr-shell-line::before { content: none; }
.tr-stats-line:empty { display: none; }

/* ---- hub (index + regex_home) ---- */

.tr-dir { padding: 6px 4px; margin-top: 4px; }
.tr-entry {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 12px 18px; color: var(--text); border-bottom: 1px solid var(--border);
  transition: background .12s ease;
}
.tr-dir .tr-entry:last-child { border-bottom: none; }
a.tr-entry:hover { background: var(--bg-soft); text-decoration: none; color: var(--text); }
.tr-entry-name {
  font-family: var(--font-mono); font-weight: 700; color: var(--accent);
  min-width: 90px;
}
.tr-entry-desc { color: var(--text-muted); font-size: .92rem; flex: 1 1 320px; }
.tr-entry-meta { font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.tr-entry .hub-chips { margin: 0; }
.tr-entry-comment { opacity: .6; }
.tr-entry-comment .tr-entry-name { color: var(--text-muted); font-weight: 400; }

.tr-topics { display: flex; flex-direction: column; gap: 26px; margin-top: 4px; }
.tr-topic-group { padding-left: 2px; }
.tr-topic-group > .tr-entry-name {
  font-size: 1.05rem; display: block; margin-bottom: 2px;
}
.tr-topic-desc { margin: 0 0 10px; color: var(--text-muted); font-size: .9rem; }
.tr-levels-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.tr-level-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 10px 16px; color: var(--text); background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.tr-levels-list .tr-level-row:last-child { border-bottom: none; }
.tr-level-row:hover { background: var(--bg-soft); text-decoration: none; color: var(--text); }
.tr-level-row::before { content: "  "; }
.tr-level-name { font-family: var(--font-mono); color: var(--accent); min-width: 130px; }
.tr-level-name::before { content: "./"; opacity: .5; }
.tr-level-desc { color: var(--text-muted); font-size: .9rem; flex: 1 1 240px; }
.tr-level-progress { font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted); }
.tr-level-row.tr-level-done .tr-level-progress { color: var(--tr-ok); }
.tr-level-row.tr-level-done .tr-level-name { color: var(--tr-ok); }

/* ---- play screen ---- */

.tr-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tr-breadcrumb { font-family: var(--font-mono); font-size: .88rem; color: var(--text-muted); }
.tr-prompt-dollar { color: var(--accent); font-weight: 700; }
.tr-progress-pill { font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted); }

.tr-card { padding: 26px 28px 28px; }

.tr-mode-line {
  font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted);
  margin: 0 0 14px;
}

.tr-prompt { font-size: 1.15rem; margin: 0 0 20px; line-height: 1.55; }

/* the command line + its "output" panel read as one continuous terminal block */
.tr-cmd {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 1.02rem;
  background: var(--code-bg); border: 1px solid var(--border); border-bottom: 1px dashed var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 12px 16px;
}
.tr-cmd-static { flex-wrap: wrap; word-break: break-all; }
.tr-cmd-prompt { color: var(--accent); font-weight: 700; }
.tr-cmd-text { color: var(--text-muted); white-space: pre; }
.tr-cmd-input {
  border: none; background: transparent; color: var(--accent); font-weight: 600;
  font-family: var(--font-mono); font-size: 1.02rem; padding: 0; min-width: 3ch;
}
.tr-cmd-input:focus { outline: none; }
.tr-cmd-input:disabled { opacity: .6; }

.tr-lines {
  display: flex; flex-direction: column;
  background: var(--code-bg); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 6px 0; margin-bottom: 20px;
}
.tr-row {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-mono); font-size: .92rem;
  padding: 5px 16px; color: var(--text);
}
.tr-gutter { width: 1ch; flex: none; font-weight: 700; text-align: center; color: var(--text-muted); }
.tr-line { word-break: break-word; }
.tr-mark { background: var(--accent-soft); color: var(--accent); font-weight: 700; border-radius: 3px; padding: 0 1px; }

.tr-row-ok .tr-gutter { color: var(--tr-ok); }
.tr-row-pending .tr-gutter { color: var(--tr-warn); }
.tr-row-bad .tr-gutter { color: var(--tr-bad); }
.tr-row-bad .tr-line { color: var(--tr-bad); }
.tr-row-neutral { opacity: .55; }

.tr-row-selectable { cursor: pointer; user-select: none; border-radius: var(--radius-sm); }
.tr-row-selectable:hover { background: var(--bg-soft); }
.tr-row-selectable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tr-row-selected { background: var(--accent-soft); }
.tr-row-selected .tr-gutter { color: var(--accent); }

.tr-select-actions { margin-bottom: 18px; }

.tr-feedback { min-height: 1.4em; margin-bottom: 16px; font-family: var(--font-mono); font-size: .9rem; }
.tr-feedback-error { color: var(--tr-bad); }
.tr-feedback-warn { color: var(--tr-warn); }
.tr-feedback-success { padding: 16px 18px; background: var(--tr-ok-bg); border: 1px solid var(--tr-ok); border-radius: var(--radius-md); }
.tr-exit-line { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--tr-ok); }
.tr-success-explain { margin: 0 0 14px; color: var(--text); font-family: var(--font-mono); font-size: .88rem; }
.tr-success-actions { display: flex; gap: 12px; font-family: var(--font-sans); }

.tr-hints { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 6px; }
.tr-hint-btn {
  font-family: var(--font-mono); font-size: .85rem; color: var(--accent);
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 12px; cursor: pointer;
}
.tr-hint-btn:hover { border-color: var(--accent); }
.tr-hint-btn:disabled { opacity: .5; cursor: default; }
/* Имена директив в разборе и подсказках размечены обратными кавычками. Текст
   тут уже моноширинный, поэтому рамка с фоном была бы шумом - хватает цвета. */
.tr-success-explain code,
.tr-hint-list code { color: var(--accent); background: none; padding: 0; }

.tr-hint-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-hint-list li {
  font-family: var(--font-mono); font-size: .88rem; color: var(--text-muted); padding: 8px 12px;
  background: var(--bg-soft); border-radius: var(--radius-sm);
}

.tr-loading, .tr-error { color: var(--text-muted); font-family: var(--font-mono); }

/* ---- git trainer: commit graphs + standalone command/log panels ---- */

.tr-git-graph-label {
  font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); margin: 0 0 6px;
}
.tr-git-graph {
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: 16px; overflow-x: auto;
}
.tr-git-svg { display: block; }
.tr-git-label-text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.tr-git-label-head { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .04em; }

/* Unlike the write/fix command line (which sits directly above its word list
   and visually merges with it), git's log grows over time and its command
   prompt is always last - each gets its own full border instead of the
   joined-panel look. */
.tr-lines.tr-git-log {
  border-top: 1px solid var(--border); border-radius: var(--radius-md);
  max-height: 180px; overflow-y: auto;
}
.tr-cmd.tr-cmd-standalone {
  border-bottom: 1px solid var(--border); border-radius: var(--radius-md);
}

/* Ссылка «а где это объясняют»: тренажёр проверяет навык, курс объясняет.
   Нейтральная, приглушённая - она не должна перетягивать внимание с задания. */
.tr-course-note {
  font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted);
  margin: 0 0 16px;
}
.tr-course-note a { color: var(--accent); text-decoration: none; }
.tr-course-note a:hover { text-decoration: underline; }
.tr-topic-course {
  display: inline-block; margin: 0 0 10px;
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--text-muted); text-decoration: none;
}
.tr-topic-course:hover { color: var(--accent); }

/* ---- git, repo-режим: требования, история и состояние репозитория --------
   Тут нет графа-цели: цель описана требованиями, и они перекрашиваются после
   каждой команды. Это и есть обратная связь - видно, какой пункт ещё не
   выполнен, но не видно, КАК его выполнить. */
.tr-lines.tr-git-checks {
  border-top: 1px solid var(--border); border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.tr-git-panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px;
}
@media (max-width: 640px) { .tr-git-panels { grid-template-columns: 1fr; } }
.tr-git-panel {
  background: var(--code-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 14px; min-width: 0;
}
.tr-git-side-title {
  font-family: var(--font-mono); font-size: .78rem; color: var(--accent);
  margin: 0 0 6px;
}
.tr-git-pre {
  font-family: var(--font-mono); font-size: .82rem; line-height: 1.5;
  color: var(--text); margin: 0; white-space: pre; overflow-x: auto;
}

.tr-btn-secondary {
  font-family: var(--font-mono); font-size: .85rem; color: var(--text-muted);
  background: none; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 16px; cursor: pointer;
}
.tr-btn-secondary:hover { border-color: var(--accent); color: var(--text); }
.tr-btn-secondary:disabled { opacity: .5; cursor: default; }

/* ---- bits trainer: clickable byte toggles + live bin/dec/hex readout ---- */

.tr-bits-toggle-wrap { margin-bottom: 16px; }
.tr-bits-byte { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; }
.tr-bits-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tr-bits-weight { font-family: var(--font-mono); font-size: .74rem; color: var(--text-muted); }
.tr-bits-gap { width: 14px; flex: none; }

.tr-bits-switch {
  font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700;
  width: 42px; height: 42px; line-height: 40px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--code-bg); color: var(--text-muted);
  padding: 0; cursor: pointer; transition: background .1s ease, color .1s ease, border-color .1s ease;
}
.tr-bits-switch:hover { border-color: var(--accent); }
.tr-bits-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-bits-switch.tr-bits-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.tr-bits-switch-static { cursor: default; }
.tr-bits-switch-static:hover { border-color: var(--border); }

.tr-bits-readout {
  display: inline-flex; flex-direction: column; gap: 2px;
  font-family: var(--font-mono); font-size: .92rem;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 16px; margin-bottom: 20px; min-width: 160px;
}
.tr-bits-readout-row { display: flex; justify-content: space-between; gap: 18px; }
.tr-bits-readout-label { color: var(--text-muted); }
.tr-bits-readout-value { color: var(--text); font-weight: 700; }

@media (max-width: 640px) {
  .tr-card { padding: 20px 18px 22px; }
  .tr-entry-name, .tr-level-name { min-width: 0; }
  .tr-bits-switch { width: 36px; height: 36px; line-height: 34px; font-size: 1.02rem; }
}

.tr-empty { color: var(--text-muted); font-size: .92rem; margin: 1rem 0 0; }