/* ============================================================================
   S'cout — design system
   Implements docs/Scout-Design-Architecture.html. Warm paper & ink; Clay is the
   only accent (never blue, so it never fights a tenant's brand on the report).
   Three type roles: Newsreader = S'cout's voice, Instrument Sans = the interface,
   JetBrains Mono = data/labels. Motion arrives, it never bounces.
   No framework, no build step. Linked by app / onboarding / discover / interview.
   (Follow-up: self-host the three families as woff2 for true offline weight.)
   ========================================================================== */
@import url('/fonts.css');   /* self-hosted; see scripts/fetch-fonts.sh */

:root {
  /* — ink & clay — */
  --ink:        #17181A;   /* type, dark chrome            */
  --clay:       #B4502D;   /* S'cout's presence, the accent */
  --clay-600:   #A9482A;   /* text-safe / pressed          */
  --clay-100:   #F0DCD2;   /* tint / highlight             */
  --clay-050:   #FBF3EE;   /* faint clay wash              */
  --slate:      #2E3A40;   /* data, second series          */
  --sage:       #4F6B52;   /* confirmed, target met        */
  --amber:      #B98A2E;   /* needs attention              */

  /* — paper — */
  --paper-000:  #FDFCFA;   /* raised cards                 */
  --paper-100:  #F7F4EF;   /* recessed / rails             */
  --paper-200:  #EFEBE4;   /* body ground                  */
  --hairline:   #E4E0D9;
  --hairline-2: #F2EFE9;   /* faintest divider             */
  --divider-d:  #D9D3C9;

  /* — text on paper — */
  --t-strong:   #17181A;
  --t-body:     #35332E;
  --t-soft:     #4B4842;
  --t-muted:    #6F6A61;
  --t-faint:    #8C8578;
  --t-ghost:    #A39C90;
  --t-disabled: #C9C2B6;
  /* — text on ink — */
  --on-ink:     #F5F1EA;
  --on-ink-soft:#B7B1A6;
  --on-ink-mut: #6F6A61;
  --ink-line:   #2E2F31;
  --ink-panel:  #202123;

  /* — type roles — */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;   /* S'cout's voice */
  --sans:  'Instrument Sans', system-ui, -apple-system, sans-serif; /* the UI */
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* data */

  /* — space (4px base, doubling) — */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* — edge (near-zero radius; sharp = document) — */
  --r-ctrl: 2px;   /* controls        */
  --r-card: 3px;   /* cards           */
  --r-pill: 999px; /* aperture, pills */

  /* — elevation (warm shadows) — */
  --e1: 0 1px 2px rgba(52,40,28,.06), 0 4px 12px rgba(52,40,28,.05);
  --e2: 0 2px 4px rgba(52,40,28,.07), 0 12px 32px rgba(52,40,28,.10);

  /* — motion — */
  --settle:  320ms cubic-bezier(.16,.84,.32,1);   /* things arrive          */
  --respond: 120ms cubic-bezier(.4,0,.2,1);        /* hover / focus / press  */
  --measure: 900ms cubic-bezier(.22,1,.36,1);      /* score bars fill        */
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper-200); }
body {
  margin: 0;
  background: var(--paper-200);
  color: var(--t-strong);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--clay-600); text-decoration: none; border-bottom: 1px solid rgba(169,72,42,.3); transition: color var(--respond), border-color var(--respond); }
a:hover { color: var(--ink); border-bottom-color: rgba(23,24,26,.4); }
::selection { background: var(--clay-100); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
::placeholder { color: var(--t-ghost); }

/* ---------- type roles ---------- */
.display { font-family: var(--serif); font-weight: 300; font-size: clamp(34px,4vw,56px); line-height: 1.02; letter-spacing: -.025em; }
.title   { font-family: var(--serif); font-weight: 400; font-size: clamp(24px,3vw,32px); line-height: 1.15; letter-spacing: -.018em; }
.ask     { font-family: var(--serif); font-weight: 300; font-size: 25px; line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; }
.lede    { font-family: var(--serif); font-weight: 300; font-size: 20px; line-height: 1.55; color: var(--t-soft); text-wrap: pretty; }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--t-muted); }
.eyebrow--clay { color: var(--clay); }
.mono    { font-family: var(--mono); }
.muted   { color: var(--t-muted); }
em.accent { font-style: italic; color: var(--clay-600); }

/* ---------- keyframes ---------- */
@keyframes ap-spin-a { to { transform: rotate(360deg); } }
@keyframes ap-spin-b { to { transform: rotate(-360deg); } }
@keyframes ap-breathe { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.72); opacity: 1; } }
@keyframes ap-listen { 0%,100% { opacity: .25; transform: scaleY(.4); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gate  { 0%,100% { box-shadow: 0 0 0 0 rgba(180,80,45,0); } 50% { box-shadow: 0 0 0 6px rgba(180,80,45,.09); } }
@keyframes caret { 50% { opacity: 0; } }
.rise { animation: rise var(--settle) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============================================================================
   THE APERTURE  —  markup injected by scout-aperture.js:
   <span class="aperture" data-state="thinking" style="width:22px;height:22px"></span>
   States: idle · attending · thinking · listening · resolved
   ========================================================================== */
.aperture { display: inline-block; line-height: 0; flex: none; }
.aperture .ap-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.aperture .ap-ring-o,
.aperture .ap-ring-i,
.aperture .ap-pupil { transform-box: view-box; transform-origin: center; }
.aperture .ap-ring-o { stroke: var(--clay);  stroke-width: 1.6; fill: none; }
.aperture .ap-ring-i { stroke: var(--t-faint); stroke-width: 1.6; fill: none; }
.aperture .ap-pupil  { fill: var(--clay); }
.aperture .ap-check  { stroke: var(--sage); stroke-width: 2.2; stroke-linecap: square; fill: none; opacity: 0; }
.aperture .ap-bars   { opacity: 0; }
.aperture .ap-bars rect { fill: var(--clay); transform-box: view-box; transform-origin: center; }

/* idle — aligned, desaturated, still */
.aperture[data-state="idle"] .ap-ring-o { stroke: var(--t-disabled); }
.aperture[data-state="idle"] .ap-ring-i { stroke: var(--divider-d); }
.aperture[data-state="idle"] .ap-pupil  { fill: var(--t-faint); }

/* attending — clay returns, pupil breathes slowly (waiting on you) */
.aperture[data-state="attending"] .ap-pupil { animation: ap-breathe 2.4s ease-in-out infinite; }

/* thinking / synthesising — counter-rotation, pupil contracting fast */
.aperture[data-state="thinking"] .ap-ring-o { animation: ap-spin-a 3.4s linear infinite; }
.aperture[data-state="thinking"] .ap-ring-i { animation: ap-spin-b 2.2s linear infinite; }
.aperture[data-state="thinking"] .ap-pupil  { animation: ap-breathe 1.1s ease-in-out infinite; }

/* listening (voice) — pupil becomes a level meter */
.aperture[data-state="listening"] .ap-pupil { opacity: 0; }
.aperture[data-state="listening"] .ap-bars  { opacity: 1; }
.aperture[data-state="listening"] .ap-bars rect:nth-child(1) { animation: ap-listen 1s ease-in-out infinite; }
.aperture[data-state="listening"] .ap-bars rect:nth-child(2) { animation: ap-listen 1s ease-in-out .18s infinite; }
.aperture[data-state="listening"] .ap-bars rect:nth-child(3) { animation: ap-listen 1s ease-in-out .36s infinite; }
.aperture[data-state="listening"] .ap-bars rect:nth-child(4) { fill: var(--t-faint); animation: ap-listen 1s ease-in-out .54s infinite; }

/* resolved — rings close, sage, no motion (completion / sign-off only) */
.aperture[data-state="resolved"] .ap-ring-o { stroke: var(--sage); stroke-dasharray: none; }
.aperture[data-state="resolved"] .ap-ring-i { stroke: var(--sage); stroke-dasharray: none; opacity: .35; }
.aperture[data-state="resolved"] .ap-pupil  { opacity: 0; }
.aperture[data-state="resolved"] .ap-check  { opacity: 1; }

/* ---------- wordmark ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 11px; }
.wordmark .name { font-family: var(--serif); font-size: 21px; line-height: 1; color: inherit; letter-spacing: -.01em; }
.wordmark .sub  { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--t-muted); }
.wordmark .div  { border-left: 1px solid var(--hairline); padding-left: 11px; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--ink); background: transparent;
  border: 1px solid var(--divider-d); border-radius: var(--r-ctrl);
  padding: 12px 22px; cursor: pointer; line-height: 1;
  transition: background var(--respond), border-color var(--respond), color var(--respond);
}
.btn:hover { background: var(--paper-200); }
.btn:disabled { opacity: .5; cursor: default; }
.btn--primary { color: #FFF3EC; background: var(--clay); border-color: var(--clay); }
.btn--primary:hover { background: var(--clay-600); border-color: var(--clay-600); }
.btn--quiet { border-color: var(--hairline); font-size: 13px; padding: 9px 14px; }
.btn--mono  { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); border-color: var(--hairline); padding: 9px 14px; }
.btn--link  { border: 0; background: none; padding: 0; color: var(--clay-600); font-weight: 500; font-size: 13px; }
.btn--voice { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-color: var(--hairline); }
.btn--voice svg { stroke: var(--t-muted); }

/* ---------- fields ---------- */
.field { display: grid; gap: 6px; }
.label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.input, textarea.input, select.input {
  font-family: var(--sans); font-size: 15px; color: var(--t-strong);
  background: var(--paper-000); border: 1px solid var(--divider-d); border-radius: var(--r-ctrl);
  padding: 11px 14px; width: 100%; transition: border-color var(--respond);
}
.input:focus { border-color: var(--clay); outline: none; box-shadow: 0 0 0 2px rgba(180,80,45,.14); }

/* ---------- chrome: topbar (ink) + rail ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 13px 22px; background: var(--ink); color: var(--on-ink);
}
.topbar .wordmark .name { color: var(--on-ink); }
.topbar .wordmark .div  { border-left-color: var(--ink-line); }
.topbar .meta { font-family: var(--mono); font-size: 11px; color: var(--t-faint); }
.topbar--paper { background: var(--paper-000); color: var(--ink); border-bottom: 1px solid var(--hairline); }
.topbar--paper .wordmark .name { color: var(--ink); }
.topbar--paper .wordmark .div  { border-left-color: var(--hairline); }

.rail { border-right: 1px solid var(--hairline); background: var(--paper-100); padding: var(--s5) 0; }
.rail-h { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-ghost); padding: 0 var(--s5) var(--s3); }
.rail-item { padding: 11px var(--s5); border-left: 2px solid transparent; cursor: pointer; }
.rail-item .n { font-size: 15px; color: var(--t-soft); }
.rail-item .m { font-family: var(--mono); font-size: 11px; color: var(--t-faint); margin-top: 2px; }
.rail-item[aria-current="true"] { border-left-color: var(--clay); background: var(--paper-000); }
.rail-item[aria-current="true"] .n { font-weight: 600; color: var(--t-strong); }

/* ---------- surfaces & structure ---------- */
.panel { background: var(--paper-000); border: 1px solid var(--divider-d); border-radius: var(--r-card); }
.panel--e1 { box-shadow: var(--e1); }
.panel--e2 { box-shadow: var(--e2); }
.hr { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* ---------- grid table (CSS grid, not <table>) ---------- */
.grid-table { width: 100%; }
.grid-table .gt-head,
.grid-table .gt-row { display: grid; align-items: center; }
.grid-table .gt-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-ghost); border-bottom: 1px solid var(--hairline);
}
.grid-table .gt-head > * { padding: 11px 12px; }
.grid-table .gt-row { border-bottom: 1px solid var(--hairline-2); }
.grid-table .gt-row > * { padding: 13px 12px; }
.grid-table .gt-row:last-child { border-bottom: 0; }

/* ---------- plain table (console lists) ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-ghost); text-align: left; font-weight: 400; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.table td { padding: 12px; border-bottom: 1px solid var(--hairline-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .mono, .table .t-muted { font-family: var(--mono); font-size: 12px; color: var(--t-faint); }

/* ---------- tag ---------- */
.tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); background: var(--paper-200); padding: 4px 8px; }
.tag--accent { color: var(--clay-600); background: var(--clay-050); }
.tag--sage { color: var(--sage); background: #EEF3EE; }

/* ---------- stats ---------- */
.stat { border: 1px solid var(--hairline); padding: 14px 16px; }
.stat .v { font-family: var(--mono); font-size: 24px; color: var(--t-strong); }
.stat .v[data-tone="warn"] { color: var(--amber); }
.stat .k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-faint); margin-top: 4px; }

/* ---------- status dots ---------- */
.status { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; color: var(--t-faint); }
.status[data-tone="done"]    { color: var(--sage); }
.status[data-tone="active"]  { color: var(--amber); }
.status[data-tone="idle"]    { color: var(--t-ghost); }

/* ---------- tabs ---------- */
.tabs { display: flex; border-bottom: 1px solid var(--hairline); }
.tab { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-faint); padding: 10px 16px; cursor: pointer; margin-bottom: -1px; border-bottom: 2px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; }
.tab[aria-selected="true"] { color: var(--t-strong); border-bottom-color: var(--clay); }

/* ---------- posture badge ---------- */
.posture-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }
.posture-badge .d { width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--sage); }
.posture-badge[data-posture="advisory"] { color: var(--amber); }
.posture-badge[data-posture="advisory"] .d { background: var(--amber); }

/* ---------- provenance chips ---------- */
.provenance-chip { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); background: var(--paper-200); padding: 6px 10px; }

/* ---------- empty state ---------- */
.empty { padding: var(--s8) var(--s6); text-align: center; }
.empty .ask { color: var(--t-soft); margin: var(--s4) auto 0; max-width: 40ch; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--on-ink); font-size: 14px; padding: 12px 18px; border-radius: var(--r-ctrl); box-shadow: var(--e2); animation: rise var(--settle) both; z-index: 50; }

/* ============================================================================
   CONVERSATION  —  the hero surface. No bubbles: S'cout is the page talking.
   ========================================================================== */
.convo { max-width: 860px; margin: 0 auto; }
.turn { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 16px; margin-bottom: 30px; animation: rise var(--settle) both; }
.turn--scout .gutter { padding-top: 7px; }
.turn--scout .say { font-family: var(--serif); font-weight: 300; font-size: 25px; line-height: 1.45; letter-spacing: -.005em; color: var(--ink); text-wrap: pretty; max-width: 40ch; }
.turn--you { align-items: start; }
.turn--you .who { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-ghost); text-align: right; padding-top: 12px; }
.turn--you .say { background: #FFFFFF; border: 1px solid var(--hairline); border-left: 2px solid var(--t-disabled); padding: 14px 18px; font-size: 16px; line-height: 1.6; color: var(--t-body); max-width: 56ch; }

/* thinking line — states what S'cout is doing, in its own voice */
.thinking-line { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 16px; align-items: center; margin-bottom: 30px; animation: rise var(--settle) both; }
.thinking-line .say { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--t-faint); }

/* finite progress — "Q4 of ~7" + hairline bar */
.progress-finite { display: flex; align-items: center; gap: 8px; }
.progress-finite .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }
.progress-finite .track { width: 74px; height: 2px; background: var(--hairline); position: relative; }
.progress-finite .fill { position: absolute; inset: 0 auto 0 0; background: var(--clay); transition: width var(--settle); }

/* composer */
.composer { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: end; background: var(--paper-000); border: 1px solid var(--divider-d); box-shadow: var(--e1); padding: 12px 12px 12px 18px; }
.composer .ta { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--t-body); background: none; border: 0; resize: none; padding: 6px 0; width: 100%; max-height: 160px; }
.composer .ta:focus { outline: none; }
.composer .caret { display: inline-block; width: 1px; height: 17px; background: var(--clay); vertical-align: -3px; margin-left: 2px; animation: caret 1.1s step-end infinite; }
.composer-note { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--t-faint); }

/* completion beat — aperture resolves, motion stops, sage appears once */
.beat--complete { margin: 44px 0 8px; padding: 32px 34px; background: var(--paper-000); border: 1px solid #D6DFD6; border-top: 2px solid var(--sage); animation: rise 480ms cubic-bezier(.16,.84,.32,1) both; }
.beat--complete .head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.beat--complete .head .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.beat--complete .msg { font-family: var(--serif); font-weight: 300; font-size: 27px; line-height: 1.4; color: var(--ink); max-width: 40ch; margin-bottom: 20px; }

/* ============================================================================
   ONBOARDING  —  ledger stepper + the validation gate
   ========================================================================== */
.ledger { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--hairline); }
.ledger .step { padding: 16px 18px; border-right: 1px solid var(--hairline-2); border-top: 2px solid var(--hairline); }
.ledger .step:last-child { border-right: 0; }
.ledger .step .n { font-family: var(--mono); font-size: 10px; margin-bottom: 5px; color: var(--t-ghost); }
.ledger .step .t { font-size: 14px; font-weight: 500; color: var(--t-ghost); }
.ledger .step .m { font-size: 12px; color: var(--t-disabled); margin-top: 3px; }
.ledger .step[data-state="done"] { border-top-color: var(--sage); }
.ledger .step[data-state="done"] .n { color: var(--sage); }
.ledger .step[data-state="done"] .t { color: var(--t-soft); }
.ledger .step[data-state="done"] .m { color: var(--t-faint); }
.ledger .step[data-state="current"] { border-top-color: var(--clay); background: var(--clay-050); }
.ledger .step[data-state="current"] .n { color: var(--clay); }
.ledger .step[data-state="current"] .t { color: var(--t-strong); font-weight: 600; }
.ledger .step[data-state="current"] .m { color: var(--clay-600); }

.playback { border-left: 2px solid var(--clay); padding-left: 22px; font-family: var(--serif); font-size: 20px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.playback p { margin: 0 0 16px; }
.playback p:last-child { margin: 0; }

.pillar-list { border: 1px solid var(--hairline); }
.pillar-list .pillar { padding: 15px 18px; border-bottom: 1px solid var(--hairline-2); display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.pillar-list .pillar:last-child { border-bottom: 0; }
.pillar-list .pillar .i { font-family: var(--mono); font-size: 11px; color: var(--clay); }
.pillar-list .pillar .name { display: block; font-size: 15px; font-weight: 600; color: var(--t-strong); }
.pillar-list .pillar .name[contenteditable] { outline: none; border-bottom: 1px dashed transparent; }
.pillar-list .pillar .name[contenteditable]:focus { border-bottom-color: var(--clay); }
.pillar-list .pillar .desc { display: block; font-size: 13px; line-height: 1.55; color: var(--t-muted); margin-top: 2px; }

/* the gate — the one thing on screen that must be dealt with */
.gate { padding: 26px 28px; background: var(--paper-000); border: 1px solid #E9C9B8; animation: gate 3.2s ease-in-out infinite; }
.gate .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--clay-600); margin-bottom: 8px; }
.gate--signed { background: #F4F7F3; border: 1px solid #D6DFD6; border-left: 2px solid var(--sage); animation: rise 480ms cubic-bezier(.16,.84,.32,1) both; }

.source-row { display: grid; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hairline-2); }
.choice { border: 1px solid var(--hairline); padding: 16px 18px; cursor: pointer; }
.choice[aria-pressed="true"] { border-color: var(--clay); background: var(--clay-050); }

/* ---------- utilities ---------- */
.stack { display: grid; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.gap2 { gap: var(--s2); } .gap3 { gap: var(--s3); } .gap4 { gap: var(--s4); } .gap5 { gap: var(--s5); }
.grow { flex: 1; min-width: 0; }
.err { color: var(--clay-600); font-size: 13px; }
.center-page { max-width: 1180px; margin: 0 auto; padding: 0 8vw; }

/* ── Deal picker (HubSpot search → pick) ─────────────────────────────── */
.deal-picker { position: relative; }
.deal-results { position: absolute; z-index: 20; left: 0; right: 0; margin-top: 2px; background: var(--paper-2, #FDFCFA); border: 1px solid var(--divider-d, #d9d3c8); box-shadow: 0 8px 24px rgba(23,24,26,.10); max-height: 260px; overflow-y: auto; }
.deal-results .opt { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--hairline, #ece7dd); }
.deal-results .opt:last-child { border-bottom: 0; }
.deal-results .opt:hover, .deal-results .opt[aria-selected="true"] { background: var(--clay-050, #f6ece7); }
.deal-results .opt .nm { font-size: 14px; color: var(--ink, #17181A); }
.deal-results .opt .meta { font-family: var(--mono); font-size: 11px; color: var(--t-muted, #6b6b6b); white-space: nowrap; }
.deal-results .note { padding: 9px 12px; font-size: 12px; color: var(--t-muted, #6b6b6b); }
.deal-chosen { display: none; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.deal-chosen .tag { background: var(--clay-050, #f6ece7); color: var(--clay-600, #B4502D); padding: 3px 8px; font-family: var(--mono); font-size: 11px; }
.deal-chosen .x { cursor: pointer; color: var(--t-muted, #6b6b6b); border: 0; background: none; font-size: 15px; line-height: 1; }