/* lab-theme.css - shared brand identity for all lab apps.
 *
 * SINGLE SOURCE: this :root block is the lab PROJECTION of @simon/tokens
 * (simon-platform: packages/@simon/tokens/src/themes/lab.css, the lab bridge,
 * which itself derives from theme.css). The structural neutral + status values
 * below are kept in sync with that bridge so the two surfaces can never silently
 * drift; the one intentional divergence is the brand accent - lab keeps the
 * Basque green #009A44 for surfaces/buttons + large headline accents, with the
 * AA-safe shade #007D37 for small green text. Synced 2026-06-14.
 *
 * Reusable component: apps keep their full inline dark theme as a built-in
 * fallback (standalone file:// opens still work); this sheet, linked after
 * the inline <style>, re-maps the shared design tokens to the lab identity.
 *
 * Identity (ported from simonsangla.com): white editorial surface, IBM Plex
 * Sans body/display + IBM Plex Mono labels, big confident type, mono UPPERCASE
 * green kicker labels, restrained Basque green (Pantone 348C #009A44) accent,
 * flat ~10px-radius buttons + hairline-bordered cards. The vivid Basque green
 * #009A44 is used for all green text/accents to match simonsangla.com (large
 * text + buttons clear AA; 12px mono labels sit ~3.4:1 by deliberate choice).
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root {
  /* brand - Basque green (deliberate ikurrina reference; kept on the re-skin) */
  --lab-green: #009A44;
  --lab-green-text: #007D37;   /* AA-safe (>=4.5:1 on white) green for small text/labels; large accents + buttons use --lab-green */
  --lab-green-dark: #00702F;
  --lab-green-deep: #064E26;
  --lab-green-tint: #E5F5EC;

  /* shared app tokens - structural values mirror @simon/tokens lab bridge
     (surfaces + ink + border + status scale). Override each app's inline dark
     :root on live. */
  --bg: #ffffff;        /* bridge --bg */
  --surface: #ffffff;   /* bridge --surface */
  --border: #e4e4e7;    /* bridge --border (zinc-200) */
  --text: #18181b;      /* bridge --text (zinc-900) */
  --muted: #71717a;     /* bridge --muted (zinc-500) */
  --red: #dc2626;       /* bridge --red */
  --orange: #c2410c;    /* bridge --orange */
  --yellow: #b45309;    /* bridge --yellow */
  /* brand accent - lab divergence kept text-safe: apps use var(--accent) as a
     text color on white, so it maps to the AA-safe green; --accent-text mirrors
     the bridge name, --lab-green (#009A44) is the surface/button green. */
  --accent: var(--lab-green-text);        /* #007D37 - AA-safe on white */
  --accent-text: var(--lab-green-text);   /* #007D37 */
  --accent2: var(--lab-green-dark);
  --green: var(--lab-green-text);  /* #007D37 AA-safe text; surfaces/large accents use --lab-green #009A44 */
  --font-display: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;

  /* At Risk Today palette (clay -> green) */
  --card: #ffffff;
  --ink: #1d1d1f;
  --faint: #8e8e93;
  --clay: var(--lab-green-text);
  --clay-deep: var(--lab-green-dark);
  --on-clay: #ffffff;
  --line: rgba(0, 0, 0, 0.10);

  color-scheme: light;
}

::selection { background: var(--lab-green-tint); color: var(--lab-green-deep); }

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-display);
}

/* -- shared lab components (current spot-use + future apps) ----------- */

/* mono UPPERCASE green kicker - the section/label signature (simonsangla.com) */
.lab-kicker {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lab-green-text);
}

.lab-chip {
  display: inline-block;
  background: var(--lab-green-tint); color: var(--lab-green-dark);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 8px;
}

.lab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  background: var(--lab-green); color: #fff;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  padding: 9px 20px; border-radius: 10px;
  border: none; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lab-btn:hover, .lab-btn:active { background: var(--lab-green-dark); }

/* secondary = white + hairline border + dark text (simonsangla.com "See offers") */
.lab-btn-quiet {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  background: var(--surface); color: var(--text);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  padding: 9px 18px; border-radius: 10px;
  border: 1px solid var(--border); cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lab-btn-quiet:hover, .lab-btn-quiet:active { border-color: var(--lab-green); color: var(--lab-green-text); }

.lab-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* status scale - one reusable on-brand ramp for score badges / heat cells,
   so apps stop hardcoding off-brand hex. green -> amber -> red, AA on white. */
.lab-good { background: var(--green);  color: #fff; }
.lab-warn { background: var(--yellow); color: #fff; }
.lab-mid  { background: var(--orange); color: #fff; }
.lab-bad  { background: var(--red);    color: #fff; }
.lab-good-tint { background: var(--lab-green-tint); color: var(--lab-green-dark); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--lab-green-dark);
  outline-offset: 2px;
}

/* -- lab-nav: fixed top bar injected by /assets/lab-nav.js ------------ */

.lab-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.lab-nav-inner {
  position: relative; display: flex; align-items: center;
  height: 48px; max-width: 980px; margin: 0 auto;
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
}
.lab-nav-back {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 0 6px;
  color: var(--lab-green-text); text-decoration: none;
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
}
.lab-nav-chevron { font-size: 26px; font-weight: 400; line-height: 1; margin-top: -3px; }
.lab-nav-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text, #1d1d1f);
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  opacity: 0; transition: opacity 200ms ease;
  pointer-events: none;
}
.lab-nav-titled .lab-nav-title { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lab-nav-title { transition: none; } }

/* push page content below the fixed bar (overrides each app's inline
   body padding; class is added by lab-nav.js) */
body.has-lab-nav {
  padding-top: calc(env(safe-area-inset-top, 0px) + 62px);
}