/* CBPS UI Kit  v1.1.0  (extracted from PowerHub v4.0.1, 2026-10-06)
   Master copy lives in C:\Users\Will\CBPS_local\_ui-kit. Never edit an app's copy; edit the master, bump the version, re-copy.
   Contains the shared look only: tokens, sidebar, floating pill, hero, glance cards, modals, footer, phone bottom bar.
   App-specific styles (Whiteboard table, training tiles layout, etc.) stay in each app's own CSS. See UI-SPEC.md. */

/* ---------- 1. Tokens ---------- */
:root {
  --blue: #123f73;
  --blue-dark: #0b2a4e;
  --blue-soft: #eaf2fb;
  --border: #d8e0ea;
  --text: #1f2933;
  --muted: #64748b;
  --green: #1f7a4d;
  --orange: #b86b00;
  --red: #b42318;
  --white: #ffffff;
  --shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
  /* card status tones (set --tone on a .glance-card, or use .is-alert / .is-clear) */
  --tone-blue: #1b6fb5;
  --tone-red: #d13a26;
  --tone-green: #1f8a58;
  --tone-amber: #e59a1a;
  --tone-sky: #4aa8ef;
  --accent: #009dff;
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (min-width: 901px) { html { font-size: 13px; } }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(90deg, rgba(247,249,252,.08) 0%, rgba(247,249,252,.38) 22%, rgba(247,249,252,.55) 50%, rgba(247,249,252,.38) 78%, rgba(247,249,252,.08) 100%),
    radial-gradient(circle at 18% 18%, rgba(0,157,255,.16), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(18,63,115,.16), transparent 30%),
    url("assets/background_hub_v2.png") center top / cover fixed no-repeat,
    linear-gradient(180deg, #f3f6fa 0%, #eef2f6 45%, #f7f9fb 100%);
  color: var(--text);
}
a { color: inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- 3. Loader (needs assets/loading_spinner_electric_ring.svg) ---------- */
.power-loader { display:inline-flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:.82rem; font-weight:850; line-height:1; vertical-align:middle; }
.power-loader img { display:block; width:24px; height:24px; object-fit:contain; }
.power-loader--inline img { width:22px; height:22px; }
.power-loader--section { width:100%; min-height:38px; padding:2px 0; }
.power-loader--section img { width:38px; height:38px; }

/* ---------- 4. Layout shell ---------- */
.app-shell { display:grid; grid-template-columns:232px minmax(0, 1fr); align-items:start; }
.page-shell { display:flex; flex-direction:column; width:min(1180px, calc(100% - 64px)); margin:0 auto; padding:0 16px 0; background:transparent; box-shadow:none; min-height:100vh; }
@media (min-width: 901px) {
  .page-shell { width:min(1244px, calc(100% - 32px)); padding:0 64px 16px 16px; }
}

/* ---------- 5. Sidebar (collapsible, grouped, "Soon" items) ---------- */
.side-nav { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:6px; padding:24px 12px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; background:linear-gradient(180deg, rgba(4,16,31,.96), rgba(10,38,72,.94)); border-right:1px solid rgba(0,157,255,.22); }
.side-nav::-webkit-scrollbar { display:none; }
.side-link { display:flex; align-items:center; gap:12px; width:100%; padding:10px 14px; border:0; border-radius:12px; background:transparent; color:rgba(255,255,255,.92); font:inherit; font-size:.95rem; font-weight:750; text-align:left; text-decoration:none; cursor:pointer; transition:background .16s ease, box-shadow .16s ease; }
.side-link svg { flex:0 0 24px; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.side-link small { display:block; margin-top:1px; font-size:.72rem; font-weight:650; opacity:.75; }
.side-link span { white-space:nowrap; }
.side-link:hover, .side-link:focus-visible { background:rgba(0,157,255,.16); outline:none; }
.side-link.is-active { background:linear-gradient(90deg, #0f6fd1, #1590f0); box-shadow:0 6px 18px rgba(0,157,255,.32); color:#fff; }
.side-link.is-disabled { opacity:.5; cursor:default; padding-right:8px; }
.side-link.is-disabled:hover { background:transparent; }
.side-link-small { font-size:.84rem; font-weight:650; color:rgba(255,255,255,.78); }
.side-group-label { margin:14px 14px 2px; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.55); font-size:.68rem; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }
.side-soon { margin-left:auto; padding:2px 6px; border:1px solid rgba(255,255,255,.28); border-radius:999px; font-size:.6rem; font-style:normal; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.side-spacer { flex:1; }
.side-toggle { align-self:flex-end; flex:0 0 auto; width:34px; height:34px; margin:-10px 2px 4px 0; display:grid; place-items:center; border:0; border-radius:10px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); cursor:pointer; }
.side-toggle:hover, .side-toggle:focus-visible { background:rgba(255,255,255,.18); outline:none; }
.side-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
@media (min-width: 901px) {
  .app-shell { transition:grid-template-columns .2s ease; }
  .sb-collapsed .app-shell { grid-template-columns:68px minmax(0, 1fr); }
  .sb-collapsed .side-nav { padding:24px 8px; }
  .sb-collapsed .side-toggle { align-self:center; margin:-10px 0 4px; }
  .sb-collapsed .side-toggle svg { transform:rotate(180deg); }
  .sb-collapsed .side-nav .side-link { justify-content:center; gap:0; padding:11px 0; }
  .sb-collapsed .side-nav .side-link > span, .sb-collapsed .side-nav .side-soon { display:none; }
  .sb-collapsed .side-nav .side-group-label { height:0; margin:8px 10px 4px; padding:0; overflow:hidden; font-size:0; line-height:0; }
}

/* ---------- 6. Floating pill (profile + search), sits outside the hero ---------- */
.utility-wrap { position:sticky; top:-16px; z-index:200; height:0; display:flex; justify-content:flex-end; padding-right:14px; pointer-events:none; }
.utility { position:relative; margin-top:30px; align-self:flex-start; display:flex; align-items:center; gap:2px; padding:4px; border-radius:999px; background:rgba(4,16,31,.72); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(12px); pointer-events:auto; }
.u-btn { position:relative; width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#fff; cursor:pointer; }
.u-btn svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.u-btn:hover, .u-btn:focus-visible, .u-btn[aria-expanded="true"] { background:rgba(255,255,255,.16); outline:none; }
.user-wrap { position:relative; }
.user-btn { position:relative; display:flex; align-items:center; gap:4px; height:42px; padding:0 8px 0 4px; border:0; border-radius:999px; background:transparent; color:#fff; cursor:pointer; }
.user-btn:hover, .user-btn:focus-visible, .user-btn[aria-expanded="true"] { background:rgba(255,255,255,.16); outline:none; }
.user-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg, #1590f0, #0f4f9c); border:1px solid rgba(255,255,255,.4); }
.user-avatar svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; }
.user-caret { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.user-menu { position:absolute; right:0; top:calc(100% + 10px); z-index:300; width:min(340px, calc(100vw - 24px)); padding:0; overflow:hidden; border:1px solid rgba(15,23,42,.10); border-radius:16px; background:#fff; color:var(--text); box-shadow:0 18px 44px rgba(2,10,24,.30); }
.user-menu[hidden] { display:none; }
.um-head { padding:14px 16px; border-bottom:1px solid rgba(15,23,42,.08); }
.user-menu strong { display:block; color:var(--blue-dark); font-size:1rem; }
.user-menu span { display:block; margin-top:4px; color:var(--muted); font-size:.82rem; font-weight:650; line-height:1.4; }
@media (min-width: 901px) {
  .utility-wrap { top:-2px; padding-right:0; }
  .utility { flex-direction:column; margin-top:16px; right:-60px; gap:4px; padding:5px; }
  .user-btn { width:42px; padding:0; justify-content:center; }
  .user-caret { display:none; }
  .user-menu { top:0; right:calc(100% + 14px); }
}

/* ---------- 7. Notifications panel + search ---------- */
.notif-badge { position:absolute; top:3px; right:2px; min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:#d92d20; color:#fff; font-size:.7rem; font-weight:950; line-height:1; box-shadow:0 0 0 2px #0a2548; }
.notif-badge[hidden] { display:none; }
.notif-panel { width:auto; overflow:visible; }
.notif-head { padding:12px 14px; border-bottom:1px solid rgba(182,199,218,.9); background:linear-gradient(90deg, rgba(234,242,251,.96), #fff); color:var(--blue-dark); font-size:.8rem; font-weight:950; letter-spacing:.075em; text-transform:uppercase; }
.notif-item { display:block; width:100%; padding:11px 14px; border:0; border-top:1px solid rgba(216,224,234,.7); background:transparent; color:var(--blue-dark); font:inherit; font-size:.88rem; font-weight:800; text-align:left; }
.notif-item small { display:block; margin-top:2px; color:var(--muted); font-size:.74rem; font-weight:700; line-height:1.3; }
.notif-item.is-alert small { color:var(--red); }
.notif-empty { padding:16px 14px; color:var(--green); font-size:.88rem; font-weight:750; }
.notif-version { padding:10px 14px; border-top:1px solid rgba(216,224,234,.7); color:var(--muted); font-size:.72rem; font-weight:700; text-align:center; }
.search-overlay { position:fixed; inset:0; z-index:400; display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 16px; background:rgba(2,10,24,.55); backdrop-filter:blur(3px); }
.search-overlay[hidden] { display:none; }
.search-panel { width:min(620px, 100%); border-radius:20px; background:#fff; overflow:hidden; box-shadow:0 28px 70px rgba(0,0,0,.35); }
.search-form { display:flex; align-items:center; gap:12px; height:60px; padding:0 18px; }
.search-form svg { flex:0 0 22px; width:22px; height:22px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; }
.search-form input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:1.05rem; }
.search-form kbd { padding:3px 8px; border:1px solid rgba(15,23,42,.15); border-radius:6px; color:var(--muted); font:inherit; font-size:.7rem; font-weight:800; }
.search-results { border-top:1px solid rgba(15,23,42,.08); max-height:min(55vh, 420px); overflow-y:auto; }
.search-results[hidden] { display:none; }
.result-group { padding:8px 14px 4px; color:var(--muted); font-size:.66rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.result-item { display:block; width:100%; padding:10px 14px; border:0; border-top:1px solid rgba(216,224,234,.7); background:transparent; color:var(--blue-dark); font:inherit; font-size:.9rem; font-weight:800; text-align:left; text-decoration:none; cursor:pointer; }
.result-item small { display:block; margin-top:1px; color:var(--muted); font-size:.74rem; font-weight:700; }
.result-item:hover, .result-item:focus-visible, .result-item.is-first { background:var(--blue-soft); outline:none; }
.result-empty { padding:14px; color:var(--muted); font-size:.88rem; font-weight:700; }

/* ---------- 8. Hero banner ---------- */
.hero { position:relative; overflow:visible; background:transparent; color:#fff; display:flex; align-items:center; height:188px; min-height:188px; margin:16px 0 16px; border-radius:26px; border:1px solid rgba(0,157,255,.22); box-shadow:none; }
.hero-media { position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:26px; }
.hero::before { content:""; position:absolute; inset:0; z-index:1; border-radius:26px; background:transparent; pointer-events:none; }
.hero-bg { display:block; width:100%; height:100%; object-fit:cover; object-position:center 76%; }
.hero-inner { position:relative; z-index:20; width:100%; display:grid; grid-template-columns:minmax(0, 1fr); align-items:center; gap:22px; padding:14px 18px 14px clamp(185px, 20vw, 343px); }
.hero-copy { max-width:760px; transform:translateX(10%); text-shadow:0 2px 12px rgba(0,0,0,.55); }
.eyebrow { margin:0 0 6px; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:850; opacity:.9; }
.site-title { margin:0; font-size:clamp(2.2rem, 4.4vw, 3.8rem); line-height:.95; font-weight:950; letter-spacing:-.055em; }
.title-hub { color:var(--accent); text-shadow:0 0 14px rgba(0,157,255,.48); }
.site-title::after { content:""; display:block; width:170px; height:3px; margin-top:.45rem; border-radius:999px; background:linear-gradient(90deg, transparent, var(--accent), transparent); }
.site-subtitle { margin:.5rem 0 0; font-size:clamp(.86rem, 1.14vw, 1.05rem); font-weight:750; letter-spacing:.08em; color:rgba(255,255,255,.88); }

/* ---------- 9. Note bar (Team Note style banner) ---------- */
.announcement-row { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; align-items:center; margin:4px 0 18px; position:relative; z-index:80; }
.announcement-main { display:flex; align-items:center; gap:16px; min-width:0; padding:14px 18px; border:1px solid rgba(15,23,42,.08); border-radius:18px; background:rgba(255,255,255,.88); backdrop-filter:blur(8px); cursor:pointer; transition:border-color .18s ease; }
.announcement-main:hover { border-color:var(--tone-blue); }
.announcement-main:focus-visible { outline:2px solid rgba(0,157,255,.72); outline-offset:4px; }
.note-icon { flex:0 0 52px; width:52px; height:52px; display:grid; place-items:center; border-radius:12px; background:rgba(27,111,181,.10); }
.note-icon svg { width:26px; height:26px; fill:none; stroke:var(--tone-blue); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.note-body { flex:1 1 auto; min-width:0; }
.note-label { display:block; margin-bottom:2px; color:var(--tone-blue); font-size:.68rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.announcement-text { color:var(--blue-dark); font-size:.92rem; font-weight:750; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.note-more { flex:0 0 auto; padding:8px 14px; border-radius:999px; background:var(--blue); color:#fff; font-size:.78rem; font-weight:900; white-space:nowrap; }

/* ---------- 10. Section titles + buttons ---------- */
.section-title { margin:22px 2px 12px; }
.section-title h2 { margin:0; display:inline-block; padding-bottom:10px; font-size:1.28rem; color:var(--blue-dark); font-weight:850; letter-spacing:.055em; text-transform:uppercase; }
.section-title h2::after { content:""; display:block; width:90px; height:3px; margin-top:8px; border-radius:999px; background:linear-gradient(90deg, transparent, var(--accent), transparent); }
.section-title p { margin:5px 0 0; color:var(--muted); font-size:.9rem; line-height:1.35; }
.small-button { border:1px solid rgba(18,63,115,.18); background:#fff; color:var(--blue-dark); border-radius:999px; padding:8px 12px; font-size:.76rem; font-weight:950; cursor:pointer; }
.small-button.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
a.small-button { display:inline-block; text-decoration:none; }

/* ---------- 11. Glance cards ("At a Glance") ---------- */
.glance-section { margin:0 0 10px; }
.glance-head { display:flex; justify-content:flex-end; align-items:flex-end; gap:12px; }
.glance-updated { margin-bottom:12px; color:var(--muted); font-size:.78rem; font-weight:700; white-space:nowrap; }
.glance-updated[hidden] { display:none; }
.glance-grid { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1fr); gap:16px; align-items:stretch; }
.glance-grid .glance-card { min-height:400px; }
.glance-card { --tone:var(--tone-blue); --tone-soft:rgba(27,111,181,.10); position:relative; display:flex; flex-direction:column; gap:12px; padding:18px 20px; border:1px solid rgba(15,23,42,.08); border-radius:22px; background:rgba(255,255,255,.20); backdrop-filter:blur(14px); box-shadow:none; text-decoration:none; transition:border-color .18s ease, transform .18s ease, background .18s ease; }
.glance-card:hover, .glance-card:focus-visible { transform:translateY(-2px); border-color:var(--tone); background:rgba(255,255,255,.45); outline:none; }
.glance-card.is-alert { --tone:var(--tone-red); --tone-soft:rgba(209,58,38,.10); }
.glance-card.is-clear { --tone:var(--tone-green); --tone-soft:rgba(31,138,88,.10); }
.gc-head { display:flex; align-items:center; gap:12px; }
.gc-head h3 { margin:0; color:var(--muted); font-size:.8rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.gc-sample { margin-left:auto; padding:3px 9px; border-radius:999px; background:#fff3cd; border:1px solid #e6c65c; color:#7a5b00; font-size:.64rem; font-weight:950; letter-spacing:.06em; text-transform:uppercase; }
.gc-sample[hidden] { display:none; }
.glance-icon { flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--tone-soft); }
.glance-icon svg { width:22px; height:22px; fill:none; stroke:var(--tone); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.glance-num { color:var(--blue-dark); font-size:2.8rem; font-weight:950; line-height:1; letter-spacing:-.03em; }
.glance-link { margin-top:auto; color:var(--tone); font-size:.8rem; font-weight:900; }
.gc-count { margin-left:auto; display:grid; justify-items:center; gap:2px; }
.gc-count .glance-num { color:var(--tone); font-size:1.6rem; letter-spacing:-.04em; }
.gc-count-label { color:var(--muted); font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.gc-next { padding:10px 12px; border-radius:14px; background:var(--tone-soft); color:var(--blue-dark); font-size:.82rem; font-weight:750; line-height:1.35; }
.gc-next:empty { display:none; }
.gc-next b { color:var(--tone); }
.gc-state { display:flex; align-items:center; gap:8px; column-span:all; color:var(--muted); font-size:.84rem; font-weight:750; white-space:normal; }
.gc-state.is-error { color:var(--tone-red); }
/* stacked status bar + tiles + legend rows */
.gc-bar { display:flex; gap:3px; height:12px; }
.gc-bar span { display:block; height:100%; min-width:8px; border-radius:999px; }
.gc-bar .seg-red { background:var(--tone-red); }
.gc-bar .seg-amber { background:var(--tone-amber); }
.gc-bar .seg-blue { background:var(--tone-sky); }
.gc-legend { display:grid; gap:2px; }
.gc-legend-tiles { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.gc-tile { --c:var(--tone-blue); display:grid; align-content:start; gap:3px; padding:8px 9px 9px; border-radius:12px; border-top:3px solid var(--c); background:rgba(15,23,42,.04); }
.gc-tile.is-red { --c:var(--tone-red); } .gc-tile.is-amber { --c:var(--tone-amber); } .gc-tile.is-blue { --c:var(--tone-sky); }
.gc-tile b { color:var(--c); font-size:1.6rem; font-weight:950; line-height:1; letter-spacing:-.02em; }
.gc-tile.is-amber b { color:var(--orange); } .gc-tile.is-blue b { color:var(--tone-blue); }
.gc-tile span { color:var(--blue-dark); font-size:.78rem; font-weight:800; line-height:1.2; }
/* progress ring (set --pct 0-100) */
.gc-ring-wrap { display:flex; align-items:center; gap:20px; }
.gc-ring { --pct:0; position:relative; flex:0 0 124px; width:124px; height:124px; display:grid; place-items:center; }
.gc-ring::before { content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--tone) calc(var(--pct) * 1%), rgba(15,23,42,.10) 0); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); mask:radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); }
.gc-ring-in { position:relative; display:grid; place-items:center; }
.gc-ring-in b { color:var(--blue-dark); font-size:1.9rem; font-weight:950; letter-spacing:-.03em; }
.gc-ring-text { display:grid; gap:3px; min-width:0; }
.gc-ring-text strong { color:var(--blue-dark); font-size:1.05rem; font-weight:900; }
.gc-ring-text > span { color:var(--muted); font-size:.84rem; font-weight:750; }
.gc-ring-text > span:empty { display:none; }
/* scrolling fill area + name lists */
.gc-fill { flex:1 1 0px; min-height:0; overflow:hidden; display:grid; align-content:start; gap:10px; padding-top:10px; border-top:1px solid rgba(15,23,42,.10); -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
.gc-fill .gc-list-label { margin-bottom:4px; }
.gc-split { margin-top:auto; padding-top:12px; border-top:1px solid rgba(15,23,42,.10); }
.gc-list-label { margin-bottom:6px; color:var(--muted); font-size:.68rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.gc-list-label:empty { display:none; }
.gc-list-label.is-red { color:var(--tone-red); }
.gc-names { columns:3 80px; column-gap:12px; color:var(--blue-dark); font-size:.84rem; font-weight:800; line-height:1.6; }
.gc-names span { display:block; break-inside:avoid; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gc-names span.is-late { color:var(--tone-red); }
.gc-names span.gc-ok { column-span:all; color:var(--tone-green); }
.gc-names span.gc-more-names { display:none; }
.gc-names i { margin-left:4px; color:var(--muted); font-style:normal; font-weight:700; }
.gc-names.gc-names-overdue { columns:2 140px; font-size:.98rem; font-weight:900; line-height:1.55; }
.gc-names.gc-names-overdue span:not(.gc-ok):not(.gc-more-names) { color:var(--tone-red); }
/* hanging count: "(2)" sits in the left margin so names stay aligned */
.gc-names span.gc-soon { position:relative; overflow:visible; }
.gc-ct { position:absolute; right:100%; margin-right:3px; color:var(--muted); font-size:.76rem; font-weight:800; white-space:nowrap; }
.gc-nm { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* simple item list rows (job list style) */
.gc-joblist { display:grid; gap:2px; }
.gc-job { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:0 12px; padding:5px 10px; border-radius:12px; cursor:pointer; }
.gc-job:hover { background:rgba(15,23,42,.05); }
.gc-job b { color:var(--tone); font-size:.86rem; font-weight:900; }
.gc-job span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--blue-dark); font-size:.88rem; font-weight:800; }
.gc-job em { grid-column:2; color:var(--muted); font-size:.74rem; font-style:normal; font-weight:700; }
.gc-more-jobs { padding:2px 10px; color:var(--muted); font-size:.78rem; font-weight:800; }
.gc-more-jobs.m { display:none; }
/* hover popover on a legend row */
.gc-row { position:relative; display:flex; align-items:center; gap:12px; padding:5px 12px; border-radius:14px; color:var(--blue-dark); font-size:.95rem; font-weight:800; cursor:default; }
.gc-row b { min-width:34px; font-size:1.5rem; font-weight:950; line-height:1; letter-spacing:-.02em; }
.gc-row[tabindex]:hover, .gc-row[tabindex]:focus-visible, .gc-row.is-open { background:rgba(15,23,42,.05); outline:none; }
.gc-row[hidden] { display:none; }
.gc-pop { display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:60; width:min(320px, 80vw); max-height:340px; overflow-y:auto; padding:12px 14px; border:1px solid rgba(15,23,42,.10); border-radius:16px; background:#fff; box-shadow:0 12px 30px rgba(15,23,42,.16); text-align:left; }
.gc-row:hover .gc-pop, .gc-row:focus-visible .gc-pop, .gc-row.is-open .gc-pop { display:block; }
.gc-pop-title { margin:0 0 6px; color:var(--muted); font-size:.66rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.gc-pop-row { display:grid; padding:7px 0; border-top:1px solid rgba(15,23,42,.07); }
.gc-pop-title + .gc-pop-row { border-top:0; }
.gc-pop-row strong { color:var(--blue-dark); font-size:.86rem; }
.gc-pop-row span { color:var(--muted); font-size:.74rem; font-weight:700; }

/* ---------- 12. Modal ---------- */
.modal-backdrop { display:none; position:fixed; inset:0; z-index:10000; padding:18px; background:rgba(5,16,34,.64); align-items:center; justify-content:center; }
.modal-backdrop.is-open { display:flex; }
.modal-card { width:min(560px, 100%); max-height:80vh; overflow:auto; border-radius:24px; border:1px solid rgba(0,157,255,.24); background:rgba(255,255,255,.97); box-shadow:0 28px 70px rgba(0,0,0,.30); padding:20px; }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:12px; }
.modal-head h2 { margin:0; color:var(--blue-dark); font-size:1.25rem; }
.modal-close { border:0; background:var(--blue-soft); color:var(--blue-dark); border-radius:999px; width:34px; height:34px; font-weight:950; cursor:pointer; }
.modal-body { color:var(--text); font-weight:700; line-height:1.5; white-space:pre-wrap; }
.modal-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* ---------- 13. Footer (disclaimer only, pinned to bottom of page) ---------- */
.footer { margin:auto 0 0; padding:40px 4px 14px; color:var(--muted); font-size:.82rem; text-align:center; border-top:1px solid rgba(216,224,234,.9); }
.footer-disclaimer { max-width:820px; margin:8px auto 0; font-size:.76rem; line-height:1.45; }

/* ---------- 14. Phone: bottom bar + More sheet ---------- */
.bottom-nav, .more-sheet, .more-backdrop { display:none; }
@media (max-width: 900px) {
  .glance-grid { grid-template-columns:minmax(0, 1fr); }
  .glance-grid .glance-card { min-height:0; }
  .gc-fill { flex:none; overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .app-shell { grid-template-columns:minmax(0, 1fr); }
  .side-nav { display:none; }
  .page-shell { width:min(100%, calc(100% - 24px)); }
  body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  .bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:250; display:flex; justify-content:space-around; gap:2px; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:rgba(4,16,31,.97); border-top:1px solid rgba(0,157,255,.28); backdrop-filter:blur(10px); }
  .bn-item { flex:1; min-width:0; display:grid; justify-items:center; gap:3px; padding:8px 2px; border:0; border-radius:12px; background:transparent; color:rgba(255,255,255,.72); font:inherit; font-size:.68rem; font-weight:800; text-decoration:none; cursor:pointer; }
  .bn-item svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .bn-item.is-active { color:#fff; }
  .bn-item.is-active svg { stroke:var(--tone-sky); }
  .more-backdrop.is-open { display:block; position:fixed; inset:0; z-index:260; background:rgba(2,10,24,.6); }
  .more-sheet.is-open { display:block; position:fixed; left:0; right:0; bottom:0; z-index:270; max-height:82vh; overflow-y:auto; padding:10px 12px calc(16px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; background:linear-gradient(180deg, #0a2548, #04101f); border-top:1px solid rgba(0,157,255,.3); }
  .more-grip { width:44px; height:5px; margin:2px auto 10px; border-radius:999px; background:rgba(255,255,255,.3); }
  .more-body { display:flex; flex-direction:column; gap:4px; }
  .more-body .side-link { padding:13px 14px; }
  .more-body .side-spacer { display:none; }
}

/* ---------- 15. Phone: compact hero, cards, pill ---------- */
@media (max-width: 700px) {
  .page-shell { padding:0 12px 12px; }
  .hero { overflow:hidden; border-radius:24px; aspect-ratio:16 / 6.3; height:auto; min-height:0; margin:12px 0 14px; background:linear-gradient(135deg, #061226 0%, #081a35 56%, #061226 100%); border:1px solid rgba(0,157,255,.18); }
  .hero-media, .hero::before { border-radius:24px; }
  .hero-bg { object-position:center center; }
  .hero::before { background:linear-gradient(90deg, rgba(2,10,24,.08), rgba(2,10,24,.28) 46%, rgba(2,10,24,.10)); }
  .hero-inner { min-height:0; height:100%; padding:14px 26px 14px 33%; align-items:center; justify-items:center; text-align:left; gap:10px; }
  .hero-copy { width:min(100%, 305px); max-width:305px; margin:0; padding:0; transform:none; text-shadow:0 2px 12px rgba(0,0,0,.60); }
  .site-title { font-size:clamp(1.54rem, 7.85vw, 1.96rem); }
  .site-title::after { width:96px; margin:.24rem 0 0; }
  .eyebrow { font-size:.43rem; letter-spacing:.085em; margin-bottom:5px; white-space:nowrap; }
  .site-subtitle { font-size:.54rem; letter-spacing:.045em; margin-top:.38rem; white-space:nowrap; }
  .announcement-row { margin-bottom:12px; }
  .announcement-text { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:.8rem; line-height:1.28; }
  .section-title { margin-top:14px; }
}
@media (max-width: 640px) {
  .glance-head { flex-direction:column; align-items:flex-start; gap:0; }
  .glance-updated { margin:-6px 2px 12px; }
  .announcement-row .announcement-main { padding:12px 14px; gap:12px; }
  .glance-grid { gap:12px; }
  .glance-card { padding:16px 16px 14px; }
  .gc-ring-wrap { gap:14px; }
  .note-icon { flex-basis:42px; width:42px; height:42px; }
  .note-more { display:none; }
  .user-menu { position:fixed; top:68px; left:12px; right:12px; width:auto; max-height:calc(100vh - 90px); overflow-y:auto; }
  .utility { margin-top:20px; }
  .eyebrow { display:none; }
  .hero-inner { align-items:end; padding-bottom:12px; }
  .u-btn { width:38px; height:38px; }
  .user-btn { height:38px; }
  .search-overlay { padding-top:8vh; }
  .gc-names span:nth-child(n+7):not(.gc-more-names) { display:none; }
  .gc-names span.gc-more-names { display:block; column-span:all; color:var(--muted); }
  .gc-job:nth-child(n+6) { display:none; }
  .gc-more-jobs.m { display:block; }
  .gc-more-jobs.d { display:none; }
}
@media (max-width: 430px) {
  .hero-inner { height:100%; padding:12px 18px 12px 32%; justify-items:center; }
  .hero-copy { width:min(100%, 260px); max-width:260px; }
  .site-title { font-size:clamp(1.42rem, 7.45vw, 1.78rem); }
  .eyebrow { font-size:.37rem; letter-spacing:.07em; margin-bottom:5px; }
  .site-subtitle { font-size:.48rem; letter-spacing:.035em; margin-top:.38rem; }
  .site-title::after { width:82px; margin-top:.22rem; }
}

/* ===== v1.1.0: slim header bar + Completed row/popup (from SafetyHQ v4.1.0) ===== */
.slim-bar{position:relative;z-index:200;display:flex;align-items:center;gap:14px;margin:16px 0 16px;padding:10px 14px;border-radius:18px;background:linear-gradient(90deg,rgba(4,16,31,.96),rgba(10,38,72,.94));border:1px solid rgba(0,157,255,.22);color:#fff}
.slim-seal{flex:0 0 48px;width:48px;height:48px;border-radius:50%;object-fit:contain;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 14px rgba(0,157,255,.35)}
.slim-brand{min-width:0;flex:1 1 auto}
.slim-title{margin:0;font-size:1.5rem;line-height:1;font-weight:950;letter-spacing:-.04em}
.slim-tagline{margin:3px 0 0;color:rgba(255,255,255,.78);font-size:.78rem;font-weight:750;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slim-updated-m{display:none;margin:3px 0 0;color:rgba(255,255,255,.78);font-size:.72rem;font-weight:750;white-space:nowrap}
.slim-updated{flex:0 0 auto;color:rgba(255,255,255,.85);font-size:.8rem;font-weight:750;white-space:nowrap}
.slim-actions{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.slim-bar .u-btn,.slim-bar .user-btn{width:44px;height:44px;min-width:44px;padding:0;justify-content:center}
.slim-bar .user-caret{display:none}
.slim-bar .user-menu{top:calc(100% + 10px);right:0}
.completed-row{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 14px;border:0;border-top:1px solid rgba(31,138,88,.25);background:linear-gradient(180deg,#f3fbf3,#e8f7e8);color:#334155;font:inherit;font-size:16px;font-weight:900;text-align:left;cursor:pointer}
.completed-row .status-count{margin-left:auto}
.completed-row svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:#1f8a58;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.completed-row:hover,.completed-row:focus-visible{background:#dff3df;outline:none}
.completed-modal .modal-card{padding:16px 16px 12px}
.completed-modal .modal-close{width:44px;height:44px;flex:0 0 44px;margin:-6px -6px 0 0}
@media(max-width:700px){
  .slim-bar{gap:10px;padding:8px 10px;margin:12px 0 14px;border-radius:16px}
  .slim-seal{flex-basis:44px;width:44px;height:44px}
  .slim-title{font-size:1.3rem}
  .slim-tagline,.slim-updated{display:none}
  .slim-updated-m{display:block}
  .completed-modal{align-items:flex-end;padding:0}
  .completed-modal .modal-card{width:100%;max-height:82vh;border-radius:22px 22px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}