/* ============================================================
   CEASE FIRE AMC — DESIGN TOKENS
   v0.1 · 2026-09-13
   Derived from: client brochure (brand) + Savari/Baseframe (structure)
   ============================================================ */
:root{
  /* ---- Neutrals: navy-tinted cool greys (hue 258) ---------- */
  --n-0:   oklch(1 0 0);
  --n-25:  oklch(0.990 0.002 258);
  --n-50:  oklch(0.978 0.003 258);
  --n-100: oklch(0.960 0.004 258);
  --n-150: oklch(0.938 0.005 258);
  --n-200: oklch(0.908 0.007 258);
  --n-300: oklch(0.840 0.009 258);
  --n-400: oklch(0.712 0.013 258);
  --n-500: oklch(0.610 0.016 258);
  --n-600: oklch(0.512 0.019 258);
  --n-700: oklch(0.412 0.023 258);
  --n-800: oklch(0.312 0.027 258);
  --n-900: oklch(0.232 0.030 258);
  --n-950: oklch(0.176 0.030 258);

  /* ---- Navy: primary action (brand) ------------------------ */
  --navy-50:  oklch(0.968 0.014 262);
  --navy-100: oklch(0.930 0.034 262);
  --navy-200: oklch(0.872 0.062 262);
  --navy-300: oklch(0.772 0.098 262);
  --navy-400: oklch(0.624 0.132 262);
  --navy-500: oklch(0.496 0.146 262);
  --navy-600: oklch(0.404 0.130 262);  /* primary */
  --navy-700: oklch(0.344 0.108 262);
  --navy-800: oklch(0.286 0.086 262);
  --navy-900: oklch(0.236 0.066 262);

  /* ---- Red: hazard only. Never a default CTA. -------------- */
  --red-50:  oklch(0.970 0.014 27);
  --red-100: oklch(0.934 0.034 27);
  --red-200: oklch(0.880 0.064 27);
  --red-300: oklch(0.790 0.112 27);
  --red-400: oklch(0.684 0.172 27);
  --red-500: oklch(0.585 0.208 27);   /* brand red ≈ #DC1C24 */
  --red-600: oklch(0.522 0.196 27);
  --red-700: oklch(0.448 0.166 27);
  --red-800: oklch(0.376 0.134 27);
  --red-900: oklch(0.300 0.100 27);

  /* ---- Amber: Major severity / in-transit / warning -------- */
  --amber-50:  oklch(0.978 0.020 80);
  --amber-100: oklch(0.944 0.052 80);
  --amber-200: oklch(0.896 0.092 78);
  --amber-500: oklch(0.760 0.150 68);
  --amber-600: oklch(0.672 0.148 60);
  --amber-700: oklch(0.552 0.124 54);

  /* ---- Green: OK / completed ------------------------------- */
  --green-50:  oklch(0.972 0.018 158);
  --green-100: oklch(0.936 0.046 158);
  --green-200: oklch(0.884 0.076 158);
  --green-500: oklch(0.660 0.136 158);
  --green-600: oklch(0.564 0.124 159);
  --green-700: oklch(0.472 0.104 160);

  /* ---- Blue: Minor severity / info / sync ------------------ */
  --blue-50:  oklch(0.972 0.018 248);
  --blue-100: oklch(0.936 0.044 248);
  --blue-200: oklch(0.884 0.074 248);
  --blue-500: oklch(0.606 0.148 250);
  --blue-600: oklch(0.528 0.152 252);
  --blue-700: oklch(0.456 0.136 254);

  /* ---- Semantic surface / text / border -------------------- */
  --bg-page:       var(--n-50);
  --bg-surface:    var(--n-0);
  --bg-sunken:     var(--n-100);
  --bg-inset:      var(--n-50);
  --bg-chrome:     var(--n-0);

  --text-primary:   var(--n-950);
  --text-secondary: var(--n-700);
  --text-muted:     var(--n-500);
  --text-disabled:  var(--n-400);
  --text-inverse:   var(--n-0);

  --border-subtle: rgba(16, 22, 40, 0.075);
  --border-default: rgba(16, 22, 40, 0.115);
  --border-strong: rgba(16, 22, 40, 0.185);
  --border-focus:  var(--navy-500);

  --accent:        var(--navy-600);
  --accent-hover:  color-mix(in oklch, var(--navy-600) 88%, black);
  --accent-active: color-mix(in oklch, var(--navy-600) 78%, black);
  --accent-subtle: var(--navy-50);

  --danger:        var(--red-600);
  --danger-hover:  color-mix(in oklch, var(--red-600) 88%, black);

  /* ---- Typography ------------------------------------------ */
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Devanagari", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-2xs:  11px;
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-input:16px;  /* never lower — iOS Safari zooms on focus below 16px */
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-caps:    0.06em;
  --tracking-display: -0.011em;

  /* ---- Spacing: 4px base ----------------------------------- */
  --sp-0:  0px;   --sp-1: 2px;   --sp-2: 4px;   --sp-3: 6px;
  --sp-4:  8px;   --sp-5: 12px;  --sp-6: 16px;  --sp-7: 20px;
  --sp-8:  24px;  --sp-9: 32px;  --sp-10:40px;  --sp-11:48px;  --sp-12:64px;

  /* ---- Radius: inner = outer − padding (floor 4px) ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-full: 999px;

  /* ---- Elevation: layered, never a single drop ------------- */
  --shadow-xs: 0 1px 2px rgba(16,22,40,0.05);
  --shadow-sm: 0 1px 2px rgba(16,22,40,0.04), 0 2px 4px rgba(16,22,40,0.035);
  --shadow-md: 0 1px 2px rgba(16,22,40,0.04), 0 4px 8px -2px rgba(16,22,40,0.045),
               0 12px 20px -8px rgba(16,22,40,0.06);
  --shadow-lg: 0 1px 2px rgba(16,22,40,0.04), 0 8px 16px -4px rgba(16,22,40,0.06),
               0 24px 40px -12px rgba(16,22,40,0.10);

  /* ---- Motion ---------------------------------------------- */
  --dur-fast:   120ms;
  --dur-base:   160ms;
  --dur-slow:   240ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.5, 0, 0.9, 0.3);

  /* ---- Touch ----------------------------------------------- */
  --tap-min: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body{
  margin:0; background:var(--bg-page); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--fs-base);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-variant-numeric: tabular-nums;
}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{ outline:2px solid var(--border-focus); outline-offset:2px; border-radius:var(--r-xs); }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ============================================================
   PRODUCT COMPONENTS
   ============================================================ */

/* ---- Button ----------------------------------------------- */
.btn{
  --btn-h:40px; --btn-px:18px; --btn-fs:var(--fs-base);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-3);
  min-height:var(--btn-h); padding:0 var(--btn-px);
  font-family:inherit; font-size:var(--btn-fs); font-weight:500; line-height:1;
  border-radius:var(--r-full); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled){ transform:scale(0.975); }
.btn:disabled{ cursor:not-allowed; }

.btn--primary{ background:var(--accent); color:var(--text-inverse); }
.btn--primary:hover:not(:disabled){ background:var(--accent-hover); }
.btn--primary:active:not(:disabled){ background:var(--accent-active); }
.btn--primary:disabled{ background:var(--n-200); color:var(--text-disabled); }

.btn--secondary{ background:var(--bg-surface); color:var(--text-primary); border-color:var(--border-default); box-shadow:var(--shadow-xs); }
.btn--secondary:hover:not(:disabled){ background:var(--n-50); border-color:var(--border-strong); }
.btn--secondary:active:not(:disabled){ background:var(--n-100); }
.btn--secondary:disabled{ color:var(--text-disabled); border-color:var(--border-subtle); box-shadow:none; }

.btn--ghost{ background:transparent; color:var(--text-secondary); }
.btn--ghost:hover:not(:disabled){ background:var(--n-100); color:var(--text-primary); }
.btn--ghost:disabled{ color:var(--text-disabled); }

.btn--danger{ background:var(--danger); color:var(--text-inverse); }
.btn--danger:hover:not(:disabled){ background:var(--danger-hover); }
.btn--danger:disabled{ background:var(--n-200); color:var(--text-disabled); }

.btn--sm{ --btn-h:32px; --btn-px:14px; --btn-fs:var(--fs-sm); }
/* Touch devices never get a sub-44px button, whatever the variant says. */
@media (pointer:coarse){
  .btn{ --btn-h:44px; }
  .btn--sm{ --btn-h:44px; --btn-px:16px; }
}
.btn--lg{ --btn-h:48px; --btn-px:24px; --btn-fs:var(--fs-md); }
.btn--block{ width:100%; }
.btn--icon{ --btn-px:0; width:var(--btn-h); }
.btn__spinner{
  width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid currentColor; border-right-color:transparent;
  animation:spin 620ms linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- Status pill ------------------------------------------ */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px 3px 8px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:500; line-height:1.45;
  border:1px solid transparent; white-space:nowrap;
}
.pill__dot{ width:6px;height:6px;border-radius:50%;background:currentColor;flex:none; }
.pill--ok       { background:var(--green-50); color:var(--green-700); border-color:var(--green-200); }
.pill--notok    { background:var(--red-50);   color:var(--red-700);   border-color:var(--red-200); }
.pill--critical { background:var(--red-600);  color:#fff;             border-color:var(--red-600); }
.pill--major    { background:var(--amber-50); color:var(--amber-700); border-color:var(--amber-200); }
.pill--minor    { background:var(--blue-50);  color:var(--blue-700);  border-color:var(--blue-200); }
.pill--pending  { background:var(--n-100);    color:var(--n-700);     border-color:var(--border-default); }
.pill--progress { background:var(--blue-50);  color:var(--blue-700);  border-color:var(--blue-200); }
.pill--onsite   { background:var(--green-50); color:var(--green-700); border-color:var(--green-200); }
.pill--transit  { background:var(--amber-50); color:var(--amber-700); border-color:var(--amber-200); }
.pill--done     { background:var(--n-100);    color:var(--n-600);     border-color:var(--border-default); }
.pill--offline  { background:var(--n-800);    color:var(--n-100);     border-color:var(--n-800); }

/* ---- Field / input ---------------------------------------- */
.field{ display:flex; flex-direction:column; gap:var(--sp-3); }
.field__label{
  font-size:var(--fs-sm); font-weight:500; color:var(--text-primary);
  display:flex; align-items:baseline; gap:var(--sp-3);
}
.field__label .opt{ font-weight:400; color:var(--text-muted); font-size:var(--fs-xs); }
.field__req{ color:var(--red-600); }
.input, .select, .textarea{
  width:100%; font-family:inherit; font-size:var(--fs-input); color:var(--text-primary);
  background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--r-md); padding:10px 12px; min-height:var(--tap-min);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.textarea{ min-height:84px; resize:vertical; line-height:var(--lh-normal); }
.input::placeholder,.textarea::placeholder{ color:var(--text-disabled); }
.input:hover:not(:disabled),.select:hover:not(:disabled),.textarea:hover:not(:disabled){ border-color:var(--border-strong); }
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--navy-500);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--navy-500) 18%, transparent);
}
.input:disabled,.select:disabled,.textarea:disabled{
  background:var(--n-100); color:var(--text-disabled); cursor:not-allowed; border-color:var(--border-subtle);
}
.input.is-error,.select.is-error,.textarea.is-error{ border-color:var(--red-500); }
.input.is-error:focus{ box-shadow:0 0 0 3px color-mix(in oklch, var(--red-500) 18%, transparent); }
.field__hint{ font-size:var(--fs-xs); color:var(--text-muted); }
.field__error{ font-size:var(--fs-xs); color:var(--red-700); display:flex; align-items:center; gap:5px; }
.select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; }
.field__readonly{
  font-size:var(--fs-base); color:var(--text-secondary); background:var(--bg-inset);
  border:1px solid var(--border-subtle); border-radius:var(--r-md); padding:10px 12px;
}

/* ---- OK / Not OK control · the core control of this product -- */
.okctl{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2);
  background:var(--n-100); border-radius:var(--r-md); padding:3px;
  border:1px solid var(--border-subtle);
}
.okctl__opt{
  position:relative; display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:38px; padding:0 var(--sp-4); border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:500; color:var(--text-muted);
  cursor:pointer; user-select:none; border:1px solid transparent;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.okctl__opt input{ position:absolute; opacity:0; width:0; height:0; }
.okctl__opt:hover{ color:var(--text-secondary); }
.okctl__opt:has(input:checked){ background:var(--bg-surface); box-shadow:var(--shadow-xs); }
.okctl__opt--ok:has(input:checked){ color:var(--green-700); border-color:var(--green-200); }
.okctl__opt--no:has(input:checked){ color:var(--red-700);   border-color:var(--red-200); }
.okctl__opt:has(input:focus-visible){ outline:2px solid var(--border-focus); outline-offset:1px; }
.okctl--lg .okctl__opt{ min-height:var(--tap-min); font-size:var(--fs-base); }

/* ---- Parameter row ----------------------------------------- */
.param{
  display:grid; grid-template-columns:minmax(0,1fr) 196px; gap:var(--sp-5);
  align-items:center; padding:var(--sp-5) 0; border-bottom:1px solid var(--border-subtle);
}
.param:last-child{ border-bottom:0; }
.param__name{ font-size:var(--fs-base); color:var(--text-primary); }
@media (max-width:420px){ .param{ grid-template-columns:1fr; gap:var(--sp-4); } }

/* ---- Checkbox / radio --------------------------------------- */
.check{ display:flex; align-items:flex-start; gap:var(--sp-5); cursor:pointer; min-height:var(--tap-min); padding:var(--sp-2) 0; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  width:20px;height:20px;flex:none;margin-top:2px;border-radius:var(--r-sm);
  border:1.5px solid var(--border-strong); background:var(--bg-surface);
  display:grid; place-items:center; color:transparent;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.check:hover .check__box{ border-color:var(--navy-400); }
.check input:checked + .check__box{ background:var(--accent); border-color:var(--accent); color:#fff; }
.check input:focus-visible + .check__box{ outline:2px solid var(--border-focus); outline-offset:2px; }
.check__label{ font-size:var(--fs-base); line-height:var(--lh-snug); padding-top:1px; }
.check--radio .check__box{ border-radius:50%; }

/* ---- Stat strip · recurring summary pattern ------------------ */
.strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); overflow:hidden;
}
.strip__cell{ padding:var(--sp-5) var(--sp-5); border-left:1px solid var(--border-subtle); }
.strip__cell:first-child{ border-left:0; }
.strip__label{
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:var(--tracking-caps);
  color:var(--text-muted); font-weight:600; display:block; margin-bottom:var(--sp-2);
}
.strip__value{ display:block; font-size:var(--fs-2xl); font-weight:600; line-height:1; letter-spacing:var(--tracking-display); }
.strip__value--ok{ color:var(--green-700); }
.strip__value--bad{ color:var(--red-600); }
.strip__value--muted{ color:var(--text-muted); }
.strip__delta{ font-size:var(--fs-xs); margin-left:var(--sp-3); font-weight:500; vertical-align:middle; }
.strip__delta--up{ color:var(--green-700); }
.strip__delta--down{ color:var(--red-600); }
@media (max-width:560px){
  .strip{ grid-auto-flow:row; grid-template-columns:1fr 1fr; grid-auto-columns:auto; }
  .strip__cell{ border-left:1px solid var(--border-subtle); border-top:1px solid var(--border-subtle); }
  .strip__cell:nth-child(-n+2){ border-top:0; }
  .strip__cell:nth-child(odd){ border-left:0; }
  .strip__value{ display:block; font-size:var(--fs-xl); }
}

/* ---- Card --------------------------------------------------- */
.card{
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); overflow:hidden;
}
.card__head{
  padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
}
.card__title{ font-size:var(--fs-sm); font-weight:600; margin:0; }
.card__body{ padding:var(--sp-6); }
/* inner radius = outer − padding */
.inset{
  background:var(--bg-inset); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); padding:var(--sp-5);
}
.inset__label{
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:var(--tracking-caps);
  color:var(--text-muted); font-weight:600; margin-bottom:var(--sp-3); display:block;
}

/* ---- Checklist section row ---------------------------------- */
.seclist{ display:flex; flex-direction:column; }
.secrow{
  display:flex; align-items:center; gap:var(--sp-5); width:100%;
  padding:var(--sp-5) var(--sp-6); min-height:64px; background:var(--bg-surface);
  border:0; border-bottom:1px solid var(--border-subtle); text-align:left;
  font-family:inherit; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out);
}
.secrow:last-child{ border-bottom:0; }
.secrow:hover{ background:var(--n-50); }
.secrow:active{ background:var(--n-100); }
.secrow__icon{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--n-100); color:var(--n-400);
}
.secrow__icon--done{ background:var(--green-100); color:var(--green-700); }
.secrow__icon--part{ background:var(--amber-100); color:var(--amber-700); }
.secrow__main{ flex:1; min-width:0; }
.secrow__name{ display:block; font-size:var(--fs-base); font-weight:500; line-height:1.3; }
.secrow__meta{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; display:flex; align-items:center; gap:var(--sp-3); }
.secrow__count{ font-variant-numeric:tabular-nums; font-weight:500; }
.secrow__count--done{ color:var(--green-700); }
.secrow__count--part{ color:var(--amber-700); }
.secrow__chev{ color:var(--n-400); flex:none; }

/* ---- Progress ----------------------------------------------- */
.bar{ height:6px; background:var(--n-150); border-radius:var(--r-full); overflow:hidden; }
.bar__fill{ height:100%; background:var(--accent); border-radius:var(--r-full);
  transition:width var(--dur-slow) var(--ease-out); }
.bar__fill--ok{ background:var(--green-600); }
.bar__fill--warn{ background:var(--amber-600); }

/* ---- Tabs with counts --------------------------------------- */
.tabs{ display:flex; gap:var(--sp-2); background:var(--n-100); padding:3px; border-radius:var(--r-full); }
.tab{
  padding:7px var(--sp-6); border-radius:var(--r-full); border:0; background:transparent;
  font-family:inherit; font-size:var(--fs-sm); font-weight:500; color:var(--text-muted);
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tab:hover{ color:var(--text-primary); }
.tab.is-active{ background:var(--bg-surface); color:var(--text-primary); box-shadow:var(--shadow-xs); }
.tab__n{ color:var(--text-disabled); margin-left:4px; font-variant-numeric:tabular-nums; }
.tab.is-active .tab__n{ color:var(--text-muted); }

/* ---- Filter chip -------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
  border-radius:var(--r-full); border:1px solid var(--border-default);
  background:var(--bg-surface); font-family:inherit; font-size:var(--fs-sm);
  color:var(--text-secondary); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip:hover{ border-color:var(--border-strong); background:var(--n-50); }
.chip.is-active{ background:var(--navy-50); border-color:var(--navy-200); color:var(--navy-700); font-weight:500; }
.chip__dot{ width:6px;height:6px;border-radius:50%; flex:none; }
.chip__n{ color:var(--text-disabled); font-variant-numeric:tabular-nums; }

/* ---- Table --------------------------------------------------- */
.table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.table th{
  text-align:left; font-size:var(--fs-2xs); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--text-muted); font-weight:600;
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border-default); white-space:nowrap;
}
.table td{ padding:var(--sp-5); border-bottom:1px solid var(--border-subtle); vertical-align:middle; }
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr:hover{ background:var(--n-25); }
.table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.table-wrap{ overflow-x:auto; }

/* ---- Empty state --------------------------------------------- */
.empty{ text-align:center; padding:var(--sp-10) var(--sp-6); }
.empty__icon{
  width:44px;height:44px;border-radius:var(--r-lg);background:var(--n-100);
  display:grid;place-items:center;margin:0 auto var(--sp-5);color:var(--n-400);
}
.empty__title{ font-size:var(--fs-base); font-weight:600; margin:0 0 var(--sp-2); }
.empty__body{ font-size:var(--fs-sm); color:var(--text-muted); max-width:38ch; margin:0 auto var(--sp-6); line-height:var(--lh-relaxed); }

/* ---- PWA: connection + sync ---------------------------------- */
.netbar{
  display:flex; align-items:center; gap:var(--sp-4); padding:9px var(--sp-6);
  font-size:var(--fs-sm); font-weight:500;
}
.netbar--offline{ background:var(--n-800); color:var(--n-100); }
.netbar--syncing{ background:var(--blue-50); color:var(--blue-700); border-bottom:1px solid var(--blue-200); }
.netbar--synced{ background:var(--green-50); color:var(--green-700); border-bottom:1px solid var(--green-200); }
.netbar__n{ margin-left:auto; font-variant-numeric:tabular-nums; opacity:.85; }
.sync{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--text-muted); }
.sync__dot{ width:7px;height:7px;border-radius:50%; flex:none; }
.sync__dot--queued{ background:var(--amber-500); }
.sync__dot--sending{ background:var(--blue-500); animation:pulse 1.4s var(--ease-out) infinite; }
.sync__dot--done{ background:var(--green-500); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---- Photo capture ------------------------------------------- */
.photos{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }
.photo{
  width:76px;height:76px;border-radius:var(--r-md); object-fit:cover;
  border:1px solid var(--border-default); background:var(--n-100);
}
.photo-add{
  width:76px;height:76px;border-radius:var(--r-md);
  border:1.5px dashed var(--border-strong); background:var(--bg-surface);
  display:grid;place-items:center;color:var(--text-muted);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.photo-add:hover{ border-color:var(--navy-400); background:var(--navy-50); color:var(--navy-600); }

/* ---- Signature pad -------------------------------------------- */
.sigpad{
  position:relative; height:132px; border-radius:var(--r-md);
  border:1.5px dashed var(--border-strong); background:var(--bg-inset);
  display:grid; place-items:center; overflow:hidden;
}
.sigpad__hint{ font-size:var(--fs-sm); color:var(--text-disabled); }
.sigpad__line{ position:absolute; left:var(--sp-6); right:var(--sp-6); bottom:28px; border-bottom:1px solid var(--border-default); }

/* ---- Mobile tab bar ------------------------------------------- */
.tabbar{
  display:flex; background:var(--bg-surface); border-top:1px solid var(--border-subtle);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar__item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 0 7px; min-height:var(--tap-min); border:0; background:transparent;
  font-family:inherit; font-size:var(--fs-2xs); font-weight:500;
  color:var(--text-muted); cursor:pointer; text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.tabbar__item.is-active{ color:var(--accent); }
.tabbar__item:hover{ color:var(--text-primary); }
.tabbar__item.is-active:hover{ color:var(--accent); }

/* ---- Map marker (Savari pattern) ------------------------------- */
.marker{
  display:inline-flex; align-items:center; gap:var(--sp-4);
  background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--r-full); padding:5px 14px 5px 6px; box-shadow:var(--shadow-md);
}
.marker__avatar{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:var(--fs-2xs);font-weight:600;color:#fff;background:var(--navy-500);
}
.marker__name{ display:block; font-size:var(--fs-sm); font-weight:500; line-height:1.2; }
.marker__meta{ display:block; font-size:var(--fs-2xs); color:var(--text-muted); line-height:1.3; margin-top:1px; }
.marker--onsite  .marker__avatar{ background:var(--green-600); }
.marker--transit .marker__avatar{ background:var(--amber-600); }
.marker--pending .marker__avatar{ background:var(--n-400); }

/* ---- Avatar ---------------------------------------------------- */
.avatar{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:var(--fs-sm);font-weight:600;color:#fff;background:var(--navy-500);
}
.avatar--sm{ width:28px;height:28px;font-size:var(--fs-2xs); }
.avatar--lg{ width:48px;height:48px;font-size:var(--fs-md); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app{ height:100dvh; display:flex; flex-direction:column; background:var(--bg-page); overflow:hidden; }
.screen{ display:none; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.screen.is-active{ display:flex; }

/* ---- Auth ---------------------------------------------------- */
.auth{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:var(--sp-9) var(--sp-6);
  padding-top:max(var(--sp-9), env(safe-area-inset-top));
}
.auth__inner{ width:100%; max-width:368px; }
.brandblock{ text-align:center; margin-bottom:var(--sp-9); }
.brandmark{
  width:56px;height:56px;border-radius:var(--r-lg);background:var(--red-500);
  display:grid;place-items:center;margin:0 auto var(--sp-6);color:#fff;
  box-shadow:var(--shadow-sm);
}
.brandname{ font-size:var(--fs-lg); font-weight:600; letter-spacing:var(--tracking-display); line-height:1.3; }
.brandsub{ font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--sp-2); }
.brandtag{
  display:inline-block; font-size:var(--fs-2xs); color:var(--red-600); font-weight:600;
  margin-top:var(--sp-5); text-transform:uppercase; letter-spacing:var(--tracking-caps);
}
/* Stacked form fields. The gap between fields must clearly exceed the
   gap inside a field (label -> input, --sp-3), or the groups stop reading
   as groups and the labels look like they belong to the field above. */
.form{ display:flex; flex-direction:column; gap:var(--sp-7); }
.form .check{ margin-top:calc(var(--sp-2) * -1); }
.form .btn{ margin-top:var(--sp-2); }
.auth__foot{ text-align:center; margin-top:var(--sp-4); }
.appfoot{
  text-align:center; font-size:var(--fs-xs); color:var(--text-disabled);
  padding:var(--sp-6) var(--sp-6) max(var(--sp-6), env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:center; gap:var(--sp-4); flex-wrap:wrap;
}

/* ---- Input with trailing action ------------------------------ */
.input-group{ position:relative; }
.input-group .input{ padding-right:50px; }
.input-group__btn{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  width:44px;height:44px;border:0;background:transparent;border-radius:var(--r-md);
  display:grid;place-items:center;color:var(--text-muted);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.input-group__btn:hover{ background:var(--n-100); color:var(--text-primary); }

/* ---- Link button --------------------------------------------- */
.linkbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap-min); padding:var(--sp-4) var(--sp-5);
  background:none; border:0; border-radius:var(--r-md);
  font-family:inherit; font-size:var(--fs-sm); font-weight:500;
  color:var(--accent); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out);
}
.linkbtn:hover{ background:var(--navy-50); }

/* ---- Form-level error ---------------------------------------- */
.formerror{
  display:flex; align-items:flex-start; gap:var(--sp-4);
  background:var(--red-50); border:1px solid var(--red-200); color:var(--red-800);
  border-radius:var(--r-md); padding:var(--sp-5); font-size:var(--fs-sm);
  line-height:var(--lh-snug);
}
.formerror svg{ flex:none; margin-top:1px; color:var(--red-600); }

/* ---- Mobile screen frame (centres the phone UI on desktop) ---- */
.screen--mobile{
  width:100%; max-width:560px; margin:0 auto;
  background:var(--bg-page);
}
@media (min-width:561px){
  .screen--mobile{ border-inline:1px solid var(--border-subtle); }
}
.screen__body{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:var(--sp-6) var(--sp-6) var(--sp-9);
}

/* ---- App bar -------------------------------------------------- */
.appbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-6);
  padding-top:max(var(--sp-5), env(safe-area-inset-top));
  background:var(--bg-chrome); border-bottom:1px solid var(--border-subtle);
}
.appbar__main{ flex:1; min-width:0; }
.appbar__eyebrow{ display:block; font-size:var(--fs-xs); color:var(--text-muted); line-height:1.3; }
.appbar__title{
  font-size:var(--fs-md); font-weight:600; line-height:1.25;
  letter-spacing:var(--tracking-display);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.iconbtn{
  position:relative; width:var(--tap-min); height:var(--tap-min); flex:none;
  display:grid; place-items:center; border-radius:var(--r-md);
  border:0; background:transparent; color:var(--text-secondary); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.iconbtn:hover{ background:var(--n-100); color:var(--text-primary); }
.iconbtn__badge{
  position:absolute; top:5px; right:4px; min-width:7px; height:14px; padding:0 4px;
  border-radius:var(--r-full); background:var(--red-600); color:#fff;
  font-size:9.5px; font-weight:600; line-height:14px; text-align:center;
  border:1.5px solid var(--bg-chrome); box-sizing:content-box;
}

/* ---- Day header ------------------------------------------------ */
.dayrow{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-5); flex-wrap:wrap; margin-bottom:var(--sp-6);
}
.dayrow__date{
  font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--text-muted);
}

/* ---- Next-action card ------------------------------------------ */
.nextcard{
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); padding:var(--sp-6); margin-top:var(--sp-6);
}
.nextcard__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); }
.nextcard__name{
  font-size:var(--fs-lg); font-weight:600; letter-spacing:var(--tracking-display);
  line-height:1.25; margin-top:var(--sp-5);
}
.nextcard__meta{ display:block; font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--sp-2); }
.nextcard__prog{
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--fs-xs); color:var(--text-secondary); margin:var(--sp-6) 0 var(--sp-3);
}
.nextcard .btn{ margin-top:var(--sp-6); }

/* ---- Section head ---------------------------------------------- */
.sectionhead{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  margin:var(--sp-9) 0 var(--sp-5);
}
.sectionhead__title{ font-size:var(--fs-sm); font-weight:600; }
.sectionhead .linkbtn{ margin-right:calc(var(--sp-5) * -1); }

/* ---- Grouped list ---------------------------------------------- */
.listcard{
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); overflow:hidden;
}

/* ---- Sticky bottom action bar ---------------------------------- */
.actionbar{
  flex:none; background:var(--bg-chrome); border-top:1px solid var(--border-subtle);
  padding:var(--sp-5) var(--sp-6);
  padding-bottom:max(var(--sp-5), env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.actionbar__note{
  font-size:var(--fs-xs); color:var(--text-muted); text-align:center;
  display:flex; align-items:center; justify-content:center; gap:6px;
}

/* ---- Key–value block ------------------------------------------- */
.kv{
  display:grid; grid-template-columns:96px minmax(0,1fr);
  gap:var(--sp-3) var(--sp-5); font-size:var(--fs-sm); margin:0;
}
.kv dt{ color:var(--text-muted); }
.kv dd{ margin:0; color:var(--text-primary); }

/* ---- Contact row ------------------------------------------------ */
.contact{
  display:flex; align-items:center; gap:var(--sp-5);
  margin-top:var(--sp-5); padding-top:var(--sp-5);
  border-top:1px solid var(--border-subtle);
}
.contact__main{ flex:1; min-width:0; }
.contact__name{ display:block; font-size:var(--fs-base); font-weight:500; line-height:1.3; }
.contact__num{
  font-size:var(--fs-sm); color:var(--text-muted);
  font-variant-numeric:tabular-nums; margin-top:1px;
}

/* ---- Arrival / geo check ---------------------------------------- */
.geo{ display:flex; align-items:flex-start; gap:var(--sp-5); }
.geo__icon{
  width:34px; height:34px; border-radius:var(--r-md); flex:none;
  display:grid; place-items:center;
}
.geo--ok  .geo__icon{ background:var(--green-100); color:var(--green-700); }
.geo--far .geo__icon{ background:var(--amber-100); color:var(--amber-700); }
.geo__main{ flex:1; min-width:0; }
.geo__title{ display:block; font-size:var(--fs-sm); font-weight:600; line-height:1.35; }
.geo__meta{ display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; line-height:1.45; }

/* ---- Non-interactive list row ----------------------------------- */
.listrow{
  display:flex; align-items:center; gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6);
  min-height:60px; border-bottom:1px solid var(--border-subtle);
}
.listrow:last-of-type{ border-bottom:0; }
.listrow__main{ flex:1; min-width:0; }
.listrow__you{
  font-size:var(--fs-2xs); font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:var(--tracking-caps);
}

/* ---- Disclosure (manual override) -------------------------------- */
.reveal[hidden]{ display:none; }

/* ---- Sticky progress strip -------------------------------------- */
.progstrip{
  flex:none; background:var(--bg-chrome);
  border-bottom:1px solid var(--border-subtle);
  padding:var(--sp-5) var(--sp-6);
}
.progstrip__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-5); margin-bottom:var(--sp-4);
}
.progstrip__count{ font-size:var(--fs-sm); color:var(--text-secondary); }
.progstrip__count b{ font-size:var(--fs-md); font-weight:600; color:var(--text-primary); }
.progstrip__issues{ font-size:var(--fs-xs); font-weight:500; color:var(--red-700); }
.progstrip__issues--none{ color:var(--text-muted); font-weight:400; }

/* ---- Asset header ----------------------------------------------- */
.assethead{ display:flex; align-items:flex-start; gap:var(--sp-5); }
.assethead__tag{
  flex:none; display:grid; place-items:center; width:42px; height:42px;
  border-radius:var(--r-md); background:var(--navy-50); color:var(--navy-700);
}
.assethead__main{ flex:1; min-width:0; }
.assethead__id{
  font-size:var(--fs-md); font-weight:600; letter-spacing:var(--tracking-display);
  line-height:1.25;
}
.assethead__type{ display:block; font-size:var(--fs-sm); color:var(--text-secondary); margin-top:2px; }
.assethead__loc{
  font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--sp-3);
  display:flex; align-items:center; gap:5px;
}

/* ---- Parameter item (control + its finding block) ---------------- */
.paramitem{ padding:var(--sp-5) 0; border-bottom:1px solid var(--border-subtle); }
.paramitem:last-child{ border-bottom:0; padding-bottom:0; }
.paramitem:first-child{ padding-top:0; }
.paramitem .param{ padding:0; border-bottom:0; }
.paramitem__name{ display:block; font-size:var(--fs-base); line-height:var(--lh-snug); }
.paramitem__unanswered{
  display:block; font-size:var(--fs-xs); color:var(--text-disabled); margin-top:2px;
}

/* ---- Finding block (revealed by Not OK) -------------------------- */
.finding{
  background:var(--red-50); border:1px solid var(--red-200);
  border-radius:var(--r-md); padding:var(--sp-5); margin-top:var(--sp-5);
}
.finding__label{
  display:block; font-size:var(--fs-2xs); font-weight:600; color:var(--red-700);
  text-transform:uppercase; letter-spacing:var(--tracking-caps); margin-bottom:var(--sp-5);
}
.finding .input, .finding .select, .finding .textarea{ background:var(--bg-surface); }

/* ---- Split action bar -------------------------------------------- */
.actionbar__row{ display:flex; gap:var(--sp-4); }
.actionbar__row .btn{ flex:1; margin-top:0; min-width:0; }
.actionbar__row .btn--icon{ flex:none; }

/* ---- Skipped / inaccessible asset --------------------------------- */
.paramcard.is-skipped{ opacity:.45; pointer-events:none; }

/* ---- Signature pad ---------------------------------------------- */
.sigpad{
  position:relative; height:158px; border-radius:var(--r-md);
  border:1.5px dashed var(--border-strong); background:var(--bg-inset);
  overflow:hidden; touch-action:none;
}
.sigpad.is-signed{ border-style:solid; border-color:var(--border-default); background:var(--bg-surface); }
.sigpad canvas{
  position:absolute; inset:0; width:100%; height:100%;
  touch-action:none; cursor:crosshair; display:block;
}
.sigpad__hint{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:var(--fs-sm); color:var(--text-disabled); pointer-events:none;
}
.sigpad__line{
  position:absolute; left:var(--sp-7); right:var(--sp-7); bottom:30px;
  border-bottom:1px solid var(--border-default); pointer-events:none;
}
.sigfoot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5); margin-top:var(--sp-4);
}
.sigstamp{
  font-size:var(--fs-xs); color:var(--text-muted); line-height:var(--lh-snug);
  display:flex; align-items:flex-start; gap:5px;
}
.sigstamp svg{ flex:none; margin-top:2px; }

/* House rule: a stacked text slot is block-level regardless of whether it
   was authored as a <div> or a <span>. Authoring one as a <span> inside a
   <span> wrapper is what made the marker, checklist and finding rows run
   their lines together. */

/* ---- Finding row -------------------------------------------------- */
.finding-row{
  display:flex; align-items:flex-start; gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--border-subtle);
}
.finding-row:last-child{ border-bottom:0; }
.finding-row__thumb{
  width:44px; height:44px; border-radius:var(--r-sm); flex:none;
  border:1px solid var(--border-default);
  background:linear-gradient(135deg,var(--n-200),var(--n-300));
}
.finding-row__main{ flex:1; min-width:0; }
.finding-row__equip{ display:block; font-size:var(--fs-sm); font-weight:600; line-height:1.3; }
.finding-row__obs{ display:block; font-size:var(--fs-sm); color:var(--text-secondary); margin-top:2px; line-height:var(--lh-snug); }
.finding-row__meta{ display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--sp-3); }
.finding-row__sev{ flex:none; }

/* ---- Inline notice ------------------------------------------------ */
.notice{
  display:flex; align-items:flex-start; gap:var(--sp-4);
  border-radius:var(--r-md); padding:var(--sp-5); font-size:var(--fs-sm);
  line-height:var(--lh-snug); margin-top:var(--sp-5);
}
.notice svg{ flex:none; margin-top:1px; }
.notice--warn{ background:var(--amber-50); border:1px solid var(--amber-200); color:var(--amber-700); }
.notice--info{ background:var(--n-50);    border:1px solid var(--border-default); color:var(--text-secondary); }

/* ---- Three-cell strip keeps its columns on phones ---------------- */
@media (max-width:560px){
  .strip--3{ grid-auto-flow:column; grid-template-columns:repeat(3,1fr); grid-auto-columns:1fr; }
  .strip--3 .strip__cell{ border-top:0; border-left:1px solid var(--border-subtle); }
  .strip--3 .strip__cell:first-child{ border-left:0; }
  .strip--3 .strip__value{ font-size:var(--fs-lg); }
}

/* ---- Severity summary row ---------------------------------------- */
.sevrow{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-5); }
.sevrow .pill{ font-size:var(--fs-sm); padding:5px 12px 5px 10px; }
.sevrow .pill b{ font-weight:600; margin-left:2px; }

/* ---- Site row numbers -------------------------------------------- */
.siterow__nums{
  font-size:var(--fs-xs); color:var(--text-muted);
  font-variant-numeric:tabular-nums; margin-top:2px; display:block;
}

/* ---- File card --------------------------------------------------- */
.filecard{ display:flex; align-items:center; gap:var(--sp-5); }
.filecard__icon{
  width:42px; height:52px; flex:none; border-radius:var(--r-sm);
  background:var(--red-50); border:1px solid var(--red-200); color:var(--red-700);
  display:grid; place-items:center;
}
.filecard__main{ flex:1; min-width:0; }
.filecard__name{
  display:block; font-size:var(--fs-sm); font-weight:600;
  line-height:1.35; word-break:break-word;
}
.filecard__meta{ display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:3px; }

/* ---- Delivery row ------------------------------------------------- */
.deliv{
  display:flex; align-items:center; gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--border-subtle);
}
.deliv:last-child{ border-bottom:0; }
.deliv__main{ flex:1; min-width:0; }
.deliv__who{ display:block; font-size:var(--fs-base); font-weight:500; line-height:1.3; }
.deliv__meta{ display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }
.deliv__meta--sent{ color:var(--green-700); font-weight:500; }

/* ---- Secondary share options --------------------------------------- */
.optrow{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }
.optrow .btn{ flex:1; min-width:132px; }

/* ============================================================
   DESKTOP SHELL  (assigner + owner)
   ============================================================ */
.screen--desk{ flex-direction:row; max-width:none; width:100%; }

.sidebar{
  width:232px; flex:none; display:flex; flex-direction:column;
  background:var(--bg-surface); border-right:1px solid var(--border-subtle);
}
.sidebar__brand{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-6) var(--sp-6) var(--sp-5);
}
.sidebar__mark{
  width:30px; height:30px; flex:none; border-radius:var(--r-sm);
  background:var(--red-500); color:#fff; display:grid; place-items:center;
}
.sidebar__name{ font-size:var(--fs-sm); font-weight:600; line-height:1.2; }
.sidebar__sub{ font-size:var(--fs-2xs); color:var(--text-muted); }
.sidebar__nav{ flex:1; min-height:0; overflow-y:auto; padding:var(--sp-4) var(--sp-5); }
.navitem{
  display:flex; align-items:center; gap:var(--sp-5);
  padding:9px var(--sp-5); border-radius:var(--r-md); margin-bottom:1px;
  color:var(--text-secondary); text-decoration:none;
  font-size:var(--fs-sm); font-family:inherit; border:0; background:transparent;
  width:100%; cursor:pointer; text-align:left;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.navitem:hover{ background:var(--n-100); color:var(--text-primary); }
.navitem.is-active{ background:var(--navy-50); color:var(--navy-700); font-weight:500; }
.navitem svg{ flex:none; opacity:.9; }
.navitem__n{
  margin-left:auto; font-size:var(--fs-2xs); font-weight:600;
  color:var(--text-muted); font-variant-numeric:tabular-nums;
}
.navitem.is-active .navitem__n{ color:var(--navy-600); }
.sidebar__user{
  border-top:1px solid var(--border-subtle); padding:var(--sp-5) var(--sp-6);
  display:flex; align-items:center; gap:var(--sp-4);
}

.work{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:clip; position:relative; }
.pagehead{
  flex:none; display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-6); padding:var(--sp-7) var(--sp-8);
  background:var(--bg-chrome); border-bottom:1px solid var(--border-subtle);
}
.pagehead__crumb{ font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:var(--sp-3); }
.pagehead__h1{
  font-size:var(--fs-xl); font-weight:600; margin:0;
  letter-spacing:var(--tracking-display); line-height:1.2;
}
.pagehead__sub{ font-size:var(--fs-sm); color:var(--text-secondary); margin-top:var(--sp-2); }
.pagehead__actions{ display:flex; gap:var(--sp-4); flex:none; align-items:center; }

.workbody{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 332px; }
.rail{
  border-left:1px solid var(--border-subtle); background:var(--bg-surface);
  overflow-y:auto; padding:var(--sp-6);
}
.rail__head{
  font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--text-muted);
  margin:var(--sp-7) 0 var(--sp-5); display:flex; justify-content:space-between; align-items:baseline;
}
.rail__head:first-child{ margin-top:0; }

/* ---- Map pane ------------------------------------------------------ */
.mappane{ position:relative; min-width:0; overflow:hidden; background:var(--n-100); }
.mappane__svg{ position:absolute; inset:0; width:100%; height:100%; }
.mappane__ctl{ position:absolute; top:var(--sp-6); left:var(--sp-6); z-index:3; }
.mappane__legend{
  position:absolute; bottom:var(--sp-6); left:var(--sp-6); z-index:3;
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); box-shadow:var(--shadow-sm);
  display:flex; gap:var(--sp-6); flex-wrap:wrap; font-size:var(--fs-2xs); color:var(--text-secondary);
}
.mappane__legend span{ display:flex; align-items:center; gap:5px; }
.mappane__pin{
  position:absolute; z-index:2; transform:translate(-14px, -50%);
  border:0; background:none; padding:0; cursor:pointer;
}
.mappane__pin .marker{ transition:box-shadow var(--dur-fast) var(--ease-out); }
.mappane__pin.is-selected .marker{
  box-shadow:var(--shadow-lg), 0 0 0 2px var(--navy-500);
}
.seg{
  display:inline-flex; background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--r-full); padding:3px; box-shadow:var(--shadow-sm);
}
.seg__btn{
  border:0; background:transparent; font-family:inherit; font-size:var(--fs-sm);
  font-weight:500; color:var(--text-muted); padding:6px 16px;
  border-radius:var(--r-full); cursor:pointer; min-height:34px;
}
.seg__btn.is-active{ background:var(--navy-600); color:#fff; }

/* ---- Donut --------------------------------------------------------- */
.donut{ display:flex; align-items:center; gap:var(--sp-6); }
.donut__svg{ flex:none; transform:rotate(-90deg); }
.donut__track{ stroke:var(--n-150); }
.donut__fill{ stroke:var(--navy-600); transition:stroke-dashoffset var(--dur-slow) var(--ease-out); }
.donut__pct{ font-size:var(--fs-xl); font-weight:600; letter-spacing:var(--tracking-display); line-height:1; }
.donut__cap{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--sp-2); display:block; }

/* ---- Activity timeline --------------------------------------------- */
.act{ display:flex; gap:var(--sp-5); padding-bottom:var(--sp-5); position:relative; }
.act:not(:last-child)::before{
  content:''; position:absolute; left:5px; top:14px; bottom:0;
  border-left:1px solid var(--border-default);
}
.act__dot{ width:11px; height:11px; border-radius:50%; flex:none; margin-top:4px; z-index:1; }
.act__main{ flex:1; min-width:0; }
.act__text{ display:block; font-size:var(--fs-sm); line-height:var(--lh-snug); }
.act__time{ display:block; font-size:var(--fs-2xs); color:var(--text-muted); margin-top:2px; font-variant-numeric:tabular-nums; }

/* ---- Drawer --------------------------------------------------------- */
.drawer{
  position:absolute; inset:0 0 0 auto; width:min(380px, 100%); z-index:40;
  background:var(--bg-surface); border-left:1px solid var(--border-subtle);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  transform:translateX(101%); transition:transform var(--dur-slow) var(--ease-out);
}
.drawer.is-open{ transform:none; }
.drawer__head{
  flex:none; display:flex; align-items:flex-start; gap:var(--sp-5);
  padding:var(--sp-6); border-bottom:1px solid var(--border-subtle);
}
.drawer__title{ display:block; font-size:var(--fs-md); font-weight:600; line-height:1.25; }
.drawer__sub{ display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }
.drawer__body{ flex:1; min-height:0; overflow-y:auto; padding:var(--sp-6); }
.drawer__foot{
  flex:none; padding:var(--sp-6); border-top:1px solid var(--border-subtle);
  display:flex; gap:var(--sp-4);
}
.drawer__foot .btn{ flex:1; }
.scrim{
  position:absolute; inset:0; z-index:35; background:rgba(16,22,40,.28);
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out);
}
.scrim.is-open{ opacity:1; pointer-events:auto; }

/* ---- Pick-one row --------------------------------------------------- */
.pick{
  display:flex; align-items:center; gap:var(--sp-5); width:100%;
  padding:var(--sp-5); border:1px solid var(--border-default);
  border-radius:var(--r-md); background:var(--bg-surface);
  cursor:pointer; margin-bottom:var(--sp-4); text-align:left;
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pick:hover{ border-color:var(--border-strong); background:var(--n-25); }
.pick input{ position:absolute; opacity:0; width:0; height:0; }
.pick:has(input:checked){ border-color:var(--navy-500); background:var(--navy-50); }
.pick:has(input:focus-visible){ outline:2px solid var(--border-focus); outline-offset:2px; }
.pick__main{ flex:1; min-width:0; }
.pick__name{ display:block; font-size:var(--fs-sm); font-weight:600; line-height:1.3; }
.pick__meta{ display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }
.pick__eta{ flex:none; text-align:right; font-size:var(--fs-xs); color:var(--text-secondary); }
.pick__eta b{ display:block; font-size:var(--fs-sm); font-weight:600; color:var(--text-primary); }

/* ---- Responsive fallback for the desktop shell ----------------------- */
@media (max-width:1080px){
  .workbody{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(280px,42vh) auto; }
  .rail{ border-left:0; border-top:1px solid var(--border-subtle); }
}
@media (max-width:900px){
  .screen--desk{ flex-direction:column; }
  .sidebar{
    width:auto; flex-direction:row; align-items:center;
    border-right:0; border-bottom:1px solid var(--border-subtle);
  }
  .sidebar__brand{ padding:var(--sp-5); flex:none; }
  .sidebar__brand > div{ display:none; }
  .sidebar__nav{ display:flex; gap:var(--sp-2); padding:var(--sp-4); overflow-x:auto; }
  .navitem{ white-space:nowrap; width:auto; margin:0; }
  .sidebar__user{ display:none; }
  .pagehead{ padding:var(--sp-6); flex-wrap:wrap; }
}

/* ============================================================
   CHARTS
   Palette validated with the dataviz validator (light, #fff):
   severity trio #c11e20/#d67c1e/#0e6cbf plus series #315db4 —
   all six checks PASS, worst adjacent CVD dE 14.8 (deutan).
   "Planned" is a grey dashed reference line, not a categorical
   slot, so it carries a legend entry and a direct end label.
   ============================================================ */
.filters{
  flex:none; display:flex; gap:var(--sp-4); flex-wrap:wrap; align-items:flex-end;
  padding:var(--sp-6) var(--sp-8); border-bottom:1px solid var(--border-subtle);
  background:var(--bg-chrome);
}
.filters .field{ min-width:150px; flex:1 1 150px; max-width:210px; }
.filters .field__label{ font-size:var(--fs-2xs); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--text-muted); font-weight:600; }
/* Compact select. Never set its height inline — an inline style beats the
   touch floor in touch.css and silently drops it under 44px on a phone. */
.select--sm{ font-size:var(--fs-sm); min-height:38px; padding:7px 34px 7px 11px; }
.filters .select{ font-size:var(--fs-sm); min-height:38px; padding:7px 34px 7px 11px; }

.analytics{ flex:1; min-height:0; overflow-y:auto; padding:var(--sp-7) var(--sp-8) var(--sp-10); }
.chartgrid{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:var(--sp-6); margin-top:var(--sp-7);
}
.chartcard{
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); display:flex; flex-direction:column; min-width:0;
}
.chartcard--trend{ grid-column:span 4; }
.chartcard--donut{ grid-column:span 2; }
.chartcard--half { grid-column:span 3; }
.chartcard__head{
  padding:var(--sp-6) var(--sp-6) var(--sp-5);
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-5);
  flex-wrap:wrap;
}
.chartcard__title{ display:block; font-size:var(--fs-sm); font-weight:600; line-height:1.3; }
.chartcard__sub{ display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }
.chartcard__body{ padding:0 var(--sp-6) var(--sp-6); flex:1; min-width:0; }
/* The donut is shorter than the trend beside it; centre it in the stretched
   card rather than leaving a pool of dead space underneath. */
.chartcard--donut .chartcard__body{ display:flex; align-items:center; }
.chartcard--donut .sevdonut{ width:100%; }

.legend{ display:flex; gap:var(--sp-5); flex-wrap:wrap; align-items:center; }
.legend__item{ display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--text-secondary); }
.legend__sw{ width:10px; height:10px; border-radius:3px; flex:none; }
.legend__sw--dash{ width:14px; height:0; border-radius:0; border-top:2px dashed var(--chart-ref); }

/* ---- Bar rows ------------------------------------------------------ */
.barrow{ display:grid; grid-template-columns:112px minmax(0,1fr) auto; gap:var(--sp-5);
  align-items:center; padding:var(--sp-4) 0; }
.barrow__label{ font-size:var(--fs-sm); color:var(--text-primary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.barrow__track{ height:18px; border-radius:var(--r-xs); background:var(--n-100);
  overflow:hidden; display:flex; gap:2px; }
.barrow__fill{ height:100%; border-radius:var(--r-xs); min-width:3px;
  transition:width var(--dur-slow) var(--ease-out); }
.barrow__val{ font-size:var(--fs-sm); font-weight:600; font-variant-numeric:tabular-nums;
  text-align:right; min-width:30px; white-space:nowrap; }
.barrow__rate{ font-size:var(--fs-xs); font-weight:400; color:var(--text-muted); font-variant-numeric:tabular-nums; }
@media (max-width:520px){ .barrow{ grid-template-columns:92px minmax(0,1fr) auto; } }

/* ---- Donut --------------------------------------------------------- */
.sevdonut{ display:flex; align-items:center; gap:var(--sp-7); flex-wrap:wrap; }
.sevdonut__hero{ position:relative; flex:none; }
.sevdonut__mid{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.sevdonut__n{ display:block; font-size:var(--fs-2xl); font-weight:600; line-height:1;
  letter-spacing:var(--tracking-display); }
.sevdonut__cap{ display:block; font-size:var(--fs-2xs); color:var(--text-muted);
  text-transform:uppercase; letter-spacing:var(--tracking-caps); font-weight:600; margin-top:var(--sp-2); }
.sevlist{ flex:1; min-width:128px; }
.sevlist__row{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-3) 0; }
.sevlist__sw{ width:10px; height:10px; border-radius:3px; flex:none; }
.sevlist__name{ flex:1; font-size:var(--fs-sm); color:var(--text-primary); }
.sevlist__n{ font-size:var(--fs-sm); font-weight:600; font-variant-numeric:tabular-nums; }
.sevlist__pc{ font-size:var(--fs-xs); color:var(--text-muted); font-variant-numeric:tabular-nums;
  min-width:34px; text-align:right; }

/* ---- Chart tooltip -------------------------------------------------- */
.charttip{
  position:fixed; z-index:60; pointer-events:none; opacity:0;
  background:var(--n-950); color:var(--n-50); border-radius:var(--r-sm);
  padding:7px 10px; font-size:var(--fs-xs); line-height:1.45;
  box-shadow:var(--shadow-md); white-space:nowrap;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.charttip.is-on{ opacity:1; }
.charttip b{ font-weight:600; }
.charttip__k{ color:var(--n-400); }

/* ---- Trend chart ---------------------------------------------------- */
.trend{ width:100%; height:auto; display:block; overflow:visible; }
.trend .grid{ stroke:var(--n-150); stroke-width:1; }
.trend .axis{ fill:var(--text-muted); font-size:11px; }
.trend .ref{ stroke:var(--chart-ref); stroke-width:2; stroke-dasharray:5 4; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.trend .series{ stroke:var(--chart-series); stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.trend .cross{ stroke:var(--n-300); stroke-width:1; }
.trend .dot{ fill:var(--chart-series); stroke:var(--bg-surface); stroke-width:2; }
.trend .refdot{ fill:var(--chart-ref); stroke:var(--bg-surface); stroke-width:2; }
.trend .endlab{ font-size:11px; font-weight:600; }

@media (max-width:1100px){
  .chartcard--trend, .chartcard--donut, .chartcard--half{ grid-column:span 6; }
}

/* ============================================================
   REAL BASEMAP (Leaflet)
   The hand-drawn SVG map stays in the DOM as the offline fallback —
   this is a PWA and tiles need a network. Leaflet is layered over it
   and the SVG is hidden only once tiles are actually available.
   ============================================================ */
.mappane__leaflet{ position:absolute; inset:0; z-index:1; background:var(--map-water); }
.leaflet-container{ font-family:var(--font-sans); background:var(--map-water); }
.leaflet-container a{ color:var(--navy-600); }
.leaflet-control-attribution{
  font-size:10px !important; background:rgba(255,255,255,.82) !important;
  color:var(--text-muted) !important; padding:2px 6px !important;
  border-radius:var(--r-xs) 0 0 0;
}
/* Leaflet positions the wrapper; our pill must not re-position itself */
.leaflet-marker-icon .mappane__pin{ position:static; transform:none; }
.leaflet-marker-icon{ background:none; border:0; }

/* Map furniture must clear Leaflet's own control layer (z-index 1000) */
.mappane__ctl{ z-index:1100; }
.mappane__legend{ z-index:1100; }
/* …and the drawer must in turn clear the map furniture */
.scrim{ z-index:2000; }
.drawer{ z-index:2100; }
.charttip{ z-index:3000; }

/* Leaflet gives a divIcon no intrinsic width, so our pill wrapped. */
.leaflet-marker-icon .marker{ white-space:nowrap; }
.leaflet-marker-icon .marker__name,
.leaflet-marker-icon .marker__meta{ white-space:nowrap; }

/* ============================================================
   DESKTOP DATA SCREENS  (tables, toolbars, detail panes)
   ============================================================ */
.worksheet{ flex:1; min-height:0; overflow-y:auto; padding:var(--sp-7) var(--sp-8) var(--sp-10); }

.toolbar{
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  margin-bottom:var(--sp-6);
}
.toolbar__spacer{ flex:1; }
.searchbox{ position:relative; flex:0 1 260px; min-width:180px; }
.searchbox svg{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); pointer-events:none;
}
.searchbox input{
  width:100%; font-family:inherit; font-size:var(--fs-sm); color:var(--text-primary);
  background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--r-md); padding:8px 12px 8px 34px; min-height:38px;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.searchbox input::placeholder{ color:var(--text-disabled); }
.searchbox input:focus{
  outline:none; border-color:var(--navy-500);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--navy-500) 18%, transparent);
}

/* ---- Data table ----------------------------------------------------- */
.tablecard{
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); overflow:hidden;
}
.tablecard .table-wrap{ overflow-x:auto; }
.table thead th{ position:sticky; top:0; background:var(--bg-surface); z-index:1; }
.table tbody tr{ transition:background var(--dur-fast) var(--ease-out); }
.table tbody tr.is-picked{ background:var(--navy-50); }
.table .cell-main{ font-weight:500; color:var(--text-primary); }
.table .cell-sub{ display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }
.table .cell-who{ display:flex; align-items:center; gap:var(--sp-4); }
.table .cell-pick{ width:44px; padding-left:var(--sp-6); }
.table .cell-act{ width:1%; white-space:nowrap; text-align:right; padding-right:var(--sp-6); }
.rowbtn{
  border:1px solid var(--border-default); background:var(--bg-surface);
  border-radius:var(--r-full); font-family:inherit; font-size:var(--fs-xs);
  font-weight:500; color:var(--text-secondary); padding:6px 13px; cursor:pointer;
  min-height:32px; white-space:nowrap;
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rowbtn:hover{ border-color:var(--border-strong); background:var(--n-50); color:var(--text-primary); }
.rowbtn--ghost{ border-color:transparent; background:transparent; }
.rowbtn--ghost:hover{ border-color:var(--border-default); }

/* Compact checkbox for table rows */
.tick{ display:inline-flex; cursor:pointer; }
.tick input{ position:absolute; opacity:0; width:0; height:0; }
.tick__box{
  width:18px; height:18px; border-radius:var(--r-xs); flex:none;
  border:1.5px solid var(--border-strong); background:var(--bg-surface);
  display:grid; place-items:center; color:transparent;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.tick:hover .tick__box{ border-color:var(--navy-400); }
.tick input:checked + .tick__box{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tick input:focus-visible + .tick__box{ outline:2px solid var(--border-focus); outline-offset:2px; }

/* ---- Bulk action bar -------------------------------------------------- */
.bulkbar{
  position:sticky; bottom:0; z-index:5; margin-top:var(--sp-6);
  display:flex; align-items:center; gap:var(--sp-5);
  background:var(--n-950); color:var(--n-50); border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6); box-shadow:var(--shadow-lg);
}
.bulkbar__n{ font-size:var(--fs-sm); font-weight:500; flex:1; }
.bulkbar .btn--secondary{ background:transparent; color:var(--n-50); border-color:rgba(255,255,255,.24); box-shadow:none; }
.bulkbar .btn--secondary:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.4); }

/* ---- Overdue emphasis (Savari colours dates by urgency) ---------------- */
.due--over{ color:var(--red-700); font-weight:600; }
.due--soon{ color:var(--amber-700); font-weight:600; }

/* Visually hidden but available to screen readers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- Drawer section blocks (record detail) --------------------------- */
.drawer__sec{
  font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--text-muted);
  margin:var(--sp-7) 0 var(--sp-5);
}
.drawer__sec:first-child{ margin-top:0; }
.drawer .kv{ grid-template-columns:104px minmax(0,1fr); }

/* ---- Table footer ---------------------------------------------------- */
.tablefoot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-6); border-top:1px solid var(--border-subtle);
  font-size:var(--fs-xs); color:var(--text-muted);
}

/* ---- Settings: sub-navigation + panes -------------------------------- */
.settings{ flex:1; min-height:0; display:grid; grid-template-columns:216px minmax(0,1fr); }
.setnav{
  border-right:1px solid var(--border-subtle); background:var(--bg-surface);
  padding:var(--sp-6) var(--sp-5); overflow-y:auto;
}
.setnav__head{
  font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--text-muted);
  padding:var(--sp-5) var(--sp-5) var(--sp-2);
}
.setnav__head:first-child{ padding-top:0; }
.setpane{ overflow-y:auto; padding:var(--sp-7) var(--sp-8) var(--sp-10); }
.setpane__title{
  font-size:var(--fs-md); font-weight:600; letter-spacing:var(--tracking-display);
  margin:0 0 var(--sp-2);
}
.setpane__sub{ font-size:var(--fs-sm); color:var(--text-secondary); margin:0 0 var(--sp-7); max-width:65ch; }
.setrow{
  display:flex; align-items:flex-start; gap:var(--sp-6);
  padding:var(--sp-6) 0; border-bottom:1px solid var(--border-subtle);
}
.setrow:last-child{ border-bottom:0; }
.setrow__main{ flex:1; min-width:0; }
.setrow__name{ display:block; font-size:var(--fs-base); font-weight:500; line-height:1.35; }
.setrow__desc{ display:block; font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--sp-2); max-width:60ch; line-height:var(--lh-snug); }
.setrow__ctl{ flex:none; }

/* ---- Switch ----------------------------------------------------------- */
.switch{ display:inline-flex; align-items:center; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch__track{
  width:42px; height:25px; border-radius:var(--r-full); flex:none;
  background:var(--n-300); position:relative;
  transition:background var(--dur-base) var(--ease-out);
}
.switch__track::after{
  content:''; position:absolute; top:3px; left:3px; width:19px; height:19px;
  border-radius:50%; background:#fff; box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out);
}
.switch input:checked + .switch__track{ background:var(--accent); }
.switch input:checked + .switch__track::after{ transform:translateX(17px); }
.switch input:focus-visible + .switch__track{ outline:2px solid var(--border-focus); outline-offset:2px; }

/* ---- Checklist template editor ---------------------------------------- */
.tpl{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--r-lg); overflow:hidden; }
.tpl__row{
  display:flex; align-items:center; gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--border-subtle);
}
.tpl__row:last-child{ border-bottom:0; }
.tpl__grip{ color:var(--n-400); flex:none; cursor:grab; }
.tpl__main{ flex:1; min-width:0; }
.tpl__name{ display:block; font-size:var(--fs-base); font-weight:500; line-height:1.3; }
.tpl__meta{ display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }