/* GrowFlow — dark glass-morphism shell (TAL SHIAR / plasma-green).
   Obsidian gunmetal surfaces, plasma-green hero, glass panels.
   All class names preserved for JS compatibility. */
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&family=Orbitron:wght@500;600;700;800&family=Poppins:ital,wght@0,600;0,700;1,600;1,700&family=Geist+Mono:wght@400;500;600&display=swap');

@font-face{font-family:'Comfortaa';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/comfortaa-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/comfortaa-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/comfortaa-600-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root {
  /* ── Surfaces (lifted green-charcoal — brighter than the old near-black
     obsidian so surfaces read as elevated glass, not a black hole) ── */
  --bg: #0E1F17;
  --surface: #163025;
  --surface-2: #1E3B2D;
  --surface-3: #274A38;
  --overlay: rgba(7,18,13,.74);

  /* ── Ink / Text ── */
  --ink: #E9F6EF;
  --ink-2: #A2C4B5;
  --ink-3: #6E9384;
  --ink-4: #557568;

  /* ── Borders (a touch stronger so edges show on the lighter surfaces) ── */
  --line: rgba(var(--accent-rgb),.16);
  --line-2: rgba(var(--accent-rgb),.09);
  --border-strong: #2F5A44;

  /* ── Primary: plasma green ── */
  /* --accent-rgb is the primary's raw "r,g,b" — every accent-tinted surface
     (nav, glass borders, glows, focus rings) is rgba(var(--accent-rgb),α), so
     a skin only has to restate this one triple to recolour the whole shell. */
  --accent-rgb: 43,232,160;
  --primary: #2BE8A0;
  --primary-hover: #4CF2B3;
  --primary-soft: rgba(var(--accent-rgb),.13);
  --primary-fg: #7CF5C4;
  --text-on-primary: #03130C;
  --green: #2BE8A0;
  --green-soft: rgba(var(--accent-rgb),.15);
  --green-fg: #7CF5C4;

  /* ── Blue → plasma teal ── */
  --blue: #2FD9D9;
  --blue-700: #1FB3B3;
  --blue-soft: rgba(47,217,217,.15);
  --blue-soft-2: rgba(47,217,217,.08);

  /* ── Orange → bronze accent ── */
  --orange: #E0A73E;
  --orange-700: #C0862A;
  --orange-soft: rgba(224,167,62,.15);
  --orange-soft-2: rgba(224,167,62,.08);

  /* ── Red / Amber / Violet ── */
  --red: #FF4D5E;
  --red-700: #D63347;
  --red-soft: rgba(255,77,94,.18);
  --red-fg: #FF8090;
  --amber: #C79A54;
  --amber-fg: #E0C074;
  --amber-soft: rgba(199,154,84,.18);
  --violet: #9B7BE8;
  --violet-soft: rgba(155,123,232,.18);
  /* Chart series tokens (analytics) — pair validated for CVD + normal-vision
     separation on this theme's surface; the light theme overrides below. */
  --ch-a: #9B7BE8;
  --ch-b: #1CA56F;
  --teal: #2FD9D9;
  --teal-soft: rgba(47,217,217,.16);

  /* ── Glass morphism ── */
  --glass-bg: rgba(11,25,19,.72);
  --glass-border: rgba(var(--accent-rgb),.12);
  --glass-blur: blur(18px);

  /* ── Elevation / glow shadows ── */
  --sh-1: 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(var(--accent-rgb),.05);
  --sh-2: 0 8px 24px rgba(0,0,0,.62), inset 0 1px 0 rgba(var(--accent-rgb),.07);
  --sh-3: 0 24px 60px rgba(0,0,0,.72), 0 0 0 1px rgba(var(--accent-rgb),.08);
  --sh-brand: 0 0 26px rgba(var(--accent-rgb),.5), 0 2px 8px rgba(0,0,0,.6);
  --focus-ring: rgba(var(--accent-rgb),.42);

  /* ── Scanlines texture ── */
  --scanlines: repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);

  /* ── Typography ── */
  --font: 'Saira',-apple-system,system-ui,sans-serif;
  --font-display: 'Orbitron','Saira',system-ui,sans-serif;
  --font-brand: 'Poppins','Comfortaa','Saira',system-ui,sans-serif;
  --mono: 'Geist Mono',ui-monospace,monospace;

  /* ── Layout ── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 14px; --r-xl: 18px;
  --header-h: 64px; --sidebar-w: 252px;

  /* ── Spacing scale ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ── Type scale ── */
  --fs-xs: 10px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px;  --fs-3xl: 32px;
  /* ── Motion ── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* strong ease-out for UI entrances/exits */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* strong ease-in-out for on-screen movement */
}

/* ══════════════════════════════════════════════════════════════════════
   LIGHT THEME — "Cool Mist Glass"
   Selectable at runtime via <html data-theme="light"> (GF.toggleTheme),
   set synchronously in index.html's <head> so there's no flash. This is a
   pure token override — every rule below the :root block reads these
   variables, so nothing else needs to change per-theme. A pale mint-teal
   frosted-glass palette that keeps the dark theme's exact brand hue angles
   (green ~150°, teal ~184°, bronze ~35°), only deepened for legibility on
   light surfaces; contrast-checked for WCAG AA on ink/surface + fg-on-soft
   chip pairs. The dark theme remains the default (bare :root above).
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --accent-rgb: 6,121,63;
  --bg: #EAF4EF; --surface: #F7FCFA; --surface-2: #F0F8F4; --surface-3: #ECF5F0;
  --overlay: rgba(10,30,22,.42);
  --ink: #0E241B; --ink-2: #3E5C4E; --ink-3: #55705F; --ink-4: #93AA9E;
  --line: rgba(14,70,42,.14); --line-2: rgba(14,70,42,.08); --border-strong: #5F9B7D;
  --primary: #06793F; --primary-hover: #04602F; --primary-soft: rgba(6,121,63,.12);
  --primary-fg: #076B45; --text-on-primary: #F1FFF8;
  --green: #06793F; --green-soft: rgba(6,121,63,.12); --green-fg: #076B45;
  --blue: #0F6F76; --blue-700: #095A63; --blue-soft: rgba(15,111,118,.12); --blue-soft-2: rgba(15,111,118,.06);
  --orange: #8A5A15; --orange-700: #6E4710; --orange-soft: rgba(138,90,21,.13); --orange-soft-2: rgba(138,90,21,.07);
  --red: #C22A3B; --red-700: #8F1D2C; --red-soft: rgba(194,42,59,.13); --red-fg: #A32335;
  --amber: #8A6423; --amber-fg: #6B4E1A; --amber-soft: rgba(138,100,35,.14);
  --violet: #6B4FCB; --violet-soft: rgba(107,79,203,.13);
  --ch-a: #6B4FCB; --ch-b: #06793F;
  --teal: #0F6F76; --teal-soft: rgba(15,111,118,.14);
  --glass-bg: rgba(236,248,242,.60); --glass-border: rgba(14,70,42,.14); --glass-blur: blur(20px);
  --sh-1: 0 1px 2px rgba(16,40,30,.05), inset 0 0 0 1px rgba(255,255,255,.6);
  --sh-2: 0 8px 20px rgba(16,42,32,.08), inset 0 1px 0 rgba(255,255,255,.7);
  --sh-3: 0 20px 48px rgba(16,42,32,.12), 0 0 0 1px rgba(16,42,32,.05);
  --sh-brand: 0 6px 20px rgba(6,121,63,.22), 0 2px 6px rgba(16,42,32,.08);
  --focus-ring: rgba(6,121,63,.35);
  --scanlines: repeating-linear-gradient(0deg,rgba(14,36,27,.035) 0 1px,transparent 1px 3px);
}

/* ══════════════════════════════════════════════════════════════════════
   SUMA THEME — "Protoss" (Purely Plant SUMA Design System)
   The team's StarCraft-II control-room skin mapped into GrowFlow's tokens: a
   deep-navy void with a faint cyan HUD grid, psi-cyan + Khaydarin-gold accents,
   plant-green kept as the brand/hero (so "done"/active stay green, matching the
   green glass tints baked through the shell), psionic violet for AI. Source
   palette: Purely Plant / SUMA tokens/colors.css (Protoss scope). Adding a
   further skin is one more :root[data-theme=".."] block + one GF.THEME_LIST
   entry + one leaf3d THEMES entry — nothing else changes.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme="suma"] {
  color-scheme: dark;
  --accent-rgb: 46,230,255;
  --bg: #0B1322; --surface: #16233C; --surface-2: #1B2E4E; --surface-3: #284163;
  --overlay: rgba(4,9,20,.74);
  --ink: #EAF4FF; --ink-2: #C3D4EA; --ink-3: #9FB4CF; --ink-4: #6F86A6;
  --line: rgba(120,165,215,.16); --line-2: rgba(120,165,215,.09); --border-strong: #314C73;
  /* Primary = plant green (hero / done / active) */
  --primary: #34D399; --primary-hover: #6EE7B7; --primary-soft: rgba(52,211,153,.14);
  --primary-fg: #6EE7B7; --text-on-primary: #04121D;
  --green: #34D399; --green-soft: rgba(52,211,153,.15); --green-fg: #6EE7B7;
  /* Blue/teal → psi-cyan (the SUMA signature interactive glow) */
  --blue: #2EE6FF; --blue-700: #1BB6E0; --blue-soft: rgba(46,230,255,.15); --blue-soft-2: rgba(46,230,255,.08);
  --teal: #2EE6FF; --teal-soft: rgba(46,230,255,.16);
  /* Orange → Khaydarin gold (highlight tier) */
  --orange: #FFCF6B; --orange-700: #FFAF3A; --orange-soft: rgba(255,207,107,.15); --orange-soft-2: rgba(255,207,107,.08);
  /* Signal hues */
  --red: #FF6B6B; --red-700: #EF4444; --red-soft: rgba(239,68,68,.18); --red-fg: #FF9A9A;
  --amber: #FFAF3A; --amber-fg: #FFCF6B; --amber-soft: rgba(255,175,58,.16);
  --violet: #A78BFA; --violet-soft: rgba(167,139,250,.18);
  /* Glass with a cyan-tinted edge (very Protoss) */
  --glass-bg: rgba(18,39,66,.62); --glass-border: rgba(46,230,255,.14); --glass-blur: blur(16px) saturate(1.2);
  /* Depth-in-the-void shadows + a cyan bloom */
  --sh-1: 0 2px 8px rgba(2,6,16,.5), inset 0 0 0 1px rgba(46,230,255,.05);
  --sh-2: 0 8px 28px rgba(2,6,16,.6), inset 0 1px 0 rgba(46,230,255,.07);
  --sh-3: 0 18px 56px rgba(2,6,16,.66), 0 0 0 1px rgba(46,230,255,.08);
  --sh-brand: 0 0 26px rgba(46,230,255,.45), 0 2px 8px rgba(2,6,16,.6);
  --focus-ring: rgba(46,230,255,.42);
  --scanlines: repeating-linear-gradient(0deg,rgba(46,230,255,.025) 0 1px,transparent 1px 3px);
}
/* The SUMA signature backdrop: a faint cyan HUD grid over a radial navy void,
   pinned behind the whole app (only in this skin). */
:root[data-theme="suma"] body {
  background-image:
    linear-gradient(rgba(46,230,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,230,255,.035) 1px, transparent 1px),
    radial-gradient(130% 70% at 50% -10%, #1B2E4E 0%, #101A2E 42%, #0B1322 85%);
  background-size: 46px 46px, 46px 46px, cover;
  background-attachment: fixed;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:hidden clips phantom horizontal scroll from the off-canvas mobile
   sidebar (position:fixed;translateX(-100%)); the app's real scrollers (.main,
   .report-scroll, .gf-entry) have their own overflow contexts and are unaffected. */
html{font-size:15px;overflow-x:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow:hidden}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--surface-2)}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:2px solid var(--surface-2)}
::-webkit-scrollbar-thumb:hover{background:#2a5a40}
button{font-family:inherit;cursor:pointer}
.mono{font-family:var(--mono)}
.row{display:flex;align-items:center}
.hidden{display:none!important}
.spacer{flex:1}
input,textarea,select{font-family:inherit;color:var(--ink)}

/* Icon helpers */
.icon{width:18px;height:18px;flex-shrink:0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke:currentColor}

/* ── Keyframes ── */
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes expandIn{from{opacity:0}to{opacity:1}}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes ntfListIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ntfListInReduced{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseRec{0%,100%{box-shadow:0 0 0 0 rgba(224,167,62,.45)}50%{box-shadow:0 0 0 7px rgba(224,167,62,0)}}
@keyframes micLive{0%,100%{box-shadow:0 10px 30px rgba(224,167,62,.5)}50%{box-shadow:0 10px 30px rgba(224,167,62,.5),0 0 0 16px rgba(224,167,62,.12)}}
@keyframes asst-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@keyframes gf-plasma-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes gf-energy-sweep{0%{left:-30%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:130%;opacity:0}}

/* ── App shell ── */
#app{display:flex;height:100vh;width:100vw}

/* ── Sidebar ── */
.sidebar{width:var(--sidebar-w);background:var(--glass-bg);backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-border);display:flex;flex-direction:column;flex-shrink:0;
  height:100vh;z-index:60;transition:transform .28s ease;position:relative;overflow:hidden}
.sidebar::before{content:'';position:absolute;inset:0;background:var(--scanlines);pointer-events:none;opacity:.5}
.sidebar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.4) 50%,transparent)}

.brand{display:flex;align-items:center;gap:12px;padding:20px 18px 16px;position:relative}
.brand-mark{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0}
.brand-name{font-family:var(--font-brand);font-weight:700;font-size:20px;letter-spacing:-.4px;
  background:linear-gradient(120deg,var(--primary) 0%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand-name b{font-style:italic;background:linear-gradient(120deg,var(--blue) 0%,var(--primary) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Nav ── */
.nav{padding:2px 10px;display:flex;flex-direction:column;gap:1px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;font-weight:600;
  font-size:13.5px;cursor:pointer;color:var(--ink-2);transition:background .15s,color .15s}
.nav-item:hover{background:rgba(var(--accent-rgb),.08);color:var(--ink)}
.nav-item.active{background:rgba(var(--accent-rgb),.12);color:var(--primary);font-weight:700;
  box-shadow:inset 2px 0 0 var(--primary)}
.nav-item .icon{stroke:var(--ink-3)}
.nav-item:hover .icon{stroke:var(--ink-2)}
.nav-item.active .icon{stroke:var(--primary)}
.nav-badge{margin-left:auto;background:var(--primary);color:var(--text-on-primary);font-size:11px;font-weight:700;
  padding:2px 7px;border-radius:999px}
.nav-badge-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0}

/* The rail has grown past a single screen's worth of items (QC LIMS + QMS
   Studio + Facility + Analytics on top of the original nav) — .sidebar is a
   fixed 100vh column with overflow:hidden, so without its own scroll region
   this whole block (and everything after it: Departments, the user card)
   silently renders below the fold with no way to reach it. min-height:0 lets
   a flex child actually shrink to the space left after the logo header and
   the pinned user card, instead of demanding its full content height. */
.side-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.side-divider{height:1px;background:var(--line);margin:10px 16px}
.side-label{padding:0 14px;font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--ink-3);
  text-transform:uppercase;margin-bottom:6px}
.dept-list{padding:0 10px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1}
.dept-row{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:7px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--ink-2);transition:background .15s,transform 160ms cubic-bezier(0.23, 1, 0.32, 1)}
.dept-row:hover{background:rgba(var(--accent-rgb),.07);color:var(--ink)}
.dept-row:active{transform:scale(.97)}
.dept-row.active{background:rgba(var(--accent-rgb),.11);color:var(--ink)}
.dept-dot{width:8px;height:8px;border-radius:999px;flex-shrink:0}
.dept-row .dept-count{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--ink-3);font-family:var(--mono)}

.user-card{display:flex;align-items:center;gap:10px;padding:11px;margin:10px;border-radius:10px;
  background:rgba(var(--accent-rgb),.06);border:1px solid var(--glass-border);cursor:pointer;
  transition:background .15s}
.user-card:hover{background:rgba(var(--accent-rgb),.10)}
.user-card .nm{font-weight:700;font-size:13px;color:var(--ink)}
.user-card .rl{font-size:11.5px;color:var(--ink-2);font-weight:600}

/* ── Main area ── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh}

/* ── Header ── */
.header{height:var(--header-h);display:flex;align-items:center;gap:12px;padding:0 22px;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);
  flex-shrink:0;position:relative}
.header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.35) 50%,transparent);pointer-events:none}
.hamburger{display:none;background:none;border:none;cursor:pointer;color:var(--ink-2)}
.search{display:flex;align-items:center;gap:10px;flex:1;max-width:380px;
  background:rgba(var(--accent-rgb),.06);border:1px solid var(--glass-border);border-radius:10px;padding:0 14px}
.search input{border:none;background:none;outline:none;padding:10px 0;font-size:13.5px;font-weight:500;
  width:100%;color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search .icon{stroke:var(--ink-3)}
.lang-toggle{display:flex;gap:2px;background:rgba(var(--accent-rgb),.07);border:1px solid var(--glass-border);
  border-radius:9px;padding:3px;font-size:12.5px;font-weight:700}
.lang-toggle span{padding:5px 11px;border-radius:7px;color:var(--ink-3);cursor:pointer}
.lang-toggle span.on{background:rgba(var(--accent-rgb),.15);color:var(--primary);box-shadow:none}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;border-radius:8px;cursor:pointer;
  border:1px solid var(--glass-border);background:rgba(var(--accent-rgb),.06);color:var(--ink-2);
  padding:9px 13px;transition:background .15s,box-shadow .15s,transform .1s}
.btn:hover{background:rgba(var(--accent-rgb),.11);color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn .icon{width:16px;height:16px}
.btn-primary{background:var(--primary);color:var(--text-on-primary);border-color:transparent;
  box-shadow:0 0 16px rgba(var(--accent-rgb),.35),0 2px 6px rgba(0,0,0,.4);font-weight:700}
.btn-primary:hover{background:var(--primary-hover);color:var(--text-on-primary);box-shadow:0 0 24px rgba(var(--accent-rgb),.5)}
.btn-orange{background:var(--orange);color:#fff;border-color:transparent;
  box-shadow:0 2px 8px rgba(224,167,62,.3)}
.btn-orange:hover{background:var(--orange-700)}
.btn-ghost{background:none;border:none;color:var(--ink-2);padding:9px}
.btn-ghost:hover{background:rgba(var(--accent-rgb),.07)}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:7px}
.btn-danger{color:var(--red-fg);border-color:rgba(255,77,94,.3);background:var(--red-soft)}
.btn-danger:hover{background:rgba(255,77,94,.25)}
.icon-btn{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-border);background:rgba(var(--accent-rgb),.06);color:var(--ink-2);
  cursor:pointer;position:relative;transition:background .15s}
.icon-btn:hover{background:rgba(var(--accent-rgb),.12);color:var(--primary)}

/* ── Press feedback utility — apply alongside cursor:pointer on any element
   with no bespoke :active rule of its own, for the same tactile scale-down
   .btn:active (line 321) already gives clicks/taps ── */
.pressable{transition:transform 160ms cubic-bezier(0.23, 1, 0.32, 1)}
.pressable:active{transform:scale(.97)}

/* ── Avatar ── */
.avatar{border-radius:999px;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--glass-border);letter-spacing:.2px}
.dot{width:7px;height:7px;border-radius:999px;flex-shrink:0}

/* ── Workspace ── */
.workspace{flex:1;overflow-y:auto;padding:0;background:var(--bg)}
.week-strip{display:flex;align-items:center;gap:14px;padding:18px 24px 6px;flex-wrap:wrap}
.week-title{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.week-dates{font-size:13px;color:var(--ink-3);font-weight:600}
.badge-now{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:var(--primary-soft);color:var(--primary);padding:4px 9px;border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.25)}
.weeknav{display:flex;gap:4px}

/* ── Day pills ── */
.day-pills{display:flex;gap:6px;flex-wrap:wrap;padding:8px 24px 4px}
.day-pill{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--glass-border);background:rgba(var(--accent-rgb),.05);color:var(--ink-2);
  font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.day-pill:hover{background:rgba(var(--accent-rgb),.09);color:var(--ink)}
.day-pill.active{background:rgba(var(--accent-rgb),.18);color:var(--primary);border-color:rgba(var(--accent-rgb),.3)}
.day-pill .count{font-size:10.5px;background:var(--surface-3);color:var(--ink-3);
  padding:1px 6px;border-radius:999px;min-width:18px;text-align:center}
.day-pill.active .count{background:rgba(var(--accent-rgb),.25);color:var(--primary)}

/* ── Telemetry ── */
.telemetry{margin:12px 24px 4px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:12px;box-shadow:var(--sh-1);overflow:hidden;position:relative}
.tele-bar{display:flex;align-items:center;gap:22px;padding:13px 18px;cursor:pointer;flex-wrap:wrap}
.tele-stat{display:flex;align-items:center;gap:8px}
.tele-stat .v{font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.tele-stat .l{font-size:12px;font-weight:700;color:var(--ink-3)}
.tele-chev{margin-left:auto;stroke:var(--ink-3);transition:transform 200ms cubic-bezier(0.23, 1, 0.32, 1)}
.telemetry.open .tele-chev{transform:rotate(180deg)}
.tele-detail{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 200ms cubic-bezier(0.23, 1, 0.32, 1)}
.telemetry.open .tele-detail{grid-template-rows:1fr}
.tele-detail-inner{overflow:hidden;padding:4px 18px 18px;border-top:1px solid var(--line-2);
  opacity:0;transition:opacity 200ms cubic-bezier(0.23, 1, 0.32, 1)}
.telemetry.open .tele-detail-inner{opacity:1}
.tele-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:14px}
.tele-card{background:rgba(var(--accent-rgb),.06);border:1px solid var(--glass-border);border-radius:10px;padding:14px}
.tele-card .v{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--ink)}
.tele-card .l{font-size:11.5px;font-weight:700;color:var(--ink-3);margin-top:2px}

/* ── Panels & cards ── */
.panels{padding:8px 24px 40px;display:flex;flex-direction:column;gap:14px}
.panel{background:transparent}
.panel-head{display:flex;align-items:center;gap:10px;padding:6px 2px 12px}
.panel-head .ttl{font-size:15px;font-weight:800;color:var(--ink)}
.panel-head .cnt{font-size:12px;font-weight:700;color:var(--ink-3);background:var(--surface-3);
  padding:2px 9px;border-radius:999px;border:1px solid var(--line)}
.panel.collapsed .panel-body,.panel.collapsed .add-row{display:none}
.collapse-chev{stroke:var(--ink-3);transition:transform .2s;cursor:pointer}
.panel.collapsed .collapse-chev{transform:rotate(-90deg)}

/* ── Task card ── */
.card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-left:4px solid var(--ink-3);border-radius:12px;
  margin-bottom:10px;box-shadow:var(--sh-1);transition:box-shadow .18s,transform .12s,border-left-color .18s;
  opacity:1;position:relative;overflow:hidden}
.card-enter{animation:cardIn .25s var(--ease-out) forwards}
.card::before{content:'';position:absolute;inset:0;background:var(--scanlines);pointer-events:none;opacity:.35}
@media (hover: hover) and (pointer: fine){
  .card:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
}
.card.s-done{border-left-color:var(--green)}
.card.s-working{border-left-color:var(--orange)}
.card.s-review{border-left-color:var(--blue)}
.card.s-stuck{border-left-color:var(--red)}
.card.s-postponed{border-left-color:var(--amber)}
.card.s-pending{border-left-color:var(--ink-3)}
.card--just-completed{animation-name:cardComplete;animation-duration:400ms;
  animation-timing-function:cubic-bezier(0.77, 0, 0.175, 1)}
@keyframes cardComplete{
  0%{box-shadow:var(--sh-1);transform:scale(1)}
  40%{box-shadow:0 0 0 3px var(--green-soft),var(--sh-2);transform:scale(1.015)}
  100%{box-shadow:var(--sh-1);transform:scale(1)}
}
@keyframes cardCompleteReduced{
  0%{box-shadow:var(--sh-1)}
  40%{box-shadow:0 0 0 3px var(--green-soft),var(--sh-2)}
  100%{box-shadow:var(--sh-1)}
}
.card-head{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;
  transition:transform 160ms cubic-bezier(0.23, 1, 0.32, 1)}
.card-head:active{transform:scale(.97)}
.card-main{flex:1 1 auto;min-width:0}
/* Right-side badge cluster (days · people · status · priority). Kept as one
   group so it can drop to its own full-width row on small screens (mobile.css)
   instead of every badge becoming an unreadable narrow column. */
.card-side{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.check{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:none;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease}
.check.done{background:var(--primary);border-color:var(--primary)}
.card-title{font-weight:700;font-size:14.5px;letter-spacing:-.1px;color:var(--ink)}
.card.s-done .card-title{text-decoration:line-through;color:var(--ink-3)}
.card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:11px;color:var(--ink-3);
  font-weight:500;margin-top:3px;font-family:var(--mono)}
.card-meta .dn{font-weight:700}
.daytags{display:flex;flex-wrap:wrap;gap:4px}
.daytag{font-size:10px;font-weight:700;background:var(--surface-3);color:var(--ink-2);
  padding:2px 6px;border-radius:5px;border:1px solid var(--line)}
.avatars{display:flex;padding-left:9px}
.avatars .avatar{margin-left:-9px}

/* ── Status pills ── */
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;
  padding:5px 11px;border-radius:999px;line-height:1;white-space:nowrap;cursor:pointer;
  user-select:none;border:none;backdrop-filter:blur(8px);
  transition:transform 160ms cubic-bezier(0.23, 1, 0.32, 1)}
.pill:active{transform:scale(.97)}
.pill .dot{width:7px;height:7px}
.pill.s-done{color:var(--primary);background:rgba(var(--accent-rgb),.15);border:1px solid rgba(var(--accent-rgb),.25)}
.pill.s-working{color:var(--amber-fg);background:var(--amber-soft);border:1px solid rgba(199,154,84,.25)}
.pill.s-review{color:var(--blue);background:var(--blue-soft);border:1px solid rgba(47,217,217,.22)}
.pill.s-stuck{color:var(--red-fg);background:var(--red-soft);border:1px solid rgba(255,77,94,.22)}
.pill.s-postponed{color:var(--amber-fg);background:var(--amber-soft);border:1px solid rgba(199,154,84,.22)}
.pill.s-pending{color:var(--ink-2);background:var(--surface-3);border:1px solid var(--line)}

/* ── Priority tags ── */
.prtag{font-weight:700;font-size:11px;padding:4px 9px;border-radius:999px;color:#fff}
.prtag.critical{background:var(--red);box-shadow:0 0 8px rgba(255,77,94,.35)}
.prtag.high{background:var(--orange);box-shadow:0 0 8px rgba(224,167,62,.25)}
.prtag.medium{background:var(--blue);color:var(--text-on-primary);box-shadow:0 0 8px rgba(47,217,217,.25)}
.prtag.low{background:var(--surface-3);color:var(--ink-3)}
.chev-card{stroke:var(--ink-3);transition:transform .2s}
.card.expanded .chev-card{transform:rotate(180deg)}

/* ── Card expanded body ── */
.card-body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 150ms cubic-bezier(0.23, 1, 0.32, 1)}
.card.expanded .card-body{grid-template-rows:1fr}
.card-body-inner{overflow:hidden;padding:0 15px 15px;border-top:1px solid var(--line-2);
  margin:0 0 0 0;padding-top:14px;
  opacity:0;transform:translateY(-4px);
  transition:opacity 150ms cubic-bezier(0.23, 1, 0.32, 1),transform 150ms cubic-bezier(0.23, 1, 0.32, 1)}
.card.expanded .card-body-inner{opacity:1;transform:none}
.sec-label{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--ink-3);
  text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.card-desc{font-size:13.5px;line-height:1.55;color:var(--ink);background:rgba(var(--accent-rgb),.05);
  border:1px solid var(--glass-border);border-radius:9px;padding:11px 13px;
  margin-bottom:16px;white-space:pre-wrap}
.blocker{display:flex;gap:10px;align-items:center;background:var(--red-soft);
  border:1px solid rgba(255,77,94,.25);border-radius:10px;padding:11px 13px;margin-bottom:16px}
.blocker .icon{stroke:var(--red);width:17px;height:17px}
.blocker .bt{font-weight:700;font-size:13px;color:var(--red-fg)}

.notes{display:flex;flex-direction:column;gap:0;margin-bottom:10px}
.note{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px;color:var(--ink)}
.note:last-child{border:none}
/* Executive input highlight: OWNER notes get the strongest (gold) frame,
   CEO/COO a lighter accent — directives from above must not read like
   ordinary progress notes. */
.note.note-exec{background:var(--blue-soft-2);border:1px solid var(--blue-soft);
  border-radius:8px;padding:8px 10px;margin:4px 0}
.note.note-owner{background:var(--orange-soft-2);border:1px solid rgba(224,167,62,.35);
  box-shadow:0 0 10px var(--orange-soft);border-left:3px solid var(--orange)}
.note-role-chip{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;flex-shrink:0;align-self:center;
  color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-soft)}
.note-role-chip.owner{color:var(--orange);background:var(--orange-soft);border-color:rgba(224,167,62,.4)}
.note .nd{font-weight:700;color:var(--primary);font-family:var(--mono);font-size:11px;flex-shrink:0;width:34px}
.note-input{display:flex;gap:8px;align-items:center;margin-bottom:16px}
.note-input input{flex:1;border:1px solid var(--glass-border);border-radius:9px;padding:9px 12px;
  font-size:13px;outline:none;background:var(--surface-2);color:var(--ink)}
.note-input input:focus{border-color:rgba(var(--accent-rgb),.4);box-shadow:0 0 0 3px var(--primary-soft)}
.mini-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--glass-border);
  background:rgba(var(--accent-rgb),.05);display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;color:var(--ink-2)}
.mini-btn:hover{background:rgba(var(--accent-rgb),.10)}
.mini-btn.ai{color:var(--orange);border-color:rgba(224,167,62,.25);background:rgba(224,167,62,.08)}
.mini-btn.rec{color:#fff;background:var(--orange);border-color:var(--orange);animation:pulseRec 1.2s ease infinite}

.subtasks{padding-left:14px;border-left:2px solid var(--line);margin-bottom:14px}
.subtask{display:flex;align-items:center;gap:10px;padding:7px 0}
.subtask .stt{font-size:13px;font-weight:600;flex:1;color:var(--ink)}
.subtask.done .stt{text-decoration:line-through;color:var(--ink-3)}
.sub-add{display:flex;gap:8px;margin-top:6px}
.sub-add input{flex:1;border:1px solid var(--glass-border);border-radius:8px;padding:7px 10px;
  font-size:12.5px;outline:none;background:var(--surface-2);color:var(--ink)}

.deps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.dep-chip{font-size:12px;font-weight:600;padding:4px 9px;border-radius:7px;display:flex;align-items:center;gap:5px}
.dep-chip.met{background:var(--green-soft);color:var(--primary)}
.dep-chip.unmet{background:var(--red-soft);color:var(--red-fg)}

.handoff{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:10px;
  background:linear-gradient(100deg,rgba(47,217,217,.07),rgba(var(--accent-rgb),.07));
  border:1px solid var(--glass-border);margin-bottom:14px}
.handoff .hbadge{display:flex;align-items:center;gap:7px;font-weight:800;font-size:13px;color:var(--ink)}
.handoff .chip-dept{width:28px;height:28px;border-radius:8px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1)}

.card-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px;border-top:1px solid var(--line-2)}

/* ── Add row ── */
.add-row{display:flex;gap:10px;align-items:center;background:rgba(var(--accent-rgb),.04);
  border:1px dashed rgba(var(--accent-rgb),.2);border-radius:11px;padding:11px 14px;
  cursor:pointer;color:var(--ink-3);font-weight:600;font-size:13.5px;transition:border-color .15s,color .15s,background .15s}
.add-row:hover{border-color:rgba(var(--accent-rgb),.4);color:var(--primary);background:rgba(var(--accent-rgb),.07)}

/* ── Progress track ── */
.track{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;flex:1}
.track>span{display:block;height:100%;border-radius:999px;background:var(--primary)}

/* ── Modals ── */
.overlay{position:fixed;inset:0;z-index:500;background:var(--overlay);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  visibility:hidden;opacity:0;
  transition:opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),visibility 200ms cubic-bezier(0.23, 1, 0.32, 1)}
.overlay.open{visibility:visible;opacity:1}
/* Flex column so the header + footer stay pinned and ONLY the body scrolls.
   (The previous rule set overflow-y:auto then immediately overflow:hidden on
   the same selector, which clipped tall modals with no way to scroll to Save.) */
.modal{background:var(--glass-bg);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--sh-3);
  width:100%;max-width:480px;max-height:90vh;
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  transform:scale(.96) translateY(8px);
  transition:transform 200ms cubic-bezier(0.23, 1, 0.32, 1)}
.overlay.open .modal{transform:none}
.modal::before{content:'';position:absolute;inset:0;background:var(--scanlines);pointer-events:none;opacity:.3;z-index:0}
.modal>*{position:relative;z-index:1}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;
  border-bottom:1px solid var(--line);position:relative;flex-shrink:0}
.modal-head::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.3) 50%,transparent)}
.modal-head h3{font-size:17px;font-weight:800;color:var(--ink)}
.modal-body{padding:20px 22px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-shrink:0}

/* ── Form fields ── */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-3);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.3px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--glass-border);border-radius:9px;
  padding:10px 12px;font-size:14px;outline:none;background:var(--surface-2);color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(var(--accent-rgb),.4);
  box-shadow:0 0 0 3px var(--primary-soft)}
.field textarea{min-height:64px;resize:vertical}
.field select option{background:var(--surface-2);color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip-opt{padding:7px 12px;border-radius:8px;border:1px solid var(--glass-border);
  background:rgba(var(--accent-rgb),.05);font-size:12.5px;font-weight:700;color:var(--ink-2);
  cursor:pointer;user-select:none;transition:background .15s,color .15s,border-color .15s}
.chip-opt:hover{background:rgba(var(--accent-rgb),.09);color:var(--ink)}
.chip-opt.on{background:rgba(var(--accent-rgb),.15);border-color:rgba(var(--accent-rgb),.35);color:var(--primary)}

/* ── Voice modal ── */
.voice-modal{max-width:440px;background:var(--surface-2);border:1px solid var(--glass-border);border-radius:20px}
.voice-modal .modal-head{border-color:var(--line)}
.voice-modal h3{color:var(--ink)}
.mic-stage{display:flex;flex-direction:column;align-items:center;gap:22px;padding:18px 0 8px}
.mic-rings{position:relative;width:118px;height:118px;display:flex;align-items:center;justify-content:center}
.mic-rings .ring{position:absolute;border-radius:999px;background:rgba(var(--accent-rgb),.10)}
.mic-rings .r1{inset:0}.mic-rings .r2{inset:15px;background:rgba(var(--accent-rgb),.16)}
.mic-core{width:78px;height:78px;border-radius:999px;background:var(--orange);display:flex;align-items:center;
  justify-content:center;box-shadow:0 10px 30px rgba(224,167,62,.4);cursor:pointer;border:none}
.mic-core.live{animation:micLive 1.1s ease infinite}
.wave{display:flex;align-items:center;gap:3px;height:54px}
.wave span{width:4px;height:84px;border-radius:4px;background:var(--primary);transform-origin:center;transition:transform .12s}
.transcript-sheet{background:var(--surface);color:var(--ink);border-radius:16px 16px 0 0;
  margin:16px -22px -20px;padding:20px 22px 22px;border-top:1px solid var(--glass-border)}
.transcript{font-size:15px;font-weight:600;line-height:1.5;min-height:48px;margin-bottom:16px;color:var(--ink)}
.transcript .ph{color:var(--ink-3);font-weight:500}
.parsed-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
.parsed-cell{background:var(--surface-2);border:1px solid var(--glass-border);border-radius:10px;padding:9px 11px}
.parsed-cell .pl{font-size:10px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.3px;
  display:flex;gap:5px;align-items:center;margin-bottom:5px}
.parsed-cell .pv{font-size:13.5px;font-weight:700;color:var(--ink)}

/* ── AI summary ── */
.ai-out{font-size:13.5px;line-height:1.6;white-space:pre-wrap;color:var(--ink)}
.ai-loading{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-weight:600;font-size:14px;padding:14px 0}
.spinner{width:20px;height:20px;border:2.5px solid var(--line);border-top-color:var(--primary);
  border-radius:999px;animation:spin .6s linear infinite}

/* ── Toasts ── */
#toasts{position:fixed;bottom:22px;right:22px;z-index:700;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--glass-bg);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);
  border-radius:11px;box-shadow:var(--sh-3);padding:12px 16px;font-size:13.5px;font-weight:600;
  display:flex;align-items:center;gap:10px;animation:toastIn .3s var(--ease-out);min-width:220px;color:var(--ink)}
.toast.success{border-left:3px solid var(--primary)}
.toast.error{border-left:3px solid var(--red)}
.toast.info{border-left:3px solid var(--blue)}
.toast .icon{width:18px;height:18px}

/* ── Sidebar overlay (mobile) ── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(2,7,5,.6);z-index:55}
.sidebar-overlay.open{display:block}

/* Auto-hide the left panel into a hamburger drawer on small screens (tablets,
   small laptops, phones) so the workspace gets the full width. */
@media(max-width:1024px){
  .sidebar{position:fixed;transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .hamburger{display:flex}
}
@media(max-width:880px){
  .search{max-width:none}
  .lang-toggle,.header .hide-sm{display:none}
}

/* ── v2 task badges & chips ── */
.card-meta .icon{width:12px;height:12px}
.due-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:6px;background:var(--surface-3);color:var(--ink-2);
  border:1px solid var(--line);white-space:nowrap}
.due-badge.overdue{background:var(--red-soft);color:var(--red-fg);border-color:rgba(255,77,94,.2)}
.due-badge.overdue .icon{stroke:var(--red-fg)}
.type-chip{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:2px 7px;border-radius:6px;background:var(--violet-soft);color:var(--violet);white-space:nowrap}
.ref-code{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink-3);
  background:var(--surface-3);padding:2px 6px;border-radius:5px;white-space:nowrap;border:1px solid var(--line)}
.sub-prog{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;
  color:var(--blue);white-space:nowrap}
.sub-prog .icon{stroke:var(--blue)}
.sess-hours{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;
  color:var(--primary);white-space:nowrap}
.sess-hours .icon{stroke:var(--primary)}
.tag-chip{font-size:10.5px;font-weight:700;color:var(--blue);background:var(--blue-soft);
  padding:2px 7px;border-radius:999px;white-space:nowrap}
/* Attribute chips (dept template values: room/batch/equipment…) — filled soft
   chip with a mono value, visually distinct from the #tag outline chips. */
.attr-chip{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink-2);
  background:var(--primary-soft);border:1px solid var(--line-2);
  padding:2px 7px;border-radius:6px;white-space:nowrap}
.tag-filter{padding:7px 10px;border:1px solid var(--glass-border);border-radius:9px;
  background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--ink-2);font-family:var(--font)}

/* ── Work-session list rows ── */
.sess-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface-2);
  border:1px solid var(--glass-border);border-radius:9px;margin-bottom:6px;font-size:12.5px;color:var(--ink)}
.sess-class{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;white-space:nowrap}
.sess-class.regular{background:var(--green-soft);color:var(--primary)}
.sess-class.overtime{background:var(--orange-soft);color:var(--orange-700)}
.sess-class.night{background:var(--violet-soft);color:var(--violet)}
.sess-class.weekend{background:var(--red-soft);color:var(--red-fg)}

/* ── DEMO MODE banner (demo.js) — fixed strip; sits above the phone bottom nav ── */
#gf-demo-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:10px;
  padding:7px 14px calc(7px + env(safe-area-inset-bottom));font-size:12px;color:var(--ink);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-top:2px solid var(--orange);box-shadow:0 -8px 24px rgba(0,0,0,.35)}
#gf-demo-banner b{color:var(--orange);font-size:11px;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
#gf-demo-banner>span:not(.gfdb-dot){flex:1;min-width:0;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gf-demo-banner button{flex-shrink:0;border:1px solid var(--orange);background:var(--orange-soft);color:var(--orange-700);
  font-weight:800;font-size:11.5px;font-family:var(--font);padding:5px 12px;border-radius:999px;cursor:pointer}
#gf-demo-banner button:hover{background:var(--orange);color:#fff}
.gfdb-dot{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--orange);animation:gfdb-pulse 1.6s ease-in-out infinite}
@keyframes gfdb-pulse{0%,100%{box-shadow:0 0 0 0 var(--orange-soft)}50%{box-shadow:0 0 0 6px transparent}}
body.demo-on .main{padding-bottom:56px}
@media (max-width:600px){
  #gf-demo-banner{bottom:calc(64px + env(safe-area-inset-bottom));padding:6px 10px;font-size:11px}
  #gf-demo-banner>span:not(.gfdb-dot){white-space:normal;max-height:2.6em;line-height:1.3}
  body.demo-on .main{padding-bottom:112px}
}

/* ════════════ EXECUTIVE OVERVIEW (views.js: GF.views.exec) ════════════ */
/* "Active this week" caption in the week strip (labels the avatar cluster
   that used to be a mysterious circle of initials). */
.week-active{display:flex;align-items:center;gap:8px;cursor:pointer}
.week-active-lbl{font-size:10.5px;font-weight:700;letter-spacing:.3px;color:var(--ink-3);white-space:nowrap}
@media (max-width:600px){.week-active-lbl{display:none}}

/* North-star KPI tiles — the 10-second read */
.exec-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:14px 0}
.ekpi{background:var(--surface);border:1px solid var(--glass-border);border-radius:12px;padding:12px 12px 11px;
  min-width:0;display:flex;flex-direction:column;gap:2px}
.ekpi-v{font-size:26px;font-weight:800;line-height:1.05;letter-spacing:-.01em}
.ekpi-l{font-size:11px;font-weight:600;color:var(--ink-2)}
.ekpi-sub{font-size:10px;color:var(--ink-3);min-height:12px}
@media (max-width:900px){.exec-kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.exec-kpis{grid-template-columns:repeat(2,1fr)}.ekpi-v{font-size:22px}}

/* Two-column layout; collapses to one on narrow screens */
.exec-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
@media (max-width:900px){.exec-grid{grid-template-columns:1fr}}
.exec-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.exec-card{padding:14px 16px}
.exec-card-ttl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink);
  margin-bottom:12px}
.exec-card-ttl .icon{width:16px;height:16px}
.exec-chip{margin-left:auto;font-size:11px;font-weight:800;background:var(--surface-2);color:var(--ink-2);
  padding:1px 9px;border-radius:999px}
.exec-reset{margin-left:auto;font-size:11px;font-weight:700;color:var(--primary);background:var(--green-soft);
  border:1px solid var(--glass-border);border-radius:999px;padding:3px 10px;cursor:pointer;font-family:var(--font)}
.exec-reset:hover{filter:brightness(1.1)}

/* Department matrix rows with visibility toggle */
.exec-drow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--glass-border)}
.exec-drow:last-child{border-bottom:none}
.exec-drow.off{opacity:.42}
.exec-eye{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-border);border-radius:8px;background:var(--surface-2);cursor:pointer;color:var(--ink-3)}
.exec-eye:hover{color:var(--ink);border-color:var(--primary)}
.exec-eye .icon{width:16px;height:16px}
.exec-dname{flex:0 0 34%;min-width:0;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exec-dbar{flex:1;min-width:40px;height:8px;border-radius:999px;overflow:hidden;display:flex;background:var(--surface-3)}
.exec-dbar>span{display:block}
.exec-dstat{flex-shrink:0;width:38px;text-align:right;font-size:12px;font-weight:700;color:var(--ink-2)}
.exec-dcount{flex-shrink:0;width:26px;text-align:right;font-size:12px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* Batch-flow / dependency pipeline — scrolls horizontally instead of overflowing */
.exec-pipe{display:flex;align-items:stretch;gap:2px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.pipe-node{flex:0 0 auto;min-width:92px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 10px 9px;border:1px solid var(--glass-border);border-radius:11px;background:var(--surface-2)}
.pipe-node.ready{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green-soft)}
.pipe-node.bottleneck{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red-soft)}
.pipe-dept{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;letter-spacing:.3px}
.pipe-dept .icon{width:15px;height:15px}
.pipe-counts{display:flex;gap:4px}
.pipe-counts .pc{font-size:11px;font-weight:800;min-width:20px;text-align:center;padding:2px 5px;border-radius:6px;
  font-variant-numeric:tabular-nums}
.pc.done{background:var(--green-soft);color:var(--green-fg)}
.pc.wip{background:var(--orange-soft);color:var(--orange-700)}
.pc.stuck{background:var(--red-soft);color:var(--red-fg)}
.pipe-tag{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:1px 6px;border-radius:999px}
.pipe-tag.ready{background:var(--green-soft);color:var(--green-fg)}
.pipe-tag.stuck{background:var(--red-soft);color:var(--red-fg)}
.pipe-arrow{flex:0 0 auto;display:flex;align-items:center;color:var(--ink-3)}
.pipe-arrow .icon{width:18px;height:18px}
.pipe-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:10.5px;color:var(--ink-3)}
.pipe-legend span{display:flex;align-items:center;gap:5px}
.pipe-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.pipe-legend .pl.done{background:var(--green)}
.pipe-legend .pl.wip{background:var(--orange)}
.pipe-legend .pl.stuck{background:var(--red)}

/* Needs-attention risk zone */
.attn-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--glass-border);cursor:pointer}
.attn-row:last-child{border-bottom:none}
.attn-row:hover{background:var(--surface-2)}
.attn-body{flex:1;min-width:0}
.attn-title{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attn-sub{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.attn-tag{flex-shrink:0;font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.attn-tag.stuck{background:var(--red-soft);color:var(--red-fg)}
.attn-tag.overdue{background:var(--amber-soft);color:var(--amber-fg)}

/* AI executive brief panel */
.exec-brief{margin:0 0 14px;border:1px solid var(--glass-border);border-radius:12px;background:var(--surface);padding:14px 16px}
.exec-brief-load,.exec-brief-off{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.exec-brief-load .icon{width:16px;height:16px;color:var(--primary)}
.exec-brief-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--primary);margin-bottom:8px}
.exec-brief-head .icon{width:15px;height:15px}
.exec-brief-x{margin-left:auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;cursor:pointer;color:var(--ink-3)}
.exec-brief-x:hover{color:var(--ink)}
.exec-brief-x .icon{width:15px;height:15px}
.exec-brief-txt{font-size:13px;line-height:1.55;color:var(--ink);white-space:pre-wrap}

/* Executive role strips: Operations (COO lens) + Direction (CEO lens) */
.exec-strips{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:900px){.exec-strips{grid-template-columns:1fr}}
.exec-strip{min-width:0}
.strip-kpis{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.skpi{display:flex;flex-direction:column;gap:2px;min-width:90px}
.skpi .v{font-size:22px;font-weight:800;line-height:1.05}
.skpi .l{font-size:10.5px;color:var(--ink-3);font-weight:600}
.wow{font-size:10px;font-weight:800;padding:1px 6px;border-radius:999px;margin-left:4px}
.wow.up{color:var(--green);background:var(--green-soft)}
.wow.down{color:var(--red);background:var(--red-soft)}
.spark-wrap{flex:1;min-width:180px}
.spark{width:100%;max-width:260px;height:auto;display:block}
.spark-lbl{font-size:9.5px;color:var(--ink-3);margin-top:2px}
.strip-sub{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-3);margin:6px 0 2px}
.ops-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--glass-border);font-size:12.5px}
.ops-row:last-child{border-bottom:none}
.ops-name{font-weight:600;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-tag{flex-shrink:0;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px}
.ops-tag.stuck{background:var(--red-soft);color:var(--red-fg)}
.ops-tag.overdue{background:var(--amber-soft);color:var(--amber-fg)}

/* ── Card tree rows (render.treeRows): theme → document → version ──
   Children are indented compact rows under the parent card, tied to it by a
   left rail; deliberately quieter than full cards (secondary information). */
.tree-toggle{display:inline-flex;align-items:center;gap:3px;cursor:pointer;user-select:none;
  border-radius:6px;padding:1px 5px 1px 2px;transition:background .12s}
.tree-toggle:hover{background:var(--primary-soft)}
.tree-toggle.open{color:var(--primary)}
.tree-toggle .icon{width:13px;height:13px}
.tree-count{font-size:10.5px;font-weight:700}
.tree-rows{border-left:2px solid var(--line);margin:2px 0 6px 26px;padding-left:10px;
  display:flex;flex-direction:column;gap:4px}
.tree-rows .tree-rows{margin-left:14px}
.tree-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;cursor:pointer;
  font-size:12.5px;min-width:0;transition:background .12s}
.tree-row:hover{background:var(--surface-2)}
.tree-dot{width:8px;height:8px;border-radius:999px;flex-shrink:0;background:var(--ink-4)}
.tree-dot.s-done{background:var(--green)}.tree-dot.s-working{background:var(--orange)}
.tree-dot.s-review{background:var(--blue)}.tree-dot.s-stuck{background:var(--red)}
.tree-dot.s-postponed{background:var(--amber)}
.tree-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink-2);font-weight:600}
.tree-row:hover .tree-title{color:var(--ink)}
.tree-range{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.tree-row .pill{font-size:9.5px;padding:2px 7px}
.tree-edit,.tree-add{opacity:0;transition:opacity .12s}
.tree-row:hover .tree-edit,.tree-row:hover .tree-add{opacity:1}
@media (max-width:760px){.tree-range{display:none}.tree-edit,.tree-add{opacity:1}}

/* ── Popup chooser (chooser.js) — replaces native <select> app-wide ────── */
.sel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--glass-border);border-radius:9px;padding:10px 12px;font-size:14px;
  background:var(--surface-2);color:var(--ink);cursor:pointer;text-align:left;font-family:inherit;
  transition:transform 160ms cubic-bezier(0.23, 1, 0.32, 1)}
.sel-btn:active{transform:scale(.97)}
.sel-btn:focus{outline:none;border-color:rgba(var(--accent-rgb),.4);box-shadow:0 0 0 3px var(--primary-soft)}
.sel-btn:disabled{opacity:.55;cursor:not-allowed}
.sel-btn .sel-cur{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-caret{flex:none;opacity:.6}
.sel-modal{max-width:420px}
.sel-search{width:100%;border:1px solid var(--glass-border);border-radius:9px;padding:9px 12px;
  font-size:14px;background:var(--surface-2);color:var(--ink);outline:none;margin-bottom:10px}
.sel-search:focus{border-color:rgba(var(--accent-rgb),.4);box-shadow:0 0 0 3px var(--primary-soft)}
.sel-list{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow-y:auto}
.sel-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;
  border-radius:8px;background:none;color:var(--ink);font-size:14px;font-family:inherit;
  cursor:pointer;text-align:left;min-height:42px;
  transition:transform 160ms cubic-bezier(0.23, 1, 0.32, 1)}
.sel-row:hover,.sel-row.hover{background:var(--primary-soft)}
.sel-row:active{transform:scale(.97)}
.sel-row.on{background:var(--primary-soft);font-weight:600}
.sel-dot{width:10px;height:10px;border-radius:50%;flex:none}
.sel-lbl{flex:1;display:flex;flex-direction:column;overflow:hidden}
.sel-sub{font-size:11.5px;color:var(--ink-3);font-weight:400}
.sel-ck{flex:none;color:var(--primary)}
.sel-empty{padding:18px;text-align:center;color:var(--ink-3);font-size:13px}

/* ── Add-modal department-fields well (mockup af-modal .af-block) ──────── */
.af-block{border:1px solid var(--glass-border);border-radius:10px;padding:12px;margin-bottom:12px;
  background:color-mix(in srgb, var(--dept-acc, var(--primary)) 7%, var(--surface-2))}
.af-block-hd{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3);margin-bottom:10px}
.af-block-hd .dot{width:8px;height:8px;border-radius:50%;background:var(--dept-acc, var(--primary));flex:none}
.af-prev{margin-top:12px}
.af-prev-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:6px}
.af-prev-card{border:1px solid var(--glass-border);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
.af-prev-title{font-size:14px;font-weight:600;margin-bottom:6px}
.af-prev-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--ink-3)}
.sel-btn.sel-inline{width:auto;padding:7px 10px;font-size:13px}

/* ── Inbox / activity feed (notifications-view.js) ─────────────────────── */
.ntf-bar{display:flex;align-items:center;gap:8px;margin:6px 4px 10px}
.ntf-list{display:flex;flex-direction:column;gap:6px;max-width:860px}
.ntf-list-enter{animation:ntfListIn 180ms cubic-bezier(0.23, 1, 0.32, 1) forwards}
.ntf-day{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:10px 4px 2px}
.ntf{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--glass-border);
  border-left:3px solid var(--primary);border-radius:10px;background:var(--surface-2);cursor:pointer}
.ntf.unread{background:var(--primary-soft)}
.ntf.unread .ntf-tt::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--primary);margin-right:7px;box-shadow:0 0 8px var(--primary)}
.ntf-feed{cursor:default;border-left-color:var(--glass-border)}
.ntf-b{flex:1;min-width:0}
.ntf-tt{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.ntf-meta{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--ink-3);margin-top:2px}
.ntf-reason{border:1px solid var(--glass-border);border-radius:99px;padding:1px 8px}
.ntf-done{flex:none}
.ntf-empty{padding:40px;text-align:center;color:var(--ink-3)}

/* ── Completion progress (tasks.progress) ─────────────────────────────────
   ring-mini: parent card ring = sub-tasks done fraction (conic, --p 0..100,
   --col dept colour). tree-prog: per-subtask completion bar in tree rows.
   pl-*: the worklog modal's completion control (quick-set + slider), from
   the Mass Weed mockup's log-progress panel. Token-based → all themes. */
.ring-mini{--p:0;--col:var(--primary);width:15px;height:15px;border-radius:50%;flex:none;
  display:inline-block;vertical-align:-3px;position:relative;
  background:conic-gradient(var(--col) calc(var(--p)*1%), var(--surface-3) 0)}
.ring-mini::before{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--surface)}
.subdone-hint{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;cursor:pointer;
  font:600 11px var(--font);color:var(--green-fg,var(--green));background:var(--green-soft);
  border:1px solid var(--green);border-radius:11px;white-space:nowrap}
.subdone-hint:hover{filter:brightness(1.15)}
.tree-prog{display:inline-flex;align-items:center;gap:6px;flex:none}
.tp-track{width:52px;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-2)}
.tp-fill{display:block;width:100%;height:100%;border-radius:3px;transform-origin:left center;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.tp-fill.hi{background:var(--green)}
.tp-fill.mid{background:var(--amber)}
.tp-fill.lo{background:var(--red)}
.tp-val{font:600 11px var(--mono);color:var(--ink-2);min-width:32px}
.pl-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:2px 0 10px}
.pl-q{font:600 11px var(--font);letter-spacing:.05em;color:var(--ink-2);cursor:pointer;
  background:var(--surface-2);border:none;box-shadow:inset 0 0 0 1px var(--line);
  padding:7px 0;border-radius:var(--r-sm,4px)}
.pl-q:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--border-strong)}
.pl-q.on{color:var(--text-on-primary);font-weight:700;background:var(--primary);
  box-shadow:0 0 12px -2px var(--primary)}
.pl-range{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:3px;
  background:var(--surface-3);outline:none;margin:4px 0 8px;cursor:pointer}
.pl-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 8px var(--primary-soft),0 0 0 1px var(--border-strong);cursor:pointer}
.pl-range::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;
  background:var(--primary);box-shadow:0 0 8px var(--primary-soft);cursor:pointer}
.pl-val{font:700 13px var(--mono);color:var(--ink);min-width:44px;text-align:right}

/* ── Lifecycle stepper (mockup .mw-stepper): Compile → Review → Lock on the
   document panel. Token-based → all themes; mass-weed adds the glow. */
.mw-stepper{display:inline-flex;align-items:center;flex-wrap:wrap;row-gap:4px}
.mw-step{display:inline-flex;align-items:center;gap:7px}
.mw-step__n{width:24px;height:24px;flex:none;display:grid;place-items:center;
  font:700 12px var(--mono);border-radius:50%;color:var(--ink-3);
  border:1.5px solid var(--line);background:var(--surface-2)}
.mw-step__l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.mw-step.done .mw-step__n{color:var(--green);border-color:var(--green)}
.mw-step.done .mw-step__l{color:var(--ink-2)}
.mw-step.active .mw-step__n{color:var(--text-on-primary);background:var(--primary);border-color:var(--primary)}
.mw-step.active .mw-step__l{color:var(--primary);font-weight:700}
.mw-step__bar{width:26px;height:2px;margin:0 8px;background:var(--line);flex:none}
.mw-step__bar.done{background:var(--green)}

/* ── Activity feed timeline (mockup .mw-feed): rail + status dot per event,
   with a connecting line between events in the same day group. */
.ntf-rail{position:relative;flex:none;width:10px;display:flex;justify-content:center}
.ntf-fdot{width:9px;height:9px;border-radius:50%;background:var(--primary);margin-top:5px;z-index:1;flex:none}
.ntf-fdot.ok{background:var(--green)}
.ntf-fdot.warn{background:var(--amber)}
.ntf-feed{display:flex;gap:11px}
.ntf-feed + .ntf-feed .ntf-rail::before{content:"";position:absolute;top:-14px;height:16px;width:1px;background:var(--line)}

/* ── Pass-3 library components (owner's ui-elements.html + nav.js rail) ──── */
/* nav rail group labels (mockup grouped rail: Operations / Management / System) */
.nav-group{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-4);padding:12px 14px 4px}
.nav-group:first-child{padding-top:2px}

/* .mw-gauge — semicircular completion gauge (dashboard). Arc gradient and
   needle rotation are inline (value-dependent); geometry lives here. */
.mw-gauge{position:relative;width:140px;height:78px;overflow:hidden;margin:4px auto 12px}
.mw-gauge__arc{position:absolute;top:0;left:0;width:140px;height:140px;border-radius:50%}
.mw-gauge__arc::after{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--surface)}
.mw-gauge__needle{position:absolute;bottom:0;left:50%;width:2px;height:58px;background:var(--ink-2);
  transform-origin:bottom center;transition:transform .5s var(--ease-out);z-index:2}
.mw-gauge__val{position:absolute;bottom:2px;left:0;right:0;text-align:center;
  font:700 17px var(--mono);color:var(--ink);z-index:3}

/* .mw-pager — cursor-pagination controls (audit load-more, inbox load-older) */
.mw-pager{display:inline-flex;gap:5px}
.mw-pager button{min-width:32px;height:32px;padding:0 14px;font:600 13px var(--font);
  color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);cursor:pointer;
  border-radius:var(--r-sm,4px);transition:color .14s ease,border-color .14s ease,opacity .14s ease}
.mw-pager button:hover{color:var(--primary);border-color:var(--border-strong)}
.mw-pager button:disabled{opacity:.35;cursor:not-allowed}

/* .mw-crumbs — breadcrumb trail (subtask worklog: parent › child) */
.mw-crumbs{display:flex;align-items:center;gap:8px;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.07em;min-width:0}
.mw-crumbs a{color:var(--ink-3);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-crumbs a:hover{color:var(--primary)}
.mw-crumbs .sep{color:var(--ink-4);flex:none}
.mw-crumbs .cur{color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* .mw-spinner — loading indicator replacing bare "Loading…" text */
@keyframes mwSpin{to{transform:rotate(360deg)}}
.mw-spinner{width:28px;height:28px;flex:none;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--primary);animation:mwSpin .8s linear infinite}
.mw-spinner--sm{width:16px;height:16px;border-width:2px}
.wl-loading{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-3);padding:6px 0}

/* .mw-skel — shimmer placeholder rows (inbox first load) */
@keyframes mwShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.mw-skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:mwShimmer 1.4s ease-in-out infinite;border-radius:var(--r-md,6px)}

/* .mw-progress--striped — animated stripes on ACTIVE work: completion bars
   of tasks currently "Working on it" signal live effort. */
@keyframes mwStripe{to{background-position:24px 0}}
.tree-row.s-working .tp-fill,
.card.s-working .card-actions .track > span{
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.16) 6px,transparent 6px,transparent 12px);
  animation:mwStripe 1s linear infinite}

@media (prefers-reduced-motion: reduce){
  .mw-spinner{animation-duration:1.6s}
  .mw-skel{animation:none}
  .tree-row.s-working .tp-fill,.card.s-working .card-actions .track > span{animation:none}
  .card--just-completed{animation-name:cardCompleteReduced}
  .card{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .card:hover{transform:none}
  .modal{transform:none;transition:none}
  .toast{animation:expandIn .3s ease}
  .spinner{animation-duration:1.2s}
  .ntf-list-enter{animation-name:ntfListInReduced}
}

/* ── Facility board (owner's facility.html): room cells + strain rows ───── */
.fac-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.fac-room{display:flex;flex-direction:column;min-height:120px;padding:12px 14px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  transition:border-color .16s ease,box-shadow .16s ease}
.fac-room:hover{border-color:var(--border-strong);box-shadow:var(--sh-1)}
.fac-room-hd{display:flex;align-items:baseline;gap:8px}
.fr-nm{font-weight:800;font-size:14px;color:var(--ink);flex:1;min-width:0}
.fr-kind{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);border:1px solid var(--line);border-radius:99px;padding:1px 8px;white-space:nowrap}
.fr-big{display:flex;align-items:baseline;gap:6px;margin:8px 0 6px}
.fr-n{font:800 26px var(--mono);line-height:1;color:var(--ink)}
.fr-u{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-4)}
.fac-strains{display:flex;flex-direction:column;gap:3px;margin-top:auto}
.fac-strain{display:flex;align-items:center;gap:7px;font-size:12px;min-width:0}
.fs-dot{width:8px;height:8px;border-radius:50%;flex:none}
.fs-nm{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-n{font:700 12px var(--mono);color:var(--ink)}
.fs-ph{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  margin-left:auto;white-space:nowrap}
.fr-empty{font-size:12px;color:var(--ink-4);font-style:italic}

/* ── Approvals + My Day rows ─────────────────────────────────────────────── */
.apv-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);cursor:pointer}
.apv-row:last-child{border-bottom:none}
.apv-b{flex:1;min-width:0}
.apv-t{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apv-sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.md-task{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.md-task:last-child{border-bottom:none}
.md-task.is-done .md-t{text-decoration:line-through;color:var(--ink-3)}
.md-b{flex:1;min-width:0;cursor:pointer}
.md-t{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-m{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.md-due{display:inline-flex;align-items:center;gap:4px}
.md-due.overdue{color:var(--red-fg,var(--red));font-weight:700}

/* ── Add-modal as the design's sectioned create sheet (task-create-*.html):
   labelled .af-sec groups with a dept-tinted rule, two-up .af-cols rows, and a
   wider sheet. --dept-acc is set on the modal by GF._addAccent, so every
   section header tints to the selected department. ── */
#add-modal .modal { max-width: 760px; }
.af-sec { margin-bottom: 18px; }
.af-sec:last-child { margin-bottom: 0; }
.af-sec__t {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3);
  border-left: 2px solid var(--dept-acc, var(--primary)); padding-left: 9px;
}
.af-sec__side { margin-left: auto; font-size: 10px; letter-spacing: .05em; color: var(--ink-4); text-transform: none; }
/* the design's section rule: a gradient hairline sweeping right off the title */
.af-sec__t::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .25), transparent); }
.af-sec__t .af-sec__side + ::after { display: none; }
.af-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.af-cols > .af-sec { margin-bottom: 18px; }
@media (max-width: 560px) { .af-cols { grid-template-columns: 1fr; gap: 0; } }

/* ── task-create page chrome (design task-create-qc.html): breadcrumb +
   department hero above the form. Rendered only on the full-screen create;
   --dept-acc arrives inline from openAdd's heroFor. ── */
.af-crumb { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); margin-bottom: 14px; }
.af-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.af-hero__ic {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  color: var(--dept-acc, var(--primary));
  background: color-mix(in srgb, var(--dept-acc, var(--primary)) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dept-acc, var(--primary)) 40%, transparent);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.af-hero__ic .icon { width: 24px; height: 24px; }
.af-hero h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: .02em; text-transform: uppercase; }
.af-hero__sub { font-size: 12px; color: var(--ink-4); margin-top: 4px; }

/* the design's avatar-first assignee picker (.avs/.avw): the avatar is the
   control, ringed when picked; the first name is a caption underneath */
.af-avs { gap: 12px; }
.af-avs .chip-opt.who {
  flex-direction: column; gap: 4px; padding: 4px 6px;
  background: none; border: none; box-shadow: none; opacity: .5;
  transition: opacity .15s ease;
}
.af-avs .chip-opt.who:hover { opacity: .85; }
.af-avs .chip-opt.who.on { opacity: 1; background: none; }
.af-avs .chip-opt.who.on .avatar { box-shadow: 0 0 0 2px var(--primary), 0 0 12px -2px var(--primary); }
.af-avs .chip-opt.who .nm { font-size: 10px; color: var(--ink-3); letter-spacing: .03em; }
.af-avs .chip-opt.who.on .nm { color: var(--ink); }

/* description + the design's ghost action row */
.af-desc { resize: vertical; min-height: 64px; font-family: var(--font); line-height: 1.5; }
.af-ghost { display: flex; gap: 16px; padding: 6px 2px; font-size: 11.5px; color: var(--ink-3); flex-wrap: wrap; }
.af-ghost span { cursor: pointer; }
.af-ghost span:hover { color: var(--primary); }
.af-ghost .ai {
  color: var(--purple, #9B7BE8); padding: 1px 6px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple, #9B7BE8) 45%, transparent);
  clip-path: polygon(3px 0, 100% 0, 100% 100%, 0 100%, 0 3px); cursor: default;
}

/* ── New-task full-screen create SCREEN (.overlay.as-screen): a brand-new
   top-level task is a standalone page, not a floating popup — set by openAdd,
   matching the design's task-create-*.html standalone layout. The same
   #add-modal DOM is reused, so all submit/edit wiring and the e2e are
   unchanged; only the framing differs. Edit/subtask keep the compact popup. ── */
.overlay.as-screen {
  background: var(--bg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  align-items: stretch; justify-content: center;
  padding: 0; overflow-y: auto;
  transition: none;
}
.overlay.as-screen .modal {
  width: 100%; max-width: 920px;
  height: auto; min-height: 100vh; max-height: none;
  border-radius: 0; border: none;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  box-shadow: none; transform: none; transition: none;
  display: flex; flex-direction: column;
}
.overlay.as-screen .modal-head {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg); padding: 20px 30px;
}
.overlay.as-screen .modal-head h3 { font-size: 22px; letter-spacing: .01em; }
/* the create SCREEN's headline is the department hero in the body (design
   task-create-qc.html has no separate title bar) — the head keeps only the X */
#add-modal.as-screen .modal-head { padding-top: 12px; padding-bottom: 0; }
#add-modal.as-screen .modal-head h3 { visibility: hidden; }
.overlay.as-screen .modal-body { flex: 1; padding: 22px 30px 40px; }
.overlay.as-screen .modal-foot {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--bg); padding: 16px 30px;
}
@media (max-width: 640px) {
  .overlay.as-screen .modal { border-left: none; border-right: none; }
  .overlay.as-screen .modal-head, .overlay.as-screen .modal-body, .overlay.as-screen .modal-foot { padding-left: 16px; padding-right: 16px; }
}

/* ── Task Detail SCREEN (#td-modal / .td-wrap) — the Mass Weed design's
   full-page task view (design/mass-weed-mockup/task-detail{,-qc}.html). All
   page-level rules are scoped under #td-modal / .td-wrap so the design's
   generic class names (.pill/.field/.sec/.act/.att/.cmt) never collide with
   the app's card chrome. The QC phase stepper uses its OWN .td-stepper class
   so it does not re-base app.css's older numbered .mw-stepper (doc lifecycle).
   Rendered by web/gf/task-detail-view.js (GF.WWF.openTaskDetail). ── */
#td-modal .modal { max-width: 1180px; }
.td-head { display: flex; align-items: center; gap: 14px; }
.td-head .td-crumb { flex: 1; min-width: 0; margin: 0; }
.td-head__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.td-crumb { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--mw-text-faint); flex-wrap: wrap; }
.td-crumb a { color: var(--mw-cyan-dim); text-decoration: none; }
.td-crumb a:hover { color: var(--mw-cyan-bright); }

.td-wrap { max-width: 1120px; margin: 0 auto; }
.td-wrap .refrow { display: flex; gap: 8px; flex-wrap: wrap; margin: -2px 0 16px; }
.td-wrap .thead { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.td-wrap .thead .chk { width: 24px; height: 24px; flex: none; margin-top: 4px; border: 1.5px solid var(--mw-cyan-dim); border-radius: 4px; cursor: pointer; position: relative; transition: border-color .12s ease, background .12s ease; }
.td-wrap .thead .chk:hover { border-color: var(--mw-cyan); }
.td-wrap .thead .chk.done { background: var(--mw-acc, var(--mw-cyan)); border-color: var(--mw-acc, var(--mw-cyan)); }
.td-wrap .thead .chk.done::after { content: ""; position: absolute; left: 8px; top: 2px; width: 6px; height: 13px; border: solid var(--mw-void); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.td-wrap .thead h1 { font-family: var(--mw-font-cond), sans-serif; font-size: 24px; font-weight: 700; color: var(--mw-ink); margin: 0; letter-spacing: .01em; line-height: 1.2; }
.td-wrap .thead .meta { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.td-wrap .pill { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; padding: 3px 9px; border-radius: 2px; }
.td-wrap .td-due { font-size: 11px; color: var(--mw-text-faint); letter-spacing: .06em; }

.td-wrap .cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.td-wrap .sec { margin-bottom: 22px; }
.td-wrap .sec__t { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--mw-text-faint); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-wrap .sec__t .side { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--mw-text-faint); }
.td-wrap .desc { font-size: 13.5px; line-height: 1.65; color: var(--mw-text); }
.td-wrap .subbar { margin-top: 2px; margin-bottom: 12px; }

.td-wrap .cmt { display: flex; gap: 11px; padding: 11px 0; }
.td-wrap .cmt .av { width: 30px; height: 30px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--mw-cyan-dim), rgba(16,48,80,.8)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--mw-void); font-family: var(--mw-font-cond), sans-serif; }
.td-wrap .cmt .bd { flex: 1; min-width: 0; }
.td-wrap .cmt .hd { display: flex; gap: 8px; align-items: baseline; }
.td-wrap .cmt .nm { font-size: 13px; font-weight: 600; color: var(--mw-ink); }
.td-wrap .cmt .ts { font-size: 10px; color: var(--mw-text-faint); letter-spacing: .06em; }
.td-wrap .cmt .tx { font-size: 13px; color: var(--mw-text); line-height: 1.55; margin-top: 3px; }
.td-wrap .cbox { display: flex; gap: 10px; margin-top: 12px; }
.td-wrap .cbox input { flex: 1; min-width: 0; background: rgba(6,20,40,.5); border: none; box-shadow: inset 0 0 0 1px rgba(94,200,240,.2); color: var(--mw-ink); padding: 10px 12px; font-family: var(--mw-font, 'Saira'); font-size: 13px; outline: none; clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px); }
.td-wrap .cbox input:focus { box-shadow: inset 0 0 0 1px var(--mw-cyan); }

.td-wrap .field { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(58,159,212,.1); }
.td-wrap .field:last-child { border: none; }
.td-wrap .field .fl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--mw-text-faint); flex: none; padding-top: 2px; }
.td-wrap .field .fv { font-size: 13px; color: var(--mw-text); font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.td-wrap .av-sm { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--mw-void); font-family: var(--mw-font-cond), sans-serif; flex: none; }
.td-wrap .link { color: var(--mw-cyan-bright); text-decoration: none; }
.td-wrap .link:hover { text-decoration: underline; }

.td-wrap .att { display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-bottom: 8px; background: rgba(6,20,40,.45); clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px); cursor: pointer; text-decoration: none; }
.td-wrap .att:hover { box-shadow: inset 0 0 0 1px rgba(94,200,240,.35); }
.td-wrap .att .icon { width: 16px; height: 16px; color: var(--mw-cyan); flex: none; }
.td-wrap .att .an { font-size: 12.5px; color: var(--mw-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-wrap .att .as { margin-left: auto; font-size: 10px; color: var(--mw-text-faint); flex: none; text-transform: uppercase; letter-spacing: .06em; }

.td-wrap .act { display: flex; gap: 11px; padding: 8px 0; }
.td-wrap .act .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mw-acc, var(--mw-cyan-dim)); flex: none; margin-top: 4px; box-shadow: 0 0 6px currentColor; }
.td-wrap .act .tx { font-size: 12px; color: var(--mw-text-dim); line-height: 1.5; }
.td-wrap .act .tx b { color: var(--mw-text); font-weight: 600; }
.td-wrap .act .ts { font-size: 10px; color: var(--mw-text-faint); letter-spacing: .06em; margin-top: 2px; }

/* progress logger (right rail) */
.td-wrap .pl-k { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--mw-text-faint); }
.td-wrap .pl-v { font-family: var(--mw-font-cond), monospace; font-size: 13px; color: var(--mw-cyan-bright); letter-spacing: .03em; }
.td-wrap .pl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.td-wrap .pl-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 8px; }
.td-wrap .pl-stat2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0 0 14px; }
.td-wrap .pl-stat button, .td-wrap .pl-stat2 button { font-family: var(--mw-font-cond), sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 8px 3px; background: rgba(6,20,40,.5); color: var(--mw-text-faint); border: none; box-shadow: inset 0 0 0 1px rgba(94,200,240,.15); cursor: pointer; clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px); transition: color .12s, background .12s, box-shadow .12s; }
.td-wrap .pl-stat button:hover, .td-wrap .pl-stat2 button:hover { color: var(--mw-text); box-shadow: inset 0 0 0 1px rgba(94,200,240,.4); }
.td-wrap .pl-stat button.on, .td-wrap .pl-stat2 button.on { color: var(--mw-void); font-weight: 700; background: var(--st, var(--mw-cyan)); box-shadow: 0 0 12px -2px var(--st, var(--mw-cyan)); }
.td-wrap .pl-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--mw-stat-track); border-radius: 3px; outline: none; margin: 2px 0 8px; }
.td-wrap .pl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--mw-cyan-bright); box-shadow: 0 0 8px var(--mw-cyan); cursor: pointer; }
.td-wrap .pl-range::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--mw-cyan-bright); box-shadow: 0 0 8px var(--mw-cyan); cursor: pointer; }
.td-wrap .pl-range:disabled { opacity: .5; cursor: not-allowed; }
.td-wrap .pl-log { font-family: var(--mw-font-cond), sans-serif; font-size: 11px; padding: 8px 9px; background: rgba(6,20,40,.5); color: var(--mw-cyan-bright); border: none; box-shadow: inset 0 0 0 1px rgba(94,200,240,.25); cursor: pointer; clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.td-wrap .pl-log:hover { box-shadow: inset 0 0 0 1px var(--mw-cyan); }
.td-wrap .pl-log .icon { width: 14px; height: 14px; }
.td-wrap .sess { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid rgba(58,159,212,.08); font-size: 12px; }
.td-wrap .sess:last-of-type { border-bottom: none; }
.td-wrap .sess .d { font-family: 'Saira Condensed', monospace; color: var(--mw-text-dim); flex: none; width: 44px; }
.td-wrap .sess .h { font-family: var(--mw-font-cond), monospace; color: var(--mw-cyan-bright); flex: none; }
.td-wrap .sess .n { color: var(--mw-text-faint); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* QC lab-lifecycle phase stepper — the NEWER 5-across boxed stepper, scoped so
   it does not touch the app's numbered .mw-stepper (verbatim design lines
   926-936 of the mockup mass-weed.css, namespaced under .td-stepper). */
.td-stepper { display: flex; align-items: stretch; gap: 6px; }
.td-stepper .mw-step { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; background: var(--mw-panel-in); box-shadow: inset 0 0 0 1px rgba(94,200,240,.12); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); cursor: pointer; align-items: flex-start; }
.td-stepper .mw-step__n { width: auto; height: auto; border: none; background: none; place-items: initial; font-family: var(--mw-font-cond); font-size: 11px; color: var(--mw-text-faint); }
.td-stepper .mw-step__t { font-size: 11px; font-weight: 700; color: var(--mw-text-dim); letter-spacing: .01em; line-height: 1.25; }
.td-stepper .mw-step.done { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mw-stat-hi) 45%, transparent); }
.td-stepper .mw-step.done .mw-step__n { color: var(--mw-stat-hi); }
.td-stepper .mw-step.done .mw-step__t { color: var(--mw-stat-hi); }
.td-stepper .mw-step.current { background: color-mix(in srgb, var(--mw-acc, var(--mw-cyan)) 16%, var(--mw-panel-in)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mw-acc, var(--mw-cyan)) 55%, transparent), 0 0 14px -4px var(--mw-acc, var(--mw-cyan)); }
.td-stepper .mw-step.current .mw-step__n, .td-stepper .mw-step.current .mw-step__t { color: var(--mw-acc, var(--mw-cyan)); }

@media (max-width: 880px) {
  .td-wrap .cols { grid-template-columns: 1fr; }
  .td-stepper { flex-wrap: wrap; }
  .td-stepper .mw-step { flex: 1 1 40%; }
}