/* ==========================================================================
   Beamline - the live tool stylesheet.

   Tokens duplicated from site/site.css, component styles from
   docs/design/2026-08-28-beamline/direction-c.html. This is a separate
   Cloudflare Pages project (spec section 8.1) and cannot share a stylesheet
   with site/ across deploy roots. If site/site.css's token values change,
   mirror the change here by hand - there is no build step that keeps these
   in sync. Accepted cost, per spec 8.1: "Tronny has a second deploy path
   and a second thing to verify."

   Differences from the mockup, all deliberate (Task 9 Steps 1 and 2):
   - The .mockupswitch* rules are gone. That control was explicitly
     "Mockup-only - not part of the live product"; the real page moves from
     form view to result view only after a real successful generate.
   - Every interactive target under 44px is raised to exactly 44px, one
     convention rather than four near-44 values (decision.md section 6 left
     this for the real build to settle).
   ========================================================================== */

/* ==========================================================================
   Beamline - Direction C "Console" - design mockup
   Tokens, faces, radius grammar and space ladder inlined from site/site.css,
   Direction B2 "Slab" (locked 2026-08-25). Dark only. Self-contained: no
   external stylesheet, no fetch, no build step.

   Font files and the brand mark reference the same relative fonts/ and
   assets/ paths site.css uses. This mockup lives under docs/design/, so both
   are symlinked into this folder for review fidelity (see fonts, assets) -
   the fallback stacks below still cover the case where either link is
   missing, so nothing looks broken if someone reviews this file without them.
   ========================================================================== */

@font-face { font-family:'Inter Tight'; font-weight:600; font-display:swap; src:url('fonts/InterTight-600.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-weight:700; font-display:swap; src:url('fonts/InterTight-700.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-weight:800; font-display:swap; src:url('fonts/InterTight-800.woff2') format('woff2'); }
@font-face { font-family:'Inter';       font-weight:400; font-display:swap; src:url('fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter';       font-weight:600; font-display:swap; src:url('fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-display:swap; src:url('fonts/IBMPlexMono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-display:swap; src:url('fonts/IBMPlexMono-500.woff2') format('woff2'); }

:root {
  --n-black:#05080F; --n-850:#0D1524; --n-line:rgba(255,255,255,.11); --n-line-2:rgba(255,255,255,.16);
  --n-ink:#F0F4FA; --n-dim:#9AAAC4; --n-mute:#74849E;
  --cy-cyan:#60D8EE; --a-violet:#A78BFF;

  --bg:var(--n-black); --surface:var(--n-850); --ink:var(--n-ink); --dim:var(--n-dim); --mute:var(--n-mute);
  --primary:var(--cy-cyan); --accent:var(--a-violet); --line:var(--n-line); --line-2:var(--n-line-2);
  --on-primary:#04121A;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:40px; --s-7:64px; --s-8:96px;

  --face-display:'Inter Tight', -apple-system, 'Segoe UI Semibold', 'Segoe UI', system-ui, sans-serif;
  --face-body:'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --face-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.65 var(--face-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img { display:block; max-width:100%; height:auto; }
h1,h2,h3 { margin:0; }
p { margin:0; }
ul { margin:0; padding:0; list-style:none; }
fieldset { border:none; margin:0; padding:0; }

:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }

.skip {
  position:absolute; left:var(--s-4); top:-100px; z-index:20;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-2);
  padding:var(--s-2) var(--s-3); text-decoration:none; font:400 13px/1 var(--face-body);
  transition:top .15s var(--ease);
}
.skip:focus { top:var(--s-4); }

.wrap { width:100%; max-width:1240px; margin-inline:auto; padding-inline:32px; }
@media (max-width:720px){ .wrap { padding-inline:20px; } }

.mono {
  font:500 12px/1 var(--face-mono); letter-spacing:.14em; text-transform:uppercase;
}

/* --- Masthead, copied verbatim in structure from site/tools.html --------- */
.masthead { position:relative; z-index:10; border-bottom:1px solid var(--line); }
.masthead .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; }
.brand {
  display:inline-flex; align-items:center; gap:10px;
  font:700 19px/1 var(--face-display); letter-spacing:-.02em; color:var(--ink); text-decoration:none; flex:none;
}
.brand img { width:24px; height:24px; border-radius:6px; flex:none; }
.nav { display:flex; gap:28px; }
.nav a {
  font:400 14px/1 var(--face-body); color:var(--dim); text-decoration:none;
  padding-block:6px; border-bottom:1px solid transparent; transition:color .15s var(--ease), border-color .15s var(--ease);
  white-space:nowrap;
}
.nav a:hover { color:var(--ink); }
.nav-toggle { display:none; }

@media (max-width:859px) {
  .masthead { background:var(--bg); }
  .masthead .wrap { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; min-height:0; padding-block:14px; }
  .nav-toggle {
    display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0;
    background:transparent; border:1px solid var(--line-2); color:var(--ink); cursor:pointer; flex:none;
    transition:border-color .15s var(--ease), color .15s var(--ease);
  }
  .nav-toggle:hover { border-color:var(--primary); color:var(--primary); }
  .nav-toggle .bars { position:relative; width:18px; height:12px; }
  .nav-toggle .bars span { position:absolute; left:0; width:18px; height:1.5px; background:currentColor; transition:transform .2s var(--ease), opacity .2s var(--ease), top .2s var(--ease); }
  .nav-toggle .bars span:nth-child(1) { top:0; }
  .nav-toggle .bars span:nth-child(2) { top:5px; }
  .nav-toggle .bars span:nth-child(3) { top:10px; }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { top:5px; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity:0; }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { top:5px; transform:rotate(-45deg); }
  .nav {
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; margin-top:0;
    padding-block:4px 12px; padding-inline:32px; border-top:1px solid var(--line); background:var(--bg); z-index:9;
  }
  @media (max-width:720px){ .nav { padding-inline:20px; } }
  #nav-toggle[aria-expanded="true"] ~ #primary-nav { display:flex; }
  .nav a { display:flex; align-items:center; min-height:44px; padding-block:0; border-bottom:1px solid var(--line); font-size:15px; }
  .nav a:last-child { border-bottom:none; }
}

/* --- Ambient atmosphere, pagehead only - shared site chrome --------------- */
.pool.top {
  position:absolute; z-index:0; pointer-events:none; left:52%; top:-58%; width:900px; height:900px;
  background:radial-gradient(circle, rgba(96,216,238,.20) 0%, rgba(96,216,238,.09) 30%, rgba(90,20,247,.07) 52%, transparent 72%);
  filter:blur(20px); animation:swell 11s var(--ease) infinite;
}
@keyframes swell { 0%,100%{opacity:.85;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
.grain {
  position:absolute; inset:0; z-index:6; pointer-events:none; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Interior page head --------------------------------------------------- */
.pagehead { position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.pagehead .wrap { position:relative; z-index:2; padding-block:clamp(56px,8vh,104px) clamp(48px,7vh,88px); }
.pagehead h1 { font:800 clamp(42px,6vw,86px)/0.94 var(--face-display); letter-spacing:-.05em; margin-bottom:22px; }
.pagehead .lede { color:var(--dim); font-size:clamp(15.5px,1.35vw,18px); max-width:56ch; }

.byline { display:flex; align-items:center; gap:14px; margin-bottom:22px; font:700 18px/1 var(--face-display); flex-wrap:wrap; }
.badge {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font:600 11px/1 var(--face-body); padding:5px 11px 5px 9px; border-radius:999px;
  background:rgba(96,216,238,.12); color:var(--primary); border:1px solid rgba(96,216,238,.35);
}
.badge svg { width:12px; height:12px; flex:none; stroke-width:1.8; }

/* --- Sections -------------------------------------------------------------- */
.section { position:relative; border-top:1px solid var(--line); }
.section:first-of-type { border-top:none; }
.section .wrap { padding-block:clamp(64px,9vh,120px); }
.kicker { color:var(--primary); display:block; margin-bottom:20px; }
.section h2 { font:800 clamp(26px,3.6vw,44px)/1.08 var(--face-display); letter-spacing:-.03em; margin-bottom:16px; }
.intro { color:var(--dim); max-width:64ch; font-size:16px; margin-bottom:var(--s-6); }

.chip {
  display:inline-block; font:400 12px/1.4 var(--face-mono);
  color:var(--dim); background:var(--surface); border:1px solid var(--line-2);
  padding:5px 9px; border-radius:4px; white-space:nowrap;
}

/* ==========================================================================
   The console. Direction C's whole argument: a live instrument, not a form.
   Visual skin is layered ON TOP of real, labeled, native controls - never a
   replacement for them. Every <label> below has a real `for`; every input
   keeps the sitewide :focus-visible ring untouched.
   ========================================================================== */

/* Instrument surface, not a card - a single drawn box around the whole tool
   was the thing making this direction read closest to the source's boxed
   form (constraint N2). The status bar keeps a real surface/ground contrast
   because it is genuinely a distinct instrument component (the chrome); the
   transcript and readout sit directly on page ground and are separated by
   hairlines and spacing the way the rest of the site already works. */
.console {
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}

.console__bar {
  display:flex; align-items:center; gap:var(--s-3) var(--s-5); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.console__dot {
  width:8px; height:8px; border-radius:50%; background:var(--primary); flex:none;
  box-shadow:0 0 7px rgba(96,216,238,.6);
}
.console__label { font:500 12px/1 var(--face-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.console__bar-right { margin-left:auto; display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; }
.console__sim {
  font:600 11px/1 var(--face-mono); letter-spacing:.12em; text-transform:uppercase;
  padding:5px 9px; border-radius:4px; color:var(--primary);
  background:rgba(96,216,238,.14); border:1px solid rgba(96,216,238,.4);
}

/* Mockup-only view switch - not a product control. Honest label kept visible
   at all times, not just in a tooltip, so it reads as what it is. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.console__view { padding:0; }

.console__body {
  display:grid; gap:var(--s-6);
  grid-template-areas:"readout" "transcript";
  grid-template-columns:1fr;
  padding:var(--s-5) var(--s-4) var(--s-6);
}
@media (min-width:900px){
  .console__body {
    grid-template-areas:"transcript readout";
    grid-template-columns:minmax(0,1fr) 320px;
    align-items:start;
    padding:var(--s-6) var(--s-5) var(--s-7);
  }
}

/* --- The transcript: fields as appended, tagged records ------------------- */
.transcript { grid-area:transcript; display:flex; flex-direction:column; }

.rec { display:grid; gap:var(--s-2); padding-block:var(--s-4); border-bottom:1px solid var(--line); }
.transcript > .rec:first-child { padding-top:0; }
.transcript > .rec:last-of-type { border-bottom:none; }

.rec__tag {
  display:block; font:500 11px/1 var(--face-mono); letter-spacing:.1em; text-transform:lowercase;
  color:var(--primary);
}
.rec__tag .opt { color:var(--mute); text-transform:none; letter-spacing:0; margin-left:6px; font-family:var(--face-body); }

.rec__hint { color:var(--dim); font-size:13px; margin-top:-2px; }

.rec__control {
  display:block; width:100%; max-width:640px;
  background:transparent; border:none; border-bottom:1px solid var(--dim);
  color:var(--ink); font:400 15px/1.55 var(--face-mono);
  padding:var(--s-2) 0;
  transition:border-color .15s var(--ease);
}
.rec__control::placeholder { color:var(--dim); opacity:.85; }
.rec__control:focus-visible { border-color:var(--primary); }
textarea.rec__control { resize:vertical; min-height:64px; max-width:100%; }

select.rec__control {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239AAAC4' fill='none' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center; padding-right:22px;
}
select.rec__control option { background:var(--surface); color:var(--ink); }

.rec--comment { padding-block:var(--s-2) 0; border-bottom:none; }
.rec--comment p { color:var(--mute); font:400 12px/1 var(--face-mono); }

/* Tech stack - a real fieldset/legend group. No box; the legend is styled as
   the same dotted-key tag every other record uses, so the grouping is
   semantic, not decorative. */
.stackfield { display:grid; gap:var(--s-3); padding-block:var(--s-4); border-bottom:1px solid var(--line); }
.stackfield legend { padding:0; }
.stackrow { display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); max-width:640px; }
.stackitem { display:inline-flex; align-items:center; gap:9px; font:400 14.5px/1.3 var(--face-body); color:var(--ink); }
.stackitem input[type="checkbox"] {
  appearance:none; -webkit-appearance:none; width:16px; height:16px; flex:none; margin:0;
  border:1.5px solid var(--dim); background:transparent; position:relative; cursor:pointer;
}
.stackitem input[type="checkbox"]:checked { background:var(--primary); border-color:var(--primary); }
.stackitem input[type="checkbox"]:checked::after {
  content:""; position:absolute; left:3px; top:-1px; width:5px; height:9px;
  border:solid var(--on-primary); border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* Secondary import affordance - a native disclosure, no bespoke JS needed
   for open/close state or for screen-reader announcement of expanded. */
.import { padding-block:var(--s-4); border-bottom:1px solid var(--line); }
.import summary {
  cursor:pointer; list-style:none; font:500 12px/1 var(--face-mono); letter-spacing:.1em;
  color:var(--dim); display:inline-flex; align-items:center; gap:8px;
}
.import summary::-webkit-details-marker { display:none; }
.import summary::before { content:"+"; color:var(--primary); font-family:var(--face-mono); }
.import[open] summary::before { content:"-"; }
.import summary:hover { color:var(--ink); }
.import .rec { padding-top:var(--s-4); padding-bottom:0; border-bottom:none; }
.import__actions { margin-top:var(--s-3); }

.ghostline {
  font:500 12px/1 var(--face-mono); letter-spacing:.1em; text-transform:lowercase;
  background:transparent; border:1px solid var(--line-2); color:var(--dim);
  padding:9px 14px; border-radius:0; cursor:pointer;
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.ghostline:hover { border-color:var(--primary); color:var(--primary); }

/* The primary action - the console's own next line, not a dominant button. */
.rec__submit {
  display:flex; align-items:center; gap:10px; width:100%;
  background:transparent; border:none; border-top:1px solid var(--line-2);
  color:var(--ink); font:600 15px/1 var(--face-mono);
  padding:var(--s-4) 0 0; margin-top:var(--s-2);
  cursor:pointer; text-align:left;
  transition:color .15s var(--ease);
}
.rec__submit .caret { color:var(--primary); }
.rec__submit:hover, .rec__submit:hover .caret { color:var(--primary); }

/* --- Readout column: the beam-fill meter and the honest-limit status lines */
.readout { grid-area:readout; display:grid; gap:var(--s-6); }
@media (min-width:900px){
  .readout { position:sticky; top:var(--s-8); padding-left:var(--s-5); border-left:1px solid var(--line); }
}

/* The meter is the direction's live-feedback argument and was reading as a
   thin sliver at 1280px. Real width and a graduated-tube face (ticks at each
   of the 8 logged fields) make the fill legible at a glance without turning
   it into a percent bar. */
.meter { display:grid; gap:var(--s-3); justify-items:center; }
.meter__label {
  font:500 11px/1 var(--face-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
}
.meter__tube {
  width:100%; height:28px; border:1.5px solid var(--dim); background:rgba(255,255,255,.04);
  position:relative; overflow:hidden;
}
.meter__tube::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    transparent 0, transparent calc(12.5% - 1px),
    rgba(255,255,255,.22) calc(12.5% - 1px), rgba(255,255,255,.22) 12.5%);
}
.meter__fill {
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, rgba(96,216,238,.4), var(--primary));
  box-shadow:0 0 14px rgba(96,216,238,.6), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:width .35s var(--ease), height .35s var(--ease);
}
@media (min-width:900px){
  .meter__tube { width:68px; height:260px; margin-inline:auto; }
  .meter__tube::before {
    background-image:repeating-linear-gradient(180deg,
      transparent 0, transparent calc(12.5% - 1px),
      rgba(255,255,255,.22) calc(12.5% - 1px), rgba(255,255,255,.22) 12.5%);
  }
  .meter__fill { left:0; right:0; top:auto; bottom:0; width:100%; height:0%; }
}
.meter__caption { font:500 13px/1 var(--face-mono); letter-spacing:.08em; color:var(--dim); text-align:center; }
.meter__caption b { color:var(--ink); font-weight:600; font-size:15px; }

.statuslines { display:grid; gap:var(--s-4); }
.statusline { display:grid; gap:4px; }
.statusline .key { font:500 11px/1 var(--face-mono); letter-spacing:.08em; color:var(--primary); }
.statusline p { color:var(--dim); font-size:13.5px; line-height:1.55; }

/* ==========================================================================
   Result state - the split panel. File viewer dominant, chat docked right
   and deliberately narrower than 50/50 (that break is the direction's
   point). Sits on the same instrument surface as the form: hairlines and
   ground/surface contrast, no outer box.
   ========================================================================== */

.result__head { padding:var(--s-5) var(--s-4) 0; }
@media (min-width:900px){ .result__head { padding:var(--s-6) var(--s-5) 0; } }
.result__head p { color:var(--dim); font-size:14px; max-width:64ch; }

.result__panel {
  display:grid; gap:var(--s-6);
  grid-template-areas:"files" "chat";
  grid-template-columns:1fr;
  padding:var(--s-5) var(--s-4);
  align-items:start;
}
@media (min-width:900px){
  .result__panel {
    grid-template-areas:"files chat";
    grid-template-columns:minmax(0,1fr) minmax(300px,360px);
    gap:0;
    padding:var(--s-6) var(--s-5);
  }
}

/* --- File viewer ------------------------------------------------------- */
.files { grid-area:files; min-width:0; }
@media (min-width:900px){ .files { padding-right:var(--s-6); border-right:1px solid var(--line); } }

.filetabs {
  display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--dim); margin-bottom:var(--s-4);
  width:fit-content; max-width:100%;
}
.filetab {
  font:500 12.5px/1 var(--face-mono); letter-spacing:.02em;
  background:transparent; border:1px solid var(--dim); border-bottom:none; color:var(--dim);
  padding:15px 13px; cursor:pointer; transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.filetab:hover { color:var(--ink); border-color:var(--primary); }
.filetab[aria-selected="true"] {
  color:var(--ink); background:var(--surface); border-color:var(--dim);
}

.filepanel { display:none; }
.filepanel[data-active="true"] { display:block; }

.filepanel.is-code pre {
  margin:0; padding:var(--s-4); background:var(--surface); border:1px solid var(--line-2);
  overflow-x:auto; font:400 13px/1.65 var(--face-mono); color:var(--ink);
}
.filepanel.is-code code { font:inherit; color:inherit; }

.filepanel.is-prose {
  font:400 15px/1.65 var(--face-body); color:var(--ink); max-width:70ch;
}
.filepanel.is-prose h1 { font:800 22px/1.2 var(--face-display); letter-spacing:-.02em; margin-bottom:var(--s-3); }
.filepanel.is-prose h2 {
  font:700 14px/1 var(--face-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--primary);
  margin-block:var(--s-5) var(--s-2);
}
.filepanel.is-prose h2:first-child { margin-top:0; }
.filepanel.is-prose p { color:var(--dim); margin-bottom:var(--s-3); }
.filepanel.is-prose ul, .filepanel.is-prose ol { color:var(--dim); margin-bottom:var(--s-3); padding-left:1.3em; list-style:revert; display:block; }
.filepanel.is-prose ol { list-style:decimal; }
.filepanel.is-prose ul { list-style:disc; }
.filepanel.is-prose li { margin-bottom:6px; }
.filepanel.is-prose li::marker { color:var(--mute); }
.filepanel.is-prose code {
  font:400 13.5px/1 var(--face-mono); background:var(--surface); border:1px solid var(--line-2);
  padding:2px 5px; border-radius:4px; color:var(--ink);
}

/* --- Chat: the "incoming transmission" column --------------------------- */
.chat { grid-area:chat; display:flex; flex-direction:column; min-width:0; margin-top:var(--s-6); }
@media (min-width:900px){ .chat { padding-left:var(--s-6); margin-top:0; } }

.chat__head { margin-bottom:var(--s-3); }
.chat__kicker { color:var(--primary); display:block; margin-bottom:4px; }
.chat__title { font:700 16px/1.3 var(--face-display); letter-spacing:-.01em; }

.chat__log {
  display:grid; gap:var(--s-3); max-height:460px; overflow-y:auto;
  padding-block:var(--s-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.msg { display:grid; gap:4px; max-width:92%; }
.msg .who { font:500 11px/1 var(--face-mono); letter-spacing:.08em; text-transform:lowercase; color:var(--mute); }
.msg p { font-size:14px; line-height:1.55; color:var(--ink); }
.msg--agent .who { color:var(--primary); }
.msg--user { justify-self:end; text-align:right; }
.msg--user .who { color:var(--accent); }

.chat__samples { display:flex; flex-wrap:wrap; gap:8px; margin-block:var(--s-3); }
.samplebtn {
  font:400 12.5px/1.4 var(--face-body); text-align:left;
  background:transparent; border:1px solid var(--dim); color:var(--dim); cursor:pointer;
  padding:12px 11px; transition:color .15s var(--ease), border-color .15s var(--ease);
}
.samplebtn:hover { color:var(--ink); border-color:var(--primary); }

.chat__form { display:flex; gap:8px; margin-top:var(--s-3); align-items:flex-end; }
.chat__form label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.chat__input {
  flex:1; min-width:0; resize:none; background:transparent; border:1px solid var(--dim);
  color:var(--ink); font:400 14px/1.5 var(--face-body); padding:9px 10px;
}
.chat__input::placeholder { color:var(--mute); }
.chat__send {
  flex:none; font:600 13px/1 var(--face-mono); text-transform:lowercase;
  background:transparent; border:1px solid var(--dim); color:var(--ink); cursor:pointer;
  padding:10px 14px; transition:border-color .15s var(--ease), color .15s var(--ease);
}
.chat__send:hover { border-color:var(--primary); color:var(--primary); }
.chat__send:disabled, .chat__input:disabled { opacity:.5; cursor:not-allowed; }

.chat__meter { display:flex; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-3); }
.chat__meter span { font:500 11.5px/1 var(--face-mono); letter-spacing:.04em; color:var(--mute); }
.chat__meter b { color:var(--ink); font-weight:600; }

/* --- Consumption log line + actions ------------------------------------- */
.consumption {
  border-top:1px solid var(--line); padding:var(--s-5) var(--s-4);
}
@media (min-width:900px){ .consumption { padding:var(--s-5); } }
.consumption__tag {
  color:var(--primary); display:block; margin-bottom:var(--s-3);
}
.consumption__grid {
  display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  margin-bottom:var(--s-3); max-width:900px;
}
.consumption__item .k { font:500 11px/1 var(--face-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); display:block; margin-bottom:6px; }
.consumption__item .v { font:600 17px/1.2 var(--face-mono); color:var(--ink); }
.consumption__services { color:var(--dim); font-size:13.5px; margin-bottom:var(--s-3); max-width:70ch; }
.consumption__disclosure { color:var(--dim); font-size:13.5px; line-height:1.55; max-width:70ch; }
.consumption__disclosure b { color:var(--ink); font-weight:600; }

.result__actions {
  display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center;
  padding:0 var(--s-4) var(--s-6);
}
@media (min-width:900px){ .result__actions { padding:0 var(--s-5) var(--s-7); } }
.statuslines--actions {
  margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--line);
  max-width:70ch;
}
.actionbtn {
  font:600 14px/1 var(--face-mono); text-transform:lowercase;
  background:transparent; border:1px solid var(--dim); color:var(--ink); cursor:pointer;
  padding:12px 18px; border-radius:0; transition:border-color .15s var(--ease), color .15s var(--ease);
}
.actionbtn:hover { border-color:var(--primary); color:var(--primary); }
.actionbtn--primary {
  background:var(--primary); color:var(--on-primary); border-color:var(--primary);
}
.actionbtn--primary:hover { color:var(--on-primary); opacity:.9; border-color:var(--primary); }

/* --- Published section card: mono readout tile ---------------------------- */
.cardgrid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2); margin-top:var(--s-6);
}
.toolcard { background:var(--bg); padding:26px; display:grid; gap:var(--s-3); }
.toolcard__top { display:flex; align-items:center; gap:10px; }
.toolcard__dot { width:9px; height:9px; border-radius:50%; background:var(--primary); flex:none; }
.toolcard__line { color:var(--ink); }
.toolcard__desc { color:var(--dim); font-size:14.5px; line-height:1.55; }
.toolcard__meta { color:var(--mute); font:400 12.5px/1.4 var(--face-body); }

.previewnote { color:var(--mute); font:400 13px/1.5 var(--face-body); margin-top:var(--s-4); max-width:60ch; }

/* --- Footer, copied verbatim in structure from site/tools.html ----------- */
.footer { border-top:1px solid var(--line); }
.footer .wrap { padding-block:var(--s-7); display:grid; gap:var(--s-4); }
.footer .fbrand { display:flex; align-items:center; gap:10px; font:700 17px/1 var(--face-display); margin-bottom:var(--s-2); }
.footer .fbrand img { width:22px; height:22px; border-radius:5px; flex:none; }
.footer p { font-size:14px; color:var(--dim); max-width:70ch; }
.footer .fine { color:var(--mute); font-size:13px; }
.footer .fnav { display:flex; gap:var(--s-5); flex-wrap:wrap; padding-top:var(--s-4); border-top:1px solid var(--line); }
.footer .fnav a { font-size:14px; color:var(--dim); text-decoration:none; }
.footer .fnav a:hover { color:var(--ink); }
.tlink { color:var(--primary); text-decoration:none; border-bottom:1px solid rgba(96,216,238,.4); transition:border-color .15s var(--ease); }
.tlink:hover { border-bottom-color:var(--primary); }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* --------------------------------------------------------------------------
   Tap targets - decision.md section 6, settled here for the real build.
   The mockup carried four different near-44px values. One convention: every
   interactive target is at least 44px on its smallest axis. The designer
   pass already did this for .mockupswitch__btn / .filetab / .samplebtn; this
   block finishes the job for the controls it did not reach.
   -------------------------------------------------------------------------- */
.rec__submit,
.ghostline,
.actionbtn,
.chat__input,
.chat__send,
.samplebtn,
.filetab {
  min-height: 44px;
}

/* Text inputs and selects shipped at 40px in the mockup. */
.rec__control {
  min-height: 44px;
}
textarea.rec__control {
  min-height: 88px; /* two rows at the same rhythm, not a squashed 44 */
}

/* The checkbox itself stays its native 16px - the LABEL is the target, and
   it is what a finger actually lands on. */
.stackitem {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}