/* ============================================================================
   PRPL Performance Pulse (P3) — PRPL Document Design System
   Ported from the prototype's Stylesheet.html (design_handoff_gm_review_tool)
   with the accessibility corrections from the four-lens review baked in:

   - muted text is #666666 (the prototype's #787878 fails AA: 4.42:1 on white)
   - minimum font size anywhere is 11px (prototype had 9–10px captions)
   - interactive control borders are ≥3:1 against their background (#949494)
   - global :focus-visible outline
   - the orange accent is decorative only — never text

   Component classes are deliberately generic (btn/field/seg/check-row/toast/
   tbl/status-pill) — the admin app reuses this file later.

   Documented contrast ratios (against white card unless noted):
     ink    #262022  → 15.9:1          blue  #3548DF → 6.6:1 (5.6:1 on bluesoft)
     mut    #666666  → 5.7:1 (4.9:1 on paper #EEEEEE)
     red    #C1272D  → 5.9:1           grn   #1A5455 → 9.3:1
     ctl border #949494 → 3.0:1 (UI component minimum)
   Light theme only, by design.
   ========================================================================== */

:root {
  --ink: #262022;
  --mut: #666666;          /* corrected from prototype #787878 (AA) */
  --line: #E4E4E7;         /* decorative dividers only — never control borders */
  --ctl-border: #949494;   /* interactive control borders, ≥3:1 on white */
  --paper: #EEEEEE;
  --card: #FFFFFF;
  --blue: #3548DF;
  --blue-deep: #2C3BC4;
  --bluesoft: #E9EBFB;
  --grn: #1A5455;
  --grnsoft: #E4EDED;
  --orange: #FF7639;       /* decorative accent only — never text */
  --pink: #F9B4B2;         /* decorative accent only — never text */
  --red: #C1272D;
  --redsoft: #FBE7E6;
  --radius: 2px;
  --font: 'PP Neue Montreal', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Global keyboard focus — applies to every interactive element. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Layout ────────────────────────────────────────────────────────────── */

.app-main {
  max-width: 440px;
  margin: 0 auto;
  padding: 32px 22px 64px;
  min-height: 60vh;
}

.center { text-align: center; }

.hr {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 18px 0;
}

.rowhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* ── Typography ────────────────────────────────────────────────────────── */

h1, .qh {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 6px 0 6px;
  text-wrap: balance;
}

.eyebrow {
  font: 600 11px/1.2 var(--font);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 8px;
}

.sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mut);
  margin: 0 0 18px;
}
.sub b, .sub strong { color: var(--ink); font-weight: 600; }

.cobrand {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 700 13px var(--font);
  margin-bottom: 20px;
}
.cobrand__prpl { color: var(--blue); }
.cobrand__x { color: var(--mut); font-weight: 500; }

/* ── Fields ────────────────────────────────────────────────────────────── */

.field-wrap { margin-bottom: 16px; }

.lbl {
  display: block;
  font: 600 12px/1.3 var(--font);
  margin-bottom: 6px;
  color: var(--ink);
}
.lbl .hint-text { color: var(--mut); font-weight: 400; }

input[type='text'],
textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--ctl-border);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 12px;
  font: 400 14px/1.4 var(--font);
  min-height: 44px;
}
input[type='text']::placeholder,
textarea::placeholder { color: var(--mut); }
input[type='text']:focus,
textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}
textarea { min-height: 76px; resize: vertical; }

/* Inline validation. aria-live containers exist from first render so
   announcements are reliable; text is injected on failed submit. */
.field-error {
  color: var(--red);
  font: 600 12px/1.4 var(--font);
  margin: 6px 0 0;
  min-height: 0;
}
.field-error:empty { margin: 0; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font: 600 14px var(--font);
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
}
.btn--primary { background: var(--blue); }
.btn--primary:hover { background: var(--blue-deep); }
.btn--ghost { background: var(--card); color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost:hover { background: var(--paper); }
.btn--danger { background: var(--card); color: var(--red); border: 1px solid var(--red); }
.btn--danger:hover { background: var(--redsoft); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--auto { width: auto; }
.btn--small { min-height: 44px; padding: 9px 14px; font-size: 12px; }

/* Quiet text-link button (secondary affordances: "Not you?", "report it"). */
.btn--link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  background: none;
  border: none;
  color: var(--blue);
  font: 600 13px var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  width: auto;
}
.btn--link:hover { color: var(--blue-deep); }

.btn-row { display: flex; gap: 10px; }
.btn-row .btn--ghost { flex: 1; }
.btn-row .btn--primary { flex: 2; }

.stack-8 > * + * { margin-top: 8px; }

/* ── Segmented rating control (the signature element) ──────────────────────
   Real radio inputs styled as the prototype's worded pills. The input covers
   the whole pill (opacity 0, not display:none) so it stays clickable,
   focusable and arrow-key operable; :checked/:focus-visible styling flows
   through :has(). Numeric captions are 11px (minimum size rule). */

.rate-group { border: 0; padding: 0; margin: 0 0 18px; min-inline-size: 0; }
.rate-group legend { padding: 0; }

.seg { display: flex; gap: 6px; margin-top: 6px; }

.segb {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  border: 1px solid var(--ctl-border);
  border-radius: var(--radius);
  padding: 9px 4px;
  text-align: center;
  font: 600 13px/1.2 var(--font);
  color: var(--mut);
  background: var(--card);
  cursor: pointer;
}
.segb input[type='radio'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.segn { display: block; font: 400 11px/1 var(--font); color: var(--mut); }

.segb:has(input:checked) {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--bluesoft);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.segb:has(input:checked) .segn { color: var(--blue); }
.segb:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.rate-group.invalid .segb { border-color: var(--red); }
.rate-group.invalid .segb:has(input:checked) {
  border-color: var(--blue); /* a chosen pill is never painted as an error */
}

/* ── Progress ring ─────────────────────────────────────────────────────── */

.ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--blue) calc(var(--pct, 0) * 1%), var(--line) 0);
}
.ring__inner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px var(--font);
  color: var(--blue);
}

/* ── Checklist hub rows ────────────────────────────────────────────────── */

.check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 20px;
  padding: 0;
  list-style: none;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 12px;
  border: 1px solid var(--ctl-border);
  border-radius: var(--radius);
  background: var(--card);
  font: 600 13px var(--font);
  color: var(--ink);
  text-align: left;
}
button.check-row { cursor: pointer; }
button.check-row:hover { border-color: var(--blue); background: var(--bluesoft); }

.check-row--done { color: var(--mut); }
.check-row--done .check-row__name { text-decoration: line-through; font-weight: 500; }

.check-row__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.check-row__meta { font: 400 12px var(--font); color: var(--mut); display: block; }

.check-row__state { font: 600 11px var(--font); color: var(--mut); white-space: nowrap; }
.check-row__state--submitted { color: var(--grn); }
.check-row__state--draft { color: var(--blue); }

.check-row .btn--small { width: auto; flex: none; }

.state-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 var(--font);
  border: 1px solid var(--ctl-border);
  background: var(--card);
  color: var(--mut);
}
.state-dot--submitted { background: var(--grnsoft); border-color: var(--grn); color: var(--grn); }
.state-dot--draft { background: var(--bluesoft); border-color: var(--blue); color: var(--blue); }
.state-dot--skipped { background: var(--paper); }

/* ── Inline panels (skip reasons, "not you?", issue report) ────────────── */

.panel {
  background: var(--card);
  border: 1px solid var(--ctl-border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 12px 0 16px;
}
.panel .lbl { margin-top: 0; }

.choice-list { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 12px; }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ctl-border);
  border-radius: var(--radius);
  background: var(--card);
  font: 600 13px var(--font);
  color: var(--ink);
  cursor: pointer;
  position: relative;
}
.choice input[type='radio'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.choice__mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ctl-border);
  flex: none;
  background: var(--card);
}
.choice:has(input:checked) { border-color: var(--blue); background: var(--bluesoft); color: var(--blue); }
.choice:has(input:checked) .choice__mark {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: inset 0 0 0 3px var(--bluesoft);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Manager ad-hoc add (ADR-0020): trigger + panel mounted below the checklist
   on the hub and inside the "someone missing?" block on congratulations. */
.add-person { margin-top: 14px; }

/* Revealed sub-form inside the landing "not you?" option list — the left
   rule visually nests the form under the option that disclosed it. */
.opt-form {
  border-left: 2px solid var(--line);
  padding: 4px 0 2px 12px;
  margin: 2px 0 6px;
}
.opt-form .sub { margin-bottom: 12px; }

/* Orange-accented callout — the accent is the border, never the text. */
.hint {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--orange);
  padding: 10px 12px;
  color: var(--ink);
  font-size: 12px;
  margin-bottom: 14px;
}

/* ── Autosave indicator ────────────────────────────────────────────────── */

.save-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  font: 600 12px var(--font);
  color: var(--mut);
}
.save-state--saved { color: var(--grn); }
.save-state--error { color: var(--red); }

/* ── Confirmation / congratulations marks ──────────────────────────────── */

.confirm-check,
.congrats-mark {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 16px;
  font: 700 26px var(--font);
}
.confirm-check { width: 56px; height: 56px; background: var(--grnsoft); color: var(--grn); }
.congrats-mark { width: 64px; height: 64px; background: var(--blue); color: #fff; font-size: 30px; }
.status-mark { width: 56px; height: 56px; background: var(--paper); color: var(--mut); border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 8px auto 16px; font: 700 24px var(--font); }

.up-next {
  border: 1px solid var(--blue);
  background: var(--bluesoft);
  color: var(--blue);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  font: 600 14px var(--font);
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}

.stat-row { display: flex; justify-content: center; gap: 28px; margin-bottom: 18px; }
.stat { text-align: center; }
.stat__num { font: 700 24px var(--font); color: var(--blue); }
.stat__label { font-size: 11px; color: var(--mut); }

/* ── Confetti (congrats only; guarded in CSS and in JS matchMedia) ─────── */

#confetti-layer { position: relative; height: 0; overflow: visible; }
.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .confetti-piece { opacity: 0.95; animation: confetti-fall linear forwards; }
}
@keyframes confetti-fall {
  to { transform: translateY(420px) rotate(540deg); opacity: 0; }
}

/* ── Screen transitions (reduced-motion aware) ─────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .screen-enter { animation: fade-up 0.3s ease-out; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Toasts (transport errors only) ────────────────────────────────────── */

#toast-host {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 100;
  width: min(92vw, 400px);
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: #fff;
  padding: 12px 14px;
  border-radius: var(--radius);
  font: 600 13px/1.4 var(--font);
  box-shadow: 0 4px 16px rgba(38, 32, 34, 0.25);
  max-width: 100%;
}
.toast--error { background: var(--red); }
.toast--success { background: var(--grn); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in 0.2s ease-out; }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Utilities ─────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* ── Admin-shared components (kept generic for the admin surface) ──────── */

.admin-wrap { max-width: 920px; margin: 0 auto; padding: 32px 28px 56px; }

.tbl-wrap { overflow-x: auto; }
.tbl { border-collapse: collapse; font: 400 12px var(--font); background: var(--card); width: 100%; }
.tbl th {
  background: var(--ink);
  text-align: left;
  padding: 9px 11px;
  font: 600 11px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid var(--ink);
  white-space: nowrap;
}
.tbl td { padding: 9px 11px; border: 1px solid var(--line); vertical-align: top; }
.tbl tr.highlight td { background: var(--bluesoft); }

.tag {
  font: 600 11px var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--mut);
}

.status-pill {
  display: inline-block;
  font: 600 11px var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius);
}
.status-pill--mapped { background: var(--grnsoft); color: var(--grn); }
.status-pill--corrected { background: var(--bluesoft); color: var(--blue); }
.status-pill--awaiting { background: var(--paper); color: var(--mut); }
.status-pill--flagged { background: var(--redsoft); color: var(--red); }

.rating-chip { margin-right: 12px; }
.rating-chip--below { color: var(--red); font-weight: 700; }

/* ============================================================================
   Staff admin app (appended by the admin-frontend build).
   Same token system; admin-only components below. The admin CSP forbids
   style="" attributes — anything dynamic is set via CSSOM in JS.
   ========================================================================== */

.admin-wrap--wide { max-width: 1120px; }

/* Admin buttons size to content (the manager flow's full-width default
   doesn't suit a dense console). Auth cards restore full width locally. */
.admin-app .btn { width: auto; }
.admin-app .btn-row .btn { flex: 0 0 auto; }

/* Inputs beyond type=text used by admin forms. */
.admin-app input[type='search'],
.admin-app input[type='email'],
.admin-app input[type='date'] {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--ctl-border);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 12px;
  font: 400 14px/1.4 var(--font);
  min-height: 44px;
}
.admin-app input[type='search']:focus,
.admin-app input[type='email']:focus,
.admin-app input[type='date']:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

/* ── Topbar + tab nav ──────────────────────────────────────────────────── */

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-topbar .cobrand { margin-bottom: 0; }
.admin-topbar__user {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 12px var(--font);
  color: var(--mut);
}

.tabnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 14px 0 22px;
  overflow-x: auto;
}
.tabnav__btn {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 14px;
  min-height: 44px;
  font: 600 12px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
  cursor: pointer;
  white-space: nowrap;
}
.tabnav__btn:hover { color: var(--ink); }
.tabnav__btn[aria-selected='true'] { color: var(--blue); border-bottom-color: var(--blue); }

.admin-rowhead { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.admin-rowhead .sub { margin-bottom: 0; max-width: 640px; }
.admin-rowhead .btn { flex: none; }
.qh--page { font-size: 20px; margin: 0 0 4px; }

.admin-foot {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 12px;
}

/* ── Auth screens ──────────────────────────────────────────────────────── */

.auth-card {
  max-width: 420px;
  margin: 10vh auto 0;
  text-align: center;
  padding: 28px 24px;
}
.auth-card__brand { justify-content: center; }
.admin-app .auth-card .btn { width: 100%; }
.google-g { flex: none; }

/* ── Cycle completion meter strip (the console's signature element) ────── */

.summary-strip {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.summary-strip__cycle { font: 700 14px var(--font); white-space: nowrap; }
.summary-strip__meterwrap { flex: 1; min-width: 220px; }
.meter {
  display: flex;
  height: 10px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}
.meter__seg--submitted { background: var(--blue); }
.meter__seg--skipped { background: var(--ctl-border); }
.summary-strip__legend { font: 400 12px var(--font); color: var(--mut); margin-top: 6px; }
.summary-strip__legend b { color: var(--ink); }

/* ── Issue-reports banner (Overview) ───────────────────────────────────── */

.issue-banner {
  background: var(--redsoft);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.issue-banner summary {
  cursor: pointer;
  padding: 12px 14px;
  min-height: 44px;
  font: 600 13px var(--font);
  color: var(--red);
}
.issue-list {
  margin: 0;
  padding: 0 14px 12px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: var(--ink);
}
.issue-list__msg { margin-top: 2px; overflow-wrap: anywhere; }

/* ── Consultant table detail pane + feedback stream ────────────────────── */

.tbl tr.detail-row > td { background: var(--paper); }
.tbl .tbl-empty { color: var(--mut); text-align: center; padding: 22px 12px; }
.detail-pane { padding: 4px 2px; }
.avg--low { color: var(--red); font-weight: 700; }
.flag-mark { color: var(--red); font-weight: 700; margin-left: 4px; }
.cell-meta { display: block; font: 400 11px var(--font); color: var(--mut); }
.cell-chips { max-width: 260px; }

.feedback-empty { padding: 6px 0; margin: 0; }
.feedback-entry { border-top: 1px solid var(--line); padding: 10px 0; }
.feedback-entry:first-child { border-top: 0; padding-top: 2px; }
.feedback-entry__head {
  font: 600 13px var(--font);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.feedback-entry__meta { color: var(--mut); font: 400 12px var(--font); }
.feedback-entry__ratings { margin: 5px 0 3px; font: 400 12px var(--font); }
.feedback-entry__note { font: 400 12px/1.55 var(--font); margin-top: 3px; overflow-wrap: anywhere; }
.feedback-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Void… is a quiet red text-link inside an entry's header row. */
.void-btn { color: var(--red); min-height: 0; padding: 0 2px; font-size: 12px; }
.void-btn:hover { color: var(--red); }

/* ── Inline add-row forms (add consultant / off-channel note) ──────────── */

.add-row-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--ctl-border);
  border-radius: var(--radius);
  padding: 12px;
  margin: 12px 0;
}
.add-row-form input { flex: 1; min-width: 160px; width: auto; }
.add-row-form__field { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.add-row-form__field input { width: 100%; min-width: 0; }
.add-row-form .btn { flex: none; }

/* ── Tiny table-action buttons ─────────────────────────────────────────── */

.btn--tiny { min-height: 34px; padding: 6px 10px; font-size: 11px; width: auto; }
.tbl-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  display: inline-block;
  font: 600 11px var(--font);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 2px 7px;
  margin: 1px 3px 1px 0;
}

.tag--warn { background: var(--redsoft); color: var(--red); }
.tag--assigned { text-transform: none; letter-spacing: 0; background: var(--bluesoft); color: var(--blue); }

.status-pill--active { background: var(--grnsoft); color: var(--grn); }
.status-pill--revoked { background: var(--paper); color: var(--mut); }
.tbl tr.row--attn td { background: var(--redsoft); }

/* ── Forms (links / cycles) ────────────────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 680px) {
  .form-grid, .form-grid--3 { grid-template-columns: 1fr; }
}
.link-form { margin-bottom: 18px; }
.hint--warn { border-left-width: 4px; margin-top: 8px; margin-bottom: 6px; }

/* ── Consultant multi-select picker ────────────────────────────────────── */

.picker {
  border: 1px solid var(--ctl-border);
  border-radius: var(--radius);
  background: var(--card);
}
.picker__tools {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  align-items: center;
}
.admin-app .picker__tools input[type='search'] {
  flex: 1;
  width: auto;
  min-width: 160px;
  min-height: 38px;
  padding: 8px 10px;
}
.picker__filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 12px var(--font);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.picker__filter input { accent-color: var(--blue); width: 15px; height: 15px; }
.picker__list { max-height: 260px; overflow: auto; padding: 4px 0; }
.picker__group-label {
  font: 600 11px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
  padding: 8px 12px 4px;
}
.picker__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font: 400 13px var(--font);
  cursor: pointer;
  flex-wrap: wrap;
}
.picker__opt:hover { background: var(--bluesoft); }
.picker__opt input { accent-color: var(--blue); width: 15px; height: 15px; flex: none; }
.picker__name { font-weight: 600; }
.picker__count {
  font: 600 12px var(--font);
  color: var(--mut);
  padding: 8px 12px;
  border-top: 1px solid var(--line);
}

/* ── Modals ────────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(38, 32, 34, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 90;
}
.modal {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow: auto;
  box-shadow: 0 12px 40px rgba(38, 32, 34, 0.35);
}
.modal__title { font: 700 18px var(--font); letter-spacing: -0.01em; margin: 0 0 10px; }
.modal__actions { margin-top: 16px; justify-content: flex-end; }
.copy-once-input { overflow-x: auto; }

/* ── Sync tab: panels, diff ledger, run history ────────────────────────── */

.sync-panel { margin-bottom: 20px; }
.sync-h { font: 700 15px var(--font); margin: 0 0 4px; }
.btn-row--start { justify-content: flex-start; margin-bottom: 4px; }

.diff-section { margin: 14px 0 4px; }
.diff-h { font: 700 13px var(--font); margin: 0 0 4px; }
.diff-h--del { color: var(--red); }
.diff-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding: 7px 0;
  font-size: 12px;
}
.diff-row--del { color: var(--red); }
.diff-fields { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.diff-before { color: var(--mut); }
.diff-arrow { color: var(--mut); }
.diff-counts { color: var(--mut); font-size: 12px; margin: 10px 0 6px; }
.sync-clean { color: var(--grn); font-weight: 600; }
.sync-applied { color: var(--grn); font: 600 13px var(--font); margin: 12px 0 4px; }

.sync-lastrun { font: 400 13px var(--font); margin: 10px 0 6px; }
.run-ok { color: var(--grn); font-weight: 700; }
.run-err { color: var(--red); font-weight: 700; }
.runs-details summary {
  cursor: pointer;
  font: 600 12px var(--font);
  color: var(--mut);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.runs-details .tbl-wrap { margin-bottom: 6px; }

/* Skip entries in the consultant stream (ADR-0018: skips are staff-visible signals). */
.feedback-entry--skip { opacity: 0.92; }
.feedback-entry--attention { border-left: 3px solid var(--red); padding-left: 10px; }
.tag--flag { background: var(--redsoft); color: var(--red); }