/* ─────────────────────────────────────────────────────────────────────────
   portal.css — the portal's dedicated stylesheet for shared component classes.
   Loaded on every shell (staff header, customer portal, both sign-in pages)
   by \Concero\Services\Theme::head(). Bump Theme::PORTAL_CSS_VERSION when
   this file changes so browsers refetch it.

   Rule for new work: no inline style="font-family:…;font-size:…" headings —
   use the .hd classes below. Layout tweaks (margin, flex) may stay inline.
   Theme-specific overrides live in theme-refresh.css, not here.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Headings ──
   Replaces the former inline pattern
   style="font-family:var(--font-hd);font-size:Npx;font-weight:700;color:var(--navy)".
   Size tiers consolidate the old ad-hoc pixel sizes:
     hd-xs 13 · hd-sm 15 (was 14/15/16) · hd-md 18 (17/18) · hd-lg 22 (20/22)
     hd-xl 26 (24/26) · hd-2xl 28.  Colour/weight overrides may stay inline. */
.hd {
  font-family: var(--font-hd);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.3px;
}
.hd-medium { font-weight: 600; }
.hd-xs  { font-size: 13px; }
.hd-sm  { font-size: 15px; }
.hd-md  { font-size: 18px; }
.hd-lg  { font-size: 22px; }
.hd-xl  { font-size: 26px; }
.hd-2xl { font-size: 28px; }

/* ── Card accent tops ──
   A coloured top edge that says what kind of panel this is. Replaces the
   former inline style="border-top:3px solid #7c3aed" pattern. Colours are
   tokens so theme-refresh.css can retint them (brand pastel tints there).
   Meaning: blue = schedule/helpdesk · green = customers/people · yellow =
   wellbeing/strategic · coral = risk/escalation · purple = notices/projects ·
   navy = attendance/tenders. */
:root {
  --acc-blue:   #2563eb;
  --acc-green:  #16a34a;
  --acc-yellow: #d97706;
  --acc-coral:  #dc2626;
  --acc-purple: #7c3aed;
  --acc-navy:   var(--navy);
  --acc-width:  3px;
}
.card-top-blue   { border-top: var(--acc-width) solid var(--acc-blue); }
.card-top-green  { border-top: var(--acc-width) solid var(--acc-green); }
.card-top-yellow { border-top: var(--acc-width) solid var(--acc-yellow); }
.card-top-coral  { border-top: var(--acc-width) solid var(--acc-coral); }
.card-top-purple { border-top: var(--acc-width) solid var(--acc-purple); }
.card-top-navy   { border-top: var(--acc-width) solid var(--acc-navy); }

/* ── Utilities ──
   One class per common declaration, replacing the inline style="…" soup
   (the 2026-08-25 sweep converted ~9,000 declarations). Names follow the
   handful that already lived in header.php (.flex .gap-8 .mb-16 .mt-16).
   Add a utility only for a declaration that recurs widely; bespoke styling
   belongs in a component class, not here. */
/* text */
.txt-muted  { color: var(--muted); }
.txt-navy   { color: var(--navy); }
.txt-md     { color: var(--text-md); }
.txt-red    { color: var(--red); }
.txt-green  { color: var(--green); }
.txt-amber  { color: var(--amber); }
.txt-orange { color: var(--orange); }
.txt-purple { color: var(--purple); }
.txt-teal   { color: var(--teal); }
.fs-10 { font-size: 10px; } .fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.upper  { text-transform: uppercase; }
.ls-4 { letter-spacing: .04em; } .ls-5 { letter-spacing: .05em; } .ls-6 { letter-spacing: .06em; }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; }
.no-underline { text-decoration: none; }
/* layout */
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; }
.block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; }
.flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .items-start { align-items: flex-start; }
.items-end { align-items: flex-end; } .items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; } .min-w-0 { min-width: 0; } .w-full { width: 100%; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; }
/* spacing */
.m-0 { margin: 0; }
.mb-2 { margin-bottom: 2px; } .mb-3 { margin-bottom: 3px; } .mb-4 { margin-bottom: 4px; } .mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; } .mb-10 { margin-bottom: 10px; } .mb-12 { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; } .mb-18 { margin-bottom: 18px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.mt-2 { margin-top: 2px; } .mt-3 { margin-top: 3px; } .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
/* surfaces */
.bordered { border: 1px solid var(--border); } .border-b { border-bottom: 1px solid var(--border); } .border-t { border-top: 1px solid var(--border); }
.rounded { border-radius: var(--radius); } .rounded-lg { border-radius: var(--radius-lg); } .pill { border-radius: 999px; }
.bg-surface { background: var(--surface); } .bg-surface2 { background: var(--surface2); }
.overflow-hidden { overflow: hidden; } .pointer { cursor: pointer; }
/* ── Hover preview card (v5.41.5 — Projects board / list; reusable) ──
   One fixed-position element the page repositions beside the hovered item.
   pointer-events:none so it never steals the click from the card beneath. */
.hover-card { position: fixed; z-index: 1500; width: 340px; max-width: calc(100vw - 16px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md), 0 12px 32px rgba(22,29,75,.14);
  padding: 12px 14px; font-size: 12px; line-height: 1.45;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; }
.hover-card.show { opacity: 1; visibility: visible; }
.hover-card-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 0; }
.hover-card-grid dt { color: var(--muted); font-size: 11px; }
.hover-card-grid dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hover-card-quote { margin-top: 10px; padding: 8px 10px; background: var(--surface2);
  border-left: 3px solid var(--orange); border-radius: var(--radius); word-break: break-word; }
/* ── Side-nav layout (v5.42.0 — Site Docs; generalises the SOP read layout) ──
   A sticky left column of links beside the working pane. Collapses to a
   single column at the portal's mobile breakpoint (768px, header.php) with
   the nav going static above the content. */
.side-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
.side-nav { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 8px; }
@media (max-width: 768px) {
  .side-layout { grid-template-columns: 1fr; gap: 12px; }
  .side-nav { position: static; max-height: none; }
}

/* ── Top bar: hairline between the logo and the nav (v5.42.17) ─────────────
   Same treatment as the customer portal's .pt-org divider. .nav-brand keeps
   its 28px right margin; the negative margin re-splits it 12px | line | 12px. */
.nav-sep { width: 1px; height: 22px; background: rgba(255,255,255,.18); flex: 0 0 auto; margin: 0 12px 0 -16px; }

/* ── Mood check-in card (dashboard + helpdesk overview) ─────────────────────
   Classic keeps a flat card; theme-refresh.css turns it into the rotated
   Yotta Yellow block that matches the customer portal's termly review. */
.mood-card-in { position: relative; }
.mood-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 8px 6px;
  border-radius: 10px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); transition: all .12s; }
.mood-btn .mood-emoji { font-size: 22px; line-height: 1; }
.mood-btn .mood-word { font-size: 11px; font-weight: 600; color: var(--navy); }
.mood-btn.mood-sel { border-color: var(--navy); background: rgba(26,46,74,.06); }
.mood-btn:disabled { opacity: .6; }
.mood-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 5px 8px; border-radius: 6px; }
.mood-row.needs { background: rgba(220,38,38,.06); }
.mood-row .mood-state { color: var(--muted); }
.mood-row.needs .mood-state { color: var(--red); }
/* Heading is two spans; classic renders them inline as one sentence. */
.mood-heading .mood-h-top, .mood-heading .mood-h-main { display: inline; }

/* ── Procurement Hub → Suppliers (v5.42.35) ───────────────────────────────
   List + detail split, key-facts grid, and the status chips shared by the
   questionnaire / approval columns. */
.sup-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .sup-layout { grid-template-columns: 1fr; } }
.sup-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 18px; }
.sup-fact-wide { grid-column: 1 / -1; }
.sup-fact-k { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sup-fact-v { font-size: 13px; color: var(--navy); word-break: break-word; margin-top: 2px; }
.chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.chip-grey  { color: #475569; background: #e2e8f0; }
.chip-blue  { color: #1e40af; background: #dbeafe; }
.chip-amber { color: #92400e; background: #fde68a; }
.chip-green { color: #065f46; background: #d1fae5; }
.chip-red   { color: #991b1b; background: #fee2e2; }

/* ── Channel set-up: "Get set up" strip + subscribe button (v5.42.59) ──────
   Dashboard / today strip with one chip per channel (calendar · Teams · phone),
   hidden once every chip is green or the user dismisses it. .ical-btn is the
   one-click webcal subscribe button used on /schedule, /calendar and the
   notification preferences page. */
.setup-strip { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--orange); border-radius: var(--radius, 8px); }
.setup-strip-title { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.setup-strip-sub { font-size: 11px; color: var(--muted); }
/* min-width keeps the chip row from being crushed beside the title in narrow
   columns (/today) — the strip's flex-wrap drops it to its own line instead.
   Chips themselves never wrap internally. */
.setup-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 260px; }
.setup-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-alt, var(--bg)); color: var(--navy); text-decoration: none; line-height: 1.2; white-space: nowrap; }
.setup-chip:hover { border-color: var(--orange); text-decoration: none; }
.setup-chip.ok { color: #148B79; background: rgba(48,204,179,.14); border-color: rgba(48,204,179,.4); cursor: default; }
.setup-chip.ok:hover { border-color: rgba(48,204,179,.4); }
.setup-chip.bad { color: #C13F2B; background: rgba(241,108,87,.12); border-color: rgba(241,108,87,.4); }
.setup-chip .setup-chip-act { font-weight: 500; color: var(--muted); }
.setup-chip:not(.ok):hover .setup-chip-act { color: var(--navy); }
.setup-strip-dismiss { background: none; border: 0; color: var(--muted); font-size: 11px; cursor: pointer; padding: 4px 6px; white-space: nowrap; }
.setup-strip-dismiss:hover { color: var(--navy); }
@media (max-width: 640px) { .setup-strip { padding: 10px 12px; } .setup-strip-title { flex-basis: 100%; } }

.ical-btn-group { display: inline-flex; align-items: stretch; flex-shrink: 0; }
.ical-btn-group .btn { border-radius: var(--radius, 6px) 0 0 var(--radius, 6px); }
.ical-btn-group .ical-copy { border-radius: 0 var(--radius, 6px) var(--radius, 6px) 0; border-left: 0; padding-left: 8px; padding-right: 8px; }
.ical-btn-group .ical-copy.done { color: #148B79; }

/* Delivery status banners on /profile/notifications */
.chan-status { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; max-width: 780px; border: 1px solid; }
.chan-status.ok  { background: rgba(48,204,179,.12); border-color: rgba(48,204,179,.35); color: #148B79; }
.chan-status.bad { background: rgba(241,108,87,.10); border-color: rgba(241,108,87,.35); color: #C13F2B; }
.chan-status.unk { background: rgba(249,209,74,.16); border-color: rgba(249,209,74,.5); color: #9A6F00; }
.chan-status strong { color: inherit; }
.chan-status .chan-status-icon { font-size: 16px; line-height: 1.2; }

/* ── /admin/permissions — Gate role-capability matrix (v5.42.62) ─────────── */
.perm-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.perm-matrix th, .perm-matrix td { padding: 8px 10px; border-bottom: 1px solid var(--border, #e2e8f0); vertical-align: top; }
.perm-matrix thead th { font-weight: 600; }
/* v5.48.19 — the role header row follows the page as you scroll. The wrapper must not be a scroll
   container for sticky to track the page, so horizontal scrolling is only enabled on narrow screens. */
.perm-matrix-wrap { overflow: visible; }
@media (max-width: 1100px) { .perm-matrix-wrap { overflow-x: auto; } }
/* top = the sticky <nav> bar's height (52px in header.php) — at top:0 the row stuck but sat underneath it. */
.perm-matrix thead th { position: sticky; top: 52px; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border, #e2e8f0); }
.perm-matrix tr.perm-sub td:first-child { padding-left: 30px; } /* v5.48.17 — an action inside its parent page */
.perm-group-row td { background: var(--bg, #f8fafc); padding-top: 14px; }
.perm-matrix input[type="checkbox"] { width: 16px; height: 16px; }
.perm-pill-default { background: rgba(24,191,247,.12); color: #0A7FAB; }
.perm-pill-custom  { background: rgba(160,126,250,.16); color: #6541DB; }
.perm-flash-ok  { background: rgba(48,204,179,.12); border: 1px solid rgba(48,204,179,.35); color: #148B79; padding: 10px 14px; }
.perm-flash-err { background: rgba(241,108,87,.10); border: 1px solid rgba(241,108,87,.35); color: #C13F2B; padding: 10px 14px; }
.overflow-x-auto { overflow-x: auto; }

/* ── Light up September — Pulse-recovery campaign (v5.43.3) ─────────────────
   Banner (dashboard + Today), /pulse/september board and personal card.
   Navy hero matches .dash-search-box; lit = Guru Green with a soft glow. */
.pcamp-banner { display: flex; align-items: center; gap: 24px; margin-bottom: 14px; padding: 20px 24px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt, #24406a) 100%);
  border-radius: var(--radius-lg, 16px); box-shadow: 0 6px 18px rgba(26,46,74,.18); color: #fff; }
.pcamp-main { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pcamp-kicker { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pcamp-hd { font-family: var(--font-hd); font-size: 24px; font-weight: 700; letter-spacing: -.3px; color: #fff; line-height: 1.15; }
.pcamp-hd .hand { font-family: var(--font-hand); font-size: 27px; color: var(--orange); }
.pcamp-sub { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.5; max-width: 560px; }
.pcamp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; align-items: stretch; }
.pcamp-chip { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.pcamp-chip.red { background: rgba(241,108,87,.14); border-color: rgba(241,108,87,.45); }
.pcamp-chip-val { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.1; white-space: nowrap; }
.pcamp-chip-val small { font-size: 11px; font-weight: 500; color: #FFA291; }
.pcamp-chip-val small.dim { color: rgba(255,255,255,.55); }
.pcamp-chip-lbl { font-size: 11px; color: rgba(255,255,255,.6); white-space: nowrap; }
.pcamp-chip-delta { font-size: 10.5px; font-weight: 600; color: #27F4D9; align-self: flex-start; white-space: nowrap; }
.pcamp-chip-delta .amb { color: #FFFA76; }
.pcamp-cta { display: inline-flex; align-items: center; align-self: center; gap: 6px; padding: 10px 16px;
  border-radius: 12px; background: var(--orange); color: var(--navy); font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap; }
.pcamp-cta:hover { background: var(--orange-lt, var(--orange)); color: var(--navy); text-decoration: none; }
.pcamp-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.pcamp-ring-lbl { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
@media (max-width: 760px) {
  .pcamp-banner { flex-direction: column; align-items: stretch; gap: 14px; }
  .pcamp-ring-wrap { flex-direction: row; justify-content: center; }
}
/* v5.50.1 — the campaign row is two cards: the Pulse banner + "Ticket closers
   this week" (top five Halo agents since Monday). Purple→blue gradient with
   confetti dots; rank bubbles use the brand tints (yellow, blue, purple,
   green, coral); the leader wears a bobbing crown. */
/* v5.50.2 — the row shares the dashboard top strip's grid (1.3fr 1.3fr 1fr, 10px gap): the
   closers card is the third column, so its edges line up with the mood panel below. */
.pcamp-row { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 10px; align-items: stretch; margin-bottom: 10px; }
.pcamp-row .pcamp-banner { margin-bottom: 0; align-items: stretch; }
/* v5.50.2 — the banner stretches to the closers card's height; keep the heading at the top and
   the chips at the bottom rather than floating the whole block in the middle. */
.pcamp-row .pcamp-main { justify-content: flex-start; }
.pcamp-row .pcamp-hd { font-size: 28px; }
.pcamp-row .pcamp-hd .hand { font-size: 31px; }
.pcamp-row .pcamp-sub { margin-top: 2px; font-size: 13.5px; max-width: 620px; }
.pcamp-row .pcamp-chips { margin-top: auto; padding-top: 14px; }
.pcamp-row .pcamp-ring-wrap { align-self: center; }
/* v5.50.3 — the lights board's dots, on the banner: fills the middle of the stretched card with
   the campaign itself (one dot per cohort school / technician; red → amber → lit). */
.pcamp-lights { display: flex; flex-direction: column; justify-content: center; gap: 12px; flex: 1; margin: 12px 0 0;
  padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  text-decoration: none; color: inherit; }
.pcamp-lights:hover { background: rgba(255,255,255,.1); text-decoration: none; color: inherit; }
.pcamp-lights-row { display: flex; flex-direction: column; gap: 6px; }
.pcamp-lights-lbl { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.pcamp-lights .pcamp-dots { gap: 6px; }
.pcamp-lights .pcamp-dot { width: 18px; height: 18px; background: rgba(241,108,87,.22); border-color: #F16C57; }
.pcamp-lights .pcamp-dot.amber { background: #F9D14A; border-color: #F9D14A; }
.pcamp-lights .pcamp-dot.lit { background: #30CCB3; border-color: #30CCB3; box-shadow: 0 0 9px rgba(48,204,179,.75); }
/* v5.83.4 — lit, then slipped off green: green ring, current colour inside, no glow. */
.pcamp-lights .pcamp-dot.lit.relapsed { background: rgba(241,108,87,.22); border: 3px solid #30CCB3; box-shadow: none; }
.pcamp-lights .pcamp-dot.lit.relapsed.now-amber { background: rgba(249,209,74,.45); }
@media (max-width: 1100px) { .pcamp-row { grid-template-columns: minmax(0, 1fr); } }
.pcamp-closers { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px;
  border-radius: var(--radius-lg, 16px); color: #fff;
  background: linear-gradient(135deg, #4A35BC 0%, #A07EFA 55%, #18BFF7 100%);
  box-shadow: 0 6px 18px rgba(74,53,188,.28); }
.pcamp-closers::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, #F9D14A 2px, transparent 2.5px), radial-gradient(circle, #30CCB3 1.5px, transparent 2px),
                    radial-gradient(circle, #F16C57 1.5px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1.5px);
  background-size: 90px 70px, 70px 90px, 110px 60px, 50px 50px; background-position: 10px 8px, 40px 30px, 20px 50px, 0 0; }
.pcamp-closers > * { position: relative; }
.pcamp-closers-sticker { position: absolute; top: 14px; right: -4px; transform: rotate(8deg); padding: 4px 16px 4px 14px; border-radius: 999px;
  background: #F9D14A; color: var(--navy); font-family: var(--font-hd); font-weight: 700; font-size: 12px; letter-spacing: .04em;
  box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.pcamp-closers-head { padding-right: 60px; }
.pcamp-closers .pcamp-kicker { color: rgba(255,255,255,.75); }
.pcamp-closers-hd { font-family: var(--font-hd); font-size: 18px; font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -.2px; }
.pcamp-closers-hd .hand { font-family: var(--font-hand); font-size: 21px; color: #F9D14A; }
.pcamp-closers-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pcamp-closer { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(30px, 64px) auto; align-items: center; gap: 8px;
  padding: 3px 9px 3px 5px; border-radius: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  animation: pcamp-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.pcamp-closer.r1 { background: rgba(255,255,255,.22); border-color: rgba(249,209,74,.85); }
.pcamp-closer.r2 { animation-delay: .06s; } .pcamp-closer.r3 { animation-delay: .12s; }
.pcamp-closer.r4 { animation-delay: .18s; } .pcamp-closer.r5 { animation-delay: .24s; }
.pcamp-closer-rank { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-hd); font-weight: 700; font-size: 13px; color: var(--navy); background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.r1 .pcamp-closer-rank { background: #F9D14A; } .r2 .pcamp-closer-rank { background: #24ECFB; } .r3 .pcamp-closer-rank { background: #DCB5FD; }
.r4 .pcamp-closer-rank { background: #27F4D9; } .r5 .pcamp-closer-rank { background: #FFA291; }
.pcamp-closer-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pcamp-closer-ava { position: relative; flex-shrink: 0; display: inline-flex; }
.pcamp-closer-ava .user-avatar { outline: 2px solid rgba(255,255,255,.75); border-radius: 50%; }
.pcamp-crown { position: absolute; top: -13px; left: 50%; width: 20px; height: 17px; z-index: 1; transform: translateX(-50%) rotate(-12deg);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); animation: pcamp-crown 1.6s ease-in-out infinite; }
.pcamp-closer-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcamp-closer-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; }
.pcamp-closer-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F9D14A, #FFFA76); }
.r2 .pcamp-closer-bar span { background: linear-gradient(90deg, #18BFF7, #24ECFB); } .r3 .pcamp-closer-bar span { background: linear-gradient(90deg, #A07EFA, #DCB5FD); }
.r4 .pcamp-closer-bar span { background: linear-gradient(90deg, #30CCB3, #27F4D9); } .r5 .pcamp-closer-bar span { background: linear-gradient(90deg, #F16C57, #FFA291); }
.pcamp-closer-n { font-family: var(--font-hd); font-weight: 700; font-size: 16px; line-height: 1; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pcamp-closer-n small { font-family: var(--font-body, inherit); font-weight: 500; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.pcamp-closers-empty { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.14); font-size: 13px; line-height: 1.4; }
.pcamp-closers-empty .pcamp-crown { position: static; transform: rotate(-12deg); width: 28px; height: 24px; flex-shrink: 0; }
.pcamp-closers-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: rgba(255,255,255,.78); margin-top: 2px; }
.pcamp-closers-foot a { color: #fff; font-weight: 600; text-decoration: none; }
.pcamp-closers-foot a:hover { text-decoration: underline; color: #fff; }
@keyframes pcamp-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pcamp-crown { 0%, 100% { transform: translateX(-50%) rotate(-12deg); } 50% { transform: translateX(-50%) translateY(-2px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .pcamp-closer, .pcamp-crown { animation: none; } }
/* v6.1.0 — October focus: Site Docs. Same hero row; the lights box holds a
   coverage bar per Site Docs nav group (green = documented, yellow = started). */
.sdcamp-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.sdcamp-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sdcamp-group-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sdcamp-group-n { font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }
.sdcamp-bar { display: flex; height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.sdcamp-bar span { display: block; height: 100%; }
.sdcamp-bar .done { background: linear-gradient(90deg, #30CCB3, #27F4D9); }
.sdcamp-bar .part { background: #F9D14A; }
.sdcamp-chip-col { gap: 1px; }
.sdcamp-cta { min-width: 0; max-width: 300px; }
.sdcamp-cta-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sdcamp-ring-val { font-family: var(--font-hd); font-size: 15px; font-weight: 700; }
.sdcamp-ring-sub { font-size: 8.5px; }
@media (max-width: 560px) { .sdcamp-groups { grid-template-columns: minmax(0, 1fr); } }
/* Board + personal card (light backgrounds) */
.pcamp-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--red-bg, #FDE7E2);
  border: 1.5px solid var(--red, #F16C57); box-sizing: border-box; display: inline-block; }
.pcamp-dot.amber { background: #F9D14A; border-color: #F9D14A; box-shadow: 0 0 5px rgba(249,209,74,.5); }
.pcamp-dot.lit { background: #30CCB3; border-color: #30CCB3; box-shadow: 0 0 7px rgba(48,204,179,.6); }
.pcamp-dot.lit.relapsed { background: var(--red-bg, #FDE7E2); border: 3px solid #30CCB3; box-shadow: none; }
.pcamp-dot.lit.relapsed.now-amber { background: #FEF4CC; }
.pcamp-dots { display: flex; flex-wrap: wrap; gap: 7px; }
.pcamp-bar { height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; display: flex; }
.pcamp-bar-fill { height: 10px; background: linear-gradient(90deg, #30CCB3 0%, #27F4D9 100%); }
.pcamp-bar-amber { height: 10px; background: #F9D14A; }
.pcamp-school { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
  background: var(--red-bg, #FDE7E2); border: 1px solid rgba(241,108,87,.35); }
.pcamp-school.amber { background: var(--amber-bg, #FEF4CC); border-color: rgba(249,209,74,.6); }
.pcamp-school.lit { background: var(--green-bg, #DCF6F1); border-color: rgba(48,204,179,.45); }
.pcamp-school.lit.relapsed { background: var(--surface, #fff); border: 1px dashed rgba(48,204,179,.7); }
.pcamp-lever { flex: 1; min-width: 130px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface2, var(--bg)); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px; }
.pcamp-lever-val { font-size: 15px; font-weight: 700; }
.pcamp-lever-lbl { font-size: 11.5px; color: var(--text-md, var(--muted)); }
/* Campaign badge pills on the /pulse badge wall */
.pulse-badge-camp-green { background: var(--green-bg, #DCF6F1) !important; color: var(--green, #148B79) !important;
  border-color: rgba(48,204,179,.5) !important; box-shadow: 0 0 10px rgba(48,204,179,.4); }
.pulse-badge-camp-blue { background: var(--teal-bg, #DCF4FE) !important; color: var(--teal, #0A7FAB) !important;
  border-color: rgba(24,191,247,.5) !important; box-shadow: 0 0 10px rgba(24,191,247,.35); }

/* ── Customer type badge (v5.46.4 — business parity) ──────────────────────
   One look for "this is a school / business / trust central team" everywhere:
   detail headers, list cards, Site Docs hub, admin tables. Rendered by
   customerTypeBadge() in public/helpers.php — don't hand-roll the pill. */
.type-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px;
  font-size:11px; font-weight:700; white-space:nowrap; border:1px solid transparent; line-height:1.5; }
.type-badge-school       { background:#eef2ff; color:var(--navy);  border-color:#c7d2fe; }
.type-badge-business     { background:#ede9fe; color:#5b21b6;      border-color:#c4b5fd; }
.type-badge-central_team { background:#f5f3ff; color:#6d28d9;      border-color:#ddd6fe; }
.type-badge-sm { font-size:10px; padding:1px 7px; }

/* ── Customer list cards (schools + businesses overview pages, v5.46.4) ── */
.cust-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; min-width:0; max-width:100%; box-sizing:border-box; }
.cust-card-body { padding:10px 12px 8px; }
.cust-card-name { font-family:var(--font-hd); font-size:13px; font-weight:700; color:var(--navy); text-decoration:none; line-height:1.3; }
.cust-card-foot { border-top:1px solid var(--border); background:var(--surface2); padding:6px 12px; margin-top:auto; }
.cust-card-foot a { font-size:12px; color:var(--orange); font-weight:600; text-decoration:none; }
/* Filter dropdowns shared by the customer list pages */
.filt-btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text-md);
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 14px;cursor:pointer;
  transition:border-color .12s,color .12s}
.filt-btn:hover{border-color:var(--navy)}
.filt-btn.has-active{border-color:var(--navy);color:var(--navy);background:#f5f8fc}
.filt-caret{font-size:9px;color:var(--muted)}
.filt-badge{display:none;min-width:18px;height:18px;line-height:18px;text-align:center;font-size:11px;
  font-weight:700;color:#fff;background:var(--navy);border-radius:999px;padding:0 5px;box-sizing:border-box}
.filt-badge.show{display:inline-block}
.filt-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:210px;max-width:360px;
  max-height:320px;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 10px 32px rgba(26,46,74,.16);padding:12px;display:none}
.filt-panel.open{display:flex;flex-wrap:wrap;gap:6px}
.filt-panel-label{width:100%;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin-bottom:2px}
.filt-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;cursor:pointer;
  background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.filt-pill.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ── Stat strip + booked-time rows (Strategic strand page, v5.47.1) ────────
   .stat-strip = a row of at-a-glance tiles under a page header; tone
   modifiers colour the left edge + value. Reusable on any detail page. */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.stat-tile{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--acc-navy);
  border-radius:var(--radius);padding:10px 14px;min-width:0}
.stat-tile-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
.stat-tile-value{font-family:var(--font-hd);font-weight:500;font-size:24px;line-height:1.1;color:var(--navy)}
.stat-tile-unit{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px}
.stat-tile-sub{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.35}
.stat-tile-green{border-left-color:var(--acc-green)}   .stat-tile-green .stat-tile-value{color:var(--acc-green)}
.stat-tile-blue{border-left-color:var(--acc-blue)}     .stat-tile-blue .stat-tile-value{color:var(--acc-blue)}
.stat-tile-amber{border-left-color:var(--acc-yellow)}  .stat-tile-amber .stat-tile-value{color:var(--acc-yellow)}
.stat-tile-purple{border-left-color:var(--acc-purple)} .stat-tile-purple .stat-tile-value{color:var(--acc-purple)}
.sw-bk-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);font-size:12px}
.sw-bk-when{flex:0 0 118px;min-width:0;font-size:12px}
.sw-bk-pill{font-size:10px;font-weight:700;padding:2px 8px;white-space:nowrap;text-decoration:none;
  background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.sw-bk-ahead .sw-bk-pill{background:#dbeafe;color:#1e40af;border-color:#bfdbfe}
.sw-bk-past{border-color:#fde68a;background:#fffbeb}
.sw-bk-past .sw-bk-pill{background:#fef3c7;color:#92400e;border-color:#fde68a}
.sw-bk-done{opacity:.75}
.sw-bk-done .sw-bk-pill{background:#dcfce7;color:#166534;border-color:#bbf7d0}
html[data-theme="refresh"] .sw-bk-ahead .sw-bk-pill{background:var(--teal-bg);color:var(--teal);border-color:transparent}
html[data-theme="refresh"] .sw-bk-past{border-color:#F9D14A;background:var(--amber-bg)}
html[data-theme="refresh"] .sw-bk-past .sw-bk-pill{background:#FFFA76;color:var(--amber);border-color:transparent}
html[data-theme="refresh"] .sw-bk-done .sw-bk-pill{background:var(--green-bg);color:var(--green);border-color:transparent}

/* ── Find in Xero picker + linked-document lines (project Commercials, v5.47.3) ──
   .xp-modal = the picker; .xp-row = one document; .xp-status tones are shared
   with the linked-quote / invoice lines on the tab. */
.xp-modal{max-width:760px;width:calc(100vw - 32px)}
.xp-tabs{display:inline-flex;gap:4px;background:var(--surface2);border-radius:999px;padding:3px}
.xp-tab{font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.xp-tab.on{background:var(--navy);color:#fff}
.xp-search{flex:1;min-width:0;font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.xp-src{min-height:14px;margin-bottom:6px}
.xp-list{max-height:min(60vh,480px);overflow:auto;display:flex;flex-direction:column;gap:6px}
.xp-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) auto auto auto;align-items:center;gap:10px;
  padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer}
.xp-row:hover{border-color:var(--orange);background:var(--surface2)}
.xp-num{font-weight:700;color:var(--navy);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-ref{display:block;font-weight:500;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-meta{font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-amt{font-weight:700;font-size:13px;color:var(--navy);text-align:right;white-space:nowrap}
.xp-amt-sub{display:block;font-size:10px;font-weight:500;color:var(--muted)}
.xp-due{display:block;font-size:10px;font-weight:700;color:#b45309}
.xp-empty{padding:18px 10px;text-align:center;font-size:13px;color:var(--muted)}
.xp-err{color:#b91c1c}
.xp-status{display:inline-block;font-size:10px;font-weight:700;text-transform:capitalize;padding:2px 8px;border-radius:999px;
  white-space:nowrap;background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.xp-st-ok{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.xp-st-live{background:#dbeafe;color:#1e40af;border-color:#bfdbfe}
.xp-st-bad{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.xp-doc-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 5px;
  border-radius:4px;background:var(--surface2);color:var(--muted);border:1px solid var(--border);vertical-align:1px}
.xp-linked{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.xp-linked-num{font-weight:700;color:var(--orange);text-decoration:none}
.xp-linked-meta{font-size:12px;color:var(--muted)}
.xp-apply{display:inline-flex}
.xp-apply[hidden]{display:none}
@media (max-width:640px){.xp-row{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.xp-meta{grid-column:1/3}}
html[data-theme="refresh"] .xp-row:hover{border-color:var(--acc-blue)}
html[data-theme="refresh"] .xp-st-ok{background:var(--green-bg);color:var(--green);border-color:transparent}
html[data-theme="refresh"] .xp-st-live{background:var(--teal-bg);color:var(--teal);border-color:transparent}
html[data-theme="refresh"] .xp-st-bad{background:var(--red-bg);color:var(--red);border-color:transparent}
html[data-theme="refresh"] .xp-due{color:var(--amber)}

/* ── SMS codes inbox (/sms, v5.47.5) ────────────────────────────────────── */
.sms-page{max-width:900px;margin:0 auto;padding:0 20px}
.sms-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);
  padding:4px 10px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);white-space:nowrap}
.sms-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0}
.sms-status-live .sms-dot{background:var(--acc-green);box-shadow:0 0 0 0 rgba(48,204,179,.6);animation:sms-pulse 2s infinite}
.sms-status-err .sms-dot{background:var(--acc-coral)}
.sms-status-off .sms-dot{background:var(--muted)}
@keyframes sms-pulse{0%{box-shadow:0 0 0 0 rgba(48,204,179,.55)}70%{box-shadow:0 0 0 7px rgba(48,204,179,0)}100%{box-shadow:0 0 0 0 rgba(48,204,179,0)}}
.sms-notice{padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:14px;border:1px solid var(--border);background:var(--surface2)}
.sms-notice code{font-size:12px}
.sms-notice-ok{background:#ecfdf5;border-color:#10b981;color:#065f46}
.sms-notice-err{background:#fef2f2;border-color:#ef4444;color:#991b1b}
.sms-notice-warn{background:#fffbeb;border-color:#f59e0b;color:#92400e}
.sms-watch-banner{padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--acc-blue)}
.sms-list{display:flex;flex-direction:column;gap:8px}
.sms-empty{padding:28px 10px;text-align:center;font-size:13px;color:var(--muted);background:var(--surface);
  border:1px dashed var(--border);border-radius:var(--radius-lg)}
.sms-actions{display:inline-flex;gap:4px;align-items:center}
.sms-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;box-shadow:var(--shadow);
  transition:background .6s,border-color .6s}
.sms-new{background:#e6fbf8;border-color:var(--acc-green)}
.sms-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:26px;font-weight:700;letter-spacing:2px;
  color:var(--navy);background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px;
  cursor:pointer;line-height:1;min-width:120px;text-align:center;transition:background .15s,transform .1s}
.sms-code:hover{background:var(--bg);border-color:var(--orange)}
.sms-code:active{transform:scale(.97)}
.sms-code-none{color:var(--muted);cursor:default;font-size:18px;letter-spacing:0}
.sms-code-none:hover{background:var(--surface2);border-color:var(--border)}
.sms-copied{color:var(--acc-green)!important}
.sms-main{min-width:0}
.sms-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--muted);margin-bottom:4px;align-items:baseline}
.sms-num{font-weight:700;color:var(--navy)}
.sms-time{margin-left:auto;white-space:nowrap}
.sms-body{font-size:14px;color:var(--text);word-break:break-word;white-space:pre-wrap}
.sms-copy{white-space:nowrap}
.sms-labels-grid{display:flex;flex-direction:column;gap:8px;max-width:520px}
.sms-label-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px;align-items:center}
.sms-label-row input{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;font-family:inherit}
@media (max-width:640px){
  .sms-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .sms-code{grid-column:1/3;min-width:0;font-size:24px}
  .sms-time{margin-left:0}
}
html[data-theme="refresh"] .sms-new{background:var(--green-bg)}
html[data-theme="refresh"] .sms-code:hover{border-color:var(--acc-blue)}
html[data-theme="refresh"] .sms-notice-ok{background:var(--green-bg);color:var(--green);border-color:transparent}
html[data-theme="refresh"] .sms-notice-err{background:var(--red-bg);color:var(--red);border-color:transparent}
html[data-theme="refresh"] .sms-notice-warn{background:var(--amber-bg,#fff8dd);color:var(--amber);border-color:transparent}

/* ── School code badge (v5.47.6) — customers.school_code, rendered by schoolCodeBadge() ── */
.code-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:6px;font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--navy);background:var(--surface2);border:1px solid var(--border);white-space:nowrap;vertical-align:middle}
.code-badge-sm{font-size:10px;padding:0 5px}
.code-badge-lg{font-size:13px;padding:2px 9px}
html[data-theme="refresh"] .code-badge{background:#fff;border-color:var(--acc-blue);color:var(--navy)}

/* ── Trust bulk spreadsheet import (v5.47.6) — views/trusts/import*.php ── */
.bi-page{max-width:1080px;margin:0 auto;padding:18px}
.bi-steps{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:0;list-style:none}
.bi-steps li{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface)}
.bi-steps li.on{color:var(--navy);border-color:var(--orange);background:var(--surface2)}
.bi-steps li.done{color:var(--green)}
.bi-steps li .n{display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;font-size:10px;background:var(--border);color:var(--navy)}
.bi-steps li.on .n{background:var(--orange);color:#fff}
.bi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:14px}
.bi-card h3{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--navy)}
.bi-help{font-size:13px;color:var(--text-md);line-height:1.6;margin:0 0 12px}
.bi-table{width:100%;border-collapse:collapse;font-size:13px}
.bi-table th{text-align:left;padding:4px 10px 6px 0;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.bi-table td{padding:6px 10px 6px 0;border-top:1px solid var(--border);vertical-align:middle}
.bi-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.bi-select,.bi-input{width:100%;max-width:420px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);font-size:12px;background:var(--bg);color:var(--text);font-family:inherit}
.bi-input-code{max-width:110px;text-transform:uppercase;font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);font-weight:700;letter-spacing:.06em}
.bi-sample{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;display:block}
.bi-sheet{border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:12px;background:var(--surface);overflow:hidden}
.bi-sheet-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;background:var(--surface2);border-bottom:1px solid var(--border)}
.bi-sheet-head .name{font-weight:700;color:var(--navy);font-size:14px}
.bi-sheet-head .meta{font-size:12px;color:var(--muted)}
.bi-sheet-body{padding:10px 14px}
.bi-sheet.skip .bi-sheet-body{display:none}
.bi-sheet.skip .bi-sheet-head{opacity:.7}
.bi-preview{overflow-x:auto;margin-top:8px}
.bi-preview table{border-collapse:collapse;font-size:12px;min-width:100%}
.bi-preview th{text-align:left;padding:3px 10px 5px 0;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);white-space:nowrap}
.bi-preview th.skip{color:var(--muted);font-weight:500}
.bi-preview td{padding:4px 10px 4px 0;border-top:1px solid var(--border);color:var(--text-md);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.bi-preview td.empty{color:var(--muted)}
.bi-cust{border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:10px;background:var(--surface);overflow:hidden}
.bi-cust-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;background:var(--surface2);border-bottom:1px solid var(--border)}
.bi-cust-head .name{font-weight:700;color:var(--navy);font-size:13px}
.bi-cust-body{padding:8px 14px 10px}
.bi-item{display:flex;gap:8px;align-items:flex-start;padding:5px 0;border-top:1px dashed var(--border);font-size:12px;color:var(--text-md);line-height:1.5}
.bi-item:first-child{border-top:0}
.bi-item .lbl{font-weight:600;color:var(--navy);white-space:nowrap;min-width:180px}
.bi-item .vals{flex:1;min-width:0;word-break:break-word}
.bi-warn{display:inline-block;font-size:11px;font-weight:600;color:var(--amber);background:var(--amber-bg,#fff8dd);border-radius:999px;padding:1px 8px}
.bi-notice{border-radius:8px;padding:10px 14px;font-size:13px;margin:0 0 14px}
.bi-notice-ok{background:#f0fdf4;border:1px solid #86efac;color:#166534}
.bi-notice-warn{background:#fffbeb;border:1px solid #fcd34d;color:#92400e}
.bi-notice-err{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b}
html[data-theme="refresh"] .bi-notice-ok{background:var(--green-bg);color:var(--green);border-color:transparent}
html[data-theme="refresh"] .bi-notice-warn{background:var(--amber-bg,#fff8dd);color:var(--amber);border-color:transparent}
html[data-theme="refresh"] .bi-notice-err{background:var(--red-bg);color:var(--red);border-color:transparent}
.bi-unmatched td{vertical-align:middle}
.bi-actions{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.bi-opts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.bi-opts label{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--text-md);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px}
.bi-opts label input{margin-top:2px}
.bi-result-list{margin:4px 0 0;padding-left:18px;font-size:12px;color:var(--text-md)}

/* v5.48.4 — Portal users tab: "How portal access works" explainer */
.pu-how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 20px;padding:2px 2px 4px}
.pu-how-item{display:flex;gap:10px;align-items:flex-start}
.pu-how-num{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.pu-how-hd{margin:0 0 4px;font-size:13.5px;font-weight:700;color:var(--navy)}
.pu-how-p{margin:0;font-size:12.5px;color:var(--text-muted,#64748b);line-height:1.45}
/* v5.83.5 — Invited users table: one tbody per login, its actions across a full-width row underneath */
.pu-table-wrap{overflow-x:auto}
.pu-table{width:100%;border-collapse:collapse;font-size:13px}
.pu-table th,.pu-table td{padding:8px 6px;text-align:left;vertical-align:top}
.pu-table thead tr{border-bottom:1px solid var(--border)}
.pu-table tbody.pu-user{border-bottom:1px solid var(--border)}
.pu-table th{color:var(--text-muted,#64748b)}
.pu-table .pu-act-tr td{padding-top:0;padding-bottom:10px}
.pu-row-off{opacity:.55}
.pu-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.pu-act-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pu-act-row + .pu-act-row{padding-left:14px;border-left:1px solid var(--border)}
.pu-act-end{margin-left:auto}
.pu-act-row form{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.pu-act-row label{white-space:nowrap}
.pu-act-select{width:auto;max-width:220px;font-size:11px;padding:3px 6px}
.pu-act-danger{color:var(--red,#dc2626)}
.pu-status-on{color:var(--green,#16a34a);white-space:nowrap}
.pu-status-wait{color:#b45309;white-space:nowrap}

/* v5.50.0 — safeguarding check evidence call-out (dashboard check modal + /today cards) */
.ev-box { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius, 8px); background: var(--surface2); }

/* v5.53.0 — work item checklist steps + tested & signed off by (project Technical Plan / Delivery cards) */
.wi-ck { padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius, 8px); background: var(--surface2); }
.wi-ck-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.wi-ck-addbtn { border: 0; background: none; color: var(--orange); font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; text-transform: none; letter-spacing: 0; }
.wi-ck-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); font-size: 13px; }
.wi-ck-row:first-of-type { border-top: 0; margin-top: 4px; }
/* v5.53.3 — work item drag-to-reorder (handle + drop markers) */
.wi-drag-handle { border: 0; background: none; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 3px; cursor: grab; touch-action: none; user-select: none; }
.wi-drag-handle:active { cursor: grabbing; }
.wi-card.wi-dragging { opacity: .35; }
.wi-card.wi-drop-before { box-shadow: 0 -3px 0 0 var(--orange); }
.wi-card.wi-drop-after { box-shadow: 0 3px 0 0 var(--orange); }
.wi-ck-box { width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; border: 2px solid var(--border); background: var(--surface); color: transparent; cursor: pointer; font-size: 10px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.wi-ck-box:hover { border-color: var(--green); color: var(--green); }
.wi-ck-box.is-static { cursor: default; }
.wi-ck-row.is-done .wi-ck-box { border-color: var(--green); background: var(--green); color: #fff; }
.wi-ck-label { flex: 1; min-width: 0; color: var(--navy); }
.wi-ck-row.is-done .wi-ck-label { text-decoration: line-through; color: var(--muted); }
.wi-ck-meta { font-size: 10px; color: var(--muted); white-space: nowrap; }
.wi-ck-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1; }
.wi-ck-del:hover { color: var(--red); }
.wi-ck-pen { font-size: 12px; }
.wi-ck-edit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0; }
.wi-ck-edit input[type=text] { flex: 1; min-width: 0; font-size: 12px; padding: 4px 8px; }
.wi-ck-add { display: flex; align-items: flex-end; gap: 6px; margin-top: 6px; }
.wi-ck-add textarea { flex: 1; min-width: 0; font-size: 12px; padding: 6px 8px; resize: vertical; line-height: 1.4; }
.wi-signoff { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius, 8px); background: var(--surface2); font-size: 12px; }
.wi-signoff.is-signed { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--surface)); }
.wi-signoff-txt { color: var(--text-md, var(--navy)); }
.wi-signoff-sel { font-size: 12px; padding: 4px 8px; max-width: 320px; }

/* v5.54.9 — Single Central Record photo panel (SCR-only upload for people who declined an M365 avatar). */
.scr-photo-lg { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.scr-photo-lg.is-initials { display: flex; align-items: center; justify-content: center; background: var(--bg); font-size: 18px; font-weight: 700; color: var(--muted); }
.scr-photo-panel { display: flex; gap: 14px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius, 8px); background: var(--surface2); }
.scr-photo-src { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text-md, var(--navy)); }
.scr-photo-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--purple, #A07EFA); border: 2px solid var(--surface); }

/* v5.54.10 — Projects → Halo cutover notice (views/projects/_halo_banner.php).
   Purple left rule so it reads as a Projects-area message, not an error. */
.proj-halo-banner { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 10px 14px;
  font-size: 13px; line-height: 1.5; color: var(--text-md, var(--navy)); background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--purple); border-radius: var(--radius, 8px); }
.proj-halo-banner svg { flex-shrink: 0; margin-top: 2px; color: var(--purple); }
.proj-halo-banner strong { color: var(--text, var(--navy)); }

/* v5.59.2 — Resources → Claiming Expenses Guide (views/resources/expenses.php). */
.exp-guide { max-width: 1180px; margin: 0 auto; }
.exp-guide .gd-ico { display: inline-flex; }
.exp-guide .gd-ico svg { display: block; width: 100%; height: 100%; }
.exp-head { margin-bottom: 16px; }
.exp-head p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 6px 0 0; }
.exp-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.exp-start-step { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 8px); }
.exp-start-n { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: var(--navy); font-weight: 700; font-size: 14px; }
.exp-start-title { font-size: 14px; font-weight: 600; color: var(--navy); }
.exp-start-sub { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.exp-video { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 18px; text-decoration: none;
  background: var(--navy); color: #fff; border-radius: var(--radius, 8px); }
.exp-video:hover { filter: brightness(1.12); }
.exp-video .gd-ico { width: 38px; height: 38px; flex-shrink: 0; color: var(--orange); }
.exp-video-title { font-size: 15px; font-weight: 600; }
.exp-video-sub { font-size: 12px; opacity: .8; margin-top: 2px; }
.exp-video-go { margin-left: auto; font-size: 18px; opacity: .8; }
.exp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.exp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 18px 20px; border-top: 4px solid var(--orange); }
.exp-card-mileage { border-top-color: var(--green); }
.exp-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.exp-card-title .gd-ico { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 9px; flex-shrink: 0;
  background: color-mix(in srgb, var(--orange) 16%, var(--surface)); color: var(--navy); }
.exp-card-mileage .exp-card-title .gd-ico { background: color-mix(in srgb, var(--green) 18%, var(--surface)); }
.exp-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.exp-step { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.55; color: var(--text-md, var(--navy)); }
.exp-step:first-child { border-top: 0; padding-top: 0; }
.exp-step-n { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--navy); margin-top: -1px; }
.exp-step-body { min-width: 0; flex: 1; }
.exp-step-body strong { color: var(--navy); }
.exp-note { margin-top: 6px; padding: 6px 10px; font-size: 12px; background: var(--surface2); border-left: 3px solid var(--orange); border-radius: 0 6px 6px 0; }
.exp-card-mileage .exp-note { border-left-color: var(--green); }
.exp-flow { margin-top: 14px; padding: 12px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius, 8px); }
.exp-flow-lbl { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.exp-flow-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.exp-chip { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.exp-chip.is-pending  { background: color-mix(in srgb, #F9D14A 35%, var(--surface)); border-color: transparent; color: var(--navy); }
.exp-chip.is-approved { background: color-mix(in srgb, var(--orange) 20%, var(--surface)); border-color: transparent; color: var(--navy); }
.exp-chip.is-paid     { background: color-mix(in srgb, var(--green) 22%, var(--surface)); border-color: transparent; color: var(--navy); }
.exp-arrow { color: var(--muted); font-size: 12px; }
.exp-rates { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius, 8px); overflow: hidden; background: var(--surface); }
.exp-rates-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 9px 12px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.exp-rates-title { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.exp-rates-src { font-size: 11px; color: var(--muted); }
.exp-rate-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.exp-rate-table th { text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 12px 6px; }
.exp-rate-table td { padding: 8px 12px; border-top: 1px solid var(--border); color: var(--text-md, var(--navy)); }
.exp-rate-table th:not(:first-child), .exp-rate-table td:not(:first-child) { text-align: right; white-space: nowrap; }
.exp-rate-table tr.is-main td { background: color-mix(in srgb, var(--green) 14%, var(--surface)); color: var(--navy); }
.exp-rate-table tr.is-main td:first-child { box-shadow: inset 4px 0 0 var(--green); }
.exp-rate-veh { font-weight: 700; }
.exp-rate-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; background: var(--green); color: var(--navy); vertical-align: 1px; }
.exp-rate-big { font-family: var(--font-hd); font-size: 22px; color: var(--navy); }
.exp-passenger { padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--text-md, var(--navy)); border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--orange) 10%, var(--surface)); }
.exp-passenger strong { color: var(--navy); }
.exp-rate-note { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.exp-ev-note { padding: 8px 12px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border); }
.exp-pool { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius, 8px);
  background: color-mix(in srgb, var(--orange) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--orange) 45%, var(--border)); }
.exp-pool .gd-ico { width: 32px; height: 32px; padding: 6px; box-sizing: border-box; border-radius: 8px; flex-shrink: 0; background: var(--navy); color: var(--orange); }
.exp-pool-title { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.exp-pool p { margin: 3px 0 10px; font-size: 12px; line-height: 1.5; color: var(--text-md, var(--navy)); }
@media (max-width: 900px) { .exp-cols, .exp-start { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .exp-card { padding: 14px; } .exp-rate-table th, .exp-rate-table td { padding-left: 8px; padding-right: 8px; } .exp-rate-tag { display: none; } }

/* ── IA Hub (v5.69.0) — cyber incidents, ISO compliance links, risk register ── */
.stat-tile-coral{border-left-color:var(--acc-coral)} .stat-tile-coral .stat-tile-value{color:var(--acc-coral)}
a.stat-tile{text-decoration:none;display:block}
a.stat-tile:hover{border-color:var(--acc-blue)}
.ia-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.ia-toolbar form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.ia-input{border:1px solid var(--border);border-radius:var(--radius);padding:7px 10px;font-size:13px;background:var(--surface);color:var(--text);font-family:inherit;max-width:100%;box-sizing:border-box}
textarea.ia-input{width:100%;min-height:84px;resize:vertical;line-height:1.45}
.ia-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 16px}
.ia-form-grid .ia-span{grid-column:1/-1}
.ia-field label,.ia-label{display:block;font-size:12px;font-weight:600;color:var(--navy);margin-bottom:4px}
.ia-field .ia-input{width:100%}
.ia-hint{font-size:11px;color:var(--muted);margin-top:3px}
.ia-checks{display:flex;flex-wrap:wrap;gap:6px}
.ia-checks label{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--text);border:1px solid var(--border);border-radius:999px;padding:4px 10px;background:var(--surface);cursor:pointer;margin:0}
.ia-checks input{margin:0}
.ia-people{max-height:180px;overflow:auto;border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;background:var(--surface);columns:2;column-gap:14px}
.ia-people label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:400;margin:0 0 4px;break-inside:avoid;color:var(--text)}
.ia-dl{display:grid;grid-template-columns:200px 1fr;gap:8px 16px;margin:0;font-size:13px}
.ia-dl dt{font-weight:600;color:var(--muted);font-size:12px}
.ia-dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ia-notes{font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.ia-notes img{max-width:100%;height:auto}
.ia-row-link{color:var(--navy);font-weight:600;text-decoration:none}
.ia-row-link:hover{text-decoration:underline}
.ia-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:420px}
.ia-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.ia-link{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);text-decoration:none;color:var(--navy);transition:border-color .15s}
.ia-link:hover{border-color:var(--acc-blue)}
.ia-link-ico{flex-shrink:0;width:30px;height:30px;border-radius:8px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:15px}
.ia-link-title{font-size:13px;font-weight:600}
.ia-link-desc{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.ia-heat{border-collapse:separate;border-spacing:3px;font-size:11px}
.ia-heat th{font-weight:600;color:var(--muted);padding:2px 4px;text-align:center;background:none;border:0}
.ia-heat td{width:38px;height:30px;text-align:center;border-radius:6px;font-weight:700;color:var(--navy);border:0;padding:0}
.ia-heat td a{display:block;line-height:30px;color:inherit;text-decoration:none}
.ia-heat-low{background:#d1fae5}.ia-heat-med{background:#fef3c7}.ia-heat-high{background:#fed7aa}.ia-heat-vhigh{background:#fecaca}
.ia-heat td.ia-heat-empty{color:transparent}
.ia-score{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ia-score-n{font-weight:700;color:var(--navy)}
.ia-overdue{color:#C13F2B;font-weight:600}
@media (max-width:700px){.ia-dl{grid-template-columns:1fr}.ia-dl dt{margin-top:6px}.ia-people{columns:1}}

/* ── Staff nav pop-outs + counts (v5.70.0 — \Concero\Nav renders every menu) ──
   A group inside a .nav-dropdown opens a .nav-flyout to its right (flips left
   near the screen edge); on mobile a group is a <details class="mob-group">. */
.nav-sub{position:relative}
.nav-sub-btn{display:flex;align-items:center;gap:9px;width:100%;padding:8px 11px;font:inherit;font-size:13px;font-weight:500;color:var(--text-md);background:none;border:0;border-radius:var(--radius);cursor:pointer;text-align:left;white-space:nowrap}
.nav-sub-btn .nav-dd-icon{width:18px;flex-shrink:0}
.nav-sub-chev{margin-left:auto;padding-left:14px;font-size:11px;opacity:.55}
.nav-sub-btn:hover,.nav-sub.open>.nav-sub-btn{background:var(--surface2);color:var(--navy)}
.nav-sub-btn.active{color:var(--navy);font-weight:600}
.nav-sub-btn:focus-visible,.nav-flyout a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.nav-flyout{display:none;position:absolute;top:-6px;left:100%;min-width:230px;max-height:calc(100vh - 90px);overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(26,46,74,.16);padding:6px;z-index:301}
.nav-sub.open>.nav-flyout{display:block}
.nav-sub.flip>.nav-flyout{left:auto;right:100%}
.nav-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;margin-left:6px;border-radius:999px;background:#f97316;color:#fff;font-size:11px;font-weight:700;line-height:1}
.nav-count-urgent{background:#dc2626}
.mob-group>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:11px 20px;color:rgba(255,255,255,.75);font-size:14px;font-weight:500;cursor:pointer}
.mob-group>summary::-webkit-details-marker{display:none}
.mob-group>summary::after{content:"▸";margin-left:auto;opacity:.5}
.mob-group[open]>summary::after{content:"▾"}
.mob-group>summary:hover{color:#fff;background:rgba(255,255,255,.08)}
.mob-drawer .mob-group-body a{padding-left:36px}

/* ── Projects in Halo (v5.75.0) — a migrated project's portal page ─────── */
.halo-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 10px;
              border-radius:999px; background:var(--navy); color:#fff; letter-spacing:.2px; }
.halo-badge svg { width:14px; height:14px; }
.halo-mirror { border:1px solid var(--border); border-top:3px solid var(--navy); border-radius:var(--radius-lg);
               background:var(--surface); padding:16px 18px; margin-bottom:16px; }
.halo-mirror-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px 20px; }
.halo-mirror-k { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:3px; }
.halo-mirror-v { font-size:15px; font-weight:600; color:var(--navy); }
.halo-mirror-v.sm { font-size:13px; font-weight:500; }
.halo-stages { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; }
.halo-stage { border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; background:var(--surface2); }
.halo-stage .k { font-size:11px; color:var(--muted); margin-bottom:2px; }
.halo-stage .v { font-size:13px; font-weight:600; }
.halo-strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.halo-strip .tile { border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; background:var(--surface); }
.halo-strip .k { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.halo-strip .v { font-size:20px; font-weight:700; color:var(--navy); margin-top:2px; }
.halo-ro { position:relative; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:16px 18px; margin-bottom:14px; }
.halo-ro-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.halo-ro-body { font-size:13px; }
.halo-ro-body p:last-child { margin-bottom:0; }
.halo-ro-note { font-size:12px; color:var(--muted); }
.halo-ro table td { vertical-align:top; }
@media (max-width: 640px) { .halo-mirror { padding:14px; } .halo-strip .v { font-size:18px; } }
.halo-update { padding:8px 0; }
.halo-ro-body img { max-width:100%; height:auto; max-height:260px; border-radius:6px; }
.halo-ro-body table { max-width:100%; font-size:12px; }
.halo-ro-body .table-wrap, .halo-ro-body { overflow-x:auto; }
/* v5.75.2 — Halo tickets on a migrated project's Overview, with hover cards */
.halo-tickets { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.halo-tk { position:relative; border-bottom:1px solid var(--border); }
.halo-tk:last-child { border-bottom:0; }
.halo-tk.is-project { background:var(--surface2); }
.halo-tk-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; cursor:default; }
.halo-tk:hover .halo-tk-row, .halo-tk:focus-within .halo-tk-row { background:rgba(24,191,247,.08); }
.halo-tk-main { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.halo-tk-kind { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); flex-shrink:0; width:92px; }
.halo-tk-title { font-size:13px; font-weight:600; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.halo-tk-id { font-size:11px; color:var(--muted); text-decoration:none; flex-shrink:0; }
.halo-tk-meta { display:flex; align-items:center; gap:14px; font-size:12px; flex-shrink:0; }
.halo-tk-status { font-weight:700; padding:2px 8px; border-radius:999px; background:var(--surface2); border:1px solid var(--border); }
.halo-tk-count { font-size:11px; color:var(--muted); }
.halo-pop { display:none; position:absolute; left:12px; right:12px; top:calc(100% - 2px); z-index:40; background:var(--surface); border:1px solid var(--border);
            border-radius:var(--radius-lg); box-shadow:0 10px 28px rgba(22,29,75,.18); padding:10px 14px; max-height:360px; overflow-y:auto; }
.halo-tk:hover .halo-pop, .halo-tk:focus-within .halo-pop { display:block; }
.halo-pop-head { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:6px; }
.halo-act { padding:6px 0; border-top:1px solid var(--border); }
.halo-act:first-of-type { border-top:0; }
.halo-act-meta { font-size:11px; color:var(--muted); }
.halo-act-internal { font-size:10px; font-weight:700; text-transform:uppercase; padding:1px 6px; border-radius:999px; background:var(--navy); color:#fff; margin-left:4px; }
.halo-act-note { font-size:12px; margin-top:2px; white-space:pre-wrap; }
@media (max-width: 720px) {
  .halo-tk-row { flex-direction:column; align-items:flex-start; gap:4px; }
  .halo-tk-meta { gap:10px; flex-wrap:wrap; }
  .halo-tk-kind { width:auto; }
}
/* v5.76.0 — traffic-light stage tiles on a migrated project */
.halo-stage.tone-green { background:rgba(48,204,179,.14); border-color:rgba(48,204,179,.5); }
.halo-stage.tone-green .v { color:#148B79; }
.halo-stage.tone-amber { background:rgba(249,209,74,.18); border-color:rgba(249,209,74,.7); }
.halo-stage.tone-amber .v { color:#9A6F00; }
.halo-stage.tone-red   { background:rgba(241,108,87,.12); border-color:rgba(241,108,87,.5); }
.halo-stage.tone-red .v { color:#C13F2B; }
.halo-tk-status.tone-green { background:rgba(48,204,179,.16); border-color:rgba(48,204,179,.5); color:#148B79; }
.halo-tk-status.tone-amber { background:rgba(249,209,74,.2); border-color:rgba(249,209,74,.7); color:#9A6F00; }
.halo-tk-status.tone-red   { background:rgba(241,108,87,.14); border-color:rgba(241,108,87,.5); color:#C13F2B; }
/* v5.78.0 — Commercials as a pathway: stage headings between the .ob-* hero/stepper and the cards */
.comm-path { margin-bottom:18px; }
.comm-path .ob-node { text-decoration:none; }
.comm-stage { display:flex; align-items:center; gap:12px; margin:22px 0 10px; }
.comm-stage .num { width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
                   font-weight:700; font-size:13px; flex-shrink:0; background:var(--surface2); border:2px solid var(--border); color:var(--muted); }
.comm-stage.current .num { background:var(--orange); border-color:var(--orange); color:var(--navy); }
.comm-stage.done .num { background:var(--green); border-color:var(--green); color:#fff; }
.comm-stage .tag { display:inline-block; margin-left:8px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
                   padding:2px 8px; border-radius:999px; background:var(--orange); color:var(--navy); vertical-align:middle; }
.comm-stage .blurb { font-size:12px; color:var(--muted); margin-top:2px; }
.comm-stage.upcoming h3 { color:var(--muted); }
/* v5.84.0 — PRINCE2 Project Board panel on the project page */
.board-seats { display:flex; flex-wrap:wrap; gap:8px; }
.board-seat { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--border); border-radius:999px; background:var(--surface); font-size:12px; }
.board-seat .role { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.board-seat.missing { border-style:dashed; color:var(--muted); }
.board-seat form { display:inline; margin:0; }
.board-seat .x { border:0; background:none; color:var(--muted); cursor:pointer; padding:0 2px; font-size:13px; line-height:1; }
.board-gate { margin-top:14px; padding:14px 16px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--surface2); }
.board-gate.pending { border-color:var(--orange); }
.board-votes { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.board-vote { font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface); }
.board-vote.approve { background:rgba(48,204,179,.16); border-color:rgba(48,204,179,.5); color:#148B79; }
.board-vote.reject { background:rgba(241,108,87,.14); border-color:rgba(241,108,87,.5); color:#C13F2B; }
.board-vote.waiting { color:var(--muted); }
.board-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin:10px 0; }
.board-fact { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; }
.board-fact .k { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.board-fact .v { font-size:14px; font-weight:600; }
.board-brief { max-height:260px; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; font-size:13px; }
.board-history { margin-top:12px; font-size:12px; }
.board-history li { margin-bottom:4px; }
/* v5.85.0 — project request page (Request → Board approval → In Halo) */
.req-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:16px; align-items:start; }
@media (max-width: 900px) { .req-grid { grid-template-columns:1fr; } }
.req-steps { list-style:none; display:flex; gap:0; padding:0; margin:0 0 16px; counter-reset:none; flex-wrap:wrap; }
.req-steps li { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); padding-right:28px; position:relative; }
.req-steps li:not(:last-child)::after { content:''; position:absolute; right:8px; top:50%; width:12px; height:2px; background:var(--border); }
.req-steps .num { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
                  background:var(--surface2); border:2px solid var(--border); color:var(--muted); }
.req-steps li.done { color:var(--text); }
.req-steps li.done .num { background:var(--green); border-color:var(--green); color:#fff; }
.req-steps li.current { color:var(--navy); }
.req-steps li.current .num { background:var(--orange); border-color:var(--orange); color:var(--navy); }
.req-status { font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; border:1px solid var(--border); }
.req-status-yellow { background:rgba(249,209,74,.2); border-color:rgba(249,209,74,.7); color:#9A6F00; }
.req-status-purple { background:rgba(160,126,250,.14); border-color:rgba(160,126,250,.5); color:#6541DB; }
.req-status-blue   { background:rgba(24,191,247,.14); border-color:rgba(24,191,247,.5); color:#0A7FAB; }
.req-status-green  { background:rgba(48,204,179,.16); border-color:rgba(48,204,179,.5); color:#148B79; }
.req-status-coral  { background:rgba(241,108,87,.14); border-color:rgba(241,108,87,.5); color:#C13F2B; }
.req-type { padding:2px 8px; }
.req-brief { font-size:13px; line-height:1.55; }
.req-brief h3, .req-brief h4 { font-size:13px; font-weight:700; margin:12px 0 4px; }
.req-brief h3:first-child, .req-brief h4:first-child { margin-top:0; }
.req-vote { padding:12px 14px; border-radius:var(--radius-lg); background:var(--surface2); border:1px solid var(--border); }
.req-facts { grid-template-columns:1fr 1fr; margin:0; }
.board-role-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
/* v5.86.0 — request page as a pathway (ob-hero + ob-stepper) + plain-language help */
.req-path { margin-bottom:16px; }
.req-path .ob-hero h1 { margin:4px 0 8px; }
.req-stat-text { font-size:15px; line-height:1.25; overflow-wrap:anywhere; }
.req-stat-text a { color:inherit; }
.req-track.n3 { grid-template-columns:repeat(3,1fr); }
.req-track.n4 { grid-template-columns:repeat(4,1fr); }
.req-track.n3::before, .req-track.n3 .progress-line { left:calc(100%/6); }
.req-track.n3::before { right:calc(100%/6); }
.req-track.n4::before, .req-track.n4 .progress-line { left:12.5%; }
.req-track.n4::before { right:12.5%; }
.req-explain summary { font-size:13px; }
.req-how { margin:10px 0 10px 18px; padding:0; font-size:13px; line-height:1.5; }
.req-how li { margin-bottom:6px; }
.req-roles { display:flex; flex-direction:column; gap:10px; }
.req-captures { margin:12px 0 0 26px; padding:10px 12px; border-left:3px solid var(--border); }
.req-caps { list-style:none; margin:0; padding:0; }
.req-caps li { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; }
.req-caps li > span:first-child { flex:1; min-width:0; }
.req-cap-state { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(249,209,74,.2); color:#9A6F00; }
.req-cap-state.back { background:rgba(48,204,179,.16); color:#148B79; }
@media (max-width: 720px) { .req-path .ob-hero { grid-template-columns:1fr; } .req-path .ob-ring-wrap { display:none; } }
/* v5.87.0 — Progress feed of the Halo project ticket on a migrated project's Overview */
.halo-k-note { text-transform:none; letter-spacing:0; }
.halo-feed { list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--border); }
.halo-feed-item { position:relative; padding:0 0 12px 14px; }
.halo-feed-item::before { content:''; position:absolute; left:-21px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--orange); border:2px solid var(--surface); }
.halo-feed-item.internal::before { background:var(--navy); }
.halo-feed-item.more { display:none; }
.halo-feed.all .halo-feed-item.more { display:block; }
.halo-feed-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12px; color:var(--muted); }
.halo-feed-meta strong { color:var(--text); }
.halo-feed-outcome { font-weight:600; color:var(--navy); }
.halo-feed-note { font-size:13px; margin-top:3px; white-space:pre-wrap; overflow-wrap:anywhere; }
/* v5.87.0 — reviewer picker on the information-request form */
.req-select { padding:9px; border-radius:8px; }
/* v5.88.0 — Halo stage bar (Discovery → Design → Implementation → Handover) at the top of a Halo project */
.stage-bar { margin-bottom:16px; }
.stage-bar .ob-stepper { margin:0; padding:18px 22px 14px; }
.stage-bar .ob-node .cnt { text-align:center; max-width:190px; }
.stage-bar-await { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(249,209,74,.25); color:#9A6F00; }
.board-group-row td { background:var(--surface2); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--navy); }
/* v5.88.0 — Labs: raw Halo workflow JSON */
.wf-dump { max-height:520px; overflow:auto; font-size:11px; line-height:1.45; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; white-space:pre; margin:0; }
/* v5.90.0 — the PM's "Request Project Board" note on a board gate */
.board-pm-note { margin:10px 0; padding:10px 12px; border-left:3px solid var(--orange); background:var(--surface); border-radius:0 8px 8px 0; }
/* v5.91.0 — Request a project: pathway hero + four numbered sections + choice tiles */
.req-new-hero { grid-template-columns:1fr; }
.req-mini-steps { list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; margin:14px 0 0; padding:0; }
.req-mini-steps li { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); }
.req-mini-steps li small { display:block; font-weight:500; font-size:11px; color:var(--muted); margin-left:4px; }
.req-mini-steps li span { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:var(--surface2); border:2px solid var(--border); }
.req-mini-steps li.on { color:var(--navy); }
.req-mini-steps li.on span { background:var(--orange); border-color:var(--orange); color:var(--navy); }
.req-form { display:flex; flex-direction:column; gap:16px; max-width:900px; }
.req-sec { padding:18px 20px; }
.req-sec-hd { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:var(--navy); margin:0 0 14px; }
.req-sec-hd .n { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; background:var(--navy); color:#fff; flex-shrink:0; }
.req-more { margin-top:4px; }
.req-more > summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--navy); list-style:none; }
.req-more > summary::-webkit-details-marker { display:none; }
.req-more[open] > summary { margin-bottom:4px; }
.req-board-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.req-board-seat { border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--surface); display:flex; flex-direction:column; gap:4px; min-width:0; }
.req-board-seat.you { border-color:var(--orange); }
.req-choices { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px; }
.req-choice { display:flex; flex-direction:column; gap:4px; padding:14px 16px 14px 42px; border:2px solid var(--border); border-radius:12px; cursor:pointer; position:relative; background:var(--surface); }
.req-choice input { position:absolute; left:14px; top:16px; }
.req-choice .t { font-weight:700; font-size:14px; color:var(--navy); }
.req-choice .d { font-size:12px; color:var(--muted); line-height:1.45; }
.req-choice:has(input:checked) { border-color:var(--orange); background:rgba(24,191,247,.06); }
.req-cap-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:6px 16px; }
.req-form .req-captures { margin:14px 0 0; }
.req-submit { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0 4px; }
@media (max-width: 760px) { .req-board-grid { grid-template-columns:1fr; } }
/* v5.92.0 — Labs: bulk migration into Halo */
.bulk-steps { grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); }
.bulk-pill { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--surface2); color:var(--muted); }
.bulk-pill.good { background:rgba(48,204,179,.16); color:#148B79; }
.bulk-pill.bad { background:rgba(241,108,87,.14); color:#C13F2B; }
/* v5.92.0 — Project Tracker by the four Halo stages (Requests · Discovery · Design · Implementation · Handover) */
.p-0 { padding:0 !important; }
.pfilters { padding:10px 16px; }
.pf-ctl { font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); width:auto; max-width:180px; }
.pf-num { width:76px; }
.pf-search { flex:1; min-width:200px; max-width:300px; }
.pf-check { width:auto; box-shadow:none; }
.pf-more > summary { color:var(--muted); list-style:none; }
.pf-more > summary::-webkit-details-marker { display:none; }
.pfilters .btn.is-on, #view-kanban.is-on, #view-list.is-on { color:var(--orange); font-weight:600; }
.pboard-scroll { overflow-x:auto; padding-bottom:16px; }
.pboard { display:flex; gap:12px; align-items:flex-start; min-width:max-content; }
.pcol { width:250px; flex-shrink:0; --lane:#64748b; }
.lane-requests { --lane:#6541DB; } .lane-discovery { --lane:#0A7FAB; } .lane-design { --lane:#148B79; }
.lane-implementation { --lane:#161D4B; } .lane-handover { --lane:#9A6F00; } .lane-halo_unknown { --lane:#C13F2B; }
.lane-not_in_halo, .lane-closed { --lane:#64748b; }
.pcol-head { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; padding:8px 10px; border-radius:var(--radius); border-top:3px solid var(--lane); background:var(--surface); border-left:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.pcol-title { font-size:13px; font-weight:700; color:var(--lane); }
.pcol-sub { font-size:10.5px; color:var(--muted); line-height:1.3; }
.pcol-count { margin-left:auto; font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--lane); color:#fff; }
.pcol-empty { font-size:12px; color:var(--muted); text-align:center; padding:12px; border:1px dashed var(--border); border-radius:var(--radius); }
.project-card { display:block; text-decoration:none; margin-bottom:8px; }
.pcard { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--lane); border-radius:var(--radius); padding:10px 12px; transition:box-shadow .15s; }
.project-card:hover .pcard { box-shadow:0 2px 8px rgba(0,0,0,.1); }
.pcard.overdue { border-color:#fca5a5; border-left-color:var(--lane); }
.pcard-name { font-size:12.5px; font-weight:700; color:var(--navy); line-height:1.3; margin-bottom:2px; }
.pcard-sub { font-size:10.5px; color:var(--muted); margin-bottom:6px; }
.pcard-step { font-size:11px; font-weight:600; color:var(--lane); }
.pcard-status { display:inline-block; margin-top:4px; font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:999px; background:var(--surface2); color:var(--text); border:1px solid var(--border); }
.pcard-status.await { background:rgba(249,209,74,.25); border-color:rgba(249,209,74,.8); color:#9A6F00; }
.pcard-bar { height:3px; background:var(--surface2); border-radius:999px; overflow:hidden; margin:6px 0 2px; }
.pcard-bar span { display:block; height:100%; background:var(--lane); border-radius:999px; }
.pcard-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:10.5px; color:var(--muted); margin-top:6px; }
.project-row { cursor:pointer; }
.plist-stage { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--surface2); color:var(--lane, var(--navy)); }
/* v5.92.0 — "How projects work" help modal */
.help-modal-wide { max-width:760px; }
.help-modal-body { line-height:1.55; max-height:70vh; overflow-y:auto; padding-right:6px; }
.help-modal-body p { margin:0 0 10px; }
.help-modal-body h4 { margin:14px 0 6px; }
.help-modal-body ul { margin:0 0 10px 18px; font-size:12.5px; line-height:1.6; }
/* v5.93.0 — Project archive (read-only list + project page) */
.ar-table { width:100%; }
.ar-row { cursor:pointer; }
.ar-row:hover td { background:var(--surface2); }
.ar-state { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(48,204,179,.16); color:#148B79; }
.ar-state.cancelled { background:rgba(241,108,87,.14); color:#C13F2B; }
.ar-state.legacy { background:var(--surface2); color:var(--muted); }
.ar-state.halo { background:var(--purple-bg); color:var(--purple); }
.ar-none { padding:14px 16px; }
.ar-updates { display:flex; flex-direction:column; gap:10px; max-height:900px; overflow:auto; }
.ar-update { border-left:3px solid var(--border); padding:4px 0 6px 12px; }
.ar-dl { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; font-size:13px; }
.ar-dl dt { color:var(--muted); }
.ar-dl dd { margin:0; font-weight:600; }
/* v6.1.4 — archived project: the six portal steps + everything under each */
.req-track.n6 { grid-template-columns:repeat(6,1fr); }
.req-track.n6::before, .req-track.n6 .progress-line { left:calc(100%/12); }
.req-track.n6::before { right:calc(100%/12); }
.ar-steps { margin-top:12px; }
.ar-steps a.ob-node { text-decoration:none; }
.ar-steps .ob-node .cnt { font-size:11px; }
.ar-step-no { width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--navy); color:#fff; flex-shrink:0; }
.ar-stage.empty { opacity:.75; }
.ar-stage.empty .ar-step-no { background:var(--surface2); color:var(--muted); }
.ar-st { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--surface2); color:var(--muted); white-space:nowrap; }
.ar-st.done { background:rgba(48,204,179,.16); color:#148B79; }
.ar-st.live { background:rgba(249,209,74,.22); color:#9A6F00; }
.ar-sub { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:14px 0 6px; }
.ar-body { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:12px 14px; font-size:14px; line-height:1.65; }
.ar-loop { display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:10px; border:2px solid #6541DB; border-radius:var(--radius-lg); background:rgba(160,126,250,.08); text-decoration:none; color:inherit; }
.ar-loop-ic { width:38px; height:38px; border-radius:10px; background:#6541DB; color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ar-loop .upper { color:#6541DB; }
.ar-ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ar-wis { display:flex; flex-direction:column; gap:8px; }
.ar-wi { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:8px 12px; }
.ar-wi.sub { margin-left:18px; border-style:dashed; }
.ar-ck { list-style:none; margin:6px 0 0; padding:0; font-size:12px; line-height:1.6; }
.ar-ck li.done { color:var(--muted); }
.ar-files li > span:last-child { text-align:right; }
.ar-scroll { overflow-x:auto; }
.ar-table-sm { font-size:12.5px; border-collapse:collapse; }
.ar-table-sm th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:4px 8px 6px; border-bottom:1px solid var(--border); white-space:nowrap; }
.ar-table-sm td { padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
.ar-table-sm tbody tr:last-child td { border-bottom:0; }
.ar-table-sm tfoot td { border-top:1px solid var(--border); border-bottom:0; }
@media (max-width:640px) { .req-track.n6 .ob-node .cnt { display:none; } .req-track.n6 .ob-node .lbl { font-size:10px; } }
/* v5.94.0 — Projects hero (homepage greeting shape + counts) and the Requests card grid */
.proj-hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }
.proj-hero-actions { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.proj-hero-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:10px; margin-top:14px; position:relative; z-index:1; }
.proj-stat { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; background:var(--bg); border:1px solid var(--border); text-decoration:none; color:inherit; text-align:left; font:inherit; }
.proj-stat .k { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.proj-stat .v { font-size:22px; font-weight:800; color:var(--navy); line-height:1.1; }
.proj-stat .s { font-size:11.5px; color:var(--muted); }
.proj-stat.is-link { cursor:pointer; }
.proj-stat.is-link:hover, .proj-stat.on { border-color:var(--orange); }
.proj-stat.warn .v { color:#9A6F00; }
.proj-stat.bad .v { color:#C13F2B; }
.pcard-head { display:flex; align-items:flex-start; gap:9px; }
.pcard-logo { flex-shrink:0; margin-top:1px; }
.rq-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; }
.rq-card { display:flex; flex-direction:column; gap:8px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); text-decoration:none; color:inherit; transition:box-shadow .15s, border-color .15s; }
.rq-card:hover { border-color:var(--orange); box-shadow:0 4px 14px rgba(0,0,0,.08); }
.rq-card-top { display:flex; align-items:center; gap:12px; }
.rq-name { font-size:14px; font-weight:700; color:var(--navy); line-height:1.3; }
.rq-sub { font-size:12px; color:var(--muted); }
.rq-state { align-self:flex-start; }
.rq-bar { --lane:#0A7FAB; margin:0; }
.rq-meta { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--text); }
.rq-foot { font-size:11px; color:var(--muted); border-top:1px solid var(--border); padding-top:8px; }
.req-title h1 { margin:0; }
.ob-count { padding:3px 10px; }
/* ── My Actions (v5.95.0) ── */
.ma-wrap { max-width:1100px; margin:0 auto; }
.ma-sec { margin-bottom:16px; }
.ma-list { display:flex; flex-direction:column; }
.ma-row { display:flex; align-items:center; gap:12px; padding:10px 6px; border-top:1px solid var(--border); text-decoration:none; color:inherit; }
.ma-list > .ma-row:first-child { border-top:0; }
.ma-row:hover { background:var(--surface2); }
.ma-row.urgent { box-shadow:inset 3px 0 0 #F16C57; }
.ma-ico { width:26px; text-align:center; font-size:17px; flex-shrink:0; }
.ma-title { display:block; font-size:13.5px; font-weight:600; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ma-ctx { display:block; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ma-count { min-width:24px; padding:1px 8px; border-radius:999px; background:var(--navy); color:#fff; font-size:12px; font-weight:700; text-align:center; }
.ma-go { font-size:12px; font-weight:600; color:var(--orange); white-space:nowrap; }
.ma-when, .ma-src { font-size:11.5px; color:var(--muted); white-space:nowrap; }
.ma-due { font-size:12px; white-space:nowrap; min-width:92px; text-align:right; color:var(--muted); }
.ma-due.bad { color:#C13F2B; font-weight:600; }
.ma-due.warn { color:#9A6F00; font-weight:600; }
.ma-x { border:1px solid var(--border); background:var(--surface); border-radius:8px; width:28px; height:28px; cursor:pointer; color:var(--muted); }
.ma-x:hover { color:#148B79; border-color:#30CCB3; }
.mw-chip { border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:4px 11px; font:inherit; font-size:12px; cursor:pointer; color:var(--text); }
.mw-chip.on { border-color:var(--orange); background:rgba(24,191,247,.12); font-weight:600; }
@media (max-width:640px) { .ma-src, .ma-when { display:none; } .ma-due { min-width:0; } }

/* ── Project Overview stages (v5.95.0) — the four Halo headings with their steps ── */
.ov-stages { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
@media (max-width:900px) { .ov-stages { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px) { .ov-stages { grid-template-columns:1fr; } }
.ov-stage { border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; background:var(--surface2); }
.ov-stage.current { border-color:var(--orange); background:rgba(24,191,247,.08); box-shadow:0 0 0 1px var(--orange) inset; }
.ov-stage-hd { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.ov-stage-now { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:1px 7px; border-radius:999px; background:var(--orange); color:var(--navy); }
.ov-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ov-step { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--muted); }
.ov-dot { width:16px; height:16px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; margin-top:1px; font-size:10px; line-height:12px; text-align:center; }
.ov-step.done { color:var(--text); }
.ov-step.done .ov-dot { background:#30CCB3; border-color:#30CCB3; color:#fff; }
.ov-step.current { color:var(--navy); font-weight:700; }
.ov-step.current .ov-dot { border-color:var(--orange); background:var(--orange); }
.ov-step-name { display:block; }
.ov-step-field { display:inline-block; margin-top:2px; font-size:11px; font-weight:600; padding:0 6px; border-radius:6px; background:var(--surface); border:1px solid var(--border); color:var(--muted); }
.ov-step-field.tone-green { color:#148B79; border-color:rgba(48,204,179,.5); }
.ov-step-field.tone-amber { color:#9A6F00; border-color:rgba(249,209,74,.7); }
.ov-step-field.tone-red { color:#C13F2B; border-color:rgba(241,108,87,.5); }
/* ── v5.96.0 — bold page heroes (Projects, Requests, My Actions, Request a project, How projects work):
      Nano Navy block, white Avant Garde title with one Chantal word in Binary Blue, glass count tiles. ── */
.proj-hero { background:var(--navy); color:#fff; border:0; border-radius:20px; padding:26px 28px 22px; position:relative; overflow:hidden; box-shadow:0 10px 30px rgba(22,29,75,.18); }
html[data-theme="refresh"] .proj-hero { background:linear-gradient(120deg, #161D4B 0%, #26236E 55%, #4A35BC 100%); }
.proj-hero::before { content:''; position:absolute; right:-60px; top:-100px; width:270px; height:270px; border-radius:76px; background:var(--orange); opacity:.2; transform:rotate(22deg); pointer-events:none; }
html[data-theme="refresh"] .proj-hero::after { content:''; position:absolute; right:190px; bottom:-130px; width:210px; height:210px; border-radius:64px; background:#A07EFA; opacity:.24; transform:rotate(-14deg); pointer-events:none; }
.proj-hero-eyebrow { font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:6px; }
html[data-theme="refresh"] .proj-hero-eyebrow { color:#24ECFB; }
.proj-hero .proj-hero-title { color:#fff; font-size:clamp(28px, 3.6vw, 42px); line-height:1.08; margin:0; font-weight:700; }
html[data-theme="refresh"] .proj-hero .proj-hero-title { font-weight:500; }
.proj-hero-title .hand { color:var(--orange); }
html[data-theme="refresh"] .proj-hero-title .hand { font-size:1.18em; line-height:.8; color:#18BFF7; }
.proj-hero-for { font-size:.5em; opacity:.8; }
.proj-hero-sub { font-size:14px; color:rgba(255,255,255,.84); margin-top:10px; max-width:720px; line-height:1.55; }
.proj-hero .proj-stat { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; }
.proj-hero .proj-stat .k { color:rgba(255,255,255,.72); }
.proj-hero .proj-stat .v { color:#fff; font-size:30px; }
.proj-hero .proj-stat .s { color:rgba(255,255,255,.66); }
.proj-hero .proj-stat.is-link:hover, .proj-hero .proj-stat.on { border-color:var(--orange); background:rgba(255,255,255,.15); }
.proj-hero .proj-stat.warn .v { color:#F9D14A; }
.proj-hero .proj-stat.bad .v { color:#FFA291; }
.proj-hero .btn.btn-ghost { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.3); }
.proj-hero .btn.btn-ghost:hover { background:rgba(255,255,255,.2); color:#fff; border-color:#fff; }
.proj-hero .req-mini-steps { position:relative; z-index:1; margin-top:18px; }
.proj-hero .req-mini-steps li { color:rgba(255,255,255,.72); }
.proj-hero .req-mini-steps li span { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35); color:#fff; }
.proj-hero .req-mini-steps li.on { color:#fff; }
.proj-hero .req-mini-steps li.on span { background:var(--orange); border-color:var(--orange); color:var(--navy); }
.proj-hero .req-mini-steps li small { color:rgba(255,255,255,.55); }

/* ── v5.96.0 — Request a project: the form + a sticky summary panel ── */
.req-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.req-layout .req-form { max-width:none; }
.req-sec > .form-group + .form-group { margin-top:12px; }
.req-sec > .form-group + .req-more { margin-top:12px; }
.req-aside { position:sticky; top:70px; display:flex; flex-direction:column; gap:14px; }
.req-aside-k { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.req-summary { border-top:4px solid var(--orange); }
.req-sum-name { font-size:16px; font-weight:700; color:var(--navy); margin-bottom:10px; overflow-wrap:anywhere; }
.req-sum-dl { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0; font-size:13px; }
.req-sum-dl dt { color:var(--muted); }
.req-sum-dl dd { margin:0; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.req-after-list { list-style:none; counter-reset:ra; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:10px; }
.req-after-list li { counter-increment:ra; position:relative; padding-left:32px; font-size:13px; }
.req-after-list li::before { content:counter(ra); position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; background:var(--navy); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.req-after-list li strong { display:block; color:var(--navy); }
.req-after-list li small { display:block; color:var(--muted); font-size:12px; line-height:1.4; }
@media (max-width:1000px) { .req-layout { grid-template-columns:1fr; } .req-aside { position:static; } }

/* ── v5.96.0 — How projects work (/projects/how-it-works) ── */
.hiw-sec { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 24px; margin-bottom:16px; }
.hiw-hd { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.hiw-n { width:32px; height:32px; border-radius:10px; background:var(--navy); color:#fff; font-weight:700; font-size:14px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transform:rotate(-6deg); }
.hiw-lede { font-size:14px; color:var(--text); max-width:820px; margin:0 0 14px; line-height:1.55; }
.hiw-split { display:grid; grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr); align-items:stretch; }
.hiw-place { border-radius:16px; padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.hiw-place.halo { background:var(--navy); color:#fff; }
.hiw-place.portal { background:rgba(24,191,247,.1); border:2px solid var(--orange); }
.hiw-place-tag { align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:3px 10px; border-radius:999px; background:var(--orange); color:var(--navy); }
.hiw-place.portal .hiw-place-tag { background:var(--navy); color:#fff; }
.hiw-place-title { font-family:var(--font-hd); font-size:22px; color:var(--navy); }
.hiw-place.halo .hiw-place-title { color:#fff; }
.hiw-ticks { list-style:none; margin:4px 0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:13.5px; }
.hiw-ticks li::before { content:'✓'; font-weight:700; margin-right:8px; color:var(--orange); }
.hiw-place-who { margin-top:auto; padding-top:6px; font-size:12px; font-weight:600; opacity:.8; }
.hiw-bridge { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; color:var(--muted); padding:8px; }
.hiw-bridge span { font-size:32px; color:var(--orange); line-height:1; }
.hiw-bridge small { font-size:11px; font-weight:600; }
.hiw-board { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.hiw-seat { border-radius:16px; padding:18px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; border:1px solid var(--border); background:var(--surface2); }
.hiw-seat.exec { border-top:5px solid #A07EFA; }
.hiw-seat.sup  { border-top:5px solid #30CCB3; }
.hiw-seat.user { border-top:5px solid var(--orange); }
.hiw-av { width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:#fff; margin-bottom:6px; transform:rotate(-4deg); }
.hiw-seat.exec .hiw-av { background:#6541DB; }
.hiw-seat.sup .hiw-av  { background:#148B79; }
.hiw-seat.user .hiw-av { background:var(--orange); color:var(--navy); font-size:26px; }
.hiw-seat-role { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.hiw-seat-name { font-size:17px; font-weight:700; color:var(--navy); }
.hiw-seat-q { font-size:13px; line-height:1.45; }
.hiw-seat-fix { margin-top:auto; padding-top:8px; font-size:11px; font-weight:600; color:var(--muted); }
.hiw-flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.hiw-flow li { position:relative; padding:16px; border-radius:14px; background:var(--surface2); border:1px solid var(--border); display:flex; flex-direction:column; gap:4px; }
.hiw-flow li:not(:last-child)::after { content:'→'; position:absolute; right:-14px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; z-index:1; }
.hiw-flow li.gate { background:rgba(160,126,250,.12); border-color:rgba(160,126,250,.55); }
.hiw-flow li.halo { background:var(--navy); border-color:var(--navy); }
.hiw-flow-ico { font-size:24px; }
.hiw-flow strong { font-size:14px; color:var(--navy); }
.hiw-flow small { font-size:12px; color:var(--muted); line-height:1.45; }
.hiw-flow li.halo strong { color:#fff; }
.hiw-flow li.halo small { color:rgba(255,255,255,.75); }
.hiw-stages { display:grid; grid-template-columns:repeat(4, minmax(0,1fr) 64px); align-items:stretch; }
.hiw-stage { border-radius:16px; padding:16px; color:#fff; display:flex; flex-direction:column; gap:6px; min-height:150px; }
.hiw-stage.s1 { background:#0A7FAB; }
.hiw-stage.s2 { background:#6541DB; }
.hiw-stage.s3 { background:#148B79; }
.hiw-stage.s4 { background:var(--navy); }
.hiw-stage-top { display:flex; justify-content:space-between; align-items:center; }
.hiw-stage-ico { font-size:22px; }
.hiw-stage-n { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; opacity:.8; }
.hiw-stage-name { font-family:var(--font-hd); font-size:22px; }
.hiw-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13px; }
.hiw-steps li { background:rgba(255,255,255,.16); border-radius:8px; padding:4px 8px; }
.hiw-gate { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:0 4px; }
.hiw-gate span { width:38px; height:38px; border-radius:50%; background:#F9D14A; display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 0 0 4px rgba(249,209,74,.3); }
.hiw-gate small { font-size:10.5px; font-weight:700; color:#9A6F00; line-height:1.2; }
.hiw-cycle, .hiw-time { display:flex; align-items:stretch; gap:8px; }
.hiw-cycle-step, .hiw-time-step { flex:1; min-width:0; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; border:1px solid var(--border); background:var(--surface2); }
.hiw-cycle-step.halo, .hiw-time-step.halo { background:var(--navy); border-color:var(--navy); color:#fff; }
.hiw-cycle-step.portal { background:rgba(24,191,247,.1); border-color:rgba(24,191,247,.5); }
.hiw-cycle-where { align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:var(--navy); color:#fff; }
.hiw-cycle-step.halo .hiw-cycle-where { background:var(--orange); color:var(--navy); }
.hiw-cycle-step strong, .hiw-time-step strong { font-size:14px; color:var(--navy); }
.hiw-cycle-step small, .hiw-time-step small { font-size:12px; color:var(--muted); line-height:1.45; }
.hiw-cycle-step.halo strong, .hiw-time-step.halo strong { color:#fff; }
.hiw-cycle-step.halo small, .hiw-time-step.halo small { color:rgba(255,255,255,.75); }
.hiw-time-step > span { font-size:24px; }
.hiw-arrow { display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:var(--orange); }
.hiw-note { margin-top:12px; font-size:13px; padding:10px 14px; border-radius:10px; background:rgba(249,209,74,.18); border:1px solid rgba(249,209,74,.6); }
.hiw-links { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:12px; }
.hiw-link { display:flex; flex-direction:column; gap:3px; padding:14px 16px; border-radius:14px; border:1px solid var(--border); background:var(--surface2); text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
.hiw-link:hover { border-color:var(--orange); transform:translateY(-2px); }
.hiw-link span { font-size:22px; }
.hiw-link strong { font-size:14px; color:var(--navy); }
.hiw-link small { font-size:12px; color:var(--muted); }
@media (max-width:1000px) { .hiw-stages { grid-template-columns:1fr; } .hiw-gate { flex-direction:row; padding:8px 0; } }
@media (max-width:900px) { .hiw-flow { grid-template-columns:repeat(2, minmax(0,1fr)); } .hiw-flow li::after { display:none; } .hiw-cycle, .hiw-time { flex-direction:column; } .hiw-arrow { transform:rotate(90deg); } }
@media (max-width:760px) { .hiw-split { grid-template-columns:1fr; gap:10px; } .hiw-bridge { flex-direction:row; } .hiw-board { grid-template-columns:1fr; } .proj-hero { padding:20px 18px 18px; } }
@media (max-width:520px) { .hiw-flow { grid-template-columns:1fr; } .hiw-sec { padding:18px 16px; } }
/* ── v5.97.0 — project page header (logo + name + tags + people) and a "good" hero tile ── */
.proj-hero-id { display:flex; align-items:center; gap:16px; }
.proj-hero-logo { flex-shrink:0; padding:3px; border-radius:19px; background:rgba(255,255,255,.14); }
.proj-hero .proj-hero-title.proj-hero-title-sm { font-size:clamp(22px, 2.6vw, 32px); }
.proj-hero-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.proj-tag { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; }
.proj-tag svg { width:13px; height:13px; }
.proj-tag.halo { background:var(--orange); border-color:var(--orange); color:var(--navy); }
.proj-tag.await { background:rgba(249,209,74,.22); border-color:#F9D14A; color:#FFFA76; }
.proj-tag.bad { background:rgba(241,108,87,.22); border-color:#F16C57; color:#FFA291; }
.proj-hero-meta { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; color:rgba(255,255,255,.68); }
.proj-hero-meta strong { color:#fff; font-weight:600; margin-left:4px; }
.proj-hero-meta a { color:var(--orange); font-weight:600; margin-left:4px; }
html[data-theme="refresh"] .proj-hero-meta a { color:#24ECFB; }
.proj-hero .proj-stat.good .v { color:#27F4D9; }
@media (max-width:640px) { .proj-hero-id { align-items:flex-start; } .proj-hero-logo img, .proj-hero-logo span { width:44px !important; height:44px !important; } }

/* v6.0.0 — the "Send to" picker beside a publish button */
.ss-sendto { font-size:12px; padding:4px 8px; max-width:260px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }

/* ── Appearance control (avatar menu + mobile drawer) — v6.1.0 ──
   Rendered by \Concero\Services\Theme::toggle(): a Light / Dark / System
   segmented radio group, then the Classic switch (.nav-user-toggle, styled in
   theme-refresh.css). js/theme.js listens for .theme-mode-radio /
   .theme-classic-toggle changes. Classic is light-only, so the segment is
   greyed (.is-disabled) while it is on. */
.nav-appearance { display: flex; flex-direction: column; gap: 6px; padding: 8px 11px 4px; min-width: 232px; } /* widens the 180px avatar panel to fit three options */
.nav-appearance-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nav-seg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
}
.nav-seg.is-disabled { opacity: .45; pointer-events: none; }
.nav-seg-opt { position: relative; min-width: 0; }
.nav-seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
/* The .nav-user-panel variants out-rank header.php's `.nav-user span { color: white }`,
   which otherwise paints these labels white on the white panel. */
.nav-seg-opt span, .nav-user-panel .nav-seg-opt span {
  display: flex; align-items: center; justify-content: center; gap: 5px; height: 32px;
  border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--text-md);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.nav-seg-opt svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-seg-opt span:hover, .nav-user-panel .nav-seg-opt span:hover { color: var(--text); }
.nav-seg-opt input:checked + span, .nav-user-panel .nav-seg-opt input:checked + span { background: var(--orange); color: #fff; font-weight: 600; }
.nav-user-panel .nav-user-toggle > span { color: inherit; }
.nav-seg-opt input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 1px; }
/* On the navy mobile drawer */
.mob-user .nav-appearance { padding: 8px 0 4px; }
.mob-user .nav-appearance-label { color: rgba(255,255,255,.5); }
.mob-user .nav-seg { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.mob-user .nav-seg-opt span { color: rgba(255,255,255,.8); }
.mob-user .nav-seg-opt span:hover { color: #fff; }