/* AdoptBriefAI css/app.css: every style for index.html (the app shell).
   Reports have their own CSS in report_base.js; login.html and
   signup.html keep theirs inline. */

  :root{
    /* New UI (2026-09-30, docs/dashboard_target.png): deep navy surfaces,
       neon blue to purple accents, soft glows. Text tokens below are
       unchanged and still clear WCAG AA on the darkest surface. */
    --bg: #040817;
    --bg-panel: #070d24;
    --bg-panel-2: #0b1331;
    --bg-raised: #111a40;
    --blue: #2f7dff;
    --blue-glow: #5fa6ff;
    --purple: #7b5cff;
    --purple-glow: #ab8bff;
    --cyan: #38d4ff;
    --glow-blue: 0 0 24px -6px rgba(47,125,255,0.55);
    --glow-purple: 0 0 24px -6px rgba(123,92,255,0.55);
    --text: #eef0ff;
    /* Secondary/tertiary text. Standard: every value below must clear WCAG
       AA (>= 4.5:1) against the DARKEST panel it can render on (--bg
       #050611). Verified with a relative-luminance calc, not by eye:
         --text-dim   #B4BAE0  ~10.6:1 on --bg   (secondary body text)
         --text-faint #9AA0CC   ~8.0:1 on --bg   (labels / hints / dimmest)
       Hierarchy stays intact: --text (~16:1) > --text-dim > --text-faint. */
    --text-dim: #B4BAE0;
    --text-faint: #9AA0CC;
    --good: #33e6a5;
    --warn: #ffb84d;
    --danger: #ff4f6d;
    --tier-gray: #9099b8;
    --border: rgba(95,150,255,0.16);
    --border-bright: rgba(95,150,255,0.42);
    --radius: 16px;
    --font-display: 'Sora', sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* Decorative script accent only (the Assess page-header flourish and
       the consultant-logo card). Never used for UI copy that has to be
       read, so the generic cursive fallback is an acceptable degrade if
       the webfont does not load. */
    --font-script: 'Dancing Script', cursive;
    /* Height of the sticky top bar, and of the sidebar's logo band it
       aligns to: .sidebar-sticky's 20px padding-top + the 66px
       .sidebar-brand box. Lives on :root so scroll-margin-top can use
       it too, see the header rule. */
    --topbar-h: 86px;
  }
  *{box-sizing:border-box;}
  /* No input/textarea anywhere in this app had an explicit placeholder
     color, so every placeholder fell back to the browser's own default
     (Chrome: an opaque #757575), which assumes a light page and measures
     only 4.0-4.2:1 against this app's dark panels, below WCAG AA's 4.5:1
     minimum for normal text (measured, not assumed: contrast_ratio(
     "#757575", "#0a0c1c") = 4.21:1). Uses --text-dim, not the dimmer
     --text-faint: --text-faint technically clears AA too (6.80:1-7.95:1)
     but the jump from the old #757575 read as too subtle to notice at a
     glance; --text-dim measures 9.07:1-10.61:1, a clearly visible change,
     not just a numerically-passing one. */
  input::placeholder, textarea::placeholder{color:var(--text-dim); opacity:1;}
  body{
    margin:0; min-height:100vh; font-family:var(--font-body);
    background:
      radial-gradient(1100px 620px at 12% -8%, rgba(47,125,255,0.20), transparent 60%),
      radial-gradient(900px 700px at 108% 8%, rgba(123,92,255,0.18), transparent 55%),
      radial-gradient(700px 500px at 50% 110%, rgba(56,212,255,0.08), transparent 60%),
      var(--bg);
    color:var(--text);
  }
  .wrap{max-width:820px; margin:0 auto; padding:24px 18px 60px;}

  /* Sticky top bar.
     It lives inside .content-col but cancels that column's top/side
     padding with negative margins, so it bleeds to the column's edges
     and page content scrolls UNDER an opaque bar rather than beside a
     floating one. Needs an opaque fill for the same reason.

     --topbar-h is not an arbitrary number: it is the exact height of the
     sidebar's logo band (.sidebar-sticky's 20px padding-top + the 66px
     .sidebar-brand box), so the bar and that band end on the same line
     and share the same --bg-panel fill. That is what removes the
     colour/height seam at the top-left corner, without touching the
     sidebar itself. Below 901px the sidebar stacks above the content and
     there is no corner left to align to, so --topbar-h drops to a plain
     56px bar (see the max-width:900px block).

     z-index sits under the 40 its own dropdowns use (they are inside it,
     so they still paint above the bar AND above page content) and well
     under the 1000 on .cb-modal-backdrop. */
  header{
    position:sticky; top:0; z-index:30;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    margin:-24px -18px 22px; padding:8px 18px;
    min-height:var(--topbar-h);
    background:var(--bg-panel);
    box-shadow:0 10px 26px -20px color-mix(in srgb, var(--bg) 92%, transparent);
  }
  /* Anything the browser can scroll into view on focus stops short of
     the bar instead of landing underneath it. Without this, tabbing or
     clicking into a field just below the fold scrolls it to y=0, which
     the bar then covers. */
  .content-col :is(input, select, textarea){scroll-margin-top:calc(var(--topbar-h) + 16px);}
  .brand{display:flex; align-items:center; gap:10px;}
  /* full logo lockup (icon + wordmark + tagline), transparent PNG trimmed
     to the artwork — sits directly on the header, flush left with the
     panels below, vertically centred against the header controls. */
  .brand-logo{
    height:44px; width:auto; max-width:min(58vw, 260px);
    display:block; object-fit:contain;
  }
  @media (max-width:560px){ .brand-logo{height:34px;} }

  /* Utility controls (status/settings, then session actions) group on the
     LEFT behind a thin divider; the account avatar is pushed to the far
     right on its own by margin-left:auto, the conventional split. It used
     to sit nested with the session buttons inside a .header-secondary
     wrapper so the two wrapped to a second line together; that wrapper is
     gone, since the whole point now is that account does NOT travel with
     them. Row-gap and column-gap stay the SAME value (10px) so however
     many lines this wraps to, the vertical rhythm reads as one consistent
     layout rather than a collision.

     Capped at --col-max and centred so the controls line up with the page
     content below, even though the bar's own background is full-bleed. */
  .header-actions{
    display:flex; align-items:center; flex-wrap:wrap; gap:10px 10px;
    justify-content:flex-start; flex:1 1 auto;
    max-width:var(--col-max); margin:0 auto; min-width:0;
  }
  .header-cluster{display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
  .header-right{margin-left:auto;}
  .header-actions .account-menu{margin-left:0;}
  .btn-ico{width:15px; height:15px; flex:none;}
  /* "Client: <name>": reads the Map's client name; a click goes to it. */
  .header-client-btn{
    display:inline-flex; align-items:center; gap:8px; max-width:min(46vw, 360px);
    background:var(--bg-panel-2); border:1px solid var(--border); border-radius:10px;
    padding:7px 12px; cursor:pointer; color:var(--text); font-family:var(--font-body);
    text-align:left; transition:border-color .15s;
  }
  .header-client-btn:hover{border-color:var(--border-bright);}
  .header-client-label{font-size:12px; color:var(--text-dim); font-weight:600; flex:none;}
  .header-client-name{font-size:13px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .header-client-name.empty{color:var(--text-faint); font-weight:500;}
  .saved-badge{
    display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
    color:var(--good); white-space:nowrap; padding:7px 4px;
  }
  .saved-dot{width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good); flex:none;}
  .saved-badge.unsaved{color:var(--warn);}
  .saved-badge.unsaved .saved-dot{background:var(--warn); box-shadow:0 0 8px var(--warn);}
  @media (max-width:640px){ .header-client-label{display:none;} }
  .header-divider{width:1px; align-self:stretch; min-height:22px; background:var(--border); flex:none;}
  @media (max-width:640px){ .header-divider{display:none;} }

  /* Shown only while checkConnection() detects a hard-locked trial (see
     the status.trialEnded badge state): the one way back in once every
     other route in the app is blocked, so it needs to stand out, not
     blend into the other muted header controls. */
  .header-actions .btn-sm#statusUpgradeBtn{
    background:rgba(255,79,109,0.12); border:1px solid var(--danger); color:var(--danger); font-weight:700;
  }
  .header-actions .btn-sm#statusUpgradeBtn:hover{background:rgba(255,79,109,0.2);}

  .header-actions .badge,
  .header-actions .btn{
    font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.3px;
    line-height:1; padding:7px 12px; border-radius:9px; border:1px solid var(--border);
    background:transparent; box-shadow:none; margin:0; white-space:nowrap;
    display:inline-flex; align-items:center; gap:6px;
    text-decoration:none; text-transform:none; color:var(--text);
  }

  /* connection badge: now inside the account dropdown */
  .badge{
    display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
    color:var(--text-dim); line-height:1; white-space:nowrap;
  }
  .badge::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--text-faint); flex:none;}
  .badge.ok{color:var(--good);}
  .badge.ok::before{background:var(--good); box-shadow:0 0 8px var(--good);}
  .account-dropdown-status{padding:9px 10px 4px;}

  /* plan tier + trial countdown */
  .header-actions .tier-badge{
    font-family:var(--font-mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--text-dim); border:1px solid var(--border); border-radius:999px; padding:3px 10px;
  }
  .header-actions .tier-badge.warn{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 50%, var(--border));}
  .header-actions .tier-badge.ended{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 55%, var(--border));}

  /* locked tab: the screen shows only the upgrade card, its panels are hidden */
  .tier-locked > *:not(.tier-lock){display:none !important;}
  .tier-lock{
    max-width:640px; margin:40px auto; padding:28px 30px; text-align:center;
    border:1px solid var(--border); border-radius:14px; background:var(--bg-raised);
  }
  .tier-lock h2{margin:0 0 10px; font-size:18px;}
  .tier-lock p{margin:0 0 6px; color:var(--text); font-size:13.5px; line-height:1.6;}
  .tier-lock .price{margin-top:14px; font-size:12px; color:var(--text);}
  .tier-lock .btn{margin-top:16px;}

  .trial-ended-banner{
    margin:0 0 16px; padding:12px 16px; border-radius:10px; font-size:13px; line-height:1.6;
    border:1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
    background:color-mix(in srgb, var(--danger) 8%, var(--bg-raised)); color:var(--text);
  }

  /* Email verification reminder. Amber, not the danger red of the ended-trial
     banner: an unconfirmed email blocks nothing about using the app, it only
     stands in front of upgrading and of changing email/password, so this
     nudges rather than alarms. Sits in normal flow under the sticky header
     (never over content), so it is persistent without ever blocking. */
  .verify-banner{
    display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
    margin:0 0 16px; padding:10px 14px; border-radius:10px; font-size:12.5px; line-height:1.5;
    border:1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
    background:color-mix(in srgb, var(--warn) 8%, var(--bg-raised)); color:var(--text);
  }
  .verify-banner-text{flex:1 1 260px; min-width:0;}
  .pastdue-banner{
    border-color:color-mix(in srgb, var(--danger) 55%, var(--border));
    background:color-mix(in srgb, var(--danger) 10%, var(--bg-raised));
  }
  .verify-status{font-size:11.5px; color:var(--text);}
  .verify-status.error{color:var(--warn);}
  .verify-inline{display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:8px;}
  /* Reuses .profile-pending's amber tint and border, but that class colours
     its text --warn too; this is a sentence to be read, so it gets --text
     like every other readable line (the amber stays on the border/tint). */
  #profileVerifyNotice{color:var(--text);}

  /* Language switch — ONE compact control for both the interface and the
     language every AI report is generated in (replaces what used to be
     four always-visible buttons, which cost the header three buttons'
     worth of width for languages nobody is currently using). Persisted
     to this browser; a loaded session restores the language it was
     worked in. */
  .lang-dropdown{display:inline-block; position:relative;}
  .lang-dropdown-btn{
    display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body);
    font-size:12px; font-weight:700; letter-spacing:.3px; color:var(--text);
    padding:7px 12px; border-radius:9px; border:1px solid var(--border);
    background:var(--bg-panel-2);
    cursor:pointer; line-height:1; transition:border-color .15s;
  }
  .lang-dropdown-btn:hover{border-color:var(--border-bright);}
  .lang-dropdown-btn .btn-ico{color:var(--blue-glow);}
  .lang-caret{font-size:9px; color:var(--text-dim);}
  .lang-dropdown-menu{
    position:absolute; top:calc(100% + 8px); left:0; min-width:170px; z-index:40;
    background:var(--bg-panel); border:1px solid var(--border-bright); border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,0.35); padding:6px;
  }
  .lang-dropdown-menu button{
    width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
    padding:9px 11px; border-radius:8px; font-family:var(--font-body); font-size:13.5px;
    font-weight:600; color:var(--text);
  }
  .lang-dropdown-menu button:hover{background:rgba(155,92,255,0.12);}
  .lang-dropdown-menu button.active{color:var(--blue-glow);}

  /* Save / Open — solid blue->purple fill, matching Choose File and every
     other primary .btn, not the tinted-outline .btn.ghost look. */
  .header-session-actions .btn.ghost{
    background:linear-gradient(135deg, var(--blue), var(--purple));
    border:1px solid transparent; color:#f4f6ff; cursor:pointer; transition:filter .15s;
    box-shadow:var(--glow-blue);
  }
  .header-session-actions .btn.ghost:hover{filter:brightness(1.1);}

  /* Account: one compact avatar with a dropdown (the standard SaaS
     pattern), for every account, there is only one way in now (login.html
     / signup.html), no admin-provisioned key path left to branch on.
     Nobody ever sees or manages a raw token. */
  .account-menu{position:relative;}
  .account-avatar-btn{
    width:32px; height:32px; border-radius:50%; border:1px solid transparent; padding:0;
    background:linear-gradient(135deg, var(--blue), var(--purple)); color:#f4f6ff; box-shadow:var(--glow-purple);
    font-family:var(--font-display); font-weight:800; font-size:13px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:filter .15s; flex:none;
  }
  .account-avatar-btn:hover{filter:brightness(1.08);}
  .account-dropdown{
    position:absolute; top:calc(100% + 8px); right:0; min-width:220px; z-index:40;
    background:var(--bg-panel); border:1px solid var(--border-bright); border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,0.35); padding:6px;
  }
  .account-dropdown-email{
    padding:9px 10px; font-size:12px; color:var(--text-dim); font-weight:600;
    border-bottom:1px solid var(--border); margin-bottom:4px; word-break:break-word;
  }
  .account-dropdown-item{
    width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
    padding:9px 10px; border-radius:8px; font-family:var(--font-body); font-size:13px;
    font-weight:600; color:var(--text);
  }
  .account-dropdown-item:hover{background:rgba(155,92,255,0.12);}
  .account-dropdown-logout:hover{background:rgba(255,79,109,0.12); color:var(--danger);}

  /* Upgrade plan modal: two plan cards, the actual price is whatever the
     Stripe checkout page shows next, not hardcoded here so it can never
     drift out of sync with what Stripe actually charges. */
  .cb-modal.wide{max-width:600px;}
  .cb-modal.xwide{max-width:820px; width:100%; max-height:88vh; overflow-y:auto;}  .copilot-chat-hint{font-size:12px; color:var(--text); line-height:1.5; margin:0 0 14px;}
  .copilot-chat-thread{
    display:flex; flex-direction:column; gap:10px; max-height:360px; overflow-y:auto;
    padding:14px; margin-bottom:10px; border-radius:12px;
    background:var(--bg-panel-2); border:1px solid var(--border);
  }
  .copilot-chat-empty{font-size:12.5px; color:var(--text-dim); text-align:center; padding:20px 10px;}
  .copilot-chat-bubble{
    max-width:80%; padding:10px 13px; border-radius:14px; font-size:13px;
    line-height:1.55; color:var(--text); white-space:pre-wrap;
  }
  .copilot-chat-bubble.user{
    align-self:flex-end; background:linear-gradient(135deg, var(--blue), var(--purple));
    color:#f4f6ff; font-weight:600; border-bottom-right-radius:4px;
  }
  .copilot-chat-bubble.assistant{
    align-self:flex-start; background:var(--bg-raised); border:1px solid var(--border);
    border-bottom-left-radius:4px;
  }
  .copilot-chat-bubble.assistant::before{
    content:"\2726"; color:var(--purple-glow); margin-right:6px; font-size:12px;
  }
  .copilot-chat-bubble.error{
    align-self:flex-start; background:rgba(255,79,109,0.1); border:1px solid rgba(255,79,109,0.35);
    color:var(--text); border-bottom-left-radius:4px;
  }
  .copilot-chat-bubble.pending{color:var(--text-dim); font-style:italic;}
  .copilot-chat-status{font-size:11.5px; color:var(--text-faint); min-height:14px; margin:0 0 6px;}
  .copilot-chat-status.error{color:var(--warn);}
  .copilot-chat-input-row{display:flex; gap:10px; align-items:flex-end;}
  .copilot-chat-input-row textarea{
    flex:1; background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text);
    padding:10px 12px; border-radius:10px; font-size:13px; font-family:var(--font-body);
    resize:vertical; line-height:1.5; min-height:44px;
  }
  .copilot-chat-input-row textarea:focus{outline:none; border-color:var(--border-bright);}
  .copilot-chat-input-row .btn{flex:none;}
  .copilot-chat-modal .cb-modal-actions{margin-top:14px;}

  .billing-plans{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
  .billing-plan{
    flex:1 1 220px; border:1px solid var(--border); border-radius:12px;
    padding:16px; background:var(--bg-panel);
  }
  .billing-plan-name{font-family:var(--font-display); font-weight:700; font-size:15px; margin-bottom:6px;}
  .billing-plan-desc{font-size:12.5px; color:var(--text); line-height:1.55; margin-bottom:14px; min-height:56px;}
  .billing-plan .btn, .billing-plan .btn.ghost{width:100%;}
  .billing-plan-price{font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--text-bright); margin-bottom:14px;}
  .billing-suite{border-top:1px solid var(--border-bright); padding-top:14px; margin-bottom:18px;}
  .billing-suite p{font-size:12.5px; margin:0 0 10px;}
  #billingSuiteStatus.ok{color:var(--blue-glow);}
  #billingSuiteStatus.error{color:var(--danger);}
  .billing-note{font-size:11.5px; color:var(--text); margin:0 0 18px; line-height:1.5;}
  .billing-note.error{color:var(--danger);}

  /* One shared client-identity row — client name, industry and consultant
     logo apply to every Assess tab, so they live above the tabs, not inside
     any single one. Two cards rather than one bar: the first two fields are
     the CLIENT's data, the logo is the CONSULTANT's own branding, and the
     gradient panel is what separates "about them" from "about you". */
  .client-bar{
    display:flex; flex-wrap:wrap; align-items:stretch; gap:16px; margin:0 0 18px;
  }
  .cb-card{
    display:flex; flex-wrap:wrap; gap:16px 20px; min-width:0;
    background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
    border:1px solid var(--border); border-radius:14px; padding:16px 18px;
  }
  .cb-card.cb-identity{flex:2 1 420px; align-items:stretch;}
  .client-bar .cb-field{display:flex; flex-direction:column; gap:8px; min-width:0;}
  .client-bar .cb-field > input, .client-bar .cb-field > select{margin-top:auto;}
  .client-bar .cb-field.grow{flex:2 1 240px;}

  /* Shared label pattern for the identity + context cards: a small gradient
     icon badge, the field name in bold body type, and one muted line under
     it saying what the field actually does. Replaces the old single-line
     all-caps mono label that had to carry both jobs in one sentence. */
  .fld-head{display:flex; align-items:flex-start; gap:10px; min-width:0;}
  .fld-head-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .fld-label{font-family:var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:.2px; color:var(--text);}
  .fld-help{font-size:11px; line-height:1.4; color:var(--text-dim);}
  .icon-badge{
    width:30px; height:30px; border-radius:9px; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,
      color-mix(in srgb, var(--blue) 26%, transparent),
      color-mix(in srgb, var(--purple) 26%, transparent));
    border:1px solid color-mix(in srgb, var(--blue-glow) 42%, transparent);
    color:var(--blue-glow);
  }
  .icon-badge svg{width:16px; height:16px; display:block;}

  /* Consultant logo card. Distinct gradient wash so it reads as the
     consultant's own branding slot rather than another client field. The
     mix percentages are held low enough that --text still clears this
     project's 7:1 bar on both ends of the gradient (computed against the
     resulting pixels, not eyeballed: 10.6:1 blue side, 11.0:1 purple). */
  .cb-card.cb-logo{
    flex:1 1 300px; align-items:flex-start;
    background:linear-gradient(135deg,
      color-mix(in srgb, var(--blue) 34%, var(--bg-panel-2)),
      color-mix(in srgb, var(--purple) 34%, var(--bg-panel-2)));
    border-color:color-mix(in srgb, var(--blue-glow) 45%, transparent);
    box-shadow:var(--glow-purple);
  }
  .cb-card.cb-logo .icon-badge{
    background:color-mix(in srgb, var(--text) 14%, transparent);
    border-color:color-mix(in srgb, var(--text) 30%, transparent);
    color:var(--text);
  }
  .cb-card.cb-logo .fld-help{color:var(--text);}
  .cb-logo-main{flex:1 1 200px; display:flex; flex-direction:column; gap:10px; min-width:0;}
  /* Decorative only: not a control, and not a label for one. */
  .cb-logo-flourish{
    flex:0 1 auto; display:flex; flex-direction:column; align-items:flex-end;
    justify-content:center; gap:3px; text-align:right; margin-left:auto;
  }
  .cb-logo-script{
    font-family:var(--font-script); font-size:27px; font-weight:500; line-height:1; color:var(--text);
  }
  .cb-logo-tagline{
    font-family:var(--font-mono); font-size:9px; text-transform:uppercase;
    letter-spacing:1.4px; color:var(--text);
  }
  @media (max-width:760px){ .cb-logo-flourish{display:none;} }
  .client-bar #clientName, .client-bar #clientIndustry, .client-bar #ctxHeadcount{
    background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text);
    padding:10px 12px; border-radius:8px; font-size:13.5px; font-family:var(--font-body); width:100%;
  }
  .client-bar #clientName:focus, .client-bar #clientIndustry:focus, .client-bar #ctxHeadcount:focus{outline:none; border-color:var(--border-bright);}
  .client-bar #clientIndustry, .client-bar #ctxHeadcount{appearance:none; cursor:pointer;}
  /* grows rather than staying a fixed 240px column: when the identity
     card is narrow enough that the two fields wrap, Industry fills the
     row like the name field above it instead of sitting short. */
  .client-bar .cb-field.industry{flex:1 1 200px;}
  .client-bar .cb-field.headcount{flex:1 1 180px;}

  /* Section head: a title and the one plain line under it that says what
     the section is for. Used by every section of the Map / Enable / Plan /
     Track pages. */
  .sec-head{margin:22px 0 10px;}
  .sec-head:first-child{margin-top:0;}
  .sec-title{
    margin:0; font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--text-bright);
    display:flex; align-items:center; gap:10px;
  }
  .sec-title::before{
    content:""; width:8px; height:22px; border-radius:4px; flex:none;
    background:linear-gradient(180deg, var(--cyan), var(--purple)); box-shadow:var(--glow-blue);
  }
  .sec-line{margin:3px 0 0; font-size:12.5px; line-height:1.45; color:var(--text);}

  /* Map tables: roles, tools, who-uses-what. Inputs sit flush in cells. */
  .map-panel{padding:16px 18px 14px;}
  .map-table{width:100%; border-collapse:collapse; font-size:12.5px;}
  .map-table th, .map-table td{padding:6px 8px; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle;}
  .map-table thead th{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:1.4px; color:var(--blue-glow); font-weight:600; padding-top:2px;}
  .map-table tbody tr:last-child td, .map-table tbody tr:last-child th{border-bottom:none;}
  .map-table input[type="text"], .map-table input[type="number"], .map-table select{
    width:100%; background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text-bright);
    padding:8px 10px; border-radius:7px; font-size:13px; font-family:var(--font-body);
  }
  .map-table input:focus, .map-table select:focus{outline:none; border-color:var(--border-bright);}
  .map-table select{appearance:none; cursor:pointer;}
  .map-table input[type="number"]{width:78px;}
  .map-col-num{width:96px;} .map-col-type{width:130px;} .map-col-act{width:34px;}
  .map-remove{
    background:transparent; border:1px solid transparent; color:var(--text-faint); font-size:18px; line-height:1;
    width:28px; height:28px; border-radius:7px; cursor:pointer;
  }
  .map-remove:hover{color:var(--text-bright); border-color:var(--border); background:var(--bg-panel-2);}
  .map-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
  .map-note{margin:12px 0 0; font-size:12px; line-height:1.45; color:var(--text);}
  .map-note:empty{display:none;}
  .map-empty{margin:4px 0 2px; font-size:13px; color:var(--text);}
  .map-matrix-scroll{overflow-x:auto;}
  .map-matrix th[scope="row"]{font-weight:600; color:var(--text-bright); white-space:nowrap; font-size:12.5px; text-transform:none; letter-spacing:0; font-family:var(--font-body);}
  .map-matrix thead th{white-space:nowrap;}
  .map-matrix td{min-width:118px;}
  .map-usage.none{color:var(--text-faint);}
  .map-usage.occasional{color:var(--text);}
  .map-usage.weekly{color:var(--text-bright); border-color:var(--blue-glow); background:rgba(47,125,255,0.14);}
  .map-usage.daily{color:var(--text-bright); border-color:var(--purple-glow); background:rgba(123,92,255,0.18); box-shadow:var(--glow-purple);}
  /* --- Home (new UI) ---------------------------------------------------- */
  .home-hero{
    position:relative; overflow:hidden; border-radius:var(--radius); padding:34px 32px 30px; margin:0 0 18px;
    background:
      radial-gradient(700px 300px at 85% 30%, rgba(47,125,255,0.35), transparent 60%),
      radial-gradient(500px 260px at 60% 110%, rgba(123,92,255,0.30), transparent 60%),
      linear-gradient(135deg, #0a1440, #070d24 55%, #0b1331);
    border:1px solid var(--border-bright); box-shadow:var(--glow-blue);
  }
  .home-hero::after{
    content:""; position:absolute; inset:-40% -10% auto auto; width:60%; height:180%; pointer-events:none;
    background:repeating-linear-gradient(115deg, rgba(56,212,255,0.0) 0 18px, rgba(56,212,255,0.07) 18px 20px);
    transform:rotate(8deg); opacity:.6;
  }
  .home-hero-logo{height:72px; width:auto; max-width:100%; display:block; position:relative;}
  .home-hero-pitch{position:relative; margin:16px 0 0; max-width:62ch; font-size:15.5px; line-height:1.55; color:var(--text);}
  @media (max-width:640px){ .home-hero{padding:22px 18px;} .home-hero-logo{height:52px;} .home-hero-pitch{font-size:14px;} }

  .home-steps{
    display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; margin:0 0 18px; padding:14px 16px;
    background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);
  }
  .home-step{
    flex:1 1 180px; display:flex; align-items:center; gap:12px; text-align:left;
    background:transparent; border:1px solid transparent; border-radius:12px; padding:8px 10px;
    color:var(--text); font-family:var(--font-body); cursor:pointer; transition:background .15s, border-color .15s;
  }
  .home-step:hover{background:rgba(47,125,255,0.10); border-color:var(--border);}
  .home-step.soon{cursor:default; opacity:.55;}
  .home-step.soon:hover{background:transparent; border-color:transparent;}
  .home-step-ico{
    width:52px; height:52px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 30% 30%, rgba(56,212,255,0.35), rgba(123,92,255,0.25));
    border:1px solid var(--border-bright); box-shadow:var(--glow-purple); color:var(--text);
  }
  .home-step-ico svg{width:24px; height:24px;}
  .home-step-body{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .home-step-num{
    display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
    background:linear-gradient(135deg, var(--blue), var(--purple)); color:#f4f6ff; font-size:11px; font-weight:800; font-family:var(--font-display);
  }
  .home-step-title{font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-bright, var(--text));}
  .home-step-line{font-size:12px; line-height:1.4; color:var(--text-dim);}
  .home-step-arrow{align-self:center; color:var(--blue-glow); font-size:20px; flex:none;}
  @media (max-width:760px){ .home-step-arrow{display:none;} }

  .home-grid{display:grid; grid-template-columns:minmax(0, 3fr) minmax(260px, 1fr); gap:16px; margin:0 0 16px;}
  .home-panels{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;}
  .home-side{display:flex; flex-direction:column; gap:16px;}
  .home-grid-4{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px;}
  @media (max-width:1180px){ .home-panels{grid-template-columns:repeat(2, minmax(0, 1fr));} .home-grid-4{grid-template-columns:repeat(2, minmax(0, 1fr));} }
  @media (max-width:900px){ .home-grid{grid-template-columns:1fr;} }
  @media (max-width:640px){ .home-panels, .home-grid-4{grid-template-columns:1fr;} }

  .home-card{
    background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
    border:1px solid var(--border); border-radius:var(--radius); padding:18px 18px 16px; min-width:0;
    display:flex; flex-direction:column; gap:10px;
  }
  .home-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .home-card-head h3{margin:0; font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text);}
  .home-link{background:transparent; border:none; color:var(--blue-glow); font-family:var(--font-body); font-size:12px; font-weight:600; cursor:pointer; padding:0;}
  .home-panel-head{display:flex; align-items:flex-start; gap:10px;}
  .home-panel-head h3{margin:0; font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text);}
  .home-panel-head p{margin:3px 0 0; font-size:12.5px; line-height:1.45; color:var(--text-dim);}
  .home-panel-num{
    width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--blue), var(--purple)); color:#f4f6ff; font-family:var(--font-display); font-weight:800; font-size:13px;
    box-shadow:var(--glow-blue);
  }
  .home-panel-soon .home-panel-num{background:var(--bg-raised); color:var(--text-faint); box-shadow:none; border:1px solid var(--border);}
  .home-panel-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px;}
  .home-btn{padding:10px 16px; font-size:13px; border-radius:10px;}
  .home-btn-wide{width:100%;}
  .home-stat{margin:0; font-size:13px; font-weight:600; color:var(--text);}
  .home-empty{margin:0; font-size:12.5px; line-height:1.5; color:var(--text-dim);}
  .home-soon{margin:0; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--text-faint);}
  .home-more{margin:0; font-size:12px; color:var(--text-faint);}
  .home-mini{width:100%; border-collapse:collapse; font-size:12.5px;}
  .home-mini th, .home-mini td{padding:6px 6px; text-align:left; border-bottom:1px solid var(--border);}
  .home-mini thead th{font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-faint); font-weight:500;}
  .home-mini .num{text-align:right;}
  .home-guide{background:var(--bg-panel-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px;}
  .home-guide-title{font-weight:700; font-size:13px; color:var(--text); margin-bottom:6px;}
  .home-guide-sub{font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--blue-glow); margin-bottom:6px;}
  .home-guide ol{margin:0; padding-left:18px; font-size:12.5px; line-height:1.5; color:var(--text);}
  .home-plan{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
  .home-plan li{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-dim); background:var(--bg-panel-2); border:1px solid var(--border); border-radius:10px; padding:8px 10px;}
  .home-plan-days{font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--blue-glow); width:28px; flex:none;}
  .home-pilot{
    border-color:var(--border-bright); box-shadow:var(--glow-purple);
    background:linear-gradient(160deg, rgba(47,125,255,0.14), rgba(123,92,255,0.12)), linear-gradient(var(--bg-panel-2), var(--bg-panel-2));
  }
  .home-pilot-spark{color:var(--cyan);}
  .home-pilot-sub{margin:-4px 0 0; font-size:12.5px; color:var(--text-dim);}
  .home-checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
  .home-checks li{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.4; color:var(--text);}
  .home-checks li::before{content:"\2713"; flex:none; width:16px; height:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#f4f6ff; background:linear-gradient(135deg, var(--cyan), var(--blue)); margin-top:1px;}
  .home-track-score{display:flex; align-items:center; gap:14px;}
  .home-ring{width:84px; height:84px; flex:none;}
  .home-score-num{font-family:var(--font-display); font-size:26px; font-weight:800; color:var(--text); line-height:1;}
  .home-score-label{font-size:12px; color:var(--text-dim); margin-top:4px;}
  .home-usage-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px;}
  .home-usage-list li{display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--text);}
  .home-usage{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim);}
  .home-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
  .home-row{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; border:1px solid transparent;
    border-radius:10px; padding:6px 6px; color:var(--text); font-family:var(--font-body); cursor:pointer;
  }
  .home-row:not(.static):hover{background:rgba(47,125,255,0.10); border-color:var(--border);}
  .home-row.static{cursor:default;}
  .home-avatar{
    width:34px; height:34px; border-radius:10px; flex:none; display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(47,125,255,0.5), rgba(123,92,255,0.5)); border:1px solid var(--border-bright);
    font-family:var(--font-display); font-weight:800; font-size:12px; color:#f4f6ff;
  }
  .home-avatar.small{width:26px; height:26px; border-radius:8px; font-size:10px;}
  .home-row-body{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .home-row-title{font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .home-row-sub{font-size:11.5px; color:var(--text-dim); display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .home-dot{width:5px; height:5px; border-radius:50%; background:var(--cyan); display:inline-block;}
  .home-action-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px;}
  .home-action{
    display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
    background:var(--bg-panel-2); border:1px solid var(--border); border-radius:12px; padding:12px 8px;
    color:var(--text); font-family:var(--font-body); font-size:11.5px; font-weight:600; line-height:1.3; cursor:pointer;
    transition:border-color .15s, background .15s;
  }
  .home-action:hover{border-color:var(--border-bright); background:rgba(47,125,255,0.10);}
  .home-action-ico{
    width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--blue), var(--purple)); color:#f4f6ff; font-size:16px; font-weight:800;
  }
  .home-data .home-lock{font-size:14px;}
  .home-data-link{align-self:flex-start; text-decoration:none;}
  /* the header's client menu */
  .client-menu{position:relative;}
  .client-dropdown-menu{
    position:absolute; top:calc(100% + 8px); left:0; min-width:260px; max-width:min(90vw, 360px); z-index:40;
    background:var(--bg-panel); border:1px solid var(--border-bright); border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,0.35); padding:6px;
  }
  .client-dropdown-menu button{
    width:100%; display:flex; align-items:center; gap:8px; text-align:left; background:transparent; border:none; cursor:pointer;
    padding:8px 10px; border-radius:8px; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--text);
  }
  .client-dropdown-menu button:hover{background:rgba(123,92,255,0.12);}
  .client-menu-label{padding:8px 10px 4px; font-size:11px; color:var(--text-faint); line-height:1.4;}

  /* Plan: the starting point, three bands, one card per milestone */
  .plan-notes{
    display:block; width:100%; min-height:56px; resize:vertical;
    background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text-bright);
    padding:10px 12px; border-radius:9px; font-size:13px; line-height:1.5; font-family:var(--font-body);
  }
  .plan-notes:focus{outline:none; border-color:var(--border-bright);}
  .plan-band{margin:0 0 18px;}
  .plan-band-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 8px; padding:0 2px;}
  .plan-band-title{font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--blue-glow);}
  .plan-band-count{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-faint);}
  .plan-band-empty{margin:0; font-size:12.5px; color:var(--text-faint); padding:10px 12px; border:1px dashed var(--border); border-radius:12px;}
  .plan-card{
    background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
    border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px 12px; margin-bottom:10px;
    display:flex; flex-direction:column; gap:10px; transition:border-color .15s;
  }
  .plan-card:hover{border-color:var(--border-bright);}
  .plan-card-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .plan-card-tools{margin-left:auto; display:flex; gap:2px;}
  .plan-week{
    background:var(--bg-panel-2); border:1px solid var(--border-bright); color:var(--text-bright);
    padding:6px 10px; border-radius:8px; font-size:12.5px; font-weight:700; font-family:var(--font-body); appearance:none; cursor:pointer;
  }
  .plan-row{display:flex; flex-direction:column; gap:5px;}
  .plan-row-3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;}
  .plan-row-3 > div{display:flex; flex-direction:column; gap:5px; min-width:0;}
  @media (max-width:760px){ .plan-row-3{grid-template-columns:1fr;} }
  .plan-label{font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:1.3px; color:var(--text-faint);}
  .plan-card select, .plan-card input[type="text"], .plan-card textarea{
    width:100%; background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text-bright);
    padding:8px 10px; border-radius:8px; font-size:13px; font-family:var(--font-body); line-height:1.45;
  }
  .plan-card select{appearance:none; cursor:pointer;}
  .plan-card select:focus, .plan-card input:focus, .plan-card textarea:focus{outline:none; border-color:var(--border-bright);}
  .plan-def{resize:vertical; min-height:44px;}
  .plan-chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
  .plan-chip{
    display:inline-flex; align-items:center; gap:4px; padding:4px 6px 4px 10px; border-radius:99px;
    background:rgba(47,125,255,0.16); border:1px solid var(--border-bright); color:var(--text-bright); font-size:12px; font-weight:600;
  }
  .plan-chip.gone{background:transparent; color:var(--text-faint); border-style:dashed;}
  .plan-chip-x{background:transparent; border:none; color:var(--text-dim); cursor:pointer; font-size:14px; line-height:1; padding:0 2px;}
  .plan-chip-x:hover{color:var(--text-bright);}
  .plan-card .plan-role-add{width:auto; padding:5px 10px; font-size:12px; border-radius:99px; border-style:dashed; color:var(--text-dim);}
  .qs-badge.status.done{border-color:var(--good); color:var(--good);}
  .qs-badge.status.in_progress{border-color:var(--blue-glow); color:var(--blue-glow);}
  .qs-badge.status.slipped{border-color:var(--warn); color:var(--warn);}
  .home-champions{display:flex; gap:6px; flex-wrap:wrap;}

  /* Track: check-in cards, the score tile */
  .track-date, .track-ms{
    background:var(--bg-panel-2); border:1px solid var(--border-bright); color:var(--text-bright);
    padding:6px 10px; border-radius:8px; font-size:12.5px; font-weight:600; font-family:var(--font-body);
  }
  .track-ms{appearance:none; cursor:pointer; max-width:min(60vw, 420px); font-weight:500; color:var(--text);}
  .track-date::-webkit-calendar-picker-indicator{filter:invert(1); opacity:.6;}
  .track-usage-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px;}
  .track-usage-row{display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--bg-panel-2); border:1px solid var(--border); border-radius:9px; padding:6px 8px 6px 10px;}
  .track-usage-role{font-size:12.5px; font-weight:600; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .plan-card .track-usage{width:auto; padding:5px 8px; font-size:12px;}
  .track-usage.confident, .home-usage.confident{color:var(--good);}
  .track-usage.regular, .home-usage.regular{color:var(--blue-glow);}
  .track-usage.trying, .home-usage.trying{color:var(--warn);}
  .track-usage.none, .home-usage.none{color:var(--danger);}
  .track-usage.blank, .home-usage.blank{color:var(--text-faint);}
  .plan-row-2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;}
  .plan-row-2 > div{display:flex; flex-direction:column; gap:5px; min-width:0;}
  @media (max-width:760px){ .plan-row-2{grid-template-columns:1fr;} }
  /* ---- Track page (the Track design): hero, three cards, recent check-ins.
     Cards, buttons and chips are the Templates ones (.tpl-card, .tpl-btn). ---- */
  #trackScreen .tpl-card{margin-bottom:0;}
  .trk-eyebrow{font-family:var(--font-body); font-weight:700; letter-spacing:3px; color:var(--blue-glow);}
  .app-shell:has(#tabTrack.active) .page-script{display:none;}
  .app-shell:has(#tabTrack.active) .page-head .page-title{font-size:38px; margin-bottom:6px;}
  .app-shell:has(#tabTrack.active) .page-head .page-sub{font-size:14px; color:var(--text); max-width:520px;}
  .app-shell:has(#tabTrack.active) .page-head .trk-hero[data-page="track"]{display:flex;}
  .trk-hero{flex:0 1 auto; align-items:stretch; gap:16px;}
  .trk-hero-chart{display:flex; align-items:flex-end; gap:7px; height:104px; padding:0 4px 0 0; border-bottom:2px solid rgba(123,92,255,0.55); min-width:150px;}
  .trk-hero-chart i{flex:1; min-width:11px; max-width:22px; border-radius:4px 4px 0 0; background:linear-gradient(180deg, var(--cyan), var(--purple)); box-shadow:0 0 12px rgba(56,212,255,0.25);}
  .trk-hero-chart.ghost i{background:var(--border-bright); box-shadow:none; opacity:.55;}
  .trk-hero-tile{min-width:132px; padding:14px 18px; border:1px solid var(--border-bright); border-radius:16px; background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2)); box-shadow:var(--glow-blue);}
  .trk-hero-num{font-family:var(--font-display); font-size:38px; font-weight:800; line-height:1; background:linear-gradient(135deg, var(--cyan), var(--blue-glow)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .trk-hero-label{margin-top:6px; font-size:13px; font-weight:600; color:var(--text-bright);}
  .trk-hero-change{margin-top:4px; font-size:11.5px; color:var(--text-dim);}
  .trk-delta.up{color:var(--good);} .trk-delta.down{color:var(--danger);} .trk-delta{font-weight:700;}
  @media (max-width:900px){ .trk-hero-chart{display:none;} }
  /* the step bar on Track: a card, finished steps ticked */
  .app-shell:has(#tabTrack.active) .step-progress{padding:16px 20px; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));}
  .app-shell:has(#tabTrack.active) .step-dot:not([data-step="track"]) .step-num{font-size:0; border-color:var(--cyan); color:var(--cyan);}
  .app-shell:has(#tabTrack.active) .step-dot:not([data-step="track"]) .step-num::after{content:"\2713"; font-size:16px; font-weight:800;}
  .trk-empty{margin-bottom:20px !important;}
  /* ---- Card headers: a tinted band, its own shade apart from the card
     body, in one of the four palette colors (--hd). The color changes from
     card to card within a row, and from row to row. ---- */
  .tpl-card > .tpl-card-head{
    margin:calc(var(--card-py) * -1) calc(var(--card-px) * -1) 16px; padding:14px var(--card-px);
    border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    background:linear-gradient(90deg, color-mix(in srgb, var(--hd) 30%, transparent), color-mix(in srgb, var(--hd) 7%, transparent));
    border-bottom:1px solid color-mix(in srgb, var(--hd) 40%, var(--border));
  }
  .tpl-card > .tpl-card-head .trk-ico, .tpl-card > .tpl-card-head .tpl-badge{
    background:linear-gradient(135deg, color-mix(in srgb, var(--hd) 75%, #0b1331), color-mix(in srgb, var(--hd) 30%, #0b1331));
    border:1px solid color-mix(in srgb, var(--hd) 70%, transparent); box-shadow:0 0 14px color-mix(in srgb, var(--hd) 35%, transparent);
  }
  :is(.tpl-three, .trk-top, .enb-main, .pln-top) > .tpl-card:nth-child(4n+1){--hd:var(--cyan);}
  :is(.tpl-three, .trk-top, .enb-main, .pln-top) > .tpl-card:nth-child(4n+2){--hd:var(--blue-glow);}
  :is(.tpl-three, .trk-top, .enb-main, .pln-top) > .tpl-card:nth-child(4n+3){--hd:var(--purple-glow);}
  :is(.tpl-three, .trk-top, .enb-main, .pln-top) > .tpl-card:nth-child(4n+4){--hd:#d14be0;}
  .tpl-col3 > .tpl-card{--hd:var(--purple-glow);}
  :is(.trk-bottom, .enb-bottom) > .tpl-card:nth-child(1){--hd:var(--purple-glow);}
  :is(.trk-bottom, .enb-bottom) > .tpl-card:nth-child(2){--hd:#d14be0;}
  .trk-side > .tpl-card:nth-child(1){--hd:#d14be0;}
  .tpl-guides-card, .pln-ms-card, #mapScreen > .tpl-card{--hd:#d14be0;}
  .pln-champ-card, .trk-sc-text{--hd:var(--cyan);}
  #enableGoneCard{--hd:var(--purple-glow);}
  /* Home: the same bands on its cards */
  .home-card{--hd:var(--blue-glow);}
  .home-card > .home-panel-head, .home-card > .home-card-head{
    margin:-18px -18px 0; padding:12px 18px; border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    background:linear-gradient(90deg, color-mix(in srgb, var(--hd) 30%, transparent), color-mix(in srgb, var(--hd) 7%, transparent));
    border-bottom:1px solid color-mix(in srgb, var(--hd) 40%, var(--border));
  }
  .home-panels > .home-card:nth-child(1), .home-grid-4 > .home-card:nth-child(4n+1){--hd:var(--cyan);}
  .home-panels > .home-card:nth-child(2), .home-grid-4 > .home-card:nth-child(4n+2){--hd:var(--blue-glow);}
  .home-panels > .home-card:nth-child(3), .home-grid-4 > .home-card:nth-child(4n+3){--hd:var(--purple-glow);}
  #homeTrack, .home-grid-4 > .home-card:nth-child(4n+4){--hd:#d14be0;}

  /* ---- AdoptPilot, wherever it appears: a glowing cyan border, the
     diamond, the name with an uppercase chip saying where you are, one
     line of description, and the gradient button. ---- */
  .pilot-card{
    border:1px solid rgba(56,212,255,0.70) !important;
    box-shadow:0 0 0 1px rgba(56,212,255,0.14), 0 0 24px rgba(56,212,255,0.20) !important;
    background:linear-gradient(180deg, rgba(56,212,255,0.07), rgba(56,212,255,0) 42%), linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2)) !important;
  }
  .pilot-head{display:flex; align-items:flex-start; gap:13px; margin-bottom:14px;}
  .pilot-gem{
    flex:none; width:13px; height:13px; margin:6px 4px 0 3px; transform:rotate(45deg); border-radius:3px;
    background:linear-gradient(135deg, #b6f1ff, var(--cyan)); box-shadow:0 0 0 3px rgba(56,212,255,0.18), 0 0 14px var(--cyan);
  }
  .pilot-titles{flex:1; min-width:0;}
  .pilot-name{display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:0; font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--text-bright);}
  .pilot-chip{
    font-family:var(--font-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; line-height:1.5;
    padding:2px 9px; border-radius:99px; border:1px solid rgba(56,212,255,0.65); color:var(--cyan); background:rgba(56,212,255,0.09);
  }
  .pilot-sub{margin:4px 0 0; font-size:12.5px; line-height:1.5; color:var(--text);}
  .pilot-card .tpl-btn.primary, .pilot-card .btn.home-btn{border:0; background:linear-gradient(135deg, var(--blue), var(--purple)); box-shadow:var(--glow-blue);}
  .home-pilot .pilot-head{margin-bottom:2px;}
  .pilot-head-modal{align-items:center; margin-bottom:10px;}
  .pilot-head-modal h3{margin:0; font-size:16px;}
  .pilot-head-modal .pilot-gem{margin-top:0;}
  .trk-assist.pilot-card{margin-top:18px; padding:16px; border-radius:14px;}
  .trk-assist.pilot-card textarea{margin-top:0;}

  /* ---- Map page (the Map design): the Templates cards, three across. ---- */
  #mapScreen .tpl-card{margin-bottom:20px;}
  #mapScreen .tpl-three .tpl-card{margin-bottom:0;}
  #mapScreen .tpl-btn svg, #mapScreen .tpl-icon-btn svg{width:16px; height:16px; flex:none;}
  #mapScreen .tpl-item-ico svg{width:20px; height:20px;}
  .app-shell:has(#tabMap.active) .page-head .page-title{font-size:38px; margin-bottom:6px;}
  .app-shell:has(#tabMap.active) .page-head .page-sub{font-size:14.5px; color:var(--text);}
  .map-three .tpl-items{margin-bottom:4px;}
  .map-starter-row{margin-top:12px;}
  /* the template picker above the button (shown once a custom template exists): the Templates dropdown's look */
  .map-starter-pick{
    flex:1 1 100%; min-width:0; max-width:100%; background:var(--bg-panel-2); border:1px solid var(--border-bright); color:var(--text-bright);
    padding:9px 12px; border-radius:10px; font-size:13px; font-weight:600; font-family:var(--font-body); cursor:pointer;
  }
  .map-starter-row:has(.map-starter[hidden]){display:none;}
  #mapScreen .tpl-matrix thead th{font-family:var(--font-body); font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-dim);}
  .map-stats{margin:0 0 16px; justify-content:space-around;}
  #mapScreen .assist-panel textarea{
    width:100%; resize:vertical; background:var(--bg-panel-2); border:1px solid var(--border-bright); border-radius:10px;
    color:var(--text-bright); padding:10px 12px; font-size:13px; line-height:1.5; font-family:var(--font-body);
  }
  #mapScreen .assist-panel .assist-actions{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:4px;}
  .cb-import{padding:12px 16px; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(90deg, rgba(123,92,255,0.14), rgba(47,125,255,0.05)); margin:14px auto 20px !important;}
  /* ---- Enable page (the Enable design): generate bar beside AdoptPilot,
     role list, the role's tools, the guide preview, guides at a glance. ---- */
  #enableScreen .tpl-card{margin-bottom:20px;}
  #enableScreen .tpl-btn svg{width:15px; height:15px; flex:none;}
  .app-shell:has(#tabEnable.active) .page-head .page-title{font-size:44px; margin-bottom:4px;}
  .app-shell:has(#tabEnable.active) .page-head .page-sub{font-size:15px; color:var(--text);}
  .enb-gen .trk-actions{margin-top:auto;}
  .enb-gen .trk-actions .tpl-btn{padding:12px 18px; font-size:14px;}
  .enb-main{display:grid; grid-template-columns:1fr; gap:20px;}
  @media (min-width:1200px){ .enb-main{grid-template-columns:minmax(0,0.95fr) minmax(0,1.1fr) minmax(0,1.2fr); align-items:start;} }
  .enb-roles{display:grid; gap:8px;}
  .enb-role{
    display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; padding:10px 12px;
    background:var(--bg-panel-2); border:1px solid var(--border); border-radius:12px; color:var(--text); font-family:var(--font-body);
    transition:border-color .15s, box-shadow .15s;
  }
  .enb-role:hover{border-color:var(--border-bright);}
  .enb-role.active{border-color:var(--blue-glow); box-shadow:var(--glow-blue); background:rgba(47,125,255,0.12);}
  .enb-role .tpl-item-ico{width:38px; height:38px;}
  .enb-role .tpl-item-ico svg{width:20px; height:20px;}
  .enb-role b{display:block; font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text-bright); overflow-wrap:anywhere;}
  .enb-role span.enb-role-meta{display:block; margin-top:2px; font-size:12px; color:var(--text-dim);}
  .enb-role > div{flex:1; min-width:0;}
  .enb-role > svg{flex:none; width:16px; height:16px; color:var(--text-dim);}
  .enb-role.active > svg{color:var(--blue-glow);}
  .enb-tool{cursor:default;}
  .enb-tool.active{border-color:var(--blue-glow); box-shadow:var(--glow-blue);}
  .enb-tool .qs-badges{margin:6px 0 0;}
  .enb-tool .qs-actions{margin-top:10px;}
  .enb-prev-pick{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .enb-prev-pick .tpl-select{flex:1; min-width:0;}
  .enb-guide{border:1px solid var(--border); border-radius:14px; background:var(--bg-panel-2); padding:16px;}
  .enb-guide-head{display:flex; align-items:center; gap:13px; padding-bottom:13px; margin-bottom:14px; border-bottom:2px solid; border-image:linear-gradient(90deg, var(--cyan), var(--purple), #d14be0) 1;}
  .enb-guide-head .tpl-tile{width:44px; height:44px; border-radius:12px; font-size:14px;}
  .enb-guide-head b{display:block; font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--text-bright);}
  .enb-guide-head span.enb-guide-role{display:block; margin-top:2px; font-size:14px; font-weight:600; color:var(--blue-glow);}
  .enb-guide h3{margin:0 0 9px; font-family:var(--font-display); font-size:14.5px; font-weight:700; color:var(--text-bright);}
  .enb-week{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; counter-reset:enbweek;}
  .enb-week li{display:flex; gap:10px; font-size:13px; line-height:1.45; color:var(--text); counter-increment:enbweek;}
  .enb-week li::before{content:counter(enbweek); flex:none; width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--blue), var(--purple));}
  .enb-sec{border:1px solid var(--border); border-radius:10px; margin-top:8px; background:var(--bg-panel);}
  .enb-sec summary{cursor:pointer; list-style:none; padding:10px 12px; font-size:13px; font-weight:700; color:var(--text-bright); display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .enb-sec summary::-webkit-details-marker{display:none;}
  .enb-sec summary::after{content:"\25BE"; color:var(--text-dim); font-size:12px;}
  .enb-sec[open] summary::after{content:"\25B4";}
  .enb-sec-body{padding:0 12px 12px; font-size:12.5px; line-height:1.55; color:var(--text);}
  .enb-sec-body p{margin:0 0 8px;} .enb-sec-body p:last-child{margin-bottom:0;}
  .enb-sec-body b{color:var(--text-bright);}
  .enb-sec-body ol{margin:4px 0 10px; padding-left:20px;}
  .enb-preview-card .qs-text{margin-top:0; min-height:260px;}
  .enb-preview-card .qs-actions{margin-top:14px;}
  .enb-bottom{display:grid; grid-template-columns:1fr; gap:20px;}
  @media (min-width:1200px){ .enb-bottom{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); align-items:start;} }
  .enb-glance{width:100%; border-collapse:collapse;}
  .enb-glance th{padding:0 8px 8px; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--text-dim); text-align:center; vertical-align:bottom;}
  .enb-glance th:first-child, .enb-glance td:first-child{text-align:left; padding-left:2px;}
  .enb-glance td{padding:9px 8px; border-top:1px solid var(--border); font-size:13px; color:var(--text); text-align:center;}
  .enb-glance td:first-child{font-weight:600; color:var(--text-bright);}
  .enb-glance td:last-child, .enb-glance th:last-child{text-align:right; padding-right:2px;}
  .enb-glance .tpl-tile{display:flex; margin:0 auto 5px; width:24px; height:24px; border-radius:7px; font-size:9px;}
  .enb-cell svg{width:17px; height:17px; vertical-align:middle;}
  .enb-cell.yes{color:var(--cyan);} .enb-cell.no{color:var(--text-faint);} .enb-cell.todo{color:var(--warn);}
  .enb-glance .tpl-btn{padding:5px 12px; font-size:12px;}
  .enb-glance-scroll{overflow-x:auto;}
  .enb-dl{display:grid; gap:10px;}
  .enb-dl .tpl-btn{justify-content:center;}
  /* ---- Plan page (the Plan design): summary bar, starting point beside
     AdoptPilot, three phase columns, role champions. Cards and buttons are
     the Templates ones. ---- */
  #planScreen .tpl-card{margin-bottom:20px;}
  #planScreen .tpl-btn svg{width:15px; height:15px; flex:none;}
  .app-shell:has(#tabPlan.active) .page-head .page-title{font-size:44px; margin-bottom:4px;}
  .app-shell:has(#tabPlan.active) .page-head .page-sub{font-size:14px; color:var(--text);}
  .app-shell:has(#tabPlan.active) .page-head .pln-hero[data-page="plan"]{display:block;}
  .pln-hero{flex:0 1 340px; min-width:220px; align-self:center;}
  .pln-hero svg{display:block; width:100%; height:auto; overflow:visible;}
  @media (max-width:1100px){ .app-shell:has(#tabPlan.active) .page-head .pln-hero[data-page="plan"]{display:none;} }
  .pln-summary{display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap;}
  .pln-summary .tpl-card-titles{flex:1 1 220px;}
  .pln-summary .tpl-stats{margin-left:auto;}
  .pln-top{display:grid; grid-template-columns:1fr; gap:20px;}
  @media (min-width:1100px){ .pln-top{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); align-items:stretch;} }
  .pln-top .tpl-card{display:flex; flex-direction:column;}
  .pln-top .plan-notes{flex:1; min-height:96px;}
  .pln-checks{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
  .pln-checks li{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text);}
  .pln-checks svg{flex:none; width:17px; height:17px; padding:3px; border-radius:50%; background:linear-gradient(135deg, var(--blue), var(--cyan)); color:#fff;}
  .pln-pilot .trk-actions{margin-top:auto; padding-top:16px;}
  .pln-head-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;}
  .pln-head-actions > span{display:contents;}
  .pln-bands{display:grid; grid-template-columns:1fr; gap:16px;}
  @media (min-width:1100px){ .pln-bands{grid-template-columns:repeat(3, minmax(0,1fr)); align-items:start;} }
  .pln-band{min-width:0; border:1px solid var(--border); border-radius:14px; background:var(--bg-panel-2); overflow:hidden;}
  .pln-band-head{display:flex; align-items:center; gap:12px; padding:12px 14px;}
  .pln-band.b30 .pln-band-head{background:linear-gradient(90deg, rgba(47,125,255,0.30), rgba(47,125,255,0.06));}
  .pln-band.b60 .pln-band-head{background:linear-gradient(90deg, rgba(123,92,255,0.34), rgba(123,92,255,0.06));}
  .pln-band.b90 .pln-band-head{background:linear-gradient(90deg, rgba(209,75,224,0.30), rgba(209,75,224,0.06));}
  .pln-band-num{flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:14px; font-weight:800; color:#fff; border:2px solid;}
  .pln-band.b30 .pln-band-num{border-color:var(--blue-glow); background:#12224f;} .pln-band.b60 .pln-band-num{border-color:var(--purple-glow); background:#1d1a55;} .pln-band.b90 .pln-band-num{border-color:#d14be0; background:#2a1450;}
  .pln-band-titles{flex:1; min-width:0;}
  .pln-band-titles b{display:block; font-family:var(--font-display); font-size:15.5px; font-weight:700; color:var(--text-bright);}
  .pln-band-titles span{display:block; margin-top:2px; font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;}
  .pln-band.b30 .pln-band-titles span{color:var(--blue-glow);} .pln-band.b60 .pln-band-titles span{color:var(--purple-glow);} .pln-band.b90 .pln-band-titles span{color:#e08bf0;}
  .pln-band-count{font-size:12px; font-weight:700; color:var(--text-dim);}
  .pln-band-body{display:grid; gap:8px; padding:12px;}
  .pln-band-body .plan-band-empty{background:transparent;}
  .pln-ms{border:1px solid var(--border); border-radius:10px; background:var(--bg-panel);}
  .pln-ms:hover{border-color:var(--border-bright);}
  .pln-band.b30 .pln-ms{border-left:3px solid var(--blue-glow);} .pln-band.b60 .pln-ms{border-left:3px solid var(--purple-glow);} .pln-band.b90 .pln-ms{border-left:3px solid #d14be0;}
  .pln-ms-row{display:flex; align-items:flex-start; gap:10px; padding:9px 6px 9px 10px;}
  .pln-check{
    flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; border:2px solid var(--border-bright); background:transparent;
    color:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  }
  .pln-check svg{width:13px; height:13px;}
  .pln-check:hover{border-color:var(--good);}
  .pln-check.done{border-color:var(--good); background:var(--good); color:#0a0c1c;}
  .pln-check.in_progress{border-color:var(--blue-glow);} .pln-check.slipped{border-color:var(--warn);}
  .pln-ms-body{flex:1; min-width:0;}
  .pln-ms-text{margin:0; font-size:13px; line-height:1.4; font-weight:600; color:var(--text-bright); overflow-wrap:anywhere;}
  .pln-ms.done .pln-ms-text{color:var(--text-dim); text-decoration:line-through;}
  .pln-ms-meta{display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:5px; font-size:11.5px; color:var(--text-dim);}
  .pln-ms-meta .tpl-tile{width:18px; height:18px; border-radius:5px; font-size:7.5px;}
  .pln-ms-meta .pln-tool{display:inline-flex; align-items:center; gap:5px; color:var(--text);}
  .pln-ms-meta .qs-badge{margin:0;}
  .pln-ms .plan-card{margin:0 8px 8px; }
  .pln-ms .plan-row-3{grid-template-columns:1fr;}
  .pln-add{width:100%; justify-content:center;}
  /* role champions */
  .pln-roles{display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:12px;}
  .pln-role{min-width:0; padding:12px; border:1px solid var(--border); border-radius:13px; background:var(--bg-panel-2);}
  .pln-role-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .pln-role-head .tpl-item-ico{width:36px; height:36px;}
  .pln-role-head .tpl-item-ico svg{width:20px; height:20px;}
  .pln-role-head b{display:block; font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--text-bright); overflow-wrap:anywhere;}
  .pln-role-head span.pln-role-n{display:block; margin-top:1px; font-size:11.5px; color:var(--text-dim);}
  .pln-role input{
    width:100%; background:var(--bg-panel); border:1px solid var(--border-bright); border-radius:9px; color:var(--text-bright);
    padding:8px 10px; font-size:12.5px; font-family:var(--font-body);
  }
  .pln-role input:focus{outline:none; border-color:var(--blue-glow);}
  .pln-role input:disabled{opacity:.5;}
  .trk-top{display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:20px;}
  @media (min-width:1200px){ .trk-top{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1.12fr); align-items:start;} }
  .trk-card{display:flex; flex-direction:column; min-width:0;}
  .trk-ico{
    flex:none; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff;
    background:linear-gradient(135deg, rgba(47,125,255,0.55), rgba(123,92,255,0.55)); border:1px solid var(--border-bright); box-shadow:var(--glow-blue);
  }
  .trk-ico svg{width:22px; height:22px;}
  #trackScreen .tpl-btn svg{width:15px; height:15px;}
  .trk-wide{width:100%; justify-content:center; padding:12px 14px; font-size:14px;}
  .trk-count{margin:0 0 12px; font-size:13px; color:var(--text);}
  .trk-count:empty{display:none;}
  .trk-note{margin:10px 0 0; font-size:12px; line-height:1.5; color:var(--text-dim);}
  .trk-assist{margin-top:18px;}
  .trk-assist h3{display:flex; align-items:center; gap:8px; margin:0; font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-bright);}
  .trk-spark{display:inline-flex; color:var(--purple-glow);} .trk-spark svg{width:18px; height:18px;}
  .trk-assist textarea{
    width:100%; margin-top:10px; resize:vertical; background:var(--bg-panel-2); border:1px solid var(--border-bright); border-radius:10px;
    color:var(--text-bright); padding:10px 12px; font-size:13px; line-height:1.5; font-family:var(--font-body);
  }
  .trk-assist textarea:focus{outline:none; border-color:var(--blue-glow);}
  .trk-assist .assist-actions{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:4px;}
  /* scorecard card */
  .trk-score{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .trk-ring{position:relative; flex:none; width:124px; height:124px;}
  .trk-ring svg{width:100%; height:100%;}
  .trk-ring-num{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
  .trk-ring-num b{font-family:var(--font-display); font-size:30px; font-weight:800; line-height:1; color:var(--text-bright);}
  .trk-ring-num span{margin-top:3px; max-width:78px; font-size:10px; line-height:1.2; text-align:center; color:var(--text-dim);}
  .trk-stats{flex:1 1 170px; min-width:0; list-style:none; margin:0; padding:0; display:grid; gap:7px;}
  .trk-stats li{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:8px 11px; background:var(--bg-panel-2); border:1px solid var(--border); border-radius:10px; font-size:12.5px; color:var(--text);}
  .trk-stats b{font-family:var(--font-display); font-size:13.5px; color:var(--text-bright); text-align:right;}
  .trk-stats .trk-dot{flex:none; align-self:center; width:9px; height:9px; border-radius:50%; margin-right:8px; display:inline-block;}
  .trk-stats li > span{display:inline-flex; align-items:center;}
  .trk-how{margin:12px 0 0; font-size:11.5px; line-height:1.5; color:var(--text-dim);}
  .trk-chart-title{margin:16px 0 8px; font-size:12px; font-weight:600; color:var(--text-dim);}
  .trk-chart{display:flex; align-items:flex-end; gap:10px; height:118px; padding-top:18px; border-bottom:1px solid var(--border-bright);}
  .trk-bar{flex:1; min-width:0; max-width:54px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative;}
  .trk-bar i{display:block; width:100%; border-radius:5px 5px 0 0; background:linear-gradient(180deg, var(--blue-glow), var(--purple)); min-height:3px;}
  .trk-bar b{font-size:11px; font-weight:700; color:var(--text-bright); margin-bottom:3px;}
  .trk-chart-labels{display:flex; gap:10px; margin-top:6px;}
  .trk-chart-labels span{flex:1; min-width:0; max-width:54px; text-align:center; font-size:11px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .trk-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px;}
  .trk-actions .trk-wide{flex:1 1 100%;}
  .trk-actions .insight-assist-status{flex:1 1 100%; margin:0;}
  .trk-actions .insight-assist-status:empty{display:none;}
  .trk-hint{flex:1 1 100%; margin:0; font-size:12.5px; color:var(--text-dim);}
  .trk-sc-text{margin-bottom:20px !important;}
  .trk-sc-text .track-sc-text{margin-top:0;}
  /* usage by role */
  .trk-usage{width:100%; border-collapse:collapse;}
  .trk-usage th{padding:0 8px 8px; font-size:12px; font-weight:600; color:var(--text-dim); text-align:left; white-space:nowrap;}
  .trk-usage td{padding:10px 8px; border-top:1px solid var(--border); font-size:13px; color:var(--text); vertical-align:middle;}
  .trk-usage th:first-child, .trk-usage td:first-child{padding-left:2px;}
  .trk-usage th:last-child, .trk-usage td:last-child{text-align:right; padding-right:2px;}
  .trk-role{font-weight:600; color:var(--text-bright); overflow-wrap:anywhere;}
  .trk-role-tools{display:flex; flex-wrap:wrap; gap:4px; margin-top:5px;}
  .trk-role-tools .tpl-tile{width:22px; height:22px; border-radius:6px; font-size:8.5px;}
  .trk-level{font-weight:600; white-space:nowrap;}
  .trk-level.confident{color:var(--good);} .trk-level.regular{color:var(--blue-glow);} .trk-level.trying{color:var(--warn);} .trk-level.none{color:var(--danger);} .trk-level.blank{color:var(--text-faint); font-weight:500;}
  .trk-trend{display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center;}
  .trk-trend svg{width:18px; height:18px;}
  .trk-trend.up{color:var(--good);} .trk-trend.down{color:var(--danger);} .trk-trend.same{color:var(--text-dim);} .trk-trend.first{color:var(--text-faint);}
  .trk-status{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:8px; border:1px solid; font-size:11.5px; font-weight:700; white-space:nowrap;}
  .trk-status svg{width:12px; height:12px;}
  .trk-status.ontrack{color:var(--good); border-color:rgba(51,230,165,0.5); background:rgba(51,230,165,0.10);}
  .trk-status.good{color:var(--blue-glow); border-color:rgba(47,141,255,0.55); background:rgba(47,125,255,0.12);}
  .trk-status.help{color:var(--warn); border-color:rgba(255,184,77,0.55); background:rgba(255,184,77,0.10);}
  .trk-status.risk{color:var(--danger); border-color:rgba(255,79,109,0.55); background:rgba(255,79,109,0.10);}
  .trk-status.blank{color:var(--text-faint); border-color:var(--border); background:transparent; font-weight:600;}
  /* recent check-ins, notes, ask */
  .trk-bottom{display:grid; grid-template-columns:1fr; gap:20px;}
  @media (min-width:1200px){ .trk-bottom{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:start;} }
  .trk-side{display:grid; gap:20px; min-width:0;}
  .trk-viewall{padding:7px 12px; font-size:12.5px;}
  .trk-ci{border-top:1px solid var(--border);}
  .trk-ci:first-child{border-top:0;}
  .trk-ci-row{display:grid; grid-template-columns:auto minmax(0,0.9fr) minmax(0,2fr) auto auto; align-items:center; gap:12px; padding:11px 2px; font-size:12.5px; color:var(--text);}
  .trk-ci-date{font-weight:700; color:var(--text-bright); white-space:nowrap;}
  .trk-ci-roles{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .trk-ci-text{color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  @media (max-width:760px){ .trk-ci-row{grid-template-columns:auto minmax(0,1fr) auto auto;} .trk-ci-text{display:none;} }
  .trk-ci .track-card{margin:0 0 14px;}
  .trk-ci-done{display:flex; justify-content:flex-end; margin-top:10px;}
  .trk-private{display:flex; align-items:center; gap:7px;}
  .trk-private svg{width:14px; height:14px; flex:none;}
  .trk-asks{display:grid; gap:8px; margin-bottom:14px;}
  .trk-ask{
    display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; cursor:pointer;
    background:rgba(47,125,255,0.08); border:1px solid var(--border-bright); border-radius:10px; color:var(--text-bright);
    padding:9px 12px; font-size:12.5px; font-weight:600; font-family:var(--font-body); transition:border-color .15s, box-shadow .15s;
  }
  .trk-ask:hover{border-color:var(--blue-glow); box-shadow:var(--glow-blue);}
  .trk-ask svg{flex:none; width:15px; height:15px; color:var(--blue-glow);}
  .track-sc-text{margin-top:12px;}

  /* Templates: the starter-set editor reuses the Map's tables */
  .tpl-bar{align-items:center;}
  #templatesBody{margin:22px 0;}
  /* ---- Templates page look (docs: the Starter Templates design) ----
     Scoped to #templatesScreen: sans-serif everywhere on this page, no
     monospace or typewriter labels. */
  #templatesScreen .eyebrow{font-family:var(--font-body); font-weight:700; letter-spacing:3px; color:var(--blue-glow);}
  #templatesScreen .page-title{font-size:38px; margin-bottom:6px;}
  .tpl-hero{align-items:center; margin-bottom:0;}
  .tpl-tagline{margin:0 0 8px; font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--blue-glow);}
  #templatesScreen .page-sub{font-size:14px; color:var(--text); max-width:520px;}
  /* The industry tiles: a fanned row, the chosen one forward and lit */
  .tpl-tiles{flex:0 1 auto; display:flex; align-items:center; justify-content:flex-end; perspective:900px; padding:14px 8px 14px 20px;}
  .tpl-tile-pick{
    flex:none; width:92px; height:104px; margin-left:-12px; padding:10px 6px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    --tile:var(--blue-glow);
    border-radius:14px; border:1px solid color-mix(in srgb, var(--tile) 60%, transparent); color:var(--tile);
    background:linear-gradient(160deg, color-mix(in srgb, var(--tile) 30%, transparent), color-mix(in srgb, var(--tile) 10%, transparent) 60%, rgba(11,19,49,0.9));
    font-family:var(--font-body); transform:rotateY(-24deg) rotateZ(4deg); transition:transform .18s, box-shadow .18s, border-color .18s;
    box-shadow:-8px 10px 22px -10px rgba(0,0,0,0.7);
  }
  .tpl-tile-pick:hover{transform:rotateY(-12deg) rotateZ(2deg) translateY(-4px); border-color:var(--tile);}
  /* one color per tile, walking the palette from cyan to magenta */
  .tpl-tile-pick:nth-child(7n+1){--tile:#38d4ff;} .tpl-tile-pick:nth-child(7n+2){--tile:#3d9bff;} .tpl-tile-pick:nth-child(7n+3){--tile:#6f7dff;}
  .tpl-tile-pick:nth-child(7n+4){--tile:#9a6bff;} .tpl-tile-pick:nth-child(7n+5){--tile:#c060f0;} .tpl-tile-pick:nth-child(7n+6){--tile:#e052d8;}
  .tpl-tile-pick:nth-child(7n+7){--tile:#f0569e;}
  .tpl-tile-pick.active{
    transform:scale(1.14); z-index:2; color:#fff; border-color:var(--tile);
    background:linear-gradient(160deg, color-mix(in srgb, var(--tile) 85%, #0b1331), color-mix(in srgb, var(--tile) 40%, #1a1450));
    box-shadow:0 0 18px color-mix(in srgb, var(--tile) 55%, transparent), 0 14px 30px -12px color-mix(in srgb, var(--tile) 80%, transparent);
    margin-right:14px; margin-left:2px;
  }
  .tpl-tile-ico{width:30px; height:30px;}
  .tpl-tile-name{font-size:11.5px; font-weight:700; line-height:1.2; text-align:center; color:var(--text-bright); overflow-wrap:anywhere; max-height:3.6em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3;}
  @media (max-width:1100px){
    .tpl-tiles{flex:1 1 100%; justify-content:flex-start; flex-wrap:wrap; gap:10px; perspective:none; padding:14px 0 0;}
    .tpl-tile-pick, .tpl-tile-pick:hover, .tpl-tile-pick.active{transform:none; margin:0;}
  }
  /* The bar under the header: dropdown, the three counts, the "..." menu */
  .tpl-pickbar{
    position:relative; display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap; margin:0 0 20px; padding:16px 22px;
    background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2)); border:1px solid var(--border); border-radius:var(--radius);
  }
  .tpl-pickbar-label{font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-bright);}
  .tpl-select{
    flex:1 1 220px; min-width:0; max-width:440px; background:var(--bg-panel-2); border:1px solid var(--border-bright); color:var(--text-bright);
    padding:11px 14px; border-radius:10px; font-size:15px; font-weight:600; font-family:var(--font-body); cursor:pointer;
  }
  .tpl-stats{display:flex; gap:10px 30px; flex-wrap:wrap; margin-left:auto;}
  .tpl-stat{display:flex; align-items:center; gap:11px; color:var(--blue-glow);}
  .tpl-stat .tpl-ico{width:28px; height:28px;}
  .tpl-stat b{display:block; font-family:var(--font-display); font-size:19px; font-weight:800; line-height:1.1; color:var(--text-bright);}
  .tpl-stat span{font-size:12.5px; color:var(--text-dim);}
  .tpl-status{flex:1 1 100%; margin:0;}
  .tpl-status:empty{display:none;}
  .tpl-menu{position:relative;}
  .tpl-menu summary{
    list-style:none; cursor:pointer; width:42px; height:40px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border-bright); border-radius:10px; color:var(--text-bright); font-size:20px; font-weight:800; letter-spacing:1px;
  }
  .tpl-menu summary::-webkit-details-marker{display:none;}
  .tpl-menu summary:hover, .tpl-menu[open] summary{border-color:var(--blue-glow); box-shadow:var(--glow-blue);}
  .tpl-menu-list{
    position:absolute; right:0; top:calc(100% + 8px); z-index:20; min-width:250px; padding:6px;
    background:var(--bg-raised); border:1px solid var(--border-bright); border-radius:12px; box-shadow:0 18px 40px -12px rgba(0,0,0,0.8);
  }
  .tpl-menu-list button{
    display:block; width:100%; text-align:left; background:transparent; border:0; color:var(--text-bright);
    padding:10px 12px; border-radius:8px; font-size:13.5px; font-family:var(--font-body); cursor:pointer;
  }
  .tpl-menu-list button:hover{background:rgba(47,125,255,0.16);}
  /* Outlined button with an icon, and its gradient primary */
  .tpl-btn{
    flex:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    background:rgba(47,125,255,0.10); border:1px solid var(--border-bright); color:var(--text-bright);
    padding:9px 14px; border-radius:10px; font-size:13px; font-weight:600; font-family:var(--font-body);
    transition:border-color .15s, box-shadow .15s, background .15s;
  }
  .tpl-btn:hover{border-color:var(--blue-glow); box-shadow:var(--glow-blue); background:rgba(47,125,255,0.18);}
  .tpl-btn .tpl-ico{width:15px; height:15px;}
  .tpl-btn.primary{border:0; background:linear-gradient(135deg, var(--blue), var(--purple)); box-shadow:var(--glow-blue);}
  /* Numbered cards: Roles, Tools and Usage Map side by side on a wide screen */
  .tpl-three{display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:20px;}
  /* three columns: Roles, Tools, then a stack (Usage Map, description,
     Quick Actions) that fills the height the role and tool lists take */
  @media (min-width:1400px){
    .tpl-three{grid-template-columns:minmax(0,1.08fr) minmax(0,1.08fr) minmax(0,1.22fr); align-items:start;}
    /* four or more tools: the usage grid needs the room, so its column takes more of the row */
    .tpl-three:has(.tpl-matrix thead th:nth-child(5)){grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr);}
    .tpl-matrix:has(thead th:nth-child(5)) select.map-usage{font-size:11px; padding-left:0; padding-right:0;}
    /* the two narrower cards: the add button drops under the title instead of squeezing it */
    .tpl-three:has(.tpl-matrix thead th:nth-child(5)) > .tpl-card > .tpl-card-head{flex-wrap:wrap;}
    .tpl-three:has(.tpl-matrix thead th:nth-child(5)) > .tpl-card > .tpl-card-head .tpl-card-titles{flex:1 1 150px;}
    .tpl-three > .tpl-card, .tpl-three .tpl-col3 > .tpl-card{--card-py:18px; --card-px:16px;}
    .tpl-three .tpl-item{gap:11px; padding:12px 8px 12px 12px;}
    .tpl-three .tpl-item-ico{width:38px; height:38px;}
    .tpl-three .tpl-item-body b{font-size:14.5px;}
    .tpl-three .tpl-item-actions .tpl-icon-btn, .tpl-three .tpl-item-menu summary{width:28px; height:28px;}
    .tpl-three .tpl-card-head{gap:12px;}
    .tpl-three .tpl-card-head .tpl-btn{padding:8px 11px;}
  }
  .tpl-col3{display:grid; gap:20px; min-width:0; align-content:start;}
  .tpl-col3 .tpl-card{margin-bottom:0;}
  .tpl-col3 h2{margin:0 0 8px; font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--text-bright);}
  .tpl-col3 .tpl-card-titles h2{margin:0 0 3px; font-size:20px;}
  .tpl-types{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--border); font-size:12.5px; line-height:2; color:var(--text-dim);}
  .tpl-types .tpl-chip{margin:0 6px 0 0; vertical-align:middle;}
  .tpl-types span.tpl-type-line{display:block;}
  .tpl-card{
    min-width:0; background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2)); border:1px solid var(--border);
    border-radius:var(--radius); --card-py:20px; --card-px:22px; --hd:var(--blue-glow);
    padding:var(--card-py) var(--card-px); margin-bottom:20px;
  }
  .tpl-three .tpl-card{margin-bottom:0;}
  .tpl-card-head{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
  .tpl-badge{
    flex:none; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:15px; font-weight:800; color:#fff;
    background:linear-gradient(135deg, var(--blue), var(--purple)); box-shadow:var(--glow-blue);
  }
  .tpl-card-titles{flex:1; min-width:0;}
  .tpl-card-titles h2{margin:0 0 3px; font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--text-bright);}
  .tpl-card-titles p{margin:0; font-size:13px; line-height:1.4; color:var(--text-dim);}
  @media (max-width:560px){ .tpl-card-head{flex-wrap:wrap;} .tpl-badge{width:38px; height:38px; font-size:13px;} }
  /* Role and tool cards: icon tile, name, a line of detail, plain-text description, pencil and menu */
  .tpl-items{display:grid; gap:10px;}
  .tpl-item{
    display:flex; align-items:flex-start; gap:13px; padding:13px 14px;
    background:var(--bg-panel-2); border:1px solid var(--border); border-radius:13px;
  }
  .tpl-item:hover{border-color:var(--border-bright);}
  .tpl-item-ico{width:42px; height:42px; border-radius:11px; font-size:14px;}
  .tpl-item-ico .tpl-ico{width:22px; height:22px;}
  .tpl-item-body{flex:1; min-width:0;}
  .tpl-item-body b{display:block; font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-bright); overflow-wrap:anywhere;}
  .tpl-item-meta{display:block; margin-top:2px; font-size:12.5px; color:var(--text-dim);}
  .tpl-item-body p{margin:5px 0 0; font-size:13px; line-height:1.45; color:var(--text);}
  .tpl-chip{
    display:inline-block; margin-top:7px; padding:3px 10px; border-radius:7px; font-size:11.5px; font-weight:700;
    color:var(--blue-glow); border:1px solid var(--blue-glow); background:rgba(47,125,255,0.12);
  }
  .tpl-chip.agent{color:var(--purple-glow); border-color:var(--purple-glow); background:rgba(123,92,255,0.14);}
  .tpl-item-actions{flex:none; display:flex; align-items:center; gap:2px;}
  .tpl-icon-btn{
    width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:transparent; border:1px solid transparent; border-radius:8px; color:var(--text-dim);
  }
  .tpl-icon-btn:hover{color:var(--text-bright); border-color:var(--border-bright); background:rgba(47,125,255,0.12);}
  .tpl-icon-btn .tpl-ico{width:17px; height:17px;}
  .tpl-item-menu summary{width:32px; height:32px; border-color:transparent; font-size:17px; color:var(--text-dim);}
  .tpl-item-menu .tpl-menu-list{min-width:150px;}
  /* the same card, open for editing */
  .tpl-item.editing{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; border-color:var(--blue-glow); box-shadow:var(--glow-blue);}
  .tpl-edit-field{display:block; min-width:0; grid-column:1 / -1;}
  .tpl-edit-field:nth-child(2), .tpl-edit-field:nth-child(3){grid-column:auto;}
  .tpl-item.editing > .tpl-edit-field:nth-child(3):nth-last-child(2){grid-column:1 / -1;}
  .tpl-edit-field > span{display:block; margin-bottom:5px; font-size:12px; font-weight:600; color:var(--text-dim);}
  .tpl-edit-field input, .tpl-edit-field select{
    width:100%; background:var(--bg-panel); border:1px solid var(--border-bright); border-radius:8px;
    color:var(--text-bright); padding:8px 10px; font-size:13.5px; font-family:var(--font-body);
  }
  .tpl-edit-field input:focus, .tpl-edit-field select:focus{outline:none; border-color:var(--blue-glow);}
  .tpl-edit-actions{grid-column:1 / -1; display:flex; gap:8px;}
  /* Usage Map: a legend, tool tiles as column heads, filled pills for the levels */
  .tpl-legend{display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:flex-end; margin:-4px 0 12px; font-size:12.5px; color:var(--text-dim);}
  .tpl-legend span{display:inline-flex; align-items:center; gap:7px;}
  .tpl-dot{width:11px; height:11px; border-radius:50%; display:inline-block;}
  .tpl-dot.none{background:#3d4a78;} .tpl-dot.occasional{background:#6b74e0;} .tpl-dot.weekly{background:#2f8dff;} .tpl-dot.daily{background:#d14be0;}
  #templatesScreen .map-table thead th{font-family:var(--font-body); font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-dim);}
  .tpl-matrix thead th{text-align:center; vertical-align:bottom; white-space:normal;}
  .tpl-matrix thead th:first-child{text-align:left;}
  .tpl-matrix thead .tpl-tile{display:flex; margin:0 auto 6px; width:28px; height:28px; font-size:10.5px;}
  .tpl-matrix-tool{display:block; color:var(--text-bright); font-weight:700; line-height:1.2;}
  .tpl-matrix th[scope="row"]{white-space:normal; font-weight:600; font-size:12px; max-width:96px;}
  .tpl-matrix td{min-width:78px; padding:5px 3px;}
  .tpl-matrix th{padding-left:4px; padding-right:4px;}
  .tpl-three .map-matrix-scroll{scrollbar-width:thin; scrollbar-color:var(--border-bright) transparent;}
  .tpl-matrix select.map-usage{
    width:100%; text-align:center; text-align-last:center; font-weight:700; font-size:12px; padding:9px 2px; border-radius:9px; cursor:pointer; appearance:none;
    font-family:var(--font-body); box-shadow:none;
  }
  .tpl-matrix select.map-usage.none{background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text-dim);}
  .tpl-matrix select.map-usage.occasional{background:#232c6e; border:1px solid #6b74e0; color:#fff;}
  .tpl-matrix select.map-usage.weekly{background:linear-gradient(135deg, #1f6fe0, #2f8dff); border:1px solid #2f8dff; color:#fff;}
  .tpl-matrix select.map-usage.daily{background:linear-gradient(135deg, #7b3cf0, #b23ce0); border:1px solid #b23ce0; color:#fff; box-shadow:var(--glow-purple);}
  .tpl-matrix select.map-usage option{background:var(--bg-panel-2); color:var(--text-bright);}
  /* Bottom row: Template Description beside Quick Actions */
  .tpl-desc-card{display:flex; align-items:flex-start; gap:15px;}
  .tpl-desc-body{flex:1; min-width:0;}
  /* reads as plain text until it is clicked */
  #templatesScreen .tpl-desc{background:transparent; border-color:transparent; padding:6px 8px; margin:0 0 0 -8px; width:calc(100% + 8px); color:var(--text); font-size:13.5px;}
  #templatesScreen .tpl-desc:hover{border-color:var(--border);}
  #templatesScreen .tpl-desc:focus{border-color:var(--border-bright); background:var(--bg-panel-2); color:var(--text-bright);}
  #templatesScreen .tpl-desc-name{font-weight:700; color:var(--text-bright); font-size:14.5px; margin-bottom:2px;}
  .tpl-qa-buttons{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
  .tpl-qa-note{margin:12px 0 0; font-size:12px; line-height:1.45; color:var(--text-dim);}
  .tpl-menu-up .tpl-menu-list{top:auto; bottom:calc(100% + 8px);}
  .tpl-btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none;}
  .tpl-desc{
    width:100%; resize:vertical; background:var(--bg-panel-2); border:1px solid var(--border); border-radius:9px;
    color:var(--text-bright); padding:9px 12px; font-size:13px; line-height:1.45; font-family:var(--font-body);
  }
  .tpl-desc:focus{outline:none; border-color:var(--border-bright);}
  /* Meeting guides: Kickoff / Check-in tabs over a question table */
  /* Meeting guides: pill tabs, one card per question, a colored "feeds" chip */
  .tpl-guides-card{margin-top:20px;}
  .tpl-guide-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
  .tpl-guide-actions{display:flex; flex-wrap:wrap; gap:10px;}
  .tpl-tabs{display:inline-flex; gap:8px; flex-wrap:wrap;}
  .tpl-tab{
    background:rgba(47,125,255,0.08); border:1px solid var(--border-bright); border-radius:999px; color:var(--text);
    padding:8px 18px; font-size:13px; font-weight:600; font-family:var(--font-body); cursor:pointer;
    transition:border-color .15s, box-shadow .15s;
  }
  .tpl-tab:hover{border-color:var(--blue-glow);}
  .tpl-tab.active{border-color:transparent; background:linear-gradient(135deg, var(--blue), var(--purple)); color:#fff; box-shadow:var(--glow-blue);}
  .tpl-tab-n{display:inline-block; min-width:20px; margin-left:6px; padding:1px 6px; border-radius:999px; background:rgba(255,255,255,0.10); color:inherit; font-size:11.5px; font-weight:700; text-align:center;}
  .tpl-tab.active .tpl-tab-n{background:rgba(255,255,255,0.22);}
  .tpl-qs{display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:6px;}
  @media (min-width:1100px){ .tpl-qs{grid-template-columns:1fr 1fr;} }
  .tpl-q-badge{
    flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:12.5px; font-weight:800; color:#fff;
    background:linear-gradient(135deg, var(--blue), var(--purple));
  }
  .tpl-item-body .tpl-q-text{margin:3px 0 9px; font-size:13.5px; line-height:1.5; color:var(--text-bright);}
  .tpl-feed{
    display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:999px;
    font-size:11.5px; font-weight:600; border:1px solid; line-height:1.5;
  }
  .tpl-feed .tpl-ico{width:13px; height:13px;}
  .tpl-feed.map{color:var(--blue-glow); border-color:rgba(47,141,255,0.55); background:rgba(47,125,255,0.14);}
  .tpl-feed.track{color:#e08bf0; border-color:rgba(209,75,224,0.55); background:rgba(209,75,224,0.13);}
  .tpl-q.editing .tpl-edit-field{grid-column:1 / -1;}
  .tpl-edit-field textarea{
    width:100%; resize:vertical; background:var(--bg-panel); border:1px solid var(--border-bright); border-radius:9px;
    color:var(--text-bright); padding:9px 11px; font-size:13px; line-height:1.45; font-family:var(--font-body);
  }
  .tpl-edit-field textarea:focus{outline:none; border-color:var(--blue-glow);}
  /* A tool's initials on a colored tile (no company logos) */
  .tpl-toolname{display:flex; align-items:center; gap:9px;}
  .tpl-toolname input{flex:1; min-width:0;}
  .tpl-tile{
    flex:none; width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:11.5px; font-weight:800; letter-spacing:.3px; color:#fff;
  }
  /* the tool's logo sits over its initials once it has loaded (js/core.js toolIconHtml) */
  .tpl-tile{position:relative; overflow:hidden;}
  .tool-logo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:14%; background:#fff; border-radius:inherit;}
  .map-th-tool{display:inline-flex; align-items:center; gap:7px;}
  .map-th-tool .tpl-tile{width:22px; height:22px; border-radius:6px; font-size:9px;}
  .qs-tool-ico{width:36px; height:36px; border-radius:10px; font-size:12.5px; margin-right:12px;}
  .tpl-tile-c0{background:#2563c9;} .tpl-tile-c1{background:#6d4fd6;} .tpl-tile-c2{background:#0f7f96;}
  .tpl-tile-c3{background:#a8479f;} .tpl-tile-c4{background:#1f8a5f;} .tpl-tile-c5{background:#b3541e;}

  /* Enable: one card per Quick Start guide */
  .qs-card{
    background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
    border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px 14px; margin-bottom:14px;
    transition:border-color .15s;
  }
  .qs-card.qs-empty{padding-bottom:12px;}
  .qs-card.qs-gone{opacity:.7;}
  .qs-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;}
  .qs-title{margin:0; font-family:var(--font-display); font-size:15.5px; font-weight:700; color:var(--text-bright);}
  .qs-sub{margin:3px 0 0; font-size:12.5px; color:var(--text); line-height:1.4;}
  .qs-badges{display:flex; gap:6px; flex-wrap:wrap; flex:none;}
  .qs-badge{
    font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:1.2px;
    padding:4px 9px; border-radius:99px; border:1px solid var(--border); color:var(--text); background:var(--bg-panel-2);
  }
  .qs-badge.usage.daily{border-color:var(--purple-glow); color:#f4f6ff; background:rgba(123,92,255,0.22); box-shadow:var(--glow-purple);}
  .qs-badge.usage.weekly{border-color:var(--blue-glow); color:#f4f6ff; background:rgba(47,125,255,0.22);}
  .qs-badge.status.done{border-color:var(--good); color:var(--good);}
  .qs-notice{
    margin:12px 0 0; padding:8px 11px; border-radius:8px; font-size:12px; line-height:1.45;
    color:var(--text); background:rgba(255,190,80,0.08); border:1px solid rgba(255,190,80,0.35);
  }
  .qs-text{
    display:block; width:100%; margin-top:12px; min-height:120px; resize:vertical;
    background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text-bright);
    padding:12px 14px; border-radius:9px; font-size:13px; line-height:1.55; font-family:var(--font-body);
  }
  .qs-text:focus{outline:none; border-color:var(--border-bright);}
  .qs-champion{margin:10px 0 0; font-size:12px; color:var(--text);}
  .qs-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; align-items:center;}
  .qs-actions:empty{display:none;}
  .qs-actions .qs-status{margin-left:0;}
  .qs-write{border-color:var(--purple-glow); color:var(--text-bright);}
  .cb-import{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0 0;}
  .cb-import-line{font-size:12px; color:var(--text); line-height:1.45;}
  .cb-import-source{font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}
  .cb-import-source:empty, .cb-import-status:empty{display:none;}
  .cb-import-status{margin-left:0; flex-basis:100%;}
  .assist-panel{
    border-color:var(--border-bright); box-shadow:var(--glow-purple);
    background:linear-gradient(160deg, rgba(47,125,255,0.10), rgba(123,92,255,0.08)), linear-gradient(var(--bg-panel-2), var(--bg-panel-2));
  }
  .assist-panel textarea{
    width:100%; background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text-bright);
    padding:10px 12px; border-radius:8px; font-size:13px; font-family:var(--font-body); line-height:1.5; resize:vertical;
  }
  .assist-panel textarea:focus{outline:none; border-color:var(--border-bright);}
  .assist-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px;}
  .assist-group-title{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:1.4px; color:var(--text); margin:14px 0 0;}
  .assist-rationale{color:var(--text-faint);}
  .map-diagram{min-height:48px;}
  .map-diagram svg{display:block; max-width:100%; height:auto; margin:0 auto;}

  /* Shared, unscored client-context block (sits under the client-identity
     row). Same card shell as .cb-card so the whole top section reads as one
     set of components, and the same .fld-head label pattern inside. */
  .client-context{
    border:1px solid var(--border); border-radius:14px;
    background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
    margin:0 0 20px; padding:0 18px; transition:border-color .15s;
  }
  .client-context > summary{
    list-style:none; cursor:pointer; padding:16px 0;
    display:flex; align-items:center; gap:10px;
  }
  .client-context > summary::-webkit-details-marker{display:none;}
  .client-context > summary:hover .fld-label{color:var(--blue-glow);}
  .cc-caret{margin-left:auto; flex:none; color:var(--text-dim); font-size:14px; line-height:1;}
  .cc-caret::before{content:"\25B8";}
  .client-context[open] > summary .cc-caret::before{content:"\25BE";}
  .client-context .cc-hint{font-size:11.5px; color:var(--text); line-height:1.45; margin:0 0 14px;}
  .client-context .cc-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:16px 18px; padding-bottom:18px;
  }
  .client-context .cc-field{display:flex; flex-direction:column; gap:8px; min-width:0;}
  .client-context .cc-field > select,
  .client-context .cc-field > input[type="text"]{margin-top:auto;}
  .client-context .cc-field.cc-notes{grid-column:1 / -1;}
  .client-context .cc-field:has(> #ctxCurrentSoftware){grid-column:1 / -1;}
  /* Per-field glyph, one size down from the .icon-badge on the card headers
     so it reads as a field marker rather than a second heading. */
  .cc-field-icon{
    width:22px; height:22px; border-radius:7px; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--purple) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--purple-glow) 32%, transparent);
    color:var(--purple-glow);
  }
  .cc-field-icon svg{width:13px; height:13px; display:block;}
  .client-context label{display:block; min-width:0; cursor:pointer;}
  /* Display-only. 600 is the cap client_context.py already applies
     server-side (notes[:600]); nothing here enforces or truncates
     anything, it just stops that cap being invisible while typing. */
  .cc-counter{
    font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
    text-align:right; margin-top:-2px;
  }
  .cc-counter.over{color:var(--warn);}
  .client-context select, .client-context textarea, .client-context input[type="text"]{
    background:var(--bg-panel); border:1px solid var(--border); color:var(--text);
    padding:8px 10px; border-radius:8px; font-size:13px; font-family:var(--font-body); width:100%;
  }
  .client-context select{appearance:none; cursor:pointer;}
  .client-context textarea{resize:vertical; line-height:1.5;}
  .client-context select:focus, .client-context textarea:focus, .client-context input[type="text"]:focus{outline:none; border-color:var(--border-bright);}
  .cb-logo-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .cb-logo-row input[type="file"]{
    font-family:var(--font-mono); font-size:11px; color:var(--text); max-width:260px;
  }
  /* restyle the native "Choose File" button to match the active tab / primary button:
     blue->purple gradient fill, near-black text, no border */
  .cb-logo-row input[type="file"]::file-selector-button{
    background:linear-gradient(135deg, var(--blue), var(--purple));
    border:none; color:#f4f6ff;
    font-family:var(--font-body); font-size:12px; font-weight:600;
    padding:7px 14px; border-radius:9px; cursor:pointer; margin-right:10px;
    transition:filter .15s;
  }
  .cb-logo-row input[type="file"]::file-selector-button:hover{filter:brightness(1.07);}
  .client-bar #logoPreview{display:inline-flex; align-items:center; gap:10px;}
  .client-bar #logoPreview:empty{display:none;}
  #logoPreview img{height:34px; width:auto; max-width:120px; object-fit:contain; border-radius:5px; display:block;}
  .btn-sm{
    background:var(--bg-panel-2); border:1px solid var(--border-bright); color:var(--text);
    font-family:var(--font-mono); font-size:11px; padding:7px 12px; border-radius:9px; cursor:pointer;
    transition:border-color .15s, box-shadow .15s, background .15s;
  }
  .btn-sm:hover{border-color:var(--blue-glow); box-shadow:var(--glow-blue); background:rgba(47,125,255,0.10);}
  .btn-sm:disabled{opacity:.45; cursor:not-allowed; box-shadow:none;}

  .panel{
    background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
    border:1px solid var(--border); border-radius:var(--radius);
    padding:24px; margin-bottom:20px;
    transition:border-color .15s, box-shadow .15s;
  }
  .panel:hover, .qs-card:hover, .cb-card:hover, .client-context:hover{border-color:var(--border-bright);}
  .eyebrow{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:2.5px; color:var(--purple-glow); margin:0 0 6px;}
  h2{font-family:var(--font-display); font-size:17px; font-weight:600; margin:0 0 16px;}  .field-label{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text); margin-bottom:6px; display:block;}
  .btn{
    background:linear-gradient(135deg, var(--blue), var(--purple));
    border:none; color:#f4f6ff; font-weight:700; font-size:14px; font-family:var(--font-body);
    padding:13px 22px; border-radius:11px; cursor:pointer;
    box-shadow:var(--glow-blue);
  }
  .btn:disabled{opacity:0.35; cursor:not-allowed; box-shadow:none;}
  /* secondary action buttons (Read aloud) — visible purple outline + faint
     fill so they read as real buttons on the dark panels, while the
     gradient .btn stays the single primary. */
  .btn.ghost{
    background:rgba(155,92,255,0.12); border:1px solid var(--purple-glow);
    color:var(--text); box-shadow:none;
  }
  .btn.ghost:hover{background:rgba(155,92,255,0.2); border-color:#cdb0ff;}  .edited-note{font-size:11px; color:var(--text-faint); margin-top:6px;}
  .roadmap-note{
    font-size:12px; color:var(--text); background:var(--bg-panel-2);
    border:1px solid var(--border); border-radius:10px; padding:10px 13px; margin-top:16px;
  }

  /* --- Left sidebar navigation shell -------------------------------------
     Replaces the old horizontal .tabs bar. The nav items keep the exact
     ids (tabMap/tabDashboard/...)
     and onclick="switchTab(...)" calls switchTab() already used,
     so switchTab()/TAB_SCREENS/TAB_BUTTONS/LOCKED_TABS need zero JS changes,
     they toggle .hidden/.active purely by element id regardless of where in
     the DOM those ids live. */
  .app-shell{display:flex; align-items:stretch; min-height:100vh;}
  /* .sidebar (outer) carries no height of its own: align-items:stretch on
     .app-shell makes it match .content-col's actual rendered height, so
     its background/border-right runs the full length of the page even
     when a tile grid (Readiness/Implementation/Tool Library/Templates)
     opens up content taller than one viewport, instead of stopping at
     100vh and leaving a plain, un-sidebar-colored gap below it. The nav
     items themselves stay pinned while scrolling via .sidebar-sticky, an
     inner wrapper capped at 100vh, so the "stick to the top" UX is
     unchanged, only the background's total height is. */
  .sidebar{
    width:272px; flex:none;
    background:var(--bg-panel); border-right:1px solid var(--border);
  }
  .sidebar-sticky{
    display:flex; flex-direction:column; gap:4px;
    padding:20px 14px; position:sticky; top:0; max-height:100vh; overflow-y:auto;
  }
  .sidebar-brand{padding:4px 8px 18px;}
  /* the full lockup (icon + wordmark + tagline) is sized for the old
     header, which had the whole page width to work with; scale it to fit
     the sidebar's actual content width instead of clipping. */
  .sidebar-brand .brand-logo{height:auto; width:auto; max-width:100%;}
  /* The band the sticky top bar aligns itself to, so its height has to be
     a constant rather than a consequence of the artwork.
     It was the latter: the logo above is width-constrained (max-width:100%
     with height:auto), and .sidebar-sticky's overflow-y:auto takes ~15px
     of that width away whenever the sidebar is tall enough to scroll. The
     logo scaled down with it, the band lost ~3px, and the bar's bottom
     edge no longer met the band's.

     min-height, not height: the logo can only ever shrink here, never
     grow past its natural 44px, so a floor is enough, and a fixed height
     would clip instead if the lockup art were ever swapped for a taller
     aspect. Padding keeps the logo exactly where it was, any slack falls
     below it. Derived from --topbar-h minus .sidebar-sticky's 20px
     padding-top so the two can never drift apart. >=901px only: below
     that the sidebar stacks and there is no corner to align to. */
  @media (min-width:901px){
    .sidebar-brand{min-height:calc(var(--topbar-h) - 20px);}
  }
  .sidebar-group{display:flex; flex-direction:column; gap:2px; margin-bottom:18px;}
  .sidebar-group-label{
    font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
    letter-spacing:1.8px; color:var(--blue-glow); padding:6px 10px; font-weight:600;
  }
  .sidebar-group-top{margin-bottom:12px;}
  /* flex-basis:0% (not auto) so this item's width comes purely from
     flex-grow filling the row, never from its own content's preferred
     size. With flex-basis:auto a descendant CSS grid using auto-fill
     (the new Tool Library tile grid, 121 tiles across 45 sections) can
     contribute a huge max-content size (all tiles laid out in one row)
     toward this flex item's intrinsic sizing, forcing it, and the whole
     page, wider than the viewport at narrow widths even though every
     visible box measures fine. min-width:0 alone did not stop this. */
  .content-col{
    flex:1 1 0%; min-width:0; --col-max:820px; max-width:var(--col-max);
    margin:0 auto; padding:24px 18px 60px;
  }

  .nav-item{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    background:transparent; border:1px solid transparent; color:var(--text);
    font-family:var(--font-body); font-size:13.5px; font-weight:600;
    padding:10px 12px; border-radius:12px; cursor:pointer; text-decoration:none; box-sizing:border-box;
    transition:background .15s, border-color .15s;
  }
  .nav-ico{width:18px; height:18px; flex:none; color:var(--blue-glow);}
  .nav-item:hover{background:rgba(47,125,255,0.10); border-color:var(--border);}
  .nav-item.active{
    background:linear-gradient(135deg, var(--blue), var(--purple)); color:#f4f6ff; border-color:transparent;
    box-shadow:var(--glow-blue);
  }
  .nav-item.active .nav-ico{color:#f4f6ff;}
  /* Steps not built yet: listed so the path reads as one, not clickable. */
  .nav-item.nav-soon{color:var(--text-faint); cursor:default;}
  .nav-item.nav-soon .nav-ico{color:var(--text-faint);}
  .nav-item.nav-soon:hover{background:transparent; border-color:transparent;}
  .nav-soon-tag{
    margin-left:auto; font-family:var(--font-mono); font-size:9px; text-transform:uppercase;
    letter-spacing:1px; color:var(--text-faint); border:1px solid var(--border); border-radius:99px; padding:2px 7px;
  }
  /* The operator's block at the bottom of the sidebar (text only). */
  .sidebar-curator{
    display:flex; justify-content:center; padding:16px 12px 10px; margin:0 0 6px;
    border-top:1px solid var(--border); text-decoration:none;
  }
  .sidebar-curator-logo{width:150px; max-width:100%; height:auto; display:block; filter:drop-shadow(0 0 14px rgba(47,125,255,0.35));}
  .sidebar-spacer{flex:1 1 auto;}

  /* Live trial-status card + support links + footer tag, filling what was
     previously blank space at the bottom of the sidebar. Uses the app's
     existing brand gradient (same pairing as .nav-item.active) at a
     tinted, transparent strength like the Implementation Scope tier
     cards, not a flat fill, verified against real rendered pixels rather
     than assumed safe from that other component's numbers (different
     colors composited over a different backdrop each count as a fresh
     check under this project's AAA rule). */
  .sidebar-trial-card{
    margin:0 0 16px; padding:14px 14px 16px; border-radius:14px;
    background:linear-gradient(160deg, rgba(91,127,255,0.28), rgba(155,92,255,0.18));
    border:1px solid rgba(140,155,255,0.4);
  }
  .sidebar-trial-eyebrow{
    font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase;
    letter-spacing:1.2px; color:var(--text); font-weight:700; margin-bottom:4px;
  }
  .sidebar-trial-days{font-size:15px; font-weight:700; color:var(--text); margin-bottom:10px;}
  .sidebar-trial-features{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px;}
  .sidebar-trial-features li{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text);}
  .sidebar-trial-check{color:var(--good); font-weight:700; flex:none;}
  .sidebar-trial-btn{width:100%; padding:9px 12px; font-size:12.5px; border-radius:9px;}  .sidebar-footer-tag{
    padding:0 10px 4px; font-size:10.5px; color:var(--text-faint); line-height:1.6;
  }

  @media (max-width:900px){
    :root{--topbar-h:56px;}
    .app-shell{flex-direction:column;}
    /* Explicit width, not reliance on cross-axis stretch: a descendant
       CSS grid using auto-fill (the Tool Library tile grid) can still
       push this item's stretch-computed size wider than the viewport
       through its max-content contribution, the same class of overflow
       flex-basis:0% fixes on the main axis but doesn't touch here since
       width is the CROSS axis once .app-shell is column-direction. */
    .content-col{width:100%; max-width:100%;}
    .sidebar{width:100%; border-right:none; border-bottom:1px solid var(--border);}
    .sidebar-sticky{
      position:static; max-height:none; overflow:visible; flex-direction:row; flex-wrap:wrap;
      align-items:center;
    }
    .sidebar-brand{flex:1 1 100%; padding-bottom:8px;}
    .sidebar-group{flex-direction:row; flex-wrap:wrap; margin-bottom:0; gap:6px;}
    .sidebar-group-label{display:none;}
    /* collapsed to a horizontal wrapped pill row, same reflow convention
       already used by .header-actions/.header-cluster, rather than a tall
       vertical stack */
    .nav-item{width:auto; border:1px solid var(--border);}
    .sidebar-spacer,
  .sidebar-trial-card,
  .sidebar-curator,
  .sidebar-footer-tag{display:none;}
    .nav-item.nav-soon{display:none;}
  }
  @media (max-width:560px){
    .sidebar-sticky{padding:10px 10px 6px;}
    .nav-item{font-size:12px; padding:8px 10px;}
  }

  /* --- Phone navigation: one compact bar -------------------------------
     Below 900px the sidebar became a wrapped block of pills that filled the
     first screen. It is now a single bar: the logo stays pinned at the
     left and the menu items scroll sideways beside it. The right edge
     fades to show there is more, each item is a 44px target, and a small
     script keeps the current section's item in view. */
  @media (max-width:900px){
    .sidebar-sticky{
      flex-wrap:nowrap; gap:6px; align-items:center; overflow-x:auto; overflow-y:hidden;
      padding:8px 30px 8px 10px; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
      -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
      mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    .sidebar-sticky::-webkit-scrollbar{display:none;}
    .sidebar-brand{flex:none; position:sticky; left:0; z-index:2; padding:0 12px 0 0; background:var(--bg-panel);}
    .sidebar-brand .brand-logo{height:30px; width:auto; max-width:none; display:block;}
    .sidebar-group{flex:none; flex-wrap:nowrap; gap:6px;}
    .nav-item{flex:none; white-space:nowrap; min-height:44px; padding:10px 14px; font-size:13px;}
  }

  /* --- Phone header: two rows instead of four -------------------------
     The status and account controls stay on top; Save, Open and New
     Session become one scrolling row beneath them. Controls are 40px tall. */
  @media (max-width:640px){
    .header-actions .header-session-actions{
      order:9; flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    }
    .header-actions .header-session-actions::-webkit-scrollbar{display:none;}
    .header-actions .header-session-actions{padding-right:26px; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);}
    .header-actions .header-session-actions > *{flex:none; white-space:nowrap;}
    .header-actions .btn, .header-actions .lang-dropdown-btn, .header-actions .header-client-btn{min-height:40px;}
    .account-avatar-btn{width:40px; height:40px;}
    /* the client name gives way, so the account button stays on the first row */
    .header-client{flex:1 1 0; min-width:0; flex-wrap:nowrap;}
    .header-client .client-menu{min-width:0;}
    .header-client-btn{max-width:100%;}
    .lang-dropdown-btn .lang-caret{display:none;}
  }

  /* --- Assess frame + shared page header + stepper -----------------------
     ONE markup block serving all three Assess tabs, not three copies of it:
     which title/subtitle shows, and which step glows, is pure CSS via
     :has(), keyed off the SAME .active class switchTab() already toggles on
     #tabMap, zero JS added. A
     style change here therefore lands on all three pages at once. */

  /* Visual frame ONLY. Deliberately has no height and no overflow of its
     own: the page keeps scrolling as one page, this must never become a
     nested scroll region. */
  .assess-frame{
    background:transparent; border:none; border-radius:0;
    padding:0 0 28px; margin:0 0 22px;
  }
  @media (max-width:560px){ .assess-frame{padding:16px 14px 20px;} }

  .page-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:14px 24px; flex-wrap:wrap; margin:0 0 22px;
  }
  .page-head-titles{flex:1 1 320px; min-width:0;}
  .page-title{
    font-family:var(--font-display); font-size:30px; font-weight:800;
    line-height:1.18; letter-spacing:-0.4px; color:var(--text); margin:0 0 7px;
  }
  @media (max-width:560px){ .page-title{font-size:23px;} }
  .page-title-grad{
    background:linear-gradient(115deg, var(--blue-glow), var(--purple-glow));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .page-sub{font-size:13px; line-height:1.5; color:var(--text-dim); margin:0;}
  /* Decorative flourish, identical on all three pages. */
  .page-script{
    flex:0 1 auto; align-self:center; white-space:nowrap;
    font-family:var(--font-script); font-size:28px; font-weight:500; line-height:1.1;
    background:linear-gradient(115deg, var(--blue-glow), var(--purple-glow));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  @media (max-width:640px){ .page-script{display:none;} }
  /* Only the active page's title/subtitle renders. */
  .page-head [data-page]{display:none;}
  .app-shell:has(#tabMap.active) .page-head [data-page="map"]{display:block;}
  .app-shell:has(#tabEnable.active) .page-head [data-page="enable"]{display:block;}
  .app-shell:has(#tabPlan.active) .page-head [data-page="plan"]{display:block;}
  .app-shell:has(#tabTrack.active) .page-head [data-page="track"]{display:block;}
  /* The client section (card, import row, Background) belongs to Map. */
  .app-shell:has(#tabEnable.active, #tabPlan.active, #tabTrack.active) .client-head,
  .app-shell:has(#tabEnable.active, #tabPlan.active, #tabTrack.active) .client-bar,
  .app-shell:has(#tabEnable.active, #tabPlan.active, #tabTrack.active) .cb-import,
  .app-shell:has(#tabEnable.active, #tabPlan.active, #tabTrack.active) #clientContext{display:none;}

  .step-progress{display:flex; align-items:flex-start; gap:0; margin:0 0 22px;}
  .step-dot{
    display:flex; flex-direction:column; align-items:center; gap:9px; flex:none;
    width:128px; text-align:center; font-size:11.5px; font-weight:600;
    line-height:1.3; color:var(--text-faint);
  }
  .step-num{
    display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
    border-radius:50%; border:1.5px solid var(--border-bright);
    background:radial-gradient(circle at 30% 30%, rgba(56,212,255,0.18), var(--bg-panel-2));
    font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text-dim);
    flex:none; transition:box-shadow .18s, border-color .18s, color .18s;
  }
  .step-progress{
    padding:14px 16px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);
  }
  /* the line before the active step glows: that part of the path is done */
  .app-shell:has(#tabEnable.active, #tabPlan.active, #tabTrack.active) .step-dot[data-step="map"] .step-num,
  .app-shell:has(#tabPlan.active, #tabTrack.active) .step-dot[data-step="enable"] .step-num,
  .app-shell:has(#tabTrack.active) .step-dot[data-step="plan"] .step-num{border-color:var(--blue-glow); color:var(--text);}
  .app-shell:has(#tabEnable.active, #tabPlan.active, #tabTrack.active) .step-dot[data-step="map"] + .step-line,
  .app-shell:has(#tabPlan.active, #tabTrack.active) .step-dot[data-step="enable"] + .step-line,
  .app-shell:has(#tabTrack.active) .step-dot[data-step="plan"] + .step-line{background:linear-gradient(90deg, var(--blue), var(--purple));}
  /* Connector: muted by default, glowing once its step has been passed. */
  .step-line{
    flex:1 1 auto; min-width:16px; height:2px; margin-top:21px; border-radius:2px;
    background:var(--border-bright);
  }
  @media (max-width:560px){
    .step-dot{width:86px; font-size:10.5px;}
    .step-num{width:32px; height:32px; font-size:13px;}
  }

  .app-shell:has(#tabEnable.active) .step-dot[data-step="enable"]{color:var(--text);}
  .app-shell:has(#tabPlan.active) .step-dot[data-step="plan"]{color:var(--text);}
  .app-shell:has(#tabTrack.active) .step-dot[data-step="track"]{color:var(--text);}
  .app-shell:has(#tabMap.active) .step-dot[data-step="map"]{color:var(--text);}
  .app-shell:has(#tabEnable.active) .step-dot[data-step="enable"] .step-num,
  .app-shell:has(#tabPlan.active) .step-dot[data-step="plan"] .step-num,
  .app-shell:has(#tabTrack.active) .step-dot[data-step="track"] .step-num,
  .app-shell:has(#tabMap.active) .step-dot[data-step="map"] .step-num{
    background:linear-gradient(135deg, var(--blue), var(--purple));
    border-color:transparent; color:var(--bg);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent),
               0 0 22px color-mix(in srgb, var(--purple) 70%, transparent);
  }
  /* The client-identity block (business name, industry, consultant logo,
     client context) edits ONE active client's in-progress session, so it
     only belongs on the three Assess tabs. Dashboard/Tools/Templates/
     Clients are for browsing across all clients or reference material,
     not editing one client's session, showing it there implied it
     applied to whatever was being browsed, which it never did. */
  .app-shell:has(#tabHome.active, #tabDashboard.active, #tabTemplates.active, #tabAdmin.active) .assess-frame{
    display:none;
  }  .opt-row{display:flex; align-items:flex-start; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:12.5px; color:var(--text); line-height:1.4;}
  .opt-row:hover{background:var(--bg-raised);}
  .opt-row input{margin-top:3px; flex:none;}
  /* --- Implementation Scope tab --- */
  .impl-subtext{color:var(--text); font-size:13px; margin:0 0 18px;}  /* shared "framing questions + one notes field" box — the Implementation Scope
     opening section and the AI Opportunity Assessment intake section */
  .intake-box{border:1px solid var(--border); border-radius:12px; background:var(--bg-panel-2); padding:16px; margin-bottom:16px;}
  .intake-box .field-label{margin-bottom:8px;}
  /* Insight Assist: a collapsible co-pilot panel, off by default, never
     shown at all unless USER.features.insight_assist (see applyTierUI()).
     Blue-to-purple brand gradient (the same pairing as .btn/.nav-item.active),
     not the amber "warn" tone used for divergence notices elsewhere, since
     this isn't a warning, it's an optional AI tool the consultant opts
     into, and it needs to read as an AI feature at a glance rather than a
     plain collapsed section, collapsed or open alike (one rule, no
     .open-specific override, so both states get the same treatment).
     The gradient border uses the standard two-background-layer trick
     (an opaque padding-box layer for the panel's own fill, a border-box
     layer for the gradient line) rather than a plain solid border, so the
     brand colors actually appear as a border, not just a tint. */
  .insight-assist-panel{
    position:relative; border:1px solid transparent; border-radius:12px;
    background-image:
      linear-gradient(160deg, rgba(91,127,255,0.14), rgba(155,92,255,0.12)),
      linear-gradient(var(--bg-panel-2), var(--bg-panel-2)),
      linear-gradient(135deg, var(--blue), var(--purple));
    background-origin: padding-box, padding-box, border-box;
    background-clip: padding-box, padding-box, border-box;
    box-shadow:0 0 22px -12px rgba(91,127,255,0.5), 0 0 30px -14px rgba(155,92,255,0.4);
    margin-bottom:16px; overflow:hidden;
  }
  .insight-assist-header{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 16px; cursor:pointer;
  }
  .insight-assist-header:hover{background:rgba(155,92,255,0.08);}
  .insight-assist-title{font-weight:600; font-size:13.5px; color:var(--text); display:flex; align-items:center; gap:8px; min-width:0;}
  .ia-title-stack{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .ia-title-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;}
  .ia-title-name{font-weight:600;}
  /* The scope pill is what actually tells the two panels apart at a
     glance. Mono/uppercase so it reads as a label rather than as more of
     the title, and it takes the panel's own accent, so colour and word
     say the same thing. */
  .ia-scope{
    font-family:var(--font-mono); font-size:9px; letter-spacing:.7px; text-transform:uppercase;
    padding:2px 8px; border-radius:99px; white-space:nowrap; font-weight:700;
    border:1px solid color-mix(in srgb, var(--purple) 55%, transparent);
    background:color-mix(in srgb, var(--purple) 18%, transparent);
    color:var(--purple-glow);
  }
  .ia-title-sub{font-size:11px; font-weight:400; color:var(--text-dim); line-height:1.35;}

  /* --- Client Context variant ---------------------------------------
     Same component, cyan/blue instead of blue/purple, and a different
     glyph. Two panels are visible on one page and do different jobs, so
     they should not be the same object twice; the page panel keeps the
     established purple, and only this one shifts. Cyan is not a new
     colour here: rgba(77,216,255) is already the second half of this
     panel's own title glow and the Readiness mic accent. */
  .insight-assist-panel.ia-context{
    background-image:
      linear-gradient(160deg, rgba(77,216,255,0.13), rgba(91,127,255,0.12)),
      linear-gradient(var(--bg-panel-2), var(--bg-panel-2)),
      linear-gradient(135deg, #4dd8ff, var(--blue));
    box-shadow:0 0 22px -12px rgba(77,216,255,0.5), 0 0 30px -14px rgba(91,127,255,0.4);
  }
  .ia-context .insight-assist-header:hover{background:rgba(77,216,255,0.08);}
  .ia-context .insight-assist-title::before{
    content:"\25C8"; color:#7ee4ff;
    text-shadow:0 0 8px rgba(77,216,255,0.75), 0 0 14px rgba(91,127,255,0.4);
  }
  .ia-context .ia-scope{
    border-color:rgba(77,216,255,0.55);
    background:rgba(77,216,255,0.16);
    color:#7ee4ff;
  }
  /* Glyph, not an SVG: text-shadow stands in for a box-shadow glow on a
     character, same cyan/purple glow pairing #readinessMicBtn and the
     Readiness tile icons already use elsewhere for "this is an AI touch". */
  .insight-assist-title::before{
    content:"\2726"; color:var(--purple-glow); font-size:17px; line-height:1;
    text-shadow:0 0 8px rgba(185,139,255,0.75), 0 0 14px rgba(77,216,255,0.4);
  }
  .insight-assist-chevron{color:var(--text-faint); transition:transform .2s; font-size:11px;}
  .insight-assist-panel.open .insight-assist-chevron{transform:rotate(90deg);}
  .insight-assist-body{display:none; padding:0 16px 16px;}
  .insight-assist-panel.open .insight-assist-body{display:block;}
  .insight-assist-hint{font-size:12px; color:var(--text); line-height:1.5; margin:0 0 10px;}
  /* Analyze notes: the app's primary gradient-filled .btn treatment (same
     as every Generate Report button), not the neutral outlined .btn-sm
     look this used before, so the call-to-action reads as the primary AI
     action here, not a minor secondary control. Sized down from .btn's
     own padding/font-size to fit inline beside the status text, the same
     size-only-override pattern .sidebar-trial-btn already uses on top of
     the same base .btn class. */
  .insight-assist-analyze-btn{padding:9px 16px; font-size:12.5px; border-radius:9px;}
  .insight-assist-status{font-size:11.5px; color:var(--text-faint); margin-left:10px;}
  .insight-assist-status.error{color:var(--warn);}
  .insight-assist-list{margin-top:12px; display:flex; flex-direction:column; gap:8px;}

  /* One suggestion, wherever it renders: inline inside a Readiness
     question / Implementation category tile, or in the Opportunity
     panel's own list. Never implies the value is already applied, the
     three actions are equally weighted, Accept is not visually forced. */
  .insight-skipped-note{
    font-size:12px; line-height:1.45; color:var(--text); margin:8px 0 0; padding-left:9px;
    border-left:3px solid var(--border-bright);
  }
  .insight-suggestion-card{
    border:1px solid rgba(123,92,255,0.35); border-radius:10px;
    background:rgba(123,92,255,0.08); padding:10px 12px; margin-top:8px; transition:border-color .15s;
  }
  .insight-suggestion-card:hover{border-color:var(--purple-glow);}
  .insight-suggestion-text{font-size:12px; color:var(--text); line-height:1.5; margin:0 0 8px;}
  .insight-suggestion-text b{color:var(--purple-glow);}
  .insight-suggestion-actions{display:flex; gap:6px; flex-wrap:wrap;}
  .insight-suggestion-actions button{
    font-family:var(--font-mono); font-size:10.5px; padding:5px 10px; border-radius:7px;
    border:1px solid var(--border); background:var(--bg-raised); color:var(--text); cursor:pointer;
  }
  .insight-suggestion-actions button.accept{background:var(--good); color:#0a0c1c; border:none; font-weight:700;}
  .insight-suggestion-actions button:hover{border-color:var(--border-bright);}
  /* --- Dashboard (client-side aggregate over saved session files) --- */
  .dash-controls{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 8px;}
  .dash-source{font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); margin-bottom:14px; min-height:14px;}
  .dash-empty{border:1px dashed var(--border-bright); border-radius:12px; padding:22px 20px; background:var(--bg-panel-2);}
  .dash-empty p{margin:0 0 8px; font-size:13px; color:var(--text); line-height:1.6;}
  .dash-empty p:first-child{color:var(--text); font-weight:600;}
  .dash-empty .dash-empty-note{margin:12px 0 0; font-size:11.5px; color:var(--text);}
  .dash-toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 12px;}
  .dash-toolbar input[type="search"]{
    flex:1 1 240px; background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text);
    padding:9px 12px; border-radius:8px; font-size:13px; font-family:var(--font-body);
  }
  .dash-toolbar input[type="search"]:focus{outline:none; border-color:var(--border-bright);}
  .dash-count{font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); white-space:nowrap;}
  .dash-parse-warn{
    font-size:11.5px; color:var(--warn); background:rgba(255,184,77,0.08);
    border:1px solid rgba(255,184,77,0.3); border-radius:8px; padding:8px 11px; margin-bottom:10px; line-height:1.45;
  }
  .dash-table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:10px;}
  /* table-layout:fixed + explicit column widths, not auto: with auto
     layout the browser expands the table past its container to avoid
     wrapping ANY cell it can still fit, even ones marked white-space:
     normal, so at narrower desktop widths (~1024px, common on a smaller
     laptop) the Open button column was pushed off the right edge behind
     a scrollbar despite nothing looking obviously wrong in a screenshot.
     Fixed layout makes the table's total width always equal its
     container, no matter how long a client name or industry gets, they
     just wrap within their own column instead. */
  /* .dash-table is the generic "styled like our data tables" class,
     shared by Dashboard AND Clients (and anything else in this vein
     later): border/spacing/typography/sort-arrow/hover look. Column
     COUNT and per-column widths differ between them (Dashboard has 7
     columns, Clients has 6), so those are scoped to #dashTable /
     #clientsTable specifically below, never to the bare .dash-table
     class, to avoid one table's column layout bleeding into the other's. */
  .dash-table{width:100%; table-layout:fixed; border-collapse:collapse; font-size:12.5px;}
  .dash-table th, .dash-table td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--border);}
  /* A long unbroken token (an email address, a run-together client name)
     has no space for the browser to wrap at even with white-space:normal,
     so it silently overflows the fixed-width cell and visually collides
     with whatever is in the next column, caught via a real screenshot on
     the Clients table, not something a computed-overflow check alone
     would have flagged. break-word lets it wrap mid-token as a last
     resort, only kicks in when there is truly no earlier break point. */
  .dash-table td{overflow-wrap:break-word;}
  /* Client, Industry, Last saved and Stage can all wrap onto a second
     line rather than being clipped or forcing horizontal scroll, once
     the column is fixed-width they no longer have unlimited room to
     grow into. Score and the Open button stay nowrap, both are always
     short. Completed's wrapping is handled by its own flex group. */
  #dashTable td:nth-child(1), #dashTable td:nth-child(2),
  #dashTable td:nth-child(3), #dashTable td:nth-child(4){white-space:normal;}
  #dashTable td:nth-child(5), #dashTable td:nth-child(7){white-space:nowrap;}
  /* Last saved / Score / Open are genuinely fixed-content, so they get a
     literal px width sized with real margin above their actual content
     (not the bare minimum, a button has an intrinsic width it will not
     shrink below no matter what a percentage-based column asks for, that
     is what actually caused the leftover ~12px overflow this replaces).
     Client / Industry / Stage / Completed have no declared width, so
     table-layout:fixed splits whatever space is left evenly between
     them, this is standard fixed-layout behavior, not a hack. */
  #dashTable th:nth-child(3){width:118px;}
  #dashTable th:nth-child(5){width:86px;}
  #dashTable th:nth-child(6){width:96px;}
  #dashTable th:nth-child(7){width:78px;}
  .dash-stale{color:var(--warn);}
  .dash-stage-pill.done{border-color:var(--good); color:var(--good);}
  .dash-table th{
    font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:1px;
    color:var(--text); background:var(--bg-panel-2); position:sticky; top:0;
  }
  .dash-table th.dash-sortable{cursor:pointer;}
  .dash-table th.dash-sortable:hover{color:var(--blue-glow);}
  .dash-table th.dash-sort-asc::after{content:" \25B2"; color:var(--purple-glow);}
  .dash-table th.dash-sort-desc::after{content:" \25BC"; color:var(--purple-glow);}
  .dash-table tbody tr.dash-client-row{cursor:pointer;}
  .dash-table tbody tr.dash-client-row:hover{background:rgba(140,155,255,0.06);}
  .dash-table td .dash-name{font-weight:600; color:var(--text);}
  .dash-table td .dash-badge{
    display:inline-block; margin-left:7px; font-family:var(--font-mono); font-size:9px; letter-spacing:.5px;
    padding:2px 7px; border-radius:999px; border:1px solid var(--border); color:var(--text-faint);
  }
  /* One or more "done" categories are overdue for a fresh look (see
     IMPL_REVISIT_DAYS): same warn accent as .impl-divergence-note, not an
     error, just a nudge that's easy to spot while scanning the client list. */
  .dash-table td .dash-badge.warn{border-color:rgba(255,184,77,0.4); color:var(--warn); background:rgba(255,184,77,0.08);}
  .dash-scoped-completed{font-size:11.5px; color:var(--text); margin-top:2px;}
  .dash-table td .dash-chev{display:inline-block; width:12px; color:var(--text-faint); transition:transform .15s;}
  .dash-table tr.dash-open .dash-chev{transform:rotate(90deg);}
  .dash-stage-pill{font-family:var(--font-mono); font-size:10px; padding:2px 8px; border-radius:999px; background:rgba(91,127,255,0.16); color:var(--blue-glow);}
  .dash-done{font-family:var(--font-mono); font-size:10px; color:var(--text);}
  /* Status chips: same done/not-done visual language as the sidebar trial
     card's checkmark list (.sidebar-trial-check, var(--good) on a check),
     just applied per-tool instead of per-feature. A boolean, not a
     progress bar: not-done is a plain hollow dot, never a partial fill. */
  .dash-status-group{display:inline-flex; flex-wrap:wrap; gap:5px;}
  .dash-status-chip{
    display:inline-flex; align-items:center; gap:4px;
    font-family:var(--font-body); font-size:10.5px; font-weight:600; white-space:nowrap;
    padding:3px 8px 3px 6px; border-radius:999px; border:1px solid var(--border); color:var(--text-faint);
  }
  .dash-status-chip.done{border-color:rgba(51,230,165,0.35); color:var(--text); background:rgba(51,230,165,0.08);}
  .dash-status-icon{font-weight:700; color:var(--text-faint); flex:none;}
  .dash-status-chip.done .dash-status-icon{color:var(--good);}
  .dash-open-btn{
    background:rgba(155,92,255,0.14); border:1px solid var(--purple-glow); color:var(--text);
    font-family:var(--font-body); font-size:11px; font-weight:600; padding:5px 12px; border-radius:7px; cursor:pointer;
  }
  .dash-open-btn:hover{background:rgba(155,92,255,0.24);}
  .dash-sub-row td{background:var(--bg-panel-2); border-bottom:1px solid var(--border);}
  .dash-session-line{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:6px 0; font-size:12px; color:var(--text);}
  .dash-session-line .when{font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); min-width:96px;}
  .dash-incomplete-toggle{
    display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text); cursor:pointer; user-select:none;
  }
  .dash-incomplete-toggle input{cursor:pointer;}
  .dash-limitation{font-size:11px; color:var(--text); margin:12px 0 0; line-height:1.5;}

  /* --- Dashboard overview + per-client detail -------------------------
     Built from the components the Assess redesign established: the same
     card shell as .cb-card, the same icon-badge/label rhythm, the same
     tokens. No new visual language, and no charting library: the two
     charts below are hand-drawn inline SVG, which keeps this page's
     "reads local files, calls nothing" property intact. */
  .dash-stats{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:12px; margin:0 0 16px;
  }
  .dash-stat{
    background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
    border:1px solid var(--border); border-radius:14px; padding:14px 16px;
  }
  .dash-stat-num{
    font-family:var(--font-display); font-size:26px; font-weight:800; line-height:1.1;
    background:linear-gradient(115deg, var(--blue-glow), var(--purple-glow));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .dash-stat-label{
    font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
    letter-spacing:1.2px; color:var(--text-dim); margin-top:4px;
  }
  .dash-toolbar select{
    background:var(--bg-panel-2); border:1px solid var(--border); border-radius:8px;
    color:var(--text); font-size:12.5px; padding:7px 10px; font-family:var(--font-body);
    appearance:none; cursor:pointer;
  }
  .dash-toolbar select:focus{outline:none; border-color:var(--border-bright);}

  /* Expanded per-client panel */
  .dash-detail{display:flex; flex-direction:column; gap:16px; padding:4px 2px 8px;}
  .dash-detail-card{
    background:var(--bg-panel-2); border:1px solid var(--border);
    border-radius:12px; padding:14px 16px;
  }
  .dash-detail-head{
    display:flex; align-items:center; gap:9px; margin:0 0 10px;
  }
  .dash-detail-head .icon-badge{width:26px; height:26px; border-radius:8px;}
  .dash-detail-head .icon-badge svg{width:14px; height:14px;}
  .dash-detail-title{font-family:var(--font-body); font-size:12.5px; font-weight:700; color:var(--text);}
  .dash-overview-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:12px 16px;
  }
  .dash-open-btn:disabled{opacity:.6; cursor:default;}
  .dash-overview-item .k{
    font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase;
    letter-spacing:1.1px; color:var(--text-faint); display:block; margin-bottom:3px;
  }
  .dash-overview-item .v{font-size:13px; color:var(--text); line-height:1.4;}
  .dash-charts{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px;}
  .dash-chart svg{display:block; width:100%; height:auto;}
  .dash-chart-empty{font-size:11.5px; color:var(--text-dim); line-height:1.5; margin:6px 0 0;}
  /* Tier breakdown bars */
  .dash-tier-row{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
  .dash-tier-row:last-child{margin-bottom:0;}
  .dash-tier-name{
    flex:0 0 96px; font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
    letter-spacing:0.8px; color:var(--text-dim);
  }
  .dash-tier-track{
    flex:1 1 auto; height:8px; border-radius:99px; background:var(--bg-raised);
    overflow:hidden; display:flex; min-width:40px;
  }
  .dash-tier-done{background:linear-gradient(90deg, var(--blue), var(--purple));}
  .dash-tier-scored{background:color-mix(in srgb, var(--blue) 28%, transparent);}
  .dash-tier-frac{
    flex:0 0 auto; font-family:var(--font-mono); font-size:10.5px; color:var(--text-dim); white-space:nowrap;
  }
  /* The Dashboard is a data table, not narrative content: it benefits
     from more horizontal room than the site-wide 820px reading width.
     Same for Readiness/Implementation Scope (fixed-column tile grids
     need real width for 3-4 tiles per row) and Tool Library/Templates
     (their own tile/card grids left a large unused gap on the right at
     820px, confirmed via screenshot on a wide monitor). Opportunity
     Assessment also widened to match, for the same reason: at 820px on a
     wide monitor its forms/intake boxes left the same unused gap next to
     the sidebar as every other tab did before being widened.
     Scoped to widths where the sidebar is still in its own column
     (>900px, see the sidebar collapse media query below), so the mobile
     stacked layout is untouched. */
  @media (min-width:901px){
    .app-shell:has(#tabDashboard.active) .content-col,
    .app-shell:has(#tabHome.active) .content-col,
    .app-shell:has(#tabMap.active) .content-col,
    .app-shell:has(#tabEnable.active) .content-col,
    .app-shell:has(#tabPlan.active) .content-col,
    .app-shell:has(#tabTrack.active) .content-col,
    .app-shell:has(#tabTemplates.active) .content-col,
    .app-shell:has(#tabAdmin.active) .content-col{--col-max:1180px;}
  }

  /* Assess tabs: full-bleed frame, capped content.
     .assess-frame draws a visible border, so past ~1500px the leftover
     track either side of a capped column stopped reading as breathing
     room and started reading as dead space with the panel marooned in
     the middle. The fix is NOT to widen the cap again (1180px is a
     deliberate reading width): the column is released to fill the track
     so the frame's background/border reaches the edges, and the SAME cap
     is re-applied to the frame's children, which stay centred. Net
     effect at any width: identical measure, no void.

     header/footer are capped too, so the header controls and the footer
     line keep sitting directly above/below the content column rather
     than drifting out to the track edges.

     Scoped to >=901px for the same reason the cap above is: below that
     the sidebar stacks and .content-col is already full width. */
  @media (min-width:901px){
    .app-shell:has(#tabMap.active) .content-col,
    .app-shell:has(#tabEnable.active) .content-col,
    .app-shell:has(#tabPlan.active) .content-col,
    .app-shell:has(#tabTrack.active) .content-col{
      max-width:none;
    }
    .app-shell:has(#tabMap.active) .content-col > *:not(header):not(.assess-frame),
    .app-shell:has(#tabEnable.active) .content-col > *:not(header):not(.assess-frame),
    .app-shell:has(#tabPlan.active) .content-col > *:not(header):not(.assess-frame),
    .app-shell:has(#tabTrack.active) .content-col > *:not(header):not(.assess-frame){
      max-width:var(--col-max); margin-left:auto; margin-right:auto;
    }
    /* margin-left/right rather than the shorthand: these children carry
       their own bottom margins for vertical rhythm. */
    .assess-frame > *{max-width:var(--col-max); margin-left:auto; margin-right:auto;}
  }

  .dash-backup-note{
    display:flex; align-items:flex-start; gap:10px; font-size:11.5px; color:var(--text);
    background:var(--bg-panel-2); border:1px solid var(--border-bright); border-radius:8px;
    padding:9px 11px; margin-bottom:12px; line-height:1.5;
  }
  .dash-backup-note .dash-backup-x{
    margin-left:auto; flex:none; background:none; border:none; color:var(--text-faint);
    font-size:15px; line-height:1; cursor:pointer; padding:0 2px;
  }
  .dash-backup-note .dash-backup-x:hover{color:var(--text);}

  .cb-modal-backdrop{
    position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
    padding:20px; background:rgba(0,0,0,0.55);
  }
  .cb-modal{
    background:var(--bg-panel-2); border:1px solid var(--border-bright); border-radius:14px;
    padding:24px 24px 20px; max-width:440px; box-shadow:0 20px 60px rgba(0,0,0,0.45);
  }
  .cb-modal h3{margin:0 0 10px; font-size:15px; color:var(--text);}
  .cb-modal p{margin:0 0 18px; font-size:13px; line-height:1.65; color:var(--text);}
  .cb-modal-actions{display:flex; justify-content:flex-end; gap:10px;}

  /* Profile: the consultant's own ACCOUNT (email, password, plan). Server
     -side data only, deliberately nothing client/session related, which
     all stays on this device. Sections reuse .cb-modal's shell and the
     app's existing field styling rather than inventing a second form
     language. */
  .cb-modal.profile{max-width:520px; max-height:88vh; overflow-y:auto;}
  .profile-section{border-top:1px solid var(--border); padding:18px 0 4px; margin:0;}
  .profile-section:first-of-type{border-top:none; padding-top:4px;}
  .profile-section h4{
    margin:0 0 3px; font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--text);
  }
  .profile-section .profile-hint{font-size:11.5px; line-height:1.5; color:var(--text-dim); margin:0 0 12px;}
  .profile-form{margin:0;}
  .profile-field{display:flex; flex-direction:column; gap:5px; margin-bottom:10px;}
  .profile-field label{
    font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--text);
  }
  .profile-field input{
    background:var(--bg-panel); border:1px solid var(--border); color:var(--text);
    padding:9px 11px; border-radius:8px; font-size:13px; font-family:var(--font-body); width:100%;
  }
  .profile-field input:focus{outline:none; border-color:var(--border-bright);}
  .profile-current{
    font-family:var(--font-mono); font-size:12px; color:var(--text); word-break:break-word;
    background:var(--bg-panel); border:1px solid var(--border); border-radius:8px;
    padding:8px 11px; margin-bottom:12px;
  }
  .profile-pending{
    font-size:11.5px; line-height:1.5; color:var(--warn); margin:0 0 12px;
    background:color-mix(in srgb, var(--warn) 8%, transparent);
    border:1px solid color-mix(in srgb, var(--warn) 32%, transparent);
    border-radius:8px; padding:8px 11px; word-break:break-word;
  }
  .profile-plan-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
  .profile-plan-name{font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text);}
  .profile-status{font-size:11.5px; line-height:1.5; margin:8px 0 0; min-height:1em;}
  .profile-status.ok{color:var(--good);}
  .profile-status.error{color:var(--danger);}
  .profile-section .btn{font-size:13px; padding:9px 16px;}
  /* The link and its Copy button on one line, wrapping to two on a narrow
     modal rather than squeezing the input to unreadable. Mono because the
     code inside it is read character by character when someone reads it
     out or retypes it. */
  .refer-row{display:flex; gap:8px; align-items:stretch; flex-wrap:wrap;}
  .refer-row input{
    flex:1 1 240px; min-width:0; background:var(--bg-raised);
    border:1px solid var(--border); color:var(--text); border-radius:8px;
    padding:9px 11px; font-family:var(--font-mono); font-size:12px;
  }
  .refer-row input:focus{outline:none; border-color:var(--border-bright);}
  .refer-row .btn{flex:none;}
  .reports-controls{display:flex; gap:10px; flex-wrap:wrap; margin:-6px 0 14px;}
  .reports-list{max-height:340px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; padding:2px 12px; margin-bottom:4px;}
  .reports-list:empty{display:none;}
  .reports-list .dash-session-line{border-bottom:1px solid var(--border);}
  .reports-list .dash-session-line:last-child{border-bottom:none;}

  /* Muted "nothing here" line, used by the Reports modal. */
  .tools-empty{font-size:12.5px; color:var(--text); margin:16px 0;}

  /* Load Template control, sits inside .client-context above .cc-grid, so
     it inherits that block's existing select/label styling for free. */
  .cc-load-template{display:flex; flex-direction:column; gap:5px; max-width:380px; margin:0 0 14px;}
  /* Templates tab: a single-column page. Page header (.tpl-head), then
     #templatesBody, the mount point for the industry starter sets (roles,
     tools) added in the build phase, then the local backup controls. */
  .tpl-head{margin-bottom:6px;}

  /* Signups table: .dash-table does the heavy lifting, these are just the
     per-row state chips. Same token set as every other status pill in the
     app, no new colours. */
  .admin-status{font-size:11.5px; color:var(--text-dim); align-self:center;}
  .admin-status.error{color:var(--danger);}
  .admin-chip{
    display:inline-block; font-family:var(--font-mono); font-size:9.5px;
    letter-spacing:.4px; padding:2px 8px; border-radius:99px; white-space:nowrap;
    border:1px solid var(--border); color:var(--text-dim);
  }
  .admin-chip.ok{
    border-color:color-mix(in srgb, var(--good) 45%, transparent);
    background:color-mix(in srgb, var(--good) 12%, transparent); color:var(--good);
  }
  .admin-chip.warn{
    border-color:color-mix(in srgb, var(--warn) 50%, transparent);
    background:color-mix(in srgb, var(--warn) 14%, transparent); color:var(--warn);
  }
  .admin-chip.bad{
    border-color:color-mix(in srgb, var(--danger) 50%, transparent);
    background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger);
  }
  .admin-empty{padding:22px 12px; text-align:center; color:var(--text-dim); font-size:12.5px;}
  /* Eight columns under table-layout:fixed divide the available width
     evenly, so on a narrower window the cells compress until an email
     address overflows its box instead of wrapping. A min-width lets
     .dash-table-wrap's existing overflow-x:auto do its job and scroll
     instead. Scoped to this table: .dash-table is shared with Clients,
     which has fewer columns and does not need it. */
  #adminTableWrap .dash-table{min-width:880px;}

  .hidden{display:none !important;}
  footer{text-align:center; color:var(--text-faint); font-size:10.5px; font-family:var(--font-mono); margin-top:36px;}