/* Leads inbox (B-040), second menu (shared, components/second-menu.js), lead panel (B-042) and the bits
   of the add-lead form (B-041). Colours only via tokens.css. */

/* ---- Second menu: 240px grey column, collapses with [ / ] or the top-bar button ------------------- */
.second-menu {
  flex: none; width: 240px; min-height: 0; overflow: hidden auto; background: var(--bg-app);
  border-right: 1px solid var(--border);
  transition: width var(--t-med) var(--ease), visibility 0s linear 0s;
}
.second-menu.is-collapsed {
  width: 0; visibility: hidden; border-right-width: 0;
  transition: width var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.second-menu-list { display: flex; flex-direction: column; gap: var(--sp-1); width: 240px; padding: var(--sp-4); }
.second-menu-caption {
  margin: var(--sp-6) var(--sp-4) var(--sp-3); color: var(--text-2); font-size: var(--fs-xs); line-height: var(--lh-sm);
  font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase;
}
.second-menu-item {
  display: flex; align-items: center; gap: var(--sp-5); height: 40px; padding: 0 var(--sp-5); border-radius: var(--r-md);
  color: var(--text); font-weight: var(--fw-regular); transition: background var(--t-fast) var(--ease);
}
.second-menu-item:hover { background: var(--bg-hover); text-decoration: none; }
.second-menu-item:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.second-menu-item.is-active { background: var(--bg-selected); color: var(--link); font-weight: var(--fw-semibold); }
.second-menu-item.is-soon { color: var(--text-2); }
.second-menu-ic, .second-menu-ic svg { width: 20px; height: 20px; display: block; flex: none; }
.second-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.second-menu-soon {
  flex: none; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--menu-pill-bg);
  color: var(--text-inverse); font-size: 10px; line-height: 16px; font-weight: var(--fw-semibold); letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Top-bar button left of the breadcrumb. */
.second-menu-toggle {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: calc(-1 * var(--sp-3));
  padding: 0; border: 0; border-radius: var(--r-md); background: none; color: var(--text-2); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.second-menu-toggle:hover { background: var(--bg-hover); color: var(--text); }
.second-menu-toggle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.second-menu-toggle .ic, .second-menu-toggle svg { width: 20px; height: 20px; display: block; }
.second-menu-toggle .ic { transition: transform var(--t-med) var(--ease); }
.second-menu-toggle.is-collapsed .ic { transform: scaleX(-1); }

.leads-host { height: 100%; }

/* ---- Inbox page ---------------------------------------------------------------------------------- */
.leads-page { position: relative; display: flex; height: 100%; min-height: 0; overflow: hidden; background: var(--bg-surface); }
.leads-content {
  flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; padding: var(--sp-6) var(--sp-6) 0;
}
.leads-toolbar { flex: none; min-height: var(--control-h); margin-bottom: var(--sp-5); }
.leads-toolbar .split-main { font-weight: var(--fw-semibold); }
.lead-count { color: var(--text); font-weight: var(--fw-semibold); white-space: nowrap; }
.lead-count:empty { display: none; }
.leads-toolbar .toolbar-right { flex-wrap: nowrap; }
.leads-content .list-grid { margin: 0 calc(-1 * var(--sp-6)); }

/* Rows open the lead: pointer, and the open lead's row stays light blue. */
.list-row.is-clickable { cursor: pointer; }
.list-body .list-row.is-active, .list-body .list-row.is-active:hover { background: var(--bg-selected); }
.lead-title-cell { display: inline-flex; align-items: center; gap: var(--sp-4); min-width: 0; max-width: 100%; }
.lead-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-title-cell.is-unseen { font-weight: var(--fw-semibold); }
.lead-new-pill {
  flex: none; padding: 0 var(--sp-3); border-radius: var(--r-sm); background: var(--new-pill-bg); color: var(--text-inverse);
  font-size: 10px; line-height: 16px; font-weight: var(--fw-semibold); letter-spacing: 0.03em; text-transform: uppercase;
}
.lead-no-activity { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--yellow-text); }
.lead-warn-ic, .lead-warn-ic svg { width: 14px; height: 14px; display: block; color: var(--yellow-icon); flex: none; }
.lead-next { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; color: var(--text); }
.lead-next-ic, .lead-next-ic svg { width: 14px; height: 14px; display: block; flex: none; color: var(--act-planned); }
.lead-next.is-today .lead-next-ic { color: var(--act-today); }
.lead-next.is-overdue, .lead-next.is-overdue .lead-next-ic { color: var(--act-overdue); }
.lead-next-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-pills { display: inline-flex; gap: var(--sp-2); min-width: 0; overflow: hidden; }
.lead-pills .field-label-pill { flex: none; }

/* Empty state: no table head, a centred call to action. */
.leads-page.is-empty .list-head { display: none; }
.leads-page.is-empty .list-grid { border-top: 0; }
.leads-empty { padding: var(--sp-10) var(--sp-6); text-align: center; }
.leads-empty-title { font-size: var(--fs-xl); line-height: 28px; font-weight: var(--fw-semibold); }
.leads-empty .list-empty-text { margin: var(--sp-4) auto 0; max-width: 520px; }
.leads-empty-actions { display: flex; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-7); }
.leads-empty-actions .btn .ic, .leads-empty-actions .btn svg { width: 16px; height: 16px; display: block; }
.btn.is-soon { color: var(--text-muted); cursor: default; box-shadow: none; }
.btn.is-soon:hover { background: var(--bg-surface); }

/* ---- Lead panel: slides over the list from the right, a floating strip on its left -------------- */
.lead-panel {
  position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; left: 56px; display: flex;
  background: var(--bg-surface); box-shadow: var(--shadow-modal);
  transform: translateX(100%); transition: transform var(--t-slow) var(--ease-enter);
}
.lead-panel.is-open { transform: none; }
.lead-panel.is-closing { transform: translateX(100%); transition: transform 200ms var(--ease-exit); }
.lead-strip {
  position: absolute; top: var(--sp-4); left: -48px; display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-1); width: 40px; padding: var(--sp-2) 0; border-radius: var(--r-md); background: var(--bg-surface);
  box-shadow: var(--shadow-floating);
}
.lead-strip-line { width: 24px; height: 1px; margin: var(--sp-1) 0; background: var(--border); }
.lead-strip-btn {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text); cursor: pointer; transition: background var(--t-fast) var(--ease);
}
.lead-strip-btn:hover:not(:disabled) { background: var(--bg-hover); }
.lead-strip-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.lead-strip-btn:disabled { color: var(--text-muted); cursor: default; }
.lead-strip-btn .ic, .lead-strip-btn svg { width: 16px; height: 16px; display: block; }

.lead-panel-body { flex: 1; min-width: 0; display: flex; min-height: 0; }
.lead-layout { flex: 1; min-width: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 0; }
/* Build 8 (G1): a colleague's status change held while I type: the strip sits above both columns. */
.lead-panel-body.has-status-line { flex-direction: column; }
.lead-panel-body > .live-status-line { flex: none; margin: var(--sp-4) var(--sp-6) 0; }
.lead-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.lead-side-head {
  flex: none; display: flex; align-items: center; gap: var(--sp-4); min-height: 56px; padding: var(--sp-4) var(--sp-6);
}
.lead-title-wrap { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); }
.lead-title {
  display: block; max-width: 100%; margin-left: calc(-1 * var(--sp-3)); padding: var(--sp-1) var(--sp-3);
  border: 1px solid transparent; border-radius: var(--r-md); background: none; color: var(--text); font: inherit;
  text-align: left; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease);
}
.lead-title:hover { border-color: var(--border-strong); }
.lead-title:focus-visible { outline: none; border-color: var(--border-focus); }
.lead-title-input.input { height: 32px; margin-left: calc(-1 * var(--sp-3)); padding: 0 var(--sp-3); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.lead-status-pill {
  flex: none; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--chip-bg); color: var(--text-2);
  font-size: var(--fs-xs); line-height: 18px; font-weight: var(--fw-semibold);
}
.lead-side-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--sp-5) var(--sp-6); }
.lead-side-foot {
  flex: none; display: flex; align-items: center; gap: var(--sp-4); height: 56px; padding: 0 var(--sp-6);
  border-top: 1px solid var(--border); background: var(--bg-surface);
}
.lead-foot-spacer { flex: 1; }
.lead-foot-btn.btn.is-icon { width: var(--control-h); padding: 0; }
.lead-foot-btn .ic, .lead-foot-btn svg { width: 16px; height: 16px; display: block; }
.lead-convert.btn[aria-disabled="true"] {
  background: var(--green-disabled); border-color: var(--green-disabled); cursor: default;
}

/* Field rows in the panel: no filter box, sections captioned 11px uppercase grey. */
.lead-side .fields-filter { display: none; }
.lead-side .fields-section { border-bottom: 0; padding-bottom: var(--sp-4); }
.lead-side .fields-section-head { height: 36px; flex-direction: row-reverse; justify-content: space-between; }
.lead-side .fields-section-title {
  font-size: var(--fs-xs); line-height: var(--lh-sm); color: var(--text-2); letter-spacing: 0.04em; text-transform: uppercase;
}
/* UX-064 r35: with the '...' the caption sits left (11px/600 uppercase) and leaves 36px on the right for it. */
.lead-side .fields-section.has-more > .fields-section-head {
  flex-direction: row; justify-content: flex-start; padding-right: 36px;
}
.lead-side .fields-section.has-more > .fields-section-head .fields-section-title {
  min-width: 0; font-size: 11px; font-weight: var(--fw-semibold); text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* '+ Add <field>' (custom fields): one line, left-aligned, cut with '…', the '+' inline. */
.lead-side .field-add {
  display: block; max-width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lead-side .field-add .ic, .lead-side .field-add svg { display: inline-block; vertical-align: -2px; margin-right: var(--sp-2); }
/* Empty SUMMARY rows: grey icon + grey 14px name; blue only on hover. */
.lead-sum-empty { color: var(--text-muted); font-size: var(--fs-md); transition: color var(--t-fast) var(--ease); }
.lead-side .field-row:has(.lead-sum-empty) .field-ic { color: var(--text-muted); transition: color var(--t-fast) var(--ease); }
.lead-side .field-row:hover .lead-sum-empty, .lead-side .field-row:hover:has(.lead-sum-empty) .field-ic { color: var(--link); }
.lead-side .field-row { grid-template-columns: 112px minmax(0, 1fr) 28px; }
.lead-side .field-row.is-readonly { grid-template-columns: 112px minmax(0, 1fr); }
.lead-side .field-row.is-compact { grid-template-columns: 16px minmax(0, 1fr) 28px; }

/* Web form answers under DETAILS. */
.lead-form { margin: var(--sp-4) 0 0; padding: var(--sp-5) var(--sp-5) var(--sp-4); border-radius: var(--r-md); background: var(--bg-app); }
.lead-form-caption { margin-bottom: var(--sp-3); color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.lead-form-list { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.lead-form-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-4); }
.lead-form-key { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-md); }
.lead-form-value { margin: 0; min-width: 0; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-form-value.is-blank { color: var(--text-muted); }   /* UX-170: Message left blank */

/* Right column: composer, Focus with the quick scheduler, History. */
.lead-main { min-height: 0; overflow: auto; padding: var(--sp-6) var(--sp-7) var(--sp-8); background: var(--bg-surface); }
.lead-composer-slot .composer { box-shadow: var(--shadow-raised); }
.lead-timeline { margin-top: var(--sp-7); }
.composer-tab.is-disabled, .composer-tab.is-disabled:hover {
  color: var(--text-muted); border-bottom-color: transparent; background: none; cursor: default;
}

.lead-layout.is-loading .lead-side-head, .lead-layout.is-loading .lead-side-scroll { padding: var(--sp-6); }
.lead-layout.is-loading .lead-main { padding: var(--sp-7); }
.lead-missing { margin: auto; padding: var(--sp-10); text-align: center; }
.lead-missing-title { font-size: var(--fs-xl); line-height: 28px; font-weight: var(--fw-semibold); }
.lead-missing-text { margin-top: var(--sp-3); color: var(--text-2); }

/* ---- Add lead form (deal-form.js, lead mode) ----------------------------------------------------- */
.deal-labels-trigger .select-label { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.deal-labels-trigger .field-label-pill { flex: none; }

/* ---- Convert to deal (deal-form.js convert mode, B-043) ---------------------------------------------- */
/* UX-064: converted lead head = full title (wraps, never cut), then a row with the pill and 'Go to deal'. */
.lead-side-head.is-converted { flex-direction: column; align-items: stretch; gap: var(--sp-3); padding-block: var(--sp-5) var(--sp-4); }
.lead-side-head.is-converted .lead-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.lead-head-status { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.lead-status-pill.is-converted { background: var(--bg-info); color: var(--link); line-height: 20px; height: 20px; }
.lead-head-status .lead-status-pill { box-sizing: border-box; }
.lead-foot-go.btn { text-decoration: none; }
.lead-foot-go.btn:hover { text-decoration: none; }
/* '...' on each field section caption; the caption keeps toggling, the chevron goes. */
.lead-side .fields-section.has-more { position: relative; }
.lead-side .fields-section.has-more .fields-section-caret { display: none; }
.lead-section-more {
  position: absolute; top: 4px; right: 0; /* centred on the 36px head */ width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-md); background: none; color: var(--text-2); cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.lead-section-more:hover, .lead-section-more[aria-expanded="true"] { background: var(--bg-hover); color: var(--text); }
.lead-section-more:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.lead-section-more .ic, .lead-section-more svg { width: 16px; height: 16px; display: block; }
/* Short quick scheduler in the lead panel (In 1h / In 3h / Tomorrow / Next week / + Other). */
.lead-main .quick-sched.is-short .quick-sched-chip {
  height: 28px; padding: 0 var(--sp-4); border-radius: var(--r-sm); font-size: calc(var(--fs-sm) + 1px); font-weight: var(--fw-semibold);
}
.lead-main .quick-sched.is-short .quick-sched-other { border-color: transparent; background: none; }
.lead-main .quick-sched.is-short .quick-sched-split > .quick-sched-chip:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lead-main .quick-sched.is-short .quick-sched-split > .quick-sched-time { padding: 0 var(--sp-2); border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* UX-064 r35: the card sits under the focus icon gutter (40px circle + 16px gap + 20px) and is only as wide
   as its contents. */
.lead-main .quick-sched.is-short {
  box-sizing: border-box; width: fit-content; max-width: min(400px, calc(100% - 76px)); margin-left: 76px;
}
.lead-main .quick-sched.is-short .quick-sched-other:hover { background: var(--bg-hover); color: var(--link); }
/* BUG-106: a converted lead links on to its deal and keeps History only. */
.lead-main.is-converted [data-testid=tl-schedule] { display: none; }
.convert-labels { display: flex; flex-direction: column; gap: var(--sp-4); }
.convert-label-pills.select-trigger { cursor: default; min-height: var(--control-h); height: auto; padding-block: var(--sp-2); }
.convert-label-pills .select-label { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.convert-copy-box {
  display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--blue-bright); border-radius: var(--r-md); background: var(--bg-info);
}
.convert-copy-box .switch { flex: none; margin-top: 2px; }
.convert-copy-title { font-weight: var(--fw-semibold); color: var(--text); }
.convert-copy-sub { margin-top: var(--sp-1); color: var(--text-2); font-size: var(--fs-sm); }
.deal-form.is-convert .lookup.is-disabled { background: var(--bg-app); }
.convert-open.confirm { width: min(400px, calc(100vw - 32px)); }
.tl-lead-link { margin-left: var(--sp-4); font-weight: var(--fw-regular); }
.convert-remember.switch-wrap { margin-top: var(--sp-5); color: var(--text); font-weight: var(--fw-regular); }

@media (max-width: 1100px) {
  .lead-layout { grid-template-columns: 280px minmax(0, 1fr); }
}

/* The bulk owner menu's 'No active users' line (the old label filter's popover went in Build Q). */
.lead-lf-empty { padding: var(--sp-4) var(--sp-5); color: var(--text-2); font-size: var(--fs-sm); }
.lead-lf-empty[hidden] { display: none; }

/* ---- Build Q: sections by priority (components/lead-sections.js; leadsprio-design.md 2) -------------------
   Coloured bands, not coloured rows: each section is a block with a 40px band (4px left bar in its colour, a
   light tint), the rows keep a 3px edge in that colour on their first cell, 12px of app grey between blocks.
   Tints are colour-mixes of tokens and text is always --text / --text-2, so a dark theme only swaps tokens. */
.lead-filter-slot, .lead-layout-slot { display: inline-flex; }
.lead-filter-slot:empty, .lead-layout-slot:empty { display: none; }
.leads-page.is-empty .list-body { display: none; }
.lead-sec { --sec: var(--sec-neutral); display: flex; flex-direction: column; }
.list-body:has(> .lead-sec) { background: var(--bg-app); }
.lead-sec + .lead-sec { margin-top: var(--sec-gap); }
.lead-sec.sec-new { --sec: var(--sec-new); }
.lead-sec.sec-hot { --sec: var(--sec-hot); }
.lead-sec.sec-medium { --sec: var(--sec-medium); }
.lead-sec.sec-low { --sec: var(--sec-low); }
.lead-sec.sec-unsure { --sec: var(--sec-unsure); }
.lead-sec.sec-notgood { --sec: var(--sec-notgood); }
/* Low: the Low pill's blue, toned down to a blue-grey band. Not good (really bad / spam): the darkest, most muted
   block, at the bottom and collapsed by default. */
.lead-sec.sec-low > .lead-sec-band { background: color-mix(in srgb, var(--sec) 7%, var(--bg-app)); }
.lead-sec.sec-notgood > .lead-sec-band { background: color-mix(in srgb, var(--sec) 14%, var(--bg-app)); }
.lead-sec.sec-notgood button.lead-sec-band:hover { background: color-mix(in srgb, var(--sec) 20%, var(--bg-app)); }
.lead-sec.sec-notgood .lead-sec-name { color: var(--text-2); font-weight: var(--fw-regular); }
.lead-sec.sec-notgood > .list-row { opacity: .85; }
.lead-sec-band {
  position: sticky; top: var(--control-h); z-index: 1; display: flex; align-items: center; width: 100%;
  height: var(--sec-band-h); padding: 0; border: 0; border-bottom: 1px solid var(--grid-line);
  border-radius: var(--r-sm) var(--r-sm) 0 0; box-shadow: inset 4px 0 0 var(--sec);
  background: color-mix(in srgb, var(--sec) 8%, var(--bg-surface)); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.lead-sec.is-new > .lead-sec-band { background: color-mix(in srgb, var(--sec) 12%, var(--bg-surface)); }
button.lead-sec-band:hover { background: color-mix(in srgb, var(--sec) 14%, var(--bg-surface)); }
button.lead-sec-band:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.lead-sec-band.is-empty { height: var(--sec-band-empty-h); cursor: default; }
/* The label stays on screen while the table scrolls sideways (phone). */
.lead-sec-label {
  position: sticky; left: 0; display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0;
  padding: 0 var(--sp-6) 0 var(--sp-6); font-size: var(--fs-md); line-height: var(--lh-md); white-space: nowrap;
}
.lead-sec-chev, .lead-sec-chev svg { width: 16px; height: 16px; display: block; flex: none; color: var(--text-2);
  transition: transform var(--t-fast) var(--ease); }
.lead-sec-chev.is-closed { transform: rotate(-90deg); }
.lead-sec-ic, .lead-sec-ic svg { width: 16px; height: 16px; display: block; flex: none; color: var(--sec); }
.lead-sec-av { flex: none; }
.lead-sec-name { font-weight: var(--fw-semibold); color: var(--text); }
.lead-sec.is-new .lead-sec-name { font-size: var(--fs-lg); }
.lead-sec-dot { color: var(--text-2); }
.lead-sec-count { color: var(--text-2); font-variant-numeric: tabular-nums; }
.lead-sec-count.is-pill {
  min-width: 20px; height: 20px; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--sec-new);
  color: var(--text-inverse); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 20px;
  text-align: center;
}
.lead-sec-band.is-empty .lead-sec-count, .lead-sec-band.is-empty .lead-sec-name { color: var(--text-muted); }
.lead-sec-band.is-empty .lead-sec-name { font-weight: var(--fw-regular); }
.lead-sec.is-new .lead-sec-band.is-empty .lead-sec-name { font-size: var(--fs-md); }
.lead-sec-caught { margin-left: var(--sp-5); color: var(--text-muted); font-size: var(--fs-sm); }
/* Each row's first cell carries the section's colour edge (no row tint). */
.lead-sec > .list-row > .list-check-cell { box-shadow: inset 3px 0 0 var(--sec); }
.lead-sec-more-row {
  display: flex; align-items: center; justify-content: center; height: 32px; border-bottom: 1px solid var(--grid-line);
  box-shadow: inset 3px 0 0 var(--sec); background: var(--bg-surface);
}
.lead-sec-more-row .link-btn { position: sticky; left: 50%; margin: 0; font-weight: var(--fw-semibold); }
.lead-sec-hidden {
  position: sticky; left: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sec-gap); padding: var(--sp-4) var(--sp-6); color: var(--text-2); font-size: var(--fs-sm);
}
.lead-sec-hidden .link-btn { margin: 0; font-size: var(--fs-sm); }
.lead-sec-hidden-cap { font-weight: var(--fw-semibold); }

/* Case type column (Hamid 2026-10-17): the text, the 'AI' mark when it is the AI's, muted when only the web form
   gave it. */
.lead-case { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.lead-case-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-case.is-form { color: var(--text-muted); }
/* Quality column: the shared field pill, '–' when none. */
.lead-quality-none { color: var(--text-muted); }
.lead-quality-pill { max-width: 100%; }
/* Colour-coded quality (Hamid 2026-11-03: "the same colouring system: red, yellow, and low blue"): a person's rating
   is a filled pill in its colour; the AI's guess (below) is a lighter, dashed version of the same colour. */
.lead-quality-pill.quality-hot { --q: var(--quality-hot); }
.lead-quality-pill.quality-medium { --q: var(--quality-medium); }
.lead-quality-pill.quality-low { --q: var(--quality-low); }
.lead-quality-pill.quality-unsure { --q: var(--quality-unsure); }
.lead-quality-pill.quality-not_good { --q: var(--quality-not-good); }
.lead-quality-pill[class*="quality-"] {
  background: color-mix(in srgb, var(--q) 24%, var(--bg-surface)); border: 1px solid color-mix(in srgb, var(--q) 60%, var(--bg-surface));
  color: color-mix(in srgb, var(--q) 45%, var(--text)); font-weight: var(--fw-semibold);
}
/* A lead the AI rates Hot, not checked yet: a light red row so it stands out in New. */
.list-row.is-ai-hot { background: color-mix(in srgb, var(--quality-hot) 7%, var(--bg-surface)); }
.list-row.is-ai-hot:hover { background: color-mix(in srgb, var(--quality-hot) 11%, var(--bg-surface)); }
/* AI-QUICK-RATE (Hamid 2026-11-03): the AI's first rating, not checked yet: dashed, no fill, a small spark; then ✓. */
.lead-quality-guess { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; max-width: 100%; }
.lead-quality-pill.is-guess {
  min-width: 0; background: color-mix(in srgb, var(--q) 9%, var(--bg-surface));
  border: 1px dashed color-mix(in srgb, var(--q) 65%, var(--bg-surface));
  color: color-mix(in srgb, var(--q) 55%, var(--text-2)); font-weight: var(--fw-medium, 500);
}
.lead-guess-spark { margin-right: 3px; font-size: 10px; }
.lead-quality-approve { flex: none; width: 24px; height: 24px; color: var(--text-muted); }
.lead-quality-approve:hover, .lead-quality-approve:focus-visible { color: var(--green, var(--blue)); background: var(--bg-hover); }
/* User-experience check 8: a quality the AI set and no person has checked yet. */
.lead-quality-ai {
  /* Leftovers 2026-10-17: a little easier to spot (11px, accent blue on a pale blue), still calm. */
  flex: none; margin-left: var(--sp-2); padding: 0 var(--sp-2); border: 1px solid var(--border-focus);
  border-radius: var(--r-sm); background: var(--bg-info); color: var(--blue); font-size: 11px; line-height: 15px;
  font-weight: var(--fw-semibold); letter-spacing: 0.03em;
}

/* The toast's optional "Why the change? I'll learn from this" line (leftovers 2026-10-17). */
.lead-why-cap { flex: none; font-size: var(--fs-sm); opacity: 0.85; }
.toast .lead-why-input { flex: 1; min-width: 0; height: 28px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: var(--text-inverse);
  font: inherit; font-size: var(--fs-sm); }
.toast .lead-why-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.toast .lead-why-input:focus { outline: none; border-color: var(--blue-toast-link); }

/* 'Move back to New' reason form (row menu / bulk bar; review fix round 2). */
.lead-back-menu { width: min(320px, calc(100vw - 32px)); padding: var(--sp-5); }
.lead-back-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.lead-back-title { font-weight: var(--fw-semibold); color: var(--text); }
.lead-back-help { color: var(--text-2); font-size: var(--fs-sm); }
.lead-back-why { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; border: 0; }
.lead-back-cap { padding: 0; margin-bottom: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); }
.lead-back-choice { display: flex; align-items: center; gap: var(--sp-3); min-height: 28px; color: var(--text); cursor: pointer; }
.lead-back-words.input { width: 100%; height: var(--control-h); }
.lead-back-actions { display: flex; justify-content: flex-end; gap: var(--sp-4); }

/* Waiting chip in New's Title cells: grey under 1 business hour, amber from 1 hour, red from 1 business day. */
.lead-wait {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; height: 20px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill); background: var(--chip-bg); color: var(--text-2); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); line-height: 20px;
}
.lead-wait.is-amber { background: var(--wait-amber-bg); color: var(--wait-amber); }
.lead-wait.is-red { background: var(--wait-red-bg); color: var(--wait-red); }
.lead-wait-ic, .lead-wait-ic svg { width: 12px; height: 12px; display: block; flex: none; }
/* LT-DEC-4: New lead waiting past the archive setting's N days. */
.lead-overdue {
  display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill); background: var(--wait-red); color: var(--text-inverse); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); line-height: 20px;
}

/* Phone width (design 7; review fix round 2; UX-172): the second menu starts collapsed (leads.js) and drops down over
   the top of the list from the button above the toolbar (lead-views.css), so the list keeps the full width beside the
   app rail; the toolbar is two lines (actions; count, Filter, Sections); bands stack and the table scrolls sideways
   inside list-scroll only, band labels pinned left. */
@media (max-width: 639px) {
  .leads-page > .second-menu {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5; width: auto; max-height: 78%;
    border-right: 0; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-popover);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear 0s;
  }
  .leads-page > .second-menu.is-collapsed {
    width: auto; opacity: 0; transform: translateY(-8px); border-bottom-width: 0;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
  }
  .leads-content { padding: var(--sp-5) var(--sp-6) 0; }
  .leads-toolbar.toolbar-row { flex-wrap: wrap; row-gap: var(--sp-4); }
  .leads-toolbar .toolbar-left { flex: 1 1 100%; flex-wrap: wrap; }
  .leads-toolbar .toolbar-right { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; }
  .leads-bulk-bar .toolbar-left { flex-wrap: wrap; row-gap: var(--sp-3); }
  .lead-sec-label { padding: 0 var(--sp-5); }
}

/* ---- Bulk bar (B-077; UX-137 sprint P): replaces the toolbar while rows are ticked --------------- */
.leads-bulk-bar { min-height: 40px; }
.leads-bulk-bar .toolbar-left { flex-wrap: nowrap; align-items: center; }
.leads-bulk-bar .toolbar-left > * { align-self: center; }
.leads-bulk-bar .list-bulk-count { line-height: var(--control-h); }
.leads-bulk-bar.is-busy .tool-btn { pointer-events: none; opacity: .6; }
.icon-btn.leads-bulk-clear { width: var(--control-h); height: var(--control-h); flex: none; border-radius: var(--r-md); color: var(--text-2); }
.icon-btn.leads-bulk-clear svg { width: 16px; height: 16px; }
.leads-bulk-owner-menu { width: 240px; display: flex; flex-direction: column; }
.leads-bulk-owner-find { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.leads-bulk-owner-search.input { width: 100%; height: var(--control-h); }
.leads-bulk-owner-list { max-height: 320px; overflow-y: auto; }
.leads-bulk-owner-row.menu-item { min-height: var(--control-h); gap: var(--sp-4); font-weight: var(--fw-regular); }
.leads-bulk-owner-row[hidden] { display: none; }
.leads-bulk-owner-av { flex: none; }
.leads-bulk-owner-empty { padding: var(--sp-3) var(--sp-5); color: var(--text-2); font-size: var(--fs-sm); }
.leads-bulk-owner-empty[hidden] { display: none; }

/* ---- Archived view (UX-139): titles read as archived, calm but not faint (--text-2 is 5.6:1 on white) ---- */
.leads-page.is-archived .lead-title-cell,
.leads-page.is-archived .lead-title-cell.is-unseen { color: var(--text-2); font-size: 13px; font-weight: var(--fw-regular); }
@media (prefers-reduced-motion: reduce) { .lead-sec-chev, .lead-sec-chev svg { transition: none; } }

/* Lead panel web form split (Hamid 2026-10-15): intake's answers on top, marketing folded at the bottom. */
.lead-form-slot > .lead-form { margin: var(--sp-4) 0 var(--sp-5); }
.lead-form-row.is-wrap .lead-form-value { white-space: pre-wrap; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.lead-marketing { margin-top: var(--sp-6); padding: var(--sp-3) var(--sp-5); }
.lead-marketing-toggle {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) 0; border: 0; background: none;
  color: var(--text-2); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em;
  text-transform: uppercase; cursor: pointer; text-align: left;
}
.lead-marketing-toggle:hover { color: var(--text); }
.lead-marketing .lead-form-list { margin-top: var(--sp-3); padding-bottom: var(--sp-2); }
.lead-marketing-caret { width: 12px; }
.has-form-contact [data-testid=field-row-person_phone],
.has-form-contact [data-testid=field-row-person_email] { display: none; }

/* "Do we want more leads like this?" (Hamid 2026-10-15) */
.lead-mlt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md); }
.lead-mlt-q { font-weight: var(--fw-semibold); display: flex; flex-direction: column; gap: 2px; }
.lead-mlt-btns { display: flex; gap: var(--sp-2); }
.lead-mlt-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--sp-4);
  border: 1px solid var(--border); border-radius: 16px; background: var(--bg-surface); color: var(--text);
  font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
.lead-mlt-btn:hover { border-color: var(--text-muted); }
.lead-mlt-btn.is-yes.is-on { background: #e6f4ea; border-color: var(--green); color: var(--green); }
.lead-mlt-btn.is-no.is-on { background: #fdecec; border-color: #d93025; color: #b3261e; }
/* Required before Convert / Lost (AI-LEAD-DESIGN.md 2): marked until Yes or No is clicked. */
.lead-mlt.is-required { border-color: var(--red); background: #fdecec; }
.lead-mlt-required { color: var(--red); font-size: var(--fs-sm); font-weight: normal; }

/* Lost on the lead page (AI-LEAD-DESIGN.md 3) */
.lead-status-pill.is-lost { color: var(--red); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-side-foot .lead-lost { color: var(--red); }
.lead-form-again .lead-form-key { color: var(--text-2); font-weight: var(--fw-semibold); }

/* AI on the lead panel (components/ai-triage.js): 'Ready for you' in the main column (AI-LEAD-DESIGN.md 1). */
.lead-ai-ready:empty { display: none; }
/* One gap below the Notes/Email box for whatever the box shows: the full card or the quiet row (teach line, with
   'Prepare again' on an open lead), so the quiet row never sits flush against the composer's bottom border. Same 12px
   as the card's gap below it. */
.lead-ai-ready { margin-top: var(--sp-5); }
.ai-ready { margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--bg-surface);
  border: 1px solid #ddd5ff; box-shadow: var(--shadow-raised, 0 1px 2px rgba(0,0,0,.04)); display: grid; gap: 0; }
.ai-ready.is-quiet { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-2); font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4); border-style: dashed; box-shadow: none; }
.ai-ready.is-quiet .btn { margin-left: auto; }
.ai-ready.is-quiet .btn:not(.btn-ai) { color: var(--text); }   /* Hamid 2026-11-03: same as the Catch me up button */
.ai-ready-head { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: var(--sp-2); }
.ai-spark { color: #6b4eff; }
.ai-not-sure { margin-left: auto; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--bg-hover);
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: normal; letter-spacing: 0; text-transform: none; }
.ai-part { padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
.ai-part:last-child { padding-bottom: 0; }
.ai-ready-head + .ai-part { border-top: 0; padding-top: var(--sp-2); }
.ai-line { display: flex; align-items: center; gap: var(--sp-3); }
.ai-line-ic { width: 28px; height: 28px; border-radius: 50%; background: #f1eeff; color: #5a3fe0; display: grid; place-items: center; flex: none; }
.ai-line-ic.is-lost { background: #fdecec; color: var(--red); }
.ai-line-text { flex: 1; min-width: 0; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Build B (suggestions-design.md A): Dismiss · Edit · Approve on every line. Dismiss / Edit are icon + word in the
   normal text colour on a white button (the old faint ✕ was missed); the group wraps under the text as one block on a
   narrow panel and never drops its words. */
.ai-line { flex-wrap: wrap; }
.ai-line[hidden] { display: none; }
.ai-line > .ai-line-text { flex: 1 1 160px; }
.ai-acts { display: flex; flex: none; align-items: center; gap: var(--sp-3); margin-left: auto; flex-wrap: nowrap; }
/* LAUNCH-TEST r1 #17: Approve saves the case type AND the quality, so both stay readable: the suggestion line wraps
   instead of cutting 'Quality Medium' off (phones have no hover for its tooltip). On a phone every AI line wraps and
   its buttons wrap inside the card. */
.ai-line > .ai-suggest-text { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .ai-line > .ai-line-text { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .ai-acts { flex-wrap: wrap; max-width: 100%; }
}
.ai-act-btn { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--bg-surface);
  border: 1px solid var(--border); color: var(--text); }
.ai-act-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); }
.ai-act-ic { display: inline-flex; width: 12px; height: 12px; }
.ai-act-ic svg { width: 12px; height: 12px; }
.ai-line-ic.is-dismiss { background: var(--bg-hover); color: var(--text-2); }
.ai-line-ic.is-suggest { background: color-mix(in srgb, var(--gold) 18%, var(--bg-surface));
  color: color-mix(in srgb, var(--gold) 70%, black); }
.ai-dismiss-text { flex: none; font-weight: var(--fw-semibold); }
.ai-why-input.input { box-sizing: border-box; height: var(--control-h, 32px); flex: 1 1 160px; min-width: 0; }
.ai-dismiss-row .ai-why-input.input { height: 28px; }
/* Inline Edit panels: lined up with the text after the 28px icon. */
.ai-edit-panel { display: grid; gap: var(--sp-4); padding: var(--sp-4) 0 0 36px; }
.ai-edit-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ai-why-label { font-size: var(--fs-sm); color: var(--text-2); flex: none; min-width: 64px; }
/* Case type and Quality side by side on one row, labels to the left (as the lost-reason panel): the kit's
   select-trigger is width: 100%, which put each picker on its own full-width line. */
.ai-edit-pickers { column-gap: var(--sp-5); }
.ai-edit-pickers .select-trigger { width: auto; flex: 0 1 220px; min-width: 160px; max-width: 260px; }
.ai-edit-foot { display: flex; justify-content: flex-end; gap: var(--sp-3); }
.ai-lost-reason.input { height: var(--control-h, 32px); max-width: 320px; }
.ai-edit-why-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border); }
.ai-edit-why-row .ai-why-input.input { flex: 1; }
/* aibox2 (aibox-design.md 1-3): the AI's email is the real composer inside the lead's Email tab; its feedback is one
   line in the composer's bottom bar (mail-composer footSlot); 'Teach the AI' about the case is one line in the box.
   No big gold panel any more. */
[data-testid=ai-email-composer] { transition: opacity var(--t-fast, .12s); }
[data-testid=ai-email-composer][data-busy="1"] { opacity: .6; pointer-events: none; }
.mail-foot-slot { display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 280px; min-width: 0; }
/* Both one-line inputs are as tall as the small buttons beside them (28px, .btn-sm). */
.ai-fb-input.input, .ai-teach-line > .input { box-sizing: border-box; height: 28px; }
.ai-fb-input.input { flex: 1; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--bg-surface));
  background: color-mix(in srgb, var(--gold) 8%, var(--bg-surface)); }
.ai-fb-input.input:focus { border-color: var(--gold); }
.ai-teach-spark { color: color-mix(in srgb, var(--gold) 70%, black); }
.ai-line-ic.is-teach { background: color-mix(in srgb, var(--gold) 18%, var(--bg-surface));
  color: color-mix(in srgb, var(--gold) 70%, black); }
.ai-teach-line > .input { flex: 1; min-width: 0; }
.ai-teach-line .ai-teach-btn { flex: none; }
.ai-again { align-items: center; gap: var(--sp-3); }
.ai-again > .ai-teach-line { flex: 1; min-width: 0; padding: 0; border-top: 0; }
.ai-teach-btn { background: var(--gold); color: var(--text); border-color: transparent; font-weight: var(--fw-semibold); }
.ai-teach-btn:hover:not(:disabled), .ai-teach-btn:active:not(:disabled) { background: color-mix(in srgb, var(--gold) 85%, black); }
.ai-teach-btn:disabled, .ai-teach-btn[aria-disabled="true"] { opacity: .55; cursor: default; }
/* Off but hovered (mouse still on it right after a rewrite): stay gold, not the generic .btn:hover grey. */
.ai-teach-btn:disabled:hover, .ai-teach-btn[aria-disabled="true"]:hover { background: var(--gold); }
.ai-teach-error { color: var(--red); font-size: var(--fs-sm); }
/* After everything is approved: one quiet 'Prepare again' (answer 12). */
.ai-again { display: flex; justify-content: flex-end; margin: 0 0 var(--sp-3); }
/* BUG-165: 'Suggest another next step' + its optional hint, on its own line where the step was. */
.ai-again:has(> .ai-next-ask-row) { flex-wrap: wrap; }
.ai-again > .ai-next-ask-row { flex: 1 1 100%; }
.ai-next-ask-row .ai-next-ask-hint.input { flex: 1 1 200px; }
.ai-next-ask-btn { flex: none; }
.ai-again-btn { color: var(--text-2); background: none; border-color: transparent; }
.ai-again-btn:hover { color: var(--text); border-color: var(--border); }
/* Build G (nextstep-design.md 2-5): one next-step line on leads AND deals (`deal-ai-ready` reuses .lead-ai-ready for
   its spacing). Row 2 'Why: …' and row 3 'Or: …' sit under the title, indented past the 28px icon. */
/* One column that may shrink below its content's min width: a narrow box wraps instead of scrolling sideways. */
.ai-ready { grid-template-columns: minmax(0, 1fr); }
.ai-next-why, .ai-next-alt { padding-left: 40px; margin-top: var(--sp-1, 4px); font-size: var(--fs-sm); }
.ai-next-why { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; }
.ai-next-why[hidden], .ai-next-alt[hidden] { display: none; }
.ai-next-alt { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-muted); min-width: 0; }
.ai-next-alt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-next-alt .ai-again-btn { flex: none; }
.ai-next-stale { color: var(--text-2); }
/* Build 8 (prelaunch-design.md B1): '✦ Following your lesson: …' under the why row (next / lost / suggest lines), and
   above the AI email's body. Quiet, one line with ellipsis, the full rule in the title; the ✦ is the one gold use. */
.ai-lesson-used { padding-left: 40px; margin-top: var(--sp-1, 4px); font-size: var(--fs-sm); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ai-lesson-used[hidden] { display: none; }
.ai-lesson-spark { color: var(--gold); }
[data-testid=ai-email-lesson-used].ai-lesson-used { padding-left: 0; margin: var(--sp-3) 0; }
[data-testid=ai-ready-next][data-busy="1"] > .ai-line { opacity: .6; pointer-events: none; }
.ai-next-why-hint { padding-left: 40px; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); }
.ai-next-why-row .ai-why-input.input, .ai-next-dismiss-row .ai-why-input.input { height: 28px; }
.ai-edit-foot > [data-testid=ai-next-other] { margin-right: auto; }
/* Fix round 2: 'Do something else' is a real choice, so it is the normal outlined small button (as Cancel), not the
   borderless grey .ai-again-btn that read as disabled. */
.ai-next-other-btn { flex: none; }
.ai-next-waiting-text { font-weight: normal; color: var(--text-2); }
/* Fix round 2 (F2): on an approved wait, 'Edit' is the outlined pencil button (.ai-act-btn) and 'Stop waiting' a plain
   outlined small button in the same text colour: never fainter than Edit. */
[data-testid=ai-next-waiting] [data-testid=ai-next-wait-stop] { color: var(--text); flex: none; }
/* Fix round 2: the why row after an edit names what was changed, one quiet line above the input. */
.ai-next-why-title { margin-bottom: var(--sp-2); }
.ai-next-why-title > .ai-line-text { font-weight: normal; color: var(--text-2); }
.ai-next-why-title .ai-line-ic svg { width: 14px; height: 14px; }
/* The wait's Edit window: what we wait for (text) and the date. */
.ai-wait-edit { display: grid; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); }
.ai-wait-edit-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ai-wait-edit-row .actf-date { width: auto; height: var(--control-h, 32px); }
.ai-wait-edit-for { flex: 1; min-width: 0; }
/* Fix round 2 (deal page on a phone, 14-phone-deal-page.png): the 300px fields sidebar filled the screen and squeezed
   the main column off the right edge. Under 640px the body is one scrolling column: the main column first, with
   the 'Ready for you' box at its top, full width, then the composer, Documents, timeline, and the fields below. */
@media (max-width: 640px) {
  .deal-page .deal-body { display: flex; flex-direction: column; overflow: auto; }
  .deal-page .deal-main { order: -1; overflow: visible; display: flex; flex-direction: column; min-height: auto;
    padding: var(--sp-5) var(--sp-4); }
  .deal-page .deal-main > * { min-width: 0; }
  .deal-page .deal-main > .deal-ai-ready { order: -1; margin-top: 0; margin-bottom: var(--sp-5); }
  .deal-page .deal-sidebar { overflow: visible; min-height: auto; border-right: 0; border-top: 1px solid var(--border);
    padding: var(--sp-5) var(--sp-4); }
}
/* Build L round 2 (b11-phone-390): on a phone the lead panel kept its 280px fields column, which squeezed the main
   column (every card) to ~20px, one letter per line. Under 640px the panel is one scrolling column, like the deal page
   above: the fields first, then the main column at full width. */
@media (max-width: 640px) {
  .lead-panel .lead-layout { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .lead-panel .lead-side { flex: none; min-height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .lead-panel .lead-side-scroll { flex: none; overflow: visible; }
  .lead-panel .lead-main { flex: none; min-height: auto; overflow: visible; padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .lead-panel .lead-main > * { min-width: 0; }
  /* LAUNCH-TEST r1 #4: the panel covers the whole list (it was ~278px wide with the list showing behind it); the
     close / previous / next strip sits inside its top right corner, in a row. */
  .lead-panel { left: 0; }
  .lead-panel-body { padding-top: 44px; }
  .lead-strip { left: auto; right: var(--sp-3); top: var(--sp-2); z-index: 2; flex-direction: row; width: auto;
    padding: 0 var(--sp-2); }
  .lead-strip-line { width: 1px; height: 24px; margin: 0 var(--sp-1); }
}
/* Build G (nextstep-design.md 7): Settings › AI usage, admins only (pages/settings-ai-usage.js). */
.aiu-page { max-width: 960px; min-width: 0; }
.aiu-bar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin: calc(-1 * var(--sp-4)) 0 var(--sp-5); }
.aiu-intro { flex: 1 1 240px; margin: 0; }
.aiu-range.input { width: auto; height: var(--control-h, 32px); }
.aiu-totals { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7, 32px); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); margin-bottom: var(--sp-6); }
.aiu-total-label { font-size: var(--fs-xs); color: var(--text-2); }
.aiu-total-value { font-size: var(--fs-lg, 18px); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.aiu-unknown { color: var(--text-muted); font-weight: normal; font-size: var(--fs-sm); }
.aiu-section { margin-bottom: var(--sp-6); min-width: 0; }
.aiu-head { margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.aiu-table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); }
.aiu-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--bg-surface); }
.aiu-table th, .aiu-table td { padding: var(--sp-2) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border);
  white-space: nowrap; }
.aiu-table th { color: var(--text-2); font-weight: var(--fw-semibold); }
.aiu-table tr:last-child td { border-bottom: 0; }
.aiu-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.aiu-empty { padding: var(--sp-6) 0; color: var(--text-2); }
/* UX-AI-1 (Hamid 2026-10-16, 7877 run 3): "the box is a bit off bigger": the AI box lines up with the composer and
   the Documents card above / below it (both stop at 1152px; the box went on to the column's edge on a wide screen). */
.lead-ai-ready, .lead-docs { max-width: 1152px; }
/* The AI is working (components/ai-thinking.js): three soft dots and a quiet line, never a loud spinner. */
.ai-thinking { display: grid; gap: var(--sp-1, 4px); min-width: 0; color: var(--text-2); font-size: var(--fs-sm); }
.ai-thinking-line { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ai-thinking-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-thinking-slow { padding-left: 34px; color: var(--text-muted); font-size: var(--fs-xs); }
.ai-thinking-dots { display: inline-flex; align-items: center; gap: 4px; flex: none; width: 22px; }
.ai-thinking-dot { width: 5px; height: 5px; border-radius: 50%; background: #8a73ff;
  animation: ai-thinking-dot 1.4s ease-in-out infinite; opacity: .3; }
.ai-thinking-dot:nth-child(2) { animation-delay: .18s; }
.ai-thinking-dot:nth-child(3) { animation-delay: .36s; }
@keyframes ai-thinking-dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: .9; transform: translateY(-2px); } }
.ai-ready.is-quiet.is-thinking { border-style: solid; border-color: #e6e0ff; }
.ai-ready.is-quiet.is-thinking .ai-thinking { flex: 1; }
.ai-next-stale .ai-thinking-dots, .docs-meta .ai-thinking-dots { margin-right: var(--sp-2); vertical-align: middle; }
@media (prefers-reduced-motion: reduce) {
  .ai-thinking-dots { display: none; }
  .ai-thinking-slow { padding-left: 0; }
}

/* Hamid 2026-11-03: the AI box before it ran says what the click does (title + one line), like Catch me up. */
.ai-offer { display: inline-flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; flex: 1; }
.ai-offer-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.ai-offer-desc { font-size: var(--fs-sm); color: var(--text-2); }
.lead-guess-cap { margin-right: 3px; font-size: 10.5px; opacity: 0.85; }