/* samara-ui-v1 — THE SAMARA UI STANDARD. One look for every staff page.
 *
 * ⚠ IT LIVES IN staff/, NOT shared/. The brief names the files shared/samara-ui.css and
 * shared/samara-ui.js; that is the NAME, not a deployment decision. The staff vhost serves the
 * staff/ directory at the site root — samara-config.js, samara-modal.js and samara-outbox.js are all
 * fetched as https://samaraboh.com/<file> — so a shared/ folder would need an nginx change to be
 * reachable at all. Putting the kit beside the other three shared files needs no vhost edit and no
 * new serving rule, which is the difference between a rollout that can start today and one that
 * starts with a config change on a production web server.
 *
 * ⚠ NO COLOUR IS WRITTEN HERE. Every value is var(--su-*, #fallback); the tokens live in the one
 * token home, the ak-palette injector in samara-config.js. The fallback is what makes the kit render
 * correctly on a page where that file has not loaded yet, rather than collapsing to black on black.
 *
 * ⚠ 360px FIRST. Every size below is chosen against a 360px phone: 44px minimum touch target, a
 * 16px side gutter, and nothing that can push the document wider than the viewport.
 *
 * Contents: 1 header · 2 language pill · 3 pill tabs · 4 filter chips · 5 group card · 6 row
 *           7 track + progress · 8 status chips · 9 banners · 10 decision chips + tiles · 11 safe zone
 */

/* ── 0. FOUNDATION ──────────────────────────────────────────────────────────────────────────── */
.su, .su * { box-sizing: border-box; }
.su {
  font-family: 'DM Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--su-text, #111827);
  background: var(--su-bg, #F9FAFB);
}
/* ⚠ TABULAR FIGURES ON EVERY NUMBER. Counts, hours and quantities sit in columns and in chips that
   re-render; proportional digits make them jitter as the value changes. */
.su-num, .su-count, .su-chip, .su-row-meta, .su-progress-label { font-variant-numeric: tabular-nums; }

/* ── 1. HEADER — ONE per page, dark ─────────────────────────────────────────────────────────────
   ⚠ ONE HEADER. The double blue+green header on the older pages is two bars doing one job; the kit
   replaces both. The dark header also replaces the green brand header (Wouter's ruling 17.09). */
/* ⚠ STICKY, BECAUSE THE PAGES THAT NEED THE KIT MOST HAVE THE LONGEST LISTS. The landscape page's own
   header was sticky before it was converted; scroll sixty projects with a header that has scrolled away
   and the route to any other tab is gone. The landscape page carried this rule locally for one commit
   with a note saying it belonged here — this is that commit, and the page-local copy goes with it.
   ⚠ z-index 100, DELIBERATELY BELOW the shared floating machinery. The report FAB and the "sharing
   location" pill sit at 9998/9999; a header that outranked them would cover controls the kit does not
   own. An opaque background is load-bearing too: without it the rows scroll visibly through the bar. */
.su-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--su-header-bg, #111827);
  border-bottom: 1px solid var(--su-header-line, #374151);
  color: #fff;
  position: sticky; top: 0; z-index: 100;
}
.su-header-back {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.10); color: #fff; text-decoration: none;
  font-size: 20px; line-height: 1; border: 0; cursor: pointer;
}
.su-header-back:hover { background: rgba(255,255,255,.18); }
/* min-width:0 lets the title shrink instead of pushing the pill off the screen at 360px */
.su-header-titles { flex: 1 1 auto; min-width: 0; }
/* ⚠ ONE LINE EACH (MD 18.09.26, phone), REVERSING "no ellipsis, it wraps instead" (17.09). The old
   rule protected the machine name — cutting "Maintenance — YZ65" to "Maintenance — YZ…" hides the
   one word that says what you are looking at. But wrapping did not protect it either: at 360px the
   title took two lines and the subtitle a third, and the header ate the screen the service rows
   needed. The name is protected differently now — Sign out moved into the avatar, which frees the
   width that made it wrap in the first place, and the SUBTITLE carries the machine, so a clipped
   title never costs the identity. */
.su-header-title { font-size: 18px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-header-sub { font-size: 12px; color: var(--su-header-sub, #D1D5DB); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── AVATAR MENU — one tap to Sign out, nothing removed ─────────────────────────────────────── */
.su-usermenu { position: relative; flex: 0 0 auto; }
.su-usermenu-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; min-width: 150px;
  background: var(--su-card, #fff); border: 1px solid var(--su-border, #E5E7EB);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; text-align: left;
}
.su-usermenu-item {
  display: block; width: 100%; border: 0; background: none; cursor: pointer;
  color: var(--su-text, #111827); font: 600 13px/1 'DM Sans', sans-serif;
  padding: 11px 12px; border-radius: 7px; text-align: left;
}
.su-usermenu-item:hover { background: var(--su-bg, #F3F4F6); }
.su-header-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.su-live { width: 8px; height: 8px; border-radius: 50%; background: var(--su-success, #059669); flex: 0 0 auto; }
.su-live[data-live="off"] { background: var(--su-muted, #6B7280); }
.su-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,.16); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
@media (min-width: 700px) { .su-header-title { font-size: 20px; } }

/* ── 2. LANGUAGE PILL — header only, one language on screen at a time ───────────────────────── */
.su-lang { display: inline-flex; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); flex: 0 0 auto; }
.su-lang button {
  border: 0; background: transparent; cursor: pointer; color: #D1D5DB;
  font: 700 11px/1 'DM Sans', sans-serif; letter-spacing: .04em;
  padding: 0 10px; height: 28px; min-width: 34px;
}
.su-lang button[aria-pressed="true"] { background: var(--su-primary, #2563EB); color: #fff; }

/* ── 3. PILL TABS — they WRAP; nothing is hidden off the side ─────────────────────────────────
   ⚠ MD 17.09: "do not hide anything like too far right or left". A sideways-scrolling strip of tabs
   hides the ones past the edge and gives no sign they exist — on the Maintenance page that is where
   PM itself was sitting. Wrapping onto a second line costs a few pixels of height and shows every
   option at once, which is the whole point on a phone the team uses one-handed. */
/* ⚠ REVERSED 18.09.26 FOR THIS STRIP. Nine tabs wrapped to THREE rows at 360px and pushed the first
   service row off the screen. One row that scrolls, with the ACTIVE tab scrolled into view on every
   render (scrollActiveTabIntoView) and a fade on the right edge that appears only while there is more
   to reach — so "there is more over there" is visible, which is what the wrapping rule was for. */
.su-tabsbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--su-bg, #F9FAFB); flex-wrap: nowrap; }
.su-tabs {
  display: flex; gap: 6px; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.su-tabs::-webkit-scrollbar { display: none; }
/* the fade is a hint, never a control: it sits on the bar, not on the scroller, so it cannot eat a tap */
.su-tabsbar { position: relative; }
.su-tabsbar:has(.su-tabs[data-more="1"])::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 26px; pointer-events: none;
  background: linear-gradient(to right, rgba(249,250,251,0), var(--su-bg, #F9FAFB));
}
.su-tab {
  flex: 0 0 auto; border: 1px solid var(--su-border, #E5E7EB); background: var(--su-card, #fff);
  color: var(--su-muted, #6B7280); border-radius: 999px;
  font: 600 13px/1 'DM Sans', sans-serif; padding: 0 14px; height: 36px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.su-tab[aria-selected="true"] { background: var(--su-primary, #2563EB); border-color: var(--su-primary, #2563EB); color: #fff; }
.su-tabsbar-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.su-iconbtn {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--su-border, #E5E7EB);
  background: var(--su-card, #fff); color: var(--su-text, #111827);
  display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer;
}

/* ── 4. FILTER CHIPS — label + count; a zero is muted AND disabled ──────────────────────────────
   ⚠ A ZERO COUNT IS NOT A FILTER. Leaving it tappable gives an empty list and no explanation. */
.su-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
/* ⚠ SCROLLING IS OPT-IN, NOT THE DEFAULT, AND I ALMOST MADE IT THE DEFAULT. One scrolling row is
   right on the PM tab, where a wrapped chip row is another deck of header before the first service
   row (MD 18.09.26). But .su-filters is also the landscape page's chips — ten rows of them, 54 chips
   — where the chips ARE the navigation and wrapping is what keeps them all visible. A kit-wide nowrap
   would have quietly changed a screen nobody asked me to change. data-scroll is set by the caller. */
.su-filters[data-scroll="1"] {
  flex-wrap: nowrap; padding-bottom: 8px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.su-filters[data-scroll="1"]::-webkit-scrollbar { display: none; }
.su-filter {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--su-border, #E5E7EB); background: var(--su-card, #fff);
  color: var(--su-text, #111827); border-radius: 999px;
  font: 600 12px/1 'DM Sans', sans-serif; padding: 0 12px; height: 34px; cursor: pointer;
}
.su-filter .su-count { color: var(--su-muted, #6B7280); font-weight: 700; }
.su-filter[aria-pressed="true"] { background: var(--su-text, #111827); border-color: var(--su-text, #111827); color: #fff; }
.su-filter[aria-pressed="true"] .su-count { color: #D1D5DB; }
.su-filter[disabled] { opacity: .45; cursor: default; }

/* ── 5. GROUP CARD — collapsible, and it must not jump ───────────────────────────────────────── */
.su-group { background: var(--su-card, #fff); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin: 0 12px 10px; overflow: hidden; }
.su-group-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; background: none; border: 0; cursor: pointer; text-align: left;
  min-height: 44px; color: var(--su-text, #111827);
}
.su-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 24px; padding: 0 7px; border-radius: 6px;
  background: var(--su-neutral-bg, #F3F4F6); color: var(--su-neutral-fg, #4B5563);
  font: 700 11px/1 'DM Sans', sans-serif; letter-spacing: .03em;
}
.su-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--su-muted, #6B7280); }
.su-group-name { flex: 1 1 auto; min-width: 0; font: 600 15px/1.3 'DM Sans', sans-serif; }
.su-group-count { flex: 0 0 auto; color: var(--su-muted, #6B7280); font: 700 13px/1 'DM Sans', sans-serif; }
.su-chev { flex: 0 0 auto; color: var(--su-muted, #6B7280); transition: transform .15s ease; font-size: 13px; }
.su-group[data-open="false"] .su-chev { transform: rotate(-90deg); }
/* ⚠ NO JUMP: the body is hidden with [hidden], so a collapse never animates a height and never
   scrolls the page under the reader's thumb. */
.su-group-body[hidden] { display: none !important; }
.su-subgroup {
  padding: 8px 14px 4px; font: 700 12px/1 'DM Sans', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--su-muted, #6B7280);
  display: flex; align-items: center; gap: 8px;
}

/* ── 6. ROW — tap to expand in place, one open at a time ─────────────────────────────────────── */
.su-row { border-top: 1px solid var(--su-border, #E5E7EB); border-left: 3px solid transparent; }
.su-group-body > .su-row:first-child { border-top: 0; }
.su-row[data-status="success"] { border-left-color: var(--su-success, #059669); }
.su-row[data-status="warning"] { border-left-color: var(--su-warning, #D97706); }
.su-row[data-status="error"]   { border-left-color: var(--su-error,   #DC2626); }
.su-row[data-status="now"]     { border-left-color: var(--su-now,     #EA580C); }
.su-row[data-status="neutral"] { border-left-color: var(--su-border,  #E5E7EB); }
.su-row-main {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 12px 14px; background: none; border: 0; cursor: pointer; text-align: left;
  min-height: 44px; color: var(--su-text, #111827);
}
.su-row-body { flex: 1 1 auto; min-width: 0; }
.su-row-title { font: 600 15px/1.3 'DM Sans', sans-serif; }
.su-row-code { font: 400 11px/1.4 'DM Sans', sans-serif; color: var(--su-muted, #6B7280); }
.su-row-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
/* ⚠ CHIPS GO ON THEIR OWN LINE ON A PHONE. Beside a long title at 360px they force the row wider
   than the screen, which is how a page starts scrolling sideways. */
@media (max-width: 480px) {
  .su-row-main { flex-wrap: wrap; }
  .su-row-right { width: 100%; padding-left: 0; }
}
.su-row-detail { padding: 0 14px 14px; }
.su-row-detail[hidden] { display: none !important; }
.su-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 13px; }
.su-dl dt { color: var(--su-muted, #6B7280); }
.su-dl dd { margin: 0; font-weight: 600; }
.su-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.su-btn {
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font: 600 14px/1 'DM Sans', sans-serif; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.su-btn-primary { background: var(--su-primary, #2563EB); color: #fff; }
.su-btn-outline { background: var(--su-card, #fff); color: var(--su-text, #111827); border-color: var(--su-border, #E5E7EB); }
.su-btn-danger  { background: var(--su-error, #DC2626); color: #fff; }

/* ── 7. TRACK AND PROGRESS ───────────────────────────────────────────────────────────────────── */
.su-track { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.su-track i { display: block; width: 22px; height: 6px; border-radius: 3px; background: var(--su-border, #E5E7EB); }
.su-track i[data-s="done"]    { background: var(--su-primary, #2563EB); }
.su-track i[data-s="now"]     { background: var(--su-now, #EA580C); }
.su-track i[data-s="blocked"] { background: var(--su-error, #DC2626); }
@media (max-width: 400px) { .su-track i { width: 16px; } }
.su-progress { height: 6px; border-radius: 3px; background: var(--su-border, #E5E7EB); overflow: hidden; margin-top: 6px; }
.su-progress > span { display: block; height: 100%; border-radius: 3px; background: var(--su-primary, #2563EB); }
.su-progress[data-status="warning"] > span { background: var(--su-warning, #D97706); }
.su-progress[data-status="error"]   > span { background: var(--su-error, #DC2626); }
.su-progress[data-status="success"] > span { background: var(--su-success, #059669); }
.su-progress-label { font: 400 12px/1.4 'DM Sans', sans-serif; color: var(--su-muted, #6B7280); margin-top: 3px; }

/* ── 8. STATUS CHIPS ─────────────────────────────────────────────────────────────────────────────
   ⚠ THE WORD CARRIES THE MEANING, NEVER THE COLOUR ALONE. Every chip prints its state in words, so
   it still reads on a mono screen, in sunlight, and to a colour-blind reader. */
.su-chip {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  font: 600 12px/1 'DM Sans', sans-serif; padding: 5px 10px; white-space: nowrap;
  background: var(--su-neutral-bg, #F3F4F6); color: var(--su-neutral-fg, #4B5563);
}
.su-chip[data-tone="success"] { background: var(--su-success-bg, #ECFDF5); color: var(--su-success-fg, #047857); }
.su-chip[data-tone="warning"] { background: var(--su-warning-bg, #FFFBEB); color: var(--su-warning-fg, #B45309); }
.su-chip[data-tone="error"]   { background: var(--su-error-bg,   #FEF2F2); color: var(--su-error-fg,   #B91C1C); }
.su-chip[data-tone="primary"] { background: var(--su-primary-bg, #EFF6FF); color: var(--su-primary-fg, #1D4ED8); }

/* ── 9. BANNERS ──────────────────────────────────────────────────────────────────────────────── */
.su-banner {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 12px 10px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--su-warning-bg, #FFFBEB); color: var(--su-warning-fg, #B45309);
}
.su-banner[data-tone="danger"] { background: var(--su-error-bg, #FEF2F2); color: var(--su-error-fg, #B91C1C); }
.su-banner-icon { flex: 0 0 auto; font-size: 16px; line-height: 1.3; }
.su-banner-title { font: 700 14px/1.35 'DM Sans', sans-serif; }
.su-banner-sub { font: 400 13px/1.4 'DM Sans', sans-serif; opacity: .92; }

/* ── 10. DECISION CHIPS AND TILES (the hub) ──────────────────────────────────────────────────── */
.su-decisions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 10px; }
.su-decision {
  flex: 1 1 150px; min-width: 150px; text-align: left; cursor: pointer;
  background: var(--su-card, #fff); border: 1px solid var(--su-border, #E5E7EB);
  border-left: 4px solid var(--su-primary, #2563EB);
  border-radius: 12px; padding: 10px 12px; color: var(--su-text, #111827);
}
.su-decision[data-tone="warning"] { border-left-color: var(--su-warning, #D97706); }
.su-decision[data-tone="error"]   { border-left-color: var(--su-error, #DC2626); }
.su-decision-n { font: 700 24px/1 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; }
.su-decision-label { font: 500 12px/1.3 'DM Sans', sans-serif; color: var(--su-muted, #6B7280); margin-top: 4px; }
.su-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 0 12px 10px; }
.su-tile {
  position: relative; background: var(--su-card, #fff); border: 1px solid var(--su-border, #E5E7EB);
  border-radius: 12px; padding: 12px 8px; min-height: 76px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--su-text, #111827); text-decoration: none; text-align: center;
}
.su-tile-icon { font-size: 20px; line-height: 1; }
.su-tile-name { font: 600 12px/1.25 'DM Sans', sans-serif; }
.su-tile-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--su-error, #DC2626); color: #fff;
  font: 700 11px/20px 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; text-align: center;
}

/* ── 11. SAFE ZONE — nothing may cover content ───────────────────────────────────────────────────
   ⚠ `html body` ON PURPOSE, AND IT IS LOAD-BEARING. samara-config.js INJECTS
   `@media(max-width:640px){body{padding-bottom:60px}}` at RUNTIME, so its rule lands later in the
   cascade and beats an equally specific `body{}` here. Two element selectors win on specificity
   whatever the order. This was measured, not guessed: the PM tab reported 60px until it was written
   this way. 48 is the shared floating button, 16 is its gap, env() is the phone's own bar. */
html body.su-page { padding-bottom: calc(48px + 16px + env(safe-area-inset-bottom, 0px)); }
.su-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px; border-radius: 50%; border: 0; z-index: 9998;
  background: var(--su-primary, #2563EB); color: #fff; font-size: 20px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center;
}
/* Every interactive thing clears 44px, the smallest target a thumb finds reliably. */
.su-tab, .su-filter, .su-btn, .su-iconbtn, .su-row-main, .su-group-head { touch-action: manipulation; }

/* Sign out — a visible control in the header, never hidden behind an avatar tap. */
.su-header-signout {
  flex: 0 0 auto; min-height: 32px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; border: 0;
  font: 600 12px/1 'DM Sans', sans-serif;
}
.su-header-signout:hover { background: rgba(255,255,255,.2); }

/* ── MODULE CHIPS (lp-hub-v2) ───────────────────────────────────────────────────────────────────
   ⚠ CHIPS, NOT TILES. 65 modules as 110px boxes is a wall of squares you scroll past; as wrapping
   pills they read as a list of names, which is what a launcher is. The Most-used grid stays the ONLY
   tile grid on the page, so the eye has one place to land. */
.su-chipmod {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border-radius: 999px; background: var(--su-neutral-bg, #F3F4F6); color: var(--su-text, #111827);
  font: 500 13px/1 'DM Sans', sans-serif; text-decoration: none; max-width: 100%;
}
.su-chipmod:hover { background: #E5E7EB; }
.su-chipmod i { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.su-chipmod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-chipmods { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 14px; }
/* the preview on a CLOSED category: what is inside, without opening it */
.su-group-preview {
  padding: 0 14px 12px; margin-top: -6px;
  font: 400 12px/1.4 'DM Sans', sans-serif; color: var(--su-muted, #6B7280);
}
/* search */
.su-search { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; position: relative; }
.su-search input {
  flex: 1; min-width: 0; height: 44px; padding: 0 36px 0 14px; border-radius: 999px;
  border: 1px solid var(--su-border, #E5E7EB); background: var(--su-card, #fff);
  font: 400 14px/1 'DM Sans', sans-serif; color: var(--su-text, #111827);
}
.su-search button {
  position: absolute; right: 6px; width: 32px; height: 32px; border: 0; background: none;
  color: var(--su-muted, #6B7280); font-size: 18px; cursor: pointer; border-radius: 50%;
}

/* ── THE TODAY LINE (lp-hub-v2) — four numbers where five cards were ───────────────────────────── */
.su-todayrow { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.su-stat {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 1px;
  height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  background: var(--su-card, #fff); border: 1px solid var(--su-border, #E5E7EB);
  color: var(--su-text, #111827); text-align: left;
}
.su-stat-l { font: 500 11px/1 'DM Sans', sans-serif; color: var(--su-muted, #6B7280); }
.su-stat-v { font: 700 16px/1 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; }
.su-stat-v em { font: 500 11px/1 'DM Sans', sans-serif; font-style: normal; color: var(--su-muted, #6B7280); }
.su-stat[data-tone="success"] { background: var(--su-success-bg, #ECFDF5); border-color: transparent; }
.su-stat[data-tone="success"] .su-stat-v { color: var(--su-success-fg, #047857); }
.su-stat[data-tone="error"] { background: var(--su-error-bg, #FEF2F2); border-color: transparent; }
.su-stat[data-tone="error"] .su-stat-v { color: var(--su-error-fg, #B91C1C); }

/* ══ RACE SKIN (pm-race-skin, MD 2026-09-18) — SCOPED TO .rs, NOTHING ELSE ═══════════════════════
   ⚠ A THEME, NOT A FORK. Every rule below is under .rs, so it repaints the element that opts in and
   nothing else on the page — today that is the PM tab. A forked stylesheet would be a second place
   for every one of these decisions to live, and the kit's whole argument is that there is one.
   ⚠ NO HEX HERE. Every value is var(--rs-*), defined once in samara-config.js beside --su-*.
   ⚠ TYPE: Barlow Condensed for anything counted or commanded — headings, numbers, buttons, chips —
   because condensed uppercase holds a long part name and a figure on ONE 360px line, which is the
   whole layout. Barlow for prose, where condensed uppercase would be unreadable. A stack, not a
   web font import: if Barlow is absent the fallbacks keep the layout, they only lose the character. */
.rs {
  --rs-font-head: 'Barlow Condensed', 'Oswald', 'Roboto Condensed', 'DM Sans', sans-serif;
  --rs-font-body: 'Barlow', 'DM Sans', Inter, -apple-system, sans-serif;
  background: var(--rs-bg); color: var(--rs-ink); font-family: var(--rs-font-body);
}
.rs * { box-sizing: border-box; }
.rs-h, .rs-num, .rs-btn, .rs-chip, .rs-gauge-pct, .rs-row-left {
  font-family: var(--rs-font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
}

/* ── PLATE: 1px border, 6px radius, NO shadow. Status is a 4px LEFT EDGE and the word, never the
   edge alone — a colour cannot be read by someone who does not know the code, and on a bright track
   in sunlight it cannot be read at all. ─────────────────────────────────────────────────────── */
.rs-plate { border: 1px solid var(--rs-line); border-radius: 6px; background: var(--rs-bg); box-shadow: none; }
.rs-plate + .rs-plate { margin-top: 8px; }

/* ── ROW: 44px, ONE line — name · bar · "13 H LEFT" · chevron ──────────────────────────────────── */
.rs-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 0 10px 0 0; border: 0; background: none; cursor: pointer;
  border-bottom: 1px solid var(--rs-hairline); text-align: left; color: var(--rs-ink);
  border-left: 4px solid var(--rs-none);
}
.rs-row:last-child { border-bottom: 0; }
.rs-row-name {
  flex: 1 1 auto; min-width: 0; padding-left: 10px;
  font: 500 13px/1.15 var(--rs-font-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-bar { flex: 0 0 50px; height: 4px; border-radius: 2px; background: var(--rs-hairline); overflow: hidden; }
.rs-bar i { display: block; height: 100%; background: var(--rs-none); }
.rs-row-left { flex: 0 0 auto; font-size: 12px; color: var(--rs-muted); }
.rs-chev { flex: 0 0 auto; color: var(--rs-none); font-size: 13px; }
.rs-row[data-state="ok"]       { border-left-color: var(--rs-ok); }
.rs-row[data-state="ok"] .rs-bar i       { background: var(--rs-ok); }
.rs-row[data-state="ok"] .rs-row-left    { color: var(--rs-ok-t); }
.rs-row[data-state="soon"]     { border-left-color: var(--rs-soon); }
.rs-row[data-state="soon"] .rs-bar i     { background: var(--rs-soon); }
.rs-row[data-state="soon"] .rs-row-left  { color: var(--rs-soon-t); }
.rs-row[data-state="due"], .rs-row[data-state="overdue"] { border-left-color: var(--rs-over); }
.rs-row[data-state="due"] .rs-bar i, .rs-row[data-state="overdue"] .rs-bar i { background: var(--rs-over); }
.rs-row[data-state="due"] .rs-row-left, .rs-row[data-state="overdue"] .rs-row-left { color: var(--rs-over-t); }

/* ── GROUP HEADER: ONE line, "ENGINE · 8 ITEMS" with the chips on the same row ─────────────────── */
.rs-grouphead {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px;
  background: var(--rs-wash); border-bottom: 1px solid var(--rs-line);
  overflow-x: auto; scrollbar-width: none;
}
.rs-grouphead::-webkit-scrollbar { display: none; }
.rs-grouphead .rs-h { flex: 0 0 auto; font-size: 12px; color: var(--rs-muted); }
.rs-chip {
  flex: 0 0 auto; border: 1px solid var(--rs-line); background: var(--rs-bg); color: var(--rs-muted);
  border-radius: 6px; font-size: 11px; padding: 0 9px; height: 26px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.rs-chip[aria-pressed="true"] { background: var(--rs-ink); border-color: var(--rs-ink); color: var(--rs-bg); }

/* ── GAUGES: four half-dials in ONE row at 360px ──────────────────────────────────────────────── */
.rs-gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 8px; }
.rs-gauge {
  border: 1px solid var(--rs-line); border-radius: 6px; background: var(--rs-bg);
  padding: 6px 2px 5px; cursor: pointer; text-align: center; min-width: 0;
}
.rs-gauge svg { display: block; width: 100%; height: auto; }
.rs-gauge-pct { font-size: 14px; fill: var(--rs-ink); }
.rs-gauge-name { display: block; font: 700 10px/1 var(--rs-font-head); letter-spacing: .08em;
  text-transform: uppercase; color: var(--rs-muted); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-arc-bg { stroke: var(--rs-hairline); }
.rs-arc { stroke: var(--rs-none); }
.rs-gauge[data-state="ok"] .rs-arc      { stroke: var(--rs-ok); }
.rs-gauge[data-state="soon"] .rs-arc    { stroke: var(--rs-soon); }
.rs-gauge[data-state="due"] .rs-arc,
.rs-gauge[data-state="overdue"] .rs-arc { stroke: var(--rs-over); }

/* ── BUTTONS ──────────────────────────────────────────────────────────────────────────────────── */
.rs-btn {
  min-height: 44px; padding: 0 16px; border-radius: 6px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--rs-line); background: var(--rs-bg); color: var(--rs-ink);
}
.rs-btn[data-kind="primary"] { background: var(--rs-accent); border-color: var(--rs-accent); color: #fff; }
.rs-btn[data-kind="danger"]  { background: var(--rs-bg); border-color: var(--rs-over); color: var(--rs-over-t); }
.rs-muted { color: var(--rs-muted); font: 400 12px/1.35 var(--rs-font-body); }