/* ds-bridge.css - puts Scout's existing screens on the Hemut design system (rework 2026-10-27).
 *
 * Load order: ds/hemut-ds.css FIRST (design-system tokens + components), then Scout's own CSS,
 * then THIS file LAST. Everything is scoped under html.ds-look, so the `dsLook` flag (Scout
 * settings, gear) turns the restyle off instantly and Scout falls back to its v4 look.
 * Rules: semantic design-system tokens wherever one exists (the primary-button edge rgba values are
 * copied from the design system Button). Gold only where the design system puts
 * it (the one primary action, focus ring, brand fills like map clusters).
 */

/* ── 1. token bridge: Scout's legacy tokens -> design-system semantic tokens ── */
html.ds-look {
  --ds-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--ds-sans);
  --font-body: var(--ds-sans);
  --font-sans: var(--ds-sans);
  /* the v4 "HUD" set its labels in mono caps; the design system is sans, sentence case */
  --font-mono: var(--ds-sans);

  --ink: var(--bg-neutral-secondary);
  --panel: var(--bg-neutral-primary);
  --panel-2: var(--bg-neutral-secondary);
  --line: var(--border-neutral-primary);
  --line-soft: var(--border-neutral-secondary);
  --text: var(--text-neutral-primary);
  --text-dim: var(--text-neutral-tertiary);
  --text-ink: var(--text-neutral-primary);
  --gold: var(--bg-brand-primary);
  --gold-deep: var(--brand-400);
  --gold-dim: var(--bg-brand-tertiary);
  --gold-text: var(--text-neutral-primary);
  --gold-ctl: var(--bg-brand-primary);
  --gold-ink: var(--text-on-brand);
  --checkbox-accent: var(--text-neutral-primary);
  --slider-track: var(--bg-control-off);

  --surface-1: var(--bg-neutral-primary);
  --surface-2: var(--bg-neutral-secondary);
  --surface-hover: var(--bg-neutral-secondary);
  --danger: var(--text-error-primary);
  --danger-deep: var(--bg-error-bold);
  --danger-dim: var(--bg-error-subtle);
  --followup: var(--text-info-primary);
  --followup-deep: var(--bg-info-bold);
  --followup-dim: var(--bg-info-subtle);
  --noint: var(--text-neutral-tertiary);
  --noint-deep: var(--text-neutral-secondary);
  --noint-dim: var(--bg-neutral-tertiary);
  --hud-tick: transparent;          /* no corner brackets */
  --hud-grid: transparent;          /* no tech grid */

  --r-sm: var(--radius-md2);        /* 6 */
  --r-md: var(--radius-lg);         /* 8 */
  --r-lg: var(--radius-xl);         /* 12 */
  --radius-control: var(--radius-lg);
  --radius-card: var(--radius-xl);
  --shadow: var(--shadow-lg);
  --shadow-sm: var(--shadow-sm);
  --elev-1: var(--shadow-md);
  --elev-2: var(--shadow-xl);
  --ctl-h: var(--control-height-sm);
  --dur-1: var(--duration-fast);
  --dur-2: var(--duration-base);
  --ease-out: var(--ease-out);
}
/* dark: Scout sets its dark tokens ON body.theme-dark, so the bridge must too. The design-system
   dark values come from [data-theme=dark] on <html>, which applyTheme() sets alongside. */
html.ds-look body.theme-dark {
  --ink: var(--bg-neutral-secondary);
  --panel: var(--bg-neutral-primary);
  --panel-2: var(--bg-neutral-secondary);
  --line: var(--border-neutral-primary);
  --line-soft: var(--border-neutral-secondary);
  --text: var(--text-neutral-primary);
  --text-dim: var(--text-neutral-tertiary);
  --gold-dim: var(--bg-brand-tertiary);
  --gold-text: var(--text-neutral-primary);
  --gold-ctl: var(--bg-brand-primary);
  --slider-track: var(--bg-control-off);
  --surface-1: var(--bg-neutral-primary);
  --surface-2: var(--bg-neutral-secondary);
  --surface-hover: var(--bg-neutral-tertiary);
  --danger: var(--text-error-primary);
  --danger-dim: var(--bg-error-subtle);
  --followup: var(--text-info-primary);
  --followup-dim: var(--bg-info-subtle);
  --noint: var(--text-neutral-tertiary);
  --noint-dim: var(--bg-neutral-tertiary);
  --hud-tick: transparent;
  --hud-grid: transparent;
  --shadow: var(--shadow-lg);
  --shadow-sm: var(--shadow-sm);
  --elev-1: var(--shadow-md);
  --elev-2: var(--shadow-xl);
}

/* ── 2. type: sentence case, no HUD tracking, readable minimum sizes ── */
html.ds-look body { font-family: var(--ds-sans); font-variant-numeric: tabular-nums; }
html.ds-look body :not(.hm-t-overline-medium):not(.hm-t-overline-semibold):not(.ds-keep-case) {
  text-transform: none !important;
  letter-spacing: normal !important;
}
/* labels the HUD set at 8.5-9.5px: up to the design system's 11px caption floor */
html.ds-look :is(.hud-lbl, .pop-badge, .auth-badge, .dir-sub .auth-badge, .pop-tag, .pop-foot,
  .pop-anniv-basis, .pop-photo-cap, .dir-off, .cd-badge, .cd-flabel, .cd-foot, .st-badge, .due-chip,
  .tz-mini, .ll-sech, .ll-dim, .ll-mlbl, .rep-chip, .scout-flag .sf-heavy, .lf-badge, .lf-sample,
  .sc-nexttag, .sb-tag, .cov-seg-lbl, .sb-newbadge, .hg-kicker, #panel.collapsed .row .n) {
  font-size: 11px !important;
}
/* labels and controls the HUD set at 10-10.5px: up to 12px (design-system small) */
html.ds-look :is(.brand .tag, #panel h3, .slider-wrap label, .minibtn, .panel-advtoggle,
  .pop-links a, .conf, .dir-titlesub, .dir-sortwrap, .adv-lbl, .adv-clear, .adv-close,
  .dir-table thead th, .dir-type, .dir-ann, .dir-mapbtn, .gate-kicker, .gate-reveal, .pop-note-btn,
  .note-hint, .tgt-hint, .tgt-stat, .tgt-mini, .cd-back, .cdl-sub, .cd-enrich, .cd-prole,
  .home-region-pin .hrp-count, .cal-yrs, .cl-sub, .tz-chip, .bulk-lbl, .rt-leg, .help-chip,
  .split-gareas, .ll-exp, .ll-link, .ll-smeta, .ll-pct, .ll-lc-meta, .panel-head-lbl, .ug-kicker,
  .scout-head .scout-sub, .scout-label, .scout-chip, .scout-range > span:first-child,
  .scout-refinebar .rf-lbl, .sc-badge, .sc-soft, .lf-conf, .lf-flags, .sb-badge, .sb-theme button,
  .pg-table th, .pg-goal-meta, .pg-joined, .strip-wk, .aff-catwrap, .pm-vtag) {
  font-size: 12px !important;
}
/* section labels: design-system caption style (12px, tertiary), not mono caps */
html.ds-look :is(#panel h3, .scout-label, .adv-lbl, .panel-head-lbl, .dir-table thead th, .pg-table th) {
  font-weight: var(--fw-medium) !important;
  color: var(--text-neutral-tertiary) !important;
}
html.ds-look :is(#panel h3, .scout-label)::before { display: none !important; }

/* ── 3. app frame: Sidebar 240 + TopNav 48 (design-system metrics) ── */
html.ds-look #sidebar {
  width: 240px; background: var(--bg-neutral-primary); border-right: 1px solid var(--border-neutral-primary);
}
html.ds-look body.rail #sidebar { width: 60px; }
html.ds-look .sb-head { height: var(--chrome-top-h); padding: 0 var(--space-sm); gap: var(--space-xs); }
html.ds-look .sb-wordmark { font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: 0; }
html.ds-look .sb-wordmark .gold { color: var(--text-neutral-tertiary); font-weight: var(--fw-regular); }
html.ds-look .sb-tag { color: var(--text-neutral-tertiary); }
html.ds-look .sb-nav { padding: var(--space-xs); }
html.ds-look .sb-group {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: 12px; font-weight: var(--fw-regular); color: var(--text-neutral-tertiary);
  padding: var(--space-base) var(--space-xs) var(--space-xs2);
}
html.ds-look .sb-group::after { content: ""; flex: 1 0 0; height: 1px; background: var(--border-neutral-primary); }
html.ds-look .sb-item {
  min-height: 36px; padding: var(--space-xs); gap: var(--space-xs); border-radius: var(--radius-lg);
  color: var(--text-neutral-tertiary); font-size: var(--font-size-base); font-weight: var(--fw-regular);
}
html.ds-look .sb-item:hover { background: var(--bg-neutral-secondary); color: var(--text-neutral-primary); }
html.ds-look .sb-item.on { background: var(--bg-neutral-tertiary); color: var(--text-neutral-primary); font-weight: var(--fw-medium); }
html.ds-look .sb-item svg, html.ds-look .sb-item.on svg { color: currentColor; }
html.ds-look .sb-item:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 0; }
html.ds-look .sb-badge {
  min-width: 18px; height: 18px; padding: 0 var(--space-xs1); border: 0; border-radius: var(--radius-full);
  background: var(--bg-neutral-tertiary); color: var(--text-neutral-secondary); line-height: 18px; text-align: center;
}
html.ds-look .sb-badge.nonzero { background: var(--bg-brand-primary); color: var(--text-on-brand); }
html.ds-look .sb-theme { border-color: var(--border-neutral-primary); border-radius: var(--radius-lg); background: var(--bg-neutral-tertiary); padding: 2px; }
html.ds-look .sb-theme button { border-radius: var(--radius-md2); }
html.ds-look .sb-theme button.on { background: var(--bg-neutral-primary); color: var(--text-neutral-primary); box-shadow: var(--shadow-xs); }

html.ds-look #shellbar {
  height: var(--chrome-top-h); padding: 0 var(--space-sm); gap: var(--space-xs);
  background: var(--bg-neutral-primary); border-bottom: 1px solid var(--border-neutral-primary);
}
html.ds-look .shellbtn { color: var(--icon-neutral-secondary); border-radius: var(--radius-lg); }
html.ds-look .shellbtn:hover { background: var(--bg-neutral-secondary); color: var(--icon-neutral-primary); }
html.ds-look #crumb { font-size: var(--font-size-base); color: var(--text-neutral-tertiary); }
html.ds-look #crumbHere { color: var(--text-neutral-primary); font-weight: var(--fw-medium); }
html.ds-look #shellbar #search {
  height: var(--control-height-sm); border: 1px solid var(--border-neutral-primary); border-radius: var(--radius-lg);
  background: var(--bg-neutral-secondary); color: var(--text-neutral-primary); font-size: var(--font-size-base);
}
html.ds-look #shellbar #search:hover { border-color: var(--border-neutral-secondary); }
html.ds-look #shellbar #search:focus-visible { background: var(--bg-neutral-primary); outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 0; }
html.ds-look .scout-drawer { top: var(--chrome-top-h); left: 240px; }
html.ds-look body.rail .scout-drawer { left: 60px; }
html.ds-look .scout-drawer.full { left: 0; }
html.ds-look .avatar-btn { background: var(--bg-neutral-tertiary); color: var(--text-neutral-primary); border: 0; }
html.ds-look .avatar-btn:hover { background: var(--bg-neutral-disabled); }
html.ds-look .profile-menu {
  border: 1px solid var(--border-neutral-primary); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  background: var(--bg-neutral-primary);
}
html.ds-look .pm-item { border-radius: var(--radius-md2); font-size: var(--font-size-base); }

/* ── 4. legacy controls -> design-system Button (outline / primary) and Input looks ── */
html.ds-look :is(.topbtn, .help-btn, .region-chip, .minibtn, .scout-btn, .tgt-mini, .bulk-btn, .dir-mapbtn,
  .adv-clear, .adv-close, .panel-advtoggle, .cd-back, .pop-note-btn, .dir-modebtn, .seg button) {
  font-family: var(--ds-sans) !important; font-weight: var(--fw-medium);
  border-radius: var(--radius-lg); border: 1px solid var(--border-neutral-primary);
  background: var(--bg-neutral-primary); color: var(--text-neutral-primary); box-shadow: none;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
html.ds-look :is(.topbtn, .help-btn, .region-chip, .minibtn, .scout-btn, .tgt-mini, .bulk-btn, .dir-mapbtn,
  .adv-clear, .adv-close, .panel-advtoggle, .cd-back, .pop-note-btn):hover {
  background: color-mix(in srgb, var(--bg-neutral-primary) 92%, var(--text-neutral-primary));
  border-color: var(--border-neutral-secondary); color: var(--text-neutral-primary);
}
/* the one primary action per region: design-system primary (brand fill, inset edge) */
html.ds-look :is(.scout-btn.primary, .gate-btn, .tgt-save, .btn-primary, #scBuild, .ug-go) {
  background: var(--bg-brand-primary) !important; color: var(--text-on-brand) !important;
  border: 1px solid rgba(92, 41, 2, 0.16) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 251, 235, 0.45), inset 0 -2px 0 rgba(92, 41, 2, 0.16), 0 1px 2px rgba(12, 12, 13, 0.10) !important;
}
html.ds-look :is(.minibtn, .scout-chip)[aria-pressed="true"], html.ds-look .scout-chip.on {
  background: var(--bg-neutral-tertiary); border-color: var(--border-neutral-secondary); color: var(--text-neutral-primary);
}
html.ds-look :is(input[type="text"], input[type="search"], input[type="number"], input[type="email"],
  input[type="date"], input[type="time"], select, textarea):not(.hm-inp-native) {
  font-family: var(--ds-sans); border-radius: var(--radius-lg);
  border: 1px solid var(--border-neutral-primary); background-color: var(--bg-neutral-primary);
  color: var(--text-neutral-primary);
}
html.ds-look :is(input, select, textarea):not(.hm-inp-native):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 0;
  border-color: var(--border-neutral-secondary);
}
html.ds-look :focus-visible { outline-color: var(--focus-ring-color); }

/* ── 5. surfaces: floating panels, modals, toasts on design-system elevation ── */
html.ds-look :is(#panel, .scout-drawer, .cd-panel, .profile-menu, #areaPill) {
  border-color: var(--border-neutral-primary);
}
html.ds-look :is(#panel, .cd-panel) { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
html.ds-look #areaPill { border-radius: var(--radius-full); box-shadow: var(--shadow-sm); font-family: var(--ds-sans); }
html.ds-look :is(.modal-card, .cl-modal, .tgt-card, .help-card, .log-card, .split-card) {
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); border-color: var(--border-neutral-primary);
}
html.ds-look #toast {
  font-family: var(--ds-sans); font-size: var(--font-size-base); border-radius: var(--radius-xl);
  background: var(--bg-inverse-primary); color: var(--text-inverse-primary); box-shadow: var(--shadow-lg);
}
html.ds-look .dir-table thead th { background: var(--bg-neutral-secondary); border-color: var(--border-neutral-primary); }
html.ds-look .dir-table tbody tr:hover { background: var(--bg-neutral-secondary); }

/* ── 6. icons from the design system (Phosphor via HemutDS.icon) ── */
.hm-svg-icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

/* ── 7. leftovers from the v4 HUD ── */
html.ds-look :is(.gate-card, .leaflet-popup-content-wrapper, #count)::before,
html.ds-look :is(.gate-card, .leaflet-popup-content-wrapper, #count)::after { display: none !important; }   /* corner brackets */
html.ds-look #count {
  border: 1px solid var(--border-neutral-primary); border-radius: var(--radius-lg); background: var(--bg-neutral-primary);
  color: var(--text-neutral-tertiary); font-size: 12px;
}
html.ds-look #count b { color: var(--text-neutral-primary); font-weight: var(--fw-semibold); }
/* directory mode switch = design-system SegmentedToggle (white chip on a grey track) */
html.ds-look .dir-modes { background: var(--bg-neutral-tertiary); border: 0; border-radius: var(--radius-lg); padding: 2px; }
html.ds-look .dir-mode { border-radius: var(--radius-md2); color: var(--text-neutral-secondary); font-size: 12px; font-weight: var(--fw-medium); }
html.ds-look .dir-mode:hover { color: var(--text-neutral-primary); }
html.ds-look .dir-mode.on { background: var(--bg-neutral-primary); color: var(--text-neutral-primary); box-shadow: var(--shadow-xs); }
html.ds-look :is(#directory, .cd-panel, .scout-drawer, .leaflet-popup-content) a[href^="mailto:"],
html.ds-look :is(#directory, .cd-panel) a:not([class]) { color: var(--text-link); }

/* Scout's One-way / Loop switch = design-system SegmentedToggle, not a second gold primary */
html.ds-look .scout-seg { background: var(--bg-neutral-tertiary); border: 0; border-radius: var(--radius-lg); padding: 2px; }
html.ds-look .scout-seg button { border: 0; border-radius: var(--radius-md2); background: transparent; color: var(--text-neutral-secondary); font-weight: var(--fw-medium); box-shadow: none; }
html.ds-look .scout-seg button.on { background: var(--bg-neutral-primary); color: var(--text-neutral-primary); box-shadow: var(--shadow-xs); }
/* route footer: the "N of 10 done · X mi" stat stays on one line; buttons wrap below if needed */
html.ds-look .scout-routebar { flex-wrap: wrap; row-gap: var(--space-xs1); }
html.ds-look .scout-routebar .rt-stat { white-space: nowrap; flex: 1 0 auto; font-size: 12px; }