/* ==========================================================================
   Gokando — colors_and_type.css
   The way of perception. Older sibling to Kando Golf.
   Same brand atoms (--stone, --vermilion, --sage, --clay, --sumi, --ink).
   Adds: module-accent system (--gk-mod-*) and a denser type scale for
         multi-module screens. Light-only — dark mode was removed.

   Compatibility note
   ------------------
   This file is a SUPERSET of kando-golf/colors_and_type.css. Every Kando Golf
   token is present and unchanged. Anything Gokando-specific is prefixed
   --gk-* so the two products can share a single stylesheet without
   collision. Drop this file in place of the Kando Golf one and golf still
   works; drop the Kando Golf one in place of this and golf still works
   minus the module accents.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/Newsreader-Variable-4f6d9d4637c2cc89652b70155120f3fb12ec94332c2e8c8a1bf6e0dd03eba3ef.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/Newsreader-Italic-Variable-4a87c3f477b219b8b6acc6da376c6375235c27d3c171d45a74bec8b5bf00b3eb.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/Fraunces-Variable-d8a08d783affa5652600b1170b31b3a4ebee91aa19f7f8e05703ca2539126412.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/Fraunces-Italic-Variable-b84890d5945feda3db8b7dc3ffd20e2c27f2dc11a31d60e6baab158ac37a539e.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/Inter-Variable-36bd85b5b0f6ef27b8aba400163b86326dbb411f763fd74e0fd04bce8ad3da57.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/assets/JetBrainsMono-Variable-13253e7858a7e1f21cf5698b3de0bcd8b91d6507d50d790a22bdee8ef40a5d79.woff2) format('woff2');
}
@font-face {
  font-family: 'Recursive';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/Recursive-Variable-be2220689187c552ccadfd46cb36e02f11f4d7beafd22d64148c3d65b84985ba.woff2) format('woff2-variations');
}

/* ==========================================================================
   Brand atoms — IDENTICAL to Kando Golf. Do not drift.
   ========================================================================== */

:root {
  --stone:      #EEE7DA;
  --stone-alt:  #E2D9C5;
  --stone-warm: #F7F2E6;
  --ink:        #222121;
  --sumi:       #4A4845;
  --muted:      #8B8477;
  --sage:       #8FA789;
  --sage-soft:  #DDE5D6;
  --clay:       #D2795C;
  --clay-soft:  #ECC3B1;
  --vermilion:  #C8422A;
  --deep-ink:   #1F2420;
  --deep-sage:  #6E7A5A;

  /* ---------- Stone ramp ---------- */
  --stone-50:  oklch(0.980 0.008 78);
  --stone-100: oklch(0.955 0.015 78);
  --stone-150: oklch(0.935 0.020 78);
  --stone-200: oklch(0.895 0.025 78);
  --stone-300: oklch(0.815 0.022 78);
  --stone-400: oklch(0.655 0.018 72);
  --stone-500: oklch(0.520 0.015 68);
  --stone-600: oklch(0.420 0.014 62);
  --stone-700: oklch(0.340 0.012 58);
  --stone-800: oklch(0.240 0.010 55);
  --stone-900: oklch(0.190 0.008 55);
  --stone-950: oklch(0.140 0.006 55);

  /* ---------- Vermilion ramp ---------- */
  --vermilion-50:  oklch(0.970 0.015 35);
  --vermilion-100: oklch(0.920 0.040 33);
  --vermilion-200: oklch(0.850 0.090 32);
  --vermilion-300: oklch(0.760 0.135 30);
  --vermilion-400: oklch(0.670 0.170 30);
  --vermilion-500: oklch(0.580 0.180 30);
  --vermilion-600: oklch(0.510 0.165 30);
  --vermilion-700: oklch(0.435 0.145 30);
  --vermilion-800: oklch(0.355 0.115 30);
  --vermilion-900: oklch(0.275 0.085 30);

  /* ---------- Sage ramp ---------- */
  --sage-50:  oklch(0.970 0.012 145);
  --sage-100: oklch(0.925 0.025 145);
  --sage-200: oklch(0.865 0.040 145);
  --sage-300: oklch(0.790 0.052 142);
  --sage-400: oklch(0.715 0.058 140);
  --sage-500: oklch(0.630 0.060 138);
  --sage-600: oklch(0.545 0.060 138);
  --sage-700: oklch(0.455 0.055 138);
  --sage-800: oklch(0.365 0.045 138);
  --sage-900: oklch(0.280 0.035 138);

  /* ---------- Clay ramp ---------- */
  --clay-50:  oklch(0.965 0.018 48);
  --clay-100: oklch(0.905 0.045 48);
  --clay-200: oklch(0.840 0.072 48);
  --clay-300: oklch(0.770 0.095 45);
  --clay-400: oklch(0.700 0.115 42);
  --clay-500: oklch(0.645 0.120 42);
  --clay-600: oklch(0.555 0.105 42);
  --clay-700: oklch(0.465 0.090 42);
  --clay-800: oklch(0.370 0.070 42);
  --clay-900: oklch(0.285 0.055 42);

  /* ---------- Ink ramp ---------- */
  --ink-700: oklch(0.280 0.010 150);
  --ink-800: oklch(0.215 0.008 150);
  --ink-900: oklch(0.180 0.006 150);

  /* ==========================================================================
     Gokando module atoms — --gk-mod-*
     Each module gets ONE assigned hue, drawn from the existing warm-organic
     register so the family resonance holds. Hues sit in OKLCH at the same
     chroma band as sage/clay (subdued, never saturated).

     Assignment rationale:
     - sleep        indigo-dusk  (the only cool note — night, rest)
     - run          vermilion    (cardio fire — but a softer 450 step,
                                  not the brand vermilion 500)
     - bike         clay-deep    (chrome, metal-warm)
     - swim         lake-teal    (water, single new hue)
     - workouts     sumi-graphite(iron, weight room)
     - nutrition    earth-amber  (food, harvest)
     - meditation   sage-pale    (the calmest sage)
     - journal      stone-deep   (paper-grey, the most neutral)
     - golf         deep-sage    (links to Kando Golf)
     ========================================================================== */

  /* Indigo — only cool hue in the system. Kept low-chroma so it still reads
     as "warm earthy palette plus a cooled note", not a foreign blue. */
  --indigo-100: oklch(0.910 0.025 260);
  --indigo-200: oklch(0.830 0.045 258);
  --indigo-300: oklch(0.700 0.065 255);
  --indigo-400: oklch(0.560 0.075 252);
  --indigo-500: oklch(0.450 0.075 250);
  --indigo-600: oklch(0.360 0.065 250);
  --indigo-700: oklch(0.280 0.050 250);
  --indigo-800: oklch(0.215 0.038 250);
  --indigo-900: oklch(0.165 0.028 250);

  /* Teal — single new hue for swim. Mossy, not clinical. */
  --teal-100: oklch(0.920 0.025 195);
  --teal-200: oklch(0.840 0.045 192);
  --teal-300: oklch(0.730 0.060 188);
  --teal-400: oklch(0.620 0.060 185);
  --teal-500: oklch(0.520 0.055 185);
  --teal-600: oklch(0.430 0.048 185);
  --teal-700: oklch(0.345 0.040 185);

  /* Amber — nutrition. Warmer than clay, less red. */
  --amber-100: oklch(0.940 0.035 80);
  --amber-200: oklch(0.880 0.075 78);
  --amber-300: oklch(0.800 0.105 75);
  --amber-400: oklch(0.730 0.115 72);
  --amber-500: oklch(0.660 0.115 70);
  --amber-600: oklch(0.560 0.100 68);

  /* Module accent assignments — the SINGLE source of truth.
     Used for: chip dots, module badges, the vertical hairline on module
     cards, ring strokes on rings/charts, and ONE italic hero verb per
     module screen. Never as a flood-fill. */
  --gk-mod-sleep:        var(--indigo-500);
  --gk-mod-sleep-soft:   var(--indigo-100);
  --gk-mod-sleep-deep:   var(--indigo-700);

  --gk-mod-run:          var(--vermilion-400);
  --gk-mod-run-soft:     var(--vermilion-100);
  --gk-mod-run-deep:     var(--vermilion-600);

  --gk-mod-bike:         var(--clay-600);
  --gk-mod-bike-soft:    var(--clay-100);
  --gk-mod-bike-deep:    var(--clay-800);

  --gk-mod-swim:         var(--teal-500);
  --gk-mod-swim-soft:    var(--teal-100);
  --gk-mod-swim-deep:    var(--teal-700);

  --gk-mod-workouts:     var(--stone-700);    /* sumi graphite — the iron */
  --gk-mod-workouts-soft:var(--stone-200);
  --gk-mod-workouts-deep:var(--stone-900);

  --gk-mod-nutrition:    var(--amber-500);
  --gk-mod-nutrition-soft:var(--amber-100);
  --gk-mod-nutrition-deep:var(--amber-600);

  --gk-mod-meditation:   var(--sage-500);
  --gk-mod-meditation-soft:var(--sage-100);
  --gk-mod-meditation-deep:var(--sage-700);

  --gk-mod-journal:      var(--stone-500);    /* paper-grey */
  --gk-mod-journal-soft: var(--stone-150);
  --gk-mod-journal-deep: var(--stone-800);

  --gk-mod-golf:         var(--sage-600);     /* deep-sage — links to Kando Golf */
  --gk-mod-golf-soft:    var(--sage-100);
  --gk-mod-golf-deep:    var(--sage-700);

  /* ==========================================================================
     Semantic surfaces — same as Kando Golf, plus Gokando additions.
     ========================================================================== */

  /* Surfaces */
  --bg:             var(--stone-150);
  --bg-raised:      var(--stone-100);
  --bg-sunken:      var(--stone-200);
  --bg-inverse:     var(--ink-900);
  --paper:          #FCFAF4;
  --snow:           #FFFFFF;

  /* Foreground */
  --fg:             var(--stone-900);
  --fg-strong:      var(--stone-900);
  --fg-muted:       var(--stone-700);
  --fg-subtle:      var(--stone-400);
  --fg-on-inverse:  var(--stone-150);
  --fg-on-brand:    var(--stone-150);

  /* Borders */
  --border:          var(--stone-200);
  --border-strong:   var(--stone-300);
  --border-subtle:   color-mix(in oklab, var(--stone-200) 60%, transparent);

  /* Brand / accent — vermilion, same as Kando Golf */
  --accent:          var(--vermilion-500);
  --accent-hover:    var(--vermilion-600);
  --accent-pressed:  var(--vermilion-700);
  --accent-fg:       var(--stone-50);
  --accent-soft:     var(--vermilion-100);
  --accent-soft-fg:  var(--vermilion-800);

  /* Semantic */
  --success:         var(--sage-600);
  --success-soft:    var(--sage-100);
  --success-fg:      var(--sage-900);
  --warn:            var(--clay-500);
  --warn-soft:       var(--clay-100);
  --warn-fg:         var(--clay-900);
  --danger:          var(--vermilion-500);
  --danger-soft:     var(--vermilion-100);
  --danger-fg:       var(--vermilion-900);
  --info:            var(--ink-700);
  --info-soft:       var(--stone-200);
  --info-fg:         var(--ink-900);

  /* Score chips (still relevant for golf module link) */
  --score-eagle:     var(--sage-700);
  --score-birdie:    var(--sage-600);
  --score-par:       var(--stone-400);
  --score-bogey:     var(--clay-500);
  --score-double:    var(--vermilion-500);
  --score-triple:    var(--vermilion-600);

  /* Module-active CSS var — set by [data-mod="sleep"] etc. on a wrapper.
     Components inside read --gk-acc and don't need to know which module. */
  --gk-acc:        var(--accent);
  --gk-acc-soft:   var(--accent-soft);
  --gk-acc-deep:   var(--accent-pressed);

  /* ==========================================================================
     Compat aliases — terminal-era token names used in legacy views and in
     JS-generated markup (e.g. golf_round_map_controller writes HTML using
     --green / --red / --text). Aliasing them lets those surfaces render
     palatably under the warm palette without rewriting the JS. Remove
     aliases once each legacy consumer has been ported.
     ========================================================================== */
  --text:            var(--fg);
  --text-secondary:  var(--fg);
  --text-muted:      var(--fg-muted);
  --text-bright:     var(--fg-strong);
  --bg-card:         var(--bg-raised);
  --bg-card-hover:   var(--bg-sunken);
  --bg-input:        var(--bg-sunken);
  --bg-nav:          color-mix(in oklab, var(--bg) 92%, transparent);
  --accent-bright:   var(--accent);
  --accent-bg:       color-mix(in oklab, var(--accent) 12%, transparent);
  --accent-border:   color-mix(in oklab, var(--accent) 35%, transparent);
  --green:           var(--score-birdie);
  --green-bg:        var(--success-soft);
  --green-border:    color-mix(in oklab, var(--success) 35%, transparent);
  --red:             var(--score-bogey);
  --red-bg:          var(--clay-100);
  --red-border:      color-mix(in oklab, var(--clay-500) 40%, transparent);
  --yellow:          var(--clay-400);
  --amber:           var(--amber-500);
  --purple:          #a371f7;
  --font-ui:         var(--font-sans);
  --ui-radius:       var(--radius-md);

  /* Focus / selection */
  --focus-ring:      color-mix(in oklab, var(--vermilion-500) 55%, transparent);
  --selection-bg:    var(--vermilion-100);
  --selection-fg:    var(--vermilion-900);

  /* Shadows — warm, layered */
  --shadow-xs:  0 1px 0 0 color-mix(in oklab, var(--stone-900) 6%, transparent);
  --shadow-sm:  0 1px 2px -1px color-mix(in oklab, var(--stone-900) 12%, transparent),
                0 2px 4px -2px color-mix(in oklab, var(--stone-900) 8%, transparent);
  --shadow-md:  0 2px 4px -2px color-mix(in oklab, var(--stone-900) 10%, transparent),
                0 8px 18px -6px color-mix(in oklab, var(--stone-900) 14%, transparent);
  --shadow-lg:  0 8px 24px -8px color-mix(in oklab, var(--stone-900) 18%, transparent),
                0 24px 48px -16px color-mix(in oklab, var(--stone-900) 20%, transparent);
  --shadow-inset: inset 0 1px 0 0 color-mix(in oklab, #fff 50%, transparent);

  /* Radii */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Spacing */
  --space-1:  4px;  --space-2:  8px;  --space-3:  12px;
  --space-4:  16px; --space-5:  20px; --space-6:  24px;
  --space-8:  32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;

  /* ==========================================================================
     Typography — same families as Kando Golf, denser scale.
     Gokando screens carry more headlines and more numerics per surface
     (eight modules vs one), so the type scale tightens by ~1px on body
     ranks and adds an h5 step.
     ========================================================================== */

  --font-serif:  'Newsreader', 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-timer:  'Recursive', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Numeric displays — stats, tables, dashboard tiles, score figures.
     Editorial serifs (even Newsreader) struggle with scannability of
     digits at small sizes / outdoors; route numerals through Inter
     with tabular figures and slashed-zero for clean alignment. */
  --font-numeric: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --text-display: clamp(40px, 9vw, 64px);
  --text-h1:      30px;   /* -2 vs golf — more h1s per dashboard */
  --text-h2:      22px;
  --text-h3:      18px;
  --text-h4:      16px;
  --text-h5:      14px;   /* new — module sub-headers on dashboard */
  --text-body:    15px;   /* -1 vs golf — denser */
  --text-small:   13px;
  --text-caption: 12px;
  --text-overline:11px;

  --leading-tight: 1.15;
  --leading-snug:  1.30;
  --leading-body:  1.55;
  --leading-loose: 1.70;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-overline:0.14em;
}

/* ==========================================================================
   Module-scoped accent — apply to any wrapper. Components inside
   read --gk-acc and don't care which module they're in.
   ========================================================================== */
[data-mod="sleep"]      { --gk-acc: var(--gk-mod-sleep);      --gk-acc-soft: var(--gk-mod-sleep-soft);      --gk-acc-deep: var(--gk-mod-sleep-deep); }
[data-mod="run"]        { --gk-acc: var(--gk-mod-run);        --gk-acc-soft: var(--gk-mod-run-soft);        --gk-acc-deep: var(--gk-mod-run-deep); }
[data-mod="bike"]       { --gk-acc: var(--gk-mod-bike);       --gk-acc-soft: var(--gk-mod-bike-soft);       --gk-acc-deep: var(--gk-mod-bike-deep); }
[data-mod="swim"]       { --gk-acc: var(--gk-mod-swim);       --gk-acc-soft: var(--gk-mod-swim-soft);       --gk-acc-deep: var(--gk-mod-swim-deep); }
[data-mod="workouts"]   { --gk-acc: var(--gk-mod-workouts);   --gk-acc-soft: var(--gk-mod-workouts-soft);   --gk-acc-deep: var(--gk-mod-workouts-deep); }
[data-mod="nutrition"]  { --gk-acc: var(--gk-mod-nutrition);  --gk-acc-soft: var(--gk-mod-nutrition-soft);  --gk-acc-deep: var(--gk-mod-nutrition-deep); }
[data-mod="meditation"] { --gk-acc: var(--gk-mod-meditation); --gk-acc-soft: var(--gk-mod-meditation-soft); --gk-acc-deep: var(--gk-mod-meditation-deep); }
[data-mod="journal"]    { --gk-acc: var(--gk-mod-journal);    --gk-acc-soft: var(--gk-mod-journal-soft);    --gk-acc-deep: var(--gk-mod-journal-deep); }
[data-mod="golf"]       { --gk-acc: var(--gk-mod-golf);       --gk-acc-soft: var(--gk-mod-golf-soft);       --gk-acc-deep: var(--gk-mod-golf-deep); }

/* Dark mode was removed from the brand. The warm-stone palette in :root
   above is the only theme this app serves. */

/* ==========================================================================
   Base element styling
   ========================================================================== */

html { color-scheme: light; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-weight: 480;
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
  text-wrap: pretty;
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-variation-settings: 'opsz' 48, 'SOFT' 60; font-weight: 500; }
h4 {
  font-size: var(--text-h4);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
}
h5 {
  font-size: var(--text-h5);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-3); text-wrap: pretty; }
small, .caption { font-size: var(--text-caption); color: var(--fg-muted); }
strong, b { font-weight: 600; color: var(--fg-strong); }
em, i { font-style: italic; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--accent) 35%, transparent);
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }

/* Display & display-italic — the editorial voice */
.display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 380;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg-strong);
}
.display-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 380;
}

/* Overline */
.overline {
  font-family: var(--font-sans);
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.overline--ruled {
  display: block;
  padding-top: 10px;
  position: relative;
}
.overline--ruled::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 1px;
  background: var(--fg-subtle);
  opacity: 0.55;
}

/* Numerals */
.tabular { font-variant-numeric: tabular-nums; }
.score-num {
  font-family: var(--font-numeric);
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.01em;
}

/* Use for ANY numeric inside a timer surface — live clocks, countdowns,
   round counts, in-set numerals, splits/laps tables. Recursive Mono
   Linear (MONO=1, CASL=0) is true monospace so every glyph — digits,
   letters, slashes — stays locked while ticking. */
.metric-timer {
  font-family: var(--font-timer);
  font-variation-settings: 'MONO' 1, 'CASL' 0, 'slnt' 0, 'CRSV' 0;
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'ss01', 'ss02';
  font-weight: 500;
  letter-spacing: 0;
}

/* Focus */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Placeholders — clearly lighter than entered values, italic for unambiguous
   "this is a hint, not a value" reading. Individual forms can still override
   when they want a different treatment. */
:where(input, textarea)::placeholder {
  color: color-mix(in oklab, var(--fg-subtle) 65%, var(--bg));
  font-style: italic;
  opacity: 1; /* override Firefox's default placeholder dimming */
}

/* ==========================================================================
   Gokando-specific component primitives
   ========================================================================== */

/* Module badge — the central identity move. A single dot + word, no flood-
   fill. The dot is the module accent; the word is sumi.
   <span class="gk-badge" data-mod="sleep">Sleep</span>  */
.gk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.gk-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gk-acc);
  flex-shrink: 0;
}

/* Module card — the dashboard tile. Vertical hairline left edge in module
   accent. Otherwise stone-paper, family-resonant. */
.gk-mod-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px 18px 22px;
  box-shadow: var(--shadow-xs);
}
.gk-mod-card::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--gk-acc);
}

/* Stat bigfig — the big numeral on dashboard tiles. Sans-tabular for
   scannability; the editorial vibe lives in headlines, not numbers. */
.gk-bigfig {
  font-family: var(--font-numeric);
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg-strong);
}

/* Hero italic verb — the brand's signature copy move. ONE per screen. */
.gk-verb {
  font-family: var(--font-serif);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 420;
  color: var(--gk-acc, var(--accent));
}