/* NHANES-MCP research app: the paper, ink and hand-drawn frames of the public demo, plus the workspace. */
:root {
  --bg: #f7f6f1; --card: #ffffff; --ink: #1d1d1b; --soft: #4a4a46; --muted: #67675f; --line: #e2e0d8;
  --accent: #0b6b57; --accent-soft: #e4f0ec; --hit: #c2410c; --hit-soft: #fde4d4;
  --warm: #8f4700; --warm-soft: #fff3e0; --bad: #b3361a; --bad-soft: #fdecea; --code: #f1efe8;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --hatch: #f2c94c;
  /* chart colours: Okabe-Ito order, told apart with colour-blindness */
  --series-1: #0072b2; --series-2: #d55e00; --series-3: #009e73; --series-4: #cc79a7;
  --series-5: #e69f00; --series-6: #56b4e9; --series-7: #8a6d00; --series-8: #5c5c57;
  --div-neg: #2166ac; --div-mid: #f2f1ec; --div-pos: #b2182b;
  --bar-h: 57px;
  --ui: 1;  /* the workspace grows with wide screens (see .work); everything else stays at 1 */
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #171715; --card: #20201d; --ink: #f1efe8; --soft: #cfcdc4; --muted: #a29f95; --line: #3a3934;
          --accent: #4fb89d; --accent-soft: #1d3530; --code: #2a2a26; --hit: #f08a5b; --hit-soft: #3d2618;
          --warm: #f0b26a; --warm-soft: #3a2b18; --bad: #f08a72; --bad-soft: #3d221c; --hatch: #6b5a1e;
          --series-1: #5fa8e0; --series-2: #f08a5b; --series-3: #3fc59d; --series-4: #e0a3c8;
          --series-5: #f2b84b; --series-6: #8fd0f5; --series-7: #d8c25a; --series-8: #b8b6ad;
          --div-neg: #6fa8dc; --div-mid: #2c2c28; --div-pos: #e8746b; }
  .sketch { background: #f7f6f1; border-radius: 12px; }
}
* { box-sizing: border-box; }
html { scroll-padding-top: 70px; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--accent); }
:lang(ko) { word-break: keep-all; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 620px; }
h1 { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 16px; }
h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 16px; }
h3 { font-size: 19px; margin: 0 0 8px; }
.lead { color: var(--soft); font-size: 20px; margin: 0 0 24px; max-width: 32em; }
.note { color: var(--muted); font-size: 14px; }
.small { font-size: 14px; }
.sub { color: var(--soft); max-width: 46em; margin: 0 0 12px; }
section { padding: 48px 0 8px; }
.err { background: var(--bad-soft); color: var(--bad); border-radius: 10px; padding: 10px 12px; }
.ok-line { background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 10px 12px; }
.warn { background: var(--warm-soft); color: var(--warm); border-radius: 10px; padding: 8px 12px; font-size: 15px; }

/* top bar */
.bar { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.bar .wrap { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; max-width: none; }
body:not([data-page="workspace"]) .bar .wrap { max-width: 1120px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none;
         white-space: nowrap; }
.brand small { font-weight: 500; color: var(--muted); font-size: 14px; }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.bar nav a:not(.btn), .linklike { color: var(--soft); text-decoration: none; font: 600 15px system-ui, sans-serif;
                                  background: none; border: 0; padding: 0; cursor: pointer; }
.bar nav a:not(.btn):hover, .linklike:hover, .bar nav a[aria-current="page"] { color: var(--accent); }
.badge { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; font-size: 12px;
         line-height: 20px; text-align: center; color: #fff; background: var(--hit); }
.lang { font: 600 14px system-ui, sans-serif; color: var(--ink); background: var(--card); border: 2px solid var(--line);
        border-radius: 10px; padding: 6px 8px; cursor: pointer; max-width: 120px; }
.lang:hover, .lang:focus { border-color: var(--accent); }
@media (max-width: 900px), (pointer: coarse) { .lang { font-size: 16px; } }  /* phones zoom the page into inputs under 16 px */
.bar .side-toggle { display: none; }

/* buttons */
.btn { display: inline-block; padding: 12px 20px; border-radius: 10px; font-family: inherit; font-size: 16px;
       font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
       border: 2px solid var(--ink); color: var(--ink); background: var(--card); cursor: pointer; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); color: #fff; }
.btn.small { padding: 8px 14px; font-size: 14px; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.chip { font: 600 calc(14px * var(--ui)) system-ui, sans-serif; padding: 6px 12px; border-radius: 9px; border: 2px solid var(--line);
        background: var(--card); color: var(--soft); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px;
            border: 2px solid var(--line); background: var(--card); color: var(--soft); cursor: pointer; padding: 0; }
.icon-btn:hover, .icon-btn.on { border-color: var(--accent); color: var(--accent); }
.icon-btn.on { background: var(--accent-soft); }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
       stroke-linecap: round; stroke-linejoin: round; }

/* hand-drawn frames: app.js draws each one to the size of its box, with the pen of the drawings */
.hand { position: relative; --pen: var(--ink); }
.hand > svg.frame, .hand-btn > svg.frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible;
                                           pointer-events: none; }
.frame .line { fill: none; stroke: var(--pen); stroke-width: 2; stroke-linecap: round; }
.frame .hatch { fill: none; stroke: var(--hatch); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.drawn-now > svg.frame .line { stroke-dasharray: 1; animation: pen 0.8s ease-out both; }
@keyframes pen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .drawn-now > svg.frame .line { animation: none; } }
.hand.amber { --pen: var(--warm); }
.hand.green { --pen: var(--accent); }
.btn.hand-btn { position: relative; border-color: transparent; background: transparent; color: var(--accent); --pen: var(--accent); }
.btn.hand-btn:hover { border-color: transparent; color: var(--ink); }
.btn.hand-btn > span { position: relative; }

/* landing */
.hero { background: var(--card); border-bottom: 1px solid var(--line); padding-top: 40px; padding-bottom: 36px; }
.kicker { display: inline-block; margin: 0 0 12px; padding: 3px 10px; border-radius: 6px; font-size: 13px; font-weight: 700;
          letter-spacing: 0.04em; text-transform: uppercase; color: var(--warm); background: var(--warm-soft); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.free-line { margin: 18px 0 0; color: var(--soft); font-size: 15px; }
.free-line a { font-weight: 650; white-space: nowrap; }
.sketch { width: 100%; height: auto; display: block; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.value { background: var(--card); padding: 18px 20px; }
.value h3 { color: var(--accent); }
.value p { margin: 0; color: var(--soft); }
.checks-table { max-width: 760px; }
.checks-table td.num, .checks-table th.num { text-align: right; }
.checks-table td.same { color: var(--accent); font-weight: 700; }
.how { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.how li { background: var(--card); padding: 16px 18px 16px 58px; position: relative; counter-increment: step; color: var(--soft); }
.how li::before { content: counter(step); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%;
                  background: var(--accent-soft); color: var(--accent); font-weight: 800; text-align: center; line-height: 30px; }
.notice { margin: 18px 0 0; padding: 10px 14px; background: var(--warm-soft); color: var(--soft); font-size: 14px; max-width: 62em;
          border-radius: 10px; }

/* forms and public cards */
.public { padding-top: 36px; }
.card { background: var(--card); padding: 24px 26px; }
.card + .card { margin-top: 18px; }
.form { display: grid; gap: 14px; margin-top: 8px; }
.form label { display: grid; gap: 6px; font-weight: 650; font-size: 15px; color: var(--soft); }
.form .hint { font-weight: 400; font-size: 13.5px; color: var(--muted); }
.input { font: 16px system-ui, sans-serif; color: var(--ink); background: var(--card); border: 2px solid var(--line);
         border-radius: 10px; padding: 10px 12px; width: 100%; }
.input:focus { border-color: var(--accent); outline: none; }
textarea.input { resize: vertical; line-height: 1.45; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink); }
.form .check input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* the request form: a question with its hint and error (GOV.UK's pattern), the role as radios, the notice */
.form .field { display: grid; gap: 6px; min-width: 0; }
.form .field > .hint, .form .field-error, .form .form-notice { margin: 0; }
.form .field-error { color: var(--bad); font-weight: 700; font-size: 15px; }
.form .field.has-error { border-left: 4px solid var(--bad); padding-left: 12px; }
.form .has-error .input { border-color: var(--bad); }
.form .role-choice { border: 0; margin: 0; padding: 0; }
.form .role-choice legend { padding: 0; margin: 0 0 4px; font-weight: 650; font-size: 15px; color: var(--soft); }
.form label.radio { display: flex; align-items: center; gap: 10px; margin: 0; padding: 3px 0; font-weight: 400;
                    color: var(--ink); cursor: pointer; }
.form label.radio input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.form .form-notice { color: var(--soft); font-size: 15px; line-height: 1.5; }
.error-summary { border: 3px solid var(--bad); border-radius: 10px; padding: 12px 16px; background: var(--card); }
.error-summary:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.error-summary h2 { margin: 0 0 6px; font-size: 18px; color: var(--ink); }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { color: var(--bad); font-weight: 700; }
.points { padding-left: 20px; color: var(--soft); }
.points li { margin-bottom: 6px; }
.privacy-text section { padding: 14px 0 0; }
.privacy-text h2 { font-size: 20px; margin: 0 0 6px; }
.privacy-text p { margin: 0; color: var(--soft); }
.back { display: inline-block; margin: 0 0 14px; font-weight: 650; text-decoration: none; }

/* workspace: on wide screens everything in it grows with the screen (--ui), so a line keeps its length in words */
.work { --side-w: calc(300px * var(--ui)); display: grid; grid-template-columns: var(--side-w) 0 minmax(0, 1fr);
        min-height: calc(100vh - var(--bar-h)); min-height: calc(100dvh - var(--bar-h)); font-size: calc(17px * var(--ui)); }
@media (min-width: 1600px) { .work { --ui: 1.08; } }
@media (min-width: 2000px) { .work { --ui: 1.18; } }
@media (min-width: 2400px) { .work { --ui: 1.28; } }
.side { background: var(--card); border-right: 1px solid var(--line); padding: 14px 12px 10px; position: sticky; top: var(--bar-h);
        height: calc(100vh - var(--bar-h)); height: calc(100dvh - var(--bar-h)); overflow-y: auto; display: flex;
        flex-direction: column; gap: 10px; }
.side .newchat { width: 100%; }
.side h2 { font-size: calc(13px * var(--ui)); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 6px 4px 4px; }
.side-list { flex: 1 1 auto; min-height: 7em; overflow-y: auto; }
.chats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chats li { display: flex; align-items: center; gap: 4px; border-radius: 9px; }
.chats li:hover, .chats li.open { background: var(--code); }
.chats a { flex: 1; min-width: 0; padding: 7px 8px; color: var(--ink); text-decoration: none; font-size: calc(15px * var(--ui));
           line-height: 1.35; overflow-wrap: anywhere; }
.chats a .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chats li.open a { font-weight: 700; }
.chats .star { color: var(--warm); margin-right: 4px; }
.chat-menu { position: relative; margin: 0; }
.chat-menu summary { list-style: none; cursor: pointer; padding: 4px 9px; border-radius: 7px; color: var(--muted); font-weight: 800; }
.chat-menu summary::-webkit-details-marker { display: none; }
.chat-menu[open] summary, .chat-menu summary:hover { color: var(--accent); background: var(--card); }
.chat-menu .menu { position: absolute; right: 0; top: 30px; z-index: 5; background: var(--card); border: 1px solid var(--line);
                   border-radius: 10px; padding: 6px; display: grid; min-width: 210px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12); }
.chat-menu .menu button, .chat-menu .menu a { text-align: left; font: 500 14px system-ui, sans-serif; padding: 8px 10px; border: 0;
                                              border-radius: 7px; background: none; color: var(--ink); cursor: pointer; text-decoration: none; }
.chat-menu .menu button:hover, .chat-menu .menu a:hover { background: var(--code); }
.chat-menu .menu .bad { color: var(--bad); }
/* under the list: help and the way to write to us; then the account */
.side-help { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.side-links { display: grid; gap: 0; }
.side-links a, .side-links button { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 8px;
                                    background: none; text-align: left; cursor: pointer; color: var(--soft); text-decoration: none;
                                    font: 600 calc(14px * var(--ui)) system-ui, sans-serif; }
.side-links a:hover, .side-links button:hover { color: var(--accent); background: var(--code); }
.side-foot { padding-top: 8px; border-top: 1px solid var(--line); display: grid; gap: 2px; font-size: 14px; }
.side-foot a, .side-foot button { justify-self: start; padding: 5px 8px; color: var(--soft); text-decoration: none;
                                  font: 600 calc(14px * var(--ui)) system-ui, sans-serif; }
.side-foot a:hover, .side-foot button:hover { color: var(--accent); }
.side-foot .in-drawer { display: none; }  /* the top bar has them on a wide screen */
/* the line between the chat list and the chat: drag it, or use the arrow keys on it */
.side-resizer { position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h)); height: calc(100dvh - var(--bar-h)); width: 12px;
                margin-left: -6px; z-index: 6; cursor: col-resize; touch-action: none; }
.side-resizer::after { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 3px; border-radius: 2px; }
.side-resizer:hover::after, .side-resizer:focus-visible::after, body.resizing .side-resizer::after { background: var(--accent); }
.side-resizer:focus-visible { outline: none; }
body.resizing { cursor: col-resize; user-select: none; }
.main { display: flex; flex-direction: column; min-width: 0; }
.thread { flex: 1; width: 100%; max-width: calc(1000px * var(--ui)); margin: 0 auto; padding: 26px 28px 8px; display: grid; gap: 18px;
          align-content: start; }
.main.is-home .thread { max-width: calc(1360px * var(--ui)); padding-top: calc(34px * var(--ui)); padding-bottom: 36px; }
.composer-wrap { position: sticky; bottom: 0; z-index: 4; width: 100%; max-width: calc(1000px * var(--ui)); margin: 0 auto; padding: 10px 28px 12px;
                 background: linear-gradient(to bottom, transparent, var(--bg) 22%); }
.composer-wrap.at-home { position: static; max-width: none; margin: 0; padding: 0; background: none; }  /* the width of the skill grid below */
.composer { display: flex; flex-direction: column; background: var(--card); }
.composer:focus-within { --pen: var(--accent); }
.composer textarea { position: relative; display: block; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink);
                     font-family: inherit; font-size: max(16px, calc(17px * var(--ui))); line-height: 1.45; resize: none;
                     max-height: 40vh; padding: 12px 14px 4px; }
.composer-bar { position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 8px 8px 8px; }
.composer-hint, .composer-left { font-size: calc(13px * var(--ui)); color: var(--muted); }
.composer-left { margin-left: auto; }
.composer-left.plenty { opacity: 0.85; }
.composer-left.none { color: var(--bad); font-weight: 650; }
.example-note { margin: 10px 14px 0; font-size: calc(13px * var(--ui)); font-weight: 650; color: var(--accent); }
/* the variables that match what is being typed: above the box, so the phone's keyboard never covers them */
.composer { position: relative; }
.suggest { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 6px); z-index: 30; margin: 0; padding: 4px;
           list-style: none; max-height: min(320px, 45vh); overflow-y: auto; background: var(--card); color: var(--ink);
           border: 2px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(20, 20, 18, 0.18); }
.suggest[hidden] { display: none; }
.suggest.below { top: calc(100% + 6px); bottom: auto; }
.suggest li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--accent-soft); }
.sg-name { font-weight: 650; overflow-wrap: anywhere; }
.sg-meta { color: var(--muted); font-size: calc(13px * var(--ui)); }
.chats-kept { margin: 8px 8px 0; font-size: calc(12.5px * var(--ui)); color: var(--muted); }
.chats-kept.near { color: var(--bad); font-weight: 650; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.composer .btn.hand-btn.send { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; font-size: calc(17px * var(--ui)); }
.btn.hand-btn > .ico { position: relative; }
.upstatus { margin: 6px 2px 0; font-size: calc(14px * var(--ui)); color: var(--muted); }
.upstatus.err { color: var(--bad); }
.foot-line { margin: 8px 2px 0; font-size: calc(12.5px * var(--ui)); color: var(--muted); }
body[data-page="workspace"] #foot { display: none; }
/* a new chat: the question first, then where to start */
.welcome { container-type: inline-size; }
.welcome h1 { font-size: calc(clamp(26px, 2.4vw, 36px) * var(--ui)); margin-bottom: 6px; }
.welcome > .sub { margin-bottom: 16px; font-size: calc(17px * var(--ui)); }
/* from the name in the bar to the data in the question: Biobank MCP, then its first data source, NHANES */
.home-source { margin: 0 0 calc(10px * var(--ui)); }
.home-source-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--accent);
                    font-size: calc(15px * var(--ui)); letter-spacing: .01em; }
.home-source-note { margin: 2px 0 0; color: var(--muted); font-size: calc(14px * var(--ui)); }
.home-more { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.home-more .chip { text-decoration: none; }
.skill-group { margin-top: calc(34px * var(--ui)); padding: 0; }
.skill-group h2 { font-size: calc(20px * var(--ui)); margin: 0 0 2px; }
.skill-group > .sub { margin: 0 0 12px; font-size: calc(15px * var(--ui)); }
.skills { display: grid; grid-template-columns: 1fr; gap: calc(14px * var(--ui)); }
@container (min-width: 560px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1100px) { .skills { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.skill { position: relative; background: var(--card); padding: calc(15px * var(--ui)) calc(17px * var(--ui)); display: flex; flex-direction: column; gap: 8px; }
/* the title opens the skill; its click area is the whole card, under the examples */
.skill-open { all: unset; cursor: pointer; font: inherit; color: inherit; }
.skill-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.skill-open:hover { color: var(--accent); }
.skill:has(.skill-open:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.skill .examples { position: relative; z-index: 1; }
.skill-how { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; }  /* WCAG 2.5.8: 24 px */
.skill-head { display: flex; align-items: center; gap: 10px; }
.skill-head .ico { width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); color: var(--accent); }
.skill h3 { font-size: calc(17.5px * var(--ui)); margin: 0; }
.skill p { margin: 0; color: var(--soft); font-size: calc(15px * var(--ui)); }
.skill .examples { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; }
.example { display: block; width: 100%; text-align: left; font: calc(14.5px * var(--ui))/1.4 system-ui, sans-serif; color: var(--accent);
           background: var(--accent-soft); border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.example span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.example:hover { color: var(--ink); }
.usage { margin: 18px 0 0; }
/* the coloured badge of a skill's group, as on machinelibrary.ai/mcp (product review of 5 October 2026) */
.skill-badge { justify-self: start; align-self: flex-start; display: inline-block; padding: 2px 9px; border-radius: 6px;
               font: 700 calc(12px * var(--ui))/1.6 system-ui, sans-serif; letter-spacing: 0.02em;
               color: var(--accent); background: var(--accent-soft); }
.skill-badge.research { color: var(--hit); background: var(--hit-soft); }
.skill.research .skill-head .ico, .skill-title.research .ico { color: var(--hit); }
.skill .skill-open { text-decoration: none; }
/* a skill's own chat */
.skill-home .back { display: inline-block; margin-bottom: 10px; text-decoration: none; font-weight: 650; }
.skill-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.skill-title h1 { display: flex; align-items: center; gap: 12px; margin: 0; }
.skill-title .skill-badge { align-self: center; }
.skill-title h1 .ico { width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); color: var(--accent); }
.skill-home > .sub { margin: 8px 0 4px; }
.skill-home > .note { margin: 0 0 14px; }
.skill-examples { margin-top: calc(26px * var(--ui)); padding: 0; }
.skill-examples h2 { font-size: calc(18px * var(--ui)); margin: 0 0 2px; }
.skill-examples .examples { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.skill-examples .example span { -webkit-line-clamp: unset; display: block; }
.example mark.slot { background: none; color: inherit; font-weight: 700; text-decoration: underline dotted;
                     text-underline-offset: 3px; }
.skill-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 2px 10px;
              border-bottom: 1px solid var(--line); color: var(--soft); font-size: calc(14px * var(--ui)); }
.skill-line .skill-name { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.skill-line .skill-name .ico { width: 18px; height: 18px; color: var(--accent); }
.skill-line .skill-desc { flex: 1 1 260px; min-width: 0; }
/* the chats by when they were used */
.chats-when { margin: 12px 8px 4px; font-size: calc(12px * var(--ui)); font-weight: 700; letter-spacing: 0.04em;
              text-transform: uppercase; color: var(--muted); }
.side-list > h2 + .chats-when { margin-top: 4px; }
/* text that would go over a question not yet sent */
.draft-quote { margin: 6px 0 12px; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--code);
               border-radius: 0 8px 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.help-links { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }

/* messages */
.msg-user { justify-self: end; max-width: 80%; background: var(--accent-soft); color: var(--ink); border-radius: 14px 14px 4px 14px;
            padding: 10px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.answer { background: var(--card); padding: 18px 22px; min-width: 0; }
.ai-label { margin: 0 0 6px; font-size: calc(12px * var(--ui)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.working { display: grid; gap: 10px; }
.working-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.working-title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--accent); font-weight: 650; }
.stop-btn, .retry-btn { display: inline-flex; align-items: center; gap: 6px; }
.stop-btn .ico, .retry-btn .ico { width: 16px; height: 16px; }
.offline-line { margin: 0; color: var(--bad); font-size: calc(14px * var(--ui)); }
.offline-line[hidden] { display: none; }
.working .seconds { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.working .note { font-weight: 400; margin: 0; }
.working .note:empty { display: none; }
/* what the answer is doing: the same four steps as on the page "How it works" */
.progress-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.progress-steps li { display: grid; grid-template-columns: calc(22px * var(--ui)) minmax(0, 1fr); gap: 8px; align-items: start;
                     color: var(--muted); }
.progress-steps .mark { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); margin-top: 0.2em; border-radius: 50%;
                        border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
.progress-steps .done { color: var(--soft); }
.progress-steps .done .mark { border-color: var(--accent); background: var(--accent); color: var(--card); }
.progress-steps .done .mark .ico { width: 75%; height: 75%; stroke-width: 3.5; }
.progress-steps .now { color: var(--ink); font-weight: 650; }
.progress-steps .now .mark { border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
.progress-steps .tools { display: grid; gap: 2px; list-style: none; margin: 3px 0 0; padding: 0; font-weight: 400;
                         color: var(--soft); font-size: calc(14px * var(--ui)); }
.progress-steps .tools li { display: block; overflow-wrap: anywhere; }  /* one analysis a line, not the steps' grid */
.dots { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--accent-soft);
        border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dots, .progress-steps .now .mark { animation: none; } }
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .tablewrap { margin: 0 0 12px; }
.md h3, .md h4, .md h5, .md h6 { margin: 16px 0 8px; font-size: calc(17px * var(--ui)); }
.md h3 { font-size: calc(19px * var(--ui)); }
.md ul, .md ol { padding-left: 22px; }
.md li { margin-bottom: 4px; }
.md li > ul, .md li > ol { margin: 4px 0 0; }
.md blockquote { border-left: 3px solid var(--line); padding-left: 12px; color: var(--soft); }
.md code { background: var(--code); border-radius: 5px; padding: 1px 5px; }
.md pre code { background: none; padding: 0; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
pre.code { background: var(--code); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; margin: 8px 0; max-height: 340px; overflow: auto; }
code, pre { font-family: var(--mono); font-size: calc(13px * var(--ui)); overflow-wrap: anywhere; }
.facts-box { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--code); }
.facts-lines .needs-choice .facts-tool, .facts-lines .not-possible .facts-tool { color: var(--bad); }
/* the answer's next steps: they put a question in the box, they never send it */
.next-steps { margin: 14px 0 0; }
.next-label { margin: 0 0 6px; font-size: calc(13px * var(--ui)); font-weight: 700; color: var(--muted); }
.next-steps ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.next-step { text-align: left; font-weight: 600; line-height: 1.35; max-width: 100%; }
.next-step .ico { flex: none; width: 16px; height: 16px; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.err .retry-btn { margin-left: 6px; vertical-align: middle; }
.facts-label { margin: 0 0 6px; font-size: calc(12px * var(--ui)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.facts-lines { margin: 0; padding-left: 18px; font-size: calc(15px * var(--ui)); }
.facts-lines li { margin-bottom: 3px; }
.facts-tool { font-weight: 700; }
.facts-notes { list-style: none; margin: 8px 0 0; padding: 0; font-size: calc(13.5px * var(--ui)); color: var(--warm); }
.facts-notes li { margin-bottom: 3px; }
.facts-box details { margin: 8px 0 0; }
.facts-box summary { font-size: calc(14px * var(--ui)); color: var(--accent); }
.msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.feedback { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.feedback-form { flex-basis: 100%; display: grid; gap: 8px; margin-top: 4px; }
.feedback-form .row { display: flex; gap: 8px; }
.tools-used { margin: 10px 0 0; font-size: calc(14px * var(--ui)); }
.results { margin: 14px 0 0; display: grid; gap: 16px; }
.result { border-top: 1px dashed var(--line); padding-top: 12px; min-width: 0; }
.result h3 { font-size: calc(16px * var(--ui)); margin: 0 0 6px; color: var(--accent); }
.result .summary { margin: 0 0 8px; padding-left: 20px; font-size: calc(15px * var(--ui)); }
.result .warnings { list-style: none; padding: 0; margin: 0 0 8px; font-size: calc(13.5px * var(--ui)); color: var(--warm); }
.result-error { color: var(--bad); font-size: calc(15px * var(--ui)); }
.table-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.table-head h4 { margin: 0; font-size: calc(15px * var(--ui)); }
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: calc(14px * var(--ui)); margin: 6px 0 4px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--soft); font-weight: 650; background: var(--code); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.refs ol { padding-left: 22px; margin: 6px 0; font-size: calc(14px * var(--ui)); }
.refs li { margin-bottom: 6px; }
.notice-line { color: var(--soft); font-size: calc(14px * var(--ui)); background: var(--code); border-radius: 10px; padding: 8px 12px; margin: 0; }

/* charts */
.figure { margin: 10px 0; max-width: calc(640px * var(--ui)); }
.figure figcaption { font-weight: 650; font-size: calc(14px * var(--ui)); margin-bottom: 4px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; font: 9px system-ui, sans-serif; }
.chart .axis text { fill: var(--muted); }
.chart .axis-text { fill: var(--soft); }
.chart .axis-label { fill: var(--soft); font-weight: 600; }
.chart .grid { stroke: var(--line); stroke-width: 0.6; }
.chart .baseline { stroke: var(--muted); stroke-width: 1; }
.chart .accent { fill: var(--accent); }
.chart .dot { fill: var(--accent); fill-opacity: 0.35; }
.chart .fit { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.chart .tree { fill: none; stroke: var(--soft); stroke-width: 1.5; stroke-linejoin: round; }
.chart .cut { stroke: var(--warm); stroke-width: 1; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.accent { fill: none; stroke: var(--accent); }
.chart .ring { stroke: var(--card); stroke-width: 2; }
.chart .hit-area { fill: transparent; }
.chart-ylabel { font-size: calc(12px * var(--ui)); color: var(--muted); margin-bottom: 2px; }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0; margin: 0 0 6px; font-size: calc(13px * var(--ui)); color: var(--soft); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.key.as-line { height: 3px; width: 16px; border-radius: 2px; }
.f1 { fill: var(--series-1); } .f2 { fill: var(--series-2); } .f3 { fill: var(--series-3); } .f4 { fill: var(--series-4); }
.f5 { fill: var(--series-5); } .f6 { fill: var(--series-6); } .f7 { fill: var(--series-7); } .f8 { fill: var(--series-8); }
.k1 { stroke: var(--series-1); } .k2 { stroke: var(--series-2); } .k3 { stroke: var(--series-3); } .k4 { stroke: var(--series-4); }
.k5 { stroke: var(--series-5); } .k6 { stroke: var(--series-6); } .k7 { stroke: var(--series-7); } .k8 { stroke: var(--series-8); }
.key.f1 { background: var(--series-1); } .key.f2 { background: var(--series-2); } .key.f3 { background: var(--series-3); }
.key.f4 { background: var(--series-4); } .key.f5 { background: var(--series-5); } .key.f6 { background: var(--series-6); }
.key.f7 { background: var(--series-7); } .key.f8 { background: var(--series-8); }

/* settings and admin */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.settings .card h2, .admin h2 { font-size: 20px; margin: 0 0 10px; }
.radio { display: flex; gap: 10px; align-items: center; margin: 6px 0; cursor: pointer; }
.radio input { accent-color: var(--accent); width: 18px; height: 18px; }
.danger { --pen: var(--bad); }
.danger h2 { color: var(--bad); }
.admin-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.admin-item { background: var(--card); padding: 16px 18px; }
.admin-item .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.admin-item .purpose { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-item.status-declined { opacity: 0.7; }
.tag { font-size: 12px; font-weight: 700; color: var(--soft); background: var(--code); border-radius: 6px; padding: 2px 8px; }
.tag.new { color: var(--warm); background: var(--warm-soft); }
.tag.approved { color: var(--accent); background: var(--accent-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.made-link { background: var(--card); padding: 16px 18px; margin: 0 0 18px; }
.made-link code { display: block; background: var(--code); border-radius: 8px; padding: 8px 10px; margin: 8px 0;
                  font-family: var(--mono); overflow-wrap: anywhere; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.tabs .badge { margin-left: 2px; }
.badge.quiet { background: var(--code); color: var(--soft); }
.made-link .dismiss { float: right; margin: 0 0 8px 12px; }
.input:disabled { background: var(--code); color: var(--muted); }
.tag.owner, .tag.admin { color: var(--accent); background: var(--accent-soft); }
.tag.off { color: var(--bad); background: var(--bad-soft); }
.tag.change { color: var(--warm); background: var(--warm-soft); }
.admin-item .small { margin: 4px 0 0; }
.admin .search { max-width: 420px; margin-bottom: 16px; }
.inline-form { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); max-width: 560px; }
.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.add-grid .card + .card { margin-top: 0; }
@media (max-width: 900px) { .add-grid { grid-template-columns: 1fr; } }
/* what public sources say about a person who asks: set apart from what the person wrote */
.who { margin: 10px 0 4px; padding: 10px 12px; border-left: 3px solid var(--line); background: var(--code);
       border-radius: 0 8px 8px 0; }
.who .who-text { margin: 6px 0; overflow-wrap: anywhere; }
.who .small { margin: 4px 0; overflow-wrap: anywhere; }
.who .btn { margin-top: 6px; }
.tag.match-high { color: var(--accent); background: var(--accent-soft); }  /* the others stay grey: no verdict */
.tg-link .qr { display: block; width: 160px; height: 160px; margin: 10px 0; border-radius: 8px; background: #fff; }

/* Until the script draws a page the view is empty, and the footer showed at the top, then jumped down (a layout
   shift of 0.35 on a phone). The view keeps a screen's height from the start; the workspace sizes itself. */
body:not([data-page="workspace"]) #view { min-height: calc(100vh - var(--bar-h, 61px)); }
#foot { margin-top: 56px; padding: 22px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
#foot details { margin: 8px 0; }
#foot summary { cursor: pointer; font-weight: 650; }
details summary { cursor: pointer; min-height: 24px; }  /* a target of 24 px or more (WCAG 2.2, 2.5.8) */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .values, .how { grid-template-columns: 1fr; }
  .work { grid-template-columns: 1fr; }
  .side { display: none; position: fixed; z-index: 15; left: 0; top: var(--bar-h); width: min(340px, 88vw);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
  .side.shown { display: flex; }
  .side-list { flex: none; min-height: 0; overflow: visible; }  /* the drawer scrolls as one: no scroll inside a scroll */
  .side-resizer { display: none; }
  .side-foot .in-drawer { display: block; }
  body[data-page="workspace"] .bar .side-toggle { display: inline-block; }
  body[data-page="workspace"] .bar nav a:not(.btn), body[data-page="workspace"] .bar nav .linklike { display: none; }
}
@media (max-width: 600px) {
  h2 { font-size: 24px; } .lead { font-size: 18px; }
  .brand small { display: none; }
  .bar .wrap { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .bar nav { gap: 10px; }
  .bar nav a:not(.btn), .bar nav .linklike { display: none; }
  .hero { padding-top: 24px; }
  .card { padding: 18px; }
  .thread { padding: 18px 14px 6px; }
  .composer-wrap { padding: 8px 12px 10px; }
  .composer .btn.hand-btn.send { padding: 9px 16px; }
  .composer-hint { display: none; }
  .composer-left.plenty { display: none; }  /* room for Send; the count shows again once few questions are left */
  .example span { display: block; -webkit-line-clamp: unset; overflow: visible; }  /* narrow windows: examples in full */
  .answer { padding: 14px; }
  .msg-user { max-width: 92%; }
}
@media (max-width: 480px) {  /* iPhone Pro Max (430-440 px): Sign in, the language and the name pushed the page sideways */
  .bar nav .btn:not(.primary) { display: none; }
}
@media (max-width: 420px) {
  body[data-page="workspace"] .brand { font-size: 0; gap: 0; }  /* the chat list button needs the room in every language */
}
@media (max-width: 400px) {  /* the logo, the menu and the language still fit in one line */
  .bar .wrap, .bar nav { gap: 8px; }
  .brand { font-size: 16px; gap: 8px; }
}
@media (max-width: 374px) {  /* the narrowest phones: the logo alone (the name is still read out) */
  .brand { font-size: 0; gap: 0; }
}
a.chip { text-decoration: none; }
.admin h2 { margin-top: 28px; }
.use-upload { margin-left: 4px; vertical-align: middle; }
.side-disclaimer { margin: 6px 0 0; padding: 0 8px; font-size: 13px; color: var(--muted); }
.side-disclaimer summary { font-weight: 600; color: var(--soft); }
.side-disclaimer p { margin: 6px 0 0; }
@media (hover: none) {  /* touch screens: no hover to show the rest, so examples are shown in full */
  .example span { display: block; -webkit-line-clamp: unset; overflow: visible; }
}

/* touch screens: targets a finger can hit (44 px), and no zoom when a field gets the focus (iOS zooms below 16 px) */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .chip { min-height: 40px; }
  .btn.small { padding-top: 11px; padding-bottom: 11px; }
  .chats a { padding-top: 11px; padding-bottom: 11px; }
  .chat-menu summary { padding: 10px 14px; }
  .chat-menu .menu button, .chat-menu .menu a { padding: 12px; }
  .side-links a, .side-links button, .side-foot a, .side-foot button { min-height: 44px; display: flex; align-items: center; }
  .side-disclaimer summary { padding: 8px 0; }
  .bar nav a:not(.btn), .bar nav .linklike { padding-top: 8px; padding-bottom: 8px; }  /* a taller target, same line */
  .lang, .input, select.input { font-size: 16px; }
}

/* dialogs: connecting an assistant, writing to us */
dialog.sheet { border: 0; padding: 0; border-radius: 16px; background: var(--card); color: var(--ink); width: min(720px, calc(100vw - 32px));
               max-height: min(88vh, 920px); max-height: min(88dvh, 920px); overflow: auto; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3); }
dialog.sheet::backdrop { background: rgba(20, 20, 18, 0.5); }
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
              padding: 18px 20px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-size: 21px; margin: 0; }
.sheet-body { padding: 16px 20px 22px; display: grid; gap: 14px; }
.sheet-body p { margin: 0; }
.kind-choice { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.kind-choice legend { padding: 0; margin: 0 0 6px; font-weight: 650; font-size: 15px; color: var(--soft); }
.kind-choice label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 10px;
                     cursor: pointer; font-weight: 600; font-size: 15px; color: var(--soft); }
.kind-choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.kind-choice input { accent-color: var(--accent); margin: 0; }
@media (max-width: 600px) {  /* a sheet from the bottom of the screen */
  dialog.sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 92vh; max-height: 92dvh; }
  .sheet-head, .sheet-body { padding-left: 16px; padding-right: 16px; }
}

/* settings: a choice with a line that explains it */
.radio.explained { align-items: flex-start; }
.radio.explained input { margin-top: 4px; flex: none; }
.radio.explained small { display: block; color: var(--muted); font-size: 14px; }

/* the administrators' list of ideas and problem reports */
.tag.problem { color: var(--bad); background: var(--bad-soft); }
.tag.feature { color: var(--accent); background: var(--accent-soft); }

/* how it works: pictures first. The path of one real question plays once (and again on request); then the skills
   as tiles, the words of the answers with small drawings, what the data cannot tell, and the ways on. */
.how-page h1 { margin-bottom: 6px; }
.how-page .lead { margin-bottom: 20px; }
.how-page > .wrap > section:not(.pipe) { padding: 40px 0 0; }
.how-page h2 { font-size: 24px; margin-bottom: 14px; }
.how-page .group-title { font-size: 15px; margin: 14px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pipe { padding: 0; }
.pipe-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1.3fr) 40px minmax(0, 1fr);
            align-items: stretch; }
.station { background: var(--card); padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-head { display: flex; align-items: center; gap: 8px; }
.st-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--card); font-weight: 800;
          font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.st-head h3 { font-size: 16px; line-height: 1.25; margin: 0; }
.st-art { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.st-bubble { margin: 0; align-self: flex-end; background: var(--accent-soft); border-radius: 14px 14px 4px 14px; padding: 10px 12px;
             font-size: 15px; }
.st-options { display: grid; gap: 6px; }
.st-option { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 2px solid var(--line); border-radius: 9px;
             font: 600 14px system-ui, sans-serif; color: var(--muted); }
.st-option .ico { width: 16px; height: 16px; stroke-width: 3; }
.st-option.chosen { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.st-sub { margin: 0; font-size: 13.5px; color: var(--soft); }
.st-chart { display: block; width: 100%; height: auto; overflow: visible; }
.st-dot { fill: var(--series-1); fill-opacity: 0.55; }
.st-track { fill: var(--code); }
.st-fill { fill: var(--accent); }
.st-value { fill: var(--ink); font: 700 12px system-ui, sans-serif; }
.station .facts-label { margin: 0; }
.st-big { margin: 0; font-size: 40px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-ok { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: 15px; }
.st-ok .ico { width: 20px; height: 20px; stroke-width: 3; }
.pipe-arrow { align-self: center; justify-self: center; width: 40px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 2;
              stroke-linecap: round; stroke-linejoin: round; }
.pipe-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pipe-foot .note { margin: 0; }
/* the play: each part comes in turn, the arrows draw themselves, the bar fills, the check appears last */
.pipe.play .station { animation: rise 0.45s ease-out both; }
.pipe.play .s2 { animation-delay: 0.7s; }
.pipe.play .s3 { animation-delay: 1.5s; }
.pipe.play .s4 { animation-delay: 2.6s; }
.pipe.play .pipe-arrow path { stroke-dasharray: 1; animation: pen 0.4s ease-out both; }
.pipe.play .a1 path { animation-delay: 0.4s; }
.pipe.play .a2 path { animation-delay: 1.2s; }
.pipe.play .a3 path { animation-delay: 2.3s; }
.pipe.play .st-option.chosen { animation: choose 0.35s ease-out 1.2s both; }
.pipe.play .st-option.chosen .ico { animation: appear 0.3s ease-out 1.3s both; }
.pipe.play .st-dot { animation: appear 0.5s ease-out 1.7s both; }
.pipe.play .st-fill { transform-box: fill-box; transform-origin: left center; animation: grow 0.7s ease-out 2s both; }
.pipe.play .st-value { animation: appear 0.3s ease-out 2.6s both; }
.pipe.play .st-ok { animation: pop 0.45s ease-out 3.2s both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes appear { from { opacity: 0; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes choose { from { border-color: var(--line); background: transparent; color: var(--muted); } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.7); } 70% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .pipe.play *, .pipe.play .station { animation: none !important; } }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border: 0; background: var(--card);
        text-align: left; cursor: pointer; font: 700 16px/1.3 system-ui, sans-serif; color: var(--ink); }
.tile .ico { width: 30px; height: 30px; color: var(--accent); }
.tile:hover { color: var(--accent); --pen: var(--accent); }
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.term { background: var(--card); padding: 14px 16px; display: grid; gap: 6px; }
.term-art { display: block; width: 156px; height: 64px; padding: 6px 10px; border-radius: 10px; background: var(--code); overflow: visible; }
.term-art .ax { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.term-art .dash { stroke-dasharray: 3 3; }
.term-art .fg, .term-art .alt { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.term-art .alt { stroke: var(--warm); }
.term-art .dot { fill: var(--accent); }
.term-art .soft { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.term-art .tail { fill: var(--hit-soft); }
.term-art text { fill: var(--soft); font: 700 10px system-ui, sans-serif; }
.term h3 { font-size: 16px; margin: 0; color: var(--accent); }
.term p { margin: 0; color: var(--soft); font-size: 15px; }
.term details { font-size: 14px; color: var(--soft); }
.term summary { font-weight: 650; color: var(--accent); }
.term details p { margin-top: 6px; font-size: 14px; }
.limits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.limits li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--warm-soft);
             font-size: 15px; font-weight: 600; }
.limits .ico { width: 24px; height: 24px; color: var(--warm); }
.how-next { background: var(--card); padding: 16px 18px; margin-top: 40px; display: grid; gap: 12px; }
.how-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.how-actions strong { margin-right: 4px; }
.how-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) {
  .pipe-row { grid-template-columns: minmax(0, 1fr); }
  .pipe-arrow { transform: rotate(90deg); margin: 2px 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .how-page h2 { font-size: 22px; }
  .terms { grid-template-columns: minmax(0, 1fr); }
  .term { grid-template-columns: 104px minmax(0, 1fr); column-gap: 12px; align-items: start; }  /* the drawing beside the words */
  .term-art { grid-row: span 3; width: 104px; height: 46px; padding: 4px 6px; }
  .tile { font-size: 15px; padding: 14px; }
}

/* three ways in (founders' call of 5 October 2026): use over a stated period, what is new, the trial, the features */
.usage-line { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.news { display: flex; align-items: center; gap: 8px 12px; margin: 18px 0 0; padding: 8px 10px 8px 14px; background: var(--card);
        border: 1px solid var(--line); border-radius: 10px; font-size: 15px; }
.news-label { color: var(--accent); white-space: nowrap; }
.news-item { margin: 0; flex: 1 1 auto; min-width: 0; }
.news-item time { color: var(--muted); margin-right: 6px; white-space: nowrap; }
.news .icon-btn { flex: none; }
/* the three levels of access side by side */
.levels-box { background: var(--card); padding: 6px 16px 10px; max-width: 860px; }
.levels { width: 100%; border-collapse: collapse; }
.levels th, .levels td { padding: 11px 10px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line); }
.levels tr:last-child td { border-bottom: 0; }
.levels th[scope="row"] { text-align: left; font-weight: 600; color: var(--soft); }
.levels th[scope="col"] { vertical-align: top; font-weight: 400; padding-top: 14px; }
.levels th[scope="col"] strong { display: block; font-size: 17px; color: var(--ink); }
.levels .how { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.levels .step, .level-card .step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
                background: var(--accent-soft); color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.levels tr.act td { padding-top: 16px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
      white-space: nowrap; border: 0; }
.levels .yes, .level-cards .yes { color: var(--accent); font-weight: 700; font-size: 19px; }
.levels .no, .level-cards .no { color: var(--muted); }
.level-cards { display: none; }
.level-card { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.level-card .level-head { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.level-card .level-head .step { grid-row: span 2; margin: 0; }
.level-card .level-head strong { font-size: 17px; }
.level-card .level-head .how { color: var(--muted); font-size: 14px; }
.level-card ul { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 6px; }
.level-card li { display: flex; gap: 8px; align-items: baseline; }
.level-card li .yes, .level-card li .no { width: 18px; flex: none; text-align: center; }
.level-card li.off { color: var(--muted); }
.level-card li .label { color: var(--soft); }
@media (max-width: 699px) {
  .levels-box { display: none; }
  .level-cards { display: grid; gap: 12px; }
}
.placement { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 18px; padding: 10px 14px;
             border: 1px dashed var(--line); border-radius: 10px; background: var(--card); font-size: 15px; color: var(--soft); }
.placement p { margin: 0; flex: 1 1 260px; }
.placement > .ico { color: var(--accent); }
.pro-card { padding: 4px 0 8px; }
.pro-card h2 { display: flex; align-items: center; gap: 6px; }
.pro-card h2 .ico { width: 16px; height: 16px; color: var(--accent); }
.pro-card p { margin: 2px 0 6px; }
.guest-wall { background: var(--card); padding: 16px 18px; margin: 10px 0 16px; }
.guest-wall h2 { margin: 0 0 6px; font-size: 19px; }
.guest-wall p { margin: 0 0 12px; color: var(--soft); }
.tag.pro { color: var(--hit); background: var(--hit-soft); }
@media (max-width: 700px) {
  .news { flex-wrap: wrap; }
  .news-item { flex-basis: 100%; order: 3; }
}
.cta .btn { display: inline-flex; align-items: center; gap: 8px; }
.signup-btn { white-space: nowrap; }
.signup-btn .short { display: none; }
@media (max-width: 480px) {
  .signup-btn .long { display: none; }
  .signup-btn .short { display: inline; }
}
.check-page .code-input { font-family: var(--mono); font-size: 14px; }
.check-results { display: grid; gap: 14px; margin-top: 16px; }
.check-results .asked { display: block; overflow-wrap: anywhere; font-size: 13px; color: var(--soft); margin-bottom: 8px; }
.bar nav .btn { white-space: nowrap; }
@media (max-width: 900px) {  /* a guest's chat at 200% zoom: "Sign in" waits on the sign-up page and at the trial's end */
  body[data-page="workspace"] .bar nav .btn:not(.primary) { display: none; }
}
.composer textarea.as-example { color: var(--soft); font-style: italic; }

/* Sign in with Hugging Face: one clear button above the other way in (Tim's ACCESS.md) */
.hf-row { margin: 18px 0 6px; }
.hf-btn { display: inline-flex; align-items: center; gap: 10px; }
.hf-mark { font-size: 20px; line-height: 1; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; margin: 14px 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }