/* ============================================================
   SCREENS — screen-specific styling. Each section is keyed
   to a screen-id (data-screen attribute on its <section>).
   These are presentational specifics that aren't reusable
   primitives (those live in components.css).
   ============================================================ */

/* ============ INBOX CARDS ============ */
.inbox-stack { display: flex; flex-direction: column; gap: var(--sp-2); }
.inbox-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 14px;
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  align-items: center;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--easing);
}
.inbox-card:hover { border-color: var(--g-80); }
.inbox-card.team { background: var(--g-98); }
.inbox-card.completion { background: var(--green-98); border-color: var(--green-95); }
.inbox-card .body { flex: 1; min-width: 0; }
.inbox-card .title { font-size: 13px; color: var(--g-10); font-weight: var(--fw-medium); }
.inbox-card .meta { font-size: 11px; color: var(--g-50); margin-top: 2px; }
.inbox-card.completion .title { color: var(--green-50); font-size: var(--fs-meta); }
.inbox-card.completion .meta { color: var(--green-50); opacity: 0.75; }

/* ============ AGREEMENT DETAIL PAGE ============ */
.detail-frame { background: var(--surface); border: 0.5px solid var(--g-90); border-radius: var(--r-xl); overflow: hidden; }
.detail-header { padding: 14px 18px; border-bottom: 0.5px solid var(--g-90); }
.detail-header .top-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; }
.detail-header .agr-id { font-size: 11px; color: var(--g-70); font-family: var(--font-mono); }
.detail-header .view-as {
  margin-left: auto;
  font-size: 11px;
  color: var(--g-50);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
/* Watch toggle on Agreement detail (per ADR 0023) — operator marks Agreement as time-sensitive */
.detail-header .watch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--g-50);
  background: transparent;
  border: 1px solid var(--g-90);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.detail-header .watch-toggle:hover { border-color: var(--g-70); color: var(--g-30); }
.detail-header .watch-toggle.on {
  background: var(--theme-95);
  color: var(--theme-20);
  border-color: var(--theme-50);
}
.detail-header .watch-toggle.on i { color: var(--theme-50); }
.detail-header .watch-toggle i { font-size: 13px; }
.detail-header .title-row { display: flex; align-items: center; gap: 10px; }
.detail-header h2 { font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--g-10); flex: 1; min-width: 0; }
.detail-body { padding: 22px 18px 28px; display: flex; flex-direction: column; gap: 22px; }

/* Lifecycle timeline (3-node) */
.timeline { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
.timeline .step { padding-right: var(--sp-2); }
.timeline .step.mid { padding: 0 var(--sp-2); }
.timeline .step.end { padding-left: var(--sp-2); }
.timeline .step-row { display: flex; align-items: center; gap: 6px; }
.timeline .dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; position: relative; }
.timeline .dot.done { background: var(--green-95); border: 2px solid var(--green-50); }
.timeline .dot.curr { background: var(--green-50); }
.timeline .dot.curr::before { content: ''; position: absolute; inset: -3px; border: 1px solid var(--green-95); border-radius: 50%; }
.timeline .dot.future { background: var(--g-95); border: 0.5px solid var(--g-90); }
.timeline .step-label { font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--g-10); }
.timeline .step-label.muted { color: var(--g-50); font-weight: var(--fw-regular); }
.timeline .step-time { font-size: 11px; color: var(--g-50); margin-top: 4px; margin-left: var(--sp-5); }

/* Nudge (e.g. "expires in 9 days") */
.nudge {
  padding: 10px var(--sp-3);
  background: var(--yellow-98);
  border: 0.5px solid var(--yellow-95);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.nudge i { font-size: 16px; color: var(--yellow-50); flex-shrink: 0; }
.nudge p { font-size: var(--fs-meta); color: var(--g-30); flex: 1; }

/* Parties row */
.party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.party-card { padding: var(--sp-3) 14px; background: var(--surface); border: 0.5px solid var(--g-90); border-radius: var(--r-md); }
.party-card .role-label { font-size: 10px; color: var(--g-50); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.party-card .org-name { font-size: 13px; font-weight: var(--fw-medium); color: var(--g-10); }
.party-card .uen { font-size: 11px; color: var(--g-50); margin-top: 2px; }

/* Terms table */
.terms-table { background: var(--surface); border: 0.5px solid var(--g-90); border-radius: var(--r-md); }
.terms-row { display: grid; grid-template-columns: 140px 1fr; padding: 10px 14px; border-bottom: 0.5px solid var(--g-90); }
.terms-row:last-child { border-bottom: none; }
.terms-row .k { font-size: 11px; color: var(--g-50); }
.terms-row .v { font-size: var(--fs-meta); color: var(--g-10); }

/* Activity log */
.activity .ev { display: flex; gap: var(--sp-3); padding: 10px 0; border-bottom: 0.5px solid var(--g-90); }
.activity .ev:last-child { border-bottom: none; }
.activity .ev-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.activity .ev-dot.tx { background: var(--tx-50); }
.activity .ev-dot.bx { background: var(--bx-40); }
.activity .ev-dot.hx { background: var(--hx-40); }
.activity .ev-dot.green { background: var(--green-50); }
.activity .ev-dot.muted { background: var(--g-95); border: 1px solid var(--g-90); }
.activity .ev-body p { font-size: var(--fs-meta); color: var(--g-10); }
.activity .ev-body p strong { font-weight: var(--fw-medium); }
.activity .ev-time { font-size: 11px; color: var(--g-50); margin-top: 2px; }

/* Counterparty view side panel */
.cp-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  background: var(--surface);
  border-left: 0.5px solid var(--g-90);
  z-index: var(--z-side-panel);
  box-shadow: -4px 0 16px rgba(20, 24, 30, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(420px);
  transition: transform var(--motion-slow) var(--easing);
}
.cp-panel.open { transform: translateX(0); }
.cp-panel-head { padding: 14px 18px; border-bottom: 0.5px solid var(--g-90); display: flex; align-items: center; gap: 10px; }
.cp-panel-head h5 { font-size: 13px; font-weight: var(--fw-medium); flex: 1; }
.cp-panel-head .close { padding: 4px; background: transparent; border: none; cursor: pointer; }
.cp-panel-body { padding: 18px; overflow-y: auto; flex: 1; }
.cp-panel-body .note { font-size: 11px; color: var(--g-50); background: var(--yellow-98); padding: var(--sp-2) 10px; border-radius: var(--r-md); margin-bottom: 14px; }
.cp-panel-body .mini-h { font-size: 10px; font-weight: var(--fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-50); margin: 14px 0 6px; }

/* Acknowledgement banner (post-warning) */
.ack-banner {
  background: var(--green-98);
  border: 0.5px solid var(--green-95);
  border-left: 3px solid var(--green-50);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ack-banner i { font-size: 16px; color: var(--green-50); }
.ack-banner p { font-size: var(--fs-meta); color: var(--green-50); flex: 1; }
.ack-banner .x { cursor: pointer; opacity: 0.6; }

/* Renewed banner */
.renewed-banner {
  background: var(--green-98);
  border: 0.5px solid var(--green-95);
  border-left: 3px solid var(--green-50);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.renewed-banner i { font-size: 16px; color: var(--green-50); }
.renewed-banner p { font-size: var(--fs-meta); color: var(--green-50); flex: 1; }

/* ============ EMPTY-STATE INBOX ============ */
.empty-hero { padding: 28px var(--sp-6); position: relative; }
.empty-hero .new-here-pill {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--yellow-98);
  color: var(--yellow-50);
  border: 0.5px solid var(--yellow-95);
  border-radius: 14px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.empty-hero .new-here-pill .nb { background: var(--yellow-50); color: var(--yellow-98); border-radius: var(--sp-2); padding: 0 5px; font-size: 10px; }
.empty-hero h1 { font-size: 22px; font-weight: var(--fw-medium); margin: 0 0 6px; color: var(--g-10); }
.empty-hero .lede { font-size: 13px; color: var(--g-50); max-width: 440px; line-height: 1.5; }
.empty-hero .lede strong { font-weight: var(--fw-medium); color: var(--g-10); }
.empty-hero .help-link { font-size: var(--fs-meta); color: var(--theme-20); text-decoration: underline; }

.suggest-grid { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.suggest-card {
  display: block;
  padding: 18px;
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-xl);
  cursor: pointer;
}
.suggest-card.primary { background: var(--theme-20); border: none; }
.suggest-card .ic-pill {
  width: 36px;
  height: 36px;
  background: var(--theme-95);
  color: var(--theme-20);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
.suggest-card.primary .ic-pill { background: var(--theme-90); color: var(--theme-20); }
.suggest-card .ic-pill i { font-size: 20px; }
.suggest-card .ttl { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--g-10); margin: 0 0 4px; }
.suggest-card.primary .ttl { color: var(--theme-95); }
.suggest-card .desc { font-size: var(--fs-meta); color: var(--g-50); line-height: 1.5; }
.suggest-card.primary .desc { color: var(--theme-90); }
.suggest-card .more { font-size: 11px; color: var(--theme-20); margin-top: var(--sp-3); display: flex; align-items: center; gap: 4px; }
.suggest-card.primary .more { color: var(--theme-95); }

/* ============ PICKER FRAME (data element + counterparty) ============ */
.picker-frame { background: var(--surface); border: 0.5px solid var(--g-90); border-radius: var(--r-xl); overflow: hidden; }
.picker-search {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 0.5px solid var(--g-90);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.picker-search i { font-size: 16px; color: var(--g-50); }
.picker-search input { flex: 1; border: none; background: transparent; font-size: 13px; font-family: inherit; padding: 4px 0; color: var(--g-10); outline: none; }
.picker-search .meta { font-size: 11px; color: var(--g-50); }
.picker-toolbar {
  padding: 10px var(--sp-4);
  border-bottom: 0.5px solid var(--g-90);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.toggle-row { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--g-50); cursor: pointer; }
.toggle-row .toggle-track { width: 26px; height: 14px; background: var(--g-90); border-radius: 7px; position: relative; }
.toggle-row .toggle-knob { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: var(--surface); border-radius: 50%; transition: left var(--motion-base) var(--easing); }

/* Picker grid (tree + detail) */
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; }
.picker-tree { border-right: 0.5px solid var(--g-90); padding: var(--sp-2) 0; max-height: 380px; overflow-y: auto; }
.picker-tree details { margin-bottom: 4px; }
.picker-tree summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--g-10);
}
.picker-tree summary::-webkit-details-marker { display: none; }
.picker-tree summary i.chev { font-size: 14px; color: var(--g-50); }
.picker-tree summary .ct { margin-left: auto; font-size: 11px; color: var(--g-50); font-weight: var(--fw-regular); }
.picker-tree .leaf {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-4) 6px var(--sp-10);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--fs-meta);
  color: var(--g-10);
  width: 100%;
}
.picker-tree .leaf:hover { background: var(--g-98); }
.picker-tree .leaf.active { background: var(--theme-95); border-left: 2px solid var(--theme-50); padding-left: 38px; color: var(--theme-20); font-weight: var(--fw-medium); }
.picker-tree .leaf.active i { color: var(--theme-50); }
.picker-tree .leaf i { font-size: 13px; color: var(--g-50); }
.picker-tree .leaf .group-pill {
  margin-left: auto;
  padding: 1px 6px;
  background: var(--g-95);
  color: var(--g-30);
  border-radius: 3px;
  font-size: 10px;
  font-weight: var(--fw-medium);
}
.picker-tree .leaf.active .group-pill { background: var(--theme-90); color: var(--theme-20); }
.picker-tree .leaf .v-tag { color: var(--g-50); font-weight: var(--fw-regular); }

.picker-detail { padding: var(--sp-4); background: var(--g-98); max-height: 380px; overflow-y: auto; }
.picker-detail-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.picker-detail-head i { font-size: 18px; color: var(--theme-50); }
.picker-detail-head .name { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--g-10); }
.snapshot-label {
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-50);
  margin: var(--sp-3) 0 var(--sp-2);
}
.snapshot-list { display: flex; flex-direction: column; gap: 4px; }
.snapshot-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 10px;
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  cursor: pointer;
}
.snapshot-row i { font-size: 16px; color: var(--theme-50); }
.snapshot-row .nm { font-size: var(--fs-meta); color: var(--g-10); flex: 1; }
.snapshot-row .nm .v { color: var(--g-50); }
.add-individual {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-2) 10px;
  background: transparent;
  border: 0.5px dashed var(--g-90);
  border-radius: var(--r-md);
  margin-top: var(--sp-2);
  width: 100%;
  color: var(--g-50);
  font-size: var(--fs-meta);
  cursor: pointer;
}
.add-individual i { font-size: 14px; }
.snapshot-info {
  font-size: 11px;
  color: var(--g-50);
  margin: 14px 0 0;
  padding: var(--sp-2) 10px;
  background: var(--yellow-98);
  border-radius: var(--r-md);
  line-height: 1.5;
}
.snapshot-info i { font-size: 13px; vertical-align: -2px; margin-right: 4px; }

/* Hide the inline "Continue to counterparty" button when the wizard is
   active — the wizard-foot's Continue button is the canonical action.
   Outside the wizard (when the data-picker is browsed directly via the
   rail for concept-demo), the inline button is the only advance affordance,
   so it stays visible. Target both .picker-continue (dynamically rendered)
   and the inline .btn-primary that doesn't carry the class. */
body.in-wizard .screen[data-screen="data-picker"] .picker-detail .btn-primary { display: none; }

/* Hide the topbar "+ New Agreement" button while a wizard is active.
   Otherwise the user sees a "Create new" button while they're literally
   inside a creation flow — confusing. The wizard-foot handles the
   in-progress flow; the topbar button returns when the wizard exits. */
body.in-wizard .portal-frame .topbar [data-create-btn] { display: none; }

/* Counterparty list */
.cp-list .cp-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--g-90);
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.cp-list .cp-row:hover { background: var(--g-98); }
.cp-list .cp-row:last-child { border-bottom: none; }
.cp-body { flex: 1; min-width: 0; }
.cp-name { font-size: 13px; font-weight: var(--fw-medium); color: var(--g-10); }
.cp-meta { font-size: 11px; color: var(--g-50); margin-top: 1px; }

.list-foot {
  font-size: 11px;
  color: var(--g-50);
  padding: 10px var(--sp-4);
  background: var(--g-98);
  border-top: 0.5px solid var(--g-90);
  display: flex;
  align-items: center;
  gap: 6px;
}
.list-foot i { font-size: 13px; }

/* ============ WARNING FRAMES ============ */
.warn-frame { background: var(--surface); border: 0.5px solid var(--g-90); border-radius: var(--r-xl); padding: var(--sp-4) 18px; }
.warn-frame .step-tag { font-size: 11px; color: var(--g-50); margin-bottom: 2px; }
.warn-frame h3 { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--g-10); margin-bottom: 14px; }
.selected-cp {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: 10px var(--sp-3);
  background: var(--g-98);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}
.warn-panel {
  background: var(--yellow-98);
  border: 0.5px solid var(--yellow-95);
  border-left: 3px solid var(--yellow-50);
  border-radius: var(--r-md);
  padding: var(--sp-3) 14px;
  margin-bottom: 14px;
}
.warn-panel .row { display: flex; gap: 10px; }
.warn-panel i { font-size: 18px; color: var(--yellow-50); flex-shrink: 0; }
.warn-panel .ttl { font-size: 13px; font-weight: var(--fw-medium); color: var(--g-10); margin: 0 0 6px; }
.warn-panel .desc { font-size: var(--fs-meta); color: var(--g-30); margin: 0 0 var(--sp-2); line-height: 1.5; }
.warn-panel .desc strong { font-weight: var(--fw-medium); }
.warn-panel .audit { font-size: 11px; color: var(--g-50); }
.warn-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; }

/* Bulk modal */
.bulk-modal-veil {
  background: rgba(20, 24, 30, 0.45);
  border-radius: var(--r-xl);
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
  margin-bottom: 18px;
}
.bulk-modal { background: var(--surface); border: 0.5px solid var(--g-90); border-radius: var(--r-xl); width: 100%; max-width: 480px; overflow: hidden; }
.bulk-head { padding: var(--sp-4) 18px; border-bottom: 0.5px solid var(--g-90); display: flex; align-items: flex-start; gap: var(--sp-3); }
.bulk-head .ic { width: 32px; height: 32px; background: var(--yellow-98); color: var(--yellow-50); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bulk-head .ic i { font-size: 18px; }
.bulk-head h4 { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--g-10); margin: 0; }
.bulk-head .sub { font-size: var(--fs-meta); color: var(--g-50); margin: 4px 0 0; line-height: 1.5; }
.bulk-body { padding: 14px 18px; display: flex; flex-direction: column; gap: var(--sp-2); }
.bulk-row { display: flex; align-items: center; gap: 10px; padding: 10px var(--sp-3); background: var(--g-98); border-radius: var(--r-md); }
.bulk-row.strict { background: var(--yellow-98); border: 0.5px solid var(--yellow-95); }
.bulk-row .lbl { flex: 1; font-size: var(--fs-meta); color: var(--g-10); }
.bulk-row .lbl strong { color: var(--yellow-50); font-weight: var(--fw-medium); }
.bulk-row a { font-size: 11px; text-decoration: underline; }
.bulk-row a.tx { color: var(--tx-20); }
.bulk-row a.bx { color: var(--bx-20); }
.bulk-row .strict-note { font-size: 11px; color: var(--yellow-50); font-weight: var(--fw-medium); }
.bulk-ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px var(--sp-3);
  margin: var(--sp-2) 18px 14px;
  background: var(--theme-98);
  border: 0.5px solid var(--theme-90);
  border-radius: var(--r-md);
  cursor: pointer;
}
.bulk-ack input { margin-top: 2px; accent-color: var(--theme-50); }
.bulk-ack span { font-size: var(--fs-meta); color: var(--g-10); line-height: 1.5; }
.bulk-foot { padding: var(--sp-3) 18px; border-top: 0.5px solid var(--g-90); display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* Acting-from chip */
.acting-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--sp-2);
  background: var(--g-98);
  color: var(--g-50);
  border: 0.5px solid var(--g-90);
  border-radius: 12px;
  font-size: 10px;
  cursor: help;
}
.acting-pill i { font-size: 12px; }

/* ============ MIGRATION ============ */
.migration-frame { background: var(--surface); border: 0.5px solid var(--g-90); border-radius: var(--r-xl); overflow: hidden; }
.migration-panel {
  padding: var(--sp-4) 18px;
  background: var(--theme-98);
  border-left: 3px solid var(--theme-50);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.migration-panel .ic {
  width: 32px;
  height: 32px;
  background: var(--theme-95);
  color: var(--theme-20);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.migration-panel .ic i { font-size: 18px; }
.migration-panel .hd { display: flex; align-items: center; gap: var(--sp-2); }
.migration-panel h4 { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--g-10); margin: 0; }
.migration-panel .one-time { padding: 2px 6px; background: var(--theme-95); color: var(--theme-20); border-radius: 3px; font-size: 10px; font-weight: var(--fw-medium); }
.migration-panel .sub { font-size: var(--fs-meta); color: var(--g-50); margin: 4px 0 14px; line-height: 1.5; }
.migration-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.migration-li { display: flex; gap: 10px; align-items: flex-start; }
.migration-li .b { width: 4px; height: 4px; background: var(--theme-50); border-radius: 50%; margin-top: var(--sp-2); flex-shrink: 0; }
.migration-li p { font-size: var(--fs-meta); color: var(--g-30); line-height: 1.6; }
.migration-li p strong { font-weight: var(--fw-medium); color: var(--g-10); }
.migration-li p strong.brand { color: var(--theme-20); }
.migration-li p code {
  font-family: var(--font-mono);
  background: var(--g-98);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.migration-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); align-items: center; }
.migration-actions .auto-dismiss { margin-left: auto; font-size: 11px; color: var(--g-50); }
.migration-actions a.gl-link { font-size: var(--fs-meta); color: var(--theme-20); display: inline-flex; align-items: center; gap: 4px; }
.migration-actions a.gl-link i { font-size: 12px; }

.drafts-banner {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--green-98);
  border: 0.5px solid var(--green-95);
  border-left: 3px solid var(--green-50);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.drafts-banner > i { font-size: 20px; color: var(--green-50); flex-shrink: 0; }
.drafts-banner .body { flex: 1; }
.drafts-banner .body p.t { font-size: 13px; font-weight: var(--fw-medium); color: var(--green-50); }
.drafts-banner .body p.s { font-size: 11px; color: var(--green-50); margin-top: 2px; opacity: 0.85; }
.drafts-banner a { font-size: var(--fs-meta); color: var(--green-50); text-decoration: underline; font-weight: var(--fw-medium); flex-shrink: 0; }

.redirect-foot {
  margin-top: var(--sp-4);
  padding: 10px 14px;
  background: var(--g-98);
  border: 0.5px dashed var(--g-90);
  border-radius: var(--r-md);
  font-size: 11px;
  color: var(--g-50);
  line-height: 1.6;
}
.redirect-foot i { font-size: 13px; vertical-align: -2px; margin-right: 4px; }
.redirect-foot em { font-style: italic; }

/* ============ SP variants ============ */
.copy-variants { display: flex; flex-direction: column; gap: var(--sp-3); }
.variant-card { background: var(--surface); border: 0.5px solid var(--g-90); border-radius: var(--r-xl); padding: 14px var(--sp-4); }
.variant-tag {
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-50);
  margin-bottom: var(--sp-2);
}
.variant-q { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--g-10); margin-bottom: 10px; }
.variant-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.variant-options.single { grid-template-columns: 1fr; }
.variant-opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-3);
  background: var(--g-98);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  cursor: pointer;
}
.variant-opt .opt-head { display: flex; align-items: center; gap: var(--sp-2); }
.variant-opt .opt-head i { font-size: 16px; color: var(--g-50); }
.variant-opt .opt-head span { font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--g-10); }
.variant-opt .opt-desc { font-size: 11px; color: var(--g-50); }

/* ============ FOUNDATIONS (chip + brand) ============ */
.foundation-card { background: var(--g-98); border-radius: var(--r-xl); padding: 18px; margin-bottom: var(--sp-4); }
.foundation-card .h { font-size: var(--fs-meta); color: var(--g-50); margin-bottom: var(--sp-3); }
.chip-row-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  row-gap: 14px;
  column-gap: var(--sp-4);
  align-items: center;
}
.chip-row-grid .lbl { font-size: var(--fs-meta); color: var(--g-50); }
.chip-row { display: flex; gap: 10px; align-items: center; }
.chip-sm, .chip-md, .chip-lg { display: inline-flex; align-items: center; border-radius: var(--r-sm); font-weight: var(--fw-medium); line-height: 1; }
.chip-sm { gap: 4px; padding: 2px 6px; font-size: 11px; }
.chip-md { gap: 5px; padding: 3px var(--sp-2); font-size: var(--fs-meta); }
.chip-lg { gap: 6px; padding: 4px 10px; font-size: 13px; border-radius: var(--r-md); line-height: 1.1; }
.chip-sm .d { width: 6px; height: 6px; border-radius: 50%; }
.chip-md .d { width: 7px; height: 7px; border-radius: 50%; }
.chip-lg .d { width: 8px; height: 8px; border-radius: 50%; }
.chip-tx { background: var(--tx-95); color: var(--tx-20); }
.chip-tx .d { background: var(--tx-50); }
.chip-bx { background: var(--bx-95); color: var(--bx-20); }
.chip-bx .d { background: var(--bx-40); }
.chip-hx { background: var(--hx-95); color: var(--hx-20); }
.chip-hx .d { background: var(--hx-40); }

.dark-strip {
  background: var(--g-10);
  padding: var(--sp-3) 14px;
  border-radius: var(--r-md);
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.chip-dark-tx { background: var(--tx-20); color: var(--tx-90); }
.chip-dark-tx .d { background: var(--tx-80); }
.chip-dark-bx { background: var(--bx-20); color: var(--bx-90); }
.chip-dark-bx .d { background: var(--bx-80); }
.chip-dark-hx { background: var(--hx-20); color: var(--hx-90); }
.chip-dark-hx .d { background: var(--hx-80); }

.brand-card {
  background: var(--g-98);
  border-radius: var(--r-xl);
  padding: 18px;
  display: flex;
  gap: var(--sp-6);
  align-items: center;
}
.brand-card .logo-wrap { display: flex; align-items: center; gap: 10px; }
.brand-card .logo-wrap span { font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--g-10); letter-spacing: -0.01em; }
.brand-card .divider { height: 24px; width: 0.5px; background: var(--g-90); }
.brand-card .meta-k { font-size: 11px; color: var(--g-70); }
.brand-card .meta-v { font-size: 13px; color: var(--g-10); margin-top: 2px; }
.brand-card .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-left: 4px; }

.ramps { margin-top: var(--sp-4); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); }
.ramp { padding: 10px var(--sp-3); border: 0.5px solid var(--g-90); border-radius: var(--r-md); background: var(--surface); }
.ramp .name { font-size: 11px; color: var(--g-70); margin-bottom: 4px; }
.ramp .swatches { display: flex; gap: 4px; }
.ramp .swatches div { flex: 1; height: var(--sp-5); border-radius: 3px; }

/* ============ WIZARD CHROME ============ */
.wizard-bar {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-xl);
  padding: 14px 18px;
  margin-bottom: 14px;
  display: none;
}
body.in-wizard .wizard-bar { display: block; }
.wizard-bar .top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.wizard-bar .top h2 { font-size: var(--fs-body); font-weight: var(--fw-medium); flex: 1; }
.wizard-bar .top .cancel { font-size: var(--fs-meta); color: var(--g-50); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.wizard-bar .top .cancel i { font-size: 14px; }

.stepper { display: flex; align-items: center; gap: 0; }
.stepper .step { display: flex; align-items: center; gap: var(--sp-2); flex: 1; }
.stepper .step .num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--fw-medium);
  flex-shrink: 0;
}
.stepper .step.done .num { background: var(--green-50); color: #ffffff; }
.stepper .step.curr .num { background: var(--theme-50); color: #ffffff; box-shadow: 0 0 0 3px var(--theme-95); }
.stepper .step.future .num { background: var(--g-95); color: var(--g-50); }
.stepper .step .lbl { font-size: 11px; color: var(--g-50); }
.stepper .step.curr .lbl { color: var(--theme-20); font-weight: var(--fw-medium); }
.stepper .step.done .lbl { color: var(--g-30); }
.stepper .step + .step::before {
  content: '';
  flex: 0 0 16px;
  height: 1px;
  background: var(--g-90);
  margin-right: var(--sp-2);
}
.stepper .step.done + .step::before, .stepper .step + .step.done::before { background: var(--green-50); }

.wizard-foot {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-xl);
  padding: var(--sp-3) 18px;
  margin-top: 14px;
  display: none;
  align-items: center;
  justify-content: space-between;
}
body.in-wizard .wizard-foot { display: flex; }
.wizard-foot .left { display: flex; gap: var(--sp-2); }
.wizard-foot .right { display: flex; gap: var(--sp-2); }
.wizard-foot .pending-warn { font-size: 11px; color: var(--yellow-50); display: inline-flex; align-items: center; gap: 4px; }

/* ============ WIZARD STEPS (Terms / Review / Success) ============ */
.wiz-screen { background: var(--surface); border: 0.5px solid var(--g-90); border-radius: var(--r-xl); padding: 22px var(--sp-6); }
.wiz-screen h3 { font-size: var(--fs-body); font-weight: var(--fw-medium); margin-bottom: 4px; }
.wiz-screen .sub-lede { font-size: var(--fs-meta); color: var(--g-50); margin-bottom: 18px; line-height: 1.5; }

.terms-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-4); align-items: flex-start; }
.form-row .form-k { font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--g-10); padding-top: 6px; }
.form-row .form-k .opt { font-weight: var(--fw-regular); color: var(--g-50); font-size: 11px; display: block; margin-top: 2px; }
.form-row .form-v { display: flex; flex-direction: column; gap: 6px; }
.form-row select, .form-row input[type=date], .form-row input[type=text] {
  padding: 7px 10px;
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-meta);
  color: var(--g-10);
  background: var(--surface);
  outline: none;
}
.form-row select:focus, .form-row input:focus { border-color: var(--theme-50); }
.form-row .hint { font-size: 11px; color: var(--g-50); line-height: 1.5; }

.duration-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.duration-chips .d-chip {
  padding: 6px var(--sp-3);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  font-size: var(--fs-meta);
  cursor: pointer;
  background: var(--surface);
}
.duration-chips .d-chip.active { background: var(--theme-95); border-color: var(--theme-90); color: var(--theme-20); font-weight: var(--fw-medium); }

.toggle-row-inline { display: flex; align-items: center; gap: 10px; }
.toggle-row-inline .track-i {
  width: 32px;
  height: 18px;
  background: var(--g-90);
  border-radius: 9px;
  position: relative;
  cursor: pointer;
  transition: background var(--motion-base) var(--easing);
}
.toggle-row-inline .track-i.on { background: var(--theme-50); }
.toggle-row-inline .knob-i { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; background: var(--surface); border-radius: 50%; transition: left var(--motion-base) var(--easing); }
.toggle-row-inline .track-i.on .knob-i { left: 15px; }
.toggle-row-inline .lbl { font-size: var(--fs-meta); color: var(--g-10); }

/* Review summary */
.review-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.review-card { background: var(--g-98); border-radius: var(--r-md); padding: 14px var(--sp-4); }
.review-card .rc-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.review-card .rc-head i { font-size: 16px; color: var(--g-50); }
.review-card .rc-head .rc-title {
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-50);
  flex: 1;
}
.review-card .rc-head a.edit { font-size: 11px; color: var(--theme-20); cursor: pointer; }
.review-card .rc-body p { font-size: 13px; color: var(--g-10); margin-bottom: 2px; }
.review-card .rc-body p.muted { font-size: 11px; color: var(--g-50); }

/* Pack distribution table on wiz-review (ADR 0027). Mirrors the pack-split-mapping
   table but rendered as a read-only summary at confirm time. */
.r-pack-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12px;
  font-feature-settings: 'tnum';
}
.r-pack-table thead th {
  text-align: left;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-50);
  border-bottom: 0.5px solid var(--g-90);
  background: var(--surface);
}
.r-pack-table tbody td {
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--g-95);
  color: var(--g-10);
  vertical-align: middle;
}
.r-pack-table tbody tr:last-child td { border-bottom: 0; }
.r-pack-table tbody td:first-child { display: flex; align-items: center; gap: 8px; }
.r-pack-table tbody td:first-child i { color: var(--g-50); font-size: 14px; }
.r-pack-table tbody td:nth-child(2) { display: flex; align-items: center; gap: 8px; }
.r-pack-table tbody td .v { font-size: 11px; color: var(--g-50); }
.r-pack-foot {
  font-size: 11px;
  color: var(--g-50);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--g-95);
  line-height: 1.55;
}
.cp-avatar.sm {
  width: 20px;
  height: 20px;
  font-size: 9px;
  font-weight: 500;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-95);
  color: var(--theme-20);
  flex-shrink: 0;
}

/* Pack-aware success screen (ADR 0027) — member Agreement list. */
.s-pack-members {
  width: 100%;
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: var(--g-98);
  border-radius: var(--r-md);
  border: 0.5px solid var(--g-90);
  text-align: left;
}
.s-pack-label {
  font-size: 11px;
  color: var(--g-50);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--g-95);
  line-height: 1.5;
}
.s-pack-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.s-pack-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--g-10);
  padding: 4px 0;
}
.s-pack-list li code {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--g-30);
  flex-shrink: 0;
}
.s-pack-elem { font-weight: 500; color: var(--g-10); }
.s-pack-arrow { color: var(--g-70); font-size: 11px; }
.status-pill.pending {
  margin-left: auto;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--yellow-98, var(--g-95));
  color: var(--yellow-30, var(--g-30));
}

.review-warn {
  background: var(--yellow-98);
  border: 0.5px solid var(--yellow-95);
  border-left: 3px solid var(--yellow-50);
  border-radius: var(--r-md);
  padding: var(--sp-3) 14px;
  margin-top: var(--sp-3);
  display: flex;
  gap: 10px;
}
.review-warn i { font-size: 16px; color: var(--yellow-50); flex-shrink: 0; }
.review-warn p { font-size: var(--fs-meta); color: var(--g-30); line-height: 1.5; }

/* Success */
.success-frame {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-xl);
  padding: 36px 28px;
  text-align: center;
}
.success-frame .check-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-98);
  border: 2px solid var(--green-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.success-frame .check-ring i { font-size: 26px; color: var(--green-50); }
.success-frame h2 { font-size: var(--fs-h4); font-weight: var(--fw-medium); margin-bottom: 6px; }
.success-frame .agr-line { font-size: var(--fs-meta); color: var(--g-50); margin-bottom: 18px; }
.success-frame .agr-line code { font-family: var(--font-mono); background: var(--g-95); padding: 1px 6px; border-radius: 3px; }
.success-frame .next-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
}
.success-frame .next-card { padding: 14px; background: var(--g-98); border-radius: var(--r-md); cursor: pointer; text-align: left; }
.success-frame .next-card:hover { background: var(--theme-98); }
.success-frame .next-card i { font-size: 18px; color: var(--g-50); margin-bottom: 6px; display: block; }
.success-frame .next-card .t { font-size: 13px; font-weight: var(--fw-medium); color: var(--g-10); margin-bottom: 2px; }
.success-frame .next-card .d { font-size: 11px; color: var(--g-50); line-height: 1.4; }
.success-frame .meta-info {
  margin-top: var(--sp-5);
  padding: var(--sp-3) 14px;
  background: var(--g-98);
  border-radius: var(--r-md);
  font-size: 11px;
  color: var(--g-50);
  line-height: 1.6;
  text-align: left;
}
.success-frame .meta-info strong { font-weight: var(--fw-medium); color: var(--g-30); }

/* ============ APPROVE-INCOMING ============ */
.approve-frame { background: var(--surface); border: 0.5px solid var(--g-90); border-radius: var(--r-xl); padding: 22px var(--sp-6); }
.approve-frame .incoming-banner {
  background: var(--theme-98);
  border: 0.5px solid var(--theme-90);
  border-radius: var(--r-md);
  padding: var(--sp-3) 14px;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.approve-frame .incoming-banner i { font-size: 18px; color: var(--theme-50); }
.approve-frame .incoming-banner p { font-size: var(--fs-meta); color: var(--g-30); line-height: 1.5; }
.approve-frame .incoming-banner p strong { font-weight: var(--fw-medium); }
.approve-frame .decision { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 18px; }
.approve-frame .decision-card {
  padding: 14px var(--sp-4);
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--motion-fast) var(--easing);
}
.approve-frame .decision-card:hover { border-color: var(--g-80); }
.approve-frame .decision-card.accept { border-color: var(--green-50); background: var(--green-98); }
.approve-frame .decision-card.decline { border-color: var(--red-50); background: var(--red-98); }
.approve-frame .decision-card .dc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.approve-frame .decision-card .dc-head i { font-size: 18px; }
.approve-frame .decision-card.accept .dc-head i { color: var(--green-50); }
.approve-frame .decision-card.decline .dc-head i { color: var(--red-50); }
.approve-frame .decision-card.changes .dc-head i { color: var(--yellow-50); }
.approve-frame .decision-card .dc-head span { font-size: 13px; font-weight: var(--fw-medium); }
.approve-frame .decision-card .dc-desc { font-size: 11px; color: var(--g-50); line-height: 1.5; }

/* ============ FLOW RIBBON ============ */
.flow-ribbon {
  background: var(--theme-98);
  border: 0.5px solid var(--theme-90);
  border-radius: var(--r-md);
  padding: var(--sp-2) 14px;
  margin-bottom: 14px;
  display: none;
  align-items: center;
  gap: 10px;
}
body.in-flow .flow-ribbon { display: flex; }
.flow-ribbon i { font-size: 14px; color: var(--theme-50); }
.flow-ribbon p { flex: 1; font-size: 11px; color: var(--g-30); }
.flow-ribbon p strong { font-weight: var(--fw-medium); color: var(--theme-20); }
.flow-ribbon a.exit-flow { font-size: 11px; color: var(--g-50); cursor: pointer; text-decoration: underline; }

/* ============ SEARCH PALETTE ============ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 30, 0.35);
  z-index: var(--z-search);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.search-overlay[hidden] { display: none; }
.search-pal {
  background: var(--surface);
  border-radius: var(--r-xl);
  width: 560px;
  max-width: calc(100vw - 48px);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(20, 24, 30, 0.2);
}
.search-pal-input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 0.5px solid var(--g-90); }
.search-pal-input i { font-size: 18px; color: var(--g-50); }
.search-pal-input input { flex: 1; border: none; outline: none; font-family: inherit; font-size: var(--fs-body); color: var(--g-10); }
.search-pal-input kbd { font-size: 11px; color: var(--g-70); background: var(--g-95); padding: 2px 6px; border-radius: 3px; font-family: var(--font-mono); }
.search-pal-body { max-height: 360px; overflow-y: auto; padding: var(--sp-2) 0; }
.search-group-label {
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-70);
  padding: var(--sp-2) 18px 4px;
}
.search-result { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 18px; cursor: pointer; }
.search-result:hover, .search-result.active { background: var(--theme-95); color: var(--theme-20); }
.search-result i { font-size: 16px; color: var(--g-50); }
.search-result.active i, .search-result:hover i { color: var(--theme-50); }
.search-result .r-title { font-size: 13px; flex: 1; }
.search-result .r-meta { font-size: 11px; color: var(--g-70); }

/* ============ EXTEND MODAL CONTENT ============ */
.extend-row { display: flex; gap: var(--sp-2); margin: 10px 0 4px; flex-wrap: wrap; }
.extend-chip {
  padding: 6px var(--sp-3);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  font-size: var(--fs-meta);
  cursor: pointer;
  background: var(--surface);
  color: var(--g-10);
}
.extend-chip.active { background: var(--theme-95); border-color: var(--theme-90); color: var(--theme-20); font-weight: var(--fw-medium); }
.extend-summary { background: var(--g-98); border-radius: var(--r-md); padding: var(--sp-3) 14px; margin-top: var(--sp-3); }
.extend-summary p { font-size: var(--fs-meta); color: var(--g-30); margin: 0 0 4px; }
.extend-summary p strong { font-weight: var(--fw-medium); color: var(--g-10); }

/* ============ DATA-FLOW SIMULATION + IMPERSONATION ============ */
.data-flow-sim {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 990;
  background: var(--g-10);
  color: #ffffff;
  padding: var(--sp-3) 18px;
  border-radius: var(--r-lg);
  display: none;
  align-items: center;
  gap: var(--sp-3);
  min-width: 320px;
  box-shadow: 0 8px 24px rgba(20, 24, 30, 0.2);
}
.data-flow-sim.active { display: flex; }
.data-flow-sim .progress { flex: 1; height: 4px; background: var(--g-30); border-radius: 2px; overflow: hidden; }
.data-flow-sim .progress .bar { height: 100%; background: var(--green-50); width: 0%; transition: width var(--motion-slow) linear; }
.data-flow-sim p { font-size: var(--fs-meta); }

.imp-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-banner);
  background: var(--yellow-50);
  color: var(--yellow-98);
  padding: var(--sp-2) 18px;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  box-shadow: 0 2px 8px rgba(20, 24, 30, 0.15);
}
.imp-banner.active { display: flex; }
.imp-banner i.lead { font-size: 16px; }
.imp-banner .imp-text { flex: 1; font-size: var(--fs-meta); font-weight: var(--fw-medium); }
.imp-banner .imp-time {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.15);
  padding: 2px var(--sp-2);
  border-radius: 3px;
  font-size: var(--fs-meta);
}
.imp-banner .imp-end {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--yellow-50);
  border: none;
  border-radius: var(--r-md);
  font-size: 11px;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.imp-banner .imp-end:hover { background: #fff; }
body.impersonating { padding-top: 38px; }

/* ============================================================
   ADDED SCREENS — Agreements list, Drafts, Settings, Revoke
   ============================================================ */

/* ============ AGREEMENTS LIST ============ */
/* `overflow: clip` keeps the rounded corner clipping without establishing a containing block for sticky descendants
   — required for `.list-foot-paging { position: sticky; bottom: 0 }` to actually stick relative to the canvas scroll. */
.list-frame { background: var(--surface); border: 0.5px solid var(--g-90); border-radius: var(--r-xl); overflow: clip; }
.list-toolbar {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 0.5px solid var(--g-90);
  flex-wrap: wrap;
}
.list-toolbar .grow { flex: 1; }
.list-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--g-98);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  min-width: 240px;
}
.list-search i { font-size: 14px; color: var(--g-50); }
.list-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--fs-meta); color: var(--g-10); }

.list-table { width: 100%; border-collapse: collapse; }
.list-table thead th {
  padding: 10px var(--sp-4);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-50);
  text-align: left;
  border-bottom: 0.5px solid var(--g-90);
  background: var(--g-98);
}
.list-table tbody td {
  padding: 12px var(--sp-4);
  font-size: var(--fs-meta);
  color: var(--g-10);
  border-bottom: 0.5px solid var(--g-95);
  vertical-align: middle;
}
.list-table tbody tr { cursor: pointer; transition: background var(--motion-fast) var(--easing); }
.list-table tbody tr:hover { background: var(--g-98); }
.list-table tbody tr:last-child td { border-bottom: none; }
.list-table .cp-cell { display: flex; align-items: center; gap: var(--sp-2); }
.list-table .cp-cell .cp-avatar { width: 28px; height: 28px; font-size: 11px; }
.list-table .cp-cell .cp-name { font-weight: var(--fw-medium); }
.list-table .row-actions { text-align: right; }
.list-table .row-actions button { padding: 4px 6px; background: transparent; border: none; cursor: pointer; color: var(--g-50); border-radius: var(--r-sm); }
.list-table .row-actions button:hover { background: var(--g-95); color: var(--g-10); }

.status-cell { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-sm); font-size: 11px; font-weight: var(--fw-medium); }
.status-cell .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-cell.active { background: var(--green-98); color: var(--green-50); }
.status-cell.active .dot { background: var(--green-50); }
.status-cell.pending { background: var(--yellow-98); color: var(--yellow-50); }
.status-cell.pending .dot { background: var(--yellow-50); }
.status-cell.ended { background: var(--g-95); color: var(--g-50); }
.status-cell.ended .dot { background: var(--g-50); }
.status-cell.draft { background: var(--blue-98); color: var(--blue-50); }
.status-cell.draft .dot { background: var(--blue-50); }

.list-empty { padding: 60px 24px; text-align: center; }
.list-empty i { font-size: 32px; color: var(--g-70); display: block; margin-bottom: var(--sp-3); }
.list-empty h3 { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--g-10); margin-bottom: 4px; }
.list-empty p { font-size: var(--fs-meta); color: var(--g-50); }

.list-foot-paging {
  padding: 12px 18px;
  border-top: 0.5px solid var(--g-90);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--g-50);
  /* Sticky-bottom so the bulk-action + pagination affordances are always visible regardless of row count */
  position: sticky;
  bottom: 0;
  background: var(--surface);
  z-index: 5;
  flex-wrap: wrap;
  gap: 8px;
}
.list-foot-paging .pager-btns { display: flex; gap: 4px; }
.list-foot-paging .pager-btns button {
  padding: 4px 8px;
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-sm);
  font-size: 11px;
  cursor: pointer;
  color: var(--g-30);
}
.list-foot-paging .pager-btns button:hover:not(:disabled) { background: var(--g-98); }
.list-foot-paging .pager-btns button:disabled { color: var(--g-80); cursor: not-allowed; }

/* ============ DRAFTS VIEW ============ */
.drafts-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.draft-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--easing);
}
.draft-row:hover { border-color: var(--g-80); }
.draft-row .draft-ic {
  width: 36px;
  height: 36px;
  background: var(--blue-98);
  color: var(--blue-50);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.draft-row .draft-ic i { font-size: 18px; }
.draft-row .body { flex: 1; min-width: 0; }
.draft-row .title { font-size: 13px; font-weight: var(--fw-medium); color: var(--g-10); }
.draft-row .meta { font-size: 11px; color: var(--g-50); margin-top: 2px; }
.draft-row .draft-actions { display: flex; gap: 6px; }

/* ============ SETTINGS PAGE (tabs) ============ */
.settings-frame {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: 200px 1fr;
  overflow: hidden;
  min-height: 480px;
}
.settings-tabs {
  background: var(--g-98);
  border-right: 0.5px solid var(--g-90);
  padding: var(--sp-4) 0;
}
.settings-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px var(--sp-4);
  font-size: var(--fs-meta);
  color: var(--g-30);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--motion-fast) var(--easing);
}
.settings-tab:hover:not(.active) { background: var(--g-95); }
.settings-tab i { font-size: 14px; color: var(--g-50); }
.settings-tab.active {
  background: var(--theme-95);
  color: var(--theme-20);
  border-left-color: var(--theme-50);
  font-weight: var(--fw-medium);
}
.settings-tab.active i { color: var(--theme-50); }

.settings-pane { padding: var(--sp-6); display: none; }
.settings-pane.active { display: block; }
.settings-pane h2 { font-size: var(--fs-h4); font-weight: var(--fw-medium); margin-bottom: 4px; }
.settings-pane .pane-lede { font-size: var(--fs-meta); color: var(--g-50); margin-bottom: var(--sp-5); }
.settings-section {
  background: var(--g-98);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.settings-section h3 { font-size: 13px; font-weight: var(--fw-medium); margin-bottom: var(--sp-3); }
.settings-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: var(--sp-3);
  padding: 10px 0;
  align-items: center;
  border-bottom: 0.5px solid var(--g-90);
}
.settings-row:last-child { border-bottom: none; }
.settings-row .s-k { font-size: var(--fs-meta); color: var(--g-30); }
.settings-row .s-v { font-size: var(--fs-meta); color: var(--g-10); }
.settings-row .s-action a { font-size: 11px; color: var(--theme-20); cursor: pointer; }

/* ============ REVOKE MODAL ============ */
.revoke-warn-banner {
  padding: 12px 14px;
  background: var(--red-98);
  border: 0.5px solid var(--red-95);
  border-left: 3px solid var(--red-50);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  display: flex;
  gap: 10px;
}
.revoke-warn-banner i { font-size: 18px; color: var(--red-50); flex-shrink: 0; }
.revoke-warn-banner p { font-size: var(--fs-meta); color: var(--g-30); line-height: 1.5; }
.revoke-warn-banner p strong { font-weight: var(--fw-medium); color: var(--g-10); }

.revoke-impact {
  background: var(--g-98);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.revoke-impact p { font-size: 11px; color: var(--g-50); margin-bottom: 4px; }
.revoke-impact ul { margin-left: var(--sp-4); }
.revoke-impact li { font-size: var(--fs-meta); color: var(--g-30); padding: 3px 0; }

.revoke-confirm-input {
  width: 100%;
  padding: 8px 12px;
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-meta);
  color: var(--g-10);
  outline: none;
  margin-top: 6px;
}
.revoke-confirm-input:focus { border-color: var(--red-50); }
.revoke-confirm-input.match { border-color: var(--green-50); background: var(--green-98); }

.btn-danger {
  padding: 7px 14px;
  background: var(--red-50);
  color: #ffffff;
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.btn-danger:hover { filter: brightness(1.06); }
.btn-danger:disabled { background: var(--g-95); color: var(--g-70); cursor: not-allowed; }

/* ============ REVOKED STATE ON DETAIL ============ */
.status-pill.ended {
  background: var(--g-95);
  color: var(--g-50);
  border: 0.5px solid var(--g-90);
}
.status-pill.ended .dot { background: var(--g-50); }
.revoked-banner {
  background: var(--red-98);
  border: 0.5px solid var(--red-95);
  border-left: 3px solid var(--red-50);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.revoked-banner i { font-size: 16px; color: var(--red-50); }
.revoked-banner p { font-size: var(--fs-meta); color: var(--g-30); flex: 1; }

.timeline .dot.revoked {
  background: var(--red-50);
}
.timeline .dot.revoked::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid var(--red-95);
  border-radius: 50%;
}

/* ============================================================
   PRODUCTION POLISH — Agreement detail page
   Adds: right rail (≥1200px), mobile reflow (<768px),
   state variants (loading / pending-mine / pending-theirs /
   revoked / expired / error / denied), skeleton loader,
   sticky behaviour, state-switcher dev widget.
   ============================================================ */

/* State-switcher dev widget (visible only on detail screen for prototype) */
.state-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 11px;
  color: var(--g-50);
  flex-wrap: wrap;
}
.state-switcher .ss-label {
  font-weight: var(--fw-medium);
  margin-right: 2px;
}
.state-switcher button {
  padding: 3px 8px;
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 11px;
  color: var(--g-30);
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing);
}
.state-switcher button:hover { background: var(--surface-sub); border-color: var(--g-80); }
.state-switcher button.active { background: var(--theme-95); color: var(--theme-20); border-color: var(--theme-90); font-weight: var(--fw-medium); }
.state-switcher button:focus-visible { outline: 2px solid var(--theme-50); outline-offset: 1px; }

/* Detail layout — split into left content + optional right rail */
.detail-screen-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 1200px) {
  .detail-screen-wrap { grid-template-columns: 1fr 240px; align-items: start; }
}

/* Sticky header — separated visually with subtle border on scroll */
.detail-frame .detail-header.sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
}

/* Right rail (≥1200px only) */
.detail-rail {
  display: none;
  position: sticky;
  top: var(--sp-4);
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
}
@media (min-width: 1200px) { .detail-rail { display: block; } }
.detail-rail h4 {
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-70);
  margin-bottom: var(--sp-2);
}
.detail-rail .rail-actions { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.detail-rail .rail-actions button { justify-content: center; width: 100%; }
.detail-rail nav.jump-to { display: flex; flex-direction: column; gap: 2px; }
.detail-rail nav.jump-to a {
  font-size: var(--fs-meta);
  color: var(--g-50);
  padding: 5px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--motion-fast) var(--easing);
}
.detail-rail nav.jump-to a:hover { background: var(--surface-sub); color: var(--g-30); }
.detail-rail nav.jump-to a.current {
  background: var(--theme-95);
  color: var(--theme-20);
  border-left-color: var(--theme-50);
  font-weight: var(--fw-medium);
}
.detail-rail nav.jump-to a:focus-visible { outline: 2px solid var(--theme-50); outline-offset: 1px; }

/* === Skeleton loader === */
.skeleton {
  background: linear-gradient(90deg, var(--g-95) 0%, var(--g-90) 50%, var(--g-95) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
  display: inline-block;
}
@keyframes skeleton-shimmer {
  to { background-position: -200% 0; }
}
.skeleton.line { height: 12px; }
.skeleton.line.sm { height: 10px; width: 40%; }
.skeleton.line.md { height: 14px; width: 70%; }
.skeleton.line.lg { height: 22px; width: 60%; }
.skeleton.circle { border-radius: 50%; }
.skeleton-row { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.skeleton-row > .skeleton { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--g-95); }
}

/* === State display blocks (error / denied / suspended / etc.) === */
.detail-state-block {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-xl);
  padding: 56px var(--sp-6);
  text-align: center;
}
.detail-state-block .icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
  background: var(--g-95);
  color: var(--g-50);
}
.detail-state-block .icon-circle.error { background: var(--red-98); color: var(--red-50); }
.detail-state-block .icon-circle.denied { background: var(--yellow-98); color: var(--yellow-50); }
.detail-state-block .icon-circle.suspended { background: var(--yellow-98); color: var(--yellow-50); }
.detail-state-block .icon-circle i { font-size: 26px; }
.detail-state-block h2 { font-size: var(--fs-h4); font-weight: var(--fw-medium); margin-bottom: 6px; }
.detail-state-block p { font-size: var(--fs-meta); color: var(--g-50); max-width: 400px; margin: 0 auto var(--sp-4); line-height: 1.6; }
.detail-state-block .actions { display: inline-flex; gap: var(--sp-2); }

/* === Suspended flag banner (on Active Agreement) === */
.suspended-banner {
  background: var(--yellow-98);
  border: 0.5px solid var(--yellow-95);
  border-left: 3px solid var(--yellow-50);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.suspended-banner i { font-size: 16px; color: var(--yellow-50); }
.suspended-banner p { font-size: var(--fs-meta); color: var(--g-30); flex: 1; }
.suspended-banner p strong { font-weight: var(--fw-medium); }

/* === Status pill variants for the full state machine === */
.status-pill.pending {
  background: var(--yellow-98);
  color: var(--yellow-50);
  border: 0.5px solid var(--yellow-95);
}
.status-pill.pending .dot { background: var(--yellow-50); }
.status-pill.suspended {
  background: var(--yellow-98);
  color: var(--yellow-50);
  border: 0.5px solid var(--yellow-95);
}
.status-pill.suspended .dot { background: var(--yellow-50); border: 1px solid var(--yellow-95); }

/* === aria-live announcer (visually hidden) === */
.live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* === Overflow menu === */
.overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--z-popover);
  width: 200px;
  background: var(--surface-elevated);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  padding: 6px;
  box-shadow: var(--shadow-popover);
}
.overflow-menu[hidden] { display: none; }
.overflow-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--fs-meta);
  color: var(--g-10);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.overflow-menu button:hover { background: var(--surface-sub); }
.overflow-menu button:focus-visible { outline: 2px solid var(--theme-50); outline-offset: -1px; }
.overflow-menu button i { font-size: 14px; color: var(--g-50); }
.overflow-menu button.danger { color: var(--red-50); }
.overflow-menu button.danger i { color: var(--red-50); }
.overflow-menu .menu-divider { height: 0.5px; background: var(--g-90); margin: 4px 6px; }

/* === Mobile breakpoint for detail page (<768px) === */
@media (max-width: 767px) {
  .detail-frame .title-row { flex-wrap: wrap; gap: 8px; }
  .detail-frame .title-row h2 { flex: 1 1 100%; font-size: 16px; }
  .detail-frame .title-row .btn-secondary { display: none; }
  .detail-frame .top-row { flex-wrap: wrap; }
  .detail-frame .view-as { width: 100%; margin: 4px 0 0; }
  .detail-body { padding: 18px var(--sp-4); }
  .party-grid { grid-template-columns: 1fr; }
  .terms-row { grid-template-columns: 1fr; }
  .terms-row .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
  .timeline { grid-template-columns: 1fr; gap: var(--sp-3); }
  .timeline .step, .timeline .step.mid, .timeline .step.end { padding: 0; }
  .timeline .step + .step::before { display: none; }
  .nudge { flex-wrap: wrap; gap: 8px; }
  .nudge p { flex: 1 1 100%; }
  .cp-panel { width: 100%; transform: translateX(100%); }
  .cp-panel.open { transform: translateX(0); }
}

/* === Reduced motion overrides === */
@media (prefers-reduced-motion: reduce) {
  .cp-panel { transition: none; }
  .timeline .dot.curr::before, .timeline .dot.revoked::before { animation: none; }
}

/* ============================================================
   DASHBOARD — metrics + recent activity + chart placeholder
   ============================================================ */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.metric-card {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.metric-card .m-label {
  font-size: 11px;
  color: var(--g-50);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
}
.metric-card .m-value {
  font-size: 28px;
  font-weight: var(--fw-medium);
  color: var(--g-10);
  line-height: 1.1;
}
.metric-card .m-trend {
  font-size: 11px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.metric-card .m-trend.up { color: var(--green-50); }
.metric-card .m-trend.down { color: var(--red-50); }
.metric-card .m-trend.flat { color: var(--g-50); }
.metric-card .m-trend i { font-size: 12px; }

.dash-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-3);
}
.dash-section {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.dash-section .ds-head {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-3);
}
.dash-section .ds-head h3 { font-size: 13px; font-weight: var(--fw-medium); flex: 1; }
.dash-section .ds-head a { font-size: 11px; color: var(--theme-20); cursor: pointer; }

.chart-mock {
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: var(--sp-3) 0;
  border-bottom: 0.5px solid var(--g-95);
  margin-bottom: var(--sp-3);
}
.chart-mock .bar {
  flex: 1;
  background: var(--theme-95);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  position: relative;
  transition: background var(--motion-fast) var(--easing);
  cursor: pointer;
}
.chart-mock .bar:hover { background: var(--theme-90); }
.chart-mock .bar.active { background: var(--theme-50); }
.chart-mock .bar-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--g-50);
  white-space: nowrap;
}
.chart-legend {
  display: flex;
  gap: var(--sp-3);
  font-size: 11px;
  color: var(--g-50);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 4px; }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; }

.recent-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.recent-item {
  display: flex;
  gap: 10px;
  padding: var(--sp-2) 0;
  border-bottom: 0.5px solid var(--g-95);
  cursor: pointer;
}
.recent-item:last-child { border-bottom: none; }
.recent-item:hover { background: var(--surface-sub); margin: 0 -8px; padding: var(--sp-2) 8px; border-radius: var(--r-sm); }
.recent-item .r-ic {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--g-95);
  color: var(--g-50);
}
.recent-item .r-ic.green { background: var(--green-98); color: var(--green-50); }
.recent-item .r-ic.tx { background: var(--tx-95); color: var(--tx-20); }
.recent-item .r-ic.bx { background: var(--bx-95); color: var(--bx-20); }
.recent-item .r-ic.yellow { background: var(--yellow-98); color: var(--yellow-50); }
.recent-item .r-ic i { font-size: 14px; }
.recent-item .r-body p { font-size: 12px; color: var(--g-10); line-height: 1.4; }
.recent-item .r-body p strong { font-weight: var(--fw-medium); }
.recent-item .r-time { font-size: 10px; color: var(--g-50); margin-top: 2px; }

/* ============================================================
   DATA ELEMENTS REGISTRY
   ============================================================ */
.de-categories {
  display: flex;
  gap: 6px;
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.version-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: var(--fw-medium);
  font-family: var(--font-mono);
}
.version-badge.active { background: var(--green-98); color: var(--green-50); }
.version-badge.draft { background: var(--blue-98); color: var(--blue-50); }
.version-badge.deprecated { background: var(--yellow-98); color: var(--yellow-50); }
.version-badge.retired { background: var(--g-95); color: var(--g-50); text-decoration: line-through; }

.usage-bar {
  width: 80px;
  height: 4px;
  background: var(--g-95);
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--sp-2);
}
.usage-bar .fill { height: 100%; background: var(--theme-50); border-radius: 2px; }

/* ============================================================
   PARTICIPANTS DIRECTORY
   ============================================================ */
.participant-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  cursor: pointer;
  align-items: center;
  transition: border-color var(--motion-fast) var(--easing);
}
.participant-card:hover { border-color: var(--g-80); }
.participant-card .pc-body { flex: 1; min-width: 0; }
.participant-card .pc-name { font-size: 14px; font-weight: var(--fw-medium); color: var(--g-10); }
.participant-card .pc-meta { font-size: 11px; color: var(--g-50); margin-top: 2px; }
.participant-card .pc-usecases { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.participant-card .uc-pill {
  padding: 2px 7px;
  background: var(--g-95);
  color: var(--g-30);
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: var(--fw-medium);
}
.participant-card .pc-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.participant-card .pc-status .joined { font-size: 10px; color: var(--g-70); }

/* ============================================================
   DARK MODE TOGGLE FAB (visible in profile menu also)
   ============================================================ */
.dark-fab {
  position: fixed;
  bottom: var(--sp-6);
  left: var(--sp-6);
  z-index: var(--z-popover);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: 0.5px solid var(--g-90);
  color: var(--g-30);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-popover);
}
.dark-fab:hover { background: var(--surface-sub); }
.dark-fab i { font-size: 18px; }
body.dark .dark-fab i.ti-moon { display: none; }
body:not(.dark) .dark-fab i.ti-sun { display: none; }

/* ============================================================
   MESSAGES (P7) — unified Sent/Received data exchange surface.
   Replaces the legacy split shared-data + received-data pages.
   ============================================================ */

/* Stats strip — "1,247 messages today · 99.6% delivered · 5 failed" */
.msg-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.msg-stats .stat {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  padding: 10px 14px;
}
.msg-stats .stat .label {
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-50);
  margin-bottom: 4px;
}
.msg-stats .stat .value {
  font-size: 20px;
  font-weight: var(--fw-medium);
  color: var(--g-10);
  line-height: 1.1;
}
.msg-stats .stat .sub { font-size: 11px; color: var(--g-50); margin-top: 2px; }
.msg-stats .stat.failed .value { color: var(--red-50); }
.msg-stats .stat.delivered .value { color: var(--green-50); }

/* Live pulse indicator (top-right of the list) */
.live-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--green-98);
  color: var(--green-50);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: var(--fw-medium);
}
.live-pulse .pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--green-50);
  border-radius: 50%;
  animation: pulse-ring 1.4s infinite;
  position: relative;
}
.live-pulse .pulse-dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: var(--green-50);
  border-radius: 50%;
  opacity: 0.3;
  animation: pulse-ring 1.4s infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live-pulse .pulse-dot, .live-pulse .pulse-dot::before { animation: none; }
}

/* Message table — extends the .list-table primitive with msg-specific bits */
.msg-table tbody tr.failed { background: var(--red-98); }
.msg-table tbody tr.failed:hover { background: var(--red-95); }
.msg-table tbody tr.queued { background: var(--yellow-98); }
.msg-table tbody tr.new-arrival { animation: msg-slide-in 0.35s ease-out; }
@keyframes msg-slide-in {
  from { opacity: 0; transform: translateY(-6px); background: var(--green-98); }
  to { opacity: 1; transform: translateY(0); background: var(--surface); }
}

.direction-cell { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.direction-cell.sent     { color: var(--blue-50); }
.direction-cell.received { color: var(--green-50); }
.direction-cell i { font-size: 14px; }

.msg-id { font-family: var(--font-mono); font-size: 11px; color: var(--g-70); }

.msg-error-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--red-50);
  margin-top: 2px;
}
.msg-error-line i { font-size: 12px; }
.msg-error-line code { font-family: var(--font-mono); font-size: 10px; background: rgba(0,0,0,0.06); padding: 0 3px; border-radius: 2px; }

/* Owner badge on Failed Messages (ADR 0021) — flow-agnostic, sits adjacent to Failed status pill */
.owner-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.2px;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}
.owner-badge.mine { background: var(--red-50); color: #fff; }
.owner-badge.theirs { background: var(--yellow-95); color: var(--g-20); border: 1px solid var(--yellow-50); }
.owner-badge.expired { background: var(--g-90); color: var(--g-30); }

/* Failed multi-select chip */
.filter-chips .chip.failed-multi { cursor: pointer; }
.filter-chips .chip.failed-multi:hover { background: var(--red-95); }
.filter-chips .chip.closed-toggle { cursor: pointer; }
.filter-chips .chip.closed-toggle:hover { color: var(--g-30); background: var(--g-95); }
.filter-chips .chip[data-filter] { cursor: pointer; user-select: none; }
.filter-chips .chip.solid { background: var(--theme-95); color: var(--theme-20); border-color: var(--theme-90); }

/* Failed sub-filter popover (ADR 0021) */
.failed-pop {
  position: absolute;
  top: 100%;
  margin-top: 6px;
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(20, 24, 30, 0.12);
  z-index: 100;
  min-width: 220px;
  padding: 10px 0;
}
.failed-pop[hidden] { display: none; }
.failed-pop-head { font-size: 10px; color: var(--g-50); padding: 0 14px 8px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500; }
.failed-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12px;
}
.failed-pop-row:hover { background: var(--g-98); }
.failed-pop-row input[type=checkbox] { margin: 0; }
.failed-pop-row .owner-badge { margin-left: 0; }
.failed-pop-row .ct { margin-left: auto; color: var(--g-50); font-size: 11px; }
.failed-pop-foot { border-top: 0.5px solid var(--g-90); padding: 6px 8px 0; text-align: right; margin-top: 6px; }
.failed-pop-foot .btn-ghost { font-size: 11px; padding: 4px 10px; }

/* Bulk action lists (Bulk Retry / Bulk Close modals) */
.bulk-list {
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 4px;
}
.bulk-row {
  display: grid;
  grid-template-columns: 1.4fr 1.8fr auto;
  gap: 12px;
  padding: 8px 12px;
  font-size: 12px;
  align-items: center;
  border-bottom: 0.5px solid var(--g-95);
}
.bulk-row:last-child { border-bottom: none; }
.bulk-row.stale { background: var(--yellow-98); }
.bulk-row .bulk-cp { font-weight: 500; color: var(--g-10); }
.bulk-row .bulk-de { color: var(--g-30); }
.bulk-row .bulk-age { color: var(--g-50); font-size: 11px; }
.bulk-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--yellow-98);
  border-radius: var(--r-md);
  margin-top: 12px;
  font-size: 11px;
  color: var(--g-30);
  line-height: 1.5;
}
.bulk-note i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* Reason picker (Close modals) */
.reason-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  padding: 8px;
}
.reason-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--g-10);
}
.reason-row:hover { background: var(--g-98); }
.reason-row input[type=radio] { margin: 0; flex-shrink: 0; }
.reason-row span { display: flex; align-items: center; gap: 0; flex: 1; }

/* Closed stamp next to status pill on Message detail */
.closed-stamp {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--g-30);
  background: var(--g-90);
  border-radius: 10px;
  letter-spacing: 0.2px;
}

/* Delivery trace panel (reuses .cp-panel slide-in pattern) */
.cp-panel-foot {
  padding: 12px 18px;
  border-top: 0.5px solid var(--g-90);
  display: flex;
  justify-content: flex-end;
}
.cp-panel-foot .btn-ghost {
  font-size: 12px;
  padding: 6px 12px;
  background: transparent;
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-sm);
  color: var(--g-30);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cp-panel-foot .btn-ghost:hover { background: var(--g-98); }
.trace-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.trace-hop {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.trace-hop + .trace-hop::before {
  content: '';
  position: absolute;
  left: 11px;
  top: -10px;
  width: 1px;
  height: 20px;
  background: var(--g-90);
}
.trace-dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid;
}
.trace-dot i { font-size: 12px; }
.trace-hop.ok .trace-dot { background: var(--green-95); border-color: var(--green-50); color: var(--green-50); }
.trace-hop.err .trace-dot { background: var(--red-95); border-color: var(--red-50); color: var(--red-50); }
.trace-hop.pending .trace-dot { background: var(--yellow-95); border-color: var(--yellow-50); color: var(--g-30); }
.trace-hop.terminal .trace-dot { box-shadow: 0 0 0 3px var(--g-95); }
.trace-evt {
  font-size: 12px;
  color: var(--g-10);
  line-height: 1.45;
  font-weight: 500;
  margin: 2px 0 2px 0;
}
.trace-meta {
  font-size: 10px;
  color: var(--g-50);
  font-family: var(--font-mono);
  line-height: 1.4;
}
.trace-meta time { color: var(--g-30); }

/* ============================================================
   COMPOSE MESSAGE (P8) — Agreement-anchored composer per ADRs 0024/0025/0026
   ============================================================ */

/* Frame */
.compose-frame {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 920px;
  margin: 0 auto;
}

/* Pitstop-availability banner (ADR 0024) */
.compose-pitstop-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--red-98);
  border: 0.5px solid var(--red-95);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
/* `[hidden]` must beat `display: flex` for scenario-driven banner toggling */
.compose-pitstop-banner[hidden] { display: none; }
.compose-pitstop-banner i { font-size: 22px; color: var(--red-50); flex-shrink: 0; margin-top: 1px; }
.compose-pitstop-banner .banner-body { flex: 1; min-width: 0; }
.compose-pitstop-banner .banner-body p { font-size: var(--fs-meta); color: var(--g-10); line-height: 1.45; }
.compose-pitstop-banner .banner-body p strong { font-weight: var(--fw-medium); }
.compose-pitstop-banner .banner-body p.sub { font-size: 11px; color: var(--g-50); margin-top: 4px; }
.compose-pitstop-banner .alternatives { margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--red-95); }
.compose-pitstop-banner .alternatives .alt-head { font-size: 11px; color: var(--g-30); font-weight: 500; margin-bottom: 6px; }
.compose-pitstop-banner .alternatives ul { list-style: none; padding: 0; margin: 0; font-size: 12px; line-height: 1.6; }
.compose-pitstop-banner .alternatives a { color: var(--theme-20); text-decoration: underline; cursor: pointer; }
.compose-pitstop-banner .alternatives code { font-family: var(--font-mono); font-size: 11px; background: rgba(0,0,0,0.04); padding: 0 4px; border-radius: 3px; }
.compose-pitstop-banner > .btn-ghost { font-size: 11px; padding: 4px 10px; background: transparent; border: 1px solid var(--red-95); color: var(--red-50); border-radius: var(--r-sm); cursor: pointer; flex-shrink: 0; align-self: center; }

/* Acting-as banner (ADR 0024) */
.compose-acting-banner {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  background: var(--yellow-98);
  border: 0.5px solid var(--yellow-95);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.compose-acting-banner[hidden] { display: none; }
.compose-acting-banner i { font-size: 18px; color: var(--yellow-50); flex-shrink: 0; }
.compose-acting-banner .banner-body { flex: 1; min-width: 0; }
.compose-acting-banner .banner-body p { font-size: var(--fs-meta); color: var(--g-10); line-height: 1.45; }
.compose-acting-banner .banner-body p strong { font-weight: var(--fw-medium); }
.compose-acting-banner .banner-body p.sub { font-size: 11px; color: var(--g-50); margin-top: 2px; }
.compose-acting-banner .banner-body code { font-family: var(--font-mono); font-size: 10px; background: rgba(0,0,0,0.04); padding: 0 3px; border-radius: 2px; }
.compose-acting-banner .acting-owner-picker {
  padding: 5px 10px;
  border: 1px solid var(--yellow-50);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Edit & resend banner (ADR 0024) */
.compose-edit-resend-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 18px;
  background: var(--theme-95);
  border-bottom: 0.5px solid var(--g-90);
}
.compose-edit-resend-banner i { font-size: 18px; color: var(--theme-20); flex-shrink: 0; margin-top: 1px; }
.compose-edit-resend-banner .banner-body p { font-size: var(--fs-meta); color: var(--g-10); line-height: 1.45; }
.compose-edit-resend-banner .banner-body p strong { font-weight: var(--fw-medium); }
.compose-edit-resend-banner .banner-body p.sub { font-size: 11px; color: var(--g-30); margin-top: 4px; }
.compose-edit-resend-banner .banner-body code { font-family: var(--font-mono); font-size: 10px; background: rgba(0,0,0,0.06); padding: 0 3px; border-radius: 2px; }

/* Stepper (ETR-style 3-step wizard chrome — high-stakes only) */
.compose-stepper {
  list-style: none;
  padding: 16px 18px;
  margin: 0;
  display: flex;
  gap: 6px;
  border-bottom: 0.5px solid var(--g-90);
  background: var(--g-98);
}
.compose-stepper .cs-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 12px;
  color: var(--g-50);
  padding: 4px 0;
  position: relative;
}
.compose-stepper .cs-step .num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--g-95);
  color: var(--g-50);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  border: 0.5px solid var(--g-90);
}
.compose-stepper .cs-step.active .num { background: var(--theme-20); color: #fff; border-color: var(--theme-20); }
.compose-stepper .cs-step.active .lbl { color: var(--g-10); font-weight: 500; }
.compose-stepper .cs-step.done .num { background: var(--green-50); color: #fff; border-color: var(--green-50); }
.compose-stepper .cs-step.done .num::before { content: '\2713'; }
.compose-stepper .cs-step.done .num > * { display: none; }
.compose-stepper .cs-step + .cs-step::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--g-90);
}

/* Header */
.compose-header {
  padding: 16px 22px 12px;
  border-bottom: 0.5px solid var(--g-90);
}
.compose-header .hdr-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 11px;
}
.compose-header .hdr-meta .agr-id { color: var(--g-70); font-family: var(--font-mono); }
.compose-header .hdr-meta .idem-key {
  color: var(--g-50);
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--g-98);
  padding: 1px 6px;
  border-radius: 3px;
  cursor: help;
}
.compose-header .title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.compose-header h2 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--g-10);
  flex: 1;
}
/* Cancel link in compose-header — mirrors .wizard-bar .top .cancel pattern (per UI-discipline pass) */
.compose-header .cancel {
  font-size: var(--fs-meta);
  color: var(--g-50);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--sp-2);
  user-select: none;
}
.compose-header .cancel:hover { color: var(--g-30); }
.compose-header .cancel i { font-size: 14px; }
.compose-header .cancel:focus-visible { outline: 2px solid var(--theme-50); outline-offset: 2px; border-radius: 2px; }
.complexity-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.3px;
  cursor: help;
}
.complexity-pill.simple { background: var(--green-95); color: var(--green-50); border: 1px solid var(--green-50); }
.complexity-pill.high-stakes { background: var(--red-95); color: var(--red-50); border: 1px solid var(--red-50); }
/* Clickable variant — used in the Data elements registry where DEX admins toggle complexity (ADR 0025) */
.complexity-pill[role="button"] { cursor: pointer; transition: filter var(--motion-fast) var(--easing), transform var(--motion-fast) var(--easing); }
.complexity-pill[role="button"]:hover { filter: brightness(0.95); }
.complexity-pill[role="button"]:active { transform: scale(0.97); }
.complexity-pill[role="button"]:focus-visible { outline: 2px solid var(--theme-50); outline-offset: 2px; }
.compose-header .hdr-sub {
  font-size: 11px;
  color: var(--g-50);
  margin-top: 6px;
}
.compose-header .hdr-sub strong { color: var(--g-30); font-weight: 500; }

/* Body */
.compose-body { padding: 18px 22px 8px; }
.compose-step { padding: 4px 0 14px; }

/* PULL params / STORE TTL blocks */
.compose-pull-params,
.compose-store-ttl {
  background: var(--theme-95);
  border: 0.5px solid var(--theme-90);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.compose-pull-params .form-help,
.compose-store-ttl .form-help {
  font-size: 12px;
  color: var(--g-30);
  margin-bottom: 10px;
  line-height: 1.4;
}

/* Form */
.compose-form .form-group {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 0.5px dashed var(--g-95);
}
.compose-form .form-group:last-child { border-bottom: none; padding-bottom: 0; }
.compose-form .group-head {
  font-size: 11px;
  font-weight: 500;
  color: var(--g-30);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 18px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-field .lbl {
  font-size: 11px;
  color: var(--g-30);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.form-field .lbl .req { color: var(--red-50); font-style: normal; font-weight: 400; font-size: 10px; }
.form-field .lbl .opt { color: var(--g-50); font-style: normal; font-weight: 400; font-size: 10px; }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 7px 10px;
  border: 1px solid var(--g-90);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--g-10);
  background: var(--surface);
  font-family: inherit;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--theme-50);
  outline-offset: -1px;
  border-color: var(--theme-50);
}
.form-field input:read-only {
  background: var(--g-98);
  color: var(--g-50);
}
.form-field input[data-changed="true"] {
  background: var(--green-98);
}
.form-field .hint {
  font-size: 10px;
  color: var(--g-50);
  margin-top: 2px;
}

/* Draft status strip */
.compose-draft-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 12px;
  background: var(--g-98);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--g-50);
}
.compose-draft-status i { font-size: 14px; color: var(--green-50); }
.compose-draft-status .btn-pin {
  margin-left: auto;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--g-90);
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  color: var(--g-50);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.compose-draft-status .btn-pin:hover { border-color: var(--g-70); color: var(--g-30); }
.compose-draft-status .btn-pin.pinned {
  background: var(--theme-95);
  color: var(--theme-20);
  border-color: var(--theme-50);
}
.compose-draft-status .btn-pin.pinned i { color: var(--theme-20); }

/* Review (step 2) */
.compose-review .review-summary {
  background: var(--g-98);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.compose-review .rs-label {
  font-size: 11px;
  color: var(--g-50);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}
.compose-review .rs-line {
  font-size: 12px;
  color: var(--g-10);
  margin: 4px 0;
  line-height: 1.4;
}
.compose-review .rs-line strong { font-weight: 500; }
.compose-review .rs-line code { font-family: var(--font-mono); font-size: 11px; background: var(--g-95); padding: 1px 5px; border-radius: 3px; }

.compose-review .review-payload {
  margin-bottom: 14px;
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  overflow: hidden;
}
.compose-review .review-payload summary {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--g-30);
  background: var(--g-98);
  cursor: pointer;
  user-select: none;
}
.compose-review .review-payload .payload-viewer { border-radius: 0; margin: 0; max-height: 320px; }

.compose-review .review-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--yellow-98);
  border: 0.5px solid var(--yellow-95);
  border-radius: var(--r-md);
}
.compose-review .review-warning i { font-size: 18px; color: var(--yellow-50); flex-shrink: 0; margin-top: 1px; }
.compose-review .review-warning p { font-size: 12px; color: var(--g-30); line-height: 1.5; }
.compose-review .review-warning p strong { color: var(--g-10); font-weight: 500; }

/* Sticky footer */
.compose-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-top: 0.5px solid var(--g-90);
  background: var(--g-98);
}
.compose-foot .grow { flex: 1; }
.compose-foot .foot-hint {
  font-size: 11px;
  color: var(--g-50);
  margin-right: 12px;
}
.compose-foot .btn-ghost {
  font-size: 12px;
  padding: 6px 12px;
  background: transparent;
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-sm);
  color: var(--g-30);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}
.compose-foot .btn-ghost:hover { background: var(--surface); }
.compose-foot .compose-next,
.compose-foot .compose-submit { display: inline-flex; align-items: center; gap: 5px; }

/* Mini primary button used in Messages list footer */
.btn-primary-mini {
  background: var(--theme-20) !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-primary-mini:hover { filter: brightness(1.1); }

/* Compose success page */
.success-card {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  padding: 36px 30px;
  text-align: center;
  max-width: 540px;
  margin: 32px auto;
}
.success-card .success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--green-95);
  border: 2px solid var(--green-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-50);
  font-size: 28px;
}
.success-card h2 {
  font-size: var(--fs-h3);
  color: var(--g-10);
  font-weight: var(--fw-medium);
  margin-bottom: 6px;
}
.success-card .cs-sub {
  font-size: 13px;
  color: var(--g-50);
  margin-bottom: 22px;
  line-height: 1.5;
}
.success-card .cs-sub strong { color: var(--g-30); font-weight: 500; }
.success-card .cs-sub code { font-family: var(--font-mono); font-size: 12px; background: var(--g-98); padding: 1px 5px; border-radius: 3px; }
.success-card .cs-details {
  list-style: none;
  padding: 18px 0;
  margin: 0 0 22px;
  border-top: 0.5px solid var(--g-95);
  border-bottom: 0.5px solid var(--g-95);
  text-align: left;
}
.success-card .cs-details li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--g-30);
  line-height: 1.5;
  padding: 4px 0;
}
.success-card .cs-details li i { font-size: 14px; color: var(--theme-20); flex-shrink: 0; margin-top: 1px; }
.success-card .cs-details code { font-family: var(--font-mono); font-size: 11px; background: var(--g-98); padding: 1px 4px; border-radius: 3px; }
.success-card .cs-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Spin animation for loading icon */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ============================================================
   AGREEMENT PACK UI (ADR 0027)
   ============================================================ */

/* "Group by pack" toggle in Agreements list toolbar */
.agr-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--g-50);
  background: transparent;
  border: 1px solid var(--g-90);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.agr-group-toggle:hover { border-color: var(--g-70); color: var(--g-30); }
.agr-group-toggle.on { background: var(--theme-95); color: var(--theme-20); border-color: var(--theme-50); }

/* Pack parent row in Agreements list */
.agr-list-table tr.pack-parent {
  background: var(--theme-98, var(--theme-95));
  font-weight: 500;
}
.agr-list-table tr.pack-parent:hover { background: var(--theme-95); }
.agr-list-table tr.pack-parent td { padding-top: 12px; padding-bottom: 12px; border-bottom: 0.5px solid var(--theme-90); }
.pack-toggle { font-size: 12px; color: var(--theme-20); margin-right: 4px; }
.pack-ic {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--theme-20);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pack-ic i { font-size: 15px; }
.pack-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--theme-20);
  color: #fff;
  border-radius: 3px;
  vertical-align: 1px;
}

/* Pack member rows — visually nested under parent */
.agr-list-table tr.pack-member { background: var(--g-98); }
.agr-list-table tr.pack-member:hover { background: var(--g-95); }
.agr-list-table tr.pack-member td:first-child { padding-left: 28px; position: relative; }
.agr-list-table tr.pack-member td:first-child::before {
  content: '';
  position: absolute;
  left: 14px;
  top: -1px;
  bottom: 50%;
  width: 8px;
  border-left: 1px solid var(--theme-90);
  border-bottom: 1px solid var(--theme-90);
  border-bottom-left-radius: 4px;
}
.agr-list-table tr.pack-member + tr.pack-member td:first-child::before {
  top: -50%;
}
.pack-member-cell { padding-left: 4px; }

/* Pack chip on Agreement detail header */
.pack-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--theme-20);
  background: var(--theme-95);
  border: 0.5px solid var(--theme-90);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.pack-chip:hover { background: var(--theme-90); color: var(--theme-10); }
.pack-chip i { font-size: 13px; }
.pack-chip strong { font-weight: 500; }

/* Pack detail page */
.pack-frame {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  overflow: clip;
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.03);
}
.pack-header {
  padding: 22px 26px 18px;
  border-bottom: 0.5px solid var(--g-90);
  background: linear-gradient(180deg, var(--theme-95) 0%, var(--surface) 100%);
}
.pack-top-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 11px; }
.pack-top-row .agr-id { color: var(--g-70); font-family: var(--font-mono); }
.pack-top-row .view-as { margin-left: auto; color: var(--red-50); }
.pack-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.pack-title-row h2 { font-size: 24px; font-weight: var(--fw-medium); color: var(--g-10); flex: 1; min-width: 0; letter-spacing: -0.01em; }
.pack-title-row .btn-primary { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.pack-sub { font-size: 12px; color: var(--g-30); line-height: 1.55; max-width: 760px; }
.pack-sub strong { color: var(--g-10); font-weight: 500; }
.pack-body { padding: 24px 26px 28px; }

/* Pack summary tiles */
.pack-summary-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pack-tile {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.pack-tile .t-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--g-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.pack-tile .t-num {
  font-size: 22px;
  font-weight: 500;
  color: var(--theme-20);
  line-height: 1;
  margin-bottom: 6px;
  font-feature-settings: 'tnum' on;
}
.pack-tile .t-num.green { color: var(--green-50); }
.pack-tile .t-num.small { font-size: 16px; }
.pack-tile .t-sub { font-size: 11px; color: var(--g-50); line-height: 1.4; }
.pack-tile .t-sub a { color: var(--theme-20); text-decoration: underline; }

/* Pack members table */
.pack-members-frame {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  overflow: clip;
  margin-top: 6px;
}
.pack-members-table { width: 100%; border-collapse: collapse; }
.pack-members-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-50);
  padding: 10px 14px;
  background: var(--g-98);
  border-bottom: 0.5px solid var(--g-90);
}
.pack-members-table tbody td { padding: 12px 14px; border-bottom: 0.5px solid var(--g-95); font-size: 12px; color: var(--g-30); vertical-align: middle; }
.pack-members-table tbody tr:last-child td { border-bottom: none; }
.pack-members-table tbody tr { cursor: pointer; transition: background var(--motion-fast) var(--easing); }
.pack-members-table tbody tr:hover { background: var(--g-98); }
.pack-members-table .row-actions button { padding: 4px 6px; background: transparent; border: none; cursor: pointer; color: var(--g-50); border-radius: var(--r-sm); }
.pack-members-table .row-actions button:hover { background: var(--g-95); color: var(--theme-20); }
.agr-mono { font-family: var(--font-mono); font-size: 11px; background: var(--g-95); padding: 1px 5px; border-radius: 3px; color: var(--g-20); }

.pack-audit-note { font-size: 11px; color: var(--g-50); line-height: 1.5; margin-bottom: 12px; max-width: 720px; font-style: italic; }

/* Mobile reflow */
@media (max-width: 768px) {
  .pack-summary-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PACK FORK + PACK SPLIT MAPPING (wizard screens, ADR 0027)
   ============================================================ */
.pack-fork-frame, .pack-split-frame {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-xl);
  overflow: clip;
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.03);
  /* Fill the canvas width — match .picker-frame / .wiz-screen so the pack
     wizard screens don't feel narrower than the rest of the flow. */
}

/* Pack fork — the two-card choice screen */
.pf-header {
  padding: 18px 22px;
  border-bottom: 0.5px solid var(--g-90);
  background: var(--g-98);
  display: flex;
  align-items: center;
  gap: 14px;
}
.pf-header .agr-id { font-family: var(--font-mono); font-size: 11px; color: var(--g-70); flex-shrink: 0; }
.pf-context { display: flex; align-items: center; gap: 12px; flex: 1; }
.pf-context > i { font-size: 20px; color: var(--theme-20); flex-shrink: 0; }
.pf-context-label { font-size: 10px; color: var(--g-50); text-transform: uppercase; letter-spacing: 0.08em; }
.pf-context-name { font-size: 13px; color: var(--g-30); margin-top: 2px; line-height: 1.45; }
.pf-context-name strong { color: var(--g-10); font-weight: 500; }

.pf-question { padding: 26px 26px 22px; }
.pf-question h2 {
  font-size: 22px;
  font-weight: var(--fw-medium);
  color: var(--g-10);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pf-lede {
  font-size: 13px;
  color: var(--g-30);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 720px;
  text-wrap: pretty;
}

.pf-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}
.pf-card {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  padding: 22px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--motion-fast) var(--easing), box-shadow var(--motion-fast) var(--easing), transform var(--motion-fast) var(--easing);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.03);
}
.pf-card:hover {
  border-color: var(--theme-50);
  box-shadow: 0 4px 14px rgba(56, 89, 174, 0.08), 0 1px 2px rgba(20, 24, 30, 0.04);
}
.pf-card:active { transform: scale(0.99); }
.pf-card > header { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; border-bottom: 0.5px solid var(--g-95); padding-bottom: 12px; }
.pf-card-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--g-95);
  color: var(--g-30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pf-card-icon i { font-size: 18px; }
.pf-card-split .pf-card-icon { background: var(--theme-20); color: #fff; }
.pf-card h3 { font-size: 15px; color: var(--g-10); font-weight: var(--fw-medium); margin: 0; text-wrap: balance; }
.pf-card-body { font-size: 13px; color: var(--g-30); line-height: 1.55; text-wrap: pretty; }
.pf-card-outcome { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-card-outcome li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--g-30); line-height: 1.5; }
.pf-card-outcome li i { color: var(--green-50); font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.pf-card-outcome li strong { color: var(--g-10); font-weight: 500; }
.pf-card-cta {
  font-size: 12px;
  color: var(--theme-20);
  font-weight: 500;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pf-card-cta i { font-size: 12px; }

.pf-footnote {
  font-size: 11px;
  color: var(--g-50);
  line-height: 1.55;
  padding: 12px 14px;
  background: var(--g-98);
  border-radius: var(--r-md);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 4px;
}
.pf-footnote i { font-size: 13px; flex-shrink: 0; margin-top: 1px; color: var(--theme-20); }
.pf-footnote a { color: var(--theme-20); }

.pf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  border-top: 0.5px solid var(--g-90);
  background: var(--surface);
}
.pf-foot-hint { font-size: 11px; color: var(--g-50); }

/* Pack split mapping */
.ps-header {
  padding: 18px 22px;
  border-bottom: 0.5px solid var(--g-90);
  background: var(--g-98);
  display: flex;
  align-items: center;
  gap: 14px;
}
.ps-header .agr-id { font-family: var(--font-mono); font-size: 11px; color: var(--g-70); flex-shrink: 0; }
.ps-context { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--g-30); }
.ps-context i { font-size: 16px; color: var(--theme-20); }
.ps-context strong { color: var(--g-10); font-weight: 500; }

.ps-mapping-table { width: 100%; border-collapse: collapse; }
.ps-mapping-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g-50);
  padding: 12px 18px;
  background: var(--g-98);
  border-bottom: 0.5px solid var(--g-90);
}
.ps-mapping-table tbody td {
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--g-95);
  vertical-align: middle;
}
.ps-mapping-table tbody tr:last-child td { border-bottom: none; }
.ps-mapping-table tr.ps-unassigned { background: var(--yellow-98); }

.ps-elem { display: flex; align-items: center; gap: 10px; }
.ps-elem > i { font-size: 18px; color: var(--g-50); flex-shrink: 0; }
.ps-elem-name { font-size: 13px; font-weight: 500; color: var(--g-10); }
.ps-elem-meta { font-size: 11px; color: var(--g-50); margin-top: 2px; }

.ps-cp-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  max-width: 340px;
}
.ps-cp-cell:hover { border-color: var(--theme-50); }
.ps-cp-cell .cp-avatar { width: 28px; height: 28px; font-size: 11px; }
.ps-cp-cell .cp-name { font-size: 12px; font-weight: 500; color: var(--g-10); }
.ps-cp-meta { font-size: 11px; color: var(--g-50); }
.ps-chev { font-size: 14px; color: var(--g-50); margin-left: auto; flex-shrink: 0; }

.ps-cp-empty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--yellow-50);
  background: transparent;
  border: 1px dashed var(--yellow-50);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
}
.ps-cp-empty:hover { background: var(--yellow-98); }
.ps-cp-empty i { font-size: 13px; }

.ps-type-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--theme-95);
  color: var(--theme-20);
  letter-spacing: 0.05em;
}
.ps-type-pill.muted { background: var(--g-95); color: var(--g-50); }

.ps-remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--g-50);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ps-remove:hover { background: var(--red-95); color: var(--red-50); }

.ps-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px 22px;
  background: var(--g-98);
  border-top: 0.5px solid var(--g-95);
}
.ps-summary-stat .t-label {
  font-size: 10px;
  color: var(--g-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  font-weight: 500;
}
.ps-summary-stat .t-num {
  font-size: 14px;
  color: var(--theme-20);
  font-weight: 500;
  margin-bottom: 4px;
}
.ps-summary-stat .t-sub {
  font-size: 11px;
  color: var(--g-50);
  line-height: 1.45;
}

.ps-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--g-30);
  cursor: pointer;
  font-weight: 400;
}
.ps-toggle input { margin: 0; }

.ps-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 0.5px solid var(--g-90);
  background: var(--surface);
}
.ps-foot .grow { flex: 1; }
.ps-foot .foot-hint {
  font-size: 11px;
  color: var(--g-50);
  margin-right: 10px;
}

/* Mobile reflow */
@media (max-width: 768px) {
  .pf-cards { grid-template-columns: 1fr; }
  .ps-summary { grid-template-columns: 1fr; }
  .ps-mapping-table thead { display: none; }
  .ps-mapping-table tbody td { display: block; padding: 6px 14px; }
}

/* ============================================================
   STAKEHOLDER PITCH OVERVIEW (data-screen="overview")
   One-page concept brief. Inherits design tokens; uses prose-first density
   suitable for executive / customer / new-hire scanning.

   Aesthetic principles:
   · Generous vertical rhythm (sections breathe)
   · Layered subtle shadows for depth (not borders alone)
   · Tabular numbers for stats (alignment)
   · text-wrap: balance on headings, pretty on body
   · Restrained colour palette — theme accent reserved for emphasis
   · Cards are airier; nested grids avoided
   ============================================================ */
.overview-page { max-width: 980px; margin: 0 auto; padding: 12px 6px 80px; }

.ov-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-20);
  background: var(--theme-95);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.ov-eyebrow-section { background: var(--g-95); color: var(--g-50); }

.ov-hero {
  padding: 44px 0 36px;
  text-align: left;
  border-bottom: 0.5px solid var(--g-90);
  margin-bottom: 52px;
}
.ov-hero h1 {
  font-size: 44px;
  font-weight: var(--fw-medium);
  color: var(--g-10);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  text-wrap: balance;
  max-width: 820px;
}
.ov-hero .ov-lede {
  font-size: 16px;
  color: var(--g-30);
  line-height: 1.6;
  max-width: 760px;
  margin-bottom: 38px;
  text-wrap: pretty;
}
.ov-hero .ov-lede em { font-style: italic; color: var(--g-50); font-weight: 400; }
.ov-hero .ov-lede strong { color: var(--g-10); font-weight: 500; }

.ov-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ov-stat {
  padding: 18px 16px;
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.03);
  transition: box-shadow var(--motion-fast) var(--easing);
}
.ov-stat:hover { box-shadow: 0 4px 12px rgba(20, 24, 30, 0.05), 0 1px 2px rgba(20, 24, 30, 0.04); }
.ov-stat-num {
  font-size: 30px;
  font-weight: 500;
  color: var(--theme-20);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.ov-stat-num .arrow { font-size: 18px; color: var(--g-50); margin: 0 6px; vertical-align: 4px; font-weight: 400; }
.ov-stat-lbl {
  font-size: 11px;
  font-weight: 500;
  color: var(--g-10);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  line-height: 1.35;
}
.ov-stat-sub { font-size: 11.5px; color: var(--g-50); line-height: 1.5; text-wrap: pretty; }
.ov-stat-sub strong { color: var(--g-30); font-weight: 500; }
.ov-stat-sub code { font-family: var(--font-mono); font-size: 10.5px; background: var(--g-98); padding: 0 4px; border-radius: 2px; }
.ov-stat-sub .muted { color: var(--g-50); }

.ov-section { margin-bottom: 64px; }
.ov-section > h2 {
  font-size: 28px;
  font-weight: var(--fw-medium);
  color: var(--g-10);
  margin: 8px 0 10px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 760px;
}
.ov-section-lede {
  font-size: 14px;
  color: var(--g-30);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 740px;
  text-wrap: pretty;
}

/* Mental-model shift cards — the single biggest conceptual change.
   Restraint: avoid nested grids; cards already in 2-col layout, anything inside reads cramped. */
.ov-mental-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.ov-mental-card {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.03);
}
.ov-mental-legacy {
  background: var(--g-98);
  border-color: var(--g-90);
}
.ov-mental-new {
  border-color: var(--theme-50);
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--theme-50),
    0 4px 14px rgba(56, 89, 174, 0.06),
    0 1px 2px rgba(20, 24, 30, 0.04);
}
.ov-mental-card > header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 4px;
}
.ov-mental-card h3 {
  font-size: 20px;
  color: var(--g-10);
  font-weight: var(--fw-medium);
  margin: 0;
  letter-spacing: -0.01em;
}
.ov-mental-frame {
  font-size: 14px;
  color: var(--g-30);
  line-height: 1.6;
  font-style: italic;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--g-90);
  text-wrap: pretty;
}
.ov-mental-new .ov-mental-frame {
  border-left-color: var(--theme-50);
  color: var(--g-10);
}
.ov-mental-frame em {
  font-style: italic;
  color: var(--g-50);
  font-weight: 400;
}

.ov-mental-chain {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ov-mental-chain > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--g-30);
  line-height: 1.55;
  text-wrap: pretty;
}
.ov-mental-chain > li > span:last-child { padding-top: 1px; flex: 1; }
.ov-mental-chain > li strong { color: var(--g-10); font-weight: 500; }
.ov-mental-chain > li em { color: var(--g-30); font-style: italic; font-weight: 400; }
.ov-mental-chain > li code { font-family: var(--font-mono); font-size: 11.5px; background: var(--g-95); padding: 0 5px; border-radius: 3px; color: var(--g-20); }

.step-tag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--g-90);
  color: var(--g-30);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-feature-settings: 'tnum' on;
  margin-top: -2px;
}
.ov-mental-new .step-tag { background: var(--theme-20); color: #fff; box-shadow: 0 1px 2px rgba(56, 89, 174, 0.25); }

/* Detail row — no nested grids; flowing sentence with subtle left-accent treatment.
   Visually lighter than the previous card-inside-card pattern. */
.ov-mental-detail-row {
  display: block !important;
  margin: 4px 0 4px 36px;
  padding: 0;
}
.ov-mental-detail-text {
  font-size: 13px;
  color: var(--g-30);
  line-height: 1.65;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--theme-50);
  text-wrap: pretty;
}
.ov-mental-legacy .ov-mental-detail-text { border-left-color: var(--g-70); }
.ov-mental-detail-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--theme-20);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.ov-mental-legacy .ov-mental-detail-eyebrow { color: var(--g-50); }

.ov-mental-implication {
  font-size: 13px;
  color: var(--g-30);
  line-height: 1.6;
  padding: 14px 0 0;
  border-top: 0.5px solid var(--g-95);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-wrap: pretty;
}
.ov-mental-implication i { font-size: 15px; color: var(--g-50); flex-shrink: 0; margin-top: 2px; }
.ov-mental-new .ov-mental-implication i { color: var(--theme-20); }
.ov-mental-implication strong { color: var(--g-10); font-weight: 500; }
.ov-mental-implication code { font-family: var(--font-mono); font-size: 11.5px; background: var(--g-95); padding: 0 5px; border-radius: 3px; color: var(--g-20); }

.ov-mental-anchor {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 26px;
  background: var(--theme-95);
  border-radius: var(--r-lg);
  margin-top: 12px;
  box-shadow: 0 1px 2px rgba(56, 89, 174, 0.05);
}
.ov-mental-anchor > i {
  font-size: 22px;
  color: var(--theme-20);
  flex-shrink: 0;
  margin-top: 4px;
}
.ov-mental-anchor > div { flex: 1; }
.ov-mental-anchor .ov-anchor-head {
  font-size: 11px;
  font-weight: 500;
  color: var(--theme-20);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.ov-mental-anchor p {
  font-size: 14px;
  color: var(--g-30);
  line-height: 1.65;
  margin-bottom: 10px;
  text-wrap: pretty;
}
.ov-mental-anchor p:last-child { margin-bottom: 0; }
.ov-mental-anchor strong { color: var(--g-10); font-weight: 500; }
.ov-mental-anchor em { color: var(--g-50); font-style: italic; font-weight: 400; }
.ov-mental-anchor a { color: var(--theme-20); }

/* Mobile reflow for mental-model section */
@media (max-width: 768px) {
  .ov-mental-grid { grid-template-columns: 1fr; }
}

/* Before/After comparison */
.ov-ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.ov-ba-col {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  position: relative;
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.03);
}
.ov-ba-legacy { background: var(--g-98); }
.ov-ba-new {
  border-color: var(--theme-50);
  box-shadow:
    0 0 0 1px var(--theme-50),
    0 4px 14px rgba(56, 89, 174, 0.06),
    0 1px 2px rgba(20, 24, 30, 0.04);
}
.ov-ba-col > header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--g-95);
}
.ov-badge {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 11px;
  border-radius: 999px;
}
.ov-badge.legacy { background: var(--g-90); color: var(--g-30); }
.ov-badge.new {
  background: var(--theme-20);
  color: #fff;
  box-shadow: 0 1px 2px rgba(56, 89, 174, 0.2);
}
.ov-ba-col .ov-meta { font-size: 11.5px; color: var(--g-50); }
.ov-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 14px;
}
.ov-steps li {
  counter-increment: step;
  position: relative;
  padding: 7px 0 7px 32px;
  font-size: 13px;
  color: var(--g-30);
  line-height: 1.55;
  text-wrap: pretty;
}
.ov-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--g-95);
  color: var(--g-50);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-feature-settings: 'tnum' on;
}
.ov-ba-new .ov-steps li::before {
  background: var(--theme-20);
  color: #fff;
  box-shadow: 0 1px 2px rgba(56, 89, 174, 0.2);
}
.ov-steps li strong { color: var(--g-10); font-weight: 500; }
.ov-steps li em { color: var(--g-30); font-style: italic; font-weight: 400; }
.ov-steps li code { font-family: var(--font-mono); font-size: 11.5px; background: var(--g-95); padding: 0 5px; border-radius: 3px; color: var(--g-20); }
.ov-ba-totals {
  font-size: 12px;
  color: var(--g-50);
  padding-top: 14px;
  border-top: 0.5px solid var(--g-95);
  line-height: 1.55;
}
.ov-ba-totals strong { color: var(--g-10); font-weight: 500; }

.ov-ba-callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ov-ba-callouts:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.ov-callout.ov-callout-etr {
  background: var(--yellow-98);
  border: 0.5px solid var(--yellow-95);
  grid-column: 1 / -1;
}
.ov-callout.ov-callout-etr i { color: var(--yellow-50); }
.ov-callout.ov-callout-etr p code { font-family: var(--font-mono); font-size: 11.5px; background: rgba(255,255,255,0.7); padding: 0 5px; border-radius: 3px; color: var(--g-20); }
.ov-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--theme-95);
  border-radius: var(--r-md);
}
.ov-callout i { font-size: 20px; color: var(--theme-20); flex-shrink: 0; margin-top: 1px; }
.ov-callout p { font-size: 13px; color: var(--g-30); line-height: 1.55; text-wrap: pretty; }
.ov-callout p strong { color: var(--g-10); font-weight: 500; }
.ov-callout p em { color: var(--g-30); font-style: italic; font-weight: 400; }
.ov-callout p .muted { color: var(--g-50); }

/* Concept map */
.ov-concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.ov-concept-card {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  padding: 22px 22px 20px;
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.03);
}
.ov-concept-card .ov-card-question {
  font-size: 12px;
  font-style: italic;
  color: var(--g-50);
  margin-bottom: 10px;
  text-wrap: pretty;
}
.ov-concept-card h3 {
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--g-10);
  margin-bottom: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ov-concept-card ul { list-style: none; padding: 0; margin: 0; }
.ov-concept-card li {
  font-size: 13px;
  color: var(--g-30);
  line-height: 1.55;
  padding: 5px 0;
  text-wrap: pretty;
}
.ov-concept-card li strong { color: var(--theme-20); font-weight: 500; }
.ov-concept-footer { font-size: 12px; color: var(--g-50); font-style: italic; margin-top: 12px; padding: 0 4px; text-wrap: pretty; }

/* Decisions grid */
.ov-decisions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ov-decision {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  position: relative;
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.03);
  transition: box-shadow var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing);
}
.ov-decision:hover {
  border-color: var(--theme-50);
  box-shadow: 0 4px 14px rgba(20, 24, 30, 0.06), 0 1px 2px rgba(20, 24, 30, 0.04);
}
.ov-deci-num {
  font-size: 11px;
  font-weight: 500;
  color: var(--theme-20);
  letter-spacing: 0.16em;
  font-feature-settings: 'tnum' on;
}
.ov-decision h4 {
  font-size: 15px;
  color: var(--g-10);
  font-weight: var(--fw-medium);
  margin: 6px 0 10px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  text-wrap: balance;
}
.ov-decision > p {
  font-size: 13px;
  color: var(--g-30);
  line-height: 1.6;
  margin-bottom: 12px;
  text-wrap: pretty;
}
.ov-decision > p em { color: var(--g-30); font-style: italic; font-weight: 400; }
.ov-deci-src {
  font-size: 10.5px;
  color: var(--g-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-top: 0.5px solid var(--g-95);
  padding-top: 10px;
  margin-top: 4px;
  font-weight: 500;
}

/* Roadmap */
.ov-roadmap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ov-roadmap-col {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.03);
}
.ov-roadmap-v1 { border-top: 3px solid var(--green-50); }
.ov-roadmap-p6 { border-top: 3px solid var(--yellow-50); background: var(--g-98); }
.ov-roadmap-col header { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 0.5px solid var(--g-95); }
.ov-roadmap-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
}
.ov-roadmap-tag.v1 { background: var(--green-95); color: var(--green-50); }
.ov-roadmap-tag.p6 { background: var(--yellow-95); color: var(--g-30); }
.ov-roadmap-col h3 { font-size: 16px; font-weight: var(--fw-medium); color: var(--g-10); letter-spacing: -0.005em; }
.ov-roadmap-col ul { list-style: none; padding: 0; margin: 0; }
.ov-roadmap-col li {
  font-size: 13px;
  color: var(--g-30);
  line-height: 1.6;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--g-95);
  text-wrap: pretty;
}
.ov-roadmap-col li:last-child { border-bottom: none; }
.ov-roadmap-col li:first-child { padding-top: 4px; }
.ov-roadmap-col li code { font-family: var(--font-mono); font-size: 11.5px; background: var(--g-95); padding: 0 5px; border-radius: 3px; color: var(--g-20); }

/* Asks */
.ov-asks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ov-ask {
  background: var(--theme-95);
  border-radius: var(--r-lg);
  padding: 22px;
  position: relative;
  box-shadow: 0 1px 2px rgba(56, 89, 174, 0.05);
}
.ov-ask-num {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--theme-20);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 2px 4px rgba(56, 89, 174, 0.25);
  letter-spacing: 0;
}
.ov-ask h4 {
  font-size: 14px;
  color: var(--g-10);
  font-weight: var(--fw-medium);
  margin-bottom: 10px;
  line-height: 1.35;
  text-wrap: balance;
}
.ov-ask p {
  font-size: 13px;
  color: var(--g-30);
  line-height: 1.6;
  text-wrap: pretty;
}
.ov-ask p strong { color: var(--g-10); font-weight: 500; }
.ov-ask p em { color: var(--g-30); font-style: italic; font-weight: 400; }

.ov-link { color: var(--theme-20); text-decoration: underline; cursor: pointer; }
.ov-link:hover { color: var(--theme-10); }

/* Footer */
.ov-footer { margin-top: 60px; padding-top: 36px; border-top: 0.5px solid var(--g-90); }
.ov-footer-head { font-size: 11px; color: var(--g-50); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; font-weight: 500; }
.ov-footer-intro {
  font-size: 13px;
  color: var(--g-30);
  line-height: 1.6;
  margin-bottom: 22px;
  max-width: 760px;
  text-wrap: pretty;
}
.ov-roadmap-footer {
  font-size: 13px;
  color: var(--g-30);
  line-height: 1.6;
  padding: 16px 20px;
  background: var(--g-98);
  border-radius: var(--r-md);
  margin-top: 16px;
  text-wrap: pretty;
  border-left: 3px solid var(--g-70);
}
.ov-footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 26px; }
.ov-footer-link {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing), box-shadow var(--motion-fast) var(--easing);
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.02);
}
.ov-footer-link:hover {
  background: var(--surface);
  border-color: var(--theme-50);
  box-shadow: 0 4px 12px rgba(20, 24, 30, 0.04), 0 1px 2px rgba(20, 24, 30, 0.03);
}
.ov-footer-link i { font-size: 20px; color: var(--theme-20); flex-shrink: 0; }
.ov-footer-link span { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ov-footer-link strong { font-size: 14px; color: var(--g-10); font-weight: 500; }
.ov-footer-link .meta { font-size: 12px; color: var(--g-50); line-height: 1.45; text-wrap: pretty; }
.ov-footer-meta {
  font-size: 11px;
  color: var(--g-50);
  text-align: center;
  font-style: italic;
  padding-top: 14px;
  border-top: 0.5px solid var(--g-95);
}

/* Mobile reflow */
@media (max-width: 768px) {
  .ov-stats,
  .ov-ba-grid,
  .ov-ba-callouts,
  .ov-concept-grid,
  .ov-decisions-grid,
  .ov-roadmap-grid,
  .ov-asks-grid,
  .ov-footer-links { grid-template-columns: 1fr; }
  .ov-hero h1 { font-size: 28px; }
}

/* ============================================================
   REFERENCE SCREENS — ADRs index + Risk register
   ============================================================ */
.ref-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 4px;
}
.ref-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ref-table-wrap {
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  overflow: clip;
  margin-bottom: 14px;
}
.ref-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ref-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-50);
  padding: 12px 14px;
  background: var(--g-98);
  border-bottom: 0.5px solid var(--g-90);
  position: sticky;
  top: 0;
  z-index: 2;
}
.ref-table tbody td {
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--g-95);
  vertical-align: top;
  color: var(--g-30);
  line-height: 1.45;
}
.ref-table tbody tr { cursor: pointer; transition: background var(--motion-fast) var(--easing); }
.ref-table tbody tr:hover { background: var(--g-98); }
.ref-table tbody tr:last-child td { border-bottom: none; }

.ref-table .ref-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--theme-20);
  letter-spacing: 0.02em;
}
.ref-table tbody td strong { color: var(--g-10); font-weight: 500; }
.ref-table .ref-meta { font-size: 11px; color: var(--g-50); margin-top: 3px; line-height: 1.45; }
.ref-table .ref-meta code { font-family: var(--font-mono); font-size: 10px; background: var(--g-95); padding: 0 4px; border-radius: 2px; }
.ref-table .ref-src { font-size: 10px; color: var(--theme-20); font-style: italic; margin-top: 4px; font-family: var(--font-mono); }

.ref-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.ref-tag.fo  { background: var(--g-90);      color: var(--g-30); }
.ref-tag.ag  { background: var(--theme-95);  color: var(--theme-20); }
.ref-tag.ux  { background: var(--green-95);  color: var(--green-50); }
.ref-tag.msg { background: var(--yellow-95); color: var(--g-30); }
.ref-tag.cmp { background: var(--red-95);    color: var(--red-50); }

.ref-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
}
.ref-status.active     { background: var(--green-95);  color: var(--green-50); }
.ref-status.deferred   { background: var(--yellow-95); color: var(--g-30); }
.ref-status.open       { background: var(--red-95);    color: var(--red-50); }
.ref-status.mitigated  { background: var(--green-95);  color: var(--green-50); }

.risk-sev {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.risk-sev.high   { background: var(--red-50);    color: #fff; }
.risk-sev.medium { background: var(--yellow-50); color: var(--g-10); }
.risk-sev.low    { background: var(--green-95);  color: var(--green-50); border: 1px solid var(--green-50); }

.ref-footer-note {
  font-size: 11px;
  color: var(--g-50);
  line-height: 1.55;
  padding: 12px 14px;
  background: var(--g-98);
  border-radius: var(--r-md);
  margin-bottom: 20px;
}
.ref-footer-note i { font-size: 13px; margin-right: 4px; vertical-align: -1px; color: var(--theme-20); }
.ref-footer-note strong { color: var(--g-30); font-weight: 500; }
.ref-footer-note code { font-family: var(--font-mono); font-size: 10px; background: var(--g-95); padding: 0 4px; border-radius: 2px; }

.ref-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 6px;
}
.ref-summary-card {
  background: var(--theme-95);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.ref-summary-card h4 {
  font-size: 11px;
  font-weight: 500;
  color: var(--theme-20);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.ref-summary-card p { font-size: 12px; color: var(--g-30); line-height: 1.5; }
.ref-summary-card p strong { color: var(--g-10); font-weight: 500; }
.ref-summary-card p code { font-family: var(--font-mono); font-size: 11px; background: rgba(255,255,255,0.5); padding: 0 4px; border-radius: 2px; }

/* Mobile reflow */
@media (max-width: 768px) {
  .ref-summary-grid { grid-template-columns: 1fr; }
  .ref-table { font-size: 11px; }
  .ref-table thead th, .ref-table tbody td { padding: 8px 10px; }
}

/* Agreement picker (modal before the Composer when no Agreement context is present) */
.picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--g-90);
  border-radius: var(--r-md);
}
.picker-search:focus-within { border-color: var(--theme-50); outline: 2px solid var(--theme-95); outline-offset: -1px; }
.picker-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--g-10);
  font-family: inherit;
  outline: none;
}
.picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}
.picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing);
}
.picker-row:hover { background: var(--g-98); border-color: var(--theme-50); }
.picker-row:focus-visible { outline: 2px solid var(--theme-50); outline-offset: 1px; }
.picker-row .pr-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--g-90);
  color: var(--g-30);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.picker-row .pr-body { flex: 1; min-width: 0; }
.picker-row .pr-title { font-size: 13px; color: var(--g-10); font-weight: 500; }
.picker-row .pr-title .pr-elem { color: var(--theme-20); font-weight: 500; }
.picker-row .pr-title .pr-ver { font-size: 11px; color: var(--g-50); font-weight: 400; }
.picker-row .pr-meta { font-size: 11px; color: var(--g-50); margin-top: 2px; font-family: var(--font-mono); }
.picker-row .pr-arrow { font-size: 14px; color: var(--g-50); flex-shrink: 0; }
.picker-row:hover .pr-arrow { color: var(--theme-20); }

/* Mobile reflow */
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
  .compose-stepper .cs-step .lbl { display: none; }
  .compose-foot { flex-wrap: wrap; }
  .compose-foot .foot-hint { width: 100%; margin: 0 0 6px; }
}

/* Message detail page — message-specific lifecycle timeline (variable nodes per flow type, ADR 0021) */
.msg-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.msg-timeline .step { padding-right: var(--sp-2); }
.msg-timeline .step.curr { padding: 0 var(--sp-2); }
.msg-timeline .step.end { padding-left: var(--sp-2); }
/* Dots + labels for message timeline (ADR 0021) — mirror .timeline rules */
.msg-timeline .step-row { display: flex; align-items: center; gap: 6px; }
.msg-timeline .dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; position: relative; }
.msg-timeline .dot.done { background: var(--green-95); border: 2px solid var(--green-50); }
.msg-timeline .dot.curr { background: var(--green-50); }
.msg-timeline .dot.curr::before { content: ''; position: absolute; inset: -3px; border: 1px solid var(--green-95); border-radius: 50%; }
.msg-timeline .dot.future { background: var(--g-95); border: 0.5px solid var(--g-90); }
.msg-timeline .dot.revoked { background: var(--red-95); border: 2px solid var(--red-50); }
.msg-timeline .step-label { font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--g-10); }
.msg-timeline .step-label.muted { color: var(--g-50); font-weight: var(--fw-regular); }
.msg-timeline .step-time { font-size: 11px; color: var(--g-50); margin-top: 4px; margin-left: 20px; line-height: 1.35; }
/* When PULL flow expands to 6 columns, allow text to wrap rather than overflow */
.msg-timeline .step-time { word-wrap: break-word; }

/* Payload viewer — collapsible JSON preview */
.payload-viewer {
  background: var(--g-98);
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--g-30);
  line-height: 1.5;
  max-height: 280px;
  overflow: auto;
  padding: var(--sp-3) var(--sp-4);
  white-space: pre;
}
.payload-viewer .key   { color: var(--bx-40); }
.payload-viewer .str   { color: var(--green-50); }
.payload-viewer .num   { color: var(--theme-50); }
.payload-viewer .bool  { color: var(--red-50); }
.payload-viewer .null  { color: var(--g-50); }

.payload-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 6px;
}
.payload-toolbar .grow { flex: 1; }
.payload-toolbar button {
  padding: 4px 8px;
  background: transparent;
  border: 0.5px solid var(--g-90);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 11px;
  color: var(--g-30);
  cursor: pointer;
}
.payload-toolbar button:hover { background: var(--g-95); }

/* Metadata key-value grid */
.msg-meta-grid {
  display: grid;
  grid-template-columns: 140px 1fr 140px 1fr;
  gap: var(--sp-2) var(--sp-4);
  background: var(--g-98);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.msg-meta-grid .k { font-size: 11px; color: var(--g-50); }
.msg-meta-grid .v { font-size: var(--fs-meta); color: var(--g-10); font-family: var(--font-mono); }
@media (max-width: 767px) {
  .msg-meta-grid { grid-template-columns: 1fr; gap: 4px; }
  .msg-meta-grid .k { margin-top: 8px; }
}

/* Status pill variants for message lifecycle */
.status-pill.delivered { background: var(--green-98); color: var(--green-50); border: 0.5px solid var(--green-95); }
.status-pill.delivered .dot { background: var(--green-50); }
.status-pill.acknowledged { background: var(--green-98); color: var(--green-50); border: 0.5px solid var(--green-95); }
.status-pill.acknowledged .dot { background: var(--green-50); }
.status-pill.queued { background: var(--yellow-98); color: var(--yellow-50); border: 0.5px solid var(--yellow-95); }
.status-pill.queued .dot { background: var(--yellow-50); }
.status-pill.failed { background: var(--red-98); color: var(--red-50); border: 0.5px solid var(--red-95); }
.status-pill.failed .dot { background: var(--red-50); }

/* Retry-failed banner */
.retry-banner {
  background: var(--red-98);
  border: 0.5px solid var(--red-95);
  border-left: 3px solid var(--red-50);
  border-radius: var(--r-md);
  padding: var(--sp-3) 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-4);
}
.retry-banner i { font-size: 18px; color: var(--red-50); flex-shrink: 0; }
.retry-banner .body { flex: 1; }
.retry-banner .body p { font-size: var(--fs-meta); color: var(--g-30); }
.retry-banner .body p strong { font-weight: var(--fw-medium); }
.retry-banner .body .reason { font-size: 11px; color: var(--g-50); margin-top: 2px; font-family: var(--font-mono); }
.retry-banner .banner-cta-hint { font-size: 11px; color: var(--g-50); flex-shrink: 0; margin-left: auto; padding-left: 12px; align-self: center; line-height: 1.4; text-align: right; }
.retry-banner .banner-cta-hint strong { color: var(--g-30); font-weight: 500; }