/*
  BossLife — extracted stylesheet
  Refactor phase 1: CSS is no longer embedded in index.html.
  Next phase: split this by design tokens, layout, components, and feature views.
*/
:root{--bg:#07111D;--bg2:#0B1628;--surface:#101D31;--surface2:#16253D;--surface3:#1E3457;--border:rgba(212,175,55,0.12);--border2:rgba(212,175,55,0.20);--text:#F5F3EC;--text2:#C8CFDA;--text3:#8E97AA;--accent:#173C74;--adim:rgba(23,60,116,0.20);--aglow:rgba(212,175,55,0.24);--green:#4DD6A4;--gdim:rgba(77,214,164,0.12);--amber:#D4AF37;--adim2:rgba(212,175,55,0.12);--red:#F27E7E;--rdim:rgba(242,126,126,0.12);--purple:#6E8DC6;--pdim:rgba(110,141,198,0.12);--r:10px;--rsm:6px;--rlg:14px;--mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--topbar-h:56px;--app-vh:100vh;--app-offset:0px;--app-safe-bottom:env(safe-area-inset-bottom,0px);--app-safe-left:env(safe-area-inset-left,0px);--app-safe-right:env(safe-area-inset-right,0px);}
@supports (height: 100dvh){:root{--app-vh:100dvh;}}
/* THEME PALETTES (Build 0694) — light-mode only; dark stays the :root default.
   Default light (no theme-* class) = Cool Slate. The My Account picker sets
   body.theme-<slug>. Each theme overrides the full token set. --amber is the
   READABLE (dark) gold used for text; the bright brand gold lives in --aglow. */
body.light-theme{--bg:#F1F5F9;--bg2:#FFFFFF;--surface:#FFFFFF;--surface2:#F1F5F9;--surface3:#E2E8F0;--border:rgba(15,35,71,0.12);--border2:rgba(15,35,71,0.22);--text:#0F2347;--text2:#334155;--text3:#5A697E;--accent:#1E3A5F;--adim:rgba(30,58,95,0.08);--aglow:rgba(201,169,97,0.26);--green:#0B7C56;--gdim:rgba(14,159,110,0.11);--amber:#946219;--adim2:rgba(183,121,31,0.13);--red:#C0392B;--rdim:rgba(192,57,43,0.11);--purple:#3B5BA5;--pdim:rgba(59,91,165,0.11);}
body.light-theme.theme-slate{--bg:#F1F5F9;--bg2:#FFFFFF;--surface:#FFFFFF;--surface2:#F1F5F9;--surface3:#E2E8F0;--border:rgba(15,35,71,0.12);--border2:rgba(15,35,71,0.22);--text:#0F2347;--text2:#334155;--text3:#5A697E;--accent:#1E3A5F;--adim:rgba(30,58,95,0.08);--aglow:rgba(201,169,97,0.26);--green:#0B7C56;--gdim:rgba(14,159,110,0.11);--amber:#946219;--adim2:rgba(183,121,31,0.13);--red:#C0392B;--rdim:rgba(192,57,43,0.11);--purple:#3B5BA5;--pdim:rgba(59,91,165,0.11);}
body.light-theme.theme-cream{--bg:#F7F4EC;--bg2:#FFFFFF;--surface:#FFFFFF;--surface2:#F3F0E7;--surface3:#E7DEC8;--border:rgba(11,42,89,0.12);--border2:rgba(11,42,89,0.22);--text:#0B1E3D;--text2:#334865;--text3:#556276;--accent:#0B2A59;--adim:rgba(11,42,89,0.08);--aglow:rgba(154,116,20,0.28);--green:#146C4D;--gdim:rgba(20,108,77,0.11);--amber:#8A6208;--adim2:rgba(138,98,8,0.13);--red:#A93434;--rdim:rgba(169,52,52,0.11);--purple:#294C82;--pdim:rgba(41,76,130,0.11);}
body.light-theme.theme-ivory{--bg:#FBF7EE;--bg2:#FFFFFF;--surface:#FFFFFF;--surface2:#F6F0E2;--surface3:#EBE0CB;--border:rgba(20,49,95,0.12);--border2:rgba(20,49,95,0.22);--text:#14233E;--text2:#3A4763;--text3:#5D6476;--accent:#14315F;--adim:rgba(20,49,95,0.08);--aglow:rgba(201,169,97,0.30);--green:#0F7A57;--gdim:rgba(15,122,87,0.11);--amber:#886510;--adim2:rgba(149,111,18,0.14);--red:#A93434;--rdim:rgba(169,52,52,0.11);--purple:#2E4E86;--pdim:rgba(46,78,134,0.11);}
body.light-theme.theme-bluegray{--bg:#EEF2F7;--bg2:#FFFFFF;--surface:#FFFFFF;--surface2:#EDF1F6;--surface3:#DCE3EC;--border:rgba(27,47,82,0.12);--border2:rgba(27,47,82,0.22);--text:#16233E;--text2:#34425C;--text3:#59667A;--accent:#1B2F52;--adim:rgba(27,47,82,0.08);--aglow:rgba(201,169,97,0.24);--green:#0C7C5C;--gdim:rgba(15,157,116,0.11);--amber:#856816;--adim2:rgba(156,122,26,0.13);--red:#C0392B;--rdim:rgba(192,57,43,0.11);--purple:#3A5BA0;--pdim:rgba(58,91,160,0.11);}
body.light-theme.theme-warmivory{--bg:#FAF6EC;--bg2:#FFFEFB;--surface:#FFFEFB;--surface2:#F4EEDD;--surface3:#E9DCC2;--border:rgba(19,41,75,0.12);--border2:rgba(19,41,75,0.22);--text:#1A2438;--text2:#3D4763;--text3:#5B6271;--accent:#13294B;--adim:rgba(19,41,75,0.08);--aglow:rgba(184,134,11,0.30);--green:#2D7A31;--gdim:rgba(46,125,50,0.11);--amber:#826811;--adim2:rgba(135,108,18,0.14);--red:#A93434;--rdim:rgba(169,52,52,0.11);--purple:#2E4E86;--pdim:rgba(46,78,134,0.11);}
body.light-theme.theme-bold{--bg:#FFFFFF;--bg2:#FFFFFF;--surface:#FFFFFF;--surface2:#F4F6FA;--surface3:#E6EAF1;--border:rgba(10,27,58,0.16);--border2:rgba(10,27,58,0.28);--text:#0A1B3A;--text2:#2B3A57;--text3:#5A6983;--accent:#0A1B3A;--adim:rgba(10,27,58,0.08);--aglow:rgba(184,134,11,0.26);--green:#0F6E56;--gdim:rgba(15,110,86,0.11);--amber:#8A6208;--adim2:rgba(138,98,8,0.13);--red:#9A2A2A;--rdim:rgba(154,42,42,0.11);--purple:#294C82;--pdim:rgba(41,76,130,0.11);}
/* THEME PALETTES - DARK LAYER (Build 0736). Mirror of the light palettes above but for
   DARK mode. Scoped body.theme-<slug>:not(.light-theme) so it layers on the dark :root
   WITHOUT touching the light rules. ACCENT-FAMILY ONLY (--accent/--adim/--aglow/--amber/
   --adim2/--purple/--pdim) - bg/surface/text/green/red stay :root so surfaces never fight
   the palette and semantic colors stay constant. --amber is the readable gold (text),
   AA (>=4.5:1) on --surface #101D31. theme-slate == bare :root accent family, so the
   DEFAULT reproduces the current look pixel-for-pixel. */
body.theme-slate:not(.light-theme){--accent:#173C74;--adim:rgba(23,60,116,0.20);--aglow:rgba(212,175,55,0.24);--amber:#D4AF37;--adim2:rgba(212,175,55,0.12);--purple:#6E8DC6;--pdim:rgba(110,141,198,0.12);}
body.theme-cream:not(.light-theme){--accent:#2A5599;--adim:rgba(42,85,153,0.22);--aglow:rgba(224,190,85,0.26);--amber:#E0BE55;--adim2:rgba(224,190,85,0.14);--purple:#7E9AD6;--pdim:rgba(126,154,214,0.13);}
body.theme-ivory:not(.light-theme){--accent:#3A63B0;--adim:rgba(58,99,176,0.22);--aglow:rgba(227,195,106,0.28);--amber:#E3C36A;--adim2:rgba(227,195,106,0.14);--purple:#86A3DC;--pdim:rgba(134,163,220,0.13);}
body.theme-bluegray:not(.light-theme){--accent:#4A6FA5;--adim:rgba(74,111,165,0.22);--aglow:rgba(217,188,99,0.24);--amber:#D9BC63;--adim2:rgba(217,188,99,0.13);--purple:#7E9AD6;--pdim:rgba(126,154,214,0.12);}
body.theme-warmivory:not(.light-theme){--accent:#C58A2E;--adim:rgba(197,138,46,0.20);--aglow:rgba(230,192,103,0.30);--amber:#E6C067;--adim2:rgba(230,192,103,0.15);--purple:#8C9ED2;--pdim:rgba(140,158,210,0.12);}
body.theme-warmivory:not(.light-theme) .vd-pager-btn.active{background:#8A5E1F;}
body.theme-bold:not(.light-theme){--accent:#2E62C4;--adim:rgba(46,98,196,0.24);--aglow:rgba(233,197,71,0.30);--amber:#E9C547;--adim2:rgba(233,197,71,0.15);--purple:#7E9AD6;--pdim:rgba(126,154,214,0.13);}
/* Build 0677 (audit A11Y-4) — global keyboard focus ring (WCAG 2.4.7). :focus-visible
   fires only for keyboard navigation, never on a mouse click, so pointer users are
   unaffected. !important overrides the scattered `outline:none` resets across the app. */
button:focus-visible,[role="button"]:focus-visible,a:focus-visible,.nav-btn:focus-visible,.modal-x:focus-visible,[data-action]:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{
  outline:2px solid var(--amber) !important;outline-offset:2px !important;border-radius:4px;
}
/* WCAG 2.4.7 — same keyboard focus ring for form fields (inputs/selects/textareas).
   :focus-visible only, so mouse/touch focus keeps the existing border-color
   treatment; !important beats the scattered inline/utility `outline:none` resets
   (same rationale as the button rule above). */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber) !important;outline-offset:2px !important;
}
/* THEME TOGGLE */
/* Build 0495 (#132) — segmented Dark/Light switch: icon on top, WORD below,
   BOTH always visible + legible in dark AND light themes (the inactive side now
   uses --text2 instead of the near-invisible --text3, and gets a clear hover). */
.theme-toggle{display:flex;align-items:stretch;gap:3px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);padding:3px;}
.theme-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:48px;padding:3px 12px;border-radius:7px;border:none;background:transparent;cursor:pointer;font-family:var(--sans);transition:all .15s;color:var(--text2);}
.theme-btn .tb-ico{font-size:14px;line-height:1.1;}
.theme-btn .tb-lbl{font-size:10px;font-weight:600;letter-spacing:.3px;}
.theme-btn:not(.active):hover{color:var(--text);background:var(--bg);}
.theme-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.18);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
button{border:none;background:none;font-family:inherit;cursor:pointer;}
html{font-size:14px;height:100%;overflow:hidden;}
body{font-family:var(--sans);background:var(--bg);color:var(--text);height:100%;min-height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px;}
.app{display:grid;grid-template-columns:220px 1fr;grid-template-rows:var(--topbar-h) minmax(0,1fr);width:100vw;height:calc(var(--app-vh) - var(--app-offset));max-height:calc(var(--app-vh) - var(--app-offset));overflow:hidden;padding-left:var(--app-safe-left);padding-right:var(--app-safe-right);background:var(--bg);}
/* TOPBAR */
.topbar{grid-column:1/-1;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:var(--app-offset);z-index:100;gap:10px;min-height:var(--topbar-h);}
.topbar-left{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;letter-spacing:-.3px;flex-shrink:0;}
.logo-mark{width:28px;height:28px;background:linear-gradient(135deg,var(--accent),#10284e);border:1px solid rgba(212,175,55,0.36);box-shadow:0 6px 18px rgba(0,0,0,.18);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#F8E7A6;}
.topbar-brand{gap:8px;}
.topbar-logo-img{width:30px;height:30px;object-fit:contain;flex-shrink:0;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
.brand-stack{display:flex;flex-direction:column;line-height:1.05;}
.brand-name{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--text);}
.brand-sub{font-size:10px;color:var(--amber);text-transform:uppercase;letter-spacing:.18em;}
body.light-theme .brand-name{color:var(--accent);}
body.light-theme .brand-sub{color:var(--amber);}
/* Build 0547 — current-plan badge in the topbar (painted by entitlements.js
   renderBadges via [data-plan-badge]; it rewrites className, so style via the
   container selector, never a class on the element itself). */
.topbar-left [data-plan-badge]{font-size:10px;padding:2px 8px;white-space:nowrap;margin-left:10px;flex-shrink:0;}
@media (max-width:600px){ .topbar-left [data-plan-badge]{font-size:9px;padding:1px 6px;margin-left:6px;} }
/* Build 0547 — effort/cadence chips on task, project, and goal cards.
   light=green standard=blue heavy=amber major=red, theme-aware. */
.vd-effort{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;letter-spacing:.3px;line-height:1;padding:3px 8px;border-radius:99px;flex:0 0 auto;cursor:default;}
.vd-effort.e-light{background:rgba(52,168,109,.16);color:#5BD49A;border:1px solid rgba(52,168,109,.35);}
.vd-effort.e-standard{background:rgba(74,144,217,.16);color:#7FB4EC;border:1px solid rgba(74,144,217,.35);}
.vd-effort.e-heavy{background:rgba(217,151,32,.16);color:#EDB75B;border:1px solid rgba(217,151,32,.4);}
.vd-effort.e-major{background:rgba(214,69,69,.16);color:#F08A8A;border:1px solid rgba(214,69,69,.4);}
.vd-effort.e-off{background:var(--surface3,rgba(255,255,255,.08));color:var(--text3);border:1px solid var(--border);}
body.light-theme .vd-effort.e-light{background:#E4F4EC;color:#1B7A4B;border-color:rgba(27,122,75,.3);}
body.light-theme .vd-effort.e-standard{background:#E5EEF8;color:#1B4F8A;border-color:rgba(27,79,138,.3);}
body.light-theme .vd-effort.e-heavy{background:#FBF1D9;color:#9A6B00;border-color:rgba(154,107,0,.3);}
body.light-theme .vd-effort.e-major{background:#FBE3E3;color:#B03030;border-color:rgba(176,48,48,.3);}
/* Build 0547 — inline PRO/EXC pill (sits next to the label; routes.js
   injects it). Hidden in icon-only collapsed nav where labels don't show. */
.app.nav-collapsed .sidebar .nav-btn .nav-pro{display:none;}
.search-bar{flex:1;max-width:420px;position:relative;transition:max-width 0.25s ease;z-index:201;}
.search-bar:focus-within{max-width:75vw;}
/* Build 0217 — overflow:visible by default so the avatar dropdown isn't clipped.
   The gsearch-active rule below still applies overflow:hidden when needed
   to prevent topbar-right content from spilling during the collapse animation. */
.topbar-right{max-width:1200px;overflow:visible;transition:max-width 0.3s ease,opacity 0.2s ease;}
body.gsearch-active .topbar-right{max-width:0;overflow:hidden;opacity:0;pointer-events:none;}
.topbar .search-bar input{background:#000;border:1px solid var(--border2);border-radius:var(--r);color:var(--text);padding:7px 78px 7px 36px;font-size:13px;width:100%;outline:none;font-family:var(--sans);transition:background-color .18s ease,border-color .18s ease,color .18s ease;}
.topbar .search-bar:hover input,.topbar .search-bar input:focus{background:var(--surface);border-color:var(--amber);}
.search-ico{position:absolute;left:8px;top:0;bottom:0;width:30px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:22px;line-height:1;pointer-events:none;z-index:1;transition:color .18s ease,transform .18s ease;}
.search-bar:hover .search-ico,.search-bar:focus-within .search-ico{color:var(--amber);transform:scale(1.12) rotate(-6deg);}
.search-clear{position:absolute;right:46px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;border-radius:50%;background:var(--border2);color:var(--text2);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:14px;line-height:1;padding:0;z-index:2;}
.search-clear:hover{background:var(--amber);color:#000;}
.search-bar:not(:focus-within) .search-clear{display:none!important;}
.search-kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;font-family:var(--mono,monospace);background:var(--border2);color:var(--text3);border:1px solid var(--border);border-radius:4px;padding:2px 6px;letter-spacing:.4px;pointer-events:none;}
.search-bar:focus-within .search-kbd{display:none;}
.search-results{position:absolute;top:calc(100% + 6px);left:0;width:clamp(280px, max(100%, 520px), calc(100vw - 24px));max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--border2);border-radius:var(--rlg);box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:200;max-height:480px;overflow-y:auto;display:none;}
.search-results.show{display:block;}
.search-results.show::after{content:'';display:block;position:sticky;bottom:0;height:32px;background:linear-gradient(to bottom,transparent,var(--surface));pointer-events:none;margin-top:-32px;}
.sr-group{border-bottom:1px solid var(--border);}
.sr-group:last-child{border-bottom:none;}
.sr-group-head{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;background:var(--surface2);position:sticky;top:0;}
.sr-group-count{margin-left:auto;background:var(--border2);color:var(--text2);border-radius:10px;padding:1px 8px;font-size:10px;letter-spacing:.4px;}
.sr-item{padding:9px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;border-left:3px solid transparent;}
.sr-item:hover{background:var(--surface2);}
.sr-item.sr-selected{background:var(--surface2);border-left-color:var(--amber);}
.sr-name{font-size:13px;color:var(--text);}
.sr-mark{background:rgba(245,158,11,.28);color:inherit;border-radius:3px;padding:0 2px;}
.sr-noresults{padding:18px 14px;color:var(--text2);font-size:13px;text-align:center;}
.sr-noresults-hint{margin-top:6px;font-size:11px;color:var(--text3);}
.sr-empty{padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
/* Build 0699 — Add Existing/New entity picker (token-only → themes across dark + 6 light palettes) */
.pk-choose{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:600px){.pk-choose{grid-template-columns:1fr;}}
.pk-check{width:18px;height:18px;border-radius:var(--rsm);border:1.5px solid var(--border2);background:transparent;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:transparent;transition:background .12s,border-color .12s,color .12s;}
.sr-item.sr-selected .pk-check{background:var(--accent);border-color:var(--accent);color:#fff;}
.pk-meta{font-size:11.5px;color:var(--text3);margin-left:auto;text-align:right;white-space:nowrap;padding-left:10px;}
.pk-meta em{font-style:normal;color:var(--text2);}
/* Linked-state clarity: already-linked rows render CHECKED with a gold "Linked" pill
   (replaces the old .pk-already 60% dim, which read as disabled — linked rows are now
   interactive: unchecking stages an unlink). Pill matches the app .tag sizing. */
.pk-linked-tag{display:inline-flex;align-items:center;flex-shrink:0;padding:1px 8px;border:1px solid var(--amber);border-radius:99px;font-size:10.5px;font-weight:600;line-height:1.5;color:var(--amber);background:transparent;white-space:nowrap;}
/* Truth counter in the picker footer ("N linked · +A new · −R remove"); mounted by
   entity-picker.js as the first .mact child — margin-right:auto keeps buttons right. */
.pk-count{margin-right:auto;align-self:center;font-size:12px;color:var(--text2);white-space:nowrap;}
/* Build 0699 — .reset-card was inline-styled at each use site; give it a real token-based rule so the chooser tiles (and any future use) render as proper cards. Existing inline-styled instances keep their look (inline wins). */
.reset-card{border:1px solid var(--border);border-radius:var(--rsm);padding:14px;cursor:pointer;background:var(--surface);transition:border-color .12s,background .12s,box-shadow .12s;}
.reset-card:hover{border-color:var(--border2);background:var(--surface2);}
.reset-card:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--aglow);}
.sr-empty-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.sr-empty-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;margin-right:4px;}
.sr-chip{font-size:11px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);padding:3px 9px;border-radius:14px;cursor:pointer;font-family:var(--sans);transition:background .12s ease,color .12s ease,border-color .12s ease;}
.sr-chip:hover{background:var(--amber);color:#000;border-color:var(--amber);}
.sr-example{font-size:11px;background:transparent;border:1px dashed var(--border2);color:var(--text2);padding:3px 9px;border-radius:14px;cursor:pointer;font-family:var(--sans);}
.sr-example:hover{background:var(--surface2);color:var(--amber);border-color:var(--amber);}
.sr-empty-section{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--border);padding-top:8px;}
.sr-empty-head{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:2px;}
.sr-viewed{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--text2);text-align:left;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;font-family:var(--sans);}
.sr-viewed:hover{background:var(--surface2);color:var(--text);}
/* Build 0196 — Recent search rows are now full-width clickable bars (was
   a tiny pill with 5px×8px padding — easy to miss on click). Same accessibility
   improvement as the GO TO nav bar (.sr-nav-bar) in build 0195. */
.sr-recent{display:flex;align-items:center;width:100%;background:transparent;border:none;color:var(--text2);text-align:left;padding:10px 12px;margin:2px 0;border-radius:6px;cursor:pointer;font-size:13px;font-family:var(--sans);gap:10px;transition:background .12s ease,color .12s ease;}
.sr-recent:hover{background:var(--amber);color:#000;}
.sr-recent:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;}
.sr-recent-icon{font-size:14px;color:var(--text3);flex-shrink:0;}
.sr-recent:hover .sr-recent-icon{color:rgba(0,0,0,0.7);}
.sr-recent-q{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-recent-hint{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;font-weight:700;flex-shrink:0;}
.sr-recent:hover .sr-recent-hint{color:rgba(0,0,0,0.7);}
/* Build 0264 — recent searches: row wrapper hosts ✕ delete next to the
   re-run button so each click target stays independent. */
.sr-recent-row{display:flex;align-items:center;gap:4px;}
.sr-recent-row .sr-recent{flex:1;margin:2px 0;}
.sr-recent-del{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:14px;line-height:1;width:28px;height:28px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease;font-family:var(--sans);}
.sr-recent-del:hover{background:var(--red);color:#fff;}
.sr-recent-del:focus-visible{outline:2px solid var(--red);outline-offset:-2px;}
.sr-empty-head-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sr-recent-clear-all{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;padding:2px 6px;border-radius:4px;font-family:var(--sans);transition:background .12s ease,color .12s ease;}
.sr-recent-clear-all:hover{background:var(--red);color:#fff;}
.sr-recent-clear-all:focus-visible{outline:2px solid var(--red);outline-offset:-2px;}
.sr-viewed-type{margin-left:auto;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;}
.sr-empty-hints{font-size:10px;color:var(--text3);border-top:1px solid var(--border);padding-top:8px;text-align:center;letter-spacing:.4px;}
/* build 0044: command palette additions */
.sr-action-card{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s ease;}
.sr-action-icon{font-size:18px;flex-shrink:0;}
.sr-action-label{flex:1;font-size:13px;color:var(--text);}
.sr-action-label strong{color:var(--amber);}
.sr-action-cta{font-size:11px;color:var(--amber);white-space:nowrap;opacity:.8;}
/* High confidence — verb + entity: amber background, prominent */
.sr-action-high{background:rgba(245,158,11,.10);}
.sr-action-high:hover{background:rgba(245,158,11,.22);}
.sr-action-high .sr-action-cta{opacity:1;font-weight:600;}
/* Low confidence — entity only: subtle border, soft suggestion */
.sr-action-low{background:transparent;border-left:3px solid var(--border2);}
.sr-action-low:hover{background:var(--surface2);border-left-color:var(--amber);}
.sr-action-low .sr-action-label{color:var(--text2);}
.sr-action-low .sr-action-cta{color:var(--text3);}
.sr-nav-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--surface2);}
.sr-nav-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;margin-right:2px;}
.sr-nav-chip{font-size:11px;background:var(--surface);border:1px solid var(--border2);color:var(--text2);padding:3px 10px;border-radius:14px;cursor:pointer;font-family:var(--sans);transition:background .12s ease,color .12s ease,border-color .12s ease;}
.sr-nav-chip:hover{background:var(--amber);color:#000;border-color:var(--amber);}
/* Build 0195 — Full-width clickable nav BAR (replaces sr-nav-chip in search
   results when a user types a tab keyword like "tasks", "team", "workflow").
   Whole row is the click target — bigger hit area than the old pill.
   The empty-state "Jump to" chips still use .sr-chip (different surface). */
.sr-nav-bar{display:flex;align-items:center;width:100%;padding:12px 14px;border:none;border-bottom:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--sans);cursor:pointer;text-align:left;gap:10px;transition:background .12s ease;}
.sr-nav-bar:hover{background:var(--amber);color:#000;}
.sr-nav-bar:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;}
.sr-nav-bar-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;font-weight:700;flex-shrink:0;}
.sr-nav-bar:hover .sr-nav-bar-label{color:rgba(0,0,0,0.7);}
.sr-nav-bar-target{font-size:13px;font-weight:600;flex:1;}
.sr-nav-bar-arrow{font-size:14px;color:var(--text3);flex-shrink:0;font-weight:700;}
.sr-nav-bar:hover .sr-nav-bar-arrow{color:#000;transform:translateX(2px);transition:transform .12s ease;}
/* BossLife 3.2.0172 (revised) — help card is clickable again. Whole-card
   click routes through gsearch-nav with data-subtab="help" so it lands
   on About → Help reliably. cursor:pointer + hover restored. */
.sr-help-card{padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface2);cursor:pointer;transition:background .12s ease;}
.sr-help-card:hover{background:var(--surface);}
.sr-help-head{display:flex;align-items:flex-start;gap:7px;margin-bottom:5px;}
.sr-help-icon{font-size:14px;flex-shrink:0;margin-top:1px;}
.sr-help-q{font-size:12px;font-weight:600;color:var(--text);}
.sr-help-a{font-size:12px;color:var(--text2);line-height:1.5;margin-bottom:7px;padding-left:21px;}
.sr-help-link{background:transparent;border:none;color:var(--amber);font-size:11px;cursor:pointer;padding:0;font-family:var(--sans);text-decoration:underline;text-underline-offset:2px;}
.sr-help-link:hover{opacity:.8;}
.sr-prefix-badge{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:12px;color:var(--text2);background:rgba(245,158,11,.06);border-bottom:1px solid var(--border);}
.sr-prefix-badge strong{color:var(--amber);}
.sr-prefix-clear{background:transparent;border:1px solid var(--border2);color:var(--text3);width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:10px;display:inline-flex;align-items:center;justify-content:center;margin-left:auto;padding:0;font-family:var(--sans);}
.sr-prefix-clear:hover{background:var(--amber);color:#000;border-color:var(--amber);}
/* build 0045: member-scope card */
.sr-scope-card{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(77,214,164,.07);border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s ease;}
.sr-scope-card:hover{background:rgba(77,214,164,.16);}
.sr-scope-avatar{width:28px;height:28px;border-radius:50%;background:var(--amber);color:#000;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.sr-scope-label{flex:1;font-size:13px;color:var(--text);}
.sr-scope-label strong{color:#4DD6A4;}
.sr-scope-count{margin-left:8px;font-size:11px;color:var(--text3);background:var(--border2);border-radius:10px;padding:1px 7px;}
.sr-scope-cta{font-size:11px;color:#4DD6A4;white-space:nowrap;opacity:.85;}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.xp-mod{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);padding:5px 12px;}
.xp-lbl{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.8px;}
.xp-track{width:70px;height:3px;background:var(--surface3);border-radius:99px;overflow:hidden;}
.xp-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .6s;}
.xp-val{font-family:var(--mono);font-size:12px;color:var(--accent);}
.accountability-mod{min-width:190px;}
.accountability-mod .xp-track{width:92px;}
.focus-star-btn{font-size:14px;line-height:1;color:var(--text3);min-width:28px;}
.focus-star-btn.active{color:var(--amber);border-color:rgba(251,191,36,.35);background:var(--adim2);}
.notif-btn{width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;font-size:14px;}
.notif-dot{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--bg2);}
.date-txt{font-size:11px;color:var(--text3);font-family:var(--mono);}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;cursor:pointer;}
/* UNDO BAR */
#undo-bar{position:fixed;bottom:66px;right:18px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);padding:10px 16px;display:none;align-items:center;gap:14px;z-index:500;box-shadow:0 8px 32px rgba(0,0,0,.5);font-size:13px;}
#undo-bar.show{display:flex;}
#undo-bar span{color:var(--text2);}
#undo-bar button{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:4px 12px;font-size:12px;cursor:pointer;font-family:var(--sans);}
/* Build 0580 — ✕ dismisses the bar without undoing */
#undo-bar button.undo-x{background:transparent;color:var(--text3);padding:2px 6px;font-size:13px;line-height:1;}
#undo-bar button.undo-x:hover{color:var(--text);}
/* Build 0325 — Required-field UX. Three pieces:
   1. .req renders the asterisk in red + bold so users see "this is required" at a glance.
   2. .field.invalid adds a red border + soft red glow to the input AND turns the
      label red, so when the user submits with empty required fields they see
      exactly which ones need attention.
   3. .field.invalid::after — small "Required" hint below the field.
   Animation: a brief shake on the first invalid render to draw the eye. */
.req{color:#E84343;font-weight:700;margin-left:2px;}
body.light-theme .req{color:#A93434;}
.field.invalid > label{color:#E84343;}
body.light-theme .field.invalid > label{color:#A93434;}
.field.invalid input,
.field.invalid select,
.field.invalid textarea,
.field.invalid .ss-wrap{
  border-color:#E84343 !important;
  box-shadow:0 0 0 3px rgba(232,67,67,0.18) !important;
  background:rgba(232,67,67,0.04);
}
body.light-theme .field.invalid input,
body.light-theme .field.invalid select,
body.light-theme .field.invalid textarea,
body.light-theme .field.invalid .ss-wrap{
  border-color:#A93434 !important;
  box-shadow:0 0 0 3px rgba(169,52,52,0.16) !important;
  background:rgba(169,52,52,0.04);
}
@keyframes vd-shake{
  0%,100%{transform:translateX(0);}
  20%,60%{transform:translateX(-4px);}
  40%,80%{transform:translateX(4px);}
}
.field.invalid.shake{animation:vd-shake .4s ease-out;}

/* Build 0317 — Countdown ring + numeric remaining-seconds indicator.
   Circumference = 2π·16 ≈ 100.531. The fg circle's stroke-dashoffset
   transitions from 0 (full ring) to 100.531 (empty) over 5 seconds. */
.undo-countdown{position:relative;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.undo-ring{width:100%;height:100%;transform:rotate(-90deg);}
.undo-ring-bg{fill:none;stroke:rgba(212,175,55,0.18);stroke-width:3;}
.undo-ring-fg{fill:none;stroke:#C9A961;stroke-width:3;stroke-linecap:round;stroke-dasharray:100.531;stroke-dashoffset:0;}
.undo-ring-num{position:absolute;font-size:11px;font-weight:700;color:#C9A961;font-family:var(--mono);line-height:1;}
body.light-theme .undo-ring-bg{stroke:rgba(154,116,20,0.20);}
body.light-theme .undo-ring-fg{stroke:var(--amber);}
body.light-theme .undo-ring-num{color:var(--amber);}
/* SIDEBAR */
.sidebar{background:var(--bg2);border-right:1px solid var(--border);padding:12px 0 calc(12px + var(--app-safe-bottom));position:sticky;top:calc(var(--topbar-h) + var(--app-offset));height:calc(var(--app-vh) - var(--topbar-h) - var(--app-offset));max-height:calc(var(--app-vh) - var(--topbar-h) - var(--app-offset));overflow-y:auto;display:flex;flex-direction:column;overscroll-behavior:contain;}
/* nav section headers — bolder/bigger/darker so they read as group labels, not clickable items */
.nav-lbl{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:1px;padding:0 16px;margin:15px 0 5px;}
.nav-btn{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;font-size:13px;color:var(--text2);border:none;background:transparent;width:100%;text-align:left;font-family:var(--sans);transition:all .15s;border-left:2px solid transparent;}
.nav-btn:hover{color:var(--text);background:var(--surface3);}
.nav-btn.active{color:var(--text);background:var(--adim);border-left-color:var(--accent);font-weight:500;}
/* Build 0638 — nav icons are now inline SVGs (.vdi) instead of emoji. */
.nav-ico{width:20px;font-size:13px;display:flex;align-items:center;justify-content:center;opacity:.65;}
.nav-ico .vdi{width:17px;height:17px;}
.nav-btn.active .nav-ico{opacity:1;}
/* Build 0639 — inline icons inside buttons / tags / chips, priority dot. */
.btn .vdi{width:15px;height:15px;margin-right:1px;}
.tag .vdi,.comment-mini-badge .vdi{width:13px;height:13px;}
.focus-star-btn.active .vdi{color:var(--amber);}
.vd-prio-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;}
.vd-prio-crit{color:var(--red);vertical-align:-2px;}
/* Build 0641 — completed/done check is neon green (overrides inherited color). */
.vd-done{color:#16E07A;}
/* Build 0641 — Project View stat strip: evenly-spaced tiles + dividers. */
.mpjv-stats{display:flex;align-items:stretch;background:var(--surface2);border-radius:10px;padding:12px 4px;}
.mpjv-stat{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:2px 6px;text-align:center;}
.mpjv-stat+.mpjv-stat{border-left:1px solid var(--border);}
.mpjv-stat-val{font-size:22px;font-weight:700;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mpjv-stat-lbl{font-size:10px;color:var(--text3);text-transform:capitalize;}
.mpjv-sec-ico{display:inline-flex;align-items:center;color:var(--amber);}
.nav-badge{margin-left:auto;background:var(--surface3);color:var(--text3);font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:99px;}
.nav-badge.red{background:var(--rdim);color:var(--red);}
.sidebar-foot{margin-top:auto;padding:14px 16px;border-top:1px solid var(--border);}
.sidebar-foot-txt{font-size:10px;color:var(--text3);line-height:1.6;}
/* MAIN */
.main{background:var(--bg);overflow-y:auto;height:calc(var(--app-vh) - var(--topbar-h) - var(--app-offset));max-height:calc(var(--app-vh) - var(--topbar-h) - var(--app-offset));padding-bottom:var(--app-safe-bottom);overscroll-behavior:contain;}
.page{display:none;padding:26px;}
.page.active{display:block;}
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
.pt{font-size:21px;font-weight:600;letter-spacing:-.5px;}
.ps{font-size:13px;color:var(--text2);margin-top:2px;font-weight:300;}
/* CARDS */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:18px;}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;}
/* Build 0271 — Scope tabs (All / My) on Tasks + Projects pages */
.scope-tabs{display:flex;gap:4px;margin-bottom:12px;padding:4px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;width:fit-content;}
.scope-tab{background:transparent;border:none;color:var(--text2);cursor:pointer;font-size:12px;font-weight:600;font-family:var(--sans);padding:7px 16px;border-radius:5px;letter-spacing:.02em;transition:background .12s ease,color .12s ease;}
.scope-tab:hover{color:var(--text);background:var(--surface);}
.scope-tab.active{background:var(--purple);color:#fff;}
/* Build 0680 (audit A11Y-7) — dark theme: --purple #6E8DC6 on white = 3.34:1 (below AA).
   Darken the active bg in dark mode only (light theme's #294C82 is already ~8.6:1). */
body:not(.light-theme) .scope-tab.active{background:#33508A;}
.scope-tab:focus-visible{outline:2px solid var(--purple);outline-offset:-2px;}
/* Build 0266 — Per-tab quick filter input (sits inside .ch between title
   and count chip). Grows to fill available space; the small ✕ button
   appears once the user types something. */
.tabq{flex:1;min-width:0;max-width:520px;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:6px;font:13px var(--sans);outline:none;transition:border-color .12s ease,background .12s ease;}
.tabq::placeholder{color:var(--text3);font-style:italic;}
.tabq:focus{border-color:var(--purple);background:var(--surface);}
.tabq::-webkit-search-cancel-button{display:none;}
.tabq-wide{max-width:none;}
.tabq-clear{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:13px;line-height:1;width:24px;height:24px;border-radius:5px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease;font-family:var(--sans);}
.tabq-clear:hover{background:var(--red);color:#fff;}
.tabq-clear:focus-visible{outline:2px solid var(--red);outline-offset:-2px;}
/* Build 0267 — Smart ↔ Strict filter mode toggle. Text labels.
   Per-tab, persisted to localStorage. Build 0268: emoji → text. */
.tabq-mode{background:transparent;border:1px solid var(--border);cursor:pointer;font-size:10px;line-height:1;height:26px;padding:0 8px;border-radius:5px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,border-color .12s ease,color .12s ease;font-family:var(--sans);font-weight:700;letter-spacing:.06em;text-transform:uppercase;min-width:54px;}
.tabq-mode[data-mode="smart"]{background:rgba(168,85,247,0.10);border-color:rgba(168,85,247,0.35);color:var(--purple);}
.tabq-mode[data-mode="smart"]:hover{background:rgba(168,85,247,0.18);border-color:var(--purple);}
.tabq-mode[data-mode="strict"]{background:transparent;border-color:var(--border);color:var(--text3);}
.tabq-mode[data-mode="strict"]:hover{background:var(--surface2);border-color:var(--text3);color:var(--text);}
.tabq-mode:focus-visible{outline:2px solid var(--purple);outline-offset:-2px;}
@media (max-width:600px){.tabq-mode{display:none;}}
/* Hide the input on narrow viewports — mobile users have less header space. */
@media (max-width:600px){.tabq,.tabq-clear{display:none;}}
.ct{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;}
/* GRIDS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.mt{margin-top:14px;}
/* STATS */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:16px 18px;}
.sv{font-size:26px;font-weight:600;letter-spacing:-1px;font-family:var(--mono);}
.sl{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.8px;margin-top:3px;}
.sd{font-size:11px;color:var(--green);margin-top:4px;}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--r);border:none;font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;}
.btn:hover{filter:brightness(1.1);}
.btn:active{transform:scale(.98);}
.btn-p{background:var(--accent);color:#fff;}
.btn-g{background:var(--surface2);color:var(--text2);border:1px solid var(--border2);}
.btn-g:hover{color:var(--text);background:var(--surface3);}
.btn-d{background:var(--rdim);color:var(--red);border:1px solid rgba(248,113,113,.2);}
.btn-s{background:var(--gdim);color:var(--green);border:1px solid rgba(52,211,153,.2);}
.btn-am{background:var(--adim2);color:var(--amber);border:1px solid rgba(251,191,36,.2);}
.sm{padding:5px 11px;font-size:12px;}
.xs{padding:3px 8px;font-size:11px;}
/* INPUTS */
input[type=hidden]{display:none!important;}
input[type=text],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=email],input[type=tel],input[type=url],input[type=search],textarea,select{font-family:var(--sans);font-size:13px;background:#000;border:1px solid var(--border2);border-radius:var(--r);color:var(--text);padding:8px 12px;width:100%;outline:none;transition:border-color .15s;}
input:focus,textarea:focus,select:focus{border-color:var(--accent);}
select option{background:#000;}
textarea{resize:vertical;min-height:72px;line-height:1.5;}
label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;display:block;margin-bottom:5px;}
.field{margin-bottom:12px;}
/* TAGS */
.tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:500;}
.t-bl{background:var(--adim);color:var(--accent);border:1px solid var(--aglow);}
.t-gr{background:var(--gdim);color:var(--green);border:1px solid rgba(52,211,153,.2);}
.t-am{background:var(--adim2);color:var(--amber);border:1px solid rgba(251,191,36,.2);}
.t-re{background:var(--rdim);color:var(--red);border:1px solid rgba(248,113,113,.2);}
.t-pu{background:var(--pdim);color:var(--purple);border:1px solid rgba(167,139,250,.2);}
.t-gy{background:rgba(255,255,255,.05);color:var(--text3);border:1px solid var(--border);}
.t-tl{background:rgba(61,200,184,.12);color:#3DC8B8;border:1px solid rgba(61,200,184,.2);}
/* PROGRESS */
.ptrack{height:3px;background:var(--surface3);border-radius:99px;overflow:hidden;}
.pfill{height:100%;border-radius:99px;transition:width .5s;}
.pbl{background:var(--accent);}.pgr{background:var(--green);}.pam{background:var(--amber);}.pre{background:var(--red);}.ppu{background:var(--purple);}
/* TASK ROW */
.trow{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:4px;transition:all .15s;}
.trow:hover{border-color:var(--border2);background:var(--surface2);}
.trow.done{opacity:.4;}
.trow.done .tname{text-decoration:line-through;color:var(--text3);}
.trow.dragging{opacity:.4;border-style:dashed;}
.trow.drag-over{border-color:var(--accent);}
.drag-handle{color:var(--text3);cursor:grab;font-size:12px;padding:0 2px;user-select:none;}
.chk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border2);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;color:#fff;font-size:9px;}
.chk.on{background:var(--green);border-color:var(--green);}
.tname{flex:1;font-size:13px;line-height:1.35;}
.pbar{width:3px;height:13px;border-radius:99px;flex-shrink:0;}
/* TIER 1 VISUAL POLISH (build 0032) — health border + due pill + priority weight + spacing */
.trow.h-on-time,.trow.h-at-risk,.trow.h-overdue,.trow.h-no-due{padding:11px 14px 11px 12px;margin-bottom:6px;border-left-width:3px;border-left-style:solid;}
.trow.h-on-time{border-left-color:var(--green);}
.trow.h-at-risk{border-left-color:var(--amber);}
.trow.h-overdue{border-left-color:var(--red);}
.trow.h-no-due{border-left-color:var(--text3);}
.trow.done{border-left-color:var(--text3)!important;}
.tname-high{font-weight:700;}
.tname-medium{font-weight:500;}
.tname-low{font-weight:400;color:var(--text2);}
.due-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:600;line-height:1.4;}
.due-pill.dp-overdue{background:var(--rdim);color:var(--red);border:1px solid rgba(242,126,126,.3);}
.due-pill.dp-at-risk{background:var(--adim2);color:var(--amber);border:1px solid rgba(212,175,55,.3);}
.due-pill.dp-on-time{background:var(--gdim);color:var(--green);border:1px solid rgba(77,214,164,.25);}
.due-pill.dp-no-due{background:rgba(255,255,255,.04);color:var(--text3);border:1px solid var(--border);}
.owner-chip{display:inline-flex;align-items:center;gap:6px;padding:1px 9px 1px 2px;border-radius:99px;background:var(--pdim);border:1px solid rgba(167,139,250,.2);}
.owner-chip-av{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0;}
.owner-chip-name{font-size:11px;color:var(--text2);font-weight:500;}
/* PROJ CARD */
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:16px 18px;position:relative;overflow:hidden;transition:border-color .2s;display:flex;flex-direction:column;}
.pcard:hover{border-color:var(--border2);}
/* Build 0643 — equal-height project cards (grid stretch) pin their action bar
   to the bottom instead of leaving whitespace below it in the shorter card. */
.pcard .card-action-bar{margin-top:auto;}
.paccent{position:absolute;top:0;left:0;width:100%;height:2px;}
/* MEMBER ROW */
.mrow{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);margin-bottom:6px;transition:border-color .15s;}
.mrow:hover{border-color:var(--border2);}
/* BossLife 3.2.0163 — default initials color = current theme text so future
   avatar renders that forget to set an inline color still stay readable. */
.mav{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;color:var(--text);}
.mname{font-size:13px;font-weight:500;}
.mrole{font-size:11px;color:var(--text3);margin-top:1px;}
/* TEAM TABS */
/* 3.2.0109 — Visual equality within each tab row. Every tab (active and
   inactive) renders as a distinct boxed segment with the same size and
   boundary; active is differentiated by a brighter background, stronger
   text color, and a subtle shadow. */
.ttabs{display:flex;gap:10px;margin-bottom:14px;background:var(--surface2);border-radius:var(--r);padding:5px;}
.ttab{flex:1;padding:10px 16px;text-align:center;font-size:13px;font-weight:500;color:var(--text3);border:1px solid var(--border);background:rgba(255,255,255,0.02);border-radius:8px;cursor:pointer;font-family:var(--sans);transition:all .15s;}
.ttab:hover{background:rgba(255,255,255,0.05);color:var(--text2);}
.ttab.active{background:var(--surface);color:var(--text);border-color:var(--border2);box-shadow:0 1px 2px rgba(0,0,0,0.18);font-weight:600;}
/* OWNERSHIP */
.own-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:4px;}
.own-row:hover{border-color:var(--border2);}
/* POLL */
.poll-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:16px;margin-bottom:10px;}
.poll-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r);margin-bottom:5px;cursor:pointer;transition:all .15s;}
.poll-opt:hover{border-color:var(--accent);background:var(--adim);}
.poll-opt.voted{border-color:var(--accent);background:var(--adim);}
.poll-bar-wrap{flex:1;height:4px;background:var(--surface3);border-radius:99px;overflow:hidden;}
.poll-bar{height:100%;background:var(--accent);border-radius:99px;transition:width .4s;}
/* BLOCKER */
.brow{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--r);border:1px solid;margin-bottom:5px;}
.bact{background:rgba(248,113,113,.05);border-color:rgba(248,113,113,.2);}
.bres{background:rgba(52,211,153,.05);border-color:rgba(52,211,153,.15);opacity:.6;}
/* GOAL CARD */
.grow{padding:14px 16px;border:1px solid var(--border);border-radius:var(--rlg);background:var(--surface);margin-bottom:0;}
.grow:hover{border-color:var(--border2);}
.grow-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;}
.grow-icon{width:22px;height:22px;background:var(--accent);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;flex-shrink:0;margin-top:1px;opacity:.9;}
.grow-name{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.35;color:var(--text);word-break:break-word;}
.grow-acts{display:flex;gap:4px;align-items:center;flex-shrink:0;}
/* 3.2.0106 — uniform icon button sizing for goal-card action row */
.grow-act{min-width:30px;height:26px;padding:3px 10px;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}
.grow-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px;}
.grow-desc{font-size:12px;color:var(--text3);line-height:1.55;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.grow-prog-row{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;margin-bottom:4px;color:var(--text3);}
.grow-projs{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.grow-projs>span:first-child{font-size:10px;color:var(--text3);margin-right:2px;}
/* GOAL CARDS — stacked list */
.grow+.grow{margin-top:10px;}
@keyframes gcSlideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.grow.gc-enter{animation:gcSlideIn .18s ease;}
/* GOAL/SP NAV BUTTON */
.gcnav-btn{width:26px;height:26px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:all .15s;padding:0;font-family:inherit;}
.gcnav-btn:hover:not([disabled]){background:var(--accent);color:#fff;border-color:var(--accent);}
.gcnav-btn[disabled]{opacity:.25;pointer-events:none;}
/* Dots */
.goal-nav-dots{display:flex;justify-content:center;gap:5px;padding:8px 0 2px;min-height:20px;}
.goal-nav-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);border:none;cursor:pointer;padding:0;transition:all .2s;}
.goal-nav-dot.active{background:var(--accent);width:18px;border-radius:3px;}
/* STEP PROGRAM SLIDES */
/* On mobile: one program at a time */
@media(max-width:699px){
  #splist .sp-slide{display:none;}
  #splist .sp-slide.sp-active{display:block;}
  .sp-nav-only{display:inline-flex!important;}
}
@media(min-width:700px){
  .sp-nav-only{display:none!important;}
  #splist .sp-slide{display:block!important;}
}
/* On desktop: show all goals stacked; hide carousel controls */
@media(min-width:700px){
  .gc-mobile-only{display:none!important;}
  #glist .grow{display:block!important;}
}
/* On mobile: one goal at a time */
@media(max-width:699px){
  .gc-mobile-only{display:inline-flex;}
  #glist .grow{display:none;}
  #glist .grow.gc-active{display:block;}
}
/* STEPS */
.sdot{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;font-family:var(--mono);background:var(--surface2);flex-shrink:0;color:var(--text3);}
.sdot.done{background:var(--gdim);border-color:var(--green);color:var(--green);}
.sdot.active{background:var(--adim);border-color:var(--accent);color:var(--accent);}
.sline{width:1px;flex:1;background:var(--border);min-height:14px;margin:2px 0;}
.sline.done{background:var(--green);opacity:.35;}
/* MILESTONES */
.ritem{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:16px 12px;text-align:center;cursor:pointer;transition:all .2s;}
.ritem:hover{border-color:var(--accent);transform:translateY(-1px);}
.ritem.claimed{opacity:.45;}
.ritem.avail{border-color:rgba(79,142,247,.3);}
/* Milestone icon picker (Build 0651) */
.cri-picker{display:flex;flex-wrap:wrap;gap:6px;}
.cri-opt{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text2);cursor:pointer;transition:all .12s;}
.cri-opt:hover{border-color:var(--accent);color:var(--text);}
.cri-opt.active{border-color:var(--accent);background:var(--accent);color:#fff;}
.cri-opt .vdi{display:block;}
/* TIME BLOCK */
.tbrow{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border);border-left:2px solid var(--accent);margin-bottom:4px;transition:all .15s;cursor:grab;}
.tbrow.done{border-left-color:var(--green);opacity:.5;}
.tbrow:hover{border-color:var(--border2);}
/* TIMER */
.ring-bg{stroke:var(--surface3);}
.ring-fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1s linear;transform-origin:50% 50%;transform:rotate(-90deg);}
/* COMMENTS */
.comment-thread{margin-top:10px;border-top:1px solid var(--border);padding-top:10px;}
.comment{display:flex;gap:8px;margin-bottom:8px;}
.comment-av{width:24px;height:24px;border-radius:50%;background:var(--adim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;flex-shrink:0;}
.comment-body{flex:1;background:var(--surface2);border-radius:8px;padding:7px 10px;}
.comment-author{font-size:11px;font-weight:600;color:var(--text2);margin-bottom:2px;}
.comment-text{font-size:12px;color:var(--text);line-height:1.45;}
.comment-time{font-size:10px;color:var(--text3);margin-top:2px;}
.comment-input-row{display:flex;gap:7px;margin-top:6px;}
.comment-input-row input{font-size:12px;padding:6px 10px;}
/* MODAL */
/* Build 0313 — Modal backdrop starts BELOW any sticky banners so the
   centered modal isn't covered. --vd-banner-offset is set by the demo
   banner / view-as banner mount code; defaults to 0 when no banner. */
/* Build 0955 (#311) - backdrop-filter:blur(4px) REMOVED from .mbg. Chromium
   samples the backdrop for the blur when the overlay is composited; DOM
   re-rendered underneath while the overlay is open (e.g. clicking the
   Dashboard nav re-runs renderDash, which rebuilds the KPI cards via
   innerHTML) escapes that blur pass: the new nodes render CRISP while
   everything else stays frosted, so the cards read as painted on top of
   the modal overlay (the rgba dim still applies; it is the blur they
   escape). Reproduced deterministically, headless AND headed/GPU.
   Not a z-index problem: the layer scale (dropdowns 200/300 < .mbg 300 <
   undo 500 < toast #tz 999) is intact and untouched. The rgba(0,0,0,.75)
   dim carries the visual separation on its own. Do not re-add a
   backdrop-filter here without re-testing the modal-open re-render case. */
.mbg{display:none;position:fixed;top:var(--vd-banner-offset, 0px);right:0;bottom:0;left:0;background:rgba(0,0,0,.75);z-index:300;align-items:center;justify-content:center;padding:16px;pointer-events:auto;}
.mbg.open{display:flex;}
.modal{pointer-events:auto;background:var(--surface);border:1px solid var(--border2);border-radius:var(--rlg);padding:0;width:100%;max-width:460px;box-shadow:0 24px 80px rgba(0,0,0,.6);max-height:92vh;overflow:hidden;display:flex;flex-direction:column;position:relative;}
.modal-head{display:flex;align-items:center;padding:16px 48px 16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.modal-body{overflow-y:auto;padding:16px 20px;flex:1;min-height:0;}
.mtit{font-size:15px;font-weight:600;letter-spacing:-.3px;margin:0;padding:0;}
.modal-x{position:absolute;top:12px;right:12px;z-index:1;background:none;border:none;color:var(--text3);font-size:16px;line-height:1;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s,color .15s;padding:0;}
.modal-x:hover{background:var(--surface2);color:var(--text);}
.mact{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0;}
@media (max-width:700px){
  .mbg{align-items:flex-end;padding:calc(10px + var(--safe-top,0px)) max(10px,var(--safe-right,0px)) max(10px,var(--safe-bottom,0px)) max(10px,var(--safe-left,0px));}
  .modal{max-width:min(460px,100%);max-height:calc(100dvh - var(--vd-banner-offset,0px) - var(--safe-top,0px) - var(--safe-bottom,0px) - 20px);border-radius:18px;}
  .modal-head{padding:14px 44px 14px 16px;}
  .modal-body{padding:14px 16px 18px;}
  .mact,.modal-foot{display:flex !important;flex-wrap:wrap;align-items:stretch;justify-content:stretch !important;gap:8px !important;padding:10px 14px max(10px,calc(10px + var(--safe-bottom,0px))) !important;background:var(--surface);box-shadow:0 -10px 22px rgba(15,23,42,.08);}
  .mact .btn,.modal-foot .btn{flex:1 1 calc(50% - 4px);min-width:0;justify-content:center;text-align:center;white-space:normal;line-height:1.15;min-height:42px;padding:9px 10px;}
}
@media (max-width:380px){
  .mact .btn,.modal-foot .btn{flex-basis:100%;}
}
/* CONFIRM MODAL */
.confirm-modal{max-width:360px;}
.confirm-modal .modal-body{text-align:center;}
.confirm-msg{font-size:13px;color:var(--text2);margin-bottom:18px;line-height:1.5;}
.confirm-actions{display:flex;gap:8px;justify-content:center;}
/* NOTIFICATIONS PANEL */
.notif-panel{position:fixed;top:60px;right:16px;width:300px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--rlg);box-shadow:0 16px 48px rgba(0,0,0,.5);z-index:200;display:none;max-height:420px;overflow:hidden;flex-direction:column;}
.notif-panel.show{display:flex;}
.notif-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.notif-head-title{font-size:13px;font-weight:600;}
.notif-list{overflow-y:auto;flex:1;}
.notif-item{padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.notif-item:hover{background:var(--surface2);}
.notif-item.unread{border-left:2px solid var(--accent);}
.notif-item-title{font-size:12px;font-weight:500;margin-bottom:2px;}
.notif-item-body{font-size:11px;color:var(--text3);}
/* TOAST */
/* Build 0320c — Toast zone sits ABOVE the Feedback button (which is
   pinned at bottom:18px right:18px and is ~40px tall). 75px clears it
   with a small breathing gap so toasts never hide behind the button. */
#tz{position:fixed;bottom:75px;right:18px;z-index:999;display:flex;flex-direction:column;gap:6px;}
.tst{background:var(--surface2);border:1px solid var(--border2);color:var(--text);padding:9px 14px;border-radius:var(--r);font-size:12px;box-shadow:0 8px 32px rgba(0,0,0,.4);animation:tIn .2s ease;max-width:260px;display:flex;align-items:center;gap:8px;}
.tdot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:var(--text3);}
.tst.success .tdot{background:var(--green);}
.tst.info .tdot{background:var(--accent);}
.tst.warn .tdot{background:var(--amber);}
@keyframes tIn{from{transform:translateX(16px);opacity:0;}to{transform:translateX(0);opacity:1;}}
/* CONFETTI */
.cp{position:fixed;width:6px;height:6px;border-radius:1px;pointer-events:none;z-index:9999;animation:cf 1s ease-in forwards;}
@keyframes cf{0%{transform:translateY(-8px) rotate(0deg);opacity:1;}100%{transform:translateY(65vh) rotate(540deg);opacity:0;}}
/* MISC */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;color:var(--text3);font-size:12px;text-align:center;gap:5px;}
.eico{font-size:20px;opacity:.4;}
.sep{height:1px;background:var(--border);margin:12px 0;}
.daybtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:6px 3px;border-radius:var(--r);transition:background .15s;}
.daybtn:hover{background:var(--surface2);}
.daycircle{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text3);transition:all .2s;}
.daycircle.ck{background:var(--green);border-color:var(--green);color:#0C0D0F;}
.daylbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;}
input[type=range]{width:100%;height:3px;padding:0;background:var(--surface3);border-radius:99px;-webkit-appearance:none;cursor:pointer;border:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;}
.sort-bar{display:flex;gap:5px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
.sort-btn{padding:4px 10px;border-radius:99px;border:1px solid var(--border2);background:transparent;color:var(--text3);font-size:11px;cursor:pointer;font-family:var(--sans);transition:all .15s;}
.sort-btn:hover,.sort-btn.active{background:var(--adim);color:var(--accent);border-color:var(--aglow);}
/* SEARCHABLE SELECT — matches native <select> styling */
.ss-wrap{position:relative;}
.ss-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;background:#000;border:1px solid var(--border2);border-radius:var(--r);cursor:pointer;font-size:13px;color:var(--text);user-select:none;box-sizing:border-box;min-height:36px;transition:border-color .15s;outline:none;font-family:var(--sans);}
.ss-btn:focus{outline:none;}
.ss-btn:hover,.ss-btn.open{border-color:var(--accent2,rgba(255,255,255,0.3));}
.ss-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left;}
.ss-arrow{font-size:10px;color:var(--text3);margin-left:6px;flex-shrink:0;transition:transform .2s;}
.ss-btn.open .ss-arrow{transform:rotate(180deg);}
/* Build 0627 — locked searchable-select (context-fixed field, e.g. a new
   task's Project when created from inside that project). Reads as a settled
   value, not an open dropdown: dimmed, no pointer, arrow swapped for a lock. */
.ss-disabled{cursor:not-allowed;}
.ss-disabled .ss-btn{opacity:.7;pointer-events:none;}
.ss-disabled .ss-arrow{visibility:hidden;position:relative;}
.ss-disabled .ss-arrow::after{content:'';visibility:visible;position:absolute;right:0;top:50%;transform:translateY(-50%);width:13px;height:13px;background-color:currentColor;opacity:.72;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2013a2%202%200%200%201%202%20-2h10a2%202%200%200%201%202%202v6a2%202%200%200%201%20-2%202h-10a2%202%200%200%201%20-2%20-2v-6'/%3E%3Cpath%20d='M11%2016a1%201%200%201%200%202%200a1%201%200%200%200%20-2%200'/%3E%3Cpath%20d='M8%2011v-4a4%204%200%201%201%208%200v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2013a2%202%200%200%201%202%20-2h10a2%202%200%200%201%202%202v6a2%202%200%200%201%20-2%202h-10a2%202%200%200%201%20-2%20-2v-6'/%3E%3Cpath%20d='M11%2016a1%201%200%201%200%202%200a1%201%200%200%200%20-2%200'/%3E%3Cpath%20d='M8%2011v-4a4%204%200%201%201%208%200v4'/%3E%3C/svg%3E") center/contain no-repeat;}
.ss-panel{display:none;position:absolute;top:calc(100% + 2px);left:0;right:0;background:#000;border:1px solid var(--border2);border-radius:var(--r);z-index:9999;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.6);}
.ss-panel.open{display:block;}
.ss-search{width:100%;padding:8px 12px;border:none;border-bottom:1px solid var(--border2);background:transparent;color:var(--text);font-size:13px;outline:none;box-sizing:border-box;font-family:var(--sans);}
.ss-search::placeholder{color:var(--text3);}
.ss-list{list-style:none;margin:0;padding:4px 0;max-height:200px;overflow-y:auto;}
.ss-item{padding:7px 12px;font-size:13px;color:var(--text);cursor:pointer;transition:background .1s;}
.ss-item:hover{background:rgba(255,255,255,0.06);}
.ss-item.active{color:var(--amber);font-weight:600;}
.ss-empty{padding:8px 12px;font-size:12px;color:var(--text3);cursor:default;}
body.light-theme .ss-btn{background:#fff;}
body.light-theme .ss-panel{background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.12);}
body.light-theme .ss-item:hover{background:rgba(11,42,89,0.05);}
/* OWNERSHIP */
.owner-link{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:11px;background:var(--pdim);color:var(--purple);border:1px solid rgba(167,139,250,.2);cursor:pointer;}
.owner-link:hover{background:var(--pdim);filter:brightness(1.2);}
/* PUBLISH BTN */
.publish-btn{background:linear-gradient(135deg,var(--accent),var(--purple));color:#fff;border:none;}
.publish-btn:hover{filter:brightness(1.1);}
/* RITEM */
.remi{font-size:22px;display:block;margin-bottom:8px;}
.rname{font-size:12px;font-weight:500;}
.rcost{font-size:11px;color:var(--text3);margin-top:3px;font-family:var(--mono);}
/* Tablet/mobile responsive rules consolidated at 900px below. Keep this row only for 640px tweak. */
@media(max-width:640px){.page{padding:14px;}.g4{grid-template-columns:1fr 1fr;}}
/* DUE DATE TIMELINE BAR */
.due-bar-wrap{margin-top:6px;}
.due-bar-label{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);margin-bottom:3px;}
.due-bar-track{height:4px;background:var(--surface3);border-radius:99px;overflow:hidden;}
.due-bar-fill{height:100%;border-radius:99px;transition:width .4s,background .4s;}
.due-bar-fill.on-time{background:var(--green);}
.due-bar-fill.warning{background:var(--amber);}
.due-bar-fill.overdue{background:var(--red);}
/* BLOCKER SEARCH CHIPS */
.blk-chip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:99px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text3);font-family:var(--sans);transition:all .15s;}
.blk-chip:hover{background:rgba(255,255,255,0.05);color:var(--text2);}
.blk-chip.active{background:var(--surface2);color:var(--text);border-color:var(--border2);}
/* BLOCKER ENHANCED */
.brow-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:14px;margin-bottom:8px;transition:border-color .15s;}
.brow-card.bact{border-left:3px solid var(--red);background:rgba(248,113,113,.04);}
.brow-card.bres{border-left:3px solid var(--green);opacity:.6;}
.brow-card:hover{border-color:var(--border2);}
.brow-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;}
.brow-desc{flex:1;font-size:13px;font-weight:500;line-height:1.4;}
.brow-desc.red{color:var(--red);}
.brow-actions{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:8px;}
.blocker-link-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:11px;background:var(--adim2);color:var(--amber);border:1px solid rgba(251,191,36,.2);cursor:pointer;}
.blocker-link-badge:hover{filter:brightness(1.15);}
.help-req-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:11px;background:var(--pdim);color:var(--purple);border:1px solid rgba(167,139,250,.25);}
.comment-mini-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:99px;font-size:10px;font-weight:600;background:var(--adim2);color:var(--amber);border:1px solid rgba(251,191,36,.15);}
.task-due-bar{margin-top:5px;}
/* HELP REQUEST MODAL */
.help-req-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r);margin-bottom:5px;background:var(--surface2);}
.help-req-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0;}
/* HELP REQUEST PHASE BAR */
.phase-bar{display:flex;align-items:flex-start;gap:0;margin:10px 0 4px;}
.phase-step{display:flex;flex-direction:column;align-items:center;flex:1;}
.phase-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid var(--border2);background:var(--surface2);color:var(--text3);transition:all .3s;z-index:1;}
.phase-dot.ph-started{background:#34D399;border-color:#34D399;color:#0C0D0F;}
.phase-dot.ph-pending{background:#FBBF24;border-color:#FBBF24;color:#0C0D0F;}
.phase-dot.ph-completed{background:#34D399;border-color:#34D399;color:#0C0D0F;}
.phase-lbl{font-size:9px;font-weight:600;margin-top:3px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;text-align:center;}
.phase-lbl.ph-started{color:#34D399;}
.phase-lbl.ph-pending{color:#FBBF24;}
.phase-lbl.ph-completed{color:#34D399;}
.phase-conn{flex:1;height:2px;background:var(--surface3);margin-top:12px;transition:background .3s;}
.phase-conn.ph-done{background:#34D399;}
.phase-conn.ph-pend{background:#FBBF24;}
/* CALENDAR INPUTS */
input[type=datetime-local],input[type=date]{font-family:var(--mono);font-size:12px;color-scheme:dark;}
body.light-theme input[type=datetime-local],body.light-theme input[type=date]{color-scheme:light;}
.cal-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.third-party-fields{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);padding:10px;margin-top:6px;}
.help-phase-info{font-size:10px;color:var(--text3);margin-top:2px;}
/* IDENTITY WIDGET */
.identity-widget{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);padding:4px 10px;cursor:pointer;position:relative;}
.identity-widget:hover{border-color:var(--accent);}
.id-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;}
.id-name{font-size:12px;font-weight:500;color:var(--text);}
.id-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border2);border-radius:var(--rlg);box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:300;min-width:260px;display:none;padding:6px;}
.id-dropdown.open{display:block;}
.id-profile-head{display:flex;align-items:center;gap:10px;padding:10px 10px 8px;}
.id-av-lg{width:40px!important;height:40px!important;font-size:14px!important;}
.id-profile-name{font-size:13px;font-weight:600;color:var(--text);}
.id-profile-role{font-size:11px;color:var(--text3);margin-top:2px;}
.id-stats-row{display:flex;align-items:center;gap:0;background:var(--surface2);border-radius:var(--r);margin:0 4px 6px;padding:8px 0;}
.id-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;}
.id-stat-val{font-size:15px;font-weight:700;color:var(--amber);}
.id-stat-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;}
.id-stat-div{width:1px;height:28px;background:var(--border2);}
.id-section-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;padding:4px 10px 4px;}
.id-act-ico{font-size:14px;width:20px;text-align:center;flex-shrink:0;}
.id-divider{border-top:1px solid var(--border);margin:6px 4px;}
.id-user-scroll{max-height:180px;overflow-y:auto;}
.id-footer{font-size:10px;color:var(--text3);text-align:center;padding:6px 10px 4px;}
.id-option{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r);cursor:pointer;transition:background .15s;}
.id-option:hover{background:var(--surface2);}
.id-option.active-user{background:var(--adim);border-left:2px solid var(--accent);}
.id-option-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.id-option-name{font-size:12px;font-weight:500;}
.id-option-role{font-size:10px;color:var(--text3);}
/* OWNERSHIP REVAMP */
.own-member-row{display:grid;grid-template-columns:220px 1fr 160px;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border);}
.own-member-row:last-child{border-bottom:none;}
.own-member-left{display:flex;align-items:center;gap:10px;min-width:0;}
.own-mav{width:36px!important;height:36px!important;font-size:12px!important;flex-shrink:0;}
.own-member-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.own-member-role{font-size:11px;color:var(--text3);margin-top:1px;}
.own-member-meta{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;}
.own-member-badges{display:flex;gap:8px;align-items:center;}
.own-badge{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 18px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);cursor:pointer;transition:border-color .15s,background .15s;min-width:76px;}
.own-badge:hover{border-color:var(--accent);background:var(--adim);}
.own-badge.active{border-color:var(--accent);background:var(--adim);}
.own-badge-ico{font-size:20px;line-height:1;}
.own-badge-count{font-size:20px;font-weight:700;color:var(--amber);line-height:1.1;}
.own-badge-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;}
.own-member-progress-wrap{display:flex;flex-direction:column;gap:5px;}
.own-member-pct{font-size:11px;color:var(--text3);font-family:var(--mono);}
/* OWNERSHIP MODAL */
.own-modal-sub{font-size:11px;color:var(--text3);margin-top:3px;}
.own-modal-summary{padding:16px 20px 4px;display:flex;flex-direction:column;gap:10px;}
.own-summary-stat{font-size:12px;color:var(--text2);}
.own-summary-stat strong{color:var(--text);font-family:var(--mono);}
.own-progress-track{height:8px;background:var(--surface2);border-radius:99px;overflow:hidden;border:1px solid var(--border);}
.own-progress-fill{height:100%;border-radius:99px;background:var(--green);transition:width .3s ease;}
.own-progress-fill.pam{background:var(--amber);}
.own-progress-fill.prd{background:var(--red);}
/* OWNERSHIP TABLE */
.own-table{width:100%;border-collapse:collapse;font-size:12px;}
/* Build 0613 — fit: the name column owns the slack (42%) so task names stop
   wrapping while the near-empty Due column starves; tighter cell padding. */
.own-table th{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;padding:11px 14px;border-bottom:1px solid var(--border2);text-align:left;white-space:nowrap;position:sticky;top:0;background:var(--surface);z-index:1;}
.own-table th:first-child{width:42%;}
.own-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;line-height:1.5;}
.own-table tr:last-child td{border-bottom:none;}
.own-table tbody tr:hover td{background:var(--surface2);}
.own-tbl-name{background:none;border:none;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;padding:0;text-align:left;transition:color .15s;}
.own-tbl-name:hover{color:var(--accent);}
.own-tbl-sub{font-size:10px;color:var(--text3);margin-top:2px;}
.own-tbl-due{font-size:11px;color:var(--text3);white-space:nowrap;font-family:var(--mono);}
.own-tbl-actions{display:flex;gap:4px;align-items:center;}
.own-tbl-sel{font-size:11px;padding:3px 6px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);color:var(--text);cursor:pointer;max-width:120px;}
.own-icon-btn{width:26px;height:26px;border:1px solid var(--border2);border-radius:var(--r);background:none;color:var(--text3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;transition:border-color .15s,color .15s;}
.own-icon-btn:hover{border-color:var(--accent);color:var(--accent);}
/* Build 0949 — Ownership member modal: scoped smart search row + bulk reassign
   bar (static shell in command-center.html; content rendered by ownership.js).
   Tokens only, so both themes come for free. */
.own-modal-search-row{display:flex;gap:8px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.own-modal-search-row input{flex:1;background:transparent;border:none;outline:none;font-size:13px;color:var(--text);font-family:var(--sans);}
.own-modal-search-row input::placeholder{color:var(--text3);}
.own-bulk-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 20px;border-top:1px solid var(--border);flex-shrink:0;}
.own-bulk-count{font-size:12px;font-weight:600;color:var(--text2);white-space:nowrap;}
.own-bulk-ss{flex:0 1 240px;min-width:180px;}
/* The modal shell is overflow:hidden, so the member picker opens UPWARD to
   stay visible above the bulk bar instead of clipping below the modal edge. */
.own-bulk-ss .ss-panel{top:auto;bottom:calc(100% + 2px);}
/* ACTIVITY LOG */
.alog-item{display:flex;align-items:flex-start;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);transition:background .15s;}
.alog-item:hover{background:var(--surface2);}
.alog-item:last-child{border-bottom:none;}
.alog-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;margin-top:1px;}
.alog-body{flex:1;min-width:0;}
.alog-action{font-size:13px;color:var(--text);line-height:1.4;}
.alog-action strong{font-weight:600;}
.alog-meta{font-size:11px;color:var(--text3);margin-top:2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.alog-type-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:600;}
.alog-undo-btn{background:var(--adim);color:var(--accent);border:1px solid var(--aglow);border-radius:5px;padding:2px 8px;font-size:10px;cursor:pointer;font-family:var(--sans);font-weight:600;transition:all .15s;white-space:nowrap;}
.alog-undo-btn:hover{background:var(--accent);color:#fff;}
.alog-undo-btn:disabled{opacity:.35;cursor:not-allowed;}
/* MILESTONE TABS */
.rw-tabs{display:flex;gap:3px;background:var(--surface2);border-radius:var(--r);padding:3px;margin-bottom:14px;}
.rw-tab{flex:1;padding:8px 12px;text-align:center;font-size:12px;font-weight:500;color:var(--text3);border:none;background:transparent;border-radius:7px;cursor:pointer;font-family:var(--sans);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;}
.rw-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.2);}
.rw-tab .rw-tab-ico{font-size:14px;}
/* MILESTONE CARD */
.ritem{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:16px 12px;text-align:center;cursor:pointer;transition:all .2s;position:relative;}
.ritem:hover{border-color:var(--accent);transform:translateY(-1px);}
.ritem.claimed{opacity:.45;}
.ritem.avail{border-color:rgba(79,142,247,.3);box-shadow:0 0 0 2px rgba(79,142,247,.08);}
.ritem.team-reward{border-color:rgba(167,139,250,.25);background:linear-gradient(145deg,var(--surface),rgba(167,139,250,.04));}
.ritem.team-reward:hover{border-color:var(--purple);}
.ritem.team-reward.avail{border-color:rgba(167,139,250,.4);box-shadow:0 0 0 2px rgba(167,139,250,.1);}
.ritem.team-reward.claimed{opacity:.45;}
.rw-team-badge{position:absolute;top:7px;right:8px;background:var(--pdim);color:var(--purple);border:1px solid rgba(167,139,250,.25);border-radius:99px;font-size:9px;font-weight:700;padding:1px 6px;letter-spacing:.3px;text-transform:uppercase;}
.team-rw-progress{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.team-rw-ptrack{height:4px;background:var(--surface3);border-radius:99px;overflow:hidden;margin-bottom:3px;}
.team-rw-pfill{height:100%;border-radius:99px;background:var(--purple);transition:width .4s;}
.team-rw-label{font-size:9px;color:var(--text3);display:flex;justify-content:space-between;}
/* TEAM SCORE */
.team-xp-pool{background:linear-gradient(135deg,rgba(167,139,250,.1),rgba(79,142,247,.06));border:1px solid rgba(167,139,250,.2);border-radius:var(--rlg);padding:16px 18px;margin-bottom:14px;}
.pool-bar-wrap{background:var(--surface3);border-radius:99px;height:8px;overflow:hidden;margin:8px 0 4px;}
.pool-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--accent));transition:width .5s;}
/* CONTRIBUTE MODAL */
.contribute-member{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r);margin-bottom:5px;background:var(--surface2);}
.contribute-input{width:80px;padding:4px 8px;border-radius:6px;border:1px solid var(--border2);background:#000;color:var(--text);font-family:var(--mono);font-size:12px;text-align:center;}
/* RESTORE POINTS */
.rp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:14px 16px;margin-bottom:8px;transition:border-color .15s;}
.rp-card:hover{border-color:var(--border2);}
.rp-card.auto-rp{border-left:3px solid var(--accent);}
.rp-card.manual-rp{border-left:3px solid var(--green);}
.rp-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px;}
.rp-name{font-size:13px;font-weight:600;color:var(--text);}
.rp-meta{font-size:11px;color:var(--text3);margin-top:2px;}
.rp-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.rp-restore-btn{background:linear-gradient(135deg,var(--accent),var(--purple));color:#fff;border:none;border-radius:var(--r);padding:5px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .15s;white-space:nowrap;flex-shrink:0;}
.rp-restore-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.rp-preview{font-size:11px;color:var(--text3);margin-top:6px;padding-top:6px;border-top:1px solid var(--border);line-height:1.5;}
/* EXPORT MODAL */
.export-format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.export-fmt-btn{padding:12px 8px;border-radius:var(--r);border:1.5px solid var(--border2);background:var(--surface2);cursor:pointer;text-align:center;transition:all .2s;font-family:var(--sans);}
.export-fmt-btn:hover{border-color:var(--accent);background:var(--adim);}
.export-fmt-btn.selected{border-color:var(--amber);background:var(--adim2);box-shadow:0 0 0 2px var(--amber),0 0 14px rgba(212,175,55,.40);}
.export-fmt-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.export-fmt-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.export-fmt-ico{font-size:22px;display:block;margin-bottom:5px;}
.export-fmt-name{font-size:11px;font-weight:600;color:var(--text);display:block;}
.export-fmt-ext{font-size:10px;color:var(--text3);display:block;font-family:var(--mono);}
.export-scope-row{display:flex;gap:8px;margin-bottom:14px;}
.export-scope-btn{flex:1;padding:10px 12px;border-radius:var(--r);border:1.5px solid var(--border2);background:var(--surface2);cursor:pointer;transition:all .2s;font-family:var(--sans);text-align:left;}
.export-scope-btn:hover{border-color:var(--accent);background:var(--adim);}
.export-scope-btn.selected{border-color:var(--amber);background:var(--adim2);box-shadow:0 0 0 2px var(--amber),0 0 14px rgba(212,175,55,.40);}
.export-scope-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.export-scope-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.export-scope-title{font-size:13px;font-weight:600;color:var(--text);display:block;margin-bottom:3px;}
.export-scope-desc{font-size:11px;color:var(--text3);line-height:1.4;}
/* ENHANCED UNDO BAR */
#undo-bar{position:fixed;bottom:66px;right:18px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);padding:10px 16px;display:none;align-items:center;gap:12px;z-index:500;box-shadow:0 8px 32px rgba(0,0,0,.5);font-size:13px;max-width:420px;}
#undo-bar.show{display:flex;}
#undo-bar-msg{color:var(--text2);flex:1;}
#undo-stack-count{font-family:var(--mono);font-size:11px;color:var(--text3);}
/* FILTER BAR FOR ACTIVITY LOG */
.alog-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.alog-filter-btn{padding:4px 10px;border-radius:99px;border:1px solid var(--border2);background:transparent;color:var(--text3);font-size:11px;cursor:pointer;font-family:var(--sans);transition:all .15s;}
.alog-filter-btn:hover,.alog-filter-btn.active{background:var(--adim);color:var(--accent);border-color:var(--aglow);}

/* ═══ MOBILE RESPONSIVE ═══ Single 1024px breakpoint (Build 0718 #1 — raised from 900 so the hamburger opens a real off-canvas drawer at half-screen ~960px widths; pairs with isMobileWidth()<=1024 in mobile.js) */
@media(max-width:1024px){
  .app{grid-template-columns:1fr;}
  .sidebar{display:none;position:fixed;top:calc(var(--topbar-h) + var(--app-offset));left:var(--app-safe-left);width:min(260px, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px));height:calc(var(--app-vh) - var(--topbar-h) - var(--app-offset));max-height:calc(var(--app-vh) - var(--topbar-h) - var(--app-offset));z-index:150;transform:translateX(calc(-100% - var(--app-safe-left)));transition:transform .25s ease;}
  .sidebar.mobile-open{display:flex;transform:translateX(0);}
  /* Build 0860 (#22 mobile-a11y) — raise the hamburger above the .sidebar-overlay scrim
     (z-index:140) so it stays clickable while the drawer is open; without its own z-index
     it inherited the topbar's 100 and the full-viewport scrim swallowed the close tap.
     160 keeps it above the off-canvas sidebar (150) too. */
  .mobile-menu-btn{display:flex!important;position:relative;z-index:160;}
  .topbar{padding:0 max(12px,var(--app-safe-right)) 0 max(12px,var(--app-safe-left));gap:8px;min-width:0;}
  .topbar-left,.topbar-right{min-width:0;}
  .search-bar{max-width:none;flex:1;min-width:88px;}
  .search-results{left:auto;right:0;width:auto;min-width:min(100%, calc(100vw - 24px));max-width:calc(100vw - 24px);} /* Build 0824 (F11a) — anchor right + clamp to viewport so the panel can't push off-screen */
  .search-kbd,.topbar-right .xp-mod,.topbar-right .date-txt{display:none!important;}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr!important;}
  .page{padding:14px;}
  .ph{margin-bottom:14px;}
  .stat{padding:12px 14px;}
  .sv{font-size:22px;}
  .rw-tabs{overflow-x:auto;}
  .kpi-row{flex-wrap:wrap;}
  .kpi{min-width:80px;}
  .export-format-grid{grid-template-columns:repeat(2,1fr)!important;}
  .export-scope-row{flex-direction:column;}
  #undo-bar{width:min(90vw,340px);max-width:calc(100vw - 24px - var(--app-safe-left) - var(--app-safe-right));right:max(12px,var(--app-safe-right));bottom:calc(12px + var(--app-safe-bottom));}
}
@media(min-width:1025px){
  .mobile-menu-btn{display:flex!important;}
  .sidebar-overlay{display:none!important;}
  /* Collapsed sidebar (icon-only) — toggled by hamburger on desktop */
  .app.nav-collapsed{grid-template-columns:56px 1fr;}
  .app.nav-collapsed .sidebar{padding:8px 0;}
  .app.nav-collapsed .sidebar .nav-lbl{display:none;}
  .app.nav-collapsed .sidebar .nav-btn{padding:9px 0;justify-content:center;gap:0;border-left-width:3px;position:relative;}
  .app.nav-collapsed .sidebar .nav-btn .nav-text{display:none;}
  .app.nav-collapsed .sidebar .nav-btn .nav-ico{font-size:18px;width:auto;opacity:.85;}
  .app.nav-collapsed .sidebar .nav-btn .nav-ico .vdi{width:20px;height:20px;}
  .app.nav-collapsed .sidebar .nav-btn.active .nav-ico{opacity:1;}
  .app.nav-collapsed .sidebar .nav-btn .nav-badge{position:absolute;top:4px;right:6px;font-size:9px;padding:0 4px;min-width:14px;height:14px;line-height:14px;border-radius:8px;}
  .app.nav-collapsed .sidebar-foot{display:none;}
  /* Build 0859 — reserve bottom-left corner space for the floating Feedback FAB
     (#fb-launcher, position:fixed left:18px/bottom:18px) so the pill never covers
     the sidebar version footer (the bug the user flagged). Anchoring the clearance
     to the footer's own bottom margin keeps it correct no matter how many lines the
     tagline wraps to. Desktop only: on mobile (<=1024px) the sidebar + footer live
     in the off-canvas drawer and the FAB floats over content (and hides when the
     drawer opens, Build 0858); nav-collapsed hides the footer entirely. */
  .sidebar-foot{margin-bottom:66px;}
}
@media(max-width:480px){
  .g4{grid-template-columns:1fr 1fr!important;}
  .topbar-right .theme-toggle{display:none!important;}
  .pt{font-size:18px;}
  .topbar{gap:6px;}
  .search-bar{min-width:72px;}
  .topbar .search-bar input{padding-right:34px;}
  .search-clear,.search-kbd{display:none!important;}
}
/* MOBILE OVERLAY */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:140;max-height:var(--app-vh);}
.sidebar-overlay.show{display:block;}
/* MOBILE MENU BTN */
.mobile-menu-btn{width:32px;height:32px;border:1px solid var(--border2);background:var(--surface);border-radius:var(--r);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;flex-shrink:0;}/* Build 0721 (QA) — base display:flex (was none) closes the 1024↔1025px fractional-width gap where neither media query applied and the hamburger vanished; both media queries force flex anyway. */
/* ═══ RECURRING TASKS ═══ */
.recur-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:99px;font-size:10px;background:var(--gdim);color:var(--green);border:1px solid rgba(52,211,153,.2);}
/* ═══ CALENDAR VIEW ═══ */
/* Build 0328 — Outlook-style view ribbon for the calendar. Each button
   shows a tiny SVG preview of the layout + a label below. Active state
   gets the brand navy/gold treatment. */
.cal-view-ribbon{display:flex;gap:2px;align-items:stretch;padding:4px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;}
.cal-view-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:62px;padding:6px 10px;background:transparent;border:1px solid transparent;border-radius:7px;font-size:11px;font-weight:500;color:var(--text2);cursor:pointer;font-family:var(--sans);transition:all .15s;}
.cal-view-btn:hover{background:rgba(201,169,97,0.10);color:var(--text);}
.cal-view-btn.active{background:linear-gradient(135deg,#0F2347,#0B1B36);color:#fff;border-color:rgba(201,169,97,.45);box-shadow:0 2px 8px rgba(15,35,71,.20);}
body.light-theme .cal-view-btn.active{background:var(--accent);}
.cal-view-ico{width:28px;height:22px;color:currentColor;flex-shrink:0;}
.cal-view-btn span{white-space:nowrap;}
@media (max-width:680px){
  .cal-view-ribbon{flex-wrap:wrap;}
  .cal-view-btn{min-width:54px;padding:5px 7px;font-size:10px;}
  .cal-view-btn span{font-size:10px;}
  .cal-legend{display:none !important;}
}

/* Build 0328 — Day view: vertical hour stack */
.cal-day-view{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.cal-day-view-head{padding:14px 18px;background:var(--surface2);border-bottom:1px solid var(--border);font-weight:600;color:var(--text);font-size:15px;}
.cal-hour-row{display:grid;grid-template-columns:60px 1fr;gap:0;border-top:1px solid var(--border);min-height:48px;}
.cal-hour-row:first-of-type{border-top:none;}
.cal-hour-label{padding:6px 8px;text-align:right;font-size:10px;color:var(--text3);font-family:var(--mono);border-right:1px solid var(--border);background:var(--surface2);}
.cal-hour-cell{padding:4px 8px;display:flex;flex-direction:column;gap:3px;}

/* Build 0328 — Schedule view: resource rows × time columns */
.cal-schedule{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:auto;}
.cal-schedule-head{display:grid;background:var(--surface2);border-bottom:1px solid var(--border);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);}
.cal-schedule-row{display:grid;border-top:1px solid var(--border);min-height:54px;align-items:center;}
.cal-schedule-row:first-of-type{border-top:none;}
.cal-schedule-resource{padding:10px 14px;font-size:12px;font-weight:600;color:var(--text);background:var(--surface2);border-right:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.cal-schedule-resource-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;}
.cal-schedule-slot{padding:4px 6px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px;font-size:10px;}
.cal-schedule-slot:last-child{border-right:none;}

/* Build 0328 — Responsive calendar grid. On small screens the Month
   grid stays as a grid but reduces padding/font; Week and Work Week
   stack to a single column. */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border-radius:var(--r);overflow:hidden;font-size:11px;}
@media (max-width:680px){
  .cal-grid{font-size:10px;}
  .cal-day{padding:4px 3px !important;min-height:50px !important;}
  .cal-day-num{font-size:10px !important;}
  .cal-event{font-size:9px !important;padding:1px 4px !important;}
}
@media (max-width:520px){
  /* Week & work-week: stack into one column on narrow phones */
  .cal-grid.cal-grid-week,
  .cal-grid.cal-grid-workweek{grid-template-columns:1fr;}
}
.cal-header{background:var(--surface2);padding:6px 4px;text-align:center;font-weight:700;color:var(--text3);font-size:10px;text-transform:uppercase;letter-spacing:.5px;}
.cal-day{background:var(--surface);padding:6px 5px;min-height:70px;cursor:pointer;transition:background .15s;position:relative;}
.cal-day:hover{background:var(--surface2);}
.cal-day.today{background:var(--adim);border:1px solid var(--aglow);}
.cal-day.other-month{opacity:.35;}
.cal-day-num{font-size:11px;font-weight:600;color:var(--text3);margin-bottom:3px;}
.cal-day.today .cal-day-num{color:var(--accent);font-weight:800;}
/* Build 0328g — Brand-tied vibrant event chips with 4px left bar.
   Bumped saturation so categories visually differentiate at a glance.
   Dark mode keeps brighter text colors for legibility on dark bg.
   Light mode (overrides further down) uses deeper saturated backgrounds
   with the category's signature dark text. */
.cal-event{font-size:10px;padding:2px 6px 2px 7px;border-radius:4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-left:4px solid;font-weight:500;}
.cal-event.task-ev {background:rgba(110,141,198,0.22);border-left-color:#6E8DC6;color:#B4CCF0;}
.cal-event.proj-ev {background:rgba(176,140,224,0.22);border-left-color:#B08CE0;color:#DDC0F0;}
.cal-event.goal-ev {background:rgba(77,214,164,0.20); border-left-color:#4DD6A4;color:#9CECC8;}
.cal-event.block-ev{background:rgba(212,175,55,0.24); border-left-color:#D4AF37;color:#F3DC8E;}
/* Build 0328f — Today gets a gold gradient top-bar instead of the
   subtle outline. Bigger bold number too. */
.cal-day.today{background:linear-gradient(135deg,rgba(212,175,55,0.14),rgba(212,175,55,0.04)) !important;border:none !important;position:relative;}
.cal-day.today::before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,#D4AF37,#C9A961);}
.cal-day.today .cal-day-num{font-size:14px;font-weight:800;}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-month{font-size:16px;font-weight:600;}
.cal-nav-btn{background:var(--surface2);border:1px solid var(--border2);color:var(--text);border-radius:var(--r);padding:5px 12px;cursor:pointer;font-family:var(--sans);font-size:13px;}
/* ═══ ARCHIVE ═══ */
.archive-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:4px;opacity:.65;}
.archive-row:hover{opacity:1;border-color:var(--border2);}
@media (max-width:700px){
  #p-archive .ph{gap:12px;}
  #p-archive .ph > div:last-child{width:100%;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  #p-archive .ph .btn{width:100%;justify-content:center;}
  #p-archive .archive-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:5px;border-radius:14px;}
  #p-archive .archive-tabs .ttab{min-width:0;padding:11px 8px;text-align:center;white-space:normal;}
  #p-archive #arc-tab-work > .card:first-child{display:grid !important;grid-template-columns:1fr auto;gap:8px;padding:12px !important;border-radius:16px !important;align-items:center !important;}
  #p-archive #arc-tab-work > .card:first-child > span{grid-column:1 / -1;}
  #p-archive #tabq-archive{display:block;grid-column:1 / -1;max-width:none;min-height:40px;border-radius:12px;padding:9px 12px;background:var(--surface);}
  #p-archive #tabq-mode-archive{display:none;}
  #p-archive #tabq-clear-archive{justify-self:end;}
  #p-archive .card{overflow:hidden;}
  #p-archive .archive-row{display:grid;grid-template-columns:6px minmax(0,1fr) minmax(0,1fr);align-items:start;gap:8px 10px;padding:12px;border-radius:14px;opacity:1;}
  #p-archive .archive-row .pbar{grid-column:1;grid-row:1 / span 3;width:4px !important;height:100% !important;min-height:48px;border-radius:999px !important;align-self:stretch;}
  #p-archive .archive-row > div:first-child:not(.pbar){grid-column:1;grid-row:1;width:6px !important;height:6px !important;margin-top:7px;}
  #p-archive .archive-row > div[style*="flex:1"]{grid-column:2 / -1;min-width:0 !important;}
  #p-archive .archive-row > div[style*="flex:1"] > div:first-child{font-size:14px !important;line-height:1.3;overflow-wrap:break-word;}
  #p-archive .archive-row > div[style*="flex:1"] > div:not(:first-child){line-height:1.35;}
  #p-archive .archive-row > .tag,
  #p-archive .archive-row > .btn{min-width:0;width:100%;justify-content:center;text-align:center;white-space:normal;}
  #p-archive .archive-row > .tag{display:inline-flex;align-items:center;min-height:32px;}
  #p-archive .archive-row > .btn{min-height:34px;}
  #arc-block-list .archive-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  #arc-block-list .archive-row > div[style*="flex:1"]{grid-column:1 / -1;}
}
/* ═══ LINK TRACKING ═══ */
.time-task-link{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--accent);background:var(--adim);padding:1px 6px;border-radius:99px;cursor:pointer;}
/* Ownership clickable item links */
.own-open-link{background:transparent;border:0;color:var(--text);font:inherit;padding:0;cursor:pointer;}
.own-open-link:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.owner-click{border:1px solid transparent;cursor:pointer;font:inherit;}
.owner-click:hover{filter:brightness(1.15);border-color:var(--border2);}

/* ═══ WORKFLOW BOARD / MAP ═══ */
.workflow-board{display:grid;grid-template-columns:repeat(7,minmax(220px,1fr));gap:10px;overflow-x:auto;padding-bottom:4px;}
.workflow-col{background:var(--surface2);border:1px solid var(--border);border-radius:var(--rlg);min-width:220px;display:flex;flex-direction:column;max-height:calc(var(--app-vh) - var(--app-offset) - 335px);}
.workflow-col-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:12px;border-bottom:1px solid var(--border);}
.workflow-col-title{font-size:13px;font-weight:700;color:var(--text);}
.workflow-col-desc{font-size:10px;color:var(--text3);line-height:1.35;margin-top:3px;}
.workflow-col-list{padding:8px;overflow-y:auto;}
.workflow-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px;margin-bottom:8px;transition:border-color .15s,transform .15s;}
.workflow-card:hover{border-color:var(--border2);transform:translateY(-1px);}
.workflow-card.blocked{border-left:3px solid var(--red);}
.workflow-card.completed{border-left:3px solid var(--green);opacity:.78;}
.workflow-card.review{border-left:3px solid #3DC8B8;}
.workflow-card.in_progress{border-left:3px solid var(--purple);}
.workflow-card.assigned{border-left:3px solid var(--accent);}
.workflow-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:6px;}
.workflow-card-title{background:transparent;border:0;color:var(--text);font-size:12px;font-weight:700;text-align:left;line-height:1.25;cursor:pointer;padding:0;}
.workflow-card-title:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.workflow-card-meta{font-size:10px;color:var(--text3);display:flex;gap:6px;flex-wrap:wrap;line-height:1.4;margin-bottom:5px;}
.workflow-card-actions{display:flex;align-items:center;gap:5px;margin-top:8px;}
.workflow-select{font-size:10px;padding:4px 7px;border-radius:7px;min-width:0;}
.workflow-empty{font-size:11px;color:var(--text3);text-align:center;border:1px dashed var(--border2);border-radius:var(--r);padding:16px 8px;}
.workflow-map-wrap{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding:4px 0 8px;}
.workflow-map-step{display:flex;align-items:center;gap:8px;min-width:max-content;}
.workflow-map-node{width:180px;min-height:150px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rlg);padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.workflow-map-node.blocked{border-color:rgba(248,113,113,.35);background:var(--rdim);}
.workflow-map-node.completed{border-color:rgba(52,211,153,.35);background:var(--gdim);}
.workflow-map-node.review{border-color:rgba(61,200,184,.35);background:rgba(61,200,184,.08);}
.workflow-map-icon{font-size:26px;margin-bottom:8px;}
.workflow-map-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:5px;}
.workflow-map-desc{font-size:11px;color:var(--text2);line-height:1.35;}
.workflow-map-count{font-family:var(--mono);font-size:11px;color:var(--accent);margin-top:8px;}
.workflow-map-arrow{font-size:22px;color:var(--text3);padding:0 2px;}
.workflow-help-loop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--text2);}
.workflow-help-loop div{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:8px 12px;color:var(--text);}
.workflow-help-loop span{color:var(--text3);font-weight:700;}
.workflow-card.wf-dragging{opacity:.35;transform:scale(.96);cursor:grabbing;}
.workflow-col-list.wf-drag-over{background:var(--adim);border-radius:var(--r);outline:2px dashed var(--accent);outline-offset:-4px;}
@media(max-width:900px){
  .workflow-board{grid-template-columns:1fr;overflow-x:visible;}
  .workflow-col{max-height:none;}
  .workflow-map-wrap{flex-direction:column;}
  .workflow-map-step{flex-direction:column;}
  .workflow-map-arrow{transform:rotate(90deg);}
  .workflow-map-node{width:100%;}
}


/* VITAE DUX BRAND + COMPETITIVE FEATURES */
.btn-p{background:linear-gradient(135deg,var(--accent),#10284e);border:1px solid rgba(212,175,55,0.22);box-shadow:0 10px 24px rgba(0,0,0,.16);}
body.light-theme .btn-p{background:var(--accent);}
.topbar,.sidebar{backdrop-filter:saturate(120%) blur(4px);}
.xp-fill{background:linear-gradient(90deg,var(--amber),#F2D77C);}
.xp-val{color:var(--amber);}
.nav-btn.active,.t-bl{box-shadow:inset 0 0 0 1px rgba(212,175,55,0.08);}

.about-hero{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:22px;align-items:center;background:linear-gradient(135deg,rgba(23,60,116,0.18),rgba(212,175,55,0.08));}
.about-logo-card{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border:1px solid var(--border);border-radius:18px;padding:16px;display:flex;align-items:center;justify-content:center;min-height:280px;}
.about-logo-image{width:100%;max-width:420px;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.12));}
.about-copy h2{font-size:32px;line-height:1.05;letter-spacing:-.04em;margin-bottom:10px;}
.about-kicker{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:10px;}
.about-lead{font-size:15px;line-height:1.7;color:var(--text2);max-width:760px;}
.about-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.about-list{list-style:none;display:flex;flex-direction:column;gap:12px;color:var(--text2);line-height:1.6;}
.about-list li{padding:12px 0;border-top:1px solid var(--border);}
.about-list li:first-child{padding-top:0;border-top:none;}
.about-list strong{color:var(--text);}
.about-meta{display:flex;flex-direction:column;gap:10px;}
.about-meta-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border);font-size:13px;color:var(--text2);}
.about-meta-row:first-child{padding-top:0;border-top:none;}
.about-meta-row strong{color:var(--text);text-align:right;}
.about-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.about-stat{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px;}
.about-stat-value{font-size:24px;font-family:var(--mono);color:var(--amber);letter-spacing:-.04em;}
.about-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-top:6px;}

/* Build 0331c — Command Review tabs: text-only responsive grid.
   auto-fit + minmax keeps columns equal and wraps any remainder to
   the next row. Tabs reshape automatically as the window resizes:
     Desktop ≥1100px → 5 cols × 2 rows
     Tablet  700-1100  → 4 cols × 3 rows
     Tablet  520-700   → 3 cols × 4 rows
     Phone   <520      → 2 cols × 5 rows */
.cr-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;margin-bottom:14px;overflow:visible;white-space:normal;}
.cr-tab{flex:initial;min-width:0;width:auto;text-align:center;padding:10px 12px;font-size:12px;line-height:1.3;white-space:normal;word-break:keep-all;}
@media (max-width:520px){
  .cr-tabs{grid-template-columns:repeat(2,1fr);}
  .cr-tab{padding:9px 8px;font-size:11px;}
}
.cr-tab-panel{animation:crFade .18s ease;}
@keyframes crFade{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ===== Build 0741 — Command Review 4-group regroup (Slice A) ===== */
.cr-group-sec{margin:0;padding:0;}
.cr-group-sec + .cr-group-sec{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);}
.cr-group-sec > h4{margin:0 0 10px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--text3);}
.cr-group-sec.cr-band-setup{margin-top:18px;padding-top:0;border-top:none;}
.cr-group-sec.cr-band-reports{margin-top:18px;padding:16px;border-top:none;background:var(--surface2);border:1px dashed var(--border2);border-radius:var(--rlg);}
.cr-group-sec.cr-band-reports > .cr-band-head{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--text2);}
.cr-group-sec.cr-band-reports > .cr-band-head .cr-band-tag{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--amber);background:var(--adim2);border:1px solid var(--border2);border-radius:10px;padding:2px 8px;}
.cr-group-sec.cr-band-reports .card{background:var(--bg2);}
/* ===== end Slice A ===== */
.cr-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:8px;}
.cr-row:hover{border-color:var(--border2);background:var(--surface2);}
.cr-row-main{min-width:0;flex:1;}
.cr-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;}
.cr-meta{font-size:11px;color:var(--text3);line-height:1.5;}
.cr-desc{font-size:12px;color:var(--text2);line-height:1.5;margin-top:5px;}
.cr-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.cr-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.cr-template-card{border:1px solid var(--border);border-radius:var(--rlg);background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:10px;}
.cr-template-card:hover{border-color:var(--aglow);}
.cr-score-row{display:grid;grid-template-columns:1.2fr 1fr 2fr .6fr;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:8px;}
.cr-score-meter{height:7px;background:var(--surface3);border-radius:99px;overflow:hidden;}
.cr-score-fill{height:100%;background:linear-gradient(90deg,var(--red),var(--amber),var(--green));border-radius:99px;}
.cr-perm-grid{display:grid;grid-template-columns:1fr repeat(6,minmax(70px,.6fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--rlg);overflow:hidden;}
.cr-perm-cell{background:var(--surface);padding:10px;font-size:12px;color:var(--text2);display:flex;align-items:center;justify-content:center;text-align:center;min-height:42px;}
.cr-perm-cell.head{background:var(--surface2);font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.06em;font-size:10px;}
.cr-perm-cell.role{justify-content:flex-start;color:var(--text);font-weight:700;}
.cr-link-box{border:1px dashed var(--border2);background:var(--surface2);padding:12px;border-radius:var(--r);font-family:var(--mono);font-size:11px;color:var(--text2);word-break:break-all;}
@media(max-width:1100px){.cr-template-grid{grid-template-columns:1fr 1fr}.cr-score-row{grid-template-columns:1fr}.cr-perm-grid{overflow-x:auto;display:block}.cr-perm-cell{justify-content:flex-start;text-align:left;border-bottom:1px solid var(--border)}.about-hero{grid-template-columns:1fr}.about-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){.cr-template-grid{grid-template-columns:1fr}.about-stats{grid-template-columns:1fr}.about-copy h2{font-size:28px;}}


/* COMPACT ROLES & PERMISSIONS FIX */
.cr-simple-note{font-size:12px;color:var(--text2);line-height:1.5;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:10px;}
/* Build 0229 — Always-on, uniform-height role-preset cards.
   Grid + flex column on each card keeps title-heights aligned even when
   descriptions wrap to different line counts. */
.cr-role-preset-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:10px;align-items:stretch;}
.cr-role-preset{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden;display:flex;flex-direction:column;height:100%;}
.cr-role-preset-head{padding:9px 12px;font-size:12px;font-weight:700;color:var(--text);background:var(--surface);border-bottom:1px solid var(--border);}
.cr-role-preset-desc{flex:1;padding:9px 12px;font-size:11px;line-height:1.5;color:var(--text2);background:var(--surface2);}
/* Build 0230 — Permissions Matrix is now always-on (no <details>/<summary>).
   Static header + always-visible grid below. */
.cr-permission-dropdown{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden;margin-bottom:10px;}
.cr-permission-head{padding:10px 12px;display:flex;align-items:center;font-size:12px;font-weight:700;color:var(--text);background:var(--surface);border-bottom:1px solid var(--border);}
.cr-perm-grid-compact{border:none;border-radius:0;grid-template-columns:1.25fr repeat(5,minmax(78px,.65fr));overflow-x:auto;}
.cr-perm-grid-compact .cr-perm-cell{min-height:34px;padding:7px 8px;font-size:11px;}

/* Build 0258 — Mobile card layout for the Permissions Matrix.
   Default: cards hidden on desktop. <700px: grid hidden, cards shown. */
.cr-perm-cards{ display: none; }
@media (max-width: 700px){
  .cr-perm-grid{ display: none !important; }
  .cr-perm-cards{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }
}
.cr-perm-card{
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.cr-perm-card-name{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: 0.1px;
}
.cr-perm-card-roles{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
}
.cr-perm-role{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 11.5px;
}
.cr-perm-role-lbl{
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  font-size: 10px;
}
.cr-perm-role-val{
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
}
.cr-perm-role-val.yes    { background: rgba(16,185,129,.14); color: #34D399; }
.cr-perm-role-val.no     { background: rgba(127,29,29,.18); color: #F87171; }
.cr-perm-role-val.partial{ background: rgba(245,158,11,.14); color: #FBBF24; font-size: 10px; padding: 3px 8px; }
.cr-role-assignment-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:8px;}
.cr-role-table{border:1px solid var(--border);border-radius:var(--rlg);overflow:hidden;background:var(--surface);}
.cr-role-row{display:grid;grid-template-columns:minmax(190px,1.4fr) minmax(140px,1fr) minmax(150px,.75fr);gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--border);}
.cr-role-row:first-child{border-top:none;}
.cr-role-row:hover{background:var(--surface2);}
.cr-role-row-head{background:var(--surface2);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);font-weight:800;}
.cr-role-row-head:hover{background:var(--surface2);}
.cr-role-member{display:flex;flex-direction:column;min-width:0;}
.cr-role-member strong{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr-role-member span{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.cr-role-function{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr-role-select{width:100%;min-width:0;max-width:100%;padding:7px 10px;font-size:12px;background:var(--surface2);border-color:var(--border2);}
.cr-row select{max-width:240px;min-width:150px;}
@media(max-width:1100px){
  .cr-role-preset-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cr-role-row{grid-template-columns:1fr;gap:6px;}
  .cr-role-row-head{display:none;}
  .cr-role-select{max-width:none;}
}
@media(max-width:700px){
  .cr-role-preset-strip{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════════
   EXECUTIVE DASHBOARD — Apple-exec style
   ═══════════════════════════════════════════════════════════════ */
/* KPI strip */
#p-dashboard,.d-kpi-card,.d-proj-row,.d-team-row,.d-focus-card{font-family:var(--sans);}
#p-dashboard .ct{font-size:12px;font-weight:700;letter-spacing:.08em;}
.d-kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px;}
.d-kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:18px 20px;transition:border-color .15s,transform .15s,background .15s;text-align:left;color:inherit;width:100%;min-height:114px;}
.d-kpi-card:hover{border-color:var(--border2);background:var(--surface2);transform:translateY(-1px);}
.d-kpi-card.d-kpi-alert{border-color:rgba(242,126,126,.55);background:rgba(242,126,126,.16);}
.d-kpi-card.d-kpi-alert .d-kpi-val,.d-kpi-card.d-kpi-alert .d-kpi-lbl{color:var(--red);}
.d-kpi-val{font:700 28px var(--mono);color:var(--text);line-height:1;margin-bottom:8px;}
.d-kpi-lbl{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;line-height:1.25;}
.d-kpi-sub{font-size:12px;color:var(--text2);line-height:1.35;}
/* Build 0823 (audit F2) — KPI skeletons shown while the cloud workspace hydrates (no 0%/At-Risk flash). */
.d-kpi-skel{pointer-events:none;cursor:default;}
.d-kpi-skel .d-kpi-val{color:var(--text3);opacity:.5;}
.d-kpi-skel .d-kpi-lbl,.d-kpi-skel .d-kpi-sub{height:9px;margin-top:7px;border-radius:4px;background:linear-gradient(90deg,var(--border) 25%,var(--surface2) 37%,var(--border) 63%);background-size:400% 100%;animation:vd-skel-shimmer 1.4s ease infinite;}
.d-kpi-skel .d-kpi-sub{width:70%;}
@keyframes vd-skel-shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
/* Main dashboard stack */
.d-main-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px;}
.d-section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;}
.d-section-card{height:min(64vh,640px);min-height:460px;display:flex;flex-direction:column;min-width:0;}
.d-section-card .ch{margin-bottom:10px;flex-shrink:0;}
.d-section-summary{border:1px solid var(--border);border-radius:var(--r);background:var(--surface2);padding:12px;margin-bottom:10px;flex-shrink:0;}
.d-summary-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;color:var(--text2);font-size:12px;font-weight:700;}
.d-summary-top strong{font:700 18px var(--mono);color:var(--text);}
.d-summary-track{height:8px;background:var(--surface3);border-radius:999px;overflow:hidden;}
.d-summary-fill{height:100%;border-radius:999px;transition:width .5s ease,background .3s;}
.d-summary-sub{font-size:11px;color:var(--text3);font-weight:700;margin-top:7px;}
#d-proj-list,#d-team-list{flex:1;min-height:0;overflow-y:auto;padding-right:2px;}
.d-team-card{min-width:0;}
/* Completion hero */
.d-completion-hero{padding:6px 0 14px;}
.d-comp-pct{font:800 52px var(--mono);color:var(--text);line-height:1;margin-bottom:14px;letter-spacing:-2px;}
.d-comp-track{height:10px;background:var(--surface3);border-radius:999px;overflow:hidden;margin-bottom:10px;}
.d-comp-fill{height:100%;border-radius:999px;transition:width .6s ease,background .3s;}
.d-comp-sub{font-size:13px;color:var(--text2);line-height:1.45;}
/* Health chip */
.d-health-chip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;}
.d-chip-good{background:var(--gdim);color:var(--green);border:1px solid rgba(77,214,164,.25);}
.d-chip-warn{background:var(--adim2);color:var(--amber);border:1px solid rgba(212,175,55,.25);}
.d-chip-bad{background:var(--rdim);color:var(--red);border:1px solid rgba(242,126,126,.25);}
/* Project status rows */
.d-proj-row{display:flex;align-items:center;gap:12px;padding:12px 8px;border-bottom:1px solid var(--border);width:100%;text-align:left;color:inherit;border-radius:var(--rsm);transition:background .15s,border-color .15s;}
.d-proj-row:hover{background:var(--surface2);}
.d-proj-row:last-child{border-bottom:0;}
.d-proj-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.d-proj-name{flex:1;font-size:14px;font-weight:600;color:var(--text);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d-proj-bar-wrap{width:130px;flex-shrink:0;}
.d-proj-track{height:6px;background:var(--surface3);border-radius:999px;overflow:hidden;}
.d-proj-fill{height:100%;border-radius:999px;transition:width .5s;}
.d-proj-task-count{font-size:10px;color:var(--text3);margin-top:3px;}
.d-proj-pct{font:700 12px var(--mono);color:var(--text2);width:36px;text-align:right;flex-shrink:0;}
.d-proj-tag{font-size:10px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap;flex-shrink:0;}
.d-tag-ok{background:var(--gdim);color:var(--green);}
.d-tag-risk{background:var(--rdim);color:var(--red);}
.d-tag-done{background:rgba(255,255,255,.04);color:var(--text3);border:1px solid var(--border);}
/* #262 — clickable "At Risk" flag pill set by the flag_risk automation.
   Matches .tag sizing/shape; red like .d-tag-risk; click clears the flag. */
.tag.t-risk{background:var(--rdim);color:var(--red);cursor:pointer;transition:background .15s,filter .15s;}
.tag.t-risk:hover{filter:brightness(1.12);background:var(--red);color:#fff;}
/* Team progress rows */
.d-team-row{display:flex;align-items:center;gap:12px;padding:12px 8px;border-bottom:1px solid var(--border);width:100%;text-align:left;color:inherit;border-radius:var(--rsm);transition:background .15s,border-color .15s;}
.d-team-row:hover{background:var(--surface2);}
.d-team-row:last-child{border-bottom:0;}
.d-team-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.d-team-info{flex:1;min-width:0;}
.d-team-name{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d-team-meta{font-size:12px;color:var(--text3);margin-top:2px;}
.d-team-work{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;}
.d-team-work span{font-size:11px;font-weight:700;color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:3px 8px;line-height:1.25;letter-spacing:0;}
.d-team-bar-col{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.d-team-track{width:92px;height:7px;background:var(--surface3);border-radius:999px;overflow:hidden;}
.d-team-fill{height:100%;border-radius:999px;transition:width .5s;}
.d-team-pct{font:700 13px var(--mono);color:var(--text2);width:38px;text-align:right;}
/* Focus / priority strip */
.d-focus-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.d-focus-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:18px 20px;transition:border-color .15s,transform .15s,background .15s;display:flex;flex-direction:column;text-align:left;color:inherit;min-height:132px;}
.d-focus-card:hover{border-color:var(--border2);background:var(--surface2);transform:translateY(-1px);}
.d-focus-card.d-focus-alert{border-color:rgba(242,126,126,.55);background:rgba(242,126,126,.16);}
.d-focus-card.d-focus-alert .d-focus-val,.d-focus-card.d-focus-alert .d-focus-lbl{color:var(--red);}
.d-focus-ico{font-size:18px;margin-bottom:8px;opacity:.8;}
.d-focus-val{font:700 30px var(--mono);color:var(--text);line-height:1;margin-bottom:7px;}
.d-focus-lbl{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;line-height:1.25;}
.d-focus-sub{font-size:12px;color:var(--text2);margin-top:7px;font-weight:700;}
/* Dashboard responsive */
@media(max-width:1100px){
  .d-kpi-row{grid-template-columns:repeat(3,1fr);}
  .d-main-grid{grid-template-columns:1fr;}
  .d-section-grid{grid-template-columns:1fr;}
  .d-section-card{height:auto;max-height:none;min-height:0;}
  #d-proj-list,#d-team-list{overflow:visible;padding-right:0;}
}
@media(max-width:640px){
  .d-kpi-row{grid-template-columns:repeat(2,1fr);}
  .d-focus-row{grid-template-columns:repeat(2,1fr);}
  .d-comp-pct{font-size:38px;}
}

/* ── Dark-mode legibility: turn dark-blue/purple TEXT to white. ──
   Backgrounds, borders, focus rings, and progress fills keep their
   original colors — only color: declarations are overridden. */
body:not(.light-theme) .xp-val,
body:not(.light-theme) .t-bl,
body:not(.light-theme) .t-pu,
body:not(.light-theme) .sdot.active,
body:not(.light-theme) .comment-av,
body:not(.light-theme) .sort-btn:hover,
body:not(.light-theme) .sort-btn.active,
body:not(.light-theme) .owner-link,
body:not(.light-theme) .help-req-badge,
body:not(.light-theme) .alog-undo-btn,
body:not(.light-theme) .rw-team-badge,
body:not(.light-theme) .alog-filter-btn:hover,
body:not(.light-theme) .alog-filter-btn.active,
body:not(.light-theme) .cal-day.today .cal-day-num,
body:not(.light-theme) .cal-event.task-ev,
body:not(.light-theme) .cal-event.proj-ev,
body:not(.light-theme) .time-task-link,
body:not(.light-theme) .workflow-map-count{color:var(--text);}
body:not(.light-theme) .own-open-link:hover,
body:not(.light-theme) .workflow-card-title:hover{color:var(--text);}
body:not(.light-theme) .t-gy,
body:not(.light-theme) .nav-badge{color:var(--text);}

/* ── Light-mode legibility and brand consistency ──
   Keep the navy/gold Vitae Dux palette while removing dark-mode remnants
   from form controls, dropdowns, badges, and compact rows. */
body.light-theme{background:var(--bg);color:var(--text);}
body.light-theme .topbar,
body.light-theme .sidebar{
  background:rgba(255,255,255,.92);
  border-color:rgba(11,42,89,.14);
  box-shadow:0 1px 0 rgba(154,116,20,.08);
}
body.light-theme .main{background:var(--bg);}
body.light-theme .card,
body.light-theme .stat,
body.light-theme .pcard,
body.light-theme .mrow,
body.light-theme .own-row,
body.light-theme .poll-card,
body.light-theme .cr-row,
body.light-theme .cr-template-card,
body.light-theme .cr-role-table,
body.light-theme .d-kpi-card,
body.light-theme .d-focus-card{
  background:#FFFFFF;
  border-color:rgba(11,42,89,.14);
  box-shadow:0 8px 24px rgba(11,42,89,.04);
}
body.light-theme .card:hover,
body.light-theme .trow:hover,
body.light-theme .pcard:hover,
body.light-theme .mrow:hover,
body.light-theme .own-row:hover,
body.light-theme .cr-row:hover,
body.light-theme .d-kpi-card:hover,
body.light-theme .d-focus-card:hover,
body.light-theme .d-proj-row:hover,
body.light-theme .d-team-row:hover{
  background:#F8F5ED;
  border-color:rgba(11,42,89,.24);
}
body.light-theme input[type=text],
body.light-theme input[type=number],
body.light-theme input[type=date],
body.light-theme input[type=datetime-local],
body.light-theme input[type=time],
body.light-theme input[type=email],
body.light-theme input[type=password],
body.light-theme input[type=search],
body.light-theme textarea,
body.light-theme select,
body.light-theme .search-bar input,
body.light-theme .cr-role-select,
body.light-theme .contribute-input{
  background:#FFFFFF;
  color:var(--text);
  border-color:rgba(11,42,89,.24);
  box-shadow:inset 0 1px 0 rgba(11,42,89,.03);
}
body.light-theme input::placeholder,
body.light-theme textarea::placeholder,
body.light-theme .search-bar input::placeholder{color:#7A8597;opacity:1;}
body.light-theme input:focus,
body.light-theme textarea:focus,
body.light-theme select:focus,
body.light-theme .search-bar input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(11,42,89,.10);
}
body.light-theme select{
  color-scheme:light;
  background-color:#FFFFFF;
}
body.light-theme select option,
body.light-theme select optgroup{
  background:#FFFFFF;
  color:var(--text);
}
body.light-theme select option:checked{
  background:var(--surface3);
  color:var(--accent);
}
body.light-theme .search-results,
body.light-theme .notif-panel,
body.light-theme .id-dropdown,
body.light-theme .modal,
body.light-theme #undo-bar{
  background:#FFFFFF;
  border-color:rgba(11,42,89,.18);
  box-shadow:0 18px 42px rgba(11,42,89,.16);
}
body.light-theme .sr-item:hover,
body.light-theme .id-option:hover{background:#F3F0E7;}
body.light-theme .btn-g{
  background:#F8F5ED;
  color:var(--text2);
  border-color:rgba(11,42,89,.20);
}
body.light-theme .btn-g:hover{
  background:#EDE6D3;
  color:var(--text);
}
body.light-theme .btn-s{color:#146C4D;border-color:rgba(20,108,77,.24);}
body.light-theme .btn-am{color:var(--amber);border-color:var(--aglow);}
body.light-theme .btn-d{color:#A93434;border-color:rgba(169,52,52,.24);}
body.light-theme .tag,
body.light-theme .nav-badge,
body.light-theme .help-req-badge,
body.light-theme .owner-chip,
body.light-theme .due-pill,
body.light-theme .d-health-chip,
body.light-theme .d-proj-tag{
  font-weight:700;
}
body.light-theme .time-task-link{background:var(--adim);color:var(--accent);border-color:var(--aglow);}
/* Build 0328g — Light-mode event-chip overrides (deeper saturation
   for visual differentiation between categories on cream backgrounds).
   Bumped from the original Build 0328f opacity since chips were
   reading too uniform — bigger gap between Task (blue), Proj (purple),
   Goal (green), Block (gold) tints. Left-bar at 4px = unmissable. */
body.light-theme .cal-event.task-ev {background:var(--adim); border-left-color:var(--accent);color:var(--text);}
body.light-theme .cal-event.proj-ev {background:var(--pdim);border-left-color:var(--purple);color:var(--text2);}
body.light-theme .cal-event.goal-ev {background:var(--gdim); border-left-color:var(--green);color:var(--text);}
body.light-theme .cal-event.block-ev{background:var(--aglow);border-left-color:var(--amber);color:var(--amber);}
body.light-theme .t-pu,
body.light-theme .rw-team-badge{background:rgba(41,76,130,.10);color:#294C82;border-color:rgba(41,76,130,.24);}
body.light-theme .t-gr,
body.light-theme .due-pill.dp-on-time,
body.light-theme .d-chip-good{background:rgba(20,108,77,.11);color:#146C4D;border-color:rgba(20,108,77,.24);}
body.light-theme .t-am,
body.light-theme .due-pill.dp-at-risk,
body.light-theme .d-chip-warn,
body.light-theme .focus-star-btn.active{background:rgba(138,98,8,.13);color:#7A5500;border-color:rgba(138,98,8,.30);}
body.light-theme .t-re,
body.light-theme .due-pill.dp-overdue,
body.light-theme .d-chip-bad{background:rgba(169,52,52,.11);color:#A93434;border-color:rgba(169,52,52,.24);}
body.light-theme .t-gy,
body.light-theme .due-pill.dp-no-due,
body.light-theme .nav-badge{background:#ECE6D8;color:#4F5E73;border-color:rgba(11,42,89,.14);}
body.light-theme .nav-badge.red{background:rgba(169,52,52,.11);color:#A93434;border-color:rgba(169,52,52,.20);}
body.light-theme .nav-lbl,
body.light-theme label,
body.light-theme .ct,
body.light-theme .sl,
body.light-theme .sr-type,
body.light-theme .date-txt,
body.light-theme .sidebar-foot-txt,
body.light-theme .mrole,
body.light-theme .cr-meta,
body.light-theme .d-kpi-lbl,
body.light-theme .d-summary-sub,
body.light-theme .d-proj-task-count,
body.light-theme .d-team-meta,
body.light-theme .d-focus-lbl{color:var(--text3);}
body.light-theme .nav-btn{color:var(--text2);}
body.light-theme .nav-btn:hover{background:var(--surface3);color:var(--text);}
body.light-theme .nav-btn.active{
  background:var(--adim);
  color:var(--accent);
  border-left-color:var(--amber);
}
body.light-theme .xp-val,
body.light-theme .brand-sub,
body.light-theme .about-kicker,
body.light-theme .about-stat-value{color:var(--amber);}
body.light-theme .xp-track,
body.light-theme .ptrack,
body.light-theme .d-summary-track,
body.light-theme .d-comp-track,
body.light-theme .d-proj-track,
body.light-theme .d-team-track,
body.light-theme .cr-score-meter,
body.light-theme .poll-bar-wrap{background:#E0D6BF;}
body.light-theme .trow,
body.light-theme .archive-row,
body.light-theme .brow-card,
body.light-theme .rp-card,
body.light-theme .workflow-card,
body.light-theme .workflow-col,
body.light-theme .cal-day{
  background:#FFFFFF;
  border-color:rgba(11,42,89,.14);
}
body.light-theme .d-tag-done,
body.light-theme .team-xp-pool,
body.light-theme .d-section-summary,
body.light-theme .about-stat,
body.light-theme .cr-simple-note,
body.light-theme .cr-link-box{background:#F3F0E7;border-color:rgba(11,42,89,.14);}

/* ===== HELP GUIDE (About tab) ============================================ */
.help-guide{margin-top:18px;}
.help-guide .ch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.help-search{background:#000;border:1px solid var(--border2);border-radius:var(--r);color:var(--text);padding:5px 10px;font-size:12px;font-family:var(--sans);outline:none;width:160px;}
.help-search:focus{border-color:var(--amber);}
body.light-theme .help-search{background:#FFFCF6;color:#0F1B2D;}
.help-intro{font-size:12px;color:var(--text2);margin:0 0 14px;line-height:1.5;}
.help-sections{display:flex;flex-direction:column;gap:8px;}
.help-section{border:1px solid var(--border);border-radius:var(--r);background:var(--surface2);overflow:hidden;}
.help-section summary{cursor:pointer;padding:10px 14px;font-size:13px;font-weight:600;color:var(--text);list-style:none;display:flex;align-items:center;gap:8px;user-select:none;}
.help-section summary::-webkit-details-marker{display:none;}
.help-section summary::before{content:'▸';font-size:11px;color:var(--text3);transition:transform .15s ease;}
.help-section[open] summary::before{transform:rotate(90deg);}
.help-section summary:hover{background:var(--surface);}
.help-body{padding:8px 16px 14px;font-size:12.5px;line-height:1.55;color:var(--text2);border-top:1px solid var(--border);}
.help-body p{margin:8px 0;}
.help-body ul,.help-body ol{margin:6px 0 8px;padding-left:22px;}
.help-body li{margin:3px 0;}
.help-body strong{color:var(--text);}
.help-body kbd{font-family:var(--mono,monospace);font-size:11px;background:var(--border2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text);}
.help-defs{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;margin:6px 0;}
.help-defs dt{font-weight:600;color:var(--text);}
.help-defs dd{margin:0;color:var(--text2);}
.help-table{border-collapse:collapse;width:100%;font-size:12px;margin:6px 0;}
.help-table th,.help-table td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--border);}
.help-table th{color:var(--text3);text-transform:uppercase;font-size:10px;letter-spacing:.6px;font-weight:600;}
.help-section.help-hidden{display:none;}
.btn.xs{padding:3px 10px;font-size:11px;}

/* --- Help Guide smart Q&A search (help-search.js) --- */
.help-search{width:280px;}
.help-search-wrap{position:relative;display:inline-block;}
.help-suggest{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:50;max-height:280px;overflow-y:auto;display:none;}
.help-suggest.active{display:block;}
.hk-sg-row{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--border);}
.hk-sg-row:last-child{border-bottom:none;}
.hk-sg-row:hover{background:var(--surface);}
.hk-sg-q{color:var(--text);}
.help-topics{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;}
.hk-topic{background:transparent;border:1px solid var(--border2);color:var(--text2);padding:4px 10px;border-radius:14px;font-size:11.5px;font-family:var(--sans);cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
.hk-topic:hover{background:var(--surface);color:var(--text);}
.hk-topic.active{background:var(--amber);color:#0F1B2D;border-color:var(--amber);font-weight:600;}
.help-search-results{display:none;}
.help-search-results.active{display:block;margin:0 0 14px;}
.hk-card{background:var(--surface2);border:1px solid var(--border2);border-left:3px solid var(--amber);border-radius:var(--r);padding:14px 16px;margin:0 0 10px;}
.hk-card-meta{margin:0 0 6px;}
.hk-chip{display:inline-block;background:var(--surface);border:1px solid var(--border);color:var(--text2);font-size:10.5px;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.hk-chip-sm{font-size:10px;padding:1px 7px;}
.hk-q{font-size:14px;font-weight:600;color:var(--text);margin:0 0 8px;}
.hk-a{font-size:13px;line-height:1.55;color:var(--text2);}
.hk-a strong{color:var(--text);}
.hk-a kbd{font-family:var(--mono,monospace);font-size:11px;background:var(--border2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text);}
.hk-a mark{background:rgba(245,196,76,.3);color:var(--text);padding:0 2px;border-radius:2px;}
.hk-related-title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin:14px 0 6px;font-weight:600;}
.hk-list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface2);overflow:hidden;}
.hk-row{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--border);}
.hk-row:last-child{border-bottom:none;}
.hk-row:hover{background:var(--surface);}
.hk-row-q{color:var(--text);}
.hk-empty{background:var(--surface2);border:1px dashed var(--border2);border-radius:var(--r);padding:14px 16px;font-size:13px;color:var(--text2);margin:0 0 10px;}
.hk-empty-hint{font-size:12px;color:var(--text3);margin-top:6px;}
body.light-theme .hk-a mark{background:rgba(218,165,32,.35);}

@media (max-width:700px){
  .help-defs{grid-template-columns:1fr;gap:2px 0;}
  .help-defs dt{margin-top:6px;}
  .help-search{width:100%;min-width:0;}
  .help-search-wrap{flex:1;min-width:160px;}
}

/* ===== SEARCH ROW ICONS (preview/edit) =================================== */
.sr-item{padding:6px 8px 6px 14px;}
.sr-item .sr-name{flex:1;cursor:pointer;}
.sr-icon-btn{background:transparent;border:1px solid transparent;color:var(--text3);width:26px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;line-height:1;font-family:var(--sans);transition:background .12s ease,color .12s ease,border-color .12s ease;}
.sr-icon-btn:hover{background:var(--surface);color:var(--amber);border-color:var(--border2);}
.sr-icon-btn-sm{width:22px;height:22px;font-size:11px;}
.sr-viewed-row{display:flex;align-items:center;gap:4px;}
.sr-viewed-row .sr-viewed{flex:1;}

/* ===== PREVIEW MODAL ===================================================== */
.preview-body{display:flex;flex-direction:column;gap:10px;}
.preview-field{display:flex;flex-direction:column;gap:3px;margin:0;}
.preview-field label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);font-weight:600;}
.preview-value{font-size:13px;color:var(--text);background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:7px 10px;min-height:18px;line-height:1.45;word-break:break-word;}
.preview-section{margin-top:6px;border-top:1px solid var(--border);padding-top:10px;}
.preview-section-head{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);font-weight:600;margin-bottom:6px;}
.preview-section-body{display:flex;flex-direction:column;gap:4px;}
.preview-row{font-size:12.5px;color:var(--text2);padding:4px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;}
.preview-row.preview-comment{font-size:12px;}
.preview-row.preview-more{color:var(--text3);font-style:italic;background:transparent;border-style:dashed;}
.preview-empty{font-size:12px;color:var(--text3);font-style:italic;padding:4px 0;}
.preview-chip{display:inline-block;font-size:11px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);padding:3px 9px;border-radius:14px;margin:2px 4px 2px 0;}
.preview-stat{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px;text-align:center;}
.preview-stat-value{font-size:20px;font-weight:600;color:var(--text);}
.preview-stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-top:2px;}
.preview-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;border:1px solid var(--border);}

/* ===== HELP GUIDE — How-To blocks ======================================== */
.howto-block{margin:14px 0 4px;padding-top:12px;border-top:1px dashed var(--border);}
.howto-block:first-child{margin-top:4px;padding-top:0;border-top:none;}
.howto-block h4{margin:0 0 8px;font-size:13px;color:var(--text);font-weight:600;letter-spacing:.2px;}
.howto-block .help-defs{grid-template-columns:200px 1fr;gap:8px 16px;}
.howto-block .help-defs dt{font-size:12px;color:var(--text);}
.howto-block .help-defs dd{font-size:12px;line-height:1.55;}
@media (max-width:700px){
  .howto-block .help-defs{grid-template-columns:1fr;gap:2px 0;}
  .howto-block .help-defs dt{margin-top:8px;font-weight:600;}
}

/* ===== SEARCH INSPECTOR =================================================== */
.si-bar{padding:14px 16px 10px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px;background:var(--surface2);}
.si-input{width:100%;background:var(--surface);border:1px solid var(--border2);color:var(--text);border-radius:var(--r);padding:9px 12px;font-size:13px;font-family:var(--sans);box-sizing:border-box;}
.si-input:focus{outline:none;border-color:var(--amber);}
.si-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.si-fchip{font-size:11px;background:var(--surface);border:1px solid var(--border2);color:var(--text2);padding:3px 10px;border-radius:14px;cursor:pointer;font-family:var(--sans);transition:background .12s,color .12s,border-color .12s;}
.si-fchip:hover{background:var(--surface2);color:var(--text);}
.si-fchip.si-fchip-active{background:var(--amber);color:#000;border-color:var(--amber);}
.si-toggle{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text2);cursor:pointer;margin-left:auto;}
.si-toggle input{cursor:pointer;}
.si-stats{padding:8px 16px;font-size:11px;color:var(--text3);background:var(--surface2);border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:12px;min-height:34px;align-items:center;}
.si-stat-chip{display:flex;align-items:center;gap:5px;}
.si-stat-chip strong{color:var(--text);}
.si-table{width:100%;border-collapse:collapse;font-size:12px;}
.si-table th{position:sticky;top:0;background:var(--surface2);color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-size:10px;padding:7px 12px;text-align:left;border-bottom:1px solid var(--border2);z-index:1;}
.si-table td{padding:6px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text2);}
.si-table tr:hover td{background:var(--surface2);}
.si-table tr.si-miss td{color:var(--text3);opacity:.48;}
.si-score{display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:2px 7px;border-radius:4px;font-weight:600;font-size:11px;font-family:monospace;}
.si-score-exact{background:rgba(77,214,164,.18);color:#4DD6A4;}
.si-score-good{background:rgba(245,158,11,.18);color:var(--amber);}
.si-score-fuzzy{background:rgba(148,163,184,.15);color:var(--text2);}
.si-score-miss{background:transparent;color:var(--text3);}
.si-type-badge{font-size:10px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:1px 7px;color:var(--text3);white-space:nowrap;}
.si-token{display:inline-block;font-size:10px;background:rgba(245,158,11,.14);color:var(--amber);border-radius:3px;padding:1px 5px;margin:1px 2px;font-family:monospace;}
.si-token-field{color:var(--text3);margin-left:2px;font-size:9px;}
.si-empty{text-align:center;color:var(--text3);padding:28px;font-style:italic;}
.si-name{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.si-act-btn{background:transparent;border:1px solid transparent;color:var(--text3);width:24px;height:24px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-family:var(--sans);transition:background .1s,color .1s,border-color .1s;}
.si-act-btn:hover{background:var(--surface2);color:var(--amber);border-color:var(--border2);}
/* ONBOARDING OVERLAY — always light-styled, theme-independent */
.ob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;}
.ob-card{background:#fff;color:#1a1a2e;border-radius:18px;padding:36px 40px;max-width:560px;width:100%;box-shadow:0 28px 72px rgba(0,0,0,.28);position:relative;}
.ob-progress{display:flex;gap:6px;justify-content:center;margin-bottom:28px;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:#dde1f0;transition:all .25s;}
.ob-dot.active{background:#0B2A59;width:26px;border-radius:4px;}
.ob-icon{font-size:38px;text-align:center;margin-bottom:6px;}
.ob-icon-big{font-size:60px;margin-bottom:10px;}
.ob-title{font-size:23px;font-weight:700;text-align:center;margin:0 0 10px;color:#0B2A59;font-family:inherit;}
.ob-sub{text-align:center;color:#556;margin:0 0 22px;line-height:1.65;font-size:14px;}
.ob-label{text-align:center;font-size:12px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;}
/* Theme picker */
.ob-theme-row{display:flex;gap:12px;margin-bottom:24px;}
.ob-theme-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;border:2px solid #e2e6f4;border-radius:14px;background:#f7f8fc;cursor:pointer;font-size:13px;font-weight:600;color:#333;transition:all .15s;font-family:inherit;}
.ob-theme-btn:hover{border-color:#0B2A59;background:#edf1ff;}
.ob-theme-btn.selected{border-color:#0B2A59;background:#edf1ff;color:#0B2A59;box-shadow:0 0 0 3px rgba(11,42,89,.1);}
.ob-theme-icon{font-size:30px;}
/* Workflow stages */
.ob-stages{display:flex;flex-direction:column;gap:5px;margin-bottom:22px;max-height:280px;overflow-y:auto;}
.ob-stage{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f7f8fc;border-radius:8px;font-size:13px;color:#333;}
.ob-stage-icon{font-size:15px;width:22px;text-align:center;flex-shrink:0;}
.ob-stage strong{margin-right:6px;}
.ob-stage small{color:#778;font-size:12px;}
/* List */
.ob-list{margin:0 0 16px;padding-left:18px;color:#445;font-size:14px;line-height:1.85;}
.ob-list li{margin-bottom:2px;}
/* Tip */
.ob-tip{background:#f0f4ff;border-left:3px solid #0B2A59;padding:11px 14px;border-radius:0 10px 10px 0;font-size:13px;color:#334;margin-bottom:22px;line-height:1.5;}
/* Nav */
.ob-nav{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:20px;}
.ob-nav-center{justify-content:center;}
.ob-prev,.ob-skip{background:none;border:none;color:#99a;cursor:pointer;font-size:13px;padding:8px 10px;font-family:inherit;transition:color .15s;}
.ob-prev:hover,.ob-skip:hover{color:#333;}
.ob-btn-primary{background:#0B2A59;color:#fff;border:none;padding:11px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;letter-spacing:.01em;}
.ob-btn-primary:hover{background:#0d3270;}
/* Launch step row */
.ob-launch-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 20px;}
.ob-launch-step{display:flex;flex-direction:column;align-items:center;gap:8px;}
.ob-step-num{width:34px;height:34px;border-radius:50%;background:#0B2A59;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;}
.ob-step-lbl{font-size:12px;font-weight:600;color:#445;text-align:center;}
.ob-launch-arrow{font-size:18px;color:#b0b8d4;margin-bottom:18px;}
.ob-footer-note{text-align:center;font-size:11px;color:#bbb;margin:14px 0 0;}


/* ─────────────────────────────────────────────
   DASHBOARD TABS (Statistics + Review)
   BossLife 3.2.0098
───────────────────────────────────────────── */
/* 3.2.0107 — unified pill/segment tab style across the app.
   Container holds the tab buttons inside a rounded surface2 track; the
   active tab raises onto the surface with an accent text color. Inner
   count/grade/default pills are preserved as compact informational chips. */
.d-tabbar{display:flex;align-items:stretch;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:5px;margin:6px 0 16px;}
.d-tabbar > .d-tab{flex:1 1 0;justify-content:center;min-width:0;white-space:normal;text-align:center;line-height:1.25;}
.d-tab{display:flex;align-items:center;gap:8px;padding:10px 18px;font-size:13px;font-weight:600;color:var(--text3);background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-family:var(--sans);transition:background .15s,color .15s,border-color .15s;white-space:nowrap;}
.d-tab:hover{color:var(--text2);background:rgba(255,255,255,0.05);}
.d-tab.active{background:var(--surface);color:var(--text);border-color:var(--border2);box-shadow:0 1px 2px rgba(0,0,0,0.18);}
.d-tab-ico{font-size:14px;line-height:1;}
.d-tab-num{font-size:10px;font-weight:700;background:var(--surface);border:1px solid var(--border);color:var(--text3);padding:2px 8px;border-radius:10px;line-height:1.6;min-height:18px;display:inline-flex;align-items:center;}
.d-tab.active .d-tab-num{background:rgba(212,175,55,0.22);border-color:var(--border2);color:var(--amber);}
.d-tab-alert .d-tab-num{background:rgba(242,126,126,0.18);border-color:var(--red);color:var(--red);}
.d-tab-alert.active{color:var(--text);}
.d-tab-alert.active .d-tab-num{background:rgba(242,126,126,0.22);border-color:var(--red);color:var(--red);}

/* Dashboard panels */
.d-panel{display:none;}
.d-panel.active{display:block;}

/* ─────────────────────────────────────────────
   REVIEW PANEL — Variant B (split layout)
───────────────────────────────────────────── */
.rv-banner{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:18px;background:linear-gradient(180deg,rgba(242,126,126,0.18),rgba(242,126,126,0.06));border:1px solid var(--red);border-radius:var(--rlg);}
.rv-banner-ico{font-size:24px;flex-shrink:0;}
.rv-banner-text{flex:1;min-width:0;}
.rv-banner-title{font-size:14px;font-weight:800;color:var(--red);}
.rv-banner-sub{font-size:12px;color:var(--text2);margin-top:3px;}
.rv-banner-actions{display:flex;gap:6px;flex-shrink:0;}
.rv-banner-empty .rv-banner-title{color:var(--green);}
.rv-banner-empty{background:linear-gradient(180deg,rgba(77,214,164,0.18),rgba(77,214,164,0.06));border-color:var(--green);}

.rv-cols{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;}
@media(max-width:1100px){.rv-cols{grid-template-columns:1fr;}}

.rv-summary-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.rv-sum{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:14px 16px;border-left:4px solid var(--red);cursor:pointer;transition:border-color .15s,transform .1s;}
.rv-sum:hover{border-color:var(--border2);}
.rv-sum.amber{border-left-color:var(--amber);}
.rv-sum.green{border-left-color:var(--green);}
.rv-sum-num{font-size:28px;font-weight:800;line-height:1;color:var(--red);}
.rv-sum.amber .rv-sum-num{color:var(--amber);}
.rv-sum.green .rv-sum-num{color:var(--green);}
.rv-sum-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-top:6px;}
.rv-sum-sub{font-size:11px;color:var(--text2);margin-top:3px;}

.rv-issue-list{display:flex;flex-direction:column;gap:8px;}
.rv-issue{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:var(--r);transition:background .15s,border-color .15s;}
.rv-issue.amber{border-left-color:var(--amber);}
.rv-issue.green{border-left-color:var(--green);}
.rv-issue:hover{background:var(--surface2);}
.rv-issue-ico{font-size:16px;flex-shrink:0;width:22px;text-align:center;}
.rv-issue-body{flex:1;min-width:0;}
.rv-issue-title{font-size:13px;font-weight:600;color:var(--text);cursor:pointer;}
.rv-issue-title:hover{color:var(--amber);}
.rv-issue-sub{font-size:11px;color:var(--text3);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.rv-issue-sub .rv-pill{color:var(--purple);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-weight:600;}
.rv-issue-sub .rv-pill:hover{color:var(--amber);}
.rv-issue-age{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;background:rgba(242,126,126,0.14);color:var(--red);flex-shrink:0;}
.rv-issue-age.amber{background:rgba(212,175,55,0.16);color:var(--amber);}
.rv-issue-age.gy{background:var(--surface2);color:var(--text3);}

.rv-exposure-list{display:flex;flex-direction:column;gap:12px;}
.rv-exposure-row{display:grid;grid-template-columns:36px 1fr;gap:11px;align-items:center;}
.rv-exposure-av{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;cursor:pointer;}
.rv-exposure-meta{display:flex;justify-content:space-between;font-size:12px;align-items:baseline;}
.rv-exposure-name{font-weight:600;color:var(--text);cursor:pointer;}
.rv-exposure-name:hover{color:var(--amber);}
.rv-exposure-pct{font-weight:700;font-size:12px;}
.rv-exposure-pct.red{color:var(--red);}
.rv-exposure-pct.amber{color:var(--amber);}
.rv-exposure-pct.green{color:var(--green);}
.rv-exposure-bar{height:5px;background:var(--surface2);border-radius:99px;margin:5px 0 4px;overflow:hidden;}
.rv-exposure-fill{height:100%;border-radius:99px;}
.rv-exposure-note{font-size:11px;color:var(--text3);}
.rv-exposure-note.red{color:var(--red);}
.rv-exposure-note.amber{color:var(--amber);}

.rv-activity-list{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--text2);}
.rv-activity-row{display:flex;gap:8px;padding:6px 0;border-bottom:1px dashed var(--border);}
.rv-activity-row:last-child{border-bottom:none;}
.rv-activity-row .rv-pill{color:var(--purple);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-weight:600;}
.rv-activity-row .rv-pill:hover{color:var(--amber);}
.rv-activity-time{font-size:10px;color:var(--text3);flex-shrink:0;font-family:var(--mono);min-width:42px;}

.rv-empty{text-align:center;padding:32px 16px;color:var(--text3);font-size:13px;}
.rv-empty-ico{font-size:32px;display:block;margin-bottom:8px;opacity:.6;}

/* ─────────────────────────────────────────────
   ACCOUNTABILITY SCORECARD (3.2.0105)
───────────────────────────────────────────── */
:root{
  --ac-a:#4DD6A4;
  --ac-b:#83D399;
  --ac-c:#D4AF37;
  --ac-d:#E0925C;
  --ac-f:#F27E7E;
  --ac-empty:#8E97AA;
}
body.light-theme{--ac-a:#0B7C56;--ac-b:#2E7D32;--ac-c:#9A6B00;--ac-d:#B45309;--ac-f:#B03030;--ac-empty:#5A697E;}

.d-tab-grade .d-tab-num{background:rgba(212,175,55,0.18);border-color:var(--border2);color:var(--amber);font-weight:700;}
.d-tab-grade.active{color:var(--text);}

/* Sparkline trend card on Statistics */
.ac-trend-card .ch{align-items:center;}
.ac-trend-body{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;}
.ac-trend-left{display:flex;align-items:center;gap:14px;}
.ac-trend-grade{font-size:46px;font-weight:800;line-height:1;letter-spacing:-1px;width:80px;text-align:center;}
.ac-trend-meta{display:flex;flex-direction:column;gap:2px;}
.ac-trend-score{font-size:14px;font-weight:700;color:var(--text);}
.ac-trend-delta{font-size:11px;color:var(--text3);font-family:var(--mono);}
.ac-spark-wrap{display:flex;flex-direction:column;gap:6px;min-width:0;}
.ac-spark{width:100%;height:60px;display:block;}
.ac-spark-sub{font-size:10px;color:var(--text3);text-align:right;font-family:var(--mono);}

.ac-grade-a{color:var(--ac-a);}
.ac-grade-b{color:var(--ac-b);}
.ac-grade-c{color:var(--ac-c);}
.ac-grade-d{color:var(--ac-d);}
.ac-grade-f{color:var(--ac-f);}
.ac-grade-empty{color:var(--ac-empty);}

/* Scorecard hero */
.ac-hero{display:flex;align-items:center;gap:22px;padding:22px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);margin-bottom:16px;}
.ac-hero-letter{font-size:88px;font-weight:800;line-height:1;letter-spacing:-2px;min-width:120px;text-align:center;}
.ac-hero-body{flex:1;min-width:0;}
.ac-hero-prompt{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.2px;margin-bottom:6px;line-height:1.25;}
.ac-hero-band{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text3);}
.ac-hero-score{font-size:28px;font-weight:800;color:var(--text);margin:4px 0 6px;letter-spacing:-.5px;}
.ac-hero-line{font-size:13px;color:var(--text2);line-height:1.55;}

/* Grade strip */
.ac-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px;}
@media(max-width:900px){.ac-strip{grid-template-columns:repeat(3,1fr);} }
.ac-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:14px 12px;text-align:center;}
.ac-tile-letter{font-size:32px;font-weight:800;line-height:1;letter-spacing:-1px;}
.ac-tile-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-top:6px;}

/* Per-area scorecard rows */
.ac-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.ac-card{display:grid;grid-template-columns:80px 1fr 160px auto;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);padding:14px 16px;}
.ac-card-letter{font-size:38px;font-weight:800;line-height:1;text-align:center;letter-spacing:-1px;}
.ac-card-body{min-width:0;}
.ac-card-name{font-size:14px;font-weight:700;color:var(--text);}
.ac-card-line{font-size:12px;color:var(--text2);margin-top:4px;line-height:1.5;}
.ac-card-meta{display:flex;gap:14px;margin-top:6px;font-size:11px;color:var(--text3);flex-wrap:wrap;}
.ac-card-meta strong{color:var(--text);font-weight:700;}
.ac-card-meta .red strong{color:var(--red);}
.ac-card-meta .amber strong{color:var(--amber);}
.ac-card-meta .green strong{color:var(--green);}
.ac-card-bar-wrap{display:flex;flex-direction:column;gap:4px;align-items:flex-end;}
.ac-card-bar{width:160px;height:6px;background:var(--surface2);border-radius:99px;overflow:hidden;}
.ac-card-fill{height:100%;border-radius:99px;}
.ac-card-pct{font-size:11px;color:var(--text2);font-family:var(--mono);}
@media(max-width:900px){.ac-card{grid-template-columns:64px 1fr;}.ac-card-bar-wrap,.ac-card .btn{grid-column:1/-1;justify-self:start;width:100%;align-items:flex-start;}.ac-card-bar{width:100%;}}

/* Legend */
.ac-legend-body{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:900px){.ac-legend-body{grid-template-columns:1fr;}}
.ac-legend-bands{display:flex;flex-direction:column;gap:6px;}
.ac-band{display:grid;grid-template-columns:130px 70px 1fr;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface2);}
.ac-band-letter{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;}
.ac-band-range{font-size:11px;color:var(--text3);font-family:var(--mono);}
.ac-band-name{font-size:12px;font-weight:600;color:var(--text2);}
.band-a .ac-band-letter{color:var(--ac-a);}
.band-b .ac-band-letter{color:var(--ac-b);}
.band-c .ac-band-letter{color:var(--ac-c);}
.band-d .ac-band-letter{color:var(--ac-d);}
.band-f .ac-band-letter{color:var(--ac-f);}
.ac-legend-text{font-size:12px;color:var(--text2);line-height:1.6;}
.ac-legend-text p{margin-bottom:10px;}
.ac-legend-text ul{padding-left:18px;}
.ac-legend-text li{margin-bottom:4px;}

/* BossLife 3.2.0120 - connected minimal tab cards */
.d-tabbar,
.ttabs,
.rw-tabs{
  display:flex;
  align-items:stretch;
  gap:0;
  width:100%;
  margin:6px 0 16px;
  padding:5px;
  background:linear-gradient(180deg, rgba(28,49,79,.82), rgba(19,35,58,.82));
  border:1px solid var(--border2);
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.08);
  overflow:hidden;
}
.d-tabbar > .d-tab,
.ttabs > .ttab,
.rw-tabs > .rw-tab{
  flex:1 1 0;
  min-width:0;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border:0;
  border-radius:7px;
  background:transparent;
  box-shadow:none;
  color:var(--text3);
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  white-space:normal;
}
.d-tabbar > .d-tab:hover,
.ttabs > .ttab:hover,
.rw-tabs > .rw-tab:hover{
  color:var(--text2);
  background:rgba(255,255,255,.035);
}
.d-tabbar > .d-tab.active,
.ttabs > .ttab.active,
.rw-tabs > .rw-tab.active{
  background:rgba(11,26,47,.78);
  color:var(--text);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 18px rgba(0,0,0,.18);
  font-weight:700;
}
.d-tabbar > .d-tab:not(.active) .d-tab-num{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  color:var(--text3);
}
.d-tabbar > .d-tab.active .d-tab-num{
  background:rgba(212,175,55,.22);
  border-color:rgba(212,175,55,.42);
  color:var(--amber);
}
.d-tab-ico,
.rw-tab-ico{
  opacity:.82;
}
.d-tab.active .d-tab-ico,
.rw-tab.active .rw-tab-ico{
  opacity:1;
}
/* Build 0331d — Higher-specificity override for the .ttabs flex rules.
   The generic .ttabs above forces display:flex + overflow:hidden, and
   the mobile media query below forces overflow-x:auto + min-width:148
   on each tab — which created the horizontal scroll bar the user kept
   seeing. Using `.ttabs.cr-tabs` (0,2,0 specificity) beats both
   regardless of source order. */
.ttabs.cr-tabs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:6px;
  overflow:visible !important;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}
.ttabs.cr-tabs > .cr-tab{
  flex:initial;
  min-width:0;
  width:auto;
  padding:10px 12px;
  font-size:12px;
  line-height:1.3;
  white-space:normal;
  word-break:keep-all;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
}
.ttabs.cr-tabs > .cr-tab.active{
  background:var(--surface2);
  color:var(--text);
  border-color:var(--gold-soft,var(--gold));
  font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}
@media(max-width:520px){
  .ttabs.cr-tabs{grid-template-columns:repeat(2,1fr);}
  .ttabs.cr-tabs > .cr-tab{padding:9px 8px;font-size:11px;min-width:0;}
}
#blk-tabbar{
  overflow-x:auto;
  scrollbar-width:thin;
}
.workflow-tabs > .ttab,
.rw-tabs > .rw-tab{
  white-space:nowrap;
}
@media(max-width:760px){
  .d-tabbar,
  .ttabs,
  .rw-tabs{
    overflow-x:auto;
    scrollbar-width:thin;
  }
  .d-tabbar > .d-tab,
  .ttabs > .ttab,
  .rw-tabs > .rw-tab{
    flex:0 0 auto;
    min-width:148px;
  }
  .about-tabbar > .d-tab,
  .workflow-tabs > .ttab,
  .rw-tabs > .rw-tab{
    min-width:132px;
  }
  /* Build 0331d — Command Review tabs opt OUT of the mobile-scroll
     behavior above. They stay as a grid (set higher up by .ttabs.cr-tabs). */
  .ttabs.cr-tabs{
    overflow:visible !important;
  }
  .ttabs.cr-tabs > .cr-tab{
    flex:initial;
    min-width:0;
  }
}

/* BossLife 3.2.0123 - light-mode tabbar colors (overrides the dark hardcoded
   colors in the 0120 "connected minimal tab cards" block when body.light-theme
   is active). Layout is intentionally unchanged — only colors / shadows. */
body.light-theme .d-tabbar,
body.light-theme .ttabs,
body.light-theme .rw-tabs{
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--border2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 6px 18px rgba(11,42,89,.06);
}
body.light-theme .d-tabbar > .d-tab:hover,
body.light-theme .ttabs > .ttab:hover,
body.light-theme .rw-tabs > .rw-tab:hover{
  color:var(--text2);
  background:rgba(11,42,89,.05);
}
body.light-theme .d-tabbar > .d-tab.active,
body.light-theme .ttabs > .ttab.active,
body.light-theme .rw-tabs > .rw-tab.active{
  background:var(--surface);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px rgba(11,42,89,.10), 0 0 0 1px var(--border);
}
body.light-theme .d-tabbar > .d-tab:not(.active) .d-tab-num{
  background:var(--surface2);
  border-color:var(--border);
  color:var(--text3);
}
body.light-theme .d-tabbar > .d-tab.active .d-tab-num{
  background:var(--adim2);
  border-color:rgba(138,98,8,.42);
  color:var(--amber);
}

/* ─────────────────────────────────────────────────────────────────────────
   BossLife 3.2.0126 - My Account modal + appearance preferences
   ─────────────────────────────────────────────────────────────────────── */

/* Modal layout — scoped to #m-my-account so it cannot affect other modals. */
/* ── Build 0341 — Data Management & Privacy inline section ─────────────
   Replaces the old #m-reset modal. Lives in About → Data tab as inline
   rows, mirroring the .ma-row pattern from My Account but tuned for
   action rows (info on left, control on right, status pane below). */
#dm-section .dm-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid var(--border);
}
#dm-section .dm-row:first-of-type{border-top:0;padding-top:6px;}
#dm-section .dm-row-info{min-width:0;}
#dm-section .dm-row-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;}
#dm-section .dm-row-desc{font-size:12px;color:var(--text2);line-height:1.5;}
#dm-section .dm-row-action{display:flex;gap:8px;align-items:center;flex-shrink:0;flex-wrap:wrap;}/* Build 0721 (QA) — wrap so the flex-basis:100% confirm-hint lands on its own line */
#dm-section .dm-row-confirm input[type=text]{
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:6px;
  color:var(--text);
  padding:7px 10px;
  font-size:12px;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.5px;
  width:120px;
}
#dm-section .dm-row-confirm input[type=text]:focus{
  outline:none;
  border-color:var(--gold-soft,var(--gold));
}
#dm-section .dm-row-warn{}
#dm-section .dm-row-warn .dm-row-title{color:#F59E0B;}
#dm-section .dm-row-warn button:not([disabled]){
  background:rgba(245,158,11,.10);
  border-color:#F59E0B;
  color:#F59E0B;
}
#dm-section .dm-row-warn button:not([disabled]):hover{background:rgba(245,158,11,.18);}
#dm-section .dm-row-danger .dm-row-title{color:#F87171;}
#dm-section .dm-row-danger button:not([disabled]){
  background:rgba(248,113,113,.10);
  border-color:#F87171;
  color:#FCA5A5;
}
#dm-section .dm-row-danger button:not([disabled]):hover{background:rgba(248,113,113,.20);}
#dm-section .dm-status{
  margin-top:14px;
  padding:10px 12px;
  border-radius:6px;
  font-size:12px;
  line-height:1.5;
}
#dm-section .dm-status.info{background:rgba(79,142,247,.10);color:#93C5FD;border:1px solid #4F8EF7;}
#dm-section .dm-status.success{background:rgba(52,211,153,.12);color:#34D399;border:1px solid #34D399;}
#dm-section .dm-status.error{background:rgba(248,113,113,.12);color:#FCA5A5;border:1px solid #F87171;}
#dm-section .dm-help{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--text3);
}
#dm-section .dm-help a{color:var(--accent);}
@media(max-width:640px){
  #dm-section .dm-row{grid-template-columns:1fr;align-items:flex-start;}
  #dm-section .dm-row-action{width:100%;}
  #dm-section .dm-row-confirm{flex:1;}
  #dm-section .dm-row-confirm input[type=text]{width:auto;flex:1;}
}
/* Light-theme tweaks */
body.light-theme #dm-section .dm-row-warn .dm-row-title{color:#B45309;}
body.light-theme #dm-section .dm-row-danger .dm-row-title{color:#B91C1C;}
body.light-theme #dm-section .dm-row-warn button:not([disabled]){color:#B45309;}
body.light-theme #dm-section .dm-row-danger button:not([disabled]){color:#B91C1C;background:rgba(248,113,113,.08);}

/* Build 0570 — Data Management action buttons were invisible in dark mode:
   the base .btn class carries no background/color of its own, so "Download
   (.json)" and the disabled type-to-confirm buttons rendered as UA-default
   black text on the dark card. Give every action button in this card the
   standard ghost-button look (matches .btn-g) plus a clearly readable
   disabled state in both themes. The amber/warn and red/danger rules above
   are more specific, so enabled Reset/Delete keep their warning colors. */
#dm-section .dm-row-action .btn{
  background:var(--surface2);
  color:var(--text2);
  border:1px solid var(--border2);
}
#dm-section .dm-row-action .btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
  background:transparent;
  border:1px dashed var(--border2);
  color:var(--text3);
}

/* Build 0569 — gold attention glow pulsed on #dm-section when the user is
   routed here from My Account → "Go to About › Data" so the eye lands on
   the Data Management card immediately. */
#dm-section.dm-glow{animation:dm-glow-pulse 2.4s ease-out;}
@keyframes dm-glow-pulse{
  0%   {box-shadow:0 0 0 3px rgba(245,196,76,.85), 0 0 28px rgba(245,196,76,.50);}
  55%  {box-shadow:0 0 0 3px rgba(245,196,76,.50), 0 0 18px rgba(245,196,76,.28);}
  100% {box-shadow:0 0 0 0 rgba(245,196,76,0), 0 0 0 rgba(245,196,76,0);}
}
body.light-theme #dm-section.dm-glow{animation:dm-glow-pulse-light 2.4s ease-out;}
@keyframes dm-glow-pulse-light{
  0%   {box-shadow:0 0 0 3px rgba(184,134,11,.75), 0 0 24px rgba(184,134,11,.40);}
  55%  {box-shadow:0 0 0 3px rgba(184,134,11,.45), 0 0 16px rgba(184,134,11,.22);}
  100% {box-shadow:0 0 0 0 rgba(184,134,11,0), 0 0 0 rgba(184,134,11,0);}
}


#m-my-account .ma-section{
  padding:14px 0;
  border-top:1px solid var(--border);
}
#m-my-account .ma-section:first-child{border-top:0;padding-top:0;}
#m-my-account .ma-section-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;}
#m-my-account .ma-section-ico{font-size:22px;line-height:1;margin-top:1px;}
#m-my-account .ma-section-title{font-size:14px;font-weight:700;color:var(--text);}
#m-my-account .ma-section-sub{font-size:11px;color:var(--text3);margin-top:2px;}
#m-my-account .ma-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;}
#m-my-account .ma-grid .field{margin:0;}
#m-my-account .ma-grid .field > span{display:block;font-size:11px;color:var(--text3);margin-bottom:4px;}
#m-my-account .ma-grid input[type="text"],
#m-my-account .ma-grid input[type="email"],
#m-my-account .ma-grid input[type="color"]{
  width:100%;
  box-sizing:border-box;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:6px;
  color:var(--text);
  padding:7px 10px;
  font-size:13px;
  font-family:var(--sans);
}
#m-my-account .ma-optional{color:var(--text3);font-weight:400;font-size:10px;letter-spacing:.3px;text-transform:uppercase;margin-left:6px;}
/* Build 0924 — stacked settings rows: small uppercase label ABOVE the value/action,
   hairline divider between rows. Cleaner, roomier My Account (owner redesign). */
#m-my-account .ma-row{
  display:block;
  padding:14px 0;
  border-top:1px solid var(--border);
}
#m-my-account .ma-section-head + .ma-row{border-top:0;}
#m-my-account .ma-row-lbl{font-size:11px;color:var(--text3);font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:7px;}
#m-my-account .ma-row-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
#m-my-account .ma-row-ctl select{
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:6px;
  color:var(--text);
  padding:6px 10px;
  font-size:13px;
  font-family:var(--sans);
  min-width:180px;
}
#m-my-account .ma-radio{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text2);
  cursor:pointer;
  padding:4px 10px;
  border:1px solid var(--border2);
  border-radius:14px;
  background:var(--surface);
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
#m-my-account .ma-radio:hover{border-color:var(--amber);color:var(--text);}
#m-my-account .ma-radio input{margin:0;accent-color:var(--amber);}
#m-my-account .ma-radio input:checked + span{color:var(--text);font-weight:600;}
#m-my-account .ma-help{font-size:11px;color:var(--text3);}
/* Build 0925 — value-left / action-right line inside a stacked row (mockup match). */
#m-my-account .ma-rowline{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
#m-my-account .ma-rowval{font-size:14px;color:var(--text);min-width:0;}
#m-my-account .ma-actions{display:flex;flex-wrap:wrap;gap:8px;}

/* Density — compact halves vertical padding on common row + field selectors. */
body[data-density="compact"] .field{margin-bottom:6px;}
body[data-density="compact"] .field input,
body[data-density="compact"] .field select,
body[data-density="compact"] .field textarea{padding-top:5px;padding-bottom:5px;}
body[data-density="compact"] .card{padding:8px 12px;}
body[data-density="compact"] .cr-row{padding:7px 10px;}
body[data-density="compact"] .trow{padding:6px 10px;}
body[data-density="compact"] .pcard{padding:8px 12px;}
body[data-density="compact"] .nav-btn{padding-top:6px;padding-bottom:6px;}
body[data-density="compact"] .modal-head{padding-top:10px;padding-bottom:10px;}

/* Font-size scale — multiplies the body root via CSS custom property where
   possible, falls back to a class-level font-size override.  Cascades through
   inheriting elements. */
body[data-fontsize="sm"]{font-size:11px;}
body[data-fontsize="md"]{font-size:15px;}  /* the existing default */
body[data-fontsize="lg"]{font-size:20px;}
body[data-fontsize="sm"] .ct,
body[data-fontsize="sm"] .pt{font-size:13px;}
body[data-fontsize="lg"] .ct,
body[data-fontsize="lg"] .pt{font-size:22px;}

/* Reduce motion — disable all animations + transitions when on. */
body[data-reduce-motion="1"] *,
body[data-reduce-motion="1"] *::before,
body[data-reduce-motion="1"] *::after{
  animation-duration:0s !important;
  animation-delay:0s !important;
  transition-duration:0s !important;
  transition-delay:0s !important;
  scroll-behavior:auto !important;
}

/* Build 0637 — Project View (mpjv) neat layout: a grouped Details card +
   self-contained section cards (Tasks/Blockers/Team/Comments) with a header
   row (icon + title + count + action) and an internally-scrolling list so a
   huge list never stretches the modal. */
.mpjv-seclabel{font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--text3);text-transform:uppercase;margin-bottom:8px;}
.mpjv-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);padding:14px;}
.mpjv-sec{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);padding:4px 14px 12px;margin-top:12px;}
.mpjv-sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid var(--border);margin-bottom:6px;}
.mpjv-sec-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;}
.mpjv-count{font-size:11px;font-weight:500;color:var(--text3);background:var(--surface2);padding:1px 8px;border-radius:10px;}
.mpjv-list{max-height:420px;overflow-y:auto;}
.mpjv-list::-webkit-scrollbar{width:8px;}
.mpjv-list::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:8px;}

/* Light theme — modal surfaces should sit on cream instead of dark. */
body.light-theme #m-my-account .modal{background:var(--bg2);}
body.light-theme #m-my-account .ma-radio{background:var(--bg2);}

/* ── Theme picker swatches (My Account → Appearance) ──────────────────────
   Token-driven so the picker itself recolors with the active theme. */
.ma-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:8px;}
.ma-swatch{padding:10px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;background:var(--surface);text-align:left;transition:border-color .15s,box-shadow .15s;}
.ma-swatch:hover{border-color:var(--border2);}
.ma-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--aglow);}
.ma-swatch-prev{height:34px;border-radius:7px;border:1px solid rgba(0,0,0,.08);margin-bottom:8px;display:flex;align-items:center;gap:6px;padding:0 8px;}
/* Name sits on the preview chip, whose bg is ALWAYS a light palette color
   (even in dark mode), so pin a dark ink instead of var(--text) — otherwise
   the near-white dark-mode --text is unreadable on the light chip. */
.ma-swatch-name{font-size:12.5px;font-weight:600;color:#1A2438;}

/* (Build 0244 in-app admin styles removed in 0245 — admin center is now
   a standalone /admin page with its own embedded styles.) */

/* ============================================================================
   Build 0240 — Mobile responsiveness fixes
   ----------------------------------------------------------------------------
   Fixes reported on production:
     1. Identity widget (VD avatar + name) gets clipped on right edge of
        narrow viewports because flex-shrink was 0 and name didn't ellipsize.
     2. Dashboard tabs row (Statistics | Review | Accountability) squeezed
        "Accountability" label mid-word because d-tabbar used flex:1 1 0
        with no overflow scroll.
     3. Topbar hides streak/xp-mod/date at <=900px (already in CSS), but on
        slightly-wider screens (tablet ~ 901-1100px) all items still try
        to fit → tight + identity-widget overflow.
   ============================================================================ */

/* — Identity widget: shrink + ellipsize name instead of overflowing right — */
.identity-widget{ min-width: 0; max-width: 180px; }
.identity-widget .id-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

@media (max-width: 900px){
  .identity-widget{ max-width: 130px; padding: 4px 8px; gap: 6px; }
}
@media (max-width: 600px){
  /* Show just the avatar — hide the name + chevron to free space */
  .identity-widget{ max-width: 36px; padding: 3px; gap: 0; }
  .identity-widget .id-name,
  .identity-widget > span:last-of-type{ display: none !important; }
}

/* — Tablet (900-1100px): hide the heavy items the mobile breakpoint already
     hides on smaller viewports, so identity-widget always has room. — */
@media (max-width: 1100px){
  .topbar-right .streak-pill,
  .topbar-right .xp-mod,
  .topbar-right .date-txt{ display: none !important; }
}

/* — Theme toggle: hide earlier so the topbar fits comfortably on phones — */
@media (max-width: 700px){
  .topbar-right .theme-toggle{ display: none !important; }
}

/* — Dashboard tabs: allow horizontal scroll on mobile so labels don't get
     cut mid-word. Hide the scrollbar visually (still scrollable via swipe). — */
@media (max-width: 700px){
  .d-tabbar{
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .d-tabbar::-webkit-scrollbar{ display: none; }
  .d-tabbar > .d-tab{
    flex: 0 0 auto;        /* don't shrink — full label always visible */
    white-space: nowrap;    /* no mid-word wrap or truncation */
    min-width: max-content;
    padding: 10px 14px;
  }
}

/* — Topbar brand responsiveness (Build 0541) — prevent the logo + wordmark
     from overlapping on narrow screens. Drop the "Command Center" sub-line
     earlier (≤600px) so the name sits on one tidy line, keep the stack from
     shrinking into the logo, then hide the wordmark entirely on tiny phones
     (≤430px) so only the logo shows — never overlapping. — */
@media (max-width: 600px){
  .topbar-brand .brand-sub{ display: none; }
  .topbar-brand .brand-name{ font-size: 14px; white-space: nowrap; }
  .topbar-brand .brand-stack{ flex-shrink: 0; }
}
@media (max-width: 430px){
  .topbar-brand .brand-stack{ display: none; }
}

/* ============================================================================
   Build 0262 — Plan / trial banner at the top of the app
   Shows when org is on trial / past_due / canceled (never for active Pro).
   ============================================================================ */
.plan-banner{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 9px 18px;
  font-size: 13px; font-weight: 500;
  color: #FFFFFF;
  background: linear-gradient(135deg, #0F2347 0%, #173C74 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  flex-wrap: wrap;
}
.plan-banner-warn{ background: linear-gradient(135deg, #B45309 0%, #92400E 100%); }
.plan-banner-error{ background: linear-gradient(135deg, #B91C1C 0%, #7F1D1D 100%); }
.plan-banner-btn{
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.45);
  color: #FFFFFF;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.plan-banner-btn:hover{ background: rgba(255,255,255,0.32); }
body.plan-banner-active{ padding-top: 38px; --app-offset:38px; }
body.plan-banner-active .topbar{ top: 38px !important; }
body.plan-banner-active.view-as-banner-active{ padding-top: 76px; --app-offset:76px; }
body.plan-banner-active.view-as-banner-active .view-as-banner{ top: 38px; }
body.plan-banner-active.view-as-banner-active .topbar{ top: 76px !important; }
@media (max-width: 700px){
  .plan-banner{ padding: 7px 12px; font-size: 12px; gap: 8px; }
  .plan-banner-btn{ padding: 4px 10px; font-size: 11.5px; }
  body.plan-banner-active{ padding-top: 36px; --app-offset:36px; }
  body.plan-banner-active .topbar{ top: 36px !important; }
}

/* ============================================================================
   Build 0259 — Theme-aware autocomplete dropdown
   Used wherever <datalist> would be ugly. Auto-themes via CSS vars.
   ============================================================================ */
.ac-wrap{ position: relative; }
.ac-dropdown{
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
  max-height: 260px;
  overflow-y: auto;
  z-index: 9999;
  font-family: var(--sans);
  /* Hide default scrollbar styling on Webkit; keep it on Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.ac-dropdown::-webkit-scrollbar{ width: 8px; }
.ac-dropdown::-webkit-scrollbar-thumb{ background: var(--border2); border-radius: 4px; }
.ac-dropdown::-webkit-scrollbar-track{ background: transparent; }

.ac-item{
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  line-height: 1.35;
  transition: background-color 0.08s ease;
}
.ac-item:last-child{ border-bottom: none; }
.ac-item:hover,
.ac-item.active{
  background: var(--surface2);
  color: var(--text);
}
.ac-item mark{
  background: transparent;
  color: var(--amber);
  font-weight: 700;
  padding: 0;
}

/* Light theme: tweak shadow so the dropdown reads against cream bg */
body.light-theme .ac-dropdown{
  box-shadow: 0 8px 24px rgba(15, 35, 71, 0.16);
}
body.light-theme .ac-item mark{
  color: var(--gold-deep, #A8893E);
}

/* ─────────────────────────────────────────────────────────────────────
   Build 0291 — Icons / Words action-button preference
   Every action button across the app has a <span class="btn-label">Word</span>
   alongside its icon. By default the label is hidden. When the user picks
   "Words" mode in My Account, body.action-mode-words reveals every label
   in a single CSS toggle.

   Per-user, per-browser: localStorage 'vd-action-mode' is the fast source,
   user_metadata.action_mode is the cross-device source.
   ─────────────────────────────────────────────────────────────────────── */
.btn-label{
  display: none;
  margin-left: 5px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
body.action-mode-words .btn-label{
  display: inline;
}
/* Buttons need a touch more horizontal room when the label appears so the
   icon and word don't crowd each other. Only affects xs (action-row) btns. */
body.action-mode-words .btn.xs{
  padding-left: 9px;
  padding-right: 9px;
}
/* On very narrow screens (mobile portrait), collapse labels back to icons
   so card action rows don't overflow. Users on mobile see Icons mode
   regardless of preference. */
@media (max-width: 520px){
  body.action-mode-words .btn-label{ display: inline; }
  body.action-mode-words .btn.xs{ padding-left: 8px; padding-right: 8px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Build 0293 — Card description subtitle
   Goes right under the title on every card. Smaller font, muted color,
   max 2 lines with ellipsis so cards stay consistent height.
   ─────────────────────────────────────────────────────────────────────── */
.card-desc{
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  margin: -2px 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-desc.is-empty{
  color: var(--text3);
  font-style: italic;
  font-size: 11px;
}

/* ─────────────────────────────────────────────────────────────────────
   Build 0292 — Card action toolbar
   Every card (Task / Project / Goal / Blocker / Member) gets a dedicated
   toolbar at the bottom. Subtle tonal background sets it apart from the
   card content. Buttons are grouped by intent: discover (Focus, Comment)
   | navigate (Details — the hero) | modify (Edit, Delete).
   ─────────────────────────────────────────────────────────────────────── */
/* Build 0294 — right-aligned, compact pill buttons in a single row.
   Removed the intent-group spacers; buttons hug the right edge of the
   card with tight gaps. Every button gets a visible circle/pill border
   at rest so the icon + word read as a single contained element. */
.card-action-bar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin: 12px -14px -14px;
  background: rgba(15, 35, 71, 0.04);
  border-top: 1px solid rgba(201, 169, 97, 0.20);
  border-radius: 0 0 12px 12px;
}
body.dark-theme .card-action-bar{
  background: rgba(201, 169, 97, 0.05);
  border-top-color: rgba(201, 169, 97, 0.22);
}
.card-action-bar .cab-group{
  display: flex;
  gap: 4px;
  align-items: center;
}
/* Cab-spacer is now an invisible small-gap separator between intent
   groups — keeps a slight breath between discover/navigate/modify but
   doesn't spread the buttons to opposite ends of the card. */
.card-action-bar .cab-spacer{
  display: inline-block;
  width: 6px;
  height: 0;
  flex: 0 0 6px;
}
/* Every action button gets a visible pill border at rest so the
   icon and label read as a single contained chip. */
.card-action-bar .btn.xs{
  border: 1px solid var(--border-strong, rgba(201,169,97,.35));
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(15, 35, 71, 0.03);
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s;
}
body.dark-theme .card-action-bar .btn.xs{
  background: rgba(201, 169, 97, 0.06);
  border-color: rgba(201, 169, 97, 0.30);
}
.card-action-bar .btn.xs.btn-g{
  color: var(--text2);
}
.card-action-bar .btn.xs.btn-g:hover{
  background: rgba(201, 169, 97, 0.14);
  border-color: rgba(201, 169, 97, 0.55);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.20);
  transform: translateY(-1px);
}
body.dark-theme .card-action-bar .btn.xs.btn-g:hover{
  background: rgba(212, 175, 55, 0.16);
  border-color: rgba(212, 175, 55, 0.60);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.32);
}
/* Hero (Details / primary) keeps its filled navy/gold treatment + pill
   shape. Build 0312 — Restore the navy gradient that the generic
   .card-action-bar .btn.xs background was clobbering. Without this, the
   Details button rendered as white text on a near-white surface in
   light mode (invisible). */
.card-action-bar .btn.xs.btn-p{
  border-radius: 999px;
  padding: 5px 13px;
  background: linear-gradient(135deg, #0B2A59, #173C74);
  color: #fff;
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 2px 8px rgba(11, 42, 89, 0.18);
}
.card-action-bar .btn.xs.btn-p:hover{
  background: linear-gradient(135deg, #0F2347, #1F4280);
  border-color: rgba(212, 175, 55, 0.70);
  color: #fff;
  box-shadow: 0 4px 14px rgba(11, 42, 89, 0.28), 0 0 0 2px rgba(201, 169, 97, 0.20);
  transform: translateY(-1px);
}
body.dark-theme .card-action-bar .btn.xs.btn-p{
  background: linear-gradient(135deg, var(--accent), #10284e);
  border-color: rgba(212, 175, 55, 0.30);
}
/* Tighter icon-to-label gap so the chip reads as one unit */
.card-action-bar .btn.xs .btn-label{
  margin-left: 4px;
}
/* Help button keeps its purple accent at rest */
.card-action-bar .btn.xs[style*="purple"]:not(:hover){
  color: var(--purple-soft, #A78BFA);
}
/* Focus star stays gold-tinted when active */
.card-action-bar .focus-star-btn.active{
  color: #C9A961;
}
/* Mobile portrait: tighter padding, spacers collapse */
@media (max-width: 520px){
  .card-action-bar{
    padding: 8px 8px;
    margin: 10px -10px -10px;
    gap: 3px;
    justify-content: flex-start;
  }
  body.action-mode-words .card-action-bar{
    gap: 6px;
    row-gap: 7px;
  }
  body.action-mode-words .card-action-bar .cab-group{
    flex-wrap: wrap;
  }
  .card-action-bar .cab-spacer{
    width: 0;
    flex: 0 0 0;
  }
  .card-action-bar .btn.xs{
    padding: 5px 9px;
  }
  body.action-mode-words .card-action-bar .btn.xs{
    min-height: 34px;
  }
}


/* ---------------------------------------------------------------------------
   Build 0504 - Print stylesheet. Any tab (Ctrl+P) -> clean executive printout:
   hides app chrome (top bar, sidebar, buttons, modals, banners, toasts, tour),
   expands content full-width, forces high-contrast black-on-white, no shadows.
   --------------------------------------------------------------------------- */
@media print {
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; box-shadow:none !important; text-shadow:none !important; }
  html, body{ background:#fff !important; color:#000 !important; }
  .topbar, .sidebar, .sidebar-overlay, .nav-btn, .mobile-nav, .mobile-bar,
  .mbg, .modal, #fb-launcher, .demo-banner, #demo-banner, .imp-banner,
  .undo-bar, #undo-bar, .toast, .toast-wrap, #toast-wrap, .tour-overlay,
  #vd-tour-overlay, #vd-tour-tip, #vd-tour-highlight, #cloud-reconnect-banner,
  .btn, button, .fab, .card-action-bar, .scope-tabs, .scope-tab,
  .filter-bar, .filters, .export-bar { display:none !important; }
  .main{ margin:0 !important; padding:0 !important; width:100% !important; max-width:100% !important; }
  .panel:not(.active){ display:none !important; }
  .card, .pcard, .trow, table, .crow, .section, .kpi-card{ break-inside:avoid; page-break-inside:avoid; border:1px solid #d0d0d0 !important; background:#fff !important; color:#000 !important; }
  a{ color:#000 !important; text-decoration:none !important; }
  @page{ margin:14mm; }
}

/* ── Build 0551 — Search Inspector customer view ───────────────────────────
   Score / Field / Matched-tokens are developer diagnostics. Outside dev mode
   (DevTools.enable() or staging/localhost) the modal gets .si-dev-off and the
   table collapses to: type · name · open. Rows are fully clickable. */
#m-search-inspector.si-dev-off .si-table th:nth-child(3),
#m-search-inspector.si-dev-off .si-table th:nth-child(4),
#m-search-inspector.si-dev-off .si-table th:nth-child(5),
#m-search-inspector.si-dev-off .si-table td:nth-child(3),
#m-search-inspector.si-dev-off .si-table td:nth-child(4),
#m-search-inspector.si-dev-off .si-table td:nth-child(5){ display:none; }
#m-search-inspector.si-dev-off .si-stats{ display:none; }
.si-table tr.si-row:hover .si-name{ text-decoration:underline; }

/* ── Build 0553 — comment deep-link flash + own-comment actions ──────────── */
@keyframes vd-comment-flash{
  0%,100%{ background:transparent; box-shadow:none; }
  50%{ background:rgba(212,175,55,.16); box-shadow:0 0 0 2px rgba(212,175,55,.45); }
}
.comment-flash{ animation:vd-comment-flash 1.1s ease 2; border-radius:8px; }
.comment-author .comment-actions{ display:inline-flex; gap:4px; margin-left:8px; vertical-align:middle; }
.cmt-act{ background:transparent; border:1px solid var(--border); border-radius:6px; color:var(--text3);
  font-size:10px; line-height:1; padding:3px 6px; cursor:pointer; }
.cmt-act:hover{ color:var(--text); border-color:var(--accent); }
.cmt-edit-box{ background:var(--surface); border:1px solid var(--border2); border-radius:6px;
  color:var(--text); font-family:inherit; font-size:12px; padding:8px; resize:vertical; }

/* ── Build 0555 — own comments always tinted differently from others' ────── */
.comment-mine .comment-body{ background:var(--adim); border:1px solid rgba(201,169,97,.35); }
.comment-mine .comment-av{ background:var(--accent); color:#1A1408; }
.comment-mine .comment-author{ color:var(--accent); }
body.light-theme .comment-mine .comment-body{ background:#F6EFD9; border-color:#DECB96; }
body.light-theme .comment-mine .comment-author{ color:#9A7B2F; }

/* ── Build 0557 — unread-comment pill on task/project cards ──────────────── */
.cmt-unread{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.3px;
  padding:1px 6px; border-radius:99px; vertical-align:middle;
  background:linear-gradient(135deg,#E3CC91,#C9A961); color:#3A2D06;
  border:1px solid rgba(201,169,97,.55); }
body.light-theme .cmt-unread{ background:#F0E2BB; color:#6B5414; border-color:#D8C48C; }

/* ── Build 0558 — "See more" link in comment threads ─────────────────────── */
.cmt-more{ background:none; border:none; padding:0; cursor:pointer;
  color:var(--accent); font-size:11px; font-weight:700; font-family:inherit; }
.cmt-more:hover{ text-decoration:underline; }

/* ── Build 0561 — comment author pill (readable in BOTH themes) ──────────── */
.cmt-author-pill{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.3px;
  padding:2px 8px; border-radius:99px; vertical-align:middle;
  background:var(--surface3,rgba(255,255,255,.12)); color:var(--text); border:1px solid var(--border2); }
.cmt-author-pill.mine{ background:linear-gradient(135deg,#E3CC91,#C9A961); color:#3A2D06;
  border-color:rgba(201,169,97,.55); }
body.light-theme .cmt-author-pill{ background:#ECE7DA; color:#243B53; border-color:#D8D2C2; }
body.light-theme .cmt-author-pill.mine{ background:var(--aglow);
  color:var(--amber); border-color:var(--amber); }


/* ── Build 0609 — Workflow ACCORDION BOARD (concept 1) ───────────────────
   Stages stack vertically; one open, the rest collapse to header bars.
   No horizontal scrolling. Collapsed bands stay drag-drop targets. */
#workflow-board{display:flex;flex-direction:column;gap:8px;overflow-x:visible;}
.wf-mine-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:4px;}
.wf-mine-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;}
.wf-mine-lbl{font-size:11px;color:var(--text3);letter-spacing:.02em;}
.wf-mine-num{font-size:20px;font-weight:700;line-height:1.3;}
.wf-stage{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden;}
.wf-stage.open{border-color:var(--accent);}
.wf-stage-head{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;user-select:none;min-width:0;}
.wf-stage-head:hover{background:var(--surface2);}
.wf-stage-ico{font-size:14px;flex-shrink:0;}
.wf-stage-name{font-size:13px;font-weight:600;flex-shrink:0;}
.wf-stage-desc{font-size:11px;color:var(--text3);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.wf-stage-chev{color:var(--text3);font-size:14px;flex-shrink:0;transition:transform .2s;line-height:1;}
.wf-stage.open .wf-stage-chev{transform:rotate(180deg);}
.wf-mine-chip{font-size:10px;font-weight:600;background:rgba(245,158,11,.16);color:var(--amber);padding:1px 8px;border-radius:9px;flex-shrink:0;}
.wf-stage-body{padding:10px 14px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:8px;border-top:1px solid var(--border);}
.wf-stage.wf-drag-over{outline:2px dashed var(--accent);outline-offset:-2px;}
.wf-stage-body .workflow-card{padding:8px 10px;margin:0;}
.wf-stage-body .workflow-card .workflow-card-top{margin-bottom:4px;}
.wf-stage-body .workflow-card .workflow-card-meta{margin-bottom:4px;}
@media (max-width:700px){
  .wf-stage-desc{display:none;}
  .wf-stage-body{grid-template-columns:1fr;}
}

/* Build 0611 — password fields ship as type=text with CSS dot-masking so
   the page never contains a real password field (Chrome classified the app
   as a login page and pinned its credential picker to the global search).
   Firefox fallback: my-account.js flips types while the modal is open. */
.cp-mask{-webkit-text-security:disc;}

/* ── Build 0614 — Blockers 2.0 (blocker-contract.json) ───────────────────
   All CSS variables — light + dark themes inherit automatically. */
.btn-resolve{background:var(--green) !important;border-color:var(--green) !important;color:#fff !important;font-weight:600;}
.btn-resolve:hover{filter:brightness(1.1);}
.btn-resolve[disabled]{filter:saturate(.4);}
.blk-item-panel{border:1px solid var(--border);background:var(--surface2);border-radius:var(--r);padding:4px 12px 12px;}
.blk-ip-head{font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--amber);margin:8px 0 6px;}
.blk-ip-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;}
.blk-ip-lbl{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:2px;}
.blk-ip-val{font-size:12px;color:var(--text2);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:5px 8px;min-height:16px;word-break:break-word;}
.blk-onlog{background:rgba(226,75,74,.08);border:1px solid rgba(226,75,74,.35);border-radius:var(--r);padding:8px 12px;font-size:11px;color:var(--text2);line-height:1.7;}
.blk-onlog b{color:var(--red);letter-spacing:.04em;font-size:10px;}
.blk-banner{display:flex;background:var(--surface2);border:1px solid rgba(226,75,74,.45);border-radius:var(--r);overflow:hidden;margin-bottom:12px;}
.blk-banner-rail{width:4px;background:var(--red);flex-shrink:0;}
.blk-banner-body{padding:9px 13px;flex:1;min-width:0;}
.blk-banner-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--red);margin-bottom:4px;}
.blk-banner-desc{font-size:12.5px;font-weight:600;color:var(--text);}
.blk-banner-meta{font-size:11px;color:var(--text3);margin-top:3px;}
.blk-banner-chain{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px;padding-top:7px;border-top:1px solid var(--border);}
@media (max-width:640px){.blk-ip-grid{grid-template-columns:1fr;}}
/* Build 0615 — unified Blockers-tab card (one card per blocked situation) */
.blk2-card{display:flex;flex-direction:column;}
.blk2-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:2px 0 6px;}
.blk2-title{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.4;cursor:pointer;margin-bottom:3px;}
.blk2-title:hover{color:var(--accent);}
.blk2-desc{font-size:11.5px;color:var(--text2);line-height:1.45;cursor:pointer;margin-bottom:7px;}
.blk2-chain{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:10.5px;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:6px 9px;margin-bottom:8px;}
.blk2-meta{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px;}
.blk2-help-chip{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--amber);background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.4);border-radius:99px;padding:2px 9px;}
/* Build 0682 — WCAG2-8: honor prefers-reduced-motion (was claimed but unimplemented) */
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

/* Build 0688 — goal-detail hover affordances moved from inline on* handlers to CSS (CSP-2 dropped script-src 'unsafe-inline') */
.gd-addwhy:hover{ border-color:#C9A961 !important; background:rgba(201,169,97,.06) !important; }
.gd-projrow:hover{ background:rgba(201,169,97,.08); box-shadow:inset 0 0 0 1px rgba(201,169,97,.25); }

/* ════════════════════════════════════════════════════════════════
   Accountability Slice 1 (Builder C — UI) — Definition of Done +
   evidence-gated review. Token-only so it themes across dark + all 6
   light palettes. These classes only render when the feature flag is on;
   flag-off leaves the host blocks display:none (set inline + by JS).
   ════════════════════════════════════════════════════════════════ */
.acct-fields{
  margin-top:12px;padding:12px;border:1px solid var(--border2);border-radius:var(--r);
  background:var(--surface2);
}
.acct-toggle{
  display:flex;align-items:flex-start;gap:9px;margin-top:8px;cursor:pointer;
  font-size:13px;color:var(--text);line-height:1.4;
}
.acct-toggle input[type="checkbox"]{
  width:16px;height:16px;margin-top:1px;flex-shrink:0;cursor:pointer;
  accent-color:var(--accent);
}
.acct-toggle-text{display:flex;flex-direction:column;gap:1px;}
.acct-toggle-title{font-weight:500;color:var(--text);}
.acct-toggle-help{
  margin-top:8px;font-size:11px;color:var(--text3);line-height:1.5;
}
.acct-modal-lede{
  font-size:12px;color:var(--text2);line-height:1.55;margin-bottom:14px;
}
/* Accountability Slice 4 (Build 0749) — reason-for-slip badge + recommitment timeline */
.slip-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:999px;cursor:pointer;background:var(--surface3,rgba(148,163,184,.16));
  color:var(--text2);border:1px solid var(--border);}
.slip-badge:hover{filter:brightness(1.08);}
.slip-badge .vdi{opacity:.8;}
.slip-chronic{background:rgba(168,117,26,.16);color:#A8751A;border-color:rgba(168,117,26,.35);}
.slip-timeline{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.slip-row{border:1px solid var(--border);border-left:3px solid #A8751A;border-radius:0 8px 8px 0;
  padding:8px 12px;background:var(--surface2);}
.slip-dates{font-size:12px;font-weight:700;color:var(--text);font-family:var(--mono,monospace);}
.slip-arrow{color:#A8751A;font-weight:700;margin:0 2px;}
.slip-reason{font-size:12px;color:var(--text);margin-top:3px;line-height:1.45;white-space:pre-wrap;}
.slip-noreason{color:var(--text3);font-style:italic;}
.slip-meta{font-size:10.5px;color:var(--text3);margin-top:5px;}
.acct-section-label{
  font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:8px;
}
/* Definition-of-done recall card (shown in submit + review modals) */
.acct-dod-recall{
  margin-bottom:14px;padding:10px 12px;border-left:3px solid var(--purple);
  background:var(--surface2);border-radius:0 var(--r) var(--r) 0;
}
.acct-dod-recall-label{
  font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:4px;
}
.acct-dod-recall-text{font-size:12px;color:var(--text);line-height:1.5;white-space:pre-wrap;}
/* Evidence list (reviewer modal) */
.acct-evidence-list{display:flex;flex-direction:column;gap:8px;}
.acct-evidence-empty{
  font-size:12px;color:var(--text3);padding:10px 0;text-align:center;
}
.acct-evidence-item{
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface2);padding:10px 12px;
}
.acct-evidence-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.acct-evidence-type{
  font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;
}
.acct-evidence-content{font-size:13px;color:var(--text);line-height:1.5;word-break:break-word;}
.acct-evidence-body{white-space:pre-wrap;}
.acct-evidence-link{color:var(--purple);text-decoration:underline;word-break:break-all;}
.acct-evidence-link:hover{color:var(--accent);}
.acct-evidence-when{font-size:10px;color:var(--text3);margin-top:6px;}
@media (max-width:560px){
  .acct-evidence-row{flex-wrap:wrap;}
}

/* =========================================================================
   FOCUS (SIMPLE) — Build 0737
   The lightweight Focus tab: 3-card grid (Timer / Due Next / Decision Log)
   + the Outcome modal. TOKEN-ONLY so it themes across dark :root AND the
   6 light palettes (body.light-theme) AND the dark accent layer
   (body.theme-*:not(.light-theme)) with zero per-theme overrides.
   Composes with existing primitives: .card .ch .ct .btn(.-p/-g/-s/-d/-am)
   and the modal stack .mbg/.modal/.modal-head/.mtit/.modal-x/.modal-body.
   ========================================================================= */

/* ---- 3-column layout: each column is its OWN independent vertical flow ---- */
.focus-simple-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
}
/* Build 0868 — .focus-col (one per grid column) is the REAL fix for the Focus
   Timer dead-space gap. Build 0855's align-self:start on individual cards only
   stopped a SHORTER card's own box from stretching to fill its row — it could
   never shrink the row itself, and CSS Grid always sizes a row to its TALLEST
   participant. Recommended-Focus (tall: Why-this + Up-next list) shared a grid
   row with the short Timer card, so the row stayed tall regardless, leaving
   dead space below the Timer's Start button. Wrapping each column's cards in
   their own flex column removes the row concept between columns entirely —
   column 2 (Timer + Decision Log) now sizes purely off its own two cards,
   completely independent of column 1's height. */
.focus-col{display:flex;flex-direction:column;gap:16px;min-width:0;}
/* Cards stack on mobile (<900px, per spec) — each .focus-col becomes a full-width
   row and stacks its own cards; column groupings still apply (hero+Review, then
   Timer+Decision, then Due Next). */
@media (max-width:900px){
  .focus-simple-grid{grid-template-columns:1fr;gap:14px;}
  .focus-col{gap:14px;}
}

.focus-simple-grid .focus-card{display:flex;flex-direction:column;}
.focus-card .ch{margin-bottom:12px;flex-shrink:0;}

/* ---- Timer card ---- */
.focus-clock-wrap{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 0 6px;
}
.focus-clock{
  font-family:var(--mono);
  font-size:clamp(40px,9vw,60px);
  font-weight:600;
  letter-spacing:-2px;
  line-height:1;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  -webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";
}
/* state accents on the clock — applied to .focus-clock by the controller */
.focus-clock.is-running{color:var(--text);}
.focus-clock.is-paused{color:var(--amber);}
.focus-clock.is-overrun{color:var(--red);}
.focus-clock.is-idle{color:var(--text3);}

.focus-server-status{
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text3);display:inline-flex;align-items:center;gap:6px;min-height:14px;
}
.focus-server-status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--text3);flex-shrink:0;
}
.focus-server-status.synced::before{background:var(--green);}
.focus-server-status.syncing::before{background:var(--amber);}
.focus-server-status.error::before{background:var(--red);}

/* current item title + meta */
.focus-current-title{
  font-size:15px;font-weight:600;color:var(--text);line-height:1.35;
  text-align:center;margin-top:4px;word-break:break-word;
}
.focus-current-title.is-empty{color:var(--text3);font-weight:500;font-style:italic;}
.focus-current-meta{
  font-size:11px;color:var(--text3);text-align:center;margin-top:3px;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  min-height:14px;
}
.focus-current-meta .fc-chip{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;
  background:var(--adim);color:var(--accent);border:1px solid var(--aglow);
  font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:capitalize;
}

/* ---- Duration picker (segmented; 15 / 25 / 50, default 25) ---- */
.focus-duration{
  display:inline-flex;gap:4px;padding:4px;align-self:center;margin-top:4px;
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
}
.focus-duration[data-disabled="true"]{opacity:.5;pointer-events:none;}
.focus-duration-btn{
  appearance:none;border:none;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--text2);padding:6px 14px;border-radius:5px;
  transition:background .12s ease,color .12s ease;
}
.focus-duration-btn:hover{color:var(--text);background:var(--surface);}
.focus-duration-btn[aria-pressed="true"],
.focus-duration-btn.active{background:var(--accent);color:#fff;}
.focus-duration-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

/* Build 0796 — Custom minutes input on the timer card (edit the time directly) */
.focus-duration-customrow{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:11px;}
.focus-duration-customrow[hidden]{display:none;}
.focus-duration-customrow label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);}
.focus-duration-customrow input{width:76px;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:var(--sans);font-size:16px;font-weight:600;text-align:center;}
.focus-duration-customrow input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--surface2);}
.focus-duration-customunit{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--text2);}

/* ---- Action row (start / pause / done / cancel) ---- */
.focus-actions{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;
}
.focus-actions .btn{min-width:96px;justify-content:center;}
/* the controller toggles [hidden] on the buttons it doesn't need */
.focus-actions .btn[hidden]{display:none !important;}

/* DoD ("What does done look like?") capture row, revealed on start when the
   selected item has no success_condition yet. */
.focus-dod-row{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;
}
.focus-dod-row[hidden]{display:none !important;}
.focus-dod-label{
  font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;
  letter-spacing:.06em;
}
.focus-dod-input{width:100%;}

/* ---- Due Next card ---- */
.focus-due-list{display:flex;flex-direction:column;gap:8px;}
.focus-due-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface2);cursor:pointer;text-align:left;width:100%;
  font-family:var(--sans);
  transition:border-color .12s ease,background .12s ease,transform .08s ease;
}
.focus-due-row:hover{border-color:var(--border2);background:var(--surface3);}
.focus-due-row:active{transform:scale(.995);}
.focus-due-row[aria-current="true"],
.focus-due-row.is-active{border-color:var(--aglow);background:var(--adim);}
.focus-due-row:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.focus-due-icon{
  flex-shrink:0;width:24px;height:24px;border-radius:6px;display:flex;
  align-items:center;justify-content:center;font-size:12px;
  background:var(--surface3);color:var(--text3);
}
.focus-due-row[data-focus-type="task"]    .focus-due-icon{color:var(--accent);}
.focus-due-row[data-focus-type="project"] .focus-due-icon{color:var(--purple);}
.focus-due-row[data-focus-type="goal"]    .focus-due-icon{color:var(--green);}
.focus-due-row[data-focus-type="blocker"] .focus-due-icon{color:var(--red);}
.focus-due-main{flex:1;min-width:0;}
.focus-due-title{
  font-size:13px;font-weight:500;color:var(--text);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.focus-due-sub{
  font-size:11px;color:var(--text3);margin-top:2px;
  display:flex;align-items:center;gap:6px;
}
.focus-due-when{font-size:11px;color:var(--text3);flex-shrink:0;white-space:nowrap;}
.focus-due-when.is-overdue{color:var(--red);font-weight:600;}
.focus-due-empty{
  padding:22px 12px;text-align:center;color:var(--text3);font-size:12px;
  line-height:1.5;
}

/* ---- Decision Log card ---- */
.focus-decision-form{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.focus-decision-input,
.focus-decision-form textarea{width:100%;}
.focus-decision-form textarea{min-height:56px;}
.focus-decision-form .focus-decision-actions{display:flex;justify-content:flex-end;}

.focus-decision-list{display:flex;flex-direction:column;gap:8px;}
.focus-decision-item{
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface2);padding:10px 12px;
}
.focus-decision-item-title{
  font-size:13px;font-weight:600;color:var(--text);line-height:1.35;
  word-break:break-word;
}
.focus-decision-item-meta{
  font-size:11px;color:var(--text3);margin-top:4px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.focus-decision-impact{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;
  font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:capitalize;
  background:var(--pdim);color:var(--purple);border:1px solid var(--border);
}
.focus-decision-why{
  font-size:12px;color:var(--text2);margin-top:6px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;
}
.focus-decision-empty{
  padding:18px 12px;text-align:center;color:var(--text3);font-size:12px;line-height:1.5;
}

/* =========================================================================
   OUTCOME MODAL — #focus-outcome-modal
   Built on the shared .mbg/.modal stack; only the choice grid + note area
   are bespoke. The .mbg base already handles backdrop, centering, banner
   offset, and .open visibility, and body.light-theme .modal already
   restyles the surface for light mode.
   ========================================================================= */
#focus-outcome-modal .modal{max-width:480px;width:96vw;}
.focus-outcome-intro{
  font-size:12px;color:var(--text3);margin-bottom:12px;line-height:1.5;
}

/* choice grid (data-focus-outcome): completed / progress / blocked /
   needs_review / reassigned */
.focus-decision-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;
}
@media (max-width:520px){.focus-decision-grid{grid-template-columns:1fr;}}
.focus-decision-choice{
  appearance:none;cursor:pointer;text-align:left;font-family:var(--sans);
  display:flex;flex-direction:column;gap:3px;
  padding:11px 13px;border-radius:var(--r);
  border:1px solid var(--border2);background:var(--surface2);color:var(--text);
  transition:border-color .12s ease,background .12s ease,box-shadow .12s ease;
}
.focus-decision-choice:hover{border-color:var(--border2);background:var(--surface3);}
.focus-decision-choice-label{font-size:13px;font-weight:600;line-height:1.2;}
.focus-decision-choice-hint{font-size:11px;color:var(--text3);line-height:1.35;}
.focus-decision-choice[aria-pressed="true"],
.focus-decision-choice.selected{
  border-color:var(--aglow);
  background:var(--adim);
  box-shadow:0 0 0 1px var(--aglow) inset;
}
.focus-decision-choice:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
/* per-outcome accent dot on the label */
.focus-decision-choice .focus-decision-choice-label::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:7px;vertical-align:middle;background:var(--text3);
}
.focus-decision-choice[data-focus-outcome="completed"]    .focus-decision-choice-label::before{background:var(--green);}
.focus-decision-choice[data-focus-outcome="progress"]     .focus-decision-choice-label::before{background:var(--accent);}
.focus-decision-choice[data-focus-outcome="blocked"]      .focus-decision-choice-label::before{background:var(--red);}
.focus-decision-choice[data-focus-outcome="needs_review"] .focus-decision-choice-label::before{background:var(--amber);}
.focus-decision-choice[data-focus-outcome="reassigned"]   .focus-decision-choice-label::before{background:var(--purple);}

/* note + proof fields inside the modal */
.focus-outcome-field{margin-bottom:12px;}
.focus-outcome-field:last-child{margin-bottom:0;}
.focus-outcome-field label{
  font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;
  letter-spacing:.06em;display:block;margin-bottom:5px;
}
#focus-outcome-note{min-height:80px;}
#focus-outcome-proof{width:100%;}

/* ---- Stacking safety on very small screens ---- */
@media (max-width:560px){
  .focus-actions .btn{min-width:0;flex:1;}
  .focus-clock{letter-spacing:-1px;}
}

/* =========================================================================
   FOCUS START PALETTE — #focus-pick-modal (Build 0795)
   A command-palette modal opened by the hero "Start Focus" button. Built on
   the shared .mbg/.modal stack (backdrop, centering, banner offset, .open
   visibility, and body.light-theme .modal surface are all inherited). The
   .fp- classes below are the SHARED scheme the controller (focus-session-ui.js)
   renders into #focus-pick-list — keep these names in lockstep.
   Theme-aware via CSS vars; all text >=11px; mobile-friendly.
   ========================================================================= */
#focus-pick-modal .modal{max-width:520px;width:96vw;max-height:88vh;}
#focus-pick-modal .modal-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px;}

/* ---- Search row ---- */
.fp-search-row{position:relative;flex-shrink:0;}
#focus-pick-search{
  width:100%;font-size:13px;padding:9px 12px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:var(--r);color:var(--text);
}
#focus-pick-search::placeholder{color:var(--text3);}
#focus-pick-search:focus{border-color:var(--aglow);}

/* ---- Sort row (field select + direction toggle + readout) ---- */
.fp-sortrow{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  flex-shrink:0;
}
.fp-sortsel{
  height:36px;font-size:12px;font-family:var(--sans);
  padding:0 28px 0 10px;border-radius:var(--r);cursor:pointer;
  color:var(--text);background:var(--surface2);
  border:1px solid var(--border2);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23788599' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.fp-sortsel:focus{outline:none;border-color:var(--aglow);}
.fp-sortsel:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
/* direction toggle — bare button, navy text/border, gold arrow */
.fp-dir{
  display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 10px;cursor:pointer;
  font-size:12px;font-weight:600;font-family:var(--sans);
  color:var(--text);background:transparent;
  border:1px solid var(--border2);border-radius:var(--r);
  position:relative;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
/* >=44px hit area without growing the visual height */
.fp-dir::before{
  content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:44px;
}
.fp-dir:hover{background:var(--surface3);}
.fp-dir:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.fp-dir-ar{color:#C9A961;font-size:13px;line-height:1;font-weight:700;}
.fp-dir-lbl{display:inline;}
.fp-dir[disabled]{
  cursor:default;opacity:.55;color:var(--text3);
  background:transparent;border-color:var(--border);
}
.fp-dir[disabled] .fp-dir-ar{color:var(--text3);}
/* sort readout — one quiet italic line under the controls */
.fp-readout{
  font-size:12px;font-style:italic;color:var(--text2);
  line-height:1.3;margin-top:4px;flex-shrink:0;
}

/* ---- Ranked list ---- */
#focus-pick-list{
  display:flex;flex-direction:column;gap:4px;
  max-height:46vh;overflow-y:auto;
  margin:0 -4px;padding:2px 4px;flex:1;min-height:0;
}
.fp-empty{
  padding:20px 12px;text-align:center;color:var(--text3);
  font-size:12px;line-height:1.5;
}

/* a single focusable row [dot + title + meta + estimate] */
.fp-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:var(--r);cursor:pointer;
  border:1px solid transparent;background:var(--surface2);
  text-align:left;width:100%;font-family:var(--sans);
  transition:border-color .12s ease,background .12s ease,box-shadow .12s ease;
}
.fp-row:hover{background:var(--surface3);}
.fp-row:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

/* priority dot — semantic color by item.priority via data-fp-prio */
.fp-dot{
  flex-shrink:0;width:9px;height:9px;border-radius:50%;
  background:var(--text3);
}
.fp-dot[data-fp-prio="critical"]{background:var(--red);}
.fp-dot[data-fp-prio="high"]{background:var(--amber);}
.fp-dot[data-fp-prio="medium"]{background:var(--accent);}
.fp-dot[data-fp-prio="low"]{background:var(--text3);}

/* title + meta stack (takes the slack) */
.fp-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.fp-title{
  font-size:13px;font-weight:600;color:var(--text);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fp-meta{
  font-size:11px;color:var(--text3);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* time-estimate pill (auto, from priority) */
.fp-est{
  flex-shrink:0;font-size:11px;font-weight:600;color:var(--text2);
  background:var(--surface3);border:1px solid var(--border);
  border-radius:99px;padding:2px 9px;line-height:1.4;
  font-family:var(--mono);letter-spacing:-.2px;
}

/* selected row (smart default = row 0 / autopilot pick) */
.fp-row.fp-sel{
  border-color:var(--aglow);
  background:var(--adim);
  box-shadow:0 0 0 1px var(--aglow) inset;
}
.fp-row.fp-sel .fp-est{
  color:var(--amber);border-color:var(--aglow);background:var(--adim2);
}

/* ---- Duration row ---- */
.fp-dur-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  flex-shrink:0;padding-top:2px;
}
.fp-dur-label{
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em;margin-right:2px;
}
.fp-dur{
  font-size:12px;font-weight:600;font-family:var(--sans);
  padding:6px 13px;border-radius:99px;cursor:pointer;
  background:var(--surface2);color:var(--text2);
  border:1px solid var(--border2);
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.fp-dur:hover{background:var(--surface3);color:var(--text);}
/* active preset — navy fill, white text (approved preview) */
.fp-dur.on{
  background:#0f2347;color:#fff;border-color:#0f2347;
}
.fp-dur:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

/* custom minutes input (revealed when Custom chosen) */
.fp-custom{
  width:88px;flex-shrink:0;font-size:12px;padding:6px 10px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:99px;color:var(--text);
}
.fp-custom[hidden]{display:none;}
.fp-custom:focus{border-color:var(--aglow);}

/* ---- Footer (Cancel / Start) ---- */
#focus-pick-modal .mact{padding:12px 16px;}
.fp-foot-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;padding:8px 16px;border-radius:var(--r);
  cursor:pointer;font-family:var(--sans);
  transition:filter .12s ease,background .12s ease,color .12s ease;
}
.fp-foot-btn .vdi{width:15px;height:15px;}
[data-focus-pick-cancel]{
  background:var(--surface2);color:var(--text2);border:1px solid var(--border2);
}
[data-focus-pick-cancel]:hover{background:var(--surface3);color:var(--text);}
/* primary START — navy, white (matches the active duration chip) */
[data-focus-pick-start]{
  background:#0f2347;color:#fff;border:1px solid #0f2347;
}
[data-focus-pick-start]:hover{filter:brightness(1.15);}
[data-focus-pick-start]:active{transform:scale(.98);}
[data-focus-pick-start]:disabled{opacity:.5;cursor:not-allowed;filter:none;}

/* ---- Mobile ---- */
@media (max-width:520px){
  #focus-pick-modal .modal{width:100vw;max-width:none;max-height:92vh;border-radius:var(--rlg) var(--rlg) 0 0;}
  #focus-pick-list{max-height:40vh;}
  .fp-est{padding:2px 7px;}
  .fp-dur{padding:6px 11px;}
  #focus-pick-modal .mact{flex-wrap:wrap;}
  .fp-foot-btn{flex:1;justify-content:center;}
}

/* ===========================================================================
   #243(d) — Autopilot HERO richer styling (Build 0800, E5-css)
   Augments the base .vdfx-hero-* rules that focus-tab.js injects inline at
   module load. The controller's <style> is appended to <head> AFTER this
   linked sheet, so every rule below is scoped under #focus-autopilot-hero to
   win the cascade on specificity (id+class > class). Class names are taken
   verbatim from focus-tab.js _renderHero() — none invented. Theme-aware via
   design tokens only; all font-sizes >= 11px.

   NOTE ON OVERDUE-RED / SOON-AMBER: _renderHero() renders the due pill as a
   single <span class="vdfx-hero-due"> whose text comes from fmtDue() — it
   carries NO overdue/soon state class or data-attribute, so pure CSS cannot
   distinguish the two states. The pill is given one clear urgency treatment
   here; true red-vs-amber splitting needs a controller-side state hook (E1's
   focus-tab.js). See the data-* forward hooks below — harmless if never set,
   they light up automatically the day E1 emits them.
   =========================================================================== */

/* Subtle gold accent rail down the left edge of the whole hero card. */
#focus-autopilot-hero{
  position:relative;
  padding-left:13px;
  border-radius:var(--rsm);
}
#focus-autopilot-hero::before{
  content:"";
  position:absolute;
  left:0; top:2px; bottom:2px;
  width:3px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--amber),var(--aglow));
  opacity:.9;
  pointer-events:none;
}
body.light-theme #focus-autopilot-hero::before{opacity:.75;}

/* Richer due pill — gold/amber urgency tone with a soft tinted fill, lifting
   it above the flat accent-bordered base pill. */
#focus-autopilot-hero .vdfx-hero-due{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--amber);
  background:var(--adim2);
  border:1px solid var(--amber);
  box-shadow:0 1px 4px var(--aglow);
}
#focus-autopilot-hero .vdfx-hero-due::before{
  content:"";
  flex:0 0 auto;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 2px var(--adim2);
}
/* Forward hooks: light up the instant the controller adds a state signal.
   These match nothing today (no invented class is RELIED upon for render). */
#focus-autopilot-hero .vdfx-hero-due[data-due-state="overdue"],
#focus-autopilot-hero .vdfx-hero-due.is-overdue{
  color:var(--red);
  background:var(--rdim);
  border-color:var(--red);
  box-shadow:0 1px 4px var(--rdim);
}
#focus-autopilot-hero .vdfx-hero-due[data-due-state="overdue"]::before,
#focus-autopilot-hero .vdfx-hero-due.is-overdue::before{
  background:var(--red);
  box-shadow:0 0 0 2px var(--rdim);
}
#focus-autopilot-hero .vdfx-hero-due[data-due-state="soon"],
#focus-autopilot-hero .vdfx-hero-due.is-soon{
  color:var(--amber);
  background:var(--adim2);
  border-color:var(--amber);
}

/* Hero title — tighten the gold-rail relationship with a hair more presence. */
#focus-autopilot-hero .vdfx-hero-title{letter-spacing:-.1px;}

/* Primary Start button — give the hero CTA a subtle gold glow so it reads as
   the card's anchor action. */
#focus-autopilot-hero .vdfx-hero-start{
  box-shadow:0 2px 10px var(--aglow);
}
#focus-autopilot-hero .vdfx-hero-start:hover,
#focus-autopilot-hero .vdfx-hero-start:focus-visible{
  box-shadow:0 3px 14px var(--aglow);
}

/* Up-next RANK treatment — number each queued row 2,3,4… with a gold rank
   badge so the priority order is legible at a glance, plus a richer hover
   that nudges the row and warms the border to the accent. */
#focus-autopilot-hero .vdfx-hero-upnext-list{
  counter-reset:vdfx-up 1;        /* the hero itself is #1; queue starts at #2 */
}
#focus-autopilot-hero .vdfx-hero-upnext-row{
  position:relative;
  counter-increment:vdfx-up;
  padding-left:34px;
  transition:border-color .15s ease,transform .12s ease,background .15s ease;
}
#focus-autopilot-hero .vdfx-hero-upnext-row::before{
  content:counter(vdfx-up);
  position:absolute;
  left:8px; top:50%;
  transform:translateY(-50%);
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  font-weight:800;
  font-family:var(--mono,monospace);
  color:var(--amber);
  background:var(--adim2);
  border:1px solid var(--border);
  border-radius:50%;
  line-height:1;
}
#focus-autopilot-hero .vdfx-hero-upnext-row:hover{
  border-color:var(--accent);
  background:var(--surface3);
  transform:translateX(2px);
}
#focus-autopilot-hero .vdfx-hero-upnext-row:hover::before{
  border-color:var(--amber);
}

/* Up-next summary — small gold accent so the disclosure reads as "the queue". */
#focus-autopilot-hero .vdfx-hero-upnext>summary:hover{color:var(--amber);}

/* ─────────────────────────────────────────────────────────────────────
   Build 0954 — Clickable external links in descriptions/comments
   (src/components/linkify.js). Anchors are render-time only; every click
   is intercepted (events.js) and routed through the #m-extlink
   interstitial, so these are styling-only rules. */
.vd-extlink{color:var(--purple);text-decoration:underline;text-underline-offset:2px;word-break:break-all;overflow-wrap:anywhere;cursor:pointer;}
.vd-extlink:hover{color:var(--amber);}
.vd-extlink .vd-extlink-ico{opacity:.8;}