/* Northstar Cross-Platform Style Guide v1: operational UI before atmosphere. */
@font-face { font-family: Inter; src: url("../fonts/Inter-Variable.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: Oxanium; src: url("../fonts/Oxanium-Variable.ttf") format("truetype"); font-style: normal; font-weight: 200 800; font-display: swap; }
@font-face { font-family: JetBrainsMono; src: url("../fonts/JetBrainsMono-Variable.ttf") format("truetype"); font-style: normal; font-weight: 100 800; font-display: swap; }
:root {
  --ns-bg-950: #050607;
  --ns-bg-900: #090b0e;
  --ns-bg-850: #0d1014;
  --ns-bg-800: #12161b;
  --ns-border: #252a31;
  --ns-control-border: #65717d;
  --ns-text: #e2e8ee;
  --ns-text-muted: #9aa6b2;
  --ns-gold: #ffb62e;
  --ns-gold-light: #ffd15c;
  --ns-gold-text: #ffb62e;
  --ns-red: #e31717;
  --ns-critical: #ff3636;
  --ns-cyan: #31d7ff;
  --ns-violet: #a855f7;
  --ns-green: #39e58c;
  --ns-amber: #ff9e2c;
  --ns-offline: #9aa6b2;
  --ns-primary-ink: #090b0e;
  --ns-radius-sm: 4px;
  --ns-radius-md: 6px;
  --ns-radius-lg: 8px;
  --ns-radius-dialog: 10px;
  --ns-space-1: 4px;
  --ns-space-2: 8px;
  --ns-space-3: 12px;
  --ns-space-4: 16px;
  --ns-space-5: 24px;
  --ns-space-6: 32px;
  --ns-space-7: 48px;
  --ns-ui: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --ns-display: Oxanium, "Space Grotesk", var(--ns-ui);
  --ns-mono: JetBrainsMono, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --ns-nav-width: 248px;
  --ns-topbar-height: 56px;
  --ns-ambient: radial-gradient(ellipse at 80% 0%, rgb(255 182 46 / 7%), transparent 38rem), radial-gradient(ellipse at 10% 12%, rgb(49 215 255 / 3%), transparent 32rem);
  --ns-panel-glow: 0 0 20px rgb(255 182 46 / 5%);
  /* Compatibility aliases keep all existing functional components on one system. */
  --ink: var(--ns-text);
  --muted: var(--ns-text-muted);
  --surface: var(--ns-bg-950);
  --surface-raised: var(--ns-bg-850);
  --surface-soft: var(--ns-bg-800);
  --line: var(--ns-border);
  --accent: var(--ns-gold-text);
  --accent-deep: var(--ns-bg-800);
  --signal: var(--ns-amber);
  --violet: var(--ns-violet);
  --danger: var(--ns-critical);
  --focus: var(--ns-gold-text);
  --shadow: none;
  font-family: var(--ns-ui);
  background: var(--ns-bg-950);
  color: var(--ns-text);
}

html[data-theme="ghost"] {
  --ns-bg-950: #10151c; --ns-bg-900: #141b23; --ns-bg-850: #18212b; --ns-bg-800: #202c38;
  --ns-border: #374754; --ns-text: #e7eef4; --ns-text-muted: #a8b7c6;
  --ns-gold-text: #f4ce79; --ns-ambient: none; --ns-panel-glow: none;
}
html[data-theme="black-ice"] {
  --ns-bg-950: #020304; --ns-bg-900: #050608; --ns-bg-850: #090c10; --ns-bg-800: #11161d;
  --ns-border: #34302a; --ns-ambient: radial-gradient(ellipse at 85% 0%, rgb(255 182 46 / 10%), transparent 34rem), radial-gradient(ellipse at 5% 45%, rgb(49 215 255 / 5%), transparent 34rem);
  --ns-panel-glow: 0 0 24px rgb(255 182 46 / 8%);
}
html[data-theme="light"] {
  --ns-bg-950: #f1f3f5; --ns-bg-900: #fafbfc; --ns-bg-850: #ffffff; --ns-bg-800: #e8edf2;
  --ns-border: #c0c8d0; --ns-control-border: #76838f; --ns-text: #14202b; --ns-text-muted: #4e5e6c;
  --ns-gold-text: #805100; --ns-critical: #b31320; --ns-cyan: #00667d; --ns-violet: #7434ac;
  --ns-green: #087542; --ns-amber: #9a4a00; --ns-offline: #4e5e6c;
  --ns-ambient: none; --ns-panel-glow: none;
  --ink: var(--ns-text); --muted: var(--ns-text-muted); --surface: var(--ns-bg-950);
  --surface-raised: var(--ns-bg-850); --surface-soft: var(--ns-bg-800); --line: var(--ns-border);
  --accent: var(--ns-gold-text); --accent-deep: var(--ns-bg-800); --signal: var(--ns-amber);
  --danger: var(--ns-critical); --focus: var(--ns-gold-text); --violet: var(--ns-violet); --shadow: none;
  background: var(--ns-bg-950);
}
html[data-intensity="minimal"] { --ns-ambient: none; --ns-panel-glow: none; }
html[data-intensity="immersive"]:not([data-theme="ghost"]):not([data-theme="light"]) {
  --ns-ambient: radial-gradient(ellipse at 85% 0%, rgb(255 182 46 / 12%), transparent 36rem), radial-gradient(ellipse at 5% 35%, rgb(49 215 255 / 6%), transparent 32rem);
  --ns-panel-glow: 0 0 24px rgb(255 182 46 / 9%);
}

body { background: var(--ns-ambient), var(--ns-bg-950); background-size: auto; font: 1rem/1.55 var(--ns-ui); }
a { color: var(--ns-cyan); }
button, input, select, textarea { font-family: var(--ns-ui); }
button, a { transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease; }
button, .primary-button, .secondary-button, summary { min-height: 44px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--ns-gold); color: var(--ns-primary-ink); }
h1, h2, h3, .wordmark-title { font-family: var(--ns-display); font-weight: 650; }
h1, .content-section > h1, .dashboard-heading h1, .mission-header h1, .form-shell h1, .lab-library h1, .lab-heading h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -.025em; }
h2, .content-section h2 { font-size: 1.5rem; line-height: 1.3; letter-spacing: -.015em; }
h3, .card-grid h3, .mission-card h3, .lab-card h2 { font-size: 1.125rem; line-height: 1.4; }
.hero h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -.035em; max-width: 16ch; }
.lede { font-size: 1rem; line-height: 1.7; }
.eyebrow, .wordmark-kicker, .system-ribbon, .site-footer strong { font-family: var(--ns-mono); font-size: .75rem; line-height: 1.6; letter-spacing: .08em; color: var(--ns-gold-text); }
code, pre, kbd, .wallet-address, .wallet-review, .event-record code, .mission-number, .command-reference, .lab-tags span, .tool-state-panel h3, .mail-header { font-family: var(--ns-mono); }
.field-help, .muted, .mail-header { font-size: .875rem; color: var(--ns-text-muted); }
.content-section { padding: var(--ns-space-6) clamp(1rem, 3vw, 3rem); }
/* The course workflow already supplies grid gaps; native element margins must
   not add a second layer of spacing before its first actionable selector. */
.course-management { align-content: start; gap: var(--ns-space-4); }
.course-management > h1, .course-management > p, .course-management > .course-workflow-links { margin-block: 0; }
.course-management > #admin-status:empty, .course-management > #admin-metrics:empty { display: none; }
.course-management #admin-metrics article { padding: var(--ns-space-4); }
.course-management #admin-metrics article > :first-child { margin-top: 0; }
.course-management #admin-metrics article > :last-child { margin-bottom: 0; }
.dashboard-heading, .mission-header { padding: var(--ns-space-6) clamp(1rem, 3vw, 3rem); }
.section-grid, .form-shell { gap: var(--ns-space-7); }
.hero { min-height: 36rem; padding-block: var(--ns-space-7); }
.form-shell { padding-block: var(--ns-space-7); }
.panel, .rank-card, .brief-card, .stacked-form, .mission-card, .card-grid article { border: 1px solid var(--line); border-radius: var(--ns-radius-lg); background: var(--surface-raised); box-shadow: none; }
.panel, .rank-card, .brief-card { padding: var(--ns-space-5); }
.panel:focus-within { border-color: color-mix(in srgb, var(--ns-gold-text) 60%, var(--line)); }
.primary-button, .secondary-button, .quiet-button, main button:not([class]), main select, input, select, textarea { border-radius: var(--ns-radius-md); }
.primary-button, main form button[type="submit"]:not([class]), .course-workflow-links a.primary-button, html[data-theme="light"] .primary-button, html[data-theme="light"] main form button[type="submit"]:not([class]) { color: var(--ns-primary-ink); background: var(--ns-gold); border: 1px solid var(--ns-gold-text); }
.primary-button:hover:not(:disabled), main form button[type="submit"]:not([class]):hover:not(:disabled) { background: var(--ns-gold-light); }
.secondary-button { background: var(--surface-soft); border: 1px solid color-mix(in srgb, var(--ns-gold-text) 55%, var(--line)); color: var(--ink); }
.secondary-button:hover:not(:disabled), .quiet-button:hover:not(:disabled) { border-color: var(--ns-gold-text); background: var(--surface-soft); }
.quiet-button { background: var(--surface-soft); border-color: var(--ns-control-border); }
.danger-button, button[data-danger="true"] { background: var(--ns-red); color: #fff; border: 1px solid var(--ns-red); box-shadow: none; }
.danger-button:hover, button[data-danger="true"]:hover { box-shadow: 0 0 16px rgb(227 23 23 / 16%); }
.stacked-form input, .stacked-form select, .stacked-form textarea, main select, .rubric-criterion input, .rubric-criterion textarea, .submission-fields textarea, .lab-filter input { border-color: var(--ns-control-border); background: var(--surface); color: var(--ink); border-radius: var(--ns-radius-md); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.mission-card { border-left: 3px solid var(--ns-gold-text); padding: var(--ns-space-5); }
.mission-card:hover { border-color: var(--ns-gold-text); box-shadow: var(--ns-panel-glow); }
.mission-number { width: 4rem; border-radius: var(--ns-radius-sm); color: var(--ns-gold-text); }
.lab-card, .lab-card:nth-child(3n+2), .lab-card:nth-child(3n) { border-top: 2px solid color-mix(in srgb, var(--ns-gold-text) 50%, var(--line)); }
.lab-card h2 { margin-block: .5rem 1rem; }
.lab-tags span, .status-pill { border-radius: var(--ns-radius-sm); }
.operator-card { grid-template-columns: 80px minmax(0, 1fr); min-width: 19rem; border-top: 2px solid var(--ns-gold-text); }
.operator-card img { width: 80px; height: 80px; }
[data-player-avatar] { box-shadow: none; }
.player-pass { border-top-color: var(--ns-gold-text); }
.telemetry-strip { margin-inline: clamp(1rem, 3vw, 3rem); border-radius: var(--ns-radius-lg); }
.telemetry-strip article > span { font-family: var(--ns-mono); font-size: .75rem; }
.telemetry-strip strong { font-size: 1.5rem; }
.telemetry-strip article { padding: var(--ns-space-4); }
.simulation-banner { background: var(--surface-soft); border-left-color: var(--ns-gold-text); font-size: .875rem; }
.objective-list li[data-complete="true"] { color: var(--ns-green); text-decoration: none; }
.evidence-item { border-left-color: var(--ns-cyan); border-radius: var(--ns-radius-sm); }
.form-status[data-kind="error"], [role="status"][data-kind="error"] { color: var(--ns-critical); }
.form-status[data-kind="success"], [role="status"][data-kind="success"] { color: var(--ns-green); }
.form-status[data-kind="warning"] { color: var(--ns-amber); }
.status-unknown { color: var(--ns-violet); }
.status-offline { color: var(--ns-offline); }
.status-pill span, .sync-state span { color: var(--ns-gold-text); }
.lab-feedback { border-left-color: var(--ns-gold-text); }
.command-reference { font-size: .875rem; color: var(--ns-cyan); border-left-color: var(--ns-cyan); }
.tool-state-panel h3 { color: var(--ns-gold-text); font-size: 1rem; }
.flow-sample { border-left-color: var(--ns-cyan); }
.mail-message { border-top-color: var(--line); }
.table-scroll { border-radius: var(--ns-radius-md); }
.table-scroll th { position: sticky; top: 0; z-index: 1; background: var(--surface-soft); color: var(--ns-text); }
.table-scroll th, .table-scroll td { padding: .75rem 1rem; }
.table-scroll tr:nth-child(even) { background: color-mix(in srgb, var(--surface-soft) 40%, transparent); }
.table-scroll tbody tr:hover { background: var(--surface-soft); }
.topology-canvas { background: var(--ns-bg-950); }
.topology-zone { fill: var(--ns-bg-850); stroke: var(--ns-border); }
.topology-zone-label, .topology-device-id { fill: var(--ns-text-muted); font-family: var(--ns-mono); }
.topology-node { fill: var(--ns-bg-800); stroke: var(--ns-cyan); }
.topology-node.firewall { stroke: var(--ns-gold-text); }
.topology-link { stroke: var(--ns-cyan); opacity: .6; }
.topology-device { fill: var(--ns-text); font-family: var(--ns-ui); }

/* App shell: desktop navigation becomes a real sidebar, not a shrunken phone UI. */
.site-header { min-height: var(--ns-topbar-height); padding: .5rem var(--ns-space-5); gap: var(--ns-space-4); background: var(--ns-bg-900); border-color: var(--line); }
.wordmark-logo { width: 40px; height: 40px; border: 0; border-radius: var(--ns-radius-sm); }
.wordmark { gap: 10px; }
.wordmark-kicker { font-size: .65rem; letter-spacing: .08em; }
.wordmark-title { font-size: 1rem; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-2); margin-left: auto; }
.header-actions button { min-height: 36px; padding: .35rem .7rem; font-size: .8125rem; }
kbd { display: inline-block; margin-left: .5rem; padding: .05rem .25rem; border: 1px solid var(--ns-control-border); border-radius: var(--ns-radius-sm); font-size: .7rem; }
.site-header .site-nav { gap: .25rem; }
.site-header .site-nav a { display: inline-flex; align-items: center; gap: .75rem; border-radius: var(--ns-radius-md); font-size: .875rem; }
.site-header .site-nav a:hover, .site-header .site-nav a[aria-current="page"] { color: var(--ns-gold-text); border-color: var(--line); background: var(--surface-soft); }
html[data-theme="ghost"] .site-header .site-nav a[aria-current="page"] { color: var(--ns-cyan); }
.nav-icon { display: inline-grid; place-items: center; width: 24px; flex: 0 0 24px; font-size: 1.35rem; line-height: 1; }
.nav-mono { font: .95rem var(--ns-mono); }
.nav-heading, .nav-caption, .nav-collapse { display: none; }
.system-ribbon { min-height: 30px; padding: .3rem var(--ns-space-5); background: var(--ns-bg-850); font-size: .6875rem; color: var(--ns-text-muted); }
.system-ribbon > span:last-child { color: var(--ns-text-muted); }
.site-footer { margin-top: var(--ns-space-6); padding: var(--ns-space-5); background: var(--ns-bg-900); font-size: .8125rem; }
.mobile-navigation { display: none; }
.skip-link { z-index: 200; }
@media (min-width: 1280px) {
  body[data-authenticated="true"] .site-header { position: sticky; top: 0; z-index: 30; height: 56px; flex-wrap: nowrap; }
  body[data-authenticated="true"] .site-nav { position: fixed; inset: 56px auto 0 0; width: var(--ns-nav-width); padding: var(--ns-space-5) var(--ns-space-3); display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; overflow-y: auto; background: var(--ns-bg-900); border-right: 1px solid var(--line); }
  body[data-authenticated="true"] .site-nav a { min-height: 44px; padding: .65rem .75rem; }
  body[data-authenticated="true"] .nav-heading { display: block; padding: 0 .75rem; font: .6875rem var(--ns-mono); letter-spacing: .1em; color: var(--muted); }
  body[data-authenticated="true"] .nav-caption { display: block; padding: 1rem .75rem; margin-top: auto; color: var(--muted); font-size: .75rem; line-height: 1.8; }
  body[data-authenticated="true"] .nav-collapse { display: block; font-size: .75rem; }
  body[data-authenticated="true"] main { width: calc(100% - var(--ns-nav-width)); max-width: 1600px; margin-left: var(--ns-nav-width); margin-right: 0; }
  body[data-authenticated="true"] .system-ribbon, body[data-authenticated="true"] .site-footer { margin-left: var(--ns-nav-width); }
  html[data-nav="collapsed"] { --ns-nav-width: 72px; }
  html[data-nav="collapsed"] body[data-authenticated="true"] .site-nav { padding-inline: .5rem; }
  html[data-nav="collapsed"] body[data-authenticated="true"] .site-nav a { justify-content: center; padding-inline: .25rem; }
  html[data-nav="collapsed"] body[data-authenticated="true"] .nav-label, html[data-nav="collapsed"] body[data-authenticated="true"] .nav-caption, html[data-nav="collapsed"] body[data-authenticated="true"] .nav-heading { display: none; }
  html[data-nav="collapsed"] body[data-authenticated="true"] .nav-collapse { margin-top: auto; }
  html[data-nav="collapsed"] body[data-authenticated="true"] .nav-collapse span { font-size: 0; }
  html[data-nav="collapsed"] body[data-authenticated="true"] .nav-collapse span::after { content: "»"; font-size: 1.4rem; }
  .lab-workbench { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ns-space-5); }
  .lab-tool-area { grid-column: 1; grid-row: 1; }
  .lab-guide { grid-column: 2; grid-row: 1; }
  .workspace-grid { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.5fr); }
  .evidence-panel { grid-column: 1 / -1; }
  .notebook-panel { grid-column: 2; }
  .instructor-layout { grid-template-columns: minmax(220px, .6fr) minmax(0, 1.4fr); }
  .instructor-operations { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
}
@media (min-width: 1680px) {
  .workspace-grid { grid-template-columns: 280px minmax(0, 1fr) 280px; }
  .evidence-panel { grid-column: auto; }
}
.context-toggle { display: block; margin: 0 1rem 1rem; font-size: .8125rem; }
#lab-workspace .context-toggle { margin-left: 0; }
.context-collapsed { grid-template-columns: minmax(0, 1fr); }
.context-collapsed > * { grid-column: 1; grid-row: auto; }
@media (max-width: 1279px) {
  .site-header { flex-wrap: wrap; }
  .site-header .site-nav { flex: 1 0 100%; }
  .site-header .site-nav a { min-height: 44px; }
  .lab-workbench { grid-template-columns: minmax(0, 1fr); }
  .lab-guide { order: 0; }
  .lab-tool-area { order: 1; }
}
@media (max-width: 767px) {
  .site-header { flex-direction: row; align-items: center; padding: .75rem 1rem; gap: .75rem; }
  .header-actions { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .header-actions:has(#sign-out[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-actions button { min-height: 44px; padding-inline: .4rem; font-size: .75rem; overflow-wrap: normal; }
  .header-actions kbd { display: none; }
  html[data-ui-ready="true"] .site-header .site-nav { display: none; }
  html[data-ui-ready="true"] .mobile-navigation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; inset: auto 0 0; z-index: 35; padding: .35rem .35rem calc(.35rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--ns-control-border); background: var(--ns-bg-900); }
  .mobile-navigation a, .mobile-navigation button { display: grid; place-items: center; min-height: 48px; border: 0; border-radius: var(--ns-radius-md); background: transparent; color: var(--ns-text); text-decoration: none; font-size: .8125rem; }
  .mobile-navigation a[aria-current="page"] { color: var(--ns-gold-text); background: var(--surface-soft); box-shadow: inset 0 2px var(--ns-gold-text); }
  html[data-ui-ready="true"] body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  h1, .content-section > h1, .dashboard-heading h1, .mission-header h1, .form-shell h1, .lab-library h1, .lab-heading h1 { font-size: 1.625rem; }
  h2, .content-section h2 { font-size: 1.25rem; }
  .hero h1 { font-size: 2rem; }
  .section-grid, .form-shell { gap: var(--ns-space-5); }
  .hero { min-height: auto; padding-block: var(--ns-space-6); }
  .content-section, .dashboard-heading, .mission-header { padding: var(--ns-space-5) var(--ns-space-4); }
  .panel, .rank-card, .brief-card { padding: var(--ns-space-4); }
  .workspace-grid, .instructor-layout, .instructor-operations, .split-section, .native-wallet-grid, .card-grid { grid-template-columns: minmax(0, 1fr); }
  .notebook-panel, .evidence-panel, .instructor-operations { grid-column: auto; }
  .operator-card { min-width: 0; }
  .terminal-toolbar h2 { font-size: 1rem; }
  .terminal-accessibility { width: 100%; }
  .table-scroll { overscroll-behavior-x: contain; }
}

/* Technical text remains readable; controls never invent connection status. */
.terminal-panel { border-radius: var(--ns-radius-lg); border: 1px solid var(--ns-control-border); border-top: 2px solid var(--ns-gold-text); background: var(--ns-bg-950); box-shadow: none; }
.terminal-toolbar { background: var(--ns-bg-800); color: var(--ns-text); border-color: var(--ns-border); padding: .75rem 1rem; }
.terminal-toolbar select { background: var(--ns-bg-950); color: var(--ns-text); border-color: var(--ns-control-border); }
.terminal-toolbar h2 small { color: var(--ns-text-muted); }
.terminal-light { background: var(--ns-gold-text); box-shadow: none; border-radius: 2px; }
.terminal-output, #lab-output { font: var(--ns-terminal-font-size, .9375rem)/1.65 var(--ns-mono); background: var(--ns-bg-950); color: var(--ns-text); }
.terminal-output .stderr { color: var(--ns-critical); }
.terminal-output .command-echo { color: var(--ns-cyan); }
.terminal-input-row { color: var(--ns-gold-text); background: var(--ns-bg-950); border-color: var(--ns-border); font-family: var(--ns-mono); }
.terminal-input-row input { color: var(--ns-text); font-family: var(--ns-mono); }
.terminal-input-row button { background: var(--ns-gold); color: var(--ns-primary-ink); }
.terminal-panel > .field-help { background: var(--ns-bg-800); color: var(--ns-text-muted); border-color: var(--ns-border); }
.terminal-accessibility { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem !important; }
.terminal-accessibility button { min-height: 36px; padding: .35rem .6rem; color: var(--ns-text); font-size: .8125rem; }
.terminal-accessibility output { font: .75rem var(--ns-mono); color: var(--ns-text-muted); min-width: 3rem; text-align: center; }
.terminal-display-status { flex-basis: 100%; font-size: .75rem; color: var(--ns-text-muted); }
.terminal-display-status:empty { display: none; }
.terminal-panel:fullscreen, .terminal-panel.terminal-expanded { width: 100%; height: 100dvh; max-width: none; background: var(--ns-bg-950); display: flex; flex-direction: column; border-radius: 0; }
.terminal-panel.terminal-expanded { position: fixed; inset: 0; z-index: 100; }
.terminal-panel:fullscreen .terminal-output, .terminal-panel.terminal-expanded .terminal-output, .terminal-panel:fullscreen #lab-output, .terminal-panel.terminal-expanded #lab-output { flex: 1 1 auto; min-height: 0; max-height: none; margin: 0; }
.terminal-panel:fullscreen .terminal-toolbar, .terminal-panel.terminal-expanded .terminal-toolbar, .terminal-panel:fullscreen .terminal-input-row, .terminal-panel.terminal-expanded .terminal-input-row { flex-shrink: 0; }

/* Native dialog semantics provide focus trapping, Escape and inert background. */
.design-dialog { width: min(640px, calc(100% - 2rem)); max-height: min(84dvh, 850px); padding: var(--ns-space-5); border: 1px solid var(--ns-control-border); border-radius: var(--ns-radius-dialog); background: var(--ns-bg-850); color: var(--ns-text); box-shadow: 0 20px 70px rgb(0 0 0 / 45%); }
.design-dialog::backdrop { background: rgb(2 3 4 / 75%); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.dialog-heading h2 { margin: .25rem 0; font-size: 1.5rem; }
.dialog-heading form { margin: 0; }
.design-dialog label { display: grid; gap: .5rem; font-size: .875rem; font-weight: 650; }
.design-dialog input, .design-dialog select { display: block; width: 100%; min-height: 44px; padding: .75rem; color: var(--ns-text); background: var(--ns-bg-950); border: 1px solid var(--ns-control-border); border-radius: var(--ns-radius-md); }
.design-dialog > input { margin-top: .5rem; }
.appearance-fields { display: grid; gap: 1.25rem; }
.palette-results { display: grid; gap: .4rem; margin: 1rem 0; padding: 0; list-style: none; max-height: 45dvh; overflow-y: auto; }
.palette-result { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; text-align: left; color: var(--ns-text); background: var(--ns-bg-800); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); cursor: pointer; }
.palette-result:hover, .palette-result:focus-visible { border-color: var(--ns-gold-text); }
.palette-result small { color: var(--ns-text-muted); font-size: .75rem; }
@media (max-width: 767px) { .terminal-accessibility button { min-height: 44px; } .design-dialog { padding: 1rem; } .palette-result { align-items: flex-start; flex-direction: column; gap: .2rem; } }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after,
html[data-intensity="minimal"] *, html[data-intensity="minimal"] *::before, html[data-intensity="minimal"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .site-header .site-nav a[aria-current="page"], .mobile-navigation a[aria-current="page"] { border: 2px solid LinkText; } .terminal-light { forced-color-adjust: auto; } }