:root{
  /* ONE child sidebar, one width, one position — everywhere (Chad, 2026-08-03:
     "why not make all of the child side bars exactly the same and just as you
     open them they change"). The list view used 196px inside a centred .page
     while the detail view used 300px flush to the nav, so the rail visibly
     jumped sideways AND resized the moment you clicked a meeting. It's meant
     to read as one persistent rail whose CONTENTS swap, not two rails. */
  /* Narrowed from 300px to match the nav rail (Chad, 2026-08-03: "the child
     side bar is too big too wide"). The 300px figure was pinned to stop the
     rail RESIZING between list and detail views — that guarantee is about ONE
     width everywhere, not about the number, so changing this single variable
     keeps the fix intact: every child rail still reads from --rail-w. */
  --rail-w:240px;
  /* COLAB-inspired palette (Chad, 2026-07-18): royal blue → cyan gradient,
     chartreuse accent — on a clean white workspace */
  --blue-deep:#081A66; --blue-royal:#1733a5; --blue-mid:#1A4FD0; --cyan:#37BDF5; --cyan-soft:#7cc7f0;
  /* --accent is the generic "this control is active/selected" colour. It was
     referenced in ~10 rules but never DEFINED, so every one of them was dead:
     an undefined var() is invalid at computed-value time, which drops the whole
     declaration to its initial value rather than falling back to the rule
     underneath. .btn.btn-ghost.on therefore computed to a TRANSPARENT
     background with WHITE text and a WHITE border — the selected button was
     literally invisible on a white surface (Chad, 2026-08-06). It aliases
     --blue-royal, which is what the one rule that bothered with a fallback
     already assumed: .hr-focus uses var(--accent,#1733a5).
     NOT the chartreuse DESIGN.md calls "the accent" — that is --chart, and it
     is a fill/highlight colour. Every --accent site is an INTERACTION colour
     (focus rings, links, selected chips, white-on-fill), where chartreuse is
     unreadable. Don't "correct" this to #e8ee55. */
  --accent:#1733a5;
  --chart:#D6E24A; --chart-deep:#c3d02f; --chart-ink:#5a5f0e;
  --csc:#69b048; --csc-deep:#4e8a33; --ffc:#e31937; --ffc-deep:#a01423; --kh:#1733a5;
  /* workspace neutrals + status colors lifted from monday's Vibe tokens */
  --ink:#323338; --ink-soft:#50525f; --muted:#676879;
  --line:#d0d4e4; --line-soft:#e6e9f2;
  --bg:#f6f7fb; --card:#ffffff;
  --st-done:#00c875; --st-doing:#fdab3d; --st-todo:#c4c4c4; --st-stuck:#e2445c;
  --m-fast:70ms; --m-med:100ms; --m-slow:150ms;
  --ease-emph:cubic-bezier(0,0,.2,1.4);
  --grad:linear-gradient(120deg,#081A66 0%,#1A4FD0 48%,#37BDF5 100%);
  --grad-soft:linear-gradient(115deg,rgba(23,51,165,.08),rgba(55,189,245,.10));
  --r-sm:10px; --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(8,26,102,.05),0 4px 14px rgba(8,26,102,.06);
  --shadow-md:0 6px 16px rgba(8,26,102,.09),0 16px 40px rgba(8,26,102,.11);
  --shadow-lg:0 24px 70px rgba(9,18,60,.38);
  --ring:0 0 0 3px rgba(55,189,245,.28);
}
/* ⚠ There is deliberately NO --surface-2 (nor --surface) token, and nothing
   should add one. Until 2026-08-17, 19 total/section rows across the exec
   cash-flow, P&L and Cash pages were written as var(--surface-2,#eaf1fb) —
   a token that has never existed, so the literal fallback always won. Two
   problems came out of that: on the one genuinely dark surface in the app
   (.fb-theme, the Daily Intel board) the pale fallback painted a light band
   behind near-white text and the totals were unreadable (fixed in 88d187a);
   and defining --surface-2 later would have silently repainted all 19 rows
   at once. Those rows now carry their own literal colours, because they are
   NOT one shared surface — the finance tables use the shade to encode
   hierarchy (#eaf1fb = grand total, #f6f8fa = subtotal, #f0f3f7 = section
   head). Collapsing them into one token would destroy that distinction.
   If a dark theme ever reaches these pages, replace the literals with a
   translucent neutral like rgba(127,127,127,.14), which tints whatever card
   colour is underneath instead of replacing it — never a fixed surface hex. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);font-size:var(--ui-size);line-height:var(--ui-line);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,.login-card h1,.rail-title,.login-wordmark,.sc-name{font-family:var(--font-head)}
.hidden{display:none !important}
button{font-family:inherit}
/* ── Global form-control baseline ─────────────────────────────────────────────
   Every text-like input / select / textarea inherits the OS's rounded chrome by
   default, so a control can never render as a raw browser default no matter where
   it lives. These are ELEMENT-level selectors (specificity 0,0,1), so ANY class-
   based rule (.field, .fld, .st-row, .ksup, …) still wins and keeps its custom
   sizing. Non-text inputs (checkbox/radio/color/range/file) are reset back to
   native rendering below. */
input,select,textarea{font-family:inherit;font-size:var(--t-body);color:var(--ink);background-color:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 12px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:var(--ring)}
input[type=checkbox],input[type=radio],input[type=color],input[type=range],input[type=file]{border:none;border-radius:0;padding:0;background:none;font-size:inherit}
input[type=color]{width:34px;height:34px;padding:0}
::selection{background:rgba(55,189,245,.3)}
img{max-width:100%}

/* ================= Login ================= */
.login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--grad);overflow:hidden}
.login::before{content:"";position:absolute;width:720px;height:720px;border-radius:50%;filter:blur(120px);opacity:.5;background:radial-gradient(circle,#37BDF5,transparent 62%);bottom:-260px;right:-200px;animation:drift 16s ease-in-out infinite alternate}
.login::after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(110px);opacity:.35;background:radial-gradient(circle,#D6E24A,transparent 65%);top:-200px;left:-140px;animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(50px,36px) scale(1.1)}}
.login-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 78%)}
.login-card{position:relative;z-index:2;width:100%;max-width:430px;margin:20px;background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.6);border-radius:26px;box-shadow:var(--shadow-lg);padding:40px 38px 30px;animation:rise .5s cubic-bezier(.2,.8,.25,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.login-mark{display:flex;align-items:center;gap:11px}
.mark{width:44px;height:44px;border-radius:13px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:var(--chart);font-weight:800;font-size:var(--t-body);letter-spacing:.5px;box-shadow:0 8px 20px rgba(8,26,102,.35)}
.login-wordmark{font-weight:800;font-size:var(--t-headline);letter-spacing:-.2px;color:var(--blue-deep)}
.login-wordmark em{font-style:normal;color:var(--blue-mid)}
.rail-sub{font-size:var(--t-caption2);color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-top:1px}
.login-card h1{margin:22px 0 8px;font-size:var(--t-title1);letter-spacing:-.6px;line-height:1.2;background:linear-gradient(110deg,#081A66 25%,#1A4FD0 70%,#37BDF5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-sub{margin:0 0 26px;color:var(--ink-soft);font-size:var(--t-footnote)}
.google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border:1px solid var(--line);border-radius:13px;background:#fff;font-weight:600;font-size:var(--t-body);cursor:pointer;transition:.18s}
.google-btn:hover{border-color:var(--cyan);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.login-divider{display:flex;align-items:center;gap:10px;margin:24px 0 14px;color:var(--muted);font-size:var(--t-caption2);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.persona-list{display:flex;flex-direction:column;gap:7px;max-height:250px;overflow:auto}
.persona{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:13px;cursor:pointer;background:#fff;text-align:left;transition:.15s}
.persona:hover{border-color:var(--cyan);background:rgba(55,189,245,.06);transform:translateX(3px)}
.avatar{width:34px;height:34px;border-radius:50%;flex:0 0 34px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:var(--t-caption);background:var(--blue-royal);box-shadow:inset 0 -8px 14px rgba(0,0,0,.2)}
.persona .p-name{font-weight:600;font-size:var(--t-footnote)}
.persona .p-role{font-size:var(--t-caption);color:var(--muted)}
.login-note{font-size:var(--t-caption2);color:var(--muted);margin-top:18px;line-height:1.5}

/* ================= Shell ================= */
/* ── App bar (Chad, 2026-08-03: "create a top menu bar where everything lives")
   One horizontal bar for everything that belongs to the APP rather than to a
   module: brand, back/forward, account. The per-module bar (.topbar) sits below
   it inside .main and owns title/views/actions/filters. Two bars, two jobs —
   the app bar never changes between modules, so it's the fixed frame the rest
   of the UI hangs off.
   --appbar-h is the single source of truth for its height; .shell subtracts it
   so the rail and content still fill exactly one viewport. */
:root{--appbar-h:56px}
/* Navy, matching the rail — the design pack's prototype draws the app bar as
   the same surface as the nav, so the whole left-and-top chrome reads as one
   frame with the white work area inside it. */
/* ===== App bar — v1.0 shell spec §1 =====
   One band, identical in every module. --appbar-h stays 56 (the prototype draws
   54; design's own note says keep 56 because .shell and every sticky rail
   subtract from it — a LAYOUT LAW invariant is not worth re-pinning for 2px). */
.appbar{height:var(--appbar-h);flex:0 0 auto;display:flex;align-items:center;
  gap:10px;background:var(--appbar-grad);
  color:#fff;padding:0 var(--appbar-pad);position:relative;z-index:60}
/* §1.1 The brand block's width IS the alignment mechanism: (rail + child rail)
   − 21 puts Create/Help directly above the content pane's left edge instead of
   floating over the rails. .no-child-rail is set by render() from what was
   actually drawn — Home has no child rail. */
.appbar-brand{width:var(--brand-w);flex:0 0 var(--brand-w);display:flex;align-items:center;gap:9px;
  padding:5px 8px;border:none;background:none;color:#fff;cursor:pointer;text-align:left;
  border-radius:9px;transition:background var(--m-fast) ease}
.appbar.no-child-rail .appbar-brand{width:var(--brand-w-narrow);flex-basis:var(--brand-w-narrow)}
.appbar-brand:hover{background:rgba(255,255,255,.12)}
.appbar-brand .mark{width:22px;height:22px;flex:0 0 22px;font-size:var(--t-caption2);border-radius:6px;
  background:rgba(255,255,255,.12);border:none;color:var(--chart)}
.ab-word{font-family:var(--font-head,Poppins,Figtree,sans-serif);font-weight:800;font-size:var(--t-footnote);letter-spacing:-.2px}
.ab-word em{font-style:normal;color:var(--chart)}
.ab-caret{font-size:var(--t-caption2);opacity:.6}
/* §1.2 Create · Help · [+]. Desktop only. */
.appbar-menu{display:flex;align-items:center;gap:2px;padding-left:10px;
  border-left:1px solid rgba(255,255,255,.18)}
.abm-wrap{position:relative}
.abm-item{border:0;background:none;font-family:inherit;font-size:var(--t-caption);font-weight:600;color:rgba(255,255,255,.72);
  padding:6px 11px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background var(--m-fast)}
.abm-item:hover{background:rgba(255,255,255,.14);color:#fff}
.abm-caret{font-size:var(--t-caption);opacity:.95}
/* Reserved slot — a future menu lands here. Deliberately not wired. */
.abm-slot{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:1px dashed rgba(255,255,255,.28);border-radius:8px;color:rgba(255,255,255,.4);font-size:var(--t-caption)}
.abm-menu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line-soft);
  border-radius:12px;box-shadow:var(--shadow-md);padding:5px;min-width:186px;z-index:70}
@media(max-width:1199px){.appbar-menu{display:none}}
.appbar-right{margin-left:auto;position:relative;display:flex;align-items:center;gap:8px}
/* Help moved here from .appbar-menu (Chad, 2026-08-08: "help should be by the
   search button"). It keeps .abm-item's look so the two chips still read as one
   family, and it inherits .appbar-menu's desktop-only rule below so a phone bar
   doesn't gain a control it never had. */
.appbar-right .ab-help{margin-right:2px}
@media(max-width:1199px){.appbar-right .ab-help{display:none}}
/* §1.3 Search */
.ab-search{position:relative;display:flex;align-items:center}
.ab-search-btn{display:flex;align-items:center;gap:7px;height:var(--appbar-ctl);padding:0 12px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);border-radius:9px;
  color:rgba(255,255,255,.82);font-family:inherit;cursor:pointer;width:230px;
  transition:background var(--m-fast) ease}
.ab-search-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.abs-glyph{font-size:var(--t-body)}
.abs-label{font-size:var(--t-caption);font-weight:600}
.abs-kbd{margin-left:auto;font-size:var(--t-caption2);font-weight:700;opacity:.6}
.ab-search-input{width:230px;height:var(--appbar-ctl);border-radius:9px;border:1px solid var(--cyan);
  background:#fff;color:var(--ink);font-family:inherit;font-size:var(--t-footnote);padding:0 32px 0 12px;outline:none}
.ab-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:none;
  color:var(--muted);cursor:pointer;font-size:var(--t-caption);padding:4px}
@media(max-width:1199px){.ab-search-btn,.ab-search-input{width:160px}.abs-kbd{display:none}}
@media(max-width:767px){.ab-search-btn{width:var(--appbar-ctl);padding:0;justify-content:center}
  .abs-label{display:none}.ab-search-input{width:180px}}
.search-panel{position:absolute;top:calc(100% + 8px);right:0;width:420px;max-width:78vw;
  max-height:min(62vh,440px);overflow:auto;background:#fff;border-radius:14px;
  box-shadow:0 22px 54px rgba(8,26,102,.26);padding:7px;z-index:80;color:var(--ink)}
@media(max-width:1199px){.search-panel{width:340px}}
@media(max-width:767px){.search-panel{width:280px}}
.sp-cap{display:flex;justify-content:space-between;gap:10px;padding:7px 10px 5px;
  font-size:var(--t-caption2);font-weight:700;color:var(--muted)}
.sp-group{font-size:var(--t-caption2);font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:#b0b6cc;padding:8px 10px 3px}
.sp-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:none;
  padding:7px 10px;border-radius:9px;cursor:pointer;font-family:inherit}
.sp-row:hover{background:#f2f5fc}
.sp-title{font-size:var(--t-caption);font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-ctx{margin-left:auto;font-size:var(--t-caption);color:#8b8d9b;max-width:44%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:0 0 auto}
.sp-empty{padding:16px 12px;font-size:var(--t-caption);color:var(--muted)}
/* Withheld matches are a COUNT WITH NO TITLES — never a leaked name. */
.sp-withheld{margin:6px 4px;padding:9px 11px;background:#f6f7fb;border-radius:9px;
  font-size:var(--t-caption);color:var(--ink-soft)}
.sp-ask{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:var(--t-caption);font-weight:600;color:#6b3fc0;padding:9px 10px;
  border-top:1px solid var(--line-soft);margin-top:5px;border-radius:0 0 9px 9px}
.sp-ask:hover{background:#faf7ff}
/* §1.5 Avatar — a 44px circle, nothing more. */
.ab-avatar{width:var(--appbar-ctl);height:var(--appbar-ctl);flex:0 0 var(--appbar-ctl);
  border:none;background:none;padding:0;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:transform var(--m-fast) ease}
.ab-avatar:active{transform:var(--press,scale(.96))}
.ab-avatar .avatar{width:var(--appbar-ctl);height:var(--appbar-ctl);flex-basis:var(--appbar-ctl);font-size:var(--t-footnote)}
/* The account chip was white-on-navy in the rail foot; in a white bar it needs
   the normal ink colours. */
.appbar .rail-user{padding:5px 10px;border-radius:11px}
.appbar .rail-user .ru-name{color:#fff}
.appbar .rail-user .ru-tier{color:rgba(255,255,255,.65)}
.appbar .rail-user.as-btn:hover{background:rgba(255,255,255,.12)}
.appbar .rail-user .logout-btn{color:rgba(255,255,255,.7)}
/* ★ bottom:auto is LOAD-BEARING. .user-menu was written for the RAIL FOOT, where
   it hangs off `bottom:64px`. This rule re-anchored it to the app bar with `top`
   but never cleared that `bottom`, so the panel had BOTH edges pinned inside a
   56px-tall .appbar — computed height collapsed to ~14px. The buttons overflowed
   past the white background and painted straight onto the page, which is exactly
   what Chad saw on 2026-08-08: "so much transparency that I can see the
   background throughout it." It was never transparent; there was barely any
   panel. min-width keeps the box from shrink-wrapping narrower than its labels. */
.appbar .user-menu{position:absolute;top:calc(100% + 6px);right:0;bottom:auto;left:auto;min-width:212px}
@media(max-width:767px){
  .appbar-brand{width:auto;flex:0 0 auto;padding:0 12px}
  .appbar-brand .rail-title,.appbar-brand .rail-sub{display:none}
  .appbar .rail-user .ru-name,.appbar .rail-user .ru-tier{display:none}
}
.shell{display:flex;height:calc(100vh - var(--appbar-h))}
.rail{width:240px;flex:0 0 240px;background:linear-gradient(168deg,#081A66 0%,#152b8f 48%,#1f5ec2 100%);color:#c6d4f2;display:flex;flex-direction:column;padding:14px 14px;position:relative;overflow:hidden}
.rail::before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(55,189,245,.35),transparent 65%);bottom:-180px;right:-190px;pointer-events:none}
.rail-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;position:relative;z-index:1;border:none;background:none;cursor:pointer;text-align:left;width:100%}
.rail-brand .mark{width:38px;height:38px;font-size:var(--t-footnote);border-radius:11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:var(--chart)}
.rail-title{font-weight:800;color:#fff;font-size:var(--t-headline);letter-spacing:-.2px}
.rail-title em{font-style:normal;color:var(--chart)}
.rail .rail-sub{color:#8fa5d8}
/* in-app Back / Forward */
.nav-hist{display:flex;gap:6px;position:relative;z-index:1}
.rail-hist{margin:-6px 0 10px;padding:0 4px}
.nh-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#c6d4f2;font-weight:700;font-size:var(--t-caption);cursor:pointer;transition:.15s;font-family:inherit}
.rail-hist .nh-back{flex:1}
.nh-btn svg{width:14px;height:14px}
.nh-btn:hover:not([disabled]){background:rgba(255,255,255,.16);color:#fff}
.nh-btn[disabled]{opacity:.32;cursor:default}
.cal-refresh{display:inline-flex;align-items:center;gap:6px}
.cal-refresh svg{transition:transform .15s}
.cal-refresh.spin svg{animation:calspin .7s linear infinite}
@keyframes calspin{to{transform:rotate(360deg)}}
.back-btn{display:flex;align-items:center;gap:8px;margin:2px 0 10px;padding:8px 11px;border-radius:10px;border:none;background:rgba(255,255,255,.07);color:#c6d4f2;font-weight:600;font-size:var(--t-caption);cursor:pointer;transition:.15s;position:relative;z-index:1}
.back-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.store-head{display:flex;align-items:center;gap:11px;padding:10px 8px 16px;position:relative;z-index:1}
.store-head img{width:44px;height:44px;border-radius:50%;background:#fff;object-fit:contain;padding:3px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.sh-name{color:#fff;font-weight:800;font-size:var(--t-body);line-height:1.25;letter-spacing:-.2px}
.sh-sub{font-size:var(--t-caption2);color:#8fa5d8;font-weight:600}
.nav{display:flex;flex-direction:column;gap:3px;position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.36)}
.nav-label{font-size:var(--t-caption2);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#7189c4;padding:12px 10px 6px}
/* §2.1 — NAVIGATE caption with EDIT at the right. */
.nav-cap-row{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:2px 3px 9px;position:relative;z-index:1}
.nav-cap{padding:0 8px !important;color:var(--rail-cap,#8fa5d8) !important;
  font-size:var(--t-caption2) !important;letter-spacing:.14em !important}
.nav-edit{border:none;background:none;cursor:pointer;font-family:inherit;
  font-size:var(--t-caption2);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rail-cap,#8fa5d8);padding:3px 8px;border-radius:6px;
  transition:background var(--m-fast) ease,color var(--m-fast) ease}
.nav-edit:hover{background:rgba(255,255,255,.16);color:#fff}
/* §2.2 — item treatment. 13px/600, 2px gap, 11px radius. */
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;color:var(--rail-ink,#b9c8ea);font-weight:600;font-size:var(--t-footnote);cursor:pointer;border:none;background:none;text-align:left;width:100%;transition:.15s;position:relative;margin-bottom:2px}
.nav-item svg{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:rgba(232,238,85,.16);color:#fff}
.nav-item.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--chart)}
.nav-item.soon{opacity:.5;cursor:default}
.nav-item.soon:hover{background:none;color:#b9c8ea}
/* Collapsible group label (Tools) — a nav-label that acts as a button */
.nav-grp-toggle{display:flex;align-items:center;width:100%;border:none;background:none;cursor:pointer;font:inherit;font-size:var(--t-caption2);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#7189c4;padding:12px 10px 6px;transition:color .15s}
.nav-grp-toggle:hover{color:#b9c8ea}
.nav-chev{margin-left:auto;font-size:var(--t-caption);opacity:.95}
/* Tasks toolbar "⋯ More" overflow menu */
.th-more{position:relative;display:inline-block}
.th-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line-soft);border-radius:12px;box-shadow:var(--shadow-md);padding:6px;z-index:60;min-width:190px;display:flex;flex-direction:column;gap:2px}
.th-menu .view-item{display:flex;gap:9px;align-items:center;width:100%;padding:9px 11px;border:none;background:none;border-radius:9px;font:inherit;font-size:var(--t-footnote);color:var(--ink);cursor:pointer;text-align:left;transition:background .12s}
.th-menu .view-item:hover{background:var(--line-soft)}
/* Admin console — two-pane People & Permissions */
.adm-top{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#081A66,#1A4FD0 55%,#37BDF5);color:#fff;padding:20px 24px;border-radius:16px;margin-bottom:18px}
.adm-mark{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--chart);flex:0 0 38px}
.adm-sub{font-size:var(--t-caption);color:#cfe0ff;margin-top:2px}
.adm-you{margin-left:auto;font-size:var(--t-caption2);background:rgba(232,238,85,.2);color:#eef7b0;padding:5px 12px;border-radius:999px;font-weight:700;white-space:nowrap}
.adm-wrap{display:grid;grid-template-columns:280px 1fr;gap:18px}
@media(max-width:767px){.adm-wrap{grid-template-columns:1fr}}
/* flex-shrink:0 — admin cards render DIRECTLY into the flex-column #main, and
   overflow:hidden removes the min-content floor flexbox normally respects, so
   a bare card (Page access) was crushed to 2px with its table scrolling inside
   the sliver (Chad, 2026-08-20: "you can't even read what you're scrolling
   through"). Inert wherever the card sits in a grid/block wrapper instead. */
.adm-card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;flex-shrink:0}
.adm-plist-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.adm-plist-head b{font-size:var(--t-footnote)}
.adm-add{border:none;background:var(--blue-mid);color:#fff;border-radius:9px;padding:7px 12px;font-weight:600;font-size:var(--t-caption);cursor:pointer}
.adm-prow{display:flex;align-items:center;gap:11px;padding:11px 16px;cursor:pointer;border-bottom:1px solid var(--line-soft);transition:background .12s}
.adm-prow:hover{background:var(--bg)}
.adm-prow.sel{background:rgba(26,79,208,.08);box-shadow:inset 3px 0 0 var(--blue-mid)}
.adm-prow.off{opacity:.55}
.adm-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#37BDF5,#1A4FD0);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--t-caption);flex:0 0 32px}
.adm-nm{font-weight:600;font-size:var(--t-footnote);line-height:1.2}
.adm-rl{font-size:var(--t-caption2);color:var(--muted);margin-top:1px}
.adm-pane{padding:20px 22px}
.adm-ph{margin-bottom:16px}
.adm-pem{color:var(--muted);font-size:var(--t-caption);margin-top:2px}
.adm-frow{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.adm-field label{display:block;font-size:var(--t-caption2);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:5px}
.adm-field select{min-width:170px}
.adm-sech{font-size:var(--t-caption2);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800;margin:20px 0 9px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.adm-modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.adm-mod{display:flex;align-items:center;gap:10px;border:1px solid var(--line-soft);border-radius:11px;padding:10px 12px;background:#fff;cursor:pointer;transition:.12s;margin:0}
.adm-mod:hover{border-color:var(--cyan)}
.adm-mod.on{background:rgba(26,79,208,.05);border-color:#bcd0f5}
.adm-mod.ovr{box-shadow:inset 0 0 0 1px var(--chart-deep,#c3d02f)}
.adm-mod.fixed{cursor:default}
.adm-mod.fixed:hover{border-color:var(--line-soft)}
.adm-mod input{width:16px;height:16px;accent-color:var(--blue-royal);flex:0 0 16px;margin:0}
.adm-mod.fixed input{opacity:.9}
.adm-mn{font-weight:600;font-size:var(--t-caption)}
.adm-md{font-size:var(--t-caption2);color:var(--muted)}
.adm-lock{margin-left:auto;font-size:var(--t-caption2);opacity:.5}
.ovrtag{margin-left:auto;font-size:var(--t-caption2);font-weight:800;color:#5a5f0e;background:rgba(214,226,74,.45);border-radius:6px;padding:2px 5px}
.adm-prov{margin-top:18px;background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:12px 14px;font-size:var(--t-caption);color:var(--ink-soft)}
.adm-prov b{color:var(--ink)}
.adm-kbnote{font-size:var(--t-caption2);color:var(--muted);margin-top:3px}
.rep-share{display:flex;flex-wrap:wrap;gap:4px 14px;max-height:132px;overflow-y:auto;
  padding:8px 10px;margin-top:4px;border:1px solid var(--line);border-radius:11px;background:#fff}
.rep-share-p{display:flex;align-items:center;gap:6px;font-size:var(--t-caption);font-weight:500;
  white-space:nowrap;cursor:pointer}
.rep-share-p input{margin:0}
.adm-actions{display:flex;gap:10px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
/* Invite state sits above the destructive row so "were they ever told?" reads
   before "Deactivate" does (2026-09-04). */
.adm-invite{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:var(--t-caption)}
.adm-invited{color:var(--muted)}
.adm-noinvite{color:var(--st-stuck);font-weight:600}
.adm-mrs{background:#eef6f8;border:1px solid #bfe0e6;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.adm-mrs-h{font-weight:700;font-size:var(--t-footnote);color:#0b5566;margin-bottom:10px}
.adm-mr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #bfe0e6;border-radius:10px;padding:10px 13px;margin-top:8px;font-size:var(--t-footnote)}
.adm-mr-t a{color:inherit;text-decoration:none;font-weight:600}
.adm-mr-t a:hover{text-decoration:underline}
.adm-pending{background:#fff7e6;border:1px solid #ffe1a8;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.adm-pend-h{font-weight:700;font-size:var(--t-footnote);color:#8a5a00;margin-bottom:10px}
.adm-pend-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #ffe1a8;border-radius:10px;padding:10px 13px;margin-top:8px;font-size:var(--t-footnote)}
.admin-note{background:#fff7e6;border:1px solid #ffe1a8;color:#8a5a00;border-radius:12px;padding:11px 15px;font-size:var(--t-caption);margin-bottom:16px}
.admin-table{width:100%;border-collapse:collapse;font-size:var(--t-caption)}
.admin-table th,.admin-table td{border-bottom:1px solid var(--line-soft);padding:9px 10px;text-align:center;vertical-align:middle}
.admin-table thead th{background:var(--bg);font-size:var(--t-caption2);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;position:sticky;top:0}
.admin-table tbody tr:hover{background:var(--bg)}
.lvl-badge{display:inline-block;font-size:var(--t-caption2);font-weight:800;color:#fff;background:var(--muted);border-radius:6px;padding:2px 7px;white-space:nowrap}
.lvl-badge.l0{background:#7c3aed}.lvl-badge.l1{background:#5b53c9}.lvl-badge.l2{background:#1A4FD0}.lvl-badge.l3{background:#0f766e}.lvl-badge.l4{background:#3b8a7a}.lvl-badge.l5{background:#8a8f9c}
.admin-table tbody tr.arow{cursor:pointer}
.admin-table tbody tr.arow:hover{background:rgba(26,79,208,.06)}
.admin-ovr{position:fixed;inset:0;z-index:200;background:rgba(9,18,60,.42);display:flex;align-items:center;justify-content:center;padding:20px}
.admin-ovr-card{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:24px 26px;width:100%;max-width:420px}
.afield{margin-bottom:14px}
.afield label{display:block;font-size:var(--t-caption2);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:5px}
.afield input,.afield select{width:100%}
.ae-err{color:var(--st-stuck);font-size:var(--t-caption);min-height:16px;margin-top:4px}
.ext-tag{font-size:var(--t-caption2);font-weight:800;letter-spacing:.05em;color:#8a5a00;background:#fff2d6;border:1px solid #ffe1a8;border-radius:5px;padding:1px 5px;vertical-align:middle;margin-left:6px}
.inact-tag{font-size:var(--t-caption2);font-weight:800;letter-spacing:.05em;color:#8a1f2e;background:#fdeaec;border:1px solid #f3c6cb;border-radius:5px;padding:1px 5px;vertical-align:middle;margin-left:6px}
.admin-table tbody tr.arow.inactive{opacity:.5}
.admin-table tbody tr.arow.inactive:hover{opacity:.7}
.ae-hint{font-size:var(--t-caption);color:var(--muted);margin:-8px 0 12px}
.mod-ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;margin-top:4px}
.mod-ov{display:flex;align-items:center;gap:8px;font-size:var(--t-footnote);font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink);margin:0;cursor:pointer}
.mod-ov input{width:15px;height:15px;accent-color:var(--blue-royal);flex:0 0 15px;margin:0}
.ovr-dot{color:var(--chart-deep,#c3d02f);font-size:var(--t-caption2)}
/* Documents module */
/* Top-level KB / Vault workspace pickers */
.mod-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.mod-pick{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line-soft);border-radius:14px;padding:15px 16px;box-shadow:var(--shadow);cursor:pointer;text-align:left;transition:.14s}
.mod-pick:hover{border-color:var(--cyan);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.mod-pick-logo{width:38px;height:38px;border-radius:9px;object-fit:contain;background:#fff;flex:0 0 38px}
.mod-pick-dot{width:14px;height:14px;border-radius:50%;flex:0 0 14px}
.mod-pick-nm{font-weight:700;font-size:var(--t-body)}
.mod-pick-sub{font-size:var(--t-caption);color:var(--muted);margin-top:1px}
.doc-row{display:flex;align-items:center;gap:12px;width:100%;border:none;background:none;text-align:left;padding:12px 14px;border-radius:10px;cursor:pointer;transition:background .12s}
.doc-row:hover{background:var(--bg)}
.doc-ic{font-size:var(--t-title3);flex:0 0 24px}
.doc-t{font-weight:600;font-size:var(--t-body)}
.doc-s{font-size:var(--t-caption);color:var(--muted);margin-top:1px}
.doc-kb{font-size:var(--t-caption2);font-weight:800;letter-spacing:.04em;border-radius:5px;padding:1px 6px;vertical-align:middle;margin-left:7px}
.doc-kb.pub{background:#eafaf1;color:#0a8a4e;border:1px solid #b7e6cc}
.doc-kb.pend{background:#fff7e6;color:#8a5a00;border:1px solid #ffe1a8}
.doc-kb.due{background:#fdecec;color:#b3261e;border:1px solid #f5c2c0}
.doc-editor{position:fixed;inset:0;z-index:200;background:rgba(9,18,60,.5);display:flex;align-items:center;justify-content:center;padding:2vh}
.doc-card{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:900px;max-height:96vh;display:flex;flex-direction:column;padding:16px 18px}
.doc-ehead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.doc-ehead .kb-title-edit{flex:1}
.doc-efoot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
#docBody{flex:1;overflow:auto;min-height:200px}
/* Google-Docs-backed row icon */
.gdoc-ic{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:5px;background:#1a73e8;color:#fff;font-weight:800;font-size:var(--t-footnote);font-family:Arial,sans-serif}
/* Full-window Google Doc page (renders into the content pane; sidebar stays) */
.gdoc-wrap{display:flex;flex-direction:column;height:calc(100vh - 30px);gap:12px}
.gdoc-bar{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:wrap}
.gdoc-title{font-weight:700;font-size:var(--t-headline);color:var(--ink);max-width:36ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gdoc-title-edit{font-weight:700;font-size:var(--t-headline);color:var(--ink);border:1px solid transparent;background:transparent;border-radius:7px;padding:5px 9px;min-width:22ch;max-width:44ch;transition:border-color .12s,background .12s}
.gdoc-title-edit:hover{border-color:var(--line)}
.gdoc-title-edit:focus{border-color:var(--accent);background:#fff;outline:none}
.gdoc-live{font-size:var(--t-caption);color:#0a8a4e;font-weight:600}
.gdoc-frame{flex:1 1 auto;width:100%;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);background:#fff;min-height:400px}
/* Native OS document editor surface */
.doc-native{flex:1 1 auto;width:100%;overflow:auto;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);background:#fff;min-height:400px}
.doc-native .tox-tinymce{border:none !important;border-radius:12px}
/* Collaborative (TipTap) editor: toolbar + page-on-canvas */
/* Rich-text toolbar, rebuilt 2026-08-05 (#43). One wrapping row of GROUPED
   pill controls instead of two dense rows of native selects. Groups are what
   carry the structure now, so the separators are gone and Bold no longer sits
   at the same visual weight as "delete column". */
.tt-toolbar{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:7px 9px;background:var(--card,#fff);border:1px solid var(--line-soft);border-radius:13px;box-shadow:0 1px 2px rgba(20,30,80,.04)}
.ttg{display:flex;align-items:center;gap:2px;padding:0 5px;border-radius:10px;position:relative}
.ttg + .ttg::before{content:"";position:absolute;left:-3px;top:6px;bottom:6px;width:1px;background:var(--line-soft)}
.ttb{min-width:30px;height:30px;border:1px solid transparent;background:none;border-radius:9px;cursor:pointer;font-size:var(--t-footnote);line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:3px;padding:0 6px;color:var(--ink-soft);transition:background .1s,color .1s}
.ttb:hover{background:#eef1f8;color:var(--ink)}
.ttb:active{transform:scale(.94)}
.ttb.on{background:#e8f0fe;color:#1a56db}
.ttb svg{display:block}
.ttmore{font-size:var(--t-body);font-weight:700;letter-spacing:1px}
.tt-words{font-size:var(--t-caption);color:var(--muted);white-space:nowrap;padding:0 6px;margin-left:auto}
/* The long tail — align, callouts, table row/column ops, clear formatting.
   These were shouting as loudly as Bold; they are one click away instead. */
.tt-menu{position:absolute;top:36px;right:0;z-index:60;width:222px;max-height:60vh;overflow:auto;background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(20,30,80,.16);padding:7px}
.tt-menu-cap{font-size:var(--t-caption2);letter-spacing:.11em;text-transform:uppercase;font-weight:800;color:var(--muted);padding:8px 8px 4px}
.tt-menu-row{display:flex;gap:3px;flex-wrap:wrap;padding:0 4px 3px}
.tt-mi{display:block;width:100%;text-align:left;border:none;background:none;font:inherit;font-size:var(--t-caption);color:var(--ink);padding:6px 9px;border-radius:8px;cursor:pointer}
.tt-mi:hover{background:#eef1f8}
.tt-mi.danger{color:#d83a52}
.tt-mi.danger:hover{background:#fdecef}
.tt-mi-s{width:auto;flex:1 1 46%;font-size:var(--t-caption);padding:5px 7px;background:var(--bg);text-align:center}
.tt-peers{display:flex;align-items:center}
.tt-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:var(--t-caption2);font-weight:800;border:2px solid #fff;margin-left:-7px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ttsize{width:52px}
/* Version history overlay */
/* Version history — slim right sidebar (Google-Docs style) */
.hist-side{position:fixed;top:0;right:0;bottom:0;width:340px;max-width:88vw;background:#fff;z-index:215;box-shadow:-4px 0 22px rgba(20,30,60,.14);display:flex;flex-direction:column;border-left:1px solid var(--line)}
.hist-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-size:var(--t-body)}
.hist-list{flex:1;overflow:auto;padding:8px}
.hist-item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:none;background:none;padding:10px 12px;border-radius:8px;cursor:pointer}
.hist-item:hover{background:var(--bg)}
.hist-item.sel{background:var(--accent-soft,#eaf0fd)}
.hist-when{font-size:var(--t-footnote);font-weight:600;color:var(--ink)}
.hist-who{font-size:var(--t-caption);color:var(--muted)}
.hist-pv-card{background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);width:min(760px,94vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.hist-pv-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:var(--t-body)}
.hist-pv-body{overflow:auto;background:#eef1f6;padding:20px}
.hist-doc{background:#fff;border:1px solid var(--line);border-radius:8px;padding:0.7in 0.8in;box-shadow:0 2px 10px rgba(20,30,60,.1);font-family:Figtree,-apple-system,'Segoe UI',sans-serif;font-size:11pt;line-height:1.65;color:#1b2436}
.hist-doc table{border-collapse:collapse} .hist-doc th,.hist-doc td{border:1px solid #cdd5e2;padding:6px 9px}
.hist-actions{display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
/* Blue persistent state for bar toggle buttons (Acknowledge) */
.btn.btn-ghost.on{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Callout panels (Confluence-style) */
.tt-page .ProseMirror .tt-panel,.hist-doc .tt-panel{border-radius:8px;padding:10px 14px 10px 40px;margin:10px 0;position:relative;border:1px solid transparent}
.tt-page .ProseMirror .tt-panel>*:first-child,.hist-doc .tt-panel>*:first-child{margin-top:0}
.tt-page .ProseMirror .tt-panel>*:last-child,.hist-doc .tt-panel>*:last-child{margin-bottom:0}
.tt-panel[data-kind="info"]{background:#eaf1fd;border-color:#c7dbfa}
.tt-panel[data-kind="note"]{background:#f2edfb;border-color:#dccff5}
.tt-panel[data-kind="success"]{background:#eafaf1;border-color:#bfe8cf}
.tt-panel[data-kind="warn"]{background:#fff6e6;border-color:#f5dfa8}
.tt-panel::before{position:absolute;left:12px;top:9px;font-size:var(--t-body)}
.tt-panel[data-kind="info"]::before{content:"ℹ️"}
.tt-panel[data-kind="note"]::before{content:"📝"}
.tt-panel[data-kind="success"]::before{content:"✅"}
.tt-panel[data-kind="warn"]::before{content:"⚠️"}
/* Read receipts rows */
.rc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line-soft,#eef1f6)}
.rc-who{display:flex;flex-direction:column} .rc-who b{font-size:var(--t-footnote)} .rc-who span{font-size:var(--t-caption);color:var(--muted)}
.rc-ack{font-size:var(--t-caption);font-weight:700;color:#0a8a4e;background:#eafaf1;border:1px solid #b7e6cc;border-radius:6px;padding:2px 8px;white-space:nowrap}
.rc-noack{font-size:var(--t-caption);color:var(--muted)}
/* New-document template picker */
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tpl-card{text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:13px 14px;cursor:pointer;transition:border-color .12s,background .12s}
.tpl-card:hover{border-color:var(--accent);background:var(--accent-soft,#eaf0fd)}
.tpl-t{font-weight:700;font-size:var(--t-footnote);color:var(--ink)}
.tpl-d{font-size:var(--t-caption);color:var(--muted);margin-top:2px}
/* Inline comment highlight */
.tt-page .ProseMirror .tt-comment{background:#fff3c4;border-bottom:2px solid #f2c744;cursor:pointer}
/* Comments sidebar */
.cmt-ovr{position:fixed;inset:0;z-index:220;background:rgba(9,18,60,.35);display:flex;justify-content:flex-end}
.cmt-panel{width:min(400px,92vw);background:#fff;height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.cmt-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-size:var(--t-body)}
.cmt-list{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.cmt-sub{font-size:var(--t-caption2);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.cmt-card{border:1px solid var(--line);border-radius:10px;padding:11px 12px;cursor:pointer}
.cmt-card.res{opacity:.6}
.cmt-quote{font-size:var(--t-caption);color:#7a5a12;background:#fff8e8;border-left:3px solid #f2c744;padding:4px 8px;border-radius:0 6px 6px 0;margin-bottom:8px}
.cmt-msg{margin-bottom:7px} .cmt-m-h{display:flex;gap:8px;align-items:baseline}
.cmt-msg b{font-size:var(--t-caption)} .cmt-m-h span{font-size:var(--t-caption2);color:var(--muted)}
.cmt-msg>div:last-child{font-size:var(--t-footnote);color:var(--ink);margin-top:1px;white-space:pre-wrap}
.cmt-actions{display:flex;gap:6px;align-items:center;margin-top:6px}
.cmt-reply{flex:1;border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:var(--t-caption)}
.cmt-res{font-size:var(--t-caption);padding:5px 9px}
/* Inline text prompt (replaces native prompt) */
.ask-ovr{position:fixed;inset:0;z-index:260;background:rgba(9,18,60,.4);display:flex;align-items:center;justify-content:center}
.ask-card{background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:18px 18px 14px;width:min(420px,92vw)}
.ask-t{font-weight:700;font-size:var(--t-body);margin-bottom:10px;color:var(--ink)}
.ask-in{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:var(--t-body)}
.ask-in:focus{outline:none;border-color:var(--accent)}
.ask-act{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
/* Documents list search */
.doc-search{border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:var(--t-footnote);width:230px;background:#fff}
.doc-search:focus{outline:none;border-color:var(--accent)}
/* mention composer */
.cmpz{position:relative}
.cmpz-in{width:100%;resize:vertical;font-family:inherit}
.cmpz-menu{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-lg);max-height:200px;overflow:auto;margin-top:2px}
.cmpz-op{display:block;width:100%;text-align:left;border:none;background:none;padding:8px 11px;cursor:pointer;font-size:var(--t-footnote)}
.cmpz-op:hover{background:var(--accent-soft,#eaf0fd)} .cmpz-op span{color:var(--muted);font-size:var(--t-caption2)}
/* mentions bell */
#docBell{position:relative}
.bell-n{position:absolute;top:2px;right:2px;background:#e5484d;color:#fff;font-size:var(--t-caption2);font-weight:800;min-width:15px;height:15px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px}
.nf-row.unread{background:var(--accent-soft,#eaf0fd);border-radius:8px}
.nf-text{font-size:var(--t-caption);color:var(--ink-soft);margin-top:2px;font-style:italic}
.ttb.ttcolor{position:relative;font-weight:800;flex-direction:column;gap:1px;padding:0 7px}
.ttb.ttcolor span{font-size:var(--t-caption);line-height:1}
.ttb.ttcolor input[type=color]{width:17px;height:5px;border:none;padding:0;background:none;cursor:pointer;border-radius:2px}
.ttsel{height:30px;border:1px solid var(--line-soft);border-radius:9px;padding:0 7px;background:var(--card,#fff);font-size:var(--t-caption);color:var(--ink);cursor:pointer;transition:border-color .1s}
.ttsel:hover{border-color:var(--line)}
.ttsel.ttblock{min-width:112px;font-weight:600}
.ttsel.ttsize{min-width:56px}
/* The meetings variant (#68): the WRAP owns the frame, and the bar and the
   editor inside it are borderless, so the toolbar and the notes read as one
   control instead of two stacked boxes of different widths. */
.notes-rich-wrap{border:1px solid var(--line);border-radius:11px;background:var(--card,#fff);overflow:hidden}
.notes-rich-wrap.hidden{display:none}
.notes-rich-wrap > div:first-child{border-bottom:1px solid var(--line-soft)}
.tt-compact{width:100%;border:none;border-radius:0;box-shadow:none;padding:5px 7px;gap:2px;background:var(--bg)}
.tt-compact .ttb{height:28px;min-width:28px}
.tt-compact .ttsel{height:28px}
.tt-compact .tt-words{display:none}
.notes-rich-wrap .notes-rich{border:none;border-radius:0;min-height:210px}
/* Controls never squeeze — a 2-character "Normal text" select is worse than a
   wrapped toolbar row. */
.ttb,.ttsel{flex:0 0 auto}
.ttg{flex-wrap:wrap}
.tt-canvas{flex:1 1 auto;overflow:auto;background:#eef1f6;border:1px solid var(--line);border-radius:12px;min-height:400px}
.tt-page{background:#fff;width:8.5in;max-width:96%;min-height:11in;margin:26px auto;padding:1in;box-sizing:border-box;box-shadow:0 3px 18px rgba(20,30,60,.14)}
.tt-page .ProseMirror{outline:none;min-height:9in;font-family:Figtree,-apple-system,'Segoe UI',sans-serif;font-size:11pt;line-height:1.65;color:#1b2436}
.tt-page .ProseMirror:focus{outline:none}
.tt-page .ProseMirror>*:first-child{margin-top:0}
.tt-page .ProseMirror table{border-collapse:collapse;width:100%;margin:8px 0}
.tt-page .ProseMirror th,.tt-page .ProseMirror td{border:1px solid #cdd5e2;padding:6px 9px;vertical-align:top}
.tt-page .ProseMirror th{background:#f2f5fa;font-weight:700}
.tt-page .ProseMirror img{max-width:100%;height:auto}
.tt-page .ProseMirror a{color:var(--accent);text-decoration:underline}
.tt-page .ProseMirror ul,.tt-page .ProseMirror ol{padding-left:1.4em}
.tt-page .ProseMirror ul[data-type="taskList"]{list-style:none;padding-left:0}
.tt-page .ProseMirror ul[data-type="taskList"] li{display:flex;align-items:flex-start;gap:8px}
.tt-page .ProseMirror ul[data-type="taskList"] li>label{margin-top:2px}
.tt-page .ProseMirror ul[data-type="taskList"] li>div{flex:1}
.tt-page .ProseMirror blockquote{border-left:3px solid #cdd9f3;margin:8px 0;padding:2px 14px;color:#42506b}
.tt-page .ProseMirror hr{border:none;border-top:2px solid #e4e8f0;margin:16px 0}
.tt-page .ProseMirror .selectedCell{background:rgba(47,95,208,.12)}
.tt-page .ProseMirror pre{background:#0f1524;color:#e6eaf2;border-radius:8px;padding:12px 14px;overflow:auto;font-family:'Courier New',monospace;font-size:10.5pt}
/* remote collaborators' cursors (CollaborationCursor) */
.tt-page .collaboration-cursor__caret{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d;margin-left:-1px;margin-right:-1px;position:relative;word-break:normal;pointer-events:none}
.tt-page .collaboration-cursor__label{position:absolute;top:-1.4em;left:-1px;font-size:var(--t-caption2);font-weight:600;color:#fff;padding:1px 6px;border-radius:4px 4px 4px 0;white-space:nowrap}
.soon-pill{margin-left:auto;font-size:var(--t-caption2);font-weight:800;letter-spacing:.08em;padding:2.5px 7px;border-radius:99px;background:rgba(255,255,255,.12);color:#9db1de;text-transform:uppercase}
.rail-foot{margin-top:auto;position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.rail-user{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:11px}
.rail-user .avatar{background:linear-gradient(135deg,#37BDF5,#1A4FD0)}
.ru-name{color:#fff;font-weight:600;font-size:var(--t-footnote);line-height:1.2}
.ru-tier{font-size:var(--t-caption2);color:#8fa5d8;text-transform:capitalize}
.logout-btn{margin-left:auto;background:none;border:none;color:#8fa5d8;cursor:pointer;padding:6px;border-radius:8px}
.logout-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.logout-btn svg{width:16px;height:16px;display:block}
.rail-user.as-btn{border:none;background:none;cursor:pointer;width:100%;transition:background var(--m-med) ease;font-family:inherit}
.rail-user.as-btn:hover{background:rgba(255,255,255,.08)}
.user-menu{position:absolute;bottom:64px;left:14px;right:14px;background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;z-index:70;animation:rise .15s ease}
.user-menu .view-item{display:flex;gap:9px;align-items:center}
.user-menu .view-item svg{width:15px;height:15px}
/* Legibility pass to go with the collapsed-panel fix above (Chad, 2026-08-08:
   "it's hard to read… it needs a little bit more of a background"). Even at full
   height the panel edge was a 1px --line-soft (#e6e9f2) hairline on a near-white
   page — no discernible boundary — and the labels sat in soft grey. Real border,
   deeper shadow, full-strength ink. Same treatment on the Create and notification
   menus so the three drop-downs stay one family. */
.appbar .user-menu,.abm-menu,.notif-menu{background:#fff;border-color:var(--line);
  box-shadow:0 18px 44px rgba(9,18,60,.30),0 2px 6px rgba(9,18,60,.14)}
.appbar .user-menu .view-item,.abm-menu .view-item{color:var(--ink)}
.rail-foot{position:relative}
.avatar.has-img{overflow:hidden;padding:0}
.avatar.has-img img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* profile modal */
.prof-head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.prof-photo{width:84px;height:84px;border-radius:50%;overflow:hidden;flex:0 0 84px;box-shadow:var(--shadow-md);background:var(--bg);display:flex;align-items:center;justify-content:center}
.prof-photo img{width:100%;height:100%;object-fit:cover}
.avatar.xl{width:84px;height:84px;flex-basis:84px;font-size:var(--t-title1)}
.pf-name{font-weight:800;font-size:var(--t-headline);font-family:Poppins,Figtree,sans-serif}
.pf-email{font-size:var(--t-caption);color:var(--muted);margin:1px 0 8px}
.pf-btns{display:flex;gap:8px}
.pf-btns .btn{padding:7px 12px;font-size:var(--t-caption)}
.pf-sync{display:flex;gap:12px;align-items:flex-start;margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:10px;background:var(--bg)}
.pf-sync .switch{margin-top:2px}
.pf-sync-txt{flex:1;min-width:0}
.pf-sync-txt .field-hint{margin-top:3px;line-height:1.45}
.pf-gc-act{margin-top:7px}
.pf-gc-share{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.pf-gc-share .ct-checks{margin-top:4px}
.pf-gc-share .ct-check small{color:var(--muted)}
.pf-gc-btn{padding:4px 12px;font-size:var(--t-caption2)}

/* ================= Main ================= */
.main{flex:1;overflow:auto;display:flex;flex-direction:column}
.page{padding:30px 34px 40px;max-width:1280px;width:100%;margin:0 auto}
/* The "← Passwords" / "← Finances" pill is injected BEFORE .page, so it used to
   sit outside .page's 30/34 padding and jam into the top-left corner under the
   app bar (Chad, 2026-08-08: "always really tight up in this corner… needs to
   come off just a little bit"). It now carries .page's own gutters — so the pill
   aligns with the H1 beneath it — and the page it precedes gives back the top
   padding it would otherwise double up on. */
.back-bar{padding:20px 34px 0;max-width:1280px;width:100%;margin:0 auto}
.back-bar + .page{padding-top:14px}
/* .page-enter only gets added for a genuine navigation (see render() in
   app.js) -- .page itself used to always carry this animation, which meant
   the fade replayed on every same-page interaction (a calendar filter chip,
   a month-nav arrow) even though nothing was actually navigated to
   (Chad, 2026-07-29: the calendar "blinks out and comes back" on every click). */
.page-enter{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:var(--t-title1);letter-spacing:-.5px}
.page-head .sub{color:var(--muted);font-size:var(--t-footnote);margin-top:3px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:none;font-weight:700;font-size:var(--t-footnote);cursor:pointer;transition:.16s}
.btn-primary{background:var(--blue-royal);color:#fff;box-shadow:0 6px 16px rgba(23,51,165,.30)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(23,51,165,.38);background:var(--blue-mid)}
.btn-accent{background:var(--chart);color:#3a3d0a;box-shadow:0 6px 16px rgba(214,222,47,.4)}
.btn-accent:hover{transform:translateY(-1px);background:#eef25e}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--cyan)}
/* Mark complete — green, but not the page's primary action. Delete stays the
   only destructive-looking button in the row. */
.btn-done{background:var(--st-done);color:#fff;box-shadow:0 6px 16px rgba(0,200,117,.28)}
.btn-done:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,200,117,.34);filter:brightness(.96)}
.btn-danger{background:#fff;border:1px solid #f3c6cb;color:#c8102e}
.btn-danger:hover{background:#fdf2f3}

/* ---- Landing ---- */
.hero{background:var(--grad);border-radius:var(--r-lg);color:#fff;padding:30px 34px;position:relative;overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:26px}
.hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(232,238,85,.22),transparent 62%);top:-220px;right:-140px}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at 80% 0%,black 20%,transparent 70%)}
.hero h2{margin:0 0 6px;font-size:var(--t-title2);letter-spacing:-.4px;position:relative;z-index:1}
.hero p{margin:0;color:#cfe4f8;font-size:var(--t-footnote);position:relative;z-index:1;max-width:600px}
.hero .accent{color:var(--chart);font-weight:700}
.section-label{font-size:var(--t-caption2);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:30px}
/* Store card, measured off screenshot 01-os-home: 5px brand band, 40px logo,
   store name over brand line, four health segments, a plain "2 open · 1 overdue"
   footer. It was a 22px-radius card with a 56px logo, a chevron and big bold
   stat numbers — much heavier than the mockup, and at 2-up it read as a
   different component entirely. */
.store-card{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow);padding:0;cursor:pointer;transition:.18s;overflow:hidden;text-align:left;position:relative}
.store-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.sc-band{height:5px;background:var(--grad)}
.store-card.csc .sc-band{background:linear-gradient(90deg,#4e8a33,#8fce6d)}
.store-card.ffc .sc-band{background:linear-gradient(90deg,#a01423,#e31937)}
.store-card.kh .sc-band{background:var(--grad)}
.sc-body{padding:14px 14px 12px;display:flex;align-items:center;gap:11px}
.sc-body img{width:40px;height:40px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--line-soft);padding:2px;flex:0 0 40px}
.sc-name{font-weight:800;font-size:var(--t-body);letter-spacing:-.3px;line-height:1.22;color:#16162b}
.sc-sub{font-size:var(--t-caption);color:var(--muted);font-weight:500;margin-top:2px;line-height:1.3}
/* Wraps. A card carrying all three stats (open / high / overdue) ran past its
   own right edge at four across and clipped "2 overdue" mid-word. */
.sc-stats{display:flex;flex-wrap:wrap;gap:4px 12px;padding:0 14px 14px}
.sc-stat{font-size:var(--t-caption);color:var(--ink-soft);font-weight:500;white-space:nowrap}
.sc-stat b{font-size:inherit;font-weight:600;color:var(--ink);margin-right:4px}
.sc-stat.hot b{color:var(--ffc)}
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
@media(max-width:960px){.two-col{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px 22px}
.card h3{margin:0 0 12px;font-size:var(--t-body);letter-spacing:-.2px}
.mini-task{display:flex;align-items:center;gap:11px;padding:9px 6px;border-bottom:1px solid var(--line-soft);cursor:pointer;border-radius:8px}
.mini-task:last-child{border-bottom:none}
.mini-task:hover{background:var(--bg)}
.mini-task img{width:24px;height:24px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--line-soft);flex:0 0 24px}
.mini-title{font-weight:600;font-size:var(--t-footnote);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roadmap-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.roadmap-item:last-child{border-bottom:none}
.rm-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 9px;background:var(--line)}
.rm-dot.live{background:var(--chart-deep);box-shadow:0 0 0 4px rgba(214,222,47,.25)}
.rm-t{font-weight:700;font-size:var(--t-footnote)}
.rm-d{font-size:var(--t-caption);color:var(--muted)}
.empty-note{color:var(--muted);font-size:var(--t-caption);text-align:center;padding:16px 0}
/* Design items 4 + 5 (2026-08-04).
   4 — an empty list reads as a deliberate panel, not a stray line of grey text.
   Opt-in via .empty-panel so the ~30 inline .empty-note uses (table cells, board
   columns, rail hints) keep their bare treatment; only full-surface empties get
   the panel. Prototype's dashed #d5daea at radius 16, live's wording kept.
   5 — one close affordance everywhere: a bare ✕ in a 32px hit target. The app
   had three shapes for the same action (ghost button, bare glyph, tiny inline). */
.empty-note.empty-panel{border:1px dashed #d5daea;border-radius:16px;padding:34px 20px;background:transparent}
.x-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:none;border-radius:9px;color:var(--muted);font-size:var(--t-body);line-height:1;cursor:pointer;font-family:inherit;transition:background var(--m-fast) ease,color var(--m-fast) ease}
.x-close:hover{background:var(--bg);color:var(--ink)}
.x-close:active{transform:scale(.94)}

/* ---- Store workspace / kanban ---- */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.fchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:var(--t-caption);color:var(--ink-soft);cursor:pointer;transition:.15s}
.fchip:hover{border-color:var(--cyan)}
.fchip.active{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.fchip .x{opacity:.7;font-size:var(--t-caption2)}
/* #101 — kanbanHTML sets --kb-cols to the real column count. Every track is
   minmax(--kb-colmin, 1fr): with room to spare the columns still divide the
   width evenly (a 3-status board is pixel-identical to before), and once they
   would go narrower than a card can be read the tracks stop shrinking and the
   board scrolls sideways instead. The old rule was repeat(3,1fr) with two
   !important overrides, so an 8-status board clipped its last columns off the
   right edge with no scroll — the whole reason this item exists. */
.kanban{display:grid;grid-template-columns:repeat(var(--kb-cols,3),minmax(var(--kb-colmin,232px),1fr));
  gap:12px;align-items:start;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px;scrollbar-width:thin}
@media(max-width:1100px){.kanban{--kb-colmin:210px}}
@media(max-width:900px){.kanban{--kb-colmin:190px}}
.col{background:rgba(8,26,102,.04);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:12px;min-height:180px;transition:.15s;min-width:0}
.col.dragover{background:rgba(55,189,245,.09);border-color:var(--cyan)}
.col-head{display:flex;align-items:center;gap:8px;padding:4px 8px 10px;font-weight:800;font-size:var(--t-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.col-head .cnt{margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:99px;font-size:var(--t-caption2);padding:1px 8px;color:var(--muted);font-weight:700}
.col-dot{width:9px;height:9px;border-radius:50%}
.col-dot.todo{background:var(--st-todo)}.col-dot.doing{background:var(--st-doing)}.col-dot.done{background:var(--st-done)}
.tasks{display:flex;flex-direction:column;gap:9px;min-height:40px}
.task-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow);cursor:pointer;transition:.15s;position:relative}
.task-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.task-card.dragging{opacity:.4}
/* hover quick-actions (Asana-style: act without opening the card) */
.tc-actions{position:absolute;top:5px;right:7px;display:none;gap:4px;z-index:2}
.task-card:hover .tc-actions{display:flex}
.tc-act{position:relative;border:1px solid var(--line-soft);background:#fff;border-radius:7px;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;font-size:var(--t-caption);padding:0;line-height:1}
.tc-act:hover{box-shadow:var(--shadow)}
.tc-act.done:hover{background:#e3f7ec;color:#00a25b;border-color:#8fddb0}
.tc-act input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0}
@media (prefers-color-scheme:dark){.tc-act{background:var(--surface,#1a2148);border-color:rgba(255,255,255,.16)}}
/* The card title is a BUTTON (it opens the task full-pane) — without a reset the
   UA gives it a border, a centre-aligned label and shrink-to-fit width, which is
   why the cards read as a boxed, centred column instead of the prototype's plain
   left-aligned text. Metrics below are the prototype's unchanged. */
.tc-title{display:block;width:100%;text-align:left;border:none;background:none;margin:0;font-family:inherit;color:inherit;cursor:pointer;
  font-weight:650;font-size:var(--t-footnote);line-height:1.35;letter-spacing:-.1px;padding:0 16px 0 0}
/* #100 — the ✓/📅 quick-actions and the priority dot both live in the card's
   top-right corner, absolutely positioned, and on a narrow column they landed
   on top of the title's first words. Rather than pad the whole title (which
   would cost every line its width) or reserve the corner only on hover (which
   re-wraps the title and grows the card as the mouse crosses it), a zero-ink
   float clears just the first line. Lines 2+ keep the full card width, and
   nothing moves on hover.
   Widths are the smallest that actually clear the buttons: the title's content
   box already ends 30px in from the card edge (14px card padding + 16px title
   padding) and the two buttons reach 63px in, so 36px of float is enough —
   sizing up from there only costs line one words for nothing. `.one` is the
   done card, which drops the ✓ and needs almost nothing. The 21px height is
   one line box, so line two starts clean under the buttons. */
.tc-notch{float:right;width:36px;height:21px;margin:0}
.tc-notch.one{width:8px}
.task-card.done .tc-title{color:var(--muted);text-decoration:line-through}
.tc-meta{display:flex;align-items:center;gap:7px;margin-top:9px;flex-wrap:wrap}
/* Board-view cards for Requests & the Build Tracker (#37) — same .task-card
   shell as Tasks, just a different top line and a plain meta string. */
.tix-card-key{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.tix-card-meta{font-size:var(--t-caption2);color:var(--muted);white-space:nowrap}
.tix-card:not([draggable="true"]),.build-card:not([draggable="true"]){cursor:pointer}
.tix-card[draggable="true"],.build-card[draggable="true"]{cursor:grab}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-caption2);font-weight:700;padding:3px 9px;border-radius:99px;background:var(--bg);color:var(--ink-soft)}
.chip.board-csc{background:rgba(105,176,72,.14);color:var(--csc-deep)}
.chip.board-ffc{background:rgba(227,25,55,.10);color:var(--ffc-deep)}
.chip.board-kh{background:rgba(23,51,165,.10);color:var(--blue-royal)}
.chip.due{background:#fff7e4;color:#95650e}
.chip.overdue{background:#fdeaec;color:#c8102e}
.chip.tag{background:rgba(55,189,245,.12);color:#1567a3;cursor:pointer}
.chip.tag:hover{background:rgba(55,189,245,.22)}
.chip.tag.t-private{background:#101733;color:#D6E24A}
.chip.tag.t-public{background:rgba(214,222,47,.25);color:#5a5f0e}
.pri{width:8px;height:8px;border-radius:50%;position:absolute;top:14px;right:13px}
.pri.low{background:#c3cade}.pri.normal{background:#7fb2ea}.pri.high{background:#f5a623}.pri.urgent{background:#e31937;box-shadow:0 0 0 4px rgba(227,25,55,.14)}
.tc-assignee{display:flex;align-items:center;gap:6px;font-size:var(--t-caption2);color:var(--ink-soft);font-weight:600}
.tc-assignee .avatar{width:20px;height:20px;flex-basis:20px;font-size:var(--t-caption2)}
.avatar-stack{display:inline-flex;align-items:center}
.avatar-stack .avatar{border:2px solid #fff;margin-left:-7px}
.avatar-stack .avatar:first-child{margin-left:0}
.avatar-stack .avatar.more{background:var(--line);color:var(--ink-soft);font-size:var(--t-caption2)}
.chip.grp{background:rgba(23,51,165,.09);color:var(--blue-royal)}

/* people/group picker (multi-assign) */
.pick-cloud{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0}
.pick-chip{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:6px 13px;font-size:var(--t-caption);font-weight:600;color:var(--ink-soft);cursor:pointer;transition:all var(--m-med) ease}
.pick-chip:hover{border-color:var(--cyan)}
.pick-chip.on{background:var(--blue-royal);border-color:var(--blue-royal);color:#fff}
.pick-chip.grp{border-style:dashed}
.pick-chip.grp.on{background:var(--blue-deep);border-color:var(--blue-deep);border-style:solid}
.pick-chip.new{border-style:dashed;color:var(--muted)}
.pick-chip.tagchip.on{background:#1567a3;border-color:#1567a3}
.pick-chip.tagchip.t-private.on{background:var(--ink);border-color:var(--ink);color:var(--chart)}
.pick-chip.tagchip.t-public.on{background:var(--chart-deep);border-color:var(--chart-deep);color:#2e3106}
#mTagNew{width:100%;padding:9px 12px;border:1.5px dashed var(--line);border-radius:11px;font-size:var(--t-footnote);font-family:inherit;transition:.15s}
#mTagNew:focus{outline:none;border-color:var(--cyan);border-style:solid;box-shadow:var(--ring)}
.pick-chip.new:hover{color:var(--blue-mid)}
/* subtasks + task activity */
.chip.subchip{background:rgba(0,200,117,.12);color:#0b7a4b}
.sub-list{display:flex;flex-direction:column;gap:4px}
.sub-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line-soft);border-radius:10px;cursor:pointer;font-weight:600;font-size:var(--t-footnote)}
.sub-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--st-done)}
.sub-title{flex:1}
.sub-title.done{color:var(--muted);text-decoration:line-through}
#mSubNew,#mComment{width:100%;padding:9px 12px;border:1.5px dashed var(--line);border-radius:10px;font-size:var(--t-footnote);font-family:inherit}
#mSubNew:focus,#mComment:focus{outline:none;border-color:var(--cyan);border-style:solid;box-shadow:var(--ring)}
#mComment{border-style:solid;flex:1}

/* linked items (tasks/tickets/kb) */
.link-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.link-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;background:var(--card);border:1px solid var(--line);border-radius:99px;font-size:var(--t-caption);font-weight:600;cursor:pointer;transition:border-color var(--m-fast)}
.link-chip:hover{border-color:var(--cyan)}
.link-chip[data-clickable="false"]{cursor:default}
.link-chip .lc-ico{font-size:var(--t-caption)}
.link-chip .lc-label{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-x{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--t-caption2);line-height:1;padding:2px;border-radius:50%}
.lc-x:hover{background:rgba(226,68,92,.15);color:#e2445c}
.link-add-row{display:flex;gap:8px;position:relative}
#mLinkSearch{flex:1;padding:9px 12px;border:1.5px dashed var(--line);border-radius:10px;font-size:var(--t-footnote);font-family:inherit}
#mLinkSearch:focus{outline:none;border-color:var(--cyan);border-style:solid;box-shadow:var(--ring)}
.link-results{position:absolute;top:calc(100% + 4px);left:0;right:110px;z-index:20;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-md);max-height:220px;overflow:auto}
.link-result{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:9px 12px;border:none;background:transparent;cursor:pointer;font-size:var(--t-footnote);font-family:inherit}
.link-result:hover{background:var(--bg)}
.link-result .lr-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-result .lr-sub{font-size:var(--t-caption2);color:var(--muted)}
.link-empty{padding:10px 12px;font-size:var(--t-caption);color:var(--muted)}
.act-note{margin-top:4px;padding:7px 11px;background:var(--bg);border-left:3px solid var(--chart-deep);border-radius:0 8px 8px 0;font-size:var(--t-caption);color:var(--ink)}

/* compact assign dropdown */
.assign-dd{position:relative}
.assign-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:var(--t-footnote);font-family:inherit;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;transition:.15s}
.assign-btn:hover{border-color:var(--cyan)}
.assign-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-md);padding:6px;max-height:280px;overflow:auto;z-index:90;animation:fade .12s ease}
.am-sec{font-size:var(--t-caption2);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px}
.am-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:none;border-radius:9px;font-size:var(--t-footnote);font-weight:600;color:var(--ink-soft);cursor:pointer;text-align:left;transition:background var(--m-fast) ease}
.am-item:hover{background:var(--bg)}
.am-item .am-check{width:16px;color:transparent;font-weight:800}
.am-item.on{color:var(--blue-royal)}
.am-item.on .am-check{color:var(--blue-royal)}
.am-item.am-new{color:var(--muted);border-top:1px solid var(--line-soft);border-radius:0;margin-top:4px}
.am-item.am-new:hover{color:var(--blue-mid)}

.newgrp{margin-top:10px;border:1px dashed var(--line);border-radius:13px;padding:12px}
.newgrp input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:var(--t-footnote);font-family:inherit;margin-bottom:8px}
.newgrp input:focus{outline:none;border-color:var(--cyan);box-shadow:var(--ring)}
.empty-col{color:var(--muted);font-size:var(--t-caption);text-align:center;padding:14px 0}

/* ---- View switcher ---- */
.head-actions{display:flex;gap:10px;align-items:center}
.view-tabs{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--line-soft);border-radius:11px;padding:3px}
.view-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:none;background:none;border-radius:8px;font-size:var(--t-caption);font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.15s;font-family:inherit;white-space:nowrap}
.view-tab:hover{color:var(--ink)}
.view-tab.on{background:#fff;color:var(--blue-royal);box-shadow:0 1px 2px rgba(9,18,60,.12)}
.view-tab .v-icon{font-size:var(--t-footnote);opacity:.85}
@media(max-width:700px){.view-tab{padding:6px 9px}.view-tab .v-icon{display:none}}
.view-wrap{position:relative}
.view-btn .v-caret{font-size:var(--t-footnote);opacity:.95;margin-left:3px}
.v-icon{opacity:.75;font-size:var(--t-footnote)}
.view-menu{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-md);padding:6px;min-width:170px;z-index:60;animation:fade .12s ease}
.view-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border:none;background:none;border-radius:9px;font-size:var(--t-footnote);font-weight:600;color:var(--ink-soft);cursor:pointer;text-align:left;transition:background var(--m-fast) ease}
.view-item:hover{background:var(--bg)}
.view-item.on{color:var(--blue-royal)}
.v-check{margin-left:auto;color:var(--blue-royal);font-weight:800}

/* ── View switcher: inline strip on wide panes, dropdown on narrow (delta 1,
   2026-08-04) ──────────────────────────────────────────────────────────────
   viewBtn() emits BOTH forms; these rules pick one. CSS decides, never JS
   measuring width at render time — that bug already shipped here once (a render
   at zero width permanently hid the calendar rail).

   Wide is unchanged: the inline .view-tabs strip exactly as before. Below the
   tablet breakpoint the strip stopped fitting and .topbar-views scrolled it
   horizontally, so views sat off-screen with no sign they existed. The trigger
   replaces the scroll and always names the current view.

   Most of the menu styling above (.view-wrap / .view-menu / .view-item /
   .v-check) was already in this file, orphaned from an older dropdown-based
   switcher — reused rather than duplicated. Only the trigger itself is new. */
   Values below are lifted from the prototype's own inline styles, not eyeballed
   from a screenshot. */
.view-wrap{display:inline-flex;align-items:center;position:relative;flex:none}
.view-btn,.view-picker{display:none}
.vm-cap{font-size:var(--t-caption2);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8b8d9b;padding:6px 10px 4px}
/* 1379, not 1199: with the glyphs restored, six task views + the ⚙ / More /
   New task actions stop fitting below ~1380. Measured — at 1280 the last tab
   overlapped the actions and the strip scrolled; at 1440 there is a 61px gap.
   The dropdown takes over exactly where the strip stops fitting, which is the
   whole point of the hybrid. */
@media(max-width:1379px){
  /* .topbar-views scrolls horizontally so the inline strip can overflow — that
     scroll IS the problem this delta removes, and it also clips the absolutely
     positioned menu. Below the breakpoint there is nothing left to scroll.
     Two-class selector on purpose: the `overflow-x:auto` rule lives ~700 lines
     further down, so at equal specificity it would win on order. */
  .topbar .topbar-views{overflow:visible}
  .view-wrap .view-tabs{display:none}
  .view-wrap .view-btn{display:flex;align-items:center;gap:7px;height:44px;padding:0 11px;background:#fff;border:1px solid var(--line-soft);border-radius:9px;font:inherit;font-size:var(--t-caption);font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap;transition:.15s}
  .view-wrap .view-btn:hover{border-color:#37BDF5;color:var(--blue-mid)}
  .view-wrap .view-btn[aria-expanded="true"]{border-color:var(--blue-mid);background:#eef2ff}
  .view-wrap .view-btn .v-icon{display:inline;font-size:var(--t-footnote);opacity:.75}
  .view-wrap .view-btn .v-caret{font-size:0;opacity:.9;margin-left:0;transition:transform .15s}
  .view-wrap .view-btn[aria-expanded="true"] .v-caret{transform:rotate(180deg)}
  .view-wrap .view-picker{display:flex;flex-direction:column;gap:2px;top:50px;border:1px solid var(--line-soft);border-radius:12px;box-shadow:0 16px 40px rgba(8,26,102,.18);padding:6px;min-width:198px}
  .view-wrap .view-picker .view-item{font-size:var(--t-footnote);gap:10px;padding:9px 10px;border-radius:9px}
  .view-wrap .view-picker .view-item:hover{background:var(--bg)}
  .view-wrap .view-picker .view-item .v-icon{display:inline;width:15px;font-size:var(--t-footnote);opacity:.7}
}
/* Narrowest: the trigger is glyph + chevron only. */
@media(max-width:767px){ .view-wrap .view-btn .vb-label{display:none} }

/* ---- List / By-status views (monday-style rows) ---- */
.list-card{padding:8px 10px}
.lrows{display:flex;flex-direction:column}
/* Six fixed tracks: priority · title+tags · status · store · due · assignee.
   A grid, not a flex line — see taskRow() in app.js for why. A row with no
   store still reserves the store column, so switching board or view never
   slides the pills sideways. */
.lrow{display:grid;grid-template-columns:19px 8px minmax(0,1fr) 22px 100px 118px 74px 40px;align-items:center;gap:8px;padding:8px 10px;min-height:40px;border-bottom:1px solid var(--line-soft);cursor:pointer;border-radius:8px;transition:background var(--m-fast) ease}
/* #98: keyboard-nav focus/selection — same ring+tint on .lrow and .tt-row so
   the layer reads identically across list and table. */
.lrow.nav-focus,.tt-row.nav-focus,.tix-row.nav-focus{box-shadow:inset 0 0 0 2px var(--blue-mid)}
.lrow.nav-sel,.tt-row.nav-sel,.tix-row.nav-sel{background:rgba(55,189,245,.12)}
/* A board-scoped list has no store to name — drop the track rather than leave
   a 118px hole down the middle of the list. */
.lrow.no-store{grid-template-columns:19px 8px minmax(0,1fr) 22px 100px 0 74px 40px}
.lrow.no-store .l-store,.lrow.no-store>.l-cell-empty:nth-child(6){display:none}
.l-main{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.l-due{justify-self:end;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.l-cell-empty{display:block}
/* One-click complete. Empty ring by default, green with a tick once done —
   clicking it again reopens the task. Deliberately always visible rather than
   hover-only: a control you cannot see is a control Chad has to be told about. */
.l-check{width:19px;height:19px;flex:0 0 19px;border-radius:50%;border:1.6px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:background var(--m-fast) ease,border-color var(--m-fast) ease,transform var(--m-fast) ease}
.l-check:hover{border-color:var(--st-done);background:rgba(0,200,117,.10)}
.l-check:active{transform:scale(.88)}
.l-check:focus-visible{outline:none;box-shadow:var(--ring)}
.l-check-tick{font-size:var(--t-caption2);font-weight:800;line-height:1;color:transparent;transition:color var(--m-fast) ease}
.l-check:hover .l-check-tick{color:var(--st-done)}
.l-check.on{background:var(--st-done);border-color:var(--st-done)}
.l-check.on .l-check-tick,.l-check.on:hover .l-check-tick{color:#fff}
.l-check.on:hover{background:var(--st-done);filter:brightness(.94)}
/* The row shows WHO as a face, like the mockup. The name still renders in the
   board/card views that have room for it. */
.lrow .tc-name{display:none}
.lrow .tc-assignee{display:flex;justify-content:flex-end}
.lrow:last-child{border-bottom:none}
.lrow:hover{background:var(--bg)}
.lrow.done .l-title{color:var(--muted);text-decoration:line-through}
/* The title is a BUTTON now (it opens the task full-pane) but must still read
   as plain text in the row — no chrome until you're over it. */
.l-title{font-weight:600;font-size:var(--t-footnote);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:none;background:none;padding:0;margin:0;font-family:inherit;color:inherit;text-align:left;cursor:pointer}
button.l-title:hover{color:var(--blue-mid);text-decoration:underline;text-underline-offset:2px}
/* ===== Item detail — v1 BUILD.md §2 ===== */
/* overflow CLIP, not hidden (Chad, 2026-08-07: "I don't have to always scroll
   up and hit back to all task"). `hidden` makes this a scroll container, and a
   sticky child sticks to ITS scroller — one that never scrolls — so the header
   below has been declared sticky all along while behaving like a static block
   that scrolls away with the page. `clip` keeps the rounded corners without
   creating a scroll container, so the header actually sticks to the top of
   #main, which is what scrolls. */
.item-detail{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:clip}
.id-head{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--card);z-index:2;
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.id-head .spacer{flex:1}
.id-logo{width:22px;height:22px;border-radius:50%;background-size:contain;background-position:center;
  background-repeat:no-repeat;background-color:#fff;border:1px solid var(--line-soft);flex:0 0 22px}
.id-body{display:grid;grid-template-columns:minmax(0,1fr) var(--id-side-w,300px);gap:24px;padding:20px 22px 24px}
@media(max-width:1099px){.id-body{grid-template-columns:minmax(0,1fr)}}
.id-main{min-width:0}
.id-title{margin:0 0 10px;font-family:var(--font-head,Poppins,Figtree,sans-serif);
  font-size:var(--t-title2);font-weight:800;letter-spacing:-.4px;color:var(--blue-deep);line-height:1.25}
.id-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.id-label{font-size:var(--t-caption2);font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.id-text{margin:6px 0 0;font-size:var(--t-footnote);line-height:1.6;color:var(--ink-soft);max-width:var(--id-max-body,64ch);white-space:pre-wrap}
.id-empty{margin-top:6px;font-size:var(--t-caption);color:var(--muted)}
/* The two things the work view can DO (Chad, 2026-08-07): move the task along,
   and say where it stands. Everything else is settings, behind Edit. */
.id-stages{margin-top:22px}
.id-stage-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.id-stage{border:1px solid var(--line-soft);background:var(--card);color:var(--ink-soft);
  font:inherit;font-size:var(--t-caption);font-weight:700;padding:6px 13px;border-radius:99px;cursor:pointer;transition:.15s}
.id-stage:hover{border-color:var(--blue-mid);color:var(--blue-deep);transform:translateY(-1px)}
.id-stage.on{cursor:default;transform:none;border-color:transparent;box-shadow:inset 0 0 0 1px rgba(9,18,60,.06)}
.id-comments{margin-top:26px}
.id-comments .act-feed{margin-top:8px;max-height:none}
.id-comments .act-compose{margin-top:10px}
.id-checklist{margin-top:22px}
.idc-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.idc-bar{flex:1;height:5px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.idc-bar span{display:block;height:100%;background:var(--st-done);border-radius:99px;transition:width var(--m-slow) ease}
.idc-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:none;
  padding:7px 8px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:var(--t-footnote);color:var(--ink)}
.idc-row:hover{background:var(--bg)}
.idc-box{width:17px;height:17px;flex:0 0 17px;border:1.6px solid var(--line);border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-size:var(--t-caption2);font-weight:800;color:transparent}
.idc-row.on .idc-box{background:var(--st-done);border-color:var(--st-done);color:#fff}
.idc-row.on .idc-t{color:var(--ink-done);text-decoration:line-through}
.id-side{display:flex;flex-direction:column;gap:2px}
.id-row{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:10px;background:var(--bg)}
.id-value{font-size:var(--t-footnote);font-weight:600;color:var(--ink);word-break:break-word}
/* #124: the hand-off line. Quiet, not a warning — nothing is wrong, this is
   just work that is somebody else's to do and yours to watch. */
.id-notice{margin:8px 0 2px;padding:8px 11px;border-radius:10px;background:var(--bg);
  border-left:3px solid var(--kh);font-size:var(--t-caption);color:var(--muted)}
/* #123: the per-item grant roster. Revoke sits ON the row, because a grant you
   cannot take back in one click is not really per-item. */
.id-grant{display:flex;align-items:center;gap:8px;font-size:var(--t-caption);font-weight:600;padding:3px 0}
.id-grant span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.id-revoke{border:0;background:none;padding:2px 6px;border-radius:6px;cursor:pointer;
  font-size:var(--t-caption2);font-weight:700;color:var(--muted)}
.id-revoke:hover{background:var(--bg);color:#c0392b}
.l-right{justify-self:end;flex:0 0 auto}
/* Store column (screenshot 02-os-tasks): a small logo and the store's name, in
   a fixed-width column so the names line up down the list. This was a
   brand-coloured chip whose width changed with the store name, which is part of
   what made rows look like they shift as you move between boards. */
.l-store{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--t-caption);font-weight:600;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-store img{width:17px;height:17px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--line-soft);flex:0 0 17px}
.status-pill{border:none;border-radius:5px;padding:6px 0;width:104px;text-align:center;font-size:var(--t-caption);font-weight:700;color:#fff;cursor:pointer;flex:0 0 104px;transition:filter var(--m-fast) ease, transform var(--m-fast) ease}
/* In a task ROW the pill is a grid cell — it fills its track. Everywhere else
   (activity feed, task detail) it keeps its own fixed width. */
.lrow .status-pill{width:100%;flex:initial}
.status-pill:hover{filter:brightness(.92)}
.status-pill:active{transform:scale(.95)}
.status-pill.st-todo{background:var(--st-todo);color:#4b4d57}
.status-pill.st-doing{background:var(--st-doing)}
.status-pill.st-done{background:var(--st-done)}
.status-pill.sm{width:auto;flex:0 0 auto;padding:4px 12px;cursor:default}
.sgroup{margin-bottom:6px}
.sgroup-head{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;padding:10px 8px 6px;cursor:pointer;text-align:left}
.sg-caret{color:var(--muted);font-size:var(--t-caption2);width:12px}
.sg-count{font-size:var(--t-caption);color:var(--muted);font-weight:700;background:var(--bg);border:1px solid var(--line-soft);border-radius:99px;padding:2px 9px}
.sgroup .lrows{border-left:3px solid var(--line-soft);margin-left:14px;padding-left:4px}

/* ---- Calendar views ---- */
.cal-card{padding:14px}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-nav .btn{padding:7px 12px;font-size:var(--t-caption)}
.cal-arrow{font-size:var(--t-body);padding:7px 13px}
.cal-label{font-weight:800;font-size:var(--t-headline);letter-spacing:-.2px;font-family:Poppins,Figtree,sans-serif}
.cal-title-row{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:2px 2px 8px}
.cal-jump{border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-family:inherit;font-size:var(--t-caption);font-weight:700;color:var(--ink-soft);background:#fff;cursor:pointer;transition:.15s}
.cal-jump:hover{border-color:var(--cyan)}
.cal-jump:focus{outline:none;border-color:var(--cyan);box-shadow:var(--ring)}
.cal-grid-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:0 0 6px;font-size:var(--t-caption2);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-cell{min-width:0;background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;min-height:96px;padding:6px;display:flex;flex-direction:column;gap:3px}
.cal-cell.out{opacity:.45}
.cal-cell.today{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan);background:#fff}
.cal-date{font-size:var(--t-footnote);font-weight:700;color:var(--ink-soft);border:none;background:none;font-family:inherit;cursor:pointer;text-align:left;padding:0;align-self:flex-start;border-radius:6px}
.cal-date:hover{color:var(--blue-mid);text-decoration:underline}
.cal-cell.today .cal-date{color:var(--blue-mid)}
.cal-pill{display:block;width:100%;min-width:0;max-width:100%;text-align:left;border:none;border-radius:6px;padding:4px 8px;font-size:var(--t-footnote);font-weight:600;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:filter var(--m-fast) ease}
.cal-pill b{font-weight:800}
.cal-pill:hover{filter:brightness(.94)}
.cal-pill.k-meet{background:rgba(23,51,165,.12);color:var(--blue-royal)}
.cal-pill.k-task{background:rgba(245,166,35,.18);color:#8a5c07}
.cal-pill.k-marker{background:var(--line-soft);color:var(--muted)}
/* APPLE-STYLE TINT (Chad, 2026-08-13: "I love our colors from Google they're a
   little harsh"). The harshness was never the palette — it was painting the
   board colour at full strength. Apple uses ONE colour three ways: a ~13% tint
   as the fill, the colour solid on the leading bar, and a darkened version for
   the text. Month pills now do exactly what .tg-ev already did in week/day, so
   all five views finally speak the same visual language. Everything derives
   from --evc, so a colour change is still the single edit it was before. */
.cal-pill.b-company,.cal-pill.b-csc-houma,.cal-pill.b-csc-thib,
.cal-pill.b-ffc-houma,.cal-pill.b-ffc-thib{
  background:color-mix(in srgb, var(--evc) 13%, transparent);
  color:color-mix(in srgb, var(--evc) 72%, #123);
  border-left:3px solid var(--evc);padding-left:6px}
.cal-pill.b-company{--evc:var(--s-company)}
.cal-pill.b-csc-houma{--evc:var(--s-csc-houma)}
.cal-pill.b-csc-thib{--evc:var(--s-csc-thib)}
.cal-pill.b-ffc-houma{--evc:var(--s-ffc-houma)}
.cal-pill.b-ffc-thib{--evc:var(--s-ffc-thib)}
/* An ALL-DAY event on one of your own Google calendars. Same three-way
   treatment as the store pills, driven by the --evc the markup hands over, so
   Google's raw colour is never painted at full strength as a fill. This is the
   case the first tint pass missed: it was an inline background, which no class
   rule could reach. Kept slightly stronger than the store tint (16% vs 13%)
   because an all-day bar is a wide, short shape and reads weaker than a pill
   at the same value.

   The class is DOUBLED on purpose. A personal Google event carries board "me",
   and `.cal-pill.b-me` sets its own background further down the file — equal
   specificity, later in source, so it would quietly win and this rule would do
   nothing for exactly the events it exists to fix. Repeating the class outranks
   every single-pair `.cal-pill.b-*` / `.k-*` rule no matter where it sits, so
   this can't be re-broken by something appended later. */
.cal-pill.pc-tint.pc-tint{
  background:color-mix(in srgb, var(--evc) 16%, #fff);
  color:color-mix(in srgb, var(--evc) 74%, #123);
  border-left:3px solid var(--evc);padding-left:6px}
.cal-pill.pc-tint.pc-tint:hover{background:color-mix(in srgb, var(--evc) 26%, #fff)}
/* A multi-day bar is one continuous run, so only the first segment wears the
   leading edge — otherwise the bar grows a stripe at every cell boundary. */
.cal-pill.pc-tint.pc-tint.span-mid,.cal-pill.pc-tint.pc-tint.span-end{border-left:none;padding-left:8px}
/* A completed/dimmed pill keeps its colour but drops to a whisper, the way a
   ticked item does on the Mac — still findable, no longer shouting. */
.cal-pill.dim{opacity:.55}
/* multi-day events: one continuous bar bridging the cell gaps */
.cal-pill.span-start{border-radius:6px 0 0 6px;margin-right:-13px;position:relative;z-index:2}
.cal-pill.span-mid{border-radius:0;margin-left:-13px;margin-right:-13px;position:relative;z-index:1}
.cal-pill.span-end{border-radius:0 6px 6px 0;margin-left:-13px;position:relative;z-index:1}
/* ---- Calendar colour editor (rail) ---- */
.cal-colors{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:11px}
.cal-colors>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  font-size:var(--t-caption);font-weight:700;color:var(--muted);user-select:none}
.cal-colors>summary::-webkit-details-marker{display:none}
.cal-colors>summary:hover{color:var(--ink)}
.cal-colors .cc-ico{font-size:var(--t-caption)}
.cal-colors .cc-lbl{flex:1}
.cal-colors .cc-n{background:var(--line-soft);border-radius:9px;padding:1px 6px;font-size:var(--t-caption2)}
.cc-body{padding:9px 0 2px}
.cc-row{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:var(--t-caption)}
.cc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Strip the browser's chrome off the colour input so it reads as a swatch
   rather than a form control — the native picker still opens on click. */
.cc-swatch{-webkit-appearance:none;appearance:none;width:22px;height:22px;padding:0;
  border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer;flex:none}
.cc-swatch::-webkit-color-swatch-wrapper{padding:2px}
.cc-swatch::-webkit-color-swatch{border:none;border-radius:4px}
.cc-swatch::-moz-color-swatch{border:none;border-radius:4px}
.cc-reset{border:none;background:none;color:var(--muted);cursor:pointer;font-size:var(--t-footnote);
  line-height:1;padding:2px 4px;border-radius:5px;flex:none}
.cc-reset:hover{color:var(--ink);background:var(--line-soft)}
/* The per-calendar swatch sits in an existing, tighter row than the store
   list, so it runs a size down and only shows its border on hover — the row's
   own coloured dot is the resting-state cue. */
.cs-swatch{width:16px;height:16px;border-radius:5px;border-color:transparent;opacity:.85}
.cal-src-row:hover .cs-swatch{border-color:var(--line);opacity:1}
.cs-reset{font-size:var(--t-caption);padding:1px 3px}
.cc-note{font-size:var(--t-caption2);line-height:1.45;color:var(--muted);margin-top:8px}
.cc-reset-all{margin-top:9px}

/* ---- Month popover bubble (Chad, 2026-08-13: "I like the way the month when
   you click, it opens up a bubble with the information about that event").

   Month is the one view where the right-hand detail column is the wrong
   answer: the cells are small and the eye is already at the date you clicked,
   so throwing the detail to the far edge of the screen makes you hunt for it.
   Apple anchors a bubble to the event instead. Day and week keep the detail
   column — there the eye is already on a tall grid and a floating card would
   cover the very hours you are reading.

   Positioned by JS (openCalBubble) because the anchor is a pill that can sit
   anywhere in a scrolling run; CSS only owns the look and the arrow. */
.cal-bub{position:fixed;z-index:120;width:320px;max-width:calc(100vw - 24px);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 40px rgba(16,24,64,.18),0 2px 6px rgba(16,24,64,.08);
  padding:15px 16px 16px;animation:calBubIn var(--m-fast,.14s) ease-out}
@keyframes calBubIn{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
/* The arrow is two stacked squares — the outer one paints the border, the
   inner one covers it with the card's own fill, which is how you get a
   1px-bordered arrow without SVG. Flipped when the bubble opens upward. */
.cal-bub::before,.cal-bub::after{content:"";position:absolute;width:12px;height:12px;
  background:#fff;transform:rotate(45deg);left:var(--bub-ax,24px)}
.cal-bub::before{border:1px solid var(--line)}
.cal-bub.below::before,.cal-bub.below::after{top:-7px}
.cal-bub.below::after{top:-6px;border:none}
.cal-bub.above::before,.cal-bub.above::after{bottom:-7px}
.cal-bub.above::after{bottom:-6px;border:none}
.cal-bub .cd-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.cal-bub .cd-title{font-size:var(--t-headline);line-height:1.3;margin:0 0 3px}
.cal-bub .cd-when{font-size:var(--t-caption);color:var(--muted);font-weight:600}
.cal-bub .cd-rule{height:1px;background:var(--line-soft);margin:12px 0}
.cal-bub .cd-note{font-size:var(--t-caption);line-height:1.5;color:var(--ink);margin-top:9px;
  max-height:96px;overflow:auto;white-space:pre-wrap}
.cal-bub .cd-loc{font-size:var(--t-caption);color:var(--muted);margin-top:8px}
.cal-bub .cd-cta{width:100%;margin-top:13px}
/* The clicked pill keeps a visible ring while its bubble is open, so you never
   lose track of which of five events in a cell you are looking at. */
.cal-pill.bub-open{outline:2px solid var(--evc,var(--blue-mid));outline-offset:1px}
.cal-more{border:none;background:none;font-size:var(--t-caption2);font-weight:700;color:var(--muted);cursor:pointer;text-align:left;padding:1px 7px}
.cal-more:hover{color:var(--blue-mid)}

/* ---- Meetings ---- */
.day-group{margin-bottom:22px}
.day-label{font-size:var(--t-caption);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding:0 2px 8px;display:flex;align-items:center;gap:8px}
.day-label .today-pill{background:var(--chart);color:#3a3d0a;font-size:var(--t-caption2);padding:2px 8px;border-radius:99px;letter-spacing:.08em}
.meet-list{display:flex;flex-direction:column;gap:8px}
.meet-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:12px 16px;box-shadow:var(--shadow);cursor:pointer;transition:all var(--m-slow) ease;text-align:left;width:100%}
.meet-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.meet-time{flex:0 0 74px;text-align:center}
.mt-start{font-weight:800;font-size:var(--t-body);letter-spacing:-.2px}
.mt-len{font-size:var(--t-caption2);color:var(--muted);font-weight:600}
.mt-allday{font-size:var(--t-caption2);font-weight:800;color:var(--blue-mid);background:rgba(55,189,245,.12);border-radius:8px;padding:4px 6px;letter-spacing:.05em}
.meet-body{flex:1;min-width:0}
.meet-title{font-weight:700;font-size:var(--t-footnote);letter-spacing:-.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meet-sub{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.meet-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.notes-dot{width:8px;height:8px;border-radius:50%;background:var(--chart-deep);box-shadow:0 0 0 3px rgba(214,222,47,.25)}
.chip.rec{background:var(--line-soft);color:var(--muted)}
.chip.loc{background:rgba(23,51,165,.07);color:var(--blue-royal);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.notes-chip{background:rgba(214,222,47,.25);color:#5a5f0e}
.meet-join{font-size:var(--t-caption);font-weight:700;color:var(--blue-mid);border:1px solid var(--line);border-radius:99px;padding:5px 12px;text-decoration:none;transition:.15s}
.meet-join:hover{border-color:var(--cyan);background:rgba(55,189,245,.07)}

/* calendar item kinds: meeting / task / marker */
.chip.kind.k-meet{background:rgba(23,51,165,.10);color:var(--blue-royal)}
.chip.kind.k-task{background:rgba(245,166,35,.16);color:#8a5c07}
.chip.kind.k-marker{background:var(--line-soft);color:var(--muted)}
.kdot{width:8px;height:8px;border-radius:50%;display:inline-block}
.kdot.k-meet{background:var(--blue-mid)}.kdot.k-task{background:var(--st-doing)}.kdot.k-marker{background:#b5bccf}
.meet-card.is-marker{opacity:.72;background:var(--bg)}
.chip.on-board{background:rgba(0,200,117,.14);color:#0b7a4b}
.chip.ext-chip{background:#f3ecfd;color:#6b3fb8}
.me-avatar{width:44px !important;height:44px !important;flex-basis:44px !important;font-size:var(--t-body) !important;box-shadow:0 4px 12px rgba(0,0,0,.25);border:2px solid rgba(232,238,85,.7)}
.sc-body .me-avatar{width:56px !important;height:56px !important;flex-basis:56px !important;font-size:var(--t-headline) !important}
.meet-card.is-hidden{opacity:.45;border-style:dashed}
/* personal (My Space) calendar color — chartreuse-gold */
.cal-pill.b-me{background:rgba(214,222,47,.22);color:#5a5f0e}
.meet-card.b-me{border-left-color:var(--chart-deep)}
.bdot.b-me{background:var(--chart-deep)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:26px}
.stat{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px 16px}
.stat .n{font-size:var(--t-title2);font-weight:800;letter-spacing:-.6px;font-family:Poppins,Figtree,sans-serif}
.stat .l{font-size:var(--t-caption2);color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.stat .n.green{color:#0b7a4b}
.stat .n.red{color:#c8102e}
/* Financial dashboard = full-bleed: fills nearly the whole white pane outside
   the sidebar, minimal chrome, iframe grows to consume all remaining height
   (Chad, 2026-07-24 — #41a). */
.fin-page{max-width:none;width:100%;padding:12px 16px 12px;flex:1;display:flex;flex-direction:column;min-height:0}
.fin-bar{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex:0 0 auto}
.fin-tabs{display:flex;gap:8px;flex:1}
.fin-frame{width:100%;flex:1 1 auto;min-height:360px;height:auto;border:1px solid var(--line-soft);border-radius:12px;background:#fff}
/* Native beta CSC dashboard (#41b) — verify numbers vs the GAS iframe */
.fin-native{flex:1 1 auto;overflow:auto;min-height:0}
.fb-note{background:var(--amber-bg,rgba(253,171,61,.14));border:1px solid rgba(253,171,61,.35);border-radius:10px;padding:10px 14px;font-size:var(--t-footnote);color:var(--ink);margin-bottom:14px}
.fb-note code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:5px;font-size:var(--t-caption)}
.fb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:14px;margin-bottom:14px}
.fb-card{background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.fb-card-head{font-weight:800;font-size:var(--t-body);padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.fb-table-wrap{overflow-x:auto}
.fb-table{width:100%;border-collapse:collapse;font-size:var(--t-footnote);min-width:420px}
.fb-table th{text-align:right;font-size:var(--t-caption2);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:8px 12px;border-bottom:1px solid var(--line-soft)}
.fb-table th:first-child{text-align:left}
.fb-table td{text-align:right;padding:9px 12px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.fb-table tr:last-child td{border-bottom:none}
.fb-metric{text-align:left!important;font-weight:600;color:var(--ink-soft)}
.fb-mut{color:var(--muted)}
.fb-chg.up{color:#0a8a4f;font-weight:700}
.fb-chg.dn{color:#c8102e;font-weight:700}
.fb-flat{color:var(--muted)}
.fb-mini .fb-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft)}
.fb-kpi{background:var(--card,#fff);padding:12px 14px;text-align:center}
.fb-kpi-v{font-family:var(--font-head,inherit);font-weight:800;font-size:var(--t-headline);font-variant-numeric:tabular-nums}
.fb-kpi-l{font-size:var(--t-caption2);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.fb-sub{font-weight:400;font-size:var(--t-caption);color:var(--muted)}
.fb-section-head{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 10px}
.fb-section-head h3{font-family:var(--font-head,inherit);font-size:var(--t-body);font-weight:800;margin:0}
.fb-grans{display:flex;gap:4px;background:var(--line-soft);padding:3px;border-radius:10px}
.fb-gran-label{font-size:var(--t-caption2);font-weight:800;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin:0 6px 0 4px;align-self:center}
.fb-gran{border:none;background:transparent;font:inherit;font-size:var(--t-caption);font-weight:700;color:var(--muted);padding:5px 14px;border-radius:8px;cursor:pointer}
.fb-gran.on{background:var(--card,#fff);color:var(--blue,#1A4FD0);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.fb-chart-wrap{padding:10px 12px 2px}
.fb-chart{width:100%;height:180px;display:block}
.fb-grid-line{stroke:var(--line-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.fb-ylab{font-size:var(--t-caption2);fill:var(--muted);text-anchor:end}
.fb-xlab{font-size:var(--t-caption2);fill:var(--muted);text-anchor:middle}
.fb-legend{display:flex;gap:16px;padding:0 16px 12px;font-size:var(--t-caption);color:var(--ink-soft)}
.fb-lg2{display:inline-flex;align-items:center}
.fb-lg2 i{display:inline-block;width:13px;height:13px;border-radius:3px;margin-right:6px;vertical-align:middle}
.fb-lg2 i.ly{background:transparent;border-bottom:2px dashed #94a3b8;height:0;border-radius:0;width:15px}
.fb-grid-1{grid-template-columns:1fr}
/* Compact weekly (Mon–Sat) table so both stores fit side-by-side on one row */
.fb-table-wk{min-width:0;font-size:var(--t-caption);table-layout:fixed}
.fb-table-wk th,.fb-table-wk td{padding:7px 6px}
.fb-table-wk .fb-metric{white-space:nowrap}
/* SMG box: big color-coded Overall square + the rest beside it */
.fb-smg{display:flex;gap:1px;background:var(--line-soft)}
.fb-smg-overall{flex:0 0 40%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 12px;background:var(--card,#fff)}
.fb-smg-big{font-family:var(--font-head,inherit);font-weight:800;font-size:var(--t-display);line-height:1;font-variant-numeric:tabular-nums}
.fb-smg-lbl{font-size:var(--t-caption2);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:8px;text-align:center}
.fb-smg-overall.smg-red{background:rgba(226,68,92,.12)}
.fb-smg-overall.smg-red .fb-smg-big{color:#c8102e}
.fb-smg-overall.smg-yel{background:rgba(253,171,61,.16)}
.fb-smg-overall.smg-yel .fb-smg-big{color:#a35b00}
.fb-smg-overall.smg-grn{background:rgba(0,200,117,.14)}
.fb-smg-overall.smg-grn .fb-smg-big{color:#0a8a4f}
.fb-smg-rest{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft)}
.fb-smg-rest .fb-kpi{background:var(--card,#fff)}
/* daypart total-time cells color-coded on the drive-thru goal */
.fb-kpi.smg-red .fb-kpi-v{color:#c8102e}
.fb-kpi.smg-yel .fb-kpi-v{color:#a35b00}
.fb-kpi.smg-grn .fb-kpi-v{color:#0a8a4f}
@media (prefers-color-scheme:dark){
  .fb-kpi.smg-red .fb-kpi-v{color:#ff6b81}
  .fb-kpi.smg-yel .fb-kpi-v{color:#ffc266}
  .fb-kpi.smg-grn .fb-kpi-v{color:#3fe08c}
}
@media (prefers-color-scheme:dark){
  .fb-smg-overall.smg-red .fb-smg-big{color:#ff6b81}
  .fb-smg-overall.smg-yel .fb-smg-big{color:#ffc266}
  .fb-smg-overall.smg-grn .fb-smg-big{color:#3fe08c}
}
.fin-store{margin-bottom:16px}
.x-unlink{border:none;background:none;color:var(--muted);cursor:pointer;font-size:var(--t-caption2);padding:0 0 0 4px}
.x-unlink:hover{color:#c8102e}
.drive-crumb{border:none;background:none;font-family:inherit;font-size:var(--t-footnote);font-weight:700;color:var(--blue-mid);cursor:pointer;padding:2px 4px}
.drive-crumb:hover{text-decoration:underline}
.crumb-sep{color:var(--muted);margin:0 2px}
.drive-folder{cursor:pointer}
/* My Files: Drive-style grid */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fgrid.drives{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.fcard{display:flex;flex-direction:column;align-items:stretch;gap:7px;background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:0 0 12px;cursor:pointer;text-align:center;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:all var(--m-slow) ease;font-family:inherit;overflow:hidden}
.fcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--cyan)}
.fc-icon{font-size:var(--t-display);line-height:1}
/* Google-style preview area: thumbnail if Drive has one, product icon if not */
.fc-thumb{position:relative;height:96px;background:var(--bg);border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.fc-thumb img:first-child{width:100%;height:100%;object-fit:cover;object-position:top}
.fc-thumb .fc-fallback{display:none;font-size:var(--t-display);align-items:center;justify-content:center}
.fc-thumb .fc-fallback img{width:36px;height:36px;object-fit:contain}
.fc-thumb.no-thumb .fc-fallback,.no-thumb-card .fc-fallback,.fc-thumb.folder .fc-fallback{display:flex}
.fc-thumb.folder{background:linear-gradient(135deg,rgba(55,189,245,.08),rgba(23,51,165,.05))}
.fcard .fc-name{padding:0 10px}
.fcard .fc-date{padding:0 10px}
.fl-img{width:20px;height:20px;object-fit:contain;flex:0 0 24px}
.fc-name{font-size:var(--t-caption);font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.fc-date{font-size:var(--t-caption2);color:var(--muted)}
.fl-icon{font-size:var(--t-headline);flex:0 0 24px;text-align:center}
/* My Files type chips */
.chip.fchip-type{width:56px;justify-content:center;color:#fff;font-weight:800}
.f-doc{background:#4285f4}.f-sheet{background:#0f9d58}.f-slide{background:#f4b400}
.f-pdf{background:#d93025}.f-folder{background:#5f6368}.f-img{background:#a142f4}.f-file{background:#9aa0a6}
.kind-select{border:1px solid var(--line);border-radius:8px;padding:3px 7px;font-size:var(--t-caption);font-family:inherit;font-weight:700;color:var(--ink-soft);background-color:#fff}
.confirm-note{font-size:var(--t-caption);color:var(--muted);margin:-4px 0 10px}
.action-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue-royal);flex:0 0 16px}
.action-row.created{opacity:.6}
/* The record button is #mmNoteTaker — it was #mmRec once, and when it was
   renamed this rule was left pointing at an id that no longer exists anywhere
   in app.js, so the "you are recording" state never rendered at all (found
   2026-08-11: Chad & Jesse "don't feel like it's being recorded because we
   can't see it"). Both ids kept so an older cached bundle still lights up. */
#mmRec.recording,
#mmNoteTaker.recording{background:#fdeaec;border-color:#f3c6cb;color:#c8102e;animation:recpulse 1.6s ease-in-out infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(227,25,55,.25)}50%{box-shadow:0 0 0 6px rgba(227,25,55,.08)}}

.rec-menu{bottom:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-md);padding:6px;min-width:280px;animation:fade .12s ease}
.rec-menu .view-item{line-height:1.35}
.rec-menu small{color:var(--muted);font-weight:500;font-size:var(--t-caption2)}

/* status pipeline editor */
.st-row{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.st-row input[type=color]{width:38px;height:36px;border:1px solid var(--line);border-radius:9px;padding:2px;background:#fff;cursor:pointer;flex:0 0 38px}
.st-row input[type=text]{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:var(--t-footnote);font-family:inherit}
.st-row select{padding:9px 10px;border:1px solid var(--line);border-radius:10px;font-size:var(--t-caption);font-family:inherit;background-color:#fff}
.st-del{border:none;background:none;color:var(--muted);cursor:pointer;font-size:var(--t-footnote);padding:6px;border-radius:8px}
.st-del:hover{background:#fdeaec;color:#c8102e}

.rec-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.rec-row audio{flex:1;height:38px}
.rec-meta{font-size:var(--t-caption);color:var(--muted);font-weight:600;white-space:nowrap}

/* meeting detail modal */
.modal.wide{max-width:680px}
.mm-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.mm-when{font-size:var(--t-caption);color:var(--ink-soft);font-weight:600;margin-top:2px}
/* Reclassify a Google event into an OS type (Task / Reminder / Special / Meeting) */
.gv-classify{margin:4px 0 16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.gv-classify .section-label{margin-bottom:8px}
.gv-kinds{display:flex;flex-wrap:wrap;gap:8px}
.gv-kind{font-size:var(--t-footnote);padding:8px 13px}
/* Both selected-chip rows in this modal ("Make this a…" and "GOING?") use the
   outline treatment — blue border, blue text, faint blue fill — NOT the solid
   fill of the generic .btn.btn-ghost.on. Both need FOUR classes to outrank that
   rule (it has three); .gv-kind.on used to carry only two and so
   never applied at all, which is why the selected kind was invisible for the
   same reason the RSVP answer was (Chad, 2026-08-06). Keep both at four. */
.btn.btn-ghost.gv-kind.on{border-color:var(--blue-royal);color:var(--blue-royal);
  background:rgba(26,79,208,.06)}
.btn.btn-ghost.gv-rsvp.on{border-color:var(--blue-royal);color:var(--blue-royal);
  background:rgba(26,79,208,.06);font-weight:600}
.gv-rsvp{font-size:var(--t-footnote);padding:8px 13px}
.mm-attendees{display:flex;align-items:center;margin-top:8px}
.mm-attendees .avatar{width:26px;height:26px;flex-basis:26px;font-size:var(--t-caption2);border:2px solid #fff;margin-left:-7px}
.mm-attendees .avatar:first-child{margin-left:0}
.mm-att-names{font-size:var(--t-caption);color:var(--muted);margin-left:10px}
.notes-area{width:100%;min-height:150px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;font-size:var(--t-footnote);font-family:inherit;line-height:1.6;resize:vertical;transition:.15s;color:var(--ink)}
.notes-area:focus{outline:none;border-color:var(--cyan);box-shadow:var(--ring)}
.notes-wrap{position:relative}
.notes-make-task{position:absolute;top:8px;right:8px;border:1px solid var(--line);background:var(--card);color:var(--blue-mid);font-size:var(--t-caption);font-weight:700;padding:5px 10px;border-radius:99px;cursor:pointer;box-shadow:var(--shadow);transition:var(--m-fast)}
.notes-make-task:hover{background:var(--blue-mid);color:#fff;border-color:var(--blue-mid)}
.notes-make-task.hidden{display:none}
.parse-row{display:flex;gap:10px;align-items:center;margin-top:12px}
.engine-badge{font-size:var(--t-caption2);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.parsed-block{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:16px}
.parsed-block h4{margin:0 0 10px;font-size:var(--t-caption);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.bullet-list{margin:0 0 16px;padding-left:20px}
.bullet-list li{font-size:var(--t-footnote);margin-bottom:6px;line-height:1.5}
/* Interview Q&A — the question quiet, the answer the thing you read. */
.qa-list{margin:0 0 18px}
.qa-item{padding:10px 0 12px;border-bottom:1px solid var(--line,rgba(0,0,0,.08))}
.qa-item:last-child{border-bottom:0}
.qa-q{font-size:var(--t-footnote);font-weight:700;color:var(--ink,#111);margin-bottom:5px}
.qa-q::before{content:"Q ";color:var(--ink-soft,#6b7280);font-weight:700}
.qa-a{font-size:var(--t-footnote);line-height:1.6;color:var(--ink-soft,#4b5563);white-space:pre-wrap}
.qa-a::before{content:"A ";color:var(--ink-soft,#6b7280);font-weight:700}
.action-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line-soft);border-radius:12px;margin-bottom:8px;background:var(--bg)}
.action-title{flex:1;font-size:var(--t-footnote);font-weight:600;min-width:0}
.action-row select{padding:6px 9px;border:1px solid var(--line);border-radius:9px;font-size:var(--t-caption);font-family:inherit;background-color:#fff;max-width:140px}
.action-add{border:none;background:var(--blue-royal);color:#fff;font-weight:700;font-size:var(--t-caption);padding:7px 13px;border-radius:99px;cursor:pointer;transition:.15s}
.action-add:hover{background:var(--blue-mid)}
.action-add:disabled{background:var(--st-done);cursor:default}

/* ---- Modal ---- */
.overlay{position:fixed;inset:0;background:rgba(9,18,60,.5);backdrop-filter:blur(3px);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .18s ease}
.modal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;max-width:530px;padding:26px 28px;max-height:90vh;overflow:auto;animation:rise .28s cubic-bezier(.2,.8,.25,1)}
.modal h2{margin:0 0 18px;font-size:var(--t-headline);letter-spacing:-.3px}
.field{margin-bottom:14px}
.field label{display:block;font-size:var(--t-caption2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
/* #97 batch editor: the checkbox IS the "change this field" switch, so it has
   to read as part of the label rather than a block above it. */
.bp-field label{display:flex;align-items:center;gap:8px;cursor:pointer}
.bp-field label input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:var(--blue-mid);cursor:pointer}
.bp-field select:disabled,.bp-field input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--bg)}
.bp-field select,.bp-field input[type=date]{width:100%}
.field input,.field textarea,.field select{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:11px;font-size:var(--t-body);font-family:inherit;background-color:#fff;transition:.15s;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--cyan);box-shadow:var(--ring)}
/* Custom select chrome — drop the raw OS dropdown arrow for a consistent one
   (native selects otherwise look "elementary" no matter the border styling).

   This used to be a hand-listed set of ~14 selectors, which meant any select
   NOT on the list — and every new one written since — still rendered the raw
   platform triangle. That inconsistency IS the "drop down arrows" complaint
   (Chad, 2026-08-27), so the rule is now ELEMENT-level: every select in the OS
   gets the chevron by default and none can opt out by being new.

   Specificity is 0,0,1, so every existing class rule still wins on sizing,
   colour and radius exactly as before — only the arrow is unified.

   [multiple] and [size] are reset immediately below: those render as list
   boxes, not dropdowns, and appearance:none would strip their scroll chrome.
   They are excluded by a SEPARATE rule rather than :not(), because :not()
   would push this to 0,2,1 and start overriding the class rules' padding. */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23767a92' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;cursor:pointer}
/* Gutter for the chevron, deliberately at 0,2,1 so it beats the single-class
   rules (.field select, .fld select, .side-row select …) that set `padding`
   with the SHORTHAND and would otherwise reset padding-right to 13px — which
   ran the option text straight under the arrow. Reserving the gutter is not a
   style preference a context gets to override: any select wearing our chevron
   must leave room for it. padding-right is the ONLY property raised this way;
   everything else above stays at 0,0,1 so class rules keep control of sizing. */
select:not([multiple]):not([size]){padding-right:34px}
select[multiple],select[size]{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;background-image:none;padding-right:12px;cursor:default}
.field select:hover,.fld select:hover{border-color:var(--cyan)}
/* Priority select: tint it to match the kanban/Gantt priority colors so the
   drawer speaks the same visual language as the cards. */
.pri-select{font-weight:700}
.pri-select[data-pri="urgent"]{color:#c8102e;border-color:#f3c6cb;background-color:#fdf3f4}
.pri-select[data-pri="high"]{color:#a35b00;border-color:#f7dcae;background-color:#fef8ef}
.pri-select[data-pri="normal"]{color:#2f4a8f;border-color:#c9d6f2}
.pri-select[data-pri="low"]{color:var(--muted)}
.field textarea{resize:vertical;min-height:74px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-hint{font-size:var(--t-caption2);color:var(--muted);margin-top:5px}
/* Says a send will not go out as the address named right above it. Amber, not
   red: the mail still sends and still reaches the person — only the From line
   is wrong — so this is a heads-up, not a blocked action. */
.send-warn{font-size:var(--t-caption);line-height:1.5;color:#7a4b00;background:#fff7e6;
  border:1px solid #f5a623;border-radius:8px;padding:9px 11px;margin:10px 0 0}
/* ❓ Help bubbles (Chad, 2026-07-28): a small "?" dot next to a label/button
   that shows a short explanation on click — one component, dropped in
   anywhere across the app via the hb() helper in app.js. */
.help-dot{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--line-soft);color:var(--muted);font-size:var(--t-caption2);font-weight:800;cursor:pointer;vertical-align:middle;margin-left:5px;flex:0 0 auto;user-select:none;transition:background .12s,color .12s}
.help-dot:hover,.help-dot:focus-visible{background:var(--cyan);color:#fff;outline:none}
.help-dot.on-dark{background:rgba(255,255,255,.22);color:#fff}
.help-dot.on-dark:hover,.help-dot.on-dark:focus-visible{background:#fff;color:var(--blue-deep)}
.help-bubble{position:fixed;z-index:400;max-width:270px;background:var(--blue-deep);color:#fff;font-size:var(--t-caption);line-height:1.5;font-weight:400;padding:10px 13px;border-radius:11px;box-shadow:var(--shadow-lg);animation:helpIn .12s ease-out}
@keyframes helpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.modal-actions{display:flex;gap:10px;margin-top:20px;align-items:center}
.pick-boards{display:flex;flex-wrap:wrap;gap:8px}
.pick-boards .pick-b{flex:1 1 auto;min-width:120px;justify-content:center}
.pick-boards .pick-b:hover{border-color:var(--blue-royal);color:var(--blue-royal)}
.modal-actions .spacer{flex:1}
.modal-meta{font-size:var(--t-caption2);color:var(--muted);margin-top:14px;border-top:1px solid var(--line-soft);padding-top:10px}

/* ---- No access ---- */
.noaccess{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:40px}
.noaccess h2{font-size:var(--t-title3);margin:14px 0 6px}
.noaccess p{color:var(--muted);max-width:420px}

.bdot{width:8px;height:8px;border-radius:50%;display:inline-block}
.bdot.csc{background:var(--csc)}.bdot.ffc{background:var(--ffc)}.bdot.kh{background:var(--blue-mid)}

/* per-STORE calendar colors (Chad, 2026-07-18): company blue, CSC Houma deep
   green, CSC Thib lime, Freddy's Houma maroon, Freddy's Thib bright red */
/* Store color scheme — ONE source of truth (Chad, 2026-07-25): CSC Houma green,
   CSC Thibodaux light green, FFC Thibodaux red, FFC Houma orange. Every
   calendar pill / dot / event bar derives from these vars, so adding a store or
   changing a color is a single edit here — never a per-view rebuild. */
:root{--s-company:#1733a5; --s-exec:#64748b; --s-csc-houma:#2f9e44; --s-csc-thib:#86be3e;
      --s-ffc-houma:#f5871f; --s-ffc-thib:#e31937}
.cal-pill.b-company{background:rgba(23,51,165,.12);color:#16308f}
.cal-pill.b-company,.cal-pill.b-csc-houma,.cal-pill.b-csc-thib,.cal-pill.b-ffc-houma,.cal-pill.b-ffc-thib{
  background:color-mix(in srgb, var(--evc) 18%, transparent); color:color-mix(in srgb, var(--evc) 72%, #14141f)}
.cal-pill.b-company{--evc:var(--s-company)}
.cal-pill.b-csc-houma{--evc:var(--s-csc-houma)}
.cal-pill.b-csc-thib{--evc:var(--s-csc-thib)}
.cal-pill.b-ffc-houma{--evc:var(--s-ffc-houma)}
.cal-pill.b-ffc-thib{--evc:var(--s-ffc-thib)}
.cal-pill.dim{opacity:.55}
.meet-card{border-left:4px solid transparent}
.meet-card.b-company{border-left-color:var(--s-company)}
.meet-card.b-csc-houma{border-left-color:var(--s-csc-houma)}
.meet-card.b-csc-thib{border-left-color:var(--s-csc-thib)}
.meet-card.b-ffc-houma{border-left-color:var(--s-ffc-houma)}
.meet-card.b-ffc-thib{border-left-color:var(--s-ffc-thib)}
.bdot.b-company{background:var(--s-company)}
.bdot.b-csc-houma{background:var(--s-csc-houma)}
.bdot.b-csc-thib{background:var(--s-csc-thib)}
.bdot.b-ffc-houma{background:var(--s-ffc-houma)}
.bdot.b-ffc-thib{background:var(--s-ffc-thib)}

/* monday-style micro-interactions: fast transitions + press squish */
.btn:active,.fchip:active,.persona:active,.store-card:active{transform:scale(.96);transition:transform var(--m-fast) ease}
@keyframes donepop{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}}
.task-card.pop{animation:donepop 220ms var(--ease-emph)}

/* "+ Add task" ghost row (inline creation, monday pattern) */
.add-card{border:1.5px dashed var(--line);border-radius:var(--r);background:none;color:var(--muted);font-weight:600;font-size:var(--t-caption);padding:10px;cursor:pointer;text-align:left;transition:all var(--m-slow) ease;width:100%}
.add-card:hover{border-color:var(--cyan);color:var(--blue-mid);background:rgba(55,189,245,.05)}
.add-input{width:100%;padding:11px 13px;border:1.5px solid var(--cyan);border-radius:var(--r);font-size:var(--t-footnote);font-family:inherit;outline:none;box-shadow:var(--ring)}

/* due-bucket group labels (My Work pattern) */
.bucket-label{font-size:var(--t-caption2);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 6px 4px;display:flex;align-items:center;gap:7px}
.bucket-label.overdue{color:#d83a52}
.bucket-label:first-child{padding-top:0}

/* ---- Support Tickets: JSM-style portal (Atlassian look & feel) ---- */
/* ===== Kaleo Support wizard — matches the KB support portal (scoped .ksup) ===== */
.ksup{--navy:#110d30;--accent:#69b048;--accent-deep:#4e8a33;--tile:#e9f3dc;--tile-ic:#3f6d18;
  --k-ink:#16142e;--k-ink-soft:#4b4a63;--k-muted:#918fa6;--k-line:#e5e4ee;
  --k-surface:#fff;--k-surface2:#f5f6fb;--k-req:#d22b3a;--k-req-bg:#fdecee;
  --k-radius:11px;--k-radius-sm:8px;--k-shadow:0 1px 2px rgba(17,13,48,.05),0 10px 30px rgba(17,13,48,.08);
  max-width:920px;color:var(--k-ink)}
.ksup .steps{display:flex;align-items:center;gap:10px;margin:2px 0 22px;font-size:var(--t-caption);color:var(--k-muted)}
.ksup .steps .s{display:flex;align-items:center;gap:7px}
.ksup .steps .n{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--k-line);display:grid;place-items:center;font-size:var(--t-caption2);font-weight:700;color:var(--k-muted)}
.ksup .steps .s.on .n{background:var(--navy);border-color:var(--navy);color:#fff}
.ksup .steps .s.on{color:var(--k-ink)}
.ksup .steps .s.done .n{background:var(--accent);border-color:var(--accent);color:#0c2a05}
.ksup .steps .bar{flex:1;height:1.5px;background:var(--k-line);max-width:44px}
.ksup .lead{font-size:var(--t-title3);font-weight:700;letter-spacing:-.015em;margin:0 0 4px}
.ksup .sub{color:var(--k-ink-soft);font-size:var(--t-body);margin:0 0 20px}
.ksup .cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.ksup .cards{grid-template-columns:1fr}}
.ksup .rt{text-align:left;background:var(--k-surface);border:1px solid var(--k-line);border-radius:var(--k-radius);padding:16px;cursor:pointer;display:flex;gap:13px;align-items:flex-start;transition:border-color .12s,transform .12s,box-shadow .12s;font-family:inherit;color:inherit;width:100%}
.ksup .rt:hover{border-color:var(--accent);box-shadow:var(--k-shadow);transform:translateY(-1px)}
.ksup .rt .ic{width:40px;height:40px;border-radius:10px;background:var(--tile);color:var(--tile-ic);display:grid;place-items:center;flex:none;font-size:var(--t-title3)}
.ksup .rt h3{margin:0 0 3px;font-size:var(--t-body);font-weight:650}
.ksup .rt p{margin:0;font-size:var(--t-caption);color:var(--k-ink-soft);line-height:1.4}
.ksup .back{background:none;border:none;color:var(--k-ink-soft);cursor:pointer;font-size:var(--t-footnote);padding:6px 4px;display:inline-flex;gap:6px;align-items:center;font-family:inherit;margin-bottom:10px}
.ksup .back:hover{color:var(--k-ink)}
.ksup .formcard{background:var(--k-surface);border:1px solid var(--k-line);border-radius:var(--k-radius);box-shadow:var(--k-shadow);overflow:hidden}
.ksup .fc-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--k-line);background:var(--k-surface2)}
.ksup .fc-head .ic{width:34px;height:34px;border-radius:9px;background:var(--tile);color:var(--tile-ic);display:grid;place-items:center;flex:none;font-size:var(--t-headline)}
.ksup .fc-head h2{margin:0;font-size:var(--t-body);font-weight:650}
.ksup .fc-head .rl{margin-left:auto;font-size:var(--t-caption);color:var(--k-ink-soft);display:flex;align-items:center;gap:6px}
.ksup .fc-head .rl .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ksup .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px}
@media(max-width:560px){.ksup .fgrid{grid-template-columns:1fr}}
.ksup .field{min-width:0}
.ksup .field.full{grid-column:1 / -1}
.ksup label{display:block;font-size:var(--t-footnote);font-weight:600;margin-bottom:6px;color:var(--k-ink)}
.ksup .req{color:var(--k-req);margin-left:2px;font-weight:700}
.ksup input[type=text],.ksup input[type=number],.ksup input[type=date],.ksup select,.ksup textarea{width:100%;font-family:inherit;font-size:var(--t-body);color:var(--k-ink);background-color:var(--k-surface);border:1px solid var(--k-line);border-radius:var(--k-radius-sm);padding:10px 11px;transition:border-color .12s,box-shadow .12s}
.ksup textarea{min-height:74px;resize:vertical}
.ksup input:focus,.ksup select:focus,.ksup textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
/* Chevron intentionally NOT redeclared here — the element-level select rule
   supplies it. This used to carry its own 2.5-weight arrow, so the supplier
   pane showed a visibly heavier chevron than every other dropdown. */
.ksup select{padding-right:32px}
.ksup .items-grid{display:flex;flex-direction:column;gap:2px;border:1px solid var(--k-line);border-radius:var(--k-radius-sm);padding:6px}
.ksup .item-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;margin:0;font-weight:400;cursor:pointer}
.ksup .item-row:hover{background:var(--k-surface2)}
.ksup .item-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);flex:none}
.ksup .item-name{flex:1;font-size:var(--t-footnote)}
.ksup .item-qty{width:70px;flex:none}
.ksup .footer-actions{display:flex;align-items:center;gap:12px;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--k-line);background:var(--k-surface2)}
.ksup .footer-actions .note{margin-right:auto}
.ksup .kbtn{font-family:inherit;font-size:var(--t-body);font-weight:600;border-radius:var(--k-radius-sm);padding:10px 18px;cursor:pointer;border:1px solid var(--k-line);background:var(--k-surface);color:var(--k-ink)}
.ksup .kbtn:hover{border-color:var(--k-muted)}
.ksup .kbtn.primary{background:var(--accent);border-color:var(--accent);color:#0c2a05}
.ksup .kbtn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.ksup .kbtn[disabled]{opacity:.6;cursor:default}
.ksup .pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-caption);font-weight:600;padding:3px 9px;border-radius:999px;background:#2a2260;color:#e7e5ff}
.ksup .done{background:var(--k-surface);border:1px solid var(--k-line);border-radius:var(--k-radius);box-shadow:var(--k-shadow);padding:30px;text-align:center}
.ksup .done .ok{width:54px;height:54px;border-radius:50%;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent-deep);display:grid;place-items:center;margin:0 auto 14px;font-size:var(--t-title1)}
.ksup .done h2{margin:0 0 4px;font-size:var(--t-title3);font-weight:700}
.ksup .done .tid{font-family:ui-monospace,Menlo,monospace;font-size:var(--t-footnote);color:var(--k-ink-soft);margin-bottom:18px}
.ksup .recap{text-align:left;max-width:460px;margin:0 auto 18px;border:1px solid var(--k-line);border-radius:var(--k-radius-sm);overflow:hidden}
.ksup .recap .row{display:flex;justify-content:space-between;gap:16px;padding:10px 14px;font-size:var(--t-footnote)}
.ksup .recap .row+.row{border-top:1px solid var(--k-line)}
.ksup .recap .k{color:var(--k-ink-soft)}
.ksup .recap .v{font-weight:600;text-align:right}
.jsm{max-width:980px}
.jsm-crumb{font-size:var(--t-caption);color:var(--muted);margin-bottom:14px;font-weight:600}
.jsm-crumb a{color:#0052cc;text-decoration:none}
.jsm-crumb a:hover{text-decoration:underline}
.jsm-hero{background:linear-gradient(135deg,#0b0823,#110d30 45%,#1e1847);border-radius:var(--r-lg);color:#fff;padding:34px 36px;text-align:center;margin-bottom:22px;box-shadow:var(--shadow-md)}
.jsm-hero h2{margin:0 0 6px;font-size:var(--t-title2);letter-spacing:-.4px}
.jsm-hero p{margin:0;color:#b9c8ea;font-size:var(--t-footnote)}
.jsm-tabs{display:flex;gap:2px;border-bottom:2px solid var(--line-soft);margin-bottom:18px}
.jsm-tab{border:none;background:none;font-family:inherit;font-weight:600;font-size:var(--t-body);color:var(--ink-soft);padding:10px 16px;cursor:pointer;position:relative;transition:color var(--m-fast) ease}
.jsm-tab:hover{color:#0052cc}
.jsm-tab.on{color:#0052cc}
.jsm-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#0052cc}
.jsm-count{background:var(--line-soft);border-radius:99px;font-size:var(--t-caption2);padding:1px 8px;margin-left:4px;color:var(--ink-soft)}
.rt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.rt-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:16px 18px;cursor:pointer;text-align:left;box-shadow:var(--shadow);transition:all var(--m-slow) ease;font-family:inherit}
.rt-card:hover{box-shadow:var(--shadow-md);border-color:#4c9aff;transform:translateY(-1px)}
.rt-card:hover .rt-name{color:#0052cc;text-decoration:underline}
.rt-icon{font-size:var(--t-title2);flex:0 0 32px;text-align:center}
.rt-icon.sm{font-size:var(--t-headline);flex:0 0 24px}
.rt-name{display:block;font-weight:700;font-size:var(--t-body);color:#0747a6;margin-bottom:2px}
.rt-desc{display:block;font-size:var(--t-caption);color:var(--muted);line-height:1.4}
/* Atlassian status lozenges */
.lz{display:inline-block;font-size:var(--t-caption2);font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:3px;white-space:nowrap}
.lz.sm{font-size:var(--t-caption2);padding:2px 6px}
.lz-open{background:#dfe1e6;color:#42526e}
.lz-recv{background:#f3e8fd;color:#5b2d8e}
.lz-prog{background:#deebff;color:#0747a6}
.lz-wait{background:#fff0b3;color:#974f0c}
/* Waiting reason (2026-08-07). Borrows lz-wait's amber so the board card and
   the list lozenge read as the same fact, and .needs-pick nags on the unset
   dropdown without blocking the manager from parking the ticket. */
.chip.tix-wait{background:#fff0b3;color:#974f0c;font-weight:700}
select.needs-pick{border-color:#e2a03f;background-color:#fffaf0;color:#974f0c}
/* Waiting rollup strip. Reads as a sentence about the queue, so the numbers
   are the loud part and the labels stay quiet. */
.wait-roll{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;
  padding:8px 12px;background:#fffaf0;border:1px solid #f3e2c0;border-radius:8px}
.wr-lead{font-weight:800;font-size:var(--t-caption);color:#974f0c;letter-spacing:.02em}
.wr-n{border:1px solid transparent;background:transparent;border-radius:6px;cursor:pointer;
  font-size:var(--t-caption);color:var(--ink-soft);padding:3px 9px;transition:background var(--m-fast) ease}
.wr-n b{font-size:var(--t-body);font-weight:800;color:var(--ink);margin-right:3px}
.wr-n:hover{background:rgba(151,79,12,.09)}
.wr-n.on{background:#974f0c;color:#fff;border-color:#974f0c}
.wr-n.on b{color:#fff}
.wr-n.warn b{color:#b4690e}
.wr-n.late b{color:#c9372c}
.wr-clear{border:none;background:transparent;color:var(--ink-soft);font-size:var(--t-caption);cursor:pointer}
.wr-clear:hover{color:var(--ink);text-decoration:underline}
.chip.wait-age{background:#f4f5f7;color:#5e6c84;font-weight:700}
.chip.wait-age.stale{background:#ffe7e4;color:#c9372c}
.chip.wait-late{background:#c9372c;color:#fff;font-weight:700}
.lz-done{background:#e3fcef;color:#006644}
/* requests list */
.tix-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background var(--m-fast) ease}
.tix-row:last-child{border-bottom:none}
.tix-row:hover{background:#f7f9fc}
.tix-key{font-size:var(--t-caption);font-weight:700;color:#0052cc;flex:0 0 56px}
.tix-sum{font-weight:600;font-size:var(--t-footnote);flex:1;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tix-row .chip,.tix-row .lz{white-space:nowrap;flex:0 0 auto}
.tix-row{flex-wrap:wrap}
.tix-meta{font-size:var(--t-caption);color:var(--muted);white-space:nowrap}
/* form */
.jsm-form{max-width:640px;padding:24px 26px}
.jsm-form-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.jsm-form-head h2{margin:0;font-size:var(--t-title3)}
.req{color:#de350b}
.items-grid{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.items-grid .item-row{display:flex;align-items:center;gap:10px;font-size:var(--t-footnote);font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0;color:var(--ink);margin:0}
.item-row input[type=checkbox]{width:16px;height:16px;accent-color:#0052cc}
.item-name{flex:1}
.item-qty{width:64px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:var(--t-caption);font-family:inherit}
.item-qty:disabled{background:var(--bg);opacity:.5}
.jsm-send{background:#0052cc;color:#fff}
.jsm-send:hover{background:#0747a6}
/* detail */
.tix-detail{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start}
@media(max-width:900px){.tix-detail{grid-template-columns:1fr}}
.tix-main{padding:22px 24px}
.tix-head{display:flex;gap:14px;align-items:flex-start}
.tix-head h2{margin:0;font-size:var(--t-title3);letter-spacing:-.3px}
.tix-sub{font-size:var(--t-caption);color:var(--muted);margin-top:3px}
.tix-body{margin:16px 0 0;padding:14px 16px;background:#f7f9fc;border-radius:10px;font-size:var(--t-footnote);line-height:1.6;white-space:pre-wrap}
.tix-fields{margin-top:14px;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden}
.tf-row{display:flex;border-bottom:1px solid var(--line-soft);font-size:var(--t-caption)}
.tf-row:last-child{border-bottom:none}
.tf-k{flex:0 0 160px;padding:8px 12px;background:#f7f9fc;color:var(--muted);font-weight:600}
.tf-v{padding:8px 12px;font-weight:600}
.act-head{margin:22px 0 10px;font-size:var(--t-caption);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.act-feed{display:flex;flex-direction:column;gap:10px}
.act{font-size:var(--t-caption);color:var(--ink-soft)}
.act.sys{padding:2px 4px}
.act.comment{display:flex;gap:10px;align-items:flex-start}
.act-bubble{background:#f7f9fc;border-radius:12px;padding:9px 13px;font-size:var(--t-footnote);flex:1;line-height:1.5}
.act-when{color:var(--muted);font-size:var(--t-caption2);font-weight:500;margin-left:4px}
.act-compose{display:flex;gap:10px;align-items:center;margin-top:16px;border-top:1px solid var(--line-soft);padding-top:14px}
.act-compose input{flex:1;padding:10px 13px;border:1px solid var(--line);border-radius:10px;font-size:var(--t-footnote);font-family:inherit}

/* ---- Comments on the FACE of a task; Activity is a separate diary ----------
   Chad, 2026-08-03: "Jesse created a task, I went in to give a note on it, but
   had to go to Activity. That will get lost and people won't see it." Then, on
   seeing the fix: "activity could be more of a narrative of what's happened…
   but that shouldn't be where we communicate about the task. It's more of a
   diary of the task if you will."

   So they're two different things and they were one feed:
     * COMMENTS — conversation. On the Details face, under Notes, with the
       compose box always visible. Comments only; a note between two "moved to
       In progress" lines reads as log noise.
     * ACTIVITY — the diary. Its own tab, read only, everything in order
       including that a comment was left, so the story stays complete. */
   Comments left the editor entirely on 2026-08-07 — they are now "Updates" on
   the work view you land on when you click a task, styled by .id-comments.
   The distinction above still holds, it just plays out across two screens
   instead of two places on one. */
/* the diary reads as a log, not a chat: no bubbles, tighter rhythm */
.task-diary .act-feed{gap:12px}
.task-diary .act.sys{padding:0 2px;line-height:1.5}
.act-compose input:focus{outline:none;border-color:#4c9aff;box-shadow:0 0 0 3px rgba(76,154,255,.25)}
.tix-side .card{padding:16px 18px}
.side-row{display:flex;flex-direction:column;gap:4px;margin-bottom:13px}
.side-row:last-child{margin-bottom:0}
.side-row label{font-size:var(--t-caption2);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.side-row select{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:var(--t-caption);font-family:inherit;background-color:#fff}
.side-row span{font-size:var(--t-footnote);font-weight:600}

/* ---- Store Vault ---- */
.vault-card{padding:26px 30px;max-width:1200px;overflow-x:auto}
.kb-html{font-size:var(--t-body);line-height:1.7;color:var(--ink)}
.kb-html h1,.kb-html h2,.kb-html h3{letter-spacing:-.3px;margin:18px 0 8px}
.kb-html table{border-collapse:collapse;width:100%;min-width:640px;margin:12px 0;font-size:var(--t-footnote);table-layout:auto}
.kb-html th,.kb-html td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top;word-break:break-word;max-width:280px}
.kb-html th{background:var(--bg);font-weight:700}
.kb-html a{color:#0052cc}
.kb-html ul,.kb-html ol{padding-left:22px}
.kb-html img{max-width:100%;border-radius:8px}
.kb-html[contenteditable="true"]{outline:2px dashed var(--cyan);outline-offset:8px;border-radius:6px;min-height:200px}
.kb-html td:has(.vcopy-btn){position:relative;padding-right:28px}
.vcopy-btn{display:inline-flex;align-items:center;justify-content:center;position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;padding:0;border:none;border-radius:5px;background:transparent;color:var(--muted);cursor:pointer;transition:.15s}
.vcopy-btn svg{width:13px;height:13px}
.vcopy-btn:hover{background:var(--accent-soft,#eaf0fd);color:var(--accent)}
/* The finance reference cards sit outside .kb-html and their values run long (a
   store address, a resale-cert link), so the icon rides INLINE after the value
   instead of being pinned to the cell's right edge, where it would sit on top of
   the text. .fin-nb keeps a single-token number from wrapping mid-number. */
.vcopy-btn.vcopy-inline{position:static;transform:none;margin-left:6px;vertical-align:middle;flex:none}
.fin-nb{white-space:nowrap}

/* Financial-reference entity cards (Chad, 8/5): Bank/Tax/Corp reference pages
   were one long stack of full-width tables — a store's numbers meant scrolling
   past every other store's. Grid of compact cards instead, one per entity. */
.fin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px;margin:14px 0}
.fin-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;
  border-top:3px solid var(--accent)}
.fin-card.fin-wide{grid-column:1/-1}
.fin-card h3{margin:0 0 10px;font-size:var(--t-body);letter-spacing:-.2px}
.fin-card h3 img{height:1.25em!important;width:auto!important;max-width:none!important;vertical-align:-0.22em;display:inline-block;border-radius:3px}
.fin-card table{margin:0;font-size:var(--t-caption);min-width:0}
.fin-card td,.fin-card th{padding:5px 8px}
.fin-card table{width:100%}
.fin-card td{white-space:normal;overflow-wrap:anywhere}
/* Plain-language editor for fin-grid entities — name/logo + label/value rows,
   no JSON or HTML in sight (Chad, 2026-08-05). */
.fin-editor{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.fin-edit-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;border-top:3px solid var(--accent)}
.fin-edit-head{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.fin-edit-head .fin-name{flex:1;font-weight:700;font-size:var(--t-body)}
.fin-edit-head select{font-size:var(--t-caption)}
.fin-edit-fields{display:flex;flex-direction:column;gap:6px}
.fin-edit-row{display:flex;gap:8px;align-items:center}
.fin-edit-row .fin-label{flex:0 0 42%}
.fin-edit-row .fin-value{flex:1}
.fin-editor input[type=text],.fin-editor input:not([type]){padding:6px 9px;border:1px solid var(--line);border-radius:7px;font-size:var(--t-caption);font-family:inherit}
.fin-edit-card .btn{padding:4px 8px;font-size:var(--t-caption)}
.fin-add-field{margin-top:4px}
/* 📎 Documents on a Bank / Corp / Tax card — the resale certificate you open
   and print (Chad, 2026-08-11). Deliberately printed too: the whole point is
   to get at the paperwork from this page. */
.fin-docs{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}
.fin-docs-h{font-size:var(--t-caption2);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:6px}
.fin-doc{display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid var(--line);
  border-radius:8px;margin-bottom:5px;font-size:var(--t-caption);text-decoration:none;color:inherit;background:#fff}
.fin-doc:hover{border-color:var(--accent);background:#f4f6fb}
.fin-doc-n{overflow-wrap:anywhere}
.fin-docs-empty{font-size:var(--t-caption);color:var(--ink-soft);padding:2px 0 6px}
/* a document attached to ONE LINE, shown next to that line's value */
.fin-rowdoc{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 7px;
  border:1px solid var(--line);border-radius:999px;font-size:var(--t-caption);text-decoration:none;
  color:inherit;vertical-align:1px;white-space:nowrap;max-width:220px;overflow:hidden}
.fin-rowdoc:hover{border-color:var(--accent);background:#f4f6fb}
.fin-rowdoc-t{overflow:hidden;text-overflow:ellipsis}
.fin-edit-rowwrap{display:flex;flex-direction:column;gap:4px}
.fin-row-att{display:flex;align-items:center;gap:8px;margin:0 0 2px 42%;font-size:var(--t-caption);color:var(--ink-soft)}
.fin-row-att .fin-row-url{flex:1}
.fin-edit-row .fin-row-file,.fin-edit-row .fin-row-link{padding:4px 7px}
@media print{.fin-rowdoc[href]:after{content:" (" attr(href) ")";font-size:var(--t-caption2);color:#666}}
.fin-docs-add{margin-top:2px}
@media print{.fin-docs-add,.fin-docs-empty{display:none!important}}
.fin-edit-docs{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:6px}
.fin-edit-docs .fin-edit-row .fin-doc-label{flex:0 0 42%}
.fin-edit-docs .fin-edit-row .fin-doc-url{flex:1}
.fin-doc-file{flex:1;font-size:var(--t-caption);color:var(--ink-soft);overflow-wrap:anywhere}
.fin-edit-docs .fchip{margin-top:2px}
@media print{
  /* print the destination, not just the words — a printed page has no links */
  .fin-doc{border-color:#ccc}
  .fin-doc[href]:after{content:" (" attr(href) ")";font-size:var(--t-caption2);color:#666;word-break:break-all}
}
/* KB roll-up markup (Vendor Hub / PassSafe vault pages) — ported from the KB */
.kb-html .vault-brand{display:flex;align-items:center;gap:10px;margin:26px 0 4px;padding:10px 16px;border-radius:12px;color:#fff;font-size:var(--t-headline);font-weight:800;letter-spacing:.02em}
.kb-html .vault-brand small{font-weight:600;opacity:.85;font-size:var(--t-caption);margin-left:auto}
.kb-html .vault-drop{margin:8px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.kb-html .vault-drop summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:var(--t-body);font-weight:800;color:#fff;background:var(--va,#2dd4bf);user-select:none}
.kb-html .vault-drop summary::-webkit-details-marker{display:none}
.kb-html .vault-drop summary::before{content:"▸";font-size:var(--t-footnote);transition:transform .15s}
.kb-html .vault-drop[open] summary::before{transform:rotate(90deg)}
.kb-html .vault-drop summary small{margin-left:auto;font-weight:600;font-size:var(--t-caption);opacity:.9}
.kb-html .vault-drop .vd-body{padding:4px 14px 12px}
.kb-html .inc-expanded{border-left:6px solid var(--va,#2dd4bf);padding:2px 0 2px 14px;margin:10px 0}
.kb-html .inc-expanded>h3{margin:6px 0 8px;border-bottom:2px solid var(--va,#2dd4bf);padding-bottom:5px}
.kb-html .inc-locked{border-left-color:#b8bec7;color:#7a828c}

/* Admin Access Matrix (7/31 v2) — capabilities are ROWS, people are COLUMNS.
   flex:none is load-bearing: without it the card flex-shrinks inside #main and
   hides most of the grid with no way to scroll to it (the v1 bug). The card
   scrolls internally in both directions; header row + Access column stay stuck. */
.amx-wrap{overflow:auto;padding:0;margin-top:10px;flex:none;max-height:min(72vh,780px)}
.amx{border-collapse:separate;border-spacing:0;min-width:100%;font-size:var(--t-caption)}
.amx th,.amx td{border-bottom:1px solid var(--line,#e6e9ef);padding:8px 10px;text-align:center;white-space:nowrap}
.amx thead th{position:sticky;top:0;background:var(--card,#fff);z-index:3}
.amx th.amx-name,.amx td.amx-name{position:sticky;left:0;background:var(--card,#fff);z-index:2;text-align:left;min-width:170px;max-width:220px}
.amx thead th.amx-name{z-index:4}
.amx th.amx-p{min-width:76px;font-weight:600}
.amx th.amx-p .adm-av{display:inline-flex;margin-bottom:3px}
.amx-pn{font-size:var(--t-caption2);line-height:1.2;color:var(--muted);white-space:normal;max-width:88px;margin:0 auto}
.amx th.amx-p.off{opacity:.45}
.amx-grp td{background:#eef2f7;text-transform:uppercase;font-size:var(--t-caption2);letter-spacing:.5px;color:#5a6472;font-weight:700;text-align:left;padding:6px 10px}
.amx td.amx-cap{font-weight:600;white-space:normal}
.amx tbody tr:not(.amx-grp):hover td{background:#f6f8fb}
.amx-ck{display:inline-flex;position:relative;cursor:pointer;padding:2px}
.amx-ck input{accent-color:var(--brand,#2456d6);width:15px;height:15px;cursor:pointer}
.amx-ck input:disabled{cursor:not-allowed;opacity:.5}
.amx-dot{position:absolute;top:-2px;right:-4px;width:7px;height:7px;border-radius:50%;background:#f0a11b}
.amx-legend{padding:9px 2px;font-size:var(--t-caption);color:var(--muted)}

/* Vault editor table tools (7/31) — edit-mode chrome under each table */
.vt-tools{display:flex;gap:8px;margin:6px 0 16px;align-items:center;flex-wrap:wrap}
.vt-tools button{border:1px dashed #c9d2de;background:#f7f9fc;border-radius:8px;padding:5px 12px;font-size:var(--t-caption);cursor:pointer;color:#3a4657;font-family:inherit}
.vt-tools button:hover{background:#eaf1fa}
.vt-tools .vt-del{color:#a63b3b}
.kb-html blockquote{border-left:4px solid var(--line);margin:12px 0;padding:6px 14px;color:var(--ink-soft);background:var(--bg);border-radius:0 8px 8px 0}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--blue-deep);color:#fff;padding:11px 20px;border-radius:99px;font-size:var(--t-footnote);font-weight:600;box-shadow:var(--shadow-lg);z-index:120;animation:rise .25s ease}

/* attendee RSVP: green dot = accepted, greyed = no response, strike = declined */
.att{position:relative;display:inline-block}
.att .avatar{border:2px solid #fff}
.att-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid #fff}
.att-dot.ok{background:#00c875}
.att-dot.maybe{background:#fdab3d}
.att-needsAction .avatar{opacity:.4;filter:grayscale(1)}
.att-declined .avatar{opacity:.35;filter:grayscale(1)}
/* The slash is for the AVATAR-only attendee (.att) — a small circle it can
   cross convincingly. A .att-chip is a 120px pill that already says "declined"
   with strikethrough text and reduced opacity, so a rotated full-width bar
   across it only ever looked like a stray line. Scoped to .att alone. */
.att.att-declined::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:2px;background:#c8102e;transform:rotate(-38deg);border-radius:2px}
.attn.needsAction{color:var(--muted)}
.attn.declined{text-decoration:line-through;color:var(--muted)}
.attn.accepted{color:#0b7a4b;font-weight:700}
.attn-sep{color:var(--muted)}

/* ---- Personal (My Space) meetings on shared views ---- */
.meet-card.b-me{border-left-color:#b9c22e}
.bdot.b-me{background:#b9c22e}

/* ---- My Files: macOS-style colored folders (Chad, 2026-07-18) ---- */
.folder-glyph{width:52px;height:44px;display:block;filter:drop-shadow(0 1px 1.5px rgba(10,20,60,.18))}
.fl-icon .folder-glyph,.lrow .folder-glyph{width:22px;height:19px}
.fname-wrap{display:inline-flex;align-items:center;gap:6px;justify-content:center;max-width:100%}
.fdot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.fcard{position:relative}
.fc-paint{position:absolute;top:6px;right:6px;border:none;background:rgba(255,255,255,.85);border-radius:8px;width:24px;height:24px;cursor:pointer;font-size:var(--t-footnote);display:none;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.fcard:hover .fc-paint,.lrow:hover .fc-paint{display:flex}
.lrow .fc-paint{position:static;margin-left:auto;flex:0 0 24px}
.fpalette{position:absolute;z-index:95;background:#fff;border:1px solid var(--line-soft);border-radius:12px;box-shadow:var(--shadow-md);padding:10px;display:grid;grid-template-columns:repeat(5,26px);gap:8px}
.fpal-swatch{width:26px;height:26px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0}
.fpal-swatch:hover{transform:scale(1.12)}
.fpal-swatch.on{border-color:var(--blue-royal)}

/* ---- Meeting notes: private-by-default + sharing + task-to-store ---- */
.notes-priv{font-size:var(--t-caption2);font-weight:700;color:var(--muted);letter-spacing:.03em;margin-left:6px;text-transform:none}
.shared-note{background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px;margin-top:8px}
.shared-note .sn-by{font-size:var(--t-caption2);font-weight:800;color:var(--blue-mid);margin-bottom:4px}
.shared-note .sn-body{font-size:var(--t-caption);white-space:pre-wrap;color:var(--ink-soft);max-height:180px;overflow:auto}
.share-menu{position:absolute;z-index:95;background:#fff;border:1px solid var(--line-soft);border-radius:12px;box-shadow:var(--shadow-md);padding:10px;min-width:230px;display:flex;flex-direction:column;gap:4px}
.mm-taskrow{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.mm-taskrow input{flex:1;min-width:180px}
.mm-taskrow select{max-width:170px}

/* ---- Calendar sync modal ---- */
.cs-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto}
.cs-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg);border:1px solid var(--line-soft);border-radius:10px}
.cs-name{flex:1;font-size:var(--t-footnote);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-primary{font-size:var(--t-caption2);font-weight:800;letter-spacing:.06em;background:var(--line-soft);border-radius:6px;padding:2px 6px;color:var(--muted);text-transform:uppercase}
.cs-row select{max-width:190px}

/* ---- Private Notes ---- */
.pn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.pn-card{border:1px solid rgba(0,0,0,.07);border-radius:14px;padding:14px;text-align:left;cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;min-height:120px;transition:all var(--m-slow) ease;font-family:inherit}
.pn-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.pn-title{font-weight:800;font-size:var(--t-footnote);letter-spacing:-.1px}
.pn-body{font-size:var(--t-caption);color:rgba(20,25,40,.72);white-space:pre-wrap;overflow:hidden;flex:1;max-height:110px}
.pn-when{font-size:var(--t-caption2);color:rgba(20,25,40,.45);font-weight:600}
.pn-edit-title{border:none;background:transparent;font-size:var(--t-headline);font-weight:800;font-family:Poppins,Figtree,sans-serif;width:100%;outline:none;margin-bottom:8px}
.pn-edit-body{border:none;background:transparent;width:100%;min-height:220px;resize:vertical;outline:none;font-family:inherit;font-size:var(--t-footnote);line-height:1.6}
.pn-colors{display:flex;gap:8px;margin:10px 0 2px}

/* ---- Special events ---- */
.cal-pill.k-special{background:rgba(214,222,47,.28);color:#5a5f0e}
.kdot.k-special{background:#c9d32e}
.se-card .meet-title{display:flex;align-items:center;gap:6px}

/* ---- Meeting as a full page (ClickUp-style) ---- */
.meet-page-wrap{width:100%}
.page-back{margin-bottom:14px}

/* ---- Meeting shell: drawer rail + document pane (Chad, 2026-08-03) --------
   "open more as an inline page rather than a pop-up box… the meeting notes
   sidebar right next to where the meeting is, almost like a drawer that comes
   out and gives you the options for the meeting. Then all of the meeting notes
   open in the window to the right of it."
   Opening a meeting used to blow away #main entirely, so the list you were
   just reading vanished — that's the takeover that read as a pop-up. Same
   grid the Knowledge module already uses (.kb-shell), so the two modules
   finally look like one app. */
/* The child rail must sit AGAINST the nav, not float in the middle of the
   page (Chad, 2026-08-03: "the sidebar is opening away from the parent side
   bar instead of opening right next to it"). Cause was .page — it's
   max-width:1280px; margin:0 auto with 34px side padding, so on a wide screen
   the whole shell gets centred and the rail drifts off the nav. page-flush
   drops the centring and the left padding for shell layouts only; every other
   .page keeps its comfortable reading width. */
/* One top offset for every shell page. The bar was landing at 30 / 36 / 24px
   across Meetings / Tasks / Calendar because each page kept its own padding —
   a small jump, but it's the same class of jump Chad has been pointing at all
   day, so it gets fixed the same way: one number, one place. */
.page.page-flush{max-width:none;padding-left:0;margin-left:0;padding-top:26px}
/* External nav link (store logins -> the KB in a new tab). Looks like a nav
   item so it doesn't feel bolted on, but carries a ↗ so it's honest that it
   leaves the OS (Chad, 2026-08-03). */
.nav-item.nav-ext{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-item.nav-ext .nav-ext-ic{margin-left:auto;opacity:.55;font-size:var(--t-caption2)}
.nav-item.nav-ext:hover .nav-ext-ic{opacity:.9}

.page.page-flush>.topbar{margin-top:0}
.page.page-flush>.topbar:first-child{margin-top:0}

/* ---- The shared module top bar (Chad, 2026-08-03) -------------------------
   One strip, worn by every module: title · view tabs · actions, then filters.
   Modules supply content, never layout — that's how three different top areas
   drifted into existence in the first place. Filters scroll sideways rather
   than wrapping; the meetings filter row used to drop its date pickers onto a
   second line and look broken. */
.topbar{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;padding-left:18px}
.topbar-main{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.topbar-title{flex:0 1 auto;min-width:0}
.topbar-title h1{margin:0;font-size:var(--t-title2);line-height:1.2}
.topbar-title .sub{margin-top:3px}
.topbar-views{flex:0 0 auto;margin-left:4px}
/* #67 (2026-08-03) — visual pass over the shared shell, matched to the 8/2
   design pack (screenshots 08-os-meetings, 09-os-notes). CSS only: topBar()
   still emits the same three zones, .mtg-shell the same two columns.

   The pack puts the page title alone on the first line with its subtitle under
   it, and the view tabs + primary action together on a second line. Ours
   baseline-aligned all three in one row, so a long title (a store's Files, a
   notebook name) squeezed the tabs and pushed the CTA toward the edge — the
   bar changed shape per module, which is the thing the shared bar exists to
   stop. Giving the title the full first row fixes the shape for every module
   at once. */
/* CORRECTION to the first pass at #67 (same day): the title was given its own
   full-width row with the controls underneath. That made the bar's HEIGHT vary
   with the title and subtitle, so every module started its content at a
   different y — the jumping Chad kept pointing at. The design prototype puts
   the title and its controls on ONE row, and that row is a FIXED height, so the
   header is the same shape in every module and only its contents change
   (Chad, 2026-08-03: "There should be a static place for all menus to live …
   The buttons can change based on the module, but they shouldn't be jumping").
   --topbar-h is the one number that guarantees it. */
:root{--topbar-h:64px}
.topbar{gap:0}
.topbar-main{align-items:center;flex-wrap:nowrap;height:var(--topbar-h);gap:16px}
/* The title NEVER shrinks — it was the only flexible item in a nowrap row, so a
   module with a lot of controls (Tasks: five view tabs + ⚙ + More + New task)
   squeezed "Tasks" down to "Ta…". The controls give way instead: they scroll
   inside their own zone rather than eating the page title. */
.topbar-title{flex:0 0 auto;min-width:0;display:flex;align-items:baseline;gap:9px}
.topbar-title h1{font-size:var(--t-title1);letter-spacing:-.5px;color:var(--blue-deep);white-space:nowrap}
/* ===== Calendar header — v1 §4.4, one row, never two =====
   Month name is the title; the year is a button beside it with the month
   jumper behind it. The old cal-toolstrip second row is gone. */
/* ===== Calendar child-rail header — MEASURED off the running prototype =====
   "August 2026 ▾" lives HERE, not in the content header. 58px band with a 1px
   #e0e4f0 bottom border so it lines up with the module header beside it. */
.cal-rail-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:58px;margin:-16px -10px 10px;padding:0 14px;
  border-bottom:1px solid #e0e4f0;flex:0 0 auto}
.cal-rail-month{display:flex;align-items:baseline;gap:7px;border:none;background:none;
  padding:0;cursor:pointer;font-family:var(--font-head,Poppins,Figtree,sans-serif)}
.crm-m{font-size:var(--t-headline);font-weight:600;color:#1c1f33;letter-spacing:-.35px}
.crm-y{font-size:var(--t-headline);font-weight:500;color:#8b90a8}
.crm-caret{font-size:var(--t-footnote);color:var(--ink-soft)}
.cal-rail-month:hover .crm-m{color:var(--blue-mid)}
/* Filters + Refresh, relocated from the module header into the sources rail. */
.cal-src-tools{display:flex;gap:6px;padding:0 0 10px;border-bottom:1px solid var(--line-soft);margin-bottom:10px}
.cal-src-tools .fchip{font-size:var(--t-caption2);padding:5px 9px}
/* ===== Month grid event pills — prototype values =====
   11.5/600, #16337f on #e7edfb, radius 5, padding 3px 7px, 3px left bar. */
.cal-cell .cal-pill{font-size:var(--t-caption);font-weight:600;border-radius:5px;padding:3px 7px;
  line-height:1.25;min-height:20px}
/* ===== Year view — the prototype's fifth calendar tab ===== */
.yr-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;padding:4px}
.yr-month{display:block;width:100%;text-align:left;border:1px solid var(--line-soft);background:var(--card);
  border-radius:var(--r);padding:12px 13px 13px;cursor:pointer;transition:box-shadow var(--m-fast) ease,transform var(--m-fast) ease}
.yr-month:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.yr-name{display:block;font-family:var(--font-head,Poppins,Figtree,sans-serif);font-weight:800;
  font-size:var(--t-footnote);color:var(--blue-deep);margin-bottom:8px}
.yr-dow,.yr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.yr-dow{margin-bottom:3px}
.yr-dow span{font-size:var(--t-caption2);font-weight:800;color:var(--muted);text-align:center}
.yr-d{position:relative;text-align:center;font-size:var(--t-caption2);line-height:17px;height:17px;
  color:var(--ink-soft);border-radius:4px}
.yr-d.out{color:transparent}
.yr-d.today{background:var(--blue-royal);color:#fff;font-weight:800}
/* A dot means that day has something on it — from the same filtered array
   every other calendar view reads, so it reveals nothing new. */
.yr-d.has::after{content:"";position:absolute;left:50%;bottom:1px;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--cyan)}
.yr-d.today.has::after{background:#fff}
.cal-year{border:none;background:none;cursor:pointer;font-family:var(--font-head,Poppins,Figtree,sans-serif);
  font-size:var(--t-title1);font-weight:800;letter-spacing:-.5px;color:#8b90a8;padding:0;
  display:inline-flex;align-items:baseline;gap:4px;transition:color var(--m-fast) ease}
.cal-year:hover{color:var(--blue-mid)}
/* Year view has no month name, so the year IS the title and takes its colour. */
.cal-year.as-title{color:var(--blue-deep)}
.cal-year .cal-h1-caret{font-size:var(--t-caption)}
/* ‹ Today › rides with the actions now, as round pills. */
.topbar-actions .cal-nav{display:flex;align-items:center;gap:4px;margin-right:2px}
.topbar-actions .cal-nav .btn{padding:0;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-headline)}
.topbar-actions .cal-nav #calToday{width:auto;padding:0 14px;border-radius:99px;font-size:var(--t-caption)}
/* §4.4 asks for the calendar's view tabs to be CENTRED. Reverted — deliberately.

   Centring them means position:absolute, which takes the strip out of flow so
   it knows nothing about where the buttons are. On Chad's own screen (2026-08-04)
   the centred strip landed ON TOP of ＋ New event and the › arrow in Month and
   Week — the tabs were literally covering the primary action. Raising the
   breakpoint to 1560 didn't save it, because the collision depends on how wide
   the ACTION GROUP is, not how wide the window is.

   Agenda already showed the correct answer: tabs in normal flow, actions hard
   right, nothing overlapping. Same row, same height, same everything the spec
   actually cares about — just not centred. A header whose controls sit on top
   of each other is a worse outcome than an off-centre strip, and this is the
   one rule in the spec that can't be satisfied without knowing the button
   widths in advance. */
/* The subtitle rides beside the title rather than under it, so it can never add
   a second line and change the bar's height. */
.topbar-title .sub{display:none}
/* BOTH zones push right, so the primary action lands on the same right edge in
   every module whether or not that module has a view switcher. With only
   .topbar-views doing it, a module without tabs (Knowledge Base, My Files) left
   its buttons stranded next to the title — the same control in a different
   place per screen, which is the thing this bar exists to prevent. */
.topbar-views{margin-left:auto;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.topbar-views::-webkit-scrollbar{display:none}
.topbar-actions{flex:0 0 auto;margin-left:auto;justify-content:flex-end}
.topbar-views + .topbar-actions{margin-left:14px}
/* Filters are their own fixed strip under the header — present or absent, they
   never reposition the header above them. */
.topbar-filters{min-height:46px;align-items:center}
/* The calendar's date navigation now lives in the strip, not the title slot.
   Sized to sit inside a 46px row so the strip's height is identical whether a
   view has date nav (Month/Week/Day) or chips (Agenda) — the contents change,
   the geometry does not. */
/* The child rail collapses only where there genuinely isn't room. CSS owns
   this, not JS — see the comment at the .cal-side-col render. */
@media(max-width:767px){
  .page-flush .cal-side-col{display:none}
  .page.page-flush:has(> .cal-flex){grid-template-columns:minmax(0,1fr)}
  .page-flush:has(> .cal-flex) > .topbar,
  .page-flush .cal-main{grid-column:1}
}
.cal-toolstrip{gap:10px}
.cal-toolstrip .cal-head-l{display:flex;align-items:center;gap:8px;margin:0;flex:0 0 auto}
.cal-toolstrip .cal-h1{font-family:Poppins,Figtree,sans-serif;font-size:var(--t-body);font-weight:700;
  color:var(--blue-deep);background:none;border:0;cursor:pointer;padding:4px 6px;border-radius:8px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.cal-toolstrip .cal-h1:hover{background:var(--bg)}
.cal-toolstrip .cal-h1-caret{font-size:var(--t-caption2);opacity:.6}
.cal-toolstrip .cal-nav{display:flex;align-items:center;gap:4px}
.cal-toolstrip .cal-nav .btn{padding:5px 10px;font-size:var(--t-caption)}
.cal-toolstrip .cal-arrow{padding:5px 9px}
/* Tabs read as the pack's pill group: bigger hit area, solid action-blue on
   the active one instead of a white chip that barely separated from the bar. */
.topbar .view-tabs{background:#fff;border-color:var(--line-soft);border-radius:12px;padding:3px;box-shadow:var(--shadow)}
.topbar .view-tab{padding:8px 16px;border-radius:9px;font-size:var(--t-footnote);font-weight:700;color:var(--muted)}
.topbar .view-tab.on{background:var(--blue-royal);color:#fff;box-shadow:none}
.topbar .view-tab.on .v-icon{opacity:1}
/* Glyphs restored 2026-08-04 — the prototype shows them on every module's view
   tabs (☰ List, ▦ Board, ⌸ Table, ≡ By status, ▤ Sections, ▬ Timeline), and a
   screen-by-screen comparison found them missing here.

   They were hidden on 8/3 because six task views with glyphs pushed "Timeline"
   off the end of the bar. That reason is gone: below 1199px the strip is now
   replaced by the dropdown (delta 1), so the inline row only ever has to fit on
   a wide pane. Padding tightened to 8px 12px to buy back the width the glyphs
   take. */
.topbar .view-tab .v-icon{display:inline;font-size:var(--t-caption);opacity:.68}
.topbar .view-tab{padding:8px 12px}
/* The Calendar supplies its own switcher markup (.seg, because Day/Week/Month/
   List predates the module registry), so it needs the same treatment to land in
   the same place visually — otherwise the one module that can't use the
   registry is the one that looks different. Scoped to .topbar-views so the
   Meetings/Topics toggle over in .topbar-actions is untouched. */
.topbar-views .seg{background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:3px;box-shadow:var(--shadow)}
.topbar-views .seg-btn{padding:8px 16px;border-radius:9px;font-size:var(--t-footnote);font-weight:700;color:var(--muted)}
.topbar-views .seg-btn.on{background:var(--blue-royal);color:#fff;box-shadow:none}
/* Rail: same card, roomier rows so a notebook/folder row matches the pack. */
.mtg-rail{padding:12px}
.mtg-rail-h{margin:2px 0 6px 8px}
.mtg-row{padding:9px 10px;border-radius:11px}
.topbar-actions{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.topbar-filters{display:flex;align-items:center;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.topbar-filters::-webkit-scrollbar{height:6px}
.topbar-filters::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.topbar-filters>*{flex:0 0 auto}
/* Modules that supply CHIP ROWS (Tasks: Projects / Stores / Tags) stack them
   instead of shoving three rows into one horizontal strip. Modules that supply
   inline controls (Meetings: search + dates) stay on one line. Same component,
   both shapes. */
.topbar-filters:has(.filter-row){flex-direction:column;align-items:stretch;overflow:visible;gap:6px}
.topbar-filters .filter-row{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.topbar-filters input[type=date],.topbar-filters select,.topbar-filters .hub-fsel{height:34px}
.topbar-filters .pn-listtop{margin:0;max-width:300px;flex:0 1 300px}
@media(max-width:767px){
  .topbar{padding-left:12px}
  .topbar-main{align-items:flex-start}
  .topbar-actions{justify-content:flex-start;width:100%}
}
/* Google invite blob (join ids, dial-ins) — folded away so it can't shove the
   notes off screen, but present, because it's how you actually join the call. */
.mm-invite{margin:12px 0 4px;border:1px solid var(--line-soft);border-radius:12px;background:var(--bg)}
.mm-invite>summary{cursor:pointer;padding:9px 13px;font-size:var(--t-caption);font-weight:600;color:var(--ink-soft);list-style:none}
.mm-invite>summary::-webkit-details-marker{display:none}
.mm-invite>summary:hover{color:var(--blue-deep)}
.mm-invite-body{padding:2px 13px 12px;font-size:var(--t-caption);line-height:1.6;color:var(--ink-soft);max-height:260px;overflow:auto;word-break:break-word}
/* The child rail is a COLUMN, not a card (design prototype, 2026-08-03): it
   touches the navy rail with no gap, runs the full height of the work area, and
   squares off its left edge so the two rails read as one piece of chrome. Only
   the pane to its right changes as you move around. */
.page-flush .mtg-rail,
.page-flush .kb-tree,
.page-flush .cal-side-col{border-radius:0;border-left:none;border-top:none;border-bottom:none;
  box-shadow:none;position:sticky;top:0;max-height:none;
  /* The rail starts --page-flush-top BELOW the top of the scroll area, so a full
     100vh-minus-appbar rail hung 26px past the bottom — enough overflow that the
     page itself scrolled and carried every child rail up with it. Subtract the
     offset and the work area stops scrolling entirely. */
  height:calc(100vh - var(--appbar-h) - var(--page-flush-top));overflow-y:auto;
  margin-top:calc(-1 * var(--page-flush-top));padding-top:16px}
:root{--page-flush-top:26px}
/* Modules that already render topBar() + a rail/doc shell (Meetings hub,
   Meetings detail, Notes, Knowledge Base) get the SAME three-column template
   without touching their markup: the page becomes the grid, the inner shell
   dissolves with display:contents so the rail and the doc become grid items
   directly, and the header is placed in column 2 / row 1 — i.e. inside the
   content pane, beside a full-height rail. One rule, every module, instead of
   four hand-edits that could each drift again. */
.page.page-flush:has(> .mtg-shell),
.page.page-flush:has(> .kb-shell),
.page.page-flush:has(> .cal-flex){
  display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);column-gap:0;
  min-height:calc(100vh - var(--appbar-h) - var(--page-flush-top))}
.page-flush > .mtg-shell,
.page-flush > .kb-shell,
.page-flush > .cal-flex{display:contents}
/* Chad, 2026-09-04, second screenshot: "notice the space here as well. We do
   not have to put the words next to it, but I would like it to be right up
   against the next frame or sidebar." 22px on the header and 12px on the doc,
   against rails that are already floating cards with their own border and
   shadow, read as a band of dead page between the two panes. Both go to 8 —
   not 0, because the rail and the content are separate cards and 0 jams one
   card's shadow into the other's border. 8 is the gutter; change it here. */
.page-flush:has(> .mtg-shell) > .topbar,
.page-flush:has(> .kb-shell) > .topbar,
.page-flush:has(> .cal-flex) > .topbar{grid-column:2;grid-row:1;padding-left:8px}
/* align-self:start is what makes `position:sticky` actually pin the rail. As a
   stretched grid item it was as tall as the whole scrollable page, so there was
   nothing for sticky to do and the rail scrolled away with the content — on the
   month view, which jumps to today, that meant the rail's top was cut off. */
.page-flush .mtg-rail,
.page-flush .kb-tree,
.page-flush .cal-side-col{grid-column:1;grid-row:1 / span 2;align-self:start}
.mod-shell>.mod-rail{align-self:start}
.page-flush .mtg-doc,
.page-flush .kb-doc,
.page-flush .cal-main{grid-column:2;grid-row:2;padding-left:8px}  /* 22 → 12 → 8, see the topbar note above */
/* The calendar scrolls INSIDE its own column — nothing else on the page moves.
   Month runs 7,000+px tall in one card; because row 2 is minmax(0,1fr) that card
   overflowed the whole .page box, so the SCROLLER was <main> and the page grid
   stayed viewport-height. A sticky rail can only stick inside its own grid area,
   so a 750px area under a 7,500px scroll meant the sources rail (and the header)
   slid off the top the moment you scrolled — you could not reach the calendar
   checkboxes at all. Giving the column min-height:0 + its own overflow puts the
   scroll where it belongs. Meetings/Notes/KB already do this in their own docs. */
.page-flush:has(> .cal-flex) .cal-main{min-height:0;max-height:100%;
  overflow-y:auto;overflow-x:hidden}
/* Calendar with an event selected keeps its third detail column — it becomes a
   second track inside column 2's own inner layout rather than a third page
   column, so the rail and header never move when you pick an event. */
.page-flush:has(> .cal-flex.has-detail) .cal-main{display:grid;grid-template-columns:minmax(0,1fr) var(--cal-detail-w);gap:16px;align-items:start}
/* The panel is a child of .cal-main and auto-places into that second track.
   It must NOT be given a page-grid position — .cal-flex is display:contents, so
   an explicit grid-column/row here used to drop it into column 2 / row 2 of the
   PAGE grid, i.e. exactly on top of the calendar card, with the grid's sticky
   day header and its z-index:2 event pills punching through the panel. */
/* ── The module template: nav rail | child rail | content ──────────────────
   The child rail is a full-height column flush to the nav. The header sits
   INSIDE the content column at a fixed height, so the rail never shifts when a
   module's title or actions change. */
.mod-shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:0;align-items:start;
  min-height:calc(100vh - var(--appbar-h) - var(--page-flush-top))}
.mod-shell.no-rail{grid-template-columns:minmax(0,1fr)}
.mod-rail{border-radius:0;border-left:none;border-top:none;border-bottom:none;box-shadow:none;
  position:sticky;top:0;height:calc(100vh - var(--appbar-h) - var(--page-flush-top));max-height:none;
  margin-top:calc(-1 * var(--page-flush-top));padding:16px 10px;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px}
.mod-doc{display:flex;flex-direction:column;min-width:0;padding-left:22px}
/* .mod-doc already supplies the content pane's left inset, so the bar must not
   add its own on top — that stacked to 40px in moduleShell modules against 22px
   in the grid ones, putting Tasks' title 18px right of everyone else's. */
.mod-doc>.topbar{flex:0 0 auto;padding-left:0}
/* Last of the per-module drift: moduleShell modules (Tasks, Meetings) put the
   bar inside a flex column while the grid modules (Notes, KB, Calendar) place
   it in row 1, which left the title 6px lower in the first group; and the
   Calendar page carried its own right padding, putting its primary action 10px
   off everyone else's edge. One top offset, one right edge, everywhere. */
/* The header STICKS. Some views scroll their own content (the month grid jumps
   to today, a long list scrolls), and any of that used to carry the header off
   the top of the screen — so the menus appeared to move even when the layout
   hadn't changed. Pinning it means the title, the view tabs and the primary
   action are in the same place no matter what the body is doing. */
.mod-doc>.topbar,
.page-flush>.topbar{margin-top:0;padding-top:var(--page-flush-top);position:sticky;top:0;z-index:20;
  background:var(--bg)}
.page.page-flush{padding-top:0}
.mod-rail,.page-flush .mtg-rail,.page-flush .kb-tree,.page-flush .cal-side-col{margin-top:0}
.mod-body{margin-top:0}
.page.page-flush{padding-right:34px}
.page.page-flush.page-cal{padding-right:34px}
.mod-body{flex:1 1 auto;min-height:0;padding-bottom:30px}
/* Filter chips read as rail ROWS here, not a chip row — one per line, full
   width, count on the right. Same buttons, same handlers. */
.mod-rail .filter-row{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0 0 10px;flex-wrap:nowrap}
.mod-rail .filter-row .section-label{margin:6px 0 4px 6px !important}
.mod-rail .fchip{width:100%;justify-content:flex-start;border-radius:9px;padding:7px 10px;font-size:var(--t-caption)}
.mod-rail .fchip .fchip-n{margin-left:auto}
.mod-rail .spacer{display:none}
/* Tasks — Table view (8.3B T1 / screenshot 02-os-tasks). Columns per the pack;
   the Store column drops on phones. */
.tt-card{padding:0;overflow:hidden}
/* Task gets the slack but not all of it — capping it keeps the row balanced on
   a wide monitor instead of leaving Store/Status/Due crushed against the right
   edge. Owner is a fixed 40px so nothing can wrap it onto a second line. */
/* Track list comes from CSS variables set on .tt-card, so the header and every
   row read ONE source and cannot drift while dragging. Defaults match what
   shipped; wireTtCols() overwrites them live and saves per person. */
.tt-head,.tt-row{display:grid;
  grid-template-columns:minmax(0,1fr) var(--tt-store,170px) var(--tt-status,96px) var(--tt-due,80px) var(--tt-owner,40px);
  align-items:center;gap:14px}
/* Drag grips. Each sits on the divider at its header cell's LEFT edge, so the
   whole boundary is grabbable rather than a 4px hairline. */
.tt-head>span{position:relative}
.tt-grip{position:absolute;left:-11px;top:-9px;bottom:-9px;width:11px;cursor:col-resize;
  display:block;background:transparent;transition:background var(--m-fast) ease}
.tt-grip::after{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:transparent;transition:background var(--m-fast) ease}
.tt-head:hover .tt-grip::after{background:var(--line)}
.tt-grip:hover::after{background:var(--blue-mid)}
/* While dragging: kill text selection and keep the resize cursor everywhere,
   or the pointer flickers as it crosses cells. */
body.tt-resizing{cursor:col-resize;user-select:none}
body.tt-resizing .tt-grip::after{background:var(--blue-mid)}
.tt-owner-h{display:flex;align-items:center;gap:8px}
.tt-reset{border:none;background:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:var(--t-caption2);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-mid);text-decoration:underline;text-underline-offset:2px}
.tt-reset:hover{color:var(--blue-deep)}
.tt-owner{min-width:0;overflow:hidden}
.tt-owner .avatar{width:26px;height:26px;font-size:var(--t-caption2)}
.tt-owner .avatar-stack{display:flex}
.tt-head{background:var(--bg);border-bottom:1px solid var(--line-soft);padding:9px 14px;
  font-size:var(--t-caption2);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tt-row{padding:9px 14px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background var(--m-fast)}
.tt-row:last-child{border-bottom:0}
.tt-row:hover{background:var(--bg)}
.tt-row.od{background:#fffafb}
.tt-row.done .l-title{text-decoration:line-through;color:#8b8fa3}
.tt-task{display:flex;align-items:center;gap:9px;min-width:0}
.tt-task .l-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-store{display:flex;align-items:center;gap:6px;font-size:var(--t-caption);color:var(--ink-soft);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-status .status-pill{width:100%;justify-content:center}
.tt-due{font-size:var(--t-caption);font-weight:700;color:var(--ink-soft)}
.tt-due.od{color:#d83a52}
.tt-owner{display:flex;justify-content:flex-end}
.tt-hint{font-size:var(--t-caption);color:var(--muted);margin-top:10px}
/* ── Note detail chrome (design 09-os-notes) ── */
.pn-eyebrow{font-size:var(--t-caption2);font-weight:800;letter-spacing:.09em;margin-bottom:6px}
.pn-author{display:flex;align-items:center;gap:6px}
.pn-author .avatar{width:22px;height:22px;font-size:var(--t-caption2)}
.pn-tagchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pn-tagchips .chip{cursor:pointer}
/* ── Meeting detail chrome (design: named attendee chips) ── */
.mm-attendees{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
/* MUST stay positioned: .att-declined::after is an absolutely-positioned red
   slash meant to cross this ONE chip. Without a positioned ancestor here it
   resolved against the page instead — left:2px/right:2px became the width of
   the whole card and rotate(-38deg) turned it into a red diagonal line across
   the entire screen. That is the "red line" Chad kept reporting: it only ever
   appeared on meetings where somebody had DECLINED (2026-08-13). */
.att-chip{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line-soft);
  border-radius:99px;padding:3px 11px 3px 3px;font-size:var(--t-caption);font-weight:600;color:var(--ink-soft)}
.att-chip .avatar{width:22px;height:22px;font-size:var(--t-caption2)}
.att-chip.att-accepted{border-color:#bfe6cd;background:#f0faf4}
/* Declined reads as a RED strike through the name, not a floating slash
   (Chad, 2026-08-13: "instead of using a red slash right there won't you just
   make it red where it's a line through the name"). */
.att-chip.att-declined{opacity:.7;color:#c8102e;text-decoration:line-through;
  text-decoration-color:#c8102e;text-decoration-thickness:2px}
.att-chip.att-tentative{border-color:#f3ddb4;background:#fffaf0}
.att-more{font-size:var(--t-caption);font-weight:700;color:var(--muted)}
/* #160 — "still open from last time". Reads as a short debt list, not as a
   second task board: no checkboxes, no owners dropdown, nothing that invites
   you to re-create work that already exists. Clicking a row opens the task. */
.carried-block .carried-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:8px 12px;margin-top:6px;border:1px solid var(--line-soft);border-left:3px solid #e8a33d;
  border-radius:8px;background:var(--bg);cursor:pointer}
.carried-block .carried-row:hover{border-color:#e8a33d;background:#fffaf0}
.carried-block .carried-row:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.carried-title{font-size:var(--t-footnote);font-weight:600;color:var(--ink)}
.carried-meta{font-size:var(--t-caption);color:var(--muted)}
/* #157 — editing the guest list inline, never in a pop-up (the shell law:
   pop-ups are for CREATE). The ✕ only exists while the row is in edit mode. */
.att-chip .att-x{border:0;background:none;cursor:pointer;padding:0 0 0 2px;margin-left:1px;
  font-size:var(--t-caption);line-height:1;color:var(--muted);font-weight:700}
.att-chip .att-x:hover{color:#c8102e}
.btn.btn-xs{padding:3px 10px;font-size:var(--t-caption);border-radius:99px}
.mm-guestedit{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;
  padding:10px 12px;border:1px dashed var(--line-soft);border-radius:10px;background:var(--bg)}
.mm-guestedit input[type=email]{flex:1 1 240px;min-width:200px;padding:6px 10px;font-size:var(--t-caption);
  border:1px solid var(--line-soft);border-radius:8px}
/* Full-width so the cancellation warning sits UNDER the controls rather than
   being squeezed to a sliver beside them — it is the part that matters. */
.mm-guestnote{flex:1 0 100%;font-size:var(--t-caption);color:var(--muted);line-height:1.45}
.mm-guestnote strong{color:#c8102e}
@media(max-width:767px){
  .tt-head,.tt-row{grid-template-columns:minmax(0,1fr) 74px 62px 30px}
  .tt-store{display:none}
  .tt-head>span:nth-child(2){display:none}
}
.page.page-flush{padding-top:var(--page-flush-top)}
/* The shell fills the work area so the rail has a full-height track to sit in. */
.page-flush .mtg-shell,
.page-flush .kb-shell{gap:0;min-height:calc(100vh - var(--appbar-h) - var(--page-flush-top))}
.page-flush .mtg-doc,
.page-flush .kb-doc{padding-left:22px}
.mtg-shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:18px;align-items:start}
/* The rail itself never scrolls — only the LIST inside it does. With 60
   meetings the rail used to scroll as one block, which pushed this meeting's
   own buttons (Save / Share / AI Note Taker / Delete) far below the fold.
   Back link pinned top, list scrolls, actions pinned bottom. */
.mtg-rail{background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow);
  padding:10px;position:sticky;top:14px;max-height:84vh;overflow:hidden;display:flex;flex-direction:column;gap:10px}
.mtg-back{background:none;border:0;cursor:pointer;text-align:left;font:inherit;font-size:var(--t-caption);font-weight:700;
  color:var(--blue-deep);padding:4px 6px;border-radius:8px}
.mtg-back:hover{background:rgba(23,51,165,.07)}
.mtg-rail-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1 1 auto;min-height:0}
.mtg-rail-h{font-size:var(--t-caption2);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:2px 0 4px 6px}
/* WHEN segment + store checkboxes sit above the list; both are fixed height so
   the rail is the same shape on Upcoming, Past and All — the jump Chad saw was
   the rail growing facet sections on Past and losing them on Upcoming. */
.mtg-when{width:100%;flex:0 0 auto}
.mtg-stores{flex:0 0 auto;display:flex;flex-direction:column;gap:1px;margin-bottom:2px}
.mtg-dot{color:var(--chart-deep);font-size:var(--t-caption2)}
/* Empty right pane — matches the meeting document card so the page keeps its
   shape before you've picked anything. */
.mtg-doc .mtg-empty{background:#fff;border:1px solid var(--line-soft);border-radius:16px;
  box-shadow:var(--shadow);padding:64px 32px;text-align:center;color:var(--ink-soft)}
.mtg-empty-ic{font-size:var(--t-display);line-height:1;margin-bottom:12px;opacity:.5}
.mtg-empty h3{margin:0 0 6px;font-size:var(--t-headline);color:var(--blue-deep)}
.mtg-empty p{margin:0 auto;max-width:380px;font-size:var(--t-footnote);line-height:1.6}
.mtg-row{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;
  padding:7px 9px;border-radius:10px;line-height:1.3}
.mtg-row:hover{background:rgba(23,51,165,.06)}
.mtg-row.active{background:rgba(23,51,165,.10)}
.mtg-row.active .mtg-row-t{color:var(--blue-deep)}
.mtg-row-t{display:block;font-size:var(--t-caption);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtg-row-d{display:block;font-size:var(--t-caption2);color:var(--muted);margin-top:1px}
.mtg-rail-opts{border-top:1px solid var(--line-soft);padding-top:10px;display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
/* A meeting's own actions belong to the MEETING, so they sit at the foot of
   its document — the rail is shared with the list now and can't be about one
   meeting (Chad, 2026-08-03). Horizontal here, since the document is wide. */
.mm-actions{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:14px}
.mm-actions .parse-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.mtg-rail-opts .parse-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;flex-wrap:nowrap}
.mtg-rail-opts .parse-row .btn,.mtg-rail-opts .parse-row .btn-ghost{width:100%;justify-content:center;text-align:center}
.mtg-rail-opts .parse-row .spacer{display:none}
.mtg-rail-opts .engine-badge{text-align:center}
/* the notes pane reads as a document, not a form field */
.mtg-doc .meet-page{max-width:none;flex:1 1 auto}
.mtg-doc .notes-area{border:0;border-radius:0;padding:0;background:transparent;box-shadow:none;
  min-height:52vh;font-size:var(--t-body);line-height:1.75;resize:vertical}
.mtg-doc .notes-area:focus{outline:none;box-shadow:none}
@media(max-width:1100px){
  /* the drawer slides away once a meeting is open on a narrow screen —
     same rule .kb-shell.has-open uses for the KB tree */
  .mtg-shell{grid-template-columns:1fr}
  .mtg-shell.has-open .mtg-rail{display:none}
  .mtg-rail{position:static;max-height:none}

  /* ⚠️ HIDING THE RAIL IS NOT ENOUGH — THE WIDTH COMES FROM THE GRID TRACK.
     Chad, 2026-09-04, on a half-screen window beside a video interview: "I'm
     not able to see the video when I'm interviewing these people and I have to
     shrink my screen down to see the video of them and also have the notes up."
     Measured on the meeting detail at 900px: `.mtg-rail` was correctly
     display:none, and the page STILL read
     `grid-template-columns: 209px 589px` — a 209px column with nothing in it,
     27% of the window blank, which is what his screenshot shows.

     The `.mtg-shell{grid-template-columns:1fr}` line above has done nothing
     since #179: that promotion made `.mtg-shell` display:contents and moved the
     real grid up to `.page.page-flush`, so the shell's own template is ignored.
     The rule was left pointing at an element that no longer lays anything out —
     the same trap components.css already documents for the phone block ("the
     width came from the grid TRACK, not from the rail").

     So collapse the track on the element that actually owns it, and bring the
     header and the doc back to column 1 — they are pinned to column 2, and a
     grid-column:2 against a single-track template just conjures an implicit
     second column and puts the gap back. */
  .page.page-flush:has(> .mtg-shell.has-open),
  .page.page-flush:has(> .kb-shell.has-open){grid-template-columns:minmax(0,1fr)}
  .page.page-flush:has(> .mtg-shell.has-open) > .topbar,
  .page.page-flush:has(> .kb-shell.has-open) > .topbar,
  .page.page-flush:has(> .mtg-shell.has-open) .mtg-doc,
  .page.page-flush:has(> .kb-shell.has-open) .kb-doc{grid-column:1}
}
.meet-layout{display:flex;align-items:flex-start;width:100%}
.meet-page{max-width:980px;flex:1 1 720px;min-width:0;padding:26px 30px;transition:width .28s cubic-bezier(.2,.8,.25,1)}
.meet-page .mm-head h2{font-size:var(--t-title2)}
.meet-page .notes-area{min-height:46vh;font-size:var(--t-body);line-height:1.7;overflow-y:hidden}
.meet-page .shared-note .sn-body{max-height:340px}
.meet-page .parse-row{flex-wrap:wrap;row-gap:8px}
.meet-page .mm-taskrow input{min-width:240px}

/* Task panel slides open BESIDE the meeting card (not over it) — Chad,
   2026-07-28: "make the task panel dynamic with the meeting panel, so it
   slides over when activated." flex-basis/width both animate so the meeting
   card visibly makes room instead of the panel just appearing. */
.meet-task-panel{flex:0 0 0;width:0;opacity:0;overflow:hidden;align-self:stretch;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  transition:flex-basis .28s cubic-bezier(.2,.8,.25,1),width .28s cubic-bezier(.2,.8,.25,1),
    opacity .18s ease,margin-left .28s cubic-bezier(.2,.8,.25,1)}
.meet-task-panel.open{flex:0 0 340px;width:340px;opacity:1;margin-left:18px}
.meet-task-panel-inner{width:340px;padding:22px 20px 24px;box-sizing:border-box}
.mtp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mtp-head h4{margin:0;font-size:var(--t-body)}
.mtp-close{background:none;border:none;font-size:var(--t-headline);color:var(--muted);cursor:pointer;padding:2px 4px;line-height:1}
.mtp-close:hover{color:var(--ink)}
.meet-task-panel .field{margin-bottom:14px}
.meet-task-panel .field label{display:block;font-size:var(--t-caption);font-weight:600;color:var(--ink-soft);margin-bottom:5px}
.meet-task-panel input,.meet-task-panel select{width:100%}
.mtp-actions{display:flex;gap:8px;margin-top:18px}
@media(max-width:900px){
  .meet-layout{flex-direction:column}
  .meet-page{max-width:none;width:100%;flex-basis:auto}
  .meet-task-panel{width:100%;flex-basis:auto;max-height:0;margin-left:0;
    transition:max-height .28s ease,opacity .18s ease,margin-top .28s ease}
  .meet-task-panel.open{flex:0 0 auto;width:100%;max-height:640px;margin-top:18px}
  .meet-task-panel-inner{width:100%}
}

/* ---- Multi-day bars ride ON TOP of the day separators (Chad, 2026-07-18) ----
   max-width:none lets the negative-margin segments actually reach across the
   cell gap so the bar is CONTINUOUS (without it the mid/end segments were
   capped at cell width and left a break — Chad, 2026-07-26). Background is an
   OPAQUE store-color tint (mixed with the card, not transparent) so the
   overlapping segments don't double-darken into a seam, and it keeps the
   store color instead of the old flat gray. */
.cal-pill.span-start,.cal-pill.span-mid,.cal-pill.span-end{
  opacity:1;box-shadow:0 1px 3px rgba(10,20,60,.22);max-width:none;
  background:color-mix(in srgb, var(--evc, #8b93b3) 22%, var(--card));
  color:color-mix(in srgb, var(--evc, #4a4f63) 70%, var(--ink));
}
.cal-pill.span-start{z-index:6}
.cal-pill.span-mid{z-index:5}
.cal-pill.span-end{z-index:5}
/* invisible spacer holding a multi-day lane open so spans stay row-aligned */
.cal-pill.lane-empty{visibility:hidden;background:none;box-shadow:none;pointer-events:none}
/* reminder (dim) spans: same treatment, slightly lighter tint */
.cal-pill.dim.span-start,.cal-pill.dim.span-mid,.cal-pill.dim.span-end{
  opacity:1;
  background:color-mix(in srgb, var(--evc, #97a0c0) 18%, var(--card));
  color:color-mix(in srgb, var(--evc, #5b6070) 68%, var(--ink));
}

/* ---- My Files: ⋯ file menu ---- */
.fcard .fc-paint{right:34px}
.fcard .fc-more{right:6px}
.fc-more{font-weight:800;color:var(--ink-soft)}
a.fcard{position:relative}
.dm-folder{border:none;font-family:inherit;font-size:inherit;background:var(--bg)}
.dm-folder:hover{background:#eef1f8}

/* ---- Private Notes: Apple Notes 3-pane ---- */
.pn-page{height:calc(100vh - 40px);display:flex}
.pn-shell{display:grid;grid-template-columns:190px 270px 1fr;gap:0;flex:1;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;min-height:520px}
.pn-folders{border-right:1px solid var(--line-soft);background:var(--bg);padding:14px 10px;overflow:auto}
.pn-fol-head{font-size:var(--t-caption2);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 8px 6px}
.pn-fol-head .hb-hint{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--line-soft);color:var(--muted);font-size:var(--t-caption2);cursor:help;margin-left:2px}
.pn-fol{display:flex;align-items:center;gap:6px;width:100%;border:none;background:none;font-family:inherit;font-size:var(--t-footnote);font-weight:600;padding:7px 10px;border-radius:8px;cursor:pointer;text-align:left;color:var(--ink-soft)}
.pn-fol:hover{background:#eceff7}
.pn-fol.active{background:var(--blue-royal);color:#fff}
.pn-count{margin-left:auto;font-size:var(--t-caption);font-weight:800;color:var(--muted)}
.pn-fol.active .pn-count{color:rgba(255,255,255,.75)}
.pn-fol-hint{font-size:var(--t-caption2);color:var(--muted);line-height:1.5;padding:14px 8px 0}
.pn-fol-head-row{display:flex;align-items:center;justify-content:space-between}
.pn-fol-add{border:none;background:none;cursor:pointer;font-size:var(--t-body);font-weight:800;line-height:1;color:var(--blue-royal);padding:0 4px;border-radius:6px}
.pn-fol-add:hover{background:#eceff7}
.pn-fol-wrap{display:flex;align-items:center}
.pn-fol-wrap .pn-fol{flex:1;min-width:0}
.pn-fol-wrap .pn-fol span:not(.pn-count){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-fol-more{opacity:0;border:none;background:none;cursor:pointer;color:var(--muted);font-weight:800;padding:4px 6px;border-radius:6px;flex:none}
.pn-fol-wrap:hover .pn-fol-more{opacity:1}
.pn-fol-more:hover{background:#eceff7;color:var(--ink)}
.pn-file-lbl{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-caption);color:var(--muted)}
.pn-file-sel{font-family:inherit;font-size:var(--t-caption);font-weight:600;color:var(--ink-soft);border:1px solid var(--line-soft);background:rgba(255,255,255,.6);border-radius:7px;padding:4px 6px;cursor:pointer;max-width:150px}
/* Meetings hub (My Space) */
.hub-series{border:1px solid var(--line-soft);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--card,#fff)}
.hub-series-head{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;font-family:inherit;cursor:pointer;padding:12px 14px;text-align:left;color:var(--ink)}
.hub-series-head:hover{background:#f3f5fb}
.hub-caret{font-size:var(--t-caption2);color:var(--muted);width:12px}
.hub-series-ic{font-size:var(--t-headline)}
.hub-series-name{font-weight:800;font-size:var(--t-body);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-series-head .pn-count{margin-left:0}
.hub-next{font-size:var(--t-caption2);font-weight:700;color:var(--blue-royal);background:#eef3ff;padding:2px 8px;border-radius:999px;white-space:nowrap}
.hub-next.dim{color:var(--muted);background:#f0f1f5}
.hub-series-body{border-top:1px solid var(--line-soft);padding:4px 6px}
.hub-meet{border-radius:8px}
.hub-meet:hover{background:#f3f5fb}
.hub-meet .pn-i-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.share-pill{cursor:pointer;border:1px solid transparent;transition:.12s;user-select:none}
.share-pill.share-off{background:#eef0f5;color:#6b7280}
.share-pill.share-off:hover{border-color:var(--blue-royal);color:var(--blue-royal)}
.share-pill.share-on{background:#e7f7ec;color:#1a8a44}
.share-pill.share-on:hover{border-color:#1a8a44}
.pn-listcol{border-right:1px solid var(--line-soft);display:flex;flex-direction:column;min-width:0}
.pn-listtop{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--line-soft)}
.pn-listtop input{flex:1;min-width:0;padding:10px 13px;border:1px solid var(--line);border-radius:11px;font-size:var(--t-footnote);font-family:inherit;background:#fff;color:var(--ink);transition:.15s}
.pn-listtop input:focus{outline:none;border-color:var(--cyan);box-shadow:var(--ring)}
.pn-list{overflow:auto;flex:1}
.pn-item{display:flex;gap:9px;align-items:flex-start;width:100%;border:none;background:none;font-family:inherit;text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.pn-item:hover{background:var(--bg)}
.pn-item.active{background:#e9edfb}
.pn-i-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 9px}
.pn-i-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.pn-i-title{font-weight:700;font-size:var(--t-footnote);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-i-sub{font-size:var(--t-caption2);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-editor{display:flex;flex-direction:column;padding:22px 26px;min-width:0}
.pn-editor .pn-edit-title{font-size:var(--t-title3);margin-bottom:2px}
.pn-edit-meta{font-size:var(--t-caption2);color:var(--muted);margin-bottom:10px}
.pn-editor .pn-edit-body{flex:1;min-height:0;font-size:var(--t-body)}
.pn-editor-foot{display:flex;align-items:center;gap:10px;margin-top:10px}
@media(max-width:1000px){.pn-shell{grid-template-columns:150px 200px 1fr}}
/* NOTE on §5's three columns: Notes was moved onto the SHARED shell on
   2026-08-03 (#65) — rail + detail, like every other module — so .pn-shell no
   longer renders. BUILD.md describes the prototype's three-column card, but
   DESIGN.md's own rule is that the frame doesn't change per module, and the
   shared shell is the frame. Rules targeting .pn-shell would be orphaned CSS,
   which BUILD.md warns to grep for; not adding them. .pn-cards already matches
   the spec's repeat(auto-fill,minmax(268px,1fr)) exactly. */

/* ---- View-as banner ---- */
.va-banner{position:sticky;top:0;z-index:200;background:#3b2e00;color:#ffe27a;font-size:var(--t-caption);font-weight:600;padding:8px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.va-banner b{color:#fff}
.va-banner button{margin-left:auto;border:1px solid rgba(255,226,122,.5);background:none;color:#ffe27a;border-radius:8px;padding:4px 12px;font-weight:700;font-size:var(--t-caption);cursor:pointer;font-family:inherit}
.va-banner button:hover{background:rgba(255,226,122,.15)}
.va-pick:hover{background:#eef1f8}
.va-pick .avatar{flex:0 0 auto}

/* ---- Calendars side panel (Apple-style checkboxes) ---- */
.cal-side{position:fixed;right:18px;top:74px;width:270px;max-height:74vh;overflow:auto;background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-md);padding:14px;z-index:85}
.cal-side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal-side-acct{font-size:var(--t-caption2);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px;display:flex;align-items:center;gap:6px}
.cal-side-row{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:8px;cursor:pointer}
.cal-side-row:hover{background:var(--bg)}
.cal-side-row input{accent-color:var(--blue-royal);width:15px;height:15px;flex:0 0 15px}
.cal-side-row .cs-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-caption)}
.cal-side-row .pn-count{margin-left:auto;flex:0 0 auto}
/* Meetings facet buttons (Type / Person) reuse the calendar side-row look */
.cal-side-row.hub-facet{width:100%;border:none;background:none;font:inherit;color:inherit;text-align:left}
.cal-side-row.active{background:var(--line-soft);font-weight:600}
#meetSideCol .seg{display:flex;gap:2px;overflow:hidden}
#meetSideCol .seg .seg-btn{flex:1;padding:5px 4px;font-size:var(--t-caption);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.cal-side .x-unlink{border:none;background:none;color:var(--muted);cursor:pointer;font-size:var(--t-caption2)}
.cal-side .x-unlink:hover{color:#e2445c}

/* ---- Multi-day bars: identical box on every segment, seamless bridge ---- */
.cal-pill.span-start,.cal-pill.span-mid,.cal-pill.span-end{height:24px;line-height:18px;box-sizing:border-box}
.cal-pill.span-start{margin-right:-16px}
.cal-pill.span-mid{margin-left:-16px;margin-right:-16px}
.cal-pill.span-end{margin-left:-16px}
/* width:100% blocks negative-margin stretching — spans use auto so the bar
   truly extends across the gap in BOTH directions */
.cal-pill.span-start,.cal-pill.span-mid,.cal-pill.span-end{width:auto;display:block}
/* THE BRIDGE IS EXACTLY cell padding + gap (Chad, 2026-08-14: "look at the
   alignment of the all-day event and how it's sticking out past the border").

   A multi-day bar reaches out of its cell to meet the next one, so the overhang
   has to equal what sits between two cells' content boxes: 6px of padding plus
   the 1px hairline = 7px. It was -24px, tuned back when the grid had 6px gaps
   AND rounded floating cells. Collapsing the grid to hairlines made that
   overshoot by 17px on each side — which is a bar hanging past the first column
   into the rail, and past the last column off the grid. My change caused this;
   the value is now derived from the two numbers it depends on rather than
   eyeballed, so it stays correct if either changes. */
.cal-pill.span-start{margin-right:-7px}
.cal-pill.span-mid{margin-left:-7px;margin-right:-7px}
.cal-pill.span-end{margin-left:-7px}

/* ---- Sidebar tree: My Space + Home + workspace tree ---- */
.nav-board{font-weight:700}
.nav-mini{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:0 0 20px}
.avatar.nav-mini{width:20px;height:20px;font-size:var(--t-caption2);flex:0 0 20px}
.nav-sub{padding-left:34px;font-size:var(--t-caption);opacity:.92}
.nav-sub svg{width:15px;height:15px}

/* ---- Home layout: My Space + Ops Hub side by side, stores 2x2 ---- */
.store-grid.two-col{grid-template-columns:repeat(2,minmax(230px,1fr))}
/* Home locations grid — design pack §1 / screenshot 01-os-home. Four across on
   desktop, two on tablet, one on phone.
   NOTE: the greeting row itself needs no new CSS — .greet-row/.greet-eyebrow/
   .greet-h1 were already written for the 8/1 handoff (see "§1 greeting row"
   further down this file) and had simply never been referenced from app.js.
   Home now uses them instead of the gradient hero, which is what put two
   stacked gradient cards on the page and made it read unlike the mockup. */
/* Collapse to 2-up at 1000px, not 1199. The mockup is a 1192px window and shows
   FOUR across; at 1199 the app dropped to two on the very width the screenshot
   was taken at, which is the single reason Home's cards never looked like it. */
.store-grid.four-col{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:26px}
@media(max-width:999px){.store-grid.four-col{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.store-grid.four-col{grid-template-columns:1fr}}
@media(max-width:760px){.store-grid.two-col{grid-template-columns:1fr}}

/* ---- Notes: cohesive with the rest of the site ---- */
.pn-page{height:auto;display:block}
/* #65 — Notes renders .mtg-shell now, so the old three-column .pn-shell card
   is gone. What's left here is the delta between the folder/list markup Notes
   already had and the rail it now lives in: the folders block loses the panel
   chrome it needed as its own column (the rail is the panel), and the note
   rows lose their dividers for the rounded hover rows the rail uses. */
.pn-rail .pn-folders{background:none;border:0;padding:0;overflow:visible;flex:0 0 auto}
.pn-rail .pn-folders.folders-hidden{display:none}
.pn-rail .pn-fol{font-size:var(--t-caption);padding:6px 9px}
/* #67 — the pack's selected row is a light action-blue tint with blue text, not
   a solid bar. It matters more here than it did in the old three-pane card:
   the notebook AND the "All Notes" row are both selected at once, so two
   full-width solid bars sat in a 300px rail and read as an error. */
.pn-rail .pn-fol.active{background:rgba(23,51,165,.10);color:var(--blue-deep)}
.pn-rail .pn-fol.active .pn-count{color:var(--blue-royal)}
.pn-rail .pn-fol.active .pn-book-name{font-weight:800}
/* The search box inherits the rail's list-top chrome; in the bar it just needs
   to stop stretching to the full row. */
.topbar .pn-listtop{padding:0;border:0;flex:0 1 300px;min-width:150px}
/* The views zone can hold more than a switcher (Notes puts its search there
   too), so it lays its children out in one row and takes the slack, while the
   actions size to their buttons. Left it wrapping and the search dropped onto
   a line of its own under the tabs. */
.topbar-views{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;flex:1 1 auto;min-width:0}
.topbar-actions{flex:0 0 auto}
.pn-rail .pn-fol-hint{padding:10px 8px 0}
.pn-rail .pn-list{border-top:1px solid var(--line-soft);padding-top:6px;margin-top:2px}
.pn-rail .pn-item{border-bottom:0;border-radius:10px;padding:8px 9px}
.pn-rail .pn-item.active{background:rgba(23,51,165,.10)}
.pn-rail .pn-item.active .pn-i-title{color:var(--blue-deep)}
/* The editor is the detail pane — same card treatment as a meeting document,
   with the note's own colour still coming through as its background. */
.mtg-doc .pn-editor{border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--shadow);
  padding:22px 26px;min-height:calc(100vh - 210px)}
/* Cards view (the 8/2 pack's Notes screen). Auto-fill rather than a fixed
   column count so it reflows with the rail, the sidebar and the window instead
   of needing its own breakpoints. */
.pn-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;align-items:start}
.pn-card{display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--shadow);
  padding:16px 18px;transition:transform var(--m-med),box-shadow var(--m-med)}
.pn-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pn-card:active{transform:scale(.99)}
.pn-card-book{display:flex;align-items:center;gap:6px;font-size:var(--t-caption2);font-weight:800;color:var(--muted);
  letter-spacing:.04em}
.pn-card-title{font-family:Poppins,Figtree,sans-serif;font-size:var(--t-body);font-weight:700;color:var(--blue-deep);
  line-height:1.3}
.pn-card-ex{font-size:var(--t-caption);color:var(--ink-soft);line-height:1.55}
.pn-card-foot{font-size:var(--t-caption2);color:var(--muted);margin-top:2px}
.pn-card-who{font-weight:700;color:var(--ink-soft)}
.pn-fol{font-family:inherit}
.pn-edit-title{font-family:Poppins,Figtree,sans-serif}

/* ---- My Files: Apple-style folder tiles (icon + name below, no card box) ---- */
.fcard.drive-folder{background:none;border:none;box-shadow:none;padding:14px 8px 10px;align-items:center;gap:8px}
.fcard.drive-folder:hover{background:rgba(23,51,165,.06);box-shadow:none;transform:none;border-radius:14px}
.fcard.drive-folder .fc-thumb{background:none;border:none;height:auto;display:flex}
.fcard.drive-folder .fc-thumb .fc-fallback{display:flex}
.fcard.drive-folder::before{content:none}
.fcard.drive-folder .folder-glyph{width:66px;height:56px}
.fcard.drive-folder .fname-wrap{justify-content:center}
.fcard.drive-folder .fc-name{text-align:center;font-size:var(--t-caption)}

/* ---- Apple Calendar look for the month grid (Chad, 2026-07-19) ---- */
.cal-card{padding:0;overflow:hidden}
.cal-grid,.grid-head{gap:0}
.grid-head{border-bottom:1px solid var(--line-soft);padding:8px 0 6px}
.grid-head span{text-align:right;padding-right:10px;font-size:var(--t-caption2)}
.cal-grid{background:#fff}
.cal-cell{background:#fff;border:none;border-right:1px solid #eceef4;border-bottom:1px solid #eceef4;border-radius:0;min-height:162px;padding:6px 6px 8px;gap:3px}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell.out{opacity:1;background:#fafbfd}
.cal-cell.out .cal-date{color:#c3c7d4}
.cal-date{align-self:flex-end;padding:2px 6px 0 0;font-size:var(--t-caption)}
.cal-cell.today{border-color:#eceef4;box-shadow:none;background:#fff}
.cal-cell.today .cal-date{background:var(--blue-royal);color:#fff;border-radius:50%;width:21px;height:21px;display:flex;align-items:center;justify-content:center;padding:0;margin:2px 2px 0 0}
/* timed events: tick + title + right-aligned time, transparent row */
.cal-pill.ep-line{background:none;color:var(--ink);display:flex;align-items:center;gap:5px;padding:1px 5px;border-radius:5px}
.cal-pill.ep-line:hover{background:rgba(20,30,60,.07);filter:none}
.cal-pill.ep-line::before{content:"";flex:0 0 3px;width:3px;height:11px;border-radius:2px;background:var(--evc,#5b8def)}
.ep-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:var(--t-caption2);text-align:left}
.ep-time{color:var(--muted);font-size:var(--t-caption2);font-weight:600;flex:0 0 auto}
.cal-pill.ep-line.dim .ep-t{color:var(--muted)}
/* store colors drive the tick */
.ep-line.b-company{--evc:#1733a5}
.ep-line.b-company{--evc:var(--s-company)}
.ep-line.b-csc-houma{--evc:var(--s-csc-houma)}
.ep-line.b-csc-thib{--evc:var(--s-csc-thib)}
.ep-line.b-ffc-houma{--evc:var(--s-ffc-houma)}
.ep-line.b-ffc-thib{--evc:var(--s-ffc-thib)}
.ep-line.b-me{--evc:#b9c22e}
/* month title on the left, controls on the right */
.cal-title-row{justify-content:flex-start}
.cal-title-row .cal-nav{margin-left:auto}
.cal-label{font-size:var(--t-title2)}
/* gap:0 grid needs smaller bridge margins for multi-day bars */
.cal-grid .cal-pill.span-start{margin-right:-14px}
.cal-grid .cal-pill.span-mid{margin-left:-14px;margin-right:-14px}
.cal-grid .cal-pill.span-end{margin-left:-14px}
.cal-grid .cal-pill.span-start,.cal-grid .cal-pill.span-mid,.cal-grid .cal-pill.span-end{height:24px;line-height:17px;font-size:var(--t-caption)}

/* ---- Calendars column beside the calendar (Apple layout) ---- */
/* Calendar page runs full-width so the picker sits next to the sidebar and the
   grid fills the screen — bigger, more readable month view (Chad, 2026-07-29). */
/* padding-left:0 — the calendar's own 14px inset put its rail 14px further
   right than the meetings rail, which is the same "sidebar moved" complaint in
   miniature. page-flush already zeroes it; this rule loads later, so it has to
   agree rather than quietly win. */
.page.page-cal{max-width:none;padding:26px 24px 40px 0}
.cal-flex{display:grid;grid-template-columns:var(--rail-w) 1fr;gap:16px;align-items:start}
.cal-side-col{background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow);padding:14px 12px;position:sticky;top:14px;max-height:80vh;overflow:auto}
.cal-side-col.hidden{display:none}
.cal-side-col.hidden + .cal-main{grid-column:1 / -1}
.cal-flex:has(.cal-side-col.hidden){grid-template-columns:1fr}
.cal-main{min-width:0}
@media(max-width:900px){.cal-flex{grid-template-columns:1fr}.cal-side-col{position:static;max-height:none}}

/* ---- Custom recurrence builder ---- */
.custom-rep{background:var(--bg);border:1px solid var(--line-soft);border-radius:12px;padding:12px;margin-top:8px}
.custom-rep.hidden{display:none}

/* drives home gets the same Apple tile treatment as folders */
.fcard.drive-enter{background:none;border:none;box-shadow:none;padding:14px 8px 10px;align-items:center;gap:8px}
.fcard.drive-enter:hover{background:rgba(23,51,165,.06);box-shadow:none;transform:none;border-radius:14px}
.fcard.drive-enter .fc-icon .folder-glyph{width:66px;height:56px}
.fcard.drive-enter .fc-icon{font-size:var(--t-display);line-height:1}
.fcard.drive-enter .fc-name{text-align:center;font-size:var(--t-caption)}
.fcard.drive-enter .fc-paint{right:34px}

/* ================= Mobile & tablet (Chad, 2026-07-19) ================= */
.mobile-top{display:none}
.rail-backdrop{display:none}
.photo-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.photo-cell{position:relative;display:inline-block;line-height:0}
.photo-cell:hover .photo-del{opacity:1}
.photo-del{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:#e2445c;color:#fff;font-size:var(--t-caption2);line-height:1;cursor:pointer;opacity:0;transition:opacity .12s;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(10,20,60,.3);z-index:2}
.photo-del:hover{background:#c8102e}
.photo-thumb{padding:0;border:none;background:none;cursor:zoom-in;display:block;line-height:0;position:relative}
.photo-thumb img{width:74px;height:74px;object-fit:cover;border-radius:10px;border:1px solid var(--line-soft);transition:transform .12s,box-shadow .12s}
.photo-thumb:hover img{transform:scale(1.03);box-shadow:0 3px 10px rgba(10,20,60,.22)}
.photo-add{width:74px;height:74px;border:2px dashed #c7cbdb;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--t-title3);cursor:pointer;color:var(--muted);text-align:center}
.photo-add .photo-add-t{font-size:var(--t-caption2);font-weight:700;line-height:1}
.photo-add:hover{border-color:var(--blue-mid);color:var(--blue-mid)}
/* Files & Drive links on a task/ticket (2026-08-07). A row per file rather
   than a tile: a document is identified by its NAME, not by a thumbnail. */
.btn-sm{padding:7px 12px;font-size:var(--t-caption);border-radius:10px}
.file-list{display:flex;flex-direction:column;gap:4px}
.file-row{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line-soft);border-radius:10px;background:#fff}
.file-row:hover{border-color:var(--cyan)}
.file-row:hover .file-del{opacity:1}
.file-ic{font-size:var(--t-headline);line-height:1;flex:none}
/* the NAME gets the full row width and the metadata sits under it — a real
   filename does not fit beside "added by Chad Ducote" in a form column */
.file-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.file-nm{font-weight:700;font-size:var(--t-footnote);color:var(--ink-soft);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.file-nm:hover{color:var(--blue-royal);text-decoration:underline}
.file-meta{font-size:var(--t-caption2);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-del{flex:none;width:20px;height:20px;border-radius:50%;border:none;background:#f4f5fa;color:#c8102e;font-size:var(--t-caption2);line-height:1;cursor:pointer;opacity:0;transition:opacity .12s;display:flex;align-items:center;justify-content:center}
.file-del:hover{background:#fdf2f3}
.file-empty{font-size:var(--t-caption);color:var(--muted);padding:2px 0}
.file-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.file-acts .btn{cursor:pointer}
/* in-app photo viewer */
/* The image viewer (2026-08-07). Zoom, pan, pinch and ‹ › through a set —
   the old one only ever fit the image to the screen, so a small photo opened
   small and there was no way to look closer. */
/* Pinned to the VIEWPORT explicitly, not `inset:0`. The app's own page is
   wider than the screen on a phone (the bottom tab bar overflows by ~46px),
   and inset:0 resolved against that width — so the toolbar's close button sat
   off the right edge with no way to shut the viewer. dvh follows the mobile
   URL bar; vh is the fallback for anything that lacks it. */
.lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:9999;background:rgba(6,10,32,.90);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);overscroll-behavior:contain}
.lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:70px 24px 34px;cursor:zoom-in;touch-action:none;box-sizing:border-box}
.lb-stage.zoomed{cursor:grab}
.lb-stage.zoomed img:active{cursor:grabbing}
/* No transition on `transform`: wheel-zoom, pinch and drag-pan all update it
   continuously, so easing every frame both lags the pan and left the applied
   transform a step behind the one just set. Zoom should track the gesture. */
/* Sized against the stage's own content box, not vw/vh: the stage carries
   padding for the toolbar, so viewport units overflowed it and pushed the
   image off-screen on a phone. */
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);transform-origin:center center;will-change:transform;-webkit-user-drag:none;user-select:none}
.lb-bar{position:absolute;top:12px;right:12px;left:12px;display:flex;align-items:center;justify-content:flex-end;gap:6px;z-index:2;flex-wrap:wrap}
.lb-b{min-width:38px;height:38px;padding:0 10px;border-radius:10px;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:var(--t-headline);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .12s}
.lb-b:hover{background:rgba(255,255,255,.28)}
.lb-b.lb-fit{font-size:var(--t-caption)}
.lb-x{margin-left:6px;background:rgba(255,255,255,.20)}
.lb-pct{color:#fff;font-size:var(--t-caption);font-weight:700;min-width:52px;text-align:center;opacity:.85;font-variant-numeric:tabular-nums}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:var(--t-title1);line-height:1;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}
.lb-nav:hover{background:rgba(255,255,255,.28)}
.lb-prev{left:18px} .lb-next{right:18px}
.lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;opacity:.8;font-size:var(--t-caption);font-weight:700;z-index:2}
/* every content image now advertises that it opens */
.photo-thumb img,.eq-photo,.eq-thumb{cursor:zoom-in}
@media(max-width:767px){
  /* six controls do not fit 375px at desktop size — shrink them and drop the
     percentage readout, which is the one thing the pinch gesture already tells
     you. Losing the ✕ off the edge is not an option. */
  .lb-stage{padding:60px 6px 30px}
  .lb-bar{gap:4px;top:10px;right:8px;left:8px;justify-content:space-between}
  .lb-b{min-width:34px;height:34px;padding:0 7px;font-size:var(--t-body)}
  .lb-b.lb-fit{font-size:var(--t-caption);padding:0 6px}
  .lb-pct{display:none}
  .lb-nav{width:38px;height:38px;font-size:var(--t-title2)}
  .lb-prev{left:4px} .lb-next{right:4px}
  .lb-count{bottom:8px}
}

@media(max-width:767px){
  .mobile-top{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:120;background:var(--blue-royal);color:#fff;padding:10px 14px}
  .mobile-top #mobileNav{border:none;background:none;color:#fff;font-size:var(--t-title2);padding:2px 6px}
  .mobile-top .nav-hist{gap:4px}
  .mobile-top .nh-btn{padding:5px 9px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff}
  .mt-brand{font-family:Poppins,Figtree,sans-serif;font-weight:800;flex:1}
  .mt-brand em{color:var(--chart);font-style:normal}
  .mobile-top .avatar{width:30px;height:30px;font-size:var(--t-caption2)}
  .shell{display:block}
  .rail{position:fixed;left:0;top:0;bottom:0;width:280px;max-width:84vw;z-index:200;transform:translateX(-105%);transition:transform .22s ease;overflow:auto}
  .rail.open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.35)}
  .rail-backdrop.show{display:block;position:fixed;inset:0;background:rgba(10,15,40,.45);z-index:150}
  .main{padding:0}
  .page{padding:14px 12px 40px}
  .page-head{flex-wrap:wrap;gap:10px}
  .page-head h1{font-size:var(--t-title2)}
  .head-actions{flex-wrap:wrap}
  .filter-row{flex-wrap:wrap;row-gap:8px}
  .store-grid,.store-grid.two-col{grid-template-columns:1fr}
  /* modals go full screen */
  .overlay{padding:0;align-items:stretch}
  .modal,.modal.wide{width:100vw;max-width:100vw;min-height:100vh;border-radius:0;max-height:none;overflow:auto;padding:18px 14px 90px}
  .field-row{flex-direction:column;gap:0}
  /* calendar squeeze */
  .cal-cell{min-height:64px;padding:2px 2px 4px}
  .cal-date{font-size:var(--t-caption2)}
  .ep-time{display:none}
  .ep-t{font-size:var(--t-caption2)}
  .cal-pill{font-size:var(--t-caption2);padding:2px 4px}
  .cal-label{font-size:var(--t-headline)}
  .cal-title-row{flex-wrap:wrap;row-gap:8px}
  .cal-jump{max-width:150px}
  .cal-flex{grid-template-columns:1fr}
  /* Phone: the rail stacks with the content, so it must size to its own list —
     a fixed viewport height would clip the calendars you came here to untick. */
  .cal-side-col,.page-flush .cal-side-col{position:static;max-height:none;height:auto;overflow:visible}
  .page-flush:has(> .cal-flex) .cal-main{max-height:none;overflow:visible}
  /* meetings page + notes + support */
  .meet-page{padding:16px 12px}
  .meet-page .notes-area{min-height:30vh}
  .parse-row{flex-wrap:wrap}
  .pn-shell{grid-template-columns:1fr;height:auto}
  .pn-shell .pn-folders{border-right:none;border-bottom:1px solid var(--line-soft)}
  .pn-listcol{border-right:none;border-bottom:1px solid var(--line-soft);max-height:40vh}
  .pn-editor{min-height:50vh}
  .rt-grid{grid-template-columns:1fr}
  .jsm-hero h2{font-size:var(--t-title3)}
  .fgrid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .kanban{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px}
  .kanban>*{min-width:80vw;scroll-snap-align:start}
  table{display:block;overflow-x:auto}
  .va-banner{font-size:var(--t-caption2);flex-wrap:wrap}
}
@media(min-width:861px){
  .mobile-top{display:none!important}
}

/* week view on mobile keeps times next to appointments */
@media(max-width:767px){
  .week-grid .ep-time{display:inline}
  .week-grid .ep-t{font-size:var(--t-caption2)}
  .week-grid .cal-pill{font-size:var(--t-caption2);padding:4px 6px}
  .cal-title-row{row-gap:8px}
}
@media(max-width:767px){
  .cal-title-row{justify-content:flex-end}
  .cal-title-row .cal-label{width:100%}
}

/* tappable date label + hidden native picker */
.cal-label-btn{border:none;background:none;font-family:Poppins,Figtree,sans-serif;font-weight:800;font-size:var(--t-title2);letter-spacing:-.4px;cursor:pointer;padding:0;text-align:left;color:var(--ink)}
.cal-jump-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:767px){.cal-label-btn{font-size:var(--t-title3);width:auto}}
/* phones: keep the month/week grid usable — scroll it sideways instead of
   crushing 7 columns into ~50px each */
@media(max-width:640px){
  .cal-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cal-grid,.cal-grid-head{min-width:600px}
  .cal-cell{min-height:78px}
}

/* ---- Time-grid week (Apple style) ---- */
.tg-strip{display:flex;gap:6px;margin:2px 0 10px;overflow-x:auto}
.tg-pill{flex:1;min-width:38px;border:none;background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:5px 2px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;font-family:inherit}
.tg-pill span{font-size:var(--t-caption2);font-weight:800;color:var(--muted);text-transform:uppercase}
.tg-pill b{font-size:var(--t-body)}
.tg-pill.today{background:var(--blue-royal);border-color:var(--blue-royal)}
.tg-pill.today span,.tg-pill.today b{color:#fff}
.tg-wrap{display:grid;grid-template-columns:50px 1fr;background:#fff;position:relative}
/* Drag the all-day divider (Chad, 2026-08-14: "need to be able to pull the
   all-day down so you can un-condense it... we can do that with Apple
   Calendars on the Mac"). A capped, scrolling row keeps the grid aligned, but
   it shouldn't be the only option when a day genuinely has eight things on it.
   The handle sits ON the boundary, spans the full width, and the grab bar only
   appears on hover so it isn't a permanent line across the calendar. */
.tg-adresize{position:absolute;left:0;right:0;height:9px;margin-top:-4px;cursor:row-resize;
  z-index:6;display:flex;align-items:center;justify-content:center;touch-action:none}
.tg-adresize::after{content:"";width:44px;height:3px;border-radius:2px;background:var(--blue-mid);
  opacity:0;transition:opacity var(--m-fast,.14s) ease}
.tg-adresize:hover::after,.tg-adresize.dragging::after{opacity:.85}
body.tg-adrz,body.tg-adrz *{cursor:row-resize !important;user-select:none !important}
.tg-axiscol{border-right:1px solid #eceef4}
.tg-hr{font-size:var(--t-caption2);color:var(--muted);font-weight:700;text-align:right;padding-right:6px;transform:translateY(-6px);border-top:1px solid transparent}
.tg-scroll{overflow-x:auto}
.tg-days{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr))}
.tg-day{border-right:1px solid #eceef4;min-width:0}
.tg-day:last-child{border-right:none}
/* The column heading is now the ONLY place the day and date are printed in
   week view (the duplicate strip above it is gone), so it carries the weight
   the strip used to: the weekday stays small and quiet, the DATE gets the size.
   Height is shared with the axis column's empty heading via the same class, so
   growing it can't reintroduce a row-alignment gap. */
.tg-dhead{height:46px;display:flex;align-items:baseline;justify-content:center;gap:6px;font-size:var(--t-caption2);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid #eceef4;position:sticky;top:0;background:#fff;z-index:3;padding-top:9px;box-sizing:border-box}
.tg-dhead b{font-size:var(--t-title3);font-weight:700;letter-spacing:-.01em;color:var(--ink);text-transform:none}
/* Today reads as today without a second row telling you so — the number gets
   the same filled dot the month grid uses. */
.tg-day.today .tg-dhead b{background:var(--blue-royal);color:#fff;border-radius:50%;
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-body);align-self:center}
.tg-day.today .tg-dhead{align-items:center;padding-top:0}
.tg-day.today .tg-dhead{color:var(--blue-royal)}
.tg-day.today .tg-dhead b{background:var(--blue-royal);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
/* The height is set INLINE per render (one shared value for the axis and every
   day column) — see the all-day note in renderMeetCalendar. box-sizing and
   flex:none make that height exact and non-negotiable, and overflow-y lets a
   day with more all-day items than the cap scroll inside its own row rather
   than growing and shoving its hour grid out of line with the axis. */
/* ONE variable drives the all-day row for the axis and every day column, so
   they cannot disagree — and dragging the divider is then just moving that one
   number, with all eight columns following by construction rather than by
   eight synchronised writes. */
.tg-allday{height:var(--tg-adh,26px);box-sizing:border-box;flex:none;overflow-y:auto;border-bottom:1px solid #eceef4;padding:2px 3px;display:flex;flex-direction:column;gap:2px}
.tg-allday-empty{min-height:0;height:0;padding:0;border-bottom:none;overflow:hidden}
.tg-body{position:relative;background:repeating-linear-gradient(to bottom, #f1f3f9 0, #f1f3f9 1px, transparent 1px, transparent 48px)}
.tg-ev{position:absolute;border:none;border-left:3px solid var(--blue-mid);border-radius:7px;background:rgba(55,189,245,.14);text-align:left;padding:3px 6px;font-family:inherit;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;gap:1px;z-index:2}
.tg-ev b{font-size:var(--t-caption2);font-weight:700;line-height:1.15}
.tg-ev span{font-size:var(--t-caption2);color:var(--muted);font-weight:600}
.tg-ev.b-company,.tg-ev.b-csc-houma,.tg-ev.b-csc-thib,.tg-ev.b-ffc-houma,.tg-ev.b-ffc-thib{
  border-left-color:var(--evc); background:color-mix(in srgb, var(--evc) 13%, transparent)}
.tg-ev.b-company{--evc:var(--s-company)}
.tg-ev.b-csc-houma{--evc:var(--s-csc-houma)}
.tg-ev.b-csc-thib{--evc:var(--s-csc-thib)}
.tg-ev.b-ffc-houma{--evc:var(--s-ffc-houma)}
.tg-ev.b-ffc-thib{--evc:var(--s-ffc-thib)}
/* b-company deliberately NOT re-stated here. It used to repeat the colour as a
   literal rgba() AFTER the --evc rule above, which silently won on source
   order — so "one source of truth in :root" was true for four stores and a lie
   for company. It now falls through to the same color-mix as everything else. */
.tg-ev.b-me{border-left-color:#b9c22e;background:rgba(214,222,47,.18)}
/* A timed event on one of your own Google calendars. Doubled class for the
   same reason as .cal-pill.pc-tint — these carry board "me", and .tg-ev.b-me
   right above sets its own background, so a single class would lose on source
   order and the block would stay dark. */
.tg-ev.pc-tint.pc-tint{
  background:color-mix(in srgb, var(--evc) 15%, #fff);
  border-left:3px solid var(--evc);
  color:color-mix(in srgb, var(--evc) 76%, #123)}
.tg-ev.pc-tint.pc-tint span{color:color-mix(in srgb, var(--evc) 55%, #4a5568)}
.tg-ev.pc-tint.pc-tint:hover{background:color-mix(in srgb, var(--evc) 24%, #fff)}
.tg-now{position:absolute;left:0;right:0;height:2px;background:#e2445c;z-index:4}
.tg-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#e2445c}
@media(max-width:767px){
  .tg-days{grid-template-columns:repeat(7,46vw)}
  .tg-scroll{scroll-snap-type:x mandatory}
  .tg-day{scroll-snap-align:start}
  .week-grid{display:none}
}

/* ---- AI Sidekick ---- */
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:130;width:56px;height:56px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--blue-royal),var(--cyan));color:#fff;font-size:var(--t-title2);cursor:pointer;box-shadow:0 6px 20px rgba(23,51,165,.4)}
.ai-fab:hover{transform:scale(1.06)}
.ai-panel{position:fixed;right:22px;bottom:88px;z-index:130;width:360px;max-width:92vw;height:520px;max-height:76vh;background:#fff;border:1px solid var(--line-soft);border-radius:18px;box-shadow:0 12px 40px rgba(10,20,60,.25);display:flex;flex-direction:column;overflow:hidden}
.ai-panel.hidden{display:none}
.ai-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line-soft);background:var(--bg)}
.ai-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ai-msg{max-width:85%;padding:9px 12px;border-radius:14px;font-size:var(--t-footnote);line-height:1.5}
.ai-msg.bot{background:var(--bg);align-self:flex-start;border-bottom-left-radius:4px}
.ai-msg.me{background:var(--blue-royal);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.ai-msg.typing{opacity:.6}
.ai-msg i{color:var(--blue-mid);font-style:normal;font-weight:600}
.ai-did{margin-top:6px;font-size:var(--t-caption);color:#00915a;font-weight:600}
.ai-compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line-soft)}
.ai-compose input{flex:1}
.ai-compose .btn{padding:9px 15px}
@media(max-width:767px){.ai-panel{right:8px;left:8px;width:auto;bottom:80px}.ai-fab{right:16px;bottom:16px}}
.ai-head-actions{display:flex;align-items:center;gap:2px}
/* history/folders view — swaps into the same flexed slot as .ai-log */
.ai-hist{flex:1;overflow:auto;padding:8px}
.ai-hist-empty{padding:20px 10px;text-align:center;font-size:var(--t-caption);color:var(--muted)}
.ai-hist-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 8px;font-size:var(--t-caption2);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ai-hist-flabel{font-size:var(--t-caption2);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 8px 4px}
.ai-hrow{display:flex;align-items:center;gap:4px;width:100%;padding:8px 8px;border-radius:9px;cursor:pointer}
.ai-hrow:hover{background:var(--bg)}
.ai-hrow.active{background:#eaf0ff}
.ai-hrow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ai-hrow-t{font-size:var(--t-footnote);font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-hrow-sub{font-size:var(--t-caption2);color:var(--muted)}
.ai-hrow-more{opacity:0;border:none;background:none;cursor:pointer;color:var(--muted);font-weight:800;padding:4px 6px;border-radius:6px;flex:none}
.ai-hrow:hover .ai-hrow-more{opacity:1}
.ai-hrow-more:hover{background:#dde2f0;color:var(--ink)}

/* ---- Knowledge (KB mirror) ---- */
/* ONE child-rail width everywhere (--rail-w), same as .mtg-shell and .cal-flex.
   The KB tree was 250px, so moving between Knowledge Base and Meetings/Notes
   resized the rail — the same jump the rail-width comment in :root was written
   to stop, just in a module that landed later. */
.kb-shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:18px;align-items:start}
.kb-tree{background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow);padding:8px;max-height:76vh;overflow:auto;position:sticky;top:14px}
.kb-node-wrap{margin:1px 0}
.kb-node{display:flex;align-items:center;gap:3px;width:100%;border:none;background:none;text-align:left;font-family:inherit;font-size:var(--t-footnote);font-weight:600;color:var(--ink-soft);padding:6px 8px;border-radius:8px;cursor:pointer}
.kb-node:hover{background:var(--bg)}
.kb-node.active{background:var(--blue-royal);color:#fff}
.kb-node-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-caret{flex:0 0 16px;text-align:center;color:var(--muted);font-size:var(--t-caption2);line-height:16px;transition:transform .15s;border-radius:4px}
.kb-caret:hover{background:rgba(10,20,60,.08);color:var(--ink)}
.kb-caret.open{transform:rotate(90deg)}
.kb-dot{flex:0 0 16px;text-align:center;color:var(--muted)}
.kb-node.active .kb-caret,.kb-node.active .kb-dot{color:rgba(255,255,255,.75)}
.kb-sub{display:none;margin-left:13px;border-left:1px solid var(--line-soft);padding-left:3px}
.kb-sub.open{display:block}
.kb-doc{background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow);padding:26px 30px;min-height:300px;max-height:80vh;overflow:auto}
.kb-doc-head{border-bottom:1px solid var(--line-soft);padding-bottom:12px;margin-bottom:16px}
.kb-doc-head h2{margin:0;font-size:var(--t-title2)}
.kb-upd{font-size:var(--t-caption);color:var(--muted)}
.kb-body{font-size:var(--t-body);line-height:1.7;color:var(--ink)}
.kb-body h1,.kb-body h2,.kb-body h3,.kb-body h4{color:var(--ink);font-family:Poppins,Figtree,sans-serif;letter-spacing:-.2px}
.kb-body h1{font-size:var(--t-title2);margin:20px 0 10px}
.kb-body h2{font-size:var(--t-title3);margin:28px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.kb-body h3{font-size:var(--t-headline);margin:22px 0 6px}
.kb-body h4{font-size:var(--t-body);margin:16px 0 6px;color:var(--ink-soft)}
.kb-body p{margin:10px 0}
.kb-body ul,.kb-body ol{margin:10px 0;padding-left:22px}
.kb-body li{margin:4px 0}
.kb-body hr{border:none;border-top:1px solid var(--line-soft);margin:22px 0}
.kb-body table{border-collapse:separate;border-spacing:0;width:fit-content;max-width:100%;margin:16px 0;font-size:var(--t-footnote);display:block;overflow-x:auto;border:1px solid var(--line-soft);border-radius:12px}
.kb-body th,.kb-body td{border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);padding:8px 12px;text-align:left;vertical-align:top}
.kb-body th:last-child,.kb-body td:last-child{border-right:none}
.kb-body tbody tr:last-child td{border-bottom:none}
.kb-body thead th{background:linear-gradient(180deg,#f8fafc,#f1f5f9);font-weight:700;color:var(--ink);white-space:nowrap}
.kb-body img{max-width:100%;height:auto;border-radius:8px}
.kb-body a{color:#0052cc;font-weight:500}
.kb-body a.elink::after{content:"↗";font-size:var(--t-caption2);margin-left:2px;opacity:.6}
.kb-body blockquote{border-left:3px solid var(--blue-mid);background:var(--bg);margin:14px 0;padding:10px 16px;border-radius:0 10px 10px 0;color:var(--ink-soft)}
.kb-body .callout{margin:16px 0;padding:12px 16px;border-radius:12px;border:1px solid var(--line-soft);font-size:var(--t-body)}
.kb-body .callout-warn{background:#fff7ed;border-color:#fed7aa}
.kb-body .callout-info{background:#eff6ff;border-color:#bfdbfe}
/* inline custom emoji (CSC/Freddy's icons etc.) render text-sized, NOT full-width */
.kb-body .kb-emoji,.kb-html .kb-emoji{height:1.25em!important;width:auto!important;max-width:none!important;vertical-align:-0.22em;display:inline-block;border-radius:3px}
@media(max-width:767px){.kb-shell{grid-template-columns:1fr}.kb-tree{position:static;max-height:40vh}}

/* Knowledge: desktop hides the back button; mobile = master-detail */
.kb-back{display:none;border:none;background:none;color:var(--blue-mid);font-weight:700;font-family:inherit;font-size:var(--t-footnote);cursor:pointer;padding:0 0 10px}
.kb-body{overflow-x:auto}
@media(max-width:767px){
  .kb-shell.has-open .kb-tree{display:none}
  .kb-shell:not(.has-open) .kb-doc{display:none}
  .kb-shell{grid-template-columns:1fr}
  .kb-tree{max-height:none;position:static}
  .kb-back{display:block}
  .kb-doc{max-height:none}
}

/* ---- Knowledge editing ---- */
.kb-title-edit{font-size:var(--t-title2);font-weight:800;font-family:Poppins,Figtree,sans-serif;border:none;border-bottom:2px solid var(--blue-mid);width:100%;outline:none;padding:2px 0}
.kb-edit-bar{display:flex;gap:8px}
.kb-body.editing{outline:2px dashed var(--blue-mid);outline-offset:6px;border-radius:6px;min-height:200px;padding:6px}
.kb-doc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.kb-doc-head>div{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* ---- Drive drag & drop ---- */
[data-drag]{cursor:grab}
[data-drag]:active{cursor:grabbing}
.page.drop-active{outline:3px dashed var(--blue-mid);outline-offset:-8px;border-radius:16px;background:rgba(55,189,245,.05)}
.page.drop-active::after{content:"⬇ Drop to upload to this folder";position:fixed;left:50%;top:80px;transform:translateX(-50%);background:var(--blue-royal);color:#fff;padding:8px 18px;border-radius:99px;font-weight:700;font-size:var(--t-footnote);z-index:140;pointer-events:none}

/* file cards: the CARD is the drag handle; inner bits don't grab the drag */
[data-drag] img,[data-drag] .fc-thumb,[data-drag] .fc-name,[data-drag] .fl-icon,[data-drag] .fname-wrap{-webkit-user-drag:none;user-select:none}
[data-drag]{-webkit-user-drag:element}

/* ---- Google-Drive-style Files ---- */
.fgrid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.fcard{border:1px solid var(--line-soft);border-radius:12px;transition:box-shadow var(--m-fast) ease,border-color var(--m-fast) ease}
.fcard:hover{border-color:var(--blue-mid);box-shadow:0 2px 10px rgba(23,51,165,.10)}
.gd-list{padding:0;overflow:hidden}
.gd-head{display:grid;grid-template-columns:1fr 150px 40px;gap:10px;padding:9px 16px;font-size:var(--t-caption2);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-soft);background:var(--bg)}
.gd-row{display:grid!important;grid-template-columns:1fr 150px 40px;gap:10px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--line-soft)}
.gd-row:last-child{border-bottom:none}
.gd-row:hover{background:var(--bg)}
.gd-name{display:flex;align-items:center;gap:10px;min-width:0}
.gd-name .l-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:var(--t-footnote)}
.gd-name .folder-glyph{width:22px;height:19px}
.gd-mod{font-size:var(--t-caption);color:var(--muted)}
.gd-act{display:flex;justify-content:flex-end;gap:2px}
.gd-row .fc-paint{position:static;display:flex;opacity:0}
.gd-row:hover .fc-paint{opacity:1}
.menu-sep{height:1px;background:var(--line-soft);margin:4px 0}
.share-menu .view-item.danger{color:#e2445c}
.file-menu{min-width:190px}
@media(max-width:767px){.gd-head .gd-mod,.gd-row .gd-mod{display:none}.gd-head,.gd-row{grid-template-columns:1fr 40px}}

/* ---- Daily Brief ---- */
.brief-card{background:linear-gradient(135deg,#fff,#f4f8ff);border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:26px}
.brief-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brief-title{font-family:Poppins,Figtree,sans-serif;font-weight:800;font-size:var(--t-headline)}
.brief-narrative{font-size:var(--t-body);line-height:1.6;color:var(--ink);margin:8px 0 12px}
.brief-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.brief-stat{background:#fff;border:1px solid var(--line-soft);border-radius:99px;padding:5px 12px;font-size:var(--t-caption);color:var(--ink-soft)}
.brief-stat b{color:var(--ink);font-size:var(--t-body)}
.brief-stat.hot b{color:#e2445c}
.brief-stat.zero{opacity:.5}
.brief-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.brief-col h4{font-size:var(--t-caption2);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.brief-row{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-caption);padding:5px 0;border-bottom:1px solid var(--line-soft)}
/* min-width:0 is what makes the ellipsis actually fire. Without it a flex item
   refuses to shrink below its min-content, and `white-space:nowrap` makes that
   the FULL untruncated title — so the row stayed ~474px wide on a 375px phone
   and the overflow had nowhere to go (no ancestor scrolls). */
.brief-row span{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brief-row em{color:var(--muted);font-style:normal;flex-shrink:0;font-size:var(--t-caption2)}
.brief-more{font-size:var(--t-caption2);color:var(--blue-mid);font-weight:700;padding-top:6px}
/* minmax(0,1fr), not 1fr: a bare 1fr track is floored at its MIN-CONTENT, so
   one long task title widened the whole column past the phone. */
@media(max-width:767px){.brief-cols{grid-template-columns:minmax(0,1fr)}}
/* brief: per-store health strip + at-risk goal dots */
.brief-health{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 14px}
.bh-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-soft);border-radius:99px;padding:5px 12px;font-size:var(--t-caption);font-weight:600;color:var(--ink);cursor:pointer}
.bh-pill em{font-style:normal;font-weight:500;color:var(--muted);font-size:var(--t-caption2)}
.bh-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted)}
.bh-green .bh-dot{background:var(--good,#00c875)}
.bh-amber .bh-dot{background:#fdab3d}
.bh-red .bh-dot{background:#e2445c}
.bh-red{border-color:#f3b6bf}
.gdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.gdot.g-red{background:#e2445c}.gdot.g-amber{background:#fdab3d}

/* ---- Overdue visibility (#5) ---- */
.task-card.od{border-left:3px solid #e2445c}
.lrow.od{box-shadow:inset 3px 0 0 #e2445c}
.sc-stat.od{color:#e2445c}
.sc-stat.od b{color:#e2445c}
.chip.overdue{background:rgba(226,68,94,.12);color:#c0122c;font-weight:700}

/* ---- Subtask progress bar (#7) ---- */
.sub-prog{position:relative;height:16px;background:var(--line-soft);border-radius:8px;margin:6px 0 4px;overflow:hidden}
.sub-prog-bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#00c875,#7ed957);border-radius:8px;transition:width var(--m-slow) ease}
.sub-prog-lbl{position:absolute;left:8px;top:0;line-height:16px;font-size:var(--t-caption2);font-weight:800;color:#0b3d24}

/* ---- Templates ---- */
.tmpl-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;margin:8px 0}
.tmpl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--bg);border:1px solid var(--line-soft);border-radius:12px}
.tmpl-info b{font-size:var(--t-body)}
.tmpl-desc{font-size:var(--t-caption);color:var(--muted);margin-top:2px}
.tmpl-apply{display:flex;gap:8px;flex-shrink:0;align-items:center}
.tmpl-date{max-width:150px}
.tmpl-save{border-top:1px solid var(--line-soft);padding-top:14px;margin-top:6px}
@media(max-width:767px){.tmpl-row{flex-direction:column;align-items:stretch}.tmpl-date{max-width:none}}

/* ---- Rhythm (Phase 2) ---- */
.rhy-card{padding:12px 14px;background:var(--bg);border:1px solid var(--line-soft);border-radius:12px;margin:8px 0}
.rhy-card.is-on{border-color:var(--good,#00c875);background:color-mix(in srgb,var(--good,#00c875) 6%,var(--bg))}
.rhy-top{display:flex;align-items:center;gap:10px}
.rhy-ico{font-size:var(--t-title3);flex-shrink:0}
.rhy-name{flex:1;min-width:0}.rhy-name b{font-size:var(--t-body)}
.rhy-meta{font-size:var(--t-caption);color:var(--muted);margin-top:1px}
.rhy-desc{font-size:var(--t-caption);color:var(--ink-soft);margin-top:6px}
.rhy-who{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.rhy-top .btn{flex-shrink:0}
.rhy-prev{margin:6px 0 0;padding-left:18px;font-size:var(--t-footnote);line-height:1.7}
.rhy-prev-mtg ul,.rhy-prev-body ul{margin:6px 0 0;padding-left:18px;font-size:var(--t-footnote);line-height:1.7}
.rhy-prev-head{font-size:var(--t-footnote);color:var(--ink-soft);margin:2px 0 10px}
.rhy-prev-body{font-size:var(--t-footnote)}
.rhy-start{display:block;margin-top:12px;font-size:var(--t-footnote);color:var(--ink-soft)}
.rhy-start input{margin-left:8px}
@media(max-width:767px){.rhy-top{flex-wrap:wrap}.rhy-top .btn{width:100%}}
.rhy-build{display:flex;gap:8px;margin-top:6px}
.rhy-build input{flex:1;border:1px solid var(--line-soft);border-radius:9px;padding:9px 12px;font-size:var(--t-footnote)}
.rhy-build .btn{flex-shrink:0}
@media(max-width:620px){.rhy-build{flex-direction:column}}

/* ---- Goals (Phase 3) ---- */
#goalList{display:flex;flex-direction:column;gap:10px;margin:10px 0;max-height:52vh;overflow:auto}
.goal-card{padding:12px 14px;background:var(--bg);border:1px solid var(--line-soft);border-radius:12px;border-left:4px solid var(--muted)}
.goal-card.state-green{border-left-color:var(--good,#00c875)}
.goal-card.state-amber{border-left-color:#fdab3d}
.goal-card.state-red{border-left-color:#e2445c}
.goal-head{display:flex;align-items:flex-start;gap:12px}
.goal-title{flex:1;min-width:0}.goal-title b{font-size:var(--t-body)}
.goal-meta{font-size:var(--t-caption);color:var(--muted);margin-top:2px}
.goal-val{font-size:var(--t-footnote);text-align:right;white-space:nowrap;flex-shrink:0}
.goal-done{color:var(--good,#00c875);font-weight:600}
.goal-bullet{position:relative;height:18px;margin:10px 0 6px}
.gb-track{position:absolute;inset:0;border-radius:5px;background:var(--line-soft)}
.gb-fill{position:absolute;top:5px;bottom:5px;left:0;border-radius:3px;transition:width .35s ease}
.gb-tick{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:1px;background:var(--ink);opacity:.55}
.goal-actions{display:flex;align-items:center;gap:6px}
.goal-actions .btn{padding:3px 9px;font-size:var(--t-caption)}
.fld{display:block;font-size:var(--t-caption);color:var(--ink-soft);margin-top:10px}
/* .fld controls now share the same rounded-pill chrome as .field so every
   modal/builder across the OS looks and feels identical. */
.fld input,.fld select,.fld textarea{display:block;width:100%;margin-top:4px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;font-size:var(--t-footnote);font-family:inherit;background-color:#fff;transition:.15s;color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--cyan);box-shadow:var(--ring)}
.fld textarea{resize:vertical;min-height:70px;font-family:inherit}
/* Widget-builder add row (Scorecards): give the bare selects/number input the
   same chrome as the rest of the OS so nothing looks "elementary". */
.dform-row select,.dform-row input{padding:10px 13px;border:1px solid var(--line);border-radius:11px;font-size:var(--t-footnote);font-family:inherit;background-color:#fff;color:var(--ink);transition:.15s}
.dform-row select:focus,.dform-row input:focus{outline:none;border-color:var(--cyan);box-shadow:var(--ring)}
.dform-row select:hover{border-color:var(--cyan)}
/* Special Event plan block (inside a special event) */
.se-plan{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:4px 0 14px;background:linear-gradient(180deg,#fbfcff,#f6f9ff)}
.se-plan-head{font-weight:800;font-size:var(--t-body);margin-bottom:8px}
.se-owners{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.se-owners select{flex:0 0 auto;width:auto;min-width:130px}
.se-chip{display:inline-flex;align-items:center;gap:6px;background:#eaf1ff;border:1px solid #cfdcfb;color:#2f4a8f;border-radius:999px;padding:4px 10px;font-size:var(--t-caption);font-weight:600}
.se-chip button{border:none;background:none;color:#2f4a8f;cursor:pointer;font-size:var(--t-caption);padding:0;line-height:1}
.se-kb{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.se-checks{display:flex;flex-direction:column;gap:6px}
.se-check{display:flex;align-items:center;gap:8px}
.se-check input[type=text]{flex:1}
/* Promote a checklist step to a real task, and the marker once it is one
   (2026-08-02). Sits between the step text and the remove button. */
.se-check .se-check-task{border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;
  font-size:var(--t-caption);padding:3px 8px;border-radius:999px;white-space:nowrap}
.se-check .se-check-task:hover{border-color:var(--accent);color:var(--accent)}
.se-check .se-check-task:disabled{opacity:.5;cursor:default}
.se-check .se-check-task.is-task{border-style:dashed;cursor:default;color:var(--muted)}
.se-check .se-check-task.is-task:hover{border-color:var(--line);color:var(--muted)}
.se-check .se-check-del{border:none;background:none;color:var(--muted);cursor:pointer;font-size:var(--t-footnote);padding:4px 6px;border-radius:6px}
.se-check .se-check-del:hover{background:rgba(200,16,46,.08);color:#c8102e}
.kbp-list{max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:4px}
.kbp-item{text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;font-size:var(--t-footnote);font-family:inherit;cursor:pointer;color:var(--ink)}
.kbp-item:hover{border-color:var(--cyan);background:#f6fbff}
/* Build item "Depends on" type-to-search picker */
.gb-dep-wrap{position:relative;margin-top:6px}
.gb-dep-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.gb-dep-menu{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--card,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:240px;overflow:auto;margin-top:4px}
.gb-dep-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:none;font:inherit;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line-soft)}
.gb-dep-opt:last-child{border-bottom:none}
.gb-dep-opt:hover{background:#f6fbff}
.gb-dep-opt b{font-weight:600;font-size:var(--t-footnote);color:var(--ink)}
.gb-dep-opt span{font-size:var(--t-caption2);color:var(--muted);white-space:nowrap}
/* Build item editor opens WITHIN the item's own card, not a separate-looking
   box appended after it (Chad, 2026-07-24: "make it within the ... bubble").
   Click the item again to close — see toggleGenericBuildEdit(). */
.gb-inline{animation:fade .15s ease;margin-top:10px;padding-top:12px;border-top:1px solid #eceef4}
.gb-inline h2{font-size:var(--t-body);font-weight:800;margin:0 0 6px}
.gb-inline .modal-actions{display:flex;align-items:center;margin-top:12px}
.gb-inline .modal-actions .spacer{flex:1}
/* Status-grouped build list sections */
.build-status-sec > summary::-webkit-details-marker{display:none}
.build-status-sec > summary::marker{content:""}
.build-status-sec > summary::before{content:"▸";color:#8a93a6;font-size:var(--t-caption);transition:transform .15s}
.build-status-sec[open] > summary::before{transform:rotate(90deg);display:inline-block}
@media(max-width:767px){.goal-head{flex-direction:column}.goal-val{text-align:left}}

/* ---- Portfolio Health + Reports (Phase 4) ---- */
/* Reports inbox (inbound emailed reports) */
.rep-list{padding:4px 0}
.rep-row{display:flex;gap:16px;align-items:flex-start;padding:13px 6px;border-top:1px solid var(--line-soft)}
.rep-row:first-child{border-top:none}
.rep-main{flex:1;min-width:0}
.rep-subj{font-weight:650;font-size:var(--t-body)}
.rep-meta{font-size:var(--t-caption);color:var(--muted);margin-top:2px}
.rep-snip{font-size:var(--t-caption);color:var(--ink-soft);margin-top:5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rep-atts{display:flex;flex-direction:column;gap:5px;flex-shrink:0;max-width:230px;align-items:flex-end}
.rep-att{font-size:var(--t-caption);background:#eef1fb;color:#2d47b8;border-radius:7px;padding:4px 9px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.rep-att:hover{background:#e2e8fb}
.tix-atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tix-att{font-size:var(--t-footnote);background:#eef1fb;color:#2d47b8;border:1px solid var(--line-soft);border-radius:8px;padding:7px 12px;text-decoration:none}
.tix-att:hover{background:#e2e8fb}
.hub-meet-row{display:flex;align-items:stretch;gap:4px;padding:0}
.hub-meet-row .pn-i-open{flex:1;min-width:0;display:flex;text-align:left;background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:8px 10px;border-radius:8px}
.hub-meet-row .pn-i-open:hover{background:#f3f5fb}
.hub-file{flex:0 0 auto;border:none;background:none;cursor:pointer;font-size:var(--t-body);opacity:.4;border-radius:8px;padding:0 10px;transition:opacity .12s,background .12s}
.hub-file:hover{opacity:1;background:#f3f5fb}
.folder-chip{background:#eef1fb;color:#2d47b8;border-radius:6px;padding:1px 7px;font-size:var(--t-caption2);font-weight:700;margin-left:3px}
@media (prefers-color-scheme:dark){.folder-chip{background:rgba(69,96,201,.28);color:#a9baf5}.hub-meet-row .pn-i-open:hover,.hub-file:hover{background:rgba(255,255,255,.05)}}
.filer-list{max-height:280px;overflow:auto;margin-top:6px}
.pn-fol-head-row{display:flex;align-items:center;justify-content:space-between;padding:0 4px 4px}
.fol-add{border:none;background:none;cursor:pointer;font-size:var(--t-body);color:var(--muted);line-height:1;padding:2px 6px;border-radius:6px}
.fol-add:hover{background:var(--line-soft);color:var(--ink)}
.fol-line{display:flex;align-items:center;border-radius:8px}
.fol-line .fol-facet{flex:1;min-width:0}
.fol-del{flex:0 0 auto;border:none;background:none;cursor:pointer;color:var(--muted);font-size:var(--t-caption);opacity:0;padding:0 8px;border-radius:6px}
.fol-line:hover .fol-del{opacity:.6}
.fol-del:hover{opacity:1!important;color:#e2445c}
.up-row{text-align:left;border:none;background:none;font:inherit;color:inherit;cursor:pointer;width:100%;gap:8px}
.up-row .up-date{flex:0 0 auto;font-size:var(--t-caption2);font-weight:800;color:var(--muted);min-width:46px}
.up-row:hover{background:var(--bg)}
@media (prefers-color-scheme:dark){.tix-att{background:rgba(69,96,201,.25);color:#a9baf5}}
.rep-noatt{color:var(--muted);font-size:var(--t-caption)}
@media(max-width:720px){.rep-row{flex-direction:column;gap:8px}.rep-atts{align-items:flex-start;max-width:none}}
@media (prefers-color-scheme:dark){.rep-att{background:rgba(69,96,201,.25);color:#a9baf5}}
.rep-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:12px 0}
.rep-card{background:var(--bg);border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;text-align:center}
.rep-num{font-size:var(--t-title2);font-weight:700;line-height:1}
.rep-sub{font-size:var(--t-body);font-weight:500;color:var(--muted)}
.rep-lbl{font-size:var(--t-caption2);color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.03em}
.port-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-height:46vh;overflow:auto}
.port-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--bg);border:1px solid var(--line-soft);border-radius:12px}
.port-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.port-logo{width:28px;height:28px;border-radius:7px;object-fit:cover;flex-shrink:0}
.port-name{min-width:120px;flex-shrink:0}.port-name b{font-size:var(--t-body)}
.port-health{font-size:var(--t-caption);font-weight:600;margin-top:1px}
.port-stats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--t-caption);color:var(--ink-soft);justify-content:flex-end;flex:1}
.port-stats .is-bad{color:#e2445c;font-weight:600}
@media(max-width:767px){.port-row{flex-wrap:wrap}.port-stats{justify-content:flex-start;width:100%}}

/* ---- Heat-map grid (stores x key metrics, color-coded) ---- */
.heat-grid{display:grid;gap:3px;margin-top:14px;align-items:stretch}
.hg-corner{}
.hg-colhead{font-size:var(--t-caption2);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:center;padding:2px 4px 8px;align-self:end}
.hg-rowhead{display:flex;align-items:center;gap:8px;font-size:var(--t-footnote);font-weight:700;padding:6px 8px}
.hg-logo{width:22px;height:22px;border-radius:6px;object-fit:cover;flex-shrink:0}
.hg-cell{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--t-footnote);font-variant-numeric:tabular-nums;border-radius:8px;padding:11px 4px;color:#fff}
.hg-cell.sev-green{background:var(--good,#00c875)}
.hg-cell.sev-amber{background:#fdab3d}
.hg-cell.sev-red{background:#e2445c}
.hg-cell.sev-none{background:var(--line-soft);color:var(--muted);font-weight:600}
@media(max-width:767px){.heat-grid{font-size:var(--t-caption)}.hg-colhead{font-size:var(--t-caption2)}}

/* ---- Ranked list (dashboard widget) ---- */
.rank-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.rank-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg);border:1px solid var(--line-soft);border-radius:10px}
.rank-badge{width:20px;height:20px;border-radius:50%;background:var(--line-soft);color:var(--muted);font-size:var(--t-caption2);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rank-label{font-size:var(--t-footnote);font-weight:600}
.rank-val{font-size:var(--t-caption);color:var(--ink-soft);font-weight:600}

/* ---- Build Tracker item drag/delete (2026-07-24) ---- */
.build-drag-handle:active{cursor:grabbing}
.build-item-del{opacity:0;transition:opacity .12s}
.build-item:hover .build-item-del{opacity:1}

/* ---- Automation "recipe" visual builder (#15) ---- */
.recipe-flow{display:flex;flex-direction:column;align-items:stretch;margin-top:10px}
.recipe-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--bg)}
.recipe-card.trig{border-color:var(--blue,#1A4FD0);background:rgba(26,79,208,.05)}
.recipe-card.act{border-color:var(--good,#00c875);background:rgba(0,200,117,.05)}
.recipe-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.recipe-card-head b{font-size:var(--t-footnote)}
.rc-icon{font-size:var(--t-headline)}
.recipe-arrow{text-align:center;color:var(--muted);font-size:var(--t-headline);line-height:1;margin:2px 0}
.recipe-tiles{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.recipe-tile{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card,#fff);cursor:pointer;font-size:var(--t-caption);font-weight:600;transition:border-color .15s,background .15s}
.recipe-tile:hover{border-color:var(--blue,#1A4FD0)}
.recipe-tile.on{border-color:var(--blue,#1A4FD0);background:rgba(26,79,208,.12)}
.rt-icon{font-size:var(--t-body)}
.recipe-add-act{border:1px dashed var(--line);border-radius:14px;padding:12px 14px}

/* ---- Workload (#19) ---- */
.wl-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.wl-row:last-child{border-bottom:none}
.wl-info{flex:1;min-width:0}
.wl-name{font-size:var(--t-footnote);font-weight:700}
.wl-bar-track{height:7px;border-radius:99px;background:var(--line-soft);margin:6px 0;overflow:hidden}
.wl-bar{height:100%;border-radius:99px;background:var(--blue,#1A4FD0)}
.wl-bar.hot{background:var(--gap,#e2445c)}
.wl-boards{display:flex;flex-wrap:wrap;gap:4px}
.wl-count{font-family:var(--font-head,inherit);font-size:var(--t-title3);font-weight:800;min-width:28px;text-align:right;color:var(--ink-soft)}
.wl-count.hot{color:var(--gap,#e2445c)}
/* Workload drill-down — click a person to see the actual tasks (Chad 2026-07-24) */
.wl-block{border-bottom:1px solid var(--line-soft)}
.wl-block:last-child{border-bottom:none}
.wl-block .wl-row{border-bottom:none}
.wl-row.clickable{cursor:pointer;border-radius:10px;transition:background .12s}
.wl-row.clickable:hover{background:var(--bg,#f6f7fb)}
.wl-caret{color:var(--muted);font-size:var(--t-caption);width:12px;text-align:center}
.wl-tasks{display:flex;flex-direction:column;gap:6px;padding:2px 14px 14px 62px}
.wl-task{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:var(--card,#fff);border:1px solid var(--line-soft);border-radius:9px;
  padding:8px 11px;font:inherit;font-size:var(--t-footnote);color:var(--ink);transition:.12s}
.wl-task:hover{border-color:var(--line);box-shadow:var(--shadow)}
.wl-task-st{font-size:var(--t-caption2);font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap;flex:0 0 auto}
.wl-task-title{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-note{color:var(--muted);font-size:var(--t-caption);padding-top:2px}
@media(max-width:640px){.wl-tasks{padding-left:14px}.wl-task-title{white-space:normal}}

/* ---- Dashboards (custom widget builder) ---- */
/* An open report's header, INSIDE the Reports pane. The bar above still says
   "Reports" (the module never renames its bar); the report's own name, its
   range line and its Edit/Delete sit here, like a contact or a machine opened
   from its shelf. Same height every time so the pane top never moves between
   the shelf, the Discount Report and the Chart Guide. */
.rep-dhead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding:2px 0 14px;margin-bottom:16px;border-bottom:1px solid var(--line-soft)}
.rep-dhead>.btn{flex:none;margin-top:1px}
.rep-dtitle{flex:1 1 240px;min-width:0}
.rep-dtitle h2{margin:0;font-size:var(--t-title3);letter-spacing:-.3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rep-dsub{color:var(--muted);font-size:var(--t-footnote);margin-top:3px}
.rep-dactions{display:flex;gap:8px;flex:none;margin-left:auto}
/* Desktop (paintReports): the open report's header lives in the bar's title
   zone — one line: back button · name · ? · subtitle, the subtitle trimmed
   with an ellipsis rather than wrapping, because the bar is one row tall. */
.topbar-title:has(> .rep-dhead){flex:1 1 auto;display:block}
.topbar .rep-dhead{padding:0;margin:0;border:0;align-items:center;flex-wrap:nowrap;min-width:0}
.topbar .rep-dtitle{display:flex;align-items:baseline;gap:12px;min-width:0;flex:1 1 auto}
.topbar .rep-dtitle h2{font-size:var(--t-title2);letter-spacing:-.4px;color:var(--blue-deep);white-space:nowrap;flex-wrap:nowrap;flex:none}
.topbar .rep-dsub{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Folder rows: the ⋯ shows on hover, same manner as .pn-fol-more */
.rep-folrow{display:flex;align-items:center}
.rep-folrow .mtg-side-row{flex:1;min-width:0}
.rep-folmore{opacity:0;border:none;background:none;cursor:pointer;color:var(--muted);
  font-weight:800;padding:4px 6px;border-radius:6px;flex:none}
.rep-folrow:hover .rep-folmore{opacity:1}
.rep-folmore:hover{background:#eceff7;color:var(--ink)}
.rep-newfol .mtg-side-l,.rep-newfol .vw-ic{color:var(--muted)}
.rep-newfol:hover .mtg-side-l,.rep-newfol:hover .vw-ic{color:var(--ink)}
/* Card ⋯ — rename / move without opening the report */
.dash-card{position:relative}
.card-org{position:absolute;top:8px;right:8px;opacity:0;border:none;background:none;
  cursor:pointer;color:var(--muted);font-weight:800;padding:2px 7px;border-radius:6px}
.dash-card:hover .card-org{opacity:1}
.card-org:hover{background:#eceff7;color:var(--ink)}
/* The tiny anchored menu the ⋯ buttons open */
.rep-minimenu{position:fixed;z-index:3000;background:var(--bg,#fff);border:1px solid var(--line-soft);
  border-radius:10px;box-shadow:0 8px 28px rgba(15,23,42,.18);padding:5px;min-width:190px;
  display:flex;flex-direction:column}
.rep-minimenu button{border:none;background:none;text-align:left;font:inherit;font-size:var(--t-footnote);
  padding:7px 10px;border-radius:7px;cursor:pointer;color:var(--ink)}
.rep-minimenu button:hover:not(:disabled){background:#eceff7}
.rep-minimenu button.danger{color:var(--bad,#A8382F)}
.rep-minimenu button.head{font-size:var(--t-caption2);font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);cursor:default;padding-bottom:2px}
/* Incident report fill screen — Jesse's underline-input document, editable.
   The FILED copy is rendered by the server (incident_doc_html) so screen and
   email can't drift; these styles are only for the editable version. */
.inc-doc{background:#fff;border:1px solid var(--line-soft);border-radius:14px;
  padding:30px 36px;max-width:860px;box-shadow:var(--shadow,none)}
.inc-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:10px;margin-bottom:14px}
.inc-title{font-size:var(--t-title2);font-weight:800;line-height:1;text-align:right}
.inc-sub{font-size:var(--t-caption2);color:var(--muted);margin-top:4px;text-align:right}
.inc-label{display:block;font-size:var(--t-caption2);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:4px}
.inc-line{width:100%;border:none;border-bottom:1.5px solid var(--line,#b8bdc7);
  background:transparent;font:inherit;font-size:var(--t-body);padding:4px 2px;border-radius:0}
.inc-line:focus{outline:none;border-bottom-color:var(--blue-royal,#2b3a8f)}
.inc-area{width:100%;border:1.5px solid var(--line,#d5d9e0);border-radius:8px;
  background:transparent;font:inherit;font-size:var(--t-footnote);padding:10px 12px;resize:vertical}
.inc-area:focus{outline:none;border-color:var(--blue-royal,#2b3a8f)}
.inc-sect{font-size:var(--t-body);font-weight:700;margin:14px 0 8px;
  border-bottom:1.5px solid var(--line-soft);padding-bottom:4px}
.inc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:10px}
.inc-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:10px}
.inc-actions{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
@media (max-width:700px){ .inc-grid2,.inc-grid3{grid-template-columns:1fr} .inc-doc{padding:20px 16px} }
.dash-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:8px}
/* Report cards read as BUTTONS (Chad, 2026-08-21: "shade the buttons for each
   report… a lighter color of the blue… just a way we can see it better") —
   the same light-blue tint + blue edge the Home/Finances tiles carry. */
.dash-card{background:#eef3ff;border:1px solid #c9d7f7;border-left:4px solid #1733a5;border-radius:14px;padding:16px 16px 16px 14px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.dash-card:hover{background:#e3ecff;border-color:#1A4FD0;box-shadow:0 4px 14px rgba(26,79,208,.14)}
.dash-card b{color:#1733a5}
.dash-card b{font-size:var(--t-body)}
.dash-card .dash-sub{font-size:var(--t-caption);color:var(--muted);margin-top:4px}
.wgrid{display:grid;gap:14px;margin-top:14px}
.wgrid.grid2{grid-template-columns:repeat(2,1fr)}
.wgrid.grid3{grid-template-columns:repeat(3,1fr)}
.wgrid.stacked{grid-template-columns:1fr}
@media(max-width:767px){.wgrid.grid2,.wgrid.grid3{grid-template-columns:1fr}}
.widget-card{background:var(--card,#fff);border:1px solid var(--line-soft);border-radius:14px;padding:16px}
.widget-card h4{margin:0 0 10px;font-size:var(--t-footnote);color:var(--ink-soft);font-weight:700}
.widget-denied{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--t-caption);padding:8px 0}
.wpick-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.wpick-row:last-child{border-bottom:none}

/* ---- Automations / rules (Phase 5) ---- */
.rule-list{display:flex;flex-direction:column;gap:8px;margin:10px 0;max-height:52vh;overflow:auto}
.rule-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--bg);border:1px solid var(--line-soft);border-radius:12px}
.rule-body{flex:1;min-width:0}.rule-body b{font-size:var(--t-body)}
.rule-desc{font-size:var(--t-caption);color:var(--muted);margin-top:3px;line-height:1.5}
.rule-desc b{font-size:var(--t-caption);color:var(--ink-soft);font-weight:600}
.switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch-sl{position:absolute;inset:0;background:var(--line-soft);border-radius:22px;transition:.2s;cursor:pointer}
.switch-sl:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .switch-sl{background:var(--good,#00c875)}
.switch input:checked + .switch-sl:before{transform:translateX(16px)}

/* ---- Task as a full page (ClickUp-style) ---- */
.task-page-wrap{width:100%;padding:20px 24px 60px}
.task-page-wrap .page-back{margin-bottom:14px}
.modal.task-page{width:100%;max-width:900px;margin:0;box-shadow:var(--shadow);border-radius:var(--r);padding:26px 30px;max-height:none}
.modal.task-page>h2{font-size:var(--t-title2);margin:0 0 16px}
.modal.task-page .field{margin-bottom:16px}
.modal.task-page .notes-area,.modal.task-page #mNotes{min-height:120px}
.modal.task-page .act-feed{max-height:none}
@media(max-width:767px){.task-page-wrap{padding:14px 12px 60px}.modal.task-page{padding:18px 14px}}

/* Task drawer — Asana-style slide-in side panel (existing tasks). The board
   stays visible behind; every field auto-saves, so there's no Save button. */
.task-drawer{position:fixed;inset:0;background:rgba(9,18,60,.42);backdrop-filter:blur(3px);z-index:80;display:flex;justify-content:flex-end;animation:fade .18s ease}
.task-drawer>.modal{width:560px;max-width:94vw;height:100vh;max-height:100vh;border-radius:0;margin:0;padding:24px 28px 40px;overflow:auto;box-shadow:-10px 0 46px rgba(9,18,60,.28);animation:drawerIn .28s cubic-bezier(.2,.8,.25,1)}
.task-drawer>.modal>h2{font-size:var(--t-title3);margin:0 0 16px;padding-right:28px}
.task-drawer .field{margin-bottom:15px}
.task-drawer #mNotes{min-height:96px}
.task-drawer .act-feed{max-height:none}
@keyframes drawerIn{from{transform:translateX(48px);opacity:.3}to{transform:translateX(0);opacity:1}}

/* task drawer tabs (Details / Linked / Activity) */
.task-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-soft);margin:0 0 18px;padding-bottom:0}
.task-tab{appearance:none;border:none;background:transparent;font:inherit;font-size:var(--t-footnote);font-weight:600;color:var(--muted);padding:9px 4px;margin-right:18px;cursor:pointer;border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px}
.task-tab:hover{color:var(--ink)}
.task-tab.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.tt-badge{background:var(--line-soft);color:var(--ink-soft);font-size:var(--t-caption2);font-weight:700;padding:1px 6px;border-radius:99px;line-height:1.5}
.task-tab.active .tt-badge{background:rgba(55,189,245,.18);color:var(--cyan)}
.task-tab-panel{display:none}
.task-tab-panel.active{display:block}
.save-status{font-size:var(--t-caption);font-weight:600;color:var(--muted);transition:.2s;min-width:60px;text-align:right}
.save-status.saved{color:#00a862}
@media(max-width:640px){.task-drawer>.modal{width:100vw;max-width:100vw}}

/* ---- Gantt / Timeline ---- */
.gt-wrap{display:grid;grid-template-columns:260px 1fr;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.gt-names{border-right:1px solid var(--line-soft);padding-top:30px}
.gt-name{display:flex;align-items:center;padding:0 12px;font-size:var(--t-footnote);font-weight:600;border-bottom:1px solid var(--line-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.gt-name:hover{background:var(--bg)}
.gt-name.done{color:var(--muted);text-decoration:line-through}
.gt-scroll{overflow-x:auto}
.gt-canvas{position:relative}
.gt-grid{position:absolute;top:30px;left:0;right:0}
.gt-day{position:absolute;top:0;bottom:0;border-right:1px solid #f0f2f7}
.gt-day.we{background:#fafbfd}
.gt-tick{position:absolute;top:-26px;font-size:var(--t-caption2);font-weight:800;color:var(--muted);padding-left:4px}
.gt-today{position:absolute;top:30px;width:2px;background:#e2445c;z-index:3}
.gt-arrows{position:absolute;top:30px;left:0;pointer-events:none;z-index:2}
.gt-arrow{fill:none;stroke:#98a2c0;stroke-width:1.6;marker-end:url(#gtarr)}
.gt-bar{position:absolute;height:28px;line-height:28px;background:var(--blue-mid);color:#fff;border-radius:7px;font-size:var(--t-caption);font-weight:600;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:grab;z-index:4;box-shadow:0 1px 5px rgba(10,20,60,.25)}
.gt-bar:hover{filter:brightness(1.06)}
.gt-bar:active{cursor:grabbing}
.gt-bar.hot{background:#e2445c}
.gt-bar.done{background:#00c875;opacity:.7}
.gt-bar.narrow{padding:0;min-width:10px;border-radius:50%}
/* A bar too narrow to hold its own label (short/single-day tasks at
   zoomed-out scales) gets its title floated as text just to the right,
   instead of the label disappearing into padding wider than the bar. */
.gt-bar-label{position:absolute;height:28px;line-height:28px;font-size:var(--t-caption);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;z-index:4;cursor:pointer;background:linear-gradient(90deg,var(--card,#fff) 78%,rgba(255,255,255,0));padding-right:16px}
.gt-bar-label:hover{color:var(--blue-mid);text-decoration:underline}
/* ---- Timeline swimlanes (Build Tracker) ----
   A lane header row in the name column, and in the canvas one rolled-up tile
   spanning that lane's whole date range with a progress fill. Collapse every
   lane and the build reads as ten tiles instead of 180 rows. */
.gt-lane-name{display:flex;align-items:center;gap:7px;padding:0 10px;font-size:var(--t-footnote);font-weight:800;letter-spacing:.01em;color:var(--ink);background:var(--bg);border-bottom:1px solid var(--line-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;user-select:none}
.gt-lane-name:hover{background:#eef1f8}
.gt-caret{font-size:var(--t-caption2);color:var(--muted);flex:none}
.gt-name.in-lane{padding-left:26px;font-weight:600}
.gt-lane-bar{position:absolute;height:30px;line-height:30px;border-radius:8px;background:#e7ebf5;border:1px solid rgba(26,79,208,.22);overflow:hidden;cursor:pointer;z-index:4}
.gt-lane-bar:hover{filter:brightness(.98)}
.gt-lane-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(26,79,208,.32),rgba(55,189,245,.34))}
.gt-lane-bar.done .gt-lane-fill{background:rgba(0,200,117,.34)}
.gt-lane-txt{position:relative;display:block;padding:0 10px;font-size:var(--t-caption);font-weight:800;color:#1f2b52;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-lane-tools{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.gt-lane-hint{font-size:var(--t-caption);color:var(--muted)}
/* timeline zoom control */
.gt-zoom{display:inline-flex;border:1px solid var(--line-soft);border-radius:9px;overflow:hidden;background:#fff}
.gt-zoom-b{border:none;background:none;padding:6px 12px;font-size:var(--t-caption);font-weight:600;color:var(--muted);cursor:pointer;border-right:1px solid var(--line-soft)}
.gt-zoom-b:last-child{border-right:none}
.gt-zoom-b:hover{background:var(--bg);color:var(--ink)}
.gt-zoom-b.on{background:var(--blue-mid);color:#fff}
@media(max-width:767px){.gt-wrap{grid-template-columns:120px 1fr}}

/* ---- Connect / dependencies ---- */
.conn-list{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.conn-empty{font-size:var(--t-caption);color:var(--muted)}
.conn-chip{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:5px 8px;font-size:var(--t-caption);cursor:pointer;max-width:100%}
.conn-chip:hover{border-color:var(--blue-mid)}
.conn-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;border:none}
.conn-t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conn-x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:var(--t-caption2);padding:0 2px}
.conn-x:hover{color:#e2445c}
.conn-pick{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:4px;margin:8px 0}
.conn-opt{display:flex;align-items:center;gap:8px;border:none;background:var(--bg);border-radius:8px;padding:9px 12px;font-family:inherit;font-size:var(--t-footnote);text-align:left;cursor:pointer}
.conn-opt:hover{background:#eef1f8}

/* ---- Reconnect Google bar ---- */
.reconnect-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:300;background:var(--blue-royal);color:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(10,20,60,.4);padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:var(--t-footnote);font-weight:600;max-width:92vw}
.reconnect-bar button{border:none;border-radius:9px;padding:7px 14px;font-weight:700;font-size:var(--t-caption);cursor:pointer;font-family:inherit}
.reconnect-bar #reconnectGo{background:var(--chart);color:#2a2e0a}
.reconnect-bar #reconnectX{background:rgba(255,255,255,.15);color:#fff;padding:7px 10px}

/* ---- KB rich elements (Confluence-borrowed) ---- */
.kb-body .kb-panel,.kb-body [data-type^="panel"]{border-radius:10px;padding:12px 16px;margin:14px 0;border-left:4px solid}
.kb-body .kb-panel.info,.kb-body [data-type="panel-info"]{background:#eef4ff;border-color:#4285f4}
.kb-body .kb-panel.warn,.kb-body [data-type="panel-warning"]{background:#fff7e6;border-color:#f5a623}
.kb-body .kb-panel.ok,.kb-body [data-type="panel-success"]{background:#e9faf1;border-color:#00c875}
.kb-body [data-type="panel-note"]{background:#f4f6fb;border-color:#98a2c0}
.kb-body .kb-panel p:last-child,.kb-body [data-type^="panel"] p:last-child{margin-bottom:0}
.kb-body .kb-expand,.kb-body details{border:1px solid var(--line-soft);border-radius:10px;padding:10px 14px;margin:14px 0}
.kb-body summary{font-weight:700;cursor:pointer}
.kb-body ul.kb-check{list-style:none;padding-left:4px}
.kb-body ul.kb-check li{padding:2px 0}
.kb-body ul.kb-check li::before{content:"☐ ";color:var(--blue-mid);font-weight:700}
.kb-body [data-type="layout-two-equal"],.kb-body section[data-type^="layout"]{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kb-body [data-type="column"]{min-width:0}
.kb-toc{background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:12px 16px;margin:14px 0}
.kb-toc-title{font-size:var(--t-caption2);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.kb-toc-link{display:block;font-size:var(--t-footnote);color:var(--blue-mid);padding:2px 0;text-decoration:none}
.kb-toc-link:hover{text-decoration:underline}
.kb-toc-link.lvl-3{padding-left:16px;font-size:var(--t-caption)}
.kb-internal{border-bottom:1px dashed var(--blue-mid)}
@media(max-width:767px){.kb-body [data-type="layout-two-equal"],.kb-body section[data-type^="layout"]{grid-template-columns:1fr}}

/* ---- KB approval workflow ---- */
.kb-badge{font-size:var(--t-caption2);font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:99px;text-transform:uppercase}
.kb-badge.live{background:#e9faf1;color:#00915a}
.kb-badge.pending{background:#fff7e6;color:#b5710a}
.kb-badge.new{background:#eef4ff;color:#1a56db}
.kb-badge.edit{background:#f4f6fb;color:#556}
.kb-qn{font-weight:800;color:#e2445c}
.rq-list{display:flex;flex-direction:column;gap:14px;max-height:60vh;overflow:auto;margin:10px 0}
.rq-item{border:1px solid var(--line-soft);border-radius:12px;padding:14px}
.rq-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rq-by{font-size:var(--t-caption);color:var(--muted);margin-left:auto}
/* Reviewer feedback on a sent-back KB draft — must read as an instruction,
   not a footnote, so it's tinted rather than muted (2026-08-02). */
.rq-sentback{background:rgba(240,180,41,.12);border-left:3px solid #f0b429;
  padding:8px 10px;border-radius:6px;margin:6px 0;font-size:var(--t-caption);color:var(--ink)}
.rq-sentback b{color:var(--ink)}
.rq-note{font-size:var(--t-caption);font-style:italic;color:var(--ink-soft);margin:6px 0}
.rq-preview{max-height:220px;overflow:auto;background:var(--bg);border-radius:10px;padding:12px;margin:8px 0;font-size:var(--t-footnote)}
.rq-actions{display:flex;gap:8px;justify-content:flex-end}

/* real badge logo replacing lettered tiles */
.mark.mark-img{background:none;border:none;box-shadow:none;border-radius:50%;object-fit:contain;padding:0}
.rail-brand .mark.mark-img{background:none;border:none}

/* Support Center — match the KB support portal look */
.jsm-brand{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:22px 26px;margin-bottom:20px;box-shadow:var(--shadow)}
.jsm-brand img{width:52px;height:52px;border-radius:50%;flex:none}
.jsm-brand h2{margin:0 0 3px;font-size:var(--t-title2);letter-spacing:-.3px;color:var(--blue-deep)}
.jsm-brand p{margin:0;color:var(--ink-soft);font-size:var(--t-footnote);line-height:1.5}

/* clickable daily-brief chips + rows */
.brief-stat[data-nav]{cursor:pointer;transition:transform .12s,box-shadow .12s}
.brief-stat[data-nav]:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.brief-row.clickable{cursor:pointer;border-radius:8px;margin:0 -6px;padding-left:6px;padding-right:6px}
.brief-row.clickable:hover{background:var(--grad-soft)}

/* ================= Apple Calendar look (Chad, 2026-07-21) ================= */
.seg{display:inline-flex;background:#e9e9ee;border-radius:9px;padding:2px;gap:2px}
.seg-btn{border:none;background:none;font-family:inherit;font-size:var(--t-caption);font-weight:600;color:var(--ink-soft);padding:5px 14px;border-radius:7px;cursor:pointer;transition:all .12s}
.seg-btn.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.04)}
.cal-label{font-size:var(--t-title2);font-weight:800;letter-spacing:-.4px}
#calToday{color:#ec4b3c;font-weight:700}
/* month grid: flat white with hairlines, like macOS */
.cal-grid{gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.cal-cell{border:none;border-radius:0;background:#fff;min-height:112px;padding:5px 6px;gap:2px}
.cal-cell.out{opacity:1;background:#fafafc}
.cal-cell.out .cal-date{color:#c0c3cf}
.cal-cell.today{box-shadow:none;border:none;background:#fff}
.cal-date{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:var(--t-caption);font-weight:600;color:var(--ink);padding:0}
.cal-date:hover{text-decoration:none;background:var(--line-soft)}
.cal-cell.today .cal-date{background:#ec4b3c;color:#fff;font-weight:700}
.cal-grid-head{gap:1px;padding:6px 0;font-size:var(--t-caption2);font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
/* red "now" line + selected day pill, like Apple */
.tg-now{background:#ec4b3c}
.tg-now::before{background:#ec4b3c}
.tg-pill.sel{background:var(--ink);color:#fff;border-radius:10px}
.tg-pill.sel b{color:#fff}
.tg-pill.today b{color:#ec4b3c}
.tg-pill.sel.today b{color:#fff}
.cal-card{box-shadow:none;border:none;background:transparent;padding:0}

/* drag-and-drop calendar */
.cal-pill[draggable],.tg-ev[draggable]{cursor:grab}
.cal-pill.dragging,.tg-ev.dragging{opacity:.4}
.cal-cell.drop-hot{background:rgba(56,168,232,.14);box-shadow:inset 0 0 0 2px var(--cyan)}
.tg-day.drop-hot .tg-body{background:rgba(56,168,232,.08);box-shadow:inset 0 0 0 2px var(--cyan)}

/* ============ KB content parity — match kaleo-kb article rendering (Chad 2026-07-21) ============ */
/* brand accent bar + brand-colored title on the doc card, like the KB article */
.kb-doc{position:relative}
.kb-doc::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,#081A66,#1A4FD0)}
.kb-doc-head h2{font-family:Poppins,Figtree,sans-serif;color:var(--blue-deep);letter-spacing:-.4px}
/* callouts: KB's left-accent-bar style (was flat) */
.kb-body .callout{margin:18px 0;padding:13px 17px 13px 20px;border-radius:12px;border:1px solid;font-size:var(--t-body);position:relative}
.kb-body .callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px}
.kb-body .callout-warn{background:#fffbeb;border-color:#fcd34d}
.kb-body .callout-warn::before{background:linear-gradient(180deg,#f59e0b,#f97316)}
.kb-body .callout-info{background:#eef4ff;border-color:#bcd3ff}
.kb-body .callout-info::before{background:linear-gradient(180deg,#1A4FD0,#081A66)}
.kb-body .callout p:last-child{margin-bottom:0}
/* tag pills (were unstyled → plain text) */
.kb-body .kb-tag{display:inline-block;font-size:var(--t-caption2);font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:5px;text-transform:uppercase;white-space:nowrap;line-height:1.6}
.kb-body .kb-tag-blue{background:#e0f0ff;color:#0b5cad}
.kb-body .kb-tag-purple{background:#efe7fb;color:#6b3fc0}
.kb-body .kb-tag-green{background:#e4f6e4;color:#2c7a2c}
.kb-body .kb-tag-red{background:#fde7e7;color:#b3261e}
.kb-body .kb-tag-yellow{background:#fdf3d6;color:#8a6d1a}
.kb-body .kb-tag-neutral{background:#eef1f4;color:#5a6673}
/* blockquote → KB gradient bar */
.kb-body blockquote{border-left:3px solid #1A4FD0;background:var(--grad-soft);border-radius:0 12px 12px 0}
/* vault brand bars + store dropdowns */
.kb-body .vault-brand{display:flex;align-items:center;gap:10px;margin:26px 0 4px;padding:10px 16px;border-radius:12px;color:#fff;font-size:var(--t-headline);font-weight:800;letter-spacing:.02em}
.kb-body .vault-brand small{font-weight:600;opacity:.85;font-size:var(--t-caption);margin-left:auto}
.kb-body .vault-drop{margin:8px 0;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;background:#fff}
.kb-body .vault-drop > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:var(--t-body);font-weight:800;color:#fff;background:var(--va,#37BDF5);user-select:none}
.kb-body .vault-drop > summary::-webkit-details-marker{display:none}
.kb-body .vault-drop > summary::before{content:"▸";font-size:var(--t-footnote);transition:transform .15s}
.kb-body .vault-drop[open] > summary::before{transform:rotate(90deg)}
.kb-body .vault-drop > summary small{margin-left:auto;font-weight:600;font-size:var(--t-caption);opacity:.9}
.kb-body .vault-drop.va-lt > summary{color:#110E30}
.kb-body .vault-drop.va-lt > summary small{opacity:.72}
.kb-body .vault-drop .vd-body{padding:4px 14px 12px}
.kb-body .vd-close{display:block;width:100%;margin:12px 0 4px;font:inherit;font-size:var(--t-caption);font-weight:700;padding:9px 0;border-radius:9px;border:1.5px dashed var(--va,#37BDF5);background:none;color:var(--va,#37BDF5);cursor:pointer}
.kb-body .vd-close:hover{background:rgba(0,0,0,.04)}
/* include roll-up boxes */
.kb-body .inc-box{border:1px solid var(--line-soft);border-radius:12px;margin:14px 0;overflow:hidden}
.kb-body .vault-drop .inc-box{border-left:6px solid var(--va);margin:10px 0}
.kb-body .inc-head{font-size:var(--t-caption);font-weight:700;letter-spacing:.04em;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;background:var(--bg)}
.kb-body .vault-drop .inc-head{border-bottom:2px solid var(--va)}
.kb-body .vault-drop .inc-head a{color:var(--va)}
.kb-body .inc-ctx{font-weight:600;opacity:.75}
.kb-body .cert-links{margin:10px 0 16px;padding:10px 14px;border:1px dashed var(--line-soft);border-radius:10px;background:var(--grad-soft)}
.kb-body .cert-links ul{margin:6px 0 0 18px}
/* platform auto-links */
.kb-body .plat-link{font-weight:600;color:var(--blue-mid);text-decoration:none;border-bottom:1px dashed var(--blue-mid)}
.kb-body .plat-link:hover{border-bottom-style:solid}
.kb-body .plat-link::after{content:"↗";font-size:var(--t-caption2);margin-left:1px;opacity:.7}

/* brand tagline on OS login */
.login-tag{font-size:var(--t-caption2);letter-spacing:.22em;text-transform:uppercase;color:var(--blue-mid);font-weight:700;margin-top:3px}

/* ================= HR (Workstream) ================= */
.hr-card{padding:18px 20px;margin-bottom:14px}
.hr-banner{border-left:4px solid #fdab3d}
.hr-banner-sub{color:var(--ink-soft,#5b6270);font-size:var(--t-footnote);margin-top:6px;line-height:1.5}
.hr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.hr-stat{background:#fff;border:1px solid #e6e9f2;border-radius:14px;padding:14px 16px}
.hr-num{font-size:var(--t-title1);font-weight:800;color:#1733a5}
.hr-lab{font-size:var(--t-caption);color:#6a7183;margin-top:2px}
.hr-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.hr-chip{background:#eef3ff;border:1px solid #d8e2ff;border-radius:999px;padding:4px 12px;font-size:var(--t-caption)}
.hr-chip b{color:#1733a5;margin-right:4px}
.hr-chip-btn{cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s}
.hr-chip-btn:hover{border-color:#1733a5}
.hr-chip-btn.on{background:#1733a5;border-color:#1733a5}
.hr-chip-btn.on,.hr-chip-btn.on b{color:#fff}
.hr-list{margin-top:10px}
.hr-row{display:flex;align-items:center;gap:14px;padding:10px 8px;border-top:1px solid #eef0f6;cursor:pointer}
/* applicant rows became clickable when interview scorecards landed (2026-08-17) */
.hr-row.hr-app{cursor:pointer}
.hr-row.hr-app:focus-visible{outline:2px solid #1f6fd0;outline-offset:-2px}
.hr-row:hover{background:#f7f9ff}
.hr-name{flex:1;min-width:0}.hr-name b{display:block}
.hr-title{font-size:var(--t-caption);color:#6a7183}
.hr-loc{font-size:var(--t-caption);color:#6a7183;width:110px}
.hr-status{font-size:var(--t-caption);font-weight:700;width:90px}
.hr-status.ok{color:#00a25b}.hr-status.warn{color:#e8a13d}
.hr-stage{font-size:var(--t-caption);font-weight:600;color:#1f6fd0;width:130px}
.hr-date{font-size:var(--t-caption);color:#6a7183;width:92px;text-align:right}
.hr-badge{font-size:var(--t-caption);border-radius:999px;padding:2px 9px;font-weight:700}
.hr-badge.ok{background:#e3f7ec;color:#00a25b}
.hr-badge.warn{background:#fff3df;color:#c97f16}
.hr-dim{color:#9aa1b0}
.hr-foot{font-size:var(--t-caption);color:#9aa1b0;margin-top:8px}
.hr-modal{max-width:440px}
.hr-sub{color:#6a7183;font-size:var(--t-footnote);margin:-6px 0 12px}
.hr-detail{border:1px solid #eef0f6;border-radius:12px;overflow:hidden}
.hr-flag{display:flex;justify-content:space-between;padding:9px 14px;border-top:1px solid #eef0f6;font-size:var(--t-footnote)}
.hr-flag:first-child{border-top:none}
.hr-flag b.ok{color:#00a25b}.hr-flag b.warn{color:#c97f16}
.hr-note{font-size:var(--t-footnote);color:#8a91a2;margin-top:10px;line-height:1.5}
@media(max-width:767px){.hr-stats{grid-template-columns:repeat(2,1fr)}.hr-loc{display:none}}
.hr-assign select{border:1px solid #d8dce8;border-radius:8px;padding:4px 8px;font-size:var(--t-footnote)}
/* HR v2 */
.hr-badge.soft{background:#eef1fb;color:#4560c9}
.hr-num.hr-hot{color:#e2445c}
.hr-focus h3 .hr-count,.hr-count{display:inline-block;min-width:18px;text-align:center;background:#eef1fb;color:#4560c9;border-radius:99px;font-size:var(--t-caption2);padding:1px 7px;margin-left:6px;font-weight:800}
.hr-focus{border-left:3px solid var(--accent,#1733a5)}
.hr-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.hr-search{flex:1;min-width:160px;border:1px solid #d8dce8;border-radius:9px;padding:8px 11px;font-size:var(--t-body)}
.hr-filters{display:flex;gap:6px;flex-wrap:wrap}
.hr-fchip{border:1px solid #d8dce8;background:#fff;border-radius:99px;padding:5px 11px;font-size:var(--t-caption);cursor:pointer;color:var(--ink-soft)}
.hr-fchip.on{background:var(--navy,#110E30);color:#fff;border-color:var(--navy,#110E30)}
.hr-fchip b{margin-left:3px}
.hr-row.hr-off{opacity:.85}
.hr-modal.wide{max-width:600px}
.hr-mhead{display:flex;align-items:flex-start;gap:12px}.hr-mhead h2{margin:0}
.hr-offtag{margin-left:auto;flex:none}
.hr-dim2{color:#8a91a2;font-size:var(--t-footnote)}
.hr-block{margin-top:16px}
.hr-blockhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hr-blockhead h4{margin:0;font-size:var(--t-footnote)}
.hr-blockhead .hr-mini{margin-left:auto}
/* Evaluation-period editor rows */
.ep-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ep-row .ep-kind{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:var(--t-footnote);font-family:inherit}
.ep-row .ep-days{width:74px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;font-size:var(--t-footnote);font-family:inherit;text-align:right}
.ep-row .ep-daylbl{font-size:var(--t-caption);color:var(--muted)}
.ep-row .ep-del{padding:6px 9px}
.hr-ms-list{display:flex;flex-direction:column;gap:6px}
.hr-ms{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #eef0f6;border-radius:10px;font-size:var(--t-footnote)}
.hr-ms.done{opacity:.6}.hr-ms.od{border-color:#f3c0c8;background:#fdf3f4}
.hr-ms-k{font-weight:700;min-width:60px}.hr-ms-d{color:var(--ink-soft);flex:1}
.hr-mini{border:1px solid #d8dce8;background:#fff;border-radius:8px;padding:4px 10px;font-size:var(--t-caption);cursor:pointer;font-family:inherit}
.hr-mini.prim{background:var(--navy,#110E30);color:#fff;border-color:var(--navy,#110E30)}
.hr-danger{color:#e2445c}
.hr-addnote{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.hr-addnote-row{display:grid;grid-template-columns:130px 1fr;gap:8px}
.hr-addnote select,.hr-addnote textarea,.hr-addnote input{border:1px solid #d8dce8;border-radius:9px;padding:8px 10px;font-size:var(--t-footnote);font-family:inherit}
.hr-addnote textarea{min-height:38px;resize:vertical}
.hr-addnote .btn-primary{align-self:flex-end}
.hr-notelist{display:flex;flex-direction:column;gap:8px}
.hr-noteitem{border:1px solid #eef0f6;border-radius:10px;padding:9px 12px}
.hr-noterow{display:flex;align-items:center;gap:8px;font-size:var(--t-caption)}
.hr-noteby{color:#9aa1b0}.hr-noterow .hr-mini{margin-left:auto;padding:1px 7px}
.hr-notetext{font-size:var(--t-footnote);margin-top:5px;white-space:pre-wrap;line-height:1.45}
.hr-offbox{border:1px solid #f3c0c8;background:#fdf3f4;border-radius:10px;padding:11px 13px;font-size:var(--t-footnote)}
.hr-noteacts{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.hr-mini.prim{background:var(--navy,#110E30);color:#fff;border-color:var(--navy,#110E30)}
.sigpad-wrap{position:relative;margin-top:4px}
.sigpad{width:100%;height:170px;border:1px dashed #c7ccdb;border-radius:10px;background:#fff;touch-action:none;cursor:crosshair;display:block}
.sig-clear{position:absolute;top:8px;right:8px}
@media(max-width:620px){.hr-addnote-row{grid-template-columns:1fr}}
@media (prefers-color-scheme:dark){
  /* --ink is #323338 (dark) everywhere except inside .fb-theme, and --surface is
     never defined at all — so `color:var(--ink,#e6e9f5)` resolved to DARK text on
     the dark #1a2148 fallback background, making every hr-mini button ("Mark
     done", "Schedule + task", note ✕) unreadable for anyone whose OS is in dark
     mode. Latent since the block was written; found 2026-08-17. Literal values,
     because the tokens these referenced don't mean here what they look like. */
  .hr-stat,.hr-search,.hr-fchip,.hr-mini{background:#1a2148;color:#e6e9f5;border-color:rgba(255,255,255,.18)}
  .hr-mini.prim{background:#4560c9;color:#fff;border-color:#4560c9}
  .hr-ms,.hr-noteitem,.hr-detail{border-color:rgba(255,255,255,.12)}
  .hr-badge.soft{background:rgba(69,96,201,.25);color:#a9baf5}
}
.hr-storechips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.hr-schip{display:inline-flex;align-items:center;gap:5px;border:1px solid #d8dce8;border-radius:999px;padding:3px 10px;font-size:var(--t-caption);cursor:pointer}
.hr-schip:has(input:checked){background:#eef3ff;border-color:#1f6fd0;color:#1733a5;font-weight:600}
.hr-schip input{accent-color:#1733a5}

/* ---- Interview scorecards (2026-08-17) ---- */
.hr-ivbadge{display:inline-block;min-width:17px;margin-left:7px;padding:0 5px;border-radius:999px;
  background:#eef3ff;color:#1733a5;font-size:var(--t-caption2);font-weight:700;text-align:center;line-height:17px}
.hr-ivitem .hr-ivans{margin-top:7px;display:flex;flex-direction:column;gap:9px}
.hr-ivqa .hr-ivq{font-size:var(--t-caption);font-weight:600;color:#3a4257}
.hr-ivqa .hr-iva{margin-top:2px;color:#242a38}
.hr-ivform{display:flex;flex-direction:column;gap:14px}
.hr-ivgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hr-ivgrid label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-caption);font-weight:600;color:#3a4257}
.hr-ivgrid input{padding:8px 10px;font:inherit;font-size:var(--t-body);font-weight:400;color:#242a38;
  border:1px solid #d8dce8;border-radius:7px;background:#fff}
/* Each section is its own light card so a 12-question form reads as steps
   rather than one long scroll (Chad, 2026-08-17). */
.hr-ivsection{background:#fff;border:1px solid var(--line-soft,#e6e9f0);border-radius:14px;padding:15px 17px}
.hr-ivsectitle{font-size:var(--t-caption);font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#1733a5;
  margin:0 0 13px;padding-bottom:9px;border-bottom:1px solid #eef0f6}
.hr-ivfield{margin-bottom:13px}
.hr-ivfield:last-child{margin-bottom:0}
.hr-ivfield>label{display:block;margin-bottom:5px}
.hr-ivqtext{font-size:var(--t-footnote);font-weight:600;color:#242a38}
.hr-qnum{display:inline-block;background:#1733a5;color:#fff;font-size:var(--t-caption2);font-weight:700;
  border-radius:4px;padding:1px 6px;margin-right:7px;vertical-align:middle}
.hr-ivfield textarea{width:100%;min-height:66px;padding:8px 10px;font:inherit;font-size:var(--t-footnote);
  border:1px solid #d8dce8;border-radius:7px;resize:vertical;background:#fff;color:#242a38}
.hr-ivfield textarea.short{min-height:44px}
@media (max-width:640px){.hr-ivgrid{grid-template-columns:1fr}}
/* the employee detail is a pane now, not a modal — it inherits none of
   .hr-modal's dialog chrome, so it carries its own spacing */
.hr-emppane{padding:2px}
.hr-emppane .hr-mhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.hr-emppane .hr-mhead h2{margin:0;font-size:var(--t-title3)}
.hr-emppane .modal-actions{display:flex;align-items:center;gap:10px;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--line-soft,#e6e9f0)}
.hr-emppane .modal-actions .spacer{flex:1}
.hr-rosterlist .hr-row{border-top:none;padding:8px 10px;border-radius:11px}
.hr-rosterlist .hr-row.active{background:rgba(23,51,165,.10)}
.hr-rrow{display:block}
.hr-rrow-t{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:var(--t-footnote);line-height:1.3}
.hr-rrow-t b{font-weight:600}
.hr-rrow-d{font-size:var(--t-caption);color:#6a7183;margin-top:2px;line-height:1.35}
.hr-rrow .hr-badge{font-size:var(--t-caption2);padding:0 5px}
.hr-rosterlist .hr-row.active .hr-rrow-t b{color:var(--blue-deep,#1733a5)}
.hr-hiringjump{display:block;width:100%;text-align:left;cursor:pointer;font:inherit}
.hr-hiringjump h3{margin:0 0 4px}

/* ---- Hiring funnel: cards first, then the rail, then the candidate ---- */
.hr-viewtabs{margin-top:10px}
.hr-hlanding{padding:2px}
.hr-hcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.hr-hcard{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;font:inherit;
  background:#fff;border:1px solid var(--line-soft,#e6e9f0);border-radius:16px;padding:16px 18px;
  box-shadow:var(--shadow);transition:border-color .12s,transform .12s}
.hr-hcard:hover{border-color:#1f6fd0;transform:translateY(-1px)}
.hr-hcard.on{border-color:#1733a5;box-shadow:0 0 0 2px rgba(23,51,165,.16),var(--shadow)}
.hr-hc-n{font-size:var(--t-display);font-weight:700;line-height:1.05;color:#1733a5;display:flex;align-items:baseline;gap:8px}
.hr-hc-pct{font-size:var(--t-body);font-weight:600;color:#6a7183}
.hr-hc-l{font-size:var(--t-body);font-weight:600;color:#242a38}
.hr-hc-h{font-size:var(--t-footnote);color:#6a7183}
.hr-hcard.hc-hire .hr-hc-n{color:#1a7a3c}
.hr-hcard.hc-no .hr-hc-n{color:#a33}
.hr-hcard.hc-undec .hr-hc-n{color:#b06a00}
/* a decided candidate gets a dot in the rail so the list itself reads as a funnel */
.hr-cdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:5px;vertical-align:middle}
.hr-cdot.ok{background:#1a7a3c}.hr-cdot.soft{background:#b06a00}.hr-cdot.warn{background:#a33}
.hr-crow .hr-ivbadge{margin-left:5px}
.hr-cand{padding:2px}
.hr-candhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.hr-candhead h2{margin:0;font-size:var(--t-title3)}
.hr-candhead .hr-badge{margin-left:auto}
.hr-decrow{display:flex;flex-wrap:wrap;gap:8px}
.hr-decbtn{font:inherit;font-size:var(--t-footnote);font-weight:600;cursor:pointer;padding:7px 14px;border-radius:999px;
  border:1px solid #d8dce8;background:#fff;color:#3a4257}
.hr-decbtn:hover{border-color:#1f6fd0}
.hr-decbtn.on.d-hire{background:#e8f6ec;border-color:#1a7a3c;color:#12602e}
.hr-decbtn.on.d-hold{background:#fdf3e3;border-color:#b06a00;color:#8a5300}
.hr-decbtn.on.d-no{background:#fdecec;border-color:#a33;color:#8a2b2b}
.hr-decbtn.clear{margin-left:auto;font-weight:500;color:#6a7183}
.hr-decnote{width:100%;min-height:52px;margin-top:10px;padding:8px 10px;font:inherit;font-size:var(--t-footnote);
  border:1px solid #d8dce8;border-radius:7px;resize:vertical;background:#fff;color:#242a38}
.hr-formacts{margin-top:14px}
.hr-archrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line-soft,#e6e9f0)}
.hr-archnote{font-size:var(--t-caption);color:#6a7183;flex:1 1 240px}
.hr-archwhy{flex:1 1 200px;max-width:280px;padding:7px 10px;font:inherit;font-size:var(--t-footnote);
  border:1px solid #d8dce8;border-radius:7px;background:#fff;color:#242a38}

/* ---- Scoring: 1-5 per question, section average, candidate roll-up ----
   Big finger-size buttons (Chad 8/20: "the numbers are fine, they're just
   really tiny and hard to see") — 46×42 with 17px digits, scored on an iPad. */
.hr-rate{display:inline-flex;gap:8px;margin:2px 0 9px;flex-wrap:wrap}
.hr-rbtn{width:46px;height:42px;padding:0;font:inherit;font-size:var(--t-headline);font-weight:600;cursor:pointer;
  border:1px solid #d8dce8;border-radius:10px;background:#fff;color:#6a7183}
.hr-rbtn:hover{border-color:#1f6fd0;color:#1733a5}
.hr-rbtn.on{background:#1733a5;border-color:#1733a5;color:#fff}
.hr-rbtn.clr{color:#9aa1b0}
.hr-rbtn.clr.on{background:#eef0f6;border-color:#d8dce8;color:#6a7183}
.hr-secavg{float:right;font-size:var(--t-footnote);font-weight:700;color:#1733a5;letter-spacing:0}
.hr-ivscore{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px;padding:9px 11px;
  background:#f5f7fc;border-radius:10px}
.hr-scorebig{font-size:var(--t-title2);font-weight:700;color:#1733a5;line-height:1}
.hr-scoreof{font-size:var(--t-caption);font-weight:600;color:#6a7183}
.hr-secbreak{display:flex;flex-wrap:wrap;gap:8px}
.hr-secpill{font-size:var(--t-caption);color:#3a4257;background:#fff;border:1px solid #e6e9f0;border-radius:999px;padding:2px 9px}
.hr-secpill b{color:#1733a5}
.hr-scorepill{display:inline-block;min-width:26px;margin-left:6px;padding:0 6px;border-radius:999px;
  background:#1733a5;color:#fff;font-size:var(--t-caption2);font-weight:700;text-align:center;line-height:17px}
.hr-movestore select{font:inherit;font-size:var(--t-footnote);padding:4px 8px;border:1px solid #d8dce8;
  border-radius:7px;background-color:#fff;color:#242a38;max-width:190px}
.hr-moved{margin:-4px 0 10px}
.hr-resrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hr-reslink{font-weight:600;color:#1733a5;text-decoration:none}
.hr-reslink:hover{text-decoration:underline}
.hr-resrow input[type=file]{font:inherit;font-size:var(--t-caption);max-width:100%}
@media (prefers-color-scheme:dark){
  .hr-secavg{color:#1733a5}
  .hr-ivscore{background:#f5f7fc}
  .hr-scorepill{background:#4560c9}
  .hr-moved{color:#9aa4c4}
}
@media (prefers-color-scheme:dark){
  .hr-hcard{background:#1a2148;border-color:rgba(255,255,255,.14)}
  .hr-hc-n{color:#a9baf5}.hr-hc-l{color:#e6e9f5}.hr-hc-h,.hr-hc-pct{color:#9aa4c4}
  .hr-hcard.hc-hire .hr-hc-n{color:#6fd18f}
  .hr-hcard.hc-no .hr-hc-n{color:#f0908f}
  .hr-hcard.hc-undec .hr-hc-n{color:#f0bf72}
  .hr-decbtn{background:#1a2148;border-color:rgba(255,255,255,.18);color:#c9d1e8}
  /* .hr-candhead h2 used to go #e6e9f5 here — near-white on a white pane
     for anyone whose Mac is in dark mode. Same trap as .hr-mini (8/17). */
  /* THE FORM STAYS LIGHT. Chad, 2026-08-17: "I don't like the form where it is
     reversed where the blanks are dark, but the words are white." A form you
     type into reads as paper — white field, dark ink — and the section cards
     carry that, so the questions sit on white too. This is also the honest
     direction for the app: there is no global dark mode, .fb-theme is the only
     dark surface, so these @media rules were always the odd ones out. */
  .hr-ivsection{background:#fff;border-color:#e6e9f0}
  .hr-ivsectitle{color:#1733a5;border-bottom-color:#eef0f6}
  .hr-ivqtext,.hr-ivqa .hr-ivq{color:#242a38}
  .hr-ivqa .hr-iva{color:#242a38}
  .hr-ivgrid label{color:#3a4257}
  .hr-ivgrid input,.hr-ivfield textarea,.hr-decnote{background:#fff;color:#242a38;border-color:#d5d0c8}
  /* a saved interview reads back on the same white card it was written on */
  .hr-ivitem{background:#fff;border-color:#e6e9f0}
  .hr-ivitem .hr-notetext,.hr-ivitem .hr-noteby,.hr-ivitem .hr-dim2{color:#242a38}
  .hr-ivbadge{background:rgba(69,96,201,.3);color:#c9d6ff}
  .hr-archnote{color:#c9d1e8}
}

/* ============ Food Safety Audit (Steritech / EcoSure) ============ */
.au-hist{display:flex;flex-direction:column;gap:8px}
.au-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line-soft);border-radius:12px;padding:12px 16px;cursor:pointer;font-family:inherit;box-shadow:var(--shadow);transition:transform .1s,box-shadow .12s}
.au-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.au-date{font-weight:800;font-size:var(--t-body);min-width:120px}
.au-fails{color:var(--ink-soft);font-size:var(--t-footnote)}
.au-by{margin-left:auto;color:var(--muted);font-size:var(--t-caption)}
.au-score{display:inline-flex;align-items:center;font-weight:800;font-size:var(--t-footnote);padding:2px 10px;border-radius:999px}
.au-score.ok{background:rgba(0,200,117,.15);color:#0a7d43}
.au-score.warn{background:rgba(253,171,61,.18);color:#9a5b00}
.au-score.bad{background:rgba(226,68,92,.15);color:#b3243c}
.au-table{width:100%;border-collapse:collapse;font-size:var(--t-footnote);display:table}
.au-table td{border-bottom:1px solid var(--line-soft);padding:8px 8px;vertical-align:top}
.au-code{white-space:nowrap;color:var(--blue-deep);width:1%}
.au-std{color:var(--ink)}
.au-notetxt{color:var(--ink-soft);font-size:var(--t-caption);margin-top:3px}
.au-note{width:150px}
.au-noteinp{width:100%;font-family:inherit;font-size:var(--t-caption);padding:5px 7px;border:1px solid var(--line-soft);border-radius:7px;background:var(--card)}
.au-mark{white-space:nowrap;width:1%}
.au-seg{display:inline-flex;gap:3px}
.au-opt{border:1px solid var(--line);background:var(--card);font-family:inherit;font-size:var(--t-caption);font-weight:700;padding:5px 9px;border-radius:7px;cursor:pointer;color:var(--ink-soft)}
.au-opt.au-pass.on{background:#0a7d43;border-color:#0a7d43;color:#fff}
.au-opt.au-fail.on{background:#b3243c;border-color:#b3243c;color:#fff}
.au-opt.au-na.on{background:var(--muted);border-color:var(--muted);color:#fff}
.au-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:18px;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(14,30,99,.08);padding:12px 20px;margin:0 -20px -20px;flex-wrap:wrap;z-index:20}
.au-bar-score b{font-size:var(--t-title3);font-family:Poppins,Figtree,sans-serif;color:var(--blue-deep)}
.au-bar-score span{color:var(--ink-soft);font-size:var(--t-caption);margin-left:8px}
.au-mktask{display:flex;align-items:center;gap:7px;font-size:var(--t-caption);color:var(--ink-soft);margin-left:auto}

/* audit risk badges + bite-size note */
.au-risk{display:inline-block;margin-left:6px;font-size:var(--t-caption2);font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:1px 6px;border-radius:5px;vertical-align:middle}
.au-risk.r-critical{background:rgba(226,68,92,.15);color:#b3243c}
.au-risk.r-major{background:rgba(253,171,61,.2);color:#9a5b00}
.au-risk.r-minor{background:rgba(120,130,160,.16);color:#5a6673}
.au-focus-note{font-size:var(--t-caption);color:var(--ink-soft);margin-top:8px}

/* "Open the Food Safety Audit" jump from a weekly audit task (Chad 2026-07-24) */
.task-jump{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  margin:0 0 14px;padding:11px 13px;font:inherit;border-radius:11px;
  background:linear-gradient(120deg,rgba(26,79,208,.07),rgba(55,189,245,.10));
  border:1px solid rgba(26,79,208,.20);color:var(--ink);transition:.14s}
.task-jump:hover{border-color:rgba(26,79,208,.42);box-shadow:var(--shadow)}
.task-jump .tj-ic{font-size:var(--t-title3);flex:0 0 auto}
.task-jump .tj-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.task-jump .tj-txt b{font-size:var(--t-footnote)}
.task-jump .tj-txt span{font-size:var(--t-caption);color:var(--ink-soft)}
.task-jump .tj-go{font-size:var(--t-headline);color:var(--blue,#1A4FD0);flex:0 0 auto}

/* #40 Meeting ↔ Task tie-together (2026-07-24) */
.task-back{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
  margin:0 0 10px;padding:8px 12px;font:inherit;font-size:var(--t-caption);border-radius:9px;
  background:var(--bg,#f6f7fb);border:1px solid var(--line-soft);color:var(--ink-soft);transition:.14s}
.task-back:hover:not(:disabled){border-color:var(--line);color:var(--ink)}
.task-back:disabled{cursor:default;opacity:.75}
.task-back b{color:var(--ink)}
/* open-action-item count on a meeting's calendar entry */
.ep-open{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  margin-left:5px;padding:0 5px;height:15px;border-radius:20px;
  background:rgba(226,68,92,.16);color:#c0122c;font-size:var(--t-caption2);font-weight:800;
  font-variant-numeric:tabular-nums;vertical-align:middle}
.cal-pill:not(.ep-line) .ep-open{background:rgba(255,255,255,.28);color:#fff}
.tg-ev .ep-open{margin-left:4px}

/* Month view: keep the weekday labels pinned so scrolling today to the top
   (Chad, 2026-07-24) doesn't hide which column is which day. Month view is the
   only mode that renders .cal-grid-head, so this is scoped by construction. */
/* z-index one ABOVE the month labels (.cal-msep, z 4): a label being pushed
   out by the next month slides up under the header, not over it. */
.cal-grid-head{position:sticky;top:0;z-index:5;background:var(--bg);padding-top:6px}

/* Month view only: let the card overflow so the sticky weekday header pins to
   the page scroller (an overflow:hidden ancestor would capture the sticky
   context and let the header scroll away). Month view never renders on mobile
   — it auto-switches to agenda — so the mobile horizontal-scroll card rule is
   unaffected. The grid clips its own rounded corners, so nothing visual is lost. */
.cal-card-month{overflow:visible}

/* Day view: the single day fills the whole width instead of sitting in a
   1-of-7 grid column (Chad, 2026-07-24: "the day is just a little column
   should be the entire page"). The week strip above stays the day picker. */
.tg-days-1{grid-template-columns:1fr}

/* ===== Native finance board — graphite theme, brand-accented (Chad 2026-07-25:
   "less white… graphite and green" for CSC, "graphite and red" for FFC). Scoped
   to .fb-theme so it overrides the light app vars the .fb-* classes read, without
   touching the rest of the app. Palette matches the FFC board Chad already likes. */
.fb-theme{
  --card:#21252d; --bg:#1a1d23; --ink:#e6e8ee; --ink-soft:#aeb5c2; --muted:#7c8595;
  --line:#2d3340; --line-soft:#252b34;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 8px 22px rgba(0,0,0,.4);
  background:#1a1d23; color:var(--ink);
  border-radius:14px; padding:16px 16px 6px; margin:-4px 0 0;
}
.fb-csc{ --fb-accent:#5fbf4a; --fb-accent-soft:rgba(95,191,74,.16); }   /* CSC green */
.fb-ffc{ --fb-accent:#e31937; --fb-accent-soft:rgba(227,25,55,.18); }  /* Freddy's red */
/* accent the section titles + card heads */
.fb-theme .fb-section-head h3{color:var(--ink)}
.fb-theme .fb-section-head h3::before{
  content:"";display:inline-block;width:4px;height:15px;border-radius:2px;
  background:var(--fb-accent);margin-right:9px;vertical-align:-2px;
}
.fb-theme .fb-card-head{color:var(--ink);border-bottom-color:var(--line)}
.fb-theme .fb-card{background:var(--card);border-color:var(--line)}
.fb-theme .fb-note{background:rgba(253,171,61,.10);border-color:rgba(253,171,61,.3);color:var(--ink-soft)}
.fb-theme .fb-note code{background:rgba(255,255,255,.08)}
/* brighten the up/down change colors so they read on graphite */
.fb-theme .fb-chg.up{color:#3ddc84}
.fb-theme .fb-chg.dn{color:#ff5a6a}
.fb-theme .fb-smg-overall{background:var(--card)}
.fb-theme .fb-smg-overall.smg-grn{background:rgba(61,220,132,.12)}
.fb-theme .fb-smg-overall.smg-grn .fb-smg-big{color:#3ddc84}
.fb-theme .fb-smg-overall.smg-red{background:rgba(255,90,106,.12)}
.fb-theme .fb-smg-overall.smg-red .fb-smg-big{color:#ff5a6a}
.fb-theme .fb-smg-overall.smg-yel{background:rgba(253,171,61,.14)}
.fb-theme .fb-smg-overall.smg-yel .fb-smg-big{color:#f6b74a}
.fb-theme .fb-kpi{background:var(--card)}
.fb-theme .fb-kpi.smg-grn .fb-kpi-v{color:#3ddc84}
/* granularity toggle buttons on graphite */
.fb-theme .fb-gran{background:var(--card);border:1px solid var(--line);color:var(--ink-soft)}
.fb-theme .fb-gran.on{background:var(--fb-accent);border-color:var(--fb-accent);color:#10130f}
/* chart gridlines/axis dim on dark */
.fb-theme .fb-grid-line{stroke:#333a45}

/* Native board: top bar (snapshot + date picker), graphite (Chad 2026-07-25) */
.fb-theme .fb-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.fb-theme .fb-snapshot{font-size:var(--t-caption);color:var(--ink-soft)}
.fb-theme .fb-snapshot b{color:var(--ink)}
.fb-theme .fb-date{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;font-size:var(--t-caption);cursor:pointer}
.fb-theme .fb-date:focus{outline:none;border-color:var(--fb-accent)}
.jsm-tab.fin-soon{opacity:.5;cursor:default;font-style:italic}
/* chart hover tooltip */
.fb-theme{position:relative}
.fb-hot{cursor:crosshair}
.fb-tip{position:absolute;z-index:30;pointer-events:none;background:#0b0e13;border:1px solid #39404d;
  border-radius:9px;padding:8px 11px;font-size:var(--t-footnote);line-height:1.35;color:#f2f4f8;
  box-shadow:0 8px 24px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.fb-tip>b{font-size:var(--t-caption2);color:#aeb5c2;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.fb-tip span{color:#f2f4f8;font-variant-numeric:tabular-nums}
.fb-tip span b{color:#fff;font-size:var(--t-body)}
.fb-tip .ly{color:#98a1b0}
/* Signed deltas beside the comparison rows. The tip has a fixed dark ground of
   its own, so these are literal colours on purpose — they must not follow the
   board theme the way the table cells do. */
.fb-tip i{font-style:normal;font-weight:700;margin-left:2px}
.fb-tip i.up{color:#4ade80}
.fb-tip i.dn{color:#f87171}
.fb-tip.hidden{display:none}
.fb-dot{pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}

/* Native board store selector + refresh (Chad 2026-07-25: buttons like CSC Intel) */
.fb-theme .fb-stores{display:flex;gap:6px;flex-wrap:wrap}
.fb-theme .fb-store{background:var(--card);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:8px;padding:6px 14px;font:inherit;font-size:var(--t-footnote);font-weight:700;cursor:pointer;transition:.12s}
.fb-theme .fb-store:hover{border-color:var(--fb-accent)}
.fb-theme .fb-store.on{background:var(--fb-accent);border-color:var(--fb-accent);color:#0e120c}
.fb-theme .fb-refresh{background:var(--card);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:8px;padding:6px 12px;font:inherit;font-size:var(--t-caption);cursor:pointer}
.fb-theme .fb-refresh:hover{border-color:var(--fb-accent);color:var(--ink)}
.fb-theme .fb-refresh:disabled{opacity:.6;cursor:default}

/* Native beta brand toggle (CSC | FFC) + beta tag (Chad 2026-07-25) */
.fb-theme .fb-brandtabs{display:flex;align-items:center;gap:8px;margin:0 0 14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.fb-theme .fb-brand{background:transparent;border:none;color:var(--muted);font:inherit;font-size:var(--t-body);font-weight:800;cursor:pointer;padding:4px 6px;border-bottom:2px solid transparent;margin-bottom:-12px}
.fb-theme .fb-brand:hover{color:var(--ink-soft)}
.fb-theme .fb-brand.on{color:var(--ink);border-bottom-color:var(--fb-accent)}
.fb-theme .fb-beta-tag{font-size:var(--t-caption2);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#f6b74a;background:rgba(253,171,61,.14);border-radius:5px;padding:2px 7px;margin-left:2px}
.fb-theme .fb-placeholder .fb-card-head{color:var(--ink)}

/* Native board dense Labor tables (Chad 2026-07-25: match the old board layout) */
.fb-theme .fb-table-lab th,.fb-theme .fb-table-lab td{padding:7px 10px;font-size:var(--t-caption)}
.fb-theme .fb-lbadge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:var(--t-caption);font-weight:700;font-variant-numeric:tabular-nums}
.fb-theme .fb-lbadge.lb-grn{background:rgba(61,220,132,.15);color:#3ddc84}
.fb-theme .fb-lbadge.lb-yel{background:rgba(253,171,61,.15);color:#f6b74a}
.fb-theme .fb-lbadge.lb-red{background:rgba(255,90,106,.15);color:#ff5a6a}
.fb-theme .fb-italic{font-style:italic;color:var(--muted)}
.fb-theme .fb-styletoggle{margin-left:10px;padding-left:10px;border-left:1px solid var(--line)}

/* ================= Cash & Deposits (build B1) ================= */
.cash-banner{background:#f5f7fb;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:var(--t-footnote);color:var(--ink-soft);margin-bottom:16px}
.cash-banner.dep{background:rgba(26,79,208,.08);border-color:rgba(26,79,208,.25);color:var(--ink)}
.cash-banner.warn{background:rgba(255,90,106,.1);border-color:rgba(255,90,106,.3);color:var(--ink)}
.cb-exc{display:flex;justify-content:space-between;gap:10px;padding:3px 0;cursor:pointer}
.cb-exc:hover{text-decoration:underline}
.cash-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:24px}
.cash-card{display:flex;align-items:center;gap:13px;text-align:left;background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;padding:15px 16px;cursor:pointer;transition:.15s;font:inherit}
.cash-card:hover{border-color:var(--brand,#1A4FD0);box-shadow:0 3px 12px rgba(0,0,0,.06)}
.cash-card.go{background:var(--brand,#1A4FD0);border-color:var(--brand,#1A4FD0)}
.cash-card.go .cc-t,.cash-card.go .cc-s{color:#fff}
.cash-card.go .cc-s{opacity:.85}
.cash-card.done{background:rgba(105,176,72,.1);border-color:rgba(105,176,72,.4)}
.cc-ico{font-size:var(--t-title1);line-height:1}
.cc-t{font-weight:800;font-size:var(--t-body)}
.cc-s{font-size:var(--t-caption);color:var(--ink-soft);margin-top:2px}
.cash-h2{font-size:var(--t-footnote);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin:22px 0 10px}
.cash-list{display:flex;flex-direction:column;gap:6px}
.cash-row{display:flex;align-items:center;gap:14px;background:var(--card,#fff);border:1px solid var(--line);border-radius:9px;padding:10px 14px;cursor:pointer;font:inherit;text-align:left;width:100%}
.cash-row.static{cursor:default}
.cash-row:not(.static):hover{border-color:var(--brand,#1A4FD0)}
.cr-date{font-weight:700;min-width:120px}
.cr-amt{font-variant-numeric:tabular-nums;font-weight:700}
.cr-var{font-variant-numeric:tabular-nums;font-size:var(--t-caption);padding:1px 8px;border-radius:20px}
.cr-var.ok{background:rgba(105,176,72,.15);color:#3f7d20}
.cr-var.bad{background:rgba(255,90,106,.15);color:#c0392b}
.cr-var.over{background:rgba(240,170,20,.15);color:#9a6a00}
.cr-by{color:var(--ink-soft);font-size:var(--t-caption);margin-left:auto}
.cash-row .chip.alt{background:rgba(120,90,200,.14);color:#5b3fa0}
/* form */
.cash-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
@media(max-width:820px){.cash-grid{grid-template-columns:1fr}}
.cd-block{padding:16px}
.cd-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
@media(max-width:560px){.cd-two{grid-template-columns:1fr}}
.cd-h{font-weight:800;font-size:var(--t-footnote);text-transform:uppercase;letter-spacing:.03em;margin:12px 0 6px}
.cd-h small{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-soft);margin-left:6px}
.cd-table{width:100%;border-collapse:collapse;font-size:var(--t-footnote)}
.cd-table th{text-align:left;font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);padding:4px 6px;border-bottom:1px solid var(--line)}
.cd-table td{padding:3px 6px}
.cd-dl{font-weight:700;width:56px}
/* Safe count: bills | rolled coins + loose coins. table-layout:fixed with
   PERCENTAGE columns so every input lands on the same x in both stacked tables
   AND the columns still work at ~220px (two-up inside the card on a laptop) —
   fixed px widths starved the input cell there. The roll's "$10 roll" hint sits
   under the coin name so the label cell never outgrows its column. */
.cd-cashgrid .cd-table{table-layout:fixed}
.cd-cashgrid .cd-dl{width:40%;padding-right:6px}
.cd-cashgrid .cd-in{width:100%;box-sizing:border-box}
.cd-cashgrid .cd-lt{width:29%}
.cd-rollv{display:block;font-weight:600;color:var(--ink-soft);font-size:var(--t-caption2);margin-top:1px}
/* The whole bills block (heading, rows, subtotal) is anchored to the BOTTOM of
   its column so its subtotal lines up with the Loose-coins subtotal ending the
   taller right-hand column — the slack falls above the block, keeping the rows
   and their total contiguous. */
.cd-cashgrid .cd-colfill{display:flex;flex-direction:column;justify-content:flex-end}
/* Safe total — the number that matters, so it gets a box of its own. */
.cd-safebox{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:14px;padding:13px 16px;border-radius:12px;
  border:1px solid rgba(26,79,208,.22);background:var(--grad-soft)}
.cd-safebox-l{font-weight:800;font-size:var(--t-body);text-transform:uppercase;letter-spacing:.03em;color:var(--blue-deep)}
.cd-safebox-l small{display:block;font-weight:600;font-size:var(--t-caption2);text-transform:none;letter-spacing:0;color:var(--ink-soft);margin-top:2px}
.cd-safebox-v{font-size:var(--t-title1);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--blue-deep)}
@media(max-width:560px){.cd-safebox-v{font-size:var(--t-title2)}}
/* The deposits attestation note reuses .cd-lt for its muted styling but is a
   full-width sentence, not a figure — without this it inherits the 88px amount
   column and wraps to one word per line. */
#dcrDepConfirm{width:auto;text-align:left}
.cd-in{width:80px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;font:inherit;text-align:right}
.cd-lt{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft);width:88px}
.cd-sub td{font-weight:800;border-top:1px solid var(--line);padding-top:7px}
.cd-sub td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.cd-checks{display:flex;gap:14px;margin-top:12px;align-items:flex-end}
.cd-checks .field{flex:1}
.cd-chk-tot{flex:1;font-size:var(--t-footnote);color:var(--ink-soft);padding-bottom:8px}
.cd-chk-tot b{font-size:var(--t-body);color:var(--ink);margin-left:6px}
.cd-chk-table{margin:8px 0 4px}
.cd-chk-table th{text-align:left;font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding-bottom:4px}
.cd-chk-table input{width:100%}
.cd-chk-table td:last-child{width:28px}
.cd-delrow{background:none;border:0;color:var(--ink-soft);font-size:var(--t-headline);line-height:1;cursor:pointer;padding:2px 4px}
.cd-delrow:hover{color:#d64550}
.cd-drops{margin-top:14px;border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.cd-drops summary{cursor:pointer;font-weight:700;font-size:var(--t-footnote)}
.cd-drops summary small{font-weight:500;color:var(--ink-soft)}
.cd-drop-n{width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:6px;font:inherit}
.cd-drop-a{width:100px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;font:inherit;text-align:right}
.cd-addrow{margin-left:8px;font-size:var(--t-caption);background:none;border:1px dashed var(--line);border-radius:6px;padding:2px 8px;cursor:pointer;color:var(--brand,#1A4FD0)}
.cd-summary{padding:18px;position:sticky;top:14px}
.cd-total-lbl{font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.cd-total{font-size:var(--t-display);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;margin:2px 0 6px}
.cd-var-line{font-size:var(--t-footnote);font-weight:700;padding:7px 10px;border-radius:8px;margin-bottom:12px;background:#f5f7fb;color:var(--ink-soft)}
.cd-var-line.ok{background:rgba(105,176,72,.15);color:#3f7d20}
.cd-var-line.bad{background:rgba(255,90,106,.15);color:#c0392b}
.cd-var-line.over{background:rgba(240,170,20,.15);color:#9a6a00}
.cd-tobank{display:flex;align-items:center;gap:8px;font-size:var(--t-footnote);margin-bottom:12px}
.cd-save{width:100%;margin-top:6px}
.cd-hint{font-size:var(--t-caption);color:var(--ink-soft);margin-top:8px;text-align:center}
.dcr-phase{display:flex;gap:10px;margin-bottom:12px}
.dcr-radio{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;font-weight:700;font-size:var(--t-body)}
.dcr-radio.on{border-color:var(--brand,#1A4FD0);background:rgba(26,79,208,.07);color:var(--brand,#1A4FD0)}
.dcr-radio input{display:none}
.dcr-onhand{display:flex;flex-direction:column;gap:1px;background:#f5f7fb;border-radius:8px;padding:9px 11px;margin-bottom:12px;font-size:var(--t-footnote)}
.dcr-onhand b{font-size:var(--t-title3);font-variant-numeric:tabular-nums}
.dcr-onhand small{color:var(--ink-soft);font-size:var(--t-caption2)}
/* recon */
.cr-table{width:100%;border-collapse:collapse;font-size:var(--t-body);margin-bottom:8px}
.cr-table th{text-align:left;font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);padding:9px 10px;border-bottom:1.5px solid var(--line)}
.cr-table td{padding:11px 10px;border-bottom:1px solid var(--line)}
.cr-table td.r,.cr-table th.r{text-align:right;font-variant-numeric:tabular-nums}
.cr-table td.ok{color:#3f7d20}.cr-table td.bad{color:#c0392b}.cr-table td.over{color:#9a6a00}
.cr-tot td{font-weight:800;border-top:2px solid var(--line)}
.cr-desc{color:var(--ink-soft);font-size:var(--t-caption)}
.cr-note{font-size:var(--t-caption);color:var(--ink-soft);font-style:italic;margin:6px 0 18px}
.cr-print-hd{display:none}

/* ---- deposit slip print ----
   The deposit ticket no longer styles itself from this sheet. It renders into
   its own iframe document inside cashPrintSlip() (app.js) because the 8.5×5.5
   landscape template needs a document-level @page rule that would otherwise
   resize every other print in the OS. */

@media print{
  body.cash-printing-report #app>*{visibility:hidden}
  body.cash-printing-report #cashPrintReport,body.cash-printing-report #cashPrintReport *{visibility:visible}
  body.cash-printing-report #cashPrintReport{position:absolute;left:0;top:0;width:100%;padding:10px}
  body.cash-printing-report .cr-print-hd{display:block;font-size:var(--t-headline);font-weight:800;text-align:center;margin-bottom:14px}
  body.cash-printing-report .head-actions{display:none}
}

.cr-dt{font-size:var(--t-caption);color:var(--ink-soft);display:inline-flex;align-items:center;gap:5px}
.cr-dt input{padding:5px 7px;border:1px solid var(--line);border-radius:6px;font:inherit}
.cr-sel{padding:5px 8px;border:1px solid var(--line);border-radius:6px;font:inherit}
.cr-summary{display:flex;gap:20px;font-size:var(--t-footnote);margin:4px 0 12px;color:var(--ink-soft)}
.cr-summary b{color:var(--ink);font-size:var(--t-body)}
.cr-summary .warn b{color:#c0392b}
.cr-match{font-variant-numeric:tabular-nums;font-size:var(--t-footnote)}
.cr-match.ok{color:#3f7d20}
.cr-match.ok small{display:block;color:var(--ink-soft);font-size:var(--t-caption)}
.cr-match.none{color:#c0392b}
.cr-pw{color:var(--brand,#1A4FD0);text-decoration:none;font-size:var(--t-footnote);font-weight:600}
.cr-pw:hover{text-decoration:underline}
/* slip date -> opens the slip. A button, but it has to read as the date it
   replaced, so it inherits the cell's type and only picks up the link color. */
.cr-open{background:none;border:0;padding:0;font:inherit;color:var(--brand,#1A4FD0);
  font-weight:600;cursor:pointer;text-align:left}
.cr-open:hover{text-decoration:underline}

/* Sortable column headers — see wireSortableTables(). Deliberately quiet: the
   header stays a header, and the arrow only appears on the column in use, so
   a table nobody sorts looks exactly as it did before. */
.th-sort{cursor:pointer;user-select:none;position:relative;white-space:nowrap}
.th-sort:hover{color:var(--brand,#1A4FD0)}
.th-arrow{display:inline-block;width:11px;margin-left:4px;font-size:var(--t-caption2);
  color:var(--brand,#1A4FD0);vertical-align:middle}
.th-sort:hover .th-arrow:empty::after{content:"▲";opacity:.35}
th.sorted{color:var(--brand,#1A4FD0)}
@media print{ .th-arrow{display:none} .th-sort{color:inherit} }
@media print{ .cr-open{color:inherit;font-weight:inherit} }
.cr-mcell{min-width:230px}
.cr-sugg{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cr-match.sugg{color:#9a6a00}
.cr-mbtn{font-size:var(--t-footnote);border:1px solid var(--line);background:var(--card,#fff);border-radius:7px;padding:6px 16px;cursor:pointer}
.cr-mbtn.ok{border-color:#3f7d20;color:#3f7d20;font-weight:700}
.cr-pick{font-size:var(--t-caption);padding:5px 7px;border:1px solid var(--line);border-radius:6px;max-width:230px}
.cr-summary .ok2 b{color:#3f7d20}
@media print{.no-print{display:none} .cr-pick,.cr-mbtn{display:none}}
.cash-row.voided{opacity:.6}
.cash-row.voided .cr-amt{text-decoration:line-through}
.chip.void{background:rgba(255,90,106,.15);color:#c0392b}
.cd-void{color:#c0392b}
.cd-editlog{grid-column:1/-1;margin-top:14px;padding:10px 14px;background:#f5f7fb;border:1px solid var(--line);border-radius:8px;font-size:var(--t-caption)}
.cd-editlog-h{font-weight:800;text-transform:uppercase;font-size:var(--t-caption2);letter-spacing:.03em;color:var(--ink-soft);margin-bottom:6px}
.cd-editlog-row{padding:2px 0}
.cd-editlog-note{color:var(--ink-soft);font-style:italic;margin-top:5px;font-size:var(--t-caption)}
.cd-ncr{font-size:var(--t-caption2);font-weight:700;color:#3f7d20;background:rgba(105,176,72,.14);padding:1px 6px;border-radius:10px;margin-left:6px}
.cd-varexplain{margin:0 0 12px}
.cd-varexplain label{font-size:var(--t-caption);font-weight:700;color:#c0392b}
.cd-varexplain small{font-weight:500;color:var(--ink-soft)}
.cd-varexplain textarea{width:100%;border:1px solid #e0a; border-color:rgba(192,57,43,.4);border-radius:6px;padding:6px 8px;font:inherit}

/* ── Chart & Graph Guide (Tools > Chart Guide) ────────────────────────────────
   Static reference for picking a chart type. Reuses the app's own palette
   (--blue-mid/--cyan/--chart) but pairs the two per-card icons as blue + amber
   (#fdab3d, matching --st-doing) instead of blue + cyan — two blue-family
   badges sitting side-by-side on every single card read as "blue on blue" and
   were hard to tell apart at a glance. */
.chart-glossary .cg-legend{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:8px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.chart-glossary .cg-legend-item{display:flex;align-items:center;gap:8px;font-size:var(--t-footnote);color:var(--ink-soft)}
.chart-glossary .cg-chip{width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-caption2)}
.chart-glossary .cg-chip-what{background:rgba(26,79,208,.12);color:var(--blue-mid)}
.chart-glossary .cg-chip-build{background:rgba(253,171,61,.22);color:#8a5710}
.chart-glossary .cg-chip-best{background:rgba(214,226,74,.24);color:var(--chart-ink)}
.chart-glossary .cg-section{margin-top:34px}
.chart-glossary .cg-section-head{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.chart-glossary .cg-section-head h2{font-family:Poppins,Figtree,sans-serif;font-size:var(--t-headline);font-weight:700;margin:0;color:var(--ink)}
.chart-glossary .cg-q{font-size:var(--t-footnote);color:var(--muted);font-style:italic}
.chart-glossary .cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}
.chart-glossary .cg-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 16px 18px;display:flex;flex-direction:column;gap:12px;transition:transform .15s ease,box-shadow .15s ease}
.chart-glossary .cg-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.chart-glossary .cg-viz{height:112px;border-radius:var(--r-sm);background:var(--bg);display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden}
.chart-glossary .cg-viz svg{width:100%;height:100%;overflow:visible}
.chart-glossary .cg-title{font-family:Poppins,Figtree,sans-serif;font-size:var(--t-body);font-weight:700;color:var(--ink)}
.chart-glossary .cg-tags{display:flex;gap:6px;flex-wrap:wrap}
.chart-glossary .cg-tag{font-size:var(--t-caption2);font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:rgba(214,226,74,.22);color:var(--chart-ink);white-space:nowrap}
.chart-glossary .cg-field{display:flex;gap:9px;align-items:flex-start;font-size:var(--t-footnote);color:var(--ink-soft)}
.chart-glossary .cg-field b{flex:0 0 auto;width:26px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:var(--t-caption2);font-weight:800;margin-top:1px}
.chart-glossary .cg-ic-what{background:rgba(26,79,208,.12);color:var(--blue-mid)}
.chart-glossary .cg-ic-build{background:rgba(253,171,61,.22);color:#8a5710}
.chart-glossary .cg-foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--t-caption)}
.cr-vnote{font-size:var(--t-caption2);color:var(--ink-soft);font-weight:400;font-style:italic;text-align:right;max-width:180px;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* All-day/multi-day bars must run LEVEL across the row, like Google's. Every
   date number occupies the exact same 23px box — plain number or today's
   21px badge — because the badge's extra 1-2px stepped a crossing bar down
   in today's column (Chad, 2026-07-30: "Steve Lindsey is not showing like an
   all day event"). Deeper -16px bridge: -14px left only 1px of rounding
   slack over the 13px cell gap, opening hairline seams at some zooms. */
.cal-grid .cal-date{height:23px;min-height:23px;margin:0;display:flex;align-items:center;padding:0}
.cal-grid .cal-cell.today .cal-date{height:21px;min-height:21px;margin:1px 2px 1px 0}
.cal-grid .cal-pill.span-start{margin-right:-16px}
.cal-grid .cal-pill.span-mid{margin-left:-16px;margin-right:-16px}
.cal-grid .cal-pill.span-end{margin-left:-16px}

/* calendar panel ≡ drag-to-reorder grip */
.cal-side-row .cs-grip{margin-left:auto;flex:0 0 auto;color:var(--muted);cursor:grab;font-size:var(--t-body);line-height:1;padding:2px 5px;border-radius:5px;touch-action:none;user-select:none;-webkit-user-select:none;opacity:.35;transition:opacity .12s}
.cal-side-row:hover .cs-grip{opacity:.95}
.cs-grip:active{cursor:grabbing;background:var(--line-soft)}
.cal-side-row.dragging{opacity:.8;background:var(--line-soft);box-shadow:0 2px 8px rgba(10,20,60,.18)}
@media (hover:none){.cal-side-row .cs-grip{opacity:.6}}

/* #63 "Recently deleted" drawer — foot of the calendar Sources column.
   Collapsed and quiet by design: it's an undo you reach for after a mistake,
   not something that should compete with the source checkboxes above it. */
.cal-trash{margin-top:14px;padding-top:10px;border-top:1px solid var(--line-soft)}
.cal-trash>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;padding:5px 4px;border-radius:8px;font-size:var(--t-caption);color:var(--muted)}
.cal-trash>summary::-webkit-details-marker{display:none}
.cal-trash>summary:hover{background:var(--bg);color:var(--ink)}
.cal-trash>summary::after{content:"▸";margin-left:auto;font-size:var(--t-caption2);transition:transform .15s}
.cal-trash[open]>summary::after{transform:rotate(90deg)}
.cal-trash .ct-ico{font-size:var(--t-caption);opacity:.8}
.cal-trash .ct-lbl{font-weight:600}
.cal-trash .ct-n:not(:empty){background:var(--line-soft);color:var(--muted);border-radius:99px;padding:0 6px;font-size:var(--t-caption2);font-weight:700;line-height:16px}
.ct-body{padding:4px 0 2px}
.ct-empty{padding:8px 4px;font-size:var(--t-caption)}
.ct-row{display:flex;align-items:flex-start;gap:8px;padding:7px 4px;border-radius:8px}
.ct-row:hover{background:var(--bg)}
.ct-main{flex:1;min-width:0}
.ct-title{font-size:var(--t-caption);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* wraps rather than truncating — in a column this narrow an ellipsis ate the
   "deleted by whom", which is the whole point of the row */
.ct-meta{font-size:var(--t-caption2);color:var(--muted);line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.ct-exp{opacity:.8}
.ct-restore{flex:0 0 auto;padding:2px 9px;font-size:var(--t-caption2)}

/* ✨ full-call transcript block under a meeting recording */
.rec-transcript{margin:6px 0 10px;padding:9px 12px;background:var(--bg);border:1px solid var(--line-soft);border-radius:10px}
/* No inner scroll: a full-call transcript is read down the page, not through
   a 190px window (Chad, 2026-09-02). */
.rec-tx-body{margin-top:6px;font-size:var(--t-caption);line-height:1.55;color:var(--ink-soft);white-space:pre-wrap}

/* Google Workspace groups card in the Admin console */
.ws-card{margin:14px 0;padding:14px 16px;background:#fff;border:1px solid var(--line-soft);border-radius:12px;box-shadow:0 1px 4px rgba(10,20,60,.06)}
.ws-card input[type="text"],.ws-card input:not([type]){border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-family:inherit;font-size:var(--t-footnote)}

/* collapsible Meetings-hub sidebar section headers */
.side-sec-h{border:none;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;text-align:left;font:inherit}
.side-sec-h:hover{color:var(--blue-mid)}
/* the collapse caret was a 10px glyph inside a 10px header — "really too
   small" (Chad, 2026-08-19). A real 14px caret with its own hit area. */
.msec-caret{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:-4px;border-radius:6px;font-size:var(--t-body);line-height:1;color:var(--ink-soft);background:var(--line-soft)}
.side-sec-h:hover .msec-caret{background:#dfe6f5;color:var(--blue-mid)}
.msec-head{min-height:26px}

/* drag-reorderable Meetings-hub sidebar sections */
.msec-head{justify-content:flex-start;gap:6px}
.msec-head .msec-grip{margin-left:auto;flex:0 0 auto;color:var(--muted);cursor:grab;font-size:var(--t-footnote);line-height:1;padding:1px 5px;border-radius:5px;touch-action:none;user-select:none;-webkit-user-select:none;opacity:.3;transition:opacity .12s}
.msec:hover .msec-grip{opacity:.9}
.msec-grip:active{cursor:grabbing}
.msec.dragging{opacity:.85;background:var(--line-soft);border-radius:8px}

/* Meetings-hub top filter bar */
.hub-filterbar{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.hub-fsel{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-family:inherit;font-size:var(--t-caption);background:#fff;color:var(--ink)}

/* FFC Houma Schedule Scenario card (loan-close-anchored dependency chain) */
.scn-card{background:#f7f9fc;border:1px solid #eceef4;border-radius:12px;padding:14px 18px;margin-bottom:18px}
.scn-inputs{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:10px 0 4px}
.scn-inputs label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-caption);color:var(--ink-soft);font-weight:600}
.scn-inputs input{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-family:inherit;font-size:var(--t-footnote);background:#fff;color:var(--ink);width:150px}
.scn-inputs input[type=number]{width:110px}
.scn-chain{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap;margin-top:10px}
.scn-step{background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:7px 12px;min-width:96px}
.scn-step:last-child{background:#e6f6ec;border-color:#137a3a}
.scn-step:last-child .scn-d{color:#137a3a}
.scn-l{font-size:var(--t-caption2);color:var(--ink-soft);font-weight:600;white-space:nowrap}
.scn-d{font-size:var(--t-footnote);font-weight:700;white-space:nowrap}
.scn-arrow{align-self:center;color:#aab;font-weight:700}
.scn-warn{margin-top:8px;background:#fff4e0;border:1px solid #e8c46a;color:#9a6700;border-radius:8px;padding:7px 11px;font-size:var(--t-caption);font-weight:600}

/* ============================================================
   Calendar redesign — design handoff 2026-08-01, Step 1 (§3)
   Header (month = h1), grouped source column, kind-tinted event
   pills, capped cells + "+N more", third-column detail panel.
   ============================================================ */

/* — header: month label is the page title — */
.cal-head{align-items:center;gap:14px;flex-wrap:wrap}
.cal-head-l{display:flex;align-items:center;gap:14px;min-width:0}
.cal-h1{font-family:Poppins,Figtree,sans-serif;font-size:var(--t-title1);font-weight:800;letter-spacing:-.5px;color:var(--blue-deep);border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.cal-h1-caret{font-size:var(--t-footnote);opacity:.4;transition:opacity .15s}
.cal-h1:hover .cal-h1-caret{opacity:.9}
/* REFINED CHROME (Chad, 2026-08-14: "the buttons and the navigation are really
   large — I'd like them refined and smaller", holding it next to the Mac).

   The controls were sized like page-level buttons when they are really a
   toolbar: on the Mac the whole switcher is about the height of one line of
   text and recedes, because the calendar is the thing you came to look at. Ours
   were competing with the grid for attention and eating a band of vertical
   space the month could have used. Everything below is the same control set,
   two to four pixels tighter and a step down in weight. */
/* #179 (Chad, 2026-08-14: "I want to make sure the entire OS has the same
   menu format or layout"). These refinements were born scoped to .page-cal so
   nothing else moved while the calendar was being iterated — that scoping
   became the gap: the calendar looked refined and every other module still
   carried the older, larger chrome. The GENERALIZABLE rules below now target
   the shared .topbar (kept at two-class specificity so they beat the base
   rules by source order, exactly as the .page-cal versions did); only the
   calendar's own controls (‹ › month nav, the round ＋, .cal-h1, its frame)
   stay scoped. Phone (≤767px) keeps its own flex layout — see the
   display:flex guard in components.css. */

/* THE TOOLBAR IS THREE COLUMNS (Chad, 2026-08-14: "move those to more of the
   centre of the page… I like the way it uses the bubble effect for the way the
   month, day and year view is in the centre").

   On the Mac the switcher is centred on the WINDOW, not floated between its
   neighbours — so it stays put as the title next to it changes length from
   "May 2026" to "September 2026". A flex row can't do that: the middle item
   drifts by half of whatever the sides weigh. A 1fr/auto/1fr grid pins the
   centre column to the true middle and lets the title and the actions grow
   outward from it, which is what makes it read as anchored. */
.topbar .topbar-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;flex-wrap:nowrap}
.topbar .topbar-title{grid-column:1;justify-self:start;flex:0 0 auto}
.topbar .topbar-views{grid-column:2;justify-self:center;margin-left:0;flex:0 0 auto;overflow:visible}
.topbar .topbar-actions{grid-column:3;justify-self:end;margin-left:0;flex:0 0 auto}
/* Same rhythm under the bar in every module (the calendar ran at 10px). */
.topbar{margin-bottom:10px}
/* The title leads without hero size. The SIZE is the roles.css contract
   (--role-modtitle-size), not a new literal here — hardcoding 21px would put
   every topbar module 1px off the .page-head pages the token already covers.
   This rule only kills the old 26px hero override, which out-specified the
   token rule. */
.topbar .topbar-title h1{font-size:var(--role-modtitle-size,21px);letter-spacing:-.4px}
/* ‹ › are 38px round pills from .topbar-actions .cal-nav .btn — that selector
   sets an explicit width AND height, so padding alone can't shrink them; the
   size has to be restated. Matching .topbar-actions here keeps the specificity
   equal and lets source order decide, and #calToday needs its own line because
   an id outranks any number of classes. */
.topbar-actions .cal-nav .btn{width:29px;height:29px;font-size:var(--t-footnote);
  border:1px solid var(--line);background:#fff;color:var(--ink-soft)}
.topbar-actions .cal-nav .btn:hover{border-color:var(--cyan);color:var(--blue-mid)}
.topbar-actions .cal-nav #calToday{width:auto;height:29px;padding:0 12px;
  font-size:var(--t-caption);font-weight:600;color:var(--ink-soft)}
.topbar-actions .cal-nav #calToday:hover{color:var(--blue-mid)}
/* The switcher is .view-tabs/.view-tab — the shared module control, not .seg.
   Fully rounded track with a rounded selected pill inside it: that is the
   "bubble effect" Chad is pointing at, and at this size the roundness is what
   makes a small control still read as a control. */
.topbar .view-tabs{border-radius:999px;padding:2px;gap:1px;background:#f0f1f5;border:1px solid var(--line-soft);box-shadow:none}
.topbar .view-tab{padding:4px 13px;font-size:var(--t-caption);gap:0;min-height:0;border-radius:999px}
.topbar .view-tab.on{background:#fff;color:var(--blue-deep);box-shadow:0 1px 2.5px rgba(16,24,64,.16)}
/* The view icons were decoration at this size — the words already say it, and
   dropping them is most of what buys the switcher back its compactness. */
.topbar .view-tab .v-icon{display:none}
/* The one primary action per module keeps its fill but stops being the
   biggest thing on the row. :not(.cal-add) leaves the calendar's round ＋
   alone — it has its own 29px circle below. */
.topbar .topbar-actions > .btn:not(.cal-add){padding:6px 13px;font-size:var(--t-caption);font-weight:700;border-radius:9px;min-height:0}
/* The month title still leads, just not at hero size. */
.page-cal .cal-h1{font-size:var(--t-title3);letter-spacing:-.4px}
/* The detail column was a fixed 262px in six places (Chad, 2026-08-14: "it
   opens up a taskbar on the right, but it's still a little thin — that could
   come over some more to be able to see more details"). It is one variable
   now, widened to 330px, so the width is stated once and is ready to become
   draggable rather than being hunted down in six rules. */
:root{--cal-detail-w:330px}

/* ＋ at the top left, Apple's placement. Round, quiet, and the same size as
   the ‹ › pills so the two ends of the toolbar balance. */
.page-cal .cal-add{width:29px;height:29px;padding:0;border-radius:50%;font-size:var(--t-headline);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue-royal);color:#fff;border:none;font-weight:600}
.page-cal .cal-add:hover{filter:brightness(1.08)}
.page-cal .topbar-title{display:flex;align-items:center;gap:10px}

/* THE FRAME (Chad, 2026-08-14: "look at the space around the calendar, the
   border"). The width cap was already off, but the page still reserved 26px
   above and 40px below the grid — a band of empty page top and bottom while
   the cells inside were cramped enough to hide events behind "+2 more". A
   calendar is one of the few screens that genuinely wants the whole window, so
   that padding goes back to the grid. The class is .page-cal (set in
   renderMeetCalendar) and this is stated at full specificity so it lands after
   the two earlier .page-cal rules rather than racing them. */
/* 2026-09-04, Chad: "we have a lot of waste space with the margins around it
   ... there's a quarter inch margin on the side of it." Measured on the live
   page at 1710px: 18px here plus 22px of .cal-main padding-left = 40px of
   window spent on gutter, against 175px day columns. Both are cut to 8/12; the
   grid gains 20px, which is what stops an event title truncating one word
   earlier now that the pill text is a step larger. */
.page.page-flush.page-cal{padding:12px 8px 14px 0}
.page.page-flush.page-cal .topbar{margin-bottom:10px}

/* ── #178: the drag line between a rail and its content (and on the calendar
   detail column). Injected by wireRailResize() into any grid shell whose
   tracks read --rail-w / --cal-detail-w; positioned off the same variable it
   drags, so it rides along live. Invisible until hovered — the affordance is
   the col-resize cursor plus a hairline that lights up. */
.rz-host{position:relative}
.rz-grip{position:absolute;top:0;bottom:0;width:9px;cursor:col-resize;z-index:5;touch-action:none}
.rz-grip::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:transparent;transition:background .15s}
.rz-grip:hover::after,.rz-grip.dragging::after{background:var(--cyan)}
body.rz-col{user-select:none;-webkit-user-select:none}
body.rz-col *{cursor:col-resize !important}
/* Phone stacks the rails full-width — nothing to drag. CSS, not a JS width
   check, so a zero-width render can never wrongly skip the desktop grips. */
@media(max-width:767px){.rz-grip{display:none}}

/* ── #202: team location — the 📍 button and the Who's-where card */
.greet-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.loc-card{display:flex;flex-direction:column;gap:6px;padding:12px 16px}
.loc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:3px 0}
.loc-name{font-weight:700;color:var(--ink)}
.loc-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-soft);
  background:#fff;border-radius:999px;padding:3px 10px;font-size:var(--t-caption);font-weight:600;color:var(--ink-soft)}

/* — three-column shell: sources · calendar · detail — */
.cal-flex{grid-template-columns:var(--rail-w) minmax(0,1fr)}
.cal-flex.has-detail{grid-template-columns:var(--rail-w) minmax(0,1fr) var(--cal-detail-w)}
.cal-flex.no-src{grid-template-columns:1fr}
.cal-flex.no-src.has-detail{grid-template-columns:minmax(0,1fr) var(--cal-detail-w)}
.cal-flex.has-detail:has(.cal-side-col.hidden){grid-template-columns:minmax(0,1fr) var(--cal-detail-w)}
.cal-flex.has-detail .cal-side-col.hidden + .cal-main{grid-column:auto}
.cal-side-col{border-radius:16px}
@media(max-width:1199px){.cal-detail{display:none}.cal-flex.has-detail,.cal-flex.no-src.has-detail{grid-template-columns:var(--rail-w) minmax(0,1fr)}.cal-flex.no-src.has-detail{grid-template-columns:1fr}}

/* — Agenda carries the same detail column (Chad, 2026-08-05: an event has to
     open from every view, not just the grid ones). Same var(--cal-detail-w) track and same
     1199px cutoff as .cal-flex so the calendar's third column is one width
     wherever it appears. Collapses to plain block when nothing is selected, so
     an unselected agenda is byte-for-byte the layout it already was. — */
.agenda-flex.has-detail{display:grid;grid-template-columns:minmax(0,1fr) var(--cal-detail-w);gap:16px;align-items:start}
/* .page-flush pins .cal-detail to grid-row 2 for the month/week/day grid, which
   has a header row above the calendar. Agenda has ONE row, so that rule dropped
   the panel into an implicit second row and it rendered at the BOTTOM of the
   page instead of beside the first card. */
.agenda-flex .cal-detail{grid-column:auto;grid-row:auto;align-self:start}
@media(max-width:1199px){.agenda-flex.has-detail{display:block}}
.meet-card.sel{border-color:var(--blue-royal);box-shadow:0 0 0 2px rgba(23,51,165,.18),var(--shadow-md)}
/* A year day carrying events is a target in its own right — it opens that day. */
.yr-d[data-day]{cursor:pointer;border-radius:4px}
.yr-d[data-day]:hover{background:rgba(23,51,165,.12)}

/* — source column (grouped like the rail) — */
.cal-src-head{font-size:var(--t-caption2);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
.cal-src-head:first-child{margin-top:2px}
.cal-src-row{gap:9px;padding:5px 4px}
.cal-src-row input{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:0 0 16px;border-radius:5px;border:2px solid var(--src,#1733a5);background:#fff;margin:0;padding:0;display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s}
.cal-src-row input:checked{background:var(--src,#1733a5)}
.cal-src-row input:checked::after{content:"✓";color:#fff;font-size:var(--t-caption2);font-weight:800;line-height:1}
.cal-src-row input:focus-visible{box-shadow:var(--ring);outline:none}
.cal-src-row .src-logo{width:16px;height:16px;flex:0 0 16px;object-fit:contain;border-radius:4px}
.cal-src-row .cs-name{font-size:var(--t-caption);font-weight:600}
.cal-src-row:has(input:not(:checked)) .cs-name{color:#9a9db0}
.cal-src-note{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:var(--t-caption2);color:var(--muted);line-height:1.5}
.cal-src-title{font-size:var(--t-caption2);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* — month grid: flat white card, hairline rules, circled dates — */
/* overflow VISIBLE, deliberately. This card sits between the month run and the
   scroller (.cal-main), and an ancestor with overflow:hidden becomes the sticky
   element's scroll container — so it silently killed position:sticky on the
   month labels AND on the weekday header: they simply scrolled away with the
   grid. It was here to clip the old bordered grid to a rounded corner; the grid
   now draws its own hairlines from the gaps, so there is nothing left to clip.
   (Chad, 2026-08-14: the month should ride up and hand off to the next one.) */
.cal-card-month{padding:0;overflow:visible;border-radius:16px}
.cal-card-month .cal-grid-head{gap:0;padding:8px 0 6px;border-bottom:1px solid #eceef4;margin:0}  /* was 12/9 — 21px of chrome around one caption line */
.cal-card-month .cal-grid{gap:0}
/* 104 fit four 12px pills. At 13px a pill is 22px, so 104 fits three and the
   fourth event disappears behind "+n more" — the bump would have COST
   information. 120 keeps all four. */
.cal-card-month .cal-cell{background:#fff;border:none;border-right:1px solid #eceef4;border-bottom:1px solid #eceef4;border-radius:0;min-height:120px;padding:6px}
.cal-card-month .cal-cell:nth-child(7n){border-right:none}
.cal-card-month .cal-cell.today{background:rgba(55,189,245,.06);box-shadow:none}
.cal-card-month .cal-cell.out{opacity:1;background:#fafbfd}
.cal-card-month .cal-cell.out .cal-date{color:#b4b7c6}
.cal-card-month .cal-cell.out .cal-pill{opacity:.55}
.cal-card-month .cal-date{align-self:flex-end;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:99px;font-size:var(--role-caldate-size);font-weight:700;color:var(--ink-soft);text-align:center;padding:0}  /* 21→24: a two-digit date at 15px does not fit a 21px circle */
.cal-card-month .cal-date:hover{background:var(--line-soft);text-decoration:none}
.cal-card-month .cal-cell.today .cal-date{background:var(--blue-royal);color:#fff}

/* — a TIMED event in the month grid: dot · title · time. NO FILL —
   Chad, 2026-08-14: "I like the way Apple Calendar has the events that have a
   time on them do not appear in a colour shaded area — they're just a bullet
   dot ready to go."

   Only ALL-DAY entries get a filled bar now, which is what makes them read as
   spanning the day; a timed event is a point in time, so it gets a dot and
   plain text. It also buys back a lot of ink: a month cell holding five timed
   events was five stacked colour blocks, and the colour stopped meaning
   anything. Title first with the time pushed right, matching the Mac.

   The fill/edge here was overriding the original dot rule further up the
   sheet, so this replaces it rather than adding another layer. */
.cal-pill.ep-line{background:none;border-left:none;border-radius:5px;padding:1px 5px;gap:6px}
.cal-pill.ep-line::before{content:"";display:block;flex:0 0 7px;width:7px;height:7px;
  border-radius:50%;background:var(--evc,#1733a5)}
.cal-pill.ep-line:hover{background:rgba(20,30,60,.06);filter:none}
/* Order, not markup: the pill emits time-then-title, and both the Calendar
   module and the views-package calendar share that template — flipping it here
   fixes both without touching either renderer. */
.cal-pill.ep-line .ep-time{order:3;margin-left:auto;padding-left:4px;font-size:var(--t-caption2);font-weight:600;color:var(--muted);flex:0 0 auto}
.cal-pill.ep-line .ep-t{order:2;font-size:var(--t-caption2);flex:1 1 auto;color:var(--ink);font-weight:600}
/* A completed/dimmed timed event keeps the dot but greys the text. */
.cal-pill.ep-line.dim::before{opacity:.5}
/* kind fallback colors — :where keeps specificity at .cal-pill.ep-line so the
   board rules re-asserted right below (and inline Google colors) still win */
.cal-pill.ep-line:where(.k-meet){--evc:#1733a5}
.cal-pill.ep-line:where(.k-task){--evc:#fdab3d}
.cal-pill.ep-line:where(.k-special){--evc:#00c875}
.cal-pill.ep-line:where(.k-marker){--evc:#8b8fa3}
.ep-line.b-company{--evc:var(--s-company)}
.ep-line.b-csc-houma{--evc:var(--s-csc-houma)}
.ep-line.b-csc-thib{--evc:var(--s-csc-thib)}
.ep-line.b-ffc-houma{--evc:var(--s-ffc-houma)}
.ep-line.b-ffc-thib{--evc:var(--s-ffc-thib)}
.cal-pill.sel{box-shadow:var(--ring);animation:calpop .3s var(--ease-emph)}
@keyframes calpop{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.cal-more{font-size:var(--t-caption2);font-weight:700;color:var(--muted);padding:1px 7px;border:none;background:none;cursor:pointer;text-align:left}
.cal-more:hover{color:var(--blue-mid)}

/* — detail panel (third column) — */
.cal-detail{background:#fff;border:1px solid var(--line-soft);border-radius:16px;box-shadow:0 12px 28px rgba(8,26,102,.12);padding:16px;position:sticky;top:14px;max-height:85vh;overflow:auto;animation:cdfade .28s cubic-bezier(.2,.8,.25,1)}
@keyframes cdfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cd-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cd-x{border:none;background:none;font-size:var(--t-footnote);color:var(--muted);cursor:pointer;padding:4px 7px;border-radius:7px}
.cd-x:hover{background:var(--line-soft);color:var(--ink)}
.cd-title{font-family:Poppins,Figtree,sans-serif;font-size:var(--t-headline);font-weight:800;letter-spacing:-.2px;margin:0 0 4px;line-height:1.3}
.cd-when{font-size:var(--t-caption);font-weight:600;color:var(--muted)}
.cd-rule{height:1px;background:var(--line-soft);margin:12px 0}
.cd-board{display:flex;align-items:center;gap:8px;font-size:var(--t-caption);font-weight:700;color:var(--ink-soft);margin-bottom:10px}
.cd-board img{width:18px;height:18px;object-fit:contain;border-radius:5px}
.cd-att{display:flex;align-items:center;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.cd-att .avatar{width:26px;height:26px;font-size:var(--t-caption2)}
.cd-att-more{font-size:var(--t-caption2);font-weight:700;color:var(--muted);margin-left:2px}
.cd-note{font-size:var(--t-caption);line-height:1.6;color:var(--ink-soft);margin-bottom:10px;white-space:pre-wrap}
.cd-loc{font-size:var(--t-caption);color:var(--ink-soft);margin-bottom:10px}
.cd-open-items{background:#fff7e6;border:1px solid #ffe1a8;color:#8a5a00;border-radius:10px;padding:8px 10px;font-size:var(--t-caption);font-weight:600;margin-bottom:12px}
.cd-cta{width:100%;background:var(--grad);color:#fff;font-weight:700;font-size:var(--t-footnote);border:none;border-radius:12px;padding:11px;cursor:pointer;box-shadow:0 6px 16px rgba(23,51,165,.3);transition:transform .15s,box-shadow .15s}
.cd-cta:hover{box-shadow:0 8px 20px rgba(23,51,165,.4)}
.cd-cta:active{transform:scale(.96)}

/* — agenda: day count chip — */
.day-count{border:1px solid var(--line-soft);border-radius:99px;padding:1px 8px;font-size:var(--t-caption2);font-weight:700;color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .cal-pill.sel{animation:none}
  .cal-detail{animation:cdfade .28s ease;animation-name:none;opacity:1}
  .cd-cta:active{transform:none}
}

/* ============================================================
   Home + Tasks redesign — design handoff 2026-08-01, Step 2
   (§1 greeting row + brief hero + store health, §2 task rows)
   ============================================================ */

/* — greeting row — */
.greet-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.greet-eyebrow{font-size:var(--t-caption2);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.greet-h1{margin:4px 0 0;font-family:Poppins,Figtree,sans-serif;font-size:var(--t-title1);font-weight:800;letter-spacing:-.5px;color:var(--blue-deep)}

/* — brief hero (the Daily Brief as the gradient hero) — */
.brief-hero{position:relative;overflow:hidden;background:var(--grad);border-radius:20px;color:#fff;padding:22px 24px;margin-bottom:26px;box-shadow:0 16px 40px rgba(8,26,102,.14);display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:stretch}
.brief-hero::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(214,226,74,.2),transparent 65%);top:-220px;right:-60px;pointer-events:none}
.brief-hero.loading,.brief-hero.no-decide{grid-template-columns:1fr}
.bh-main{position:relative;z-index:1;min-width:0}
/* Eyebrow left, actions grouped hard right. space-between alone spread the
   three items evenly and left Customize floating in the middle of the brief. */
.bh-top{display:flex;align-items:center;gap:8px}
.bh-top .bh-slack:first-of-type{margin-left:auto}
.bh-eyebrow{display:flex;align-items:center;gap:7px;font-size:var(--t-caption2);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--chart)}
.bh-pulse{width:7px;height:7px;border-radius:50%;background:var(--chart);box-shadow:0 0 0 0 rgba(214,226,74,.7);animation:bhpulse 2s infinite}
@keyframes bhpulse{70%{box-shadow:0 0 0 7px rgba(214,226,74,0)}100%{box-shadow:0 0 0 0 rgba(214,226,74,0)}}
.bh-slack{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;font-family:inherit;font-size:var(--t-caption);font-weight:700;border-radius:99px;padding:5px 12px;cursor:pointer;transition:.15s}
.bh-slack:hover{background:rgba(255,255,255,.2)}
.bh-slack:disabled{opacity:.6;cursor:default}
.bh-line{position:relative;z-index:1;margin:10px 0 0;font-family:Poppins,Figtree,sans-serif;font-weight:500;font-size:var(--t-title3);line-height:1.45;letter-spacing:-.2px}
.bh-line b{color:var(--chart);font-weight:700}
.bh-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bh-stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:6px 13px;font-size:var(--t-caption);font-weight:600;color:#eaf2ff}
.bh-stat b{font-weight:800;color:#fff;margin-left:2px}
.bh-stat[role=button]{cursor:pointer;transition:.15s}
.bh-stat[role=button]:hover{background:rgba(255,255,255,.22)}
.bh-stat.zero{opacity:.5}
.bh-stat.od{background:rgba(226,68,92,.3);border-color:rgba(226,68,92,.45);color:#fff;font-weight:700}
.bh-stat.od:hover{background:rgba(226,68,92,.45)}
/* The decision list is an inset PANEL inside the brief — the mockup gives it a
   visible hairline as well as the tint, which is what makes it read as a box
   rather than a slightly lighter patch of gradient. */
.bh-decide{position:relative;z-index:1;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:14px 15px}
.bh-decide-h{font-size:var(--t-caption2);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:10px}
.bh-drow{display:flex;align-items:flex-start;gap:9px;width:100%;border:none;background:none;color:#fff;font-family:inherit;text-align:left;padding:6px 4px;border-radius:8px;cursor:pointer;transition:background .15s}
.bh-drow:hover{background:rgba(255,255,255,.1)}
.bh-ddot{width:6px;height:6px;border-radius:50%;margin-top:6px;flex:0 0 6px}
.bh-ddot.red{background:#e2445c}.bh-ddot.amber{background:#fdab3d}
.bh-dt{display:block;font-size:var(--t-caption);font-weight:600;line-height:1.3}
.bh-ds{display:block;font-size:var(--t-caption2);color:rgba(255,255,255,.65);margin-top:1px}
/* ===== Notification bell — the @-mention inbox ===== */
.ab-bell{position:relative;width:36px;height:36px;flex:0 0 36px;border:none;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background var(--m-fast) ease,transform var(--m-fast) ease}
.ab-bell:hover{background:rgba(255,255,255,.22)}
.ab-bell:active{transform:var(--press,scale(.96))}
.ab-bell svg{width:18px;height:18px}
/* The count sits ON the bell. Red because an unread mention is someone waiting
   on you — the one badge in the app that should pull the eye. */
.ab-bell-dot{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:var(--st-stuck);color:#fff;font-size:var(--t-caption2);font-weight:800;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--blue-royal)}
.notif-menu{position:absolute;top:52px;right:12px;width:378px;max-height:70vh;overflow:auto;z-index:70;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:var(--shadow-md);padding:6px}
.nt-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px 6px;font-size:var(--t-caption2);font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.nt-all{border:none;background:none;padding:0;cursor:pointer;font-family:inherit;font-size:var(--t-caption2);
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-mid);
  text-decoration:underline;text-underline-offset:2px}
.nt-all:hover{color:var(--blue-deep)}
.nt-row{display:flex;gap:9px;width:100%;text-align:left;border:none;background:none;
  padding:9px 10px;border-radius:10px;cursor:pointer;transition:background var(--m-fast) ease}
.nt-row:hover{background:var(--bg)}
.nt-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;margin-top:6px;background:transparent}
.nt-row.unread .nt-dot{background:var(--cyan)}
.nt-row.unread .nt-head{font-weight:700}
.nt-acts{display:flex;align-items:center;gap:12px}
.nt-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
/* Per-row clear. Holds its width at all times so rows never reflow on hover;
   it only fades in, and stays visible once focused for keyboard users. */
.nt-x{flex:0 0 18px;width:18px;height:18px;margin-top:3px;padding:0;border:none;
  background:none;border-radius:50%;cursor:pointer;font-family:inherit;font-size:var(--t-body);
  line-height:1;color:var(--muted);opacity:0;transition:opacity var(--m-fast) ease,
  background var(--m-fast) ease,color var(--m-fast) ease}
.nt-row:hover .nt-x{opacity:1}
.nt-inv-acts{display:flex;gap:6px;margin-top:6px}
.nt-ans{border:1px solid var(--line);background:#fff;border-radius:9px;padding:3px 11px;cursor:pointer;
  font-family:inherit;font-size:var(--t-caption2);font-weight:600;color:var(--ink)}
.nt-ans:hover{border-color:var(--blue-deep);color:var(--blue-deep)}
.nt-ans.yes:hover{border-color:#0a7d43;color:#0a7d43}
.nt-ans.no:hover{border-color:#c0392b;color:#c0392b}
.nt-ans:disabled{opacity:.5;cursor:default}
.nt-x:hover{background:var(--line-soft);color:var(--ink)}
.nt-x:focus-visible{opacity:1;outline:2px solid var(--blue-mid);outline-offset:1px}
@media (hover:none){.nt-x{opacity:1}}   /* touch has no hover — always show it */
.nt-head{font-size:var(--t-caption);color:var(--ink);line-height:1.35}
.nt-title{font-size:var(--t-caption);font-weight:700;color:var(--ink-soft);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.nt-snip{font-size:var(--t-caption);color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-when{font-size:var(--t-caption2);color:var(--muted);margin-top:2px}
.nt-empty{margin:4px;padding:18px 14px;font-size:var(--t-caption);line-height:1.5}
.nt-spin{font-weight:800;color:var(--muted)}
/* ===== @-mention autocomplete ===== */
.mention-pop{position:fixed;z-index:200;width:260px;max-height:232px;overflow:auto;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  box-shadow:var(--shadow-md);padding:5px}
.mp-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;
  background:none;padding:6px 8px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:var(--t-footnote)}
.mp-row:hover,.mp-row.on{background:var(--bg)}
.mp-row .avatar{width:24px;height:24px;flex-basis:24px;font-size:var(--t-caption2)}
.mp-name{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-none{padding:9px 10px;font-size:var(--t-caption);color:var(--muted)}
/* a landed @mention inside posted text */
.mchip{background:#deebff;color:#0747a6;font-weight:600;border-radius:3px;padding:0 3px}
/* outbound email shown in a ticket's activity feed */
.act.comment.out .act-bubble{background:#f3fbf6;border:1px solid #cdeeda}
.act-subj{font-weight:600;margin:2px 0 4px}
.act-mailrow{display:flex;align-items:center;gap:10px;margin:8px 0 0 44px;flex-wrap:wrap}
.act-mailfrom{font-size:var(--t-caption);color:var(--muted)}
.act-mailtick{display:flex;align-items:center;gap:6px;font-size:var(--t-caption);color:var(--ink-soft);cursor:pointer}
.act-mailtick input{margin:0}
.act-sent{display:inline-block;margin-left:8px;font-size:var(--t-caption2);font-weight:700;
  background:#e3fcef;color:#006644;border-radius:3px;padding:1px 6px}
.act-sent.warn{background:#fff0b3;color:#974f0c}
/* This ticket line was caused by the linked task, not typed here. */
.act-via{color:var(--ink-soft);font-size:var(--t-caption2);font-style:italic}
/* an off-system contact logged by hand — visually distinct from email */
.act.comment.log .act-bubble{background:#f4f1fb;border:1px solid #ddd5f2}
.jsm-howto{margin-left:10px;font-size:var(--t-caption);font-weight:600;color:var(--blue-royal);
  text-decoration:none;white-space:nowrap}
.jsm-howto:hover{text-decoration:underline}
/* attach-an-email picker */
.am-list{max-height:min(52vh,420px);overflow:auto;border:1px solid var(--line-soft);border-radius:8px}
.am-row{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;
  border:none;border-bottom:1px solid var(--line-soft);padding:10px 12px;cursor:pointer}
.am-row:last-child{border-bottom:none}
.am-row:hover:not([disabled]){background:#f7f9fc}
.am-row[disabled]{opacity:.55;cursor:default}
.am-dir{flex:0 0 auto;font-size:var(--t-caption2);font-weight:700;border-radius:3px;padding:1px 6px;margin-top:2px}
.am-dir.out{background:#e3fcef;color:#006644}
.am-dir.in{background:#deebff;color:#0747a6}
.am-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.am-subj{font-weight:600;font-size:var(--t-footnote);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-meta{font-size:var(--t-caption);color:var(--muted)}
.am-snip{font-size:var(--t-caption);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-on{flex:0 0 auto;font-size:var(--t-caption2);color:var(--muted);align-self:center}
/* reply-template editor */
.modal.modal-wide{max-width:760px;width:calc(100vw - 48px)}
.tpl-row{border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;margin-bottom:12px;background:var(--bg)}
.tpl-row .tpl-body{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-caption)}

/* ---- Marketing shared inbox ---- */
.mkt-folders{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.mkt-split{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:0;
  border-top:1px solid var(--line-soft);min-height:460px}
.mkt-list{border-right:1px solid var(--line-soft);overflow:auto;max-height:calc(100vh - 220px)}
.mkt-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:
  "from date" "subj subj" "snip snip" "badge badge";gap:2px 10px;width:100%;text-align:left;
  border:none;border-bottom:1px solid var(--line-soft);background:none;
  padding:11px 14px;cursor:pointer;transition:background var(--m-fast) ease}
.mkt-row:hover{background:#f7f9fc}
.mkt-row.on{background:#eef4ff;box-shadow:inset 3px 0 0 var(--brand,#0747a6)}
.mkt-from{grid-area:from;font-weight:700;font-size:var(--t-footnote);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-date{grid-area:date;font-size:var(--t-caption2);color:var(--muted);white-space:nowrap}
.mkt-subj{grid-area:subj;font-size:var(--t-caption);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-snip{grid-area:snip;font-size:var(--t-caption);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Answered-or-not, the thing a shared inbox lives on */
.mkt-badge{grid-area:badge;margin-top:4px}
.mkt-replied{display:inline-block;font-size:var(--t-caption2);font-weight:700;letter-spacing:.02em;
  background:#e3fcef;color:#006644;border-radius:3px;padding:1px 6px}
.mkt-needs{display:inline-block;font-size:var(--t-caption2);font-weight:700;letter-spacing:.02em;
  background:#fff0b3;color:#974f0c;border-radius:3px;padding:1px 6px}
.mkt-row.answered .mkt-from{font-weight:600;color:var(--ink-soft)}
.mkt-tix{display:inline-block;margin-left:6px;font-size:var(--t-caption2);font-weight:700;
  background:#eef2ff;color:#3549a5;border-radius:3px;padding:1px 6px}
.mkt-tix-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  padding:8px 10px;background:#eef2ff;border:1px solid #ccd6f6;border-radius:8px;font-size:var(--t-caption)}
.mkt-tix-bar .btn{padding:3px 10px;font-size:var(--t-caption)}
.mkt-answered-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  padding:8px 10px;background:#f3fbf6;border:1px solid #cdeeda;border-radius:8px;font-size:var(--t-caption)}
.mkt-answered-bar .btn{padding:3px 10px;font-size:var(--t-caption)}
.mkt-read{display:flex;flex-direction:column;min-width:0}
.mkt-read-head{padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.mkt-read-head h3{margin:0 0 4px;font-size:var(--t-headline)}
.mkt-read-meta{font-size:var(--t-caption);color:var(--muted)}
.mkt-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.mkt-acts-lbl{font-size:var(--t-caption2);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-right:2px}
.mkt-read-body{flex:1;min-height:320px}
.mkt-frame{width:100%;height:100%;min-height:420px;border:0;background:#fff}
@media(max-width:900px){.mkt-split{grid-template-columns:1fr}
  .mkt-list{border-right:none;border-bottom:1px solid var(--line-soft);max-height:320px}}
.bh-waiting{opacity:.75}
.brief-clear{padding:6px 0}
@media(max-width:900px){.brief-hero{grid-template-columns:1fr}}

/* — store card health bar —
   Segment colour is a class, not an inline style, so a palette change is a
   stylesheet edit. Keys match healthSegs() in app.js. */
.sc-health{display:flex;gap:5px;padding:0 14px 11px}
.sc-health span{flex:1;height:7px;border-radius:99px;background:var(--st-todo)}
.sc-health .hs-done{background:var(--st-done)}
.sc-health .hs-late{background:var(--st-stuck)}
.sc-health .hs-work{background:var(--st-doing)}
.sc-health .hs-todo{background:var(--st-todo)}
/* At risk reads as a soft red ring, not a 2px slab — a thicker border shifted
   the card's contents 1px and made the row of cards look uneven. */
.store-card.at-risk{border-color:#f0b7bf;box-shadow:0 0 0 3px rgba(226,68,92,.10),var(--shadow)}
.store-card.at-risk:hover{box-shadow:0 0 0 3px rgba(226,68,92,.14),var(--shadow-md)}
.sc-stat.all-current{color:var(--muted);font-weight:500}

/* — task rows: priority dot, assign popover, add-row — */
.l-pri{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:#c4c4c4}
.l-pri.p-urgent{background:#e2445c}
.l-pri.p-high{background:#fdab3d}
.lrow.od{background:#fffafb}
.lrow .l-right{cursor:pointer;border-radius:99px;transition:transform .15s}
.lrow .l-right:hover{transform:scale(1.08)}
.lrow .l-right.assign-open .avatar{box-shadow:0 0 0 2px var(--blue-mid)}
.avatar.unassigned{background:#eceef4;color:#9a9db0;font-weight:800}
.lrow-add{display:block;width:100%;text-align:left;border:1px dashed var(--line);background:none;color:var(--muted);font-family:inherit;font-size:var(--t-caption);font-weight:600;border-radius:8px;padding:7px 10px;margin-top:4px;cursor:pointer;transition:.15s}
.lrow-add:hover{border-color:var(--cyan);color:var(--blue-mid);background:#fff}
.sg-caret{display:inline-block;transition:transform .15s}
.sg-caret.open{transform:rotate(90deg)}
/* SCOPED TO .am-float ON PURPOSE (Chad, 2026-08-03: "the dropdown doesn't
   open"). This block is for the assign menu that openAssignMenu() appends to
   <body> and positions with inline top/left — that one must be position:fixed.
   It used to match EVERY .assign-menu, which silently broke the three that
   live inside a drawer (#mTagMenu, #mAssignMenu, #nmInvMenu). Those sit in
   .assign-dd{position:relative} and rely on the earlier rule's
   `position:absolute; top:calc(100% + 6px)`. Flipping them to fixed left that
   `top:100%` resolving against the VIEWPORT instead of the button — so the
   menu rendered just past the bottom of the screen. It opened; you just
   couldn't see it. Tags, Assignee and the new-meeting Invite picker were all
   dead this way.
   Explicit width: the rows are width:100%, so a shrink-to-fit fixed-position
   parent resolves to the full viewport instead of hugging its content. */
.assign-menu.am-float{position:fixed;z-index:80;width:208px;background:#fff;border:1px solid var(--line-soft);border-radius:12px;box-shadow:0 12px 28px rgba(8,26,102,.12);padding:6px;max-height:320px;overflow:auto;animation:amdrop .16s ease}
@keyframes amdrop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.am-head{font-size:var(--t-caption2);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 8px 4px}
.am-row{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;font-family:inherit;font-size:var(--t-footnote);color:var(--ink);text-align:left;padding:6px 8px;border-radius:8px;cursor:pointer}
.am-row:hover{background:var(--bg)}
.am-row.on{background:#eef2ff;font-weight:600}
.am-row .avatar{width:24px;height:24px;font-size:var(--t-caption2)}
.am-check{margin-left:auto;color:var(--blue-mid);font-weight:800}
/* Status picker rows carry a real pill as their label, so the whole row has to
   read as one target — .status-pill.sm sets cursor:default for the read-only
   pills it was written for. */
.am-float .am-row .status-pill.sm{cursor:pointer}
.am-clear{color:var(--muted);font-size:var(--t-caption)}
/* The assignee popover is a stay-open toggle (Chad, 2026-08-07), so it needs a
   way OUT that isn't "click the page". Clear all / Done sit under a rule so
   they don't read as two more people.
   With eight people the list already scrolls, so the way out has to PIN to the
   bottom — a Done button you have to scroll to find is the same trap as a Close
   button at the foot of the task drawer. */
.am-float .am-clear,.am-float .am-done{position:sticky;background:#fff;border-radius:0;z-index:1}
.am-float .am-clear{bottom:30px;border-top:1px solid var(--line-soft);margin-top:4px;padding-top:8px;color:var(--muted);font-size:var(--t-caption)}
.am-float .am-done{bottom:0;color:var(--blue-mid);font-weight:700;justify-content:center;padding:7px 8px;box-shadow:0 -1px 0 var(--line-soft)}
.am-row .am-check{margin-left:auto;min-width:12px;text-align:right}
/* Move-to-board popover: logos where the avatars go. */
.am-bd-logo{width:20px;height:20px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--line-soft);flex:0 0 20px}
.am-bd-none{background:var(--line-soft);border-style:dashed}
/* The store cell is a button now — keep it looking like the text it replaced
   until you're actually on it. */
.l-store-btn,.tt-store-btn{appearance:none;border:none;background:none;font:inherit;cursor:pointer;
  padding:2px 6px;margin:-2px -6px;border-radius:8px;text-align:left}
.l-store-btn:hover,.tt-store-btn:hover,.l-store-btn.assign-open,.tt-store-btn.assign-open{background:var(--bg);color:var(--ink)}
.l-store-none{color:var(--muted);font-weight:500;font-style:italic}

@media (prefers-reduced-motion: reduce){
  .bh-pulse{animation:none}
  .assign-menu{animation:none}
  .lrow .l-right:hover{transform:none}
}

/* ============================================================
   Responsive + icons — design handoff 2026-08-01, Step 5
   Phone bottom tabs (additive: the ☰ drawer still holds the
   full nav), ≥44pt touch targets, reduced-motion respected.
   ============================================================ */
/* ===== v1 RESPONSIVE — three tiers, media queries only =====
   RESPONSIVE.md is explicit: never key layout off window.innerWidth in JS at
   render time. One render at zero width permanently hid the calendar rail.

   TABLET 768–1199 — the nav rail becomes a 68px ICON rail. The child rail does
   NOT change: it stays 240px, because that is the promise that it reads as one
   persistent rail whose contents swap. */
/* Every selector here carries :not(.open) as of 2026-09-04. When the rail is
   summoned as an OVERLAY from the collapsed state (components.css, the
   collapsible-sidebars block) it is a 270px drawer, not a 68px strip — icon-only
   styling inside it left a wide blue panel with the labels still suppressed.
   Gating on .open is better than undoing each rule afterwards: `display:revert`
   reverts to the USER-AGENT value, not to the author rule these override, so
   "putting the labels back" would have guessed wrong on half of them. */
@media(min-width:768px) and (max-width:1199px){
  .rail:not(.open){width:var(--rail-mini-w,68px);flex:0 0 var(--rail-mini-w,68px);
    background:linear-gradient(180deg,#081A66,#1f5ec2);padding:14px 8px}
  .rail:not(.open) .nav-item{justify-content:center;padding:0;width:46px;height:40px;margin:0 auto 6px;border-radius:12px}
  .rail:not(.open) .nav-item span,.rail:not(.open) .nav-cap-row,.rail:not(.open) .nav-label,.rail:not(.open) .nav-edit{display:none}
  .rail:not(.open) .nav-item svg{width:22px;height:22px;flex:0 0 22px}
  .rail:not(.open) .nav-item img,.rail:not(.open) .nav-mini{width:22px;height:22px}
  /* The active marker can't hang off a centred 46px button — it becomes a small
     square in the corner, in the item's own colour. */
  .rail:not(.open) .nav-item.active::before{content:"";left:auto;right:9px;bottom:4px;top:auto;
    width:6px;height:6px;border-radius:2px;background:var(--chart)}
  .rail:not(.open) .nav-badge,.rail:not(.open) .nav-chev{display:none}
}
.ab-burger{display:none}
.tabbar{display:none}
/* PHONE < 768 — no side rails at all. */
@media(max-width:767px){
  /* ONE top bar. .mobile-top predated the app bar and duplicated it — on a
     phone you got two stacked headers, ~110px of chrome before any content. */
  .mobile-top{display:none !important}
  .ab-burger{display:flex;align-items:center;justify-content:center;
    width:var(--appbar-ctl,44px);height:var(--appbar-ctl,44px);flex:0 0 auto;
    border:none;background:none;color:#fff;font-size:var(--t-title3);cursor:pointer;padding:0}
  .appbar{padding:0 6px;gap:6px}
  /* The phone override for the brand was already here and had NO effect:
     `.appbar.no-child-rail .appbar-brand` (two classes, line ~122) outranks a
     bare `.appbar-brand`, and a media query adds no specificity of its own. So
     the brand kept its fixed 219px basis on a 375px screen — 44 burger + 219
     brand + 140 controls + gaps = 421 — and the whole page sat ~46px wider
     than the phone, which is what let a fixed overlay put its close button
     off-screen. Match the specificity and let the brand SHRINK. */
  .appbar.no-child-rail .appbar-brand,.appbar-brand{width:auto;flex:0 1 auto;min-width:0;overflow:hidden}
  /* the logo mark itself must never be the thing that shrinks */
  .appbar-brand .mark,.appbar-brand .mark-img{flex:0 0 22px}
  /* bell + avatar are the controls people actually press — they hold size */
  .appbar-right{flex:0 0 auto}
  /* The content pane is the page. The child rail becomes a horizontally
     scrolling strip above it rather than a column stealing half the width —
     RESPONSIVE.md: "No overlay drawer… the chip row does the same job in 40px." */
  .mod-shell{display:block !important}
  /* !important on max-height because the desktop shell sets
     .mod-rail{height:calc(100vh - var(--appbar-h));max-height:none} — a full
     viewport-height rail is exactly what must not happen on a phone. */
  .mod-rail,.mtg-rail{width:auto !important;max-width:none !important;
    position:static !important;height:auto !important;max-height:148px !important;
    overflow:auto;border-right:none;border-bottom:1px solid var(--line-soft);
    padding:10px 12px !important;margin:0 0 10px !important;border-radius:0}
  .mod-rail .filter-row,.mod-rail .fchip{white-space:nowrap}
  /* The 7-track task row needs ~380px of FIXED tracks before the title gets a
     pixel, so at 390 the title vanished and the row ran off screen. On a phone
     the row keeps what you act on — complete, title, status, who — and drops
     the priority dot and the store column (the store is already the scope you
     picked in the strip above). Status pill 84px per RESPONSIVE.md. */
  .lrow,.lrow.no-store{grid-template-columns:19px minmax(0,1fr) 84px 58px 30px;gap:7px;padding:8px 6px}
  .lrow .l-pri,.lrow .l-store,.lrow>.l-cell-empty{display:none}
  .lrow .status-pill{width:100%;font-size:var(--t-caption2);padding:5px 0}
  .lrow .l-due{font-size:var(--t-caption2);padding:3px 6px}
  .lrow .avatar{width:26px;height:26px;flex-basis:26px;font-size:var(--t-caption2)}
  .l-title{font-size:var(--t-footnote)}
  /* Content padding per RESPONSIVE.md. The desktop 34px side padding was still
     applying, which cost 48px of a 390px screen and squeezed the title track
     down to 60px. */
  .page,.page-flush{padding:14px 14px 88px !important}
  .mod-doc{padding-left:0 !important}
  .list-card{padding:6px 4px !important}
  /* The module header scrolls rather than squeezing the title (§4.1). */
  .topbar-main{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .topbar-title h1{font-size:var(--t-title3)}
  /* Item detail is full pane and replaces the list; hit targets stay ≥44. */
  .id-body{grid-template-columns:minmax(0,1fr);gap:16px;padding:14px}
  .id-head{flex-wrap:wrap;gap:8px}
  .id-head .btn{min-height:44px}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:140;
    background:#fff;border-top:1px solid var(--line-soft);
    /* env() needs viewport-fit=cover (index.html) to be non-zero in the iPhone
       shell; the +8px is Chad's "moved up just a bit" on top of the inset. */
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
  .tabbar .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:48px;padding:7px 4px 6px;border:none;background:none;font-family:inherit;
    font-size:var(--t-caption2);font-weight:700;color:#8b8fa3;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tabbar .tab svg{width:20px;height:20px;flex:0 0 20px;opacity:.9}
  .tabbar .tab.on{color:var(--blue-royal)}
  .tabbar .tab.on svg{opacity:1}
  /* clear the bar so the last row of content is never trapped under it */
  .page{padding-bottom:88px}
  .ai-fab{bottom:calc(var(--tabbar-h,57px) + env(safe-area-inset-bottom,0px) + 14px)}
  .toast{bottom:92px}
  /* ≥44pt touch targets on every primary control */
  .btn,.fchip,.seg-btn,.nav-item,.view-item,.tab{min-height:44px}
  .btn,.fchip{padding-top:11px;padding-bottom:11px}
  .cal-head .cal-nav .btn,.cal-head .cal-arrow{min-width:44px;min-height:44px}
  .lrow{min-height:48px}
  .lrow .l-right,.lrow-add{min-height:44px}
  .am-row{min-height:44px}
  .cal-src-row{min-height:44px}
  .hs-ask{min-height:48px}
}
/* Tablet keeps the full labelled rail — the OS has too many same-icon
   destinations (several sections share the docs glyph) for an icon-only rail
   to stay legible. Revisit only with distinct per-section icons. */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .btn:active,.fchip:active,.tab:active{transform:none !important}
}

/* filter chips carry the brand mark + open count (design handoff §2) */
.fchip-logo{width:14px;height:14px;border-radius:4px;object-fit:contain;vertical-align:-2px;margin-right:5px}
.fchip-n{margin-left:6px;font-size:var(--t-caption2);font-weight:800;color:var(--muted);background:var(--bg);border:1px solid var(--line-soft);border-radius:99px;padding:0 6px}
.fchip.active .fchip-n{color:#fff;background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.3)}

/* Vault table row controls (Chad, 2026-08-02): pick a row, move it, delete it.
   All of this is edit-mode chrome — stripped from the HTML on save. */
.vt-tools .vt-sep{width:1px;height:18px;background:var(--line);display:inline-block;margin:0 2px}
.vt-tools button:disabled{opacity:.4;cursor:default}
.vt-tools button:disabled:hover{background:#fff;border-color:var(--line);color:var(--ink-soft)}
.vt-hint{font-size:var(--t-caption);color:var(--muted);font-weight:600;margin-left:4px}
/* the floating ≡ that pins itself to the selected table row (vault editor) */
.vt-tools .vt-grip{position:fixed;display:none;align-items:center;justify-content:center;width:26px;height:26px;padding:0;z-index:60;border:1px solid var(--line);border-radius:7px;background:#fff;box-shadow:0 2px 8px rgba(10,20,60,.14);color:var(--ink-soft);font-size:var(--t-body);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.vt-tools .vt-grip:active{cursor:grabbing;background:#eaf1fa}
tr.dragging{opacity:.7}
tr.vt-sel > td{background:#eef2ff}
tr.vt-sel > td:first-child{box-shadow:inset 3px 0 0 var(--blue-royal)}

/* ============================================================
   Workspace landing page — store / department / My Space
   (Chad, 2026-08-02). Brand-led hero + "where do you want to
   go" tiles, built from the same section list as the sidebar.
   ============================================================ */
/* The hero wears the NODE's gradient (8/2 handoff §6) — the inline
   background comes from NODE_SKIN so a store page reads as that store's own
   home rather than as one shared blue theme. */
.hub-hero{position:relative;overflow:hidden;border-radius:22px;margin-bottom:22px;color:#fff;
  box-shadow:0 16px 40px rgba(8,26,102,.14)}
.hub-glow{position:absolute;top:-220px;right:-60px;width:400px;height:400px;pointer-events:none;
  background:radial-gradient(circle,rgba(214,226,74,.2),transparent 65%)}
.hub-head{position:relative;display:flex;align-items:center;gap:16px;padding:22px 24px 18px;flex-wrap:wrap}
.hub-logo{width:54px;height:54px;flex:0 0 54px;border-radius:16px;background:#fff;padding:6px;
  display:flex;align-items:center;justify-content:center}
.hub-logo img{max-width:100%;max-height:100%;object-fit:contain}
.hub-logo-txt{color:var(--blue-deep);font-family:Poppins,Figtree,sans-serif;font-weight:800;font-size:var(--t-title3)}
.hub-title{min-width:0;flex:1}
.hub-kicker{font-size:var(--t-caption2);font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.hub-title h1{margin:2px 0 0;font-family:Poppins,Figtree,sans-serif;font-size:var(--t-title1);font-weight:800;
  letter-spacing:-.5px;color:#fff;line-height:1.15}
.hub-sub{color:rgba(255,255,255,.82);font-size:var(--t-footnote);margin-top:4px}
.hub-stats{display:flex;gap:8px;flex-wrap:wrap}
.hub-stat{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:14px;
  padding:9px 14px;font-size:var(--t-caption);font-weight:600;color:rgba(255,255,255,.82)}
.hub-stat b{display:block;font-family:Poppins,Figtree,sans-serif;font-size:var(--t-title3);font-weight:800;color:#fff}
.hub-stat.od b{color:#ffd7dd}

/* Today's brief (prose) beside Must happen today (checklist) */
.hub-brief{position:relative;display:grid;grid-template-columns:1fr 280px;gap:18px;
  padding:16px 24px 20px;margin-top:2px;border-top:1px solid rgba(255,255,255,.2)}
.hub-brief.no-prose{grid-template-columns:1fr}
.hb-prose p{margin:6px 0 0;font-family:Poppins,Figtree,sans-serif;font-weight:500;font-size:var(--t-headline);
  line-height:1.45;color:#fff}
.hb-prose b{color:#D6E24A;font-weight:700}
.hb-must{background:rgba(255,255,255,.09);border-radius:14px;padding:12px 14px}
.hbm-head{font-size:var(--t-caption2);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:6px}
.hbm-row{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:6px 2px;
  background:none;border:0;border-top:1px solid rgba(255,255,255,.12);cursor:pointer;
  text-align:left;font-family:inherit;color:#fff}
.hbm-row:first-of-type{border-top:0}
.hbm-box{flex:0 0 17px;width:17px;height:17px;border-radius:5px;border:2px solid rgba(255,255,255,.6)}
.hbm-row.done .hbm-box{background:var(--st-done,#00c875);border-color:var(--st-done,#00c875)}
.hbm-txt{flex:1;min-width:0;font-size:var(--t-footnote);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbm-row.done .hbm-txt{text-decoration:line-through;color:rgba(255,255,255,.55)}
.hbm-tag{flex:0 0 auto;font-size:var(--t-caption2);font-weight:700;color:rgba(255,255,255,.7)}
.hbm-tag.hot{color:#ffd7dd}
.hbm-empty{font-size:var(--t-caption);color:rgba(255,255,255,.7);padding:6px 0}

/* Home puts ＋ New task over the hero's top-right corner */
.hub-home-top{position:relative}
.hub-newtask{position:absolute;top:22px;right:24px;z-index:2}

/* Tiles = the sidebar, scoped to this node. 4 / 3 / 2 columns per §6. */
.hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:6px}
.hub-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  text-align:left;width:100%;background:var(--card);overflow:hidden;
  border:1px solid var(--line-soft);border-radius:18px;padding:16px 15px 14px;cursor:pointer;
  font-family:inherit;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,border-color .15s}
.ht-edge{position:absolute;top:0;left:0;right:0;height:4px;background:var(--tile-edge,var(--blue-royal))}
.hub-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(55,189,245,.45)}
.hub-tile:active{transform:scale(.98)}
.ht-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}
.ht-ic{flex:0 0 36px;width:36px;height:36px;border-radius:11px;background:var(--tile-tint,var(--grad-soft));
  display:flex;align-items:center;justify-content:center;color:var(--tile-accent,var(--blue-royal))}
.ht-ic svg{width:18px;height:18px}
.ht-badge{flex:0 0 auto;min-width:22px;text-align:center;border-radius:99px;padding:3px 8px;
  background:var(--bg);border:1px solid var(--line-soft);font-size:var(--t-caption);font-weight:700;color:var(--ink-soft)}
.ht-badge.hot{background:#fdecee;border-color:#f3c6cb;color:var(--st-stuck,#e2445c)}
.ht-name{display:block;font-family:Poppins,Figtree,sans-serif;font-weight:700;font-size:var(--t-footnote);
  letter-spacing:-.2px;color:var(--ink)}
.ht-desc{display:block;font-size:var(--t-caption);color:var(--muted);line-height:1.4}

@media(max-width:1199px){.hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){
  .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-head{padding:16px}
  .hub-title h1{font-size:var(--t-title2)}
  .hub-brief{grid-template-columns:1fr;padding:14px 16px 16px;gap:14px}
  .hb-prose p{font-size:var(--t-headline)}
  .hub-newtask{position:static;margin-top:10px;width:100%}
  .hub-tile{min-height:110px}
}
@media (prefers-reduced-motion: reduce){.hub-tile:hover{transform:none}.hub-tile:active{transform:none}}

/* ============================================================
   Notes — notebooks + checkable lines (8_2 pack §8, 2026-08-02)
   Private pad and each store's shift log are notebooks in ONE
   Notes app instead of separate pages. Which notebooks appear
   is derived from the surface registry — see noteNotebooks().
   ============================================================ */
.pn-book{display:flex;align-items:center;gap:8px}
.pn-book-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%}
.pn-book-logo{width:16px;height:16px;object-fit:contain;border-radius:3px;background:#fff}
.pn-book-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-book-rule{margin:6px 0 2px;font-style:italic}

.pn-check{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.pn-check-head{font-size:var(--t-caption2);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:6px}
.pn-check-row{display:flex;align-items:center;gap:9px;min-height:44px;padding:2px 0}
.pn-check-box{flex:0 0 17px;width:17px;height:17px;border-radius:5px;cursor:pointer;
  border:2px solid var(--control-line,#d0d4e4);background:transparent;padding:0;position:relative}
.pn-check-row.done .pn-check-box{background:var(--st-done,#00c875);border-color:var(--st-done,#00c875)}
.pn-check-row.done .pn-check-box::after{content:"✓";position:absolute;inset:0;color:#fff;
  font-size:var(--t-caption2);line-height:13px;text-align:center;font-weight:800}
.pn-check-txt{flex:1;min-width:0;font-size:var(--t-footnote);line-height:1.4;color:var(--ink)}
.pn-check-row.done .pn-check-txt{text-decoration:line-through;color:var(--muted)}
.pn-check-task{flex:0 0 auto;border:1px solid var(--line-soft);background:var(--card);
  border-radius:99px;padding:4px 10px;font-size:var(--t-caption2);font-weight:700;color:var(--blue-royal);
  cursor:pointer;opacity:0;transition:opacity .15s}
.pn-check-row:hover .pn-check-task,.pn-check-task:focus{opacity:1}
@media(max-width:767px){.pn-check-task{opacity:1}}
.pn-book-in{font-weight:600;color:var(--ink-soft);font-size:.7em;letter-spacing:0}

/* Page access editor (Admin → 🔒 Page access) — phase 6b */
.pa-q{width:100%;max-width:340px;padding:8px 12px;border:1px solid var(--control-line,#d0d4e4);
  border-radius:10px;font-family:inherit;font-size:var(--t-footnote);margin-bottom:10px}
.pa-wrap{overflow:auto;max-height:62vh}
table.pa{width:100%;border-collapse:collapse;font-size:var(--t-footnote)}
table.pa th{position:sticky;top:0;background:var(--card);z-index:1;text-align:center;
  font-size:var(--t-caption2);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);padding:8px 6px;border-bottom:1px solid var(--line-soft)}
table.pa th.pa-name,table.pa td.pa-name{text-align:left;min-width:260px;padding-left:16px}
table.pa td{padding:7px 6px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.pa-row.own{background:rgba(55,189,245,.05)}
.pa-meta{font-size:var(--t-caption2);color:var(--muted);margin-top:2px}
td.pa-c{text-align:center;width:62px}
/* Every cell states its answer (Chad, 2026-08-20: a blank box read as "no" —
   "can we change this green check so that it looks like it's a yes"). Green ✓
   = that level CAN open the page; click it and it flips to the red ✕ = hidden.
   The underlying model is unchanged — checked still means denied. */
.pa-ck{display:inline-flex;width:17px;height:17px;border-radius:5px;cursor:pointer;
  border:2px solid #3a9c53;background:#e9f6ee;position:relative}
.pa-ck::after{content:"✓";position:absolute;inset:0;color:#3a9c53;font-size:var(--t-caption2);
  line-height:13px;text-align:center;font-weight:800}
.pa-ck input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;position:relative;z-index:1}
.pa-ck.on{background:var(--st-stuck,#e2445c);border-color:var(--st-stuck,#e2445c)}
.pa-ck.on::after{content:"✕";color:#fff}
.pa-ck.inh{opacity:.55}

/* Generic Build Tracker — optional kanban for boards that declare `columns`
   (the Roadmap). Boards without columns keep their list and never see this. */
.gb-kan{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;align-items:flex-start}
.gb-col{flex:0 0 268px;background:var(--bg);border:1px solid var(--line-soft);border-radius:12px;padding:10px}
.gb-col.dragover{background:var(--line-soft);border-color:var(--blue-royal)}
.gb-col-head{display:flex;align-items:center;gap:7px;padding:2px 4px 9px}
.gb-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.gb-col-name{font-weight:700;font-size:var(--t-caption)}
.gb-col-n{margin-left:auto;font-size:var(--t-caption2);font-weight:700;color:var(--muted);background:var(--line-soft);border-radius:99px;padding:0 7px;line-height:17px}
.gb-col-body{display:flex;flex-direction:column;gap:8px;min-height:44px}
.gb-card{background:var(--card,#fff);border:1px solid var(--line-soft);border-radius:10px;padding:9px 11px;cursor:grab;box-shadow:0 1px 2px rgba(17,14,48,.04)}
.gb-card:active{cursor:grabbing}
.gb-card.dragging{opacity:.5}
.gb-card-t{font-weight:600;font-size:var(--t-caption);line-height:1.35}
.gb-card-d{color:var(--muted);font-size:var(--t-caption2);margin-top:4px;line-height:1.45}
.gb-empty{color:var(--muted);font-size:var(--t-caption);text-align:center;padding:8px 0}
.gb-new{margin:0 0 14px}
.gb-new-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:9px;padding:11px 12px;background:var(--bg);border:1px solid var(--line-soft);border-radius:11px}
.gb-new-form input{flex:1 1 200px;min-width:160px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:var(--t-caption);background:var(--card,#fff);color:inherit}
.gb-new-form select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:var(--t-caption);background:var(--card,#fff);color:inherit}
.gb-card-t{position:relative;padding-right:20px}
.gb-pen{position:absolute;right:-4px;top:-2px;border:none;background:none;color:var(--muted);cursor:pointer;font-size:var(--t-caption);line-height:1;padding:2px 4px;border-radius:5px;opacity:0;transition:opacity .12s}
.gb-card:hover .gb-pen{opacity:.85}
.gb-pen:hover{background:var(--line-soft);color:var(--ink)}
@media (hover:none){.gb-pen{opacity:.6}}
.gb-edit-modal{max-width:520px}
.gb-edit-modal textarea{width:100%;font:inherit;font-size:var(--t-caption);padding:8px 10px;border:1px solid var(--line);border-radius:8px;resize:vertical;background:var(--card,#fff);color:inherit}
.gb-edit-hint{font-size:var(--t-caption);color:var(--muted);margin:10px 0 0;line-height:1.5}

/* Collapsed rail group shows its count on the right (design delta 2). */
.msec-count{margin-left:auto;margin-right:6px;font-size:var(--t-caption2);font-weight:800;color:var(--muted);background:var(--bg);border-radius:999px;padding:1px 8px}

/* ================= Contacts module (#71, 2026-08-05) =================
   Vendors and people in one list. Rail chips, topbar and card frame are the
   shared ones — everything below is only the row/table/card interior. */
.ct-pill{display:inline-block;font-size:var(--t-caption2);font-weight:600;padding:1px 8px;border-radius:999px;background:var(--line-soft);color:var(--ink-soft);margin:0 4px 2px 0}
.ct-pill-co{background:#e8f0fe;color:#1a56db}
.ct-pill-me{background:#eef1f5;color:#5b6472}
.ct-pill-share{background:#e9f7ee;color:#128046}
.ct-pill-gc{background:#e8f0fe;color:#1a56db}
.ct-pill-none{background:#fdecef;color:#d83a52}
.ct-sub{color:var(--muted);font-size:var(--t-caption);font-weight:500}
.ct-group + .ct-group{border-top:1px solid var(--line-soft)}
.ct-group-h{display:flex;align-items:center;gap:8px;font-size:var(--t-caption2);letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--muted);padding:12px 14px 6px}
.ct-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.6fr) minmax(0,1.2fr);gap:12px;align-items:center;padding:9px 14px;cursor:pointer;border-top:1px solid var(--line-soft)}
.ct-row:hover{background:var(--bg)}
.ct-name{display:flex;align-items:baseline;gap:8px;min-width:0}
.ct-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-contactcol{display:flex;flex-direction:column;font-size:var(--t-caption);min-width:0}
.ct-where{text-align:right}
.ct-table-wrap{overflow-x:auto}
.ct-table{width:100%;border-collapse:collapse;font-size:var(--t-footnote)}
.ct-table th{text-align:left;font-size:var(--t-caption2);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line)}
.ct-table td{padding:9px 14px;border-top:1px solid var(--line-soft);vertical-align:top}
/* #106: category headings inside the vault's live Vendors / Corporate tables —
   the same grouping the KB page uses, so the two read alike. */
.ct-table .ct-grp td{background:#f5f7fb;font-weight:800;font-size:var(--t-caption);
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:7px 14px;border-top:1px solid var(--line)}
.ct-grp-n{font-weight:600;color:var(--muted);margin-left:8px;letter-spacing:0}
.vault-ct-row{cursor:pointer}
.vault-ct-row:hover td{background:var(--line-soft)}
/* Column widths + no-wrap on the short columns: without these the browser
   splits a phone number across three lines and a 60-row table becomes a
   scroll marathon. */
.ct-table{table-layout:fixed}
.ct-table th:nth-child(1),.ct-table td:nth-child(1){width:23%}
.ct-table th:nth-child(2),.ct-table td:nth-child(2){width:20%}
.ct-table th:nth-child(3),.ct-table td:nth-child(3){width:17%}
.ct-table th:nth-child(4),.ct-table td:nth-child(4){width:23%}
.ct-table th:nth-child(5),.ct-table td:nth-child(5){width:17%}
.ct-table td{overflow-wrap:anywhere}
.ct-table tr.ct-row{display:table-row;cursor:pointer}
.ct-table tr.ct-row:hover{background:var(--bg)}
.ct-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.ct-card{text-align:left;background:var(--card,#fff);border:1px solid var(--line-soft);border-radius:12px;padding:13px 14px;cursor:pointer;font:inherit;color:inherit;display:block}
.ct-card:hover{border-color:var(--line);box-shadow:0 2px 10px rgba(20,30,80,.06)}
.ct-card-h{font-size:var(--t-footnote);margin-bottom:2px}
.ct-line{font-size:var(--t-caption);color:var(--ink-soft);margin-top:3px}
/* Phone/email are real tel:/mailto: links. They sit inside rows that are
   themselves clickable, so they read as plain text until hovered — otherwise
   every row would look like a wall of blue. The tap target is padded out so a
   thumb on a phone can hit the number without hitting the row. */
/* white-space:nowrap on a FIXED-layout table cell does not clip, it OVERRUNS:
   a contact carrying two numbers ("Office: … · Cell: …") painted straight over
   the Email column — 265px of text in a 201px cell, visible on Boudreaux
   Services before this change and 304px after the type bump. nowrap is right
   (a phone number must never break mid-number); what was missing is somewhere
   for the overflow to go. Ellipsis, the same answer .cal-pill already uses. */
.ct-link{color:inherit;text-decoration:none;white-space:nowrap;padding:2px 0;
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ct-link:hover{color:var(--blue-mid);text-decoration:underline}
.ct-card-f{margin-top:9px}
.ct-dhead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line-soft)}
.ct-dbody{padding:18px 22px 22px}
.ct-dtitle{margin:0;font-size:var(--t-title3)}
.ct-dsub{color:var(--muted);font-size:var(--t-footnote);margin-top:2px}
.ct-dpills{margin:10px 0 16px}
.ct-drow{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:var(--t-footnote)}
.ct-drow span{color:var(--muted);font-size:var(--t-caption);padding-top:2px}
.ct-dfoot{margin-top:16px;color:var(--muted);font-size:var(--t-caption)}
.ct-modal{max-width:660px;width:94vw}
.ct-frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ct-axes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--line-soft)}
.ct-axes select{width:100%}
.ct-checks{display:flex;flex-direction:column;gap:5px;margin-top:7px;max-height:132px;overflow:auto}
.ct-check{display:flex;align-items:center;gap:7px;font-size:var(--t-caption)}
.ct-check input{width:auto;padding:0}
/* The assignable-contractor toggle carries a line of explanation under its
   label, so it aligns to the TOP of the checkbox rather than the middle. */
.ct-modal > .ct-check{align-items:flex-start;gap:8px;margin-top:9px}
.ct-modal > .ct-check span{display:flex;flex-direction:column;gap:2px}
.ct-modal > .ct-check small{color:var(--muted);font-size:var(--t-caption);line-height:1.35}
.ct-hint{color:var(--muted);font-size:var(--t-caption);margin-top:6px;line-height:1.45}
/* Account numbers, per store (#71, 8/18). The editor rows are a store picker
   and its blank, side by side; the card shows them one line per store with a
   copy button, since the number is wanted mid-phone-call. */
.ct-acctblk{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.ct-acct{display:grid;grid-template-columns:160px minmax(0,1fr) 30px;gap:8px;align-items:center;margin-top:7px}
.ct-acct select,.ct-acct input{width:100%}
.ct-acct-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:var(--t-footnote);line-height:1;padding:4px;border-radius:5px}
.ct-acct-x:hover{background:var(--danger-soft,#fdeaea);color:var(--danger,#b4232a)}
.ct-acct-add{margin-top:9px;font-size:var(--t-caption);padding:4px 9px}
.ct-acctline{display:flex;align-items:center;gap:8px;padding:2px 0}
.ct-acctwho{color:var(--muted);font-size:var(--t-caption);min-width:74px}
.ct-acctnum{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:var(--t-footnote);letter-spacing:.02em}
@media (max-width:640px){.ct-acct{grid-template-columns:1fr;gap:5px}.ct-acct-x{justify-self:end}}
.ct-err{color:#d83a52;font-size:var(--t-caption);min-height:16px;margin-top:8px}
@media (max-width:760px){
  .ct-row{grid-template-columns:1fr;gap:3px}
  .ct-where{text-align:left}
  .ct-frow,.ct-axes{grid-template-columns:1fr}
}

/* ================= Documents (#43, 2026-08-05) =================
   Tags on the rows, and the editor's outline sidebar. */
.doc-tags{margin-top:5px}
.doc-tag{display:inline-block;font-size:var(--t-caption2);font-weight:700;padding:1px 7px;border-radius:999px;background:#eef1f8;color:#4b5675;margin:0 4px 2px 0}
.doc-tagbtn{margin-left:auto;align-self:center;opacity:0;font-size:var(--t-footnote);padding:4px 7px;border-radius:7px;transition:opacity .12s}
.doc-row:hover .doc-tagbtn{opacity:.75}
.doc-tagbtn:hover{background:var(--line-soft);opacity:1}
@media (hover:none){.doc-tagbtn{opacity:.6}}
.dt-known{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 2px}
.nd-split{display:flex;min-height:0;flex:1 1 auto;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card,#fff)}
.nd-split .tt-canvas{border:none;border-radius:0;min-height:0}
.nd-outline{width:214px;flex:0 0 214px;border-right:1px solid var(--line-soft);background:var(--bg);overflow:auto;transition:flex-basis .14s,width .14s}
.nd-outline.shut{width:34px;flex-basis:34px}
.nd-outline.shut .nd-out-list,.nd-outline.shut .nd-out-head span{display:none}
.nd-out-head{display:flex;align-items:center;gap:7px;padding:10px 10px 6px;font-size:var(--t-caption2);letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.nd-out-head button{border:none;background:none;cursor:pointer;color:var(--muted);font-size:var(--t-footnote);line-height:1;padding:2px 4px;border-radius:5px}
.nd-out-head button:hover{background:var(--line-soft);color:var(--ink)}
.nd-out-list{padding:2px 6px 16px}
.nd-out-i{display:block;width:100%;text-align:left;border:none;background:none;font:inherit;font-size:var(--t-caption);color:var(--ink-soft);padding:4px 8px;border-radius:7px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nd-out-i:hover{background:var(--line-soft);color:var(--ink)}
.nd-out-i.lv1{font-weight:700;color:var(--ink)}
.nd-out-i.lv2{padding-left:16px}
.nd-out-i.lv3{padding-left:26px;font-size:var(--t-caption)}
.nd-out-i.lv4{padding-left:36px;font-size:var(--t-caption)}
.nd-out-empty{color:var(--muted);font-size:var(--t-caption);padding:6px 8px;line-height:1.5}
@media (max-width:860px){.nd-outline{display:none}}

/* ================= #68: meeting notes in the Documents editor =============
   Same box as the plain textarea it replaces, so switching modes doesn't
   move the panel or resize the pane around it. */
.notes-rich-toggle{float:right;border:1px solid var(--line);background:var(--card,#fff);color:var(--ink-soft);font:inherit;font-size:var(--t-caption);font-weight:600;padding:2px 9px;border-radius:8px;cursor:pointer}
.notes-rich-toggle:hover{border-color:var(--muted);color:var(--ink)}
.notes-rich-toggle:disabled{opacity:.5;cursor:default}
.notes-rich{min-height:190px;max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:11px;background:#fff;padding:6px 12px}
.notes-rich .ProseMirror{outline:none;font-size:var(--t-footnote);line-height:1.55;min-height:170px}
.notes-rich .ProseMirror p{margin:.35em 0}
.notes-rich .ProseMirror h1{font-size:var(--t-title3);margin:.6em 0 .3em}
.notes-rich .ProseMirror h2{font-size:var(--t-headline);margin:.6em 0 .3em}
.notes-rich .ProseMirror h3{font-size:var(--t-body);margin:.5em 0 .25em}
.notes-rich .ProseMirror ul,.notes-rich .ProseMirror ol{padding-left:22px;margin:.35em 0}
.notes-rich .ProseMirror table{border-collapse:collapse}
.notes-rich .ProseMirror td,.notes-rich .ProseMirror th{border:1px solid var(--line);padding:4px 7px}
/* #71 option A: a vault page that Contacts now owns. */
.vault-gen-note{margin:0 0 12px;padding:10px 14px;border-radius:11px;background:#eef3ff;border:1px solid #d5e0fb;color:#2c3d6b;font-size:var(--t-caption);line-height:1.5}

/* The meeting-notes toolbar sits inside a .field, and
   `.field input, .field textarea, .field select` (0-2-1) was beating .ttsel
   (0-1-0) — every select went width:100% with 13px padding, so "Normal text"
   rendered clipped and the groups stacked into three rows. Doubling the class
   outranks it without reaching for !important, and it holds wherever else a
   toolbar gets dropped inside a form field. */
.tt-toolbar .ttsel.ttsel{width:auto;padding:0 26px 0 9px;font-size:var(--t-caption);
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) 13px,calc(100% - 9px) 13px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.tt-toolbar .ttsel.ttblock.ttblock{min-width:118px}
.tt-toolbar .ttsel.ttsize.ttsize{min-width:62px}
.tt-toolbar .ttb.ttcolor input[type=color]{width:17px;height:5px;padding:0}
.tt-compact .ttsel.ttsel{background-position:calc(100% - 14px) 12px,calc(100% - 9px) 12px}

/* ---- Task editor, in the frame the task already occupies ----------------
   Replaces the 560px slide-in drawer for EXISTING tasks (Chad, 2026-08-07:
   "open the task in the full screen of that frame and then create a back
   button ... close should be at the top right not at the bottom right").
   The bottom-right corner belongs to the Kaleo assistant bubble; a Close
   button parked under it, at the far end of a scrolling form, was a fight.
   Delete stays at the foot — that one SHOULD take a deliberate scroll. */
.task-editframe{width:100%}
.task-editframe>.modal{width:100%;max-width:none;margin:0;padding:0 0 24px;border-radius:var(--r-lg);
  border:1px solid var(--line-soft);box-shadow:var(--shadow);background:var(--card);max-height:none;overflow:visible}
.task-editframe>.modal>h2{font-size:var(--t-title2);margin:18px 24px 16px;font-family:var(--font-head,Poppins,Figtree,sans-serif);
  font-weight:800;letter-spacing:-.4px;color:var(--blue-deep)}
.task-editframe>.modal>*:not(.tef-bar){margin-left:24px;margin-right:24px}
/* The way out, pinned to the top of the form and staying there as it scrolls. */
.tef-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;background:var(--card);z-index:3;border-radius:var(--r-lg) var(--r-lg) 0 0}
.tef-bar .spacer{flex:1}
.tef-what{font-size:var(--t-caption2);font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
/* Two columns once there's room — the drawer stacked everything because it was
   560px wide, and that is exactly why you had to scroll to reach the buttons. */
@media(min-width:1100px){
  .task-editframe .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .task-editframe #mNotes{min-height:120px}
}
/* Form left, everything RELATED to the task right (Chad, 2026-08-07). Capping
   the form keeps the fields at a readable measure instead of stretching the
   full width of a wide screen, and moving Linked + the diary up beside it
   stops the page trailing down into the assistant bubble's corner. */
.tef-cols{display:grid;grid-template-columns:minmax(0,1fr) var(--tef-side-w,330px);gap:26px;align-items:start}
.tef-form{min-width:0;max-width:var(--tef-form-max,760px)}
/* No sticky/own-scrollbar here: #main is the scroll container, so a 100vh cap
   measured against the WINDOW ran the column past the bottom of the pane and
   put a second scrollbar inside a page that already had one. It just flows. */
.tef-side{min-width:0;border-left:1px solid var(--line-soft);padding-left:22px}
/* Keep the assistant bubble's corner clear. It floats bottom-right over
   everything, so any control that ends up under it is a control you have to
   fight for — which is the whole reason Save/Close moved off that corner. The
   right gutter stops the side column's buttons from running under it. */
.tef-side{padding-right:var(--fab-clear,30px)}
.tef-side,.tef-form{padding-bottom:72px}
.tef-side .task-tab-panel+.task-tab-panel{margin-top:22px;border-top:1px solid var(--line-soft);padding-top:18px}
.tef-side .field{margin-bottom:12px}
@media(max-width:1199px){
  .tef-cols{grid-template-columns:minmax(0,1fr)}
  .tef-side{border-left:none;padding-left:0;
    border-top:1px solid var(--line-soft);padding-top:20px;margin-top:8px}
}
.task-editframe .modal-actions{padding-top:6px;border-top:1px solid var(--line-soft);margin-top:22px}
@media(max-width:767px){
  .task-editframe>.modal>h2{margin:14px 14px 12px}
  .task-editframe>.modal>*:not(.tef-bar){margin-left:14px;margin-right:14px}
}

/* Draft state on the Daily Cash Report — quiet by design. It reassures without
   ever reading as "submitted"; the count is not filed until Save. */
.cd-draft{font-size:var(--t-caption2);color:var(--muted);text-align:center;margin-top:8px}

/* "NOT saved" — deliberately loud. A failed save used to be a toast that faded
   on its own, which left a screen indistinguishable from a successful one;
   two counts were lost that way (Chad, 2026-08-08). */
.modal.cash-fail{max-width:460px;text-align:center;border-top:5px solid #c0392b}
.cash-fail-icon{font-size:var(--t-display);line-height:1}
.modal.cash-fail h2{color:#c0392b;font-size:var(--t-title1);letter-spacing:-.4px;margin:8px 0 12px;
  text-transform:uppercase}
.cash-fail-why{font-size:var(--t-body);color:var(--ink);margin:0 0 12px;line-height:1.5}
.cash-fail-safe{font-size:var(--t-caption);color:var(--muted);margin:0;line-height:1.5}
.modal.cash-fail .modal-actions{justify-content:center}

/* Selection bar — the visible surface for the #97/#98 batch editor, which was
   keyboard-only until 2026-08-11 (Chad: "select all or select certain ones").
   Floats above the list rather than sitting in the toolbar so it can't shift
   the content down when it appears and back up when it clears. */
.sel-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;
  background:var(--ink,#0d2440);color:#fff;box-shadow:0 10px 30px rgba(6,24,48,.34)}
.sel-bar .sel-n{font-weight:650;font-size:var(--t-footnote);white-space:nowrap}
.sel-bar .btn{padding:5px 11px;font-size:var(--t-footnote)}
.sel-bar .btn-ghost{background:rgba(255,255,255,.13);color:#fff;border-color:transparent}
.sel-bar .btn-ghost:hover{background:rgba(255,255,255,.22)}
.sel-bar .sel-hint{font-size:var(--t-caption);opacity:.62;white-space:nowrap;margin-left:2px}
@media (max-width:720px){.sel-bar .sel-hint{display:none}}

/* ---- Row selection (Chad, 2026-08-11) ---------------------------------
   "Make the radio button on the left [into] a check box that would select it
   but not make it complete... and move the complete button over by the status."

   So there is no selection MODE any more — the checkbox is simply always the
   left-most control, which is what every list the user has ever used does. The
   round complete button moved to sit beside the status pill, where finishing a
   task reads as what it is: a status change. */
.l-sel{display:flex;align-items:center;justify-content:center;
  width:17px;height:17px;border:1.5px solid var(--line);border-radius:5px;
  background:var(--card,#fff);cursor:pointer;transition:all var(--m-fast) ease}
.l-sel:hover{border-color:var(--blue-mid)}
.l-sel-tick{font-size:var(--t-caption2);line-height:1;color:#fff;opacity:0;font-weight:700}
.nav-sel .l-sel{background:var(--blue-mid);border-color:var(--blue-mid)}
.nav-sel .l-sel-tick{opacity:1}

/* Call / email straight off a task's contact chip (Chad, 2026-08-11). Sits
   between the label and the remove ✕, and stops the click bubbling so dialling
   never doubles as "open the contact record". */
.lc-act{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:6px;text-decoration:none;font-size:var(--t-caption);line-height:1;flex:0 0 auto;
  transition:background var(--m-fast) ease}
.lc-act:hover{background:rgba(55,189,245,.18)}
/* "Reach out" on a task's read face — the linked vendor and how to contact
   them, so the first thing a vendor task shows is who to call. */
.id-reach .id-value{display:flex;flex-direction:column;gap:6px}
.id-reach-row{display:flex;align-items:center;gap:6px;cursor:pointer;border-radius:8px;padding:3px 4px;margin:-3px -4px;transition:background var(--m-fast) ease}
.id-reach-row:hover{background:var(--bg)}
.id-reach-who{flex:1;min-width:0;font-size:var(--t-caption);font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Meetings — "Store this is about". A label control, not an access control;
   it sits with the meeting's other options and files the meeting under a
   store chip. See /api/meetings/store. */
.mtg-storerow{align-items:center;gap:8px}
.mtg-storelab{font-size:var(--t-caption);font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-3,#667)}
.mtg-storesel{font:inherit;font-size:var(--t-footnote);padding:4px 8px;border-radius:8px;
  border:1px solid var(--line,#d8dce6);background:var(--surface,#fff);
  color:var(--ink,#1a1f36)}
.mtg-storenote{font-size:var(--t-caption);color:var(--ink-3,#667)}

/* A KB table is deliberately min-width:640px so its columns stay readable
   rather than crushing to nothing — but nothing was ever scrolling it. On a
   phone that dragged the WHOLE article sideways: body text ran off the screen
   and you had to scroll right to read a sentence. Confine the sideways scroll
   to the article body, so the table pans and the prose still wraps. The table
   itself is untouched, so its column layout can't shift. */
@media(max-width:767px){
  .kb-html{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* A meeting whose calendar entry is gone, rebuilt from its surviving notes.
   Flagged plainly so it doesn't read as a meeting that has vanished from
   Google — the notes are the point (Chad, 2026-08-13: "all meeting notes
   should live in the meetings module, even if they're past meetings"). */
.mm-recovered{margin:6px 0 2px;padding:7px 11px;border-radius:9px;font-size:var(--t-caption);
  line-height:1.45;background:var(--amber-soft,#fff5e0);color:var(--ink,#1a1f36);
  border:1px solid var(--amber-line,#f0dcae)}

/* Meeting alerts — whether THIS device is set up. Its own line because the
   "Currently on N devices" count above it is an ACCOUNT total, and reading
   "on 1 device" on a phone that is not that device is what made alerts look
   broken for an evening (Chad, 2026-08-14). */
.pa-thisdev{font-size:var(--t-caption);font-weight:650;line-height:1.45;margin:0 0 12px;
  padding:8px 11px;border-radius:8px;border:1px solid var(--line-soft);background:var(--bg)}
.pa-thisdev.on{color:#1b7f4b;border-color:#bfe6cd;background:#f0faf4}
.pa-thisdev.off{color:#8a5a00;border-color:#f3ddb4;background:#fffaf0}

/* ============================================================================
   HR · the employee folder, Attendance, and the HR modals — restyled to THE
   SCALES (DESIGN.md) 2026-08-19 after Chad: "everything just looks really
   cluttered… we need some separation, lines, colour variation… match the
   design we implemented." Tokens only: type ramp, 4pt grid, palette, radii.
   ========================================================================== */

/* ---- the folder ---- */
.hr-emppane{max-width:880px;font-size:var(--t-body);padding-bottom:56px}
.hr-emppane .hr-mhead{align-items:center;gap:var(--sp-6);padding:var(--sp-2) 0 var(--sp-6)}
.hr-emppane .hr-mhead h2{font-size:var(--t-title2);font-weight:var(--w-bold);letter-spacing:-.2px;line-height:1.25}
.hr-emppane .hr-sub{font-size:var(--t-footnote);color:var(--muted);margin:var(--sp-2) 0 0}
.hr-emppane .hr-note{font-size:var(--t-footnote);color:var(--muted);line-height:1.45}

/* section cards: white, hairline, 12 radius, 20/24 padding, 16 apart, a
   coloured accent per section so the eye can find them */
.hr-emppane .hr-sec{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:var(--sp-6b) var(--sp-7) var(--sp-7);margin:0 0 var(--sp-6);box-shadow:var(--shadow);position:relative;overflow:hidden}
.hr-emppane .hr-sec::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue-royal)}
.hr-emppane .hr-sec-profile::before{background:var(--blue-deep)}
.hr-emppane .hr-sec-sched::before{background:var(--cyan)}
.hr-emppane .hr-sec-att::before{background:var(--st-doing)}
.hr-emppane .hr-sec-docs::before{background:var(--blue-mid)}
.hr-emppane .hr-sec-evals::before{background:var(--st-done)}
.hr-emppane .hr-sec-notes::before{background:var(--ink-soft)}
.hr-emppane .hr-sec-sep::before{background:var(--st-stuck)}
.hr-emppane .hr-sec .hr-blockhead{display:flex;align-items:center;gap:var(--sp-5);padding:0 0 var(--sp-5);margin:0 0 var(--sp-6);border-bottom:1px solid var(--line-soft)}
.hr-emppane .hr-sec .hr-blockhead h4{margin:0;font-size:var(--t-headline);font-weight:var(--w-bold);color:var(--ink)}
.hr-emppane .hr-sec .hr-blockhead .hr-dim2{font-size:var(--t-footnote);color:var(--muted)}
.hr-emppane .hr-sec .hr-blockhead .hr-mini{margin-left:auto}
.hr-emppane .hr-sec .hr-blockhead .hr-mini + .hr-mini{margin-left:0}
.hr-emppane .hr-sec-profile{background:var(--card)}

/* profile rows: label | value, hairlines between, room to breathe */
.hr-emppane .hr-detail{border:0;border-radius:0;overflow:visible}
.hr-emppane .hr-flag{display:grid;grid-template-columns:160px 1fr;gap:var(--sp-6);align-items:center;
  padding:var(--sp-5) 0;border-top:1px solid var(--line-soft);font-size:var(--t-body)}
.hr-emppane .hr-flag:first-child{border-top:0;padding-top:0}
.hr-emppane .hr-flag > span{color:var(--muted);font-size:var(--t-footnote);font-weight:var(--w-semibold);text-transform:uppercase;letter-spacing:.04em}
.hr-emppane .hr-flag > b{font-weight:var(--w-medium);color:var(--ink);text-align:left;white-space:normal}
.hr-emppane .hr-flag .hr-dim2{font-size:var(--t-caption);color:var(--muted);font-weight:var(--w-regular)}
.hr-emppane .hr-flag.hr-dim > b{color:var(--muted)}
.hr-emppane .hr-storechips{justify-content:flex-start;gap:var(--sp-4)}
.hr-emppane .hr-schip{font-size:var(--t-footnote);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);border:1px solid var(--line);gap:var(--sp-3)}
.hr-emppane .hr-schip:has(input:checked){background:var(--grad-soft);border-color:var(--blue-royal);color:var(--blue-royal);font-weight:var(--w-semibold)}

/* small buttons and badges, on the ramp */
.hr-emppane .hr-mini,.att-emp .hr-mini,.hr-hlanding .hr-mini{font-size:var(--t-footnote);padding:var(--sp-3) var(--sp-5);border-radius:var(--r);border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:var(--w-semibold)}
.hr-emppane .hr-mini.prim,.hr-hlanding .hr-mini.prim{background:var(--blue-royal);border-color:var(--blue-royal);color:#fff}
.hr-emppane .hr-badge{font-size:var(--t-caption);font-weight:var(--w-semibold);padding:var(--sp-1) var(--sp-4);border-radius:var(--r-pill)}

/* attendance */
.att-headright{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}
.att-bigpts{font-size:var(--t-title1);font-weight:var(--w-bold);padding:var(--sp-2) var(--sp-6);border-radius:var(--r-lg);line-height:1.2}
.att-bigl{font-size:var(--t-caption2);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.att-pill{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:var(--sp-1) var(--sp-4);border-radius:var(--r-pill);font-size:var(--t-caption);font-weight:var(--w-bold);margin-left:var(--sp-3)}
.att-ok{background:color-mix(in srgb,var(--st-done) 16%,#fff);color:color-mix(in srgb,var(--st-done) 70%,#000)}
.att-pos{background:color-mix(in srgb,var(--cyan) 18%,#fff);color:var(--blue-deep)}
.att-warm{background:color-mix(in srgb,var(--st-doing) 22%,#fff);color:color-mix(in srgb,var(--st-doing) 55%,#000)}
.att-hot{background:color-mix(in srgb,var(--st-stuck) 16%,#fff);color:var(--st-stuck)}
.att-final{background:var(--st-stuck);color:#fff}
.att-lifetime{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6b);font-size:var(--t-footnote);color:var(--muted);margin:0 0 var(--sp-4)}
.att-lifetime b{color:var(--ink);font-weight:var(--w-semibold)}
.att-recent{margin-top:var(--sp-5)}
.att-recent h3{font-size:var(--t-headline);font-weight:var(--w-bold);margin:0 0 var(--sp-4)}
.att-entry{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--sp-5);padding:var(--sp-5) var(--sp-5);border:1px solid var(--line-soft);border-radius:var(--r-md);margin-bottom:var(--sp-3);background:var(--card);font-size:var(--t-footnote)}
.att-entry.att-expired{opacity:.55}
.att-e-date{white-space:nowrap;font-weight:var(--w-semibold);color:var(--ink-soft)}
.att-e-main{flex:1;min-width:0;line-height:1.45}
.att-e-note{color:var(--ink-soft)}
.att-e-meta{display:block;font-size:var(--t-caption);color:var(--muted);margin-top:var(--sp-1)}
/* Where a point came from, and a nudge when two points on one day might be the
   same incident (Chad 9/2 — one 8:58 arrival had been charged three times). */
.att-src{display:inline-block;padding:0 var(--sp-2);border-radius:var(--r-sm);font-weight:var(--w-bold)}
.att-src-auto{background:color-mix(in srgb,var(--blue-mid) 14%,transparent);color:var(--blue-mid)}
.att-src-hand{background:color-mix(in srgb,var(--ink-soft) 14%,transparent);color:var(--ink-soft)}
.att-dup{display:inline-block;margin-left:var(--sp-2);padding:0 var(--sp-2);border-radius:var(--r-sm);background:color-mix(in srgb,var(--st-doing) 20%,transparent);color:color-mix(in srgb,var(--st-doing) 65%,#000);font-weight:var(--w-bold);cursor:help}
.att-x{border:0;background:none;cursor:pointer;color:var(--muted);font-size:var(--t-footnote);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm)}
.att-x:hover{background:color-mix(in srgb,var(--st-stuck) 14%,#fff);color:var(--st-stuck)}
.att-actions{display:flex;gap:var(--sp-4);margin:var(--sp-5) 0}
.att-railhint{font-size:var(--t-caption);color:var(--muted);padding:var(--sp-3) var(--sp-4) var(--sp-2)}

/* ── ATTENDANCE RAIL LEGIBILITY (Chad, 2026-09-05) ─────────────────────────
   "There is very little to distinguish what is what on the bar… once you
   select something you can't go and reselect something else."
   Two problems, both visual:
   1. Every group painted its pick in the same solid royal slab, so Show,
      Brand, Location and Position stacked into one blue block with no
      hierarchy — you couldn't read which pick was doing what.
   2. Nothing on screen ever named the picks together, so there was no single
      place to undo one.
   So: the Show pick stays solid (it is WHAT you are looking at), the three
   scope filters go to a tint (they only NARROW it), and a "Showing" strip at
   the top of the rail names every live pick with its own ✕. */
.att-onnow{padding:var(--sp-4) var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-soft);margin-bottom:var(--sp-4)}
.att-onnow-h{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-caption2);font-weight:var(--w-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-3)}
.att-onnow-clr{border:0;background:none;cursor:pointer;font-family:inherit;font-size:var(--t-caption2);font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--blue-royal);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-xs)}
.att-onnow-clr:hover{background:color-mix(in srgb,var(--blue-royal) 10%,transparent)}
.att-onnow-all{font-size:var(--t-caption);color:var(--muted)}
.att-fchip{display:flex;align-items:center;gap:var(--sp-3);width:100%;border:1px solid color-mix(in srgb,var(--blue-royal) 24%,transparent);background:color-mix(in srgb,var(--blue-royal) 8%,transparent);border-radius:var(--r-xs);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);cursor:pointer;font-family:inherit;text-align:left}
.att-fchip:last-child{margin-bottom:0}
.att-fchip:hover{background:color-mix(in srgb,var(--st-stuck) 10%,transparent);border-color:color-mix(in srgb,var(--st-stuck) 30%,transparent)}
.att-fchip-w{flex:none;font-size:var(--t-caption2);font-weight:var(--w-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.att-fchip-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-caption);font-weight:var(--w-semibold);color:var(--blue-deep)}
.att-fchip-x{flex:none;font-size:var(--t-caption2);font-weight:var(--w-bold);color:var(--muted)}
.att-fchip:hover .att-fchip-x{color:var(--st-stuck)}

/* Scope filters narrow; they are not the view. Tint, don't slab. */
.page-hr .mtg-rail [data-msec="brand"] .pn-fol.active,
.page-hr .mtg-rail [data-msec="store"] .pn-fol.active,
.page-hr .mtg-rail [data-msec="pos"] .pn-fol.active{
  background:color-mix(in srgb,var(--blue-royal) 12%,transparent);color:var(--blue-deep);
  box-shadow:inset 3px 0 0 var(--blue-royal)}
.page-hr .mtg-rail [data-msec="brand"] .pn-fol.active .pn-count,
.page-hr .mtg-rail [data-msec="store"] .pn-fol.active .pn-count,
.page-hr .mtg-rail [data-msec="pos"] .pn-fol.active .pn-count{color:var(--blue-royal)}
/* "All brands" / "All locations" / "All positions" / "Whole team" are the
   ABSENCE of a filter, not a filter. Painting them in the same blue as a real
   pick is half of why four groups read as one blob. */
.page-hr .mtg-rail .pn-fol.pn-fol-none.active{
  background:var(--line-soft);color:var(--ink-soft);box-shadow:none;font-weight:var(--w-semibold)}
.page-hr .mtg-rail .pn-fol.pn-fol-none.active .pn-count{color:var(--muted)}
/* One hairline between groups, so Brand / Location / Position stop reading as
   one continuous list of interchangeable buttons. */
.page-hr .mtg-rail .msec + .msec{border-top:1px solid var(--line-soft);margin-top:var(--sp-5);padding-top:var(--sp-5)}
.page-hr .mtg-rail .pn-fol-head{color:var(--ink-soft)}

/* "updated 10:46" next to Refresh — a page that silently shows yesterday is
   worse than one that admits how old it is. */
.att-stamp{font-size:var(--t-caption);color:var(--muted);align-self:center;margin-right:var(--sp-2);white-space:nowrap}
.att-flagday{font-size:var(--t-footnote);font-weight:var(--w-semibold);margin:var(--sp-5) 0 var(--sp-3);color:var(--ink-soft)}
.att-flag .att-e-date{font-weight:var(--w-bold);letter-spacing:.02em}
.att-flag-late .att-e-date{color:color-mix(in srgb,var(--st-doing) 55%,#000)}
.att-flag-noshow .att-e-date{color:var(--st-stuck)}
.att-flag-covered .att-e-date{color:var(--blue-mid)}
.att-flag-pickup .att-e-date{color:color-mix(in srgb,var(--st-done) 70%,#000)}
.att-c-flags .hr-hc-n.hr-hot{color:var(--st-stuck)}
.att-c-clean .hr-hc-n{color:var(--st-done)}
.att-c-writeup .hr-hc-n,.att-c-ncns .hr-hc-n{color:var(--st-stuck)}
.att-c-carry .hr-hc-n{color:var(--st-doing)}
.att-slack{flex-basis:100%}
.att-slackbox{margin:var(--sp-3) 0 0;padding:var(--sp-4) var(--sp-5);background:var(--bg);border-radius:var(--r);display:flex;flex-direction:column;gap:var(--sp-3)}
.att-slackmsg{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--t-footnote);padding:var(--sp-4);border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line-soft)}
.att-slackmsg.hit{border-color:var(--blue-royal)}
.att-sm-meta{font-size:var(--t-caption2);color:var(--muted)}
.att-sm-text{white-space:pre-wrap}

/* separation block */
.att-sep{margin-top:var(--sp-6);padding:var(--sp-6b) var(--sp-7);border:1px solid color-mix(in srgb,var(--st-stuck) 30%,#fff);border-radius:var(--r-lg);background:color-mix(in srgb,var(--st-stuck) 5%,#fff)}
.att-sep h3{margin:0;font-size:var(--t-headline);font-weight:var(--w-bold)}
.att-sep h4{font-size:var(--t-footnote);font-weight:var(--w-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:var(--sp-6) 0 var(--sp-4);display:flex;align-items:center;gap:var(--sp-4)}
.att-sep-reason{font-size:var(--t-body);white-space:pre-wrap;margin-top:var(--sp-4);line-height:1.5}
.att-steps{display:flex;flex-direction:column;gap:var(--sp-3)}
.att-step{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--t-body);padding:var(--sp-4) var(--sp-5);border-radius:var(--r);background:var(--card);border:1px solid var(--line-soft);cursor:pointer}
.att-step.done .att-step-t{text-decoration:line-through;color:var(--muted)}
.att-step.late .att-step-d{color:var(--st-stuck);font-weight:var(--w-semibold)}
.att-step-t{flex:1}
.att-step-d{font-size:var(--t-caption);color:var(--muted);white-space:nowrap}
.att-77{font:var(--t-caption)/1.5 ui-monospace,Menlo,monospace;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--sp-5);white-space:pre-wrap;color:var(--ink);margin:0}
.att-sep a.hr-mini{text-decoration:none}

/* setup pane */
.att-cfg h2{font-size:var(--t-title3);font-weight:var(--w-bold);margin:0 0 var(--sp-4)}
.att-cfg h3{font-size:var(--t-headline);font-weight:var(--w-bold);margin:var(--sp-7) 0 var(--sp-4)}
.att-cfgrow{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-3);font-size:var(--t-body)}
/* Per-store employer-of-record card, Form 77 setup. */
.att-entcard{border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--sp-5);margin-bottom:var(--sp-4);background:var(--card)}
.att-entcard h4{margin:0 0 var(--sp-3);font-size:var(--t-subhead)}
.att-entgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-3) var(--sp-4)}
.att-entfield{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--t-caption);color:var(--muted)}
.att-entfield input{font-size:var(--t-body);color:var(--ink)}
/* Separation dialog — benefit payments, collapsed by default. */
.att-sepbenefits{margin:var(--sp-3) 0;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.att-sepbenefits summary{cursor:pointer;font-weight:var(--w-bold);font-size:var(--t-footnote)}
.att-benrow{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3)}
.att-benyn{display:flex;align-items:center;gap:var(--sp-2);min-width:200px;font-weight:400}
.att-benrow input.benAmt,.att-benrow input.benHrs{flex:1}
.att-cfgrow input,.att-cfgrow select{padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:var(--t-body)}
.att-t-label,.att-h-act{flex:1;min-width:0}
.att-t-pts{width:88px}
.hr-titles-ta{width:100%;max-width:520px;padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:var(--t-body)}

/* documents */
.hr-doclist{display:flex;flex-direction:column;gap:var(--sp-3)}
.hr-doc{display:flex;align-items:center;gap:var(--sp-5);font-size:var(--t-body);padding:var(--sp-4) var(--sp-5);border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--card)}
.hr-doc-a{flex:1;min-width:0;text-decoration:none;color:inherit}
.hr-doc-a:hover b{text-decoration:underline}
.hr-docpick{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-5) 0 var(--sp-2);flex-wrap:wrap}
.hr-docpick label.btn{cursor:pointer}

/* schedule */
.hr-shifts{display:flex;flex-direction:column;gap:var(--sp-3)}
.hr-shift{display:grid;grid-template-columns:96px 1fr auto;gap:var(--sp-5);font-size:var(--t-body);padding:var(--sp-4) var(--sp-5);border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--card)}
.hr-shift b{font-weight:var(--w-semibold)}

/* note forms + list */
.hr-emppane .hr-addnote{gap:var(--sp-5);margin-bottom:var(--sp-6);padding:var(--sp-6);background:var(--bg);border-radius:var(--r-lg)}
.hr-emppane .hr-addnote-row{grid-template-columns:180px 1fr;gap:var(--sp-4)}
.hr-emppane .hr-addnote select,.hr-emppane .hr-addnote textarea,.hr-emppane .hr-addnote input{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4) var(--sp-5);font-size:var(--t-body);background-color:var(--card)}
.hr-nform{display:flex;flex-direction:column;gap:var(--sp-5);margin:var(--sp-2) 0}
.hr-nf-lab{display:flex;flex-direction:column;gap:var(--sp-2)}
.hr-nf-t{display:block;font-size:var(--t-caption2);font-weight:var(--w-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hr-req{color:var(--st-stuck)}
.hr-rating{display:flex;gap:var(--sp-2)}
/* SCOPED under .hr-rating — bare ".hr-rate" is the WRAPPER span on the Hire
   interview scorecard, and this button rule was bleeding a 40px box + border
   onto it (part of why the 1-5 row read tiny and cramped). */
.hr-rating .hr-rate{width:46px;height:42px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);cursor:pointer;font:inherit;font-size:var(--t-headline);font-weight:var(--w-semibold);color:var(--muted)}
.hr-rating .hr-rate.on{background:var(--blue-royal);border-color:var(--blue-royal);color:#fff}
/* Jesse's evaluation: NA + halves, "things to consider" under each area,
   comments tucked under the rating, total/average computed as you rate */
.hr-rating{flex-wrap:wrap}
.hr-rating .hr-rate-na{width:50px;color:var(--muted);margin-right:var(--sp-3)}
.hr-rating .hr-rate-na.on{background:var(--ink-soft);border-color:var(--ink-soft)}
.hr-nf-intro{font-size:var(--t-footnote);color:var(--muted);line-height:1.45;padding:var(--sp-4) var(--sp-5);background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-md)}
.hr-nf-hint{display:block;font-size:var(--t-caption);font-weight:var(--w-regular);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:2px;line-height:1.35}
.hr-nf-area{padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}
.hr-nf-sub{margin-top:calc(-1 * var(--sp-3))}
.hr-nf-sub .hr-nf-t{display:none}
.hr-nf-computed{flex-direction:row;align-items:baseline;justify-content:space-between;padding:var(--sp-3) var(--sp-5);background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-md)}
.hr-nf-computed .hr-nf-t{margin:0}
.hr-nf-cv{font-size:var(--t-title3);font-weight:var(--w-bold);color:var(--ink)}
.hr-nf-subv .hr-nf-l{padding-left:var(--sp-5);font-weight:var(--w-regular)}
.hr-nf-total .hr-nf-l,.hr-nf-total .hr-nf-v{font-weight:var(--w-bold);color:var(--ink)}
.hr-emppane .hr-noteitem{border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-4)}
.hr-notefields{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-2) var(--sp-6);font-size:var(--t-footnote);margin:var(--sp-4) 0 0}
.hr-nf-l{color:var(--muted);font-weight:var(--w-semibold);white-space:nowrap}
.hr-nf-v{white-space:pre-wrap}
.hr-evallog{margin-top:var(--sp-5)}

/* ---- the HR modals (log incident · separate · add document) — bigger,
   calmer, on the ramp (Chad: "the bubble… is really small") ---- */
.modal.hr-modal{max-width:640px;padding:var(--sp-8) var(--sp-8) var(--sp-7)}
.modal.hr-modal h2{font-size:var(--t-title3);font-weight:var(--w-bold);margin:0 0 var(--sp-6)}
.modal.hr-modal label{display:block;font-size:var(--t-caption2);font-weight:var(--w-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:var(--sp-6) 0 var(--sp-2)}
.modal.hr-modal label:first-of-type{margin-top:0}
.modal.hr-modal input,.modal.hr-modal select,.modal.hr-modal textarea{width:100%;font:inherit;font-size:var(--t-body);padding:var(--sp-5) var(--sp-5);border:1px solid var(--line);border-radius:var(--r);background-color:var(--card);color:var(--ink)}
.modal.hr-modal textarea{min-height:96px;resize:vertical;line-height:1.5}
.modal.hr-modal .hr-note{font-size:var(--t-footnote);color:var(--muted);margin:var(--sp-5) 0 0;line-height:1.45}
.modal.hr-modal .modal-actions{margin-top:var(--sp-7);gap:var(--sp-4)}
.modal.hr-modal .btn{font-size:var(--t-body);padding:var(--sp-4) var(--sp-6);border-radius:var(--r)}
.modal.hr-modal .btn.hr-danger{background:var(--st-stuck);border-color:var(--st-stuck);color:#fff}
.modal.hr-modal .hr-docpick label.btn{font-size:var(--t-body)}
.hr-note-snap{margin:0 0 var(--sp-5)}
.hr-evallog-h{margin:var(--sp-5) 0 var(--sp-2);font-size:var(--t-footnote)}
.hr-ccnote{margin-top:var(--sp-3)}
.hr-emppane .hr-sec .hr-blockhead h4{white-space:nowrap}
.hr-emppane .hr-sec .hr-blockhead{flex-wrap:wrap;row-gap:var(--sp-4)}
/* candidate pane → back to the list (Chad 8/19: "no way to go back") */
.hr-back{display:inline-flex;align-items:center;gap:var(--sp-2);border:0;background:none;padding:0 0 var(--sp-4);font:inherit;font-size:var(--t-footnote);font-weight:var(--w-semibold);color:var(--blue-royal);cursor:pointer}
.hr-back:hover{text-decoration:underline}

/* ============================================================
   Phone pass from Chad's first hour with KH OS on his iPhone (2026-08-19),
   plus the rail EDIT mode that replaces the "coming with the nav update"
   placeholder. Media queries only (RESPONSIVE.md) — nothing keys off JS.
   ============================================================ */
/* Rail EDIT mode — ↑ ↓ and hide per NAVIGATE item, on every device. */
.nav-editrow{cursor:default;position:relative;padding:6px 6px 6px 6px;gap:8px;box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden}
/* the ≡ grip sits first, so the LABEL is the span that isn't the grip/controls */
.nav-editrow>span:not(.ne-grip):not(.nav-edit-ctl){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-editrow.is-hidden{opacity:.45}
.nav-editrow.is-hidden>span:not(.ne-grip):not(.nav-edit-ctl){text-decoration:line-through}
.ne-grip{flex:0 0 auto;color:rgba(255,255,255,.75);cursor:grab;font-size:var(--t-body);line-height:1;padding:4px 5px;border-radius:6px;touch-action:none;user-select:none;-webkit-user-select:none}
.ne-grip:active{cursor:grabbing;background:rgba(255,255,255,.16)}
.nav-editrow.dragging{opacity:.85;background:rgba(255,255,255,.14);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.nav-edit-ctl{margin-left:auto;display:flex;gap:2px;flex:0 0 auto}
.ne-btn{width:26px;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff;font-size:var(--t-footnote);font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:inherit}
.ne-btn:hover:not([disabled]){background:rgba(255,255,255,.22)}
.ne-btn[disabled]{opacity:.3;cursor:default}
.nav{overflow-x:hidden;scroll-behavior:auto}
.nav-edit-done{margin:8px 4px 4px;padding:8px 12px;border-radius:10px;border:none;background:var(--chart);color:#0B1B54;font-weight:800;cursor:pointer;font-family:inherit}
/* Read-more is a phone affordance; desktop shows the whole brief. */
.bh-more{display:none}

@media(max-width:767px){
  /* 1. The top bar STAYS while the page scrolls — "that should all stay
        whenever you scroll." Content slides under it. */
  .appbar{position:sticky;top:0;z-index:60;
    padding-top:env(safe-area-inset-top);height:calc(var(--appbar-h) + env(safe-area-inset-top))}
  /* 2. The ☰ was technically 44pt but drew a 20px glyph — "a really small
        menu to try to pull from." Bigger glyph, full touch target. */
  .ab-burger{font-size:var(--t-title1);width:48px;height:48px;border-radius:12px}
  .ab-burger:active{background:rgba(255,255,255,.18)}
  /* 3. Today's Brief "takes up the whole screen": clamp to five lines and
        let Read more open it. */
  .bh-line{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .bh-line.open{display:block;-webkit-line-clamp:unset;overflow:visible}
  .bh-more{display:inline-block;margin:6px 0 0;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font-weight:700;font-size:var(--t-caption);cursor:pointer;font-family:inherit}
  .brief-hero{padding:14px 14px 12px}
  .bh-stats{gap:6px}
  /* 4. Calendar: "too narrow… wider format and smaller borders" — the month
        grid loses its inter-cell gutters and outer padding; day cells get
        tighter so seven columns fit a 390px screen with room to read. */
  .cal-grid,.cal-grid-head{gap:1px}
  .cal-grid .cal-day,.cal-grid .day{padding:4px 3px;min-height:52px;border-radius:6px}
  .cal-grid .cal-pill{font-size:var(--t-caption2);padding:1px 4px;border-radius:5px}
  .cal-wrap,.calendar-wrap,.cal-month{padding:0 4px}
  /* 5. Meetings: the open meeting had "a really large border around Jesse
        and Chad, Save notes…" — chips, buttons and the notes box get phone
        density so the notes get the room. */
  .mtg-row{gap:6px;flex-wrap:wrap}
  .mtg-row .btn{padding:7px 11px;font-size:var(--t-caption)}
  .mtg-row-d .chip,.att-chip,.mtg-people .chip{padding:3px 8px;font-size:var(--t-caption)}
  .mm-notes textarea,.mtg-notes textarea,textarea.notes{min-height:42vh}
  /* 6. Board cards: a finger must drag, not select text. */
  .kanban .kb-card,.kanban .card,.kanban [draggable="true"]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .kanban .col.dragover{outline:2px dashed var(--chart);outline-offset:-4px}
}
@media(pointer:coarse){
  .kanban [draggable="true"]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}
.kb-ghost{border-radius:14px}

/* ============================================================
   PHONE CALENDAR — the Apple Calendar model (Chad, 2026-08-19, from his
   iPhone: "the calendar can scroll left and right — it should just fill the
   screen", "the + / Today / arrows / view button scroll away — that should
   stay locked at the top below the top bar", "make ours on iOS work the same
   as Apple's").

   How the iPhone Calendar does it: the chrome is FIXED — nav bar, then the
   weekday row — and the months are one continuous run that scrolls BENEATH
   them at full width, seven equal columns, the month's name riding inline
   in the run. Our month view is already that run (.cal-run / .cal-msep); on
   the phone the only things wrong were the scroll container and the width.

   So, phone only and calendar page only:
   • the page becomes a fixed-height column (app bar above, tab bar below),
   • the topbar is a plain non-scrolling row in that column — it cannot move,
   • .cal-main is the scroller again, exactly as on desktop, so the sticky
     weekday header, the sticky month label (--cal-head-h) and scroll-to-today
     in wireCalendar() all work unchanged — the document no longer scrolls, so
     nothing has to be measured against the app bar,
   • the 600px min-width is gone: 7 × minmax(0,1fr) fills whatever the phone is.
   Selectors carry .page.page-cal on purpose: roles.css and components.css
   load AFTER this file and would otherwise win at equal specificity.
   ============================================================ */
@media(max-width:767px){
  :root{--tabbar-h:57px}
  /* !important where components.css's phone pass (loaded later) also says
     !important — display:block on this page, order:1 on the view switcher. */
  .page.page-cal.page-flush:has(> .cal-flex){
    display:flex !important;flex-direction:column;
    height:calc(100vh - var(--appbar-h) - env(safe-area-inset-top,0px));
    height:calc(100dvh - var(--appbar-h) - env(safe-area-inset-top,0px));
    min-height:0;max-height:none;overflow:hidden;
    padding:0 !important;box-sizing:border-box}
  /* The bar: + on the left, view switch and ‹ Today › on the right, one row,
     pinned by construction (it is outside the scroller). */
  .page.page-cal.page-flush:has(> .cal-flex) > .topbar{
    position:static;flex:0 0 auto;margin:0;padding:8px 12px 8px !important;
    background:var(--bg);border-bottom:1px solid var(--line-soft);
    grid-column:auto;grid-row:auto}
  .page.page-cal .topbar-main{height:auto !important;flex-wrap:nowrap !important;
    align-items:center;gap:8px;overflow:visible}
  .page.page-cal .topbar-title{flex:0 0 auto}
  .page.page-cal .topbar-views{flex:1 1 auto !important;order:0 !important;margin-left:0;min-width:0;display:flex;justify-content:flex-end}
  .page.page-cal .topbar-actions{flex:0 0 auto;order:0 !important;width:auto;justify-content:flex-end;flex-wrap:nowrap}
  .page.page-cal .cal-nav .btn{padding:7px 10px;min-height:38px}
  /* Filters (when open) are a second, also-pinned band under the bar. */
  .page.page-cal .topbar-filters{max-height:30vh;overflow:auto}
  /* .cal-flex is display:contents on desktop and display:block !important in
     components.css's phone pass — here it has to be the flex item that hands
     its height down, or .cal-main has nothing to be constrained by. */
  .page.page-cal.page-flush > .cal-flex{display:flex !important;flex-direction:column;
    flex:1 1 auto;min-height:0;min-width:0;align-items:stretch}
  /* Year view: two mini-months per row, Apple-style (the desktop 210px minimum
     produced one lonely half-width column on a 375px screen) */
  .page.page-cal .yr-wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:4px 10px}
  /* The scroller. Bottom padding clears the fixed tab bar so the last week of
     the last month can come up from under it. */
  .page.page-cal.page-flush:has(> .cal-flex) .cal-main,
  .page.page-cal.page-flush:has(> .cal-flex.has-detail) .cal-main{
    display:block;flex:1 1 auto;min-height:0;max-height:none;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:0 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 8px);
    grid-column:auto;grid-row:auto}
  /* The calendar sources rail has no column to live in on a phone (see the
     767 rule above) — keep it out of the flex column too. */
  .page.page-cal.page-flush .cal-side-col{display:none}
  /* Full width, seven equal columns. The card was the thing scrolling
     sideways; .cal-card-month already lets the sticky header escape, this
     makes every calendar card do the same so the scroller is the context. */
  .page.page-cal .cal-card{overflow:visible;border-radius:0;background:transparent;box-shadow:none;padding:0}
  .page.page-cal .cal-grid,.page.page-cal .cal-grid-head,.page.page-cal .cal-week{min-width:0}
  .page.page-cal .cal-grid-head{padding-left:0;padding-right:0}
  /* Cells: tall enough for the date and three lines, short enough that a
     month is about one screen — the Apple proportion. Pills at 10px read at
     ~50px wide (iOS 18's month view shows event titles at this size too). */
  .page.page-cal .cal-card-month .cal-cell,.page.page-cal .cal-cell{min-height:84px;padding:3px 3px 4px;gap:2px}
  .page.page-cal .cal-card-month .cal-date,.page.page-cal .cal-date{width:22px;height:22px;font-size:var(--t-caption);align-self:flex-end}
  .page.page-cal .cal-cell .cal-pill{font-size:var(--t-caption2);padding:2px 3px;border-radius:3px;line-height:1.25}
  .page.page-cal .cal-cell .ep-time{display:none}
  .page.page-cal .cal-cell .ep-t{font-size:var(--t-caption2)}
  .page.page-cal .cal-more{font-size:var(--t-caption2);padding:0 3px}
  /* The month name rides inline in the run, like the iPhone's — a touch
     smaller than the Mac so it doesn't cost a row. */
  .page.page-cal .cal-msep{font-size:var(--t-title2);padding:8px 6px 4px}
  /* Week / day time grid: the hour gutter was sized for a Mac, and the
     column head ("WED 19" on one line, 19px numeral) overran a 47px column
     so the seven heads printed over each other. Stack them the way the
     iPhone's week strip does — weekday small on top, the number under it. */
  .page.page-cal .tg-wrap{grid-template-columns:40px 1fr}
  .page.page-cal .tg-hr{padding-right:4px}
  .page.page-cal .tg-dhead{flex-direction:column;align-items:center;justify-content:center;
    gap:1px;padding-top:0;height:46px;font-size:var(--t-caption2);letter-spacing:.03em;line-height:1}
  .page.page-cal .tg-dhead b,.page.page-cal .tg-day.today .tg-dhead b{font-size:var(--t-body) !important;line-height:1}
  .page.page-cal .tg-day.today .tg-dhead b{width:22px;height:22px}
  .page.page-cal .tg-strip{padding:0 6px;margin:6px 0 8px}
  .page.page-cal .week-grid{min-width:0}
}

/* HR Team — the team as CARDS in the content pane (Chad, 2026-08-19); click
   one → the folder opens in the same pane with ← Back at the top. */
.hr-people .hr-blockhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hr-pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.hr-pcard{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;font:inherit;
  background:#fff;border:1px solid var(--line-soft,#e6e9f0);border-radius:12px;padding:11px 13px;
  transition:border-color .12s,transform .12s,box-shadow .12s}
.hr-pcard:hover{border-color:#1f6fd0;transform:translateY(-1px);box-shadow:var(--shadow)}
.hr-pcard.active{border-color:#1733a5;box-shadow:0 0 0 2px rgba(23,51,165,.16)}
.hr-pcard-test{border-style:dashed}
.hr-pc-n{font-size:var(--t-body);font-weight:700;color:#1f2433;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hr-pc-t{font-size:var(--t-caption);font-weight:600;color:#2f3a55}
.hr-pc-s{font-size:var(--t-caption);color:#6a7183}
.hr-pc-b{display:flex;gap:4px;flex-wrap:wrap;min-height:0}
.hr-pc-b:empty{display:none}
.fb-theme .hr-pcard{background:#1a2148;border-color:rgba(255,255,255,.14)}
.fb-theme .hr-pc-n{color:#fff}.fb-theme .hr-pc-t{color:#d8deef}
@media (max-width:640px){.hr-pcards{grid-template-columns:1fr 1fr}}

/* ============================================================
   PHONE CALENDAR, pass 2 — Apple's chrome (Chad, 2026-08-19: "take the views
   from the Apple calendar and apply it… the way the menu is laid out, ours is
   a little clunky compared to the way theirs is set up").

   The iPhone Calendar's menu: a back chevron that climbs Day → Month → Year
   ("‹ 2026"), a list toggle and ＋ in the top bar — and Today + Calendars in a
   BOTTOM toolbar, with Calendars opening a sheet. Going down is tapping: a
   month in Year view, a date in Month view (both were already wired). So on
   the phone the view dropdown and the ‹ Today › cluster disappear, replaced
   by hierarchy + the bottom bar. The weekday row goes single-letter (S M T…),
   like theirs. Markup renders everywhere; everything here is ≤767 + .page-cal.
   ============================================================ */
.cal-pback,.cal-ptoggle,.cal-phonebar,.cal-sheetback{display:none}
.cal-grid-head i{font-style:normal}

@media(max-width:767px){
  /* single-letter weekday row, Apple-style */
  .page.page-cal .cal-grid-head i{display:none}
  /* the dropdown-and-arrows bar goes away; hierarchy + bottom bar replace it.
     (#calToday stays in the DOM — the bottom bar's Today clicks it.) */
  .page.page-cal .topbar-views,.page.page-cal .topbar-actions{display:none !important}
  /* the desktop bar is a GRID (title | centred switcher | actions); with the
     switcher and actions gone the title column stays shrink-wrapped, so the
     toggle's margin-left:auto had no space to absorb — flex gives it the row */
  .page.page-cal .topbar-main{display:flex !important}
  .page.page-cal .topbar-title{flex:1 1 auto;display:flex;align-items:center;gap:6px;min-width:0}
  .page.page-cal .cal-pback{display:inline-flex;align-items:center;order:-1;
    border:none;background:none;color:var(--blue-royal);font-family:inherit;
    font-size:var(--t-headline);font-weight:600;letter-spacing:-.2px;padding:6px 10px 6px 2px;
    min-height:44px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page.page-cal .cal-ptoggle{display:inline-flex;align-items:center;justify-content:center;
    order:4;margin-left:auto;width:42px;height:42px;border:none;background:none;
    color:var(--blue-royal);font-size:var(--t-title3);border-radius:10px;cursor:pointer;padding:0}
  .page.page-cal .cal-ptoggle.on{background:rgba(23,51,165,.10)}
  .page.page-cal .topbar-title .cal-add{order:5}
  /* Bottom toolbar — Today left, Calendars right, riding on the tab bar the
     way Apple's Today | Calendars | Inbox rides on the bottom edge. */
  .page.page-cal .cal-phonebar{display:flex;position:fixed;left:0;right:0;z-index:130;
    bottom:calc(var(--tabbar-h,49px) + env(safe-area-inset-bottom,0px));
    justify-content:space-between;align-items:center;padding:2px 16px;
    background:rgba(247,248,252,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--line-soft)}
  .page.page-cal .cal-phonebar .cal-pb{border:none;background:none;color:var(--blue-royal);
    font-family:inherit;font-size:var(--t-body);font-weight:600;padding:10px 8px;min-height:44px;cursor:pointer}
  .page.page-cal .cal-phonebar .cal-pb:only-child{margin:0 auto}
  /* the month scroller and the agenda page both need to clear it */
  .page.page-cal.page-flush:has(> .cal-flex) .cal-main,
  .page.page-cal.page-flush:has(> .cal-flex.has-detail) .cal-main{
    padding-bottom:calc(var(--tabbar-h,49px) + 56px + env(safe-area-inset-bottom,0px))}
  .page.page-cal .mod-body{padding-bottom:calc(var(--tabbar-h,49px) + 64px + env(safe-area-inset-bottom,0px))}
  /* Agenda gets the SAME fixed column the grid views got in pass 1: the page
     is a viewport-height flex column, the bar is a plain pinned row, and the
     LIST is the scroller (.mod-body). Sticky-under-the-app-bar was tried and
     fought the page's own padding — the bar sat 42px down and painted over
     the first day label. Pinned-by-construction has no such fights. */
  .page.page-cal.page-flush:has(> .mod-shell){
    display:flex !important;flex-direction:column;
    height:calc(100vh - var(--appbar-h) - env(safe-area-inset-top,0px));
    height:calc(100dvh - var(--appbar-h) - env(safe-area-inset-top,0px));
    min-height:0;overflow:hidden;padding:0 !important;box-sizing:border-box}
  .page.page-cal.page-flush:has(> .mod-shell) > .mod-shell{flex:1 1 auto;min-height:0;margin:0}
  .page.page-cal .mod-shell > .mod-doc{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0}
  .page.page-cal .mod-doc > .topbar{position:static;flex:0 0 auto;margin:0;
    padding:8px 12px !important;background:var(--bg);border-bottom:1px solid var(--line-soft)}
  .page.page-cal .mod-doc > .mod-body{flex:1 1 auto;min-height:0;overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 14px}
  /* Agenda's inline CALENDARS strip folds into the sheet — it was the clunky
     part: a capped 150px box between the bar and the list. */
  .page.page-cal .mod-shell > .mod-rail{display:none}

  /* ---- the Calendars sheet ---- */
  .page.page-cal.cals-open .cal-sheetback{display:block;position:fixed;inset:0;
    background:rgba(10,15,40,.45);z-index:250}
  .page.page-cal.cals-open .cal-side-col,
  .page.page-cal.cals-open .mod-shell > .mod-rail{
    display:block !important;position:fixed !important;left:0;right:0;bottom:0;top:auto;
    width:auto !important;max-width:none !important;height:auto !important;
    max-height:70vh !important;overflow:auto;z-index:260;
    margin:0 !important;padding:26px 16px calc(18px + env(safe-area-inset-bottom,0px)) !important;
    background:#fff;border:none;border-radius:18px 18px 0 0;
    box-shadow:0 -12px 40px rgba(8,26,102,.25)}
  .page.page-cal.cals-open .cal-side-col::before,
  .page.page-cal.cals-open .mod-shell > .mod-rail::before{content:"";position:absolute;
    top:8px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:2px;background:#d4d7e2}
}

/* ============================================================
   PHONE PASS 3 (Chad, 2026-08-19): Apple-Notes flow for Notes, the rotated
   write-up signature card, and the email-a-copy dialog.
   ============================================================ */
/* phone-only affordances, parked everywhere else */
.pn-pback{display:none}

/* ---- write-up / evaluation signature, phone, portrait ----
   The card turns SIDEWAYS: hand the phone over and the name, the pad and
   Save all read the right way up held landscape. The pad is the centre of
   the screen; Save is always on screen. Landscape phones already fit. */
@media(max-width:767px) and (orientation:portrait){
  .overlay.sig-rot{padding:0;align-items:stretch;justify-content:flex-start}
  /* nothing floats over the pad while someone is signing */
  body:has(.overlay.sig-rot) .ai-fab{display:none}
  .overlay.sig-rot .modal.hr-modal{
    position:fixed;top:0;left:0;margin:0 !important;
    width:100vh;height:100vw;max-width:none;min-height:0;max-height:none;
    width:100dvh;height:100dvw;
    transform:rotate(90deg) translateY(-100%);transform-origin:top left;
    /* the entry animation (khRise) fill-pins transform:none over the rotation */
    animation:none;
    border-radius:0;overflow:auto;display:flex;flex-direction:column;
    padding:12px 18px 12px}
  .overlay.sig-rot .modal.hr-modal h2{font-size:var(--t-headline);margin:0 0 2px}
  .overlay.sig-rot .modal.hr-modal .hr-dim2{font-size:var(--t-caption);margin:0 0 6px;line-height:1.35}
  .overlay.sig-rot .modal.hr-modal .fld{margin:0 0 6px}
  .overlay.sig-rot .sigpad-wrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
  .overlay.sig-rot .sigpad{height:100%;max-height:240px;width:100%}
  .overlay.sig-rot .modal-actions{margin-top:8px;padding-bottom:env(safe-area-inset-left,0px)}
  .overlay.sig-rot .modal-actions .btn{min-height:46px;font-size:var(--t-body)}
}

/* ---- email-a-copy dialog ---- */
.hr-em-err{margin:8px 0 0;padding:9px 12px;border-radius:10px;background:#fdecec;
  color:#9c1c1c;font-size:var(--t-footnote);line-height:1.4}
.hr-em-err .hr-mini{margin-left:8px}

/* ---- Notes = Apple Notes on the phone: two screens, not three panes ----
   Screen 1 (default): notebooks, folders and the note list, full width —
   Apple's Folders/list screen. Screen 2 (.pn-open): the note, full screen,
   with "‹ Notes" back. Same fixed-column shell as Calendar/agenda. */
@media(max-width:767px){
  .page.pn-page.page-flush{
    display:flex !important;flex-direction:column;
    height:calc(100vh - var(--appbar-h) - env(safe-area-inset-top,0px));
    height:calc(100dvh - var(--appbar-h) - env(safe-area-inset-top,0px));
    min-height:0;overflow:hidden;padding:0 !important;box-sizing:border-box}
  .page.pn-page > .topbar{position:static;flex:0 0 auto;margin:0;
    padding:8px 12px !important;background:var(--bg);border-bottom:1px solid var(--line-soft)}
  /* "Hide folders" is a desktop pane control — meaningless on two screens.
     The Editor/Cards switcher goes too: the list screen IS the list. Search
     and ＋ New note share one row under the title, Apple-style. */
  .page.pn-page #pnFoldToggle{display:none}
  .page.pn-page .topbar-views .view-wrap{display:none !important}
  .page.pn-page .topbar-views{flex:1 1 auto !important;order:1 !important;margin-left:0;min-width:0}
  .page.pn-page .topbar-views .pn-listtop{max-width:none;flex:1 1 auto}
  .page.pn-page .topbar-views .pn-listtop input{width:100%}
  .page.pn-page .topbar-actions{flex:0 0 auto;order:2;width:auto}
  .page.pn-page .topbar-actions .btn{min-height:42px}
  .page.pn-page > .mtg-shell{display:flex !important;flex-direction:column;
    flex:1 1 auto;min-height:0;margin:0}
  /* Screen 1 — the LIST is the page. The rail loses its capped-strip phone
     treatment (order:2, max-height:150px) and becomes the whole screen. */
  .page.pn-page:not(.pn-open) > .mtg-shell > .mtg-rail{
    order:0 !important;flex:1 1 auto;min-height:0;
    width:auto !important;max-width:none !important;
    height:auto !important;max-height:none !important;overflow-y:auto;
    -webkit-overflow-scrolling:touch;margin:0 !important;border:none;
    padding:12px 14px calc(var(--tabbar-h,57px) + env(safe-area-inset-bottom,0px) + 16px) !important}
  .page.pn-page:not(.pn-open) > .mtg-shell > .mtg-doc{display:none}
  /* Screen 2 — the NOTE is the page. Apple's note screen has no list header:
     "‹ Notes" IS the header, so the module bar goes away entirely. */
  .page.pn-page.pn-open > .topbar{display:none}
  .page.pn-page.pn-open > .mtg-shell > .mtg-rail{display:none !important}
  .page.pn-page.pn-open > .mtg-shell > .mtg-doc{
    display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:0 0 calc(var(--tabbar-h,57px) + env(safe-area-inset-bottom,0px) + 16px)}
  .page.pn-page .pn-pback{display:inline-flex;align-items:center;align-self:flex-start;
    border:none;background:none;color:var(--blue-royal);font-family:inherit;
    font-size:var(--t-headline);font-weight:600;padding:10px 14px 6px 10px;min-height:44px;cursor:pointer}
  /* Apple list rhythm: roomy rows, title over date+snippet, hairline between */
  .page.pn-page .pn-item{padding:11px 8px;border-bottom:1px solid var(--line-soft);border-radius:0}
  .page.pn-page .pn-item .pn-i-title{font-size:var(--t-headline);font-weight:600}
  .page.pn-page .pn-item .pn-i-sub{font-size:var(--t-footnote)}
  .page.pn-page .pn-fol{min-height:44px;font-size:var(--t-body)}
  .page.pn-page .pn-editor{border-radius:0;flex:1 1 auto;padding:4px 16px 24px}
  .page.pn-page .pn-edit-title{font-size:var(--t-title2);font-weight:700}
  .page.pn-page .pn-edit-body{min-height:46vh;font-size:var(--t-headline)}
  .page.pn-page .pn-editor-foot{flex-wrap:wrap;row-gap:10px}
}

/* ===== Notes, the Apple Notes way (Chad, 2026-08-20) ===== */
/* Date buckets over the list — 📌 Pinned, Today, Yesterday, Previous 7 Days… */
.pn-grp-head{font-size:var(--t-caption);font-weight:800;color:var(--ink-soft);padding:12px 10px 4px}
.pn-grp-head:first-child{padding-top:4px}
/* Apple's row: bold title, then "date  snippet" with the date darker */
.pn-rail .pn-item{position:relative;padding-right:30px}
.pn-i-title{font-size:var(--t-footnote)}
.pn-i-sub b{color:var(--ink-soft);font-weight:600}
.pn-i-pin{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;font-size:var(--t-footnote);opacity:0;padding:4px;border-radius:6px;transition:opacity .12s}
.pn-item:hover .pn-i-pin,.pn-item.active .pn-i-pin{opacity:.7}
.pn-i-pin:hover{opacity:1;background:var(--line-soft)}
/* The editor: centered date on top, the first line wears the Title style */
.pn-edit-date{text-align:center;font-size:var(--t-caption);color:var(--muted);margin:2px 0 10px}
.pn-editor .pn-edit-title{font-size:var(--t-title2);font-weight:800;margin-bottom:6px}
.pn-editor .pn-edit-title::placeholder{color:var(--muted);opacity:.55}
.pn-edit-body{line-height:1.55}
@media (max-width:640px){.pn-i-pin{opacity:.55}}
/* ===== Team slide-over (Chad 8/20 — "a child sidebar that comes out with the
   names a little larger… lean into the Apple functionality"). The rail button
   opens it; it glides out beside the rail; picking a person tucks it back. */
.mtg-shell{position:relative}
.hr-so-btn{display:flex;align-items:center;gap:var(--sp-3);width:100%;margin:0 0 var(--sp-4);padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);cursor:pointer;font:inherit;font-size:var(--t-body);font-weight:var(--w-semibold);color:var(--ink);box-shadow:0 1px 2px rgba(22,20,46,.05)}
.hr-so-btn:hover{background:var(--bg)}
.hr-so-btn .pn-count{margin-left:auto}
.hr-so-chev{color:var(--muted);font-size:var(--t-headline);line-height:1;margin-left:var(--sp-2)}
.hr-slideover{position:absolute;left:calc(var(--rail-w) + var(--sp-4));top:0;bottom:0;width:380px;max-width:70vw;z-index:60;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:0 18px 50px rgba(22,20,46,.22);opacity:0;transform:translateX(-16px);pointer-events:none;transition:opacity .15s cubic-bezier(0,0,.2,1.4),transform .15s cubic-bezier(0,0,.2,1.4)}
.hr-slideover.open{opacity:1;transform:none;pointer-events:auto}
.hr-so-head{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line-soft)}
.hr-so-head h3{margin:0;font-size:var(--t-headline);font-weight:var(--w-bold)}
.hr-so-x{border:0;background:none;cursor:pointer;font-size:var(--t-body);color:var(--muted);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm)}
.hr-so-x:hover{background:var(--bg);color:var(--ink)}
.hr-so-list{overflow:auto;padding:var(--sp-3);flex:1}
.hr-so-row{display:flex;flex-direction:column;gap:var(--sp-1);width:100%;text-align:left;border:0;background:none;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);cursor:pointer;font:inherit}
.hr-so-row:hover{background:var(--bg)}
.hr-so-row.active{background:var(--blue-soft,#eef2ff)}
.hr-so-n{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--t-body);font-weight:var(--w-semibold);color:var(--ink);line-height:1.4}
.hr-so-m{font-size:var(--t-footnote);color:var(--muted);line-height:1.4}
@media (max-width:760px){.hr-slideover{left:var(--sp-4);right:var(--sp-4);width:auto;max-width:none}}

/* ===== THE SCALES pass on the HR/attendance rails + rows (Chad 8/20: "some
   of our fonts are a little small to read") — names read at footnote/body,
   never below 13, and half-pixel sizes are gone from these panes. */
#hrRosterRail .hr-rrow-t{font-size:var(--t-footnote)}
#hrRosterRail .hr-rrow-d{font-size:var(--t-caption);color:var(--muted)}
.hr-hcards .hr-hc-l{font-size:var(--t-footnote)}
.hr-hcards .hr-hc-h{font-size:var(--t-caption)}
.att-e-main{font-size:var(--t-body)}
.att-e-main b{font-weight:var(--w-semibold)}
.att-e-meta{font-size:var(--t-footnote)}
.att-flagday{font-size:var(--t-footnote);font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.hr-pcards .hr-pc-n{font-size:var(--t-body)}
.hr-pcards .hr-pc-t,.hr-pcards .hr-pc-s{font-size:var(--t-footnote)}

/* ====================================================
   PHONE PASS 4 — the Team/Attendance screens on the iPhone (Chad, 2026-08-19
   night): full-width compact stat cards, no phantom left margin, the people
   list reachable and full-size, the positions bubbles small enough to fit.
   ============================================================ */
@media(max-width:767px){
  /* the 22px desktop gutter between rail and doc read as a "big margin on
     the left" once the rail moved out of that column */
  .page.page-hr .mtg-shell > .mtg-doc{padding-left:0 !important;min-width:0}
  /* Cards: two per row, number + label — the hint line is what made each one
     a full-width tower ("you can make smaller boxes for them"). */
  .page.page-hr .hr-hcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .page.page-hr .hr-hcard{padding:10px 12px;gap:2px;border-radius:12px}
  .page.page-hr .hr-hc-n{font-size:var(--t-title2);gap:6px}
  .page.page-hr .hr-hc-pct{font-size:var(--t-caption)}
  .page.page-hr .hr-hc-l{font-size:var(--t-caption);line-height:1.25}
  .page.page-hr .hr-hc-h{display:none}
  /* The rail (search · brand · location · positions · the TEAM LIST) was the
     118px strip at the bottom — "too small to see or even try to make a
     selection … it stops scrolling". It is a normal full-width section now:
     natural height, the PAGE scrolls through it. */
  .page.page-hr .mtg-shell > .mtg-rail{
    position:static !important;order:2;width:auto !important;max-width:none !important;
    height:auto !important;max-height:none !important;overflow:visible !important;
    margin:12px 0 0 !important;border:none;border-top:1px solid var(--line-soft);
    padding:12px 2px calc(var(--tabbar-h,57px) + env(safe-area-inset-bottom,0px) + 10px) !important}
  .page.page-hr .mtg-rail .mtg-rail-list{max-height:none;overflow:visible;flex:0 0 auto}
  .page.page-hr .mtg-rail .msec-grow{flex:0 0 auto}
  /* Positions on a folder: small wrapped bubbles under the label instead of
     a tall stack you scroll through ("nest those bubbles… make some of them
     a little smaller to make them fit"). */
  /* Folder profile rows are a 160px-label grid — half a phone's width gone
     before the value starts, which is what stacked the position bubbles one
     per line. One column: label above, value full width, chips wrap tight. */
  .hr-emppane .hr-flag{grid-template-columns:1fr;gap:3px;padding:9px 2px}
  .hr-emppane .hr-flag > b{width:100%}
  .hr-emppane .hr-storechips{justify-content:flex-start;gap:6px;width:100%}
  .hr-emppane .hr-schip{font-size:var(--t-caption) !important;padding:3px 9px !important;gap:4px;white-space:nowrap}
}
/* The team-members picker panel becomes a bottom SHEET on the phone — the
   absolute top-0/bottom-0 panel pinned itself to a 5000px page, so what you
   saw of it depended on where the scroll happened to be. */
@media(max-width:767px){
  .hr-slideover{position:fixed;left:0 !important;right:0 !important;bottom:0;top:auto;
    width:auto !important;max-width:none !important;max-height:74vh;z-index:260;
    border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(8,26,102,.28);
    transform:translateY(14px)}
  .hr-slideover.open{transform:translateY(0)}
  .hr-slideover .hr-so-list{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .hr-slideover .hr-so-row{padding:12px 14px}
}
/* why a person is under "Needs attention" — the reason IS the row (Chad 8/20) */
.hr-pc-why{display:block;font-size:var(--t-footnote);color:var(--ink-soft);margin-top:var(--sp-2);line-height:1.4}
/* ★ The section that needs the attention carries the flag — a yellow or red
   wash + a pulse when the folder opens (Chad 8/20: "flash it yellow or red
   so they know that it needs attention when they select on it"). */
.hr-emppane .hr-sec.hr-sec-warn{border-color:#e6b800;background:#fffbea;animation:hrSecPulseW 1.2s ease-out 2}
.hr-emppane .hr-sec.hr-sec-hot{border-color:#e05252;background:#fff5f4;animation:hrSecPulseH 1.2s ease-out 2}
.hr-emppane .hr-sec.hr-sec-warn::before{background:#e6b800}
.hr-emppane .hr-sec.hr-sec-hot::before{background:#e05252}
.hr-secflag{font-size:var(--t-caption);font-weight:var(--w-bold);letter-spacing:.05em;text-transform:uppercase;color:#8a6d00;background:#ffe9a8;border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4)}
.hr-secflag.hot{color:#fff;background:var(--st-stuck,#d33)}
@keyframes hrSecPulseW{0%{box-shadow:0 0 0 0 rgba(230,184,0,.45)}70%{box-shadow:0 0 0 10px rgba(230,184,0,0)}100%{box-shadow:0 0 0 0 rgba(230,184,0,0)}}
@keyframes hrSecPulseH{0%{box-shadow:0 0 0 0 rgba(211,51,51,.4)}70%{box-shadow:0 0 0 10px rgba(211,51,51,0)}100%{box-shadow:0 0 0 0 rgba(211,51,51,0)}}

/* ============================================================
   PHONE PASS 5 (Chad, 2026-08-20): the Notion-style filter bar on the HR
   pages — "all the filters should live at the top… not just this linear
   long set of choices… that should affect everything, even the numbers."
   Chips in the pinned strip: Brand ▾ · Location ▾ · Position ▾; a tap opens
   an option sheet; ✕ = back to the whole team. Desktop keeps the rail, so
   the bar exists only under 768px.
   ============================================================ */
/* ── #215: saved filter views — the chip row renders at BOTH widths (desktop
   filters via the rail, phone via the ▾ chips; a saved view only restates the
   state keys they share, so it applies identically from either surface). */
.hr-vbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:2px 0}
.hr-vchip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  border:1px solid var(--line-soft);background:#fff;border-radius:999px;
  padding:5px 12px;font-family:inherit;font-size:var(--t-caption);font-weight:600;
  color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:.15s}
.hr-vchip:hover{border-color:var(--cyan);color:var(--blue-mid)}
.hr-vchip.on{background:var(--blue-royal);border-color:var(--blue-royal);color:#fff}
.hr-vchip .hr-vdel{font-size:var(--t-caption2);opacity:.75;padding:2px;margin:-2px;cursor:pointer}
.hr-vchip .hr-vdel:hover{opacity:1}
.hr-vsave{color:var(--blue-mid);border-style:dashed}
@media(max-width:767px){
  .hr-vbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:2px 0;scrollbar-width:none}
  .hr-vbar::-webkit-scrollbar{display:none}
  .hr-vchip{padding:7px 13px;font-size:var(--t-footnote);min-height:36px}
}
.hr-fbar{display:none}
@media(max-width:767px){
  .hr-fbar{display:flex;gap:6px;align-items:center;overflow-x:auto;
    -webkit-overflow-scrolling:touch;padding:2px 0 4px;scrollbar-width:none}
  .hr-fbar::-webkit-scrollbar{display:none}
  .hr-fsel{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
    border:1px solid var(--line-soft);background:#fff;border-radius:999px;
    padding:7px 13px;font-family:inherit;font-size:var(--t-footnote);font-weight:600;
    color:var(--ink);cursor:pointer;min-height:36px;white-space:nowrap}
  .hr-fsel .hr-fsel-c{font-size:var(--t-caption);opacity:.9}
  .hr-fsel.on{background:var(--blue-royal);border-color:var(--blue-royal);color:#fff}
  .hr-fsel.on .hr-fsel-c{opacity:1}
  .hr-fsel.hr-fclear{min-width:36px;justify-content:center;padding:7px 10px;color:var(--muted)}
  /* the rail's Brand / Location / Position groups fold into the bar; the
     Show group duplicates the cards. What remains below is the LIST. */
  .page.page-hr .mtg-rail .msec[data-msec="brand"],
  .page.page-hr .mtg-rail .msec[data-msec="store"],
  .page.page-hr .mtg-rail .msec[data-msec="pos"],
  .page.page-hr .mtg-rail .msec[data-msec="role"],
  .page.page-hr .mtg-rail .msec[data-msec="cards"]{display:none}
}
/* the option sheet (phone bottom sheet; the bar never renders on desktop) */
.hr-fsheet-ov{padding:0;align-items:flex-end}
.hr-fsheet{width:100%;max-height:72vh;background:#fff;border-radius:18px 18px 0 0;
  box-shadow:0 -12px 40px rgba(8,26,102,.28);display:flex;flex-direction:column;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));animation:none}
.hr-fsheet::before{content:"";align-self:center;width:40px;height:4px;border-radius:2px;
  background:#d4d7e2;margin:0 0 8px}
.hr-fsheet-h{font-weight:800;font-size:var(--t-body);padding:0 18px 8px;color:var(--ink)}
.hr-fsheet-list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 10px}
.hr-fopt{display:flex;align-items:center;justify-content:space-between;width:100%;
  border:none;background:none;font-family:inherit;font-size:var(--t-body);color:var(--ink);
  padding:12px 10px;border-radius:10px;cursor:pointer;text-align:left;min-height:46px}
.hr-fopt.on{background:var(--blue-soft,#eef2ff);color:var(--blue-royal);font-weight:700}
.hr-fopt-head{font-size:var(--t-caption2);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:12px 10px 3px}

/* Rename ON the equipment card (Chad, 2026-08-20) — the pencil shows on
   hover (always on touch), the headline becomes a box, Enter saves. */
.eq-rn{margin-left:4px;cursor:pointer;font-size:var(--t-caption);opacity:0;transition:opacity .12s;padding:2px 4px;border-radius:6px}
.eq-row:hover .eq-rn{opacity:.6}
.eq-rn:hover{opacity:1;background:var(--line-soft)}
.eq-rn-in{font:inherit;font-weight:700;font-size:inherit;border:1.5px solid var(--blue-royal);border-radius:7px;padding:1px 6px;max-width:100%;width:180px;outline:none;background:#fff;color:inherit}
.fb-theme .eq-rn-in{background:#141a3c}
@media (pointer:coarse){.eq-rn{opacity:.55}}

/* ============================================================
   PHONE PASS 6 (Chad, 2026-08-20): saving on the employee folder keeps your
   place — the record you just saved / signed / emailed scrolls back into
   view and flashes so the next step (Sign, Email) is right under your thumb.
   ============================================================ */
.hr-note-flash{animation:hrNoteFlash 1.7s ease-out 1;border-radius:12px}
@keyframes hrNoteFlash{
  0%{background:#fff7d6;box-shadow:0 0 0 3px rgba(230,184,0,.55)}
  60%{background:#fff7d6;box-shadow:0 0 0 3px rgba(230,184,0,.25)}
  100%{background:transparent;box-shadow:0 0 0 0 rgba(230,184,0,0)}
}

/* khConfirm / khPrompt / khAlert — the in-app dialogs standing in for the
   native ones the Mac/iPhone webview never implements (2026-08-20). */
.kh-ask{z-index:200}
.kh-askbox{max-width:420px;width:100%;padding:20px 22px}
.kh-ask-msg{font-size:var(--t-body);font-weight:600;line-height:1.5;white-space:pre-wrap;color:var(--ink)}
.kh-ask-in{width:100%;margin-top:12px;font:inherit;padding:8px 10px;border:1.5px solid var(--line);border-radius:9px;outline:none}
.kh-ask-in:focus{border-color:var(--blue-royal)}
.kh-askbox .modal-actions{margin-top:16px}
@media (max-width:640px){.kh-ask{align-items:center;padding:20px}.kh-askbox{height:auto}}

/* Right-click options menu on rows/cards + board-card selection tint */
.nav-ctx{padding:6px}
.nav-ctx .view-item{width:100%;text-align:left}
.nav-ctx-del{color:#b3261e}
.task-card.nav-sel{background:rgba(55,189,245,.12);box-shadow:0 0 0 2px var(--blue-mid)}
.task-card.nav-focus{box-shadow:inset 0 0 0 2px var(--blue-mid)}
.att-entry-click{cursor:pointer}
.att-entry-click:hover{background:var(--bg);border-radius:var(--r-sm)}

/* Frozen line column on the wide financial tables (Chad, 2026-08-20: "the
   line column… needs to stay" while the period columns scroll). Every label
   cell paints its own background so the numbers slide UNDER it, never through
   it; tinted total rows restate their tint inline on that first cell. */
.pnl-scroll table td:first-child,
.pnl-scroll table th:first-child{
  position:sticky;left:0;z-index:2;background:var(--bg,#fff);
  box-shadow:6px 0 8px -6px rgba(15,23,42,.14);
}

/* ── HR 8/20: breathing room, Slack panel close, Hire grid ─────────────── */
/* Paige was pinned to the bottom edge (Chad 8/20: "hard to read with Paige
   being so close to the bottom — we need a little bit more margin") */
.hr-hlanding{padding:2px 2px 48px}
.att-slackhead{display:flex;align-items:center;gap:var(--sp-3)}
/* Hire: the candidates as a sortable grid — click a header to sort, a row to open */
.hr-gridwrap{overflow-x:auto}
.hr-grid{width:100%;border-collapse:collapse;font-size:var(--t-footnote)}
.hr-grid th{position:sticky;top:0;background:var(--card);text-align:left;padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);cursor:pointer;user-select:none;white-space:nowrap;
  font-size:var(--t-caption);font-weight:var(--w-semibold);color:var(--ink-soft)}
.hr-grid th:hover{color:var(--ink)}
.hr-grid th.on{color:var(--blue-royal)}
.hr-grid td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft);white-space:nowrap}
.hr-grid tbody tr{cursor:pointer}
.hr-grid tbody tr:hover td{background:var(--bg)}

/* pointer→DnD bridge: no text selection while a mouse drag is in flight */
body.dnd-bridging, body.dnd-bridging *{user-select:none!important;-webkit-user-select:none!important}

/* ══ PHONE MEETINGS — #201 (2026-08-20) ════════════════════════════════════
   Chad, 8/19, from his iPhone: meetings "could be smaller and you could have
   more of an opportunity to put the meeting notes in". Scoped .page.page-meet,
   phone-only; desktop is untouched. Later stylesheets (components/roles) carry
   their own !important phone passes — match them where they fight. */
.page-meet .mtg-fchips{display:none} /* chips are the PHONE home of Views */
@media (max-width:767px){
  /* ── Views as a chip strip up top (the rail's copy hides below, so the
        state still lives in ONE visible control — Chad, 8/13) */
  .page.page-meet .mtg-fchips{display:flex;gap:6px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 4px;margin-top:2px}
  .page.page-meet .mtg-fchips::-webkit-scrollbar{display:none}
  .page.page-meet .mtg-fchips .fchip{flex:0 0 auto;white-space:nowrap;
    border-radius:999px;padding:7px 12px;font-size:var(--t-footnote)}
  .page.page-meet .mtg-rail .mtg-side-sec:has([data-vwpreset]){display:none !important}
  /* ── The rail's duplicate meeting list: the agenda pane IS the list on a
        phone. Dropping it also drops the 118px capped strip you could barely
        scroll (same bug class as HR's picker, fixed 8/20 pass 4). What stays
        below the list is short — Calendars + alerts — so let it breathe. */
  .page.page-meet .mtg-rail .msec[data-msec="list"]{display:none !important}
  .page.page-meet .mtg-rail{max-height:none !important;overflow:visible !important}
  /* ── Agenda rows: two tight lines instead of a tall airy card row.
        time · title / store · flags, status pinned right. */
  .page.page-meet .ag-row{display:grid !important;grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:10px;row-gap:3px;padding:9px 10px !important;align-items:center}
  .page.page-meet .ag-time{grid-column:1;grid-row:1;flex:none !important;
    font-size:var(--t-caption) !important;white-space:nowrap}
  .page.page-meet .ag-title{grid-column:2;grid-row:1;font-size:var(--t-body);min-width:0}
  .page.page-meet .ag-c-st{grid-column:3;grid-row:1;justify-self:end}
  .page.page-meet .ag-c-store{grid-column:2;grid-row:2;justify-self:start}
  .page.page-meet .ag-c-flags{grid-column:3;grid-row:2;justify-self:end}
  .page.page-meet .ag-c-who{display:none} /* "6 on it" — open the meeting for that */
  .page.page-meet .ag-row .chip{font-size:var(--t-caption2);padding:2px 8px}
  .page.page-meet .ag-c-store:empty,.page.page-meet .ag-c-flags:empty{display:none}
  .page.page-meet .ag-dhead{padding:10px 2px 4px}
  /* ── The open meeting, notes-first (flex order; DOM order unchanged for
        desktop). Title, then the notes you came to type, then the controls
        that act on them, then agenda/invite/recordings/transcript. */
  .page.page-meet .meet-page{display:flex;flex-direction:column}
  .page.page-meet .meet-page > .mm-back{order:-4;align-self:flex-start}
  .page.page-meet .meet-page > .mm-head{order:-3}
  .page.page-meet .meet-page > .field:has(.notes-wrap){order:-2;margin-top:8px}
  .page.page-meet .meet-page h2{font-size:var(--t-title3)}
  .page.page-meet .mm-when{font-size:var(--t-caption)}
  /* attendee chips: one scrollable row, not a wall */
  .page.page-meet .mm-attendees{flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .page.page-meet .mm-attendees::-webkit-scrollbar{display:none}
  .page.page-meet .mm-attendees .att-chip{flex:0 0 auto}
  /* controls: compact row right under the notes */
  .page.page-meet .mm-actions{margin-top:12px;border-top:0;padding-top:0}
  .page.page-meet .mm-actions .parse-row{gap:6px}
  .page.page-meet .mm-actions .btn{padding:8px 12px;font-size:var(--t-footnote)}
  .page.page-meet .mm-actions .engine-badge{flex-basis:100%;order:9;font-size:var(--t-caption2)}
  .page.page-meet .mtg-storerow{flex-wrap:wrap;row-gap:6px}
  .page.page-meet .mtg-storerow .mtg-storesel{flex:1 1 auto}
  /* ── "Tasks created from this meeting": the title was flex-crushed to 0px
        and rendered one word per line (16+140+80px of fixed siblings in a
        275px row). Title owns line 1, the controls take line 2. */
  .page.page-meet .action-row{flex-wrap:wrap}
  .page.page-meet .action-title{flex:1 1 calc(100% - 34px)}
  .page.page-meet .action-row select{flex:1 1 auto;max-width:none;margin-left:26px}
  .page.page-meet .action-row .action-add{flex:0 0 auto}
}

/* ══ PHONE CONTACTS + PASSWORDS (2026-08-20) ═══════════════════════════════
   Chad, from his iPhone: "Contacts are unreadable... a lot of stuff written
   over each other" and "hard to see the passwords". Two defects, one cause
   each:
   1. #179 put .lrow on the contact/equipment rows; the .lrow phone grid
      (19px checkbox track + main + right, !important) auto-places .ct-name
      into the 19px track, where it overflows visibly ONTO the next column.
      .ct-row.lrow out-specifies .lrow, so these rows stack instead.
   2. Passsafe vault pages are 6-column KB tables — 640px of table in a
      285px window. With data-vlabel stamped by vaultPhoneLabels(), each row
      becomes a labeled card. */
@media (max-width:767px){
  .ct-row.lrow{grid-template-columns:minmax(0,1fr) !important;row-gap:3px;
    padding:10px 10px !important}
  .ct-row.lrow > *{grid-column:1 !important;grid-row:auto !important}
  .ct-row.lrow .ct-name{flex-wrap:wrap}
  .ct-row.lrow .ct-name b{white-space:normal;overflow:visible;min-width:0}
  .ct-row.lrow .ct-contactcol{font-size:var(--t-footnote)}
  .ct-row.lrow .ct-where{text-align:left;justify-self:start}
  .ct-row.lrow .ct-where:empty,.ct-row.lrow .ct-contactcol:empty{display:none}
  .ct-row.lrow .ct-where .chip{font-size:var(--t-caption2);padding:2px 8px}
  /* vault tables → one labeled card per row; the header row hides because
     every cell now carries its own label */
  .vault-card .kb-html table{display:block;width:100% !important;
    min-width:0 !important;border:0} /* beat the deliberate 640px KB table floor */
  .vault-card .kb-html thead{display:none}
  .vault-card .kb-html tbody{display:block;width:100%}
  .vault-card .kb-html tr{display:block;border:1px solid var(--line-soft);
    border-radius:12px;padding:9px 12px;margin:0 0 10px;background:var(--card,#fff)}
  .vault-card .kb-html tr:has(th){display:none}
  .vault-card .kb-html td{display:block;border:0 !important;padding:3px 0;
    width:auto !important;max-width:none !important;white-space:normal;
    overflow-wrap:anywhere}
  .vault-card .kb-html td[data-vlabel]::before{content:attr(data-vlabel);
    display:block;font-size:var(--t-caption2);font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted,#8a94a6);margin-bottom:1px}
  .vault-card .kb-html td:empty{display:none}
}

/* ── Store P&L sheet (Chad, 2026-08-20: "lock the line column down"; 08-21:
   "lock the top row so as we scroll we see which period we are in"). The
   card is the scroll box in BOTH directions — same recipe as .amx-wrap —
   so the Line column pins left and the period header row pins top, with
   the corner cell winning both. max-height keyed to the viewport; flex:none
   for the same #main flex-shrink reason .amx-wrap documents. The header's
   rule is an inset shadow, not a border: in a collapsed table a border stays
   with the grid while a sticky cell moves, and the pinned row would look
   like it was floating. */
.card.sp-sheet{padding:0;overflow:auto;max-height:min(78vh,900px);flex:none}
.sp-sheet thead th{position:sticky;top:0;background:var(--card,#fff);z-index:3;box-shadow:inset 0 -2px 0 var(--line)}
/* The phone stylesheet makes every table its own horizontal scroller
   (table{display:block}); inside this card that would unpin the header,
   so the sheet's table stays a table and the card does the scrolling. */
.sp-sheet table{display:table;overflow:visible}
/* A sub-total the OS summed from Pivot's lines because her export printed
   the section flat (fixFlatSections) — italic and soft, so a derived figure
   never passes for a printed one. */
.pnl-derived{font-style:italic;color:var(--ink-soft)}

/* ══ PHONE CHROME PASS — Chad's 8/20-21 list from his iPhone ═══════════════
   App bar proportions · one button size in every top bar · "How this works"
   as a small top-right pill everywhere · the view dropdown opening on-screen ·
   HR / Meetings chips that wrap instead of running off the glass · a compact
   segmented switcher · Reports' header in one shape · Contacts A–Z + header
   bands · Notes in Apple's three screens. All ≤767px. Desktop untouched. */
.ab-caret{display:none}                  /* it never did anything — goHome is Home */
.pn-lback-row{display:none}              /* phone-only Notes screen-2 header */
@media(max-width:767px){
  /* ── App bar: small picture, bigger mark, OS next to the logo, a search
        bar that reads as one, a smaller bell */
  /* padding-top is the notch/Dynamic Island inset (styles ~5796) — the 8/21
     shorthand wiped it and put the bar "up into the camera" (Chad). */
  .appbar{padding:env(safe-area-inset-top,0px) 8px 0 !important;gap:6px !important}
  .ab-burger{width:38px !important;height:40px !important;font-size:var(--t-title3)}
  .appbar-brand{gap:7px !important;padding:4px 4px !important}
  .appbar-brand .mark,.appbar-brand .mark-img{width:32px !important;height:32px !important;
    flex:0 0 32px !important;border-radius:9px}
  .ab-word{font-size:var(--t-title3) !important;letter-spacing:-.3px}
  .ab-word .ab-kh{display:none}
  .appbar-right{margin-left:auto;gap:8px !important;align-items:center}
  .ab-search-btn{width:auto !important;min-width:122px;height:32px !important;
    padding:0 11px !important;justify-content:flex-start !important;gap:7px !important;
    border-radius:10px !important;font-size:var(--t-footnote) !important}
  .ab-search-btn .abs-glyph{font-size:var(--t-body)}
  .ab-search-btn .abs-label{display:inline !important;font-weight:600;opacity:.85}
  .ab-search-input{height:32px !important}
  .ab-bell{width:32px !important;height:32px !important;flex:0 0 32px !important}
  .ab-bell svg{width:16px !important;height:16px !important}
  .ab-avatar,.ab-avatar .avatar{width:30px !important;height:30px !important;
    flex:0 0 30px !important;flex-basis:30px !important;font-size:var(--t-caption2) !important}
  /* ── Top bars: every action button the same height on the same line.
        (More lives inside .th-more, which the earlier button rules never
        reached — it sat at 44px beside 29px neighbours.) */
  .topbar-actions{align-items:center !important}
  .topbar-actions .btn,.topbar-actions .th-more > .btn,.topbar-actions .th-more .btn-ghost{
    height:32px !important;min-height:0 !important;padding:0 12px !important;
    font-size:var(--t-footnote) !important;line-height:1 !important;display:inline-flex !important;
    align-items:center !important;gap:5px;box-sizing:border-box}
  .topbar-actions .btn-primary{padding:0 13px !important}
  /* the display override above must not wake buttons other phone rules hide */
  .page.pn-page #pnFoldToggle{display:none !important}
  .topbar-actions .hidden,.topbar-actions .btn.hidden{display:none !important}
  .topbar-title .view-wrap .view-btn,.topbar-views .view-wrap .view-btn{
    height:32px !important;padding:0 9px !important;font-size:var(--t-caption)}
  /* ── "How this works": one small pill, top-right, on the title line —
        under the picture on every module (Chad, 8/20). */
  .topbar{position:relative}
  .btn-howto,.topbar-actions .btn.btn-howto,.rep-dactions .btn.btn-howto{height:26px !important;min-height:0 !important;padding:0 9px !important;
    font-size:var(--t-caption) !important;border-radius:999px !important;color:var(--muted) !important;
    background:#fff !important;border:1px solid var(--line-soft) !important}
  .topbar-actions .btn.btn-howto{position:absolute;top:6px;right:14px;z-index:2;width:auto !important;flex:none}
  /* ── The view dropdown opened to the LEFT of a 50px trigger at x≈82 — off
        the glass. Open it to the right. */
  .topbar .view-wrap .view-menu{left:0 !important;right:auto !important}
  /* ── Chip rows wrap instead of scrolling off-screen */
  /* the filter strip is a nowrap row: search took 150px and the chip bar got
     245px of a 333px screen, so Position hung off the glass. Search on its
     own line, chips on theirs, full width. */
  .page.page-hr .topbar-filters{flex-wrap:wrap;row-gap:6px}
  .page.page-hr .topbar-filters .pn-listtop{flex:1 1 100%;max-width:none}
  .hr-fbar{flex:1 1 100%;flex-wrap:wrap;overflow:visible !important;row-gap:6px}
  .hr-fsel{min-height:32px;padding:5px 11px;font-size:var(--t-caption)}
  .hr-vbar{flex-wrap:wrap;overflow:visible !important;row-gap:6px}
  .hr-vchip{min-height:32px;padding:5px 11px;font-size:var(--t-caption)}
  .page.page-meet .mtg-fchips{flex-wrap:wrap;overflow:visible;row-gap:6px}
  .page.page-meet .mtg-fchips{gap:5px}
  .page.page-meet .mtg-fchips .fchip{padding:4px 9px;font-size:var(--t-caption);min-height:0}
  .page.page-meet .mtg-fchips .fchip .vw-ic{display:none}
  .page.page-meet .mtg-fchips .fchip[data-vwcopy]{display:none}
  /* ── Segmented switcher: Apple-sized, centred, not three 108px slabs */
  .topbar-views .vw-switch{width:auto !important;display:inline-flex !important;
    margin:0 auto;padding:2px}
  .topbar-views .vw-switch .view-tab{flex:0 0 auto !important;padding:4px 14px !important;
    font-size:var(--t-caption) !important;min-width:0}
  /* ── Reports header: back top-left, guide top-right, the title on its own
        line under them — one shape for every report (the discount report
        had no title line and three different heights). */
  .rep-dhead{display:grid !important;grid-template-columns:minmax(0,1fr) auto;
    column-gap:10px;row-gap:8px;align-items:center}
  .rep-dhead > #repBack{grid-column:1;grid-row:1;justify-self:start;
    height:30px !important;min-height:0 !important;padding:0 10px !important;font-size:var(--t-caption);margin:0}
  .rep-dhead > .rep-dactions{grid-column:2;grid-row:1;justify-self:end;margin:0}
  .rep-dhead > .rep-dtitle{grid-column:1 / -1;grid-row:2;min-width:0}
  .rep-dhead .rep-dtitle h2{font-size:var(--t-title3);margin:0;line-height:1.2}
  /* ── Contacts: the group header is a band across the card */
  .ct-group-h{background:var(--blue-soft,#eef2ff);color:var(--blue-deep,#1733a5);
    padding:7px 12px !important;margin:0 -10px;border-radius:6px;gap:8px}
  .ct-group-h .fchip-n{background:#fff}
  /* ── Notes, Apple's three screens: Folders → the folder's notes → the note.
        Screen 1 shows the folder block only; screen 2 the list with ‹ Folders;
        screen 3 is the existing .pn-open note screen. */
  .page.pn-page.pn-lv-folders .pn-rail .msec[data-msec="list"]{display:none !important}
  .page.pn-page.pn-lv-list .pn-rail .pn-folders{display:none !important}
  .page.pn-page.pn-lv-list .pn-lback-row{display:flex;align-items:center;gap:10px;
    padding:2px 0 10px}
  .page.pn-page .pn-lback{border:none;background:none;color:var(--blue-royal);
    font:inherit;font-size:var(--t-headline);font-weight:600;padding:4px 2px;cursor:pointer}
  .page.pn-page .pn-lname{font-size:var(--t-headline)}
  .page.pn-page.pn-lv-folders .pn-folders .pn-fol{min-height:46px;font-size:var(--t-headline)}
}

/* ══ NOTES, closer to Apple (2026-08-21, Chad's second phone round) ══════════
   Collapsible notebooks on the phone, document scrolling on the Folders and
   list screens (the fixed inner scroller would not reach the bottom folders
   on his iPhone), a sort control, built-in smart folders. */
.pn-bookhead{display:none}               /* phone-only; desktop shows the list */
.pn-sort{margin-left:auto;font:inherit;font-size:var(--t-caption);font-weight:600;color:var(--ink-soft);
  border:1px solid var(--line-soft);border-radius:8px;background:#fff;padding:2px 6px;max-width:140px}
@media(max-width:767px){
  /* Screens 1 + 2 scroll with the document like every other module — the
     fixed column stays only for the note itself (.pn-open). */
  .page.pn-page.page-flush.pn-lv-folders,.page.pn-page.page-flush.pn-lv-list{
    display:block !important;height:auto !important;min-height:0;overflow:visible !important}
  .page.pn-page.pn-lv-folders > .mtg-shell,.page.pn-page.pn-lv-list > .mtg-shell{
    display:block !important;height:auto !important}
  .page.pn-page.pn-lv-folders > .mtg-shell > .mtg-rail,.page.pn-page.pn-lv-list > .mtg-shell > .mtg-rail{
    overflow:visible !important;height:auto !important;max-height:none !important;flex:none !important;
    padding:12px 14px 24px !important}
  /* Notebooks: the one you're in, as a header; tap to open the list */
  .pn-bookhead{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--line-soft);
    background:#fff;border-radius:12px;padding:11px 12px;font:inherit;font-size:var(--t-headline);font-weight:700;
    color:var(--ink);cursor:pointer;margin-bottom:8px;text-align:left}
  .pn-bookhead .pn-bookhead-c{margin-left:auto;font-size:var(--t-caption);color:var(--muted)}
  .pn-bookhead.open{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
  .pn-books{display:none}
  .pn-books.open{display:block;border:1px solid var(--line-soft);border-top:0;border-radius:0 0 12px 12px;
    padding:6px 8px 8px;margin-bottom:10px;background:#fff}
  .pn-books.open .pn-fol-head{margin-top:2px}
  .pn-sort{font-size:var(--t-caption);padding:4px 8px;min-height:30px}
}
/* Hire: pick which interview guide a NEW interview uses (first / second / team member) */
.hr-formpick{font:inherit;font-size:var(--t-footnote);padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);margin-right:var(--sp-3)}

/* #234 — bank-feed warning (In the bank + Cash & Deposits) */
.feed-warn{margin:0 0 16px;border:1px solid #f1c58a;background:#fff7e8;border-left:4px solid #e08a00;border-radius:12px;padding:4px 14px}
.feed-warn-row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-size:var(--t-footnote);line-height:1.5;color:#5a4300}
.feed-warn-row+.feed-warn-row{border-top:1px solid #f3dcb6}
.feed-warn-ic{flex:0 0 auto;font-size:var(--t-body);line-height:1.4}
.feed-warn b{color:#7a4d00}
/* an evaluation more than six months past due — "not done", kept as history, never nags */
.hr-ms.stale{opacity:.6}
.hr-ms.stale .hr-badge{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
/* 🎙 interview in progress — Stop lives IN the pane, not only the floating pill (Chad 8/21: "no way to stop the recording") */
.hr-recbanner{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);margin-bottom:var(--sp-4);border-radius:var(--r-md);background:#b91c1c;color:#fff;font-size:var(--t-body)}
.hr-recbanner .btn{background:#fff;color:#b91c1c;border:none;font-weight:var(--w-bold)}
.hr-recbanner #hrRecT{font-variant-numeric:tabular-nums;opacity:.9}
.hr-recdot{width:10px;height:10px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite}
/* The name on an attendance entry / flag links to the employee profile
   (Chad 8/26) — the rest of the row still opens the points pop-up. */
.att-pname{cursor:pointer;color:var(--blue-mid,#3b5bdb);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;transition:text-decoration-color .12s}
.att-pname:hover{text-decoration-color:currentColor}
/* Slack evidence auto-attached to a detection flag (Chad 8/26) */
.att-slackauto{display:block;font-size:var(--t-caption);color:var(--ink-soft);margin-top:3px;padding-left:2px;font-style:italic}
/* A frozen Workstream sync must SHOUT — a quiet clock time read as current
   while the roster sat two days stale (Chad 8/26). */
.hr-foot-stale{font-size:var(--t-footnote);font-weight:600;color:#8a5300;background:#fff5e0;
  border:1px solid #f0c674;border-radius:8px;padding:10px 12px;margin-top:12px;line-height:1.45}
/* "No store yet" — a roster row nobody's store manager can see (Chad 8/26) */
.pn-fol.hr-nostore{color:#8a5300}
.pn-fol.hr-nostore.active{background:#fff5e0;color:#7a4a00}

/* ── Chevrons, not triangles ──────────────────────────────────────────────────
   Chad, 2026-08-27: "the text and drop down arrows … the looking feel."
   The OS drew every menu affordance as a filled triangle glyph (▾ ▸ ▼) typed
   straight into the markup. Apple has not used a filled triangle for a menu
   since Aqua — it uses a thin chevron — and a glyph is at the mercy of whatever
   font ships it, so the same caret rendered at a different weight on Windows.
   These draw the chevron from borders instead: one shape, every platform.

   NOT touched: ▲/▼ in .fb-chg. Those are trend indicators on the finance
   deltas — up/down movement, not a menu — and a triangle is correct there. */
.abm-caret,.v-caret,.crm-caret,.nav-chev,.msec-caret,
.view-wrap .view-btn .v-caret,.topbar .view-tabs .v-caret{
  font-size:0;line-height:0;display:inline-flex;align-items:center;justify-content:center}
.abm-caret::after,.v-caret::after,.crm-caret::after,.nav-chev::after,.msec-caret::after{
  content:"";width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;border-radius:1px;
  transform:translateY(-2px) rotate(45deg);transition:transform var(--m-slow) ease}
/* Collapsed sections point right; open ones point down. The state is a class
   now, not a swapped glyph, so the chevron can animate between the two. */
.nav-chev::after,.msec-caret::after{transform:translateX(-1px) rotate(-45deg)}
.nav-chev.open::after,.msec-caret.open::after{transform:translateY(-2px) rotate(45deg)}
.msec-caret{width:20px;height:20px}

/* Disclosure triangles on <details> — same treatment. Each of these already
   rotates 90deg when [open], so the drawn chevron inherits that for free. */
.kb-html .vault-drop summary::before,.kb-body .vault-drop > summary::before,
.build-status-sec > summary::before,.bon-hist summary::before,
.bank-more summary::before,.cal-trash>summary::after{
  content:"";display:inline-block;width:6px;height:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  border-radius:1px;transform:rotate(-45deg);margin-right:7px;
  position:relative;top:-1px;transition:transform var(--m-slow) ease}
.kb-html .vault-drop[open] summary::before,.kb-body .vault-drop[open] > summary::before,
.build-status-sec[open] > summary::before,.bon-hist[open] summary::before,
.bank-more[open] summary::before,.cal-trash[open]>summary::after{transform:rotate(45deg)}
.cal-trash>summary::after{margin-right:0;margin-left:auto}
/* Meeting action items: the destination question, asked before anything is made. */
.action-dest{font-size:var(--t-footnote);color:var(--ink-soft,#4b5563);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.action-dest select{font-size:var(--t-footnote);padding:4px 8px;border-radius:8px}

/* ── Rendered meeting notes ────────────────────────────────────────────────
   The read view for plain-text notes. Chad, 2026-09-02: "they look like code."
   Same width and rhythm as the textarea it replaces, with real hierarchy. */
.notes-view{width:100%;min-height:46vh;padding:13px 15px;border:1px solid var(--line);
  border-radius:13px;font-size:var(--t-body);line-height:1.7;color:var(--ink);cursor:text;
  transition:.15s;overflow-wrap:break-word}
.notes-view:hover{border-color:var(--line-soft)}
.notes-view > *:first-child{margin-top:0}
.notes-view > *:last-child{margin-bottom:0}
.notes-view p{margin:0 0 10px}
.notes-view h5.nv-h{margin:18px 0 7px;font-size:var(--t-footnote);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.notes-view h5.nv-h:first-child{margin-top:0}
.notes-view ul,.notes-view ol{margin:0 0 11px;padding-left:22px}
.notes-view li{margin:0 0 5px}
.notes-view blockquote{margin:0 0 11px;padding:2px 0 2px 13px;
  border-left:3px solid var(--line);color:var(--ink-soft);font-style:italic}
.notes-view strong{font-weight:650;color:var(--ink)}
.notes-view a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.notes-view .nv-rule{display:flex;align-items:center;gap:10px;margin:18px 0 12px;
  font-size:var(--t-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft)}
.notes-view .nv-rule::before,.notes-view .nv-rule::after{content:"";flex:1;height:1px;background:var(--line)}
.notes-view .nv-rule:empty::after,.notes-view .nv-rule > span{flex:0 0 auto}
@media (max-width:767px){ .notes-view{min-height:30vh;padding:11px 13px} }

/* ── Timesheets (2026-09-07) ─────────────────────────────────────────────── */
.ts-panel{padding:16px 18px;margin-top:18px}
.ts-panel-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}
.ts-panel-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ts-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-5)}
.ts-card{text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);cursor:pointer;font:inherit;color:inherit;transition:.15s;display:flex;flex-direction:column;gap:2px}
.ts-card:hover{border-color:var(--cyan);box-shadow:var(--shadow)}
.ts-card.active{border-color:var(--blue-deep);box-shadow:0 0 0 2px var(--blue-deep) inset}
.ts-card-name{font-weight:var(--w-semibold);font-size:var(--t-body);color:var(--ink)}
.ts-card-num{font-family:var(--font-head);font-weight:var(--w-bold);font-size:var(--t-title1);line-height:1.1;margin:2px 0}
.ts-card-num span{font-size:var(--t-caption);font-weight:var(--w-medium);color:var(--ink-soft);margin-left:4px}
.ts-card-meta{font-size:var(--t-caption);color:var(--ink-soft)}
.ts-card-meta b{color:var(--ink)}
.ts-now{font-style:normal;font-size:var(--t-caption2);color:var(--blue-deep);font-weight:var(--w-semibold);margin-left:4px}
.ts-next{font-style:normal;font-size:var(--t-caption2);color:var(--ink-soft);margin-left:3px}
.ts-form{margin-bottom:var(--sp-5)}
.ts-form-title{font-weight:var(--w-semibold);font-size:var(--t-headline);margin-bottom:var(--sp-3)}
.ts-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3) var(--sp-4)}
.ts-form-grid label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-caption);color:var(--ink-soft);font-weight:var(--w-medium)}
.ts-form-grid input{font:inherit;font-size:var(--t-body);padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-xs);color:var(--ink);background:#fff}
.ts-form-grid .ts-wide{grid-column:1 / -1}
.ts-form-actions{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4)}
.ts-form-err{color:#b42318;font-size:var(--t-caption);font-weight:var(--w-medium)}
.ts-del{margin-left:auto;color:#b42318}
.ts-table .mt-row{cursor:pointer}
.ts-table tfoot td{border-top:2px solid var(--line);color:var(--ink-soft)}
.ts-by{color:var(--ink-soft);font-size:var(--t-caption)}
.ts-guide{line-height:1.6;max-height:64vh;overflow:auto;font-size:var(--t-footnote)}
.ts-guide-h{font-size:var(--t-footnote);font-weight:var(--w-bold);margin:14px 0 4px}
@media (max-width:767px){.ts-cards{grid-template-columns:repeat(2,1fr)}}