/* ══ theme-refresh.css — the 2026 visual refresh, as ONE overlay ══════════════════════════════
   Saifi (Aug 15 2026): "comprehensive UI/UX overhaul… moderate but very important visual change…
   DO NOT BREAK ANYTHING, do not take away information or how things function. QoL and aesthetics."

   HOW THIS WORKS, AND WHY IT CANNOT BREAK BEHAVIOUR. The portal already runs on design tokens —
   every door and all ~200 modules read var(--card), var(--bdr), var(--gold) and friends from ONE
   :root block in portal-head.css. This file loads AFTER the existing sheets and does two things:

     1. re-tunes the TOKENS (borders, surfaces, shadows, radii) — which restyles every component
        that already reads them, coherently, at zero risk;
     2. polishes the SHARED CLASSES (sidebar, cards, tables, buttons, inputs, modals) and gives
        every interactive element real hover / active / focus-visible states.

   It contains no markup, no JS, no layout restructuring — widths, grids and positions are left
   alone so nothing reflows and no caller has to re-learn where anything is. Delete the one <link>
   and the old look is back byte-for-byte.

   IDENTITY IS KEPT ON PURPOSE. Same navy, same CWLG blue, same Newsreader/Inter pairing — callers
   must recognise the portal instantly. What changes is the finish: cool hairline borders instead
   of #c4c4c4 gray, layered soft shadows instead of flat cards, a consistent radius scale, and
   focus rings that actually exist.

   SPECIFICITY RULE. Module styles are injected at runtime and land AFTER this file, so source
   order cannot be relied on. Overrides here win by SPECIFICITY instead: every selector is
   prefixed with `body` (+1) rather than sprayed with !important. !important appears ONLY where
   portal-head/body.css already uses it on the same property — matching like for like.          */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────────────────────────── */
:root{
  /* borders: the single biggest ager of the old look was #c4c4c4. Cool-tinted hairlines. */
  --bdr:#dfe6ee;
  --bdr-l:#e9eef4;
  --border:#dfe6ee;

  /* surfaces: white cards on a slightly cooler canvas, so cards read as raised, not outlined */
  --bg2:#f4f7fa;
  --bg-soft:#f4f7fa;
  --card2:#f6f9fc;
  --card-alt:#f6f9fc;
  --card-hover:#eef4fa;

  /* the shadow scale — soft, cool, layered; never a hard gray blur */
  --shadow-1:0 1px 2px rgba(13,27,42,.05),0 1px 4px rgba(13,27,42,.04);
  --shadow-2:0 2px 6px rgba(13,27,42,.06),0 8px 24px rgba(13,27,42,.06);
  --shadow-3:0 6px 16px rgba(13,27,42,.09),0 20px 48px rgba(13,27,42,.10);

  /* the radius scale — one family: controls 10, cards 14, modals 18 */
  --r-ctl:10px;
  --r-card:14px;
  --r-modal:18px;

  /* focus ring — brand blue, visible on white AND on tinted rows (WCAG 2.4.7) */
  --focus-ring:0 0 0 2px #fff,0 0 0 4px rgba(0,122,187,.55);
}

/* ── 2 · BASE ───────────────────────────────────────────────────────────────────────────────── */
body{background:var(--bg2)}
body ::selection{background:rgba(0,122,187,.18);color:inherit}

/* thin, quiet scrollbars everywhere a pane scrolls */
body ::-webkit-scrollbar{width:10px;height:10px}
body ::-webkit-scrollbar-track{background:transparent}
body ::-webkit-scrollbar-thumb{background:#c9d4e0;border-radius:100px;border:2px solid transparent;background-clip:content-box}
body ::-webkit-scrollbar-thumb:hover{background:#a9bacb;border:2px solid transparent;background-clip:content-box}

/* ── 3 · FOCUS — every interactive element gets a real keyboard ring ────────────────────────── */
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body a:focus-visible,
body [tabindex]:focus-visible,
body .sidebar-item:focus-visible{
  outline:none !important;
  box-shadow:var(--focus-ring) !important;
  border-radius:var(--r-ctl);
}
/* mouse users keep a clean click — the ring is keyboard-only by :focus-visible */

/* ── 4 · SIDEBAR ────────────────────────────────────────────────────────────────────────────
   Scoped to the LIGHT sidebar only: the floor's dark variant (body.cw-sb-dark) carries its own
   explicit palette in module CSS, and a light-blue hover tint on a dark rail would be wrong.  */
body .sidebar-item{
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
body:not(.cw-sb-dark) .sidebar-item:hover{background:rgba(0,122,187,.07) !important;color:#0d1b2a !important}
body:not(.cw-sb-dark) .sidebar-item:active{background:rgba(0,122,187,.12) !important}
body:not(.cw-sb-dark) .sidebar-item.active{
  background:rgba(0,122,187,.10) !important;
  color:#0d1b2a !important;
  border-left:3px solid var(--gold) !important;
  font-weight:700 !important;
}
body.cw-sb-dark .sidebar-item:hover{background:rgba(255,255,255,.07) !important}
body.cw-sb-dark .sidebar-item.active{border-left:3px solid var(--gold) !important}
body .sidebar-item .icon{opacity:.75;transition:opacity .15s}
body .sidebar-item:hover .icon,body .sidebar-item.active .icon{opacity:1}

/* ── 5 · PAGE HEADERS — one typographic hierarchy ───────────────────────────────────────────── */
body .page-header h1{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.4px;
  color:#0d1b2a;
}
/* measured 4.09:1 against the canvas during QA — under WCAG AA's 4.5. A module rule outranks
   the token here, so the AA floor is pinned explicitly. #47586a = 5.6:1 on the tinted canvas. */
body .page-header .ph-sub{color:#47586a !important;line-height:1.55}

/* ── 6 · CARDS — raised, not outlined ───────────────────────────────────────────────────────── */
body .cc-card,body .card,body .stat-card{
  border-radius:var(--r-card) !important;   /* matches the existing !important polish layer */
  border-color:var(--bdr-l) !important;
  box-shadow:var(--shadow-1);
  transition:box-shadow .18s ease,border-color .18s ease;
}
/* cards that are genuinely clickable lift; static cards stay still (cursor is the contract) */
body .cc-card[onclick]:hover,body .card[onclick]:hover,
body .stat-card[onclick]:hover,body .cc-card[style*="cursor:pointer"]:hover{
  box-shadow:var(--shadow-2);
  border-color:#cfdbe8 !important;
}
body .cc-hero{border-radius:var(--r-card);box-shadow:var(--shadow-1)}

/* ── 7 · TABLES — calm headers, readable rows ───────────────────────────────────────────────── */
body .cc-tbl th,body table.pw-tbl th{
  font:800 10.5px var(--font-body);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#5f7184;
  background:#f7fafc;
  border-bottom:1px solid var(--bdr-l);
}
body .cc-tbl td{border-color:#f0f4f8}
body .cc-tbl tbody tr{transition:background .12s ease}
body .cc-tbl tbody tr:hover{background:#f6faff}

/* ── 8 · BUTTONS — one behaviour family ─────────────────────────────────────────────────────── */
body .btn,body .lh-b,body .nav-btn,body .login-btn,body .pin-btn{
  border-radius:var(--r-ctl) !important;
  transition:transform .12s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
body .btn:hover,body .lh-b:hover{box-shadow:var(--shadow-1)}
body .btn:active,body .lh-b:active,body .login-btn:active,body .pin-btn:active{
  transform:translateY(1px);
  box-shadow:none;
}
body .btn:disabled,body .lh-b:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ── 9 · INPUTS ─────────────────────────────────────────────────────────────────────────────── */
body input[type="text"],body input[type="password"],body input[type="email"],
body input[type="number"],body input[type="date"],body input[type="search"],
body select,body textarea{
  border-radius:var(--r-ctl);
  transition:border-color .15s ease,box-shadow .15s ease;
}
body input:focus,body select:focus,body textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(0,122,187,.12);
}

/* ── 10 · LOGIN + PIN — the first thing anyone sees ─────────────────────────────────────────── */
body .login-card{
  border-radius:var(--r-modal);
  border-color:var(--bdr-l);
  box-shadow:var(--shadow-3);
}
/* the card's top accent strip carries a hard-coded 16px radius; follow the new card radius or
   it pokes past the rounded corner (caught by the visual pass) */
body .login-card::before{border-radius:var(--r-modal) var(--r-modal) 0 0}
body .login-field input{border-radius:var(--r-ctl);padding:14px 16px}
body .pin-modal{border-radius:var(--r-modal);box-shadow:var(--shadow-3)}
body .pin-modal-overlay{background:rgba(13,27,42,.45);backdrop-filter:blur(6px)}
body .pin-input{
  border-radius:var(--r-card);
  letter-spacing:.35em;
  font-variant-numeric:tabular-nums;
}
body .modal{border-radius:var(--r-modal);box-shadow:var(--shadow-3)}
body .modal-overlay{background:rgba(13,27,42,.45);backdrop-filter:blur(6px)}

/* ── 11 · LOADING — one shimmer, reusable anywhere ──────────────────────────────────────────
   Additive utility: give any placeholder the class cw-skel (modules can adopt it gradually).
   The boot overlay + "Loading…" texts remain untouched — this only ADDS a vocabulary.        */
body .cw-skel{
  position:relative;overflow:hidden;
  background:#edf2f7;border-radius:8px;color:transparent !important;
  min-height:12px;
}
body .cw-skel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:translateX(-100%);
  animation:cwShimmer 1.4s infinite;
}
@keyframes cwShimmer{to{transform:translateX(100%)}}

/* empty states: the classes modules already render, made consistent */
body .lh-empty{
  background:#fff;border:1px dashed #d6e0ea;border-radius:var(--r-card);
  color:#5f7184;padding:28px 20px;
}

/* ── 12 · NAVIGATION AIDS — polish what already exists ──────────────────────────────────────
   The sidebar has had a filter box (#cwNavSearch) and a ⌘K portal search since June; they work,
   they were just styled like afterthoughts, so nobody discovers them. Making them LOOK like a
   search field is the discoverability fix — no new mechanism, no second search to maintain.    */
/* CORRECTION (same day): the in-sidebar filter (#cwNavSearch) turned out to be deliberately
   HIDDEN since Jun 29 — portal-head.css:1458 declutters it with display:none !important. The
   styling this file briefly gave it dressed an invisible element (computed-style checks pass on
   hidden elements; only the screenshot caught it). The declutter decision stands; the ⌘K search
   now includes screens, which covers the filter's job. Only the hint row below is real. */

/* the Ctrl+K hint row at the top of the rail — quiet, but present */
body #cwNavKHint{
  display:block;width:calc(100% - 20px);margin:0 10px 10px;padding:7px 12px;
  border:none;border-radius:var(--r-ctl);background:none;cursor:pointer;text-align:left;
  font:600 11px var(--font-body);color:#8a98a8;transition:background .15s ease,color .15s ease;
}
body #cwNavKHint:hover{background:rgba(0,122,187,.06);color:#33424f}
body #cwNavKHint kbd{
  display:inline-block;margin-left:3px;padding:1px 6px;border:1px solid var(--bdr);
  border-bottom-width:2px;border-radius:5px;background:#fff;
  font:700 10px var(--font-body);color:#47586a;
}
body.cw-sb-dark #cwNavKHint{color:#93a7ba}
body.cw-sb-dark #cwNavKHint kbd{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#cdd9e5}


/* ── 13 · COMMAND CENTER TIDY (cwlg_cc_tidy.js) ─────────────────────────────────────────────
   The Open… quick-links bar the tidy module builds from the page's own scattered navigation
   buttons, and the one-control broadcast rollup. Nothing here styles information — only the
   relocated chrome. */
body #cwOpenBar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--bdr-l);border-radius:var(--r-card);
  box-shadow:var(--shadow-1);padding:9px 12px;margin:0 0 14px;
}
body #cwOpenBar .cw-openbar-lbl{
  font:800 10px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:#8a98a8;
  margin-right:4px;
}
body #cwOpenBar .cw-openlink{
  border:1px solid var(--bdr) !important;background:#f7fafc !important;color:#0b2942 !important;
  border-radius:100px !important;padding:6px 14px !important;
  font:700 12px var(--font-body) !important;cursor:pointer;
  text-transform:none !important;letter-spacing:0 !important;  /* the CC uppercases buttons; pills stay calm */
  transition:background .15s ease,border-color .15s ease,transform .12s ease;
}
body #cwOpenBar .cw-openlink:hover{background:#eef4fa !important;border-color:#cfdbe8 !important}
body #cwOpenBar .cw-openlink:active{transform:translateY(1px)}
body #cwSendBar{display:flex;gap:8px;align-items:center;margin:4px 0 8px;flex-wrap:wrap}
body #cwSendBar select{
  border:1px solid var(--bdr);border-radius:var(--r-ctl);padding:8px 10px;
  font:600 12.5px var(--font-body);color:#0b2942;background:#fff;min-width:170px;
}
body #cwSendBar #cwSendGo{
  border:1px solid #007abb;background:#007abb;color:#fff;border-radius:var(--r-ctl);
  padding:8px 14px;font:700 12px var(--font-body);cursor:pointer;
}
body #cwSendBar #cwSendGo:hover{background:#0069a3}

/* the folded rows (cwlg_cc_tidy) — lead pills stay brand-coloured so the eye still finds them */
body #cwOpenBar .cw-openlead{
  background:#0b2942 !important;color:#fff !important;border-color:#0b2942 !important;
}
body #cwOpenBar .cw-openlead:hover{background:#123a5c !important;border-color:#123a5c !important}
body #mainContent #ccTabs{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
body #mainContent #ccTabs .ccf-tabs.cw-folded{
  display:inline-flex;margin:0 0 0 auto;padding:2px;gap:2px;
  background:#f1f5f9;border-radius:100px;border:1px solid var(--bdr-l);
}
body #mainContent .ccf-tabs.cw-folded button{border-radius:100px !important;padding:5px 14px !important}

/* ══ HOVER FOR THE BUTTONS THAT NEVER HAD ONE (Saifi, Aug 16) ═══════════════════════════════
   Most CC buttons are module-emitted with inline styles no stylesheet class can restyle — but
   filter works regardless of what background they carry. Buttons the theme already animates are
   excluded so nothing hovers twice. Transparent tab-style buttons get a tint instead, because
   brightness on a transparent background is invisible. */
body #mainContent button:not(.cw-openlink):not(.btn):not(.lh-b):not(:disabled){
  transition:filter .13s ease,background .13s ease,transform .12s ease;
}
body #mainContent button:not(.cw-openlink):not(.btn):not(.lh-b):not(:disabled):hover{
  filter:brightness(.955);
}
body #mainContent button:not(.cw-openlink):not(.btn):not(.lh-b):not(:disabled):active{
  transform:translateY(1px);
}
body #mainContent #ccTabs > button:hover,
body #mainContent .ccf-tabs button:hover{
  background:rgba(0,122,187,.07) !important;filter:none;border-radius:8px;
}

/* ── 14 · MOBILE NAV (Aug 16 — the pass) ───────────────────────────────────────────────
   Measured at 375px: the Open bar stacked its 8 pills into 154px of screen, and 16 tap targets in
   the bar + tab row were under 38px. On mobile, chip rows become ONE-LINE swipe rows (the
   standard pattern) and every target gets a 40px+ touch box. The keyboard hint chips are
   meaningless on touch and disappear; the row itself stays, because it is also the tap path to
   the portal-wide search. */
@media (max-width:640px){
  body #cwOpenBar{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:8px 10px;gap:8px;scrollbar-width:none;
  }
  body #cwOpenBar::-webkit-scrollbar{display:none}
  body #cwOpenBar .cw-openlink{flex:0 0 auto;padding:10px 16px !important;min-height:40px}
  body #cwOpenBar .cw-openbar-lbl{display:none}   /* the pills explain themselves; keep the width */

  body #mainContent #ccTabs{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:4px;padding-bottom:2px;
  }
  body #mainContent #ccTabs::-webkit-scrollbar{display:none}
  body #mainContent #ccTabs > button{flex:0 0 auto;min-height:42px}
  body #mainContent #ccTabs .ccf-tabs.cw-folded{margin-left:8px;flex:0 0 auto}
  body #mainContent .ccf-tabs.cw-folded button{min-height:36px}

  body #cwNavKHint kbd{display:none}
  body #cwSendBar select,body #cwSendBar #cwSendGo{min-height:42px}
}

/* ── 15 · MOTION SAFETY ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  body *,body *::before,body *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}