/* Self-hosted Barlow + Barlow Condensed (latin subset), replacing the
   render-blocking Google Fonts import. Regenerate via the lean-pass notes. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Barlow-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Barlow-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Barlow-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/BarlowCondensed-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/BarlowCondensed-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/BarlowCondensed-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/BarlowCondensed-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRIDTALLY BRAND — "Field Book" design tokens (signature look)
   ═══════════════════════════════════════════════════════════════════════════
   The one source of truth for the platform's visual identity. Decided
   2026-07-19; Fable design review 2026-07-19 (verdict: sound-with-changes;
   neo-brutalist lineage, NOT skeuomorphism — grid is ground grammar à la
   Material's paper/ink, never surface simulation). This file carries its own
   font @import above — any page linking brand.css alone gets the brand type.

   RULES (amended per review — the discipline that keeps a signature from
   becoming wallpaper):
   1. Grid = GROUND. Display headlines may sit on it; reading-length body
      text, forms, and data tables never do — they sit on sheets. The grid
      stops (or fades) where work begins.
   2. ONE yellow, and scarce: on any working screen, yellow appears in at
      most one highlighter moment plus focus/active states. Yellow is never
      text on light (2.2:1) and never the default button-text color IN-APP —
      in-app primaries are ink/white. Marketing surfaces + emails keep the
      ink/yellow fb-btn.
   3. Ink rules, square corners, hard offset shadows define the signature
      fb-* components and marketing surfaces at full volume.
   4. The app interior runs the QUIET SIGNATURE (amended 2026-07-19, Tyler):
      grid is the ground everywhere at reduced strength (~.035 vs login .055),
      ALL working content on ink-ruled sheets (2px ink border, 3px offset
      shadow, existing radii retained — the merged rounded+hard construction).
      Grid never sits directly under reading text; one-line subtitles under a
      display h2 count as display support. Overlays (modals, dropdowns,
      bottom sheets) stay soft — floating ephemera, not sheets.
   5. Type: uppercase condensed is display-only — never error messages,
      user-entered data, strings over ~5 words, or sizes below ~0.9rem.
   6. Inputs: underline-only fields are a marketing-surface signature; in-app
      forms use boxed fields (Material's own research — line-only fields fail
      input recognition). Minimum 44px input height everywhere.
   Type roles: Barlow Condensed 700/800 uppercase display, Barlow body,
   ui-monospace for form numbers/labels.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Field Book primitives ── */
  --fb-yellow:      #E8A33D;   /* field-book cover, weathered */
  --fb-yellow-deep: #C9871F;   /* pressed/hover state of the cover */
  --fb-yellow-soft: #FBF3E4;   /* 8% yellow wash — highlight backgrounds */
  --fb-ink:         #17181A;   /* pen ink — text, rules, chrome */
  --fb-ink-soft:    #4A4D52;   /* pencil — secondary text */
  --fb-ink-faint:   #6A6D73;   /* graphite — hints, captions (4.97:1 on paper — AA; was #8B8E94 @ 3.14:1, a FAIL the first draft mislabeled as 4.5:1) */
  --fb-paper:       #FBFAF6;   /* all-weather paper — page ground */
  --fb-sheet:       #FFFFFF;   /* the clean sheet content sits on */
  --fb-rule:        #17181A;   /* 2px ink rules */
  --fb-line:        #E3E1DA;   /* faint paper divider */

  /* ── The signature grid (two gradients, ~5% ink, 22px cell) ── */
  --fb-grid-color:  rgba(23, 24, 26, 0.055);
  --fb-grid-size:   22px;

  /* ── Signature construction values ── */
  --fb-radius:      2px;                            /* square-ish corners */
  --fb-shadow-hard: 4px 4px 0 rgba(23,24,26,.9);    /* offset print shadow */
  --fb-border:      2px solid var(--fb-ink);

  /* ── Type roles ── */
  --fb-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; /* 700/800, uppercase, tight */
  --fb-body:    'Barlow', -apple-system, 'Segoe UI', sans-serif;
  --fb-mono:    ui-monospace, Consolas, 'Courier New', monospace; /* FORM-001 labels, numbers */
}

/* ── Signature components ─────────────────────────────────────────────── */

/* The grid ground — apply to page/section backgrounds ONLY (rule 1). */
.fb-grid {
  background-color: var(--fb-paper);
  background-image:
    linear-gradient(var(--fb-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--fb-grid-color) 1px, transparent 1px);
  background-size: var(--fb-grid-size) var(--fb-grid-size);
}

/* The clean sheet content sits on. */
.fb-sheet {
  background: var(--fb-sheet);
  border: var(--fb-border);
  border-radius: var(--fb-radius);
  box-shadow: var(--fb-shadow-hard);
}

/* Sheet header band — yellow cover strip with an ink rule. */
.fb-sheet-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 20px;
  background: var(--fb-yellow);
  border-bottom: var(--fb-border);
  font-family: var(--fb-display);
  font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fb-ink);
}
.fb-form-no { font: 700 .78rem var(--fb-mono); letter-spacing: 0; }

/* Kicker — ink chip with yellow type (the one place yellow text is legal:
   on ink, where it clears contrast). */
.fb-kicker {
  display: inline-block;
  background: var(--fb-ink); color: var(--fb-yellow);
  font: 700 .72rem/1 var(--fb-body);
  letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--fb-radius);
}

/* Primary action — ink block, yellow type. Hover deepens to true black. */
.fb-btn {
  display: inline-block;
  background: var(--fb-ink); color: var(--fb-yellow);
  border: none; border-radius: var(--fb-radius);
  font-family: var(--fb-display);
  font-size: 1.02rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 14px 22px; cursor: pointer; text-decoration: none; text-align: center;
}
.fb-btn:hover { background: #000; }
.fb-btn:focus-visible { outline: 3px solid var(--fb-ink); outline-offset: 2px; } /* ink ring: 17:1 on paper (yellow-deep was ~3:1 — sub-AA on paper) */

/* Highlighter underline for display headlines. */
.fb-under { box-shadow: inset 0 -0.28em 0 var(--fb-yellow); }

/* The tab mark (logo placeholder until a drawn mark exists) — a yellow
   field-book tab with two ink rule lines. */
.fb-tab {
  display: inline-block; width: 34px; height: 26px; position: relative;
  background: var(--fb-yellow); border: var(--fb-border); border-radius: var(--fb-radius);
  vertical-align: middle;
}
.fb-tab::after {
  content: ""; position: absolute; left: 5px; right: 5px; top: 6px;
  border-top: 2px solid var(--fb-ink);
  box-shadow: 0 6px 0 var(--fb-ink);
}