/* 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 */
}

/* ── Dark mode ──────────────────────────────────────────────────────────────────
   Added 2026-08-07 during the fleet convergence. Purely a token override: every
   component rule below is unchanged, so light mode renders exactly as before and
   gridtally.com is visually untouched for anyone not in dark mode.

   It exists because Postail's pages already had dark mode and are read on a phone at
   night — converging them onto this file without it would have been a regression, not
   a convergence. The fleet standard has to be at least as good as what it replaces.

   Contrast measured against --fb-paper #141517, not eyeballed (the light palette
   carries a comment about a FAIL that a first draft mislabeled as passing):
     ink       #ECEAE4  15.19:1   ink-soft  #B4B7BC  9.08:1
     ink-faint #9A9DA3   6.72:1   yellow    #F0B155  9.68:1
   All AA or better. Amber lifts from #E8A33D to #F0B155 because the darker tone goes
   muddy on near-black; the deep tone becomes the light one so pressed states still
   read as pressed.

   THREE STATES, not two. The OS preference is the default, and an explicit choice
   overrides it in BOTH directions -- someone on a dark phone who wants this one page
   light has to be able to say so, or the "toggle" is only half a control.

     system (no data-theme)  -> follow prefers-color-scheme
     data-theme="dark"       -> dark, whatever the OS says
     data-theme="light"      -> light, whatever the OS says

   The palette itself is written ONCE, as --dk-* values, and mapped onto the --fb-*
   tokens by the two rules that need it. The mapping is repeated; the colours are not.
   A change to the dark amber is a one-line edit, which is the property that matters.  */
:root {
  --dk-yellow:      #F0B155;
  --dk-yellow-deep: #E8A33D;
  --dk-yellow-soft: #2A2419;   /* amber wash, inverted */
  --dk-ink:         #ECEAE4;
  --dk-ink-soft:    #B4B7BC;
  --dk-ink-faint:   #9A9DA3;
  --dk-paper:       #141517;
  --dk-sheet:       #1C1E21;
  --dk-rule:        #ECEAE4;
  --dk-line:        #2E3136;
  --dk-grid-color:  rgba(236, 234, 228, 0.045);
  --dk-shadow-hard: 4px 4px 0 rgba(0, 0, 0, .65);
}

@media (prefers-color-scheme: dark) {
  /* :not([data-theme="light"]) is what makes the toggle work against the grain of the
     OS. Without it, choosing light on a dark phone would do nothing at all. */
  :root:not([data-theme="light"]) {
    --fb-yellow:      var(--dk-yellow);
    --fb-yellow-deep: var(--dk-yellow-deep);
    --fb-yellow-soft: var(--dk-yellow-soft);
    --fb-ink:         var(--dk-ink);
    --fb-ink-soft:    var(--dk-ink-soft);
    --fb-ink-faint:   var(--dk-ink-faint);
    --fb-paper:       var(--dk-paper);
    --fb-sheet:       var(--dk-sheet);
    --fb-rule:        var(--dk-rule);
    --fb-line:        var(--dk-line);
    --fb-grid-color:  var(--dk-grid-color);
    --fb-shadow-hard: var(--dk-shadow-hard);
  }
}

:root[data-theme="dark"] {
  --fb-yellow:      var(--dk-yellow);
  --fb-yellow-deep: var(--dk-yellow-deep);
  --fb-yellow-soft: var(--dk-yellow-soft);
  --fb-ink:         var(--dk-ink);
  --fb-ink-soft:    var(--dk-ink-soft);
  --fb-ink-faint:   var(--dk-ink-faint);
  --fb-paper:       var(--dk-paper);
  --fb-sheet:       var(--dk-sheet);
  --fb-rule:        var(--dk-rule);
  --fb-line:        var(--dk-line);
  --fb-grid-color:  var(--dk-grid-color);
  --fb-shadow-hard: var(--dk-shadow-hard);
}

/* ── The toggle itself ──────────────────────────────────────────────────────────
   A field-ticket switch: square, hard border, mono label, no animation. It reads as
   a stamped control rather than a chrome affordance, which is the whole house style.

   Hidden entirely when JavaScript never runs (see .fb-theme-toggle[hidden]): a switch
   that does nothing is worse than no switch, and the media query above already gives
   a no-JS reader the correct theme for their OS.

   Both labels are in the DOM and one is hidden, rather than swapping textContent from
   script -- the button's width then never changes as you press it, so the page does
   not twitch. Which label shows is driven by the SAME data-theme attribute that drives
   the palette, so the control cannot disagree with what the reader is looking at.     */
.fb-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .4em .7em;
  border: var(--fb-border, 2px solid var(--fb-ink));
  border-radius: var(--fb-radius, 2px);
  background: var(--fb-sheet);
  color: var(--fb-ink);
  font-family: var(--fb-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
}

.fb-theme-toggle:hover { background: var(--fb-yellow-soft); }

.fb-theme-toggle:focus-visible {
  outline: 2px solid var(--fb-yellow-deep);
  outline-offset: 2px;
}

/* The icon is decorative; the word next to it carries the meaning for a screen reader. */
.fb-theme-toggle .fb-theme-icon { font-size: .9em; }

/* Default (system / light): offer DARK. In dark: offer LIGHT. */
.fb-theme-toggle .fb-theme-to-light { display: none; }
.fb-theme-toggle .fb-theme-to-dark  { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fb-theme-toggle .fb-theme-to-light { display: inline; }
  :root:not([data-theme="light"]) .fb-theme-toggle .fb-theme-to-dark  { display: none; }
}
:root[data-theme="dark"] .fb-theme-toggle .fb-theme-to-light { display: inline; }
:root[data-theme="dark"] .fb-theme-toggle .fb-theme-to-dark  { display: none; }
:root[data-theme="light"] .fb-theme-toggle .fb-theme-to-light { display: none; }
:root[data-theme="light"] .fb-theme-toggle .fb-theme-to-dark  { display: inline; }

/* ── 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);
}