/* Workflow sketches. Tokens are copied by hand from frontend/src/app/globals.css
   (:root and .dark) — nothing links the two, so re-copy after a palette change. */
/* Fonts are SELF-HOSTED (../fonts/, OFL licences beside them): no request leaves for Google.
   Variable woff2, latin + latin-ext + greek subsets, the same files Google serves. */
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/sourcecodepro-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/sourcecodepro-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/sourcecodepro-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/sourcesans3-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/sourcesans3-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/sourcesans3-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/sourceserif4-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/sourceserif4-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/sourceserif4-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --font-ui: "Source Sans 3", system-ui, sans-serif;
  --font-reading: "Source Serif 4", Georgia, serif;
  --font-code: "Source Code Pro", ui-monospace, monospace;
  --canvas: #F7F3ED; --surface: #F2ECE3; --raised: #FFFDF9; --raised-alt: #EDE6DA;
  --sheet: #FBF8F3; --inset: #ECE4D8; --topbar: #1C1916;
  --tab-band: #1C1916; --tab-active: #2E2A26; --tab-ink: #A39C92; --tab-ink-active: #F7F3ED;
  --tab-dot-notebook: #DB6A54; --tab-close: #6B655D;
  --tab-ring-work: #45C39B; --tab-ring-notebook: #CC7E7D; --tab-ring-report: #6FA8DC;
  --line: #DDD5C8; --line-soft: #C9BEB0; --shell-dot: color-mix(in srgb, var(--ink) 13%, transparent);
  --ink: #1C1916; --ink-body: #4A4038; --ink-muted: #6A5C52; --ink-faint: #A89C8E;
  --accent: #0F6E56; --on-accent: #F7F3ED; --danger: #B4472E; --warning: #A6741A;
  --mode-work: var(--accent); --mode-notebook: #AC595B; --mode-report: #3A6BAA;
  --mode-neutral: var(--ink-muted);
  --pill-yellow: #EFC773; --pill-mint: #6FD2B8; --pill-turquoise: #8FBEEC; --pill-lilac: #C4A3EE;
  --pill-pink: #B5D687; --pill-peach: #EFA9A0;
  --pill-ink: #1C1916;
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 16px rgb(0 0 0 / 0.05);
  /* Rule 10 fluids. globals.css deliberately leaves these untokenised and unthemed
     (its :450 note); they are declared here once so a plot never restates a hex. */
  /* A built report page is white in BOTH schemes: PreviewPage.tsx:59 uses `bg-white`
     with --shadow-page, not a token. */
  --paper-white: #FFFFFF; --shadow-page: 0 1px 2px rgb(0 0 0 / 0.10), 0 8px 24px rgb(0 0 0 / 0.10);
  --oil: #2B6C2B; --gas: #BE3520; --water: #1657A3;
}
.dark {
  --canvas: #1E1B18; --surface: #191714; --raised: #2A2521; --raised-alt: #332E29;
  --sheet: #24211D; --inset: #0F0D0A; --topbar: #14120F;
  --line: #38322C; --line-soft: #4E4539; --shell-dot: color-mix(in srgb, var(--ink) 10%, transparent);
  --ink: #EDE7DD; --ink-body: #DACFC1; --ink-muted: #C0B4A6; --ink-faint: #9C9184;
  --accent: #45C39B; --on-accent: #10231C; --danger: #F08A6E; --warning: #E0A94A;
  --mode-notebook: #CC7E7D; --mode-report: #6FA8DC;
  --pill-yellow: #996E12; --pill-mint: #29836C; --pill-turquoise: #2277CB; --pill-lilac: #9256E0;
  --pill-pink: #5D812C; --pill-peach: #DA3A25;
  --pill-ink: #EDE7DD;
  --shadow-page: 0 1px 3px rgb(0 0 0 / 0.7), 0 10px 30px rgb(0 0 0 / 0.6);
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.45), 0 6px 16px rgb(0 0 0 / 0.4);
}
* { box-sizing: border-box; }
html { color-scheme: light; } html.dark { color-scheme: dark; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 1rem/1.5 var(--font-ui); }
/* Unhinted glyph advances, as the app's globals.css body (audit F15): the dialogue shows
   this page in a sandboxed frame, which inherits nothing from the app, so without it
   Linux Chromium opened "re ad" and "mean while" here after the app itself was fixed. */
body { text-rendering: geometricPrecision; }
a { color: var(--accent); }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: 1rem; max-width: 80rem; margin: 0 auto; }
.pills a { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-muted); text-decoration: none; font-size: .875rem; background: var(--raised); }
.pills a[aria-current] { color: var(--ink); border-color: var(--ink-muted); font-weight: 600; }
.pills a:focus-visible, .pills button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pills button { margin-left: auto; font: inherit; font-size: .875rem; color: var(--ink-muted); background: none; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; background: var(--mode-neutral); }
.dot.work { background: var(--mode-work); } .dot.nb { background: var(--mode-notebook); } .dot.rep { background: var(--mode-report); }
.page { display: grid; grid-template-columns: minmax(16rem, 2fr) 3fr; gap: 3rem; max-width: 80rem; margin: 0 auto; padding: 0 1rem 40vh; }
h1 { font: 600 2rem/1.2 var(--font-reading); margin: 1.5rem 0 0; grid-column: 1 / -1; }
.steps { padding-top: 20vh; }
.step { min-height: 70vh; display: flex; gap: 1rem; align-items: flex-start; opacity: .4; transition: opacity .3s; }
.step.active { opacity: 1; }
.step b { font: 600 .875rem var(--font-code); color: var(--accent); padding-top: .35rem; }
.step p { margin: 0; font: 1.35rem/1.45 var(--font-reading); color: var(--ink-body); }
.stage { position: sticky; top: 12vh; align-self: start; }
@media (max-width: 52.8rem) {
  .page { grid-template-columns: 1fr; gap: 0; }
  .stage { top: 0; grid-row: 2; background: var(--canvas); padding: .5rem 0; z-index: 2; }
  .steps { padding-top: 10vh; } .step { min-height: 60vh; } .step p { font-size: 1.15rem; }
}
/* ── The sketched app. Drawn at 600×420 and scaled to fit by scroller.js. ── */
.frame-wrap { position: relative; width: 100%; height: 420px; }
.frame { position: absolute; top: 0; left: 0; width: 600px; height: 420px; transform-origin: 0 0;
  display: grid; grid-template-rows: 30px 1fr; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--canvas); font-size: 9px; line-height: 1.35; color: var(--ink); box-shadow: var(--shadow-raised); }
.tb { background: var(--topbar); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 8px; color: var(--tab-ink); }
.tb .l { display: flex; align-items: center; gap: 6px; } .tb .r { display: flex; gap: 5px; justify-self: end; }
.am { width: 16px; height: 16px; border-radius: 3px; background: var(--raised-alt); border-top: 2px solid var(--tab-ring-work); }
.tb .cur { color: var(--tab-ink-active); }
.search { border: 1px solid var(--tab-active); border-radius: 999px; padding: 2px 10px; min-width: 150px; display: flex; justify-content: space-between; gap: 8px; }
.tb .r i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--tab-close); }
.body { display: flex; min-height: 0; }
.rail { width: 26px; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 0; }
.rail i { width: 13px; height: 13px; border: 1.5px solid var(--ink-faint); border-radius: 3px; position: relative; }
.rail i.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.rail i.on::before { content: ""; position: absolute; left: -7px; top: 0; bottom: 0; width: 2px; background: var(--c); }
.rail hr { width: 12px; border: 0; border-top: 1px solid var(--line-soft); margin: 0; }
.rail .logo { margin-top: auto; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); }
.tree { width: 118px; background: var(--surface); border-right: 1px solid var(--line); padding: 8px 7px; display: flex; flex-direction: column; gap: 5px; color: var(--ink-muted); }
.tree h4 { margin: 0 0 2px; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); display: flex; gap: 4px; align-items: center; }
.tree .sel { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c); border-radius: 5px; padding: 1px 4px; margin: 0 -4px; font-weight: 600; }
.panes { flex: 1; min-width: 0; padding: 8px; display: flex; background-image: radial-gradient(var(--shell-dot) 1px, transparent 1px); background-size: 8px 8px; }
.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--sheet); position: relative; }
.band { background: var(--tab-band); height: 20px; display: flex; align-items: center; gap: 4px; padding: 0 5px; color: var(--tab-ink); }
.tab { height: 14px; border-radius: 999px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; min-width: 56px; }
.tab.on { background: var(--tab-active); color: var(--tab-ink-active); box-shadow: 0 0 0 1px var(--ring, var(--tab-ink)); }
.band .dot.nb { background: var(--tab-dot-notebook); } .band .dot.work { background: var(--tab-ring-work); } .band .dot.rep { background: var(--tab-ring-report); }
.band .plus { color: var(--tab-ink); padding: 0 3px; }
.in { flex: 1; min-height: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; position: relative; }
/* primitives */
.bar { height: 5px; border-radius: 3px; background: var(--line); width: var(--w, 60%); flex: none; }
.bar.t { height: 7px; background: var(--ink-faint); } .bar.s { background: var(--ink-faint); height: 4px; }
.row { display: flex; align-items: center; gap: 6px; } .col { display: flex; flex-direction: column; gap: 5px; }
.muted { color: var(--ink-muted); } .faint { color: var(--ink-faint); } .serif { font-family: var(--font-reading); } .mono { font-family: var(--font-code); }
.h { font: 600 13px var(--font-reading); } .h.sm { font-size: 11px; }
.box { border: 1px solid var(--line); border-radius: 6px; background: var(--raised); padding: 7px; }
.drop { border: 1.5px dashed var(--line-soft); border-radius: 8px; padding: 10px; text-align: center; color: var(--ink-muted); background: var(--raised); }
.drop.hot { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--raised)); color: var(--accent); }
.btn { border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; background: var(--raised); white-space: nowrap; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.chip { border-radius: 999px; padding: 1px 6px; background: var(--raised-alt); color: var(--ink-muted); white-space: nowrap; font-size: 8px; }
.chip.cite { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.chip.warn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.tag { border-radius: 4px; padding: 0 5px; background: color-mix(in srgb, var(--p) 40%, transparent); color: var(--pill-ink); display: inline-flex; align-items: center; gap: 3px; }
.grip { width: 5px; height: 8px; flex: none; background: radial-gradient(var(--ink-muted) .8px, transparent 1px) 0 0 / 2.5px 2.7px; }
.cover { position: absolute; inset: 0; background: var(--sheet); padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.float { position: absolute; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 8px; box-shadow: var(--shadow-raised); display: flex; flex-direction: column; gap: 5px; }
.scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--topbar) 45%, transparent); }
.prog { height: 3px; border-radius: 2px; background: var(--inset); display: flex; overflow: hidden; }
.prog i { background: var(--c, var(--accent)); } .spin { width: 6px; height: 6px; border: 1px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.grid { display: grid; gap: 4px 8px; align-items: center; } .th { font-size: 7.5px; color: var(--ink-faint); font-weight: 600; }
.sw { width: 12px; height: 12px; border-radius: 50%; background: var(--p); display: inline-block; }
.field { border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; background: var(--canvas); color: var(--ink-faint); }
.bar.ins { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.bar.del { background: color-mix(in srgb, var(--danger) 30%, transparent); position: relative; } .bar.del::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 1px solid var(--danger); }
/* step reveal */
[data-show] { opacity: 0; transform: translateY(4px); transition: opacity .45s, transform .45s; }
[data-show].on { opacity: 1; transform: none; }
/* Reduced motion keeps every scene change; it only drops the motion between them. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* Below 40rem the frame is NOT scaled: natural 600px, cropped, text at least 11px.
   The tree column goes, as it does in the real app's mobile layout (Sidebar.tsx).
   NOT under html.fit (?fit, scroller.js): the app's dialogue always scales. */
@media (max-width: 40rem) {
  html:not(.fit) .frame .tree { display: none; }
  html:not(.fit) .frame-wrap { height: 420px; overflow: hidden; border-radius: 10px; }
  html:not(.fit) .frame { transform: none !important; font-size: 11px; }
  html:not(.fit) .frame *:not(.h) { font-size: 11px !important; }
  html:not(.fit) .frame .h { font-size: 14px !important; }
}
/* ?still (scroller.js) — the final scene alone, for an <iframe> on the landing page. */
.still .pills, .still h1, .still .steps { display: none; }
html.still, .still body { background: transparent; overflow: hidden; }
.still .page { display: block; padding: 0; max-width: none; }
.still .stage { position: static; padding: 0; background: transparent; }
.still [data-show] { transition: none; }
/* A phone-width iframe: the showcase pages narrow the pane to the viewport minus the page gutter;
   embedded there is no gutter, so the pane takes the whole width after the rail. */
@media (max-width: 40rem) { html.still:not(.fit) .frame .panes { width: calc(100vw - 28px); } }
/* The site nav and footer: a plain-HTML copy of components/landing/LandingNav.tsx and
   LandingCTA.tsx's footer. px because the landing's Tailwind spacing is rem at a 110% root
   (px-6 = 26.4px) and these pages sit at 100%. Not sticky: the stage is sticky here. */
.site-nav { background: rgb(26 23 20 / .92); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(255 255 255 / .07); padding: 15.4px 26.4px; }
.site-nav > div { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 17.6px; }
.brand { display: flex; align-items: center; gap: 11px; font: 600 19px var(--font-reading); letter-spacing: -.025em; color: #F7F3ED; text-decoration: none; }
.brand svg { display: block; flex: none; } .brand b { color: #1D9E75; font-weight: 600; }
.site-nav .links { display: none; gap: 4.4px; align-items: center; }
.site-nav .links a { padding: 8.8px 13.2px; border-radius: 6px; font-size: 13px; color: rgb(247 243 237 / .6); text-decoration: none; }
.site-nav .links a:hover { color: #F7F3ED; }
.site-nav .signin { background: #1D9E75; color: #fff; border-radius: 6px; padding: 8.8px 18px; font-size: 13px; font-weight: 600; text-decoration: none; }
.site-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 13.2px; border-top: 1px solid rgb(255 255 255 / .06); background: #1A1714; padding: 30.8px 26.4px; }
.site-foot .brand { font-size: 17px; color: rgb(247 243 237 / .8); }
.site-foot small { font: 11.5px var(--font-code); color: rgb(247 243 237 / .3); }
.site-foot small a { display: inline-flex; min-height: 44px; align-items: center; } /* rule 12: a 2.5rem target, as LandingFooter */
.site-foot small a { color: inherit; text-decoration: none; } .site-foot small a:hover { text-decoration: underline; }
@media (min-width: 44rem) { .site-nav { padding: 15.4px 52.8px; } .site-foot { padding: 30.8px 52.8px; } }
@media (min-width: 52.8rem) { .site-nav .links { display: flex; } }
.still .site-nav, .still .site-foot { display: none; }