/* ──────────────────────────────────────────────────────────────────────────
   Flock — shared design tokens for every page in docs/.
   Each page is a standalone .html that links this file and keeps its own
   layout styles inline. This file is tokens + base reset only — nothing
   page-specific lives here.
   Link this once near the top of a page:
       <link rel="stylesheet" href="assets/flock.css">
   then use the variables (var(--ink), var(--gold), …) anywhere.
   Change a value HERE and every page that links this file updates at once.
   ────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500;600&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&display=swap');

/* Söhne — the Flock brand body/information typeface (BRAND_ASSETS.md §3). Committed in-repo
   OTFs (same files the microsites + pitch cards use). --ui-sans now leads with Söhne so all
   dashboard body/card/table text is on-brand, with the system stack as the load/no-font fallback. */
@font-face{font-family:'Sohne';src:url('cards/BRAND_Font%20-%20Sohne%20OTF/S%C3%B6hne-Buch.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sohne';src:url('cards/BRAND_Font%20-%20Sohne%20OTF/S%C3%B6hne-BuchKursiv.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Sohne';src:url('cards/BRAND_Font%20-%20Sohne%20OTF/S%C3%B6hne-Halbfett.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Sohne';src:url('cards/BRAND_Font%20-%20Sohne%20OTF/S%C3%B6hne-Kr%C3%A4ftig.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

:root {
  /* Core palette */
  --ink:    #0D1E07;            /* near-black green — text + dark panels   */
  --paper:  #F5F0E3;            /* page background                         */
  --cream:  #e8e0cc;            /* secondary panel background              */
  --accent: #4d7a3f;            /* primary green — links, markers          */
  --gold:   #c9931a;            /* highlight / active-tab / emphasis        */
  --steel:  #162112;            /* deep panel / dark table background       */
  --muted:  #6b7c63;            /* secondary text                          */
  --line:   rgba(10,10,10,0.12);/* hairline borders                        */

  /* Extended palette — used by the Fields Explorer; safe for any page. */
  --ink-soft:    #1f3320;       /* softened ink for secondary dark text     */
  --paper-2:     #efe8d6;       /* alternate page background                */
  --cream-2:     #f2ecd9;       /* lighter cream panel                      */
  --gold-soft:   #e0bd6c;       /* muted gold                               */
  --rose:        #b85c5c;       /* alert / over-cap                         */
  --rose-soft:   #d99090;       /* muted rose                               */
  --muted-2:     #9aa893;       /* tertiary text                            */
  --line-strong: rgba(10,10,10,0.18); /* stronger hairline                  */
  --shadow:      0 1px 2px rgba(13,30,7,0.04), 0 4px 16px rgba(13,30,7,0.06); /* card shadow */
  --green-deep:  #034435;       /* deep brand green                         */
  --serif:       'DM Serif Display', Georgia, serif;
  --display:     'Bebas Neue', sans-serif; /* display / title typeface       */
  --condensed:   'IBM Plex Sans Condensed', system-ui, sans-serif; /* condensed font for dense table/list/data views (internal tool — not pitch-card brand) */
  --ui-sans:     'Sohne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* READABLE proportional sans — the Flock brand body font (Söhne), system stack as fallback. The default for ALL body/paragraph/card/table text. The display font (--display) is for titles/section headers only (Kim's #1 font rule). */

  /* Purpose colors (rgba) — replace ad-hoc inline rgba so pages stay token-driven. */
  --overlay:     rgba(13,30,7,0.55);    /* modal backdrop (ink @ 55%)        */
  --wash-gold:   rgba(201,147,26,0.10); /* notice / info wash (gold @ 10%)   */
  --wash-gold-2: rgba(201,147,26,0.18); /* cap "warn" chip (gold @ 18%)      */
  --wash-rose:   rgba(184,92,92,0.18);  /* cap "over" chip (rose @ 18%)      */
  --focus-ring:  0 0 0 3px rgba(77,122,63,0.30); /* accent keyboard focus    */

  /* Shared type scale — match roles across tabs (size only; weight/spacing stay inline). */
  --fs-eyebrow:  11px;          /* eyebrow / kicker                         */
  --fs-label:    10px;          /* uppercase section + micro labels         */
  --fs-meta:     11px;          /* row meta, captions                       */
  --fs-body:     13px;          /* finder + table body, field values        */
  --fs-ui:       12px;          /* inputs, buttons, chips                   */
  --fs-display:  clamp(28px, 4vw, 44px); /* page masthead title             */

  /* Spacing ramp — both pages map padding/margins/gaps onto these. */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* Radii — consolidate ad-hoc 4/5/6/7/9/20 to a small set. */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-pill: 999px;
}

/* Base reset + typography shared by every page. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1.7;
}

/* ─── Canonical tab header (the ink masthead at the top of every data tab).
       Single source of truth — no per-page overrides. ─── */
.hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--ink); color: var(--paper);
  padding: 14px 40px 13px;
  border-bottom: 3px double var(--gold);
}
.eyebrow { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 5px; }
.title { font-family: var(--display); font-size: 36px; line-height: 0.9; color: var(--paper); letter-spacing: 0.005em; }
.title em { font-style: normal; color: var(--gold); }
.meta { display: flex; align-items: center; gap: 16px; font-size: 11px; font-family: var(--condensed); }
.meta strong { color: var(--gold); font-weight: 600; }
.meta a, .hdr-links a { color: rgba(245,240,232,0.78); text-decoration: none; font-weight: 600; }
.meta a:hover, .hdr-links a:hover { color: var(--paper); }
.hdr-links { display: inline-flex; align-items: center; gap: 14px; }
.sync-btn {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--gold); border: 1px solid var(--gold); border-radius: var(--radius-pill);
  padding: 6px 14px; text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s; cursor: pointer; background: transparent; font-family: inherit;
}
.sync-btn:hover { background: var(--gold); color: var(--ink); }

/* ─── Canonical pill bar — Option A canon, equal-width via grid.
       Pills span left-to-right and never wrap. .summary host = grid.
       Each .scard is a button that filters its own bucket. ─── */
.summary {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  padding: var(--space-3) var(--space-5) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.summary::-webkit-scrollbar { display: none; }
.scard {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  cursor: pointer; transition: all .12s; font-family: inherit; text-align: left;
  min-width: 0;
}
.scard:hover { border-color: var(--ink); }
.scard b { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--ink); line-height: 1; }
.scard span { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.scard.active { background: var(--ink); border-color: var(--ink); }
.scard.active b { color: var(--gold); }
.scard.active span { color: rgba(245,240,232,0.65); }
.scard[disabled] { opacity: .45; cursor: default; }

/* ─── Mobile rules for header + pills.
       Same canon, just tighter padding + smaller title so it fits on phone.
       On phones, give each pill a readable min-width so 5+ pills don't get
       crushed to single letters — the canonical .summary already enables
       horizontal scroll (overflow-x: auto), so this lets the strip scroll
       sideways instead of cramming illegible labels into the viewport. ─── */
@media (max-width: 767px) {
  .hdr {
    flex-direction: column; align-items: flex-start;
    gap: 10px; padding: 12px 16px;
  }
  .title { font-size: 24px; }
  .meta { font-size: 10px; gap: 10px; flex-wrap: wrap; }
  .summary { padding: var(--space-3) var(--space-3) 0; gap: 6px; grid-auto-columns: minmax(110px, 1fr); }
  .scard { padding: 6px 10px; }
  .scard b { font-size: 15px; }
  .scard span { font-size: 9px; letter-spacing: .06em; }
}