/* AVIP web UI — layout on top of the shared WestPorch theme (theme.css).
   Only structure/spacing here; all colours come from theme tokens. */

/* ── [hidden] must actually hide ───────────────────────────────────────────
   An author `display` declaration beats the UA stylesheet's `[hidden]` rule,
   so any element with a class that sets `display` stays visible when JS sets
   `el.hidden = true`. That has produced three separate bugs here — the login
   card rendering over the app it had already admitted you to, both password
   forms showing at once, and the Admin button staying in the sidebar for
   non-administrators. `!important` is the point: it is what outranks the
   author `display` these rules exist to defeat. Do not add per-class
   `[hidden]` rules; this covers them. */
[hidden] { display: none !important; }


* { box-sizing: border-box; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

input::placeholder, textarea::placeholder { color: var(--ivory3); opacity: 1; }

/* ── Top bar ─────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; }
.brand-lockup {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; cursor: pointer; transition: opacity 0.15s ease;
}
.brand-lockup:hover { opacity: 0.82; }
.brand-lockup:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.brand-logo { display: block; flex: none; width: 40px; height: 40px; }
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-eyebrow {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-ink);
}
.brand-row { display: flex; align-items: baseline; gap: 12px; }
.brand-mark {
  font-weight: 700; font-size: 20px; letter-spacing: 0.14em; color: var(--accent-ink);
}
.brand-sub { color: var(--ivory3); font-size: 12px; letter-spacing: 0.04em; }
.brand-tagline {
  font-size: 11px; letter-spacing: 0.03em; color: var(--gold-dim); font-style: italic;
}
.topbar-right { display: flex; align-items: center; gap: 14px; }
.health { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ivory2); }
.health .dot {
  width: 8px; height: 8px; border-radius: 99px; background: var(--ivory3);
  transition: background .2s ease;
}
.health.ok   .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.health.down .dot { background: var(--red);   box-shadow: 0 0 8px var(--red); }

/* ── Layout ──────────────────────────────────────────────────── */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 22px;
  padding: 24px;
  max-width: 1200px; width: 100%; margin: 0 auto;
}
.col-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }

.panel { padding: 20px; }
.panel + .panel, .results > * + * { margin-top: 18px; }
.panel-title {
  margin: 0 0 6px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ivory2);
  display: flex; align-items: center; gap: 10px;
}
.panel-note { color: var(--ivory3); font-size: 12px; line-height: 1.5; margin: 0 0 14px; }

/* ── Intake form ─────────────────────────────────────────────── */
.field { display: block; margin-bottom: 12px; }
.field > span {
  display: block; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ivory3); margin-bottom: 5px;
}
.field input {
  width: 100%; padding: 9px 11px;
  background: var(--surf2); color: var(--ivory);
  border: 1px solid var(--border2); border-radius: var(--radius-control);
  font-family: var(--font-sans); font-size: 13px;
}
.field input:focus { outline: none; border-color: var(--gold); }

.dropzone {
  margin: 6px 0 16px; padding: 22px 16px;
  border: 1.5px dashed var(--border2); border-radius: var(--radius-card);
  background: var(--surf2); text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone:focus { border-color: var(--gold); outline: none; }
.dropzone.dragover { border-color: var(--gold); background: var(--gold-bg); }
.dropzone.loaded { border-style: solid; border-color: var(--teal); }
.dz-icon { font-size: 22px; color: var(--accent-ink); margin-bottom: 6px; }
.dz-label { font-size: 12.5px; color: var(--ivory2); }
.dz-hint { font-size: 11px; color: var(--ivory3); margin-top: 4px; }
.dz-types {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px;
}
.dz-type {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10px; color: var(--ivory2);
  background: var(--surf3); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: var(--radius-pill);
}
.dz-type-i { font-size: 12px; line-height: 1; }

.analyze-btn { width: 100%; padding: 12px; font-size: 12px; }
.analyze-btn:disabled { cursor: not-allowed; filter: none; background: var(--surf3); color: var(--ivory2); border: 1px solid var(--border2); box-shadow: none; }

.settings { margin-top: 16px; }
.settings summary {
  cursor: pointer; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ivory3);
}
.settings[open] summary { margin-bottom: 10px; }

/* ── Run a demo live ─────────────────────────────────────────── */
.demos-list { display: flex; flex-direction: column; gap: 8px; }
.demo-btn {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  padding: 11px 13px; border-radius: var(--radius-control);
  background: var(--surf2); border: 1px solid var(--border2);
  cursor: pointer; font-family: var(--font-sans);
  transition: border-color .15s ease, background .15s ease;
}
.demo-btn:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-bg); }
.demo-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.demo-btn.running { border-color: var(--gold); background: var(--gold-bg); }
.demo-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.demo-label { font-size: 13px; font-weight: 600; color: var(--ivory); }
.demo-blurb {
  font-size: 11px; color: var(--ivory3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Saved analyses list ─────────────────────────────────────── */
.link-btn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--accent-ink); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0;
}
.link-btn:hover { color: var(--gold2); }
.saved-empty { color: var(--ivory3); font-size: 12px; padding: 4px 0; }
.saved-row { display: flex; gap: 8px; align-items: stretch; }
.saved-select {
  flex: 1; min-width: 0; padding: 9px 11px;
  background: var(--surf2); color: var(--ivory);
  border: 1px solid var(--border2); border-radius: var(--radius-control);
  font-family: var(--font-sans); font-size: 13px; cursor: pointer;
}
.saved-select:focus { outline: none; border-color: var(--gold); }
.saved-archive {
  flex-shrink: 0; cursor: pointer; padding: 0 14px;
  background: var(--surf2); color: var(--ivory2);
  border: 1px solid var(--border2); border-radius: var(--radius-control);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.saved-archive:hover:not(:disabled) { color: var(--accent-ink); border-color: var(--gold); background: var(--gold-bg); }
.saved-archive:disabled { cursor: not-allowed; color: var(--ivory3); border-color: var(--border); }
.archive-list-btn { width: 100%; }

/* ── Archive modal rows ──────────────────────────────────────── */
.archive-list { display: flex; flex-direction: column; gap: 8px; min-width: 420px; }
.archive-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-control);
}
.archive-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.archive-ref { font-size: 12px; color: var(--ivory); }
.archive-out { font-size: 11px; color: var(--ivory3); }
.archive-acts { display: flex; gap: 8px; flex-shrink: 0; }
.archive-acts .wp-btn { padding: 6px 14px; font-size: 11px; }

/* ── Vendors supported modal ─────────────────────────────────── */
.vendors-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.vendors-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--ivory2); font-weight: 600;
}
.vendors-toggle input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; }
.vendors-toggle-hint { font-size: 11px; color: var(--ivory3); }
.vendors-filters { padding: 12px 14px 0; }
.vendors-filters:empty { display: none; }
.vendors-body { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); min-height: 340px; }
.vendors-list { border-right: 1px solid var(--border); padding: 12px; overflow: auto; max-height: 62vh; }
.vendors-group {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ivory3); margin: 8px 4px 6px;
}
.vendor-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: var(--radius-control);
  background: transparent; border: 1px solid transparent; color: var(--ivory2);
  font-family: var(--font-sans); font-size: 13px; margin-bottom: 2px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.vendor-item:hover { background: var(--surf2); }
.vendor-item.active { background: var(--gold-bg); border-color: var(--gold); color: var(--accent-ink); }
.vendors-models { padding: 14px 16px; overflow: auto; max-height: 62vh; }
.vendors-section { margin-bottom: 16px; }
.vendors-section-title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 8px;
}
.vendors-section-title.supported { color: var(--green-ink); }
.vendors-section-title.possible { color: var(--ivory3); }
.vendors-none { font-size: 12px; color: var(--ivory3); }
.model-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.model-chip {
  cursor: pointer; font-family: var(--font-mono); font-size: 11.5px;
  padding: 5px 10px; border-radius: var(--radius-control);
  background: var(--surf2); border: 1px solid var(--border); color: var(--ivory2);
  transition: border-color .15s ease, color .15s ease;
}
.model-chip:hover { border-color: var(--gold); color: var(--accent-ink); }
.model-chip.supported { border-color: rgba(70,201,147,0.4); }
.vendors-note {
  padding: 10px 16px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--ivory3); line-height: 1.5;
}

/* ── Model detail modal ──────────────────────────────────────── */
.model-sub { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ivory3); margin-top: 3px; }
.model-body { max-height: 64vh; }
.model-summary { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--ivory2); }
.model-specs { display: flex; flex-direction: column; margin-bottom: 14px; }
.model-spec-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.model-spec-label { font-size: 12.5px; color: var(--ivory3); }
.model-spec-value { font-size: 12.5px; color: var(--ivory); text-align: right; }
.model-block { margin-bottom: 12px; }
.model-block-title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px;
}
.model-block-text { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ivory2); }
.model-empty { font-size: 13px; line-height: 1.6; color: var(--ivory3); margin: 0; }
.model-links { display: flex; flex-direction: column; gap: 5px; }
.model-ref-fact {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding-bottom: 7px; margin-bottom: 3px; border-bottom: 1px solid var(--border);
}
.model-ref-key { font-size: 12.5px; color: var(--ivory3); }
.model-ref-val { font-size: 12.5px; color: var(--ivory); text-align: right; }
.model-link { font-size: 12.5px; color: var(--accent-ink); text-decoration: none; word-break: break-word; }
.model-link:hover { color: var(--gold2); text-decoration: underline; }
.vendor-note {
  margin: 0 0 12px; font-size: 12px; line-height: 1.55; color: var(--ivory3);
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}

/* ── Confirmation dialog ─────────────────────────────────────── */
.confirm-card {
  position: relative; width: min(400px, 100%); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.confirm-title { margin: 0; font-size: 16px; color: var(--ivory); }
.confirm-body { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ivory2); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.confirm-danger { background: var(--red); color: #fff; box-shadow: none; }
.confirm-danger:hover { filter: brightness(1.08); }
.outcome-pill {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--surf3); color: var(--ivory3);
}
.outcome-pill.proceed                 { background: var(--green-bg); color: var(--green-ink); }
.outcome-pill.proceed_with_conditions { background: rgba(78,156,160,0.15); color: var(--accent-ink); }
.outcome-pill.needs_review            { background: var(--amber-bg); color: var(--amber-ink); }
.outcome-pill.do_not_proceed          { background: var(--red-bg); color: var(--red-ink); }
.outcome-pill.insufficient_evidence   { background: var(--surf3); color: var(--ivory3); }

/* ── Step tracker ────────────────────────────────────────────── */
.steps { list-style: none; margin: 16px 0 0; padding: 0; }
.steps li {
  position: relative; padding: 6px 6px 6px 26px; font-size: 12px;
  color: var(--ivory3); font-family: var(--font-mono);
}
.steps li::before {
  content: '○'; position: absolute; left: 6px; color: var(--ivory3);
}
.steps li.active { color: var(--accent-ink); }
.steps li.active::before { content: '◔'; color: var(--accent-ink); animation: wp-pulse 1.2s infinite; }
.steps li.done { color: var(--green-ink); }
.steps li.done::before { content: '●'; color: var(--green-ink); animation: none; }
.steps li.failed { color: var(--red-ink); }
.steps li.failed::before { content: '✕'; color: var(--red-ink); }

/* ── Empty state ─────────────────────────────────────────────── */
.empty { text-align: center; color: var(--ivory3); padding: 60px 24px; }
.empty-mark { font-size: 30px; color: var(--ivory3); margin-bottom: 12px; }
.empty p { max-width: 360px; margin: 0 auto; font-size: 13px; line-height: 1.6; }

/* ── Recommendation banner ───────────────────────────────────── */
.rec-banner {
  padding: 20px 22px; border-left: 4px solid var(--ivory3);
}
.rec-banner.proceed                 { border-left-color: var(--green); }
.rec-banner.proceed_with_conditions { border-left-color: var(--sky); }
.rec-banner.needs_review            { border-left-color: var(--amber); }
.rec-banner.do_not_proceed          { border-left-color: var(--red); }
.rec-banner.insufficient_evidence   { border-left-color: var(--ivory3); }
.rec-label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ivory3);
}
.rec-value { font-size: 22px; font-weight: 700; margin: 4px 0 2px; }
.rec-banner.proceed .rec-value                 { color: var(--green-ink); }
.rec-banner.proceed_with_conditions .rec-value { color: var(--accent-ink); }
.rec-banner.needs_review .rec-value            { color: var(--amber-ink); }
.rec-banner.do_not_proceed .rec-value          { color: var(--red-ink); }
.rec-ids { font-size: 11px; color: var(--ivory3); }
.rec-rationale {
  margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--ivory2);
  max-width: 68ch;
}

/* ── Meters ──────────────────────────────────────────────────── */
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .meters { grid-template-columns: 1fr; } }
.meter { padding: 16px 18px; }
.meter-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--ivory2); margin-bottom: 8px;
}
.meter-head .wp-mono { font-size: 20px; color: var(--ivory); }
.bar { height: 8px; background: var(--surf3); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 99px; transition: width .5s ease; }
.bar-fill.conf { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.bar-fill.risk { background: linear-gradient(90deg, var(--amber), var(--red)); }
.meter-note { font-size: 11px; color: var(--ivory3); margin-top: 8px; line-height: 1.45; }

/* ── Findings ────────────────────────────────────────────────── */
.count-pill {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--surf3); color: var(--ivory2);
}
.count-pill.admin-ok   { color: var(--green-ink); background: var(--green-bg); }
.count-pill.admin-warn { color: var(--amber-ink); background: var(--amber-bg); }

/* Admin / deployment status */
.admin-card { max-width: 560px; }
/* A tab pane fills the modal card and scrolls internally, so a long list (e.g.
   the full roadmap) scrolls instead of overflowing the card's max-height. */
.admin-pane { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.admin-pane[hidden] { display: none; }
.admin-pane > .admin-body { flex: 1 1 auto; min-height: 0; }
/* Admin tabs */
.admin-tabs { display: flex; gap: 4px; margin: 6px 0 4px; padding: 0 16px; border-bottom: 1px solid var(--border); }
/* Inset the note text to match the header/body padding (not flush to the edge). */
.admin-pane > .panel-note { padding-left: 16px; padding-right: 16px; }
.admin-tab {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ivory3); background: transparent; border: none; cursor: pointer;
  padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tab:hover { color: var(--ivory); }
.admin-tab.active { color: var(--accent-ink); border-bottom-color: var(--gold); }
/* Admin › archives */
.admin-arch-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  background: var(--surf2); border: 1px solid var(--border); border-radius: var(--radius-control);
}
.admin-arch-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.admin-arch-ref { font-size: 11px; color: var(--accent-ink); }
.admin-arch-title { font-size: 13px; font-weight: 600; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-arch-sub { font-size: 11px; color: var(--ivory3); }
.admin-arch-del {
  flex: none; font-size: 12px; font-weight: 600; padding: 7px 13px; cursor: pointer;
  background: transparent; color: var(--red-ink); border: 1px solid var(--red); border-radius: 7px;
  transition: background .15s, color .15s;
}
.admin-arch-del:hover:not(:disabled) { background: var(--red); color: #fff; }
.admin-arch-del:disabled { opacity: 0.5; cursor: default; }
/* Admin › process steps */
.admin-ps-phase { display: flex; flex-direction: column; gap: 2px; }
.admin-ps-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ivory3); margin: 10px 0 4px;
}
.admin-ps-step {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer;
  border-radius: var(--radius-control); border: 1px solid transparent;
}
.admin-ps-step:hover { background: var(--surf2); border-color: var(--border); }
.admin-ps-cb { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; flex: none; }
.admin-ps-num { flex: none; width: 30px; font-size: 11px; color: var(--accent-ink); text-align: right; }
.admin-ps-label { flex: 1; font-size: 13px; color: var(--ivory); }
.admin-ps-flag {
  flex: none; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill);
}
.admin-ps-flag.is-mandatory { color: var(--accent-ink); background: var(--gold-bg); }
.admin-ps-flag.is-suggested { color: var(--ivory3); background: var(--surf2); }
/* Admin › roadmap */
.admin-rm-row {
  display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px;
  background: var(--surf2); border: 1px solid var(--border); border-radius: var(--radius-control);
}
.admin-rm-cb { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--green); flex: none; cursor: pointer; }
.admin-rm-cb:disabled { cursor: default; opacity: 0.6; }
/* Roadmap progress meter */
.admin-rm-meter { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.admin-rm-meter-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ivory3); }
.admin-rm-bar { height: 6px; border-radius: 99px; background: var(--surf2); overflow: hidden; }
.admin-rm-bar > span { display: block; height: 100%; background: var(--green); width: 0; transition: width 0.3s ease; }
.admin-rm-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-rm-name { font-size: 13px; font-weight: 600; color: var(--ivory); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.admin-rm-ver { font-size: 10px; color: var(--accent-ink); font-weight: 400; }
.admin-rm-desc { font-size: 11.5px; color: var(--ivory3); line-height: 1.45; }
.admin-rm-row.is-done .admin-rm-name { color: var(--green-ink); }
/* Milestone component breakdown */
.admin-rm-tasks { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 5px; }
.admin-rm-task { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--ivory2); line-height: 1.4; }
.admin-rm-task-tick { flex: none; width: 13px; text-align: center; color: var(--ivory3); font-size: 11px; }
.admin-rm-task.is-done .admin-rm-task-tick { color: var(--green-ink); }
.admin-rm-task.is-done .admin-rm-task-label { color: var(--ivory3); }
.admin-rm-task-id { flex: none; font-size: 9.5px; letter-spacing: 0.04em; color: var(--accent-ink); padding-top: 1px; }
.admin-rm-task-label { min-width: 0; }
.admin-rm-task.has-tip { cursor: help; border-radius: 5px; outline-offset: 2px; }
.admin-rm-task.has-tip:hover, .admin-rm-task.has-tip:focus-visible {
  background: var(--surf2); outline: none;
}
.admin-rm-task.has-tip:hover .admin-rm-task-label { color: var(--ivory); }
/* Floating component-detail tip: fixed so the scrolling panel can't clip it. */
.rm-tip {
  position: fixed; z-index: 200; width: max-content; max-width: 330px;
  background: var(--surf3); color: var(--ivory); /* surf3 = popover surface */
  border: 1px solid var(--border2); border-radius: 8px;
  padding: 9px 12px; font-size: 11.5px; line-height: 1.45;
  box-shadow: 0 10px 28px rgba(11, 31, 51, 0.22);
  opacity: 0; pointer-events: none; transition: opacity 0.14s ease;
}
.rm-tip.on { opacity: 1; }
.rm-tip-id {
  display: block; font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--accent-ink); margin-bottom: 4px;
}
/* ── equipment specs on an asset (ADR-0019) ───────────────────── */
/* The source is encoded in the border, not just the tooltip: a declared or
   catalogue figure must never read like a measured one at a glance. */
.asset-specs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.asset-spec {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border2); background: var(--surf2); cursor: help;
}
.asset-spec-lbl { color: var(--ivory3); letter-spacing: 0.03em; }
.asset-spec-val { color: var(--ivory); font-size: 11px; }
.asset-spec.src-evidence { border-color: var(--green); }
.asset-spec.src-human { border-color: var(--gold-dim); }
.asset-spec.src-deal_record,
.asset-spec.src-reference { border-style: dashed; }

/* ── admin › asset merges ─────────────────────────────────────── */
.admin-merge-actions {
  display: flex; align-items: center; gap: 12px; padding: 0 16px 4px;
}
.admin-merge-filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ivory3); cursor: pointer;
}
.admin-mg-row {
  border: 1px solid var(--border2); border-radius: var(--radius-control);
  background: var(--surf2); padding: 11px 14px 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.admin-mg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-mg-basis { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ivory3); }
.admin-mg-val { font-size: 12px; color: var(--ivory); }
.admin-mg-state {
  margin-left: auto; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border2); color: var(--ivory3);
}
.admin-mg-state.is-proposed { color: var(--accent-ink); border-color: var(--gold-dim); }
.admin-mg-state.is-approved { color: var(--green-ink); border-color: var(--green); }
.admin-mg-state.is-rejected { color: var(--ivory3); }
/* Two sides read side by side so a reviewer compares, not scrolls. */
.admin-mg-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .admin-mg-sides { grid-template-columns: 1fr; } }
.admin-mg-side {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); padding: 8px 10px; min-width: 0;
}
.admin-mg-role { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ivory3); }
.admin-mg-what { font-size: 13px; font-weight: 700; color: var(--ivory); }
.admin-mg-serial { font-size: 11.5px; color: var(--accent-ink); }
.admin-mg-deal, .admin-mg-lvl { font-size: 11px; color: var(--ivory3); }
.admin-mg-gone { font-size: 12px; color: var(--red-ink); }
.admin-mg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-mg-note {
  flex: 1 1 200px; min-width: 0; font: inherit; font-size: 12px;
  padding: 6px 9px; border-radius: 6px;
  border: 1px solid var(--border2); background: var(--surface); color: var(--ivory);
}
.admin-mg-btn { font-size: 12px; padding: 6px 12px; }
.admin-mg-decided { font-size: 11.5px; color: var(--ivory3); }

.admin-body { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.admin-group {
  border: 1px solid var(--border2); border-radius: var(--radius-control);
  background: var(--surf2); overflow: hidden;
}
.admin-group-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ivory3);
  padding: 9px 14px 7px;
}
.admin-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 14px; border-top: 1px solid var(--border);
}
.admin-row-label { color: var(--ivory2); font-size: 13px; }
.admin-row-value {
  font-family: var(--font-mono); font-size: 12px; color: var(--ivory);
  text-align: right;
}
.admin-row-value.admin-ok   { color: var(--green-ink); }
.admin-row-value.admin-warn { color: var(--amber-ink); }
.admin-row-value.admin-bad  { color: var(--red-ink); }
.findings { display: flex; flex-direction: column; gap: 12px; }
.findings-clean { color: var(--green-ink); font-size: 13px; padding: 6px 0; }
.finding {
  padding: 14px 16px; border-radius: var(--radius-control);
  background: var(--surf2); border-left: 3px solid var(--ivory3);
}
.finding.critical { border-left-color: var(--red); }
.finding.high     { border-left-color: var(--amber); }
.finding.medium   { border-left-color: var(--gold); }
.finding.low      { border-left-color: var(--teal); }
.finding.info     { border-left-color: var(--ivory3); }
.finding-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sev-pill {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill);
}
.sev-pill.critical { background: var(--red-bg);   color: var(--red-ink); }
.sev-pill.high     { background: var(--amber-bg); color: var(--amber-ink); }
.sev-pill.medium   { background: var(--gold-bg);  color: var(--accent-ink); }
.sev-pill.low      { background: var(--green-bg); color: var(--teal); }
.sev-pill.info     { background: var(--surf3);    color: var(--ivory3); }
.finding-rule { font-family: var(--font-mono); font-size: 11px; color: var(--ivory3); }
.finding-cat  { font-size: 11px; color: var(--ivory3); margin-left: auto; }
.finding-title { font-size: 14px; font-weight: 600; color: var(--ivory); margin-bottom: 4px; }
.finding-detail { font-size: 12.5px; color: var(--ivory2); line-height: 1.5; }
.finding-why {
  margin-top: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.5;
  color: var(--ivory2); background: var(--gold-bg); border-radius: 8px;
  border-left: 2px solid var(--gold);
}
.finding-why::before {
  content: "WHY THIS SCORE"; display: block;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--accent-ink); margin-bottom: 3px;
}
.finding-remedy {
  font-size: 12px; color: var(--ivory2); margin-top: 8px;
  padding-left: 10px; border-left: 2px solid var(--border2);
}
.finding-meta {
  display: flex; gap: 14px; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ivory3);
}

/* ── Finding disposition (reviewer decision) ─────────────────── */
.finding-dispo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 11px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.dispo-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ivory3);
}
.dispo-status {
  font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--border2); background: var(--surf2); color: var(--ivory);
}
.dispo-note {
  flex: 1; min-width: 140px; font: inherit; font-size: 12px; padding: 5px 9px;
  border-radius: 7px; border: 1px solid var(--border2); background: var(--surf); color: var(--ivory);
}
.dispo-note:focus, .dispo-status:focus { outline: none; border-color: var(--gold-dim); }
.dispo-save { padding: 5px 12px; font-size: 11px; }
.dispo-msg { font-size: 10px; color: var(--ivory3); }

/* ── Seller request list ─────────────────────────────────────── */
.seller-requests { display: flex; flex-direction: column; gap: 9px; }
.seller-req {
  border: 1px solid var(--border); border-left: 3px solid var(--border2);
  border-radius: 9px; background: var(--surf2); padding: 10px 13px;
}
.seller-req.critical { border-left-color: var(--red); }
.seller-req.high { border-left-color: var(--amber); }
.seller-req.medium { border-left-color: var(--gold); }
.sreq-head { display: flex; align-items: center; gap: 9px; }
.sreq-rule { font-family: var(--font-mono); font-size: 10.5px; color: var(--ivory3); }
.sreq-title { font-size: 13px; font-weight: 600; color: var(--ivory); }
.sreq-ask { margin-top: 5px; font-size: 12.5px; color: var(--ivory2); }

/* ── Reviewer sign-off ───────────────────────────────────────── */
.approval-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 16px;
}
.approval-state { display: flex; flex-direction: column; gap: 2px; }
.approval-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ivory3);
}
.approval-status { font-size: 13px; font-weight: 600; color: var(--ivory3); }
.approval-status.approved { color: var(--green-ink); }
.approval-note {
  flex: 1; min-width: 160px; font: inherit; font-size: 12.5px; padding: 7px 10px;
  border-radius: 8px; border: 1px solid var(--border2); background: var(--surf); color: var(--ivory);
}
.approval-note:focus { outline: none; border-color: var(--gold-dim); }

/* ── Finding → document chips ────────────────────────────────── */
.finding-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.docs-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ivory3);
}
.doc-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; color: var(--accent-ink);
  background: var(--gold-bg); border: 1px solid transparent;
  padding: 3px 9px; border-radius: var(--radius-pill);
  transition: border-color .15s ease;
}
.doc-chip:hover { border-color: var(--gold); }
.doc-chip:disabled { color: var(--ivory3); background: var(--surf3); cursor: default; }
.doc-chip-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Verification checklist (Exhibit A) ──────────────────────── */
.checklist { display: flex; flex-direction: column; gap: 8px; }
.checklist-item {
  padding: 10px 12px; border-radius: var(--radius-control);
  background: var(--surf2); border-left: 3px solid var(--border2);
}
.checklist-item.verified  { border-left-color: var(--green); }
.checklist-item.attention { border-left-color: var(--amber); }
.checklist-item.gap       { border-left-color: var(--ivory3); }
.checklist-item.manual    { border-left-color: var(--teal); }
.cl-head { display: flex; align-items: center; gap: 8px; }
.cl-status {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--surf3); color: var(--ivory3); flex-shrink: 0;
}
.cl-status.verified  { background: var(--green-bg); color: var(--green-ink); }
.cl-status.attention { background: var(--amber-bg); color: var(--amber-ink); }
.cl-status.gap       { background: var(--surf3); color: var(--ivory3); }
.cl-status.manual    { background: rgba(78,156,160,0.15); color: var(--accent-ink); }
.cl-name { font-size: 13px; font-weight: 600; color: var(--ivory); }
.cl-rules { font-size: 10.5px; color: var(--ivory3); margin-left: auto; }
.cl-note { font-size: 12px; color: var(--ivory2); line-height: 1.5; margin-top: 5px; }
.cl-manual { font-size: 11px; color: var(--ivory3); margin-top: 4px; }

/* ── Seller attestations (Exhibit B) reconcile ───────────────── */
.reconcile-wrap summary { cursor: pointer; }
.reconcile-form {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; align-items: flex-end;
}
.reconcile-form .field { margin: 0; flex: 1 1 160px; }
.rc-checks { display: flex; flex-wrap: wrap; gap: 14px; flex: 1 1 100%; }
.rc-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ivory2); cursor: pointer; }
#rc-run { flex: 1 1 100%; margin-top: 4px; }
.reconcile-results { display: flex; flex-direction: column; gap: 8px; }
.rc-summary { font-size: 12px; font-weight: 600; padding: 8px 10px; border-radius: 8px; }
.rc-summary.ok  { background: var(--green-bg); color: var(--green-ink); }
.rc-summary.bad { background: var(--red-bg); color: var(--red-ink); }
.rc-row {
  display: flex; gap: 10px; padding: 9px 11px; background: var(--surf2);
  border-radius: 8px; border-left: 3px solid var(--border2);
}
.rc-row.match       { border-left-color: var(--green); }
.rc-row.mismatch    { border-left-color: var(--red); }
.rc-row.unverifiable { border-left-color: var(--ivory3); }
.rc-row.noted       { border-left-color: var(--teal); }
.rc-verdict {
  flex-shrink: 0; height: fit-content; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px;
  border-radius: var(--radius-pill); background: var(--surf3); color: var(--ivory3);
}
.rc-verdict.match       { background: var(--green-bg); color: var(--green-ink); }
.rc-verdict.mismatch    { background: var(--red-bg); color: var(--red-ink); }
.rc-verdict.unverifiable { background: var(--surf3); color: var(--ivory3); }
.rc-verdict.noted       { background: rgba(78,156,160,0.15); color: var(--accent-ink); }
.rc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-label { font-size: 13px; font-weight: 600; color: var(--ivory); }
.rc-vals { font-size: 11px; color: var(--ivory3); }
.rc-note { font-size: 12px; color: var(--ivory2); line-height: 1.45; }

/* ── Evidence documents list ─────────────────────────────────── */
.evidence-list { display: flex; flex-direction: column; gap: 8px; }
.evidence-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--surf2);
  border: 1px solid var(--border); border-radius: var(--radius-control);
}
/* Inventoried but unread (quarantined/failed): the reviewer needs to see at a
   glance that nothing was extracted from this one. */
.evidence-item.ev-unread { border-color: var(--amber); background: var(--amber-bg); }
.evidence-item.ev-unread .ev-meta { color: var(--amber-ink); }
.ev-icon { font-size: 18px; flex-shrink: 0; }
.ev-thumb { flex-shrink: 0; width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: var(--surf2); }
.ev-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ev-name {
  font-size: 13px; color: var(--ivory);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-meta { font-size: 10.5px; color: var(--ivory3); }
.ev-view { flex-shrink: 0; padding: 6px 14px; font-size: 11px; }

/* ── Evidence preview modal ──────────────────────────────────── */
.ev-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 32px; }
.ev-modal[hidden] { display: none; }
.ev-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 9, 11, 0.72); }
.ev-modal-card {
  position: relative; display: flex; flex-direction: column;
  width: min(920px, 100%); max-height: 88vh; overflow: hidden;
}
.ev-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.ev-modal-title { font-size: 13px; color: var(--ivory); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-modal-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ev-modal-actions .wp-btn { padding: 6px 14px; font-size: 11px; text-decoration: none; }
.ev-modal-body { padding: 16px; overflow: auto; background: var(--surf2); }
.ev-img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px; }
.ev-frame { width: 100%; height: 70vh; border: none; background: #fff; border-radius: 8px; }
.ev-pre {
  margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ivory2);
  white-space: pre-wrap; word-break: break-word;
}
.ev-noprev { color: var(--ivory3); font-size: 13px; line-height: 1.6; padding: 12px 4px; }
.ev-loc { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 12.5px; color: var(--ivory2); }
.ev-loc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); background: var(--gold-bg); border-radius: 999px; padding: 2px 10px; }
.ev-loc-link { color: var(--teal); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-loc-link:hover { text-decoration: underline; }
/* Rendered snapshot content (Markdown → HTML) inside the viewer modal. */
.md-body { color: var(--ivory2); font-size: 14px; line-height: 1.6; max-width: 70ch; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4 { color: var(--ivory); line-height: 1.25; margin: 20px 0 8px; }
.md-body h1 { font-size: 21px; } .md-body h2 { font-size: 17px; } .md-body h3 { font-size: 15px; } .md-body h4 { font-size: 13.5px; }
.md-body > :first-child { margin-top: 0; }
.md-body p { margin: 0 0 11px; }
.md-body a { color: var(--teal); text-decoration: underline; word-break: break-word; }
.md-body strong { color: var(--ivory); font-weight: 650; }
.md-body ul, .md-body ol { margin: 0 0 12px; padding-left: 22px; }
.md-body li { margin: 3px 0; }
.md-body code { font-family: var(--font-mono); font-size: 12.5px; background: var(--surf3, var(--nested)); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.md-body pre.md-pre { font-family: var(--font-mono); font-size: 12.5px; color: var(--ivory2); background: var(--nested); border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; overflow-x: auto; white-space: pre; margin: 0 0 12px; }
.md-body blockquote { margin: 0 0 12px; padding: 4px 14px; border-left: 3px solid var(--gold); color: var(--ivory2); background: var(--gold-bg); border-radius: 0 8px 8px 0; }
.md-body hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
/* Word (.docx) converted to HTML in the viewer — reuses .md-body typography. */
.ev-docx { max-width: 76ch; }
.ev-docx img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
.ev-docx table { border-collapse: collapse; margin: 0 0 12px; font-size: 13px; }
.ev-docx td, .ev-docx th { border: 1px solid var(--border); padding: 5px 9px; text-align: left; vertical-align: top; }
.ev-docx th { background: var(--surf2); color: var(--ivory); }

/* New deal modal */
.nd-card { max-width: 980px; width: 100%; }
/* Save button confirmation state. */
.wp-btn.is-saved { background: var(--green-bg); color: var(--green-ink); border-color: var(--green); }
.nd-card .ev-modal-head { display: flex; align-items: center; justify-content: space-between; }
/* New-deal intake: drop an executive-summary sheet to prefill the form. Sits in
   the header, top-right, between the title and the close button. */
.nd-head { gap: 12px; flex-wrap: wrap; }
.nd-intake { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.nd-intake-drop {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 12px; border: 1px dashed var(--border2); border-radius: 10px;
  background: var(--surf2); cursor: pointer; transition: border-color .15s, background .15s;
}
.nd-intake-drop:hover, .nd-intake-drop:focus-visible { border-color: var(--gold); outline: none; }
.nd-intake-drop.drag { border-color: var(--gold); border-style: solid; background: var(--gold-bg); }
.nd-intake-drop.busy { opacity: 0.7; pointer-events: none; }
.nd-intake-text { font-size: 11.5px; color: var(--ivory2); }
.nd-intake-text b { color: var(--ivory); font-weight: 600; }
.nd-intake-btn { padding: 6px 12px; font-size: 11px; white-space: nowrap; }
.nd-intake-status { font-size: 11px; color: var(--ivory3); max-width: 320px; text-align: right; }
.nd-intake-paste { display: flex; flex-direction: column; gap: 6px; width: min(460px, 100%); }
.nd-intake-paste textarea {
  width: 100%; min-height: 96px; resize: vertical; font: inherit; font-size: 12.5px; line-height: 1.45;
  padding: 8px 10px; border: 1px solid var(--border2); border-radius: 8px;
  background: var(--surface); color: var(--ivory);
}
.nd-intake-paste textarea:focus { outline: none; border-color: var(--gold); }
.nd-intake-paste-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.nd-intake-paste-actions .field-opt { margin-right: auto; font-size: 11px; }
.nd-intake-status.ok { color: var(--green-ink); }
.nd-intake-status.err { color: var(--red-ink); }
/* Fields the intake just prefilled — a brief ring so the reviewer sees what was
   filled in for them. Removed on the next edit. */
.nd-prefilled { border-color: var(--gold) !important; box-shadow: 0 0 0 2px var(--gold-bg); }
@media (max-width: 640px) {
  .nd-intake { margin-left: 0; align-items: stretch; width: 100%; }
  .nd-intake-status { max-width: none; text-align: left; }
}
.nd-form { display: flex; flex-direction: column; gap: 14px; background: var(--surface); }
.nd-form .field { display: flex; flex-direction: column; gap: 5px; }
.nd-form .field > span { font-size: 12px; color: var(--ivory2); display: flex; align-items: center; gap: 7px; }
.field-opt { color: var(--ivory3); font-weight: 400; font-size: 10.5px; font-style: italic; }
.nd-form input, .nd-form select, .nd-notes { background: var(--surf2); color: var(--ivory); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 13px; font-family: var(--font-sans); width: 100%; }
.nd-form input:focus, .nd-form select:focus, .nd-notes:focus { outline: none; border-color: var(--gold); }
.nd-form select { cursor: pointer; appearance: none; -webkit-appearance: none; }
/* Read-only auto-numbered reference shown on the new-deal form. */
.nd-ref-value {
  background: var(--surface); border: 1px dashed var(--border2); border-radius: 8px;
  padding: 9px 11px; font-size: 13px; color: var(--accent-ink); letter-spacing: 0.03em; width: fit-content; min-width: 110px;
}
.nd-notes { resize: vertical; min-height: 92px; line-height: 1.5; }
/* Deal title: read-only, auto-built from the equipment units — one line per
   unit. Monospace + pre so the aligned "qty x vendor - model - …" lines read
   cleanly; the "(read only)" note beside the label is red. */
.nd-title-ro { color: var(--red-ink); font-weight: 600; font-size: 11px; font-style: normal; letter-spacing: 0.02em; }
.nd-title-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nd-title-regen { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; font-size: 11px; color: var(--accent-ink); cursor: pointer; text-decoration: underline; }
.nd-title-auto {
  width: 100%; font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
  color: var(--ivory); background: var(--surface); border: 1px solid var(--border2);
  border-radius: 8px; padding: 9px 11px; resize: vertical; white-space: pre; overflow-x: auto;
}
.nd-title-auto:focus { outline: none; border-color: var(--gold); }
.nd-title-auto:empty::before, .nd-title-auto::placeholder { color: var(--ivory3); font-family: var(--font-sans); }
.deal-card-title-more { color: var(--ivory3); font-weight: 400; font-size: 11px; margin-left: 6px; white-space: nowrap; }
/* Deal file attachments (new/edit-deal modal). */
.nd-attach { display: flex; flex-direction: column; gap: 8px; }
.nd-attach-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ivory3); }
.nd-attach-add { display: inline-flex; width: fit-content; cursor: pointer; }
.nd-attach-btn { padding: 7px 14px; font-size: 11px; }
.nd-attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nd-attach-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--surf2); border: 1px solid var(--border); border-radius: var(--radius-control); font-size: 12.5px; }
.nd-attach-item .nd-att-ico { flex: none; color: var(--accent-ink); }
.nd-attach-item .nd-att-name { flex: 1; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-attach-item .nd-att-name a { color: var(--ivory); text-decoration: none; }
.nd-attach-item .nd-att-name a:hover { color: var(--accent-ink); text-decoration: underline; }
.nd-attach-item .nd-att-size { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--ivory3); }
.nd-attach-item .nd-att-pending { flex: none; font-size: 10px; color: var(--amber-ink); font-family: var(--font-mono); }
.nd-attach-item .nd-att-rm { flex: none; border: none; background: transparent; color: var(--ivory3); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; }
.nd-attach-item .nd-att-rm:hover { color: var(--red-ink); }
/* Attachment badge on a deal tile / tracker row. One file → click opens it;
   several → click drops down a menu of files, each opening in the viewer. */
.deal-attach { position: relative; display: inline-flex; }
.deal-attach-badge {
  display: inline-flex; align-items: center; gap: 4px; font: inherit;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ivory2);
  background: var(--surf2); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 2px 9px; cursor: pointer;
}
.deal-attach-badge:hover { border-color: var(--gold-dim); color: var(--accent-ink); }
.deal-attach-badge .paperclip { color: var(--accent-ink); }
.deal-attach-badge .caret { font-size: 9px; }
.deal-attach-menu {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 40;
  min-width: 220px; max-width: 340px; background: var(--surface);
  border: 1px solid var(--border2); border-radius: 10px; box-shadow: var(--shadow-lift);
  padding: 5px; display: flex; flex-direction: column; gap: 2px;
}
.deal-attach-menu[hidden] { display: none; }
.deal-attach-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit;
  font-size: 12.5px; color: var(--ivory); background: transparent; border: none;
  border-radius: 7px; padding: 7px 9px; cursor: pointer;
}
.deal-attach-item:hover { background: var(--surf2); }
.deal-attach-item .da-ico { flex: none; color: var(--accent-ink); }
.deal-attach-item .da-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-attach-item .da-size { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--ivory3); }
/* Clickable attachment name in the deal modal (opens in the in-app viewer). */
.nd-att-open {
  flex: 1; font: inherit; font-size: 12.5px; color: var(--ivory); background: transparent;
  border: none; padding: 0; cursor: pointer; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nd-att-open:hover { color: var(--accent-ink); text-decoration: underline; }
.nd-error { margin: 0; color: var(--red-ink); font-size: 12.5px; }
.nd-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--surface); }

/* Deal-level notes shown in the timeline hub */
.dt-deal-notes { background: var(--surf2); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 9px; padding: 11px 14px; margin-bottom: 14px; }
.dt-deal-notes-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.dt-deal-notes-body { margin: 5px 0 0; font-size: 13px; color: var(--ivory2); line-height: 1.5; white-space: pre-wrap; }

/* ── Artifacts side panel (drawer) ─────────────────────────────── */
.artifacts-panel { position: fixed; inset: 0; z-index: 60; }
.artifacts-panel[hidden] { display: none; }
.artifacts-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.artifacts-drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 94vw); border-radius: 0; border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: -18px 0 44px -20px rgba(0,0,0,0.6); animation: art-slide 0.18s ease; }
@keyframes art-slide { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.artifacts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.artifacts-title { display: flex; flex-direction: column; gap: 4px; }
.artifacts-eyebrow { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.artifacts-step { font-size: 15px; font-weight: 600; color: var(--ivory); }
.artifacts-body { padding: 16px 18px; overflow-y: auto; }
/* Section headers inside the drawer. */
.art-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); margin: 4px 0 10px; }
.art-section-head + .art-section-head, .art-list + .art-section-head, .dt-step-docs + .art-section-head { margin-top: 20px; }
.art-section-count { color: var(--ivory3); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.art-suggested { font-size: 11.5px; color: var(--ivory3); font-style: italic; margin-bottom: 10px; }

/* Document history list. */
.art-list { display: flex; flex-direction: column; gap: 7px; }
.art-empty { font-size: 12.5px; color: var(--ivory3); border: 1px dashed var(--border); border-radius: 9px; padding: 16px; text-align: center; }
.art-item { display: flex; align-items: center; gap: 10px; background: var(--surf2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; }
.art-item-icon { flex: none; font-size: 15px; line-height: 1; }
.art-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; background: transparent; border: none; text-align: left; cursor: pointer; padding: 0; }
.art-item-name { font-size: 13px; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-item-main:hover .art-item-name { color: var(--accent-ink); text-decoration: underline; }
.art-item-meta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.03em; color: var(--ivory3); text-transform: capitalize; }
.art-item-src { flex: none; background: transparent; border: none; color: var(--teal); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.art-item-src:hover { color: var(--accent-ink); }
.art-item-del { flex: none; background: transparent; border: 1px solid var(--border); color: var(--ivory3); font-size: 11px; border-radius: 6px; cursor: pointer; padding: 3px 7px; }
.art-item-del:hover { color: var(--red-ink); border-color: var(--red); }

/* Lay the add-controls out vertically in the drawer. */
.artifacts-body .dt-step-docs { flex-direction: column; align-items: stretch; margin-left: 0; gap: 9px; }
.artifacts-body .dt-doc-sep { display: none; }
.artifacts-body .dt-doc-attach { text-align: center; padding: 9px; }
.artifacts-body .dt-doc-linkfield, .artifacts-body .dt-doc-textfield { display: flex; gap: 6px; }
.artifacts-body .dt-doc-linkinput, .artifacts-body .dt-doc-textinput { flex: 1; width: auto; }
@media (max-width: 640px) { .artifacts-drawer { width: 100vw; } }
.ev-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ev-table .ev-row-hit td { background: var(--gold-bg); color: var(--ivory); }
.ev-table .ev-row-hit td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.ev-table th, .ev-table td {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.ev-table th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent-ink); background: var(--surf3);
  position: sticky; top: -16px;
}
.ev-table td { color: var(--ivory2); font-family: var(--font-mono); }
.ev-table tbody tr:hover { background: var(--surf3); }

/* ── Assertions ──────────────────────────────────────────────── */
.assertions-wrap summary { cursor: pointer; }
.assertions { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.assertion {
  display: grid; grid-template-columns: 130px 1fr auto auto; gap: 10px; align-items: center;
  padding: 7px 10px; background: var(--surf2); border-radius: 8px; font-size: 12px;
}
.assertion.corrected { border-left: 3px solid var(--teal); }
.assertion.has-source { cursor: pointer; transition: background 0.12s ease; }
.assertion.has-source:hover { background: var(--surf3); }
.assertion.has-source .a-val { color: var(--accent-ink); }
.assertion.has-source:hover .a-val { text-decoration: underline; }
.assertion .a-kind { font-family: var(--font-mono); font-size: 11px; color: var(--accent-ink); }
.assertion .a-val  { color: var(--ivory2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assertion .a-src  { font-family: var(--font-mono); font-size: 10px; color: var(--ivory3); }

/* ── Asset identity (Milestone 3) ────────────────────────────── */
.assets-tree { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.asset-children { display: flex; flex-direction: column; gap: 8px; margin-left: 18px; padding-left: 14px; border-left: 1px dashed var(--border); }
.asset {
  display: grid; grid-template-columns: 26px 1fr auto auto; gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--surf2); border: 1px solid var(--border); border-radius: 10px;
}
.asset-package { background: var(--surface); border-left: 3px solid var(--gold); }
.asset-icon { font-size: 16px; text-align: center; }
.asset-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.asset-head { display: flex; align-items: center; gap: 9px; }
.asset-type { font-size: 13.5px; font-weight: 600; color: var(--ivory); }
.asset-status {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 9px; border: 1px solid var(--border); color: var(--ivory3);
}
.asset-status.status-candidate { color: var(--accent-ink); border-color: var(--gold); background: var(--gold-bg); }
.asset-status.status-active { color: var(--teal); border-color: var(--teal); }
.asset-serial { font-size: 12px; color: var(--ivory2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-vlevel {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ivory3);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; white-space: nowrap;
}
.asset-vlevel.vl-visually_verified, .asset-vlevel.vl-authority_verified { color: var(--teal); border-color: var(--teal); }
.asset-vlevel.vl-documented { color: var(--ivory2); }
.asset-evidence { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.asset-empty { font-size: 12.5px; color: var(--ivory3); padding: 6px 4px 2px; }
.assertion.corrected .a-src { color: var(--teal); }
.a-correct {
  font-family: var(--font-mono); font-size: 10px; color: var(--ivory3);
  background: transparent; border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 8px; cursor: pointer;
}
.a-correct:hover { color: var(--accent-ink); border-color: var(--gold); }
.a-correct:disabled { opacity: 0.4; cursor: default; }
.a-correct-form {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line);
}
.a-correct-form input {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  color: var(--ivory); padding: 4px 8px; font-size: 12px;
}
.a-correct-form .ac-value { flex: 1 1 160px; }
.a-correct-form .ac-note { flex: 2 1 200px; }
.a-correct-form .ac-save, .a-correct-form .ac-cancel {
  font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer; border: 1px solid var(--line);
}
.a-correct-form .ac-save { background: var(--gold); color: var(--on-gold); border-color: var(--gold); font-weight: 600; }
.a-correct-form .ac-cancel { background: transparent; color: var(--ivory3); }
.a-correct-form .ac-err { color: var(--red-ink); font-size: 11px; flex: 1 1 100%; }

/* ── Deal lifecycle timeline (ADR-0009) ──────────────────────── */
.deal-panel { border-top: 2px solid var(--gold); }
.dt-progress { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.dt-progress-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surf2); overflow: hidden; }
.dt-progress-bar > span { display: block; height: 100%; background: var(--teal); transition: width 0.3s ease; }
.dt-progress-label { font-size: 11px; color: var(--ivory3); flex: none; }
.dt-stepper { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.dt-node {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  text-align: left; padding: 9px 10px; border-radius: 9px; cursor: pointer;
  background: var(--surf2); border: 1px solid var(--border);
  border-top: 3px solid var(--ivory3); transition: transform 0.12s ease;
}
.dt-node:hover { transform: translateY(-1px); }
.dt-node.past { border-top-color: var(--teal); }
.dt-node.current { border-top-color: var(--gold); background: var(--gold-bg); }
.dt-node.selected { outline: 2px solid var(--gold); outline-offset: 1px; }
.dt-node-idx {
  font-family: var(--font-mono); font-size: 10px; width: 18px; height: 18px;
  display: grid; place-content: center; border-radius: 50%;
  background: var(--surface); color: var(--ivory3);
}
.dt-node.past .dt-node-idx { background: var(--teal); color: var(--on-gold); }
.dt-node.current .dt-node-idx { background: var(--gold); color: var(--on-gold); }
.dt-node-title { font-size: 11.5px; font-weight: 600; color: var(--ivory); line-height: 1.25; }
.dt-node-days { font-size: 9.5px; color: var(--ivory3); }
.dt-node-count { font-size: 10px; color: var(--ivory3); }
.dt-detail { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.dt-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dt-detail-title { font-size: 14px; font-weight: 600; color: var(--ivory); }
.dt-detail-days { font-size: 11px; color: var(--ivory3); font-weight: 400; }
.dt-advance {
  font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer;
  background: var(--gold); color: var(--on-gold); border: 1px solid var(--gold);
}
.dt-advance:hover { background: var(--gold2); }
.dt-current-chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--gold-bg); border-radius: 999px; padding: 3px 10px;
}
.dt-analysis {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surf2); border-radius: 8px; padding: 9px 12px; margin-bottom: 12px;
}
.dt-analysis-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.dt-analysis-nums { font-size: 11px; color: var(--ivory3); }
.dt-analysis-none { font-size: 12px; color: var(--ivory3); }
.dt-steps { display: flex; flex-direction: column; gap: 6px; }
.dt-step { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
/* Phase.step index (e.g. 1.1) to the left of the status button. */
.dt-step-num { flex: none; width: 30px; text-align: right; font-size: 11px; color: var(--accent-ink); }
.dt-step-status {
  flex: none; width: 76px; font-family: var(--font-mono); font-size: 11px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ivory3); text-align: left;
}
/* Completed item — badge turns green. */
.dt-step-status.done { color: var(--green-ink); border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface)); }
.dt-step-status.na { color: var(--ivory3); opacity: 0.7; }
/* Mandatory item not yet done — flag the status button red. */
.dt-step-status.required { color: var(--red-ink); border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--surface)); }
.dt-step-label { font-size: 12.5px; color: var(--ivory2); }
.dt-step.done .dt-step-label { color: var(--ivory); }
.dt-step.na .dt-step-label { color: var(--ivory3); text-decoration: line-through; opacity: 0.7; }
.dt-step-hint { font-size: 11px; color: var(--ivory3); font-style: italic; }
/* Far-right "Artifacts" button — opens the step's side panel. */
.dt-artifacts-btn { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--ivory2); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 5px 12px; cursor: pointer; }
.dt-artifacts-btn:hover { border-color: var(--gold); color: var(--accent-ink); }
.dt-art-count { font-size: 10px; color: var(--accent-ink); background: var(--gold-bg); border: 1px solid var(--gold); border-radius: 999px; padding: 0 6px; line-height: 1.5; }

/* ── Limitations / errors / footer ───────────────────────────── */
.limitations ul { margin: 8px 0 0; padding-left: 18px; }
.limitations li { font-size: 12px; color: var(--ivory3); line-height: 1.55; margin-bottom: 6px; }
.error-panel { border-left: 4px solid var(--red); }
.error-panel .panel-title { color: var(--red-ink); }
#error-detail { color: var(--ivory2); font-size: 12px; white-space: pre-wrap; }

/* Transient informational toast (non-error feedback, e.g. link saved w/o snapshot) */
.notice {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  max-width: min(560px, calc(100vw - 32px)); z-index: 60;
  background: var(--surf3); color: var(--ivory);
  border: 1px solid var(--gold); border-left: 3px solid var(--gold);
  border-radius: var(--radius-control); padding: 12px 16px;
  font-size: 13px; line-height: 1.5; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .18s, transform .18s;
}
.notice:not([hidden]) { opacity: 1; transform: translate(-50%, 0); }
.notice b { color: var(--accent-ink); font-weight: 600; }
.notice .notice-close {
  margin-left: 10px; background: none; border: none; color: var(--ivory3);
  cursor: pointer; font-size: 15px; line-height: 1; vertical-align: middle;
}
.notice .notice-close:hover { color: var(--ivory); }
@media (prefers-reduced-motion: reduce) { .notice { transition: none; } }
.footer {
  padding: 18px 24px; text-align: center; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.foot-brand {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 12px; color: var(--ivory2);
}
.foot-wp {
  font-weight: 700; letter-spacing: 0.06em; color: var(--accent-ink);
  text-transform: uppercase; font-size: 12px;
}
.foot-llc { color: var(--ivory3); }
.foot-sep { color: var(--ivory3); }
.foot-note {
  font-size: 10.5px; color: var(--ivory3); line-height: 1.5;
  max-width: 720px;
}

/* ══ Views / navigation (dashboard → timeline → AVIP) ═══════════ */
.view[hidden] { display: none; }
/* width:100% + min-width:0 so the view fills its column and doesn't size to
   max-content — margin:0 auto (for centering ≥1120px) otherwise disables the
   flex stretch and lets content overflow on narrower screens. */
.wrap-view { width: 100%; min-width: 0; max-width: 1120px; margin: 0 auto; padding: 26px 24px 48px; }
.crumbs { width: 100%; min-width: 0; max-width: 1120px; margin: 0 auto; padding: 14px 24px 0; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.crumb { color: var(--ivory3); text-decoration: none; }
a.crumb:hover { color: var(--accent-ink); }
.crumb.current { color: var(--ivory); font-weight: 600; }
.crumb-sep { color: var(--ivory3); }

/* Dashboard */
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.dash-eyebrow { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 6px; }
.dash-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--ivory); }
.dash-sub { font-size: 13px; color: var(--ivory3); margin: 6px 0 0; max-width: 640px; }
.dash-cta { font-size: 13px; font-weight: 600; padding: 10px 18px; background: var(--gold); color: var(--on-gold); border: 1px solid var(--gold); border-radius: 9px; cursor: pointer; }
.dash-cta:hover { background: var(--gold2); }

.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--ivory3); border-radius: 11px; padding: 13px 15px; overflow: hidden; min-width: 0; }
.kpi.good { border-left-color: var(--teal); }
.kpi.bad { border-left-color: var(--red); }
.kpi.gold { border-left-color: var(--gold); }
.kpi-label { font-size: 11px; color: var(--ivory3); text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-value { font-size: 30px; font-weight: 700; color: var(--ivory); line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi.bad .kpi-value { color: var(--red-ink); }
.kpi.good .kpi-value { color: var(--teal); }
.kpi.gold .kpi-value { color: var(--accent-ink); }
.kpi-sub { font-size: 11px; color: var(--ivory3); margin-top: 2px; }

.dash-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.chart-card { padding: 16px 18px; }
.chart-card.chart-wide { grid-column: 1 / -1; }
.chart-title { font-size: 12px; font-weight: 600; color: var(--ivory2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }

.recmix-bar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; background: var(--surf2); }
.recmix-bar > span { display: block; min-width: 3px; }
.recmix-empty { flex: 1; }
.recmix-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.recmix-legend .lg { font-size: 12px; color: var(--ivory2); display: inline-flex; align-items: center; gap: 6px; }
.recmix-legend .lg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.recmix-legend .lg b { color: var(--ivory); font-variant-numeric: tabular-nums; }

.pipeline { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.pl-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; text-decoration: none; border-radius: 8px; padding-bottom: 2px; }
.pl-col:hover { background: var(--surf2); }
.pl-n { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ivory); }
.pl-bar { width: 60%; max-width: 46px; background: var(--sky); border-radius: 5px 5px 0 0; min-height: 5px; }
.pl-col.live .pl-bar { background: var(--gold); }
.pl-lab { font-size: 10.5px; color: var(--ivory3); text-align: center; line-height: 1.2; }
.pl-col.live .pl-lab { color: var(--accent-ink); font-weight: 600; }

.gauge { display: flex; flex-direction: column; align-items: center; }
.gauge-svg { width: 100%; max-width: 180px; }
.gauge-val { font-size: 26px; font-weight: 700; color: var(--ivory); margin-top: -8px; font-variant-numeric: tabular-nums; }
.gauge-val span { font-size: 12px; color: var(--ivory3); font-weight: 400; }

.components { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ring-svg { width: 108px; height: 108px; flex: none; }
.ring-num { fill: var(--ivory); font-size: 22px; font-weight: 700; font-family: var(--font-sans); }
.ring-cap { fill: var(--ivory3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); }
.comp-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 5px; }
.comp-list li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ivory2); }
.comp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ivory3); flex: none; }
.comp-list li.available .comp-dot { background: var(--gold); }
.comp-badge { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.comp-badge.available { color: var(--accent-ink); border-color: var(--gold); }

/* Timeline — six components */
.tl-head { margin-bottom: 20px; }
.tl-components { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.tl-comp { display: flex; flex-direction: column; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--ivory3); border-radius: 12px; padding: 16px 17px; text-decoration: none; }
.tl-comp.available { border-top-color: var(--gold); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.tl-comp.available:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.tl-comp-top { display: flex; align-items: center; justify-content: space-between; }
.tl-comp-num { font-family: var(--font-mono); font-size: 12px; width: 26px; height: 26px; display: grid; place-content: center; border-radius: 50%; background: var(--surf2); color: var(--ivory3); }
.tl-comp.available .tl-comp-num { background: var(--gold); color: var(--on-gold); }
.tl-comp-status { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.tl-comp-status.available { color: var(--accent-ink); border-color: var(--gold); background: var(--gold-bg); }
.tl-comp-title { font-size: 15px; font-weight: 650; color: var(--ivory); }
.tl-comp-days { font-size: 10.5px; color: var(--ivory3); }
.tl-comp-sum { font-size: 12.5px; color: var(--ivory2); line-height: 1.5; }
.tl-comp-steps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.tl-comp-steps span { font-size: 10.5px; color: var(--ivory3); background: var(--surf2); border-radius: 5px; padding: 2px 7px; }
.tl-comp-cta { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.tl-comp-cta.muted { color: var(--ivory3); font-weight: 400; font-style: italic; }

/* Deal hub (timeline view) */
.deal-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.deal-bar-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ivory3); }
#deal-select { flex: 1; min-width: 220px; max-width: 460px; background: var(--surface); color: var(--ivory); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 13px; }
.hub-empty { color: var(--ivory3); font-size: 13px; background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; padding: 22px; text-align: center; }
.hub { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }

.ws { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); }
.ws-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin: 16px 0 9px; }
.ws-avip-row { justify-content: flex-start; }
.ws-avip { margin-left: auto; font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 8px; cursor: pointer; background: var(--gold); color: var(--on-gold); border: 1px solid var(--gold); }
.ws-avip:hover { background: var(--gold2); }
.ws-sub-note { font-family: var(--font-sans); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ivory3); font-style: italic; margin-left: 9px; }
.ws-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ws-field { position: relative; display: flex; flex-direction: column; gap: 5px; }
.ws-field .ws-field-label { font-size: 11.5px; color: var(--ivory3); }
.ws-field input { background: var(--surf2); color: var(--ivory); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ws-field input:focus { outline: none; border-color: var(--gold); }
/* Inline auto-save feedback for a Details field (top-right of the field). */
.ws-field-status { position: absolute; top: 0; right: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.ws-field-status.show { opacity: 1; }
.ws-field-status.saving { color: var(--ivory3); }
.ws-field-status.saved { color: var(--teal); }
.ws-field-status.error { color: var(--red-ink); }

/* ── Deals page (create / edit / archive) ─────────────────────── */
.deals-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.deals-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 14px; }
.deals-tabs { display: inline-flex; gap: 3px; background: var(--surf2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.deals-tab { font-size: 12.5px; font-weight: 500; color: var(--ivory3); background: transparent; border: none; border-radius: 6px; padding: 6px 15px; cursor: pointer; }
.deals-tab:hover { color: var(--ivory); }
.deals-tab.on { color: var(--accent-ink); background: var(--gold-bg); }
.deals-search { flex: 1; min-width: 180px; max-width: 440px; background: var(--surf2); color: var(--ivory); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-family: var(--font-sans); }
.deals-search:focus { outline: none; border-color: var(--gold); }
.deals-body { overflow-x: auto; }
/* Sourcing inbox — external turbine-summary submissions awaiting triage (ADR-0022) */
.sourcing-inbox { margin: 0 0 18px; border: 1px solid var(--amber); background: var(--amber-bg);
                  border-radius: var(--radius-card); padding: 14px 16px; }
.si-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.si-badge { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--on-gold);
            background: var(--amber); border-radius: var(--radius-pill); min-width: 22px; height: 22px;
            display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }
.si-title { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ivory); }
.si-sub { color: var(--ivory3); font-size: 12px; flex: 1 1 240px; }
.si-list { display: flex; flex-direction: column; gap: 8px; }
.si-card { display: flex; align-items: center; gap: 14px; background: var(--surface);
           border: 1px solid var(--border2); border-radius: var(--radius-control); padding: 11px 13px; }
.si-card-main { flex: 1 1 auto; min-width: 0; }
.si-card-title { font-weight: 700; color: var(--ivory); font-size: 13.5px; display: flex;
                 align-items: center; gap: 8px; flex-wrap: wrap; }
.si-rec { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
          color: var(--accent-ink); background: var(--gold-bg); border-radius: var(--radius-pill); padding: 1px 8px; }
.si-oneliner { font-family: var(--font-mono); font-size: 11.5px; color: var(--ivory2); margin: 3px 0 0; line-height: 1.4; }
.si-meta { color: var(--ivory3); font-size: 11px; margin-top: 3px; }
.si-actions { display: flex; gap: 8px; flex: none; }
.si-actions .wp-btn { padding: 7px 13px; font-size: 11.5px; }
.wp-btn.ghost { background: transparent; color: var(--ivory2); }
.wp-btn.ghost:hover { border-color: var(--red); color: var(--red-ink); }
@media (max-width: 640px) {
  .si-card { flex-direction: column; align-items: stretch; }
  .si-actions { justify-content: flex-end; }
  /* Stack the deal tile's title above its actions, and let the action buttons
     wrap — otherwise the fixed (flex:none) Open/Edit/Archive/Executive-summary
     row runs past the card edge on a phone. */
  .deal-card-top { flex-direction: column; align-items: stretch; gap: 12px; }
  .deal-card-actions { flex-wrap: wrap; }
}
.deals-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.deals-table th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3); font-weight: 500; padding: 9px 12px; border-bottom: 1px solid var(--border2); white-space: nowrap; }
.deals-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.deals-table tbody tr:hover td { background: var(--surf2); }
.deals-ref { color: var(--ivory2); white-space: nowrap; }
.deals-title { color: var(--ivory); font-weight: 500; min-width: 140px; }
.deals-cell { color: var(--ivory2); max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deals-phase { font-family: var(--font-mono); font-size: 11px; color: var(--teal); border: 1px solid var(--teal); border-radius: var(--radius-pill); padding: 2px 9px; white-space: nowrap; }
.deals-actions-col { text-align: right; }
.deals-actions { text-align: right; white-space: nowrap; }
.deals-btn { font-size: 12px; font-weight: 500; padding: 5px 11px; margin-left: 6px; border-radius: 7px; cursor: pointer; background: var(--gold); color: var(--on-gold); border: 1px solid var(--gold); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.deals-btn:hover { background: var(--gold2); }
.deals-btn.ghost { background: transparent; color: var(--ivory2); border-color: var(--border2); }
.deals-btn.ghost:hover { color: var(--accent-ink); border-color: var(--gold); background: transparent; }
.deals-btn.danger { background: transparent; color: var(--red-ink); border-color: var(--red); }
.deals-btn.danger:hover { background: var(--red-bg); }

/* Deal tiles — one full-width row per deal */
.deal-cards { display: flex; flex-direction: column; gap: 14px; }
.deal-card {
  display: flex; flex-direction: column; gap: 14px;
  /* A deliberately strong edge: each card must read as one instance at a glance. */
  border: 2px solid var(--card-outline, var(--border2)); border-radius: 12px; background: var(--surf2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  padding: 16px 20px; transition: border-color 0.15s;
}
.deal-card:hover { border-color: var(--gold); }
/* Top row: identity on the left, actions on the right. */
.deal-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.deal-card-id { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.deal-card-refline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deal-card-ref { font-size: 11.5px; color: var(--ivory3); letter-spacing: 0.03em; white-space: nowrap; }
.deal-card-title { font-size: 16px; font-weight: 600; color: var(--ivory); line-height: 1.3; }
/* A column of rows: Open / Edit / Archive, then the two executive summaries
   directly under Open (both rows start at the same left edge). */
.deal-card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 1 auto; min-width: 0; } /* every action row sits on the tile's right edge */ /* shrink + wrap: a third summary button must never cover the title */
.deal-card-actions-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* The tile decides by its own width, not the window's: with the sidebar open
   a 700px window leaves a 500px card, where title and three action rows
   cannot share one line. */
.deal-card { container-type: inline-size; }
@container (max-width: 680px) {
  .deal-card-top { flex-direction: column; align-items: stretch; gap: 12px; }
  .deal-card-actions { width: 100%; }
}
.deal-card-summaries { flex-basis: 100%; }
.deal-card-actions .deals-btn { margin-left: 0; padding: 7px 14px; }
/* Buyer / seller / equipment / close date spread across the width. */
.deal-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 20px;
  padding-top: 13px; border-top: 1px solid var(--border);
}
.deal-card-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deal-card-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ivory3);
}
.deal-card-value { font-size: 13.5px; color: var(--ivory2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Status + next steps: two columns on wide, stacked on narrow. */
.deal-card-long { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 24px; }
.deal-card-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.deal-card-text { margin: 0; font-size: 13px; color: var(--ivory2); line-height: 1.5; }

/* Tracker layout on the Deals page — a dense, scannable row per deal. */
.trk-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.trk-table { width: 100%; min-width: 1020px; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.trk-table th {
  position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ivory3); background: var(--surf2); border-bottom: 1px solid var(--border);
  padding: 9px 14px;
}
.trk-table td {
  padding: 11px 14px; color: var(--ivory2); border-bottom: 1px solid var(--border);
  vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trk-table tbody tr:last-child td { border-bottom: none; }
.trk-table tbody tr:hover td { background: var(--surf2); }
.trk-empty { color: var(--ivory3); }
.trk-col-deal .trk-ref { display: block; font-size: 11.5px; color: var(--accent-ink); }
.trk-col-deal .trk-title {
  display: block; width: 100%; color: var(--ivory); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: left; font: inherit; background: none; border: none; padding: 0;
}
.trk-col-deal button.trk-title { cursor: pointer; }
.trk-col-deal button.trk-title:hover { color: var(--accent-ink); text-decoration: underline; }
.trk-col-deal button.trk-title:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.trk-col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Notes carry the whole status, so this column wraps where the others clip.
   Qualified with `td` to outrank the `.trk-table td` nowrap above. */
.trk-table td.trk-col-notes { white-space: normal; text-overflow: clip; }
.trk-col-notes .trk-when { display: block; font-size: 10px; letter-spacing: 0.04em; color: var(--ivory3); }
.trk-col-notes .trk-note { display: block; line-height: 1.45; }
.trk-col-act { white-space: nowrap; text-align: right; }
.trk-col-act .deals-btn { padding: 4px 10px; font-size: 12px; }
.trk-col-act .deals-btn + .deals-btn { margin-left: 5px; }

.cp-edit {
  font-size: 11px; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surf2); color: var(--ivory3);
  border: 1px solid var(--border); cursor: pointer; white-space: nowrap; margin-left: 8px;
}
.cp-edit:hover { color: var(--accent-ink); border-color: var(--gold); }
.cp-edit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Add a counterparty — the review form behind the website read. */
.cpadd-working { color: var(--accent-ink); }
.cpadd-read { color: var(--ivory3); }

.cp-head-actions { display: flex; align-items: center; gap: 8px; }
.cpadd-fetch { display: flex; gap: 8px; }
.cpadd-fetch input { flex: 1; min-width: 0; }
.cpadd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cpadd-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.cpadd-source {
  font-size: 11px; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--surf2); color: var(--ivory2);
  border: 1px solid var(--border); text-decoration: none;
}
.cpadd-source:hover { color: var(--accent-ink); border-color: var(--gold); }
.cpadd-chip {
  font-size: 12px; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--surf2); color: var(--ivory3);
  border: 1px solid var(--border); cursor: pointer;
}
.cpadd-chip:hover { color: var(--ivory); }
.cpadd-chip.on { color: var(--on-gold, var(--ivory)); background: var(--gold); border-color: var(--gold); }
.cpadd-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Sign in — covers the app until there is a session. */
.login-screen {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--bg); padding: 24px; overflow-y: auto;
}
.login-card { width: 100%; max-width: 400px; padding: 28px 30px 30px; }
.login-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 22px; }
.login-brand .brand-logo { margin-bottom: 8px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-title { margin: 0; font-size: 20px; font-family: var(--font-head); color: var(--ivory); }
.login-note { margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ivory3); }
.login-form .field input {
  width: 100%; background: var(--surf2); color: var(--ivory); border: 1px solid var(--border);
  border-radius: var(--radius-control); padding: 9px 11px; font: inherit; font-size: 13.5px;
}
.login-form .field input:focus { outline: none; border-color: var(--gold); }
/* Reveal-password control, sitting inside the field. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 40px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px;
  background: none; color: var(--ivory3); cursor: pointer;
}
.pw-eye:hover { color: var(--ivory); }
.pw-eye.on { color: var(--accent-ink); }
.pw-eye:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pw-eye svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
/* The slash shows only while hidden — an open eye means "click to reveal". */
.pw-eye .pw-slash { opacity: 1; }
.pw-eye.on .pw-slash { opacity: 0; }

.login-error { margin: 0; font-size: 12.5px; color: var(--red, #fb2c36); }
.login-submit { margin-top: 4px; justify-content: center; }
/* Single sign-on buttons under the password form (PG2-10). */
.sso-buttons { display: flex; flex-direction: column; gap: 8px; }
.sso-sep { text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ivory3); }
.sso-btn { justify-content: center; text-decoration: none; }
.login-aux { text-align: center; margin: 2px 0 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-ink); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: var(--ivory); }
/* Personal tokens + webhooks rows (PG2-10). */
.tok-row, .wh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tok-main { min-width: 0; flex: 1 1 260px; }
.tok-active { color: var(--teal, #2a9d8f); border-color: var(--teal, #2a9d8f); }
.tok-expired { color: var(--accent-ink); border-color: var(--gold); }
.tok-revoked { color: var(--ivory3); }
.wh-err { color: var(--red-ink); font-family: var(--font-mono); font-size: 11px; }
/* Multi-factor sign-in (M7-01). */
.mfa-qr { display: flex; justify-content: center; margin: 6px 0; }
.mfa-qr svg { width: 168px; height: 168px; background: #fff; padding: 8px; border-radius: 8px; }
.mfa-recovery { margin-top: 10px; padding: 10px 12px; background: var(--surf2); border-radius: 8px; }
.mfa-codes { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px 12px; font-size: 13px; }
.mfa-policy { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ivory2); margin: 0 0 12px; }
.user-pill-ok { color: var(--teal, #2a9d8f); border-color: var(--teal, #2a9d8f); }

/* Who is signed in, at the foot of the sidebar. */
.session-box { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; }
.session-name { font-size: 12.5px; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; }
.session-role { font-size: 10.5px; letter-spacing: 0.04em; color: var(--ivory3); }
.signout-btn { width: 100%; justify-content: center; margin-bottom: 14px; }
/* A tracker-only shell has no room for the rest of the app. */
body.tracker-only #deals-nav { pointer-events: none; }

/* Access matrix — components x roles, reported from live policy. */
.access-matrix-head { margin: 26px 0 10px; }
.access-matrix-title {
  margin: 0 0 4px; font-family: var(--font-head); font-size: 15px; color: var(--ivory);
}
.matrix-conf {
  font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent-ink); border: 1px solid var(--gold-dim, var(--gold)); border-radius: var(--radius-pill);
  padding: 1px 6px; white-space: nowrap;
}
.matrix-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); }
.matrix-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.matrix-table th, .matrix-table td { border-bottom: 1px solid var(--border); }
.matrix-table tbody tr:last-child th, .matrix-table tbody tr:last-child td { border-bottom: none; }
.matrix-corner, .matrix-role {
  position: sticky; top: 0; background: var(--surf2); text-align: left; vertical-align: bottom;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ivory3); padding: 10px 8px;
}
.matrix-role { text-align: center; min-width: 76px; }
.matrix-corner { min-width: 240px; }
/* A group heading spanning the row keeps a long grid navigable. */
.matrix-group {
  text-align: left; background: var(--surf3, var(--surf2)); color: var(--ivory2);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 12px;
}
.matrix-name { text-align: left; padding: 10px 12px; font-weight: 400; }
.matrix-name-text { color: var(--ivory); font-size: 13px; margin-right: 7px; }
.matrix-detail { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ivory3); }
.matrix-cell { text-align: center; padding: 7px 8px; }
.matrix-table tbody tr:hover td { background: var(--surf2); }

/* Checklist due dates, reminders, activity feed, mentions, digest (PG2-04). */
.dt-step-due { background: var(--surf2); color: var(--ivory2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font: inherit; font-size: 11px; margin-left: 8px; }
.dt-step-due:focus { outline: none; border-color: var(--gold); }
.dt-step.overdue .dt-step-due { border-color: var(--red); color: var(--red-ink); }
.dt-step.due-soon .dt-step-due { border-color: var(--amber); color: var(--amber-ink); }
.dt-step-badge { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-pill); margin-left: 6px; }
.dt-step.overdue .dt-step-badge { color: var(--red-ink); border: 1px solid var(--red); }
.dt-step.due-soon .dt-step-badge { color: var(--amber-ink); border: 1px solid var(--amber); }
.hub-reminders { display: flex; gap: 10px; margin: 6px 0 10px; font-size: 12px; }
.hub-rem-bad { color: var(--red-ink); } .hub-rem-soon { color: var(--amber-ink); }
.act-sec { margin: 14px 0 6px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surf2); padding: 10px 14px; }
.act-sum { cursor: pointer; font-family: var(--font-head); font-size: 14px; color: var(--ivory); }
.act-sum-note { font-family: var(--font-sans); font-size: 11.5px; color: var(--ivory3); margin-left: 8px; }
.act-body { margin-top: 8px; }
.act-me { font-size: 12px; color: var(--accent-ink); margin-bottom: 6px; }
.act-row { display: grid; grid-template-columns: 120px 140px minmax(0, 1fr); gap: 6px 10px; padding: 5px 0; border-top: 1px dashed var(--border); font-size: 12.5px; }
.act-row:first-of-type { border-top: none; }
.act-when { font-size: 11px; color: var(--ivory3); }
.act-who { color: var(--ivory2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-text { color: var(--ivory); overflow-wrap: anywhere; }
.act-action .act-text { color: var(--ivory2); }
.act-mentions-me { background: var(--gold-bg, rgba(192,154,90,0.08)); }
.mention { color: var(--accent-ink); font-weight: 600; }
.digest-lede { font-size: 12px; color: var(--ivory3); margin: 0 0 12px; }
.digest-sec { margin: 0 0 14px; }
.digest-sec h3 { font-family: var(--font-head); font-size: 13.5px; color: var(--ivory); margin: 0 0 6px; }
.digest-sec ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ivory2); }
.digest-sec li { margin: 3px 0; }
.digest-empty { font-size: 12px; color: var(--ivory3); margin: 0; }
.digest-status { font-size: 11px; color: var(--ivory3); margin: 0 18px 6px; }
@media (max-width: 640px) {
  .act-row { grid-template-columns: minmax(0, 1fr); }
}

/* Branding settings and report photographs (PG2-05). */
.branding-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 14px; }
.branding-form .field { margin: 0; }
.branding-form input, .branding-form textarea { width: 100%; background: var(--surf2); color: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 7px 10px; font: inherit; font-size: 13px; box-sizing: border-box; }
.branding-form input:focus, .branding-form textarea:focus { outline: none; border-color: var(--gold); }
.branding-logo-row { display: flex; align-items: center; gap: 10px; }
#br-logo-preview { max-height: 48px; max-width: 220px; background: #fff; padding: 4px 8px; border-radius: 6px; }
.branding-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.branding-status { font-size: 11px; color: var(--ivory3); }
.ir-photos { display: flex; gap: 8px; margin: 6px 0 10px; }
.ir-photos img { height: 110px; width: auto; max-width: 32%; object-fit: cover; border-radius: 6px; border: 1px solid #E1E9F3; }
.xr-logo-brand { width: auto !important; max-width: 140px; height: 40px !important; object-fit: contain; }

/* Counterparty relationship, contacts, editor (PG2-06). */
.cp-rel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12.5px; }
.cp-rel-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-rel-status { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--radius-pill); border: 1px solid var(--border2); color: var(--ivory2); }
.cp-rel-active, .cp-rel-customer, .cp-rel-partner { color: var(--green-ink); border-color: var(--green); }
.cp-rel-engaged, .cp-rel-prospect { color: var(--accent-ink); border-color: var(--gold); }
.cp-rel-dormant { color: var(--ivory3); }
.cp-rel-touch { font-size: 10.5px; color: var(--ivory3); }
.cp-contacts { margin: 6px 0 0; padding-left: 16px; color: var(--ivory2); }
.cp-contacts li { margin: 2px 0; }
.cp-contacts span { color: var(--ivory3); }
.cp-rel-btn { margin-left: 6px; }
.cprel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.cprel-wide { grid-column: 1 / -1; }
.cprel-touch { display: flex; gap: 6px; }
.cprel-grid input, .cprel-grid select { background: var(--surf2); color: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 7px 10px; font: inherit; font-size: 13px; }
.cprel-h { font-family: var(--font-head); font-size: 14px; color: var(--ivory); margin: 16px 0 6px; }
.cprel-contacts { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cprel-contacts th { text-align: left; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ivory3); padding: 4px 6px 4px 0; }
.cprel-contacts td { padding: 3px 6px 3px 0; }
.cprel-contacts input { width: 100%; box-sizing: border-box; background: var(--surf2); color: var(--ivory); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12.5px; }
.cprel-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.cpnews-send { margin-left: 8px; }
@media (max-width: 640px) { .cprel-grid { grid-template-columns: 1fr; } }

/* Role matrix modal — what each role is for, then the live grid. */
/* Twice the admin card, and never wider than the window: the modal's 32px
   frame is the only thing between the card and the viewport edge. */
#roles-modal .ev-modal-card { width: min(1120px, 100%); max-width: 1120px; }
.roles-h {
  margin: 0 0 8px; font-family: var(--font-head); font-size: 15px; color: var(--ivory);
}
.roles-note { margin: 0 0 12px; font-size: 12px; color: var(--ivory3); line-height: 1.5; }
.roles-guide {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
  margin-bottom: 24px;
}
.roles-card {
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surf2);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
}
.roles-card-name { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ivory); }
.roles-card-summary { margin: 0; font-size: 12.5px; color: var(--accent-ink); }
.roles-card-line { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ivory2); }
.roles-k {
  display: inline-block; margin-right: 7px; padding: 0 6px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--ivory3); vertical-align: 1px;
}
.roles-k-can { color: var(--green-ink); border-color: var(--green); }
.roles-k-not { color: var(--ivory3); }
.roles-override { color: var(--amber-ink); }

/* Unit history (asset genealogy, ADR-0024) in the deal workspace. */
.gen-sec { margin: 14px 0 6px; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 14px; background: var(--surf2); }
.gen-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.gen-title { font-family: var(--font-head); font-size: 14px; color: var(--ivory); }
.gen-sub { font-size: 11.5px; color: var(--ivory3); }
/* Exhibit A coverage (PG3-01). */
.cov-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cov-chip { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--border2); color: var(--ivory2); }
.cov-chip.cov-covered { color: var(--green-ink); background: var(--green-bg); border-color: transparent; }
.cov-chip.cov-partial { color: var(--amber-ink); background: var(--amber-bg); border-color: transparent; }
.cov-chip.cov-missing { color: var(--ivory3); background: var(--surf3); border-color: transparent; }
.cov-chip.cov-conflicting { color: var(--red-ink); background: rgba(220,80,80,0.14); border-color: transparent; }
.cov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.cov-row { border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; padding: 9px 11px; background: var(--surface); min-width: 0; }
.cov-row.cov-covered { border-left-color: var(--green); }
.cov-row.cov-partial { border-left-color: var(--amber); }
.cov-row.cov-missing { border-left-color: var(--ivory3); }
.cov-row.cov-conflicting { border-left-color: var(--red); }
.cov-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cov-count { margin-left: auto; font-size: 10.5px; color: var(--ivory3); }
.cov-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cov-step { font-size: 11px; border-radius: 6px; padding: 2px 7px; border: 1px solid var(--border2); color: var(--ivory3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-step-done { color: var(--green-ink); border-color: var(--green); }
.cov-step-na { text-decoration: line-through; opacity: 0.6; }
.cov-requests { margin-top: 12px; }
.cov-req-list { margin: 4px 0 8px; padding-left: 18px; font-size: 12.5px; color: var(--ivory2); }
.cov-req-list li { margin: 3px 0; }
.cov-req-sec { font-size: 10.5px; color: var(--ivory3); margin-right: 4px; }
/* Seller questionnaire (PG3-02). */
/* Deal comparison (PG3-06). */
.compare-card { width: min(1100px, 100%); }
.compare-scroll { overflow-x: auto; }
.compare-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.compare-table th, .compare-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; min-width: 140px; }
.compare-table thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3); }
.compare-table tbody th { font-weight: 600; color: var(--ivory2); white-space: nowrap; min-width: 120px; }
.compare-best { color: var(--green-ink); font-weight: 600; }
.q-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.q-acts { margin-bottom: 10px; }
.q-cmp { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0 12px; }
.q-cmp th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.q-cmp td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.q-v-matches { color: var(--green-ink); border-color: var(--green); }
.q-v-differs { color: var(--red-ink); border-color: var(--red); }
.q-v-not_observed { color: var(--ivory3); }
.q-unit { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.q-section { margin-top: 6px; }
.q-sec-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3); }
.q-dl { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 2px 10px; margin: 4px 0 0; font-size: 12.5px; }
.q-dl dt { color: var(--ivory3); } .q-dl dd { margin: 0; color: var(--ivory); overflow-wrap: anywhere; }
@media (max-width: 640px) { .q-dl { grid-template-columns: 1fr; } .q-cmp { display: block; overflow-x: auto; } }
.gen-unit { border-top: 1px solid var(--border); padding: 10px 0 6px; }
.gen-unit:first-child { border-top: none; padding-top: 2px; }
.gen-unit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 6px; }
.gen-serial { font-size: 13px; color: var(--accent-ink); }
.gen-unit-what { font-size: 12.5px; color: var(--ivory2); }
.gen-unit-count { margin-left: auto; font-size: 10.5px; color: var(--ivory3); }
.gen-conflicts { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 4px 0 8px; padding: 6px 10px; border: 1px solid var(--amber); border-radius: 8px; font-size: 12px; }
.gen-conflicts-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber-ink); }
.gen-conflict { color: var(--ivory2); }
.gen-list { display: flex; flex-direction: column; }
.gen-ev { display: grid; grid-template-columns: 92px 150px minmax(0, 1fr) auto auto auto; gap: 6px 10px; align-items: baseline; padding: 5px 0; border-top: 1px dashed var(--border); font-size: 12.5px; }
.gen-ev:first-child { border-top: none; }
.gen-ev-other { opacity: 0.8; }
.gen-when { font-size: 11px; color: var(--ivory3); }
.gen-kind { color: var(--ivory); }
.gen-detail { color: var(--ivory2); overflow-wrap: anywhere; }
.gen-deal { font-size: 10.5px; color: var(--ivory3); }
.gen-status { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--ivory3); }
.gen-status-observed { color: var(--green-ink); border-color: var(--green); }
.gen-status-claimed { color: var(--amber-ink); border-color: var(--amber); }
.gen-retract { background: none; border: 1px solid var(--border2); border-radius: 6px; color: var(--ivory3); font: inherit; font-size: 11px; padding: 1px 7px; cursor: pointer; }
.gen-retract:hover { color: var(--red-ink); border-color: var(--red); }
.gen-graph { margin-top: 6px; font-size: 12px; }
.gen-graph summary { cursor: pointer; color: var(--ivory3); }
.gen-graph-meta { font-size: 10.5px; color: var(--ivory3); margin: 4px 0; }
.gen-edge { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; padding: 2px 0; color: var(--ivory2); }
.gen-edge-type { font-size: 10px; color: var(--accent-ink); }
.gen-claim { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.gen-claim-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3); }
.gen-claim input { background: var(--surface); color: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 5px 8px; font: inherit; font-size: 12px; flex: 1 1 120px; min-width: 0; }
.gen-claim input:focus { outline: none; border-color: var(--gold); }
.gen-claim-kind { font-size: 12px; padding: 4px 8px; }
.admin-mg-split { margin-left: 10px; }
@media (max-width: 640px) {
  .gen-ev { grid-template-columns: 92px minmax(0, 1fr); }
}

.confirm-extra { margin: 0 0 14px; }
.confirm-extra .nd-select { width: 100%; }

/* People — accounts on this workspace. */
.users-add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.users-add input, .users-add select {
  background: var(--surf2); color: var(--ivory); border: 1px solid var(--border);
  border-radius: var(--radius-control); padding: 8px 11px; font: inherit; font-size: 13px;
}
.users-add input { flex: 1 1 180px; min-width: 0; }
.users-add input:focus, .users-add select:focus { outline: none; border-color: var(--gold); }
/* The one moment a password is visible — make it unmissable and quotable. */
.users-issued {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  border: 1px solid var(--gold); background: var(--gold-bg, var(--surf2));
  border-radius: var(--radius-control); padding: 12px 14px; margin-bottom: 14px;
}
.users-issued-head { flex: 1 1 100%; font-size: 12.5px; color: var(--ivory); }
.users-issued-pw {
  font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.02em; color: var(--accent-ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; user-select: all;
}
.users-issued-note { flex: 1 1 100%; margin: 0; font-size: 11.5px; color: var(--ivory3); line-height: 1.5; }
.users-list { display: flex; flex-direction: column; }
.user-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto;
  align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border);
}
.user-row:last-child { border-bottom: none; }
.user-row.is-off { background: var(--surf2); } /* was opacity .55: 2.3:1 */
.user-row.is-off .user-name, .user-row.is-off .user-mail { color: var(--ivory3); }
.user-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-name { font-size: 13px; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; }
.user-mail { font-size: 11px; color: var(--ivory3); overflow: hidden; text-overflow: ellipsis; }
.user-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-role { font-size: 12px; color: var(--ivory2); }
.user-role-select { font-size: 12px; padding: 4px 8px; max-width: 190px; }
.user-pill {
  font-size: 10px; letter-spacing: 0.03em; padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); color: var(--ivory3);
}
.user-pill-warn { color: var(--amber-ink); border-color: var(--amber); }
.user-pill-off { color: var(--ivory3); }
.user-acts { display: flex; gap: 6px; justify-content: flex-end; }

/* Access matrix switches. A locked cell shows a mark, not a control. */
.matrix-fixed { font-size: 14px; cursor: help; }
.matrix-fixed.yes { color: var(--green-ink); }
.matrix-fixed.no { color: var(--ivory3); }
.matrix-switch {
  display: inline-flex; align-items: center; padding: 4px; background: none;
  border: none; cursor: pointer; border-radius: var(--radius-pill);
}
.matrix-switch:disabled { opacity: 0.5; cursor: progress; }
.matrix-switch .ms-track {
  width: 32px; height: 18px; border-radius: var(--radius-pill); background: var(--surf3, var(--surf2));
  border: 1px solid var(--border2, var(--border)); position: relative; transition: background 0.12s, border-color 0.12s;
}
.matrix-switch .ms-thumb {
  position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ivory3); transition: transform 0.12s, background 0.12s;
}
.matrix-switch.on .ms-track { background: var(--green, #46c993); border-color: var(--green, #46c993); }
.matrix-switch.on .ms-thumb { transform: translateX(14px); background: var(--surface); }
.matrix-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* A held-back Open button reads as unavailable, not missing. */
.deals-btn.is-locked, .deals-btn:disabled {
  opacity: 0.45; cursor: not-allowed; filter: grayscale(1);
}
.trk-col-deal button.trk-title:disabled {
  color: var(--ivory3); cursor: not-allowed; text-decoration: none;
}
.trk-col-deal button.trk-title:disabled:hover { color: var(--ivory3); text-decoration: none; }

/* Executive summary — a document, so it reads rather than scans. */
.exec-card { max-width: 720px; width: 100%; }
.exec-body { display: flex; flex-direction: column; gap: 20px; }
.exec-block { display: flex; flex-direction: column; gap: 6px; }
.exec-h {
  margin: 0 0 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ivory3);
}
.exec-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; }
.exec-label { font-size: 12px; color: var(--ivory3); }
.exec-value { font-size: 13.5px; color: var(--ivory); }
/* An absent fact says so rather than showing an empty space. */
.exec-blank { color: var(--ivory3); font-style: italic; }
.exec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.exec-table th {
  text-align: left; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ivory3); padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.exec-table td { padding: 7px 8px; color: var(--ivory2); border-bottom: 1px solid var(--border); }
.exec-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exec-total td { border-bottom: none; color: var(--ivory); font-weight: 600; }
.exec-caveat { margin: 4px 0 0; font-size: 11.5px; color: var(--ivory3); }
.exec-note { padding: 7px 0; border-top: 1px solid var(--border); }
.exec-note-when { display: block; font-size: 10.5px; color: var(--ivory3); }
.exec-note-text { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ivory2); white-space: pre-wrap; }
/* Verdict + snapshot header in the summary modal. */
.exec-verdict { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 14px; background: var(--surf2); border: 1px solid var(--border); border-radius: var(--radius-control); }
.exec-verdict-none { color: var(--ivory3); font-size: 13px; font-style: italic; }
.exec-vmetric { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; }
.exec-vmetric b { font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--ivory); font-variant-numeric: tabular-nums; }
.exec-vmetric small { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ivory3); margin-top: 2px; }
.exec-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 14px; }
.exec-kpi { display: flex; flex-direction: column; border-left: 2px solid var(--gold-dim); padding-left: 9px; }
.exec-kpi-v { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--ivory); font-variant-numeric: tabular-nums; line-height: 1.2; }
.exec-kpi-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ivory3); margin-top: 2px; }
.exec-party-ctx { display: block; font-size: 11.5px; color: var(--ivory3); margin-top: 1px; }
.exec-docs { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ivory2); }
.exec-docs li { margin: 3px 0; }
.exec-doc-size { font-family: var(--font-mono); font-size: 11px; color: var(--ivory3); }
.exec-specs { display: block; overflow-x: auto; }
.exec-specs th, .exec-specs td { white-space: nowrap; }

/* ── Executive report (portfolio recap + all deals) ──────────────────────────
   A light "paper" document rendered the same on screen (inside the modal) and in
   print, so the preview matches the printout. Styled in normal CSS (not inside
   @media print) so it looks right in the dark modal too. */
.execrep-card { max-width: 1160px; width: 100%; }
.execrep-body { background: var(--surf2); }
.xr-doc {
  background: #fff; color: #0B1F33; font-family: "Lato", "Segoe UI", Arial, sans-serif;
  font-size: 13px; line-height: 1.5; border-radius: 10px; padding: 28px 32px; margin: 0 auto;
  max-width: 1040px; box-shadow: 0 1px 3px rgba(11, 31, 51, 0.12);
}
.xr-head { display: flex; align-items: flex-start; gap: 14px; border-bottom: 2px solid #0052CC; padding-bottom: 12px; margin-bottom: 18px; }
.xr-logo { width: 40px; height: 40px; flex: none; }
.xr-headtext { min-width: 0; }
.xr-eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #0052CC; margin: 0 0 3px; }
.xr-title { font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: #0B1F33; margin: 0; }
.xr-classif { display: inline-block; margin-top: 5px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #B4232A; border: 1px solid #E7B7BA; background: #FBEDEE; border-radius: 4px; padding: 1px 7px; }
.xr-meta { margin-left: auto; text-align: right; font-size: 11px; color: #4A5A6B; line-height: 1.6; overflow-wrap: anywhere; }
.xr-meta b { color: #0B1F33; }
.xr-sec { margin: 0 0 20px; break-inside: avoid; }
.xr-sec h2 { font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #0052CC; border-bottom: 1px solid #E1E9F3; padding-bottom: 5px; margin: 0 0 12px; }
.xr-h3 { font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #4A5A6B; margin: 0 0 7px; }
.xr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.xr-kpi { border-left: 2px solid #CFE0F5; padding-left: 10px; break-inside: avoid; }
.xr-kpi-v { font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 20px; font-weight: 800; color: #0B1F33; font-variant-numeric: tabular-nums; line-height: 1.15; }
.xr-kpi-l { font-size: 11px; font-weight: 700; color: #4A5A6B; margin-top: 3px; }
.xr-kpi-s { font-size: 10px; color: #5F6E7E; margin-top: 1px; }
.xr-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.xr-info { width: 100%; border-collapse: collapse; table-layout: fixed; }
.xr-info th { text-align: left; font-weight: 500; color: #4A5A6B; padding: 3.5px 10px 3.5px 0; vertical-align: top; overflow-wrap: anywhere; }
.xr-info td { text-align: right; color: #0B1F33; font-variant-numeric: tabular-nums; padding: 3.5px 0; width: 3.2em; }
.xr-info tr + tr th, .xr-info tr + tr td { border-top: 1px solid #F0F3F8; }
.xr-blank { color: #5F6E7E; font-style: italic; font-weight: 400; }
.xr-deals { width: 100%; border-collapse: collapse; font-size: 12px; }
.xr-deals th { text-align: left; font-weight: 700; color: #4A5A6B; border-bottom: 1.5px solid #CFE0F5; padding: 6px 10px; overflow-wrap: anywhere; }
.xr-deals td { padding: 6px 10px; color: #0B1F33; border-bottom: 1px solid #EEF2F7; vertical-align: top; overflow-wrap: anywhere; }
.xr-deals th:first-child, .xr-deals td:first-child { padding-left: 0; }
.xr-deals th:last-child, .xr-deals td:last-child { padding-right: 0; }
.xr-deals th.xr-num, .xr-deals td.xr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xr-ref { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700; color: #0B1F33; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.xr-deal b { font-weight: 700; }
.xr-sub { color: #6B7C90; font-size: 11px; margin-top: 1px; }
.xr-noterow td { border-bottom: 1px solid #EEF2F7; padding-top: 0; }
.xr-note { color: #4A5A6B; font-style: italic; font-size: 11px; padding-bottom: 7px; }
.xr-caveat { font-size: 10.5px; color: #5F6E7E; font-style: italic; margin: 6px 0 0; }
.xr-foot { margin-top: 24px; border-top: 1px solid #E1E9F3; padding-top: 8px; font-size: 10px; color: #5F6E7E; line-height: 1.5; display: flex; justify-content: space-between; gap: 16px; break-inside: avoid; }
.xr-foot b { color: #4A5A6B; font-weight: 600; }
@media (max-width: 700px) {
  .xr-kpis { grid-template-columns: repeat(2, 1fr); }
  .xr-cols { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Inventory report (buyer-facing digest, opened from the Deals page) ──────
   Shares the executive report's "paper" (.xr-doc) and adds one card per deal:
   reference chip, equipment line, recorded highlights, then the tracking
   facts grouped as a buyer reads them (parties / commercial / delivery /
   scope) and a labelled block per unit. Portrait, since it reads top-down. */
.deals-head-actions { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
/* Cover (page 1): who S3 is, compact enough to print on one portrait page. */
.ir-cover { margin: 0 0 22px; font-size: 11.5px; line-height: 1.45; }
.ir-cover-tag { font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 15px; font-weight: 700; color: #0052CC; margin: 0 0 6px; text-wrap: balance; }
.ir-cover-lede { margin: 0 0 12px; color: #0B1F33; max-width: 78ch; }
.ir-cover-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin-bottom: 10px; }
.ir-cover-list { margin: 0; padding-left: 16px; }
.ir-cover-list li { margin: 0 0 4px; }
.ir-cover-list b { font-weight: 700; }
.ir-cover-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin: 4px 0 12px; }
.ir-cover-figs figure { margin: 0; break-inside: avoid; }
.ir-cover-figs img { display: block; width: 100%; height: auto; max-width: 100%; border: 1px solid #E1E9F3; border-radius: 6px; }
.ir-cover-figs figcaption { font-size: 10px; color: #4A5A6B; line-height: 1.4; margin-top: 4px; }
.ir-cover-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin-bottom: 10px; }
.ir-cover-foot p { margin: 0; color: #4A5A6B; }
.ir-cover-cta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; border-top: 1px solid #E1E9F3; padding-top: 8px; font-size: 11px; color: #0B1F33; }
.ir-values { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #0052CC; }
.ir-glance { table-layout: fixed; }
.ir-glance th:nth-child(1), .ir-glance td:nth-child(1) { width: 13%; }
.ir-glance th:nth-child(2), .ir-glance td:nth-child(2) { width: 26%; }
.ir-glance th:nth-child(3), .ir-glance td:nth-child(3) { width: 11%; }
.ir-glance th:nth-child(6), .ir-glance td:nth-child(6) { width: 17%; }
.ir-glance td.xr-num { white-space: normal; }
.ir-sec-deals { break-inside: auto; }
.ir-deal { border: 1px solid #E1E9F3; border-radius: 8px; padding: 14px 16px; margin: 0 0 14px; }
.ir-deal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; break-inside: avoid; break-after: avoid; }
.ir-ref { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700; color: #0052CC; background: #EAF1FC; border-radius: 4px; padding: 1px 7px; }
.ir-deal-title { font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 15px; font-weight: 700; color: #0B1F33; margin: 0; text-wrap: balance; }
.ir-deal-meta { font-size: 12px; color: #4A5A6B; font-variant-numeric: tabular-nums; }
.ir-highlights { margin: 0 0 10px; padding: 8px 12px 8px 28px; background: #E7F6EF; border-left: 3px solid #0B7A52; border-radius: 6px; font-size: 12px; color: #0B1F33; break-inside: avoid; }
.ir-highlights li { margin: 1px 0; }
.ir-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px; }
.ir-group { margin-bottom: 10px; }
.ir-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin: 0; }
.ir-groups .ir-facts { grid-template-columns: 1fr; }
.ir-f { border-top: 1px solid #EEF2F7; padding-top: 5px; break-inside: avoid; }
.ir-f dt { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #5F6E7E; }
.ir-f dd { margin: 1px 0 0; font-size: 12px; color: #0B1F33; overflow-wrap: anywhere; white-space: pre-line; }
.ir-units { margin-top: 10px; }
.ir-unit { margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed #CFE0F5; }
.ir-unit-name { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 12px; font-weight: 700; color: #0B1F33; margin: 0 0 6px; }
.ir-unit-price { font-family: "Lato", "Segoe UI", Arial, sans-serif; font-weight: 400; color: #4A5A6B; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .ir-groups, .ir-facts { grid-template-columns: 1fr; }
}

/* Printing a summary should give the document, not the application around it. */
/* The executive summary prints as a dedicated, clean letterhead document
   (#exec-report), not the on-screen modal. Only active while a summary is open
   (body.exec-open), so printing elsewhere is unaffected. */
#exec-report, #execrep-report, #invrep-report { display: none; }
/* The executive summary prints portrait (the default @page); the executive
   report prints LANDSCAPE — a named page it opts into — because its deals table
   is wide and needs the room. Only one report is ever open at print time. */
@page execrep { size: landscape; margin: 12mm; }
@media print {
  /* A dashboard printed on its own (PG2-01): no shell, two columns, white. */
  body.dbx-print .dbx-print-hide { display: none !important; }
  body.dbx-print #view-dashboards { display: block !important; }
  body.dbx-print { background: #fff !important; padding: 0 !important; margin: 0 !important; color: #0B1F33; }
  body.dbx-print .dbx-switch, body.dbx-print .dbx-controls { display: none !important; }
  body.dbx-print .dbx-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  body.dbx-print .dbx-w.s12 { grid-column: span 6; } body.dbx-print .dbx-w.s9 { grid-column: span 6; }
  body.dbx-print .dbx-w.s8 { grid-column: span 6; } body.dbx-print .dbx-w.s6 { grid-column: span 3; }
  body.dbx-print .dbx-w.s4 { grid-column: span 2; } body.dbx-print .dbx-w.s3 { grid-column: span 2; } body.dbx-print .dbx-w.s2 { grid-column: span 1; }
  body.dbx-print .dbx-card, body.dbx-print .kpi { background: #fff !important; color: #0B1F33 !important; border-color: #CFD8E3 !important; break-inside: avoid; }
  body.dbx-print .dbx-w { break-inside: avoid; }
  body.exec-open > *:not(#exec-report) { display: none !important; }
  body.exec-open #exec-report { display: block !important; }
  body.execrep-open > *:not(#execrep-report) { display: none !important; }
  body.execrep-open #execrep-report { display: block !important; page: execrep; }
  /* The inventory report prints portrait (default @page) — it reads top-down. */
  body.invrep-open > *:not(#invrep-report) { display: none !important; }
  body.invrep-open #invrep-report { display: block !important; }
  #invrep-report .xr-doc { max-width: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; }
  /* Each opportunity starts on its own page: the "Opportunities" heading opens
     a fresh page with the first deal, and every deal after it breaks before. */
  #invrep-report .ir-sec-deals { break-before: page; }
  #invrep-report .ir-deal + .ir-deal { break-before: page; }
  #invrep-report .ir-deal { margin-bottom: 0; }
  /* Page 1: portfolio tiles first, the S3 cover beneath them. Page 2: the
     at-a-glance table, which may run on across pages row by row. */
  #invrep-report .ir-glance-sec { break-before: page; break-inside: auto; }
  #invrep-report .ir-glance-sec tr { break-inside: avoid; }
  #invrep-report .ir-glance-sec thead { display: table-header-group; }
  #invrep-report .ir-cover { margin-bottom: 0; }
  body.invrep-open { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  /* Fill the landscape page — drop the on-screen card chrome (rounded white
     "paper" look) so the document uses the full printable width. */
  #execrep-report .xr-doc { max-width: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; }
  /* The app offsets the body to clear the fixed sidebar (padding-left). The
     sidebar is hidden in print, so drop that offset — otherwise the document is
     pushed to the right with a large empty left margin. */
  body.exec-open, body.execrep-open { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  @page { margin: 16mm; }

  .er-doc { color: #0B1F33; font-family: "Lato", "Segoe UI", Arial, sans-serif; font-size: 10.5pt; line-height: 1.5; }
  .er-head { display: block; border-bottom: 2px solid #0052CC; padding-bottom: 12px; margin-bottom: 18px; }
  /* The internal edition keeps the original letterhead row. */
  .er-head-internal { display: flex; align-items: flex-start; gap: 14px; }
  .er-logo { width: 42px; height: 42px; flex: none; }
  /* Brand bar: Open Controls top-left, S3 Energy Development top-right. */
  .er-brandbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #E1E9F3; }
  .er-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .er-brand-mark { width: 30px; height: 30px; flex: none; }
  .er-brand-name { font-family: "Montserrat", "Segoe UI", sans-serif; font-weight: 700; font-size: 13.5pt; color: #111; letter-spacing: -0.01em; white-space: nowrap; }
  .er-brand-name sup { font-size: 7pt; font-weight: 600; vertical-align: top; margin-left: 1px; }
  .er-brand-s3-logo { height: 34px; width: auto; max-width: 260px; display: block; }
  .er-titlerow { display: flex; align-items: flex-start; gap: 14px; }
  .er-eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8pt; letter-spacing: 0.14em; text-transform: uppercase; color: #0052CC; margin: 0 0 3px; }
  .er-title { font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 19pt; font-weight: 800; letter-spacing: -0.01em; color: #0B1F33; margin: 0; }
  .er-meta { margin-left: auto; text-align: right; font-size: 9pt; color: #4A5A6B; line-height: 1.6; overflow-wrap: anywhere; }
  .er-meta b { color: #0B1F33; font-family: "JetBrains Mono", ui-monospace, monospace; }
  .er-dealname { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5pt; color: #0B1F33; background: #F5F9FF; border: 1px solid #CFE0F5; border-left: 3px solid #0052CC; border-radius: 6px; padding: 9px 12px; margin: 0 0 18px; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }
  .er-sec { margin: 0 0 16px; break-inside: avoid; }
  .er-sec h2 { font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 9.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #0052CC; border-bottom: 1px solid #E1E9F3; padding-bottom: 5px; margin: 0 0 9px; }
  /* Fixed layout + overflow-wrap so a long unbroken value (a URL, a part or
     serial code, a hyphenated reference) wraps inside its column instead of
     forcing the table wider than the page and clipping the row at the margin. */
  .er-info { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .er-info th { text-align: left; font-weight: 600; color: #4A5A6B; width: 34%; padding: 4.5px 12px 4.5px 0; vertical-align: top; overflow-wrap: anywhere; }
  .er-info td { padding: 4.5px 0; color: #0B1F33; vertical-align: top; overflow-wrap: anywhere; }
  .er-info tr + tr th, .er-info tr + tr td { border-top: 1px solid #F0F3F8; }
  .er-blank { color: #5F6E7E; font-style: italic; }
  .er-units { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .er-units th { text-align: left; font-weight: 700; color: #4A5A6B; border-bottom: 1.5px solid #CFE0F5; padding: 6px 8px 6px 0; overflow-wrap: anywhere; }
  .er-units th.er-num, .er-units td.er-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
  .er-units td { padding: 6px 8px 6px 0; color: #0B1F33; border-bottom: 1px solid #EEF2F7; overflow-wrap: anywhere; }
  .er-units .er-total td { font-weight: 700; border-top: 1.5px solid #CFE0F5; border-bottom: none; padding-top: 8px; }
  .er-caveat { font-size: 8.5pt; color: #5F6E7E; margin: 6px 0 0; font-style: italic; }
  .er-note { padding: 7px 0; border-top: 1px solid #F0F3F8; break-inside: avoid; }
  .er-note:first-of-type { border-top: none; }
  .er-note-when { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8pt; color: #5F6E7E; }
  .er-note-text { margin: 2px 0 0; font-size: 10pt; line-height: 1.5; white-space: pre-wrap; color: #0B1F33; }
  .er-empty { color: #5F6E7E; font-style: italic; font-size: 10pt; }
  /* Copyright footer — in-flow at the end of the document (NOT position:fixed,
     which reserves no space and overlaps the summary content when printing /
     saving as PDF). Kept together so it never splits across a page. */
  .er-foot { margin-top: 26px; border-top: 1px solid #E1E9F3; padding-top: 7px; font-size: 8pt; color: #5F6E7E; line-height: 1.5; display: flex; justify-content: space-between; gap: 16px; break-inside: avoid; }
  .er-foot b { color: #4A5A6B; font-weight: 600; }
  /* Classification tag by the title. */
  .er-classif { display: inline-block; margin-top: 5px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 7.5pt; letter-spacing: 0.12em; text-transform: uppercase; color: #B4232A; border: 1px solid #E7B7BA; background: #FBEDEE; border-radius: 4px; padding: 1px 7px; }
  /* Due-diligence verdict. */
  .er-verdict-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 2px 0 6px; }
  .er-rec { font-family: "Montserrat", sans-serif; font-size: 10.5pt; font-weight: 700; padding: 4px 12px; border-radius: 999px; border: 1.5px solid; }
  .er-rec-proceed { color: #0B7A52; border-color: #0B7A52; background: #E7F6EF; }
  .er-rec-proceed_with_conditions { color: #0052CC; border-color: #0052CC; background: #EAF1FC; }
  .er-rec-needs_review { color: #A15C00; border-color: #C77700; background: #FCF1DF; }
  .er-rec-do_not_proceed { color: #B4232A; border-color: #B4232A; background: #FBEDEE; }
  .er-rec-insufficient_evidence { color: #4A5A6B; border-color: #9AA8B6; background: #F0F3F7; }
  .er-metric { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; }
  .er-metric b { font-family: "Montserrat", sans-serif; font-size: 16pt; font-weight: 800; color: #0B1F33; font-variant-numeric: tabular-nums; }
  .er-metric small { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 7pt; letter-spacing: 0.06em; text-transform: uppercase; color: #5F6E7E; margin-top: 2px; }
  .er-verdict-note { margin: 0; font-size: 8.5pt; color: #5F6E7E; line-height: 1.5; }
  /* Deal snapshot KPI grid. */
  .er-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; }
  .er-kpi { display: flex; flex-direction: column; border-left: 2px solid #CFE0F5; padding-left: 9px; }
  .er-kpi-v { font-family: "Montserrat", sans-serif; font-size: 12.5pt; font-weight: 700; color: #0B1F33; font-variant-numeric: tabular-nums; line-height: 1.2; }
  .er-kpi-l { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 7pt; letter-spacing: 0.06em; text-transform: uppercase; color: #5F6E7E; margin-top: 2px; }
  /* Counterparty context under a party name. */
  .er-party-ctx { display: block; font-size: 8.5pt; color: #6B7C90; margin-top: 1px; }
  /* Supporting documents + specs. */
  .er-docs { margin: 0; padding-left: 18px; font-size: 10pt; color: #0B1F33; }
  .er-docs li { margin: 2px 0; overflow-wrap: anywhere; }
  .er-doc-size { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8pt; color: #5F6E7E; }
  /* Unit specifications: one labelled block per unit, specs as a two-column
     label/value grid. Stays readable however many specs a unit carries — a
     wide one-column-per-spec table would be crushed on paper. */
  .er-spec-unit { margin: 0 0 13px; break-inside: avoid; }
  .er-spec-unit + .er-spec-unit { margin-top: 2px; }
  .er-spec-name { font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 9.5pt; font-weight: 700; color: #0B1F33; margin: 0 0 6px; padding-bottom: 3px; border-bottom: 1px solid #E1E9F3; overflow-wrap: anywhere; }
  .er-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin: 0; font-size: 9pt; }
  .er-spec-pair { display: grid; grid-template-columns: 42% 58%; gap: 10px; padding: 3px 0; border-bottom: 1px solid #F2F5FA; break-inside: avoid; }
  .er-spec-pair dt { margin: 0; color: #4A5A6B; font-weight: 600; }
  .er-spec-pair dd { margin: 0; color: #0B1F33; word-break: break-word; }
}

/* Deal notes — the running, attributed thread. */
.notes-card { max-width: 620px; width: 100%; }
.notes-deal { margin-left: 10px; font-size: 11.5px; color: var(--accent-ink); }
.notes-body { display: flex; flex-direction: column; gap: 16px; }
.notes-compose { display: flex; flex-direction: column; gap: 8px; }
.notes-compose textarea {
  width: 100%; background: var(--surf2); color: var(--ivory); border: 1px solid var(--border);
  border-radius: var(--radius-control); padding: 9px 11px; font: inherit; font-size: 13px; resize: vertical;
}
.notes-compose textarea:focus { outline: none; border-color: var(--gold); }
.notes-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notes-compose-foot .nd-error { margin: 0; }
/* Newest first, so the thread reads as "where it stands" then "how it got here". */
.notes-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.notes-empty { color: var(--ivory3); font-size: 13px; padding: 10px 0; }
.note-entry { border-top: 1px solid var(--border); padding: 11px 0; }
.note-entry:first-child { border-top: none; }
.note-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.note-author { font-size: 12.5px; font-weight: 600; color: var(--ivory); }
.note-when { font-size: 10.5px; color: var(--ivory3); }
.note-body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ivory2); white-space: pre-wrap; }
/* The tracker cell's way in to the full thread. */
.trk-notes-open {
  display: inline-block; margin-top: 4px; padding: 0; font: inherit; font-size: 11px;
  background: none; border: none; color: var(--accent-ink); cursor: pointer;
}
.trk-notes-open:hover { text-decoration: underline; }
.trk-notes-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Deal-level tracking (pipeline tracker) — shown on the deal workspace. */
.dt-tracking {
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--surface); padding: 4px 16px 16px; margin: 6px 0 2px;
}
.dt-tracking .ws-sub { margin-top: 12px; }
.trk-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.trk-field input, .trk-field textarea {
  background: var(--surf2); color: var(--ivory); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: var(--font-sans);
}
.trk-field textarea { resize: vertical; min-height: 46px; line-height: 1.45; }
.trk-field input:focus, .trk-field textarea:focus { outline: none; border-color: var(--gold); }
.trk-field-wide { grid-column: 1 / -1; }

/* New-deal modal: the optional tracking group. */
.nd-track {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 13px 0;
}
.nd-track-head {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-ink); display: flex; align-items: center; gap: 7px;
}
.nd-track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nd-track-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
/* Equipment: categories + vendor/model/qty line items. */
.nd-equip > span { font-size: 12px; color: var(--ivory2); }
.nd-equip-cats { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.nd-eq-cat { border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; background: var(--surf2); }
.nd-eq-cat.on { border-color: var(--gold-dim); }
.nd-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ivory); cursor: pointer; }
.nd-check input { width: 16px; height: 16px; flex: none; accent-color: var(--gold); cursor: pointer; }
.nd-eq-units { display: flex; flex-direction: column; gap: 7px; margin: 9px 0 2px; padding-left: 26px; }
.nd-eq-row { display: flex; gap: 8px; align-items: center; }
/* Column labels above the unit fields; widths mirror the fields below. */
.nd-eq-head { margin-top: 2px; }
.nd-eq-lbl { flex: 1 1 0; min-width: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3); white-space: nowrap; }
.nd-eq-lbl-mw { flex: none; width: 58px; }
.nd-eq-lbl-qty { flex: none; width: 58px; }
.nd-eq-lbl-num { flex: none; width: 84px; }
.nd-eq-lbl-total { flex: none; width: 96px; }
.nd-eq-lbl-sp { flex: none; width: 30px; }
/* .nd-form prefix so these beat the generic .nd-form input/select width:100%. */
.nd-form .nd-eq-field { flex: 1 1 0; width: auto; min-width: 0; background: var(--surface); color: var(--ivory); border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; font-size: 12.5px; font-family: var(--font-sans); }
.nd-form .nd-eq-field:focus { outline: none; border-color: var(--gold); }
.nd-form .nd-eq-field:disabled { opacity: 0.5; }
.nd-form .nd-eq-mw { flex: none; width: 58px; background: var(--surface); color: var(--ivory); border: 1px solid var(--border); border-radius: 7px; padding: 7px 8px; font-size: 12.5px; }
.nd-form .nd-eq-mw:focus { outline: none; border-color: var(--gold); }
.nd-form .nd-eq-qty { flex: none; width: 58px; background: var(--surface); color: var(--ivory); border: 1px solid var(--border); border-radius: 7px; padding: 7px 8px; font-size: 12.5px; }
.nd-form .nd-eq-qty:focus { outline: none; border-color: var(--gold); }
.nd-form .nd-eq-num { flex: none; width: 84px; background: var(--surface); color: var(--ivory); border: 1px solid var(--border); border-radius: 7px; padding: 7px 8px; font-size: 12.5px; }
.nd-form .nd-eq-num:focus { outline: none; border-color: var(--gold); }
.nd-eq-total { flex: none; width: 96px; font-size: 12.5px; color: var(--accent-ink); text-align: right; padding: 7px 4px; white-space: nowrap; }
.nd-eq-rm { flex: none; width: 30px; height: 32px; background: none; border: 1px solid var(--border2); border-radius: 7px; color: var(--ivory3); cursor: pointer; font-size: 12px; }
.nd-eq-rm:hover { color: var(--red-ink); border-color: var(--red); }
.nd-eq-add { align-self: flex-start; background: none; border: 1px dashed var(--border2); color: var(--ivory2); border-radius: 7px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.nd-eq-add:hover { color: var(--accent-ink); border-color: var(--gold); }
/* Per-unit specifications capture table (new/edit-deal modal). */
.nd-specs-wrap { display: flex; flex-direction: column; gap: 8px; }
.nd-specs-all { max-width: 360px; }
.nd-specs { display: flex; flex-direction: column; gap: 8px; }
.nd-specs-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ivory3); }
.nd-specs-empty { font-size: 12.5px; color: var(--ivory3); font-style: italic; }
.nd-specs-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 9px; }
.nd-specs-table { border-collapse: collapse; width: 100%; min-width: 640px; }
.nd-specs-table th { text-align: left; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ivory3); padding: 8px 8px 6px; background: var(--surf2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.nd-specs-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.nd-specs-table tr:last-child td { border-bottom: none; }
.nd-specs-name { font-size: 12.5px; color: var(--ivory); white-space: nowrap; font-weight: 600; padding-left: 10px !important; }
.nd-specs-input { width: 100%; min-width: 96px; background: var(--surf2); color: var(--ivory); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; font-family: var(--font-sans); }
.nd-specs-input:focus { outline: none; border-color: var(--gold); }
.nd-track textarea {
  background: var(--surf2); color: var(--ivory); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 11px; font-size: 13px; font-family: var(--font-sans);
  resize: vertical; min-height: 44px; line-height: 1.5; width: 100%;
}
.nd-track textarea:focus { outline: none; border-color: var(--gold); }
@media (max-width: 640px) {
  .nd-track-grid, .nd-track-grid-3, .nd-equip-grid { grid-template-columns: 1fr; }
}

/* Per-step document strip */
.dt-step { flex-wrap: wrap; }
.dt-step-docs { flex-basis: 100%; margin-left: 86px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.dt-doc-hint { font-size: 11px; color: var(--ivory3); font-style: italic; }
.dt-doc-chip { display: inline-flex; align-items: center; background: var(--surf2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.dt-doc-open { background: transparent; border: none; color: var(--teal); font-size: 11.5px; padding: 3px 8px; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-doc-open:hover { text-decoration: underline; }
.dt-doc-del { background: transparent; border: none; border-left: 1px solid var(--border); color: var(--ivory3); font-size: 11px; padding: 3px 7px; cursor: pointer; }
.dt-doc-del:hover { color: var(--red-ink); }
.dt-doc-attach { font-family: var(--font-mono); font-size: 10.5px; color: var(--ivory3); border: 1px dashed var(--border); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.dt-doc-attach:hover { color: var(--accent-ink); border-color: var(--gold); }
.dt-step-docs.dragover { outline: 2px dashed var(--gold); outline-offset: 3px; border-radius: 6px; background: var(--gold-bg); }
/* Link attachments (ADR-0014): a URL reference, styled apart from file chips. */
.dt-doc-chip-link .dt-doc-open { color: var(--accent-ink); display: inline-flex; align-items: center; gap: 6px; }
.dt-doc-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-doc-linktag { font-family: var(--font-mono); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; color: var(--ivory3); border: 1px solid var(--border); border-radius: 999px; padding: 1px 5px; }
.dt-doc-linkfield { display: inline-flex; align-items: center; gap: 5px; }
.dt-doc-linkinput { font-size: 11px; color: var(--ivory); background: var(--surf2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; width: 150px; }
.dt-doc-linkinput:focus { outline: none; border-color: var(--gold); }
.dt-doc-linkbtn { font-family: var(--font-mono); font-size: 10.5px; color: var(--ivory3); background: transparent; border: 1px dashed var(--border); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.dt-doc-linkbtn:hover { color: var(--accent-ink); border-color: var(--gold); }
/* Gold "/" divider between the three ways to add to a step. */
.dt-doc-sep { color: var(--accent-ink); font-family: var(--font-mono); font-size: 13px; opacity: 0.8; padding: 0 2px; align-self: center; user-select: none; }
/* Type-a-note affordance (ADR-0015). */
.dt-doc-textfield { display: inline-flex; align-items: center; gap: 5px; }
.dt-doc-textinput { font-size: 11px; color: var(--ivory); background: var(--surf2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; width: 170px; }
.dt-doc-textinput:focus { outline: none; border-color: var(--gold); }
.dt-doc-textbtn { font-family: var(--font-mono); font-size: 10.5px; color: var(--ivory3); background: transparent; border: 1px dashed var(--border); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.dt-doc-textbtn:hover { color: var(--accent-ink); border-color: var(--gold); }
/* Snapshot chip's link-out to the live source (ADR-0015). */
.dt-doc-src { background: transparent; border: none; border-left: 1px solid var(--border); color: var(--teal); font-size: 11px; padding: 3px 7px; cursor: pointer; }
.dt-doc-src:hover { color: var(--accent-ink); }

/* Per-phase documents indicator */
.dt-node-docs { font-size: 10px; color: var(--ivory3); }
.dt-node-docs.complete { color: var(--teal); }
.ws-docs { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.ws-docs-bar { flex: 0 0 120px; height: 5px; border-radius: 3px; background: var(--surf2); overflow: hidden; }
.ws-docs-bar > span { display: block; height: 100%; background: var(--gold); transition: width 0.3s ease; }
.ws-docs.complete .ws-docs-bar > span { background: var(--teal); }
.ws-docs-label { font-size: 11.5px; color: var(--ivory3); }
.ws-docs.complete .ws-docs-label { color: var(--teal); }

@media (max-width: 680px) {
  .dash-charts { grid-template-columns: 1fr; }
}

/* ══ Help tip (?) with tooltip ═════════════════════════════════ */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 15px; height: 15px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid var(--ivory3); color: var(--ivory3);
  font-family: var(--font-sans); font-size: 10px; font-weight: 700; line-height: 1;
  margin-left: 6px; cursor: help; position: relative; vertical-align: middle;
  user-select: none; text-transform: none; letter-spacing: normal;
}
.help-tip:hover, .help-tip:focus-visible { border-color: var(--gold); color: var(--accent-ink); outline: none; }
.help-tip::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 240px; white-space: normal; text-align: left;
  background: var(--surf2); color: var(--ivory2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 11px; font-size: 11.5px; font-weight: 400; line-height: 1.45;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.14s ease, transform 0.14s ease; z-index: 60;
}
.help-tip::before {
  content: ""; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--border);
  opacity: 0; transition: opacity 0.14s ease; z-index: 61;
}
.help-tip:hover::after, .help-tip:focus::after,
.help-tip:hover::before, .help-tip:focus::before { opacity: 1; }
.help-tip:hover::after, .help-tip:focus::after { transform: translateX(-50%) translateY(0); }
/* Anchor the bubble to the icon's right edge when it would overflow the viewport. */
.help-tip.tip-left::after { left: auto; right: -6px; transform: translateY(4px); }
.help-tip.tip-left:hover::after, .help-tip.tip-left:focus::after { transform: translateY(0); }
.help-tip.tip-left::before { left: auto; right: 2px; transform: none; }
/* Anchor the bubble's left edge to the icon (extends right — for the left column). */
.help-tip.tip-start::after { left: 0; right: auto; transform: translateY(4px); }
.help-tip.tip-start:hover::after, .help-tip.tip-start:focus::after { transform: translateY(0); }
.help-tip.tip-start::before { left: 4px; right: auto; transform: none; }
.help-tip.tip-wide::after { max-width: 330px; }
/* Open upward + left-anchored (for tips at the bottom of a card, above a
   later sibling that would otherwise paint over a downward bubble). */
.help-tip.tip-up-start::after {
  top: auto; bottom: calc(100% + 9px); left: 0; right: auto; transform: translateY(-4px);
}
.help-tip.tip-up-start:hover::after, .help-tip.tip-up-start:focus::after { transform: translateY(0); }
.help-tip.tip-up-start::before {
  top: auto; bottom: calc(100% + 4px); left: 4px; right: auto; transform: none;
  border-bottom-color: transparent; border-top-color: var(--border);
}

/* ── Counterparty directory modal ────────────────────────────── */
.cp-card { width: min(1040px, 100%); }
.cp-note { padding: 12px 16px 0; margin: 0; }
.cp-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.cp-search {
  flex: 1 1 260px; min-width: 200px;
  padding: 9px 12px; font-size: 13px; color: var(--ivory);
  background: var(--surf2); border: 1px solid var(--border2); border-radius: 8px;
}
.cp-search:focus { outline: none; border-color: var(--gold); }
.cp-filters { display: flex; flex-wrap: wrap; gap: 14px; }
.cp-filter-group { display: flex; flex-direction: column; gap: 5px; }
.cp-filter-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ivory3);
}
.cp-seg { display: inline-flex; background: var(--surf2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cp-seg-btn {
  padding: 6px 11px; font-size: 12px; color: var(--ivory2);
  background: transparent; border: none; border-left: 1px solid var(--border);
  cursor: pointer; white-space: nowrap;
}
.cp-seg-btn:first-child { border-left: none; }
.cp-seg-btn:hover { background: var(--surf3); color: var(--ivory); }
.cp-seg-btn.active { background: var(--gold-bg); color: var(--accent-ink); font-weight: 600; }
/* Turbine-make multi-select: wraps to multiple rows (up to ~20 makes) and each
   chip is an independent toggle, so drop the segmented single-row treatment. */
.cp-filter-mfr { flex: 1 1 100%; }
.cp-seg-wrap {
  display: flex; flex-wrap: wrap; gap: 6px; overflow: visible;
  background: transparent; border: none; align-items: center;
}
.cp-seg-wrap .cp-seg-btn {
  border: 1px solid var(--border); border-radius: 999px; background: var(--surf2);
}
.cp-seg-wrap .cp-mfr-btn.active {
  background: var(--gold-bg); color: var(--accent-ink); border-color: var(--gold-dim); font-weight: 600;
}
.cp-mfr-clear {
  border: none; background: transparent; color: var(--ivory3); cursor: pointer;
  font-size: 11.5px; text-decoration: underline; padding: 4px 6px;
}
.cp-mfr-clear:hover { color: var(--ivory); }
/* Country and turbine-rating multi-selects use the same toggle-chip row as
   turbine make, each on its own full-width row. */
.cp-filter-country,
.cp-filter-mw { flex: 1 1 100%; }
/* "Deals in" brand chips on each card. */
.cp-makes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.cp-makes-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ivory3);
}
.cp-make {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--surf2); border: 1px solid var(--border); color: var(--ivory2);
}
.cp-make.active { background: var(--gold-bg); color: var(--accent-ink); border-color: var(--gold-dim); font-weight: 600; }

.cp-list { display: flex; flex-direction: column; gap: 10px; max-height: 62vh; }
.cp-item {
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
}
.cp-item:hover { border-color: var(--border2); }
.cp-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cp-name { font-size: 14.5px; font-weight: 600; color: var(--ivory); }
.cp-name-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
/* "News" badge next to each company. Neutral until the nightly agent finds
   recent news, then green. */
.cp-news {
  font: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border2); background: var(--surf2); color: var(--ivory3);
}
.cp-news:hover { border-color: var(--gold-dim); color: var(--ivory); }
.cp-news.on {
  color: var(--green-ink); border-color: var(--green); background: var(--green-bg); cursor: pointer;
}
.cp-news.on::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: var(--green); margin-right: 5px; vertical-align: middle;
  box-shadow: 0 0 6px var(--green);
}
/* Headlines popup anchored under a green badge. */
.cp-news-pop {
  position: fixed; z-index: 220; width: max-content; max-width: 340px;
  background: var(--surf3); color: var(--ivory);
  border: 1px solid var(--border2); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(11, 31, 51, 0.28); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.cp-news-pop-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; color: var(--ivory2);
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.cp-news-x {
  margin-left: auto; flex-shrink: 0; border: none; background: none; cursor: pointer;
  color: var(--ivory3); font-size: 18px; line-height: 1; padding: 0 2px;
}
.cp-news-x:hover { color: var(--ivory); }
.cp-news-none { font-size: 12px; color: var(--ivory3); }
.cp-news-item { display: flex; flex-direction: column; gap: 1px; text-decoration: none; }
.cp-news-title { font-size: 12.5px; color: var(--accent-ink); line-height: 1.35; }
.cp-news-item:hover .cp-news-title { text-decoration: underline; }
.cp-news-meta { font-size: 10px; color: var(--ivory3); display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; margin-top: 2px; }
/* Industry-importance pill (1 Minor - 5 Major). Hotter = more significant. */
.news-imp { font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid; }
.news-imp.imp5 { color: var(--red-ink); background: var(--red-bg); border-color: var(--red); font-weight: 800; }
.news-imp.imp4 { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber); }
.news-imp.imp3 { color: var(--accent-ink); background: var(--gold-bg, rgba(197,160,90,.14));
  border-color: var(--gold-dim); }
.news-imp.imp2 { color: var(--ivory3); background: var(--surf2); border-color: var(--border2); }
.news-imp.imp1 { color: var(--ivory3); background: transparent; border-color: var(--border2); }
/* Header-level badge (top of the directory): a touch larger, opens the all-news modal. */
.cp-news-all { font-size: 10.5px; padding: 2px 9px; flex-shrink: 0; }
.cp-news-all[hidden] { display: none; }
/* All-news modal: stacks above the directory modal (z-index 100). */
.cpnews-modal { z-index: 210; }
.cpnews-group { padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; }
.cpnews-group:last-child { border-bottom: none; }
.cpnews-group-head { font-size: 13px; font-weight: 700; color: var(--ivory); }
.cpnews-group-head a { color: var(--ivory); text-decoration: none; }
.cpnews-group-head a:hover { color: var(--accent-ink); text-decoration: underline; }
/* App-level cue: count of companies with news, on the sidebar Counterparties button. */
.side-btn-news {
  margin-left: 6px; font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 999px;
  background: var(--green); color: #06281c;
}
.cp-name a { color: var(--ivory); text-decoration: none; border-bottom: 1px solid transparent; }
.cp-name a:hover { color: var(--accent-ink); border-bottom-color: var(--gold-dim); }
.cp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-role, .cp-conf {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border2); color: var(--ivory2);
}
.cp-role.role-buyer  { color: var(--teal);  border-color: var(--teal);  background: rgba(78,156,160,0.12); }
.cp-role.role-seller { color: var(--accent-ink);  border-color: var(--gold-dim); background: var(--gold-bg); }
.cp-role.role-agent  { color: var(--green-ink); border-color: var(--green); background: var(--green-bg); }
/* Contractor = data-center build side (MEP / facilities); violet, distinct from the trade roles. */
.cp-role.role-contractor { color: var(--violet-ink); border-color: #7C5CFF; background: rgba(124,92,255,0.12); }
.cp-conf.conf-high   { color: var(--green-ink); border-color: var(--green); background: var(--green-bg); }
.cp-conf.conf-medium { color: var(--amber-ink); border-color: var(--amber); background: var(--amber-bg); }
.cp-conf.conf-verify { color: var(--red-ink);   border-color: var(--red);   background: var(--red-bg); }

.cp-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 7px 0 2px; font-size: 11.5px; color: var(--ivory3); }
.cp-field { display: grid; grid-template-columns: 96px 1fr; gap: 10px; margin-top: 7px; font-size: 12.5px; }
.cp-field-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent-ink); padding-top: 1px;
}
.cp-field-val { color: var(--ivory2); line-height: 1.5; }
.cp-field-note .cp-field-val { color: var(--ivory3); font-style: italic; }
.cp-disclaimer { padding: 12px 16px; margin: 0; border-top: 1px solid var(--border); }

@media (max-width: 620px) {
  .cp-field { grid-template-columns: 1fr; gap: 2px; }
  .cp-controls { flex-direction: column; align-items: stretch; }
}

/* ── Bound-deal banner (intake analyzing an existing deal, ADR-0009) ── */
.bound-deal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 12px; margin: 0 0 14px;
  background: var(--gold-bg); border: 1px solid var(--gold-dim); border-radius: 8px;
  font-size: 12.5px;
}
.bound-deal-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent-ink);
}
.bound-deal-ref { color: var(--ivory); font-weight: 600; }
.bound-deal .link-btn { margin-left: auto; font-size: 12px; }

/* ── Left sidebar ─────────────────────────────────────────────── */
:root { --sidebar-w: 184px; }
body { padding-left: var(--sidebar-w); }
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w);
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 14px; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--border);
  z-index: 30;
}
/* Brand + version at the top of the sidebar. The logo stacks above the wordmark
   so the long name and subtitle fit the narrow column. */
.side-brand {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
/* Logo and the API status / version line share the top row; the wordmark sits
   beneath them. */
.side-brand .brand-lockup { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 9px; }
.side-brand .brand-lockup .brand-text { grid-column: 1 / -1; }
.side-brand .health { min-width: 0; }
.side-brand .health { align-items: flex-start; }
.side-brand .health .dot { margin-top: 3px; }
.side-brand .health #health-text { white-space: normal; line-height: 1.35; overflow-wrap: anywhere; }
.side-brand .brand-text { gap: 3px; }
.side-brand .brand-sub, .side-brand .brand-tagline { line-height: 1.4; }
.side-brand .health { font-size: 10.5px; }
.side-nav { display: flex; flex-direction: column; gap: 8px; }
.side-btn {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; font-size: 13px; font-weight: 500;
  color: var(--ivory2); background: transparent;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.side-btn:hover { color: var(--accent-ink); border-color: var(--gold-dim); background: var(--gold-bg); }
.side-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.side-caption { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ivory3); }

/* Theme switch — a real toggle, not a text button. Thumb position is driven by
   html[data-theme] so it always reflects the active theme. */
.theme-switch {
  display: inline-flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 11px; background: var(--surf2);
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
}
.theme-switch:hover { border-color: var(--border2); }
.theme-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ts-ico { font-size: 12px; line-height: 1; color: var(--ivory3); transition: color .15s; }
.ts-track { position: relative; flex: 1; height: 18px; border-radius: 999px; background: var(--border); }
.ts-thumb {
  position: absolute; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); transition: left .2s ease;
}
html[data-theme="light"] .ts-thumb { left: 2px; }
html[data-theme="dark"]  .ts-thumb { left: calc(100% - 16px); }
html[data-theme="light"] .ts-sun  { color: var(--accent-ink); }
html[data-theme="dark"]  .ts-moon { color: var(--accent-ink); }

/* Tablet (641–860px): the vertical sidebar still fits; just tighten it a touch. */
@media (max-width: 860px) and (min-width: 641px) {
  :root { --sidebar-w: 156px; }
  .side-btn { font-size: 12px; padding: 9px 10px; }
}

/* Mobile (≤640px): a fixed left sidebar would eat a third of the screen, so it
   becomes a horizontal toolbar at the top and the content spans the full width. */
@media (max-width: 640px) {
  /* body is a flex column; its children default to min-width:auto (min-content),
     so a wide nested row can expand the whole page. Let views shrink to the
     viewport, and clip any residual bleed so the page never scrolls sideways. */
  body { padding-left: 0; overflow-x: hidden; }
  /* .wrap-view uses margin:0 auto — auto margins disable the flex stretch, so the
     view sized to its max-content (overflowing). Pin it to the viewport width. */
  .view { min-width: 0; width: 100%; }
  .sidebar {
    position: static; width: auto; height: auto; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 8px 12px;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  /* Brand takes the full first row; nav + theme toggle wrap to the second.
     Drop the long eyebrow/sub/tagline and lay the logo beside the wordmark. */
  .side-brand {
    flex: 1 1 100%; flex-direction: row; align-items: center; gap: 10px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
  }
  .side-brand .brand-lockup { flex-direction: row; align-items: center; gap: 9px; }
  .side-brand .brand-eyebrow,
  .side-brand .brand-sub,
  .side-brand .brand-tagline { display: none; }
  .side-brand .brand-logo { width: 30px; height: 30px; }
  .side-brand .health { margin-left: auto; font-size: 10px; }
  /* Give the nav its own full-width row instead of sharing it with the footer —
     otherwise the footer (sign-out + theme toggle) claims most of the row and the
     four flex:1 buttons collapse to ~31px, so their labels overflow and collide. */
  .side-nav { flex-direction: row; gap: 8px; flex: 1 1 100%; min-width: 0; }
  .side-btn { flex: 1; width: auto; text-align: center; padding: 8px 10px; font-size: 12px; }
  .side-foot { flex: 1 1 100%; margin-top: 0; flex-direction: row; align-items: center; gap: 8px; }
  .side-caption { display: none; }
  .theme-switch { width: auto; padding: 6px 10px; }
  .ts-track { flex: none; width: 34px; }
  .wrap-view { padding: 20px 14px 40px; }
  .crumbs { padding: 12px 14px 0; }

  /* The 6-phase stepper's fixed columns overflow a phone; stack to 2 columns.
     minmax(0,·) + min-width:0 on the cells lets them actually shrink to fit
     (grid items default to min-width:auto = min-content, which would overflow). */
  .dt-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-node { min-width: 0; }
  /* Let the deal picker shrink and stack full-width. */
  #deal-select { min-width: 0; }
  /* Toolbar rows must not exceed the screen. Flex children default to
     min-width:auto (min-content), so the long nav labels refused to shrink and
     ran past the viewport: the theme switch landed on top of the Admin button
     and the health chip was clipped outside the toolbar entirely. Let both rows
     wrap and let their children shrink; the deal label ellipsizes. */
  .sidebar { max-width: 100%; }
  .side-brand { flex-wrap: wrap; }
  .side-brand .brand-lockup,
  .side-brand .deal-subset { min-width: 0; }
  .side-brand .active-deal {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* align-items:stretch keeps the four buttons the same height when one of them
     wraps to two lines ("Process Steps"), instead of leaving it taller than the
     rest of the row. */
  .side-nav { flex-wrap: wrap; align-items: stretch; }
  .side-btn { min-width: 0; }
  /* Workspace rows: wrap the title/button row and drop the 86px doc indent. */
  .dt-detail-head { flex-wrap: wrap; }
  .dt-step-docs { margin-left: 0; }
}

/* ── App list — the apps within the ClearAsset suite ──────────── */
/* Sidebar "Deals" button (above the app list) */
.deals-nav {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 11px; margin-bottom: 9px; border-radius: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ivory); background: var(--surf2);
  border: 1px solid var(--border2); text-decoration: none; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.deals-nav:hover { color: var(--accent-ink); border-color: var(--gold); }
.deals-nav.active { color: var(--accent-ink); background: var(--gold-bg); border-color: var(--gold-dim); }
.deals-nav-ico { font-size: 13px; opacity: 0.8; }
.deals-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Asset-class views nested under Deals, gated on a selected deal. */
.deal-subset {
  align-self: stretch; margin: 0 0 2px 7px; padding-left: 11px;
  border-left: 2px solid var(--border2); display: flex; flex-direction: column; gap: 6px;
}
.active-deal {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em;
  color: var(--ivory3); padding: 1px 2px 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.active-deal.has { color: var(--accent-ink); }
/* Locked (no deal selected): grayed and non-interactive. */
.app-chip.locked { pointer-events: none; }
.app-chip.active.locked {
  background: var(--surf2); border-color: var(--border); color: var(--ivory3); opacity: 0.85; /* 0.55 read at 3.1:1 on the rail */
}
.app-chip.active.locked .app-chip-cap { background: var(--border); color: var(--ivory3); }
/* A "soon" app the current deal doesn't cover — dimmed further. */
.app-chip.soon.locked { opacity: 1; } /* dimmed by colour, not opacity: 0.4 read at 2.3:1 */
/* A "soon" app the deal DOES cover — relevant, workspace coming (solid accent). */
.app-chip.soon:not(.locked) { border-style: solid; border-color: var(--gold-dim); color: var(--ivory2); }

.app-list { display: flex; flex-direction: column; gap: 5px; align-self: stretch; }
.app-chip {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 5px 9px; border-radius: 8px;
  font-size: 12px; line-height: 1.25;
}
.app-chip-name { font-weight: 600; }
/* Active app — the one this build runs. Links through to its deal timeline. */
.app-chip.active {
  background: var(--gold-bg); border: 1px solid var(--gold-dim); color: var(--accent-ink);
  padding-left: 5px; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.app-chip.active:hover { border-color: var(--gold); background: var(--gold-bg2, var(--gold-bg)); }
.app-chip.active:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.app-chip-cap {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ivory3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 7px;
}
/* Planned apps — siblings on the same engine, not yet shipped. */
.app-chip.soon {
  background: transparent; border: 1px dashed var(--border2); color: var(--ivory3);
}
.app-chip.soon .app-chip-name { font-weight: 500; }
.app-chip-tag {
  margin-left: auto; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px;
}
/* Mobile: the sidebar is a horizontal bar — hide the app list to save the rows. */
@media (max-width: 640px) { .side-brand .app-list { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   Clear Asset theme — display type + navy sidebar rail
   Layered on top of the token system: Montserrat on the marquee elements and
   a constant navy navigation rail (the "navy dominates" motif) in both themes.
   ════════════════════════════════════════════════════════════════════════ */

/* Montserrat for impact — brand wordmark, page + panel titles, big stats. */
.brand,
.dash-title,
.panel-title,
.kpi-value { font-family: var(--font-head); }
.dash-title { font-weight: 800; letter-spacing: -0.03em; }
.kpi-value  { font-weight: 800; letter-spacing: -0.02em; }

/* Primary-accent buttons get on-accent text (white on blue), not near-black. */
.dash-cta { color: var(--on-gold); }
/* "Proceed" reads as a positive (green), matching the risk semantics. */
.kpi.good .kpi-value { color: var(--green-ink); }

/* ── Navy navigation rail (constant across light/dark) ── */
.sidebar {
  background: linear-gradient(180deg, #003a73 0%, #003366 42%, #002a54 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebar .side-brand { border-bottom-color: rgba(255, 255, 255, 0.14); }
.sidebar .brand-eyebrow { color: #9FC0E3; }
.sidebar .brand-mark { color: #FFFFFF; }
.sidebar .brand-sub { color: #CBDDF2; }
.sidebar .brand-tagline { color: #94B6DA; }
.sidebar .health { color: #9FC0E3; }
/* Status indicator: green when the API is healthy, red when unreachable
   (the base .health.ok/.down rules set the colour; these keep the glow
   reading on the navy rail and win over the generic sidebar dot styling). */
.sidebar .health.ok .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.sidebar .health.down .dot { background: var(--red); box-shadow: 0 0 8px var(--red); }
.sidebar .side-caption { color: #8FB1D4; }

.sidebar .side-btn {
  color: #D3E2F3; background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.sidebar .side-btn:hover {
  color: #FFFFFF; background: rgba(74, 144, 226, 0.30); border-color: #4A90E2;
}

.sidebar .deals-nav {
  color: #EAF2FB; background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}
.sidebar .deals-nav:hover {
  color: #FFFFFF; background: rgba(74, 144, 226, 0.28); border-color: #4A90E2;
}
.sidebar .deals-nav.active {
  color: #FFFFFF; background: #0052CC; border-color: #0052CC;
}

.sidebar .app-chip { color: #CBDDF2; border-color: rgba(255, 255, 255, 0.12); }
.sidebar .app-chip.active {
  color: #FFFFFF; background: rgba(74, 144, 226, 0.18);
  border-color: rgba(74, 144, 226, 0.55);
}
.sidebar .app-chip.active .app-chip-cap { background: #0052CC; color: #FFFFFF; }
.sidebar .app-chip.soon .app-chip-name { color: #8FB1D4; }
.sidebar .app-chip-tag { color: #8FB1D4; border-color: rgba(255, 255, 255, 0.22); }

/* Theme switch sits on navy — lift its track/icons for contrast. */
/* Theme switch sits on the navy rail: the base switch uses the light --surf2
   fill, which made the icons/track wash out. Match the other rail controls and
   keep the track, knob, and icons legible against navy. */
.sidebar .theme-switch {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}
.sidebar .theme-switch:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.34);
}
.sidebar .ts-track { background: rgba(255, 255, 255, 0.20); }
.sidebar .ts-thumb { background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.sidebar .ts-ico { color: #9FC0E3; }
/* Light the active side so the current mode reads at a glance. */
html[data-theme="light"] .sidebar .ts-sun,
html[data-theme="dark"] .sidebar .ts-moon { color: #FFFFFF; }
/* These three took theme tokens that only suit the light canvas: the light
   --accent-ink (#0052CC) and --ivory3 read at 2–2.6:1 on the navy rail. */
.sidebar .side-btn-dash { color: #9FC0E3; border-color: rgba(159, 192, 227, 0.45); }
.sidebar .side-btn-search { color: #D3E2F3; }
.sidebar .side-kbd { color: #9FC0E3; border-color: rgba(255, 255, 255, 0.22); }
.sidebar .side-btn:hover, .sidebar .side-btn-dash:hover { color: #FFFFFF; }
/* The rail's footer (who is signed in, the open deal, Security / Tokens / Sign
   out) also sits on navy in both themes: ink-on-navy read at 1.2–1.8:1 in light. */
.sidebar .session-name { color: #FFFFFF; }
.sidebar .session-role, .sidebar .active-deal { color: #9FC0E3; }
.sidebar .active-deal.has { color: #BFD6F0; }
.sidebar .signout-btn { color: #D3E2F3; border-color: rgba(255, 255, 255, 0.20); }
.sidebar .signout-btn:hover { color: #FFFFFF; border-color: #4A90E2; background: rgba(74, 144, 226, 0.30); }

/* ── Dashboards page (the Twenty CRM leadership dashboards, mirrored) ────────
   A row of dashboard tiles, a tab bar across the top of the selected
   dashboard, then a 12-column widget grid: KPI tiles (.kpi, shared with the
   landing page), horizontal bars, donuts, stacked bars, record tables, and an
   honest "not tracked" tile wherever Twenty has data ClearAsset does not. */
.side-btn-dash { border-color: var(--gold-dim); color: var(--accent-ink); }
.side-btn-search { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ivory3); }
.side-kbd { font-family: var(--font-mono); font-size: 10px; color: var(--ivory3); border: 1px solid var(--border2); border-radius: 4px; padding: 1px 5px; }

/* Command palette (PG2-08). */
.palette-modal { align-items: flex-start; padding-top: 10vh; }
.palette-card { position: relative; width: min(680px, 100%); max-height: 70vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.palette-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.palette-ico { color: var(--ivory3); font-size: 18px; }
#palette-q { flex: 1; background: transparent; border: 0; outline: 0; color: var(--ivory); font: inherit; font-size: 15px; min-width: 0; }
#palette-q::-webkit-search-cancel-button { display: none; }
.palette-esc { font-family: var(--font-mono); font-size: 10px; color: var(--ivory3); border: 1px solid var(--border2); border-radius: 4px; padding: 1px 5px; }
.palette-list { overflow: auto; padding: 6px; flex: 1; }
.palette-group { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ivory3); padding: 10px 10px 4px; }
.palette-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--ivory); font: inherit; }
.palette-item.active { background: var(--gold-bg); outline: 1px solid var(--gold-dim); }
.palette-kind { flex: 0 0 68px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ivory3); border: 1px solid var(--border2); border-radius: 999px; padding: 2px 0; text-align: center; }
.palette-kind-command { border-color: transparent; font-size: 14px; }
.search-reindex { margin-top: 12px; align-items: center; }
.jobs-block { margin-top: 14px; }
.cap-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cap-pick { cursor: pointer; }
.hub-hold { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
@media (max-width: 640px) { .cap-btn { min-height: 44px; font-size: 14px; } }
.wh-deliveries { flex: 1 1 100%; margin-top: 6px; padding: 6px 8px; background: var(--surf2); border-radius: 6px; }
.palette-main { display: flex; flex-direction: column; min-width: 0; }
.palette-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-sub { font-size: 11.5px; color: var(--ivory3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-empty { padding: 18px 12px; color: var(--ivory3); font-size: 13px; }
.palette-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 10.5px; color: var(--ivory3); }
@media (max-width: 640px) { .palette-modal { padding: 8px; } .palette-card { max-height: 85vh; } .palette-foot { display: none; } }
.dbx-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.dbx-tile { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--ivory2); font: inherit; min-width: 0; }
.dbx-tile b { display: block; font-size: 13px; color: var(--ivory); font-weight: 700; }
.dbx-tile span { display: block; font-size: 11px; color: var(--ivory3); margin-top: 2px; }
.dbx-tile:hover { background: var(--surf2); }
.dbx-tile.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-dim); }
.dbx-tile.active b { color: var(--accent-ink); }
.dbx-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border2); margin-bottom: 16px; }
.dbx-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ivory3); cursor: pointer; margin-bottom: -1px; }
.dbx-tab:hover { color: var(--ivory); }
.dbx-tab.active { color: var(--accent-ink); border-bottom-color: var(--gold); }
/* Date range + print controls (PG2-01). */
.dbx-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -6px 0 14px; }
.dbx-range { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ivory3); }
.dbx-range input { background: var(--surf2); color: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 5px 8px; font: inherit; font-size: 12px; }
.dbx-range input:focus { outline: none; border-color: var(--gold); }
.dbx-ctl { padding: 5px 10px; font-size: 12px; }
.dbx-range-note { font-size: 10.5px; color: var(--ivory3); }
.dbx-print-btn { margin-left: auto; }
.dbx-link { color: inherit; text-decoration: none; display: block; }
.dbx-link:hover .kpi, .dbx-link:hover { text-decoration: none; }
.dbx-link .kpi:hover { border-color: var(--gold); }
.dbx-bar .lbl .dbx-link { display: inline; color: var(--ivory2); }
.dbx-bar .lbl .dbx-link:hover { color: var(--accent-ink); text-decoration: underline; }
.dbx-line { width: 100%; height: auto; display: block; }
.dbx-area { fill: var(--sky); opacity: 0.16; }
.dbx-stroke { stroke: var(--sky); stroke-width: 2.5; stroke-linejoin: round; }
.dbx-dot { fill: var(--sky); stroke: var(--surface); stroke-width: 1.5; }
.dbx-grid-line { stroke: var(--border); stroke-width: 1; }
.dbx-axis { fill: var(--ivory3); font-family: var(--font-mono); font-size: 10px; }
.dbx-funnel { display: grid; gap: 6px; }
.dbx-funnel-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 120px; gap: 10px; align-items: center; font-size: 12.5px; }
.dbx-funnel-row .lbl { color: var(--ivory2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbx-funnel-row .trk { position: relative; height: 22px; background: var(--surf2); border-radius: 6px; overflow: hidden; }
.dbx-funnel-row .trk i { position: absolute; inset: 0 auto 0 0; background: var(--sky); opacity: 0.8; border-radius: 6px; }
.dbx-funnel-row .trk b { position: absolute; left: 8px; top: 3px; font-size: 12px; color: var(--ivory); }
.dbx-funnel-row .conv { font-size: 10.5px; color: var(--ivory3); font-family: var(--font-mono); }
.deals-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; }
.deals-tool { padding: 7px 11px; font-size: 12.5px; }
.deals-views { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.deals-views-pick { font-size: 12.5px; padding: 6px 8px; max-width: 200px; }
.deals-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 10px; padding: 10px 12px; background: var(--surf2); border: 1px solid var(--border); border-radius: var(--radius-card); }
.deals-filterbar label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ivory3); min-width: 0; }
.deals-filterbar input, .deals-filterbar select { background: var(--surface); color: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 6px 9px; font: inherit; font-size: 12.5px; min-width: 120px; }
.deals-filterbar input:focus, .deals-filterbar select:focus { outline: none; border-color: var(--gold); }
.deals-filterbar label.df-check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; font-size: 12px; color: var(--ivory2); }
.deals-filterbar label.df-check input { min-width: 0; width: 15px; height: 15px; accent-color: var(--amber); }
.deals-columns { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; padding: 8px 12px; background: var(--surf2); border: 1px solid var(--border); border-radius: var(--radius-card); font-size: 12.5px; color: var(--ivory2); }
.deals-col-opt { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.deals-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--gold); border-radius: var(--radius-card); background: var(--gold-bg, var(--surf2)); }
.deals-bulk-count { font-weight: 600; color: var(--ivory); font-size: 12.5px; }
.deals-bulk-hint { margin-left: auto; font-size: 10.5px; color: var(--ivory3); }
.trk-select { margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--gold); }
.trk-select-all { margin-right: 6px; }
.deal-card.kbd-focus, .trk-table tbody tr.kbd-focus td { outline: 2px solid var(--gold); outline-offset: -2px; }
.deals-view-name { width: 100%; background: var(--surf2); color: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 7px 10px; font: inherit; font-size: 13px; }
.deals-filter-chip { background: var(--surf2); border: 1px solid var(--gold); color: var(--ivory); border-radius: var(--radius-pill); padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.deals-filter-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-ink); margin-right: 6px; }
.deals-filter-clear { background: none; border: none; color: var(--ivory3); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.dbx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.dbx-w { grid-column: span 12; min-width: 0; }
.dbx-w.s2 { grid-column: span 2; } .dbx-w.s3 { grid-column: span 3; } .dbx-w.s4 { grid-column: span 4; }
.dbx-w.s6 { grid-column: span 6; } .dbx-w.s8 { grid-column: span 8; } .dbx-w.s9 { grid-column: span 9; }
.dbx-w > .kpi { height: 100%; }
.dbx-card { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 14px 16px; height: 100%; min-width: 0; }
.dbx-card .chart-title { margin-bottom: 10px; }
.dbx-text { font-size: 13px; color: var(--ivory2); line-height: 1.55; }
.dbx-text b { color: var(--ivory); }
.dbx-text ul { margin: 6px 0 0; padding-left: 18px; }
.dbx-na { border-style: dashed; color: var(--ivory3); }
.dbx-na .chart-title { color: var(--ivory3); }
.dbx-na p { font-size: 12px; margin: 0; }
.dbx-bars { display: grid; gap: 7px; }
.dbx-bar { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.dbx-bar .lbl { color: var(--ivory2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbx-bar .trk { height: 12px; background: var(--surf2); border-radius: 4px; overflow: hidden; }
.dbx-bar .trk i { display: block; height: 100%; background: var(--sky); border-radius: 4px; min-width: 2px; }
.dbx-bar .val { font-family: var(--font-mono); font-size: 11.5px; color: var(--ivory); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dbx-donut { display: flex; align-items: center; gap: 14px; }
.dbx-donut svg { width: 110px; height: 110px; flex: none; }
.dbx-donut .lg { display: grid; gap: 4px; font-size: 12px; color: var(--ivory2); min-width: 0; }
.dbx-donut .lg span { display: inline-flex; align-items: center; gap: 6px; }
.dbx-donut .lg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dbx-donut .lg b { color: var(--ivory); font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 8px; }
.dbx-stack { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.dbx-stack .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.dbx-stack .col .bar { display: flex; flex-direction: column-reverse; width: 70%; max-width: 48px; margin: 0 auto; border-radius: 5px 5px 0 0; overflow: hidden; }
.dbx-stack .col .bar i { display: block; width: 100%; }
.dbx-stack .col .lab { font-size: 10.5px; color: var(--ivory3); text-align: center; line-height: 1.2; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-stack .col .n { font-family: var(--font-mono); font-size: 12px; color: var(--ivory); text-align: center; margin-bottom: 4px; }
.dbx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 11.5px; color: var(--ivory2); }
.dbx-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dbx-legend i { width: 10px; height: 10px; border-radius: 3px; }
.dbx-tablewrap { overflow-x: auto; }
.dbx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dbx-table th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3); font-weight: 500; padding: 7px 10px; border-bottom: 1px solid var(--border2); white-space: nowrap; }
.dbx-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--ivory2); }
.dbx-table td.num, .dbx-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dbx-table td.ref { font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }
.dbx-table td.ref a { color: var(--accent-ink); text-decoration: none; }
.dbx-table tbody tr:hover td { background: var(--surf2); }
.dbx-empty { font-size: 12px; color: var(--ivory3); font-style: italic; }
@media (max-width: 900px) {
  .dbx-w.s2, .dbx-w.s3, .dbx-w.s4 { grid-column: span 6; }
  .dbx-w.s8, .dbx-w.s9 { grid-column: span 12; }
}
@media (max-width: 600px) {
  .dbx-w.s2, .dbx-w.s3, .dbx-w.s4, .dbx-w.s6 { grid-column: span 12; }
}

/* ── Collateral library ──────────────────────────────────────────────────── */
.col-form { padding: 16px 18px; margin-bottom: 18px; display: grid; gap: 12px; }
.col-form-row { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(180px, 1fr) minmax(200px, 1.4fr); gap: 12px; align-items: end; }
.col-form-row:last-of-type { grid-template-columns: 1fr auto; }
.col-form .field { margin: 0; }
.col-upload { white-space: nowrap; }
.col-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.col-cat { min-width: 0; }
.col-cat { padding: 14px 18px; }
.col-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.col-cat-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ivory2); }
.col-cat-count { font-family: var(--font-mono); font-size: 11px; color: var(--ivory3); }
.col-empty { font-size: 12px; color: var(--ivory3); font-style: italic; padding: 4px 0; }
.col-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.col-doc:first-of-type { border-top: 0; }
.col-doc-title { font-size: 14px; font-weight: 600; color: var(--ivory); }
.col-doc-meta { font-size: 11.5px; color: var(--ivory3); font-family: var(--font-mono); margin-top: 2px; overflow-wrap: anywhere; }
.col-doc-note { font-size: 12.5px; color: var(--ivory2); margin-top: 3px; }
.col-doc-actions { display: flex; gap: 6px; }
@media (max-width: 760px) { .col-form-row, .col-form-row:last-of-type { grid-template-columns: 1fr; } .col-doc { grid-template-columns: 1fr; } }

.col-form select {
  width: 100%; font: inherit; font-size: 13px; color: var(--ivory); background: var(--surface);
  border: 1px solid var(--border2); border-radius: 8px; padding: 9px 11px; cursor: pointer;
}
.col-form select:focus { outline: none; border-color: var(--gold); }
.col-form input[type="file"] { color: var(--ivory2); font-size: 12px; }
.col-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 7px; padding: 7px 10px; background: var(--surf2); border-radius: 8px; font-size: 12px; min-width: 0; }
.col-share-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3); }
.col-share-url { color: var(--accent-ink); text-decoration: none; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; min-width: 0; flex: 1 1 240px; }
.col-share-url:hover { text-decoration: underline; }
.col-share-exp { color: var(--ivory3); font-size: 11px; }
.col-share-btn { background: none; border: 1px solid var(--border2); border-radius: 6px; color: var(--ivory2); font: inherit; font-size: 11.5px; padding: 3px 9px; cursor: pointer; text-decoration: none; }
.col-share-btn:hover { color: var(--ivory); border-color: var(--gold); }
.col-share-stop { color: var(--red-ink); }

/* Executed-document register and template versions (PG2-07). */
.col-ver { font-size: 10.5px; color: var(--ivory3); border: 1px solid var(--border2); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.col-exec { margin-top: 16px; }
.col-exec-sub { font-size: 12.5px; color: var(--ivory3); margin: 0 0 10px; }
.col-exec-with { font-weight: 500; color: var(--ivory2); }
.col-exec-badges { margin-top: 5px; }
.col-exec-badge { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--border2); color: var(--ivory2); }
.col-exec-ok { color: var(--teal, #2a9d8f); border-color: var(--teal, #2a9d8f); }
.col-exec-soon { color: var(--accent-ink); border-color: var(--gold); }
.col-exec-expired { color: var(--red-ink); border-color: var(--red); }
.col-exec-open { color: var(--ivory3); }
#col-exec-add { margin-top: 10px; }
.col-doc-actions { flex-wrap: wrap; justify-content: flex-end; }

/* Phone widths: page-head action rows, collateral rows and the admin tab strip
   wrap instead of running past the viewport (QA 2026-10-13). Kept at the end of the file: these override base rules declared above.. */
@media (max-width: 640px) {
  .deals-head { flex-wrap: wrap; }
  .deals-head-actions { flex: 1 1 100%; justify-content: flex-start; }
  .cp-head-actions { flex-wrap: wrap; }
  .col-doc { grid-template-columns: minmax(0, 1fr); }
  .col-doc-actions { flex-wrap: wrap; }
  .col-share-url { white-space: normal; overflow-wrap: anywhere; }
  .col-form-row, .col-form-row:last-of-type { grid-template-columns: 1fr; }
  .admin-tabs { flex-wrap: wrap; }
}

/* Offline copy notice (PG2-09). */
.offline-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; color: var(--accent-ink); background: var(--gold-bg); border: 1px solid var(--gold-dim); }
body.is-offline .health .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* Phone layouts for the tracker role (PG2-09): the tracker table becomes one
   card per deal with each column labelled; notes and the Inventory Report open
   full-screen; the deals toolbar stacks. Kept with the other phone rules at the
   end of the file so they override the base rules above. */
@media (max-width: 640px) {
  /* Seven nav buttons no longer fit one row: wrap them three to a row. */
  .side-nav { flex-wrap: wrap; }
  .side-btn { flex: 1 1 30%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-btn-search { justify-content: center; }
  .side-btn-search .side-kbd { display: none; }
  .deals-toolbar { flex-wrap: wrap; gap: 8px; }
  .deals-toolbar .deals-search { flex: 1 1 100%; order: 10; }
  .deals-views { flex-wrap: wrap; }
  .trk-scroll { overflow-x: visible; border: 0; background: transparent; }
  .trk-table { min-width: 0; table-layout: auto; display: block; }
  .trk-table colgroup, .trk-table thead { display: none; }
  .trk-table tbody { display: grid; gap: 10px; }
  .trk-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .trk-table tbody tr:hover td { background: transparent; }
  .trk-table td { display: block; border: 0; padding: 0; white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; }
  .trk-table td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory3); margin-bottom: 1px; }
  .trk-table td.trk-col-deal, .trk-table td.trk-col-notes, .trk-table td.trk-col-act { grid-column: 1 / -1; }
  .trk-table td.trk-col-act { text-align: left; display: flex; flex-wrap: wrap; gap: 6px; }
  .trk-col-act .deals-btn + .deals-btn { margin-left: 0; }
  .trk-col-act .deals-btn, .trk-notes-open { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  .trk-empty[data-label] { display: none; }
  .ev-modal { padding: 0; align-items: stretch; }
  .ev-modal-card, .notes-card { width: 100%; max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .notes-compose textarea { font-size: 16px; } /* iOS zooms on smaller inputs */
  .invrep-body { overflow: auto; -webkit-overflow-scrolling: touch; }
  .palette-card { height: auto; }
}
.nd-specs-select { min-width: 190px; }

/* ── Buying patterns (BP1) ─────────────────────────────────────────────────── */
.cp-pattern { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.cp-pattern-line { font-size: 12px; color: var(--ivory2); line-height: 1.45; }
.cp-pattern-line b { color: var(--ivory); font-weight: 600; }
.cp-pattern-line.observed-only { color: var(--ivory3); }
.cp-pattern-stale, .cp-pattern-obs { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.cp-pattern-stale { color: var(--amber-ink); background: var(--amber-bg); }
.cp-pattern-obs { color: var(--ivory3); background: var(--surf3); }
.cp-pattern-btn { margin-left: auto; font: inherit; font-size: 11px; font-weight: 600; color: var(--accent-ink); background: var(--gold-bg); border: 1px solid var(--gold-dim); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.cp-pattern-btn:hover { border-color: var(--gold); }
.bp-card { width: min(1040px, 100%); max-width: 1040px; }
.bp-head { gap: 10px; }
.bp-sides { display: inline-flex; gap: 4px; margin-left: auto; }
.bp-sides-inline { margin-left: auto; }
.bp-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.bp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bp-observed-body { display: flex; flex-direction: column; gap: 8px; }
.bp-obs-row, .bp-obs-deals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bp-obs-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ivory3); min-width: 112px; }
.bp-obs-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ivory); background: var(--surf3); border: 1px solid var(--border2); border-radius: 999px; padding: 2px 9px; }
.bp-adopt { font: inherit; font-size: 12px; line-height: 1; color: var(--accent-ink); background: none; border: 1px solid var(--gold-dim); border-radius: 999px; width: 18px; height: 18px; cursor: pointer; padding: 0; }
.bp-adopt:hover { border-color: var(--gold); }
.bp-obs-empty, .bp-obs-foot { font-size: 12px; color: var(--ivory3); margin: 4px 0; }
.bp-status { text-align: left; max-width: none; margin: 8px 0 0; }
.bp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.bp-matches { display: flex; flex-direction: column; gap: 8px; }
.bp-match { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--surface); }
.bp-match-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bp-match-rank { font-family: var(--font-mono); font-size: 11px; color: var(--ivory3); min-width: 18px; }
.bp-match-name { font-weight: 600; color: var(--ivory); text-decoration: none; }
.bp-match-name:hover { color: var(--accent-ink); }
.bp-match-score { font-family: var(--font-mono); font-size: 11px; color: var(--accent-ink); background: var(--gold-bg); border-radius: 999px; padding: 1px 8px; }
.bp-match-appetite, .bp-match-units { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 1px 7px; color: var(--ivory3); background: var(--surf3); }
.bp-match-appetite.active { color: var(--green-ink); background: var(--green-bg); }
.bp-match-appetite.stale { color: var(--amber-ink); background: var(--amber-bg); }
.bp-match-reasons { margin: 4px 0 0 26px; padding: 0; font-size: 12px; color: var(--ivory2); }
.bp-match-reasons li { margin: 1px 0; }
.bp-match-source { margin: 2px 0 0 26px; font-size: 11px; color: var(--ivory3); }
.bp-refresh-row { margin-top: 8px; }
@media (max-width: 760px) {
  .bp-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-pattern-btn { margin-left: 0; }
}
/* Buying patterns tab */
.cp-tabs { margin: 0 0 14px; }
.cp-patterns { display: flex; flex-direction: column; gap: 14px; }
.bp-find { padding: 12px 14px; }
.bp-find-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.bp-find-row input, .bp-find-row select { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--border2); border-radius: 8px; background: var(--surface); color: var(--ivory); }
.bp-find-row input:focus, .bp-find-row select:focus { outline: none; border-color: var(--gold); }
#bpf-model, #bpf-vendor, #bpf-location { flex: 1 1 160px; min-width: 140px; }
#bpf-mw { width: 86px; }
.bp-sides-find { margin-left: 0; }
.bpf-results { margin-top: 10px; }
.bpf-results:empty { display: none; }
.bpt-controls { align-items: center; }
.bp-table { min-width: 860px; }
.bp-table td { vertical-align: top; white-space: normal; }
.bpt-company a { color: var(--ivory); font-weight: 600; text-decoration: none; }
.bpt-company a:hover { color: var(--accent-ink); }
.bpt-side { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--border2); color: var(--ivory2); }
.bpt-side.buy { color: var(--green-ink); border-color: var(--green); background: var(--green-bg); }
.bpt-side.sell { color: var(--accent-ink); border-color: var(--gold-dim); background: var(--gold-bg); }
.bpt-line { max-width: 460px; line-height: 1.45; }
.bpt-source { font-size: 11px; color: var(--ivory3); margin-top: 2px; }
.bpt-seen, .bpt-updated { color: var(--ivory3); font-size: 12px; white-space: nowrap; }

/* Active deal (editor toggle + the star on starred tiles and tracker rows) */
.nd-active-toggle { white-space: nowrap; }
.nd-active-toggle .nd-active-star { font-size: 14px; line-height: 1; color: var(--amber-ink); }
.nd-active-toggle[aria-pressed="true"] { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber); }
.deal-card { position: relative; }
.deal-card-star {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--card-outline, var(--border2));
  color: var(--amber-ink); font-size: 16px; line-height: 1; box-shadow: var(--shadow-card);
}
.deal-card-star.is-off { color: var(--ivory3); }
.deal-card-star-btn { cursor: pointer; font: inherit; font-size: 16px; padding: 0; }
.deal-card-star-btn:hover { border-color: var(--amber); color: var(--amber-ink); }
.deal-card-star-btn:disabled { cursor: progress; opacity: .7; }
.deal-card.is-active { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--surf2)); } /* a lighter tone of the outline */
.deal-card-top { padding-right: 38px; } /* the corner belongs to the star */
.trk-star { color: var(--amber-ink); margin-right: 4px; }

/* Active deals rail: a second sidebar docked to the right of the navy rail,
   outside the Deals page box. The main area shifts right by the rail's width
   while the tiles are shown, so the page keeps its own left edge. */
:root { --deals-rail-w: 164px; }
body.deals-rail { padding-left: calc(var(--sidebar-w) + var(--deals-rail-w)); }
body.deals-rail #deals-active-panel {
  position: fixed; left: var(--sidebar-w); top: 0; bottom: 0; width: var(--deals-rail-w); z-index: 5;
  border: none; border-right: 1px solid var(--border); border-radius: 0; background: var(--surface);
  padding: 22px 12px; overflow-y: auto;
}
.deals-active-col { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px 12px; }
.deals-active-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ivory3); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.deals-active-star { color: var(--amber-ink); font-size: 13px; }
.deals-active-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.deals-active-ref { font: inherit; font-family: var(--font-mono); font-size: 12px; color: var(--ivory); background: var(--amber-bg); border: 1px solid var(--amber); border-radius: 7px; padding: 4px 8px; width: 100%; text-align: left; cursor: pointer; }
.deals-active-ref:hover { border-color: var(--amber-ink); color: var(--amber-ink); }
.deals-active-none { margin: 0; font-size: 11.5px; color: var(--ivory3); line-height: 1.45; }
.deal-card.is-flash { box-shadow: 0 0 0 4px var(--amber-bg); }
@media (max-width: 640px) {
  body.deals-rail { padding-left: 0; }
  body.deals-rail #deals-active-panel { position: static; width: auto; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
  .deals-active-list { flex-direction: row; flex-wrap: wrap; }
  .deals-active-ref { width: auto; }
}

/* Quiet deals: 30+ days untouched = red outline on a light red; 45+ = filled red. */
.deal-card.is-stale { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--surf2)); }
.deal-card.is-stale-solid { border-color: var(--red-ink); background: var(--red-ink); }
.deal-card.is-stale-solid, .deal-card.is-stale-solid .deal-card-title, .deal-card.is-stale-solid .deal-card-ref,
.deal-card.is-stale-solid .deal-card-label, .deal-card.is-stale-solid .deal-card-value, .deal-card.is-stale-solid .deal-card-title-more { color: #FFFFFF; }
/* Everything below the title row (fields, units, condition, notes) reads white on the filled tile. */
.deal-card.is-stale-solid > :not(.deal-card-top), .deal-card.is-stale-solid > :not(.deal-card-top) :not(button) { color: #FFFFFF; }
.deal-card.is-stale-solid .deals-btn.ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.65); }
.deal-card.is-stale-solid .deals-btn.ghost:hover { color: var(--red-ink); background: #FFFFFF; border-color: #FFFFFF; }
.deal-card.is-stale-solid .deals-phase, .deal-card.is-stale-solid .outcome-pill, .deal-card.is-stale-solid .deal-attach-badge { background: #FFFFFF; }
.deal-card.is-stale-solid .deal-card-star { background: #FFFFFF; border-color: #FFFFFF; }
.deal-card-quiet { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--red-ink); border: 1px solid var(--red); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.deal-card.is-stale-solid .deal-card-quiet { color: #FFFFFF; border-color: #FFFFFF; }
.trk-table tr.is-stale td { background: color-mix(in srgb, var(--red) 10%, var(--surface)); }
.trk-table tr.is-stale td:first-child { box-shadow: inset 4px 0 var(--red); }
.trk-table tr.is-stale-solid td { background: color-mix(in srgb, var(--red-ink) 22%, var(--surface)); }
.trk-table tr.is-stale-solid td:first-child { box-shadow: inset 4px 0 var(--red-ink); }
.trk-ref .deal-card-quiet { margin-left: 6px; }

/* Deals rail sections: active (gold), quiet 30+ (light red), quiet 45+ (dark red) */
.deals-rail-sec + .deals-rail-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.deals-rail-n { font-family: var(--font-mono); font-size: 10px; color: var(--ivory2); background: var(--surf3); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.deals-rail-sec.tone-stale .deals-active-ref { background: color-mix(in srgb, var(--red) 14%, var(--surf2)); border-color: var(--red); color: var(--ivory); }
.deals-rail-sec.tone-stale .deals-active-ref:hover { color: var(--red-ink); border-color: var(--red-ink); }
.deals-rail-sec.tone-stale-solid .deals-active-ref { background: var(--red-ink); border-color: var(--red-ink); color: #FFFFFF; }
.deals-rail-sec.tone-stale-solid .deals-active-ref:hover { background: #FFFFFF; color: var(--red-ink); }
.deal-card-updated { font-size: 10px; color: var(--ivory3); white-space: nowrap; }
.deal-card.is-stale-solid .deal-card-updated { color: #FFFFFF; }
.trk-ref .deal-card-updated { margin-left: 6px; }

/* Asset-class lens (ADR-0026) */
.deals-lens-note { margin-left: 8px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ivory2); }
.sidebar .app-chip[aria-pressed="true"] { color: #FFFFFF; background: rgba(74, 144, 226, 0.18); border-color: rgba(74, 144, 226, 0.55); }
.sidebar .app-chip.active.locked { opacity: 1; }
/* A chip that is a <button> must size exactly like the <a> chip beside it. */
button.app-chip { font-family: inherit; font-size: 12px; line-height: 1.25; font-weight: inherit; text-align: left; cursor: pointer; border: 0; background: transparent; white-space: nowrap; }

/* References now name the parties; let a long one wrap rather than overflow. */
.deal-card-ref, .trk-ref, .deals-active-ref { white-space: normal; overflow-wrap: anywhere; }