/* ══ hubs.css — the seven-hub shell (Sep 1 2026) ═══════════════════════════════════════════════
   Sean: "we are going to redesign the whole portal … every job has exactly one address. Seven
   hubs, no more." This sheet is the SHELL of that redesign: the navy rail, the page header
   (serif title · one-line subtitle · ≤5 tabs · one primary action), and the palette the brief
   fixes for every hub. It restyles nothing inside a screen. Every existing view keeps drawing
   into #mainContent exactly as before; the rail and header sit beside it.

   IT IS AN OVERLAY WITH A SWITCH. Everything here is scoped to body.cw-hubs, which
   cwlg/cwlg_hubs.js sets only when hubs are on for this station. localStorage cw_hubs=off (the
   "Classic menu" toggle in the rail footer) removes the class and the old 65-item sidebar is
   back, byte for byte — it is never removed from the page, only hidden. Same doctrine as
   theme-refresh.css: delete one <link> and nothing has changed.

   PALETTE (the brief, verbatim): rail navy #0d1b2a · body #f6f8fa · white cards, 14px radius,
   hairline #e6eaee · Inter body, Newsreader titles · blue #007abb secondary · green #0e7c66 done ·
   amber #8a6d2f warning · red #b42318 refusal.                                                */

/* ── 1 · TOKENS the whole portal already reads (portal-head.css :root) — re-keyed to the brief.
        Scoped to body.cw-hubs so the classic switch also restores the old palette.          */
body.cw-hubs{
  --bg2:#f6f8fa; --bg-soft:#f6f8fa; --card2:#f9fafc; --card-alt:#f9fafc; --card-hover:#f0f4f8;
  --bdr:#e6eaee; --bdr-l:#eef1f4; --border:#e6eaee;
  --tx:#0d1b2a; --text:#0d1b2a; --text-primary:#0d1b2a;
  --sec:#5f7184; --muted:#5f7184; --text-secondary:#5f7184; --text-muted:#8a98a8; --mut:#8a98a8; --dim:#5f7184;
  --gold:#007abb; --accent:#007abb; --brand:#007abb; --blue:#007abb; --hero:#0d1b2a;
  --grn:#0e7c66; --green:#0e7c66; --pos:#0e7c66; --red:#b42318; --neg:#b42318;
  --sidebar-w:220px;
  --hub-rail:#0d1b2a; --hub-rail-ink:#fff; --hub-rail-dim:rgba(255,255,255,.62);
  --hub-header-h:112px;
  --hub-top:0px;   /* the classic top bar's live height — set by the shell (Sep 2 2026); the header starts under it */
}
body.cw-hubs{ background:#f6f8fa; }
body.cw-hubs .main-content{ background:#f6f8fa; }

/* Call Flow carries its own LPL-era tokens (#cfRoot, injected at runtime). The brief settles on
   one palette; re-key by specificity rather than by editing the module. */
body.cw-hubs #cfRoot{
  --accent:#0d1b2a; --accent-dk:#0d1b2a; --accent-soft:#e6f2fa;
  --teal:#007abb; --teal-soft:#e6f2fa; --line:#e6eaee; --bg:#f6f8fa; --ink:#0d1b2a; --ink-soft:#5f7184;
}

/* ── 2 · THE RAIL — replaces what the sidebar shows, not the sidebar itself ─────────────────── */
html body.cw-hubs .sidebar, html body.cw-hubs.cw-sb-dark .sidebar, html body.cw-hubs:not(.cw-sb-dark) .sidebar{
  background:#0d1b2a !important; border-right:none !important; width:var(--sidebar-w);
  display:flex !important; flex-direction:column; padding:0 !important;
}
/* an id outranks every class rule the older sheets carry — and the rail paints its own ground too,
   so a stray sidebar rule can never leave white text on white */
body.cw-hubs #sidebar{ background:#0d1b2a !important; }
body.cw-hubs #cwHubRail{ background:#0d1b2a; min-height:100%; }
/* the old nav, pinned strip, brand block and the Clients/Vault foot are hidden, never removed:
   ⌘K still reads its screen list off those buttons, deep links still resolve, the classic
   toggle brings them straight back */
body.cw-hubs .sidebar-brand,
body.cw-hubs #cwSidebarMain,
body.cw-hubs #cwSidebarFoot,
body.cw-hubs #cwSbFootStatus{ display:none !important; }
body.cw-hubs.cw-hubs-vault #cwSidebarFoot{ display:block !important; background:#fff; margin:0 10px 10px; border-radius:10px; }
/* "All screens": the classic list back, as a drawer under the rail, filter box and all */
body.cw-hubs.cw-hubs-find #cwSidebarMain{
  display:block !important; background:#fff; margin:0 10px 8px; border-radius:10px; max-height:46vh; overflow:auto;
  border:1px solid rgba(255,255,255,.12);
}
body.cw-hubs.cw-hubs-find #cwSidebarMain .sidebar-item{ color:#0d1b2a !important; }

#cwHubRail{ display:none; }
body.cw-hubs #cwHubRail{
  display:flex; flex-direction:column; flex:1; min-height:0; color:var(--hub-rail-ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
#cwHubRail .hub-brand{
  display:flex; align-items:center; gap:10px; padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.08);
}
#cwHubRail .hub-brand .mark{
  width:30px; height:30px; border:1.5px solid #5fb3e0; border-radius:3px; display:flex; align-items:center; justify-content:center;
  font:900 12px 'Inter',sans-serif; color:#5fb3e0; letter-spacing:.5px;
}
#cwHubRail .hub-brand .name{ font:800 15px 'Newsreader',Georgia,serif; color:#fff; letter-spacing:-.2px; line-height:1.05; }
#cwHubRail .hub-brand .who{ font:600 10.5px 'Inter',sans-serif; color:var(--hub-rail-dim); margin-top:2px; display:flex; align-items:center; gap:6px; }
#cwHubRail .hub-brand .dot{ width:7px; height:7px; border-radius:50%; background:#2ec27e; display:inline-block; }
#cwHubRail .hub-brand .star{ color:#c8a24a; font-size:11px; }

#cwHubRail .hub-search{
  margin:12px 14px 6px; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1); border-radius:9px; padding:8px 11px; color:var(--hub-rail-dim);
  font:600 12px 'Inter',sans-serif; cursor:pointer;
}
#cwHubRail .hub-search:hover{ background:rgba(255,255,255,.13); color:#fff; }
#cwHubRail .hub-search kbd{ margin-left:auto; font:700 10px 'Inter',sans-serif; background:rgba(255,255,255,.12); border-radius:5px; padding:2px 6px; color:#fff; }

#cwHubRail .hub-list{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; flex:1; min-height:0; overflow-y:auto; }
#cwHubRail .hub{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; border:none; background:none;
  color:var(--hub-rail-dim); font:600 13.5px 'Inter',sans-serif; text-align:left; cursor:pointer; position:relative; width:100%;
  transition:background .12s, color .12s;
}
#cwHubRail .hub:hover{ background:rgba(255,255,255,.07); color:#fff; }
#cwHubRail .hub.active{ background:rgba(255,255,255,.1); color:#fff; font-weight:800; }
#cwHubRail .hub.active::before{ content:''; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; background:#fff; border-radius:0 3px 3px 0; }
#cwHubRail .hub svg{ width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
#cwHubRail .hub .n{ margin-left:auto; font:800 10.5px 'Inter',sans-serif; background:#007abb; color:#fff; border-radius:20px; padding:2px 7px; min-width:22px; text-align:center; }
#cwHubRail .hub .n.hot{ background:#b42318; }
#cwHubRail .hub:focus-visible{ outline:2px solid #5fb3e0; outline-offset:1px; }

#cwHubRail .hub-foot{ border-top:1px solid rgba(255,255,255,.08); padding:10px 10px 12px; display:flex; flex-direction:column; gap:2px; }
#cwHubRail .hub-foot .hub{ padding:8px 12px; font-size:12.5px; }
#cwHubRail .hub-foot .avatar{
  width:26px; height:26px; border-radius:50%; background:#5fb3e0; color:#0d1b2a; font:800 11px 'Inter',sans-serif;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
#cwHubRail .hub-foot .classic{ font-size:11px; color:rgba(255,255,255,.45); padding:6px 12px; }
#cwHubRail .hub-foot .classic:hover{ color:#fff; }

/* ── 3 · THE HEADER — outside #mainContent, so no view can paint over it ─────────────────── */
#cwHubHeader{ display:none; }
body.cw-hubs #cwHubHeader{
  display:block; position:fixed; z-index:60; left:var(--sidebar-w); right:0; top:var(--hub-top, 0px);
  background:#f6f8fa; border-bottom:1px solid #e6eaee; padding:18px 32px 0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
body.cw-hubs .main-content{ padding-top:calc(var(--hub-header-h) + 22px) !important; }
#cwHubHeader .row{ display:flex; align-items:flex-start; gap:16px; }
#cwHubHeader h1{ font:800 26px/1.1 'Newsreader',Georgia,serif; color:#0d1b2a; margin:0; letter-spacing:-.01em; }
#cwHubHeader .sub{ font:600 12.5px 'Inter',sans-serif; color:#5f7184; margin:5px 0 0; }
#cwHubHeader .phone-only-actions{ display:none; }
#cwHubHeader .crumb-back{ display:none; }
#cwHubHeader .primary{
  margin-left:auto; border:none; background:#0d1b2a; color:#fff; border-radius:9px; padding:10px 16px;
  font:800 12.5px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; align-self:center;
}
#cwHubHeader .primary:hover{ background:#1b2d44; }
#cwHubHeader .tabs{ display:flex; gap:4px; margin-top:12px; overflow-x:auto; scrollbar-width:none; }
#cwHubHeader .tabs::-webkit-scrollbar{ display:none; }
#cwHubHeader .tab{
  border:none; background:none; padding:8px 12px 10px; font:700 13px 'Inter',sans-serif; color:#5f7184; cursor:pointer;
  border-bottom:2px solid transparent; white-space:nowrap; border-radius:6px 6px 0 0;
}
#cwHubHeader .tab:hover{ color:#0d1b2a; background:rgba(13,27,42,.04); }
#cwHubHeader .tab.active{ color:#0d1b2a; border-bottom-color:#0d1b2a; }
#cwHubHeader .tab .n{ margin-left:6px; font:800 10px 'Inter',sans-serif; color:#8a98a8; }
#cwHubHeader .crumb{ font:700 10px 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#8a98a8; margin-bottom:6px; }

/* ── 4 · the body under the header: cards read the re-keyed tokens; radii per the brief ──── */
body.cw-hubs .main-content .stat-card,
body.cw-hubs .main-content .meeting-card,
body.cw-hubs .main-content .note-card,
body.cw-hubs .main-content .quarterly-card{ border-radius:14px; border-color:#e6eaee; box-shadow:none; }

/* ── 5 · small screens: the sidebar is already a slide-over drawer; the header follows main ─ */
@media (max-width: 900px){
  body.cw-hubs #cwHubHeader{ left:0; padding:14px 14px 0; }
  body.cw-hubs .main-content{ padding-top:calc(var(--hub-header-h) + 14px) !important; }
  #cwHubHeader h1{ font-size:22px; }
}


/* ── 6 · THE PHONE SHELL (brief p16): the rail disappears, a bottom tab bar of at most five thumb-
   sized tabs per role, the active one navy; the top bar keeps the title, the search, the primary;
   one column everywhere; nothing under 16px in an input so iOS never zooms. ────────────────── */
#cwHubPhoneBar{ display:none; }
@media (max-width: 720px){
  body.cw-hubs{ --sidebar-w:0px; }
  html body.cw-hubs .sidebar, body.cw-hubs #sidebar{ display:none !important; }
  /* the More sheet is the All-screens drawer, which lives inside the sidebar — show it as an overlay */
  html body.cw-hubs.cw-hubs-find .sidebar, body.cw-hubs.cw-hubs-find #sidebar{ display:block !important; position:fixed !important; left:0; top:0; bottom:0; width:min(320px, 90vw) !important; z-index:100002 !important; overflow-y:auto !important; box-shadow:12px 0 40px rgba(13,27,42,.25); }
  body.cw-hubs .main-content, body.cw-hubs #mainContent{ margin-left:0 !important; padding-left:12px !important; padding-right:12px !important; padding-bottom:84px !important; }
  body.cw-hubs #cwHubHeader{ left:0; padding:10px 12px 0; }
  #cwHubHeader .sub{ display:none; }
  #cwHubHeader h1{ font-size:20px; }
  /* brief p16: on a phone the top bar holds the page title, a search icon and the avatar — and the
     primary DOCKS above the tab bar instead of shrinking to 12px in a corner, where a thumb
     cannot reach it and it reads as a caption. Both controls sit in the markup on every screen
     and are shown only here, so the desk header is untouched. */
  #cwHubHeader .phone-only-actions{ display:flex; gap:8px; align-items:center; margin-left:auto; }
  #cwHubHeader .pb-search, #cwHubHeader .pb-avatar{
    border:1px solid #dfe6ec; background:#fff; color:#0d1b2a; border-radius:999px;
    width:36px; height:36px; font:800 14px 'Inter',sans-serif; cursor:pointer; flex:0 0 36px;
  }
  #cwHubHeader .pb-search{ font-size:17px; }
  #cwHubHeader .crumb-back{
    border:none; background:none; color:#5f7184; font:800 20px/1 'Inter',sans-serif;
    padding:0 6px 0 0; cursor:pointer; vertical-align:-2px;
  }
  #cwHubHeader .primary{
    position:fixed; left:12px; right:12px;
    bottom:calc(60px + env(safe-area-inset-bottom) + 10px);
    z-index:9; padding:14px 16px; font-size:14px; border-radius:12px;
    box-shadow:0 6px 20px rgba(13,27,42,.22);
  }
  #cwHubHeader .primary.locked{ position:static; box-shadow:none; padding:8px 12px; font-size:12px; opacity:.55; cursor:not-allowed; }
  #cwHubHeader .tabs{ margin-top:8px; }
  body.cw-hubs #cwHubPhoneBar{ display:flex; position:fixed; left:0; right:0; bottom:0; height:calc(60px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:#fff; border-top:1px solid #e6eaee; z-index:100000; box-sizing:border-box; }
  #cwHubPhoneBar .ptab{ flex:1; border:none; background:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font:700 10.5px 'Inter',sans-serif; color:#5f7184; padding:6px 2px; cursor:pointer; min-width:0; }
  #cwHubPhoneBar .ptab svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  #cwHubPhoneBar .ptab .dots{ font:800 22px/22px 'Inter',sans-serif; }
  #cwHubPhoneBar .ptab.active{ color:#0d1b2a; }
  #cwHubPhoneBar .ptab.active::after{ content:''; width:18px; height:3px; border-radius:3px; background:#0d1b2a; }
  body.cw-hubs input, body.cw-hubs select, body.cw-hubs textarea{ font-size:16px !important; }
  /* the hub pages fold to one column; side panels take the whole width */
  body.cw-hubs .cwct .grid3, body.cw-hubs .cwct .bookgrid, body.cw-hubs .cwpp .grid, body.cw-hubs .cwpw .wrap{ grid-template-columns:1fr !important; }
  body.cw-hubs .cwpw .lanes, body.cw-hubs .cwpr .lanes, body.cw-hubs .cwcal .cw1-body{ flex-direction:column; }
  body.cw-hubs .cw1-side, body.cw-hubs .cwpw-side, body.cw-hubs .cw1-side.wide{ width:100vw !important; }
}


/* ── 7 · CALLING (brief p2): Call Flow as a split — the queue left (35), the dossier and the one
   script right (65); the queue stays open on a call; the outcomes in threes ─────────────────── */
body.cw-hubs #cfRoot .cf-grid{ grid-template-columns:minmax(280px,35fr) minmax(0,65fr) !important; gap:16px; }
body.cw-hubs #cfRoot .cf-col-right{ grid-column:1; grid-row:1; position:sticky; top:calc(var(--hub-top, 0px) + var(--hub-header-h) + 22px); max-height:calc(100vh - var(--hub-top, 0px) - var(--hub-header-h) - 30px); }
body.cw-hubs #cfRoot .cf-col-mid{ grid-column:2; grid-row:1; }
body.cw-hubs #cfRoot .cf-leads{ max-height:none; }
body.cw-hubs #cfRoot #cfQueuePanel.cf-fold>*:not(h3){ display:block !important; }
body.cw-hubs #cfRoot #cfQueuePanel.cf-fold>.cf-leads{ display:flex !important; }
body.cw-hubs #cfRoot .cf-qchips{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 8px; }
body.cw-hubs #cfRoot .cf-qchip{ border:1px solid #dbe5ee; background:#fff; border-radius:20px; padding:4px 10px; font:700 11px 'Inter',sans-serif; color:#5f7184; cursor:pointer; }
body.cw-hubs #cfRoot .cf-qchip.on{ background:#0d1b2a; color:#fff; border-color:#0d1b2a; }
body.cw-hubs #cfRoot .cf-lead-row{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; border-radius:12px; padding:9px 11px; }
body.cw-hubs #cfRoot .cf-lead-row .cf-lead-nm{ flex:1 1 60%; }
body.cw-hubs #cfRoot .cf-lead-row .cf-lead-meta{ flex:1 1 100%; order:3; }
body.cw-hubs #cfRoot .cf-lead-call{ order:2; background:#0e7c66; color:#fff; border-radius:7px; padding:4px 10px; font:800 11px 'Inter',sans-serif; }
body.cw-hubs #cfRoot .cf-lead-on{ border-color:#0d1b2a; box-shadow:0 0 0 2px rgba(13,27,42,.12); }
body.cw-hubs #cfRoot .cf-log2-out .cf-disp-grid, body.cw-hubs #cfRoot .cf-log2-out .cf-disp-grid.cf-3{ grid-template-columns:repeat(3,1fr); }
body.cw-hubs #cfRoot .cf-disp, body.cw-hubs #cfRoot .cf-panel{ border-radius:14px; }
@media (max-width: 1100px){ body.cw-hubs #cfRoot .cf-grid{ grid-template-columns:minmax(240px,35fr) minmax(0,65fr) !important; } }
@media (max-width: 900px){ body.cw-hubs #cfRoot .cf-grid{ grid-template-columns:1fr !important; } body.cw-hubs #cfRoot .cf-col-right{ position:static; max-height:none; grid-row:auto; grid-column:auto; } body.cw-hubs #cfRoot .cf-col-mid{ grid-row:auto; grid-column:auto; } }

/* ── the old sidebar's phone backdrop must never show under the shell (Sep 2 2026, Sean's phone) ──
   The top bar's hamburger still called PortalV2.navToggle → the CLASSIC sidebar opened (hidden by
   body.cw-hubs) and its #cwNavScrim (fixed, below the nav, rgba(15,30,45,.42)) painted alone: the
   whole page read as greyed out and dead. Under the shell the hamburger opens the More sheet
   (cwlg_hubs.js) and this backdrop stays off, whatever class the old code adds. */
body.cw-hubs #cwNavScrim{ display:none !important; }

/* ── 8 · WARM WORK (brief p11): the gold star beside a warm caller's name ───────────────────── */
body.cw-hubs .cw-hub-rail .warmstar, #cwHubRail .warmstar{ color:#d9a400; font-size:12px; margin-left:2px; }

/* ── 9 · THE PHONE RENDERS (brief p16 / p18): Call Flow as the dossier first with the outcome sheet
   docked above the tab bar; one column everywhere; nothing under 16px on a phone ─────────────── */
@media (max-width: 720px){
  body.cw-hubs #cfRoot .cf-grid{ grid-template-columns:1fr !important; }
  body.cw-hubs #cfRoot .cf-col-mid{ grid-column:1; grid-row:1; }
  body.cw-hubs #cfRoot .cf-col-right{ grid-column:1; grid-row:2; position:static; max-height:none; }
  body.cw-hubs #cfRoot .cf-ctx-actions .cf-ctx-call, body.cw-hubs #cfRoot .cf-ctx-call{ display:block; width:100%; box-sizing:border-box; text-align:center; padding:16px 12px; font-size:17px; border-radius:12px; }
  body.cw-hubs #cfRoot .cf-script{ font-size:16px; line-height:1.55; }
  /* the outcome sheet: docked above the tab bar, six large buttons in a 2×3 grid */
  body.cw-hubs #cfRoot .cf-log2-out{ position:sticky; bottom:calc(60px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #e6eaee; box-shadow:0 -8px 24px rgba(13,27,42,.08); padding:10px 10px calc(10px + env(safe-area-inset-bottom)); margin:0 -12px; z-index:5; border-radius:14px 14px 0 0; }
  body.cw-hubs #cfRoot .cf-log2-out .cf-disp-grid, body.cw-hubs #cfRoot .cf-log2-out .cf-disp-grid.cf-3{ grid-template-columns:repeat(2,1fr); gap:8px; }
  body.cw-hubs #cfRoot .cf-disp{ min-height:52px; font-size:15px; }
  /* lists become one column of cards; the one action fills the card's foot */
  body.cw-hubs .cwmc .cards, body.cw-hubs .cwwh .lanes, body.cw-hubs .cwpb .panes, body.cw-hubs .cwpb .grid{ grid-template-columns:1fr !important; }
  body.cw-hubs .cwst .cols, body.cw-hubs .cwnt .cols, body.cw-hubs .cwpy .cols, body.cw-hubs .cwmc .cols{ flex-direction:column; }
  body.cw-hubs .cwmh .clockrow{ grid-template-columns:1fr; }
  body.cw-hubs .cwmh .clockbtn{ padding:18px; font-size:18px; }
  body.cw-hubs .cwwh .call, body.cw-hubs .cwmc .btn.wide, body.cw-hubs .cwpy .btn.navy{ width:100%; box-sizing:border-box; padding:14px; font-size:16px; }
  body.cw-hubs .cwpb .sticky{ left:0; }
}

/* brief p15: the floor's own text size — set from My Account, kept on the device. */
body.cw-text-large{ font-size:17px; }
body.cw-text-large .cwpo, body.cw-text-large #mainContent{ font-size:17px; }