/* The guide kit (Nov 5, 2026): the pieces every step of the journey shares, so the free map, the game,
   the Board and the Empire look and sound like one guide. Copied to innercircle/kit/ by tools/sync_kit.py.
   Pieces: the journey bar, the guide line, the bridge card, the shared button. Colors are --gk-*. */
/* Shared tokens (elite pass, Nov 5). Rules: one .gk-btn per screen; secondary .gk-btn-2, tertiary .gk-link;
   --gk-gold carries text (buttons, links, prices); --gk-gold-deco never carries text (rings, dots, borders);
   13px is the smallest real text; --gk-tap (48px) is the smallest touch target; headlines: system font, no serif. */
:root {
  --gk-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --gk-fs-xs: 13px; --gk-fs-s: 15px; --gk-fs-m: 17px; --gk-fs-l: 20px; --gk-fs-xl: 26px; --gk-fs-2xl: clamp(30px, 7vw, 40px);
  --gk-lh: 1.45; --gk-track-tight: -.02em; --gk-track-caps: .06em;
  --gk-bg: #f6f3ec; --gk-card: #ffffff; --gk-ink: #1d1b16; --gk-mut: #6f6a5f; --gk-line: #e8e2d4;
  --gk-gold: #80611b;       /* buttons, links, prices: 5.8:1 on white, 4.9:1 on the soft cream */
  --gk-gold-deco: #b8862b;  /* rings, dots, borders, confetti only, never text */
  --gk-gold-soft: #f6ecd6; --gk-ok: #2f7d4f; --gk-ok-soft: #e4f2e8; --gk-no: #a32d2d;
  --gk-r-s: 12px; --gk-r-m: 16px; --gk-r-l: 22px; --gk-r-pill: 999px;
  --gk-shadow-1: 0 1px 2px rgba(40,32,12,.05);
  --gk-shadow-2: 0 1px 2px rgba(40,32,12,.05), 0 8px 24px rgba(40,32,12,.07);
  --gk-s1: 4px; --gk-s2: 8px; --gk-s3: 12px; --gk-s4: 16px; --gk-s5: 24px; --gk-s6: 32px;
  --gk-tap: 48px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --gk-bg: #14130f; --gk-card: #201e19; --gk-ink: #f3efe6; --gk-mut: #a39d90; --gk-line: #34302a;
    --gk-gold: #d6a447; --gk-gold-deco: #d6a447; --gk-gold-soft: #3a2f1a; --gk-ok: #6cc28f; --gk-ok-soft: #1f3327; --gk-no: #f7c1c1;
    --gk-shadow-2: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); }
}

/* The journey bar: Your circle → Your board → Your empire → Built with Nick */
.gk-journey { display: flex; gap: 4px; margin: 4px 0 14px; padding: 0; list-style: none; font: 600 12.5px/1.2 var(--gk-font); }
.gk-journey li { flex: 1; min-width: 0; text-align: center; color: var(--gk-mut); }
.gk-journey li i { display: block; height: 5px; border-radius: 3px; background: var(--gk-line); margin-bottom: 5px; }
.gk-journey li.done { color: var(--gk-ok); }
.gk-journey li.done i { background: var(--gk-ok); }
.gk-journey li.now { color: var(--gk-ink); }
.gk-journey li.now i { background: var(--gk-gold-deco); }
.gk-journey li span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The guide line: the tour guide's one sentence and one next step */
.gk-guide { display: flex; gap: 10px; align-items: flex-start; background: var(--gk-gold-soft); color: var(--gk-ink);
  border-radius: 16px; padding: 10px 14px; margin: 0 0 16px; font: 15px/1.4 var(--gk-font); text-align: left; }
.gk-guide .gk-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--gk-gold); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.gk-guide b { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--gk-mut); margin-bottom: 1px; }
.gk-guide p { margin: 0; }

/* The bridge card: what you get next, its price, one button */
.gk-bridge { background: var(--gk-card); border: 2px solid var(--gk-gold-deco); border-radius: 20px; padding: 18px; margin: 16px 0; font-family: var(--gk-font); color: var(--gk-ink); }
.gk-bridge .gk-step { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gk-gold); }
.gk-bridge h2 { margin: 4px 0 6px; font-size: 22px; line-height: 1.2; }
.gk-bridge p { margin: 0 0 12px; }
.gk-bridge .gk-price { font-weight: 700; }
.gk-bridge .gk-later { font-size: 13px; color: var(--gk-mut); margin: 12px 0 0; }
.gk-btn { display: inline-block; background: var(--gk-gold); color: #fff; border: 0; border-radius: 14px; padding: 13px 20px;
  font: 700 17px/1.2 var(--gk-font); text-decoration: none; cursor: pointer; text-align: center; }
.gk-btn.wide { display: block; width: 100%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gk-btn, :root:not([data-theme="light"]) .gk-guide .gk-av { color: #1d1b16; } }

/* Shared pieces (elite pass, Nov 5): secondary button, text link, card, eyebrow, pill, focus rings */
.gk-btn { min-height: var(--gk-tap); }
.gk-btn-2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--gk-tap); padding: 0 20px;
  border-radius: var(--gk-r-m); font: 650 var(--gk-fs-m)/1.2 var(--gk-font); text-decoration: none; cursor: pointer;
  background: var(--gk-card); border: 1px solid var(--gk-line); color: var(--gk-ink); }
.gk-btn-2.wide { display: flex; width: 100%; }
.gk-btn:hover { filter: brightness(1.06); }
.gk-btn:active, .gk-btn-2:active { transform: scale(.97); }
.gk-btn[disabled], .gk-btn-2[disabled] { opacity: .45; cursor: not-allowed; }
.gk-link { background: none; border: 0; padding: 12px 0; color: var(--gk-gold); font: 650 var(--gk-fs-s)/1.2 var(--gk-font); cursor: pointer; text-decoration: none; }
.gk-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.gk-card { background: var(--gk-card); border: 1px solid var(--gk-line); border-radius: var(--gk-r-l); padding: var(--gk-s4) 18px; box-shadow: var(--gk-shadow-1); }
.gk-eyebrow { font: 700 var(--gk-fs-xs)/1.2 var(--gk-font); letter-spacing: var(--gk-track-caps); text-transform: uppercase; color: var(--gk-mut); }
.gk-pill { display: inline-flex; align-items: center; gap: 4px; font: 650 12px/1 var(--gk-font); padding: 4px 8px; border-radius: var(--gk-r-pill);
  background: var(--gk-line); color: var(--gk-mut); white-space: nowrap; }
:where(button, a, [role=button], input, select, textarea, summary):focus-visible { outline: 3px solid var(--gk-gold-deco); outline-offset: 2px; }
@media (max-width: 380px) { .gk-journey li span { white-space: normal; line-height: 1.15; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gk-btn-2 { color: var(--gk-ink); } }
@media (prefers-reduced-motion: reduce) { .gk-btn, .gk-btn-2 { transition: none; } .gk-btn:active, .gk-btn-2:active { transform: none; } }

/* The guide's face and his introduction (Nov 6) */
.gk-face { flex: none; display: inline-block; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--gk-gold, #b8862b); }
.gk-face svg { width: 100%; height: 100%; display: block; }
.gk-guide .gk-title { font-weight: 500; opacity: .75; font-size: .92em; }
.gk-who { margin-top: 6px; font-size: .95em; }
.gk-who summary { cursor: pointer; font-weight: 700; color: var(--gk-gold, #8f6719); }
.gk-meet { margin-top: 8px; }
.gk-meet > .gk-face { float: left; margin: 0 12px 6px 0; }
.gk-meet b { display: block; font-size: 1.1em; }
.gk-meet small { display: block; opacity: .75; }
.gk-meet p, .gk-meet ul { clear: none; margin: 8px 0 0; }
.gk-meet ul { padding-left: 20px; }
.gk-meet .gk-why { font-style: italic; opacity: .85; clear: both; }

/* The Ascendancy teaser bubble (Nov 6) */
.gk-asc { margin-top: 10px; }
.gk-asc p + p { margin-top: 6px; }

.gk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }