/* MFA Staff Console: admin design system.
   Purpose-built for data work, related to the public site (Arial, green/gold,
   square corners) but chrome-heavy: left sidebar, dense tables, detail drawer.
   No build step; plain CSS. Status colours follow the design brief §9. */

:root {
  /* Brand (echoes the public site) */
  --brand: #1c5a8f;          /* accent: primary interactive (site --green, 8 Oct 2026) */
  --brand-dark: #00304e;     /* hover / darker */
  --brand-tint: #e3eefa;
  --navy: #0D2B45;           /* sidebar / deep chrome (site --navy) */
  --gold: #D4AF37;           /* the main action only, as on the public site */
  --gold-ink: #8a6a12;       /* gold text on light grounds (AA) */
  --gold-bright: #E1C566;    /* gold text on navy */
  --flag-band: linear-gradient(90deg, #000 0 33.33%, #BB0A30 33.33% 66.66%, #006600 66.66% 100%);
  --ink: #1A1A1A;            /* headings / primary text (site --ink) */
  --body: #2b3242;           /* body text (site --body) */
  --muted: #55617a;          /* secondary text */
  --faint: #646a77;          /* tertiary; AA on white and on --canvas (was #8a97ab, 3:1) */
  /* Surfaces */
  --canvas: #F1F4F6;         /* app background (site --subtle) */
  --card: #ffffff;
  --line: #e3e9f2;           /* hairlines / borders (site --line) */
  --line-soft: #eef2f7;
  /* Sidebar (on navy) */
  --side-bg: #0D2B45;
  --side-fg: #cdd8e6;
  --side-dim: #7d94b5;
  --side-hover: rgba(255, 255, 255, .07);
  --side-active: #1c5a8f;
  /* Status pill palette (brief §9) */
  --st-green: #1d7a4c;  --st-green-bg: #e7f4ec;
  --st-amber: #8a5a12;  --st-amber-bg: #fbf1d8;
  --st-orange: #b4571c; --st-orange-bg: #fbe6d5;
  --st-red: #b02a25;    --st-red-bg: #fbeceb;
  --st-blue: #1e5299;   --st-blue-bg: #e9f1fb;
  --st-gray: #556071;   --st-gray-bg: #eef2f7;
  --st-purple: #6b46c1; --st-purple-bg: #efeafc;
  /* Type scale: one ladder, used everywhere (no ad-hoc px sizes) */
  --fs-tag: 11px; --fs-eyebrow: 12px; --fs-meta: 13px; --fs-sm: 14px; --fs-base: 15px; --fs-lead: 17px;
  --fs-h2: 19px; --fs-h1: 22px; --fs-display: 30px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --sidebar-w: 244px;
  --topbar-h: 56px;
  --shadow: 0 1px 2px rgba(9, 20, 38, .06), 0 8px 24px rgba(9, 20, 38, .07);
  --shadow-lift: 0 14px 32px rgba(9, 20, 38, .12);
  --shadow-drawer: -12px 0 40px rgba(9, 20, 38, .18);
  /* Motion: one duration/easing pair so everything moves the same way */
  --dur: .16s; --dur-lg: .3s; --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); font-size: var(--fs-base); color: var(--body); background: var(--canvas); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--brand); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 500; letter-spacing: -.01em; }
.flag { font-size: 1.05em; font-style: normal; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* ============================ Buttons ============================ */
.btn { font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; line-height: 1; padding: 9px 14px; border-radius: 0; border: 1px solid transparent; cursor: pointer; background: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; transition: background .12s, border-color .12s, color .12s; }
.btn.sm { padding: 6px 10px; min-height: 30px; font-size: var(--fs-tag); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--ink); background: var(--line-soft); }
.btn-danger { border-color: var(--st-red); color: var(--st-red); background: #fff; }
.btn-danger:hover { background: var(--st-red); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============================ Sign in ============================ */
.signin { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(1100px 560px at 80% -10%, var(--brand-dark), var(--navy)); padding: 24px; }
.signin-card { width: 100%; max-width: 420px; background: #fff; border-top: 0; padding: 33px 30px 34px; background-image: var(--flag-band); background-size: 100% 3px; background-repeat: no-repeat; box-shadow: var(--shadow); }
.signin-brand { font-size: var(--fs-lead); font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.signin-lead { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; margin: 10px 0 20px; }
.signin-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #5b6472; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.signin-err { color: var(--st-red); font-size: var(--fs-meta); margin: 12px 0 0; }
.signin .btn-primary { width: 100%; justify-content: center; margin-top: 8px; }

/* ============================ Branding ============================ */
/* Kenyan tricolor rule + coat of arms, matching the public site's masthead. */
.flag-rule { display: block; height: 4px; background: linear-gradient(90deg, #0b0b0c 0 33.33%, #b02a25 33.33% 66.66%, #0b6b3a 66.66% 100%); }
.emblem { display: block; object-fit: contain; flex: none; }
.signin-card { padding-top: 0; border-top: 0; }
.signin-card .flag-rule { margin: 0 -30px 24px; }
.signin-brand { align-items: center; gap: 11px; }
.signin-brand .brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.signin-brand .brand-txt b { font-size: var(--fs-base); color: var(--ink); }
.signin-brand .brand-txt small { font-size: var(--fs-tag); color: var(--muted); font-weight: 400; margin-top: 1px; }
.side .flag-rule { flex: none; }
.side-brand { gap: 9px; }
.side-foot { line-height: 1.45; }

/* ============================ Fields ============================ */
.fld { display: block; margin-bottom: 14px; }
.fld-label { display: block; font-size: var(--fs-meta); font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.fld-input { width: 100%; font-family: var(--sans); font-size: var(--fs-sm); padding: 9px 11px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); min-height: 38px; }
.fld-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.fld-input.sm { min-height: 32px; padding: 5px 9px; font-size: var(--fs-meta); width: auto; }
.row-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--body); margin: 6px 0 14px; }

/* ============================ App shell ============================ */
#app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "side top" "side main"; height: 100vh; }

/* Sidebar */
.side { grid-area: side; background: var(--side-bg); color: var(--side-fg); display: flex; flex-direction: column; overflow: hidden; }
.side-brand { display: flex; align-items: center; gap: 9px; padding: 0 18px; height: var(--topbar-h); font-weight: 500; color: #fff; font-size: var(--fs-base); border-bottom: 1px solid rgba(255, 255, 255, .08); flex: none; }
.side-nav { padding: 10px 10px 20px; overflow-y: auto; flex: 1; }
.side-group { margin: 16px 8px 6px; font-size: var(--fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--side-dim); display: flex; align-items: center; gap: 6px; }
.side-group .lock { font-size: 11px; opacity: .8; }
.navbtn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: var(--side-fg); font-family: var(--sans); font-size: var(--fs-sm); padding: 9px 12px; border-radius: 0; }
.navbtn:hover { background: var(--side-hover); color: #fff; }
.navbtn.is-on { background: var(--side-active); color: #fff; font-weight: 500; }
.navbtn .nav-ic { width: 17px; height: 17px; flex: none; opacity: .9; }
.navbtn .nav-count { margin-left: auto; font-size: var(--fs-tag); background: rgba(255, 255, 255, .16); padding: 1px 7px; font-family: var(--mono); }
.navbtn.is-on .nav-count { background: rgba(255, 255, 255, .28); }
.side-foot { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: var(--fs-tag); color: var(--side-dim); flex: none; }

/* Topbar */
.topbar { grid-area: top; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 20px; }
.tb-burger { display: none; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--ink); }
.tb-scope { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-emblem { width: 30px; height: 30px; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 500; font-size: var(--fs-meta); flex: none; }
.tb-scope-txt { min-width: 0; }
.tb-scope-name { font-weight: 500; color: var(--ink); font-size: var(--fs-sm); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-scope-sub { font-size: var(--fs-tag); color: var(--muted); }
.tb-switch { font-size: var(--fs-meta); border: 1px solid var(--line); background: #fff; padding: 5px 9px; cursor: pointer; color: var(--ink); max-width: 220px; }
.tb-spacer { flex: 1; }
.tb-search { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--canvas); padding: 6px 10px; color: var(--muted); font-size: var(--fs-meta); cursor: pointer; min-width: 210px; }
.tb-search kbd { font-family: var(--mono); font-size: 10px; background: #fff; border: 1px solid var(--line); padding: 1px 5px; margin-left: auto; }
.role-chip { font-size: var(--fs-tag); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--brand); padding: 4px 9px; white-space: nowrap; }
.role-chip.hq { color: #fff; background: var(--navy); }
.tb-user { display: flex; align-items: center; gap: 8px; }
.tb-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: var(--fs-meta); font-weight: 500; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.tb-avatar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Main content */
.main { grid-area: main; overflow-y: auto; padding: 22px 26px 60px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-title { font-size: var(--fs-h1); line-height: 1.15; }
.page-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; line-height: 1.5; max-width: 88ch; }
.page-actions { display: flex; align-items: center; gap: 8px; }

/* Demo banner */
.demo-banner { background: var(--st-amber); border: 1px solid var(--st-amber); color: #fff; font-size: var(--fs-meta); padding: 8px 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }

/* ============================ Cards / metrics ============================ */
.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.metric { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--brand); padding: 16px 18px; box-shadow: var(--shadow); }
.metric.warn { border-top-color: var(--st-amber); }
.metric.alert { border-top-color: var(--st-red); }
.metric-n { font-size: var(--fs-display); font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.metric-l { font-size: var(--fs-meta); color: var(--muted); margin-top: 7px; }
.metric-x { font-size: var(--fs-tag); color: var(--faint); margin-top: 3px; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; }

/* Network overview: command dashboard */
.ov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.ov-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ov-stat { display: flex; flex-direction: column; gap: 2px; }
.ov-stat-n { font-size: var(--fs-h2); font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -.01em; }
.ov-stat-n.amber { color: var(--st-amber); } .ov-stat-n.red { color: var(--st-red); } .ov-stat-n.green { color: var(--st-green); }
.ov-stat-l { font-size: var(--fs-tag); color: var(--muted); }
.lvlbar { display: flex; height: 12px; width: 100%; overflow: hidden; background: var(--line-soft); }
.lvlseg { height: 100%; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: var(--fs-tag); color: var(--muted); }
.ov-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ov-flag { margin-top: 14px; background: var(--st-amber); color: #fff; font-size: var(--fs-meta); font-weight: 500; padding: 9px 12px; cursor: pointer; }
.ov-flag b { font-weight: 500; }
.tally-cell[data-go] { cursor: pointer; transition: border-color var(--dur) var(--ease); }
.tally-cell[data-go]:hover { border-color: var(--brand); }
.card { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.card-head h3 { font-size: var(--fs-base); }
.card-body { padding: 6px 16px 14px; }
.card-link { font-size: var(--fs-meta); font-weight: 500; color: var(--brand); cursor: pointer; }

/* Work queue */
.queue { list-style: none; margin: 0; padding: 0; }
.queue-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.queue-item:last-child { border-bottom: 0; }
.queue-item:hover { background: #fff; }
.queue-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 500; }
.queue-ic.warn { background: var(--st-amber); color: #fff; }
.queue-ic.alert { background: var(--st-red); color: #fff; }
.queue-txt { flex: 1; min-width: 0; }
.queue-t { display: block; font-size: var(--fs-sm); color: var(--ink); font-weight: 500; }
.queue-d { display: block; font-size: var(--fs-meta); color: var(--muted); margin-top: 1px; }
.queue-go { color: var(--faint); flex: none; }
.queue-empty { text-align: center; padding: 26px 10px; color: var(--muted); }
.queue-empty b { color: var(--st-green); display: block; font-size: var(--fs-base); }

/* ============================ Filter bar ============================ */
.filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); padding: 10px 12px; margin-bottom: 14px; }
.filterbar .grow { flex: 1; min-width: 160px; }
.filterbar .count { margin-left: auto; font-size: var(--fs-meta); color: var(--muted); }
/* One list toolbar for every work queue (8 Oct 2026). */
.lt-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 420px; min-width: 0; }
.lt-search { position: relative; display: flex; align-items: center; flex: 1 1 220px; max-width: 360px; min-width: 0; }
/* On a phone the list's search takes the full width instead of running off the edge (final review). */
@media (max-width: 520px) { .lt-tools { flex-basis: 100%; } .lt-search { max-width: none; } }
.lt-search svg { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.lt-search input { width: 100%; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: var(--fs-sm); color: var(--body); }
.lt-search input:focus, .lt-tools select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.lt-tools select, .lt-bar select { height: 34px; padding: 0 8px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: var(--fs-sm); color: var(--body); }
th.lt-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.lt-sortable::after { content: " \2195"; color: var(--faint); font-size: 11px; }
th.lt-sortable[aria-sort="ascending"]::after { content: " \2191"; color: var(--brand); }
th.lt-sortable[aria-sort="descending"]::after { content: " \2193"; color: var(--brand); }
th.lt-sortable:hover, th.lt-sortable:focus-visible { color: var(--brand); outline: none; }
tr[hidden] { display: none; }

/* ============================ Data table ============================ */
.table-wrap { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
thead th { position: sticky; top: 0; background: #fff; text-align: left; font-size: var(--fs-tag); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: #fff; }
tbody tr:last-child td { border-bottom: 0; }
.ref { font-family: var(--mono); font-size: var(--fs-meta); color: var(--brand-dark); }
.cell-strong { font-weight: 500; color: var(--ink); }
.cell-sub { font-size: var(--fs-tag); color: var(--muted); }

/* States */
.state { text-align: center; padding: 44px 20px; color: var(--muted); font-size: var(--fs-sm); }
.state-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; color: var(--faint); background: var(--line-soft); border-radius: 50%; }
.state b { display: block; color: var(--ink); font-size: var(--fs-base); margin-bottom: 4px; }
.state .btn { margin-top: 14px; }

/* Skeletons: shaped like the content that is loading */
.skel-line { display: block; height: 12px; border-radius: 2px; background: linear-gradient(90deg, #e9eef5, #f6f9fc, #e9eef5); background-size: 200% 100%; animation: sk 1.1s linear infinite; }
.skel-line.lg { height: 26px; }
.skel-line.w15 { width: 15%; } .skel-line.w20 { width: 20%; } .skel-line.w25 { width: 25%; } .skel-line.w30 { width: 30%; }
.skel-line.w40 { width: 40%; } .skel-line.w60 { width: 60%; } .skel-line.w70 { width: 70%; } .skel-line.w80 { width: 80%; }
.skel-table { padding: 0; }
.skel-thead { height: 38px; background: #fff; border-bottom: 1px solid var(--line); }
.skel-trow { display: flex; gap: 20px; align-items: center; padding: 15px 16px; border-bottom: 1px solid var(--line-soft); }
.skel-trow .skel-line { flex: none; }
.skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.skel-card { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.skel-metric { display: flex; flex-direction: column; gap: 10px; }
.skel-row { height: 14px; background: linear-gradient(90deg, #eef2f7, #f7fafe, #eef2f7); background-size: 200% 100%; animation: sk 1.1s linear infinite; margin: 14px; }
@keyframes sk { to { background-position: -200% 0; } }

/* ============================ Status pills ============================ */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-tag); font-weight: 500; padding: 3px 9px; text-transform: capitalize; white-space: nowrap; color: #fff; background: var(--st-gray); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.actioned, .pill.answered, .pill.approved, .pill.issued, .pill.ready, .pill.attended, .pill.active, .pill.green, .pill.confirmed, .pill.verified, .pill.published, .pill.resolved, .pill.completed, .pill.complete, .pill.l1 { color: #fff; background: var(--st-green); }
.pill.priority, .pill.triaged, .pill.under_review, .pill.info_requested, .pill.waitlisted, .pill.shortlisted, .pill.amber, .pill.pending, .pill.needs_info, .pill.in_progress, .pill.review, .pill.partial, .pill.l2 { color: #fff; background: var(--st-amber); }
.pill.orange, .pill.l3 { color: #fff; background: var(--st-orange); }
.pill.critical, .pill.revoked, .pill.escalate, .pill.dropped, .pill.red, .pill.cancelled, .pill.no_show, .pill.flagged, .pill.rejected, .pill.breach, .pill.l4 { color: #fff; background: var(--st-red); }
.pill.assigned, .pill.registered, .pill.triage, .pill.blue, .pill.new, .pill.submitted, .pill.scheduled, .pill.open, .pill.checked_in { color: #fff; background: var(--st-blue); }
.pill.closed, .pill.collected, .pill.inactive, .pill.expired, .pill.withdrawn, .pill.routine, .pill.declined, .pill.gray, .pill.served, .pill.archived, .pill.draft, .pill.past { color: #fff; background: var(--st-gray); }
.pill.purple, .pill.escalated { color: #fff; background: var(--st-purple); }

/* Reference / read-only-from-HQ panel */
.refpanel { border: 1px dashed var(--line); background: #fff; padding: 16px; position: relative; }

/* Region tally */
.tally { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tally-cell { border: 1px solid var(--line); padding: 12px 14px; background: #fff; }
.tally-n { font-size: var(--fs-h1); font-weight: 500; color: var(--ink); letter-spacing: -.02em; }
.tally-l { font-size: var(--fs-meta); color: var(--muted); text-transform: capitalize; }

/* ============================ Detail drawer ============================ */
.drawer-scrim { position: fixed; inset: 0; background: rgba(6, 14, 30, .32); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 94vw); background: #fff; box-shadow: var(--shadow-drawer); z-index: 41; display: flex; flex-direction: column; }
.drawer-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--surface, #fff); }
.drawer-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* The reference: a small, quiet, monospaced label — never mashed into the title. */
.drawer-head b, .drawer-head .ref { font-size: var(--fs-tag); font-weight: 500; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; text-transform: none; order: -1; }
/* The title: the line that actually names the thing. */
.drawer-head h3, .drawer-head > div > span:not(.ref) { font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.drawer-head > .pill, .drawer-head > .pill--status { align-self: flex-start; flex: 0 0 auto; }
.drawer-x { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); padding: 2px 6px; transition: color var(--dur) var(--ease); }
.drawer-x:hover, .modal-x:hover { color: var(--ink); }
.drawer-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.drawer-actions { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; }
.dl, .kv { display: grid; grid-template-columns: 128px 1fr; gap: 12px 16px; font-size: var(--fs-sm); margin: 0; align-items: baseline; }
.dl dt, .kv dt { color: var(--muted); font-weight: 500; }
.dl dd, .kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
/* A value that is itself a status pill shouldn't inherit the baseline nudge. */
.dl dd > .pill, .kv dd > .pill, .dl dd > [class*="pill"], .kv dd > [class*="pill"] { vertical-align: middle; }
.drawer-body .cell-sub { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-tag); }
/* The "no endpoint reads this yet" honesty notes, set apart from the data. */
.drawer-body > .cell-sub, .drawer-note { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.drawer-sub { font-size: var(--fs-tag); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 20px 0 8px; }
.timeline { list-style: none; margin: 6px 0 0; padding: 0; }
.timeline li { padding: 9px 0 9px 18px; border-bottom: 1px solid var(--line-soft); position: relative; font-size: var(--fs-meta); color: var(--body); }
.timeline li:last-child { border-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.timeline .tl-when { color: var(--faint); font-size: var(--fs-tag); }

/* ============================ Modal ============================ */
.modal { position: fixed; inset: 0; background: rgba(6, 14, 30, .4); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal-card { width: 100%; max-width: 460px; background: #fff; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: var(--fs-lead); }
.modal-x { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--muted); }
.modal-body { padding: 20px; }
.modal-body .btn-primary { width: 100%; justify-content: center; }

/* Command palette */
.palette { position: fixed; inset: 0; background: rgba(6, 14, 30, .4); z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.palette-card { width: min(560px, 92vw); background: #fff; box-shadow: var(--shadow); }
.palette-card input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font-size: var(--fs-lead); font-family: var(--sans); outline: none; box-sizing: border-box; }
.palette-list { max-height: 320px; overflow-y: auto; }
.palette-item { padding: 11px 18px; cursor: pointer; font-size: var(--fs-sm); display: flex; gap: 10px; align-items: center; }
.palette-item:hover, .palette-item.on { background: #fff; }
.palette-item .pi-tag { margin-left: auto; font-size: var(--fs-tag); color: var(--muted); }

/* Toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 12px 20px; font-size: var(--fs-sm); z-index: 70; box-shadow: var(--shadow); }
.toast.err { background: var(--st-red); }

/* ============================ Filter tabs ============================ */
.filter-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.ftab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 14px; font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; color: var(--muted); cursor: pointer; }
.ftab:hover { color: var(--ink); }
.ftab.on { color: var(--brand); border-bottom-color: var(--brand); }

/* ============================ CMS editor ============================ */
.cms { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
.cms-form { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 20px 22px; }
.cms-form .fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.cms-form textarea.fld-input { min-height: 180px; resize: vertical; line-height: 1.55; }
.cms-form .body-area { min-height: 240px; }
.cms-hint { font-size: var(--fs-tag); color: var(--faint); margin: -8px 0 14px; }
.cms-side { position: sticky; top: 0; }
.cms-side-h { font-size: var(--fs-tag); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.cms-preview { border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.pv-body { padding: 15px 16px 18px; }
.pv-tag { display: inline-block; font-size: var(--fs-tag); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); margin-bottom: 8px; }
.pv-title { font-size: var(--fs-lead); font-weight: 500; color: var(--ink); line-height: 1.25; }
.pv-sum { font-size: var(--fs-meta); color: var(--muted); line-height: 1.55; margin: 8px 0 0; }
.pv-meta { font-size: var(--fs-tag); color: var(--faint); margin-top: 10px; }
.cms-note { border: 1px dashed var(--line); background: #fff; padding: 12px 14px; font-size: var(--fs-meta); color: var(--muted); margin-top: 14px; }
.cms-note b { color: var(--st-amber); }
.cms-workflow { position: sticky; bottom: 0; margin-top: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
.cms-workflow .status-hint { margin-right: auto; font-size: var(--fs-meta); color: var(--muted); display: flex; align-items: center; gap: 8px; }

.fld-count { float: right; font-weight: 400; color: var(--faint); font-size: var(--fs-tag); }
.aud { display: flex; flex-direction: column; gap: 6px; }
.aud-opt { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--body); }
.pv-feat { display: inline-block; font-size: var(--fs-tag); font-weight: 500; color: #fff; background: var(--navy); padding: 2px 8px; margin-bottom: 8px; }

/* Document attachments (CMS) */
.ce-docs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ce-docs-empty { font-size: var(--fs-meta); color: var(--faint); border: 1px dashed var(--line); padding: 12px 14px; }
.doc-row { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); background: #fff; padding: 10px 12px; }
.doc-ic { color: var(--brand); flex: none; margin-top: 3px; }
.doc-fields { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.doc-in { font-family: var(--sans); font-size: var(--fs-meta); padding: 6px 8px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); min-height: 30px; }
.doc-name { font-weight: 500; }
.doc-meta-row { display: grid; grid-template-columns: 90px 100px 84px 1fr; gap: 6px; }
.doc-meta-row .doc-in { min-width: 0; }
.doc-rm { flex: none; background: none; border: 1px solid var(--line); color: var(--muted); width: 28px; height: 28px; cursor: pointer; font-size: 16px; line-height: 1; }
.doc-rm:hover { border-color: var(--st-red); color: var(--st-red); }
.ce-doc-add { display: flex; align-items: center; gap: 10px; margin: 4px 0 4px; }
.doc-file-btn { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-meta); font-weight: 500; color: #fff; background: var(--brand); border: 1px solid var(--line); padding: 7px 12px; cursor: pointer; min-height: 34px; }
.doc-file-btn:hover { border-color: var(--brand); }
.doc-count { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-meta); color: var(--brand-dark); font-weight: 500; }
.type-chip { display: inline-block; font-size: var(--fs-tag); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--brand); padding: 2px 8px; white-space: nowrap; }

/* Preview downloads block */
.pv-downloads { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.pv-dl-h { font-size: var(--fs-tag); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.pv-dl { display: flex; align-items: center; gap: 10px; text-decoration: none; border: 1px solid var(--line); padding: 8px 10px; margin-bottom: 6px; background: #fff; }
.pv-dl:hover { border-color: var(--brand); }
.pv-dl-ic { color: var(--brand); flex: none; }
.pv-dl-tx { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pv-dl-name { font-size: var(--fs-meta); font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-dl-meta { font-size: var(--fs-tag); color: var(--faint); }
.pv-dl-go { flex: none; font-size: var(--fs-tag); font-weight: 500; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; }

/* Static / structural content */
.static-group { margin-bottom: 26px; }
.static-group-h { font-size: var(--fs-meta); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.static-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.static-card { display: flex; flex-direction: column; text-align: left; width: 100%; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 0; cursor: pointer; font-family: var(--sans); transition: box-shadow .14s, transform .14s; overflow: hidden; }
.static-card:hover { box-shadow: 0 12px 28px rgba(9, 20, 38, .1); transform: translateY(-2px); }
.static-thumb { width: 100%; background: linear-gradient(140deg, var(--brand-dark), var(--brand-dark)); background-size: cover; background-position: center; display: grid; place-items: center; color: rgba(255, 255, 255, .5); font-size: var(--fs-tag); }
.static-thumb.text { background: var(--brand); color: #fff; padding: 14px; }
.static-thumb-tx { font-weight: 500; font-size: var(--fs-sm); text-align: center; line-height: 1.3; }
.static-thumb.lg { max-width: 520px; margin-bottom: 10px; border: 1px solid var(--line); }
.static-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.static-label { font-weight: 500; color: var(--ink); font-size: var(--fs-sm); }
.static-desc { font-size: var(--fs-tag); color: var(--muted); line-height: 1.45; }
.static-val { font-size: var(--fs-meta); color: var(--body); margin-top: 4px; word-break: break-word; }
.static-val.mono { font-family: var(--mono); font-size: var(--fs-tag); color: var(--brand-dark); }
.static-spec { display: block; font-size: var(--fs-tag); color: var(--faint); margin-top: 2px; }
.static-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.static-edit { font-size: var(--fs-tag); font-weight: 500; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; }
.static-when { font-size: var(--fs-tag); color: var(--faint); }

/* Image fit chips + static preview */
.se-fit { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.fit-chip { font-size: var(--fs-tag); font-weight: 500; padding: 2px 8px; border: 1px solid var(--line); }
.fit-chip.ok { color: #fff; border-color: #1d7a4c; background: #1d7a4c; }
.fit-chip.warn { color: #fff; border-color: #b02a25; background: #b02a25; }
.static-prev { border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); padding: 12px; }
.sp-hero { position: relative; background: linear-gradient(140deg, var(--brand-dark), var(--brand-dark)); background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 12px; color: #fff; }
.sp-hero-tag { align-self: flex-start; font-size: var(--fs-tag); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; background: rgba(6, 14, 30, .72); padding: 2px 8px; }
.sp-hero-cap { font-size: var(--fs-meta); font-weight: 500; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.sp-banner { background: var(--brand); color: #fff; font-weight: 500; font-size: var(--fs-meta); padding: 8px 12px; text-align: center; }
.sp-text-h { font-weight: 500; color: var(--ink); font-size: var(--fs-lead); }
.sp-text-l { color: var(--muted); font-size: var(--fs-meta); margin-top: 4px; }
.ce-valid { color: var(--muted); font-size: var(--fs-meta); }
.ce-valid.bad { color: var(--st-red); }

/* Advisory levels */
.adv-levelbar { display: inline-flex; align-items: center; gap: 6px; }
.adv-dot { width: 10px; height: 10px; border-radius: 50%; }
.adv-l1 { background: var(--st-green); } .adv-l2 { background: var(--st-amber); } .adv-l3 { background: var(--st-orange); } .adv-l4 { background: var(--st-red); }
.adv-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; font-size: var(--fs-meta); color: var(--muted); }
.adv-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Travel advisories consolidated onto the Registrations & map page */
.adv-section { margin: 4px 0 22px; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.adv-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.adv-sec-title { font-size: var(--fs-h2); font-weight: 500; color: var(--ink); margin: 0; }
.adv-sec-sub { font-size: var(--fs-sm); color: var(--muted); margin: 4px 0 0; max-width: 62ch; }
.adv-props { margin: 0 0 16px; }

/* Staff / personnel */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.person { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 16px; display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; font-family: var(--sans); cursor: pointer; transition: box-shadow .14s, transform .14s; }
.person:hover { box-shadow: 0 12px 28px rgba(9, 20, 38, .1); transform: translateY(-2px); }
.person-av { width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 500; flex: none; object-fit: cover; }
.person-av.sm { width: 30px; height: 30px; font-size: var(--fs-tag); }
.person-cell { display: flex; align-items: center; gap: 10px; }
.person-name { font-weight: 500; color: var(--ink); font-size: var(--fs-sm); }
.person-role { font-size: var(--fs-meta); color: var(--brand-dark); }
.person-post { font-size: var(--fs-tag); color: var(--muted); margin-top: 2px; }

/* Staff profile page */
.profile { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; }
.profile-side { position: sticky; top: 0; }
.profile-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line); background: #eef2f7; display: block; }
.profile-photo-empty { display: grid; place-items: center; color: var(--faint); font-size: var(--fs-meta); }
.prof-name { font-size: 19px; font-weight: 500; color: var(--ink); margin-top: 14px; }
.prof-role { color: var(--brand-dark); font-weight: 500; font-size: var(--fs-sm); }
.prof-meta { font-size: var(--fs-meta); color: var(--muted); margin-top: 8px; }
.prof-sec { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.prof-sec h3 { font-size: var(--fs-base); margin-bottom: 12px; }
.prof-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; } .profile-side { position: static; max-width: 220px; } }

/* Distress map (registrations) */
.map-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
/* Live Leaflet distress/danger map */
.dmap-live { height: 500px; min-height: 500px; border: 1px solid var(--line); box-shadow: var(--shadow); isolation: isolate; z-index: 0; background: #eaf1f8; }
.dmap-live .leaflet-control-attribution { font-size: 10px; }
.dmap-live .leaflet-popup-content { font-family: var(--sans); font-size: var(--fs-meta); }
.dmap { position: relative; background: #eaf1f8 linear-gradient(160deg, #eaf1f8, #dbe7f3); border: 1px solid var(--line); height: 420px; overflow: hidden; box-shadow: var(--shadow); }
.dmap-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 40px 40px; opacity: .6; }
.dmap-pin { position: absolute; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(9,20,38,.3); cursor: pointer; }
.dmap-pin.ok { background: var(--st-green); } .dmap-pin.info { background: var(--st-amber); } .dmap-pin.distress { background: var(--st-red); width: 18px; height: 18px; animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(176,42,37,.5); } 70% { box-shadow: 0 0 0 10px rgba(176,42,37,0); } 100% { box-shadow: 0 0 0 0 rgba(176,42,37,0); } }
.dmap-hub { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; background: var(--navy); border: 3px solid #fff); border-radius: 50%; }
.dmap-legend { position: absolute; bottom: 10px; left: 10px; background: rgba(255,255,255,.92); border: 1px solid var(--line); padding: 8px 10px; font-size: var(--fs-tag); display: flex; gap: 12px; }
.dmap-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dmap-key { width: 10px; height: 10px; border-radius: 50%; }
.map-side { display: flex; flex-direction: column; gap: 14px; }
.dmap-country { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); padding: 4px 10px; font-size: var(--fs-meta); font-weight: 500; color: var(--ink); }
.msg-list { list-style: none; margin: 0; padding: 0; }
.msg { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.msg:last-child { border-bottom: 0; }
.msg-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.msg-when { font-size: var(--fs-tag); color: var(--faint); }
.msg-text { font-size: var(--fs-meta); color: var(--body); margin: 4px 0 8px; line-height: 1.45; }

/* Mission cards (directory: echoes the public find-a-mission grid) */
.mcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; }
.mcard { text-align: left; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 14px 16px; cursor: pointer; font-family: var(--sans); transition: box-shadow .14s, transform .14s, border-color .14s; }
.mcard:hover { box-shadow: 0 14px 32px rgba(9, 20, 38, .12); transform: translateY(-2px); border-color: var(--brand); }
.mcard.is-featured { border-top: 3px solid var(--navy); }
.mcard-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mcard-flag { display: inline-flex; align-items: center; line-height: 1; }
.flag-img { display: inline-block; object-fit: cover; box-shadow: 0 0 0 1px rgba(128, 128, 128, .35) inset; vertical-align: middle; flex: none; }
.flag-emoji { font-size: 15px; line-height: 1; }
.mcard-type { font-size: var(--fs-tag); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mcard-arrow { margin-left: auto; color: var(--brand); font-weight: 500; transition: transform .14s; }
.mcard:hover .mcard-arrow { transform: translateX(3px); }
.mcard-city { font-size: var(--fs-lead); font-weight: 500; color: var(--ink); line-height: 1.15; }
.mcard-place { font-size: var(--fs-meta); color: var(--muted); margin-top: 3px; }

/* Event cards + management */
.ev-card-stats .warn b { color: var(--st-amber); }

/* Visitor pass (event pass, QR) */
.vpass { border: 1px solid var(--line); background: #fff; }
.vpass-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(90deg, var(--navy), var(--brand-dark)); color: #fff; }
.vpass-emblem { width: 36px; height: 36px; flex: none; }
.vpass-org { font-size: var(--fs-tag); opacity: .85; }
.vpass-ev { font-size: var(--fs-lead); font-weight: 500; }
.vpass-body { display: flex; gap: 16px; padding: 18px; align-items: center; }
.vpass-info { flex: 1; min-width: 0; }
.vpass-name { font-size: var(--fs-h1); font-weight: 500; color: var(--ink); }
.vpass-party { font-size: var(--fs-meta); color: var(--muted); margin: 4px 0 12px; }
.vpass-dl { display: grid; grid-template-columns: 64px 1fr; gap: 6px 10px; font-size: var(--fs-meta); margin: 0; }
.vpass-dl dt { color: var(--muted); } .vpass-dl dd { margin: 0; color: var(--ink); }
.vpass-qr { flex: none; }
.vpass-qr canvas { display: block; width: 148px; height: 148px; border: 1px solid var(--line); }
.vpass-foot { padding: 12px 18px; border-top: 1px dashed var(--line); font-size: var(--fs-tag); color: var(--muted); }

@media print {
  body.printing-pass #signin, body.printing-pass #app, body.printing-pass #drawer, body.printing-pass #drawer-scrim, body.printing-pass #palette, body.printing-pass #toast { display: none !important; }
  body.printing-pass #modal { position: static; background: none; padding: 0; display: block; }
  body.printing-pass .modal-card { box-shadow: none; max-width: 440px; }
  body.printing-pass .modal-head, body.printing-pass #vp-close, body.printing-pass #vp-print { display: none !important; }
}

.map-side .card + .card { margin-top: 0; }

@media (max-width: 900px) { .cms { grid-template-columns: 1fr; } .cms-side { position: static; } .cms-form .fld-row { grid-template-columns: 1fr; } .map-wrap { grid-template-columns: 1fr; } }

/* Responsive */
@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
  .side { position: fixed; inset: 0 auto 0 0; width: 240px; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; }
  .tb-burger { display: block; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .metric-row { grid-template-columns: 1fr; } .tb-search { display: none; } }

/* ======================================================================
   Motion & interaction polish: one consistent language of movement,
   focus and feedback across the whole console.
   ====================================================================== */

/* Keyboard focus: a single clear ring everywhere (mouse clicks stay clean). */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn:focus-visible, .navbtn:focus-visible, .ftab:focus-visible,
.mcard:focus-visible, .person:focus-visible, .static-card:focus-visible,
.card-link:focus-visible, .tb-search:focus-visible, .drawer-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fld-input:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }

/* Buttons: unified timing + a subtle press. */
.btn { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary:hover { box-shadow: 0 4px 14px rgba(2, 107, 187, .28); }

/* Sidebar: smooth hover + a gold active accent bar. */
.navbtn { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); position: relative; }
.navbtn.is-on { box-shadow: inset 3px 0 0 #fff; }
.navbtn .nav-ic { transition: opacity var(--dur) var(--ease); }
.navbtn:hover .nav-ic { opacity: 1; }
.side-nav .navbtn + .side-group { margin-top: 18px; }

/* Filter tabs + card links: gentle colour transitions. */
.ftab { transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card-link { transition: color var(--dur) var(--ease); }
.card-link:hover { color: var(--brand-dark); }

/* Interactive cards: consistent hover lift + arrow nudge. */
.card, .metric { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.queue-item, .palette-item, tbody tr.clickable { transition: background var(--dur) var(--ease); }

/* View transition: each navigation fades and rises in. */
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.main.view-enter { animation: viewIn var(--dur-lg) var(--ease) both; }

/* Overlays: fade the scrim, rise the panel. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerIn { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.drawer-scrim, .modal, .palette { animation: fadeIn var(--dur) var(--ease) both; }
.drawer { animation: drawerIn var(--dur-lg) var(--ease) both; }
.modal-card, .palette-card { animation: popIn var(--dur-lg) var(--ease) both; }

/* Toast: slide up from the baseline. */
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast { animation: toastIn var(--dur-lg) var(--ease) both; }

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ======================================================================
   Responsive sweep: the console stays usable from wide desktop to phone.
   ====================================================================== */
@media (max-width: 1040px) {
  .ov-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .main { padding: 18px 16px 48px; }
  .ov-grid { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
  .tb-switch { max-width: 150px; }
}
@media (max-width: 700px) {
  .profile { grid-template-columns: 1fr; }
  .profile-side { position: static; }
  .page-head { align-items: flex-start; }
  .page-actions { flex-wrap: wrap; }
  .drawer { width: min(460px, 100vw); }
}
@media (max-width: 560px) {
  .ov-stats { grid-template-columns: 1fr 1fr; }
  .doc-meta-row { grid-template-columns: 1fr 1fr; }
  .vpass-body { flex-direction: column; align-items: flex-start; }
  .vpass-qr { align-self: center; }
  .vpass-qr canvas { width: 128px; height: 128px; }
  .adv-sec-head { flex-direction: column; align-items: flex-start; }
  .filter-tabs { overflow-x: auto; }
  .tb-scope-sub { display: none; }
  .metric-n { font-size: 26px; }
}

/* Insights bars — a count and its share of the largest count. No axis is drawn
   because none is implied: these are row counts, not a measured series. */
.ins-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ins-bars li { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; }
.ins-lab { font-size: var(--fs-meta); color: var(--body); }
.ins-track { height: 8px; border-radius: 999px; background: #eef2f6; overflow: hidden; }
.ins-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand, #316db5); }
.ins-val { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 13px; }

/* ---- Dashboard charts (real data; palette CVD-validated on white) ---- */
.cols.cols-wide { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 1040px) { .cols.cols-wide { grid-template-columns: 1fr; } }
.col-stack { display: grid; gap: 18px; align-items: start; }
.metric-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.metric-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
.spark { display: block; }
.delta { font-size: var(--fs-tag); font-weight: 500; line-height: 1; padding: 3px 7px; }
.delta.up { color: #fff; background: var(--st-green); }
.delta.down { color: #fff; background: var(--st-red); }
.delta.flat { color: #fff; background: var(--st-gray); }
.head-note { font-size: var(--fs-tag); color: var(--faint); }
.chart-wrap { position: relative; padding-top: 6px; }
.chart-wrap .ax { font-size: 10px; fill: var(--faint); font-family: var(--sans); }
.chart-x { display: flex; justify-content: space-between; font-size: var(--fs-tag); color: var(--faint); margin-top: 4px; }
.chart-tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; font-size: var(--fs-tag); line-height: 1; padding: 6px 8px; white-space: nowrap; transform: translate(-50%, -130%); z-index: 5; }
.donut-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 190px; }
.donut-legend li { display: flex; align-items: center; gap: 9px; font-size: var(--fs-meta); color: var(--body); }
.donut-legend li[data-go] { cursor: pointer; }
.donut-legend li[data-go]:hover { color: var(--brand); }
.donut-legend .sw { width: 10px; height: 10px; flex: none; }
.donut-legend .pc { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.donut-center-n { font-size: 24px; font-weight: 500; fill: var(--ink); font-family: var(--sans); letter-spacing: -.02em; }
.donut-center-l { font-size: 10px; fill: var(--muted); font-family: var(--sans); }
.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hbars li { display: grid; grid-template-columns: minmax(130px, 32%) 1fr auto; gap: 12px; align-items: center; font-size: var(--fs-meta); color: var(--body); }
.hbars li[data-go] { cursor: pointer; }
.hbars li[data-go]:hover .hb-l { color: var(--brand); }
.hb-track { background: var(--line-soft); height: 10px; position: relative; }
.hb-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--brand); border-radius: 0 4px 4px 0; min-width: 2px; }
.hb-n { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.act-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.act-time { color: var(--faint); font-size: var(--fs-tag); white-space: nowrap; }

/* Compact tables inside a drawer — the managed-event sub-resource lists
   (committee, speakers, vendors, milestones). Denser than the main data
   tables, so several sections fit in one panel without scrolling to boredom. */
.mini-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 4px 0 6px; }
.mini-table th { text-align: left; font-weight: 500; font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0 10px 6px 0; border-bottom: 1px solid var(--line); }
.mini-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table .cell-sub { display: block; }

/* Inline add-forms inside the managed-event drawer. */
.add-form { border: 1px solid var(--line); padding: 12px; margin-top: 6px; background: #fff; }
.add-form .fld { margin-bottom: 8px; }
.add-form-actions { display: flex; gap: 8px; }
.btn.btn-ghost { background: none; border: 1px solid transparent; color: var(--muted); }
.btn.btn-ghost:hover { color: var(--ink); }

/* ── Design-pass fixes: selectors used by admin.js render code that were never
   defined here, so those screens fell back to unstyled browser defaults.
   Mapped to the same tokens the rest of the console uses. ─────────────────── */

/* Content · CMS — the "News & content" handoff panel is a plain card. */
.mfa-card { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }

/* Learning & development — quiet explanatory callout under the metrics. */
.note { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand);
        padding: 11px 14px; margin-bottom: 20px; font-size: var(--fs-sm); color: var(--body); line-height: 1.5; }

/* Insights — two-up card grid, collapsing to one column on narrow widths. */
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .cards2 { grid-template-columns: 1fr; } }

/* Section heading within a screen (Advisories review queue, News Desk). */
.sec-h { font-size: var(--fs-h2); margin: 24px 0 12px; }

/* Uploaded-document list inside the appointment / application drawers. */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); line-height: 1.5; }
.doc-list li:last-child { border-bottom: 0; }
.doc-list a { font-weight: 500; }

/* Mission page completeness (8 Oct 2026). One hue for magnitude; amber only
   on the "still to add" markers, which need attention. */
.mpc { margin-bottom: 18px; }
.mpc-score .mpc-track { grid-column: 1 / -1; height: 8px; margin-top: 8px; }
.mpc-track { display: block; height: 6px; background: var(--line); overflow: hidden; min-width: 60px; }
.mpc-fill { display: block; height: 100%; background: var(--brand); }
.mpc-stats { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.mpc-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mpc-rank li { display: grid; grid-template-columns: minmax(150px, 34%) 1fr 46px; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-meta); color: var(--body); cursor: pointer; }
.mpc-rank li:last-child { border-bottom: 0; }
.mpc-rank li:hover, .mpc-rank li:focus-visible { background: #fff; outline: none; }
.mpc-rank li:hover .mpc-rank-l, .mpc-rank li:focus-visible .mpc-rank-l { color: var(--brand); }
.mpc-rank-l { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpc-rank-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.mcard-score { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--fs-tag); color: var(--muted); }
.mcard-score .mpc-track { height: 4px; min-width: 0; }
.mp-sec.mp-flash { outline: 2px solid var(--brand); outline-offset: 4px; transition: outline-color .6s; }
@media (max-width: 720px) {
  .mpc-stats { grid-template-columns: 1fr 1fr; }
  .mpc-rank li { grid-template-columns: 1fr 46px; }
  .mpc-rank li .mpc-track { grid-column: 1 / -1; grid-row: 2; }
}

/* Hubs (9 Oct 2026): screens that are halves of one job share a heading and
   tabs. The screen's own title is hidden under them (the tab names it); its
   subtitle, actions and any load warning stay. */
/* One grid for the hub heading and the screen under it: row 1 is the title
   with the screen's own buttons on the right, row 2 the tabs, row 3 the line
   that says what this tab is for, then the screen. display: contents lets the
   screen's page-head place its parts in that grid without moving any element
   (screens bind their buttons by id, so nothing is moved or copied). */
.hub { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.hub > .hub-bar, .hub > .hub-body, .hub-body > .page-head, .hub-body > .page-head > div:first-child { display: contents; }
.hub-body > * { grid-column: 1 / -1; min-width: 0; }
.hub-title { grid-row: 1; grid-column: 1; align-self: end; font-size: var(--fs-h1); line-height: 1.15; margin: 0 0 14px; }
.hub-body > .page-head > .page-actions { grid-row: 1; grid-column: 2; align-self: end; margin-bottom: 14px; flex-wrap: wrap; justify-content: flex-end; }
.hub-row { grid-row: 2; grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.hub-body > .page-head .page-sub { grid-row: 3; grid-column: 1 / -1; margin: 0 0 14px; }
.hub-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 10px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; font: inherit; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; white-space: nowrap; }
.hub-tab:hover { color: var(--ink); }
.hub-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.hub-tab.is-on { color: var(--ink); font-weight: 500; border-bottom-color: var(--brand); }
.hub-tab .nav-count { font-size: var(--fs-tag); font-family: var(--mono); background: var(--brand); color: #fff; padding: 1px 6px; }
.hub-ext { flex: none; padding: 0 2px 10px; font-size: var(--fs-meta); color: var(--brand); text-decoration: none; white-space: nowrap; }
.hub-ext:hover { text-decoration: underline; }
.hub-body > .page-head .page-title { display: none; }
@media (max-width: 720px) {
  .hub { grid-template-columns: minmax(0, 1fr); }
  .hub-body > .page-head > .page-actions { grid-row: 2; grid-column: 1; justify-content: flex-start; }
  .hub-row { grid-row: 3; flex-wrap: wrap; }
  .hub-body > .page-head .page-sub { grid-row: 4; }
  .hub-ext { order: -1; width: 100%; padding-bottom: 6px; }
}

/* Booking capacity (booking system, increment 1; 10 Oct 2026). Gold is the
   one main action on the screen; red is only for booked visitors to move. */
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover { background: #c49f2c; border-color: #c49f2c; }
.btn-gold:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }
.cap-alert { background: #fff; border-left: 4px solid var(--st-red); color: #5e1512; padding: 12px 16px; margin-bottom: 18px; font-size: var(--fs-sm); line-height: 1.5; }
.cap-alert b { color: var(--st-red); font-weight: 500; }
.cap-alert ul { margin: 6px 0 0; padding-left: 18px; }
.cap-warn { background: var(--st-amber); border-left: 4px solid #c99a2e; color: #fff; padding: 10px 16px; margin-bottom: 18px; font-size: var(--fs-sm); }
.cap-card { margin-bottom: 18px; }
.cap-card .card-body { padding: 14px 16px 16px; }
.cap-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; }
.cap-day { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.cap-bar { display: flex; align-items: flex-end; width: 100%; max-width: 34px; height: 96px; background: var(--line-soft, #eef1f5); }
.cap-bar span { display: block; width: 100%; background: var(--brand); }
.cap-n { font-size: var(--fs-tag); color: var(--ink); font-variant-numeric: tabular-nums; }
.cap-d { font-size: var(--fs-tag); color: var(--muted); text-align: center; line-height: 1.3; }
.cap-hours { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: var(--fs-sm); }
.cap-hours dt { color: var(--muted); }
.cap-hours dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.cap-list { list-style: none; margin: 0; padding: 0; }
.cap-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft, #eef1f5); }
.cap-list li:last-child { border-bottom: 0; }
/* Holidays and closures; choosing services (14 Oct 2026). */
.cap-sub-h { margin: 4px 0 2px; font-size: var(--fs-tag); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cap-sub-h + .cap-list { margin-bottom: 12px; }
.cap-hols li { padding: 7px 0; }
.cap-hols .cap-kind { background: var(--navy, #0D2B45); }
.cap-none { margin: 4px 0 12px; font-size: var(--fs-sm); color: var(--muted); }
/* Public holidays, kept at headquarters (0089). */
.hol-list li { padding: 10px 0; }
.hol-name { font-size: 15px; color: var(--ink); margin: 0 6px; }
.cap-kind.hol-nat { background: #1d7a4c; }
.hol-past { opacity: 1; }
.hol-past .cell-strong, .hol-past .hol-name { color: var(--muted); }
.hol-acts { display: inline-flex; gap: 6px; }
/* The set-up checklist: the same four steps for every mission. */
.cap-setup { border-top: 4px solid var(--navy, #0D2B45); }
.cap-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cap-steps li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--border); background: #fff; }
.cap-step-n { width: 32px; height: 32px; display: inline-grid; place-items: center; background: var(--navy, #0D2B45); color: #fff; font-weight: 500; font-size: 15px; }
.cap-steps li.is-done .cap-step-n { background: #1d7a4c; }
.cap-step-t { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); color: var(--muted); }
.cap-step-t b { font-weight: 500; color: var(--ink); font-size: 15px; }
.cap-steps li.is-done .cap-step-t span { color: #1d7a4c; }
@media (max-width: 900px) { .cap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cap-steps { grid-template-columns: 1fr; } }
.cap-choose { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--border); background: #fff; }
.cap-kind { display: inline-block; font-size: var(--fs-tag); padding: 1px 7px; background: var(--brand); color: #fff; margin-left: 4px; }
.cap-off { opacity: .6; }
.cap-miss { color: var(--st-amber); }
.cap-flag { display: inline-block; min-width: 22px; padding: 1px 7px; text-align: center; background: var(--st-red); color: #fff; font-size: var(--fs-tag); }
.cap-scroll { overflow-x: auto; }
.cap-rules { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 820px; }
.cap-rules th { text-align: left; font-size: var(--fs-tag); font-weight: 500; color: var(--muted); letter-spacing: .03em; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.cap-rules td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line-soft, #eef1f5); vertical-align: middle; }
.cap-num { width: 76px; font-variant-numeric: tabular-nums; }
.cap-help { font-size: var(--fs-meta); color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.cap-fs { border: 0; padding: 0; margin: 0 0 16px; }
.cap-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink); padding: 4px 0; }
.cap-shift { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; font-size: var(--fs-meta); color: var(--muted); }
.cap-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cap-confirm { margin: 0 0 18px; padding-left: 18px; color: var(--body); line-height: 1.6; }
/* Status filter buttons in every list toolbar (10 Oct 2026): visible
   buttons with counts instead of an "All statuses" drop-down. */
.lt-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; order: 3; }
.lt-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); background: #fff; color: var(--body); font: inherit; font-size: var(--fs-meta); cursor: pointer; }
.lt-chip span { font-size: var(--fs-tag); color: var(--muted); font-variant-numeric: tabular-nums; }
.lt-chip:hover { border-color: var(--brand); color: var(--brand); }
.lt-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.lt-chip.on span { color: #cdd8e6; }
.lt-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Appointments desk (booking system, 10 Oct 2026). */
.ad-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.ad-seg { display: inline-flex; border: 1px solid var(--line); background: #fff; }
.ad-segb { min-height: 38px; padding: 0 16px; border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--body); font: inherit; font-size: var(--fs-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ad-segb:last-child { border-right: 0; }
.ad-segb.on { background: var(--navy); color: #fff; }
.ad-n { font-size: var(--fs-tag); background: var(--st-amber); color: #fff; padding: 1px 7px; }
.ad-segb.on .ad-n { background: #E1C566; color: var(--navy); }
.ad-daynav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ad-date { font-size: var(--fs-base); color: var(--ink); }
.ad-today { font-size: var(--fs-tag); background: var(--brand); color: #fff; padding: 2px 8px; margin-left: 4px; }
.ad-q { margin-left: auto; min-width: 220px; }
.ad-counts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.ad-cnt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--line); font: inherit; text-align: left; cursor: pointer; color: var(--body); }
.ad-cnt b { font-size: 24px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ad-cnt span { font-size: var(--fs-meta); }
.ad-cnt:hover { border-color: var(--brand); }
.ad-cnt.blue { border-top-color: var(--brand); } .ad-cnt.teal { border-top-color: #0f7173; } .ad-cnt.green { border-top-color: var(--st-green); }
.ad-cnt.red { border-top-color: var(--st-red); } .ad-cnt.grey { border-top-color: #9aa5b5; }
.ad-cnt.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ad-cnt.on b { color: #fff; }
.ad-cnt:focus-visible, .ad-row:focus-visible, .ad-segb:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ad-age { font-size: var(--fs-tag); color: var(--faint); white-space: nowrap; }
.ad-flag { font-size: var(--fs-tag); background: var(--st-red); color: #fff; padding: 1px 7px; }
.ad-st { font-size: var(--fs-tag); padding: 2px 8px; white-space: nowrap; }
.ad-st.big { font-size: var(--fs-meta); padding: 4px 10px; }
.ad-st.amber { background: var(--st-amber); color: #fff; }
.ad-st.blue { background: var(--brand); color: #fff; }
.ad-st.teal { background: #fff; color: #0b4d4f; }
.ad-st.green { background: var(--st-green); color: #fff; }
.ad-st.grey { background: #5f6878; color: #fff; }
.ad-st.red { background: var(--st-red); color: #fff; }
.ad-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.ad-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ad-head h3 { font-size: 22px; font-weight: 500; color: var(--ink); margin: 2px 0 0; }
.ad-time { font-size: var(--fs-lead); color: var(--ink); }
.ad-arrived { font-size: var(--fs-sm); color: #0b4d4f; background: #fff; padding: 6px 10px; width: fit-content; }
.ad-emerg { background: #fff; border-left: 4px solid var(--st-red); color: #5e1512; padding: 10px 12px; font-size: var(--fs-sm); }
.ad-emerg b { color: var(--st-red); font-weight: 500; }
.ad-dl { margin: 0; }
.ad-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
.ad-acts .btn { min-height: 42px; }
/* HQ network view of the appointments desk: map and side lists. */
.ad-net { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.ad-mapcard { overflow: hidden; }
.ad-map { height: 380px; background: #dfe8f1; }
.ad-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px; font-size: var(--fs-meta); color: var(--body); border-top: 1px solid var(--line); }
.ad-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ad-legend .lg { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.lg.blue { background: #1c5a8f; } .lg.amber { background: #c99a2e; } .lg.red { background: #b02a25; }
.ad-side { display: flex; flex-direction: column; gap: 16px; }
.ad-sideb { padding: 4px 8px 8px; }
.ad-mrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; background: none; border: 0; border-bottom: 1px solid var(--line-soft, #eef1f5); font: inherit; text-align: left; cursor: pointer; color: var(--body); }
.ad-mrow:last-child { border-bottom: 0; }
.ad-mrow:hover { background: #fff; }
.ad-mrow:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ad-mname { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--ink); }
.ad-mctry { font-size: var(--fs-tag); color: var(--muted); }
.ad-mval { min-width: 30px; text-align: center; padding: 2px 8px; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.ad-mval.blue { background: var(--brand); color: #fff; }
.ad-mval.amber { background: var(--st-amber); color: #fff; }
.ad-mval.red { background: var(--st-red); color: #fff; }
.ad-none { margin: 10px 8px; font-size: var(--fs-meta); }
.ad-mfchip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--brand); color: #fff; padding: 8px 12px; margin-bottom: 12px; font-size: var(--fs-sm); }
/* Desk colour (10 Oct 2026, "enhance the colors"): one colour per stage of
   the visit, used on the count buttons, rows, tiles and the calendar. Gold
   stays for the main action only. */
:root {
  --ap-exp: #1c5a8f; --ap-exp-bg: #e6f0fa;
  --ap-arr: #0f7173; --ap-arr-bg: #dcf1f0;
  --ap-srv: #1d7a4c; --ap-srv-bg: #e2f3e9;
  --ap-mis: #b02a25; --ap-mis-bg: #fbe7e6;
  --ap-can: #5f6878; --ap-can-bg: #eef1f5;
  --ap-pen: #8a5a12; --ap-pen-bg: #fbf0d6;
}
.lg.teal { background: var(--ap-arr); } .lg.green { background: var(--ap-srv); } .lg.grey { background: var(--ap-can); }
.ad-cnt.blue { background: #fff; border-top-color: var(--ap-exp); }
.ad-cnt.teal { background: #fff; border-top-color: var(--ap-arr); }
.ad-cnt.green { background: #fff; border-top-color: var(--ap-srv); }
.ad-cnt.red { background: #fff; border-top-color: var(--ap-mis); }
.ad-cnt.grey { background: #fff; border-top-color: var(--ap-can); }
.ad-cnt.blue b { color: var(--ap-exp); } .ad-cnt.teal b { color: var(--ap-arr); } .ad-cnt.green b { color: var(--ap-srv); } .ad-cnt.red b { color: var(--ap-mis); }
.ad-cnt.on, .ad-cnt.on.blue, .ad-cnt.on.teal, .ad-cnt.on.green, .ad-cnt.on.red, .ad-cnt.on.grey { background: var(--navy); border-color: var(--navy); color: #fff; }
.ad-cnt.on b { color: #fff; }
.ad-st.teal { background: var(--ap-arr); color: #fff; }

/* Outcome after the service (0057) */
.ad-out { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-left: 4px solid var(--ap-can); background: #fff; }
.ad-out b { font-size: var(--fs-base); font-weight: 500; color: var(--ink); }
.ad-out p { margin: 0; font-size: var(--fs-sm); color: var(--body); line-height: 1.5; }
.ad-out.ask { background: #fff; border-left-color: var(--ap-exp); }
.ad-out.amber { background: #fff; border-left-color: var(--ap-pen); }
.ad-out.amber b { color: #6d4a08; }
.ad-out.green { background: #fff; border-left-color: var(--ap-srv); }
.ad-out.green b { color: var(--ap-srv); }
.ad-out-by { font-size: var(--fs-tag); color: var(--muted); }
.ad-out-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ad-out-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ad-out-form[hidden] { display: none; }
.ad-out-form textarea { min-height: 72px; resize: vertical; }
.ad-tile.is-follow { box-shadow: inset 0 0 0 2px var(--ap-pen); }

/* Assignment, staff notes, booking team (0058) */
.ad-unasg { color: var(--ap-pen); }
.ad-tile-who { font-size: var(--fs-tag); color: var(--body); }
.ad-asg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); }
.ad-asg-l { font-size: var(--fs-tag); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ad-asg-v { font-size: var(--fs-sm); color: var(--ink); font-weight: 500; }
.ad-asg-acts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ad-asg-acts select { max-width: 220px; }
.ad-notes { display: flex; flex-direction: column; gap: 8px; }
.ad-note-add { display: flex; gap: 8px; align-items: flex-start; }
.ad-note-add textarea { flex: 1; min-height: 44px; resize: vertical; }
.ad-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ad-note-list li:not(.muted) { background: #fff; border-left: 3px solid var(--brand); padding: 8px 10px; }
.ad-note-list p { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--ink); white-space: pre-wrap; }
.ad-note-by { font-size: var(--fs-tag); color: var(--muted); }
.bt-sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.bt-warn { margin-bottom: 14px; }
.bt-list { display: flex; flex-direction: column; gap: 10px; }
.bt-row { display: grid; grid-template-columns: minmax(200px, 1.2fr) 150px minmax(0, 2fr); gap: 14px; align-items: center; padding: 14px 16px; }
.bt-who { display: flex; align-items: center; gap: 10px; }
.bt-who > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.bt-who b { font-weight: 500; color: var(--ink); }
.bt-av { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; background: var(--navy); color: #fff; font-size: var(--fs-meta); }
.bt-load { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-meta); color: var(--muted); }
.bt-load b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.bt-svcs { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-svc { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: var(--fs-meta); color: var(--body); cursor: pointer; }
.bt-svc.on { background: var(--ap-srv); border-color: var(--ap-srv); color: #fff; }
.bt-svc:disabled { cursor: default; }
.bt-svc:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (max-width: 900px) { .bt-row { grid-template-columns: 1fr; } .bt-sums { grid-template-columns: 1fr; } .ad-asg-acts { margin-left: 0; } }

/* My work, Open a case, Hand over (0061, 0062) */
.mw-sums { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mw-in { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--brand); padding: 10px 14px; margin-bottom: 14px; font-size: var(--fs-sm); color: var(--body); }
.mw-in b { font-weight: 500; color: var(--ink); }
.mw-cons { margin-bottom: 16px; }
.mw-con { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft, #eef1f5); border-left: 4px solid var(--navy); }
.mw-con:last-child { border-bottom: 0; }
.mw-con b { font-weight: 500; color: var(--ink); min-width: 120px; }
.mw-con .btn { margin-left: auto; }
.mw-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.mw-list { display: flex; flex-direction: column; }
.mw-none { margin: 14px 16px; font-size: var(--fs-sm); }
.mw-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; width: 100%; padding: 11px 14px; background: #fff; border: 0; border-bottom: 1px solid var(--line-soft, #eef1f5); border-left: 4px solid var(--brand); font: inherit; text-align: left; cursor: pointer; color: var(--body); }
.mw-row:last-child { border-bottom: 0; }
.mw-row:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.mw-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.mw-row.k-emergency { border-left-color: var(--st-red); }
.mw-row.k-enquiry { border-left-color: var(--navy); }
.mw-kind { font-size: var(--fs-tag); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mw-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mw-who b { font-weight: 500; color: var(--ink); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-who span { font-size: var(--fs-meta); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-when { font-size: var(--fs-meta); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mw-take { font-size: var(--fs-meta); color: #fff; background: var(--brand); padding: 4px 10px; white-space: nowrap; }
.mw-take:hover { background: var(--navy); }
.oc-kinds, .oc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.oc-chip { display: inline-flex; }
.oc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.oc-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); background: #fff; font-size: var(--fs-sm); cursor: pointer; color: var(--body); }
.oc-chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.oc-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.oc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 8px; }
.oc-grid[hidden], .oc-only[hidden] { display: none; }
.oc-wide { grid-column: 1 / -1; }
.oc-only { margin-bottom: 8px; }
.oc-note { margin: 0 0 12px; font-size: var(--fs-meta); color: var(--ink); border-left: 4px solid var(--st-amber); padding: 6px 10px; background: #fff; }
.oc-me { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0; font-size: var(--fs-sm); }
.oc-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ad-hand { display: flex; flex-direction: column; gap: 6px; }
.ad-hand > .btn { align-self: flex-start; }
.ad-hand-form { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--navy); }
.ad-hand-form[hidden] { display: none; }
@media (max-width: 1000px) { .mw-cols { grid-template-columns: 1fr; } .mw-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mw-row { grid-template-columns: 70px minmax(0, 1fr) auto; } .mw-row .mw-when { display: none; } .oc-grid { grid-template-columns: 1fr; } }

/* The staff view (0064) */
.sv-head { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--navy); padding: 18px 20px; margin-bottom: 14px; }
.sv-av { width: 64px; height: 64px; flex: none; display: inline-grid; place-items: center; background: var(--navy); color: #fff; font-size: 22px; }
.sv-id h2 { margin: 0; font-size: 24px; font-weight: 500; color: var(--ink); }
.sv-id p { margin: 4px 0 8px; color: var(--body); font-size: var(--fs-sm); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sv-known { font-size: var(--fs-meta); color: var(--muted); }
.sv-sums { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sv-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sv-col { display: flex; flex-direction: column; gap: 16px; }
.sv-card .card-body { padding-top: 6px; }
.sv-dl dt { color: var(--muted); }
.sv-none { color: var(--muted); font-size: var(--fs-sm); font-style: italic; }
.sv-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-lang { font-size: var(--fs-sm); border: 1px solid var(--line); border-left: 4px solid var(--brand); padding: 4px 10px; background: #fff; }
.sv-lang b { font-weight: 500; color: var(--ink); }
.sv-bio { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--body); white-space: pre-wrap; }
.sv-away { margin: 0; font-size: var(--fs-sm); color: #fff; background: var(--st-red); padding: 10px 12px; }
.sv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); }
.sv-list b { font-weight: 500; color: var(--ink); }
.sv-addpost { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sv-signin { margin: 10px 0 0; font-size: var(--fs-meta); }
.sv-upd { margin-top: 12px; font-size: var(--fs-meta); }
.se-form { display: flex; flex-direction: column; gap: 8px; }
.se-h { margin: 12px 0 2px; font-size: var(--fs-base); font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.se-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.se-f { display: flex; flex-direction: column; gap: 4px; }
.se-wide { grid-column: 1 / -1; }
.se-f .fld-input:disabled { background: #fff; color: var(--muted); border-style: dashed; }
@media (max-width: 1000px) { .sv-cols, .se-grid { grid-template-columns: 1fr; } .sv-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Shared case core blocks inside other drawers (0060) */
.ans-box { display: block; margin-top: 16px; }
.case-core { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.case-core .drawer-sub { margin-top: 4px; }

/* Gate and online meetings (0059) */
.ad-meet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand); font-size: var(--fs-sm); }
.ad-meet a { color: var(--brand); overflow-wrap: anywhere; }
.ad-meet-set { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.ad-meet-set input { min-width: 220px; }
.cap-online { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); white-space: nowrap; }
.gt-card { padding: 18px 20px; margin-bottom: 16px; }
.gt-form { display: flex; flex-direction: column; gap: 8px; }
.gt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gt-in { flex: 1; min-width: 240px; min-height: 48px; font-size: 18px; letter-spacing: .02em; }
.gt-video { width: 100%; max-width: 420px; border: 2px solid var(--navy); margin-top: 8px; }
.gt-video[hidden] { display: none; }
.gt-res { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--st-green); padding: 16px 18px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.gt-res p { margin: 0; color: var(--body); font-size: var(--fs-sm); }
.gt-res.bad { border-left-color: var(--st-red); } .gt-res.bad b { color: var(--st-red); }
.gt-res.warn { border-left-color: var(--st-amber); } .gt-res.warn .gt-res-head b { color: var(--st-amber); }
.gt-res.done { border-left-color: var(--brand); }
.gt-res.ok .gt-res-head b { color: var(--st-green); }
.gt-res-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--fs-base); }
.gt-res-head b, .gt-res b { font-weight: 500; }
.gt-how { font-size: var(--fs-tag); color: #fff; background: var(--navy); padding: 2px 8px; }
.gt-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: var(--fs-sm); }
.gt-name { font-size: 22px; color: var(--ink); }
.gt-who b { font-weight: 500; color: var(--ink); letter-spacing: .03em; }
.gt-did { color: var(--navy); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
/* Event editor: the missions a headquarters event shows at (14 Oct 2026). */
.ev-pick { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.ev-pick[hidden], #ev-resv[hidden] { display: none; }
.ev-pick-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); padding: 8px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; background: #fff; }
.ev-pick-list .row-check[hidden] { display: none; }
/* A reservation's other guests, by name (0088). */
.evg-guests { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.evg-guests li { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-sm); }
.evg-guests b { font-weight: 500; color: var(--ink); }
.evg-guests span { color: var(--muted); }
.gt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Card view */
.ad-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ad-cards > .queue-empty { grid-column: 1 / -1; background: #fff; border: 1px solid var(--line); }
.ad-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--ap-can); font: inherit; text-align: left; cursor: pointer; color: var(--body); min-height: 150px; }
.ad-tile:hover { box-shadow: 0 6px 18px rgba(13, 43, 69, .10); border-color: #c7d3e2; }
.ad-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ad-tile.st-pending { border-top-color: var(--ap-pen); } .ad-tile.st-confirmed { border-top-color: var(--ap-exp); }
.ad-tile.st-checked_in { border-top-color: var(--ap-arr); background: #fff; }
.ad-tile.st-completed { border-top-color: var(--ap-srv); } .ad-tile.st-no_show { border-top-color: var(--ap-mis); }
.ad-tile.st-cancelled { opacity: .7; }
.ad-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ad-tile-time { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ad-tile-name { font-size: var(--fs-base); font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-tile-svc { font-size: var(--fs-meta); color: var(--muted); }
.ad-tile-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-tag); color: var(--faint); padding-top: 8px; border-top: 1px solid var(--line-soft, #eef1f5); }

/* Calendar view */
.ad-msums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ad-msum { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-left: 4px solid var(--ap-can); background: #fff; }
.ad-msum b { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink); }
.ad-msum span { font-size: var(--fs-meta); color: var(--body); }
.ad-msum.navy { background: var(--navy); border-left-color: #E1C566; } .ad-msum.navy b, .ad-msum.navy span { color: #fff; }
.ad-msum.blue { background: #fff; border-left-color: var(--ap-exp); } .ad-msum.blue b { color: var(--ap-exp); }
.ad-msum.amber { background: #fff; border-left-color: var(--ap-pen); } .ad-msum.amber b { color: var(--ap-pen); }
.ad-msum.green { background: #fff; border-left-color: var(--ap-srv); } .ad-msum.green b { color: var(--ap-srv); }
.ad-msum.red { background: #fff; border-left-color: var(--ap-mis); } .ad-msum.red b { color: var(--ap-mis); }
.ad-calcard { overflow: hidden; }
.ad-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.ad-cdow { background: #fff; padding: 8px 10px; font-size: var(--fs-tag); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ad-cday { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 112px; padding: 8px 10px; background: #fff; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--body); }
.ad-cday:hover { box-shadow: inset 0 0 0 2px var(--brand); }
.ad-cday:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ad-cday.is-blank { background: #fff; cursor: default; box-shadow: none; }
.ad-cday.is-wkend { background: #fff; }
/* Busier days: a thicker solid bar along the top (no pastel shading). */
.ad-cday.heat-1 { box-shadow: inset 0 3px 0 var(--brand); } .ad-cday.heat-2 { box-shadow: inset 0 4px 0 var(--brand); } .ad-cday.heat-3 { box-shadow: inset 0 6px 0 var(--brand); }
.ad-cday.heat-4 { box-shadow: inset 0 6px 0 var(--navy); } .ad-cday.heat-5 { box-shadow: inset 0 8px 0 var(--navy); }
.ad-cday.is-today { outline: 2px solid var(--navy); outline-offset: -2px; }
.ad-cday-n { font-size: var(--fs-sm); color: var(--ink); display: flex; align-items: center; gap: 6px; }
.ad-cday-t { font-size: var(--fs-meta); color: var(--body); }
.ad-cday-t b { font-size: 20px; font-weight: 500; color: var(--navy); font-variant-numeric: tabular-nums; }
.ad-cbar { display: flex; height: 6px; gap: 1px; background: rgba(255, 255, 255, .6); }
.ad-cbar i { display: block; height: 6px; }
.ad-cbar i.blue { background: var(--ap-exp); } .ad-cbar i.teal { background: var(--ap-arr); } .ad-cbar i.green { background: var(--ap-srv); }
.ad-cbar i.red { background: var(--ap-mis); } .ad-cbar i.grey { background: var(--ap-can); }
.ad-cday-f { display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--fs-tag); }
@media (max-width: 900px) {
  .ad-msums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ad-cday { min-height: 72px; padding: 6px; }
  .ad-cday-t span, .ad-cday-f { display: none; }
  .ad-cday-t { font-size: 0; } .ad-cday-t b { font-size: 16px; }
}
@media (max-width: 1100px) { .ad-net { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .ad-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ad-q { margin-left: 0; flex: 1 1 100%; }
}

/* Emergency lane. The life-or-liberty note uses the red alert edge, as the
   public site does for urgent notices. */
.el-note { background: #fff; border-left: 4px solid var(--st-red); color: #5e1512; padding: 10px 16px; margin-bottom: 18px; font-size: var(--fs-sm); line-height: 1.5; }
.el-note b { color: var(--st-red); font-weight: 500; }
.el-booked { font-size: var(--fs-tag); color: #fff; background: var(--st-green); padding: 3px 8px; }
/* Phones (found while checking the capacity screen, 10 Oct 2026): the top
   bar could not shrink below about 454 px, which widened every console page
   past a 375 px screen and pushed side panels partly off it. The role badge
   is dropped on small screens and the mission name shortens instead. */
@media (max-width: 560px) {
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar .role-chip { display: none; }
  .tb-scope { flex: 1 1 auto; overflow: hidden; }
}
@media (max-width: 720px) {
  .cap-days { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 14px; }
  .cap-two { grid-template-columns: 1fr; }
}

/* ======================================================================
   Six doors (console redesign, 10 Oct 2026). Bold, after the public site:
   a navy sidebar of six doors with a gold marker, a navy band over every
   screen (door name, heading, what it is for, the door's tabs with a gold
   marker), solid colours only, square corners, weight 500 at most.
   Motion: doors lift the screen in, tabs slide it from the side you moved
   towards, and the gold markers glide (admin.js go()); none of it runs for
   people who ask their system for less motion (the rule above).
   ====================================================================== */
:root { --sidebar-w: 276px; --side-deep: #04111d; --side-seam: #3d6289; --side-line: #1d4266; --side-hi: #143a5c; --side-on: #1c4a73; --side-sub: #9fb4cc; --band-fg: #d7e2ef; }
.main { --pt: 22px; --px: 26px; padding: var(--pt) var(--px) 60px; }
@media (max-width: 900px) { .main { --pt: 18px; --px: 16px; padding: var(--pt) var(--px) 48px; } }

/* Sidebar */
/* The sidebar is a deeper navy than the page band, with a seam where they
   meet: the same navy made the two read as one block (13 Oct 2026). */
.side { background: var(--side-deep); border-right: 1px solid var(--side-seam); }
.side-brand { height: auto; min-height: var(--topbar-h); padding: 16px 20px; gap: 12px; border-bottom: 1px solid var(--side-line); }
.side-brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.side-brand-txt b { font-weight: 500; font-size: 16px; color: #fff; }
.side-brand-txt small { font-size: 12px; color: var(--side-sub); margin-top: 2px; }
.side-nav { padding: 12px 0 18px; }
.navbtn.door { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 64px; padding: 12px 18px 12px 22px; color: #e6edf5; box-shadow: none; }
.navbtn.door .nav-ic { width: 22px; height: 22px; color: #8fb4dc; opacity: 1; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.navbtn.door:hover { background: var(--side-hi); }
.navbtn.door:hover .nav-ic { transform: scale(1.08); }
.navbtn.door.is-on { background: var(--side-on); box-shadow: none; font-weight: 400; }
.navbtn.door.is-on .nav-ic { color: var(--gold-bright); }
.door-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.door-txt b { font-weight: 500; font-size: 15px; color: #fff; letter-spacing: .01em; }
.door-txt small { font-size: 12px; color: var(--side-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbtn.door.is-on .door-txt small { color: var(--band-fg); }
.door-ink { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: transparent; }
.navbtn.door.is-on .door-ink { background: var(--gold); }
.navbtn.door .nav-count { margin: 0; background: #fff; color: var(--navy); font-size: 11px; padding: 2px 7px; }
.navbtn.door.is-on .nav-count { background: #fff; color: var(--navy); }
.navbtn.door-back { gap: 8px; padding: 12px 22px; margin-bottom: 8px; color: var(--gold-bright); font-size: var(--fs-meta); border-bottom: 1px solid var(--side-line); }
.navbtn.door-back .nav-ic { width: 16px; height: 16px; }
.navbtn.door-back:hover { background: var(--side-hi); color: #fff; }
.side-foot { border-top: 1px solid var(--side-line); padding: 14px 20px; color: var(--side-sub); }
.side-foot kbd { font-family: var(--mono); font-size: 11px; color: #fff; background: var(--side-on); padding: 1px 5px; }

/* The band: rows 1 to 4 of the hub grid (eyebrow, heading and the screen's
   buttons, what it is for, the tabs). It sits behind them and bleeds to the
   edges of the page; everything the screen draws comes after it. */
.hub { grid-template-columns: minmax(0, 1fr) auto; }
.hub-band { grid-row: 1 / 5; grid-column: 1 / -1; margin: calc(-1 * var(--pt)) calc(-1 * var(--px)) 24px; background: var(--navy); position: relative; overflow: hidden; }
.hub-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--flag-band); }
.hub-band::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; }
/* The band is positioned (for its stripe and sweep), so what sits on it is too. */
.hub-eyebrow, .hub-title, .hub-row, .hub-body > .page-head > .page-actions, .hub-body > .page-head .page-sub { position: relative; }
.tb-scope-txt { display: flex; flex-direction: column; gap: 2px; }
.hub-eyebrow { grid-row: 1; grid-column: 1 / -1; margin: 10px 0 8px; font-size: var(--fs-eyebrow); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); font-weight: 500; }
.hub-title { grid-row: 2; grid-column: 1; align-self: end; margin: 0 0 8px; font-size: var(--fs-display); line-height: 1.15; font-weight: 500; color: #fff; letter-spacing: -.01em; }
.hub-body > .page-head > .page-actions { grid-row: 2; grid-column: 2; align-self: end; margin-bottom: 10px; }
.hub-body > .page-head .page-sub { grid-row: 3; grid-column: 1 / -1; margin: 0 0 16px; color: var(--band-fg); font-size: var(--fs-base); max-width: 860px; line-height: 1.5; }
.hub-row { grid-row: 4; grid-column: 1 / -1; min-height: 14px; margin-bottom: 24px; border-bottom: 0; align-items: center; }
/* Tabs wrap rather than scroll out of sight: every tab in a door stays visible. */
.hub-tabs { gap: 0; align-items: center; flex-wrap: wrap; overflow: visible; }
.hub-sect { flex: none; padding: 0 10px 0 16px; margin-left: 8px; border-left: 1px solid var(--side-line); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--side-sub); white-space: nowrap; }
.hub-sect:first-child { padding-left: 0; margin-left: 0; border-left: 0; }
.hub-tab { position: relative; padding: 12px 14px 15px; margin: 0; border: 0; color: var(--band-fg); font-size: var(--fs-sm); transition: color var(--dur) var(--ease); }
.hub-tab:hover { color: #fff; }
.hub-tab.is-on { color: #fff; font-weight: 500; }
.hub-tab:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.tab-ink { position: absolute; left: 14px; right: 14px; bottom: 0; height: 4px; background: transparent; transform-origin: left center; }
.hub-tab.is-on .tab-ink { background: var(--gold); }
.hub-tab .nav-count { background: #fff; color: var(--navy); }
.hub-ext { padding: 0 0 4px; color: var(--gold-bright); }
.hub-ext:hover { color: #fff; }

/* A screen outside any door (your own profile) gets the same band. */
.main > .page-head { background: var(--navy); margin: calc(-1 * var(--pt)) calc(-1 * var(--px)) 24px; padding: calc(var(--pt) + 14px) var(--px) 22px; border-top: 4px solid #0b0b0c; border-image: var(--flag-band) 1; }
.main > .page-head .page-title { color: #fff; font-size: var(--fs-display); font-weight: 500; }
.main > .page-head .page-sub { color: var(--band-fg); }

/* The screen's own buttons, on navy. */
.main > .page-head .btn-outline, .hub-body > .page-head .btn-outline { background: var(--navy); color: #fff; border-color: #fff; }
.main > .page-head .btn-outline:hover, .hub-body > .page-head .btn-outline:hover { background: #fff; color: var(--navy); border-color: #fff; }
.main > .page-head .btn-ghost, .hub-body > .page-head .btn-ghost { color: var(--band-fg); }
.main > .page-head .btn-ghost:hover, .hub-body > .page-head .btn-ghost:hover { color: #fff; background: var(--side-hi); }
.main > .page-head .btn-primary, .hub-body > .page-head .btn-primary { background: #fff; color: var(--navy); }
.main > .page-head .btn-primary:hover, .hub-body > .page-head .btn-primary:hover { background: var(--canvas); box-shadow: none; }
.hub-body > .page-head .page-actions label, .main > .page-head .page-actions label { color: var(--band-fg); }

@media (max-width: 720px) {
  .hub { grid-template-columns: minmax(0, 1fr); }
  .hub-band { grid-row: 1 / 6; }
  .hub-title { font-size: 25px; }
  .hub-body > .page-head .page-sub { grid-row: 3; }
  .hub-body > .page-head > .page-actions { grid-row: 4; grid-column: 1; justify-content: flex-start; margin-bottom: 12px; }
  .hub-row { grid-row: 5; flex-wrap: wrap; }
  .hub-ext { order: 0; width: auto; padding-bottom: 4px; }
}

/* Motion */
@keyframes inRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes inRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes inLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes bandText { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes goldSweep { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.vt-door .hub-eyebrow { animation: bandText .4s var(--ease) both; }
.vt-door .hub-title { animation: bandText .45s var(--ease) .05s both; }
.vt-door .hub-band::after { animation: goldSweep .7s var(--ease) both; }
.vt-door .hub-body > * { animation: inRise .5s var(--ease) .08s both; }
.vt-door .hub-body > :nth-child(3) { animation-delay: .14s; }
.vt-door .hub-body > :nth-child(4) { animation-delay: .2s; }
.vt-door .hub-body > :nth-child(n+5) { animation-delay: .26s; }
.vt-next .hub-title, .vt-next .hub-body > * { animation: inRight .38s var(--ease) both; }
.vt-prev .hub-title, .vt-prev .hub-body > * { animation: inLeft .38s var(--ease) both; }
.vt-door.main > *:not(.hub), .vt-next.main > *:not(.hub), .vt-prev.main > *:not(.hub) { animation: inRise .45s var(--ease) both; }

/* Today: three lanes, read left to right as decisions. */
.td-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; margin-bottom: 26px; }
.td-lane { background: var(--card); box-shadow: var(--shadow); min-width: 0; }
.td-lane-head { display: flex; align-items: center; gap: 16px; padding: 16px 18px; color: #fff; }
.lane-now .td-lane-head { background: var(--st-red); }
.lane-decide .td-lane-head { background: var(--st-amber); }
.lane-track .td-lane-head { background: var(--st-green); }
.td-n { font-size: 46px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 1.3ch; }
.td-lane-head h2 { margin: 0; font-size: 19px; font-weight: 500; color: #fff; }
.td-lane-head small { display: block; margin-top: 3px; font-size: var(--fs-meta); color: #fff; line-height: 1.35; }
.td-list { display: flex; flex-direction: column; }
.td-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); border-left: 5px solid var(--brand); animation: inRise .42s var(--ease) both; animation-delay: calc(min(var(--i, 0), 8) * 45ms + 120ms); }
.td-item:last-child { border-bottom: 0; }
.td-item.k-emergency { border-left-color: var(--st-red); }
.td-item.k-enquiry { border-left-color: var(--navy); }
.td-open { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind kind" "who when" "what what"; gap: 4px 12px; padding: 12px 14px; background: var(--card); border: 0; font: inherit; text-align: left; color: var(--body); cursor: pointer; transition: background var(--dur) var(--ease); }
.td-open:hover { background: var(--canvas); }
.td-open:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.td-kind { grid-area: kind; display: flex; gap: 10px; align-items: baseline; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.td-why { margin-left: auto; font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--ink); white-space: nowrap; }
.k-emergency .td-kind { color: var(--st-red); }
.td-who { grid-area: who; font-weight: 500; font-size: var(--fs-base); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-when { grid-area: when; font-size: var(--fs-meta); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.td-what { grid-area: what; font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-what::first-letter { text-transform: uppercase; }
.td-take { flex: none; border: 0; background: var(--navy); color: #fff; font: inherit; font-size: var(--fs-meta); font-weight: 500; padding: 0 14px; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease); }
.td-take:hover { background: var(--brand); }
.td-take:disabled { background: var(--st-gray); cursor: wait; }
.td-none { margin: 0; padding: 22px 18px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.td-strip { margin-bottom: 24px; animation: inRise .45s var(--ease) .3s both; }
.td-strip h2 { margin: 0 0 10px; font-size: var(--fs-eyebrow); letter-spacing: .16em; text-transform: uppercase; color: var(--brand); font-weight: 500; }
.td-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.td-chip { display: flex; gap: 8px; align-items: baseline; padding: 10px 14px; background: var(--card); border: 0; border-left: 5px solid var(--navy); box-shadow: var(--shadow); font: inherit; text-align: left; cursor: pointer; }
.td-chip b { font-family: var(--mono); font-weight: 500; font-size: var(--fs-meta); color: var(--navy); }
.td-chip span { font-size: var(--fs-meta); color: var(--body); }
.td-chip:hover { border-left-color: var(--gold); }
.td-con-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.td-con { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; background: var(--card); border-top: 4px solid var(--navy); box-shadow: var(--shadow); }
.td-con b { width: 100%; font-size: var(--fs-lead); font-weight: 500; color: var(--ink); }
.td-con .btn { margin-left: auto; }
.td-desks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.td-desk { display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: var(--card); border: 0; border-top: 4px solid var(--brand); box-shadow: var(--shadow); font: inherit; font-size: var(--fs-base); color: var(--ink); text-align: left; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.td-desk:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.td-desk .nav-count { margin: 0; background: var(--navy); color: #fff; font-family: var(--mono); font-size: 12px; padding: 2px 8px; }
.td-arrow { margin-left: auto; color: var(--brand); transition: transform var(--dur) var(--ease); }
.td-desk:hover .td-arrow { transform: translateX(4px); }
@media (max-width: 560px) { .td-n { font-size: 38px; } .td-take { padding: 0 10px; } }
.td-lane:not(.is-all) .td-item:nth-child(n+7) { display: none; }
.td-more { display: block; width: 100%; padding: 12px 18px; background: var(--card); border: 0; border-top: 1px solid var(--line); font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--brand); text-align: left; cursor: pointer; }
.td-more:hover { color: var(--navy); background: var(--canvas); }
@media (max-width: 900px) { .side { width: min(296px, 86vw); box-shadow: 12px 0 40px rgba(9, 20, 38, .3); } .side:not(.open) { box-shadow: none; } }

/* Today, restacked (user, 10 Oct 2026: "some empty spaces look bad"). Lanes
   side by side left large gaps when one lane was long and the next short. Each
   lane is now a full-width row: a solid coloured block with its count on the
   left, its cards filling a grid on the right. Rows grow with their content,
   an empty lane shrinks to one line, and nothing leaves a hole beside it. */
.td-lanes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.td-lane { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: stretch; }
.td-lane-head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 16px 18px; }
.td-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-content: start; min-width: 0; }
.td-item { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.td-item:last-child { border-bottom: 1px solid var(--line); }
.td-none { align-self: center; padding: 18px; }
.td-more { grid-column: 2; border-top: 0; border-left: 1px solid var(--line); }
/* What follows the lanes fills its row instead of leaving a gap at the end. */
.td-con-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.td-desks { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 720px) {
  .td-lane { grid-template-columns: minmax(0, 1fr); }
  .td-lane-head { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; }
  .td-more { grid-column: 1; border-left: 0; }
}
/* Cards that sit side by side on the dashboards share a height, so a short
   card no longer leaves a hole of page background beside a tall one. */
.cols, .ov-grid, .cards2, .sv-cols, .ad-net { align-items: stretch; }
/* An empty lane is one slim line: its count, its name and what it means. */
.td-lane.is-empty { grid-template-columns: 210px minmax(0, 1fr); }
.td-lane.is-empty .td-lane-head { flex-direction: row; align-items: center; gap: 12px; padding: 10px 18px; }
.td-lane.is-empty .td-n { font-size: 30px; }
.td-lane.is-empty .td-lane-head small { display: none; }
.td-lane.is-empty .td-list { align-content: center; }
.td-lane.is-empty .td-none { padding: 12px 18px; }
@media (max-width: 720px) { .td-lane.is-empty { grid-template-columns: minmax(0, 1fr); } }

/* Detail panel (user, 10 Oct 2026: "looks bad with the large empty space").
   It ran the full height of the screen with its buttons pinned to the foot,
   so a short case left a white gap in the middle. It now floats and fits what
   it holds: the buttons follow the details directly, and only long content
   scrolls (inside the panel, with the buttons still in view). The head reads
   like the page band: navy, flag stripe, reference in gold capitals. */
.drawer { top: 12px; right: 12px; bottom: auto; height: auto; max-height: calc(100vh - 24px); width: min(480px, calc(100vw - 24px)); overflow: hidden; }
.drawer-head { position: relative; background: var(--navy); border-bottom: 0; padding: 22px 22px 18px; }
.drawer-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--flag-band); }
.drawer-head b, .drawer-head .ref { color: var(--gold-bright); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; }
.drawer-head h3, .drawer-head > div > span:not(.ref) { color: #fff; font-size: 21px; }
.drawer-head > div > span:first-letter { text-transform: uppercase; }
.drawer-head .muted, .drawer-head small { color: var(--band-fg); }
.drawer-x { color: var(--band-fg); }
.drawer-x:hover { color: #fff; }
.drawer-body { flex: 0 1 auto; min-height: 0; padding: 20px 22px; }
.drawer-actions { flex: none; background: var(--canvas); border-top: 1px solid var(--line); padding: 14px 22px; }
.drawer .kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 9px 14px; margin: 0; }
.drawer .kv dt { color: var(--muted); font-size: var(--fs-meta); }
.drawer .kv dd { margin: 0; color: var(--ink); font-size: var(--fs-sm); overflow-wrap: anywhere; }
@media (max-width: 560px) { .drawer { top: 0; right: 0; width: 100vw; max-height: 100vh; } }
/* Inside the panel a visit record needs no second frame, and the panel head
   already shows the reference. */
.drawer-body > .ad-card { border: 0; box-shadow: none; padding: 0; background: none; }
.drawer-body > .ad-card > .ad-head .ref { display: none; }

/* Referral to a colleague (0065). Blue is for notes and questions (the colour
   rule: notes never gold); gold stays for the one main action, "Refer". */
.ad-refer { margin-bottom: 4px; }
.ad-ref-mode { border: 0; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ad-ref-mode label { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.ad-ref-mode input { margin-top: 3px; accent-color: var(--navy); }
.td-item.k-referral { border-left-color: var(--brand); }
.k-referral .td-kind { color: var(--brand); }
.k-referral .td-who { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rf-note { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--brand); padding: 12px 14px; margin-bottom: 14px; }
.rf-note.rf-ans { border-left-color: var(--st-green); }
.rf-by { display: block; font-size: var(--fs-meta); color: var(--muted); margin-bottom: 6px; }
.rf-note p { margin: 0; font-size: var(--fs-base); color: var(--ink); line-height: 1.5; white-space: pre-wrap; }

/* Arrival is recorded at the gate (0065): visits whose time passed with no
   gate entry. Solid amber edge, white ground (no tints). */
.ad-unseen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; margin-bottom: 14px; background: #fff; border-left: 6px solid var(--st-amber); box-shadow: var(--shadow); font-size: var(--fs-sm); color: var(--body); }
.ad-unseen b { color: var(--st-amber); font-weight: 500; }
.ad-unseen span { flex: 1 1 320px; }

/* ======================================================================
   Floating cards you can arrange (user, 10 Oct 2026: "I like the use of
   floating cards; a console where people can move cards around"). Cards
   float on the page with a soft, deep shadow and a solid colour edge; a
   handle drags them, arrows move them, they can be wide or narrow, and all
   but Act now can be hidden. Square corners and solid colours, as the house
   style asks. Today's summary cards float across the foot of the navy band.
   ====================================================================== */
:root { --float: 0 1px 2px rgba(13, 43, 69, .06), 0 14px 34px rgba(13, 43, 69, .10); --float-lift: 0 2px 4px rgba(13, 43, 69, .08), 0 24px 48px rgba(13, 43, 69, .18); }

/* Room in Today's band for the floating summary cards. */
.view-today .hub-band { margin-bottom: 0; }
.view-today .hub-row { margin-bottom: 70px; }
.td-pulse { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: -50px 0 26px; }
.td-pc { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; padding: 16px 18px; background: var(--card); border: 0; border-top: 4px solid var(--navy); box-shadow: var(--float); font: inherit; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); animation: inRise .5s var(--ease) both; }
.td-pc:nth-child(2) { animation-delay: .05s; } .td-pc:nth-child(3) { animation-delay: .1s; } .td-pc:nth-child(4) { animation-delay: .15s; }
.td-pc:hover { transform: translateY(-3px); box-shadow: var(--float-lift); }
.td-pc:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.td-pc-ic { grid-row: 1 / 3; width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: var(--navy); }
.td-pc-ic .nav-ic { width: 22px; height: 22px; }
.td-pc b { font-size: 30px; line-height: 1; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.td-pc > span:last-child { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
.td-pc.tone-red { border-top-color: var(--st-red); } .td-pc.tone-red .td-pc-ic { background: var(--st-red); }
.td-pc.tone-amber { border-top-color: var(--st-amber); } .td-pc.tone-amber .td-pc-ic { background: var(--st-amber); }
.td-pc.tone-green { border-top-color: var(--st-green); } .td-pc.tone-green .td-pc-ic { background: var(--st-green); }
.td-pc.tone-blue { border-top-color: var(--brand); } .td-pc.tone-blue .td-pc-ic { background: var(--brand); }
@media (max-width: 900px) { .td-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .td-pulse { gap: 10px; } .td-pc { grid-template-columns: 1fr; padding: 12px; } .td-pc-ic { display: none; } .td-pc b { font-size: 26px; } }

/* The board */
.bd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 22px; align-items: stretch; margin-bottom: 14px; }
.bd-card { display: flex; flex-direction: column; min-width: 0; background: var(--card); box-shadow: var(--float); border-top: 4px solid var(--navy); transition: box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease); animation: inRise .5s var(--ease) both; }
.bd-card:nth-child(2) { animation-delay: .06s; } .bd-card:nth-child(3) { animation-delay: .12s; } .bd-card:nth-child(n+4) { animation-delay: .18s; }
.bd-card.size-wide { grid-column: 1 / -1; }
.bd-card.tone-red { border-top-color: var(--st-red); } .bd-card.tone-amber { border-top-color: var(--st-amber); }
.bd-card.tone-green { border-top-color: var(--st-green); } .bd-card.tone-blue { border-top-color: var(--brand); }
.bd-card.is-drag { opacity: .55; box-shadow: var(--float-lift); outline: 2px dashed var(--navy); outline-offset: 4px; }
.bd.is-arranging .bd-card:not(.is-drag) { box-shadow: var(--float), 0 0 0 1px var(--line); }
@keyframes bdFlash { 0% { box-shadow: var(--float), 0 0 0 0 var(--gold); } 30% { box-shadow: var(--float-lift), 0 0 0 4px var(--gold); } 100% { box-shadow: var(--float), 0 0 0 0 var(--gold); } }
.bd-card.is-flash { animation: bdFlash 1.1s var(--ease) both; }
.bd-head { display: flex; align-items: center; gap: 14px; padding: 16px 16px 14px 10px; border-bottom: 1px solid var(--line); }
.bd-grip { flex: none; align-self: stretch; width: 16px; cursor: grab; background-image: radial-gradient(circle, #9aa5b5 1.5px, transparent 1.6px); background-size: 6px 6px; background-position: center; background-repeat: repeat; min-height: 32px; opacity: .8; }
.bd-grip:hover { opacity: 1; background-image: radial-gradient(circle, var(--navy) 1.5px, transparent 1.6px); }
.bd-grip:active { cursor: grabbing; }
.bd-n { font-size: 36px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--navy); min-width: 1.2ch; }
.tone-red .bd-n { color: var(--st-red); } .tone-amber .bd-n { color: var(--st-amber); } .tone-green .bd-n { color: var(--st-green); } .tone-blue .bd-n { color: var(--brand); }
.bd-tt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bd-tt h2 { margin: 0; font-size: 18px; font-weight: 500; color: var(--ink); }
.bd-tt small { font-size: var(--fs-meta); color: var(--muted); line-height: 1.35; }
.bd-tools { flex: none; display: flex; gap: 2px; opacity: .25; transition: opacity var(--dur) var(--ease); }
.bd-card:hover .bd-tools, .bd-card:focus-within .bd-tools { opacity: 1; }
.bd-tool { width: 30px; height: 30px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--navy); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.bd-tool:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.bd-tool:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.bd-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.bd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0 24px; font-size: var(--fs-meta); color: var(--muted); }
.bd-chip { background: var(--card); border: 1px solid var(--line); padding: 5px 10px; font: inherit; font-size: var(--fs-meta); color: var(--navy); cursor: pointer; }
.bd-chip:hover { border-color: var(--navy); }
.bd-reset { background: none; border: 0; padding: 4px 0; font: inherit; font-size: var(--fs-meta); color: var(--brand); text-decoration: underline; cursor: pointer; }
.bd-tip { margin-left: auto; }
@media (max-width: 1000px) { .bd { grid-template-columns: minmax(0, 1fr); } .bd-card.size-wide { grid-column: auto; } .bd-tip { display: none; } }
@media (hover: none) { .bd-tools { opacity: 1; } }

/* Today's lists inside board cards */
.bd-card .td-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-content: start; flex: 1 1 auto; }
.bd-card .td-list.is-empty { display: flex; align-items: center; }
.bd-card .td-item { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); animation-delay: calc(min(var(--i, 0), 8) * 40ms + 200ms); }
.bd-card.is-capped .td-item:nth-child(n+5) { display: none; }
.bd-card.size-wide.is-capped .td-item:nth-child(n+5) { display: flex; }
.bd-card.size-wide.is-capped .td-item:nth-child(n+7) { display: none; }
.bd-card .td-more { grid-column: auto; border-left: 0; border-top: 1px solid var(--line); }
.bd-card .td-chips, .bd-card .td-desks, .bd-card .td-con-grid { padding: 16px; }
.bd-card .td-desks { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* The standing lines (events, travel advice, Mission page) are filled in after
   the queues; their wrapper joins the same grid, so every box lines up
   (15 Oct 2026: they sat in one cell, squeezed and out of line). */
#td-mission-more { display: contents; }
.bd-card .td-desk, .bd-card .td-chip, .bd-card .td-con { box-shadow: none; border: 1px solid var(--line); border-top-width: 4px; }
.bd-card .td-chip { border-top-width: 1px; border-left-width: 5px; }

/* A narrow card alone on its row stretches across it: no holes. */
.bd-card.size-half.is-alone { grid-column: 1 / -1; }

/* My day: day pills and time-slot cards (after the staff schedule the user
   liked). The chosen day is solid navy; today carries a gold dot. */
.md { display: flex; flex-direction: column; flex: 1 1 auto; }
.md-day.is-today::after { content: ""; position: absolute; bottom: 4px; width: 5px; height: 5px; background: var(--gold); }
.md-day.is-on { background: var(--navy); border-color: var(--navy); color: var(--band-fg); }
.md-day.is-on b { color: #fff; }
.md-whob.is-on { background: var(--navy); color: #fff; }
.md-list .td-none { padding: 6px 0; }
.md-list .td-more { margin: 0 -16px -16px; width: auto; }
.md-slot.st-amber { border-left-color: var(--st-amber); } .md-slot.st-teal { border-left-color: #0f7173; }
.md-slot.st-green { border-left-color: var(--st-green); } .md-slot.st-red { border-left-color: var(--st-red); } .md-slot.st-grey { border-left-color: #5f6878; }
@media (max-width: 480px) { .md-slot { grid-template-columns: 54px minmax(0, 1fr); } .md-tags { grid-column: 2; flex-direction: row; align-items: center; } }
/* Pointer dragging: the card under the pointer lets clicks through to the
   card beneath (to find where it goes); nothing on the page is selected. */
.bd-grip { touch-action: none; }
.bd-card.is-drag { pointer-events: none; position: relative; z-index: 5; opacity: .92; outline: 0; box-shadow: var(--float-lift); animation: none; }
body.bd-dragging, body.bd-dragging * { user-select: none; cursor: grabbing; }
/* Phones, HQ: the top bar carried the mission switcher and could not shrink,
   which widened every page past the screen. The switcher narrows and the
   office name gives way to its badge (the switcher already names it). */
@media (max-width: 560px) {
  .tb-switch { max-width: 112px; min-width: 0; flex: 0 1 auto; }
  .tb-switch:not([hidden]) ~ .tb-spacer { display: none; }
  .topbar:has(.tb-switch:not([hidden])) .tb-scope-txt { display: none; }
  .tb-user { gap: 6px; } #signout { padding: 6px 8px; }
  .topbar > * { min-width: 0; }
}
/* Decide today and other wide cards: two cards a row, so each case reads in
   full (user, 10 Oct 2026); narrow cards one a row. Names and services wrap
   to a second line instead of being cut off. */
.bd-card.size-wide .td-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bd-card.size-half .td-list, .bd-card.is-alone .td-list { grid-template-columns: minmax(0, 1fr); }
.bd-card.size-half.is-alone .td-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bd-card .td-who, .bd-card .td-what { white-space: normal; overflow-wrap: anywhere; }
.bd-card .td-open { padding: 14px 16px; gap: 5px 14px; }
.bd-card .td-who { font-size: 16px; }
@media (max-width: 1000px) { .bd-card .td-list, .bd-card.size-wide .td-list, .bd-card.size-half.is-alone .td-list { grid-template-columns: minmax(0, 1fr); } }

/* Personal development (0066): the same floating board as Today. */
.view-growth .hub-band { margin-bottom: 0; }
.view-growth .hub-row { margin-bottom: 70px; }
.td-pc.tone-navy { border-top-color: var(--navy); } .td-pc.tone-navy .td-pc-ic { background: var(--navy); }
.gr-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gr-goals > .td-none { grid-column: 1 / -1; }
.gr-goal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 5px solid var(--st-green); }
.gr-goal.st-amber { border-left-color: var(--st-amber); } .gr-goal.st-grey { border-left-color: #5f6878; }
.gr-goal.st-grey .gr-gt b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.gr-gt { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gr-gt b { font-weight: 500; color: var(--ink); font-size: var(--fs-base); overflow-wrap: anywhere; }
.gr-gt span { font-size: var(--fs-meta); color: var(--muted); }
.gr-gst { display: flex; border: 1px solid var(--line); }
.gr-stb { padding: 6px 10px; background: var(--card); border: 0; font: inherit; font-size: var(--fs-meta); color: var(--muted); cursor: pointer; }
.gr-stb + .gr-stb { border-left: 1px solid var(--line); }
.gr-stb:hover { color: var(--ink); }
.gr-stb.is-on { color: #fff; }
.gr-stb.is-on.st-green { background: var(--st-green); } .gr-stb.is-on.st-amber { background: var(--st-amber); } .gr-stb.is-on.st-grey { background: #5f6878; }
.gr-add { padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.gr-add-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 8px; }
.gr-list { display: flex; flex-direction: column; }
.gr-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.gr-row:last-child { border-bottom: 0; }
.gr-foot { padding: 12px 16px; border-top: 1px solid var(--line); margin-top: auto; }
.gr-link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--brand); cursor: pointer; }
.gr-post { display: flex; flex-direction: column; gap: 5px; padding: 16px; border-bottom: 1px solid var(--line); }
.gr-post > b { font-size: 17px; font-weight: 500; color: var(--ink); }
.gr-post > span { font-size: var(--fs-sm); color: var(--body); }
.gr-bar { height: 8px; background: var(--line); margin-top: 8px; }
.gr-bar i { display: block; height: 100%; background: var(--navy); }
.gr-langs { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 16px 4px; }
.gr-small { margin: 8px 16px 16px; font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; }
@media (max-width: 1000px) { .gr-goals { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .gr-add-row { grid-template-columns: minmax(0, 1fr); } }
.gr-goal:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Learning Hub library (increment 1, 0068): floating cards, the same card for
   every item whatever its source; square corners, solid colours. Stream edges:
   masterclass navy, learning portal blue, conventional green. */
.view-learning .hub-band { margin-bottom: 0; }
.view-learning .hub-row { margin-bottom: 70px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lh-panel { background: var(--card); box-shadow: var(--float); padding: 16px 18px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
.lh-bar { display: grid; grid-template-columns: minmax(0, 1fr) 220px 190px; gap: 10px; }
.lh-search input { width: 100%; min-height: 44px; font-size: var(--fs-base); padding-left: 14px; }
.lh-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lh-chips-l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.lh-chip { padding: 7px 12px; background: var(--card); border: 1px solid var(--line); font: inherit; font-size: var(--fs-meta); color: var(--body); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.lh-chip:hover { border-color: var(--navy); }
.lh-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.lh-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lh-count { margin: 0 0 10px; font-size: var(--fs-meta); color: var(--muted); }
.lh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin-bottom: 26px; }
.lh-card { display: flex; flex-direction: column; background: var(--card); box-shadow: var(--float); border-top: 4px solid var(--brand); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); animation: inRise .42s var(--ease) both; animation-delay: calc(min(var(--i, 0), 10) * 35ms + 80ms); }
.lh-card:hover { transform: translateY(-3px); box-shadow: var(--float-lift); }
.lh-card.tone-navy { border-top-color: var(--navy); } .lh-card.tone-green { border-top-color: var(--st-green); }
/* The Center for Decision Intelligence and Diplomacy's stream takes the amber tone (the Center itself is in the console's own colours since 11 Oct 2026). */
.lh-card.tone-amber { border-top-color: var(--st-amber); }
/* The Center framed inside the door (the "The Center" tab): fills the view below the band. */
.lh-frame-wrap { display: flex; flex-direction: column; gap: 8px; }
.lh-frame-note { margin: 0; font-size: var(--fs-meta); color: var(--muted); }
.lh-frame { width: 100%; height: calc(100vh - 236px); min-height: 520px; border: 1px solid var(--line); background: #fff; display: block; }
.lh-open { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px 14px; background: none; border: 0; font: inherit; text-align: left; color: var(--body); cursor: pointer; }
.lh-open:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.lh-eye { display: flex; width: 100%; gap: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); font-weight: 500; }
.lh-eye span { margin-left: auto; color: var(--muted); font-weight: 400; letter-spacing: .06em; }
.lh-title { font-size: 17px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.lh-sum { font-size: var(--fs-sm); color: var(--body); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lh-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-meta); color: var(--muted); }
.lh-paths { display: flex; flex-wrap: wrap; gap: 6px; }
.lh-path { font-size: 11px; padding: 3px 8px; color: #fff; background: var(--navy); }
.lh-path.p-diplomacy { background: var(--brand); } .lh-path.p-tech { background: var(--st-green); }
.lh-go { display: block; padding: 12px 18px; border-top: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 500; color: var(--brand); text-decoration: none; }
.lh-go:hover { background: var(--canvas); color: var(--navy); }
.lh-go.is-none { font-weight: 400; color: var(--muted); }
.lh-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; background: var(--card); box-shadow: var(--float); border-left: 5px solid var(--navy); margin-bottom: 26px; }
.lh-empty b { font-weight: 500; color: var(--ink); font-size: var(--fs-lead); }
.lh-empty span { color: var(--muted); font-size: var(--fs-sm); }
.lh-d-sum { margin: 0 0 16px; font-size: var(--fs-base); color: var(--body); line-height: 1.55; }
.lh-d-note { margin: 16px 0 0; padding: 10px 12px; border-left: 4px solid var(--brand); background: #fff; font-size: var(--fs-meta); color: var(--body); line-height: 1.5; }
.lm-table tr.is-retired td { color: var(--muted); }
.lm-form { display: flex; flex-direction: column; gap: 4px; }
.lm-form .fld-label { margin-top: 10px; }
.lm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lm-paths { border: 0; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.lm-paths legend { padding: 0; }
.lm-paths label { display: flex; gap: 6px; align-items: center; font-size: var(--fs-sm); color: var(--ink); }
@media (max-width: 760px) { .lh-bar { grid-template-columns: minmax(0, 1fr); } .lm-two { grid-template-columns: minmax(0, 1fr); } }

/* Skills map (0070). Solid colours: leader navy, practitioner blue,
   foundation grey; library edges green. Square nodes, no tints. */
.view-skills .hub-band { margin-bottom: 0; }
.view-skills .hub-row { margin-bottom: 70px; }
.sk-draft { background: #fff; border-left: 6px solid var(--brand); box-shadow: var(--float); padding: 14px 18px; margin-bottom: 16px; font-size: var(--fs-sm); line-height: 1.55; color: var(--body); }
.sk-draft b { font-weight: 500; color: var(--navy); }
.sk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.sk-seg { display: flex; border: 1px solid var(--line); background: var(--card); }
.sk-segb { padding: 9px 16px; background: none; border: 0; font: inherit; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
.sk-segb + .sk-segb { border-left: 1px solid var(--line); }
.sk-segb.is-on { background: var(--navy); color: #fff; }
.sk-segb:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.sk-graph-wrap { background: var(--card); box-shadow: var(--float); padding: 10px; overflow-x: auto; }
.sk-graph { display: block; width: 100%; min-width: 760px; height: auto; font-family: var(--sans); }
.sk-head { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); font-weight: 500; }
.sk-edge { fill: none; stroke: #9aa5b5; opacity: .55; transition: opacity var(--dur) var(--ease); }
.sk-edge.lv-leader { stroke: var(--navy); } .sk-edge.lv-practitioner { stroke: var(--brand); } .sk-edge.lv-foundation { stroke: #9aa5b5; } .sk-edge.lv-item { stroke: var(--st-green); }
.sk-graph.has-focus .sk-edge { opacity: .08; } .sk-graph.has-focus .sk-edge.is-lit { opacity: 1; }
.sk-node { cursor: pointer; }
.sk-node rect { fill: var(--card); stroke: var(--line); stroke-width: 1.5; transition: stroke var(--dur) var(--ease), fill var(--dur) var(--ease); }
.sk-node text { font-size: 14px; fill: var(--ink); font-weight: 500; pointer-events: none; }
.sk-node text.sk-sub { font-size: 11px; fill: var(--muted); font-weight: 400; }
.sk-node.sk-sec rect { stroke: var(--navy); stroke-width: 2; }
.sk-node.sk-comp rect { stroke: var(--brand); stroke-width: 2; }
.sk-node.sk-comp.f-tech rect { stroke: var(--st-green); } .sk-node.sk-comp.f-mfa rect { stroke: var(--navy); }
.sk-node.sk-prov rect { stroke: var(--st-green); stroke-width: 2; }
.sk-node:hover rect, .sk-node:focus-visible rect { stroke-width: 3; }
.sk-node:focus-visible { outline: none; }
.sk-graph.has-focus .sk-node { opacity: .35; } .sk-graph.has-focus .sk-node.is-lit { opacity: 1; }
.sk-graph.has-focus .sk-node.is-lit rect { fill: var(--navy); } .sk-graph.has-focus .sk-node.is-lit text { fill: #fff; } .sk-graph.has-focus .sk-node.is-lit text.sk-sub { fill: var(--band-fg); }
/* The Library's view switch (For you, All items, The framework) sits under the band. */
.lh-seg { margin: 0 0 14px; }
/* The reader's own map: a competency they completed, or are on, carries their standing on its edge. */
.sk-node.is-done rect { stroke: var(--st-green); stroke-width: 3; } .sk-node.is-on rect { stroke: var(--brand); stroke-width: 3; }
.sk-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 12px 0; font-size: var(--fs-meta); color: var(--body); }
.sk-legend i { display: inline-block; width: 22px; height: 4px; margin-right: 6px; vertical-align: middle; background: #9aa5b5; }
.sk-legend i.lv-leader { background: var(--navy); } .sk-legend i.lv-practitioner { background: var(--brand); } .sk-legend i.lv-item { background: var(--st-green); }
.sk-detail { min-height: 10px; margin-bottom: 20px; }
.sk-detail:not(:empty) { background: var(--card); box-shadow: var(--float); border-left: 6px solid var(--navy); padding: 14px 18px; font-size: var(--fs-sm); line-height: 1.55; }
.sk-detail b { font-weight: 500; color: var(--ink); font-size: var(--fs-base); }
.sk-detail p { margin: 6px 0 0; color: var(--body); }
.sk-matrix { margin-bottom: 10px; }
.sk-matrix table { min-width: 900px; }
.sk-matrix th { vertical-align: bottom; }
.sk-th { display: inline-block; max-width: 110px; white-space: normal; line-height: 1.3; border-top: 3px solid var(--brand); padding-top: 6px; }
.sk-th.f-tech { border-top-color: var(--st-green); } .sk-th.f-mfa { border-top-color: var(--navy); }
.sk-matrix td.num, .sk-matrix th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sk-matrix td.is-gap { color: var(--st-red); font-weight: 500; }
.sk-cell { width: 100%; min-width: 92px; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); background: var(--card); font: inherit; font-size: var(--fs-meta); color: var(--muted); text-align: center; }
.sk-cell.lv-foundation { background: #5f6878; border-color: #5f6878; color: #fff; }
.sk-cell.lv-practitioner { background: var(--brand); border-color: var(--brand); color: #fff; }
.sk-cell.lv-leader { background: var(--navy); border-color: var(--navy); color: #fff; }
.sk-cell.can { cursor: pointer; } .sk-cell.can:hover { outline: 2px solid var(--gold); outline-offset: -2px; }
.sk-cell:disabled { cursor: default; }
.sk-foot td { color: var(--muted); font-size: var(--fs-meta); }
.sk-mine-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.sk-pick { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink); }
.sk-pick select { width: auto; }
.sk-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 26px; }
.sk-need { background: var(--card); box-shadow: var(--float); border-left: 6px solid #5f6878; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.sk-need.lv-practitioner { border-left-color: var(--brand); } .sk-need.lv-leader { border-left-color: var(--navy); }
.sk-need-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sk-need-h b { font-weight: 500; color: var(--ink); font-size: var(--fs-base); flex: 1 1 auto; }
.sk-lv { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 3px 8px; background: #5f6878; }
.sk-lv.lv-practitioner { background: var(--brand); } .sk-lv.lv-leader { background: var(--navy); }
.sk-need p { margin: 0; font-size: var(--fs-sm); color: var(--body); line-height: 1.5; }
.sk-learn { display: flex; flex-direction: column; gap: 6px; }
.sk-gap { color: var(--st-red); font-weight: 500; }
@media (max-width: 760px) { .sk-mine { grid-template-columns: minmax(0, 1fr); } }


/* Events door: one event, one page (13 Oct 2026). A card is one button that
   opens the event; the page holds Overview, Guests and Planning. Square
   corners, solid colours, gold only for the main action. */
.evx-search { flex: 1 1 220px; min-width: 0; }
.evx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-bottom: 8px; }
.evx-card { display: flex; gap: 14px; align-items: stretch; text-align: left; width: 100%; background: var(--card); border: 1px solid var(--line); padding: 12px; cursor: pointer; font: inherit; color: var(--body); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.evx-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.evx-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.evx-date { flex: 0 0 56px; background: var(--navy); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0; }
.evx-date b { font-size: 22px; font-weight: 500; line-height: 1; }
.evx-date span { font-size: var(--fs-tag); text-transform: uppercase; letter-spacing: .08em; color: var(--band-fg); margin-top: 4px; }
.evx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.evx-title { font-size: var(--fs-base); font-weight: 500; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.evx-meta { font-size: var(--fs-meta); color: var(--muted); }
.evx-seats { font-size: var(--fs-meta); color: var(--body); display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.card-body .evx-seats { margin: 10px 0 8px; }
.evx-bar { flex: 0 0 90px; height: 6px; background: var(--line); position: relative; }
.evx-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand); }
.evx-bar.full i { background: var(--st-amber); }
.evx-head { background: var(--card); border: 1px solid var(--line); padding: 12px 16px 14px; margin-bottom: 14px; }
.evx-head-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-top: 6px; }
.evx-h { font-size: var(--fs-h1); font-weight: 500; color: var(--ink); margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.evx-sub { font-size: var(--fs-meta); color: var(--muted); margin-top: 4px; }
.evx-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.evx-parts { margin-top: 14px; }
.evx-cancel { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.evx-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.evx-grid > div { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) { .evx-grid { grid-template-columns: minmax(0, 1fr); } }
.evx-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; border: 1px solid var(--line); background: #fff; }
.evx-steps li { flex: 1 1 90px; padding: 10px 12px; font-size: var(--fs-meta); color: var(--muted); border-right: 1px solid var(--line); }
.evx-steps li:last-child { border-right: 0; }
.evx-steps li.done { color: var(--ink); }
.evx-steps li.now { background: var(--navy); color: #fff; font-weight: 500; }
.evx-more { margin: 10px 0 4px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.evx-more summary { cursor: pointer; font-size: var(--fs-meta); color: var(--brand); font-weight: 500; margin-bottom: 8px; }
.fld-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 520px) {
  .fld-pair { grid-template-columns: 1fr; }
  .evx-date { flex-basis: 48px; }
  /* A row of choices wider than a phone scrolls sideways instead of being cut off. */
  .evx-head .ad-seg, .hub-body .filterbar .ad-seg { display: flex; max-width: 100%; overflow-x: auto; }
  .evx-head .ad-segb, .hub-body .filterbar .ad-segb { flex: 0 0 auto; }
}


/* Passes, event by event (13 Oct 2026): each event a card, its pass requests
   beneath it. Counts are white chips; the ones waiting for a decision solid amber. */
.evx-due { align-self: flex-start; margin-top: 4px; font-size: var(--fs-tag); padding: 3px 8px; background: var(--st-amber); color: #fff; }
/* Check in (13 Oct 2026): one row per person, the button within reach. */
.ci-row { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); padding: 12px 14px; margin-bottom: 8px; flex-wrap: wrap; }
.ci-row.done { border-left: 4px solid var(--st-green); }
.ci-who { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ci-who b { font-size: var(--fs-lead); font-weight: 500; color: var(--ink); }
.ci-who span { font-size: var(--fs-meta); color: var(--muted); }
.ci-state { font-size: var(--fs-meta); color: var(--body); }
.ci-row .btn-primary { min-height: 44px; padding: 0 22px; }
.ci-hint { margin: 8px 0 0; }
.acx-n.due { background: var(--st-amber); border-color: var(--st-amber); color: #fff; }
.acx-group .table-wrap { border: 0; border-top: 1px solid var(--line); box-shadow: none; margin: 0; }


/* Parts of a tab (13 Oct 2026): one tab, a small switch in the band. */
.hub-row { flex-wrap: wrap; gap: 8px 16px; }
.hub-parts { display: inline-flex; border: 1px solid rgba(255, 255, 255, .55); margin: 0 0 8px; }
.hub-part { background: transparent; border: 0; border-right: 1px solid rgba(255, 255, 255, .55); color: var(--band-fg); padding: 7px 14px; font: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.hub-part:last-child { border-right: 0; }
.hub-part:hover { color: #fff; }
.hub-part.is-on { background: #fff; color: var(--navy); font-weight: 500; }
.hub-part:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }
/* Today, for headquarters: the network picture below your own work. */
.td-network { margin-top: 28px; }

/* Missions: Mission page completion across the network (15 Oct 2026). Solid
   colours on navy and white; square corners; weight 500 at most. */
.mpo { margin: 0 0 20px; }
.mpo-band { background: var(--navy); color: #fff; padding: 22px 24px 20px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 32px; align-items: end; }
.mpo-k { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #c9d6e3; }
.mpo-big b { display: block; font-size: 60px; line-height: 1; font-weight: 500; letter-spacing: -.02em; margin: 8px 0 6px; }
.mpo-sub { font-size: var(--fs-sm); color: #dfe7f0; }
.mpo-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mpo-fact b { display: block; font-size: 32px; line-height: 1; font-weight: 500; margin-bottom: 6px; }
.mpo-fact span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #dfe7f0; }
.mpo-sw { display: inline-block; width: 10px; height: 10px; flex: 0 0 auto; }
.mpo-sw.ok, .mpo-dist .ok { background: #4f8fd6; }
.mpo-sw.mid, .mpo-dist .mid { background: #e0961a; }
.mpo-sw.low, .mpo-dist .low { background: #d9463f; }
.mpo-dist { grid-column: 1 / -1; display: flex; height: 10px; background: #2c4a66; }
.mpo-dist span { display: block; height: 100%; }
.mpo-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.mpo-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mpo-reg { text-align: left; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; font: inherit; color: var(--ink); }
.mpo-reg:hover { border-color: var(--navy); }
.mpo-reg.is-on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.mpo-reg:focus-visible { outline: 3px solid #D4AF37; outline-offset: 1px; }
.mpo-reg-h { display: flex; justify-content: space-between; gap: 8px; font-weight: 500; }
.mpo-reg-h em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12px; }
.mpo-reg-n { font-size: 30px; line-height: 1; font-weight: 500; color: var(--navy); }
.mpo-reg .mpc-track { height: 6px; min-width: 0; }
.mpo-reg-f { font-size: 12.5px; color: var(--muted); }
.mpo-gaps { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 14px 16px; }
.mpo-gaps h3 { font-size: 15px; font-weight: 500; margin: 0 0 12px; }
.mpo-gaps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mpo-gaps li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 28px; gap: 10px; align-items: center; font-size: 13px; }
.mpo-gap-bar { display: block; height: 6px; background: var(--line); }
.mpo-gap-bar span { display: block; height: 100%; background: var(--navy); }
.mpo-gaps li b { text-align: right; font-weight: 500; }
.mpo-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
@media (max-width: 1100px) { .mpo-cols { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .mpo-band { grid-template-columns: 1fr; } .mpo-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .mpo-regions { grid-template-columns: 1fr; } .mpo-big b { font-size: 48px; } }
/* Completion bars: under 60% amber, under 40% red (15 Oct 2026). */
.mpc-fill.is-mid { background: #d98a0b; }
.mpc-fill.is-low { background: #c8332c; }
/* Missions: a region card opens its missions directly beneath (one layer). */
.mpo-search { margin: 16px 0 0; }
.mpo-reg-go { font-size: 12.5px; font-weight: 500; color: var(--navy); }
.mpo-reg.is-on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: none; }
.mpo-reg.is-on .mpo-reg-h em, .mpo-reg.is-on .mpo-reg-f { color: #c9d6e3; }
.mpo-reg.is-on .mpo-reg-n, .mpo-reg.is-on .mpo-reg-go { color: #fff; }
.mpo-reg.is-on .mpc-track { background: #2c4a66; }
.mpo-panel { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy); margin-top: 16px; padding: 16px 18px 18px; scroll-margin-top: 80px; }
.mpo-panel-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.mpo-panel-h b { font-size: 18px; font-weight: 500; color: var(--navy); }
.mpo-panel-h span { font-size: 13px; color: var(--muted); }
.mpo-panel-x { margin-left: auto; border: 1px solid var(--line); background: #fff; width: 32px; height: 32px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--navy); }
.mpo-panel-x:hover { border-color: var(--navy); }

/* Library: the selected stream card (the cards are the filter, 15 Oct 2026). */
.td-pc.is-on { background: var(--navy); border-top-color: var(--navy); }
.td-pc.is-on b, .td-pc.is-on > span:last-child { color: #fff; }
.td-pc.is-on .td-pc-ic { background: #fff; color: var(--navy); }
.lh-count-in { color: var(--ink); font-weight: 500; }
.lh-link { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }

/* My development: the growth path chooser; the Library: what you need (15 Oct 2026). */
.gr-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.gr-path-l { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.gr-pathb { font: inherit; font-size: var(--fs-sm); padding: 8px 14px; border: 1px solid var(--navy); background: #fff; color: var(--navy); cursor: pointer; }
.gr-pathb.is-on { background: var(--navy); color: #fff; }
.gr-pathb:focus-visible { outline: 3px solid #D4AF37; outline-offset: 1px; }
.td-chip.is-path { border-color: var(--navy); }
.lh-for { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--navy); color: #fff; padding: 12px 16px; margin: 0 0 12px; }
.lh-for b { font-weight: 500; }
.lh-for span { color: #dfe7f0; font-size: var(--fs-sm); }
.lh-for .btn { margin-left: auto; border-color: #fff; color: #fff; }
.lh-for.is-unset { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--navy); }
.lh-for.is-unset span { color: var(--muted); }
.lh-for.is-unset .btn { border-color: var(--navy); color: var(--navy); }

/* My development as a journey: five numbered steps in the order the questions come (15 Oct 2026). */
.jr { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
.jr-step { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--navy); scroll-margin-top: 80px; }
.jr-step.is-flash { animation: jr-flash .9s ease-out; }
@keyframes jr-flash { from { box-shadow: 0 0 0 3px #D4AF37; } to { box-shadow: none; } }
.jr-hd { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px 0; }
.jr-n { width: 34px; height: 34px; flex: none; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 500; font-size: 16px; }
.jr-hd h2 { margin: 0; font-size: 18px; font-weight: 500; }
.jr-hd p { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.jr-body { padding: 14px 18px 18px; }
.jr-h3 { margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--navy); letter-spacing: .02em; }
.jr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; }
.jr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 0 0 12px; }
.jr-fact dt { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.jr-fact dd { margin: 0; font-size: 15px; color: var(--ink); }
.jr-note { margin: 12px 0 0; padding: 10px 12px; background: var(--card); border-left: 4px solid var(--navy); font-size: var(--fs-sm); color: var(--ink); }
.jr-more { margin-top: 12px; }
.jr-more > summary { cursor: pointer; color: var(--brand); font-size: var(--fs-sm); }
.jr-next { display: grid; gap: 8px; }
.jr-nx { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--brand); }
.jr-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.jr-nums div { border-top: 3px solid var(--navy); padding: 10px 0 0; }
.jr-nums b { display: block; font-size: 28px; line-height: 1; font-weight: 500; color: var(--ink); }
.jr-nums span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) { .jr-two, .jr-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .jr-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .jr-two, .jr-facts { grid-template-columns: 1fr; } }

/* My development: say it in your own words, the AI maps it (15 Oct 2026). */
.gr-ai { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.gr-ai textarea { width: 100%; resize: vertical; margin-top: 6px; }
.gr-ai-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.gr-ai-row .gr-small { margin: 0; }
.gr-ai-wait, .gr-ai-err { margin: 12px 0 0; font-size: var(--fs-sm); }
.gr-ai-err { color: var(--st-red); }
.gr-ai-res { margin-top: 14px; border: 1px solid var(--line); border-left: 4px solid var(--navy); padding: 12px 14px; display: grid; gap: 12px; }
.gr-ai-k { margin: 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.gr-ai-sec { display: grid; gap: 6px; }
.gr-ai-sec > b { font-weight: 500; color: var(--navy); }
.gr-ai-sec > span { font-size: var(--fs-sm); color: var(--ink); }
.gr-ai-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.gr-ai-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gr-ai-list li > b { font-weight: 500; }

/* The mapping button stays on one line beside its note. */
#gr-ai-go { white-space: nowrap; flex: none; }

/* The Staff directory: the person library's forms (15 Oct 2026). */
.pe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.pe-check { display: flex; align-items: center; gap: 8px; align-self: end; }
.pe-actions { display: flex; gap: 8px; margin-top: 16px; }
.pv-head { display: inline-flex; align-items: center; gap: 6px; }
.sv-head img.person-av { width: 64px; height: 64px; }
/* The Staff directory, step 1b (0095): places in rank order, titles as drop-downs. */
.pp-table tr.grp th { background: var(--navy); color: #fff; font-weight: 500; text-align: left; padding: 8px 12px; font-size: var(--fs-meta); }
.pp-table tr.grp th span { opacity: .75; margin-left: 6px; }
.ad-st.navy { background: var(--navy); color: #fff; }
.tsel { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 100%; }
.tsel > select { max-width: 100%; }
.tsel > input[hidden] { display: none; }
.fld .tsel, .fld .tsel > select, .fld .tsel > input { width: 100%; }
.mp-tbl .tsel { display: grid; gap: 4px; }
.mp-tbl .tsel > select { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.pv-li { word-break: break-all; }
/* The directory's search and pickers stay in view while the list scrolls (user, 15 Oct 2026). */
.filterbar.pp-sticky { position: sticky; top: -22px; z-index: 5; } /* flush with the top: #view has 22px of padding */
/* The Mission page editor at phone width (QA, 15 Oct 2026): sections may shrink,
   tables scroll inside their wrapper, the page never scrolls sideways. */
.mp-sec, .mp-sec-b, .mp-fld, .mp-grid2 > * { min-width: 0; }
.mp-tblwrap { overflow-x: auto; max-width: 100%; }
@media (max-width: 680px) { .mp-savebar { padding: 8px 12px; } .mp-sec-b { overflow-x: auto; } }