/* GENERATED by scripts/build-ds-flat-css.mjs — do not edit by hand.
   Source manifest: styles.css (same directory). Regenerate: npm run build. */
/* =========================================================
   RealSiteWorth — design system entry point.
   Consumers link THIS file only. It is a manifest of @imports;
   never add rules here directly. Everything reachable from
   these imports (tokens + fonts + base layer) ships to
   consumers. Order matters: fonts + tokens first, base last.
   ========================================================= */

/* ---- tokens/fonts.css ---- */
/* RealSiteWorth — Fonts
   Geist is the shared UI/body/label family. Young Serif is loaded by the app
   for display headings; code uses an explicit system-monospace stack.
   Loaded from Google Fonts — no local binaries. */
/* [build-ds-flat-css] external @import removed (now a <link> in layout.tsx): https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&display=swap */

/* ---- tokens/colors.css ---- */
/* =========================================================
   RealSiteWorth — Color tokens (v2 LOCKED)
   Ported verbatim from the live product (src/app/globals.css).

   THE THREE-COLOR RULE — the whole system is ink, paper, and
   warm grey, plus exactly three chromatic colors:
     🟢 green    (--c-positive / --c-brand-green) — signal, never a button fill
     🟠 persimmon(--c-accent)                     — the ONLY CTA/action color
     🟤 crimson  (--c-negative)                   — risk only, never clickable
   The legacy rainbow tones (amber/indigo/violet/teal/clay) are
   intentionally aliased to neutral greys so old class names keep
   resolving without adding chromatic noise. Do not expect a
   chromatic result from them.
   ========================================================= */

:root {
  /* ---- locked brand green (unchanged across modes) ---- */
  --c-brand-green:   #22A06B;   /* wordmark "Site", brand mark */
  --c-brand-green-2: #34b67e;   /* brighter bar-chart accent in mark */

  /* ---- light mode — the everyday surface (warm neutral paper) ---- */
  --c-bg:        #efece2;   /* warm neutral page */
  --c-bg-soft:   #e6e2d4;   /* quote / zebra */
  --c-surface:   #fbfaf5;   /* near-white card — a pocket of light */
  --c-line:      #d8d2c0;   /* hairline */
  --c-line-2:    #c9c1a8;   /* stronger divider */
  --c-ink:       #14181c;   /* body text, primary button fill */
  --c-ink-2:     #2b3137;   /* secondary body */
  --c-muted:     #6c727a;   /* eyebrows, captions, nav */
  --c-muted-2:   #9aa0a8;   /* faintest text, ticks */
  --c-cream-bright: #e8dfc8;

  /* ---- the three chromatic colors ---- */
  --c-accent:      #D03D1C;   /* persimmon — CTA, links, action, italic accents (deepened from #D9421F: white-on-accent 4.42→4.81, WCAG AA) */
  --c-accent-2:    #b8341a;   /* persimmon pressed/hover */
  --c-accent-soft: #fae0d8;   /* persimmon wash */
  --c-on-accent:   #ffffff;   /* label color on accent fills — ≥4.5:1 vs --c-accent in both modes */
  --c-positive:    #1f8a5b;   /* brand green tuned for AA on cream */
  --c-warning:     #8a7656;   /* desaturated warm-grey (NOT chromatic) */
  --c-negative:    #7c2418;   /* deep crimson — risk only */

  /* ---- semantic tones — collapsed to greyscale (rainbow is dead) ---- */
  --c-amber:  #8a7656;  --c-amber-soft:  #ece8d8;
  --c-clay:   #7c2418;  --c-clay-soft:   #f3e0db;
  --c-indigo: #5a6478;  --c-indigo-soft: #e1e3e8;
  --c-violet: #6c6a78;  --c-violet-soft: #e7e3eb;
  --c-teal:   #5a7570;  --c-teal-soft:   #dde4e1;
}

/* ---- dark mode ---- */
[data-mode="dark"] {
  --c-bg:        #0e1116;   /* cool near-black */
  --c-bg-soft:   #161a21;
  --c-surface:   #1d232c;   /* lifted so cards pop */
  --c-line:      #2a313c;
  --c-line-2:    #3a4350;
  --c-ink:       #f1ece0;   /* warm off-white (never pure white) */
  --c-ink-2:     #d8d2c4;
  --c-muted:     #a39e90;
  --c-muted-2:   #6e7480;

  --c-accent:      #F47F5A;   /* stays bright for accent-as-text on dark (6.0–7.2:1) */
  --c-accent-2:    #d96947;
  --c-accent-soft: #2b1812;
  --c-on-accent:   #14181c;   /* near-black label on the bright dark accent (6.82:1; white was 2.62:1) */
  --c-positive:    #34b67e;
  --c-warning:     #b59e6a;
  --c-negative:    #C46155;

  --c-amber:  #b5a584;  --c-amber-soft:  #1f1d18;
  --c-clay:   #C46155;  --c-clay-soft:   #2c1916;
  --c-indigo: #8893a3;  --c-indigo-soft: #181d25;
  --c-violet: #9c98a8;  --c-violet-soft: #1d1c22;
  --c-teal:   #8aa39e;  --c-teal-soft:   #1a201e;
}

/* ---- Legacy portal aliases ----
   Portal atoms now resolve through the canonical semantic tokens. Keep these
   aliases only for external kit consumers; never assign portal-only colors. */
:root {
  --portal-bg-1: var(--c-bg);
  --portal-bg-2: var(--c-bg-soft);
  --portal-panel: var(--c-surface);
  --portal-panel-2: var(--c-bg-soft);
  --portal-line: var(--c-line);
  --portal-ink: var(--c-ink-2);
  --portal-ink-hi: var(--c-ink);
  --portal-muted: var(--c-ink-2);
  --portal-muted-2: var(--c-ink-2);
  --portal-teal: var(--c-positive);
  --portal-teal-hi: var(--c-positive);
  --portal-blue: var(--c-indigo);
  --portal-teal-glow: color-mix(in oklab, var(--c-positive) 10%, transparent);
}

/* ---- tokens/typography.css ---- */
/* =========================================================
   RealSiteWorth — Typography tokens
   Two families only. Geist does display + UI + body (the live
   product collapsed its old Young Serif display face to a heavy
   Geist weight); Geist also carries every number, eyebrow, and
   CTA label. Display "headlines" are just Geist at a high
   weight with tight tracking — that heaviness IS the voice.
   ========================================================= */

:root {
  /* ---- families ---- */
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- weights ---- */
  --fw-body:     400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-display:  760;   /* @kind font */ /* the signature heavy display weight (.serif) */
  --fw-black:    800; /* @kind font */

  /* ---- display / heading scale (fluid) ---- */
  --t-hero:    clamp(40px, 6vw, 76px);   /* @kind font */ /* landing hero */
  --t-display: clamp(64px, 11vw, 132px); /* @kind font */ /* the giant value-range number */
  --t-h1:      clamp(28px, 3.6vw, 44px); /* @kind font */
  --t-h2:      clamp(28px, 3vw, 40px); /* @kind font */
  --t-h3:      22px; /* @kind font */
  --t-title:   17px; /* @kind font */

  /* ---- body scale ---- */
  --t-lead:  18px;   /* hero sub, lead paragraph @kind font */
  --t-body:  15px;   /* default body @kind font */
  --t-sm:    13.5px; /* @kind font */
  --t-xs:    12.5px; /* @kind font */

  /* ---- mono / eyebrow ---- */
  --t-eyebrow: 11px;    /* uppercase mono eyebrow @kind font */
  --t-tape:    10.5px;  /* the finest mono "tape" label @kind font */
  --track-eyebrow: 0.14em; /* @kind font */
  --track-tape:    0.18em; /* @kind font */

  /* ---- shared letter-spacing for display ---- */
  --track-display: -0.025em; /* @kind font */
  --track-tight:   -0.02em; /* @kind font */
}

/* ---- tokens/platforms.css ---- */
/* =========================================================
   RealSiteWorth — Per-platform accent palettes
   Ported verbatim from the live product (globals.css [data-platform]).
   Every non-website valuation surface (YouTube, TikTok, Instagram,
   Twitch, newsletter, ecommerce, …) sets `data-platform="…"` on a
   scope; components then read --plat-1 / --plat-2 for a platform-tinted
   accent WITHOUT abandoning the restrained RSW system. Use the platform
   color on the header rail, eyebrow, and a reach/engagement score only —
   the RSW Auth/Risk scores, memo, and roadmap stay in the three-color
   system so the report still reads as a credible appraisal, not fan art.
   ========================================================= */

[data-platform="website"]    { --plat-1:#22A06B; --plat-2:#0e6644; }
[data-platform="youtube"]    { --plat-1:#FF0033; --plat-2:#7a0019; }
[data-platform="twitch"]     { --plat-1:#9146FF; --plat-2:#3b1a73; }
[data-platform="tiktok"]     { --plat-1:#FE2C55; --plat-2:#25F4EE; }
[data-platform="instagram"]  { --plat-1:#E1306C; --plat-2:#F77737; }
[data-platform="newsletter"] { --plat-1:#0f766e; --plat-2:#115e59; }
[data-platform="telegram"]   { --plat-1:#229ED9; --plat-2:#0c4a6e; }
[data-platform="ecommerce"]  { --plat-1:#c27a1a; --plat-2:#8a4b08; }
[data-platform="twitter"]    { --plat-1:#1D9BF0; --plat-2:#0c5a8f; }
[data-platform="facebook"]   { --plat-1:#1877F2; --plat-2:#0b4aa0; }

/* sensible default so --plat-* always resolves (falls back to brand green) */
:root { --plat-1:#22A06B; --plat-2:#0e6644; }

/* ---- tokens/shape.css ---- */
/* =========================================================
   RealSiteWorth — Shape, spacing, elevation, motion tokens
   One radius (6px) rules almost everything; cards get a touch
   more (14px). One shadow token. A named spacing scale.
   ========================================================= */

:root {
  /* ---- radius ---- */
  --radius-sm:   4px;
  --radius:      6px;    /* buttons, inputs, chips, swatches — the default */
  --radius-card: 14px;   /* the near-white surface cards */
  --radius-lg:   18px;   /* modals */

  /* ---- spacing scale (4 · 6 · 8 · 12 · 16 · 20 · 24 · 28 · 32 · 48 · 64 · 96) ---- */
  --sp-1:  4px;
  --sp-2:  6px;
  --sp-3:  8px;
  --sp-4:  12px;
  --sp-5:  16px;
  --sp-6:  20px;
  --sp-7:  24px;
  --sp-8:  28px;
  --sp-9:  32px;
  --sp-10: 48px;
  --sp-11: 64px;
  --sp-12: 96px;

  /* ---- layout ---- */
  --shell-max: 1180px;
  --shell-pad: 32px;

  /* ---- elevation — one token, don't roll your own ---- */
  --c-shadow: 0 1px 0 rgba(20,24,28,0.04), 0 8px 24px -14px rgba(20,24,28,0.10);

  /* ---- header geometry (tall on load → compact on scroll) ---- */
  --hdr-h-tall:  88px;
  --hdr-h-short: 56px;
  --hdr-easing:  cubic-bezier(.4, 0, .2, 1); /* @kind other */

  /* ---- motion ---- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --dur-fast:  .12s; /* @kind other */
  --dur-base:  .15s; /* @kind other */
  --dur-slow:  .35s; /* @kind other */
}

[data-mode="dark"] {
  --c-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 12px 32px -14px rgba(0,0,0,0.6);
}

/* ---- tokens/themes.css ---- */
/* =========================================================
   RealSiteWorth — Theme Presets
   Six pickable palettes users can map to a preset, spanning the
   portal (app shell) and results/report pages. Each scope sets one
   unified token group so a single [data-theme] on a root element
   recolors every surface that reads these vars.

   Token contract (read by portal + report surfaces):
     --th-bg / --th-bg-2   page base + gradient partner
     --th-panel / --panel-2  card + inset surfaces
     --th-line             hairline / border
     --th-ink / --ink-2    headings / body
     --th-muted            captions, nav, ticks
     --th-accent           primary accent (fill, active, signal)
     --th-accent-hi        accent hover
     --th-accent-2         secondary accent (gradient partner, links)
     --th-accent-soft      accent wash (chips, notes)
     --th-on-accent        text ON an accent fill
     --th-glow             ambient radial tint on the page bg

   Every pairing below is checked for AA body contrast (ink on bg,
   ink-2 on panel) and legible accents. Default (:root) = Midnight.
   ========================================================= */

:root,
[data-theme="midnight"] {
  --th-bg: #07111d;        --th-bg-2: #0c1a2a;
  --th-panel: #0d1e31;     --th-panel-2: #071320;
  --th-line: #1f3548;
  --th-ink: #f5f7f3;       --th-ink-2: #cdd9e6;
  --th-muted: #8ea1b5;
  --th-accent: #54e1b2;    --th-accent-hi: #7af0c6;
  --th-accent-2: #79a7ff;  --th-accent-soft: rgba(84,225,178,.13);
  --th-on-accent: #03120d; --th-glow: rgba(84,225,178,.14);
}

/* ---- Dark · Graphite (warm charcoal + amber) ---- */
[data-theme="graphite"] {
  --th-bg: #131310;        --th-bg-2: #1b1a14;
  --th-panel: #201e17;     --th-panel-2: #14130d;
  --th-line: #38342a;
  --th-ink: #f4efe4;       --th-ink-2: #d3ccbc;
  --th-muted: #9a9382;
  --th-accent: #e6b25a;    --th-accent-hi: #f3c877;
  --th-accent-2: #d98a5a;  --th-accent-soft: rgba(230,178,90,.14);
  --th-on-accent: #1a1405; --th-glow: rgba(230,178,90,.13);
}

/* ---- Dark · Plum (deep aubergine + orchid) ---- */
[data-theme="plum"] {
  --th-bg: #150f1d;        --th-bg-2: #1e1629;
  --th-panel: #221a2f;     --th-panel-2: #130d1c;
  --th-line: #382c49;
  --th-ink: #f3eef8;       --th-ink-2: #d5cbe1;
  --th-muted: #9f92ae;
  --th-accent: #bd8cf2;    --th-accent-hi: #d2adff;
  --th-accent-2: #6ec6d6;  --th-accent-soft: rgba(189,140,242,.15);
  --th-on-accent: #17091f; --th-glow: rgba(189,140,242,.16);
}

/* ---- Light · Paper (warm cream + persimmon — report default) ---- */
[data-theme="paper"] {
  --th-bg: #efece2;        --th-bg-2: #e6e2d4;
  --th-panel: #fbfaf5;     --th-panel-2: #f3f0e6;
  --th-line: #d8d2c0;
  --th-ink: #14181c;       --th-ink-2: #3a4046;
  --th-muted: #6c727a;
  --th-accent: #d9421f;    --th-accent-hi: #b8341a;
  --th-accent-2: #1f8a5b;  --th-accent-soft: #fae0d8;
  --th-on-accent: #ffffff; --th-glow: rgba(217,66,31,.10);
}

/* ---- Light · Sage (green-tinted white + forest) ---- */
[data-theme="sage"] {
  --th-bg: #eef2ec;        --th-bg-2: #e2e8de;
  --th-panel: #fbfdf9;     --th-panel-2: #eef3ea;
  --th-line: #d3ddce;
  --th-ink: #141a16;       --th-ink-2: #38433a;
  --th-muted: #64705f;
  --th-accent: #2c7a4d;    --th-accent-hi: #22633d;
  --th-accent-2: #b06a2a;  --th-accent-soft: #dcefe1;
  --th-on-accent: #ffffff; --th-glow: rgba(44,122,77,.12);
}

/* ---- Light · Slate (cool white + indigo) ---- */
[data-theme="slate"] {
  --th-bg: #eef1f5;        --th-bg-2: #e2e7ee;
  --th-panel: #ffffff;     --th-panel-2: #eef2f7;
  --th-line: #d3dae3;
  --th-ink: #12171d;       --th-ink-2: #38424f;
  --th-muted: #667082;
  --th-accent: #2f5fd0;    --th-accent-hi: #244cad;
  --th-accent-2: #148a6b;  --th-accent-soft: #dde6fa;
  --th-on-accent: #ffffff; --th-glow: rgba(47,95,208,.12);
}

/* ---- Bridge: presets update the canonical semantic layer. Legacy portal
   aliases in colors.css follow these --c-* tokens automatically. ---- */
[data-theme] {
  /* --c-negative/--c-warning stay put —
     risk and warning colors are semantic and must not shift with theme. */
  --c-bg:          var(--th-bg);
  --c-bg-soft:     var(--th-bg-2);
  --c-surface:     var(--th-panel);
  --c-line:        var(--th-line);
  --c-line-2:      var(--th-line);
  --c-ink:         var(--th-ink);
  --c-ink-2:       var(--th-ink-2);
  --c-muted:       var(--th-muted);
  --c-muted-2:     var(--th-muted);
  --c-accent:      var(--th-accent);
  --c-accent-2:    var(--th-accent-hi);
  --c-accent-soft: var(--th-accent-soft);
}

/* ---- base/base.css ---- */
/* =========================================================
   RealSiteWorth — Base element styles + core utility classes
   Lifted from the live product's hand-written design layer
   (the product intentionally omits a framework reset). These
   are the reusable, unscoped helpers every surface leans on:
   .serif / .mono / .eyebrow / .tape, .shell, .btn family,
   .card, .pill, .url-input, plus the value-range display type.
   ========================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
  min-height: 100vh;
}
button { font-family: inherit; }
a { color: inherit; }
::selection { background: var(--c-accent); color: var(--c-bg); }

/* ---- type helpers ---- */
.serif {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: -0.03em;
}
/* The one place italic appears: <em> inside a serif heading → persimmon. */
.serif em, .h-hero em, .h-section em, h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: 700;
  color: var(--c-accent);
}
.mono  { font-family: var(--font-mono); }
.muted { color: var(--c-muted); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.tape {
  font-family: var(--font-mono);
  font-size: var(--t-tape);
  letter-spacing: var(--track-tape);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* big display headlines */
.h-hero {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--t-hero);
  line-height: 1.0;
  letter-spacing: var(--track-display);
  margin: 0;
  text-wrap: balance;
}
.h-section {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: var(--track-tight);
  margin: 0;
}

/* mono number display — tabular */
.mono-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* the giant value-range number (report hero) */
.vr-big {
  font-family: var(--font-serif);
  font-size: var(--t-display);
  line-height: 0.92;
  letter-spacing: var(--track-display);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-display);
}
.vr-side {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 56px);
  color: var(--c-muted);
  letter-spacing: var(--track-tight);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.vr-em { color: var(--c-muted-2); }

/* ---- container ---- */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}
@media (max-width: 720px) { .shell { padding: 0 20px; } }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 18px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.btn-primary:hover { background: var(--c-ink-2); }
.btn-accent { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.btn-accent:hover { background: var(--c-accent-2); border-color: var(--c-accent-2); }
.btn-ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-2); }
.btn-ghost:hover { background: var(--c-bg-soft); }
.btn-lg { padding: 14px 22px; font-size: 15px; }

/* the mono "APPRAISE" CTA — the brand's single loudest button (one per screen) */
.btn-cta-mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 20px;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.btn-cta-mono:hover { background: var(--c-accent-2); border-color: var(--c-accent-2); }
.btn-cta-mono:active { transform: translateY(1px); }

/* ---- card ---- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--c-shadow);
}
.card.flat { box-shadow: none; }
.card-pad { padding: 28px; }

/* ---- pill / chip ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--c-line-2);
  background: var(--c-surface);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-muted); }
.pill.ok     .dot { background: var(--c-positive); }
.pill.warn   .dot { background: var(--c-warning); }
.pill.bad    .dot { background: var(--c-negative); }
.pill.accent .dot { background: var(--c-accent); }

/* ---- url / text input ---- */
.url-input {
  width: 100%;
  display: flex; align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-line-2);
  border-radius: var(--radius-card);
  padding: 8px 8px 8px 20px;
  box-shadow: var(--c-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.url-input:focus-within {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-ink) 8%, transparent), var(--c-shadow);
}
.url-input .scheme {
  font-family: var(--font-mono);
  color: var(--c-muted);
  font-size: 14px;
  padding-right: 6px;
  border-right: 1px solid var(--c-line);
  margin-right: 12px;
}
.url-input input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--c-ink);
  padding: 16px 0;
  min-width: 0;
}
.url-input input::placeholder { color: var(--c-muted-2); }

/* ---- ruled rows / hairline grid ---- */
.ruled > * + * { border-top: 1px solid var(--c-line); }
.hairline-grid {
  background-image:
    linear-gradient(to right, var(--c-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-line) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
}

/* ---- tiny flex utilities ---- */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.center { align-items: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; }

/* ---- scrollbar restraint ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--c-line-2); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}