/*
  databa.ai website-2026, a_css
  Authored FRESH per design-direction.md §9.1 (NOT ported from
  ventures/databa-audit/website/'s forked 16-size/half-pixel scale).
  Tokens = §0b verbatim. Type/spacing scale = §0c verbatim, 7 text steps /
  8 spacing steps, no added size. Cascade layers own precedence; the only
  !important in this file is the reduced-motion floor (idiom-log entry 1's
  sanctioned exception).
*/
@layer reset, tokens, base, layout, components, utilities;

/* ------------------------------------------------------------------------
   RESET
   ------------------------------------------------------------------------ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100svh; }
  img, svg, picture, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; }
  ol, ul { list-style: none; padding: 0; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto !important; }
  }
}

/* ------------------------------------------------------------------------
   TOKENS: design-direction.md §0b, values reused verbatim (do not
   re-derive hex). Colour literals live ONLY in this block.
   ------------------------------------------------------------------------ */
@layer tokens {
  @property --bg     { syntax: "<color>"; inherits: true; initial-value: #0a0c10; }
  @property --fg     { syntax: "<color>"; inherits: true; initial-value: #d9dee6; }
  @property --accent { syntax: "<color>"; inherits: true; initial-value: #c8a45c; }

  :root {
    /* dark (default) */
    --bg:          #0a0c10;
    --bg-2:        #0e1117;
    --bg-3:        #11151c;
    --hairline:    #1c2230;
    --hairline-2:  #262d3d;
    --fg:          #d9dee6;
    --fg-2:        #a4abba;
    --fg-3:        #6a7180; /* §9.2: AA-fails below 18px, large/non-critical UI ONLY */
    --accent:      #c8a45c;
    --accent-2:    #9c7d3f;
    --accent-bg:   rgba(200, 164, 92, 0.10);
    --accent-line: rgba(200, 164, 92, 0.32);

    /* reserved for continuity only (§0b), NOT used in this site's copy or
       chrome; carried from the audit product's locked severity set so nothing
       downstream has to invent a status hue. */
    --crit:        #ff5a5f;
    --crit-bg:     rgba(255, 90, 95, 0.10);
    --crit-line:   rgba(255, 90, 95, 0.32);
    --ncrit:       #e0902e;
    --ncrit-bg:    rgba(224, 144, 46, 0.08);
    --ncrit-line:  rgba(224, 144, 46, 0.28);
    --ok:          #76c891;
    --ok-bg:       rgba(118, 200, 145, 0.08);

    /* font stacks: sans body/UI (named faces before system-ui, §0c; a bare
       system-ui heading is a display tell), mono for eyebrows/data/exhibit
       labels + the wordmark. No serif; this brand doesn't use one. */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* type scale: 7 steps, 1.25 ratio marketing band, §0c verbatim */
    --text-eyebrow: 13px;
    --text-body:    16px;
    --text-lead:    20px;
    --text-h3:      25px;
    --text-h2:      31px;
    --text-h1:      clamp(34px, 5vw, 52px);
    --text-data:    14px;

    --lh-label:  1;    /* eyebrow / uppercase mono labels, single line */
    --lh-tight:  1.15; /* h2 / h3 */
    --lh-normal: 1.6;  /* body / lead */
    --lh-hero:   1.08; /* h1 only, §0c */

    /* spacing scale: 8px base, 8 steps, §0c verbatim */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 64px;
    --space-7: 96px;
    --space-8: 128px;

    --gutter:    clamp(24px, 5vw, 80px);
    --shell-max: 1280px; /* the full-bleed rail: hero + exhibit artifacts */
    --prose-max: 72ch;   /* the prose rail: paragraph copy only, §0c */
  }

  /* Every color token defined in the dark :root above gets a paper
     counterpart here -- not just --accent. Reserved severity tokens
     (crit/ncrit/ok) are unused in this site's copy/chrome (§0b) but are
     still given paper values for completeness, so no token on the page
     can ever end up half-themed. crit/ncrit paper values are the
     already-AA-verified report hex from
     ventures/databa-audit/_design-review/color-spec.md (not re-derived);
     --ok has no verified paper hex in that source, so it is carried
     forward unchanged with a note, since it is not consumed anywhere. */
  @media (prefers-color-scheme: light) {
    :root {
      --bg:          #f6f3ec;
      --bg-2:        #efeadf;
      --bg-3:        #efeadf;
      --hairline:    #ded5bd;
      --hairline-2:  #d0c5a4;
      --fg:          #23241f;
      --fg-2:        #55564c;
      --fg-3:        #7d735a;
      --accent:      #8a6a1f; /* AA-verified deep brass, §0b */
      --accent-2:    #6f5417;
      --accent-bg:   rgba(138, 106, 31, 0.10);
      --accent-line: rgba(138, 106, 31, 0.32);

      --crit:        #a31f24; /* report-verified, color-spec.md */
      --crit-bg:     rgba(163, 31, 36, 0.10);
      --crit-line:   rgba(163, 31, 36, 0.32);
      --ncrit:       #8a4b12; /* report-verified sienna fix, color-spec.md */
      --ncrit-bg:    rgba(138, 75, 18, 0.08);
      --ncrit-line:  rgba(138, 75, 18, 0.28);
      --ok:          #76c891; /* no verified paper hex source; unused on this page, carried as-is */
      --ok-bg:       rgba(118, 200, 145, 0.08);
    }
  }

  /* explicit user choice wins over the system signal in both directions;
     higher-specificity attribute selector decides this on purpose. Both
     blocks mirror the full dark/light token sets above, reserved tokens
     included, so an explicit toggle never has a gap the media query did. */
  :root[data-theme="dark"] {
    --bg: #0a0c10; --bg-2: #0e1117; --bg-3: #11151c;
    --hairline: #1c2230; --hairline-2: #262d3d;
    --fg: #d9dee6; --fg-2: #a4abba; --fg-3: #6a7180;
    --accent: #c8a45c; --accent-2: #9c7d3f;
    --accent-bg: rgba(200, 164, 92, 0.10); --accent-line: rgba(200, 164, 92, 0.32);
    --crit: #ff5a5f; --crit-bg: rgba(255, 90, 95, 0.10); --crit-line: rgba(255, 90, 95, 0.32);
    --ncrit: #e0902e; --ncrit-bg: rgba(224, 144, 46, 0.08); --ncrit-line: rgba(224, 144, 46, 0.28);
    --ok: #76c891; --ok-bg: rgba(118, 200, 145, 0.08);
  }
  :root[data-theme="light"] {
    --bg: #f6f3ec; --bg-2: #efeadf; --bg-3: #efeadf;
    --hairline: #ded5bd; --hairline-2: #d0c5a4;
    --fg: #23241f; --fg-2: #55564c; --fg-3: #7d735a;
    --accent: #8a6a1f; --accent-2: #6f5417;
    --accent-bg: rgba(138, 106, 31, 0.10); --accent-line: rgba(138, 106, 31, 0.32);
    --crit: #a31f24; --crit-bg: rgba(163, 31, 36, 0.10); --crit-line: rgba(163, 31, 36, 0.32);
    --ncrit: #8a4b12; --ncrit-bg: rgba(138, 75, 18, 0.08); --ncrit-line: rgba(138, 75, 18, 0.28);
    --ok: #76c891; --ok-bg: rgba(118, 200, 145, 0.08);
  }
}

/* ------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------ */
@layer base {
  html { background: var(--bg); color-scheme: light dark; scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--lh-normal);
    overflow-x: hidden; /* belt only; every section is sized to never need it */
  }
  h1, h2, h3 { font-weight: 600; }
  a { text-decoration: none; }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
  ::selection { background: var(--accent); color: var(--bg); }

  .prose { max-width: var(--prose-max); }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    line-height: var(--lh-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
}

/* ------------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------------ */
@layer layout {
  .shell {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    container-type: inline-size;
    container-name: databa-shell;
  }

  section { padding-block: var(--space-7); }

  .site-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 4rem;
  }
  .site-header__nav { display: flex; align-items: center; gap: var(--space-5); }
  /* Nav links removed below 700px rather than allowed to wrap: the
     recorded collision class (a_css livebench-findings-2 F5) is a header
     row whose content wraps against the fixed wordmark/toggle lockups.
     Removing the wrappable content is safer than trying to fit it. */
  @media (max-width: 700px) {
    .site-header__nav { display: none; }
  }

  .hero { padding-block: clamp(var(--space-6), 8vw, var(--space-8)) var(--space-7); }
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
  }
  .hero__grid > * { min-width: 0; }
  /* Two-column only from 960px: NOT split anywhere inside 701-860px, the
     documented collision band (design-direction §6 / a_css livebench F5).
     Verified in the oracle render matrix at 390/720/768/820/900/960/1440. */
  @media (min-width: 960px) {
    .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); }
  }

  /* First-viewport contract (design-direction §3): at 390x844 headline +
     sub + CTA + the full proof fragment must all clear the fold with zero
     scroll. Measured via the render oracle: the desktop spacing (96px hero
     top offset + 64px grid gap + a 4:3 frame) put the frame's bottom ~57px
     past the 844px fold. This is the named fallback -- a tighter mobile-only
     offset/gap plus a shorter static frame ratio, never touching the CTA. */
  @media (max-width: 700px) {
    .hero { padding-block: var(--space-5) var(--space-6); }
    .hero__grid { gap: var(--space-4); }
    .art-frame { aspect-ratio: 16 / 9; }
  }

  /* min-width:0 on every grid item, not just the track: a 1fr track's
     implicit minimum is auto (= its content's max-content), so a native
     file input's intrinsic width blows out the column and the page gets
     real horizontal overflow at narrow widths -- caught by scrollWidth
     verification at 390px, not a text read. */
  .exhibit__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .exhibit__grid > * { min-width: 0; }
  @media (min-width: 860px) {
    .exhibit__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); }
  }

  .manifest__row { display: grid; grid-template-columns: 1fr; gap: var(--space-2); padding-block: var(--space-4); }
  @media (min-width: 700px) {
    .manifest__row { grid-template-columns: 10rem 1fr; gap: var(--space-5); align-items: baseline; }
  }
}

/* ------------------------------------------------------------------------
   COMPONENTS
   ------------------------------------------------------------------------ */
@layer components {
  .skip-link {
    position: absolute; left: var(--space-3); top: -3rem;
    background: var(--accent); color: var(--bg);
    padding: var(--space-2) var(--space-4); border-radius: 4px;
    font-family: var(--font-mono); font-size: var(--text-eyebrow);
    z-index: 100; transition: top 0.15s ease;
  }
  .skip-link:focus-visible { top: var(--space-3); }

  .site-header { border-bottom: 1px solid var(--hairline); background: var(--bg); position: relative; z-index: 2; }

  /* databa, one word, real text, never a rasterized wordmark (SOUL hard rule, §9.3) */
  .wordmark { font-family: var(--font-mono); font-size: var(--text-h3); display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
  /* a_svg's mark-db.svg self-colors via its own var(--accent, #c8a45c)-style
     attributes (the seam contract); no class rule reaches into its content,
     matching the fix applied to the exhibit graphs. */
  .wordmark__mark { width: 1.5rem; height: 1.5rem; display: inline-flex; color: var(--fg); }
  .wordmark__mark svg { width: 100%; height: 100%; }
  /* One flex child so the two-tone letters read as a single tight word "databa";
     the .wordmark gap then applies only between the mark and the word. */
  .wordmark__text { display: inline-block; white-space: nowrap; }
  .wordmark__data { color: var(--fg); font-weight: 400; }
  .wordmark__ba { color: var(--accent); font-weight: 700; }

  .quiet-link {
    font-family: var(--font-mono); font-size: var(--text-data); color: var(--fg-2);
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .quiet-link:hover { color: var(--fg); }

  .theme-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; min-width: 44px; padding-inline: var(--space-3);
    background: transparent; border: 1px solid var(--hairline); border-radius: 999px;
    cursor: pointer; font-family: var(--font-mono); font-size: var(--text-data); color: var(--fg-2);
  }
  .theme-toggle:hover { color: var(--fg); border-color: var(--hairline-2); }
  .theme-toggle__track { width: 1.75rem; height: 1rem; border-radius: 999px; border: 1px solid var(--hairline); position: relative; display: inline-block; }
  .theme-toggle__track::after {
    content: ""; position: absolute; inset-block: 1px; inline-size: 0.75rem; aspect-ratio: 1;
    border-radius: 50%; background: var(--accent); left: 1px;
    transform: translateX(0); transition: transform 0.15s ease;
  }
  .theme-toggle[aria-pressed="true"] .theme-toggle__track::after { transform: translateX(0.75rem); }

  .hero__copy { max-width: 40ch; }
  .hero__headline { font-size: var(--text-h1); line-height: var(--lh-hero); color: var(--fg); margin-block-end: var(--space-5); }
  .hero__sub { font-size: var(--text-lead); color: var(--fg-2); margin-block-end: var(--space-5); }

  .btn-primary {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; padding-inline: var(--space-5);
    background: var(--accent); color: var(--bg);
    font-family: var(--font-mono); font-size: var(--text-data); font-weight: 700; letter-spacing: 0.01em;
    border-radius: 4px; border: none; cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
  }
  .btn-primary:hover { background: var(--accent-2); }
  .btn-primary:active { transform: translateY(1px); }

  .btn-secondary {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; padding-inline: var(--space-4);
    background: transparent; color: var(--fg);
    font-family: var(--font-mono); font-size: var(--text-data); font-weight: 600;
    border: 1px solid var(--hairline-2); border-radius: 4px; cursor: pointer;
  }
  .btn-secondary:hover { border-color: var(--accent); color: var(--fg); }

  .art-frame {
    border: 1px solid var(--hairline); border-radius: 6px; background: var(--bg-2);
    padding: var(--space-4); aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .art-frame svg { width: 100%; height: 100%; color: var(--hairline-2); }

  /* EXHIBIT device: hairline rule + mono caption, the page's signature
     proof-shelf element (design-direction §4). */
  .exhibit { padding-block: var(--space-6); border-top: 1px solid var(--hairline); }
  .exhibit:first-of-type { border-top: none; }
  .exhibit__label {
    font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent-line);
    padding-block-end: var(--space-2); margin-block-end: var(--space-4); display: inline-block;
  }
  .exhibit__title { font-size: var(--text-h2); line-height: var(--lh-tight); color: var(--fg); margin-block-end: var(--space-3); }
  .exhibit__caption { font-size: var(--text-lead); color: var(--fg-2); margin-block-end: var(--space-4); }
  .exhibit__meta { font-family: var(--font-mono); font-size: var(--text-data); color: var(--fg-2); }

  /* Exhibit A sample picker: no upload, click a sample to render it. The
     buttons share the .btn-secondary register (mono, hairline-2, transparent)
     so they read as bespoke controls, not OS chrome. The active sample is
     marked with aria-pressed, styled with the accent border (accent budget:
     the picker's active state is a chrome accent, kept to one at a time). */
  .sample-picker { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-end: var(--space-4); min-width: 0; }
  .sample-btn {
    display: inline-flex; align-items: center; min-height: 44px;
    padding-inline: var(--space-4);
    background: transparent; color: var(--fg-2);
    font-family: var(--font-mono); font-size: var(--text-data); font-weight: 600;
    border: 1px solid var(--hairline-2); border-radius: 4px; cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .sample-btn:hover { border-color: var(--accent); color: var(--fg); }
  .sample-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--fg); background: var(--accent-bg); }

  .lineage-result {
    border: 1px solid var(--hairline); border-radius: 6px; background: var(--bg-2);
    min-height: 16rem; padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-3);
  }
  /* No fixed aspect-ratio here: the two samples have very different viewBox
     ratios (budget 849x663 landscape, northwind 4903x5830 portrait). Let each
     SVG take its own intrinsic ratio at full column width, capped by
     max-height so the tall portrait sample cannot dominate the section. */
  .lineage-result__canvas { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 12rem; }
  .lineage-result__canvas svg { width: 100%; height: auto; max-height: 30rem; color: var(--hairline-2); }
  .lineage-result__status { font-family: var(--font-mono); font-size: var(--text-data); color: var(--fg-2); }

  /* Exhibit B map frame. The graticule + var()-driven background is the base
     layer: a live MapLibre canvas paints over it, or (fallback) it stays with
     an honest caption. position:relative anchors both the map canvas and the
     absolutely-positioned caption pill. */
  .map-frame {
    position: relative; border: 1px solid var(--hairline); border-radius: 6px;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 31px, var(--hairline) 32px),
      repeating-linear-gradient(90deg, transparent, transparent 31px, var(--hairline) 32px),
      var(--bg-2);
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  /* MapLibre injects its own canvas + controls; size them to the frame and
     round-clip via the frame's overflow:hidden. */
  .map-frame .maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
  .map-frame__caption {
    position: absolute; z-index: 1;
    font-family: var(--font-mono); font-size: var(--text-data); color: var(--fg-2);
    background: var(--bg); border: 1px solid var(--hairline); border-radius: 4px;
    padding: var(--space-2) var(--space-3);
  }

  .tracking-line { font-size: var(--text-lead); color: var(--fg); font-weight: 600; margin-block: var(--space-3); }

  .ownership-line { font-size: var(--text-data); font-family: var(--font-mono); color: var(--fg-2); padding-block: var(--space-4); border-top: 1px dashed var(--hairline-2); }

  .manifest { border-top: 1px solid var(--hairline); }
  .manifest__row { border-bottom: 1px solid var(--hairline); }
  .manifest__row--muted { border-top: 1px dashed var(--hairline-2); margin-top: var(--space-2); }
  .manifest__label { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
  /* --fg-3 stays OUT of this row: 13px mono is small text by the WCAG
     large-text test even bold, so §9.2's floor is not cleared here. The
     dashed top border + muted body color (below) carry the demotion. */
  .manifest__desc { font-size: var(--text-body); color: var(--fg); }
  .manifest__row--muted .manifest__desc { color: var(--fg-2); font-size: var(--text-data); }
  .manifest__desc strong { font-weight: 700; color: var(--fg); }

  .trust-band { border-top: 1px solid var(--hairline); padding-block: var(--space-5); }
  .trust-band p { font-family: var(--font-mono); font-size: var(--text-data); color: var(--fg-2); max-width: var(--prose-max); }

  .close-cta__statement { font-size: var(--text-h2); line-height: var(--lh-tight); color: var(--fg); max-width: 28ch; margin-block-end: var(--space-5); }

  .site-footer { border-top: 1px solid var(--hairline); padding-block: var(--space-4); }
  .site-footer p { font-family: var(--font-mono); font-size: var(--text-data); color: var(--fg-2); }
}

/* ------------------------------------------------------------------------
   UTILITIES
   ------------------------------------------------------------------------ */
@layer utilities {
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}