/* Extracted verbatim from the three <style> blocks that used to live in index.html.
 * Order preserved — later rules override earlier ones, so it matters. */

  :root {
    /* brand (retuned, same names so existing rules keep working) */
    --navy: #14478C;
    --navy-hover: #0F3A75;
    --vivid: #4091BA;
    --ocean: #4BE1E4;
    --yellow: #FFDD00;
    --charcoal: #1C1C1E;   /* healthia Charcoal Black (brand); was #14202E, off-brand */
    --white: #FFFFFF;
    --bg: #F5F8FC;
    --border: #E7EEF6;
    --p-critical: #C0392B;
    --p-high: #E67E22;
    --p-medium: #2980B9;
    --p-low: #27AE60;
    /* Multi-D calendar chips. The three existing record chips already hold navy, blue and red;
       --p-high (#E67E22) reads too close to the closure red at a 3px border, so purple. */
    --p-multid: #7D3C98;
    --p-multid-soft: #A569BD;
    --s-open: #C0392B;
    --s-inprogress: #E67E22;
    --s-complete: #27AE60;
    --s-blocked: #8E44AD;
    /* new tokens used by the modern refinement layer */
    --surface: #FFFFFF;
    --surface-2: #F8FAFD;
    --border-2: #D6E1EE;
    --ink: #14202E;
    --ink-2: #566579;
    --ink-3: #8695A7;
    /* AA-safe text on white / light tints + on navy (added by /impeccable colorize) */
    --text-tertiary: #64707F;
    --on-navy-2: rgba(255,255,255,.82);
    --t-high: #A44B04;
    --t-medium: #1C6299;
    --t-low: #1B7A44;
    --vivid-text: #2C7699;
    --ring: rgba(20,71,140,.85);   /* ~6.4:1 on white; .28 was ~1.6:1 and failed SC 1.4.11 */
    --r-sm: 7px;
    --r: 10px;
    --r-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(18,40,72,.06);
    --shadow: 0 6px 22px rgba(18,40,72,.09);
    --shadow-lg: 0 18px 50px rgba(18,40,72,.20);
    --t: 160ms cubic-bezier(.4,0,.2,1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    /* healthia brand stack. Linear Sans is licensed and not web-served, so it renders only
       where installed; Open Sans is the brand's own first fallback and is loaded above. */
    font-family: 'Linear Sans', 'Open Sans', Poppins, Tahoma, Arial, sans-serif;
    font-size: 14px;
    color: var(--charcoal);
    background: var(--bg);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  /* ── Icons ──
     Inline SVG sprite instead of emoji: emoji render differently on every OS (and as
     flat glyphs on some Linux/older Windows), can't be recoloured, and don't inherit
     font weight. These scale with font-size and take currentColor. */
  .ic { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }
  .ic-lg { width: 40px; height: 40px; }          /* empty-state illustrations */
  .empty-icon .ic-lg { color: var(--border-2); }

  /* ── Accessibility / font size toggle ── */
  body.text-large { font-size: 16px; }
  body.text-large thead th { font-size: 13px; }
  body.text-large .tab { font-size: 13px; }

  /* ── Role-based nav visibility — a Technician sees Calendar/Work/Assets only ── */
  body.role-technician .admin-only { display: none !important; }

  /* Pipeline: hidden from literally everyone, including other Admins, by default — the opposite
     polarity from .admin-only above (which needs a role cache to avoid flashing admin tabs to a
     Technician on first paint). Here the safe default IS hidden, so no cache is needed: only
     applyPipelinePermissions() in js/app.js adds .pipeline-viewer, and only for the one person
     backend/src/routes/items.js's canSeePipeline() would also allow. */
  body:not(.pipeline-viewer) .pipeline-only { display: none !important; }

  .font-toggle {
    display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,.7);
  }
  .font-btn {
    background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:#fff;
    border-radius:3px; padding:2px 7px; cursor:pointer; font-family:inherit; font-size:12px;
    min-height:24px;
  }
  .font-btn.active { background:rgba(255,255,255,.35); }

  /* ── Your Items — the personal, assigned-to-me list. Sits above the Executive Summary so the
     dashboard opens on "what do I need to do" before the org-wide view underneath it. */
  .myitems-section {
    background:#fff; border:1px solid var(--border); border-left:4px solid var(--vivid);
    border-radius:10px; padding:16px 20px; margin-bottom:16px;
  }
  .myitems-header { margin-bottom:12px; }
  .myitems-title {
    font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--vivid);
    display:flex; align-items:center; gap:6px;
  }
  .myitems-count {
    background:var(--vivid); color:#fff; font-size:11px; font-weight:700; border-radius:10px;
    padding:1px 7px; margin-left:2px;
  }
  .myitems-count:empty { display:none; }
  .myitems-sub {
    display:block; font-size:12px; color:var(--text-tertiary); margin-top:4px;
    font-weight:400; text-transform:none; letter-spacing:normal;
  }
  .myitems-list { display:flex; flex-direction:column; gap:6px; }
  .myitems-empty { font-size:13px; color:var(--text-tertiary); padding:6px 2px; }
  .myitems-row {
    display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border);
    border-radius:7px; cursor:pointer; background:var(--bg); flex-wrap:wrap;
  }
  .myitems-row:hover { border-color:var(--vivid); background:#EAF2FB; }
  .myitems-row-badge {
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--ink-2);
    background:var(--surface-2); border-radius:10px; padding:2px 8px; white-space:nowrap;
  }
  .myitems-row-title { font-size:13px; font-weight:600; flex:1; min-width:160px; }
  .myitems-group-label {
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    color:var(--ink-2); margin:10px 0 2px; padding:0 2px;
  }
  .myitems-group-label:first-child { margin-top:0; }
  .myitems-group-overdue { color:var(--p-critical); }
  .myitems-group-count { font-weight:400; color:var(--text-tertiary); margin-left:2px; }
  .myitems-show-more {
    align-self:flex-start; background:none; border:none; color:var(--vivid); font-size:12px;
    font-weight:600; font-family:inherit; cursor:pointer; padding:4px 2px; margin-top:2px;
  }
  .myitems-show-more:hover { text-decoration:underline; }

  /* ── Executive Summary ── */
  .exec-summary {
    background: var(--navy); border-radius: 10px; padding: 16px 20px;
    margin-bottom: 16px; color: #fff;
  }
  .exec-summary-header {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
  }
  .exec-summary-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ocean); }
  .exec-toggle { background:none; border:none; color:var(--on-navy-2); cursor:pointer; font-size:13px; font-family:inherit; }
  .exec-toggle:hover { color:#fff; }
  .exec-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
  .exec-item {
    background:rgba(255,255,255,.08); border-radius:7px; padding:10px 13px;
    border-left:4px solid var(--p-high);
  }
  .exec-item.critical { border-left-color: var(--p-critical); }
  .exec-item.high { border-left-color: var(--p-high); }
  .exec-item-title { font-size:13px; font-weight:600; margin-bottom:3px; }
  .exec-item-meta { font-size:11px; color:var(--on-navy-2); display:flex; gap:10px; }
  .exec-item-badge { font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; background:rgba(255,255,255,.15); }

  /* ── Acquisition cards ── */
  .acq-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; margin-bottom:16px; }
  .acq-card {
    background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px;
    cursor:pointer; transition:box-shadow .15s; position:relative; overflow:hidden;
  }
  .acq-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.12); }
  .acq-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--vivid); }
  .acq-card.acquisition::before { background:var(--navy); }
  .acq-card.sitemove::before { background:var(--p-medium); }
  .acq-card.closure::before { background:var(--p-critical); }

  /* A note written on the card, so "delayed" is readable without opening the record. Styled as
     an annotation rather than as data, and clamped so a long note cannot stretch the tile. The
     "+ Add note" prompt stays hidden until hover, or a grid of blank cards turns into a grid of
     invitations. */
  /* The text is inert — the card's own click must still open the record. Only the pencil edits. */
  .card-note { margin-top:6px; font-size:12px; color:var(--text-secondary); min-height:18px;
               display:flex; align-items:flex-start; gap:6px; }
  .card-note-text { flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .card-note-empty { flex:1; color:var(--text-tertiary); opacity:0; transition:opacity .12s; }
  /* pointer-events off while invisible: an opacity:0 button still swallows clicks, which would
     put an invisible target in the middle of the card — the bug this whole arrangement avoids. */
  .card-note-edit { flex:none; background:none; border:0; padding:0; cursor:pointer; line-height:1;
                    color:var(--text-tertiary); opacity:0; transition:opacity .12s; pointer-events:none; }
  .acq-card:hover .card-note-empty { opacity:1; }
  .acq-card:hover .card-note-edit, .card-note-edit:focus-visible { opacity:1; pointer-events:auto; }
  .card-note-edit:hover { color:var(--navy); }
  .card-note-input { width:100%; font:inherit; font-size:12px; border:1px solid var(--border);
                     border-radius:4px; padding:4px 6px; resize:vertical; }
  @media (prefers-reduced-motion: reduce) { .card-note-empty { transition:none; } }
  .acq-card-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px; }
  /* anywhere (not break-word) so the flex item's min-content width shrinks too — otherwise a
     long unbroken name pushes past the badge and gets clipped by .acq-card's overflow:hidden. */
  .acq-card-name { font-size:15px; font-weight:700; color:var(--navy); overflow-wrap:anywhere; }
  .acq-type-badge {
    font-size:10px; font-weight:700; padding:3px 8px; border-radius:12px; white-space:nowrap; margin-left:8px; flex-shrink:0;
  }
  .type-acquisition { background:#EAF0FB; color:var(--navy); }
  .type-sitemove { background:#EAF4FB; color:var(--t-medium); }
  .type-closure { background:#FDEAEA; color:var(--p-critical); }
  .acq-clinics { font-size:12px; color:#555; margin-bottom:8px; }
  .acq-date { font-size:12px; color:var(--ink-2); margin-bottom:10px; }
  .acq-progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
  /* No width transition: the bar is rebuilt by innerHTML on every render, so the fill is a
     brand-new element at its final width and has nothing to animate from. It only ever cost
     a layout-driving transition the browser had to keep bookkeeping for. To actually animate
     progress, the render would have to reuse the element — that's a job for /impeccable animate. */
  .acq-progress-fill { height:100%; background:var(--vivid); border-radius:3px; }
  .acq-progress-label { font-size:11px; color:#666; margin-top:4px; }
  .acq-docs { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
  .acq-doc-chip { font-size:10px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:2px 7px; color:#555; }

  /* ── Acquisition detail ── */
  /* A record now reads as its own page rather than a floating dialog — it holds a status
     summary, a checklist, sites, documents and notes, which is too much for a modal. It still
     sits in the content column so the sidebar stays usable. */
  .acq-detail-overlay { display:none; }
  .acq-detail-overlay.open { display:block; }
  /* While a record page is open the list behind it is hidden, so it reads as a navigation
     rather than a layer on top of something. */
  #appRoot.record-open .page.active { display:none; }
  .acq-detail-panel {
    background:#fff; border-radius:12px; margin:0 auto;
    border:1px solid var(--border); overflow:hidden;
  }
  .record-back {
    display:inline-flex; align-items:center; gap:6px; background:none; border:none;
    color:var(--vivid); font-size:13px; font-weight:600; cursor:pointer; padding:0;
    margin-bottom:12px; font-family:inherit;
  }
  .record-back:hover { text-decoration:underline; }

  /* Activity log rows: when, what, who. */
  .act-row {
    display:grid; grid-template-columns:130px 1fr auto; gap:12px; align-items:baseline;
    padding:8px 2px; border-bottom:1px solid var(--border); font-size:12px;
  }
  .act-row:last-child { border-bottom:none; }
  .act-when { color:var(--text-tertiary); font-variant-numeric:tabular-nums; }
  .act-action { color:var(--navy); font-weight:600; }
  .act-detail { color:#555; margin-top:2px; }
  .act-who { color:var(--text-tertiary); white-space:nowrap; }
  @media (max-width:700px) {
    .act-row { grid-template-columns:1fr; gap:2px; }
    .act-who { margin-bottom:4px; }
  }

  /* Status summary. Everything in it is computed from the record. */
  .record-summary { padding:16px 22px; background:var(--bg); border-bottom:1px solid var(--border); }
  .rs-line { font-size:14px; color:var(--navy); line-height:1.65; }
  .rs-block { margin-top:12px; }
  .rs-title {
    font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
    color:var(--text-tertiary); margin-bottom:5px;
  }
  .rs-block ul { margin:0; padding-left:18px; }
  .rs-block li { font-size:13px; color:#333; line-height:1.7; }
  .rs-owner { color:var(--text-tertiary); font-size:11px; margin-left:6px; }
  .rs-blocked .rs-title { color:#B3261E; }
  .rs-blocked li::marker { color:#B3261E; }
  .acq-detail-header {
    background:var(--navy); color:#fff; padding:18px 22px;
    display:flex; align-items:flex-start; justify-content:space-between;
  }
  .acq-detail-title { font-size:18px; font-weight:700; margin-bottom:4px; }
  .acq-detail-sub { font-size:12px; color:rgba(255,255,255,.7); display:flex; gap:14px; flex-wrap:wrap; }
  .acq-detail-close { background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; font-size:22px; line-height:1; }
  .acq-detail-close:hover { color:#fff; }
  .acq-inner-nav { background:var(--bg); border-bottom:1px solid var(--border); display:flex; padding:0 20px; }
  .acq-inner-tab {
    padding:10px 16px; font-size:12px; font-weight:600; cursor:pointer; color:#666;
    border-bottom:3px solid transparent; text-transform:uppercase; letter-spacing:.3px;
  }
  .acq-inner-tab.active { color:var(--navy); border-bottom-color:var(--navy); }
  .acq-inner-panel { display:none; padding:20px; }
  .acq-inner-panel.active { display:block; }

  /* ── Checklist ── */
  .checklist-group { margin-bottom:20px; }
  .checklist-group-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--navy); margin-bottom:8px; padding-bottom:6px; border-bottom:2px solid var(--border); }
  .checklist-item {
    display:flex; align-items:flex-start; gap:12px; padding:10px 12px;
    border:1px solid var(--border); border-radius:7px; margin-bottom:8px;
    background:#fff; transition:background .15s;
  }
  .checklist-item.done { background:#F8FFF9; border-color:#b8e6c1; }
  .checklist-item.done .cl-label { text-decoration:line-through; color:var(--text-tertiary); }
  .cl-check { width:18px; height:18px; cursor:pointer; margin-top:2px; flex-shrink:0; accent-color:var(--p-low); }
  .cl-body { flex:1; }
  .cl-label { font-size:13px; font-weight:600; color:var(--charcoal); }
  .cl-meta { display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; align-items:center; }
  .cl-meta select { border:1px solid var(--border); border-radius:3px; padding:2px 6px; font-size:11px; font-family:inherit; }
  .cl-notes-input {
    width:100%; margin-top:6px; border:1px solid var(--border); border-radius:4px;
    padding:5px 8px; font-size:12px; font-family:inherit; resize:none; min-height:40px;
    display:none;
  }
  .cl-notes-input.open { display:block; }
  .cl-notes-btn { font-size:11px; color:var(--vivid-text); background:none; border:none; cursor:pointer; padding:0; }
  .cl-step-num { font-size:11px; color:var(--text-tertiary); flex-shrink:0; width:20px; text-align:right; margin-top:3px; }

  /* ── Documents ── */
  .doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
  .doc-card {
    background:#fff; border:1px solid var(--border); border-radius:8px; padding:14px;
    position:relative;
  }
  .doc-type-icon { font-size:24px; margin-bottom:6px; }
  .doc-card-name { font-size:13px; font-weight:600; color:var(--navy); margin-bottom:3px; }
  .doc-card-type { font-size:11px; color:var(--vivid-text); margin-bottom:4px; }
  .doc-card-path { font-size:11px; color:var(--ink-2); word-break:break-all; }
  .doc-card-date { font-size:10px; color:var(--text-tertiary); margin-top:6px; }
  .doc-card-del { position:absolute; top:8px; right:8px; background:none; border:none; cursor:pointer; color:var(--ink-3); font-size:14px; }
  .doc-card-del:hover { color:var(--p-critical); }
  .btn-add-doc { background:var(--vivid); color:#fff; border:none; padding:9px 16px; border-radius:5px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; }

  /* Tile right-click context menu */
  .tile-context-menu { position:fixed; z-index:3000; background:#fff; border:1px solid var(--border); border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.18); padding:4px; min-width:150px; }
  .tile-context-menu button { display:flex; align-items:center; gap:6px; width:100%; text-align:left; background:none; border:none; padding:8px 12px; font-size:13px; font-family:inherit; cursor:pointer; border-radius:4px; color:var(--p-critical); }
  .tile-context-menu button:hover { background:var(--bg); }

  /* Clinic tag list */
  .clinic-tag { display:inline-flex; align-items:center; gap:5px; background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:3px 8px; font-size:12px; margin:2px; max-width:100%; overflow-wrap:anywhere; }
  .clinic-tag-del { background:none; border:none; cursor:pointer; color:var(--text-tertiary); font-size:13px; line-height:1; padding:0 0 0 3px; }
  .clinic-tag-del:hover { color:var(--p-critical); }
  /* Site Lead — the onsite CCS/RP on a clinic/site tag, kept visually secondary to the site name */
  .site-lead-tag { color:var(--text-tertiary); }
  .site-lead-tag a { color:inherit; text-decoration:underline; }
  /* Site Lead's only edit surface (see editSiteLead() in js/app.js) — small and secondary, same
     visual weight as the tag it sits next to, not competing with the clinic/site name. */
  .site-lead-edit-btn {
    background:none; border:none; cursor:pointer; color:var(--p-medium);
    font-size:11px; padding:0 0 0 6px; text-decoration:underline;
  }
  .site-lead-edit-btn:hover { opacity:.8; }

  /* ── Header ── */
  header {
    background: var(--navy);
    color: #fff;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .logo { display: flex; align-items: center; gap: 10px; }
  .logo-mark {
    width: 32px; height: 32px; background: var(--vivid);
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: #fff;
  }
  .logo-text { font-size: 15px; font-weight: 700; letter-spacing: .3px; }
  .logo-text span { color: var(--ocean); }
  .header-right { display: flex; align-items: center; gap: 12px; }
  .account-info { display: flex; align-items: center; gap: 8px; padding-right: 12px; border-right: 1px solid rgba(255,255,255,.2); }
  .account-avatar {
    width: 26px; height: 26px; border-radius: 50%; background: var(--ocean);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
  }
  .account-text { display: flex; flex-direction: column; line-height: 1.25; }
  .account-name { font-size: 12px; font-weight: 700; }
  .account-name .account-label { font-weight: 400; color: var(--on-navy-2); margin-right: 4px; }
  .account-email { font-size: 11px; color: var(--on-navy-2); }
  .btn-signout { background: transparent; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 11px; font-family: inherit; text-decoration: underline; padding: 0; }
  .btn-signout:hover { color: #fff; }
  .btn-export {
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
    color: #fff; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;
    font-family: inherit;
  }
  .btn-export:hover { background: rgba(255,255,255,.25); }
  .btn-import { background: transparent; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 12px; font-family: inherit; }
  .btn-import:hover { color: #fff; }

  /* ── Nav Tabs ── */
  nav {
    background: var(--navy);
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    overflow-x: auto;
    padding: 0 24px;
  }
  nav::-webkit-scrollbar { height: 3px; }
  nav::-webkit-scrollbar-track { background: transparent; }
  nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 2px; }
  /* Below 861px the nav is a horizontal scrolling bar, where a section heading between two
     buttons would read as a disabled tab. The grouping is a sidebar affordance only. */
  .nav-group { display: none; }
  .tab {
    padding: 10px 16px;
    color: rgba(255,255,255,.65);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 0;
    border-bottom: 3px solid transparent;
    /* transition lives in the refinement layer below (color + border-color only). `all` here
       was both dead — fully overridden by that later .tab rule — and the wrong default: it
       opts every future property, layout ones included, into animating. */
    letter-spacing: .3px;
    text-transform: uppercase;
    user-select: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
  }
  .tab:hover { color: #fff; }
  .tab.active { color: var(--ocean); border-bottom-color: var(--ocean); }
  .tab-badge {
    background: var(--vivid); color: #fff; font-size: 10px; font-weight: 700;
    padding: 1px 5px; border-radius: 10px; margin-left: 5px;
  }
  .tab-badge.red { background: var(--p-critical); }

  /* ── Layout ── */
  .page { display: none; padding: 20px 24px; }
  .page.active { display: block; }

  /* ── Filter Bar ── */
  .filter-bar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
  }
  .filter-bar label { font-size: 11px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: .5px; }
  .filter-bar select, .filter-bar input[type=text] {
    border: 1px solid var(--border); border-radius: 4px; padding: 5px 8px;
    font-size: 12px; font-family: inherit; color: var(--charcoal);
    background: #fff; min-width: 120px;
  }
  .filter-bar select:focus, .filter-bar input:focus { outline: none; border-color: var(--vivid); }
  .filter-group { display: flex; align-items: center; gap: 6px; }
  .btn-add {
    background: var(--navy); color: #fff; border: none; padding: 7px 14px;
    border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600;
    font-family: inherit; margin-left: auto;
  }
  .btn-add:hover { background: #1a56a8; }

  /* ── Stats Row ── */
  .stats-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
  .stat-card {
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 16px; flex: 1; min-width: 120px;
    border-left: 4px solid var(--navy);
  }
  .stat-card.critical { border-left-color: var(--p-critical); }
  .stat-card.high { border-left-color: var(--p-high); }
  .stat-card.medium { border-left-color: var(--p-medium); }
  .stat-card.complete { border-left-color: var(--p-low); }
  .stat-num { font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1; }
  .stat-label { font-size: 11px; color: #666; margin-top: 3px; }

  /* ── Table ── */
  .table-wrap { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  table { width: 100%; border-collapse: collapse; }
  thead tr { background: var(--navy); }
  thead th {
    color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .5px; padding: 10px 12px; text-align: left; white-space: nowrap;
  }
  tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; cursor: pointer; }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: #F0F6FA; }
  tbody td { padding: 10px 12px; vertical-align: middle; }
  .no-results { text-align: center; color: var(--text-tertiary); padding: 40px; font-style: italic; }

  /* ── Badges ── */
  .badge {
    display: inline-flex; align-items: center; padding: 2px 8px;
    border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap;
  }
  .badge-critical { background: #FDEAEA; color: var(--p-critical); }
  .badge-high { background: #FEF0E6; color: var(--t-high); }
  .badge-medium { background: #EAF4FB; color: var(--t-medium); }
  .badge-low { background: #EAFAF1; color: var(--t-low); }
  .badge-open { background: #FDEAEA; color: var(--s-open); }
  .badge-inprogress { background: #FEF0E6; color: var(--t-high); }
  .badge-complete { background: #EAFAF1; color: var(--t-low); }
  .badge-blocked { background: #F5EEF8; color: var(--s-blocked); }
  .badge-section { background: #EAF0FB; color: var(--navy); }

  .assignee-chip {
    display: inline-flex; align-items: center; gap: 4px; background: var(--bg);
    color: var(--navy); border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; font-size: 11px;
  }
  .assignee-avatar {
    width: 16px; height: 16px; border-radius: 50%; background: var(--vivid);
    color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }

  .cell-title { font-weight: 600; color: var(--navy); margin-bottom: 2px; }
  /* Title as a focusable button: keyboard users can open the row; the click
     bubbles to the row's own onclick so mouse behaviour is unchanged. */
  button.row-open { display:block; width:100%; background:none; border:0; padding:0; margin:0 0 2px; font-family:inherit; font-size:inherit; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
  .cell-desc { color: #555; font-size: 12px; line-height: 1.4; }
  .cell-desc.truncate {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ── Modal ── */
  .modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 500;
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: #fff; border-radius: 10px; width: 100%; max-width: 680px;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  }
  .modal-header {
    background: var(--navy); color: #fff; padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between;
    border-radius: 10px 10px 0 0; position: sticky; top: 0;
  }
  .modal-header h3 { font-size: 14px; font-weight: 700; }
  .modal-close { background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 20px; line-height: 1; }
  .modal-close:hover { color: #fff; }
  .modal-body { padding: 20px; }
  .modal-footer {
    padding: 12px 20px; border-top: 1px solid var(--border);
    display: flex; gap: 8px; justify-content: flex-end;
    position: sticky; bottom: 0; background: #fff;
  }

  .form-row { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
  .form-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
  .form-group.full { flex: 100%; min-width: 100%; }
  .form-group label { font-size: 11px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: .5px; }
  .form-group input, .form-group select, .form-group textarea {
    border: 1px solid var(--border); border-radius: 4px; padding: 7px 10px;
    font-size: 13px; font-family: inherit; color: var(--charcoal);
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--vivid); box-shadow: 0 0 0 3px rgba(64,145,186,.15);
  }
  .form-group textarea { resize: vertical; min-height: 80px; }

  .btn { padding: 7px 16px; border-radius: 4px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit; }
  .btn-primary { background: var(--navy); color: #fff; }
  .btn-primary:hover { background: #1a56a8; }
  .btn-danger { background: #C0392B; color: #fff; }
  .btn-danger:hover { background: #a93226; }
  .btn-ghost { background: transparent; color: var(--charcoal); border: 1px solid var(--border); }
  .btn-ghost:hover { background: var(--bg); }

  /* ── Comments ── */
  .comments-section { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
  .comments-section h4 { font-size: 12px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
  .comment-item { background: var(--bg); border-radius: 6px; padding: 10px; margin-bottom: 8px; border-left: 3px solid var(--vivid); }
  .comment-meta { font-size: 11px; color: var(--ink-2); margin-bottom: 4px; }
  .comment-meta strong { color: var(--navy); }
  .comment-text { font-size: 12px; line-height: 1.5; }
  .comment-input-row { display: flex; gap: 8px; margin-top: 10px; }
  .comment-input-row input {
    flex: 1; border: 1px solid var(--border); border-radius: 4px;
    padding: 7px 10px; font-size: 12px; font-family: inherit;
  }
  .comment-input-row input:focus { outline: none; border-color: var(--vivid); }
  .btn-comment { background: var(--vivid); color: #fff; border: none; padding: 7px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-family: inherit; white-space: nowrap; }

  /* ── Section headers ── */
  .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .section-header h2 { font-size: 16px; font-weight: 700; color: var(--navy); }
  .section-header p { font-size: 12px; color: #666; }

  /* ── Transcript tab ── */
  .transcript-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 900px) { .transcript-layout { grid-template-columns: 1fr; } }
  .transcript-panel { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .panel-header { background: var(--navy); color: #fff; padding: 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
  .panel-body { padding: 14px; }
  .transcript-panel textarea {
    width: 100%; border: 1px solid var(--border); border-radius: 4px; padding: 10px;
    font-family: inherit; font-size: 12px; min-height: 320px; resize: vertical;
    color: var(--charcoal);
  }
  /* Whole-panel drop target for the Teams .docx. The class is toggled by JS only while a
     file drag is over the panel, so the outline never shows during ordinary text drags. */
  .transcript-panel.dragover { outline: 2px dashed var(--vivid); outline-offset: -6px; background: #EAF4FB; }
  .drop-hint { font-size: 11px; color: var(--ink-2, #666); text-align: center; margin-top: 8px; }

  /* Add Document dialogs (Acquisitions/Clinic Moves/Multi-D): the primary interaction is
     dropping or choosing a file, not typing a name — same dragover language as
     .transcript-panel above (outline: var(--vivid), -6px offset) for one consistent "a file is
     welcome here" affordance across the app. A real <button> element, not a styled div, so
     drop/click both work and keyboard focus/activation come for free — no role="button" or
     manual keydown handling needed. */
  .doc-drop-zone {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 100%; padding: 22px 14px; margin-top: 4px;
    background: var(--bg); border: 1px dashed var(--border); border-radius: 8px;
    cursor: pointer; font-family: inherit; color: var(--ink-2);
    transition: border-color var(--t), background var(--t);
  }
  .doc-drop-zone:hover { border-color: var(--vivid); }
  .doc-drop-zone:focus-visible { outline: 2px solid var(--vivid); outline-offset: 2px; }
  .doc-drop-zone.dragover { outline: 2px dashed var(--vivid); outline-offset: -6px; background: #EAF4FB; border-color: var(--vivid); }
  .doc-drop-zone .ic { color: var(--ink-3); }
  .doc-drop-zone-text { font-size: 13px; color: var(--ink); }
  .doc-drop-zone-text .linklike { font-size: inherit; }
  /* --text-tertiary, not --ink-3: at 11px, --ink-3 (#8695A7) is ~3:1 on white and fails the
     4.5:1 small-text floor — same trap flagged in the nav's a11y comment elsewhere in this file. */
  .doc-drop-zone-hint { font-size: 11px; color: var(--text-tertiary); }

  /* Shown instead of the drop zone once a file is queued — the native file input's own
     "no file chosen" text is inconsistent across browsers and easy to miss entirely. */
  .doc-drop-selected {
    display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px;
    padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  }
  .doc-drop-selected .ic { color: var(--p-low); flex-shrink: 0; }
  .doc-drop-selected-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .doc-drop-selected-size { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
  .doc-drop-remove { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 2px 4px; flex-shrink: 0; }
  .doc-drop-remove:hover { color: var(--ink); }
  /* Both toggle visibility via the JS-set `hidden` attribute (zone.hidden = true/false), not a
     class — but [hidden] and a plain class selector have equal specificity, and this rule's
     unconditional `display` would otherwise win over the browser's [hidden]{display:none}
     default whenever it's declared later in the cascade. Pin it down explicitly rather than
     relying on source order. */
  .doc-drop-zone[hidden], .doc-drop-selected[hidden] { display: none; }
  .linklike {
    background: none; border: none; padding: 0; font-family: inherit; font-size: inherit;
    color: var(--vivid-text); font-weight: 600; cursor: pointer; text-decoration: underline;
  }
  .btn-extract {
    background: var(--vivid); color: #fff; border: none; padding: 9px 18px;
    border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600;
    font-family: inherit; width: 100%; margin-top: 10px;
  }
  .btn-extract:hover { background: var(--navy); }

  .extracted-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px;
    border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px;
    background: var(--bg);
  }
  .extracted-item input[type=checkbox] { margin-top: 3px; width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
  .extracted-item-body { flex: 1; }
  .extracted-item-text { font-size: 12px; color: var(--charcoal); line-height: 1.4; }
  .extracted-item-controls { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
  .extracted-item-controls select {
    border: 1px solid var(--border); border-radius: 3px; padding: 3px 6px;
    font-size: 11px; font-family: inherit;
  }
  .btn-add-selected {
    background: var(--navy); color: #fff; border: none; padding: 9px 18px;
    border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600;
    font-family: inherit; width: 100%; margin-top: 10px; display: none;
  }
  .btn-add-selected:hover { background: #1a56a8; }
  .meeting-name-row { display: flex; gap: 8px; margin-bottom: 10px; }
  .meeting-name-row input {
    flex: 1; border: 1px solid var(--border); border-radius: 4px; padding: 7px 10px;
    font-size: 12px; font-family: inherit;
  }

  /* ── Stock tab ── */
  .stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
  .stock-card {
    background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 14px;
    border-left: 4px solid var(--vivid);
  }
  .stock-num { font-size: 28px; font-weight: 700; color: var(--navy); }
  .stock-label { font-size: 12px; color: #555; margin-top: 2px; }
  .stock-sub { font-size: 11px; color: var(--ink-2); margin-top: 4px; }

  /* ── Workflows tab ── */
  .workflow-card {
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 10px; overflow: hidden;
  }
  .workflow-card-header {
    padding: 10px 14px; display: flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
  }
  .workflow-card-header:hover { background: #F0F6FA; }
  .workflow-toggle { font-size: 16px; color: var(--vivid); line-height: 1; }
  .workflow-title { font-weight: 600; color: var(--navy); font-size: 13px; flex: 1; }
  .workflow-card-body { padding: 14px; border-top: 1px solid var(--border); display: none; }
  .workflow-card-body.open { display: block; }
  .workflow-notes { font-size: 12px; color: #444; white-space: pre-wrap; line-height: 1.6; }

  /* ── Telco tab ── */
  .telco-item {
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 14px; margin-bottom: 10px; border-left: 4px solid var(--vivid);
  }
  .telco-title { font-weight: 600; color: var(--navy); margin-bottom: 4px; }
  .telco-notes { font-size: 12px; color: #444; line-height: 1.6; }

  /* ── Empty state ── */
  .empty-state {
    text-align: center; padding: 60px 20px; color: var(--text-tertiary);
  }
  .empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
  .empty-state h3 { font-size: 14px; color: #666; margin-bottom: 6px; }

  /* ── Notification toast ── */
  .toast {
    position: fixed; bottom: 24px; right: 24px; background: var(--navy); color: #fff;
    padding: 10px 18px; border-radius: 6px; font-size: 12px; font-weight: 600;
    box-shadow: 0 4px 16px rgba(0,0,0,.2); z-index: 1000; opacity: 0;
    transition: opacity .25s; pointer-events: none;
  }
  .toast.show { opacity: 1; }
  .toast.success { background: #27AE60; }
  .toast.error { background: var(--p-critical); }

  /* ── Delete confirm ── */
  .del-btn { background: none; border: none; cursor: pointer; color: var(--ink-3); font-size: 14px; padding: 2px 4px; }
  .del-btn:hover { color: var(--p-critical); }
  /* A Pipeline idea marked implemented, shown only via "Show N implemented" — dimmed and
     struck through on the title so it still reads as done at a glance, not just absent. */
  .pipeline-implemented { opacity: 0.55; }
  .pipeline-implemented .cell-title { text-decoration: line-through; }
  /* Own class rather than reusing .del-btn — a Pipeline row needs two icon buttons, and a test
     locating ".del-btn" to delete a row must keep matching exactly one element. Same base look. */
  .pipeline-implement-btn { background: none; border: none; cursor: pointer; color: var(--ink-3); font-size: 14px; padding: 2px 4px; }
  .pipeline-implement-btn:hover { color: var(--p-medium); }
  .pipeline-implemented .pipeline-implement-btn { color: var(--p-medium); }

  /* ── Responsive ── */
  @media (max-width: 600px) {
    header { padding: 0 12px; }
    nav { padding: 0 12px; }
    .page { padding: 12px; }
    .stats-row { gap: 8px; }
  }

  /* Touch devices: 44px hit areas (WCAG 2.5.5) without bloating the dense
     desktop layout. Keyed to input method, not screen size. */
  @media (pointer: coarse) {
    .tab { padding-top: 12px; padding-bottom: 12px; }
    .btn, .btn-add, .btn-primary, .btn-danger, .btn-ghost, .btn-export,
    .btn-import, .btn-comment, .btn-add-doc, .btn-extract, .btn-add-selected,
    .font-btn { min-height: 44px; }
    .del-btn, .doc-card-del, .modal-close, .acq-detail-close, .clinic-tag-del,
    .exec-toggle, .cl-notes-btn {
      min-width: 44px; min-height: 44px;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .cl-check, input[type=checkbox] { min-width: 24px; min-height: 24px; }
  }

  #signInGate {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
  }
  #signInGate .gate-card {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 48px 40px; text-align: center; max-width: 360px;
  }
  #signInGate .gate-logo { font-size: 28px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
  #signInGate .gate-sub { color: #667; margin-bottom: 24px; font-size: 13px; }
  #signInGate button {
    background: var(--navy); color: #fff; border: none; border-radius: 8px;
    padding: 12px 24px; font-size: 14px; font-weight: 600; cursor: pointer; width: 100%;
  }
  #signInGate button:disabled { opacity: 0.6; cursor: default; }
  #signInGate .gate-error { color: var(--p-critical); font-size: 12px; margin-top: 16px; display: none; }

  /* ============================================================
     MODERN REBUILD — refinement layer. Loads after the base rules
     above (same class names), so these win in the cascade. Adds
     skeleton loaders + info tooltips. No markup/JS behaviour changed.
     ============================================================ */
  /* WCAG 2.2 SC 1.4.11 wants a focus indicator at 3:1 against its surroundings. The old
     --ring (alpha .28) composited to about 1.6:1 on white — weaker than the browser default
     this rule replaces, and it applies to every focusable element in the app. */
  *:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--r-sm); }
  /* The narrow-layout nav sits on navy, where a navy ring is invisible. Light ring there. */
  nav#mainNav .tab:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.9); }
  @media (min-width: 861px) {
    nav#mainNav .tab:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
  }

  header { background: linear-gradient(180deg,#164E99,#14478C); box-shadow: var(--shadow); }
  .logo-mark { border-radius: 9px; box-shadow: var(--shadow-sm); }
  nav { box-shadow: var(--shadow-sm); }
  .tab { transition: color var(--t), border-color var(--t); }

  .page { max-width: 1200px; margin: 0 auto; }

  /* Step rows. The status is a select, not a checkbox, because a checkbox cannot say "skipped" —
     and being a select means a whole checklist can be worked through without opening anything. */
  .step-row { transition: background-color .12s ease; }
  .step-row:hover { background: #F0F6FA; }
  .step-select {
    flex-shrink: 0; align-self: flex-start; border: 1px solid transparent; border-radius: 10px;
    padding: 2px 6px; font-size: 10px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; cursor: pointer; font-family: inherit; min-width: 104px;
  }
  .step-select:hover { border-color: var(--border); }
  .step-draft-btn {
    flex-shrink: 0; align-self: flex-start; font-size: 11px; padding: 3px 9px; white-space: nowrap;
  }
  /* Several steps are owned by two people, so ownership is a checkbox set rather than a dropdown. */
  .assignee-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .assignee-check {
    display: flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--border);
    border-radius: 14px; font-size: 12px; cursor: pointer; background: #fff; user-select: none;
  }
  .assignee-check:hover { border-color: var(--vivid); }
  .assignee-check:has(input:checked) { background: #E8F4FC; border-color: var(--vivid); font-weight: 600; }
  .step-pill {
    flex-shrink: 0; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700;
    letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; align-self: flex-start;
  }
  .ss-todo  { background: #ECEFF1; color: #5B6B7A; }
  .ss-prog  { background: #E3F2FD; color: #1565C0; }
  .ss-done  { background: #E7F6EA; color: #1E7B34; }
  .ss-skip  { background: #F3EFFA; color: #6A4FA3; }
  .ss-block { background: #FDECEC; color: #B3261E; }
  .cl-group-count { font-weight: 400; color: var(--text-tertiary); font-size: 11px; margin-left: 6px; }

  /* A step flagged "Track as a milestone" (see stepMilestone in the step detail modal) shows
     this badge wherever it renders — inline in its own stage of the checklist, and in the "Next
     up"/"Blocked" summary lines — rather than being pulled out into a separate view. Solid fill
     like .tto-pill, in its own colour (amber, unused elsewhere) so it never gets read as a
     priority or status pill. */
  .milestone-badge {
    display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
    background: #B7791F; color: #fff; font-size: 9px; font-weight: 800;
    letter-spacing: .4px; text-transform: uppercase; padding: 1px 6px; border-radius: 3px;
    white-space: nowrap;
  }
  .milestone-badge .ic { width: 10px; height: 10px; }

  /* The record's own Milestones tab — read-only, just the checklist's flagged steps. Reuses
     .step-pill/.ss-* for the status chip, same palette as the Checklist tab, one system. */
  .milestones-panel-list { display: flex; flex-direction: column; gap: 10px; }
  .milestones-panel-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 10px 12px; background: var(--bg); border-radius: 6px; }
  .mp-label { flex: 1; color: #333; }
  .mp-due { flex-shrink: 0; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }

  /* ── Multi-D ──
     A Multi-D project is one build-out plus one decommissioning job per incoming clinic, so each
     clinic's cleanup list is boxed with its own name and its own progress count. A flat list of
     forty steps hides which clinic is behind. */
  .acq-card.multid::before { background: var(--p-multid); }
  .type-multid { background: #F3E8F8; color: #6C3483; }
  .md-clinic-card { border: 1px solid var(--border); border-radius: 6px; margin: 12px 0; overflow: hidden; }
  .md-clinic-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-2); }
  .md-clinic-name { font-weight: 600; font-size: 13px; }
  .md-clinic-cc { font-size: 12px; color: var(--text-tertiary); }
  .md-clinic-progress { margin-left: auto; font-size: 12px; color: var(--text-tertiary); }
  .md-clinic-add { font-size: 11px; padding: 3px 9px; flex-shrink: 0; }
  /* The group inside a clinic card has no title of its own — the card head is the title — so the
     bottom margin .checklist-group carries would leave a gap inside the box. */
  .md-clinic-body { padding: 10px 12px 2px; }
  .md-clinic-body .checklist-group { margin-bottom: 0; }
  .md-clinic-hint { font-size: 12px; color: var(--text-tertiary); font-style: italic; margin-top: 12px; }
  /* The CCS/TTO meeting deadline, derived from the move date. Quiet until it isn't. */
  .md-due { font-size: 12px; color: var(--text-tertiary); margin-left: 8px; font-weight: 400; }
  .md-due.soon { color: var(--t-high); font-weight: 600; }
  .md-due.overdue { color: var(--p-critical); font-weight: 600; }

  /* Confidential acquisitions. The redacted card is deliberately plain — no progress bar, no
     clinic line — so it reads as "withheld" rather than "still empty". */
  .acq-redacted { cursor: default; opacity: .82; border-style: dashed; }
  .acq-redacted-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
  .acq-redacted-note {
    margin-top: 10px; font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
    color: var(--text-tertiary); font-weight: 700;
  }
  .acq-conf-tag {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
    background: #FDECEC; color: #B3261E; font-size: 9px; font-weight: 700; letter-spacing: .6px;
    vertical-align: middle;
  }

  .acq-card, .stat-card, .stock-card, .telco-item, .workflow-card, .doc-card,
  .table-wrap, .filter-bar, .transcript-panel {
    border-color: var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm);
  }
  .acq-card { transition: transform var(--t), box-shadow var(--t); }
  .acq-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .stat-card { transition: transform var(--t), box-shadow var(--t); }
  .stat-card:hover { box-shadow: var(--shadow); }

  thead tr { background: var(--navy); }
  tbody td { padding: 12px 14px; }
  tbody tr { transition: background var(--t); }
  tbody tr:hover { background: var(--surface-2); }

  .btn, .btn-add, .btn-export, .btn-import, .btn-comment, .btn-add-doc, .btn-extract, .btn-add-selected {
    border-radius: var(--r-sm); transition: background var(--t), transform var(--t), box-shadow var(--t);
  }
  .btn:active, .btn-add:active { transform: translateY(1px); }
  .btn-primary, .btn-add { box-shadow: var(--shadow-sm); }
  .btn-primary:hover, .btn-add:hover { background: var(--navy-hover); }

  .form-group input, .form-group select, .form-group textarea,
  .filter-bar select, .filter-bar input[type=text] {
    border-radius: var(--r-sm); transition: border-color var(--t), box-shadow var(--t);
  }

  .modal-overlay { backdrop-filter: blur(3px); }
  .modal { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: md-pop 200ms cubic-bezier(.4,0,.2,1); }
  .acq-detail-panel { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
  @keyframes md-pop { from { opacity: 0; transform: translateY(10px) scale(.99); } }

  .badge { border-radius: 999px; }

  /* ── Skeleton loaders (shown on first load, before any cache exists) ── */
  @keyframes sk-shimmer { 0% { background-position: -450px 0; } 100% { background-position: 450px 0; } }
  .sk { background: linear-gradient(90deg,#EEF2F7 25%,#E3EAF2 37%,#EEF2F7 63%); background-size: 900px 100%; animation: sk-shimmer 1.4s infinite linear; border-radius: 6px; }
  .sk-line { height: 12px; margin: 9px 0; }
  .sk-stat { height: 60px; border-radius: var(--r); }

  /* ── Info tooltips (CSS-only, no library) — explain "what's what" ── */
  [data-tt] { position: relative; }
  [data-tt]:hover::after, [data-tt]:focus-visible::after {
    content: attr(data-tt); position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
    background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.45;
    text-transform: none; letter-spacing: normal; padding: 8px 11px; border-radius: 9px;
    width: max-content; max-width: 250px; white-space: normal; text-align: left;
    box-shadow: var(--shadow-lg); z-index: 6000; pointer-events: none;
  }
  [data-tt]:hover::before, [data-tt]:focus-visible::before {
    content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--ink); z-index: 6000; pointer-events: none;
  }
  .tt-i {
    display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
    border-radius: 50%; background: var(--border-2); color: var(--ink-2); font-size: 10px; font-weight: 700;
    font-style: normal; cursor: help; margin-left: 7px; vertical-align: middle; text-transform: none; letter-spacing: normal;
  }
  .tt-i:hover, .tt-i:focus-visible { background: var(--vivid); color: #fff; }

  @media (prefers-reduced-motion: reduce) {
    *, .sk { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }

  /* ============================================================
     MODERN LAYOUT — sidebar shell. Pure CSS grid over the existing
     header / nav / page markup (switchTab and every id untouched):
     the 12 top tabs become a left sidebar on desktop, and collapse
     back to the original scrolling top bar under 861px.
     ============================================================ */
  @media (min-width: 861px) {
    #appRoot {
      display: grid;
      grid-template-columns: 236px minmax(0, 1fr);
      grid-template-rows: 56px 1fr;
      grid-template-areas: "header header" "nav main";
      min-height: 100vh;
    }
    #appRoot > header { grid-area: header; }
    #appRoot > nav#mainNav {
      grid-area: nav; flex-direction: column; align-items: stretch;
      background: var(--surface); border-top: none; border-right: 1px solid var(--border);
      padding: 10px 10px 14px; gap: 1px; overflow-y: auto; overflow-x: hidden;
      position: sticky; top: 56px; height: calc(100vh - 56px); box-shadow: none;
      /* The list is ~640px tall. A maximised browser on a 1366x768 laptop leaves roughly 600px
         of viewport, so the last rows clip — and Team is the only route back from a roster
         lockout (see CLAUDE.md). The local-attachment gradients fade the cut edge, and the
         scroll-attached ones only appear when there is genuinely something above or below,
         so a list that fits shows no cue at all. */
      background:
        linear-gradient(var(--surface) 30%, rgba(255,255,255,0)) top    / 100% 20px no-repeat local,
        linear-gradient(rgba(255,255,255,0), var(--surface) 70%) bottom / 100% 20px no-repeat local,
        radial-gradient(farthest-side at 50% 0,   rgba(18,40,72,.10), transparent) top    / 100% 8px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(18,40,72,.10), transparent) bottom / 100% 8px no-repeat scroll,
        var(--surface);
    }
    #appRoot > nav#mainNav .tab {
      color: var(--ink-2) !important; border-bottom: none !important; border-radius: var(--r-sm);
      padding: 7px 12px; font-size: 13px; text-transform: none; letter-spacing: normal;
      display: flex; align-items: center; gap: 8px;
    }
    /* Section headings. Not buttons, not focusable, no hover — they label, they do not navigate.
       More space above than below, so each heading binds to the group it introduces. */
    #appRoot > nav#mainNav .nav-group {
      display: block;   /* the base rule hides these for the narrow top-bar layout */
      margin: 0; padding: 11px 12px 3px;
      font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
      /* --text-tertiary (#64707F), not --ink-3 (#8695A7): at 10px these are small text and need
         4.5:1. #8695A7 on white is ~3:1 and fails; #64707F is ~4.9:1 and passes. */
      color: var(--text-tertiary);
    }
    #appRoot > nav#mainNav .nav-group:first-of-type { padding-top: 10px; }
    /* The A+ control grows the page to 16px. The nav used to be pinned at 13px, so the one
       thing that did not respond to the accessibility toggle was the navigation. */
    body.text-large #appRoot > nav#mainNav .tab { font-size: 15px; }
    body.text-large #appRoot > nav#mainNav .nav-group { font-size: 11px; }
  }

  /* Previously this dropped the group headings on a short window (below ~700px, or ~820px in
     A+ text) so the list couldn't clip and hide Team, the only route back from a roster
     lockout. Product decision (2026-08-18): keep the grouping visible always — the nav already
     scrolls internally (overflow-y: auto on #appRoot > nav#mainNav above), so Team stays
     reachable by scrolling rather than by flattening the list. Grouped-and-scrollable beats
     flat-to-avoid-scrolling. */

  @media (min-width: 861px) {
    #appRoot > nav#mainNav .tab:hover { background: var(--surface-2); color: var(--ink) !important; }
    #appRoot > nav#mainNav .tab.active {
      background: #EAF2FB; color: var(--navy) !important; box-shadow: inset 3px 0 0 var(--navy);
    }
    #appRoot > nav#mainNav .tab-badge { margin-left: auto; }
    #appRoot > .page { grid-area: main; width: 100%; }
  }

  /* Subtle content transition on tab switch (respects reduced-motion via the block above) */
  #appRoot > .page.active { animation: page-in 260ms cubic-bezier(.4,0,.2,1); }
  @keyframes page-in { from { opacity: 0; transform: translateY(6px); } }

/* ── next block ─────────────────────────────────────────────────── */

#page-calendar {

  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

  & {
    --navy: #14478C;
    --vivid-blue: #4091BA;
    --charcoal: #1C1C1E;
    --white: #FFFFFF;
    --ocean: #4BE1E4;
    --yellow: #FFDD00;
    --light-bg: #F0F6FA;
    --border: #D0E4F0;
    --holiday-bg: #FFF3CD;
    --holiday-border: #FFC107;
    --holiday-text: #7A4F00;
    --it-bg: #E3EEF9;
    --it-border: #14478C;
    --it-text: #0A2D60;
    --general-bg: #E8F5F5;
    --general-border: #008C8C;
    --general-text: #005252;
    --leave-bg: #EEEBF6;
    --leave-border: #4B3F72;
    --leave-text: #362C57;
    --weekend-bg: #F8FAFB;
    --today-ring: #4BE1E4;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Open Sans', Tahoma, Arial, sans-serif;
    background: #EEF4F9;
    color: var(--charcoal);
    min-height: 100vh;
  }

  /* ── HEADER ── */
  header {
    background: var(--navy);
    color: var(--white);
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    box-shadow: 0 2px 10px rgba(20,71,140,0.25);
  }
  .logo-area { display: flex; align-items: center; gap: 12px; }
  .logo-text { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
  .logo-text span { color: var(--ocean); }
  .header-sub { font-size: 12px; opacity: 0.7; font-weight: 400; margin-top: 2px; }
  .header-right { display: flex; align-items: center; gap: 12px; }
  .btn-add-event {
    background: var(--ocean);
    color: var(--navy);
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
  }
  .btn-add-event:hover { opacity: 0.85; }

  /* ── NAV ── */
  .calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px 0;
  }
  .nav-month-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.5px;
  }
  .nav-controls { display: flex; align-items: center; gap: 8px; }
  .nav-btn {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    width: 36px; height: 36px;
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    color: var(--navy);
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
  }
  .nav-btn:hover { background: var(--light-bg); border-color: var(--vivid-blue); }
  .nav-today-btn {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 0 14px;
    height: 36px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    font-family: inherit;
    transition: background 0.15s;
  }
  .nav-today-btn:hover { background: var(--light-bg); }
  .year-select {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 0 10px;
    height: 36px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    font-family: inherit;
    cursor: pointer;
  }

  /* ── VIEW TOGGLE ── */
  .view-toggle {
    display: flex;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
  }
  .view-btn {
    padding: 0 14px;
    height: 34px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--charcoal);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
  }
  .view-btn.active { background: var(--navy); color: var(--white); }

  /* ── LEGEND ── */
  .legend {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 28px 0;
    flex-wrap: wrap;
  }
  .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--charcoal); }
  .legend-dot {
    width: 10px; height: 10px; border-radius: 3px;
  }
  .ld-holiday { background: var(--holiday-border); }
  .ld-it { background: var(--navy); }
  .ld-general { background: var(--general-border); }
  .ld-leave { background: var(--leave-border); }

  .legend-key { align-items: center; }
  .legend-key-label { font-size: 12px; color: var(--text-tertiary); }
  .legend-bar { width: 3px; height: 12px; border-radius: 1px; }

  /* ── CALENDAR GRID ── */
  .calendar-wrap {
    padding: 16px 28px 28px;
  }

  /* Month view */
  .month-grid {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(20,71,140,0.08);
    border: 1px solid var(--border);
  }
  .dow-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--navy);
  }
  .dow-cell {
    padding: 10px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .days-grid {
    display: grid;
    /* minmax(0,…) not plain 1fr: a 1fr track floors at min-content, so one long event title
       widens its weekday column and the whole week goes ragged against the day-name header. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .day-cell {
    min-height: 110px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 6px 6px 4px;
    position: relative;
    cursor: pointer;
    transition: background 0.1s;
    vertical-align: top;
  }
  .day-cell:hover { background: #F5FAFF; }
  .day-cell:nth-child(7n) { border-right: none; }
  .day-cell.other-month { background: #FAFBFC; }
  .day-cell.other-month .day-num { color: #C0CDD8; }
  .day-cell.weekend { background: var(--weekend-bg); }
  .day-cell.weekend.other-month { background: #F5F7F9; }
  .day-cell.today .day-num {
    background: var(--ocean);
    color: var(--navy);
    border-radius: 50%;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
  }
  .day-num-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .week-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--vivid-blue);
    background: var(--light-bg);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
  }
  .day-num {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .event-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: pointer;
    display: block;
  }
  .chip-holiday {
    background: var(--holiday-bg);
    color: var(--holiday-text);
    border-left: 3px solid var(--holiday-border);
  }
  .chip-it {
    background: var(--it-bg);
    color: var(--it-text);
    border-left: 3px solid var(--it-border);
  }
  .chip-general {
    background: var(--general-bg);
    color: var(--general-text);
    border-left: 3px solid var(--general-border);
  }
  .chip-leave {
    background: var(--leave-bg);
    color: var(--leave-text);
    border-left: 3px solid var(--leave-border);
  }
  .chip-states {
    display: block;
    font-size: 9px;
    font-weight: 700;
    opacity: 0.65;
    letter-spacing: 0.2px;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Trailing marker for a record/event that needs Tech This Out (TTO, healthia IT's MSP)
     onsite. TTO's own brand green (#00B233, sampled from their logo at techthisout.com.au),
     reused verbatim wherever ttoPillHtml() is called: calendar chips, the day popup, and every
     record's list-row card, so it can never visually drift between those three places. */
  .tto-pill {
    display: inline-flex;
    align-items: center;
    background: #00B233;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
  }
  .more-events {
    font-size: 10px;
    color: var(--vivid-blue);
    font-weight: 600;
    padding: 0 4px;
    cursor: pointer;
  }
  .add-event-hint {
    position: absolute;
    bottom: 4px; right: 6px;
    font-size: 16px;
    color: #C0D0E0;
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
  }
  .day-cell:hover .add-event-hint { opacity: 1; }

  /* ── YEAR VIEW ── */
  .year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 900px) { .year-grid { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 500px) { .year-grid { grid-template-columns: 1fr; } }

  .mini-month {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 1px 6px rgba(20,71,140,0.06);
    cursor: pointer;
    transition: box-shadow 0.15s;
  }
  .mini-month:hover { box-shadow: 0 4px 16px rgba(20,71,140,0.15); }
  .mini-month-title {
    background: var(--navy);
    color: var(--white);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    padding: 7px;
    letter-spacing: 0.3px;
  }
  .mini-dow {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    background: var(--light-bg);
  }
  .mini-dow-cell {
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--vivid-blue);
    padding: 4px 0;
  }
  .mini-days {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    padding: 2px;
  }
  .mini-day {
    text-align: center;
    font-size: 10px;
    padding: 2px 1px;
    border-radius: 3px;
    position: relative;
  }
  .mini-day.other { color: #CCC; }
  .mini-day.has-event { font-weight: 700; }
  .mini-day.has-holiday { color: var(--holiday-text); background: var(--holiday-bg); }
  .mini-day.has-it { color: var(--it-text); background: var(--it-bg); }
  .mini-day.has-leave { color: var(--leave-text); background: var(--leave-bg); }
  .mini-day.is-today { background: var(--ocean); color: var(--navy); font-weight: 700; border-radius: 50%; }
  .mini-event-count {
    font-size: 8px;
    padding: 2px 4px 3px;
    border-top: 1px solid var(--border);
    color: var(--vivid-blue);
    text-align: center;
  }

  /* ── MODAL ── */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(20,71,140,0.35);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  .modal-overlay.open { opacity: 1; pointer-events: all; }
  .modal {
    background: var(--white);
    border-radius: 14px;
    width: 460px;
    max-width: 95vw;
    box-shadow: 0 20px 60px rgba(20,71,140,0.25);
    overflow: hidden;
    transform: translateY(10px);
    transition: transform 0.2s;
  }
  .modal-overlay.open .modal { transform: translateY(0); }
  .modal-header {
    background: var(--navy);
    color: var(--white);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .modal-title { font-size: 16px; font-weight: 700; }
  .modal-close {
    background: none; border: none; color: white; font-size: 22px;
    cursor: pointer; line-height: 1; padding: 0; opacity: 0.7;
  }
  .modal-close:hover { opacity: 1; }
  .modal-body { padding: 22px; }
  .form-group { margin-bottom: 16px; }
  .form-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .form-input, .form-select, .form-textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--charcoal);
    background: var(--white);
    transition: border-color 0.15s;
  }
  .form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--vivid-blue);
    box-shadow: 0 0 0 3px rgba(64,145,186,0.15);
  }
  .form-textarea { resize: vertical; min-height: 70px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .type-selector { display: flex; gap: 8px; }
  .type-option {
    flex: 1;
    padding: 8px;
    border-radius: 7px;
    border: 2px solid var(--border);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .type-option.selected-holiday { border-color: var(--holiday-border); background: var(--holiday-bg); color: var(--holiday-text); }
  .state-check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
  .state-check-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--charcoal); cursor: pointer; }
  .state-check-item input { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
  .state-check-item.all-states-item { grid-column: 1 / -1; font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
  .type-option.selected-it { border-color: var(--it-border); background: var(--it-bg); color: var(--it-text); }
  .type-option.selected-general { border-color: var(--general-border); background: var(--general-bg); color: var(--general-text); }
  .type-option.selected-leave { border-color: var(--leave-border); background: var(--leave-bg); color: var(--leave-text); }
  .modal-footer {
    padding: 16px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .btn {
    padding: 9px 20px;
    border-radius: 7px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
  }
  .btn:hover { opacity: 0.85; }
  .btn-primary { background: var(--navy); color: var(--white); }
  .btn-secondary { background: var(--light-bg); color: var(--navy); border: 1.5px solid var(--border); }
  .btn-danger { background: #FEE2E2; color: #991B1B; }

  /* ── DAY POPUP ── */
  .day-popup {
    position: fixed;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(20,71,140,0.2);
    border: 1px solid var(--border);
    width: 320px;
    max-width: 95vw;
    z-index: 900;
    overflow: hidden;
  }
  .day-popup-header {
    background: var(--navy);
    color: var(--white);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .day-popup-date { font-size: 14px; font-weight: 700; }
  .day-popup-close { background: none; border: none; color: white; font-size: 18px; cursor: pointer; opacity: 0.7; }
  .day-popup-close:hover { opacity: 1; }
  .day-popup-body { padding: 12px 14px; max-height: 300px; overflow-y: auto; }
  .popup-event-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 7px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .popup-event-item:hover { background: var(--light-bg); }
  .popup-event-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
  }
  .dot-holiday { background: var(--holiday-border); }
  .dot-it { background: var(--navy); }
  .dot-general { background: var(--general-border); }
  .dot-leave { background: var(--leave-border); }
  .popup-event-title { font-size: 13px; font-weight: 600; color: var(--charcoal); }
  .popup-event-states {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--vivid-blue);
    background: var(--light-bg);
    border-radius: 4px;
    padding: 1px 5px;
    margin-top: 3px;
  }
  .popup-event-notes { font-size: 11px; color: #777; margin-top: 2px; }
  .popup-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    color: var(--vivid-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 7px;
    transition: background 0.1s;
  }
  .popup-add-btn:hover { background: var(--light-bg); }
  .no-events { font-size: 13px; color: #999; padding: 4px 0 8px; }
  .popup-hide-btn {
    font-size: 11px;
    font-weight: 700;
    color: #991B1B;
    background: #FEE2E2;
    border: none;
    border-radius: 5px;
    padding: 4px 9px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: center;
    font-family: inherit;
    transition: opacity 0.15s;
  }
  .popup-hide-btn:hover { opacity: 0.8; }

  /* ── TOAST ── */
  .toast {
    position: fixed;
    bottom: 28px; right: 28px;
    background: var(--navy);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(20,71,140,0.3);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.25s;
    z-index: 2000;
    max-width: 300px;
  }
  .toast.show { transform: translateY(0); opacity: 1; }

  /* ── IMPORT/EXPORT ── */
  .toolbar-extras {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 28px 0;
    justify-content: flex-end;
  }
  .btn-sm {
    padding: 5px 12px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    background: var(--white);
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
  }
  .btn-sm:hover { background: var(--light-bg); }

  /* ── HOLIDAY SETTINGS LIST ── */
  .holiday-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }
  .holiday-row:last-child { border-bottom: none; }
  .holiday-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
  .holiday-row-label { font-size: 13px; font-weight: 600; color: var(--charcoal); }
  .holiday-row-states { font-size: 11px; color: var(--vivid-blue); margin-top: 2px; }
  .export-hint { font-size: 11px; color: #888; margin-top: 10px; }
  .export-link { color: var(--vivid-blue); font-weight: 600; cursor: pointer; text-decoration: underline; }
  .state-filter-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
  }
  .state-filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .state-filter-chip {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--white);
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
  }
  .state-filter-chip:hover { border-color: var(--vivid-blue); }
  .state-filter-chip.active-filter { background: var(--navy); border-color: var(--navy); color: var(--white); }
  #holidayBulkActions { flex-wrap: wrap; }
  .holiday-row.dimmed { opacity: 0.55; }

  /* ── RESPONSIVE ── */
  @media (max-width: 700px) {
    header { padding: 0 14px; }
    .calendar-nav, .toolbar-extras, .legend { padding-left: 14px; padding-right: 14px; }
    .calendar-wrap { padding: 12px 14px 20px; }
    .day-cell { min-height: 70px; padding: 4px; }
    .event-chip { font-size: 10px; }
    .nav-month-title { font-size: 18px; }
    .year-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  }

}

/* ── next block ─────────────────────────────────────────────────── */

/* ── Calendar interaction + motion ────────────────────────────────────────────
   Separate top-level block, not nested inside #page-calendar: @keyframes is not
   valid inside a style rule, so these selectors are written out in full. */

/* Chips read as grabbable, and lift slightly under the cursor. */
/* Chips whose date comes from a record rather than from someone typing into the calendar.
   Deliberately NOT new event types: that would mean changing the server's VALID_TYPE, the legend,
   the filter chips and the CSV mapping, for what is a visual distinction. A left edge does the
   job, in the same colours the acquisition cards already use for the same three things — navy
   for a settlement, red for a closure, blue for a move — purple for a Multi-D move, and a lighter
   purple for its CCS/TTO meeting.
   Worth knowing: because they are all type 'it', the legend filter cannot hide them separately.
   Making them real types is the change to reach for if that ever matters. */
#page-calendar .event-chip.chip-linked { border-left: 3px solid var(--navy); }
#page-calendar .event-chip.chip-linked-closure { border-left-color: var(--p-critical); }
#page-calendar .event-chip.chip-linked-move { border-left-color: var(--p-medium); }
#page-calendar .event-chip.chip-linked-multid { border-left-color: var(--p-multid); }
#page-calendar .event-chip.chip-linked-multid-meeting { border-left-color: var(--p-multid-soft); }

#page-calendar .event-chip[draggable="true"] {
  cursor: grab;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
#page-calendar .event-chip[draggable="true"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 42, 67, 0.18);
}
#page-calendar .event-chip.dragging {
  opacity: .45;
  transform: scale(.97);
  cursor: grabbing;
}

/* Drop target. The inset ring reads clearly without shifting any layout. */
#page-calendar .day-cell {
  transition: background-color .14s ease, box-shadow .14s ease;
}
#page-calendar .day-cell.drag-over {
  background: #E8F4FC;
  box-shadow: inset 0 0 0 2px var(--vivid-blue, #1B9DE0);
}
#page-calendar .day-cell.drag-over .day-num { font-weight: 700; }

/* The chip that just landed gets one short pulse, so the eye follows the move. */
@keyframes cal-settle {
  0%   { transform: scale(.92); box-shadow: 0 0 0 0 rgba(27, 157, 224, .55); }
  55%  { transform: scale(1.04); box-shadow: 0 0 0 5px rgba(27, 157, 224, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(27, 157, 224, 0); }
}
#page-calendar .event-chip.just-moved { animation: cal-settle .42s cubic-bezier(.22,.9,.3,1); }

/* Month/year grids ease in when navigating, so the change of month is legible
   rather than an instant swap. */
@keyframes cal-grid-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
#page-calendar .month-grid,
#page-calendar .year-grid { animation: cal-grid-in .22s ease-out; }

@media (prefers-reduced-motion: reduce) {
  #page-calendar .event-chip[draggable="true"],
  #page-calendar .day-cell { transition: none; }
  #page-calendar .event-chip[draggable="true"]:hover { transform: none; }
  #page-calendar .event-chip.just-moved,
  #page-calendar .month-grid,
  #page-calendar .year-grid { animation: none; }
}

/* ── Bootstrap failure banner ─────────────────────────────────────────────────
   A refresh failure, pinned until dismissed. Deliberately not a toast: the detail
   has to survive long enough to be read out, copied or screenshotted. Sits above
   everything including the record overlays, because it reports that what is behind
   it may be stale. */
.boot-fail {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 12px 16px;
  background: #FDECEA; border-bottom: 2px solid var(--p-critical);
  font-size: 13px; color: #6B1E14;
  box-shadow: 0 2px 8px rgba(18,40,72,.12);
}
.boot-fail-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.boot-fail-main strong { font-size: 13px; }
/* The error text itself, which is the part worth reading. Wraps rather than truncating —
   an endpoint name cut off at the ellipsis is the one thing this banner exists to show. */
.boot-fail-detail { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-word; }
.boot-fail-note { color: #8A3A2C; font-size: 11.5px; }
.boot-fail-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.boot-fail-actions .btn { font-size: 12px; padding: 4px 8px; color: #6B1E14; }
.boot-fail-actions .btn:hover { background: rgba(192,57,43,.10); }
.boot-fail-stack {
  flex-basis: 100%; order: 3; margin: 8px 0 0; padding: 8px 10px;
  max-height: 40vh; overflow: auto;
  background: #fff; border: 1px solid rgba(192,57,43,.35); border-radius: var(--r-sm);
  font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
/* The banner pushes nothing; it overlays. Give the header room so it is not covered. */
/* Space is reserved by measuring the banner in JS (see showBootstrapFailure), because the
   detail line wraps and the stack panel expands — a fixed offset here would be wrong in both
   directions. */
@media (max-width: 860px) {
  .boot-fail { flex-wrap: wrap; }
  .boot-fail-actions { width: 100%; justify-content: flex-end; }
}