/* Neutral surfaces keep the anatomy and controls in focus. Violet is an
   interaction accent, rather than a tint applied to the whole workspace. */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg-base: #f5f6f8; --bg-surface: #ffffff; --bg-elevated: #eef0f3;
  --bg-row-alt: #f8f9fa; --bg-row-hover: #eef0f3;
  --text-primary: #242830; --text-secondary: #515965; --text-muted: #646d79;
  --accent: #65558f; --accent-dim: #65558f10; --on-accent: #ffffff;
  --danger: #ac3048; --positive: #27674f;
  --border: #e0e4e9; --border-strong: #8b94a1; --border-accent: #65558f80;
  --shadow-1: 0 1px 3px #19212c06;
  --shadow-2: 0 12px 32px #19212c14;
  --bg: #f5f6f8; --panel: #ffffff; --raise: #f3f4f6;
  --line: #e0e4e9; --line-hi: #c6cdd6;
  --text: #242830; --muted: #515965; --dim: #646d79;
  --good: #27674f; --bad: #ac3048; --warn: #805b18;
  --accent-soft: #65558f18; --accent-line: #65558f66;
  --seg-srv: #65558f; --seg-net: #c6cdd6;
  --stage: #1b1e23; --toolbar-bg: #ffffffed; --overlay-bg: #1b1e23ed;
  --font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 12px; --radius-lg: 20px; --radius-xl: 24px;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #121519; --bg-surface: #1c2026; --bg-elevated: #272c34;
  --bg-row-alt: #22272e; --bg-row-hover: #2b313a;
  --text-primary: #eef0f3; --text-secondary: #c4cad3; --text-muted: #a1aab7;
  --accent: #b9afe3; --accent-dim: #b9afe318; --on-accent: #17151e;
  --danger: #f69ca9; --positive: #9bd5b7;
  --border: #343b46; --border-strong: #667181; --border-accent: #b9afe380;
  --shadow-1: 0 2px 12px #00000020; --shadow-2: 0 8px 30px #00000040;
  --bg: #121519; --panel: #1c2026; --raise: #252a32;
  --line: #343b46; --line-hi: #505b6b;
  --text: #eef0f3; --muted: #c4cad3; --dim: #a1aab7;
  --good: #9bd5b7; --bad: #f69ca9; --warn: #e3c17a;
  --accent-soft: #b9afe320; --accent-line: #b9afe380;
  --seg-srv: #b9afe3; --seg-net: #505b6b;
  --stage: #111317; --toolbar-bg: #1c2026ed; --overlay-bg: #121519ed;
}
/* Header variables must follow the shared palette rather than the old
   component-local blue theme in header.css. */
.app-header, [data-theme="light"] .app-header, [data-theme="dark"] .app-header {
  --bg: var(--bg-base); --panel: var(--bg-surface); --raise: var(--bg-elevated);
  --line: var(--border); --line-hi: var(--border-strong);
  --text: var(--text-primary); --muted: var(--text-secondary); --dim: var(--text-muted);
  --accent: inherit; --accent-dim: inherit; --good: var(--positive); --bad: var(--danger);
}
.app-header { padding: 12px 20px; }
.site-nav .nav-link { border-radius: 999px; padding: 6px 12px; }
.site-nav .theme-switcher { border-radius: 999px; }
.site-nav .theme-btn { border-radius: 999px; padding: 5px 10px; }
.site-nav .count { color: var(--on-accent); }
.site-nav .theme-btn.active { color: var(--on-accent); }
.container:not(.home-container) { padding-top: 48px; }
.container:not(.home-container) > .page-head { margin-bottom: 32px; }
.container:not(.home-container) > .page-head h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; }
.container h2 { font-weight: 500; }
.container .card, .container .panel { border-color: var(--border); border-radius: 20px; }
.container .btn, .container input[type="submit"] { border-radius: 999px; padding-inline: 20px; }
.container input[type="text"], .container input[type="email"], .container input[type="password"] { padding: 11px 14px; }
.container .card.narrow { max-width: 460px; padding: 32px; }
.container .card.narrow h1 { font-size: 2.5rem; font-weight: 400; }
.demo-choice { padding: 24px; }
.demo-choice-picture { margin: 0 0 24px; background: var(--bg-elevated); border-radius: 14px; }
.demo-choice-picture img { aspect-ratio: 1.75; object-fit: contain; transition: none; }
.demo-choice:hover .demo-choice-picture img { transform: none; }
.demo-choice-picture > span { inset: 12px auto auto 12px; padding: 5px 10px; background: #303640; color: #fff; border-radius: 999px; font-size: 12px; }
.demo-choice h2 { font-size: 1.75rem; margin-bottom: 12px; }
.demo-feedback { margin-top: 32px; }
.content-preview-banner { padding: 16px 24px; color: #183a2b; background: #d7edde; border-bottom: 1px solid #8aaf99; }
.demo-choice .hint { font-size: 1rem; line-height: 1.5; margin-bottom: 24px; }
/* Quiet, distinct control groups against the neutral workspace. */
#panel { border-color: var(--line); }
#panel .card, .lab-page .panel { border-radius: 9px; }
#panel { background: var(--bg); }
#panel .card { background: var(--panel); border-color: var(--line); }
#panel .lesson-guide { background: var(--raise); }
#viewer > .hint { color: #b7bec9; }
@media (max-width: 640px) {
  .app-header { padding-inline: 16px; }
  .container:not(.home-container) { padding-top: 28px; }
  .container .card.narrow, .demo-choice { padding: 20px; }
}
.site-nav, .site-nav .nav-user { min-width: 0; }
.site-nav .nav-links, .site-nav .nav-user { flex-wrap: wrap; }
.facts dd { min-width: 0; overflow-wrap: anywhere; }
.lab-page #imageEmpty { color: #eef0f3; }
.lab-page #imageEmpty > span { color: #a1aab7; }
.lab-page #imageEmpty p { color: #c4cad3; }
.lab-page #frameLabel { font-size: 9px; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Shared navigation and account journeys. */
.app-header { gap: 20px; }
.site-nav { gap: 8px; margin-left: 0; }
.site-nav .nav-link, .site-nav .btn-signout, .site-nav .theme-btn { min-height: 44px; font-size: 14px; display: inline-flex; align-items: center; }
.site-nav .nav-account { font-weight: 600; }
.site-nav .nav-menu { position: static; }
.site-nav .nav-menu > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--text); font-size: 14px; list-style: none; }
.site-nav .nav-menu > summary::-webkit-details-marker { display: none; }
.site-nav .nav-menu > summary::after { content: '+'; }
.site-nav .nav-menu[open] > summary::after { content: '−'; }
/* The menu opens as a drawer off the right edge rather than a dropdown, so
   the whole site fits in one list and there is room to read it. The drawer
   keeps the film palette whichever theme the page is in: it belongs to the
   site's frame, like the header, not to the page inside it. */
/* Chrome wraps a details element's contents in a ::details-content pseudo
   that establishes containment, which would make it, rather than the window,
   the containing block for the fixed drawer inside it -- the drawer then
   takes the height of its own contents. Browsers without the pseudo-element
   never had the problem and ignore this rule. */
.nav-menu[open]::details-content { content-visibility: visible; contain: none; }
.site-nav .nav-menu-scrim {
  position: fixed; inset: 0; z-index: 149;
  background: #05070ab8; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: menu-scrim .22s ease both;
}
.site-nav .nav-menu-panel {
  position: fixed; inset: 0 0 0 auto; z-index: 150;
  width: min(360px, 86vw); height: 100%; max-height: none;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  background: #0b0f14; color: #edf1f7;
  border: 0; border-left: 1px solid #ffffff1f; border-radius: 0;
  box-shadow: -28px 0 70px #05070a8c;
  animation: menu-drawer .26s cubic-bezier(.22, .61, .36, 1) both;
}
.site-nav .nav-menu-close {
  align-self: flex-end; min-height: 44px; margin-bottom: 10px; padding: 8px 14px;
  border: 1px solid #ffffff2e; border-radius: 999px; background: none; color: #c2ccd8;
  font: inherit; font-size: 13px; cursor: pointer;
}
.site-nav .nav-menu-close:hover { color: #edf1f7; background: #ffffff12; }
.site-nav .nav-menu-panel > .nav-link {
  display: flex; width: 100%; padding: 13px 14px; border-radius: 4px;
  color: #c2ccd8; font-size: 15px;
}
.site-nav .nav-menu-panel > .nav-link:hover { color: #edf1f7; background: #ffffff12; }
.site-nav .nav-menu-panel .theme-switcher { border-color: #ffffff24; background: #ffffff0a; }
.site-nav .nav-menu-panel .theme-btn { color: #9aa5b3; }
.site-nav .nav-menu-panel .theme-btn:hover { color: #edf1f7; background: #ffffff14; }
.site-nav .nav-menu-panel .theme-btn.active { background: #b6e4d3; color: #0c231c; }
.site-nav .nav-menu-panel .btn-signout { border-color: #ffffff2e; color: #c2ccd8; }
.site-nav .nav-menu-panel .btn-signout:hover { color: #edf1f7; background: #ffffff12; }
.site-nav .nav-menu-panel .count { background: #b6e4d3; color: #0c231c; }
.site-nav .nav-menu-panel a:focus-visible,
.site-nav .nav-menu-panel button:focus-visible { outline: 3px solid #b6e4d3; outline-offset: 2px; }
/* The drawer is fixed, so the page behind it must not scroll under it. */
html.menu-open, html.menu-open body { overflow: hidden; }
@keyframes menu-scrim { from { opacity: 0; } }
@keyframes menu-drawer { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-menu-scrim, .site-nav .nav-menu-panel { animation: none; }
}
.site-nav .theme-switcher { margin-top: 12px; }
.site-nav .theme-btn { flex: 1; justify-content: center; }
.site-nav .nav-menu-panel form { margin: 12px 0 0; }
.site-nav .btn-signout { width: 100%; justify-content: center; border-radius: 8px; }
.site-nav summary:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.container input[type="text"], .container input[type="email"], .container input[type="password"] { font-size: 16px; min-height: 48px; }
.container .btn, .container input[type="submit"] { min-height: 44px; font-size: .95rem; letter-spacing: 0; }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.field-error { font-size: .875rem; color: var(--danger); margin: 6px 0 0; }
input[aria-invalid="true"] { border-color: var(--danger); }
.alert a { color: inherit; }
.alert ul { padding-left: 20px; margin-bottom: 0; }
.page-message { margin: 0 0 24px; }
.home-container > .page-message { max-width: 1200px; margin: 20px auto; }
.password-entry { display: flex; gap: 8px; align-items: stretch; }
.password-entry input { flex: 1; min-width: 0; }
.password-toggle { min-width: 64px; min-height: 44px; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; font: inherit; font-size: .875rem; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 300; padding: 12px 20px; color: var(--on-accent); background: var(--accent); border-radius: 10px; }
.skip-link:focus { top: 8px; }
#main-content { scroll-margin-top: 96px; }
.access-steps { list-style: none; counter-reset: steps; padding: 0; margin: 28px 0; }
.access-steps li { counter-increment: steps; position: relative; padding: 0 0 24px 44px; }
.access-steps li:last-child { padding-bottom: 0; }
.access-steps li::before { content: counter(steps) / ""; position: absolute; top: 0; left: 0; width: 28px; height: 28px; display: grid; place-items: center; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 50%; color: var(--accent); font-size: .8rem; }
.access-steps strong, .access-steps span { display: block; }
.access-steps span { color: var(--text-secondary); font-size: .95rem; margin-top: 4px; overflow-wrap: anywhere; }
.access-status h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 500; margin: 20px 0; }
.status-badge { display: inline-block; padding: 6px 12px; background: var(--bg-elevated); color: var(--accent); border-radius: 999px; font-size: .85rem; font-weight: 600; }
.status-details { border-top: 1px solid var(--border-strong); margin-top: 28px; overflow-wrap: anywhere; }
.status-details p { font-size: .95rem; }
.prose { line-height: 1.65; }
.prose h2:not(:first-child) { margin-top: 32px; }
.prose h3 { font-size: 1.1rem; font-weight: 600; font-family: var(--font-body); margin-bottom: 8px; }
.prose li { margin-bottom: 12px; }
.prose[id] { scroll-margin-top: 100px; }
.site-footer { display: flex; justify-content: space-between; gap: 40px; padding: 48px max(24px, calc((100% - 1200px) / 2)); border-top: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-secondary); font-size: .9rem; }
.footer-brand { font-weight: 600; letter-spacing: .2em; text-decoration: none; color: var(--text-primary); }
.site-footer p { max-width: 48ch; }
.site-footer nav { display: flex; align-items: start; flex-direction: column; }
.site-footer nav a { min-height: 44px; display: flex; align-items: center; }
.site-footer small { color: var(--text-muted); }
@media (max-width: 900px) {
  .app-header { flex-wrap: nowrap; gap: 8px; padding: 8px 16px; }
  .app-header > #statusPill { display: none; }
  body:not(.lab-page) > header #statusPill { display: none; }
  header .site-nav { flex-basis: auto; order: initial; flex-wrap: nowrap; justify-content: initial; margin-left: auto; }
  .site-nav .nav-links { display: none; }
  .site-nav .nav-user { flex-wrap: nowrap; }
  .lab-page > header .site-nav { flex-basis: auto; padding-top: 0; border-top: 0; flex-wrap: nowrap; }
  .lab-page > header .status { display: none; }
  .site-nav .nav-link { padding: 8px 10px; }
  .site-footer { flex-direction: column; gap: 24px; padding: 36px 20px; }
}

/* ---- The film and the print ----------------------------------------
   Two readings of one image. Light is the printed positive, for long
   stretches of text and for forms; dark is the radiograph on the lightbox,
   the negative anatomy is actually read from. Light is the base and dark
   overrides it, so a page still has a palette before theme.js runs.

   Both are scoped to body.site, which only the pages rendered by the Rails
   layout carry. The simulator workspace is served from the renderer's own
   HTML and never gets the class, so it keeps the palette it was tuned
   against. Violet stays there with it; out here the accent is the phosphor
   of an intensifying screen, inverted to a deep ink on paper. */
body.site {
  --bg-base: #f4f6f9; --bg-surface: #ffffff; --bg-elevated: #eceff4;
  --bg-row-alt: #f8fafc; --bg-row-hover: #eceff4;
  --text-primary: #121820; --text-secondary: #4b5663; --text-muted: #5d6874;
  --accent: #14503e; --accent-dim: #14503e14; --on-accent: #edf1f7;
  --danger: #a32f2e; --positive: #14503e;
  --border: #0c131c1a; --border-strong: #0c131c33; --border-accent: #14503e66;
  --shadow-1: 0 1px 2px #0c131c0f; --shadow-2: 0 18px 44px #0c131c14;
  --bg: #f4f6f9; --panel: #ffffff; --raise: #eceff4;
  --line: #0c131c1a; --line-hi: #0c131c33;
  --text: #121820; --muted: #4b5663; --dim: #5d6874;
  --good: #14503e; --bad: #a32f2e; --warn: #7a5618;
  --accent-soft: #14503e14; --accent-line: #14503e59;
}
[data-theme="dark"] body.site {
  --bg-base: #0b0f14; --bg-surface: #10151b; --bg-elevated: #161c23;
  --bg-row-alt: #10151b; --bg-row-hover: #1d242d;
  --text-primary: #edf1f7; --text-secondary: #c2ccd8; --text-muted: #8e99a8;
  --accent: #b6e4d3; --accent-dim: #b6e4d31f; --on-accent: #0c231c;
  --danger: #f2a7a2; --positive: #b6e4d3;
  --border: #ffffff14; --border-strong: #ffffff2b; --border-accent: #b6e4d366;
  --shadow-1: 0 1px 2px #05070a66; --shadow-2: 0 18px 44px #05070a8c;
  --bg: #0b0f14; --panel: #10151b; --raise: #161c23;
  --line: #ffffff14; --line-hi: #ffffff2b;
  --text: #edf1f7; --muted: #c2ccd8; --dim: #8e99a8;
  --good: #b6e4d3; --bad: #f2a7a2; --warn: #e3c17a;
  --accent-soft: #b6e4d31f; --accent-line: #b6e4d359;
}

/* The header and the footer keep the film in either theme: they are the
   site's frame, the black border a radiograph is mounted in, not part of
   the page inside it. It is also what lets the home page's title card run
   edge to edge with no seam at the top. */
body.site .app-header {
  /* Opaque, and deliberately not a backdrop-filter: a filtered element
     becomes the containing block for its fixed descendants, which would
     size the menu drawer to the header instead of the window. */
  background: #05070a;
  border-bottom: 1px solid #ffffff14;
  --panel: transparent; --bg: #05070a; --raise: #ffffff12;
  --text: #edf1f7; --muted: #9aa5b3; --dim: #828e9d;
  --line: #ffffff14; --line-hi: #ffffff2e;
  --accent: #b6e4d3; --accent-dim: #b6e4d31f; --good: #b6e4d3; --bad: #f2a7a2;
}
body.site .app-header .dot.ok { box-shadow: 0 0 0 3px #b6e4d324; }
body.site .site-nav .count, body.site .site-nav .theme-btn.active { color: #0c231c; }
body.site .site-footer {
  background: #05070a; border-top: 1px solid #ffffff1f; color: #9aa5b3;
}
body.site .site-footer .footer-brand { color: #edf1f7; }
body.site .site-footer a { color: #c2ccd8; }
body.site .site-footer small { color: #78838f; }

.work-email-warning { margin: 6px 0 10px; color: var(--text-muted); font-size: .8125rem; line-height: 1.5; }
.work-email-warning[hidden] { display: none; }