/* --- DealArena popup shell ---------------------------------------------------
   From design_handoff_prompt_modal. Two things live here:

     1. PROMPT MODE  — the one-question-at-a-time popup (DA.modal({mode:'prompt'})).
     2. LEDGER       — direction 1a, the restyle of the classic centred popup.

   WHY THIS FILE EXISTS AND NOT app-shell.css, WHICH IS WHERE THE .dam-* RULES
   ALREADY LIVE. On a redesigned (arena) page, app-shell.css is @imported into
   the `legacy` cascade layer by legacy-layer.css, and the LATER `arena-reset`
   layer declares

       [data-da-root] input, textarea, select { border:0; padding:0; background:none }

   A later layer beats an earlier one no matter the specificity, so nothing
   written in app-shell.css can put a border back on a modal input. This sheet
   is unlayered, which beats every layer, so it can. It is linked from
   base.html outside the chrome_mode branch (same as avatar.css) because these
   popups open on both the arena chrome and the legacy chrome.

   Colours come from the token set. Two notes on that:
     · The orange is --brand / --brand-2. There is no --accent in chrome.css;
       the handoff's `--accent` and its literal #d84c17 button-hover do not
       exist as tokens.
     · The card is a warm white one notch off --bg-1's pure #ffffff, which has
       no token at all, so --dam-card is defined below. It has to be redefined
       in all three dark selectors: app pages never set [data-theme], so dark
       arrives either as [data-da-theme="dark"] or, on "system", through
       prefers-color-scheme.

   Fonts are written out rather than var(--mono): that variable is only defined
   under .p-sauce, so `font-family: var(--mono)` is invalid everywhere else and
   silently falls back to the inherited face.
   -------------------------------------------------------------------------- */

.dam { --dam-card: #fffdfa; }
[data-theme="dark"] .dam,
[data-da-root][data-da-theme="dark"] .dam { --dam-card: var(--bg-1); }
@media (prefers-color-scheme: dark) {
  [data-da-root][data-da-theme="system"] .dam { --dam-card: var(--bg-1); }
}

/* === Ledger — the classic centred popup ===================================
   Direction 1a from "Popup Redesign". Quiet and roomy. Fields lose their boxes
   and become ruled lines, so a form reads as a list rather than a stack of
   widgets. No close x — escape is spelled out in the footer, which removes the
   one control people hit by accident. Accent appears at most twice: the eyebrow
   and the thing you should press.

   Every rule here is scoped to .dam so the global .field/.label/.input classes,
   which app-shell.css also uses on pages and drawers, are untouched. Both
   markup shapes in the wild are covered: the .field/.label/.input pattern and
   the bare <label>/<input> pattern.
   ========================================================================== */

/* One scrim for both popup kinds — the cold rgba(8,12,10,.55) + blur predates
   the warm palette and is the loudest thing left from the old theme. */
.dam-overlay {
  background: rgba(28,25,21,.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dam {
  background: var(--dam-card);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 26px 60px -22px rgba(28,25,21,.36);
}

/* --- head --- */
.dam .dam-head {
  padding: 26px 28px 0;
  border-bottom: 0;
  align-items: flex-start;
}
.dam .dam-eyebrow {
  /* app-shell.css asks for var(--mono), which is only defined under .p-sauce,
     so the eyebrow has never actually rendered in DM Mono anywhere. */
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
}
.dam .dam-head h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.022em;
  margin: 9px 0 0;
  color: var(--ink);
}
.dam .dam-head .dam-sub { font-size: 14px; color: var(--ink-3); margin-top: 6px; }
/* Escape is the documented dismissal and it is printed in the footer. */
.dam .dam-x { display: none; }

/* --- body --- */
.dam .dam-body { padding: 26px 28px 4px; gap: 20px; }
/* confirm/alert carry their whole message in the head, so the body is empty. */
.dam .dam-body:empty { display: none; }
.dam .dam-head:has(+ .dam-body:empty) { padding-bottom: 22px; }
.dam .dam-body .field-row { gap: 22px; }
.dam .dam-body .field { gap: 0; }
/* .da-row is how eleven call sites (database, prospect_profile, deal_profile,
   company_profile, quote-modal) put two fields side by side — but the class is
   not defined in ANY stylesheet, so those pairs have always stacked. It only
   ever appears inside a popup body, so it gets its definition here, matching
   .field-row. */
.dam .dam-body .da-row { display: flex; gap: 22px; align-items: flex-start; }
.dam .dam-body .da-row > * { flex: 1; min-width: 0; }

/* Labels: both the .label div (da-actions.js) and a bare <label> (every other
   call site — sequences, settings, prospect_profile, company_profile...).
   A label that WRAPS its control is a checkbox/radio row, not a field caption,
   so it keeps sentence case and the body face. */
.dam .dam-body .label,
.dam .dam-body label:not(:has(input)):not(:has(select)):not(:has(textarea)) {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.dam .dam-body .label .req { color: var(--brand); }
.dam .dam-body .label .hint,
.dam .dam-body label:not(:has(input)) span { letter-spacing: 0; text-transform: none; color: var(--ink-4); }

/* Ruled fields. The rule is 1px at rest and takes the accent at 1.5px on focus,
   which is the only place accent appears in the body. */
.dam .dam-body .input,
.dam .dam-body .textarea,
.dam .dam-body .select,
.dam .dam-body input:not([type="checkbox"]):not([type="radio"]),
.dam .dam-body textarea,
.dam .dam-body select {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--ink);
  padding: 9px 0;
}
.dam .dam-body .input:focus,
.dam .dam-body .textarea:focus,
.dam .dam-body .select:focus,
.dam .dam-body input:focus,
.dam .dam-body textarea:focus,
.dam .dam-body select:focus {
  outline: none;
  border-bottom: 1.5px solid var(--brand);
  box-shadow: none;
}
.dam .dam-body .input::placeholder,
.dam .dam-body .textarea::placeholder,
.dam .dam-body input::placeholder,
.dam .dam-body textarea::placeholder { color: var(--ink-4); }
.dam .dam-body .input.error,
.dam .dam-body .textarea.error,
.dam .dam-body .select.error { border-bottom-color: var(--warn); }
.dam .dam-body .textarea,
.dam .dam-body textarea { min-height: 64px; resize: vertical; }
/* main.css gives every input width:100% and arena-reset deliberately leaves
   width alone, so a checkbox in a popup has always stretched the full body
   width. It is a tick box; it does not get a rule or a column. */
.dam .dam-body input[type="checkbox"],
.dam .dam-body input[type="radio"] {
  width: auto;
  border-bottom: 0;
  padding: 0;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
/* The select keeps its own caret; the shared .select-wrap arrow sits over the
   rule rather than inside a box now. */
.dam .dam-body .select-wrap::after { right: 2px; color: var(--ink-4); }
.dam .dam-body .input-group .prefix { left: 0; }
.dam .dam-body .input-group .suffix { right: 0; }
.dam .dam-body .input-group .input.has-prefix { padding-left: 26px; }

/* --- footer --- */
.dam .dam-foot {
  padding: 15px 28px;
  gap: 12px;
  border-top: 1px solid var(--line);
  background: var(--dam-card);
}
.dam .dam-foot .left {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3);
}
/* Spell escape out. Only when the caller has not claimed the slot for its own
   copy — several already print their own key legend there. */
.dam .dam-foot .left:empty::before { content: 'esc to close'; }
.dam .dam-foot .left a { color: var(--brand); }
.dam .dam-foot .left a:hover { color: var(--brand-2); text-decoration: none; }

/* Cancel is text, not a button. One accent, one action. */
.dam .dam-foot .dam-cancel,
.dam .dam-foot .dam-cancel:hover {
  height: auto;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-2);
}
.dam .dam-foot .dam-cancel:hover { color: var(--ink); }
.dam .dam-foot .dam-submit {
  height: auto;
  padding: 10px 20px;
  border: 0;
  border-radius: 2px;
  background: var(--brand);
  color: #fffdfa;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
}
.dam .dam-foot .dam-submit:hover { background: var(--brand-2); }
.dam .dam-foot .dam-submit:disabled { opacity: .45; cursor: not-allowed; }

/* Destructive popups swap the accent for the warn token and say so twice —
   in the eyebrow and on the button. Opt in with `dangerous: true`. */
.dam.dam--danger .dam-eyebrow { color: var(--warn); }
.dam.dam--danger .dam-body .input:focus,
.dam.dam--danger .dam-body input:focus,
.dam.dam--danger .dam-body textarea:focus,
.dam.dam--danger .dam-body select:focus { border-bottom-color: var(--warn); }
.dam.dam--danger .dam-foot .dam-submit { background: var(--warn); }
.dam.dam--danger .dam-foot .dam-submit:hover { background: color-mix(in oklab, var(--warn) 82%, #000); }

/* === Prompt mode ==========================================================
   Declared AFTER Ledger deliberately: the two blocks collide at equal
   specificity in several places (.dam .dam-body against .dam--prompt .dam-body,
   .dam .dam-eyebrow against .dam--prompt .dam-eyebrow) and source order is the
   tie-break. Prompt has to win those.
   ========================================================================== */

/* Top-anchored, not centred. The card grows downward as fields are answered;
   a centred card would shift under the reader on every keystroke. */
.dam-overlay--prompt {
  background: rgba(28,25,21,.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  place-items: start center;
  padding: 90px 20px 20px;
}

.dam.dam--prompt {
  width: min(470px, 100%);
  max-width: min(470px, 100%);
  background: var(--dam-card);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  box-shadow: 0 30px 70px -24px rgba(28,25,21,.55);
  overflow: hidden;
  /* Head and footer are pinned and only the middle scrolls, so the primary
     action and the key legend stay reachable however long the sequence runs. */
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
}
.dam--prompt .dam-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.dam--prompt .dam-head--prompt,
.dam--prompt .dam-foot { flex: none; }

/* --- head bar. No close x: escape is documented in the footer instead. --- */
.dam--prompt .dam-head--prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
}
.dam--prompt .dam-eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
}
.dam--prompt .dam-count {
  margin-left: auto;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3);
}

/* --- answered stack. Each row jumps back to that step for editing. --- */
.dam--prompt .dam-answered {
  padding: 15px 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dam--prompt .dam-answered[hidden] { display: none; }
.dam-answer {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dam-answer:hover { opacity: .7; }
.dam-answer-label {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  width: 78px;
  flex: none;
}
.dam-answer-value { font-size: 14px; color: var(--ink-3); }
.dam-answer-mark { margin-left: auto; flex: none; color: var(--green); font-size: 12px; }

/* --- current field. The accent label is the whole "you are here" signal. --- */
.dam--prompt .dam-current { padding: 14px 20px 20px; }
.dam-plabel {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.dam-pinput {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 2px solid var(--brand);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  /* Oversized on purpose - one field gets to be the headline. */
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
  padding: 8px 0 10px;
}
.dam-pinput:focus { outline: none; }
.dam-pinput::placeholder { color: var(--ink-4); }

.dam-perror {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--warn);
  margin-top: 9px;
}
.dam-phint { font-size: 13px; color: var(--ink-4); margin-top: 9px; }
.dam-perror[hidden], .dam-phint[hidden] { display: none; }

/* --- suggestions. 1px gaps over a coloured background is how the app draws
       hairline-separated lists elsewhere. --- */
.dam-sugg {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.dam-sugg[hidden] { display: none; }
.dam-sugg-row {
  background: var(--dam-card);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.dam-sugg-row.is-on { background: var(--bg-2); }
.dam-sugg-key {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  width: 10px;
  flex: none;
  color: var(--ink-4);
}
.dam-sugg-row.is-on .dam-sugg-key { color: var(--brand); }
.dam-sugg-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dam-sugg-meta {
  margin-left: auto;
  flex: none;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* --- footers --- */
.dam--prompt .dam-foot--prompt,
.dam--prompt .dam-foot--full {
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  background: var(--dam-card);
}
.dam--prompt .dam-foot--prompt { padding: 11px 20px; gap: 16px; white-space: nowrap; }
/* The full-form footer wraps rather than running off the card. The design's own
   four items fit a 470px card on one line; a caller that also passes footerLeft
   ("+ save and add another" on Add Prospect) does not, and a clipped primary
   button is worse than a second row. */
.dam--prompt .dam-foot--full {
  padding: 12px 20px;
  gap: 14px;
  flex-wrap: wrap;
  row-gap: 10px;
}
.dam--prompt .dam-foot--full > * { white-space: nowrap; }
.dam-key {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ink-3);
}
.dam--prompt .dam-status-slot {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--green);
}
.dam-modelink {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--brand);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.dam-modelink:hover { color: var(--brand-2); }
.dam-to-full { margin-left: auto; }
/* footerLeft ("+ save and add another") rides in the full-form footer only:
   the prompt footer is the design's key legend and has no room for a fifth
   item on a 470px card. */
.dam--prompt .dam-foot--full .left {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ink-3);
}
.dam--prompt .dam-foot--full .left a { color: var(--brand); cursor: pointer; }
.dam--prompt .dam-foot--full .left a:hover { color: var(--brand-2); }
.dam-foot-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.dam-cancel-link {
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.dam-cancel-link:hover { color: var(--ink); }
.dam-primary {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: #fffdfa;
  background: var(--brand);
  border: 0;
  border-radius: 2px;
  padding: 10px 20px;
  cursor: pointer;
}
.dam-primary:hover { background: var(--brand-2); }
.dam-primary:disabled { opacity: .45; cursor: not-allowed; }

/* --- which half renders --- */
.dam--prompt.is-prompt .dam-full-title,
.dam--prompt.is-prompt .dam-body,
.dam--prompt.is-prompt .dam-foot--full { display: none; }
.dam--prompt.is-full .dam-prompt,
.dam--prompt.is-full .dam-foot--prompt { display: none; }

/* --- full-form fallback. Same card, same head bar. --- */
.dam--prompt .dam-full-title {
  margin: 0;
  padding: 18px 20px 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.dam--prompt .dam-body {
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  /* .dam-scroll owns the scrolling here, not the body. */
  overflow: visible;
  flex: none;
}
/* Generated fields, for a prompt caller that passes no bodyHtml of its own.
   Note the 1px rule here against the 2px accent rule on the prompt input. */
.dam-ffield { display: flex; flex-direction: column; }
.dam-flabel {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dam-finput {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--ink);
  padding: 8px 0;
}
.dam-finput:focus { outline: none; border-bottom-color: var(--brand); }

/* --- responsive. The 22px prompt input is the one thing that must not shrink. */
@media (max-width: 520px) {
  .dam-overlay--prompt { padding: 24px 20px 20px; }
  .dam.dam--prompt {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 44px);
  }
  .dam-answer-label { width: 64px; }
}

/* --- Make a call (the Go live row; chrome.js makeCall) ----------------------
   The picker's search box and result rows. Unlayered here for the same reason
   the rest of this sheet is: arena-reset strips the border off every input on
   an arena page, and only an unlayered rule can put one back. The rows are
   <button>s so the modal's focus trap and Tab order reach them. */
.dam .da-mc-q {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--ink);
  padding: 8px 0;
}
.dam .da-mc-q:focus { outline: none; border-bottom-color: var(--brand); }
.dam .da-mc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow: auto;
  margin: 0 -8px;
}
.dam .da-mc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: 9px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.dam .da-mc-row:hover,
.dam .da-mc-row:focus-visible { background: var(--bg-2); outline: none; }
.dam .da-mc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dam .da-mc-meta { color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dam .da-mc-phone {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.dam .da-mc-row.is-dim .da-mc-phone { color: var(--ink-3); font-style: italic; }
.dam .da-mc-empty { padding: 14px 8px; color: var(--ink-3); font-size: 13px; }