/* ============================================================
   Shoelace ↔ Field Ledger token bridge.

   Maps CrewYield's design tokens (DESIGN.md — pine/cream/gold + Fraunces +
   IBM Plex Mono) onto Shoelace's --sl-* custom properties so every
   <sl-dialog>, <sl-alert>, <sl-tab-group>, <sl-tooltip>, <sl-badge> inherits
   the Field Ledger look automatically. Override individual components below
   the mapping only when Shoelace's default behavior fights the design.

   Load order in index.html:
     1. shoelace/themes/light.css   (CDN default tokens — base layer)
     2. css/styles.css              (Field Ledger — your design system)
     3. css/shoelace-theme.css      (this file — bridges 1 ↔ 2)

   Updating: when you add a new Shoelace component and the styling is off,
   add a targeted override here. Never edit shoelace's CDN files.
   ============================================================ */

:root {
  /* ── Primary = Pine (your single brand color for stateful UI) ─────── */
  --sl-color-primary-50:  #e7efe7;
  --sl-color-primary-100: #cfddcf;
  --sl-color-primary-200: #a0bba0;
  --sl-color-primary-300: #6a9a73;
  --sl-color-primary-400: #4a7958;
  --sl-color-primary-500: #2c5a43;    /* --pine-2 */
  --sl-color-primary-600: #1f4131;    /* --pine */
  --sl-color-primary-700: #16321e;
  --sl-color-primary-800: #0f2419;    /* --pine-ink */
  --sl-color-primary-900: #0c1d14;    /* --night */
  --sl-color-primary-950: #06120c;

  /* ── Success = Cleared-green ───────────────────────────────────────── */
  --sl-color-success-50:  #e3f0e6;
  --sl-color-success-100: #c7e0cf;
  --sl-color-success-200: #9bcdaa;
  --sl-color-success-300: #6cb087;
  --sl-color-success-400: #4a9268;
  --sl-color-success-500: #2f7d4f;    /* --good */
  --sl-color-success-600: #266641;
  --sl-color-success-700: #1d4e32;
  --sl-color-success-800: #163b27;
  --sl-color-success-900: #102c1d;
  --sl-color-success-950: #081810;

  /* ── Danger = Short-red ────────────────────────────────────────────── */
  --sl-color-danger-50:  #f6e1dc;
  --sl-color-danger-100: #ecc4bc;
  --sl-color-danger-200: #d99a8c;
  --sl-color-danger-300: #c67363;
  --sl-color-danger-400: #b95444;
  --sl-color-danger-500: #b23a2d;    /* --bad */
  --sl-color-danger-600: #952f25;
  --sl-color-danger-700: #76251d;
  --sl-color-danger-800: #581c16;
  --sl-color-danger-900: #3d130f;
  --sl-color-danger-950: #1f0907;

  /* ── Warning = Gold (your single accent — used sparingly) ─────────── */
  --sl-color-warning-50:  #f6ebd3;
  --sl-color-warning-100: #f0dba7;
  --sl-color-warning-200: #e8c170;
  --sl-color-warning-300: #dba63a;
  --sl-color-warning-400: #cf9229;
  --sl-color-warning-500: #c8881f;    /* --gold */
  --sl-color-warning-600: #a36e17;
  --sl-color-warning-700: #7e5512;
  --sl-color-warning-800: #5c3e0d;
  --sl-color-warning-900: #3e2908;
  --sl-color-warning-950: #1f1404;

  /* ── Neutral = Cream / paper / ink (your canvas + text scale) ─────── */
  --sl-color-neutral-0:    #ffffff;
  --sl-color-neutral-50:   #fffdf7;   /* --card */
  --sl-color-neutral-100:  #f6f4ec;   /* --paper */
  --sl-color-neutral-200:  #efece1;   /* --paper-2 */
  --sl-color-neutral-300:  #ddd7c7;   /* --line */
  --sl-color-neutral-400:  #cbc4b0;   /* --line-2 */
  --sl-color-neutral-500:  #9aa69c;
  --sl-color-neutral-600:  #6b756c;   /* --ink-3 */
  --sl-color-neutral-700:  #3f4a42;   /* --ink-2 */
  --sl-color-neutral-800:  #1f2d22;
  --sl-color-neutral-900:  #16201a;   /* --ink */
  --sl-color-neutral-950:  #0c130d;
  --sl-color-neutral-1000: #000000;

  /* ── Typography (Field Ledger: Fraunces serif + Hanken UI + Plex mono) ─ */
  --sl-font-sans:   var(--ui, 'Hanken Grotesk', system-ui, sans-serif);
  --sl-font-serif:  var(--display, 'Fraunces', Georgia, serif);
  --sl-font-mono:   var(--mono, 'IBM Plex Mono', ui-monospace, monospace);

  /* ── Radius + shadow ──────────────────────────────────────────────── */
  --sl-border-radius-small:    var(--r-sm, 7px);
  --sl-border-radius-medium:   var(--r, 10px);
  --sl-border-radius-large:    14px;
  --sl-shadow-small:           var(--shadow);
  --sl-shadow-medium:          var(--shadow);
  --sl-shadow-large:           var(--shadow-lg);

  /* ── Inputs (mostly we keep native) ───────────────────────────────── */
  --sl-input-border-color:        var(--line);
  --sl-input-border-color-hover:  var(--pine-2);
  --sl-input-border-color-focus:  var(--pine);
  --sl-input-border-radius-medium: var(--r-sm);

  /* ── Focus ring uses pine, not Shoelace default blue ──────────────── */
  --sl-focus-ring-color:  rgba(31, 65, 49, .35);
  --sl-focus-ring-width:  3px;
}

/* ── <sl-dialog> ── put the header in Fraunces serif (matches .modal-h h2) */
sl-dialog::part(title)  { font-family: var(--display); font-weight: 600; letter-spacing: -.005em; color: var(--pine-ink); }
sl-dialog::part(panel)  { background: var(--card); border-radius: var(--r); }
sl-dialog::part(header) { padding: 16px 20px; border-bottom: 1px solid var(--line); }
sl-dialog::part(body)   { padding: 16px 20px; }
sl-dialog::part(footer) { padding: 12px 20px; border-top: 1px solid var(--line); background: var(--paper); }

/* ── toast stack ── drop it below the sticky app-bar (46px) so a toast never
   covers the brand/nav — matters most on mobile where the stack spans full width. */
.sl-toast-stack { top: calc(var(--appbar-h, 46px) + 8px); }
/* Tablet / narrow desktop (761–1120px): the left-sidebar nav collapses into a HORIZONTAL
   band under the app-bar (see .app/.side @1120), so a top-anchored toast lands on top of the
   nav tabs. No bottom tab bar exists in this range (that's ≤760px mobile only), so anchor the
   stack to the bottom here instead. (smoke-test finding.) */
@media (min-width: 761px) and (max-width: 1120px) {
  .sl-toast-stack { top: auto; bottom: 12px; }
}

/* ── <sl-alert> (toast) ── on-brand variants, mono caption for the action chip ── */
sl-alert::part(base)    { border-radius: var(--r); border-left-width: 4px; box-shadow: var(--shadow-lg); }
sl-alert[variant="primary"]::part(base) { background: var(--pine-ink); color: #eaf2ea; border-left-color: var(--gold); }
sl-alert[variant="success"]::part(base) { background: var(--good-soft); color: var(--pine-ink); border-left-color: var(--good); }
sl-alert[variant="warning"]::part(base) { background: var(--gold-soft); color: var(--pine-ink); border-left-color: var(--gold); }
sl-alert[variant="danger"]::part(base)  { background: var(--bad-soft);  color: var(--pine-ink); border-left-color: var(--bad);  }

/* ── <sl-tab-group> ── adopts the gold-active pattern from .seg ───────── */
sl-tab::part(base)         { font-family: var(--ui); font-weight: 600; color: var(--ink-2); }
sl-tab[active]::part(base) { color: var(--pine-ink); }
sl-tab-group::part(active-tab-indicator) { background: var(--gold); height: 3px; }

/* ── <sl-radio-group>/<sl-radio-button> IS the .seg segmented toggle ──────
   Container = thin rounded box; segments = transparent w/ divider; the
   checked segment fills pine with white text (mirrors css/styles.css .seg). */
/* the HOST must be width-constrained too — without max-width the custom element sizes to its
   content (395–553px on phones) and forces page-level horizontal scroll; with it, the part
   below scrolls internally instead. */
sl-radio-group { display: inline-flex; max-width: 100%; min-width: 0; }
sl-radio-group::part(form-control), sl-radio-group::part(form-control-input-wrapper) { max-width: 100%; min-width: 0; }
sl-radio-group::part(form-control-input) { display: inline-flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); }
sl-radio-group::part(form-control-help-text), sl-radio-group::part(form-control-label) { display: none; }
sl-radio-button::part(base) {
  border: 0; border-right: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink-2);
  font-family: var(--ui); font-size: 12.5px; font-weight: 600;
  box-shadow: none; margin: 0; transition: background .12s, color .12s;
  flex: 0 0 auto; white-space: nowrap;
}
sl-radio-button::part(button) { padding: 6px 13px; min-height: auto; }
sl-radio-button:last-of-type::part(base) { border-right: 0; }
sl-radio-button::part(button--checked) { background: var(--pine); color: #fff; }
sl-radio-button[aria-checked="true"]::part(base) { background: var(--pine); color: #fff; }
sl-radio-button:not([aria-checked="true"]):hover::part(base) { background: var(--paper-2); color: var(--pine-ink); }

/* ── <sl-tooltip> ── pine-ink bubble. Reset inherited text styling: the "?"
   often sits inside uppercase KPI labels, whose text-transform/letter-spacing
   would otherwise bleed into the tooltip body across the shadow boundary. ── */
sl-tooltip::part(body) {
  background: var(--pine-ink); color: #eaf2ea; border-radius: 7px;
  font-family: var(--ui); font-size: 12px; font-weight: 500;
  text-transform: none; letter-spacing: normal; line-height: 1.35;
  max-width: 240px; padding: 6px 10px;
}

/* ── <sl-badge> ── IS the .pill system now. Colors come from the host via
   custom props that inherit across the shadow boundary into ::part(base).
   data-kind mirrors the old .pill.<kind> classes 1:1 (see css/styles.css). ── */
sl-badge::part(base) {
  background: var(--pill-bg, var(--paper-2));
  color: var(--pill-fg, var(--ink-2));
  border: var(--pill-border, none);
  border-radius: 999px;
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em; text-transform: none;
  /* 8px (vs the old .pill's 9px) keeps badges inside Tabulator's fixed narrow
     columns — the web-component wrapper renders ~1px wider than the old span. */
  padding: 2px 8px;
}
sl-badge[data-kind="good"]        { --pill-bg: var(--good-soft); --pill-fg: var(--good); }
sl-badge[data-kind="warn"]        { --pill-bg: var(--warn-soft); --pill-fg: #9a6710; }
sl-badge[data-kind="bad"]         { --pill-bg: var(--bad-soft);  --pill-fg: var(--bad); }
sl-badge[data-kind="neutral"]     { --pill-bg: var(--paper-2);   --pill-fg: var(--ink-2); }
sl-badge[data-kind="atrisk"]      { --pill-bg: #fbe6cf; --pill-fg: #9a5b00; }
sl-badge[data-kind="risk-Low"]    { --pill-bg: #e3efe7; --pill-fg: var(--pine, #2c5a43); }
sl-badge[data-kind="risk-Medium"] { --pill-bg: #fbf0dd; --pill-fg: #9a6a1a; }
sl-badge[data-kind="risk-High"]   { --pill-bg: #fbecec; --pill-fg: var(--bad, #b3402f); }
sl-badge[data-kind="tag-rec"]     { --pill-bg: var(--pine-soft); --pill-fg: var(--pine); --pill-border: 1px solid #cfe0d2; }
sl-badge[data-kind="tag-one"]     { --pill-bg: var(--gold-soft); --pill-fg: #9a6710; --pill-border: 1px solid #ecd9ac; }