/* Shared terminal surface. Loaded after each workspace's layout stylesheet. */
:root {
  color-scheme: dark;
  --color-canvas: #0b0f14;
  --color-surface: #10161e;
  --color-surface-subtle: #151d27;
  --color-surface-strong: #1a2430;
  --color-ink: #d5dfe9;
  --color-muted: #91a1b3;
  --color-pencil: #91a1b3;
  --color-primary: #91d5b5;
  --color-primary-hover: #b4e7ce;
  --color-primary-soft: #162d29;
  --color-border: #2c3a48;
  --color-border-soft: #23303d;
  --color-focus: #8bbfff;
  --color-danger: #ff9d9d;
  --color-code: #0d131b;
  --color-code-ink: #d5dfe9;
  --color-code-muted: #8495a8;
  --color-code-border: #283544;
  --color-code-active-line: #182331;
  --color-code-selection: #29435d;
  --paper-rule: #23303d;
  --paper-margin: transparent;
  --paper-texture: none;
  --scratch-mark: none;
  --shadow-paper: none;
  --shadow-card: none;
  --font-body: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-typewriter: var(--font-body);
  --font-sans: var(--font-body);
  --radius-card: 4px;
  --radius-control: 4px;
}
html { scrollbar-color: #415264 #10161e; }
body { font-size: 13px; line-height: 1.65; background-image: none; }
body > header, .sound-toggle, .celebration-particles { display: none !important; }
button, .button, select, textarea { font-size: 12px; }
button, .button { background: var(--color-surface-subtle); border-color: var(--color-border); font-weight: 500; }
button.primary, .button.primary { color: #0c1b15; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-width: 2px; outline-offset: 2px; }
h1, h2, h3 { letter-spacing: -.02em; font-weight: 550; }
.small, .muted { font-size: 12px; }
summary { font-weight: 500; }
.eyebrow { font-weight: 500; text-transform: none; letter-spacing: 0; }
body.focus.practice-page main { padding: 8px 8px 0; }
body.focus .panes { gap: 8px; }
body.focus .brief-pane { padding: 18px; font-size: 13px; line-height: 1.65; }
body.focus .notebook-heading #title { font-size: 19px; line-height: 1.4; }
body.focus #why, body.focus #stage { display: none; }
body.focus .brief-pane #brief > h1:first-child { font-size: 19px; }
body.focus .brief-pane h2 { font-size: 16px; }
body.focus .brief-pane h3 { font-size: 14px; }
body.focus .file-bar { background: var(--color-surface-subtle); }
body.focus .file-bar select { font-size: 12px; }
body.focus .file-bar > span { font-size: 10px; }
body.focus .actions { border-top: 1px solid var(--color-border); background: var(--color-surface-subtle); }
body.focus .actions button { min-height: 36px; }
body.focus #example-title { font-size: 14px; }
body.focus .personal-notes > summary { padding: 10px 14px; }
body.focus .reflection { padding: 14px; }
body.focus .reflection h3 { font-size: 14px; }
body.focus .success-moment { border: 1px solid var(--color-border); box-shadow: none; animation: none; }
body.focus .success-check { display: none; }
body.focus .success-moment strong { font-size: 12px; text-transform: none; letter-spacing: 0; }
body.focus .success-moment span { font-size: 11px; }
body.focus .timer output { font-size: 16px; }
body.focus .timer button { font-size: 11px; min-height: 32px; }
body.focus .terminal-footer, .terminal-footer {
  display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap;
  gap: 8px 24px; min-height: 36px; padding: 8px 4px;
  border: 0; color: var(--color-muted); font-size: 10px;
}
.terminal-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.terminal-footer a { color: var(--color-muted); text-decoration: none; padding: 4px 0; }
.terminal-footer a:hover { color: var(--color-primary); text-decoration: underline; }
.terminal-state { color: var(--color-primary); }
.terminal-footer > span:last-child { margin-left: auto; }
.path-page main { width: min(1040px, calc(100% - 32px)); padding: 24px 0 0; }
.path-page .recommendation > .eyebrow, .path-page .recommendation > h1, .path-page .reassurance { display: none; }
.path-page label[for="target-track"] { font-size: 11px; color: var(--color-muted); margin-right: 12px; }
.path-page #target-track { min-height: 36px; padding: 6px 10px; margin-bottom: 16px; }
.path-page .next-card, .path-page .wizard, .path-page .outcome, .path-page .qualification { padding: 22px; }
.path-page .next-card h2 { font-size: 21px; line-height: 1.4; }
.path-page .qualification h2 { font-size: 17px; }
.path-page #next-reason, .path-page #next-purpose { display: none; }
.path-page .training-cycle { font-size: 12px; }
.path-page .qualification-limit { font-size: 11px; }
.path-page .qualification-gates li { font-size: 12px; }
.path-page .backup { margin-top: 16px; padding: 12px 0; font-size: 11px; }
.path-page .assessment-option { font-size: 11px; }
.path-page .roadmap-content { padding: 20px; }
.path-page .roadmap-here { border-radius: 4px; border-width: 1px; box-shadow: none; }
.path-page .roadmap-check { font-family: var(--font-body); transform: none; font-size: 14px; }
.path-page .roadmap-item { animation: none; }
.path-page .roadmap-title, .path-page .roadmap-count { font-size: 13px; }
.path-page .roadmap-status, .path-page .roadmap-here-reason { font-size: 11px; }
@media (min-width: 901px) {
  body.focus.practice-page main { height: 100dvh; }
  body.focus .panes { grid-template-columns: minmax(240px, .95fr) minmax(320px, 1.5fr) minmax(260px, .9fr); }
}
@media (max-width: 900px) {
  body.focus .brief-pane { max-height: min(40dvh, 420px); }
  body.focus .editor-shell { height: clamp(300px, 50dvh, 480px); }
  .terminal-footer > span:last-child { display: none; }
}
@media (max-width: 540px) {
  body { min-width: 300px; }
  .path-page main { width: calc(100% - 16px); padding-top: 12px; }
  .path-page .next-card, .path-page .wizard, .path-page .outcome, .path-page .qualification { padding: 16px; }
  .path-page label[for="target-track"] { display: block; margin-bottom: 6px; }
  .path-page #target-track { width: 100%; }
  body.focus .brief-pane { padding: 16px; }
  .terminal-footer { gap: 4px 16px; }
  .terminal-footer nav { gap: 16px; }
}
/* Remove the inherited notebook rulings and raised typewriter keys. */
body.focus .brief-pane, body.focus #output, .path-page .roadmap-content { background-image: none; box-shadow: none; }
button, .button, button.primary, .button.primary, button:active:not(:disabled), .button:active { box-shadow: none; transform: none; }
.path-page #next-kind, .path-page #review-summary { display: none; }

/* Neutral shell chrome also applies when browsing the file library. */
.intro { display: none !important; }