/* ==========================================================================
   components.css — Fresh Networking component + utility library
   --------------------------------------------------------------------------
   Owner: P00-2-design-system. Hand-authored, no Tailwind/SCSS. Every colour
   references a token from tokens.css — there are intentionally ZERO hex
   literals in this file (AC1). The only non-token colour primitives used are
   rgba(38,33,48,…) shadow tints (documented neutral exception) and the white
   surface, which is reached via var(--surface). Motion uses var(--motion) and
   is disabled under prefers-reduced-motion at the foot of this file (AC5).
   ========================================================================== */

/* ── Reset / base ─────────────────────────────────────────────────────────*/
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--fw-black); line-height: var(--lh-tight); margin: 0; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, white);
  outline-offset: 2px;
  border-radius: 6px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Shell layout ─────────────────────────────────────────────────────────*/
main#outlet { flex: 1; width: 100%; max-width: var(--shell-max); margin: 0 auto; padding: var(--sp-7) var(--sp-6); }
.view-head { margin-bottom: var(--sp-6); }
.eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 var(--sp-1); }
.view-head h1 { margin: 0 0 var(--sp-2); font-size: clamp(26px, 4vw, 34px); }
.lede { color: var(--muted); max-width: 62ch; font-size: var(--fs-base); line-height: var(--lh-body); margin: 0; }
.section { margin-bottom: var(--sp-7); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.section-head h2, .section-head h3 { font-size: var(--fs-lg); }
.stack > * + * { margin-top: var(--sp-4); }

/* ── Top nav ──────────────────────────────────────────────────────────────*/
.topbar { position: sticky; top: 0; z-index: var(--z-nav); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.topnav { display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-6); height: 60px; max-width: var(--shell-max); margin: 0 auto; }
.brand { font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-xl); letter-spacing: -.5px; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-2); }
.brand-logo { height: 32px; width: auto; display: block; }
.brand .roleword { color: var(--accent-ink); font-weight: var(--fw-bold); text-transform: lowercase; font-size: var(--fs-md); }
.brand-bar { height: 26px; width: 4px; border-radius: 4px; background: var(--accent); }
.primary-nav { display: flex; gap: var(--sp-6); margin-left: var(--sp-2); flex: 1; }
.primary-nav a { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: 18px 0; border-bottom: 2px solid transparent; }
.primary-nav a:hover { text-decoration: none; }
.primary-nav a.active, .primary-nav a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.user-menu { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.user-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
/* Hamburger is mobile-only. `.topnav .nav-toggle` (0,2,0) beats the `.iconbtn`
   (0,1,0) display so the desktop base truly hides it (P00-9 — the bare `.nav-toggle`
   rule below was being overridden by .iconbtn's grid display). */
.nav-toggle { display: none; }
.topnav .nav-toggle { display: none; }

/* Overflow "More ▾" menu (P00-9) — a small primary set stays inline; the rest
   fold into this dropdown so the top bar never overflows the shell width. */
.nav-more { position: relative; display: inline-flex; align-items: center; }
.nav-more__toggle { background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: 18px 0; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.nav-more__toggle:hover, .nav-more__toggle.active, .nav-more.open .nav-more__toggle { color: var(--accent-ink); border-bottom-color: var(--accent); }
.nav-more__toggle svg { width: 12px; height: 12px; transition: transform var(--motion); }
.nav-more.open .nav-more__toggle svg { transform: rotate(180deg); }
.nav-more__menu { display: none; position: absolute; top: 100%; right: 0; min-width: 190px; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; z-index: 60; }
.nav-more.open .nav-more__menu { display: flex; }
.nav-more__menu a { padding: 10px 12px; border-radius: 8px; border-bottom: 0; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.nav-more__menu a:hover, .nav-more__menu a.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); text-decoration: none; }

/* ── Avatars (CSS initials) ───────────────────────────────────────────────*/
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: var(--fw-black); font-size: var(--fs-sm); font-family: var(--font-head); flex-shrink: 0; }
.avatar--sm { width: 26px; height: 26px; font-size: var(--fs-xs); }
.avatar--lg { width: 52px; height: 52px; font-size: var(--fs-md); }
.avatar--green { background: var(--fresh-green); color: var(--ink); }
.avatar--purple { background: var(--fresh-purple); color: var(--surface); }
.avatar--navy { background: var(--fresh-navy); color: var(--surface); }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { box-shadow: 0 0 0 2px var(--surface); margin-left: -8px; }
.avatar-group .avatar:first-child { margin-left: 0; }
/* Seed-based mock photo (P00-8) — an <img class="avatar__img"> overlays the
   initials and self-removes on error (lib/avatarUrl.photoImg), so avatars show
   real faces when the photo loads and the initials fallback when it doesn't. */
.avatar, .content-card__avatar { position: relative; overflow: hidden; }
.avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ── Buttons ──────────────────────────────────────────────────────────────*/
.btn {
  cursor: pointer; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  padding: 9px 16px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 7px;
  transition: transform var(--motion), background var(--motion), border-color var(--motion), box-shadow var(--motion);
  text-decoration: none; line-height: 1;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn-primary:hover { background: var(--accent-d); }
.btn-secondary { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.btn-secondary:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent-ink); }
.btn-ghost:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.btn-danger { background: var(--rag-red-ink); color: var(--surface); border-color: transparent; }
.btn-danger:hover { background: color-mix(in srgb, var(--rag-red-ink) 88%, black); }

.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); }
.btn-lg { padding: 12px 22px; font-size: var(--fs-base); }
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn-icon { padding: 9px; width: 38px; height: 38px; justify-content: center; }

/* icon-only chrome button */
.iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: none; background: transparent; color: var(--muted); border-radius: 10px; cursor: pointer; transition: background var(--motion), color var(--motion); }
.iconbtn:hover { background: var(--bg); color: var(--accent-ink); }
.iconbtn svg { width: 20px; height: 20px; }

/* P04-1.1: 44px phone-first tap-target floor for the base interactive primitives
   (coarse pointers only — desktop density/mouse layouts unchanged). Lifts the
   frozen P00-2 primitives (~32px .btn, 38px icon buttons) to the WCAG/phone-first
   minimum touch target so every consuming phase inherits it for free. 44px is the
   standard a11y touch dimension, not an ad-hoc brand value. */
@media (pointer: coarse) {
  .btn, .btn-sm, .btn-lg { min-height: 44px; }
  .iconbtn, .btn-icon { min-width: 44px; min-height: 44px; }
}

/* ── Cards ────────────────────────────────────────────────────────────────*/
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-5); }
.card--accent { border-top: 4px solid var(--accent); }
.card--hover { transition: transform var(--motion), box-shadow var(--motion); cursor: pointer; }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-kicker { font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.card-title { font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-lg); margin: var(--sp-1) 0 6px; }
.card-meta { font-size: var(--fs-sm); color: var(--accent-ink); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.card-body { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); margin: 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); }
/* card() builder utilities (P00-3): link-wrapped card + post-thumb body pad. */
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link:hover { text-decoration: none; }
.card-thumb-body { padding-top: 14px; }

/* coloured card thumb (LMS-style header) — recoloured to brand palette */
.card-thumb { height: 132px; border-radius: var(--radius) var(--radius) 0 0; display: grid; place-items: center; font-size: 36px; color: var(--surface); background: linear-gradient(135deg, var(--accent), var(--accent-d)); }
.card-thumb--green { background: linear-gradient(135deg, var(--fresh-green), var(--fresh-green-d)); }
.card-thumb--pink { background: linear-gradient(135deg, var(--fresh-pink), var(--fresh-pink-d)); }
.card-thumb--navy { background: linear-gradient(135deg, var(--fresh-navy), var(--fresh-navy-d)); }
.card-thumb--yellow { background: linear-gradient(135deg, var(--fresh-yellow), var(--fresh-orange)); color: var(--ink); }

/* ── Stat tiles / KPI cards ───────────────────────────────────────────────*/
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-5); }
.stat-tile__label { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-1); }
.stat-tile__value { font-size: var(--fs-3xl); font-weight: var(--fw-black); font-family: var(--font-head); color: var(--accent-ink); line-height: 1; }
.stat-tile__change { font-size: var(--fs-xs); font-weight: var(--fw-bold); margin-top: var(--sp-2); display: inline-flex; align-items: center; gap: 4px; }
.stat-tile__change.up { color: var(--rag-green-ink); }
.stat-tile__change.down { color: var(--rag-red-ink); }
.stat-tile--accent { border-top: 4px solid var(--accent); }

/* ── Badges, chips, status / RAG pills ────────────────────────────────────*/
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .03em; padding: 3px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-ink); }
.badge--solid { background: var(--accent); color: var(--on-accent); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: 5px 12px; border-radius: var(--radius-pill); background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.chip--accent { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.chip__remove { cursor: pointer; opacity: .6; font-weight: var(--fw-black); }
.chip__remove:hover { opacity: 1; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-black); }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill.is-green { background: color-mix(in srgb, var(--rag-green) 18%, var(--surface)); color: var(--rag-green-ink); }
.status-pill.is-amber { background: color-mix(in srgb, var(--rag-amber) 22%, var(--surface)); color: var(--rag-amber-ink); }
.status-pill.is-red   { background: color-mix(in srgb, var(--rag-red) 16%, var(--surface)); color: var(--rag-red-ink); }
.status-pill.is-neutral { background: var(--bg); color: var(--muted); }

/* ── Tabs ─────────────────────────────────────────────────────────────────*/
.tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.tab { background: none; border: none; cursor: pointer; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--muted); padding: 10px 2px; border-bottom: 2px solid transparent; transition: color var(--motion), border-color var(--motion); }
.tab:hover { color: var(--accent-ink); }
.tab.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tab-panel[hidden] { display: none; }

/* ── Tables ───────────────────────────────────────────────────────────────*/
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-6); }
.table-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); }
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--accent-ink); }
.table th.sortable .sort-ico { width: 12px; height: 12px; vertical-align: middle; margin-left: 4px; opacity: .5; }
.table th[aria-sort="ascending"] .sort-ico, .table th[aria-sort="descending"] .sort-ico { opacity: 1; color: var(--accent-ink); }
.table th[aria-sort="descending"] .sort-ico { transform: rotate(180deg); }
/* table() builder (P00-3): the sort control is a real <button> inside the <th>
   so the native columnheader role + aria-sort stay intact; it inherits the
   header's type styling and carries no button chrome. */
.table th.sortable .sort-btn { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; }
.table th.sortable .sort-btn:hover { color: var(--accent-ink); }
.table .cell--empty { text-align: center; color: var(--muted); }
.table td { padding: 11px 12px; font-size: var(--fs-sm); border-bottom: 1px solid var(--surface-2); }
.table tbody tr:nth-child(even) { background: var(--surface-2); }
.table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Responsive: stack rows into label/value cards on small screens (AC6) */
@media (max-width: 768px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); padding: var(--sp-2); background: var(--surface); }
  .table tbody tr:nth-child(even) { background: var(--surface); }
  .table td { border: none; display: flex; justify-content: space-between; gap: var(--sp-4); padding: 7px 8px; text-align: right; }
  .table td::before { content: attr(data-label); font-weight: var(--fw-bold); color: var(--muted); text-align: left; }
  .table .num { text-align: right; }
}

/* ── Forms ────────────────────────────────────────────────────────────────*/
.field { display: block; margin-bottom: var(--sp-4); }
.field > label, .field__label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: 6px; }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-base); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 13px; transition: border-color var(--motion), box-shadow var(--motion);
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, var(--surface)); }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.field__hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; }
.field__error { font-size: var(--fs-xs); color: var(--rag-red-ink); font-weight: var(--fw-bold); margin-top: 5px; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--rag-red-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rag-red) 22%, var(--surface)); }
.field.is-valid .input, .field.is-valid .select, .field.is-valid .textarea { border-color: var(--rag-green-ink); }
.fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-4); }
.fieldset > legend { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-sm); padding: 0 6px; color: var(--accent-ink); }

/* Switch / toggle */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { width: 42px; height: 24px; border-radius: var(--radius-pill); background: var(--line); position: relative; transition: background var(--motion); flex-shrink: 0; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transition: transform var(--motion); }
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 3px solid color-mix(in srgb, var(--accent) 55%, white); outline-offset: 2px; }

/* ── Progress bars ────────────────────────────────────────────────────────*/
.progress { height: 8px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--motion); }
.progress__fill.is-green { background: var(--rag-green); }
.progress__fill.is-amber { background: var(--rag-amber); }
.progress-meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; }

/* ── Breadcrumbs ──────────────────────────────────────────────────────────*/
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-4); }
.breadcrumbs a { color: var(--muted); font-weight: var(--fw-bold); }
.breadcrumbs a:hover { color: var(--accent-ink); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: var(--fw-bold); }
.breadcrumbs .sep { opacity: .5; }

/* ── Empty states ─────────────────────────────────────────────────────────*/
.empty { text-align: center; padding: var(--sp-8) var(--sp-5); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty__emoji { font-size: 42px; margin-bottom: var(--sp-2); }
.empty__title { font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-lg); margin-bottom: 6px; }
.empty__body { color: var(--muted); max-width: 44ch; margin: 0 auto var(--sp-4); line-height: var(--lh-body); }

/* ── Skeleton loaders ─────────────────────────────────────────────────────*/
.skeleton { background: linear-gradient(90deg, var(--line) 25%, var(--surface-2) 37%, var(--line) 63%); background-size: 400% 100%; border-radius: var(--radius-sm); animation: skeleton-shimmer 1.4s ease infinite; }
.skeleton--text { height: 12px; margin-bottom: 8px; }
.skeleton--title { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton--block { height: 96px; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── Modals (styling + focus-trap-READY markup; open/close JS = P00-3) ─────*/
.modal-overlay { position: fixed; inset: 0; background: rgba(38,33,48,.5); display: grid; place-items: center; padding: var(--sp-5); z-index: var(--z-modal); }
.modal-overlay[hidden] { display: none; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--line); }
.modal__title { font-size: var(--fs-lg); }
.modal__close { border: none; background: transparent; cursor: pointer; color: var(--muted); border-radius: 8px; width: 34px; height: 34px; display: grid; place-items: center; }
.modal__close:hover { background: var(--bg); color: var(--ink); }
.modal__close svg { width: 18px; height: 18px; }
.modal__body { padding: var(--sp-5); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-5); }

/* ── Toasts (styling + stack region; behaviour = P00-3) ───────────────────*/
.toast-region { position: fixed; right: var(--sp-5); bottom: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); z-index: var(--z-toast); max-width: min(360px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: var(--fs-sm); }
.toast__title { font-weight: var(--fw-black); font-family: var(--font-head); }
.toast__body { color: var(--muted); }
.toast--success { border-left-color: var(--rag-green); }
.toast--success .toast__title { color: var(--rag-green-ink); }
.toast--info { border-left-color: var(--fresh-navy); }
.toast--info .toast__title { color: var(--fresh-navy); }
.toast--warn { border-left-color: var(--rag-amber); }
.toast--warn .toast__title { color: var(--rag-amber-ink); }
.toast--error { border-left-color: var(--rag-red); }
.toast--error .toast__title { color: var(--rag-red-ink); }
/* toast.show({ action }) optional inline action button (P00-3). */
.toast__action { margin-top: 8px; }

/* ── Role sidebar chrome (leader/area/admin/superadmin surfaces) ──────────*/
.sidebar { width: 240px; background: var(--fresh-navy); color: var(--surface); padding: var(--sp-5) 0; border-radius: var(--radius); }
.sidebar__brand { padding: 0 var(--sp-5) var(--sp-5); font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--surface); border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: var(--sp-4); }
.sidebar__brand span { color: var(--accent); }
.sidebar__brand small { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.6); font-weight: var(--fw-regular); margin-top: 3px; }
.sidebar__section { padding: var(--sp-4) var(--sp-5) 6px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.45); }
.sidebar__nav a { display: flex; align-items: center; gap: 10px; padding: 10px var(--sp-5); color: rgba(255,255,255,.78); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: background var(--motion), color var(--motion); }
.sidebar__nav a:hover { color: var(--surface); background: rgba(255,255,255,.06); text-decoration: none; }
.sidebar__nav a.active { color: var(--surface); background: color-mix(in srgb, var(--accent) 28%, transparent); border-right: 3px solid var(--accent); }

/* ── Sync status card (mirrors the LMS ops card, recoloured) ──────────────*/
.sync-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-5); }
.sync-status { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-bottom: 6px; }
.sync-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rag-green); }
.sync-detail { font-size: var(--fs-sm); color: var(--muted); }

/* ── Demo toolbar ─────────────────────────────────────────────────────────*/
.demobar { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); border-bottom: 1px solid var(--line); }
.demobar-inner { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: 10px var(--sp-6); max-width: var(--shell-max); margin: 0 auto; }
.demobar-sync { margin-left: auto; }
/* Collapsible demo chrome (P00 — preview the "real" look). */
.demobar.is-hidden { display: none; }
.demobar-hide { flex-shrink: 0; }
.demobar-reopen { display: none; position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-toast, 200); align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); box-shadow: var(--shadow); cursor: pointer; }
.demobar-reopen.is-shown { display: inline-flex; }
.demobar-reopen:hover, .demobar-reopen:focus-visible { border-color: var(--accent); color: var(--accent-ink); outline: none; }
.demo-tag { font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.toolbar-switcher { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.switcher-label { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-bold); }
.demo-actions { display: flex; gap: 8px; }

/* ── Guard / 404 states (migrated from the P00-1 inline shell) ────────────*/
.guard-state { display: grid; place-items: center; padding: var(--sp-8) 0; }
.guard-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--sp-8); max-width: 520px; text-align: center; }
.guard-emoji { font-size: 44px; margin-bottom: var(--sp-2); }
.guard-card h1 { margin: 0 0 10px; font-size: var(--fs-2xl); }
.guard-card p { color: var(--muted); line-height: var(--lh-body); margin: 0 0 var(--sp-5); }
.guard-card code { background: var(--bg); padding: 2px 6px; border-radius: 6px; font-size: var(--fs-sm); }
.guard-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ───────────────────────────────────────────────────────────────*/
footer.site-footer { border-top: 1px solid var(--line); padding: var(--sp-5) var(--sp-6); text-align: center; color: var(--muted); font-size: var(--fs-sm); }

/* ── Stub toast (honest no-op feedback for shell buttons) ─────────────────*/
#stub-toast { position: fixed; left: 50%; bottom: var(--sp-6); transform: translate(-50%, 20px); background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: var(--radius-pill); font-size: var(--fs-base); font-weight: var(--fw-medium); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--motion), transform var(--motion); z-index: var(--z-toast); }
#stub-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Component-gallery helpers (living docs only) ─────────────────────────*/
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
.swatch { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.swatch__chip { height: 56px; }
.swatch__meta { padding: 8px 10px; font-size: var(--fs-xs); }
.swatch__name { font-weight: var(--fw-bold); }
.swatch__hex { color: var(--muted); font-family: ui-monospace, monospace; }
.demo-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.gallery-block { margin-bottom: var(--sp-8); }
.gallery-block > h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.gallery-note { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); max-width: 70ch; }

/* ── Responsive shell (≤768px) ────────────────────────────────────────────*/
@media (max-width: 768px) {
  .topnav { padding: 0 var(--sp-4); gap: 10px; }
  .primary-nav { display: none; }
  .primary-nav.open { display: flex; flex-direction: column; gap: 0; position: absolute; top: 60px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 6px var(--sp-4); }
  .primary-nav.open a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle, .topnav .nav-toggle { display: inline-grid; }
  /* In the mobile drawer, flatten the "More" overflow so every link shows as a
     normal drawer row (no nested dropdown) and hide the More button. */
  .nav-more, .nav-more__menu { display: contents; }
  .nav-more__toggle { display: none; }
  .nav-more__menu a { padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--muted); font-weight: var(--fw-bold); }
  .user-name { display: none; }
  .demobar-inner { padding: 10px var(--sp-4); }
  main#outlet { padding: var(--sp-5) var(--sp-4); }
  .card-grid, .stat-grid { grid-template-columns: 1fr; }
  .sidebar { width: 100%; }
}

/* ══ Persona switcher (P00-4) ═════════════════════════════════════════════
 * Disclosure button + role-grouped listbox (heroes, then a "More people" group
 * for the secondary cast — all real options in the roving order). Token-only,
 * builds on the frozen P00-2 classes (.avatar/.btn/.status-pill).
 */
.switcher { position: relative; display: inline-flex; }
.switcher-trigger {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 5px 10px 5px 6px; border-radius: var(--radius-pill);
  font-family: inherit; transition: border-color var(--motion), box-shadow var(--motion), transform var(--motion);
}
.switcher-trigger:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.switcher-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.switcher-trigger__label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.switcher-trigger__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.switcher-trigger__role { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-medium); }
.switcher-trigger__chev { width: 15px; height: 15px; color: var(--muted); transition: transform var(--motion); }
.switcher-trigger[aria-expanded="true"] .switcher-trigger__chev { transform: rotate(90deg); }

.switcher-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-dropdown);
  width: 320px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.switcher-pop[hidden] { display: none; }
.switcher-menu { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; outline: none; }
.switcher-menu:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, var(--surface)); border-radius: var(--radius-sm); }
.switcher-group { padding: 4px 0; }
.switcher-group + .switcher-group { border-top: 1px solid var(--line); }
.switcher-group__label {
  font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 6px 10px 4px;
}
.switcher-opt {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--motion);
}
.switcher-opt:hover { background: var(--bg); }
.switcher-opt.is-active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.switcher-opt[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.switcher-opt[aria-selected="true"] .switcher-opt__name::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: 6px; vertical-align: -0.05em; background-color: var(--accent-ink); -webkit-mask: var(--fa-check) center / contain no-repeat; mask: var(--fa-check) center / contain no-repeat; }
.switcher-opt__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.switcher-opt__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.switcher-opt__meta { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switcher-opt__flag { flex-shrink: 0; }
/* The secondary-cast group gets a touch more separation from the heroes. */
.switcher-group--more { margin-top: 2px; }
.switcher-group--more .switcher-group__label { color: var(--accent-ink); }

/* Current-persona readout in the toolbar. */
.persona-readout { margin: 0; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.persona-readout strong { color: var(--ink); }

/* ══ Guided-tour coach-marks (P00-4) ══════════════════════════════════════*/
.coach-scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 38%, transparent); z-index: var(--z-overlay); }
.coachmark {
  position: absolute; z-index: var(--z-modal); width: 360px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: var(--sp-5); outline: none;
}
.coachmark--centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 460px; }
.coachmark__phase { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.coachmark__phase--live { color: var(--accent-ink); }
.coachmark__title { margin: 0 0 8px; font-size: var(--fs-lg); font-family: var(--font-head); }
.coachmark__degrade { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-radius: var(--radius-sm); padding: 8px 10px; }
.coachmark__copy { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--ink); line-height: var(--lh-body); }
.coachmark__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.coachmark__steps { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); }
.coachmark__nav { display: flex; gap: 6px; }
.coach-spotlight { position: relative; z-index: var(--z-modal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-lg); border-radius: var(--radius-sm); scroll-margin: 120px; }

/* ── Toolbar responsive collapse (≤768px) — controls stay reachable ───────*/
@media (max-width: 768px) {
  .demobar-inner { gap: var(--sp-3); padding: 8px var(--sp-4); }
  .persona-readout { display: none; }
  .switcher-label { display: none; }
  .demo-actions .btn .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .demo-actions .btn { padding: 9px; }
  .switcher-pop { width: min(320px, calc(100vw - 24px)); }
  .coachmark { width: calc(100vw - 24px); }
  .coachmark--centered { width: calc(100vw - 24px); }
}

/* ── Footer credit ("Built by Devinium", P00-5) ───────────────────────────*/
.footer-credit { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }
.footer-credit__logo { height: 34px; width: auto; display: block; margin-right: var(--sp-2); }
.footer-credit__tag { color: var(--muted); }
.footer-credit__sep { color: var(--line); }
.footer-credit__link { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: var(--accent-ink); font-weight: var(--fw-bold); border-radius: var(--radius-sm); }
.footer-credit__link:hover { text-decoration: underline; }
.footer-credit__link:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; }

/* ── Login screen + role quick-pick (P00-5) ───────────────────────────────*/
.login-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; max-width: var(--shell-max); margin: 0 auto; padding-block: var(--sp-6); }
.login-hero { max-width: 460px; }
.login-brand { display: inline-flex; align-items: center; font-size: var(--fs-2xl); margin-bottom: var(--sp-5); }
.login-title { font-size: var(--fs-3xl); font-family: var(--font-head); margin: 0 0 var(--sp-3); line-height: var(--lh-tight); }
.login-lede { color: var(--muted); font-size: var(--fs-md); line-height: var(--lh-body); margin: 0 0 var(--sp-6); }
.login-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-6); display: grid; gap: var(--sp-4); }
.login-sim-note { display: flex; gap: var(--sp-2); align-items: flex-start; margin: 0; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ink); background: color-mix(in srgb, var(--fresh-yellow) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--fresh-yellow) 38%, var(--line)); border-radius: var(--radius-sm); padding: 10px 12px; }
.login-sim-note__dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--fresh-yellow); }
.login-submit { width: 100%; justify-content: center; }
.login-form__hint { margin: 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; }

.login-quickpick { display: grid; gap: var(--sp-4); align-content: start; }
.quickpick-head h2 { font-size: var(--fs-xl); margin: 0 0 6px; }
.quickpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.quickpick-card { cursor: pointer; display: flex; flex-direction: column; gap: var(--sp-3); }
.quickpick-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.quickpick__person { display: flex; align-items: center; gap: var(--sp-3); }
.quickpick__text { display: flex; flex-direction: column; min-width: 0; }
.quickpick__name { font-weight: var(--fw-bold); font-size: var(--fs-md); }
.quickpick__role { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent-ink); }
.quickpick__hub { font-size: var(--fs-sm); color: var(--muted); }
.quickpick__cta { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent-ink); margin-top: auto; }

@media (max-width: 860px) {
  .login-view { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ── Sync conflict queue (P01-4) ───────────────────────────────────────────*/
.conflict-queue { display: flex; flex-direction: column; gap: var(--sp-4); }
.conflict-queue__head { display: flex; align-items: center; gap: var(--sp-3); }
.conflict-queue__list { display: flex; flex-direction: column; gap: var(--sp-4); }
.conflict-queue__clear { margin: 0; }

.conflict-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.conflict-card__head {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-4) var(--sp-5); background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.conflict-card.is-collapsed .conflict-card__head { border-bottom-color: transparent; }
.conflict-card__head:hover { background: var(--surface-2); }
.conflict-card__head:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -3px; }
.conflict-card__chevron { color: var(--muted); font-size: var(--fs-sm); transition: transform var(--motion); }
.conflict-card.is-collapsed .conflict-card__chevron { transform: rotate(-90deg); }
.conflict-card__title { font-weight: var(--fw-black); font-size: var(--fs-md); }
.conflict-card__field {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  padding: 2px 9px; border-radius: var(--radius-pill);
}
.conflict-card__tag {
  margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-black);
  color: var(--rag-amber-ink);
  background: color-mix(in srgb, var(--rag-amber) 20%, var(--surface));
  padding: 2px 10px; border-radius: var(--radius-pill);
}
.conflict-card__body[hidden] { display: none; }
.conflict-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }

.conflict-diff { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: var(--sp-3); }
.conflict-diff__side {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); background: var(--surface-2);
}
.conflict-diff__side--local { border-left: 3px solid var(--fresh-orange); }
.conflict-diff__side--zoho { border-left: 3px solid var(--fresh-navy); }
.conflict-diff__label { font-size: var(--fs-xs); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.conflict-diff__value { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); margin: var(--sp-1) 0; word-break: break-word; }
.conflict-diff__when { font-size: var(--fs-xs); color: var(--muted); }
.conflict-diff__vs { display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--muted); text-transform: uppercase; }

.conflict-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.conflict-merge {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-2);
  padding-top: var(--sp-3); border-top: 1px dashed var(--line);
}
.conflict-merge[hidden] { display: none; }
.conflict-merge__label { font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--muted); width: 100%; }
.conflict-merge__input {
  flex: 1 1 200px; padding: 8px 12px; font: inherit; font-size: var(--fs-sm);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
}
.conflict-merge__input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 1px; border-color: var(--accent); }

@media (max-width: 560px) {
  .conflict-diff { grid-template-columns: 1fr; }
  .conflict-diff__vs { padding: var(--sp-1) 0; }
}

/* ── Integration grid (P01-5) ─────────────────────────────────────────────*/
/* The "it all connects" surface: toggleable simulated integrations. Token-only
   styling (no raw brand hex — avatar tints come through inline var(--fresh-*)
   tokens set by the component). The card spinner mirrors the sync-status one. */
.integration-panel { display: block; }
.integration-panel__head { margin: 0 0 var(--sp-1); }
.integration-panel__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--ink); }
.integration-panel__caption {
  margin: 0 0 var(--sp-4); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--muted); display: flex; align-items: center; gap: 6px;
}
.integration-panel__caption::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rag-amber); flex-shrink: 0; }

.integration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-4); }

.integration-card {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: border-color var(--motion), box-shadow var(--motion);
}
.integration-card.is-syncing { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.integration-card.is-paused { background: var(--surface-2); }
.integration-card.is-paused .integration-card__avatar { filter: grayscale(1); opacity: .55; }

.integration-card__top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.integration-card__avatar {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-sm);
  letter-spacing: .02em; flex-shrink: 0;
}
.integration-card__id { flex: 1 1 auto; min-width: 0; }
.integration-card__name { font-weight: var(--fw-black); font-size: var(--fs-base); color: var(--ink); }
.integration-card__kind { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-bold); }
.integration-card__status { align-self: flex-start; white-space: nowrap; }
.integration-card__status.is-syncing { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-ink); }
.integration-card__status.is-syncing::before { display: none; }

.integration-card__blurb { margin: 0; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }

.integration-card__stats { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-bold); }
.integration-card__count strong { color: var(--ink); }
.integration-card__note { color: var(--rag-amber-ink); }

.integration-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); }

.integration-card__spinner {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block; vertical-align: -1px;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor;
  animation: integ-spin 720ms linear infinite;
}
@keyframes integ-spin { to { transform: rotate(360deg); } }

.integration-card__demo { margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); opacity: .85; }

/* the enable toggle (a real checkbox dressed as a switch) */
.integration-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); }
.integration-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.integration-toggle__track { width: 34px; height: 19px; border-radius: var(--radius-pill); background: var(--line); position: relative; transition: background var(--motion); flex-shrink: 0; }
.integration-toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transition: transform var(--motion); }
.integration-toggle input:checked + .integration-toggle__track { background: var(--rag-green); }
.integration-toggle input:checked + .integration-toggle__track::after { transform: translateX(15px); }
.integration-toggle input:focus-visible + .integration-toggle__track { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   Ops / sync-health dashboard (P01-6) — Super-Admin beat 7. Token-only; the
   "calm, mostly-green, one amber item" look. Reuses .stat-grid/.stat-tile.
   ══════════════════════════════════════════════════════════════════════════ */
.ops-dashboard { display: flex; flex-direction: column; gap: var(--sp-7); }

.ops-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 0; }
.ops-head__strip {
  display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill);
  box-shadow: var(--shadow); flex-shrink: 0;
}

/* health-tinted tiles — green by default (ok), amber (warn), red (alert) */
.ops-tiles .stat-tile { border-top: 4px solid var(--rag-green); }
.ops-tiles .stat-tile.ops-ok .stat-tile__value { color: var(--rag-green-ink); }
.ops-tiles .stat-tile.ops-warn { border-top-color: var(--rag-amber); }
.ops-tiles .stat-tile.ops-warn .stat-tile__value { color: var(--rag-amber-ink); }
.ops-tiles .stat-tile.ops-alert { border-top-color: var(--rag-red); }
.ops-tiles .stat-tile.ops-alert .stat-tile__value { color: var(--rag-red-ink); }

/* records-flowing visual */
.ops-flow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-5); }
.ops-flow__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ops-flow__head h2 { margin: 0; font-size: var(--fs-md); }
.ops-flow__viz { display: block; }
.ops-spark { display: flex; flex-direction: column; gap: var(--sp-2); }
.ops-spark__svg { width: 100%; height: auto; max-height: 132px; display: block; }
.ops-spark__base { stroke: var(--line); stroke-width: 0.75; }
.ops-spark__bar { transform-box: fill-box; transform-origin: bottom; }
.ops-spark__bar--pull { fill: var(--rag-green); }
.ops-spark__bar--push { fill: var(--accent); }
.ops-spark__bar.is-new { animation: ops-bar-rise 480ms cubic-bezier(.2,.7,.2,1); }
@keyframes ops-bar-rise { from { transform: scaleY(0); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }
.ops-spark__empty { margin: var(--sp-4) 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.ops-spark__legend { display: flex; gap: var(--sp-4); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); }
.ops-spark__key { display: inline-flex; align-items: center; gap: 6px; }
.ops-spark__key::before { content: ""; width: 9px; height: 9px; border-radius: 2px; }
.ops-spark__key--pull::before { background: var(--rag-green); }
.ops-spark__key--push::before { background: var(--accent); }

/* embedded-component sections */
.ops-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.ops-section__title { margin: 0; font-size: var(--fs-md); }
.ops-section__hint { margin: 0; color: var(--muted); font-size: var(--fs-sm); max-width: 62ch; line-height: var(--lh-body); }

/* "you own it" contingency panel */
.ops-contingency {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-6); align-items: center;
  background: color-mix(in srgb, var(--rag-green) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--rag-green) 28%, var(--line));
  border-radius: var(--radius-lg); padding: var(--sp-7); box-shadow: var(--shadow);
}
.ops-contingency__copy h2 { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-xl); }
.ops-contingency__list { list-style: none; margin: var(--sp-4) 0 var(--sp-5); padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ops-contingency__list li { position: relative; padding-left: var(--sp-6); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-soft); }
.ops-contingency__list li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: .95em; height: .95em;
  background-color: var(--rag-green-ink);
  -webkit-mask: var(--fa-check) center / contain no-repeat; mask: var(--fa-check) center / contain no-repeat;
}
.ops-contingency__list strong { color: var(--ink); }
.ops-contingency__diagram { display: flex; justify-content: center; }

/* SoR ↔ Zoho-mirror diagram (inline SVG, tokens only) */
.ops-diagram { width: 100%; max-width: 360px; height: auto; }
.ops-diagram__box { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.ops-diagram__box--sor { fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); stroke: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ops-diagram__box--mirror { fill: color-mix(in srgb, var(--fresh-navy) 8%, var(--surface)); stroke: color-mix(in srgb, var(--fresh-navy) 30%, var(--line)); }
.ops-diagram__title { fill: var(--ink); font-family: var(--font-head); font-weight: var(--fw-black); font-size: 15px; }
.ops-diagram__sub { fill: var(--muted); font-size: 9px; font-weight: var(--fw-bold); }
.ops-diagram__arrow { stroke: var(--rag-green); stroke-width: 2; }
.ops-diagram__head { fill: var(--rag-green); }
.ops-diagram__flow { fill: var(--rag-green-ink); font-size: 9px; font-weight: var(--fw-black); letter-spacing: .04em; text-transform: uppercase; }
.ops-diagram__flow--muted { fill: var(--muted); text-transform: none; letter-spacing: 0; font-weight: var(--fw-bold); }

@media (max-width: 768px) {
  .ops-contingency { grid-template-columns: 1fr; }
  .ops-head { flex-direction: column; }
}

/* ── Reduced motion (AC5) ─────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .skeleton { animation: none; background: var(--line); }
  .integration-card__spinner { animation: none; }
}

/* ── P02-1 member dashboard (#/member/dashboard) ───────────────────────────
   Additive LAYOUT-ONLY tweaks for Raj's gamified home. No frozen-class
   redefinitions, tokens only, no raw hex. Tap targets ≥44px (AC8). */
.view-member-dashboard .dash-hero {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
}
.view-member-dashboard .dash-hero__body { flex: 1 1 220px; min-width: 0; }
.view-member-dashboard .crown-amount { color: var(--accent-ink); font-size: var(--fs-2xl); }
.view-member-dashboard .dash-nudge { display: flex; gap: var(--sp-3); align-items: flex-start; }
.view-member-dashboard .dash-cta { min-height: 44px; }
/* 44px tap targets on the leader dashboard (Nudge + deep-link buttons inherit the
   ~32px .btn-sm height otherwise). Mirrors the member-dashboard .dash-cta pattern. */
.view-leader-dashboard .btn { min-height: 44px; }
.view-member-dashboard .stat-tile { transition: transform var(--motion), box-shadow var(--motion); }
.view-member-dashboard .stat-tile[role="link"]:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.view-member-dashboard .dash-feed { list-style: none; margin: 0; padding: 0; }
.view-member-dashboard .dash-feed li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.view-member-dashboard .dash-feed li:last-child { border-bottom: none; }
.view-member-dashboard .dash-feed__icon { font-size: 20px; line-height: 1.3; }

@media (max-width: 768px) {
  .view-member-dashboard .dash-hero { flex-direction: column; align-items: flex-start; }
  .view-member-dashboard .dash-hero__body { width: 100%; }
}

/* ── P04-1 · Members Directory v2 + canonical member profile ──────────────────
   Tokens only (member accent = --accent → orange; avatar tints come through the
   seeded var(--fresh-*) token on the element). No raw brand hex. Reuses the
   frozen P00-2 .card/.chip/.badge/.btn/.avatar/.empty primitives. */

/* filter bar */
.directory-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin-bottom: var(--sp-4); }
.directory-search { flex: 1 1 280px; min-width: 220px; }
.directory-search__label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: 6px; }
.directory-facets { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.directory-facet { position: relative; }
.directory-facet__summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink);
  white-space: nowrap;
}
.directory-facet__summary::-webkit-details-marker { display: none; }
.directory-facet__summary::after { content: ""; width: .7em; height: .7em; background-color: var(--muted); -webkit-mask: var(--fa-chevron-down) center / contain no-repeat; mask: var(--fa-chevron-down) center / contain no-repeat; }
.directory-facet[open] .directory-facet__summary { border-color: var(--accent); }
.directory-facet.is-active .directory-facet__summary {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--surface));
}
.directory-facet__menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  min-width: 220px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: var(--sp-2); display: grid; gap: 2px;
}
.directory-facet__opt {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer;
}
.directory-facet__opt:hover { background: var(--bg); }
.directory-facet__opt input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }

/* active-filter pills */
.directory-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.directory-pills:empty { margin-bottom: 0; }
.directory-pill { gap: 8px; }
.directory-clear { margin-left: 4px; }

.directory-count { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); margin: 0 0 var(--sp-4); }

/* result grid */
.directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-4); }

/* ── P04-2 semantic search: ranked hits + "why this matched" captions ────────
   A hit is a card + a small reason caption; the best match carries a subtle
   accent ring + a "Best match" tag. Near-misses sit under a full-width divider
   so a smart query never dead-ends. Token-only colours (no raw hex). */
.directory-hit { display: flex; flex-direction: column; gap: 6px; }
.directory-hit .member-card { flex: 1 1 auto; }
.directory-hit--best .member-card__inner {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow);
}
.directory-hit--top .member-card__inner {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow);
}
.directory-hit__tag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .03em;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink);
}
.directory-hit__spark { color: var(--accent); }
.directory-hit__why {
  margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: var(--lh-body);
  color: var(--accent-ink);
}
.directory-hit:not(.directory-hit--best) .directory-hit__why { color: var(--muted); font-weight: var(--fw-medium); }

.directory-divider {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-2) 0; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.directory-divider::before, .directory-divider::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}

/* low/no-confidence suggestions (AC5) — closest categories, never a blank */
.directory-suggest {
  grid-column: 1 / -1; background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: var(--sp-6) var(--sp-5); text-align: center;
}
.directory-suggest__head {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  margin: 0 0 var(--sp-4); color: var(--ink); font-weight: var(--fw-bold);
}
.directory-suggest__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.directory-suggest__chip { cursor: pointer; min-height: 44px; }
.directory-suggest__chip:hover { border-color: var(--accent); color: var(--accent-ink); }

/* member CARD (memberProfile mode:'card') */
.member-card { display: block; }
.member-card__inner { height: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.member-card__head { display: flex; align-items: center; gap: var(--sp-3); }
.member-card__id { min-width: 0; }
.member-card__name { font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-base); color: var(--ink); line-height: 1.2; }
.member-card__biz { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.member-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.member-card__hub { font-size: var(--fs-sm); color: var(--muted); }

/* member PROFILE (memberProfile mode:'public') */
.member-profile { max-width: 760px; }
.member-profile__header {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); border-radius: var(--radius); margin-bottom: var(--sp-4);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--surface));
}
.member-profile__avatar.avatar--lg { width: 64px; height: 64px; font-size: var(--fs-lg); }
.member-profile__ident { min-width: 0; }
.member-profile__name { margin: 0; font-size: clamp(22px, 3vw, 28px); }
.member-profile__biz { margin: 2px 0 var(--sp-2); color: var(--muted); font-weight: var(--fw-bold); }
.member-profile__chipline { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.member-profile__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.member-profile__bio { margin-bottom: var(--sp-5); color: var(--ink); line-height: var(--lh-body); }
.member-profile__bio p { margin: 0 0 var(--sp-2); max-width: 62ch; }

.member-profile__details {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--sp-5);
}
.member-profile__detail { display: flex; gap: var(--sp-3); background: var(--surface); padding: 11px var(--sp-4); }
.member-profile__detail-k { flex: 0 0 110px; color: var(--muted); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.member-profile__detail-v { color: var(--ink); font-weight: var(--fw-bold); font-size: var(--fs-sm); }

.member-profile__services { margin-bottom: var(--sp-5); }
.member-profile__services h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.member-profile__services ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2); }
.member-profile__services li {
  position: relative; padding: 8px 12px 8px 30px; background: var(--bg);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--ink);
}
.member-profile__services li::before {
  content: ""; position: absolute; left: 11px; top: .7em; width: .9em; height: .9em;
  background-color: var(--accent-ink);
  -webkit-mask: var(--fa-check) center / contain no-repeat; mask: var(--fa-check) center / contain no-repeat;
}

.member-profile__actions-head { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.member-profile__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.member-profile__action { gap: 6px; }

/* ── AC8 · phone-first ≥44px tap targets for the directory's OWN controls ────
   Scoped to .view-directory / the profile action row + back link so the frozen
   P00-2 base .btn rule is untouched (the systemic ~32px .btn height is tracked
   as a separate design-system sprout). Token-only sizing, no raw hex. */
.directory-facet__summary { min-height: 44px; }
.directory-facet__opt { min-height: 44px; }
.directory-clear { min-height: 44px; }
.directory-back { min-height: 44px; }
.member-profile__action { min-height: 44px; }
/* the active-filter pill-remove × — a comfortable 44px square hit area with a
   centered glyph (scoped to directory pills, not the global .chip__remove). */
.directory-pill { padding-right: 4px; }
.directory-pill .chip__remove {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: -7px -4px; padding: 0;
  font-size: var(--fs-md); line-height: 1;
}

.member-profile__editbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--surface)); border-radius: var(--radius-sm);
}
.member-profile__editbar p { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }

.directory-back { margin-bottom: var(--sp-4); }

@media (max-width: 640px) {
  .member-profile__header { flex-direction: column; align-items: flex-start; text-align: left; }
  .member-profile__detail-k { flex-basis: 90px; }
}

/* ── P02-2 · member self-edit (self-edit branch of memberProfile) ─────────────
   Tokens only (member accent = --accent → orange). Reuses the frozen P00-2
   .field/.input/.select/.textarea/.chip/.badge/.btn primitives; no raw hex. */

.member-profile-self { max-width: 760px; }

/* edit bar (view mode) — affordances + live pending-sync pill */
.member-profile__editbar-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.member-profile__editbar .btn { min-height: 44px; }

/* pending-sync pill — honest, reads the real outbox count */
.sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
}
.sync-pill--pending {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--surface));
}

/* the edit form */
.member-edit { max-width: 760px; }
.member-edit__head { margin-bottom: var(--sp-4); }
.member-edit__title { margin: 0; font-size: clamp(20px, 3vw, 26px); }
.member-edit__sub { margin: 4px 0 0; color: var(--muted); }

.member-edit__section {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-4); margin: 0 0 var(--sp-4); min-width: 0;
}
.member-edit__legend {
  padding: 0 var(--sp-2); font-family: var(--font-head);
  font-weight: var(--fw-black); font-size: var(--fs-sm);
  color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.04em;
}
.member-edit__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3) var(--sp-4); }
.member-edit__grid > .field,
.member-edit__grid > .svc-editor,
.member-edit__grid > .photo-stub,
.member-edit__grid > .subroles-ro { grid-column: 1 / -1; }
/* keep paired short inputs side-by-side on wider screens */
.member-edit__grid > .field { grid-column: auto; }

.member-edit__foot { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-3); }
.member-edit__foot .btn { min-height: 44px; }

/* services tags editor */
.svc-editor__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.svc-editor__empty { color: var(--muted); font-size: var(--fs-sm); }
.svc-editor__tag { gap: 6px; }
.svc-editor__rm {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0; margin: -11px -10px -11px 0;
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: var(--fs-md); line-height: 1; border-radius: var(--radius-pill);
}
.svc-editor__rm:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.svc-editor__add { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: stretch; }
.svc-editor__add .input { flex: 1 1 200px; min-width: 160px; }
.svc-editor__add .btn { min-height: 44px; }

/* photo stub (simulated preview · no real upload) */
.photo-stub__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.photo-stub__preview {
  width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%;
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
}
.photo-stub__preview--img { color: transparent; }
.photo-stub__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.photo-stub__btn { position: relative; overflow: hidden; min-height: 44px; cursor: pointer; }
.photo-stub__file {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.photo-stub__tag {
  background: var(--bg); color: var(--muted); border: 1px dashed var(--line);
  text-transform: none; letter-spacing: 0;
}
.photo-stub .field__hint { flex-basis: 100%; margin-top: 0; }

/* read-only sub-role badges */
.subroles-ro__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.subroles-ro__none { color: var(--muted); font-size: var(--fs-sm); }
.subroles-ro__note { margin: 0 0 var(--sp-2); }
.subroles-ro__why { min-height: 44px; }

/* change-of-business sub-form (modal) */
.cob-intro { margin: 0 0 var(--sp-4); color: var(--muted); }
.cob-status { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cob-status:empty { margin-top: 0; }
.cob-status__msg { margin: 0; flex-basis: 100%; color: var(--ink); font-size: var(--fs-sm); }

@media (max-width: 640px) {
  .member-edit__grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Member scorecard (P02-3) — the 9 RAG leadership metrics, phone-first.
 * RAG pills + cards reuse the frozen .status-pill / .card classes; colour comes
 * only from --rag-* / --accent tokens (constitution §5 — no ad-hoc hex).
 * ────────────────────────────────────────────────────────────────────────── */
.scorecard-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-5); }

/* segmented period toggle — ≥44px tap targets (constitution §10 AA / phone-first) */
.period-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px; box-shadow: var(--shadow); gap: 2px; }
.period-toggle__btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--radius-pill);
  font-family: var(--font-head); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--muted); transition: background var(--motion), color var(--motion);
}
.period-toggle__btn:hover { color: var(--accent-ink); }
.period-toggle__btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* gamified callout row (live streak + personal best) */
.scorecard-callout { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.scorecard-callout:empty { display: none; }

/* stacked section heads (title + blurb) */
.section-head--stack { display: block; }
.section-head--stack h2 { margin: 0 0 var(--sp-1); }
.section-head--stack .card-meta { margin: 0; }

/* the metric grid + cards */
.scorecard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.metric-card { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.metric-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.metric-card__label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.metric-card__value { font-family: var(--font-head); line-height: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1); }
.metric-card__num { font-size: var(--fs-3xl); font-weight: var(--fw-black); color: var(--accent-ink); }
.metric-card__target { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); }
.metric-card__sub { font-size: var(--fs-xs); color: var(--muted); }
/* inverse-metric marker — NEUTRAL, deliberately not a RAG colour, so a green
 * Absences card never reads as amber. */
.metric-card--inverse { border-top: 3px solid var(--line); }
.metric-card__inverse-tag {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 1px 7px; white-space: nowrap;
}

/* hand-rolled sparkline — colour by RAG via currentColor (no hex). UNIFORM
 * scaling (height:auto keeps the 100x20 viewBox aspect) so the end dot stays a
 * true circle, not a stretched ellipse. */
.spark { display: block; width: 100%; height: auto; margin-top: var(--sp-2); color: var(--accent-ink); overflow: visible; }
.spark--green { color: var(--rag-green-ink); }
.spark--amber { color: var(--rag-amber-ink); }
.spark--red { color: var(--rag-red-ink); }
.spark--neutral { color: var(--muted); }
.spark__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark__area { fill: currentColor; opacity: .12; stroke: none; }
.spark__dot { fill: currentColor; }

/* hand-rolled conversion funnel — base sizing (a view may cap max-width). */
.funnel-chart { display: block; width: 100%; max-width: 24rem; height: auto; margin: var(--sp-2) auto 0; overflow: visible; }

/* RAG legend */
.rag-legend { margin-top: var(--sp-2); }
.rag-legend__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.rag-legend__item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink); }
.rag-legend__item .status-pill { flex-shrink: 0; }

@media (max-width: 768px) {
  .scorecard-grid, .scorecard-callout { grid-template-columns: 1fr; }
  .scorecard-toolbar { justify-content: stretch; }
  .period-toggle { width: 100%; justify-content: space-between; }
  .period-toggle__btn { flex: 1; }
}

/* ── Membership & Crown Rewards (#/member/membership, P02-4) ───────────────
   Read-side surface: membership status + renewal, Crown balance/draws/pending,
   invoices/receipts. Tokens only (no raw hex); controls clear the 44px tap bar. */
.membership-grid { align-items: start; }

/* "simulated" / "synced" honesty tag wherever money is shown (§6/§12). */
.sim-tag {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .03em;
  text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--bg); color: var(--muted); white-space: nowrap;
}

/* Membership status card */
.membership-status__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.membership-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-4); margin: var(--sp-4) 0 0; }
.membership-facts dt { font-size: var(--fs-sm); color: var(--muted); }
.membership-facts dd { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); margin: 0; text-align: right; }
.membership-intent {
  margin: var(--sp-4) 0 0; padding: var(--sp-3); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--rag-amber) 14%, var(--surface));
  font-size: var(--fs-sm); color: var(--ink); line-height: var(--lh-body);
}

/* Renew modal sheet */
.renew-sheet__toggle { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); cursor: pointer; }
.renew-sheet__toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.renew-sheet__due { margin: var(--sp-3) 0 0; font-size: var(--fs-md); color: var(--ink); }

/* Crown Rewards panel */
.crown-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.crown-amount { color: var(--accent-ink); font-size: var(--fs-2xl); }
.crown-pending {
  margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--fresh-pink) 12%, var(--surface));
  color: var(--ink); font-size: var(--fs-sm); line-height: var(--lh-body);
  border: 1px dashed color-mix(in srgb, var(--fresh-pink) 40%, var(--surface));
}
.crown-draws { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.crown-draw { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.crown-draw > div { display: flex; flex-direction: column; }
.crown-draw__season { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.crown-draw__sub { font-size: var(--fs-xs); color: var(--muted); }
.crown-draw__count {
  flex-shrink: 0; font-size: var(--fs-xs); font-weight: var(--fw-black);
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-ink);
}
.crown-ledger { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.crown-ledger li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.crown-ledger__amt { flex-shrink: 0; font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--rag-green-ink); }
.crown-ledger__amt.is-pending { color: var(--muted); }

/* Crown Rewards full surface (#/member/crown) */
.crown-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.crown-balance-card .card-meta { margin-top: var(--sp-1); }
.crown-amount--pop { animation: crown-amount-pop 640ms cubic-bezier(.2,.7,.3,1.2); }
@keyframes crown-amount-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.crown-prize { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--ink); line-height: var(--lh-body); }
.crown-entry-count {
  margin-top: var(--sp-3); display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--accent-ink); font-weight: var(--fw-bold);
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.crown-entry-count strong { font-weight: var(--fw-black); }
.crown-past-draw { margin-top: var(--sp-3); color: var(--muted); }
.crown-ledger--full { gap: 0; }
.crown-ledger__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--line);
}
.crown-ledger__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crown-ledger__what { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .crown-amount--pop { animation: none; } }

/* Invoices / receipts */
.invoice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.invoice-row {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center;
  gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line);
}
.invoice-row:first-child { border-top: 0; }
.invoice-row__main { display: flex; flex-direction: column; min-width: 0; }
.invoice-row__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.invoice-row__sub { font-size: var(--fs-xs); color: var(--muted); }
.invoice-row__amt { font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--ink); }
.invoice-row .btn { min-height: 44px; }

/* Receipt + renew controls clear the 44px tap target this phase adds. */
.view-member-membership .demo-row .btn { min-height: 44px; }

/* Year-Wrap renewal moment hook */
.wrap-cta { border-top: 4px solid var(--accent); }

/* Receipt sheet */
.receipt-sheet__banner {
  margin: 0 0 var(--sp-4); padding: var(--sp-3); border-radius: var(--radius-sm);
  background: var(--bg); font-size: var(--fs-sm); color: var(--ink); line-height: var(--lh-body);
}

@media (max-width: 768px) {
  .membership-grid { grid-template-columns: 1fr; }
  .invoice-row { grid-template-columns: 1fr auto; row-gap: var(--sp-2); }
  .invoice-row__amt { text-align: right; }
  .invoice-row .status-pill { justify-self: start; }
  .invoice-row .btn { justify-self: end; }
}

/* ── Notifications inbox (P02-6) — built on the frozen .card/.btn/.status-pill/
   .empty primitives; member-orange accent comes from --accent (no raw hex). ── */

/* Nav bell unread badge — additive overlay on the existing 38px #btn-notifications. */
#btn-notifications { position: relative; }
.bell-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; display: inline-grid; place-items: center;
  font-size: 10px; font-weight: var(--fw-black); line-height: 1;
  border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 0 2px var(--surface);
}
.bell-badge[hidden] { display: none; }

.notif-bar { margin-bottom: var(--sp-4); }
.notif-bar h2 { font-size: var(--fs-lg); }
.notif-bar .btn { min-height: 44px; }

.notif-caughtup {
  margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--rag-green) 14%, var(--surface));
  color: var(--rag-green-ink); font-size: var(--fs-sm); font-weight: var(--fw-bold);
}

.notif-group { margin-bottom: var(--sp-6); }
.notif-group__head {
  font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-3);
}

.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.notif {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.notif.is-unread { border-left: 4px solid var(--accent); }
.notif.is-read { background: var(--surface-2); }
.notif.is-snoozed { opacity: .72; }

.notif__icon {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 20px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.notif__main { min-width: 0; }
.notif__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.notif__title { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); }
.notif.is-read .notif__title { font-weight: var(--fw-medium); color: var(--ink-soft); }
.notif__dot {
  /* --accent-ink is the AA-on-white accent (≥3:1 non-text bar, C3); the plain
     --accent fill was ~2:1. Unread is also signalled by the 4px border + bold
     title, so this is belt-and-braces, not colour-only. */
  display: inline-block; width: 8px; height: 8px; margin-right: 7px;
  border-radius: 50%; background: var(--accent-ink); vertical-align: middle;
}
.notif__time { flex-shrink: 0; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.notif__body { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }

.notif__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.notif-pill { font-size: var(--fs-xs); }

.notif__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.notif__actions .btn { min-height: 44px; }

@media (max-width: 768px) {
  .notif__head { flex-wrap: wrap; }
  .notif__actions .btn { flex: 1 1 auto; }
}

/* ── Notifications: two-tap reply (P10-2) — reaction row + voice-note sim +
   snoozed tray. Built on the frozen tokens/primitives; accent from --accent. ── */
.notif__reply { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }

.notif__reactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.react-btn {
  min-width: 44px; min-height: 44px; display: inline-grid; place-items: center;
  padding: 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.react-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.react-btn:active { transform: scale(.92); }
.react-btn.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: var(--accent); color: var(--accent-ink);
}
.react-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.voice-btn {
  min-height: 44px; display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-soft); cursor: pointer; touch-action: none;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.voice-btn:hover { border-color: var(--accent); }
.voice-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.voice-btn.is-recording {
  border-color: var(--rag-red); color: var(--rag-red-ink);
  background: color-mix(in srgb, var(--rag-red) 12%, var(--surface));
}
.voice-btn.is-recording .voice-btn__mic { animation: voice-pulse 1s ease-in-out infinite; }
@keyframes voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.voice-chip { display: inline-flex; align-items: center; gap: var(--sp-2); }
.voice-chip__wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.voice-chip__wave > span {
  width: 2px; min-height: 3px; border-radius: 1px; background: currentColor;
  display: inline-block; align-self: center;
}
.voice-chip__dur { white-space: nowrap; }

.notif-group--snoozed .notif-group__head { color: var(--muted); }

/* ── Push-sim banner (P10-2) — a transient top-of-shell "notification arrived"
   banner, DISTINCT from the bottom-right toast region. Slides in from the top;
   reduced-motion just fades/appears (guarded at the foot of this rule). ── */
.pushsim-region {
  position: fixed; top: var(--sp-3); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast); width: min(420px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none;
}
.pushsim {
  pointer-events: auto; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .18));
  padding: var(--sp-3) var(--sp-4);
  opacity: 0; transform: translateY(-14px); transition: opacity .22s ease, transform .22s ease;
}
.pushsim.is-in { opacity: 1; transform: translateY(0); }
.pushsim__chrome {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-2);
}
.pushsim__badge {
  width: 18px; height: 18px; display: inline-grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent);
}
.pushsim__app { font-weight: var(--fw-black); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.pushsim__now { margin-left: auto; }
.pushsim__row { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.pushsim__icon {
  width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px;
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.pushsim__main { min-width: 0; display: grid; gap: 2px; }
.pushsim__title { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.pushsim__body { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); }
.pushsim__actions { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.pushsim__actions .btn { min-height: 36px; }
.pushsim__close { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .pushsim { transition: none; transform: none; }
  .pushsim.is-in { transform: none; }
  .voice-btn.is-recording .voice-btn__mic { animation: none; }
  .react-btn { transition: none; }
  .react-btn:active { transform: none; }
}

/* ── Guest funnel (P03-1) — public hub page + 60-sec register + confirm. Builds
   on the frozen P00-2 primitives (.card/.chip/.field/.btn/.avatar/.empty); the
   PINK guest accent comes entirely from body[data-role="guest"] --accent (no raw
   hex here). Phone-first, ≥44px tap targets, AA contrast. ──────────────────── */

/* Public hub landing page */
.guest-hub { padding-bottom: 96px; } /* room for the sticky CTA bar */
.guest-hub__hero { padding: var(--sp-6); border-radius: var(--radius); background: var(--surface); }
.guest-hub__facts { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.guest-hub__facts li { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.guest-hub__fact-k { font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); min-width: 56px; }
.guest-hub__fact-v { color: var(--ink); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.guest-hub__grid { margin-top: var(--sp-6); }
.guest-hub__speaker { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.guest-hub__speaker-name { margin: 0; font-size: var(--fs-sm); }
.guest-hub__blurb { font-style: italic; margin-top: var(--sp-3); }
.guest-hub__team-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.guest-hub__team-member { display: flex; align-items: center; gap: var(--sp-3); }
.guest-hub__team-name { display: block; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.guest-hub__team-role { display: block; font-size: var(--fs-xs); color: var(--muted); }
.guest-hub__expect { margin-top: var(--sp-7); }

/* Sticky "Be our guest" CTA */
.guest-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav, 50); background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.guest-stickybar__inner { max-width: 980px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); }
.guest-stickybar__copy { display: flex; flex-direction: column; line-height: 1.3; }
.guest-stickybar__copy strong { font-size: var(--fs-sm); }
.guest-stickybar__copy span { font-size: var(--fs-xs); color: var(--muted); }
.guest-stickybar .btn { min-height: 44px; white-space: nowrap; }

/* Registration form */
.guest-register__form { display: block; }
.guest-register__meeting { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); margin-bottom: var(--sp-5); }
.guest-register__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--sp-5); }
.guest-register__chips { border: none; padding: 0; margin: var(--sp-2) 0 var(--sp-4); }
.chip-check-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-check { cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check .chip { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.chip-check input:checked + .chip { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink); border-color: var(--accent); }
.chip-check input:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 2px; }
.guest-register__inviter { position: relative; }
.guest-register__results { list-style: none; margin: var(--sp-1) 0 0; padding: var(--sp-1); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-lg); position: absolute; left: 0; right: 0; z-index: 5; }
.guest-register__result { display: flex; flex-direction: column; width: 100%; text-align: left; background: transparent; border: none; border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); min-height: 44px; cursor: pointer; }
.guest-register__result:hover, .guest-register__result:focus-visible { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.guest-register__result span { font-size: var(--fs-xs); color: var(--muted); }
.guest-register__chosen { margin-top: var(--sp-2); }
.guest-register__consent { margin: var(--sp-4) 0 var(--sp-2); }
.guest-register__actions { margin-top: var(--sp-5); }
.guest-register__actions .btn { min-height: 48px; }
.guest-register__fineprint { text-align: center; margin-top: var(--sp-3); }

/* Confirmation + intro strip */
.guest-confirm__hero { padding: var(--sp-6); border-radius: var(--radius); background: var(--surface); }
.guest-confirm__grid { margin-top: var(--sp-6); }
.guest-confirm__quote { font-style: italic; color: var(--ink); }
.guest-confirm__when .btn { min-height: 44px; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.guest-confirm__intro-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.guest-confirm__intro-name { margin: 0; font-weight: var(--fw-black); font-family: var(--font-head); }
.guest-confirm__intro .btn { min-height: 44px; }
.guest-confirm__next { margin-top: var(--sp-6); }

/* ── 24-Hour Hot Hand-Off (P03-2) — the morning-after card stack. Builds on the
   frozen primitives (.card/.chip/.status-pill/.textarea/.btn/.demo-tag); pink
   guest accent via body[data-role="guest"] --accent (no raw hex). ──────────── */
.guest-handoff__head { position: relative; }
.guest-handoff__back { margin-top: var(--sp-3); align-self: flex-start; }
.handoff__count { margin: 0 0 var(--sp-4); }
.handoff__stack { display: grid; gap: var(--sp-5); }

.handoff-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.handoff-card.is-actioned { opacity: .92; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.handoff-card__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.handoff-card__who { flex: 1 1 160px; min-width: 0; }
.handoff-card__name { margin: 0; font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-md); }
.handoff-card__tag { flex: 0 0 auto; }
.handoff-card__tag-glyph { font-size: var(--fs-sm); line-height: 1; }
.handoff-card__recap { display: flex; flex-direction: column; gap: var(--sp-2); }
.handoff-card__quote { margin: 0; font-style: italic; color: var(--ink); }
.handoff-card__action { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-left: 3px solid var(--accent); }
.handoff-card__action-text { margin: 2px 0 0; font-weight: var(--fw-bold); color: var(--ink); }
.handoff-card__sim { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.handoff-card__drafts { display: grid; gap: var(--sp-4); }
.handoff-draft { display: flex; flex-direction: column; gap: var(--sp-2); }
.handoff-draft__label { font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.handoff-draft__subject { font-weight: var(--fw-bold); }
.handoff-draft__body { white-space: pre-wrap; resize: vertical; min-height: 64px; }
.handoff-draft__body[readonly], .handoff-draft__subject[readonly] { background: var(--bg); color: var(--ink); cursor: default; }
.handoff-draft.is-editing .handoff-draft__body, .handoff-draft.is-editing .handoff-draft__subject { background: var(--surface); outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 1px; }
.handoff-card__controls { gap: var(--sp-2); flex-wrap: wrap; }
.handoff-card__controls .btn { min-height: 44px; }
.handoff-card__nodraft { margin: 0; color: var(--muted); }
.handoff-card__result { display: flex; gap: var(--sp-2); align-items: baseline; font-size: var(--fs-sm); color: var(--ink); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--rag-green) 12%, var(--surface)); }
.handoff-card__apply { margin-top: var(--sp-3); min-height: 44px; }

/* ── Membership application (P03-3, apply leg) — built on the frozen P00-2
   .card/.field/.chip/.btn primitives; pink guest accent (no raw hex). ──────── */
.guest-apply__form { display: block; }
.guest-apply__prefill { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); margin-bottom: var(--sp-5); }
.guest-apply__ack { margin: var(--sp-4) 0 var(--sp-2); min-height: 44px; align-items: center; }
.guest-apply__form .select { min-height: 44px; }
.guest-apply__actions { margin-top: var(--sp-5); }
.guest-apply__actions .btn { min-height: 48px; }
.guest-apply__fineprint { text-align: center; margin-top: var(--sp-3); color: var(--muted); }

/* ── AI interview brief (P03-3) — interviewer 1-pager; print-friendly. ─────── */
.guest-brief__head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.guest-brief__sim { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.guest-brief__card { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.guest-brief__who { display: flex; align-items: center; gap: var(--sp-3); }
.guest-brief__name { margin: 0; font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-md); }
.guest-brief__quote { font-style: italic; color: var(--ink); }
.guest-brief__subkicker { margin-top: var(--sp-2); }
.guest-brief__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; }
.guest-brief__facts dt { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); }
.guest-brief__facts dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); }
.guest-brief__matches, .guest-brief__thread { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.guest-brief__matches li, .guest-brief__thread li { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--bg); }
.guest-brief__verdict { align-self: flex-start; }
.guest-brief__funnel { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; counter-reset: none; }
.guest-brief__funnel-step { font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 4px 11px; border-radius: var(--radius-pill); background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.guest-brief__funnel-step.is-done { background: color-mix(in srgb, var(--rag-green) 14%, var(--surface)); color: var(--rag-green-ink); border-color: transparent; }
.guest-brief__funnel-step.is-current { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink); border-color: var(--accent); }
.guest-brief__questions { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.guest-brief__questions li { color: var(--ink); line-height: var(--lh-body); }
.guest-brief__audition { margin-top: var(--sp-5); }
.guest-brief__audition-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.guest-brief__notes .textarea { white-space: pre-wrap; resize: vertical; min-height: 64px; }
.guest-brief__audition-controls { gap: var(--sp-2); flex-wrap: wrap; }
.guest-brief__audition-controls .btn { min-height: 44px; }
.guest-brief__result { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); }
.guest-brief__result.is-recommended { background: color-mix(in srgb, var(--rag-green) 12%, var(--surface)); }
.guest-brief__result.is-declined { background: color-mix(in srgb, var(--rag-red) 10%, var(--surface)); }
.guest-brief__result .btn { align-self: flex-start; min-height: 44px; }
.guest-brief__printnote { margin: var(--sp-5) 0 0; font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--sp-3); }

@media (max-width: 768px) {
  .guest-stickybar__inner { padding: var(--sp-3) var(--sp-4); }
  .guest-register__grid { grid-template-columns: 1fr; }
  .handoff-card__head { align-items: flex-start; }
  .handoff-card__controls .btn { flex: 1 1 auto; }
  .guest-brief__audition-controls .btn { flex: 1 1 auto; }
}

@media print {
  /* The brief prints as a clean 1-pager — drop the app chrome + interactive bits. */
  .no-print, .demobar, .topbar, .site-footer, .toast-region, .guest-stickybar { display: none !important; }
  body { background: var(--surface); }
  .guest-brief__card { break-inside: avoid; border: 1px solid var(--line); box-shadow: none; }
  .view-head { margin-bottom: var(--sp-4); }
  /* Handover pack (P05-5): keep each section card whole across page breaks. */
  .handover-pack .card { break-inside: avoid; }
}

/* ── One-Tap Welcome Engine (P03-4) — cascade checklist + welcome screen ─────
   Member green shell (the guest→member moment). Built on the frozen
   .card/.status-pill/.btn/.demo-tag primitives; colour comes from the role
   --accent + RAG tokens (no raw hex). Icons are FA (lib/icon.js). ─────────── */
.welcome { max-width: 720px; }
.welcome__sim { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.welcome__panel { margin-top: var(--sp-5); }
.welcome__progress { margin-bottom: var(--sp-4); }

.welcome__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.welcome-step { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color var(--motion), background var(--motion); }
.welcome-step.is-done { border-color: color-mix(in srgb, var(--rag-green) 45%, var(--line)); background: color-mix(in srgb, var(--rag-green) 7%, var(--surface)); }
.welcome-step.is-running { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.welcome-step.is-retrying { border-color: color-mix(in srgb, var(--rag-amber) 55%, var(--line)); background: color-mix(in srgb, var(--rag-amber) 8%, var(--surface)); }

.welcome-step__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.welcome-step__icon.is-pending { background: var(--bg); color: var(--muted); }
.welcome-step__icon.is-running { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink); }
.welcome-step__icon.is-retrying { background: color-mix(in srgb, var(--rag-amber) 20%, var(--surface)); color: var(--rag-amber-ink); }
.welcome-step__icon.is-done { background: color-mix(in srgb, var(--rag-green) 20%, var(--surface)); color: var(--rag-green-ink); }
.welcome-step__icon.is-spin svg { animation: integ-spin 900ms linear infinite; }

.welcome-step__body { flex: 1 1 auto; min-width: 0; }
.welcome-step__label { margin: 0; font-weight: var(--fw-bold); color: var(--ink); display: flex; align-items: center; gap: 6px; }
.welcome-step__glyph { color: var(--accent-ink); flex-shrink: 0; }
.welcome-step__detail { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.welcome-step__detail.is-retry { color: var(--rag-amber-ink); font-weight: var(--fw-medium); }
.welcome-step__owner { display: inline-block; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-medium); }

.welcome__done { margin-top: var(--sp-5); border-color: color-mix(in srgb, var(--rag-green) 40%, var(--line)); }
.welcome__done-title { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); display: flex; align-items: center; gap: 8px; }
.welcome__done-glyph { color: var(--rag-green-ink); }
.welcome__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.welcome__actions .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }

/* Simulated approval queue (P07 stand-in) on the admin console stub */
.admin-approvals { margin-top: var(--sp-6); }
.admin-approvals__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.admin-approvals__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4); }
.admin-approvals__name { margin: 0; font-weight: var(--fw-bold); color: var(--ink); }
.admin-approvals__row .btn { min-height: 44px; white-space: nowrap; }
.guest-brief__result-actions { flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.guest-brief__result-actions .btn { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .welcome-step__icon.is-spin svg { animation: none; }
}

@media (max-width: 768px) {
  .admin-approvals__row { flex-direction: column; align-items: stretch; }
  .admin-approvals__row .btn { width: 100%; }
  .welcome__actions .btn { flex: 1 1 auto; }
}

/* ── P04-3 · Refer sheet + Calendly-style coffee booker ─────────────────────*/
/* Token-only (constitution §5); 44px tap targets; Font Awesome via icon(). */

.refer-sheet__intro { margin: 0 0 var(--sp-4); color: var(--ink-soft); }
.refer-sheet__modes { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.refer-sheet__mode {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; font-weight: var(--fw-medium);
}
.refer-sheet__mode:hover { border-color: var(--accent); }
.refer-sheet__field { margin-bottom: var(--sp-4); }
.refer-sheet__label { display: block; margin-bottom: var(--sp-2); font-weight: var(--fw-medium); color: var(--ink); }
.refer-sheet__conv {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3); margin-bottom: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); cursor: pointer; line-height: var(--lh-snug);
}
.refer-sheet__conv input { margin-top: 3px; min-width: 18px; min-height: 18px; }
.refer-sheet__sim, .coffee-calendly__sim {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug);
}

.view-coffee-booker { display: block; }
.coffee-booker { max-width: 720px; margin: var(--sp-4) auto 0; padding: var(--sp-6); }
.coffee-booker__head { margin-bottom: var(--sp-5); }
.coffee-booker__title { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.coffee-booker__title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.coffee-booker__sub { margin: 0; color: var(--ink-soft); }

.coffee-booker__cafes { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cafe-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface);
}
.cafe-card__name { font-weight: var(--fw-bold); color: var(--ink); }
.cafe-card__sub { font-size: var(--fs-sm); color: var(--muted); }
.cafe-card__vibe { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-snug); }
.cafe-card__slots { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; }
.slot-btn { min-height: 44px; width: 100%; justify-content: center; }

.coffee-calendly {
  margin-top: var(--sp-5); padding: var(--sp-4);
  border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--surface-2);
}
.coffee-calendly__head { font-weight: var(--fw-medium); margin-bottom: var(--sp-2); }
.coffee-calendly__url {
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--accent-d);
  word-break: break-all; margin-bottom: var(--sp-3);
}
.coffee-calendly__none { margin: 0 0 var(--sp-3); color: var(--ink-soft); font-size: var(--fs-sm); }

.coffee-confirmed { text-align: center; padding: var(--sp-5) var(--sp-4); }
.coffee-confirmed__badge { font-size: var(--fs-3xl); color: var(--rag-green); margin-bottom: var(--sp-3); }
.coffee-confirmed__title { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.coffee-confirmed__title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.coffee-confirmed__body { margin: 0 auto var(--sp-4); max-width: 46ch; color: var(--ink-soft); }
.coffee-confirmed__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
  .coffee-booker { padding: var(--sp-4); }
  .coffee-booker__cafes { grid-template-columns: 1fr; }
  .refer-sheet__modes { flex-direction: column; }
  .refer-sheet__mode { width: 100%; }
}

/* ── P04-4 · AI matchmaking — match list + warm hand-off brief ───────────────*/
.match-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.match-list__empty { grid-column: 1 / -1; color: var(--ink-soft); }

.match-item {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.match-item .member-card { flex: 0 0 auto; }
.match-item__why {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.4;
}
.match-item__why .fa-icon { color: var(--accent-d); flex-shrink: 0; margin-top: 2px; }
.match-item__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: auto; }
.match-item__action { min-height: 44px; }

.warm-handoff__head { margin-bottom: var(--sp-5); }
.warm-handoff__sim {
  display: flex; align-items: flex-start; gap: 8px; margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm); color: var(--ink-soft);
}
.warm-handoff__sim .fa-icon { color: var(--accent-d); flex-shrink: 0; margin-top: 2px; }
.warm-handoff__matches { margin-bottom: var(--sp-6); }

/* CATEGORY-CLASH cross-hub suggestion card — shared by the warm hand-off brief
   and the guest confirmation page (components/crossHubCard.js). */
.crosshub-card { border-left: 4px solid var(--rag-amber); margin-top: var(--sp-5); }
.crosshub-card__kicker { display: flex; align-items: center; gap: 8px; }
.crosshub-card__kicker .fa-icon { color: var(--rag-amber); }
.crosshub-card__actions { margin-top: var(--sp-3); }
.crosshub-card__actions .btn { min-height: 44px; }

@media (max-width: 768px) {
  .match-list { grid-template-columns: 1fr; }
}

/* ── Area Manager rollup (P06-1) ─────────────────────────────────────────────
   Cluster dashboard (#/area/dashboard) + hub 9-metric drill (#/area/hub/:id).
   Additive + token-only (no raw hex); the navy accent comes from
   body[data-role="area"] --accent, so nothing here hard-codes a role colour. */

/* RAG-split stacked bar (charts.ragStackedBar) — proportional Green/Amber/Red. */
.rag-bar { display: flex; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line); margin: var(--sp-2) 0; }
.rag-bar__seg { height: 100%; min-width: 3px; }
.rag-bar__seg--green { background: var(--rag-green); }
.rag-bar__seg--amber { background: var(--rag-amber); }
.rag-bar__seg--red { background: var(--rag-red); }

.area-rag-legend .rag-legend__item span { color: var(--ink); }

/* Cluster trend card — three labelled sparkline rows. */
.area-trend-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-2); }
.area-trend-row { display: grid; grid-template-columns: 1fr minmax(90px, 140px); align-items: center; gap: var(--sp-4); }
.area-trend-row__meta { min-width: 0; }
.area-trend-row__spark { width: 100%; }

/* Hub rollup grid + card. .card-link (from card({href})) keeps the tap target. */
.area-hub-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hub-card__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.hub-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.hub-card__top .card-title { margin: 0; }
.hub-card__bar { margin: var(--sp-1) 0; }
.hub-card__stats { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.hub-card__stat { display: flex; flex-direction: column; }
.hub-card__stat-val { font-weight: var(--fw-black); color: var(--ink); display: inline-flex; align-items: center; gap: var(--sp-1); }
.hub-card__stat-lbl { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hub-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.hub-card__trend { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.hub-card__trend--green { color: var(--rag-green-ink); }
.hub-card__trend--red { color: var(--rag-red-ink); }
.hub-card__trend--muted { color: var(--muted); }
.hub-card__go { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--accent-ink); font-weight: var(--fw-bold); font-size: var(--fs-sm); }

/* Hub 9-metric member table — wide, so it scrolls horizontally on small screens. */
.area-metric-table { overflow-x: auto; }
.area-member-link { font-weight: var(--fw-bold); color: var(--accent-ink); }
.area-member-link:hover { text-decoration: underline; }

/* Back bar shared by the hub + member drills. */
.area-backbar { margin-bottom: var(--sp-3); }
.area-backbar .btn { min-height: 44px; display: inline-flex; align-items: center; }

/* ── "3 Things Today" triage panel (P06-2) ──────────────────────────────────
 * Pinned to the top of #/area/dashboard: exactly three ranked, 1-tap-actionable
 * priority cards (amber/red hub · churn-risk member · leader handover). Navy
 * area tint via --accent; additive, tokens only (no raw hex), ≥44px tap targets.
 */
.triage-panel {
  margin-top: var(--sp-5);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.triage-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.triage-panel__title { font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-xl); margin: 0; color: var(--ink); display: inline-flex; align-items: center; gap: var(--sp-2); }
.triage-panel__title .fa-icon { color: var(--accent-ink); }
.triage-panel__sub { font-size: var(--fs-sm); color: var(--muted); margin: 0; font-weight: var(--fw-bold); }
.triage-panel__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); }

.triage-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-4);
  transition: opacity var(--motion), transform var(--motion);
}
/* Hub cards colour by the hub's real RAG (triage-card--rag-*), NOT by type —
   an amber hub reads amber, a red hub reads red. Churn/handover stay type-keyed. */
.triage-card--rag-red { border-left-color: var(--rag-red); }
.triage-card--rag-amber { border-left-color: var(--rag-amber); }
.triage-card--rag-green { border-left-color: var(--rag-green); }
.triage-card--churn { border-left-color: var(--rag-amber); }
.triage-card--handover { border-left-color: var(--accent); }
.triage-card--leaving { opacity: 0; transform: translateY(-6px) scale(.98); }

.triage-card__top { display: flex; align-items: center; gap: var(--sp-2); }
.triage-card__chip { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-ink); }
.triage-card--rag-red .triage-card__chip { background: color-mix(in srgb, var(--rag-red) 15%, var(--surface)); color: var(--rag-red-ink); }
.triage-card--rag-amber .triage-card__chip { background: color-mix(in srgb, var(--rag-amber) 20%, var(--surface)); color: var(--rag-amber-ink); }
.triage-card--rag-green .triage-card__chip { background: color-mix(in srgb, var(--rag-green) 18%, var(--surface)); color: var(--rag-green-ink); }
.triage-card--churn .triage-card__chip { background: color-mix(in srgb, var(--rag-amber) 20%, var(--surface)); color: var(--rag-amber-ink); }
.triage-card__type { font-size: var(--fs-xs); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.triage-card__headline { font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-md); margin: 0; color: var(--ink); }
.triage-card__why { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); margin: 0; flex: 1; }
.triage-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.triage-card__act { min-height: 44px; }
.triage-card__controls { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.triage-card__ctl { min-height: 44px; color: var(--muted); }
.triage-card__ctl:hover { color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .triage-card { transition: none; }
}

/* ── Drift Radar (P06-3) — churn-risk rows + weekly call list ─────────────────
 * #/area/drift. Additive + token-only (no raw hex); the navy accent comes from
 * body[data-role="area"] --accent. ≥44px tap targets, responsive.
 */

/* Deep-link banner on the cluster dashboard. */
.drift-link {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius-lg);
  color: var(--ink); text-decoration: none; min-height: 44px;
  transition: background var(--motion), border-color var(--motion);
}
.drift-link:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.drift-link__ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-ink); font-size: var(--fs-lg); }
.drift-link__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.drift-link__txt strong { color: var(--ink); font-weight: var(--fw-black); }
.drift-link__txt span { color: var(--muted); font-size: var(--fs-sm); }
.drift-link__go { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--accent-ink); font-weight: var(--fw-bold); font-size: var(--fs-sm); white-space: nowrap; }

/* Weekly call list. */
.drift-calllist__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.drift-calllist__head .card-title { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; }
.drift-calllist__head .btn { min-height: 44px; }
.drift-calllist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.drift-calllist__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); flex-wrap: wrap; }
.drift-calllist__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.drift-calllist__name { font-weight: var(--fw-bold); color: var(--ink); }
.drift-calllist__sub { font-size: var(--fs-sm); color: var(--muted); display: inline-flex; align-items: center; gap: var(--sp-1); }
.drift-calllist__reason { font-size: var(--fs-sm); color: var(--rag-red-ink); }
.drift-calllist__action { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.drift-calllist__action .btn { min-height: 44px; }
.drift-calllist__outcome { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--rag-green-ink); }
.drift-outcome-group { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.drift-outcome-group .btn { min-height: 44px; }

/* Ranked churn-risk rows. */
.drift-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.drift-row { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: var(--radius); box-shadow: var(--shadow); }
.drift-row--red { border-left-color: var(--rag-red); }
.drift-row--amber { border-left-color: var(--rag-amber); }
.drift-row--green { border-left-color: var(--rag-green); }
.drift-row__lead { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.drift-row__rank { font-family: var(--font-head); font-weight: var(--fw-black); color: var(--muted); font-size: var(--fs-sm); min-width: 1.6em; text-align: right; }
.drift-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.drift-row__id { display: flex; flex-direction: column; gap: 1px; }
.drift-row__name { font-family: var(--font-head); font-weight: var(--fw-black); color: var(--ink); font-size: var(--fs-md); }
.drift-row__sub { font-size: var(--fs-sm); color: var(--muted); }
.drift-row__renewal { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--rag-red-ink); margin-top: 2px; }
.drift-row__score { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; text-align: center; min-width: 66px; }
.drift-row__score-num { font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-xl); color: var(--ink); line-height: 1; }
.drift-row__score-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: var(--fw-black); }
.drift-row__drivers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.driver-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--rag-red) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--rag-red) 20%, var(--line)); color: var(--ink); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-tight); }
.driver-chip .fa-icon { color: var(--rag-red-ink); flex-shrink: 0; }
.drift-row--amber .driver-chip { background: color-mix(in srgb, var(--rag-amber) 12%, var(--surface)); border-color: color-mix(in srgb, var(--rag-amber) 26%, var(--line)); }
.drift-row--amber .driver-chip .fa-icon { color: var(--rag-amber-ink); }
.drift-row--green .driver-chip { background: color-mix(in srgb, var(--rag-green) 10%, var(--surface)); border-color: color-mix(in srgb, var(--rag-green) 24%, var(--line)); }
.drift-row--green .driver-chip .fa-icon { color: var(--rag-green-ink); }
.drift-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.drift-row__actions .btn { min-height: 44px; }
.drift-row__oncall { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent-ink); }

@media (max-width: 640px) {
  .drift-row { flex-wrap: wrap; }
  .drift-row__score { order: -1; flex-direction: row; gap: var(--sp-2); min-width: 0; }
}

/* ── Hub comparison matrix + Hub Cup (P06-4) ──────────────────────────────────
 * #/area/compare. Additive + token-only (no raw hex). The Cup leaderboard itself
 * comes from P10 (gamification.css .leaderboard*) — only the comparison matrix,
 * the picker/switcher chips and the schedule need styling here. Matrix DEGRADES
 * to horizontal scroll on mobile (§10) rather than breaking. ≥44px tap targets.
 */
.compare-picker, .cup-switcher {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
.compare-chip, .cup-month-chip {
  min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); cursor: pointer;
  transition: background var(--motion), border-color var(--motion), color var(--motion);
}
.compare-chip:hover:not(:disabled), .cup-month-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.compare-chip.is-on, .cup-month-chip.is-on {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent-ink);
}
.compare-chip:disabled { opacity: 0.5; cursor: not-allowed; }

/* Matrix — hubs across the top, metrics down the side. */
.compare-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.compare-matrix { border-collapse: collapse; width: 100%; min-width: 520px; }
.compare-matrix th, .compare-matrix td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare-matrix thead th { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); position: sticky; top: 0; }
.compare-matrix__corner { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.compare-matrix__hub { min-width: 130px; }
.compare-matrix__hub-name { display: block; font-weight: var(--fw-black); color: var(--ink); margin-bottom: 4px; }
.compare-matrix__rowlab { font-weight: var(--fw-bold); color: var(--ink); white-space: nowrap; }
.compare-matrix__inv { font-weight: var(--fw-regular); color: var(--muted); font-size: var(--fs-xs); }
.compare-matrix tbody tr:last-child th, .compare-matrix tbody tr:last-child td { border-bottom: 0; }
.compare-cell__val { display: inline-block; font-family: var(--font-head); font-weight: var(--fw-black); color: var(--ink); margin-right: var(--sp-2); }
.compare-cell .status-pill { vertical-align: middle; }
.compare-cell__flag { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.compare-cell__flag--best { color: var(--rag-green-ink); }
.compare-cell__flag--worst { color: var(--rag-red-ink); }
.compare-cell.is-best { background: color-mix(in srgb, var(--rag-green) 14%, var(--surface)); box-shadow: inset 3px 0 0 var(--rag-green-ink); }
.compare-cell.is-worst { background: color-mix(in srgb, var(--rag-red) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--rag-red-ink); }
.compare-cell__trend { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.compare-cell__trend--green { color: var(--rag-green-ink); }
.compare-cell__trend--red { color: var(--rag-red-ink); }
.compare-cell__trend--neutral { color: var(--muted); }

/* "What's driving the gap" callout. */
.compare-gap { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--rag-amber) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--rag-amber) 30%, var(--line)); }
.compare-gap__ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--rag-amber) 22%, var(--surface)); color: var(--rag-amber-ink); }
.compare-gap__txt strong { display: block; color: var(--ink); font-weight: var(--fw-black); margin-bottom: 2px; }
.compare-gap__txt p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* Hub Cup — metric-of-the-month banner + champion strip. */
.cup-metric { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); margin-bottom: var(--sp-4); }
.cup-metric__ico { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink); font-size: var(--fs-xl); }
.cup-metric__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cup-metric__eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: var(--fw-bold); }
.cup-metric__title { font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--ink); }
.cup-metric__blurb { color: var(--muted); font-size: var(--fs-sm); }
.cup-champ { display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--rag-amber) 20%, var(--surface)); color: var(--rag-amber-ink); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.cup-champ__name { font-weight: var(--fw-black); }

/* Read-only rotating schedule. */
.cup-schedule { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2); }
.cup-schedule__row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cup-schedule__row.is-current { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.cup-schedule__month { width: 72px; flex-shrink: 0; font-weight: var(--fw-bold); color: var(--muted); font-size: var(--fs-sm); }
.cup-schedule__metric { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-sm); flex: 1; min-width: 0; }
.cup-schedule__now { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.03em; }
.cup-schedule__note { margin-top: var(--sp-2); }
.cup-schedule__admin { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--accent-ink); font-weight: var(--fw-bold); text-decoration: none; }
.cup-schedule__admin:hover { text-decoration: underline; }

/* ── Admin (HQ ops) console (P07-1) — sidebar shell + CRUD desks ──────────────
   Builds ONLY on the frozen P00-2 primitives (.sidebar family, .card, .stat-tile,
   .table-card, .status-pill, .badge, .btn, .field, .avatar) + design tokens. Admin
   accent is the green role tint (--accent = --fresh-admin, set by
   body[data-role="admin"]); the sidebar carries a green fill. Desktop-first;
   collapses to a drawer at narrow widths (AC7). No raw brand hex, no emoji. */

.admin-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.admin-shell__main { min-width: 0; }
.sidebar--admin { background: linear-gradient(180deg, var(--fresh-green-d), var(--fresh-admin-d)); position: sticky; top: var(--sp-6); max-height: calc(100vh - 2 * var(--sp-6)); overflow-y: auto; overscroll-behavior: contain; }
/* Subtle scrollbar on the dark sidebar when its sections exceed the viewport. */
.sidebar--admin::-webkit-scrollbar { width: 8px; }
.sidebar--admin::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); border-radius: var(--radius-pill); }
.sidebar--admin { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.24) transparent; }
.sidebar--admin .sidebar__nav a { min-height: 44px; }
.sidebar__nav a svg, .sidebar__nav-soon svg { flex-shrink: 0; opacity: .9; }
.sidebar__nav-soon { display: flex; align-items: center; gap: 10px; padding: 10px var(--sp-5); min-height: 44px; color: rgba(255,255,255,.62); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: default; }
.sidebar__soon-tag { margin-left: auto; font-size: 10px; font-weight: var(--fw-black); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.9); background: rgba(255,255,255,.16); padding: 2px 7px; border-radius: var(--radius-pill); }
.admin-nav-toggle { display: none; }

/* KPI + panels */
.admin-dash__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); margin-top: var(--sp-6); align-items: start; }
.admin-panel { padding: var(--sp-5); }
.admin-panel__title { font-size: var(--fs-md); margin: 0 0 var(--sp-4); }

/* pending-approvals queue */
.admin-approvals-v2 { margin-top: var(--sp-7); }
.approve-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.approve-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4); }
.approve-row--hero { border-left: 4px solid var(--accent); }
.approve-row__who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.approve-row__name { margin: 0; font-weight: var(--fw-bold); color: var(--ink); }
.approve-row__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.approve-row__btn { min-height: 44px; white-space: nowrap; }
.approve-list__more { color: var(--muted); font-size: var(--fs-sm); margin: var(--sp-3) 0 0; }

/* activity feed */
.admin-feed { list-style: none; margin: 0; padding: 0; }
.admin-feed li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.admin-feed li:last-child { border-bottom: none; }
.admin-feed__icon { color: var(--accent-ink); display: inline-flex; padding-top: 2px; }
.admin-feed__title { margin: 0; font-weight: var(--fw-medium); color: var(--ink); font-size: var(--fs-sm); }
.admin-feed__detail { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-xs); }
.admin-feed__when { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }

/* sync tile */
.admin-sync-tile .admin-sync-tile__strip { margin: var(--sp-4) 0; }
.admin-sync-tile .btn { min-height: 44px; }

/* toolbars (search + filters + create) */
.admin-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; margin-bottom: var(--sp-5); }
.admin-toolbar .field { margin: 0; min-width: 180px; flex: 1 1 180px; }
.admin-toolbar__cta { min-height: 44px; margin-left: auto; white-space: nowrap; }

/* table member cell */
.cell-member { display: flex; align-items: center; gap: var(--sp-3); }
.cell-member__name { display: block; font-weight: var(--fw-bold); color: var(--ink); }
.cell-member__sub { display: block; color: var(--muted); font-size: var(--fs-xs); }

/* edit/create form */
.admin-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.admin-form .field { margin: 0; }
.admin-form__crown { border-top: 1px solid var(--line); padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.admin-form__crown-label { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: var(--fw-medium); }
.admin-form__crown-label svg { color: var(--fresh-yellow); }
.admin-form__crown-note { margin: 0; color: var(--muted); font-size: var(--fs-xs); }

/* payments sim note */
.admin-payments__sim { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }

/* cascade progress modal */
.cascade-steps { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cascade-step { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.cascade-step__icon { display: inline-flex; }
.cascade-step__icon.is-done { color: var(--rag-green-ink); }
.cascade-step__icon.is-running, .cascade-step__icon.is-retrying { color: var(--accent-ink); }
.cascade-step__icon.is-pending { color: var(--muted); }
.cascade-step__icon.is-spin svg { animation: integ-spin 900ms linear infinite; }
.cascade-step__label { font-size: var(--fs-sm); color: var(--ink); }
.cascade-modal__footer:empty { display: none; }
.cascade-modal__done { display: flex; align-items: center; gap: 6px; color: var(--rag-green-ink); font-weight: var(--fw-medium); font-size: var(--fs-sm); margin: var(--sp-4) 0 var(--sp-3); }

@media (max-width: 900px) {
  .admin-dash__cols { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-shell .sidebar--admin { display: none; position: static; max-height: none; overflow: visible; }
  .admin-shell--nav-open .sidebar--admin { display: block; }
  .admin-nav-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: var(--sp-4); }
  .approve-row { grid-template-columns: 1fr; }
  .approve-row__btn { width: 100%; }
  .admin-toolbar__cta { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cascade-step__icon.is-spin svg { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   P07-2 — Darren's Five inbox + FreshBot console + inquiry router
   All tokens-only; builds on the frozen .card/.btn/.status-pill/.badge/.switch
   primitives. Reachable at #/admin/inbox|freshbot|inquiries inside the P07-1
   admin shell (green admin accent). Ensure ≥44px tap targets on actions.
   ══════════════════════════════════════════════════════════════════════════ */
.admin-inbox .btn, .admin-allowlist .btn, .admin-freshbot .btn, .admin-inquiries .btn { min-height: 44px; }
.admin-inbox .sim-tag, .admin-allowlist .sim-tag, .admin-freshbot .sim-tag, .admin-inquiries .sim-tag { vertical-align: middle; margin-left: var(--sp-2); }

/* ── relief counter ─────────────────────────────────────────────────────── */
.inbox-relief {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-5); margin-bottom: var(--sp-6); border-radius: var(--radius);
  background: linear-gradient(120deg, color-mix(in srgb, var(--fresh-green) 16%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--fresh-green) 30%, var(--surface));
}
.inbox-relief__figure { display: flex; align-items: center; gap: var(--sp-3); }
.inbox-relief__icon { color: var(--fresh-green-ink); display: inline-flex; }
.inbox-relief__num { font-size: var(--fs-3xl); font-weight: var(--fw-black); line-height: 1; color: var(--fresh-green-ink); }
.inbox-relief__cap { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.inbox-relief__copy { margin: 0; color: var(--ink); font-size: var(--fs-base); max-width: 48ch; flex: 1 1 260px; }

/* ── the Five (rich cards) ──────────────────────────────────────────────── */
.inbox-five { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.inbox-card { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.inbox-card__top { display: flex; align-items: center; gap: var(--sp-3); }
.inbox-card__who { flex: 1; min-width: 0; }
.inbox-card__name { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.inbox-card__badges { margin-top: 2px; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.inbox-card__score {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--fresh-green-ink);
  background: color-mix(in srgb, var(--fresh-green) 14%, var(--surface));
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.inbox-card__subject { margin: 0; font-weight: var(--fw-bold); color: var(--ink); }
.inbox-card__preview { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.inbox-card__ai {
  border-left: 3px solid color-mix(in srgb, var(--fresh-green) 45%, var(--surface));
  padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--radius-sm);
}
.inbox-card__ai-label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: .05em; color: var(--fresh-green-ink); }
.inbox-card__ai-text { margin: 4px 0 0; color: var(--ink); font-size: var(--fs-sm); }
.inbox-card__suggest { margin: var(--sp-2) 0 0; display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.inbox-card__state { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.inbox-card__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.inbox-card__chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.inbox-card__chips[hidden] { display: none; }

/* ── auto-handled / FreshBot drawers ────────────────────────────────────── */
.inbox-drawer { border: 1px solid var(--line); border-radius: var(--radius); margin-top: var(--sp-4); background: var(--surface); overflow: hidden; }
.inbox-drawer__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); font-weight: var(--fw-bold); }
.inbox-drawer__summary::-webkit-details-marker { display: none; }
.inbox-drawer__label { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 1; }
.inbox-drawer__count { background: var(--bg); color: var(--muted); font-weight: var(--fw-black); font-size: var(--fs-sm); padding: 2px 10px; border-radius: var(--radius-pill); }
.inbox-drawer__chev { color: var(--muted); transition: transform var(--motion); }
.inbox-drawer[open] .inbox-drawer__chev { transform: rotate(180deg); }
.inbox-drawer__body { padding: 0 var(--sp-4) var(--sp-4); }
.inbox-drawer__note { margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }
.inbox-drawer__empty { color: var(--muted); font-size: var(--fs-sm); }
.inbox-parked { list-style: none; margin: 0; padding: 0; }
.inbox-parked__row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.inbox-parked__icon { color: var(--muted); display: inline-flex; padding-top: 2px; }
.inbox-parked__subject { margin: 0; font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--ink); }
.inbox-parked__summary { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-xs); }
.inbox-parked__when { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }

/* ── allowlist settings ─────────────────────────────────────────────────── */
.admin-allowlist__back { margin-bottom: var(--sp-3); }
.allowlist-preview { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.allowlist-preview__tile { display: flex; align-items: center; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.allowlist-preview__icon { color: var(--fresh-green-ink); display: inline-flex; }
.allowlist-preview__num { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--ink); }
.allowlist-preview__cap { color: var(--muted); font-size: var(--fs-sm); }
.allowlist-rules, .allowlist-senders { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.allowlist-rule { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.allowlist-rule__icon { color: var(--fresh-green-ink); display: inline-flex; flex-shrink: 0; }
.allowlist-rule__info { flex: 1; min-width: 0; }
.allowlist-rule__label { margin: 0; font-weight: var(--fw-bold); }
.allowlist-rule__desc { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.allowlist-add { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.allowlist-add__label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.allowlist-add__select { min-width: 260px; }
.allowlist-sender { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.allowlist-sender__info { flex: 1; min-width: 0; display: grid; gap: 4px; }
.allowlist-sender__name { margin: 0; font-weight: var(--fw-bold); }
.allowlist-sender__reason { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* ── FreshBot console ───────────────────────────────────────────────────── */
.freshbot-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-5); align-items: start; margin: var(--sp-6) 0; }
.freshbot-ask { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.freshbot-ask__note { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.freshbot-ask__log { display: grid; gap: var(--sp-3); max-height: 320px; overflow-y: auto; }
.freshbot-ask__form { display: flex; gap: var(--sp-2); }
.freshbot-ask__form .input { flex: 1; }
.freshbot-ask__chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.freshbot-ask__escalate { margin-top: var(--sp-1); }
.freshbot-bubble { padding: var(--sp-3); border-radius: var(--radius); max-width: 90%; }
.freshbot-bubble p { margin: 0; font-size: var(--fs-sm); }
.freshbot-bubble--you { background: color-mix(in srgb, var(--fresh-green) 12%, var(--surface)); justify-self: end; border-bottom-right-radius: var(--radius-sm); }
.freshbot-bubble--bot { background: var(--surface-2); border: 1px solid var(--line); justify-self: start; border-bottom-left-radius: var(--radius-sm); }
.freshbot-bubble__tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: .04em; color: var(--fresh-green-ink); margin-bottom: 4px; }
.freshbot-queue { padding: var(--sp-5); }
.freshbot-queue__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.freshbot-queue__row { display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.freshbot-queue__row:last-child { border-bottom: none; padding-bottom: 0; }
.freshbot-queue__topic { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.freshbot-queue__who { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-xs); }
.freshbot-scripts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.freshbot-script { padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.freshbot-script__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.freshbot-script__topic { margin: 0; font-weight: var(--fw-bold); }
.freshbot-script__when { margin: 0; color: var(--muted); font-size: var(--fs-xs); }

/* ── inquiry router ─────────────────────────────────────────────────────── */
.inquiry-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.inquiry-card { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.inquiry-card--hero { border: 1px solid color-mix(in srgb, var(--fresh-green) 40%, var(--surface)); box-shadow: var(--shadow-lg); }
.inquiry-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.inquiry-card__name { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.inquiry-card__biz { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.inquiry-card__sla { flex-shrink: 0; }
.inquiry-card__msg { margin: 0; color: var(--ink); font-size: var(--fs-sm); font-style: italic; border-left: 3px solid var(--line); padding-left: var(--sp-3); }
.inquiry-card__chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.inquiry-card__detected { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-bold); }
.inquiry-card__route { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.inquiry-card__route-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); }
.inquiry-card__select { min-width: 220px; }
.inquiry-card__routed { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--fresh-green-ink); font-weight: var(--fw-bold); font-size: var(--fs-sm); flex: 1 1 100%; }
.inquiry-card__reassign { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

@media (max-width: 768px) {
  .freshbot-cols { grid-template-columns: 1fr; }
  .allowlist-add__select, .allowlist-add { width: 100%; }
  .allowlist-add__select { min-width: 0; }
  .inquiry-card__select { min-width: 0; width: 100%; }
}

/* ── Super-Admin org dashboard (P07-5) ──────────────────────────────────────
   Darren's org command surface (#/superadmin/dashboard), rendered inside the
   admin-shell chrome. Deep-indigo accent inherits from body[data-role="superadmin"]
   → --accent (tokens.css); every colour below is token-only (no ad-hoc hex). */
.org-dash { display: flex; flex-direction: column; gap: var(--sp-5); }

/* health KPI tile — RAG-tinted top border (mirrors the ops board convention) */
.org-tile--green { border-top: 4px solid var(--rag-green); }
.org-tile--green .stat-tile__value { color: var(--rag-green-ink); }
.org-tile--amber { border-top: 4px solid var(--rag-amber); }
.org-tile--amber .stat-tile__value { color: var(--rag-amber-ink); }
.org-tile--red { border-top: 4px solid var(--rag-red); }
.org-tile--red .stat-tile__value { color: var(--rag-red-ink); }

/* growth + funnel two-up */
.org-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.org-growth__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.org-growth__delta.is-up { color: var(--rag-green-ink); }
.org-growth__delta.is-down { color: var(--rag-red-ink); }
.org-growth__delta.is-neutral { color: var(--muted); font-weight: var(--fw-medium); }
.org-growth__spark { width: 100%; height: 64px; }

.org-funnel { display: flex; flex-direction: column; gap: var(--sp-3); }
.org-funnel__row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: var(--sp-3); }
.org-funnel__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.org-funnel__track { position: relative; background: var(--surface-2); border-radius: var(--radius-pill); min-height: 26px; display: flex; align-items: center; }
.org-funnel__bar { height: 26px; background: var(--accent); border-radius: var(--radius-pill); min-width: 4%; transition: width .4s ease; }
.org-funnel__bar--1 { opacity: .82; }
.org-funnel__bar--2 { opacity: .64; }
.org-funnel__bar--3 { opacity: .48; }
.org-funnel__count { position: absolute; right: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink); }

/* network RAG grid — each area card drills to the area board */
.org-area-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.org-area__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.org-area__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.org-area__split { display: flex; gap: var(--sp-2); }
.org-area__chip { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); border: 1px solid var(--line); }
.org-area__chip--green { color: var(--rag-green-ink); border-color: var(--rag-green); }
.org-area__chip--amber { color: var(--rag-amber-ink); border-color: var(--rag-amber); }
.org-area__chip--red { color: var(--rag-red-ink); border-color: var(--rag-red); }
.org-area__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-1); }
.org-area__kpi { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.org-area__go { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent-ink); }

/* cost story before/after */
.org-cost__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-3) 0; }
.org-cost__col { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); background: var(--surface); }
.org-cost__col--before { border-left: 4px solid var(--rag-amber); }
.org-cost__col--after { border-left: 4px solid var(--rag-green); }
.org-cost__col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.org-cost__col-title { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); color: var(--ink); }
.org-cost__col--before .org-cost__col-title { color: var(--rag-amber-ink); }
.org-cost__col--after .org-cost__col-title { color: var(--rag-green-ink); }
.org-cost__col-tag { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); }
.org-cost__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.org-cost__list li { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.org-cost__list strong { color: var(--ink); }
.org-cost__retired { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.org-cost__retired-head { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); color: var(--ink); margin: 0 0 var(--sp-2); }
.org-cost__checklist { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.org-cost__checklist li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink); }
.org-cost__checklist li svg { color: var(--rag-green-ink); }
.org-cost__save { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fresh-green-ink); }

/* contingency tile */
.org-contingency__strip { margin: var(--sp-2) 0; }
.org-contingency__summary { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; margin: 0 0 var(--sp-3); }
.org-contingency__link { align-self: flex-start; }

/* quick links */
.org-quick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.org-quick__tile { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--ink); min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease; }
.org-quick__tile:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.org-quick__tile--soon { opacity: .72; cursor: default; }
.org-quick__tile--soon:hover { border-color: var(--line); box-shadow: none; }
.org-quick__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--accent-ink); }
.org-quick__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.org-quick__title { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); }
.org-quick__desc { font-size: var(--fs-xs); color: var(--muted); }
.org-quick__go { color: var(--accent-ink); font-weight: var(--fw-bold); flex: 0 0 auto; }

@media (max-width: 768px) {
  .org-cost__cols { grid-template-columns: 1fr; }
  .org-funnel__row { grid-template-columns: 110px 1fr; }
}

/* ────────────────────────────────────────────────────────────────────────────
   P10-3 social activity feed (#/feed) — feed cards + scope toggle + the
   "other hubs are cooking" rail. Built on the frozen primitives
   (.card/.chip/.avatar/.btn/.period-toggle); kind tone accents reference
   tokens only (no raw hex). NO emoji — glyphs are Font Awesome via icon().
   ──────────────────────────────────────────────────────────────────────────── */
.view-feed .feed-toolbar { display: flex; justify-content: flex-start; margin: var(--sp-4) 0 var(--sp-5); }
.feed-scope { max-width: 100%; overflow-x: auto; }

.feed-stream { display: flex; flex-direction: column; gap: var(--sp-4); }

.feed-card { position: relative; padding: var(--sp-4) var(--sp-5); border-left: 4px solid var(--line); }
.feed-card__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.feed-card__idn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.feed-card__name { font-family: var(--font-head); font-weight: var(--fw-black); color: var(--ink); font-size: var(--fs-md); }
.feed-card__sub { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.feed-card__hub, .feed-card__kind { font-size: var(--fs-xs); padding: 3px 10px; }
.feed-card__time { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; padding-top: 4px; }
.feed-card__body { margin: var(--sp-3) 0 0; color: var(--ink); line-height: 1.5; }
.feed-card__level { margin-top: var(--sp-3); }

.feed-card__actions { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.feed-cheer { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.feed-cheer__icon { display: inline-flex; }
.feed-cheer.is-cheered { color: var(--fresh-pink); border-color: color-mix(in srgb, var(--fresh-pink) 40%, var(--surface)); background: color-mix(in srgb, var(--fresh-pink) 10%, var(--surface)); }
.feed-cheer.is-cheered .feed-cheer__icon { transform: scale(1.05); }

/* kind tone accents (the left rule + chip tint) */
.feed-kind--green  { border-left-color: var(--fresh-green); }
.feed-kind--orange { border-left-color: var(--fresh-orange); }
.feed-kind--pink   { border-left-color: var(--fresh-pink); }
.feed-kind--yellow { border-left-color: var(--fresh-yellow); }
.feed-kind--purple { border-left-color: var(--fresh-purple); }
.feed-kind--navy   { border-left-color: var(--fresh-navy); }
.feed-card.feed-kind--green  .feed-card__kind { border-color: color-mix(in srgb, var(--fresh-green) 34%, var(--surface)); color: var(--fresh-green-d); }
.feed-card.feed-kind--orange .feed-card__kind { border-color: color-mix(in srgb, var(--fresh-orange) 34%, var(--surface)); color: var(--fresh-orange-d); }
.feed-card.feed-kind--pink   .feed-card__kind { border-color: color-mix(in srgb, var(--fresh-pink) 34%, var(--surface)); color: var(--fresh-pink-d); }
.feed-card.feed-kind--yellow .feed-card__kind { border-color: color-mix(in srgb, var(--fresh-yellow) 40%, var(--surface)); color: var(--ink); }
.feed-card.feed-kind--purple .feed-card__kind { border-color: color-mix(in srgb, var(--fresh-purple) 34%, var(--surface)); color: var(--fresh-purple); }
.feed-card.feed-kind--navy   .feed-card__kind { border-color: color-mix(in srgb, var(--fresh-navy) 34%, var(--surface)); color: var(--fresh-navy); }

/* the "other hubs are cooking" rail (standalone; embeddable by P02) */
.cooking-rail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow); }
.cooking-rail__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cooking-rail__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-md); color: var(--ink); }
.cooking-rail__title .fa-icon { color: var(--fresh-orange); }
.cooking-rail__cta { font-weight: var(--fw-bold); color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.cooking-rail__cta:hover { text-decoration: underline; }
.cooking-rail__empty { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.cooking-rail__track { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); scroll-snap-type: x proximity; }
.cooking-tile { scroll-snap-align: start; flex: 0 0 clamp(200px, 62%, 240px); display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); text-decoration: none; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.cooking-tile:hover { box-shadow: var(--shadow); }
.cooking-tile__top { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted); }
.cooking-tile__badge { display: inline-flex; }
.cooking-tile__hub { font-weight: var(--fw-bold); }
.cooking-tile__who { font-family: var(--font-head); color: var(--ink); }
.cooking-tile__body { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 640px) {
  .feed-card__head { flex-wrap: wrap; }
  .feed-card__time { order: 3; width: 100%; padding-top: 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   P10-4 reviews / Tap-Tap Vouch — strengths card, reviews list, vouch modal,
   shareable testimonial card. Token-only; member accent inherits from the shell.
   ────────────────────────────────────────────────────────────────────────── */

/* strengths + reviews (embedded on the canonical profile) */
.strengths-card { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.strengths-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.strengths-card__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-md); color: var(--ink); }
.strengths-card__title .fa-icon { color: var(--accent); }
.strengths-card__ai { font-size: var(--fs-xs); background: color-mix(in srgb, var(--fresh-purple) 12%, var(--surface)); color: var(--fresh-purple-deep); border-color: color-mix(in srgb, var(--fresh-purple) 28%, var(--surface)); margin-left: auto; cursor: help; }
.strengths-card__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.strength-chip { gap: 6px; }
.strength-chip__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px; border-radius: var(--radius-pill); background: var(--accent); color: var(--surface); font-size: var(--fs-xs); font-weight: var(--fw-black); }
.strengths-card__blurb { margin: var(--sp-3) 0 0; color: var(--ink); line-height: 1.55; }
.strengths-card__empty { margin: var(--sp-3) 0 0; color: var(--muted); }
.strengths-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.strengths-card__revhead { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-sm); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.review-row { display: flex; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.review-row__main { flex: 1 1 auto; min-width: 0; }
.review-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.review-row__name { font-weight: var(--fw-bold); color: var(--ink); }
.review-row__tag { font-size: var(--fs-xs); padding: 3px 10px; }
.review-row__time { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.review-row__quote { margin: 6px 0 8px; color: var(--ink); line-height: 1.5; }
.review-row__quote::before { content: "\201C"; }
.review-row__quote::after { content: "\201D"; }
.review-row__share { padding: 4px 10px; min-height: 44px; min-width: 44px; }

/* Tap-Tap Vouch modal */
.vouch-modal__q { margin: 0 0 var(--sp-3); font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--ink); }
.vouch-modal__verdicts { display: flex; gap: var(--sp-3); }
.vouch-verdict { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 88px; padding: var(--sp-3); border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color var(--motion), background var(--motion), transform var(--motion); }
.vouch-verdict:hover { transform: translateY(-1px); }
.vouch-verdict__label { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.vouch-verdict--good.is-selected { border-color: var(--fresh-green); background: color-mix(in srgb, var(--fresh-green) 12%, var(--surface)); color: var(--fresh-green-d); }
.vouch-verdict--soft.is-selected { border-color: var(--fresh-orange); background: color-mix(in srgb, var(--fresh-orange) 12%, var(--surface)); color: var(--fresh-orange-d); }
.vouch-verdict__icon .fa-icon { display: block; }
.vouch-modal__tags { margin-top: var(--sp-4); }
.vouch-modal__sublabel { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); margin-bottom: var(--sp-2); }
.vouch-modal__tagrow { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.vouch-tag { cursor: pointer; background: var(--surface); }
.vouch-tag.is-selected { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
.vouch-modal__sentence { margin-top: var(--sp-4); }

/* shareable testimonial card + share modal */
.testimonial-share__note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.testimonial-share__note .fa-icon { color: var(--fresh-green); flex: 0 0 auto; margin-top: 2px; }
.testimonial-share__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.testimonial-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.testimonial-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--fresh-green); }
.testimonial-card__bar { position: absolute; top: 0; left: 0; right: 0; height: 52px; background: var(--fresh-green); display: flex; align-items: center; padding: 0 var(--sp-5); }
.testimonial-card__brand { color: var(--on-accent); font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-md); display: inline-flex; align-items: center; gap: 8px; }
.testimonial-card__brand em { font-style: normal; font-weight: 400; opacity: .92; }
.testimonial-card__quotemark { display: block; margin-top: var(--sp-5); color: var(--fresh-green); }
.testimonial-card__quote { margin: var(--sp-2) 0 var(--sp-3); font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-lg); line-height: 1.4; color: var(--ink); }
.testimonial-card__attrib { margin: 0 0 var(--sp-3); font-weight: var(--fw-bold); color: var(--fresh-green-d); }
.testimonial-card__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.testimonial-card__foot { margin: 0; font-size: var(--fs-xs); color: var(--muted); }

@media (max-width: 640px) {
  .vouch-modal__verdicts { flex-direction: column; }
  .review-row__time { margin-left: 0; width: 100%; }
}

/* ────────────────────────────────────────────────────────────────────────────
   P10-6 Tap-to-Thank / Karma — the given/received tally tile + 1-tap Thank.
   Tokens only, no raw hex; tap targets ≥44px; mirrors the P10-4 trust block.
   ──────────────────────────────────────────────────────────────────────────*/
.karma-tally { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.karma-tally__title { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--ink); }
.karma-tally__title .fa-icon { color: var(--fresh-green); }
.karma-tally__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.karma-tally__stat { flex: 1 1 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); text-align: center; }
.karma-tally__icon .fa-icon { color: var(--fresh-green); font-size: var(--fs-lg); }
.karma-tally__num { font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-xl); color: var(--ink); line-height: 1.1; }
.karma-tally__label { font-size: var(--fs-xs); color: var(--muted); }
.karma-tally__note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--muted); }

.member-profile__thankrow { margin-top: var(--sp-3); }
.thank-btn { min-height: 44px; }
.thank-btn .fa-icon { margin-right: 4px; }

.thank-sheet__lead { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.thank-sheet__label { display: block; margin-bottom: var(--sp-2); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink); }

/* ──────────────────────────────────────────────────────────────────────────
 * P04-5 — Bounty board (#/directory/board) + category-gap heatmap
 * (#/directory/heatmap). Shared cross-hub surfaces.
 * ──────────────────────────────────────────────────────────────────────────*/

.muted { color: var(--muted); }
.view-head__links { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.view-head__links a { color: var(--accent-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.view-head__links a:hover { text-decoration: underline; }

/* ── the post-an-ask form ──*/
.board-form { margin-bottom: var(--sp-6); }
.board-form__title { margin: 0 0 var(--sp-4); font-family: var(--font-head); font-size: var(--fs-lg); }
.board-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.board-form .field { margin-bottom: var(--sp-4); }
.board-form__actions { display: flex; justify-content: flex-end; }
.board-form__actions .btn { min-height: 44px; }
.board-form__result { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--fresh-green) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--fresh-green) 30%, var(--surface)); }
.board-result__head { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.board-result__head .fa-icon { color: var(--rag-green-ink); margin-right: 4px; }
.board-result__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

@media (max-width: 640px) { .board-form__row { grid-template-columns: 1fr; } }

/* ── the board list of asks ──*/
.board-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.board-list-head h2 { margin: 0; font-family: var(--font-head); font-size: var(--fs-lg); }
.board-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.board-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.board-card.status-closed { opacity: .7; }
.board-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.board-card__title { margin: 2px 0 0; font-family: var(--font-head); font-size: var(--fs-md); line-height: var(--lh-tight); }
.board-card__desc { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); }
.board-card__meta { margin: 0; font-size: var(--fs-sm); color: var(--ink); display: flex; align-items: center; gap: 6px; }
.board-card__meta .fa-icon { color: var(--accent-ink); }
.board-card__foot { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.board-card__poster { font-size: var(--fs-sm); color: var(--muted); }
.board-card__actions { display: flex; align-items: center; gap: var(--sp-2); }
.board-card__actions .btn { min-height: 44px; }
.board-card__mine, .board-card__claimed { font-size: var(--fs-sm); }

/* ── the category-gap heatmap ──*/
.heatmap-controls { margin-bottom: var(--sp-4); flex-wrap: wrap; }
.heatmap-summary { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.heatmap-legend { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); flex-wrap: wrap; }
.heatmap-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.heatmap-legend .heatcell { width: 20px; height: 20px; min-height: 20px; pointer-events: none; }

.heatmap-spotlight { margin-bottom: var(--sp-4); }
.heatmap-spotlight__card { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--rag-amber) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--rag-amber) 34%, var(--surface)); }
.heatmap-spotlight__icon .fa-icon { color: var(--rag-amber-ink); font-size: var(--fs-lg); }
.heatmap-spotlight__body { flex: 1; min-width: 0; }
.heatmap-spotlight__head { margin: 0 0 4px; font-weight: var(--fw-bold); color: var(--ink); }
.heatmap-spotlight__text { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink); }
.heatmap-spotlight__actions .btn { min-height: 44px; }

.heatmap-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.heatmap { border-collapse: separate; border-spacing: 0; }
.heatmap th { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-bold); padding: 6px; text-align: center; }
.heatmap__corner { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left !important; }
.heatmap__cathead { min-width: 46px; white-space: nowrap; letter-spacing: .03em; }
.heatmap__hubhead { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left !important;
  white-space: nowrap; padding-right: var(--sp-4); border-right: 1px solid var(--line); color: var(--ink); font-weight: var(--fw-bold); }
.heatmap__cell { padding: 2px; }

.heatcell { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 42px; min-height: 44px;
  border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--surface); font-size: var(--fs-xs);
  transition: transform var(--motion); }
.heatcell:hover { transform: scale(1.08); }
.heatcell:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
.heatcell .fa-icon { pointer-events: none; }
/* Deepen the filled cell's green a touch (same hue, ~15% darker) so the white
   glyph clears the 3:1 icon bar with headroom (~3.03:1 → ~4:1) — on-brand, and
   the legend chip inherits the same shade so grid + legend stay consistent. */
.heatcell.hc-filled { background: color-mix(in srgb, var(--rag-green) 85%, #000); }
.heatcell.hc-thin   { background: var(--rag-amber); color: var(--ink); }
.heatcell.hc-gap    { background: var(--rag-red); }
.heatcell.is-spotlight { outline: 3px solid var(--rag-amber-ink); outline-offset: 1px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rag-amber) 40%, transparent); }

.heatmap-detail { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.heatmap-detail__hint { margin: 0; font-size: var(--fs-sm); }
.heatmap-detail__head { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.heatmap-detail__head .heatcell { width: 22px; height: 22px; min-width: 22px; min-height: 22px; pointer-events: none; }
.heatmap-detail__desc { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink); line-height: var(--lh-body); }
.heatmap-detail__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.heatmap-detail__actions .btn { min-height: 44px; }

/* ── P05-4 pre/post-meeting: photo grid + roster card + evening recap ─────────
   Shared by views/leader/meetingToday.js + meetingRecap.js (one role-parameterized
   surface). Initials-avatar photo grid (P00 avatar, no external image hosts),
   tokenised, 44px tap targets, responsive to mobile + tablet. */
.view-meeting-today .meeting-today__meta,
.view-meeting-recap .card-meta { display: inline-flex; align-items: center; gap: var(--sp-2); }

.photo-grid {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.photo-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-1); padding: var(--sp-4) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); position: relative;
}
.photo-tile--guest { border-style: dashed; }
.photo-tile .avatar { margin-bottom: var(--sp-1); }
.photo-tile__name { font-weight: var(--fw-bold); color: var(--ink); line-height: var(--lh-tight); }
.photo-tile__sub { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-tight); }
.photo-tile__tag {
  display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: 2px;
  font-size: var(--fs-xs); color: var(--accent-ink, var(--accent-d));
}
.want-btn { margin-top: var(--sp-2); min-height: 44px; width: 100%; justify-content: center; }
.want-btn.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.meeting-today__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.meeting-today__actions .btn { min-height: 44px; }
.meeting-today__hint { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); color: var(--muted); }

.recap-section-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-lg); color: var(--ink);
}
.recap-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.recap-card {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.recap-card--done { opacity: .72; }
.recap-card__body { flex: 1; min-width: 0; }
.recap-card__titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.recap-card__note { margin: var(--sp-1) 0 0; color: var(--ink); line-height: var(--lh-body); }
.recap-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.recap-action { min-height: 44px; }

/* Tap-to-promise sheet (components/tapToPromise.js — on the P00 modal). */
.promise-sheet__intro { margin: 0 0 var(--sp-3); color: var(--ink); }
.promise-sheet__types { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.promise-sheet__type {
  display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--radius-pill); min-height: 44px;
}
.promise-sheet__type:has(input:checked) { border-color: var(--accent); background: var(--surface-2); }
.promise-sheet__field { margin-bottom: var(--sp-3); }
.promise-sheet__label { display: block; margin-bottom: var(--sp-1); font-weight: var(--fw-bold); color: var(--ink); }
.promise-sheet__sim { display: inline-flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--muted); }

@media (max-width: 600px) {
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .recap-card { flex-direction: column; }
  .meeting-today__actions .btn { flex: 1 1 100%; }
}

/* ── Anomaly alerts + Leader handover pack (P06-5, Area Manager) ──────────────
   Additive only. Built on the frozen .card/.btn/.status-pill primitives + design
   tokens (no raw hex); RAG tint comes from the --rag-* tokens. FA icons only.
   44px tap targets; responsive down to phone width. ───────────────────────── */

/* Anomaly alert cards (#/area/anomalies) */
.anomaly-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.anomaly-card {
  display: flex; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--rag-amber);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--sp-4);
}
/* Border is direction-coded (below=red concern / above=amber), not magnitude —
   the deviation pill carries magnitude/severity. The split is intentional. */
.anomaly-card--below { border-left-color: var(--rag-red); }
.anomaly-card--above { border-left-color: var(--rag-amber); }
.anomaly-card__rail {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); font-size: var(--fs-lg);
}
.anomaly-card__body { flex: 1 1 auto; min-width: 0; }
.anomaly-card__top {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; justify-content: space-between;
}
.anomaly-card__title { font-size: var(--fs-md); }
.anomaly-card__narr { color: var(--muted); margin: var(--sp-2) 0 var(--sp-3); }
.anomaly-card__facts {
  list-style: none; margin: 0 0 var(--sp-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
}
.anomaly-card__facts li { display: flex; flex-direction: column; }
.anomaly-card__fact-lbl { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.anomaly-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.anomaly-card__actions .btn { min-height: 44px; }

/* Anomaly banner (surfaced on #/area/dashboard) */
.anomaly-banner { border-left: 4px solid var(--rag-red); }
.anomaly-banner--above { border-left-color: var(--rag-amber); }
.anomaly-banner__row {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: var(--sp-1) 0 var(--sp-3);
}
.anomaly-banner__ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); font-size: var(--fs-lg);
}
.anomaly-banner__txt { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.anomaly-banner__txt span { color: var(--muted); font-size: var(--fs-sm); }
.anomaly-banner__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.anomaly-banner__actions .btn { min-height: 44px; }

/* Area handover framing (#/area/handover/:hubId/:role) */
.handover-holder { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.handover-note {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  color: var(--muted); font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0;
}
.handover-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.handover-actions .btn { min-height: 44px; }
.handover-resolved {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  width: 100%;
  background: color-mix(in srgb, var(--rag-green) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--rag-green) 35%, transparent);
  border-radius: var(--radius-sm); padding: var(--sp-3);
}
.handover-resolved strong { display: block; }
.handover-health__head { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.handover-health__score { font-size: var(--fs-2xl); font-weight: 700; line-height: 1; color: var(--accent); }

/* Handover checklist (shared shape — the leader view used inline styles; centralise) */
.handover-checklist { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.handover-checklist li { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-1) 0; }

@media (max-width: 600px) {
  .anomaly-card { flex-direction: column; }
  .anomaly-card__actions .btn, .anomaly-banner__actions .btn, .handover-actions .btn { flex: 1 1 auto; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * P07-3 — Megaphone announcements + smart 7am digest config
 * Reuses the frozen .card/.field/.switch/.tabs/.status-pill/.btn primitives +
 * design tokens; only layout/skin here. FA icons, 44px targets, responsive.
 * ─────────────────────────────────────────────────────────────────────────── */

.admin-megaphone .card__title,
.admin-digest .card__title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink);
  margin: 0 0 var(--sp-4);
}
.admin-megaphone .btn, .admin-digest .btn { min-height: 44px; }

/* Comms sub-nav (Megaphone ⇄ Digest) — link-styled tabs */
.comms-subnav { margin: 0 0 var(--sp-5); }
.comms-subnav .tab { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; }

/* Two-column layout that stacks on narrow screens */
.megaphone-grid, .digest-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5); align-items: start;
}
@media (max-width: 900px) {
  .megaphone-grid, .digest-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Composer ── */
.megaphone-form { display: grid; gap: var(--sp-3); }
.megaphone-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 520px) { .megaphone-form__row { grid-template-columns: 1fr; } }
.megaphone-reach {
  margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius-sm); color: var(--ink); font-weight: var(--fw-bold);
  display: flex; align-items: center; gap: var(--sp-2);
}
.megaphone-preview__label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--sp-2);
}
.megaphone-form__actions { margin-top: var(--sp-4); }

/* Member-facing announcement card (preview + reused idea in list) */
.megaphone-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); background: var(--surface-2); display: grid; gap: var(--sp-2);
}
.megaphone-card.is-high { border-color: color-mix(in srgb, var(--rag-amber) 50%, var(--line)); }
.megaphone-card__chrome {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-black); text-transform: uppercase;
  letter-spacing: .04em; color: var(--fresh-green-ink);
}
.megaphone-card__img { width: 100%; max-height: 160px; object-fit: cover; border-radius: var(--radius-sm); }
.megaphone-card__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); }
.megaphone-card__body { margin: 0; color: var(--ink-soft); font-size: var(--fs-base); }
.megaphone-card__cta { justify-self: start; text-decoration: none; margin-top: var(--sp-1); }

/* ── Sent list + receipts ── */
.megaphone-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (max-width: 520px) { .megaphone-tiles { grid-template-columns: 1fr; } }
.megaphone-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.megaphone-row { padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.megaphone-row.is-expired { opacity: .72; }
.megaphone-row__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.megaphone-row__title { margin: 0; font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-md); }
.megaphone-row__pills { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.megaphone-row__body { margin: 0; color: var(--ink-soft); font-size: var(--fs-base); }
.megaphone-row__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--muted); align-items: center;
}
.megaphone-row__aud, .megaphone-row__receipts { display: inline-flex; align-items: center; gap: 4px; }
.megaphone-row__receipts { font-weight: var(--fw-bold); color: var(--ink); }
.megaphone-bar { height: 8px; border-radius: var(--radius-pill); background: var(--bg); overflow: hidden; }
.megaphone-bar__fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.megaphone-row__note { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.megaphone-row .btn { justify-self: start; }

.megaphone-receipts__summary { margin: 0 0 var(--sp-3); color: var(--ink); font-weight: var(--fw-bold); }
.megaphone-receipts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.megaphone-receipts__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.megaphone-receipts__more { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* ── Digest config ── */
.digest-toggles { display: grid; gap: var(--sp-2); }
.digest-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.digest-toggle__text { display: grid; gap: 2px; }
.digest-toggle__name { margin: 0; font-weight: var(--fw-bold); color: var(--ink); display: flex; align-items: center; gap: var(--sp-2); }
.digest-toggle__blurb { margin: 0; font-size: var(--fs-sm); color: var(--muted); max-width: 42ch; }
.digest-subhead { font-size: var(--fs-sm); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: var(--sp-4) 0 var(--sp-2); }
.digest-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 640px) { .digest-roles { grid-template-columns: 1fr; } }
.digest-note { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* ── Digest preview (email mock) ── */
.digest-pick { margin-bottom: var(--sp-3); }
.digest-email {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); padding: var(--sp-4); display: grid; gap: var(--sp-3);
}
.digest-email__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.digest-email__brand { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-black); color: var(--fresh-green-ink); }
.digest-email__time { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-bold); }
.digest-email__hi { margin: 0; color: var(--ink); font-weight: var(--fw-bold); }
.digest-email__empty { margin: 0; color: var(--muted); }
.digest-block { display: grid; gap: var(--sp-1); }
.digest-block__head { margin: 0; display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .03em; }
.digest-block__lines { margin: 0; padding-left: var(--sp-5); color: var(--ink-soft); font-size: var(--fs-base); display: grid; gap: 2px; }
.digest-email__foot { margin: var(--sp-3) 0 0; }

/* ── Member opt-in ── */
.digest-optin { margin-top: var(--sp-5); }
.digest-optin__lede { margin: 0 0 var(--sp-3); color: var(--ink-soft); }
.digest-optin__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.digest-optin__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.digest-optin__who { display: grid; gap: 2px; }
.digest-optin__name { font-weight: var(--fw-bold); color: var(--ink); }
.digest-optin__sub { font-size: var(--fs-sm); color: var(--muted); }

/* ── Crown Rewards admin (P07-4) — reuses card/table/stat-grid; only these
 *    layout helpers are new. Accent = the admin emerald (body[data-role]). ── */
.admin-subnav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-5); }
.admin-subnav__tab { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px var(--sp-4); border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; }
.admin-subnav__tab:hover { border-color: var(--accent); color: var(--accent); }
.admin-subnav__tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.admin-crown__activity { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.admin-crown__activity-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.admin-crown__activity-row:first-child { border-top: 0; }
.admin-crown__activity-ico { flex: 0 0 auto; color: var(--accent); }
.admin-crown__activity-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.admin-crown__activity-what { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.admin-crown__activity-amt { flex: 0 0 auto; font-weight: var(--fw-black); color: var(--ink); }
.admin-crown__campaigns { margin-top: var(--sp-2); }
.admin-crown__campaign .status-pill { align-self: flex-start; }
.admin-crown__campaign-actions,
.admin-crown__draw-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.admin-crown__form { display: grid; gap: var(--sp-4); }
.admin-crown__form .field { margin: 0; }
.admin-crown__winner { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-4) 0 0; padding: var(--sp-4); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.admin-crown__winner-ico { flex: 0 0 auto; font-size: 1.4rem; color: var(--accent); }
.admin-crown__tally-winner { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-black); color: var(--accent); }

/* ==========================================================================
   Franchise / region console (P07-6) — regions grid, launch wizard, white-label
   preview, region-manage. Tokens only; the white-label tint is a SCOPED --accent
   override applied in JS (constitution §5), never an ad-hoc hex here.
   ========================================================================== */
.franchise { display: flex; flex-direction: column; gap: var(--sp-5); }
.franchise-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent-ink); text-decoration: none; margin-bottom: var(--sp-2); }
.franchise-back:hover { text-decoration: underline; }

/* regions grid */
.franchise-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.franchise-card__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.franchise-card__top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.franchise-card__top .card-title { flex: 1 1 auto; min-width: 0; }
.franchise-swatch { width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); flex: 0 0 auto; }
.franchise-pill { border: 1px solid var(--line); }
.franchise-pill--green { color: var(--rag-green-ink); border-color: color-mix(in srgb, var(--rag-green) 50%, var(--line)); }
.franchise-pill--amber { color: var(--rag-amber-ink); border-color: color-mix(in srgb, var(--rag-amber) 50%, var(--line)); }
.franchise-pill--neutral { color: var(--muted); }
.franchise-card__counts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.franchise-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 10px; }
.franchise-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: auto; }
.franchise-card__open { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent-ink); text-decoration: none; min-height: 44px; }

/* stepper */
.franchise-steps { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.franchise-step { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.franchise-step__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); font-size: var(--fs-xs); }
.franchise-step.is-active { color: var(--accent-ink); }
.franchise-step.is-active .franchise-step__n { border-color: var(--accent); color: var(--accent-ink); }
.franchise-step.is-done { color: var(--ink); }
.franchise-step.is-done .franchise-step__n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* wizard panel */
.franchise-wizard { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); background: var(--surface); }
.franchise-wizard__step { display: flex; flex-direction: column; gap: var(--sp-4); }
.franchise-wizard__cancel { align-self: flex-start; margin-top: var(--sp-3); }
.franchise-fieldtitle h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.franchise-fieldtitle .card-meta { margin: 0; }

.franchise-source { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.franchise-source strong { color: var(--ink); }

.franchise-targets, .region-manage__areagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.franchise-target { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); min-height: 56px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-weight: var(--fw-bold); color: var(--ink); text-align: left; }
.franchise-target:hover { border-color: var(--accent); }
.franchise-target.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.franchise-target__name { flex: 1 1 auto; }

.franchise-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.franchise-swatch--pick { width: 44px; height: 44px; min-height: 44px; cursor: pointer; padding: 0; }
.franchise-swatch--pick.is-selected { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }

.franchise-checklist { display: flex; flex-direction: column; gap: var(--sp-2); }
.franchise-check { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.franchise-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }

.franchise-navrow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
.franchise-launch-guard { display: flex; align-items: center; gap: 6px; color: var(--amber-ink, var(--muted)); }

/* review + progress */
.franchise-review { display: grid; gap: var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); background: var(--surface-2); }
.franchise-review__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: 6px 0; border-top: 1px solid var(--line); }
.franchise-review__row:first-child { border-top: 0; }
.franchise-review__k { color: var(--muted); font-size: var(--fs-sm); }
.franchise-review__v { color: var(--ink); font-weight: var(--fw-bold); text-align: right; overflow-wrap: anywhere; }
.franchise-progress { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.franchise-progress__row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); }
.franchise-progress__row.is-done { color: var(--ink); }
.franchise-progress__ico { color: var(--accent); display: inline-flex; }
.franchise-progress__row:not(.is-done) .franchise-progress__ico svg { animation: integ-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .franchise-progress__row:not(.is-done) .franchise-progress__ico svg { animation: none; } }

.franchise-done { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-3); }
.franchise-done__banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); color: var(--accent-ink); font-size: var(--fs-lg); }
.franchise-done__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* white-label preview — the scoped --accent override is set inline in JS */
.franchise-preview { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.franchise-preview__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.franchise-preview__brand { font-weight: var(--fw-black); color: var(--accent-ink); }
.franchise-preview__brand strong { color: var(--accent-ink); }
.franchise-preview__cta { min-height: 36px; }
.franchise-preview__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.franchise-preview__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.franchise-preview__note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* region-manage */
.region-manage__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.region-manage__brand { display: flex; flex-direction: column; gap: var(--sp-4); }
.region-area { display: flex; flex-direction: column; gap: var(--sp-3); }
.region-area__top { display: flex; align-items: center; gap: var(--sp-2); }
.region-area__top .card-title { flex: 1 1 auto; }
.region-area__rename { align-self: flex-start; }
.region-area__hubs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.region-hub { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.region-hub__name { font-weight: var(--fw-bold); color: var(--ink); }
.region-hub__move { display: inline-flex; align-items: center; gap: 6px; }
.region-hub__movelabel { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); }
.region-hub__select { min-height: 44px; padding: 4px 10px; font-size: var(--fs-sm); width: auto; }

/* ── P08-1 events hub + SEO event page + registration (Eventbrite replacement) ─*/
.events-hub__hero, .event-page__hero { padding: var(--sp-6); border-radius: var(--radius); background: var(--surface); }
.events-hub { padding-bottom: 96px; }
.event-page { padding-bottom: 112px; }

/* filter bar */
.events-filter { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: var(--sp-5) 0 var(--sp-4); }
.events-filter__search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.events-filter__search .input { width: 100%; padding-left: 38px; min-height: 44px; }
.events-filter__search-icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.events-filter__selects { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.events-filter__select { min-height: 44px; width: auto; padding: 4px 10px; font-size: var(--fs-sm); }
.events-hub__count { margin: 0 0 var(--sp-4); }

/* event cards */
.events-card { display: flex; flex-direction: column; gap: var(--sp-2); cursor: pointer; }
.events-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.events-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.events-card__price { font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .04em; }
.events-card__title { margin: 0; font-size: var(--fs-base); }
.events-card__facts { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.events-card__facts li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink); }
.events-card__facts li .fa-icon { color: var(--accent-ink); margin-top: 2px; flex: 0 0 auto; }
.events-card__cta { margin-top: auto; padding-top: var(--sp-2); }
/* phone-first public surface — this card CTA meets the 44px touch target
   (scoped to the events card; does not touch the shared .btn-sm) */
.events-card__view { min-height: 44px; }

/* event page detail */
.event-page__grid { margin-top: var(--sp-6); }
.event-page__know { margin-top: var(--sp-7); }
.event-page__know-card .card-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); }
.event-page__know-card .card-title .fa-icon { color: var(--accent-ink); }
.event-page__register { margin-top: var(--sp-7); }
.event-page__form { padding: var(--sp-5); }
.event-page__confirm { padding: var(--sp-6); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.event-page__confirm .card-title { margin: var(--sp-1) 0 var(--sp-2); }
.event-page__blocked { background: color-mix(in srgb, var(--rag-amber) 12%, var(--surface)); }

/* three-strike / lto inline notices (honest, never a dead end) */
.event-page__notice { border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.event-page__notice p { margin: 0; display: flex; align-items: flex-start; gap: var(--sp-2); }
.event-page__notice.is-block { background: color-mix(in srgb, var(--rag-amber) 16%, var(--surface)); color: var(--rag-amber-ink); }
.event-page__notice.is-lto { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-ink); }
.event-page__notice .fa-icon { margin-top: 2px; flex: 0 0 auto; }

/* "wrap Eventbrite, don't rip it out" badge */
.eventbrite-note { margin-top: var(--sp-6); padding: var(--sp-4); border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.eventbrite-note--compact { margin-top: 0; }
.eventbrite-note__badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: .04em; color: var(--rag-green-ink); }
.eventbrite-note__badge .fa-icon { color: var(--rag-green-ink); }
.eventbrite-note__body { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }

@media (max-width: 768px) {
  .events-filter__selects { width: 100%; }
  .events-filter__select { flex: 1 1 44%; }
  .events-card__top { flex-wrap: wrap; }
  .guest-stickybar__inner { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .guest-stickybar .btn { width: 100%; }
  /* extra clearance so a 2-3 line wrapped hub name in the sticky "Be our guest"
     bar can never tuck the trailing Eventbrite badge under the fixed bar */
  .event-page { padding-bottom: 148px; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * P08-2 payments-sim — invoice card, invoice/receipt detail, dunning ladder.
 * All colour via tokens; builds on the frozen .card/.status-pill/.btn/.sim-tag.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── invoice / receipt detail (views/shared/invoice-detail.js) ─────────────── */
.view-invoice-detail { display: grid; gap: var(--sp-4); }
.view-invoice-detail .demo-row .btn { min-height: 44px; }
.invoice-receipt { display: grid; gap: var(--sp-4); border-top: 4px solid var(--accent); }
.invoice-receipt__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.invoice-receipt__brand { font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--ink); }
.invoice-receipt__brand span { font-weight: var(--fw-regular); color: var(--muted); text-transform: lowercase; }
.invoice-receipt__synced { margin: 0; font-size: var(--fs-xs); color: var(--muted); }

.invoice-lines__table { width: 100%; border-collapse: collapse; }
.invoice-lines__table th, .invoice-lines__table td { text-align: left; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.invoice-lines__table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice-lines__table tr.is-credit th, .invoice-lines__table tr.is-credit td { color: var(--rag-green-ink); }
.invoice-lines__table tfoot .invoice-lines__total th, .invoice-lines__table tfoot .invoice-lines__total td { border-bottom: 0; border-top: 2px solid var(--line); font-weight: var(--fw-black); color: var(--ink); font-size: var(--fs-md); }

/* ── dunning ladder (views/admin/dunning-queue.js + shared panel) ──────────── */
.admin-dunning { display: grid; gap: var(--sp-5); }
.admin-dunning__empty { display: flex; align-items: center; gap: 6px; color: var(--rag-green-ink); }
.admin-dunning__sim { margin: 0; }
.admin-dunning__tier { display: grid; gap: var(--sp-3); }
.admin-dunning__tier-head { display: flex; align-items: center; gap: var(--sp-3); }
.admin-dunning__count { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-bold); }
.admin-dunning__tier-copy { margin: 0; color: var(--muted); }

.dunning-row { display: grid; gap: var(--sp-3); }
.dunning-row.is-paused { opacity: .85; border-left: 4px solid var(--rag-amber); }
.dunning-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.dunning-row__name { font-weight: var(--fw-bold); color: var(--ink); }
.dunning-row__sub { font-size: var(--fs-xs); }
.dunning-row__amt { font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--ink); white-space: nowrap; }
.dunning-row__paused-flag { margin: 0; font-size: var(--fs-xs); color: var(--rag-amber-ink); display: flex; align-items: center; gap: 6px; }
.dunning-row__actions { flex-wrap: wrap; }
.dunning-row__actions .btn { min-height: 44px; }

.dunning-panel { display: grid; gap: var(--sp-3); border-left: 4px solid var(--rag-amber); }
.dunning-panel__head { display: flex; align-items: center; gap: 6px; }

.dunning-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.dunning-timeline li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink); }
.dunning-timeline__dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.dunning-timeline__dot.is-amber { background: color-mix(in srgb, var(--rag-amber) 22%, var(--surface)); color: var(--rag-amber-ink); }
.dunning-timeline__dot.is-red { background: color-mix(in srgb, var(--rag-red) 16%, var(--surface)); color: var(--rag-red-ink); }
.dunning-timeline__dot.is-green { background: color-mix(in srgb, var(--rag-green) 18%, var(--surface)); color: var(--rag-green-ink); }

@media (max-width: 768px) {
  .dunning-row__actions .btn { flex: 1 1 auto; }
}