/* makecost -- MakersCost design system, implemented from design/README.md
   (the authoritative hifi handoff) rather than eyeballed off the canvas.
   Three type families each with one job: Newsreader for headings and every
   significant number (currency, grams, durations -- see the "numeral rule"
   below), DM Sans for body/forms/buttons, IBM Plex Mono for micro-labels,
   meta text and tabular figures. A warm-bone page with white cards.

   Colour discipline (README "Colors", emphatic on this point): confidence is
   expressed by ink weight and border style, never by hue. There is no
   red/amber/green scale anywhere in this file, including the comps error
   box and the p25-below-break-even alarm -- both are caution-fill, made
   unmissable with weight, a mono eyebrow and a heavier border instead of a
   colour that isn't in the palette. */

:root {
  /* -- surfaces -- */
  --paper: #F7F5F0;               /* app shell background */
  /* #EFEDE7 is paper-canvas -- the design-canvas backdrop only, NOT an app
     colour (README, Colors table). Never used below. */
  --surface: #FFFFFF;
  --surface-alt: #FBFAF7;
  --surface-alt-2: #F9F8F4;
  --surface-tint-3: #EFECE4;       /* selected nav pill fill's neighbour tone */

  /* -- text -- */
  --ink: #1A1917;
  --ink-strong: #17161A;           /* filled dark buttons/chips background */
  --ink-on-dark: #F3F1EC;
  --ink-2: #3A3833;
  --ink-3: #4A4640;
  --muted: #6E6A63;
  --muted-2: #8C877E;
  --muted-3: #A29D94;

  /* -- lines -- */
  --line: #E4E0D7;                 /* card borders */
  --line-2: #E0DCD3;               /* outer container borders */
  --line-3: #EFECE4;               /* section dividers inside cards */
  --line-4: #F4F2EC;               /* table row dividers, lightest */
  --line-5: #F1EEE7;               /* Home recent-table row dividers */

  /* -- chips -- */
  --chip-border: #C7C0B2;          /* solid + dashed chip borders */
  --chip-border-2: #B9B2A4;        /* dashed confidence chip, larger */
  --selected-fill: #EDEAE2;        /* active nav pill fill (light nav) */

  /* -- caution (purge rows, assumption notes, the error box) -- */
  --caution-fill: #F6F2E9;
  --caution-line: #E6DDC7;
  --caution-ink: #8A7A52;
  --caution-ink-2: #7A7367;

  /* -- calm (measured-price reassurance, out-of-scope) -- */
  --calm-fill: #EFF1EE;
  --calm-line: #E4E4DC;
  --calm-line-2: #DCDFD8;
  --calm-ink: #4C5A4E;
  --calm-ink-2: #6E7A6C;

  --positive: #5C7F63;
  --positive-hero: #8FBF9A;
  --out-of-scope-ink: #6E7A6C;

  --link: #2B4A55;
  --link-hover: #171614;

  --font-serif: Newsreader, Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* -- legacy aliases: kept so any stray reference elsewhere still resolves -- */
  --page-bg: var(--paper);
  --hairline: var(--line);
  --hairline-soft: var(--line-3);
  --dark-bg: var(--ink-strong);
  --dark-text: var(--ink-on-dark);
  --faint: var(--muted-3);
  --accent-green: var(--positive);
  --accent-green-soft: var(--calm-fill);
  --accent-green-border: var(--calm-line-2);
  --accent-green-text: var(--calm-ink);
  --accent-green-text-2: var(--calm-ink-2);
  --warn-text: var(--caution-ink);
  --warn-bg: var(--caution-fill);
  --warn-border: var(--caution-line);
  --accent: var(--link);
  --calm-bg: var(--calm-fill);
  --calm-border: var(--calm-line-2);
  --purge-bg: var(--caution-fill);
  --mono: var(--font-mono);
  --sans: var(--font-sans);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

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

/* ------------------------------------------------------------------ */
/* Light-chrome header / pill nav -- every screen except the Home hero, */
/* which supplies its own glass nav over video (see .hero below).       */
/* ------------------------------------------------------------------ */

header.site {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px 26px 0;
  background: var(--paper);
}

header.site .brand {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pill-nav {
  display: flex;
  gap: 2px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(26, 25, 23, .04), 0 10px 26px -16px rgba(26, 25, 23, .22);
}
.pill-nav .pill {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.pill-nav .pill:hover { color: var(--ink); text-decoration: none; background: var(--selected-fill); }
.pill-nav .pill.active {
  font-weight: 500;
  background: var(--selected-fill);
  color: var(--ink);
}

.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.nav-new-btn {
  padding: 8px 16px;
  background: var(--ink-strong);
  color: var(--ink-on-dark);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.nav-new-btn:hover { background: var(--link-hover); color: var(--ink-on-dark); text-decoration: none; }

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 26px 30px;
}
main.full-bleed { max-width: none; margin: 0; padding: 0; }

h1 {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
  color: var(--ink);
}
h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  margin: 1.75rem 0 0.6rem;
}
h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 1rem 0 0.4rem;
}

.subtitle { color: var(--muted); margin: 0 0 1.25rem; max-width: 68ch; }

.modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .modes { grid-template-columns: 1fr; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;   /* design/README.md "Radii" -- 18px for cards & panels */
  padding: 1.1rem 1.2rem;
}

.panel h3 { margin-top: 0; }
.panel .hint { color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0 0.7rem; }
.hint { color: var(--muted); }

/* micro-label / eyebrow -- the signature IBM Plex Mono tag style */
.micro-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

label { display: block; font-size: 0.85rem; color: var(--muted); margin: 0.6rem 0 0.2rem; font-weight: 500; }
input[type=text], input[type=number], input[type=url], select, textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
}
textarea { min-height: 8rem; font-family: var(--font-mono); font-size: 0.8rem; }
.dims-row { display: flex; gap: 0.5rem; }
.dims-row > div { flex: 1; }
.checkbox-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; }
.checkbox-row input { width: auto; }
.checkbox-row label { margin: 0; }

button, .btn {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 8px 16px;
  background: var(--ink-strong);
  color: var(--ink-on-dark);
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--link-hover); color: var(--ink-on-dark); text-decoration: none; }
button.secondary, .btn.secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
button.secondary:hover, .btn.secondary:hover { background: var(--surface-alt); }

.history table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.history th, .history td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line-3); font-size: 0.9rem; }
.history th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.history tr:hover td { background: var(--surface-alt); }
.history .history-cost {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.history .history-cost.calm { color: var(--calm-ink-2); font-size: 1rem; }
.history td:last-child, .history th:last-child { text-align: right; }

/* ------------------------------------------------------------------ */
/* Placeholder / empty-media pattern -- diagonal hatch, never a grey box */
/* or a fake icon (README, "Placeholder / empty-media pattern").        */
/* ------------------------------------------------------------------ */

.hatch {
  background: repeating-linear-gradient(135deg, #EDEAE2 0 6px, #F7F5F1 6px 12px);
  border: 1px solid var(--line);
}
.hatch-tight {
  background: repeating-linear-gradient(135deg, #EDEAE2 0 5px, #F8F6F2 5px 10px);
  border: 1px solid #EAE6DD;
}

/* ------------------------------------------------------------------ */
/* Confidence system -- four fixed states, used on every screen        */
/* (README, "Confidence system"). Expressed by ink weight and border   */
/* style ONLY -- never a colour. tier-A/B/C map 1:1 onto               */
/* measured/calibrated/estimated; tier-out-of-scope is the one calm    */
/* state, for when nothing gets printed at all.                        */
/* ------------------------------------------------------------------ */

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tier-A { color: var(--ink-on-dark); background: var(--ink-strong); border-color: var(--ink-strong); }
.tier-B { color: var(--ink-3); background: var(--surface); border: 1px solid var(--chip-border); }
.tier-C { color: var(--muted); background: var(--surface); border: 1px dashed var(--chip-border); }
.tier-out-of-scope { color: var(--calm-ink); background: var(--calm-fill); border-color: var(--calm-line-2); }

/* Two-part chip: "Estimated" + tier letter as separate weights, per the
   Ledger's header strip and total row. */
.tier-badge-2part {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tier-badge-2part .label { font-weight: 400; }
.tier-badge-2part .grade { font-weight: 500; color: var(--ink); }
.tier-badge-2part.tier-A { background: var(--ink-strong); border: none; color: var(--ink-on-dark); }
.tier-badge-2part.tier-A .grade { color: var(--ink-on-dark); }
.tier-badge-2part.tier-B { background: transparent; border: 1px solid var(--chip-border); color: var(--ink-3); }
.tier-badge-2part.tier-C { background: transparent; border: 1px dashed var(--chip-border-2); color: var(--muted); }
.tier-badge-2part.tier-out-of-scope { background: var(--calm-fill); border: 1px solid var(--calm-line-2); color: var(--calm-ink); }

/* ------------------------------------------------------------------ */
/* Home / Analyze -- full-bleed video hero + recent table               */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  /* The design artboard is 812px tall, but that is a canvas dimension, not a
     screen dimension -- pinning it left dead space under the fold on a tall
     display and clipped the paste bar on a short one. Fill the viewport
     instead. dvh follows mobile browser chrome as it collapses; the vh line
     above it is the fallback for engines without dvh. min-height keeps the
     hero usable rather than crushed on a very short window. */
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  background: radial-gradient(126% 96% at 50% 4%, #A79C8C 0%, #6E6455 40%, #3A342C 100%);
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-media.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-media { opacity: 1; }
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(24,20,16,.40) 0%,
    rgba(24,20,16,.26) 22%,
    rgba(24,20,16,.36) 54%,
    rgba(24,20,16,.78) 100%);
}

/* Glass nav -- fixed to the viewport, not just the hero (S4 of this pass:
   nav stays sticky/visible across every section so the active state is
   always readable, not just while the video is on screen). Nested inside
   .hero in the markup, but position:fixed escapes that ancestor's
   overflow:hidden clip because .hero establishes no containing block for
   fixed descendants (no transform/filter/perspective) -- so it renders
   fixed to the viewport regardless of DOM nesting. Full-bleed edge-to-edge
   bar rather than the original 24px-inset floating pill, using the
   README's own "Nav bar / badge" glass recipe, so it reads the same over
   video and over the paper sections beneath it. */
.hero-nav {
  position: fixed;
  z-index: 50;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  /* Transparent over the video, so the hero reads as full-bleed. Once the
     page scrolls past the hero the bar takes the page's own paper colour
     (.hero-nav.past-hero below) -- a fixed dark slab sitting over the light
     sections was the complaint. */
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(10px);
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(12,10,8,.5);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

/* Past the hero the bar itself stays transparent -- design/README.md S2
   specifies a *floating pill group*, not a full-width bar. Legibility comes
   from the pill group's own white fill and shadow, not from a slab behind
   the whole row. */
.hero-nav.past-hero {
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  text-shadow: none;
}
.hero-nav.past-hero .hero-wordmark,
.hero-nav.past-hero .hero-pills .pill,
.hero-nav.past-hero .hero-bookmarklet-link { color: var(--muted); }
.hero-nav.past-hero .hero-wordmark { color: var(--ink); }
.hero-nav.past-hero .hero-pills {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(26,25,23,.04), 0 10px 26px -16px rgba(26,25,23,.22);
}
.hero-nav.past-hero .hero-pills .pill.active {
  background: var(--selected-fill, #EDEAE2);
  color: var(--ink);
}
.hero-nav.past-hero .hero-brand {
  /* With no bar behind the row, content scrolls under the nav and collides
     with bare text. Each element carries its own quiet fill instead, which
     is what "floating" means in design/README.md S2. */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px 5px 6px;
  box-shadow: 0 1px 2px rgba(26,25,23,.04), 0 10px 26px -16px rgba(26,25,23,.22);
}
.hero-nav.past-hero .hero-nav-right {
  display: flex; align-items: center; gap: 10px;
}
.hero-nav.past-hero .hero-logo-tile {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(26,25,23,.04);
}
.hero-nav.past-hero .hero-bookmarklet-link {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: 0 1px 2px rgba(26,25,23,.04);
}
.hero-nav.past-hero .hero-new-btn {
  background: var(--ink-strong, #17161A);
  color: var(--ink-on-dark, #F3F1EC);
}
.hero-nav .hero-brand {
  display: flex; align-items: center; gap: 11px;
  pointer-events: auto;
}
.hero-logo-tile {
  width: 34px; height: 34px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
}
.hero-logo-glyph { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,.92); }
.hero-wordmark { font-family: var(--font-serif); font-size: 25px; color: #FFFFFF; letter-spacing: -0.01em; }

.hero-pills {
  display: flex; gap: 3px; padding: 6px; border-radius: 999px;
  background: rgba(44,37,30,.40);
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(22px);
  pointer-events: auto;
}
.hero-pills .pill {
  padding: 9px 17px; border-radius: 999px;
  color: rgba(255,255,255,.94);
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.hero-pills .pill.active { background: rgba(255,255,255,.94); color: var(--ink); font-weight: 700; }
.hero-pills .pill:hover { color: #FFFFFF; text-decoration: none; }
.hero-pills .pill.active:hover { color: var(--ink); }

.hero-nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 14px; pointer-events: auto; }
.hero-bookmarklet-link {
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,.86);
}
.hero-bookmarklet-link:hover { color: #FFFFFF; text-decoration: none; }
.hero-new-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px;
  background: #FFFFFF; color: var(--ink);
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.hero-new-btn:hover { background: #FFFFFF; opacity: .92; text-decoration: none; }
.hero-new-btn .arrow { font-size: 13px; }

.hero-stack {
  position: absolute; z-index: 2; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 96px 40px 0;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(12,10,8,.55);
  text-align: center;
}
.hero-stack > * { pointer-events: auto; }

.hero-badge {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 17px; border-radius: 999px;
  background: rgba(44,37,30,.40);
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(14px);
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--positive-hero); }
.hero-badge-text {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: #FFFFFF;
}

.hero-headline {
  font-family: var(--font-serif); font-weight: 300; font-size: 104px;
  line-height: 1; letter-spacing: -0.028em; color: #FFFFFF;
  margin-top: 30px;
}
.hero-headline em { font-style: italic; font-weight: 400; }

.hero-subhead { margin-top: 26px; max-width: 600px; }
.hero-subhead .lead { font-family: var(--font-sans); font-size: 16.5px; font-weight: 700; color: #FFFFFF; }
.hero-subhead .body { font-family: var(--font-sans); font-size: 16.5px; color: rgba(255,255,255,.72); line-height: 1.55; margin-top: 5px; }

/* ------------------------------------------------------------------ */
/* Hero input -- the mode switch (S3 of this pass). Four visually-hidden  */
/* radios drive everything below via CSS sibling selectors: same          */
/* CSS-only-tab trick this file already uses for the Report's size chips  */
/* (.size-radio below), so switching modes and submitting a form both     */
/* keep working with no JavaScript at all.                                */
/* ------------------------------------------------------------------ */

.hero-input { margin-top: 40px; width: 772px; max-width: calc(100vw - 80px); }
.hero-mode-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* -- shared bar chrome -- */
.hero-bar {
  display: none;
  border-radius: 999px;
  background: rgba(255,255,255,.21);
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(26px);
  box-shadow: 0 14px 34px -26px rgba(0,0,0,.38);
  padding: 11px 12px 11px 28px;
  align-items: center;
  gap: 14px;
  transition: background .15s ease, border-color .15s ease;
}
#hm-threemf:checked ~ .hero-bars .hero-bar-threemf,
#hm-url:checked ~ .hero-bars .hero-bar-url { display: flex; }
#hm-source:checked ~ .hero-bars .hero-bar-source,
#hm-manual:checked ~ .hero-bars .hero-bar-manual { display: flex; }

/* -- the input itself: an opaque bar in a solid grey, not a hole in the
   glass. Fill and border share the same token (--chip-border) so the
   field reads as one consistent solid pill inset in the larger glass bar,
   legible against video or paper alike. -- */
.hero-paste-input {
  flex: 1; border: 1px solid var(--chip-border); background: var(--chip-border);
  border-radius: 999px; padding: 13px 20px; outline: none;
  font-family: var(--font-sans); font-size: 18px; color: var(--ink);
}
.hero-paste-input::placeholder { color: rgba(26,25,23,.62); }
.hero-paste-submit {
  flex: none; width: 54px; height: 54px; border-radius: 999px;
  background: rgba(255,255,255,.92); border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: var(--ink); cursor: pointer; margin: 0;
}
.hero-paste-submit:hover { background: #FFFFFF; }

/* -- Sliced 3mf bar: drop target + native choose-file affordance -- */
.hero-bar-threemf { justify-content: space-between; }
.hero-bar-threemf.is-dragover { background: rgba(255,255,255,.34); border-color: rgba(255,255,255,.5); }
.hero-drop-label {
  flex: 1; font-family: var(--font-sans); font-size: 16px; color: rgba(255,255,255,.86); cursor: pointer;
}
.hero-file-input {
  flex: none; max-width: 230px;
  font-family: var(--font-sans); font-size: 12.5px; color: rgba(255,255,255,.92);
}
.hero-file-input::file-selector-button {
  margin-right: 10px; padding: 8px 14px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.92); color: var(--ink);
  font-family: var(--font-sans); font-weight: 500; font-size: 12.5px; cursor: pointer;
}

/* -- Page source / By hand bars: taller glass panels (multiline paste,
   or a compact multi-field row) rather than a single-line pill -- the
   20px hero-card radius token, not a new one. -- */
.hero-bar-source, .hero-bar-manual {
  flex-direction: column; align-items: stretch;
  border-radius: 20px; padding: 18px 20px; gap: 12px;
}
.hero-source-textarea {
  min-height: 96px; resize: vertical;
  border: 1px solid var(--chip-border); background: var(--chip-border);
  border-radius: 14px; padding: 12px 14px; outline: none;
  font-family: var(--font-sans); font-size: 14.5px; color: var(--ink);
}
.hero-source-textarea::placeholder { color: rgba(26,25,23,.62); }
.hero-bar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.hero-bar-manual { flex-direction: row; flex-wrap: wrap; }
/* -- the optional L x W x H group reads as one control, not three loose
   fields: the axes are narrow and the unit label carries the "optional"
   so the placeholders can stay single letters. -- */
.hero-dims { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
.hero-dims input { flex: 0 1 76px; }
.hero-dim-x, .hero-dim-unit {
  flex: none; font-family: var(--font-mono); font-size: 12px;
  color: rgba(255,255,255,.62); letter-spacing: .02em;
}
.hero-dim-unit { margin-left: 2px; }
.hero-bar-manual select,
.hero-bar-manual input,
.hero-bar-source select {
  flex: 1 1 150px; min-width: 0;
  border: 1px solid var(--chip-border); background: var(--chip-border);
  border-radius: 999px; padding: 10px 14px; outline: none;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink);
}
.hero-bar-manual select::placeholder,
.hero-bar-manual input::placeholder { color: rgba(26,25,23,.62); }

.hero-bar-submit-pill {
  flex: none; padding: 11px 20px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.92); color: var(--ink);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer;
}
.hero-bar-submit-pill:hover { background: #FFFFFF; }

/* -- helper line beneath the bar -- one per mode, swapped by :checked -- */
.hero-mode-hint { margin-top: 14px; font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.68); }
.hero-hint { display: none; margin: 0; }
.hero-hint a { color: rgba(255,255,255,.9); text-decoration: underline; }
.hero-hint code { font-family: var(--font-mono); font-size: 0.92em; }
#hm-threemf:checked ~ .hero-mode-hint .hero-hint-threemf,
#hm-source:checked ~ .hero-mode-hint .hero-hint-source,
#hm-manual:checked ~ .hero-mode-hint .hero-hint-manual,
#hm-url:checked ~ .hero-mode-hint .hero-hint-url { display: block; }

.hero-tagline { margin-top: 12px; font-family: var(--font-sans); font-size: 14.5px; color: rgba(255,255,255,.62); }
.hero-tag { display: none; }
#hm-threemf:checked ~ .hero-tagline .hero-tag-threemf,
#hm-source:checked ~ .hero-tagline .hero-tag-source,
#hm-manual:checked ~ .hero-tagline .hero-tag-manual,
#hm-url:checked ~ .hero-tagline .hero-tag-url { display: inline; }

.hero-modes { margin-top: 30px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero-mode-pill {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  font-family: var(--font-sans); font-size: 13.5px; color: rgba(255,255,255,.72);
  cursor: pointer;
}
.hero-mode-pill .mode-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: #FFFFFF; font-weight: 500;
}
#hm-threemf:checked ~ .hero-modes label[for="hm-threemf"],
#hm-source:checked ~ .hero-modes label[for="hm-source"],
#hm-manual:checked ~ .hero-modes label[for="hm-manual"],
#hm-url:checked ~ .hero-modes label[for="hm-url"] {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.19);
  color: rgba(255,255,255,.88);
}
#hm-threemf:focus-visible ~ .hero-modes label[for="hm-threemf"],
#hm-source:focus-visible ~ .hero-modes label[for="hm-source"],
#hm-manual:focus-visible ~ .hero-modes label[for="hm-manual"],
#hm-url:focus-visible ~ .hero-modes label[for="hm-url"] {
  outline: 2px solid #FFFFFF; outline-offset: 2px;
}

/* Scroll-spy targets (S4 of this pass): enough top offset that the fixed
   nav (~70px tall) never covers the heading a scroll just landed on, and
   smooth scrolling only when the user hasn't asked to avoid motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.hero, .recent-section { scroll-margin-top: 88px; }

/* -- Recent -- */
.recent-section { padding: 44px 56px 52px; background: var(--paper); }
.recent-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.recent-head a { font-size: 13px; }
.recent-table { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.recent-row {
  display: grid; grid-template-columns: 64px 1fr 210px 128px;
  align-items: center; gap: 18px; padding: 17px 22px;
  border-bottom: 1px solid var(--line-5);
  text-decoration: none; color: inherit;
}
.recent-row:last-child { border-bottom: none; }
.recent-row:hover { background: var(--surface-alt); text-decoration: none; }
.recent-thumb { width: 52px; height: 52px; border-radius: 13px; flex: none; }
.recent-title { font-size: 15px; font-weight: 500; color: var(--ink); }
.recent-meta { font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }
.recent-cost {
  font-family: var(--font-serif); font-size: 23px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.recent-cost.calm { font-size: 20px; color: var(--out-of-scope-ink); }
.recent-chip { text-align: right; }


/* ------------------------------------------------------------------ */
/* Report -- 2A Ledger                                                  */
/* ------------------------------------------------------------------ */

.report-shell { display: flex; flex-direction: column; gap: 18px; }

/* -- listing header -- */
.listing-header { display: flex; gap: 18px; align-items: flex-start; }
.listing-thumb {
  width: 92px; height: 92px; flex: none; border-radius: 16px;
  object-fit: cover;
}
.listing-thumb.hatch { display: flex; align-items: center; justify-content: center; }
.listing-header .meta { flex: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; min-width: 0; }
.listing-title {
  font-family: var(--font-serif); font-size: 29px; line-height: 1.16;
  letter-spacing: -0.012em; max-width: 640px; text-wrap: pretty;
  margin: 0;
}
.listing-url { font-family: var(--font-mono); font-size: 11.5px; word-break: break-all; }
.listing-price-block { flex: none; text-align: right; display: flex; flex-direction: column; gap: 3px; }
.listing-price-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-3); }
.listing-price {
  font-family: var(--font-serif); font-size: 30px; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* -- size chips (CSS-only tabs; no JS required) -- */
.size-options-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 9px; }
.size-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.size-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.size-chip {
  padding: 9px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
}
.size-chip .name { font-size: 13px; color: var(--ink-2); }
.size-chip .range { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-3); font-variant-numeric: tabular-nums; }
.size-chip:hover { border-color: var(--chip-border); }

.ledger-panels > .ledger-variant { display: none; }
.ledger-panels > .ledger-variant:first-child { display: block; }

/* Show the panel and highlight the chip matching the checked radio.
   Written out to 12 sizes -- comfortably beyond any real Etsy variation
   ladder, and harmless if a listing somehow has more (the first stays
   selected by default). */
#size-0:checked ~ .ledger-panels > .ledger-variant:nth-child(1) { display: block; }
#size-1:checked ~ .ledger-panels > .ledger-variant:nth-child(2) { display: block; }
#size-2:checked ~ .ledger-panels > .ledger-variant:nth-child(3) { display: block; }
#size-3:checked ~ .ledger-panels > .ledger-variant:nth-child(4) { display: block; }
#size-4:checked ~ .ledger-panels > .ledger-variant:nth-child(5) { display: block; }
#size-5:checked ~ .ledger-panels > .ledger-variant:nth-child(6) { display: block; }
#size-6:checked ~ .ledger-panels > .ledger-variant:nth-child(7) { display: block; }
#size-7:checked ~ .ledger-panels > .ledger-variant:nth-child(8) { display: block; }
#size-8:checked ~ .ledger-panels > .ledger-variant:nth-child(9) { display: block; }
#size-9:checked ~ .ledger-panels > .ledger-variant:nth-child(10) { display: block; }
#size-10:checked ~ .ledger-panels > .ledger-variant:nth-child(11) { display: block; }
#size-11:checked ~ .ledger-panels > .ledger-variant:nth-child(12) { display: block; }

#size-0:checked ~ .size-chip-row .size-chip:nth-child(1) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-0:checked ~ .size-chip-row .size-chip:nth-child(1) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-0:checked ~ .size-chip-row .size-chip:nth-child(1) .range { color: rgba(243,241,236,.7); }
#size-1:checked ~ .size-chip-row .size-chip:nth-child(2) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-1:checked ~ .size-chip-row .size-chip:nth-child(2) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-1:checked ~ .size-chip-row .size-chip:nth-child(2) .range { color: rgba(243,241,236,.7); }
#size-2:checked ~ .size-chip-row .size-chip:nth-child(3) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-2:checked ~ .size-chip-row .size-chip:nth-child(3) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-2:checked ~ .size-chip-row .size-chip:nth-child(3) .range { color: rgba(243,241,236,.7); }
#size-3:checked ~ .size-chip-row .size-chip:nth-child(4) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-3:checked ~ .size-chip-row .size-chip:nth-child(4) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-3:checked ~ .size-chip-row .size-chip:nth-child(4) .range { color: rgba(243,241,236,.7); }
#size-4:checked ~ .size-chip-row .size-chip:nth-child(5) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-4:checked ~ .size-chip-row .size-chip:nth-child(5) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-4:checked ~ .size-chip-row .size-chip:nth-child(5) .range { color: rgba(243,241,236,.7); }
#size-5:checked ~ .size-chip-row .size-chip:nth-child(6) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-5:checked ~ .size-chip-row .size-chip:nth-child(6) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-5:checked ~ .size-chip-row .size-chip:nth-child(6) .range { color: rgba(243,241,236,.7); }
#size-6:checked ~ .size-chip-row .size-chip:nth-child(7) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-6:checked ~ .size-chip-row .size-chip:nth-child(7) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-6:checked ~ .size-chip-row .size-chip:nth-child(7) .range { color: rgba(243,241,236,.7); }
#size-7:checked ~ .size-chip-row .size-chip:nth-child(8) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-7:checked ~ .size-chip-row .size-chip:nth-child(8) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-7:checked ~ .size-chip-row .size-chip:nth-child(8) .range { color: rgba(243,241,236,.7); }
#size-8:checked ~ .size-chip-row .size-chip:nth-child(9) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-8:checked ~ .size-chip-row .size-chip:nth-child(9) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-8:checked ~ .size-chip-row .size-chip:nth-child(9) .range { color: rgba(243,241,236,.7); }
#size-9:checked ~ .size-chip-row .size-chip:nth-child(10) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-9:checked ~ .size-chip-row .size-chip:nth-child(10) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-9:checked ~ .size-chip-row .size-chip:nth-child(10) .range { color: rgba(243,241,236,.7); }
#size-10:checked ~ .size-chip-row .size-chip:nth-child(11) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-10:checked ~ .size-chip-row .size-chip:nth-child(11) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-10:checked ~ .size-chip-row .size-chip:nth-child(11) .range { color: rgba(243,241,236,.7); }
#size-11:checked ~ .size-chip-row .size-chip:nth-child(12) { background: var(--ink-strong); border-color: var(--ink-strong); }
#size-11:checked ~ .size-chip-row .size-chip:nth-child(12) .name { color: var(--ink-on-dark); font-weight: 500; }
#size-11:checked ~ .size-chip-row .size-chip:nth-child(12) .range { color: rgba(243,241,236,.7); }

/* -- main panel (the ledger table itself) -- */
.ledger-variant { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }

.variant-title {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-3);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2);
}

.headline-band {
  padding: 24px 22px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: end;
  border-bottom: 1px solid var(--line-3);
}
.headline-figure {
  font-family: var(--font-serif); font-size: 52px; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.headline-expected {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2); margin-top: 9px;
}
.headline-side { text-align: right; }
.headline-side .micro-label { margin-bottom: 4px; }
.headline-side-figure {
  font-family: var(--font-serif); font-size: 26px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.headline-side-hint { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); margin-top: 4px; }

.ledger-table { width: 100%; }
.ledger-row {
  display: grid;
  grid-template-columns: 1fr 168px 178px 116px;
  align-items: center;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line-4);
  gap: 12px;
}
.ledger-row.head {
  padding: 11px 22px;
  border-bottom: 1px solid var(--line-3);
}
.ledger-row.head > div {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-3);
}
.ledger-row.head > div:not(:first-child) { text-align: right; }

.ledger-cell-name .name { font-size: 14.5px; font-weight: 500; }
.ledger-cell-name .note { font-size: 12px; color: var(--muted-2); margin-top: 1px; }
.ledger-num {
  font-family: var(--font-serif); font-size: 19px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.ledger-conf { text-align: right; }

.ledger-row.purge {
  background: var(--caution-fill);
  border-bottom: 1px solid var(--line-3);
}
.ledger-row.purge .ledger-cell-name .name { font-weight: 700; }
.ledger-row.purge .ledger-cell-name .note { color: var(--caution-ink-2); }

.ledger-row.total {
  padding: 18px 22px;
  border-top: 1.5px solid var(--ink);
  border-bottom: none;
}
.ledger-row.total .ledger-cell-name .name { font-size: 15px; font-weight: 700; }
.ledger-row.total .ledger-num { font-size: 24px; }

.ledger-footnote {
  padding: 13px 22px;
  background: var(--calm-fill);
  border-top: 1px solid var(--calm-line);
  font-size: 12.5px; color: var(--calm-ink); line-height: 1.5;
}

/* -- two-up cards: price-minus-filament + make-this-sharper -- */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.two-up.single { grid-template-columns: 1fr; }
@media (max-width: 820px) { .two-up { grid-template-columns: 1fr; } }
.card-white { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; }

.price-minus-figure {
  font-family: var(--font-serif); font-size: 34px; line-height: 1.1; margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.price-minus-hint { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); margin-top: 6px; }
.price-minus-disclaimer {
  font-size: 12.5px; color: var(--muted); margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line-3); line-height: 1.5;
}

.sharpen-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.sharpen-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sharpen-row.divided { padding-bottom: 9px; border-bottom: 1px solid var(--line-4); }
.sharpen-row .label { font-size: 13.5px; }
.sharpen-row .label em { font-style: italic; }
.sharpen-row .label .aux { color: var(--muted-2); }
.sharpen-action {
  flex: none; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--ink-strong); color: var(--ink-on-dark); border: none;
}
.sharpen-action.outline { background: none; color: var(--ink); border: 1px solid var(--chip-border); font-weight: 400; }

/* -- assumption note -- */
.assumption-note {
  background: var(--caution-fill); border: 1px solid var(--caution-line); border-radius: 16px; padding: 16px 20px;
}
.assumption-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--caution-ink);
  margin-bottom: 6px;
}
.assumption-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; max-width: 820px; }
.assumption-body ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.assumption-body li { margin-bottom: 0.25rem; }

/* -- editable price table (filament profiles) -- a real <table> (per
   design/README.md a11y notes) inside a .ledger-variant card, which is
   just the generic white/border/18px-radius/overflow-hidden shell -- reused
   as-is rather than styling a second card skin for the same look. This
   table carried zero design-system styling before this pass (a bare
   <table> with no radius, no border, no Newsreader numerals). */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-3); text-align: left; padding: 11px 22px; border-bottom: 1px solid var(--line-3);
}
.price-table td { padding: 13px 22px; border-bottom: 1px solid var(--line-4); font-family: var(--font-sans); font-size: 14px; }
.price-table tr:last-child td { border-bottom: none; }
.price-table td.num-money {
  font-family: var(--font-serif); font-size: 15px; font-variant-numeric: tabular-nums; text-align: right;
}

/* legacy hooks retained for the "no size found" fallback and other panels */
.variant-block { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; }

.warnings-box {
  border: 1px solid var(--caution-line);
  background: var(--caution-fill);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  margin: 0.9rem 0;
}
.warnings-box h4 {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--caution-ink);
  font-weight: 500;
}
.warnings-box ul { margin: 0; padding-left: 1.2rem; }
.warnings-box li { margin-bottom: 0.3rem; }

.out-of-scope-box {
  border: 1px solid var(--calm-line-2);
  background: var(--calm-fill);
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
}
.out-of-scope-box h2 { margin-top: 0; color: var(--calm-ink); }

.sharpen-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  background: var(--surface);
}
.sharpen-box h4 {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  font-weight: 500;
}
.sharpen-box ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

.error-page .heading { color: var(--caution-ink); font-family: var(--font-serif); }
.error-page .panel { border-color: var(--caution-line); background: var(--caution-fill); }

.pipeline-note {
  font-size: 0.85rem;
  color: var(--ink-2);
  background: var(--surface-tint-3);
  border-left: 3px solid var(--ink);
  border-radius: 0 10px 10px 0;
  padding: 0.55rem 0.8rem;
  margin: 0.6rem 0 1rem;
}

.stale-note { color: var(--caution-ink); font-weight: 600; }

.bookmarklet-btn { font-size: 1.05rem; padding: 12px 20px; cursor: grab; }
.bookmarklet-source { font-size: 0.7rem; word-break: break-all; font-family: var(--font-mono); }

.limiter-status {
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--surface-tint-3);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  margin-top: 0.6rem;
}
.limiter-status.exhausted { color: var(--caution-ink); background: var(--caution-fill); }

/* Inline edit forms in the filament price table -- keep the input and its
   button on one line so a row stays a row. */
.inline-form { display: inline-flex; gap: .35rem; align-items: center; margin: 0 .35rem 0 0; }
.inline-form input[type="number"] { width: 6.5rem; margin: 0; }
.inline-form button { margin: 0; padding: 6px 12px; font-size: .8rem; }

/* ------------------------------------------------------------------ */
/* Error box -- must stay visually unmissable. A recent bug was that a  */
/* failed comps paste read as "nothing happened". Per the colour        */
/* discipline there is no red family available for this -- caution-fill */
/* is the only tinted surface this app has for "something needs your    */
/* attention", so this box leans on it harder than anything else on the */
/* page: a heavier border, a bold mono eyebrow, and its own generous     */
/* padding, so the cascade cannot quietly soften it into a mild note.    */
/* Never combine with .warnings-box on one element -- a test enforces   */
/* this in report.html.                                                 */
/* ------------------------------------------------------------------ */
.error-box {
  border: 2px solid var(--caution-ink);
  background: var(--caution-fill);
  color: var(--ink);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin: 0.9rem 0;
  font-weight: 500;
  line-height: 1.5;
}
.error-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--caution-ink);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

/* --- Etsy comps ---------------------------------------------------------
   Curation is the point (HANDOFF.md): dismiss/restore recomputes the band
   live via HTMX. Which bucket a comp fell into, whether it's currently
   excluded, and whether the band itself deserves to look confident all
   need to read at a glance -- through ink weight and border style only,
   same discipline as everywhere else. */

.comps-section { margin-top: 0.5rem; }
.comps-ingest textarea { min-height: 4rem; }

.comps-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.5rem;
  margin: 0.9rem 0;
  padding: 0.7rem 0.9rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.size-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.bucket-count {
  font-family: var(--font-mono);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.bucket-count.in-range { background: var(--surface); color: var(--calm-ink); border-color: var(--calm-line-2); }
.bucket-count.out-of-range { background: var(--surface); color: var(--muted); border: 1px dashed var(--chip-border); }
.bucket-count.unknown-size { background: var(--surface-tint-3); color: var(--muted); }
.include-unknown { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); margin: 0; }
.include-unknown input { width: auto; }
.cost-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 0.85rem; }
.cost-controls label { display: flex; align-items: center; gap: 0.35rem; margin: 0; color: var(--muted); }
.cost-controls input[type="number"] { width: 6rem; margin: 0; }
.cost-controls input[type="checkbox"] { width: auto; }

.price-band {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0.9rem 0;
}
.price-band h3 { margin: 0 0 0.9rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; }
.price-band h3 .hint { text-transform: none; letter-spacing: normal; font-family: var(--font-sans); }
.band-figures { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.band-stat { display: flex; flex-direction: column; gap: 5px; }
.band-figures .figure {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
/* the median is the loud number in this band -- see partials/comps.html */
.band-figures .figure.median {
  font-size: 2.3rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1;
}
.price-band.low-confidence { border-color: var(--caution-line); background: var(--caution-fill); }
.low-confidence-banner { font-weight: 600; color: var(--caution-ink); margin: 0 0 0.7rem; }
.band-figures.muted { color: var(--muted); font-style: italic; font-weight: 400; }
.band-figures.muted .figure.median { color: var(--muted); }

.cost-lines { margin: 0.9rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cost-line { padding: 0.35rem 0; font-size: 0.92rem; }
.cost-line .hint { margin-left: 0.4rem; }
.cost-line strong { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; font-variant-numeric: tabular-nums; }

/* p25-below-break-even -- must stay loud, same caution-only treatment as
   .error-box (no red family exists in this palette): heavier border,
   bold mono eyebrow, generous padding. This is the comps screen's
   equivalent of "your price plan does not work". */
.breakeven-alarm {
  border: 2px solid var(--caution-ink);
  background: var(--caution-fill);
  color: var(--ink);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  margin: 0.7rem 0;
  font-weight: 500;
  line-height: 1.5;
}
.breakeven-alarm::before {
  content: "Warning";
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--caution-ink);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.comp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; margin-top: 0.9rem; }
.comp-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.comp-card.dismissed { opacity: 0.45; }
.comp-card.bucket-out_of_range { border-color: var(--chip-border); }
.comp-image { height: 140px; }
.comp-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-image-placeholder { width: 100%; height: 100%; }
.comp-body { padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.comp-title { font-size: 0.88rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.comp-title:hover { text-decoration: underline; }
.comp-price { font-family: var(--font-serif); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.comp-price .strike { text-decoration: line-through; color: var(--muted); font-weight: 400; margin-left: 0.3rem; font-size: 0.85rem; }
.comp-shop, .comp-size { font-size: 0.78rem; color: var(--muted); font-family: var(--font-mono); }
.comp-card .btn.small { margin-top: 0.5rem; padding: 5px 12px; font-size: 0.75rem; }

/* --- filament cost calculator ---------------------------------------
   Restyled onto the same ledger language report.html's Report uses --
   a headline figure, a Material/Grams/.../Confidence-shaped table with
   its own highlighted allowance row -- rather than the plain <table>
   skin this carried before this pass. The waste-allowance row follows
   the same rule purge already does: its own visible row, tinted
   caution-fill, never folded silently into the lines above it. See
   design/README.md "Radii" (18px cards) and "purge is always ... not
   part of the model". --- */
.calc-panel { margin-bottom: 1.4rem; }
.calc-row { display: flex; gap: 0.6rem; margin-bottom: 0.5rem; align-items: center; }
.calc-row select { flex: 2 1 auto; min-width: 9rem; }
.calc-row input { flex: 1 1 6rem; max-width: 10rem; }

/* -- extra fields: spool size, spool remaining, waste toggle -- */
.calc-extra {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-3);
}
.calc-extra-field { display: flex; flex-direction: column; gap: 4px; min-width: 168px; }
.calc-extra-field label { margin: 0; }
.calc-extra-field .field-hint { font-size: 11px; color: var(--muted-2); margin: 0; }
.calc-waste-toggle { display: flex; align-items: flex-start; gap: 8px; max-width: 380px; }
.calc-waste-toggle input { width: auto; margin-top: 3px; }
.calc-waste-toggle .field-hint { font-size: 11.5px; line-height: 1.45; }

#calc-result { margin-top: 1rem; }

.calc-result-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.calc-headline { padding: 20px 22px 16px; border-bottom: 1px solid var(--line-3); }
.calc-headline .micro-label { margin-bottom: 8px; }
.calc-hero { display: flex; align-items: baseline; gap: 14px; }
.calc-hero .hero-figure { font-family: var(--font-serif); font-size: 34px; font-variant-numeric: tabular-nums; }
.calc-hero-basis { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); margin-top: 9px; }

.calc-ledger { width: 100%; }
.calc-ledger-row {
  display: grid;
  grid-template-columns: 1.5fr 100px 90px 90px 100px;
  align-items: center;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line-4);
  gap: 10px;
}
.calc-ledger-row.head { padding: 10px 22px; border-bottom: 1px solid var(--line-3); }
.calc-ledger-row.head > div {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-3);
}
.calc-ledger-row.head > div:not(:first-child) { text-align: right; }
.calc-ledger-row .name { font-size: 14px; font-weight: 500; }
.calc-ledger-row .note { font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }
.calc-ledger-num { font-family: var(--font-serif); font-size: 16.5px; text-align: right; font-variant-numeric: tabular-nums; }

.calc-ledger-row.waste { background: var(--caution-fill); border-bottom: 1px solid var(--line-3); }
.calc-ledger-row.waste .name { font-weight: 700; }
.calc-ledger-row.waste .note { color: var(--caution-ink-2); }

.calc-ledger-row.total { padding: 16px 22px; border-top: 1.5px solid var(--ink); border-bottom: none; }
.calc-ledger-row.total .name { font-size: 14.5px; font-weight: 700; }
.calc-ledger-row.total .calc-ledger-num { font-size: 20px; }

.calc-scope-note { padding: 13px 22px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line-3); }

/* -- prints per spool / spool remaining -- */
.spool-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 720px) { .spool-cards { grid-template-columns: 1fr; } }
.spool-card-figure {
  font-family: var(--font-serif); font-size: 30px; line-height: 1.1; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.spool-card .hint { font-size: 12px; margin-top: 6px; }

.calm-note { background: var(--calm-fill); border: 1px solid var(--calm-line-2); border-radius: 16px; padding: 14px 18px; margin-top: 14px; }
.calm-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--calm-ink-2);
  margin-bottom: 6px; display: block;
}
.calm-note .body { font-size: 13.5px; color: var(--calm-ink); line-height: 1.55; margin: 0; }

/* --- generic breakdown table, used on /materials and any leftover
   non-ledger rendering (e.g. the "no size found" fallback keeps the plain
   table look) --- */
.materials-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; }
.materials-meta .micro-label { flex: 1 1 auto; margin: 0; }

table.breakdown { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--surface); border-radius: 18px; overflow: hidden; }
table.breakdown th, table.breakdown td { padding: 0.7rem 0.9rem; text-align: right; border-bottom: 1px solid var(--line-3); }
table.breakdown th:first-child, table.breakdown td:first-child { text-align: left; }
table.breakdown th:nth-child(2), table.breakdown td:nth-child(2) { text-align: left; }
table.breakdown th {
  font-family: var(--font-mono);
  color: var(--muted-2);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--line);
}
table.breakdown td { font-family: var(--font-serif); font-size: 1rem; font-variant-numeric: tabular-nums; }
table.breakdown td:first-child, table.breakdown td:nth-child(2) { font-family: var(--font-sans); font-size: 0.92rem; }
tr.total-row td { font-weight: 700; border-top: 1.5px solid var(--ink); }

/* ------------------------------------------------------------------ */
/* Materials -- price comparison against a user's own profile           */
/* (this pass's feature 4). Same discipline as everywhere else:         */
/* confidence/verdict is ink weight and the two existing tints only --  */
/* caution-fill for paying above the live price, calm-fill for at/below */
/* it, never red/green. An "unpriced" row (the profile has no entry for */
/* that type) gets neither tint -- it isn't a verdict, it's a gap.      */
/* ------------------------------------------------------------------ */
.compare-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-top: 18px; }
.compare-head {
  padding: 16px 22px; border-bottom: 1px solid var(--line-3);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.compare-head form { display: flex; align-items: center; gap: 8px; }
.compare-head select { width: auto; margin: 0; }
.compare-table { width: 100%; }
.compare-row {
  display: grid;
  grid-template-columns: 1.6fr 110px 110px 130px 96px;
  align-items: center;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line-4);
  gap: 10px;
}
.compare-row.head { padding: 10px 22px; border-bottom: 1px solid var(--line-3); }
.compare-row.head > div {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-3);
}
.compare-row.head > div:not(:first-child) { text-align: right; }
.compare-row .name { font-size: 14px; font-weight: 500; }
.compare-row .note { font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }
.compare-num { font-family: var(--font-serif); font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.compare-verdict { text-align: right; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; }

.compare-row.above { background: var(--caution-fill); }
.compare-row.above .compare-verdict { color: var(--caution-ink); font-weight: 500; }
.compare-row.below { background: var(--calm-fill); }
.compare-row.below .compare-verdict { color: var(--calm-ink); font-weight: 500; }
.compare-row.equal .compare-verdict { color: var(--muted); }
.compare-row.unpriced .compare-num.profile-num { color: var(--muted-3); }
.compare-row.unpriced .compare-verdict { color: var(--muted-3); }

/* Short viewports -------------------------------------------------------
   The design is authored at desktop widths only and says nothing about
   short windows (README open question #7). Below ~760px tall the hero's
   natural stack is taller than the hero itself, so the mode pills fell
   outside it and were clipped by overflow:hidden. Tighten the type and
   the paddings rather than let anything disappear. */
@media (max-height: 760px) {
  .hero-stack { padding-top: 76px; gap: 0; }
  .hero-headline { font-size: 72px; }
  .hero-subhead { font-size: 15px; }
  .hero-badge { display: none; }
}
@media (max-height: 640px) {
  .hero-stack { padding-top: 64px; }
  .hero-headline { font-size: 56px; }
  .hero-tagline { display: none; }
}
/* ==================================================================
   PAGES LAYER v2 -- continuity band + interior page language
   ------------------------------------------------------------------
   Appended verbatim to the end of static/style.css. Nothing above is
   deleted.

   THE PROBLEM THIS SOLVES
   Analyze is a full-viewport dark video hero with glass chrome. Every
   other page opened on flat paper under a light pill nav -- a different
   nav identity, a different ground, no transition between them. That
   reads as two products, and the cut between them is the jar.

   WHAT ORIGIN ACTUALLY DOES (useorigin.com + the Apr 2026 capture set)
   Origin does NOT carry its sky video into the product. Its app screens
   are bright, quiet and near-white: a persistent left rail, mono
   uppercase section labels over large borderless tables, hairline row
   dividers, a lot of air. What it never does is change identity between
   zones -- the chrome, the label vocabulary and the type scale are the
   same everywhere, and the hero *resolves* into darkness rather than
   stopping at an edge.

   SO THE FIX IS NOT "MAKE EVERY PAGE DARK"
   It is three things:
     1. One nav identity everywhere. The glass nav from the hero is now
        the nav on every page -- no light pill-nav variant.
     2. A continuity band. Every interior page opens on a 260px slice of
        the same hero.mp4, same scrim, same glass chrome, carrying that
        page's eyebrow and display line in white. The video becomes the
        app's atmosphere rather than a homepage stunt.
     3. An interlock, not a butt joint. The content sheet is paper with
        a 24px top radius, pulled up 30px over the band, so the dark
        shows through at the corners and the paper reads as sliding out
        from under the band. Nothing ever cuts hard from dark to light.
   Interior bands are LEFT-aligned; the hero stays centered. Centering is
   for a doorway, not for a working page.

   Colour discipline unchanged: nothing new is introduced. The band is
   the hero's own gradient and scrim; the light zone is the existing
   paper/white/hairline set.
   ================================================================== */

/* -- carried from v1: the self-reference bug in the alias block --------
   `--line: var(--line);` in :root resolves to the empty string, which
   invalidates `--hairline` too and makes every
   `border: 1px solid var(--line)` shorthand fall back to no border.
   Delete that line from style.css; these two are the belt and braces. */
:root {
  --line: #E4E0D7;
  --hairline: #E4E0D7;
  --band-h: 260px;
}

/* ==================================================================
   1. CONTINUITY BAND
   ================================================================== */

.page-band {
  position: relative;
  height: var(--band-h);
  overflow: hidden;
  /* identical to .hero's gradient -- the band is the same ground, seen
     through a shorter window, and this is what shows before the video
     decodes or when it never loads at all */
  background: radial-gradient(126% 96% at 50% 4%, #A79C8C 0%, #6E6455 40%, #3A342C 100%);
}

.page-band-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The calm top third of the hero loop is where the hero puts its
     headline. A 260px window onto a 1080-tall frame would crop to the
     middle, so bias the crop upward to keep that same quiet region behind
     the band copy. Per-page footage overrides this inline via the
     band_focus block in base.html -- the vertical anchor is the whole
     composition decision at this aspect ratio. */
  object-position: 50% 22%;
  opacity: 0;
  transition: opacity .8s ease;
}
.page-band-media.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .page-band-media { opacity: 1; }
}

/* Two layers, and the top one earns its keep now that pages bring their own
   footage: a dedicated chrome scrim over the first ~190px so the nav row
   stays legible on ANY clip. The Filament bench shot puts a bright laptop
   screen exactly where "Bookmarklet" and the New-analysis pill sit, and
   white-on-white there is a real contrast failure, not a taste call.
   The second layer is the general band scrim -- heavier at the bottom than
   the hero's (.86 vs .78) because the last 60px sit behind the sheet's
   rounded corners, and the corner reveal only reads if what shows through
   is genuinely dark. */
.page-band-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Top layer, strengthened to exactly offset the lighter layer below
       it across the nav row. Both layers stack, so pulling the
       full-height one back lifted the nav zone too -- from 33% to 39%
       transmission -- which is the one place that must NOT get lighter:
       small type, and the bench clip puts a bright laptop screen right
       under "Bookmarklet" (measured worst-case luminance 0.905 there,
       0.926 on materials). These stops restore the nav row to its
       original ~33%. */
    linear-gradient(180deg,
      rgba(24,20,16,.72) 0px,
      rgba(24,20,16,.36) 96px,
      rgba(24,20,16,0) 190px),
    /* Full-height layer, pulled back so the footage actually reads. The
       band was transmitting ~45% mid and ~41% low, which rendered the
       clips as dark texture rather than as something you could identify.
       Now ~54% and ~58% -- still below the hero's own 60-74%, which is
       right: the band is a smaller window carrying denser chrome. Only
       the large display line sits in this zone, and it carries the
       text-shadow on .page-band-stack. */
    linear-gradient(180deg,
      rgba(24,20,16,.30) 0%,
      rgba(24,20,16,.20) 30%,
      rgba(24,20,16,.34) 66%,
      rgba(24,20,16,.74) 100%);
}

/* the page's own eyebrow + display line, left-aligned in the 1180 column */
.page-band-stack {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px 52px;
  text-shadow: 0 1px 3px rgba(12,10,8,.55);
  pointer-events: none;
}
.page-band-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 13px;
}
.page-band-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: #FFFFFF;
  margin: 0;
  max-width: 15ch;
  text-wrap: pretty;
}
.page-band-title em { font-style: italic; font-weight: 400; }
/* Long titles (the error headings are sentences) need a longer measure and
   a smaller size or they overrun a 260px band. */
.page-band-title.long { font-size: 40px; max-width: 26ch; }

/* The lead does NOT live on the band. It sits on the sheet below, in ink,
   where it is readable at length -- white body copy over moving footage is
   fine for one line of hero subhead and wrong for a paragraph. */

/* ==================================================================
   2. THE SHEET -- interlocks with the band
   ================================================================== */

.sheet {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: -30px auto 0;
  padding: 34px 26px 64px;
  background: var(--paper);
  border-radius: 24px 24px 0 0;
}
/* main already has max-width/padding from style.css; when it carries the
   sheet class those must come from .sheet instead */
main.sheet { max-width: 1180px; }

.sheet-lead {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 30px;
  max-width: 640px;
  text-wrap: pretty;
}
.sheet-lead strong { font-weight: 700; color: var(--ink); }

/* ==================================================================
   3. ONE NAV IDENTITY
   ------------------------------------------------------------------
   The band reuses .hero-nav / .hero-pills / .hero-brand / .hero-new-btn
   verbatim from style.css, so there is nothing to restyle -- that is the
   point. Two adjustments only:
   ================================================================== */

/* On Home the nav is position:fixed and gains .past-hero once the video
   scrolls away. On an interior page the band is only 260px tall, so a
   fixed bar would spend the whole page in its .past-hero state hovering
   over content. Inside a band it is absolute instead: it belongs to the
   band and scrolls away with it. */
.page-band .hero-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 16px 24px;
}
/* The band is short, so the wordmark at hero scale (25px) crowds it. */
.page-band .hero-wordmark { font-size: 22px; }

/* Two-word uppercase labels in a 1fr grid column wrap to two lines and
   deform the pill as soon as the window is narrower than the design width.
   Applies to the hero's own nav too -- same class. */
.hero-new-btn, .hero-bookmarklet-link { white-space: nowrap; }

/* The old light-chrome header is retired wherever a band is present. Kept
   in style.css for any page not yet converted. */
.page-band + header.site,
.has-band header.site { display: none; }

/* ==================================================================
   4. INTERIOR PAGE CONTENT
   ------------------------------------------------------------------
   Origin's app-side lessons: mono uppercase section labels, one large
   panel per data set rather than a field of bordered boxes, hairline
   dividers, more air than feels necessary.
   ================================================================== */

.page-section { margin-top: 40px; }
.page-section:first-child { margin-top: 0; }
.page-section > .eyebrow { display: block; color: var(--muted-2); margin-bottom: 14px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.section-head .eyebrow { color: var(--muted-2); }
.section-head .aux { font-size: 12.5px; color: var(--muted-2); }

/* legacy openers, kept working on any unconverted page */
main > h1 { font-weight: 300; font-size: 40px; letter-spacing: -0.02em; margin-bottom: 14px; }
.subtitle { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 620px; }

/* -- cards ----------------------------------------------------------
   A card's own title is mono on this app, never a serif h3 -- serif is
   reserved for display lines and numbers. */

.panel {
  border-radius: 18px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.panel h3 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 12px;
}
.panel .hint, .panel > p {
  font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 12px;
}
.panel > p:last-child, .panel .hint:last-child { margin-bottom: 0; }
.panel + .panel { margin-top: 14px; }

.panel--prose > p, .panel--prose > ol, .panel--prose > ul {
  font-size: 14.5px; line-height: 1.65; color: var(--ink-2); max-width: 68ch;
}
.panel--prose strong { font-weight: 700; color: var(--ink); }

ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
ol.steps > li {
  counter-increment: step;
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line-4);
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 68ch;
}
ol.steps > li:last-child { border-bottom: none; padding-bottom: 0; }
ol.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--muted-3); padding-top: 4px;
}

code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--surface-alt); border: 1px solid var(--line-3);
  border-radius: 4px; padding: 1px 5px;
}

/* -- forms ---------------------------------------------------------- */

label { font-size: 12.5px; font-weight: 500; color: var(--muted); margin: 15px 0 5px; }
input[type=text], input[type=number], input[type=url], select, textarea {
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:hover, input[type=number]:hover, select:hover, textarea:hover { border-color: var(--chip-border); }
input:focus, select:focus, textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26,25,23,.07);
}
input::placeholder, textarea::placeholder { color: var(--muted-3); }
textarea { border-radius: 14px; font-size: 12.5px; line-height: 1.5; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px;
}
.checkbox-row { gap: 8px; margin-top: 12px; }
.checkbox-row label { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.dims-row { gap: 8px; }

button, .btn { margin-top: 15px; padding: 9px 17px; white-space: nowrap; }
button.secondary, .btn.secondary {
  background: none; border: 1px solid var(--chip-border); color: var(--ink); font-weight: 400;
}
button.secondary:hover, .btn.secondary:hover { background: var(--selected-fill); }

/* -- data card ------------------------------------------------------
   A table never sits bare on the paper. Mono header strip, hairline
   dividers, numbers in Newsreader tabular. */

.data-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
}
.data-card + .data-card { margin-top: 14px; }
.data-card__head {
  padding: 15px 24px; border-bottom: 1px solid var(--line-3);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.data-card__head .title {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2);
}
.data-card__head .aux { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-3); }
.data-card__head button, .data-card__head .btn { margin-top: 0; padding: 6px 14px; font-size: 12px; }
.data-card__foot {
  padding: 14px 24px; border-top: 1px solid var(--line-3);
  background: var(--surface-alt); font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.data-card__foot.calm { background: var(--calm-fill); border-top-color: var(--calm-line); color: var(--calm-ink); }
.data-card__foot strong { font-weight: 700; }
.data-card > .hint { padding: 14px 24px; margin: 0; }

table.data { width: 100%; border-collapse: collapse; }
table.data th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-3);
  text-align: left; padding: 12px 24px; border-bottom: 1px solid var(--line-3);
  white-space: nowrap;
}
table.data td {
  padding: 16px 24px; border-bottom: 1px solid var(--line-4);
  font-size: 14px; vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: var(--surface-alt); }
table.data .num, table.data th.num {
  text-align: right; font-family: var(--font-serif); font-size: 19px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.data th.num { font-family: var(--font-mono); font-size: 10px; }
table.data .num.sm { font-size: 16px; color: var(--ink-2); }
table.data .name { font-weight: 500; }
table.data .note { font-size: 12px; color: var(--muted-2); margin-top: 1px; }
table.data .actions { text-align: right; white-space: nowrap; }
table.data .actions .inline-form { margin: 0 0 0 8px; }
table.data .actions .inline-form:first-child { margin-left: 0; }

/* the pre-existing generic table, when dropped inside a data card */
.data-card table.breakdown { border-radius: 0; background: none; }
.data-card table.breakdown th { padding: 12px 24px; border-bottom: 1px solid var(--line-3); }
.data-card table.breakdown td { padding: 14px 24px; border-bottom: 1px solid var(--line-4); }
.data-card table.breakdown tbody tr:last-child td { border-bottom: none; }
.data-card table.breakdown tbody tr:hover td { background: var(--surface-alt); }

.inline-form input[type="number"] { width: 6.5rem; padding: 6px 10px; border-radius: 999px; font-size: 13px; }
.inline-form button { margin: 0; padding: 6px 13px; font-size: 12px; }

/* -- notices --------------------------------------------------------
   The old .pipeline-note carried a 3px left accent bar. Dropped: this
   class of message is a tinted fill and a mono eyebrow, never a rule. */

.pipeline-note, .notice {
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
  background: var(--calm-fill); border: 1px solid var(--calm-line);
  border-left: none; border-radius: 16px; padding: 15px 18px; margin: 18px 0;
}
.notice--caution { background: var(--caution-fill); border-color: var(--caution-line); }
.notice .eyebrow { display: block; margin-bottom: 5px; color: var(--calm-ink-2); }
.notice--caution .eyebrow { color: var(--caution-ink); }

.warnings-box { border-radius: 16px; padding: 15px 18px; }
.warnings-box h4 { font-size: 10px; letter-spacing: 0.12em; }
.warnings-box p, .warnings-box li { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

.limiter-status {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  border-radius: 14px; padding: 12px 14px;
  background: var(--surface-alt); border: 1px solid var(--line-3);
  color: var(--muted); margin-top: 15px;
}
.limiter-status.exhausted { background: var(--caution-fill); border-color: var(--caution-line); color: var(--caution-ink); }
.limiter-status code { background: none; border: none; padding: 0; }

/* -- error page -----------------------------------------------------
   The heading lives on the band now, in white. Below it the caution fill
   is confined to the card, with a mono eyebrow naming the state -- the
   same construction as an assumption note. Colour never carries the
   meaning; the words do. */

.error-page { max-width: 740px; }
.error-page .panel {
  border-radius: 18px; border: 1px solid var(--caution-line);
  background: var(--caution-fill); padding: 22px 24px;
}
.error-page .panel > p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.error-page .panel h3 { margin-top: 20px; color: var(--caution-ink); }
.error-page .panel ul { margin: 0; padding-left: 18px; }
.error-page .panel li { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-bottom: 5px; }
.error-page .panel li:last-child { margin-bottom: 0; }

/* -- bookmarklet install --------------------------------------------- */

.install-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 0; }
.bookmarklet-btn { margin: 0; padding: 13px 22px; font-size: 14px; font-weight: 500; cursor: grab; }
.install-row .aux {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-3);
}
.bookmarklet-source { margin-top: 12px; font-size: 11px; line-height: 1.45; color: var(--muted); }

/* -- quiet back link ------------------------------------------------
   Not a second button competing with the primary. The design's
   between-screens affordance is a text link with an arrow. */

.back-link { display: inline-block; margin-top: 36px; font-size: 13px; color: var(--muted); }
.back-link:hover { color: var(--ink); }

/* -- calculator ------------------------------------------------------ */

.calc-panel { margin-bottom: 0; }
.calc-row { gap: 8px; margin-bottom: 8px; }
.calc-hero { padding: 18px 0 4px; gap: 16px; }
.calc-hero .hero-figure { font-size: 34px; line-height: 1; }
.calc-hero .eyebrow { color: var(--muted-3); }
.calc-table th { padding: 11px 0; }
.calc-table td { padding: 12px 0; font-size: 14px; }
.calc-table .num { font-size: 18px; }

/* -- narrow ---------------------------------------------------------- */

@media (max-width: 860px) {
  :root { --band-h: 220px; }
  .page-band-stack { padding: 0 18px 40px; }
  .page-band-title { font-size: 36px; max-width: 20ch; }
  .page-band-title.long { font-size: 29px; max-width: none; }
  .page-band .hero-pills { display: none; }
  .sheet { padding: 28px 18px 52px; border-radius: 20px 20px 0 0; }
  table.data th, table.data td,
  .data-card__head, .data-card__foot,
  .data-card table.breakdown th, .data-card table.breakdown td { padding-left: 17px; padding-right: 17px; }
  .data-card { overflow-x: auto; }
}

/* ==================================================================
   Band fit correction (local to this app, not part of the v2 bundle)
   ------------------------------------------------------------------
   The v2 layer fixes .page-band to 260px and anchors .page-band-stack
   to its bottom, so a two-line display line grows UPWARD into the nav.
   Measured on /filament at 1440px: the nav occupies 0-82.3px and the
   eyebrow starts at 73.2px, so its top 9px sits under the bar.

   The bundle's own reference examples are ~2px short of clearing it
   too (their nav measures 75.5px), so this is a tight design rather
   than a porting mistake -- but this app's nav is the taller one
   because it carries the fixed-nav treatment from the earlier pass,
   which turns a hairline into a visible clip.

   Rather than tune a magic number against one nav height: put the
   stack in flow, justify it to the bottom, and reserve the nav's row
   with padding-top. 260px stays the design's baseline via min-height,
   and a band whose heading genuinely needs more room grows instead of
   hiding it under the chrome.
   ================================================================== */
.page-band {
  height: auto;
  min-height: var(--band-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-band-stack {
  position: relative;
  left: auto; right: auto; bottom: auto;
  width: 100%;
  padding-top: 96px;
}

/* Report renders the shared glass nav with no band behind it. .past-hero
   is the light-chrome state Home already switches to once it scrolls off
   the video, so reuse it rather than inventing a third nav skin -- but
   Home toggles it from script on scroll, and here it is simply always on. */
.report-nav-wrap .hero-nav { position: fixed; }
.report-nav-wrap + main.sheet { margin-top: 0; border-radius: 0; padding-top: 96px; }

/* The nav is a 1fr auto 1fr grid, so the brand stretches to fill its
   column. That was invisible while the brand had no fill, but .past-hero
   gives it a white pill -- which then reads as a 460px-wide slab instead
   of a badge hugging the wordmark. Report shows this state permanently,
   Home shows it after scrolling past the video; both want the same thing. */
.hero-nav.past-hero .hero-brand { justify-self: start; }
.hero-nav.past-hero .hero-nav-right { justify-self: end; }

/* ==================================================================
   No-footage fallback
   ------------------------------------------------------------------
   The scrims exist to hold white text against bright, moving footage.
   With no video they sit over the plain sandstone radial gradient and
   crush it to near-black -- so a video that failed to load is
   indistinguishable from a band that was designed dark.

   When the media never arrives, keep the top layer (the gradient's own
   top stop is #A79C8C, light enough that the nav still needs cover) and
   pull the full-height layer right back, so the ground reads as the warm
   gradient the design falls back to by intent.
   ================================================================== */
.page-band.is-fallback .page-band-scrim {
  background:
    linear-gradient(180deg,
      rgba(24,20,16,.58) 0px,
      rgba(24,20,16,.30) 96px,
      rgba(24,20,16,.12) 190px),
    linear-gradient(180deg,
      rgba(24,20,16,.18) 0%,
      rgba(24,20,16,.14) 45%,
      rgba(24,20,16,.38) 100%);
}
.hero.is-fallback .hero-scrim {
  background: linear-gradient(180deg,
    rgba(24,20,16,.34) 0%,
    rgba(24,20,16,.16) 30%,
    rgba(24,20,16,.24) 62%,
    rgba(24,20,16,.52) 100%);
}