/* Рабочее место урока и уровня Bandit: полоса цели, вкладки, шаги, терминал. */
.ws { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); background: var(--surface); }

/* полоса «цель + ближайшее действие» */
.ws-strip { grid-row: 1; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 14px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
.ws-strip .goal { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; background: none; border: 0; padding: 0; text-align: left; min-height: 0; }
.ws-strip .goal[aria-expanded="true"] { display: block; }
.ws-strip .goal b, .ws-strip .next b { font-weight: 500; color: var(--ink-2); }
.ws-strip .next { font-weight: 600; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ws-strip .next b { font-size: 0.875rem; }
.ws-strip .prog { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.ws-panel { grid-row: 2; grid-column: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: none; }
.ws-panel .pad { padding: 16px; display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin: 0 auto; }
.ws[data-tab="lesson"] .ws-panel[data-panel="lesson"],
.ws[data-tab="scene"] .ws-panel[data-panel="scene"],
.ws[data-tab="ref"] .ws-panel[data-panel="ref"] { display: block; }
.ws[data-tab="term"] .ws-panel[data-panel="term"] { display: flex; }
.ws-panel[data-panel="term"] { flex-direction: column; overflow: hidden; background: var(--term-bg); }
.ws-panel[data-panel="scene"] { background: var(--surface); }

.ws-tabs { grid-row: 3; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: var(--sab); }
.ws-tabs button { flex: 1; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; font-size: 0.75rem; color: var(--ink-2); position: relative; }
.ws-tabs button svg { width: 22px; height: 22px; }
.ws-tabs button[aria-selected="true"] { color: var(--accent); font-weight: 600; }
.ws-tabs button[aria-selected="true"]::before { content: ''; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; }
.ws-tabs button .pip { position: absolute; top: 9px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface); }
.ws-tabs button .pip.warn { background: var(--warn); }
.ws-tabs button .pip.off { background: var(--line-strong); }

/* экранная клавиатура открыта: оставляем строку «сейчас», терминал и панель клавиш */
html.kb-open .topbar, html.kb-open .ws-tabs, html.kb-open .banners { display: none; }
html.kb-open .ws-strip { padding: 4px 12px; }
html.kb-open .ws-strip .goal, html.kb-open .ws-strip .prog { display: none; }
html.kb-open .ws-strip .next { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.875rem; }
html.kb-open .term-bar .ttl, html.kb-open .term-bar .opt { display: none; }

@media (min-width: 1024px) {
  .ws { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .ws.no-term { grid-template-columns: minmax(0, 1fr); }
  .ws-strip { grid-column: 1 / -1; padding: 10px 20px 12px; }
  .ws-strip .goal { -webkit-line-clamp: 1; }
  .ws-tabs { grid-row: 2; grid-column: 1; border-top: 0; border-bottom: 1px solid var(--line); padding: 0 12px; }
  .ws-tabs button { flex: none; flex-direction: row; gap: 8px; min-height: 48px; padding: 0 14px; font-size: 0.9375rem; }
  .ws-tabs button[data-tab="term"] { display: none; }
  .ws-tabs button[aria-selected="true"]::before { top: auto; bottom: -1px; left: 10px; right: 10px; border-radius: 3px 3px 0 0; }
  .ws-tabs button .pip { display: none; }
  .ws .ws-panel { display: none; grid-row: 3; grid-column: 1; }
  .ws[data-left="lesson"] .ws-panel[data-panel="lesson"],
  .ws[data-left="scene"] .ws-panel[data-panel="scene"],
  .ws[data-left="ref"] .ws-panel[data-panel="ref"] { display: block; }
  .ws .ws-panel[data-panel="term"] { display: flex; grid-row: 2 / span 2; grid-column: 2; border-left: 1px solid var(--line); }
  .ws.no-term .ws-panel[data-panel="term"] { display: none; }
  .ws-panel .pad { padding: 20px 24px 32px; margin: 0; }
}

/* ---------- урок ---------- */
.lesson-head .cluster { margin-top: 8px; }
.q-card { border-left: 4px solid var(--accent); }
.q-card p + p { margin-top: 6px; }

.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; position: relative; padding-bottom: 14px; }
.step::before { content: ''; position: absolute; left: 13px; top: 26px; bottom: -4px; width: 2px; background: var(--line); }
.step:last-child::before { display: none; }
.step.confirmed::before { background: var(--ok); }
.step-node { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.step.confirmed .step-node { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.step.active .step-node { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.step-node svg { width: 16px; height: 16px; }
.step-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 28px; }
.step-head h3 { overflow-wrap: anywhere; }
.step.locked .step-head h3 { color: var(--ink-2); font-weight: 500; }
.step-state { font-size: 0.8125rem; color: var(--ink-2); }
.step.confirmed .step-state { color: var(--ok); }
.step-body { display: flex; flex-direction: column; gap: 12px; }

.checks { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; font-size: 0.9375rem; }
.checks li + li { border-top: 1px solid var(--line); }
.checks .mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); margin-top: 1px; display: grid; place-items: center; }
.checks .mark svg { width: 12px; height: 12px; }
.checks li[data-ok="true"] .mark { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.checks li[data-ok="false"] .mark { border-color: var(--err); color: var(--err); }
.checks .st { font-size: 0.8125rem; color: var(--ink-2); white-space: nowrap; margin-top: 2px; }
.checks li[data-ok="true"] .st { color: var(--ok); }
.checks li[data-ok="false"] .st { color: var(--err); }

.predict { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.predict .opts { display: flex; flex-direction: column; gap: 8px; }
.predict .opt { min-height: 44px; text-align: left; padding: 8px 12px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--surface); overflow-wrap: anywhere; }
.predict .opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.predict .opt.right { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.predict .opt.wrong { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }

.fb { border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.fb-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); border-left: 4px solid var(--line-strong); }
.fb[data-kind="progress"] .fb-head { border-left-color: var(--ok); }
.fb[data-kind="explore"] .fb-head { border-left-color: var(--accent); }
.fb[data-kind="issue"] .fb-head { border-left-color: var(--warn); }
.fb[data-kind="infra"] .fb-head { border-left-color: var(--line-strong); }
.fb-head b { font-weight: 600; }
.fb-head .meta { font-size: 0.8125rem; color: var(--ink-2); margin-left: auto; font-variant-numeric: tabular-nums; }
.fb-cmd { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 0.875rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.fb-cmd code { max-width: 100%; }
.fb dl { display: flex; flex-direction: column; }
.fb dl > div { padding: 10px 12px; }
.fb dl > div + div { border-top: 1px solid var(--line); }
.fb dt { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
.fb dd ul { list-style: disc; padding-left: 18px; }

.hints { border: 1px solid var(--line); border-radius: var(--r-ctl); }
.hints > summary { list-style: none; cursor: pointer; padding: 10px 12px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 500; }
.hints > summary::-webkit-details-marker { display: none; }
.hints[open] > summary { border-bottom: 1px solid var(--line); }
.hints-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ladder span { height: 6px; border-radius: 3px; background: var(--line); }
.ladder span.on { background: var(--warn); }
.hint { border-left: 3px solid var(--warn); padding: 2px 0 2px 12px; }
.hint b { display: block; font-size: 0.8125rem; color: var(--ink-2); font-weight: 600; }
.hint p { white-space: pre-wrap; overflow-wrap: anywhere; }

.done-card { border-left: 4px solid var(--ok); }

/* ---------- 3D: текстовый запасной вариант и обёртка ---------- */
.scene-host { padding: 12px; max-width: 900px; margin: 0 auto; --scene-h: clamp(260px, calc(var(--vvh) - 430px), 540px); }
.scene-mount { position: relative; min-height: 200px; }
@media (min-width: 1024px) { .scene-host { padding: 20px 24px; --scene-h: clamp(300px, calc(var(--vvh) - 470px), 560px); } }
.scene-text { padding: 16px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.scene-text ol { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 8px; }
.scene-text ol li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.scene-text ol li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 0.8125rem; color: var(--ink-2); }
.scene-mini { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }

/* ---------- терминал ---------- */
.term { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--term-bg); color: var(--term-ink); --tline: #26323f; --tink2: #9fb0c0; }
.term-bar { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 12px; min-height: 44px; border-bottom: 1px solid var(--tline); font-size: 0.8125rem; }
.term-bar .state { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-bar .led { width: 9px; height: 9px; border-radius: 50%; background: #6b7a89; flex: none; }
.term[data-state="live"] .led { background: #5fd08f; }
.term[data-state="viewer"] .led, .term[data-state="reconnecting"] .led, .term[data-state="creating"] .led, .term[data-state="connecting"] .led { background: #e5b452; }
.term[data-state="expired"] .led, .term[data-state="error"] .led, .term[data-state="offline"] .led { background: #f3847c; }
.term-bar .ttl { color: var(--tink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.term-bar .ttl.soon { color: #e5b452; }
.term-bar button { min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--term-ink); border-radius: 6px; padding: 0 8px; font-size: 0.8125rem; }
.term-bar button:hover { background: #18222d; }
.term-bar button svg { width: 20px; height: 20px; vertical-align: middle; }
.term :focus-visible { outline-color: #8ad6ea; }
.term-menu { border-bottom: 1px solid var(--tline); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; background: #111a22; font-size: 0.875rem; }
.term-menu .cluster { gap: 8px; }
.term-menu p { color: var(--tink2); }
.tbtn { min-height: 44px; padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid #3a4a5a; background: #18222d; color: var(--term-ink); font-weight: 500; font-size: 0.9375rem; }
.tbtn.primary { background: #67c5de; border-color: #67c5de; color: #05212a; font-weight: 600; }
.tbtn.danger { border-color: #f3847c; color: #f3847c; }
.tbtn[disabled] { opacity: 0.5; cursor: not-allowed; }

.term-screen { flex: 1; min-height: 0; position: relative; }
.term-x { position: absolute; inset: 0; padding: 6px 0 0 8px; }
.term-x .xterm { height: 100%; }
.term-x .xterm-viewport { overscroll-behavior: contain; }
/* iOS увеличивает страницу при фокусе на поле с шрифтом меньше 16px */
.term-x .xterm .xterm-helper-textarea { font-size: 16px !important; }
.term-over { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(13, 19, 25, 0.92); text-align: left; overflow-y: auto; }
.term-over .box { max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.term-over h3 { font-size: 1.0625rem; display: flex; gap: 10px; align-items: center; }
.term-over p { color: var(--tink2); font-size: 0.9375rem; }
.term-over .cluster { margin-top: 4px; }
.term-flag { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 4; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 8px 8px 12px; border-radius: var(--r-ctl); background: #3a2e12; color: #f4e3b5; font-size: 0.875rem; border: 1px solid #5d4a1c; }

.keybar { display: none; grid-template-columns: repeat(8, minmax(0, 1fr)); background: #111a22; border-top: 1px solid var(--tline); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.keybar.show { display: grid; }
@media (pointer: coarse) { .keybar:not(.hide) { display: grid; } }
.keybar button { min-height: 44px; min-width: 0; padding: 0; background: none; border: 0; border-right: 1px solid var(--tline); border-bottom: 1px solid var(--tline); color: var(--term-ink); font-family: var(--mono); font-size: 0.9375rem; }
.keybar button:nth-child(8n) { border-right: 0; }
.keybar button:active, .keybar button.down { background: #24313e; }
.keybar button[aria-pressed="true"] { background: #67c5de; color: #05212a; font-weight: 600; }
.keybar button.wide { font-size: 0.8125rem; }
.keybar button svg { width: 20px; height: 20px; vertical-align: middle; }
.checks .ev { display: block; margin-top: 4px; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }