/* ============================================================
   Search Execution phase dashboard (S3, read-only shell).
   All selectors are scoped under `.se-page` and prefixed `se-` to avoid
   colliding with existing surface classes (.coach/.hero/.empty live elsewhere).
   Tokens (--bp-*) and components (.bp-btn/.bp-card/.bp-badge/.t-label) are
   supplied app-wide by application.css / components.css.
   ============================================================ */
.se-page { max-width: var(--bp-w-page); margin: 0 auto; }
.se-page .se-ic {
  width: 1em; height: 1em; display: inline-block; vertical-align: -.14em;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.se-page .se-link { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--bp-accent); }
.se-page .se-kicker {
  font-family: var(--bp-mono-family); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bp-ink-muted);
}

/* section heads --------------------------------------------------- */
.se-page .se-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 14px;
}

/* coach banner ---------------------------------------------------- */
.se-coach {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  background: var(--bp-paper); border: 1px solid var(--bp-rule);
  border-left-width: 4px; border-left-color: var(--bp-accent);
  border-radius: var(--bp-r-lg); padding: 18px 22px; margin-bottom: 22px;
}
/* The banner answering a click that happened somewhere else (#1953). A plan row
   can be well below the fold, so the repaint at the top of the page needs to say
   "this is where your click went" — the controller scrolls it into view and
   focuses it; this is the third signal, and the controller holds it until the
   scroll LANDS so the user is present for it.

   A ring alone was not enough: 3px of 30% accent on a white card is easy to miss
   even when you are looking straight at it. This washes the whole banner in
   `--bp-accent-soft` — the same tint the app uses to mark a live surface — HOLDS
   it long enough to register as deliberate, then settles back to paper. The
   banner is the element that changed, so the banner is what lights up. Still one
   pass: a surface that keeps pulsing is an alert, and this is an acknowledgement.

   Deliberately does NOT animate `border-color`: `.se-coach` carries a 4px accent
   left bar as a separate declaration, and an animated shorthand would win over
   it — greying the bar for the length of the highlight and snapping it back. */
@keyframes se-coach-arrive {
  0% {
    background: var(--bp-accent-soft);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--bp-accent) 34%, transparent);
  }
  55% {
    background: var(--bp-accent-soft);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--bp-accent) 26%, transparent);
  }
  100% {
    background: var(--bp-paper);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bp-accent) 0%, transparent);
  }
}
.se-coach--arrived { animation: se-coach-arrive 1500ms ease-out; }

/* Focus lands on the loop state, not on a control, so the question is what gets
   announced. Programmatic focus after a mouse click won't match :focus-visible,
   so this ring is for the keyboard user who pressed Enter on the row control —
   exactly who should get it. */
.se-coach .se-loop__state:focus-visible {
  outline: none; border-radius: var(--bp-r-md);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 25%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .se-coach--arrived { animation: none; }
}

.se-coach__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bp-accent-soft); color: var(--bp-accent);
  display: grid; place-items: center;
  font-family: var(--bp-display-family); font-weight: 600; font-size: 16px;
}
.se-coach__label {
  font-family: var(--bp-mono-family); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bp-ink-muted); margin-bottom: 6px;
}
.se-coach__welcome {
  font-family: var(--bp-display-family); font-weight: 500; font-size: 22px;
  line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em;
}
.se-coach__msg {
  font-family: var(--bp-serif-family); font-size: 18px; line-height: 1.5;
  color: var(--bp-ink-2); margin: 0; max-width: 62ch;
}
.se-coach__msg b { font-weight: 600; color: var(--bp-ink); }
.se-page .se-coach__sub { font-size: 13.5px; color: var(--bp-ink-muted); margin: 6px 0 0; }
/* The ending beat's body (#1971) — one paragraph per beat of the coach's reply,
   spaced so the pause between "here is what happened" and "here is the next
   hour" survives the render. */
.se-coach__msg--beat { margin-top: 10px; }

/* return-loop banner (Design §4) ---------------------------------- */
/* post-resolution "ready for the next one?" prompt — set off from the
   coaching above it by a hairline + spacing so it reads as a forward step. */
.se-page .se-loop__next {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bp-rule);
}
.se-page .se-loop__next .se-coach__msg { font-size: 15px; }
.se-page .se-loop__pills {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px;
}
.se-page .se-loop__pills form { margin: 0; }
.se-page .se-reply-pill {
  padding: 8px 15px; border-radius: var(--bp-r-pill);
  border: 1px solid var(--bp-rule); background: var(--bp-paper);
  color: var(--bp-ink-2); font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: all var(--bp-dur-fast);
}
.se-page .se-reply-pill:hover {
  border-color: var(--bp-accent); color: var(--bp-ink); background: var(--bp-accent-soft);
}
.se-page .se-reply-pill--primary {
  background: var(--bp-accent); color: var(--bp-accent-ink); border-color: var(--bp-accent);
}
.se-page .se-reply-pill--primary:hover {
  filter: brightness(1.1); color: var(--bp-accent-ink); background: var(--bp-accent);
}
.se-page .se-loop__capture { margin-top: 14px; display: grid; gap: 10px; max-width: 520px; }
.se-page .se-loop__error { font-size: 13px; color: var(--bp-danger); margin: 8px 0 0; }

/* ============================================================
   The week, reflected (PRD D16) — typography only.

   There is no chart here, and that is the design rather than an omission:
   D16 rules out any visual whose UNFILLED portion is the message (rings,
   gauges, meters, progress bars), because an arc that isn't full reads as
   incomplete whatever the label says. A proportional stacked bar is the
   same trap in a different shape — always 100% full, so a 1-item week and
   a 12-item week would render identically. Nothing drawn means nothing
   can read as unfilled. Three parts, in order: count, composition, norm.
   The block is a stack of text at every width, so it needs no breakpoint.
   ============================================================ */
.se-hero-card { padding: 18px 22px; }
.se-week { display: flex; flex-direction: column; gap: 5px; }
.se-week__count {
  font-family: var(--bp-display-family); font-weight: 600; font-size: 30px;
  line-height: 1.05; letter-spacing: -.015em; color: var(--bp-ink); margin: 0;
}
.se-week__comp { font-size: 14px; color: var(--bp-ink-2); margin: 0; }
.se-week__comp .sep { color: var(--bp-ink-subtle); margin: 0 7px; }
.se-week__norm {
  font-family: var(--bp-serif-family); font-size: 14.5px; line-height: 1.45;
  color: var(--bp-ink-muted); margin: 5px 0 0;
}

/* two-column body ------------------------------------------------- */
.se-split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--bp-s-5); align-items: start; margin-top: 26px; }

/* plan list ------------------------------------------------------- */
.se-plan { display: flex; flex-direction: column; gap: 10px; }
.se-pa {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center;
  background: var(--bp-paper); border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md); padding: 13px 16px;
}
/* The row and its editor are one item, so the list's own gap doesn't open
   between them when the editor is showing (#1973). */
.se-pa-item { display: flex; flex-direction: column; }
.se-pa-item:has(> .se-pane:not([hidden])) .se-pa {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent;
}
.se-pa--overdue { border-left: 3px solid var(--bp-danger); }
.se-pa--today { border-left: 3px solid var(--bp-highlight); }
.se-pa--done { opacity: .62; }
/* The row a commit from the open door's panel just landed (#2030). It is true of
   ONE render — nothing persists it — and it exists so the commit is legible on
   the page at the same moment it is legible in the panel over it. Last of the
   three edge rules on purpose: a just-added row that is also due today should
   read as the new thing first. */
.se-pa--fresh { border-left: 3px solid var(--bp-success); }
.se-pa__flag {
  font-family: var(--bp-mono-family); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bp-success); font-weight: 700;
}
.se-pa__check {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--bp-rule);
  display: grid; place-items: center; background: transparent; color: transparent;
  font-size: 12px; flex-shrink: 0; font-weight: 700;
}
.se-pa--done .se-pa__check { background: var(--bp-success); border-color: var(--bp-success); color: #fff; }
/* The live row control (#1953). At rest it is the same empty circle the read-only
   glyph always was — the check is `color: transparent` above and only surfaces on
   hover/focus, so the row reads as a checklist rather than growing a button. The
   button_to wrapper is a flex box, not `display: contents`, so it stays the grid's
   own first column. */
.se-pa__check-form { display: flex; }
button.se-pa__check {
  padding: 0; cursor: pointer; font-family: inherit;
  transition: color var(--bp-dur-fast), border-color var(--bp-dur-fast);
}
button.se-pa__check:hover { border-color: var(--bp-success); color: var(--bp-success); }
button.se-pa__check:focus-visible {
  outline: none; border-color: var(--bp-accent); color: var(--bp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 25%, transparent);
}
.se-pa__main .title { font-weight: 600; font-size: 14.5px; }
.se-pa__main .title s { color: var(--bp-ink-muted); font-weight: 500; }
.se-pa__meta {
  font-size: 12.5px; color: var(--bp-ink-muted); margin-top: 2px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.se-pa__meta .sep { opacity: .5; }
.se-pa__ctx { display: inline-flex; align-items: center; gap: 6px; }

/* row editor (#1973) ---------------------------------------------- */
/* The second row control. Same restraint as the check mark opposite it: quiet at
   rest, legible on hover/focus, so the row still reads as a checklist. */
.se-pa__edit-toggle {
  width: 26px; height: 26px; padding: 0; border-radius: var(--bp-r-sm);
  border: 1px solid transparent; background: transparent; color: var(--bp-ink-muted);
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  transition: color var(--bp-dur-fast), border-color var(--bp-dur-fast);
}
.se-pa__edit-toggle:hover { color: var(--bp-accent); border-color: var(--bp-rule); }
.se-pa__edit-toggle:focus-visible {
  outline: none; border-color: var(--bp-accent); color: var(--bp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 25%, transparent);
}
.se-pa__edit-toggle .se-ic { width: 16px; height: 16px; }

/* inline panes (row editor, quick-add, multi-add) ------------------ */
.se-page .se-pane {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bp-paper); border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md); padding: 14px;
}
.se-page .se-pane[hidden] { display: none; }
.se-page .se-pa__edit { border-top-left-radius: 0; border-top-right-radius: 0; }
.se-page .se-pane__fields { display: flex; flex-direction: column; gap: 10px; }
.se-page .se-pane__label {
  display: block; font-size: 12px; color: var(--bp-ink-muted); margin-bottom: 4px;
}
.se-page .se-pane__static { font-size: 13.5px; color: var(--bp-ink-2); margin: 0; padding: 7px 0; }
.se-page .se-pane__actions { display: flex; align-items: center; gap: 8px; }
.se-page .se-pane__spacer { flex: 1; }
.se-page .se-pane__delete { display: flex; }

/* multi-add grid (#1973) ------------------------------------------ */
.se-page .se-multi-add__rows { display: flex; flex-direction: column; gap: 8px; }
.se-page .se-multi-add__row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
@media (max-width: 720px) {
  .se-page .se-multi-add__row { grid-template-columns: 1fr; }
}

/* empty plan ------------------------------------------------------ */
.se-empty {
  background: var(--bp-paper); border: 1px dashed var(--bp-rule); border-radius: var(--bp-r-lg);
  padding: 38px 28px; text-align: center; display: grid; justify-items: center; gap: 10px;
}
.se-empty .glyph {
  width: 52px; height: 52px; border-radius: 50%; background: var(--bp-surface-2);
  display: grid; place-items: center; font-size: 22px; color: var(--bp-ink-muted);
}
.se-empty .title { font-family: var(--bp-display-family); font-weight: 500; font-size: 19px; }
.se-empty .body { font-size: 14px; color: var(--bp-ink-2); max-width: 42ch; margin: 0; }

/* starting-point summary ------------------------------------------ */
.se-startpoint {
  margin-top: 16px; background: var(--bp-surface); border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-md); padding: 14px 18px;
}
.se-startpoint .lead {
  font-size: 12px; font-family: var(--bp-mono-family); letter-spacing: .08em;
  text-transform: uppercase; color: var(--bp-ink-muted); margin: 0 0 10px;
}
.se-sp-row { display: flex; gap: 22px; flex-wrap: wrap; }
.se-sp-stat { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--bp-ink-2); }
.se-sp-stat .n { font-family: var(--bp-display-family); font-weight: 600; font-size: 20px; color: var(--bp-ink); }
.se-sp-stat .ico { font-size: 15px; opacity: .8; }

/* quick-add (S6) -------------------------------------------------- */
.se-page .se-quick-add { margin-top: 10px; }
.se-page .se-add-action {
  width: 100%; padding: 11px 14px; border: 1px dashed var(--bp-rule);
  border-radius: var(--bp-r-md); background: transparent; color: var(--bp-ink-muted);
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 9px; transition: all var(--bp-dur-fast);
}
.se-page .se-add-action:hover {
  border-color: var(--bp-accent); color: var(--bp-ink); background: var(--bp-accent-soft);
}
.se-page .se-add-action .plus { font-size: 18px; line-height: 1; }
/* Open/closed is the `hidden` attribute now that the plan-forms controller owns
   every pane (#1973); `.se-pane` above carries the box. */
.se-page .se-add-form, .se-page .se-multi-add { margin-top: 10px; }
.se-page .se-add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.se-page .se-add-form__error { font-size: 13px; color: var(--bp-danger); margin: 0; }

/* recommendation cards -------------------------------------------- */
.se-recs { display: flex; flex-direction: column; gap: 12px; }
.se-rec { background: var(--bp-paper); border: 1px solid var(--bp-rule); border-radius: var(--bp-r-md); padding: 15px 16px; }
.se-rec--primary { border-color: var(--bp-accent); box-shadow: 0 0 0 1px var(--bp-accent); }
.se-rec__why {
  font-family: var(--bp-mono-family); letter-spacing: .06em; text-transform: uppercase;
  font-size: 10px; color: var(--bp-ink-muted); margin: 0 0 5px;
}
.se-rec__title { font-weight: 600; font-size: 14.5px; margin: 0 0 4px; }
.se-rec__body { font-size: 13px; color: var(--bp-ink-2); margin: 0 0 12px; }
.se-rec__cta { display: flex; gap: 8px; flex-wrap: wrap; }

/* tool shortcuts -------------------------------------------------- */
.se-tools { margin-top: 20px; }
.se-tool-links { display: flex; flex-direction: column; gap: 2px; }
.se-tool-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: var(--bp-r-md); text-decoration: none; color: var(--bp-ink-2); font-size: 14px;
}
.se-tool-link .ico { width: 24px; text-align: center; opacity: .8; }
.se-tool-link.is-current {
  background: var(--bp-accent-soft); color: var(--bp-ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--bp-accent); cursor: default;
}
.se-tool-link.is-current .ico { opacity: 1; }

@media (max-width: 860px) {
  .se-split { grid-template-columns: 1fr; }
}

/* the shared back-to-dashboard link on the tool screens ----------- */
.se-back-link {
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--bp-ink-muted);
  display: inline-flex; gap: 6px; align-items: center;
}
.se-back-link:hover { color: var(--bp-ink); }

/* ============================================================
   Grow your network (S8, #1680; Design §3b). Chat-primary tool that mounts the
   Stage-5 DiscoveryCoach. Scoped under `.se-grow`; the `chat-typing` indicator
   is supplied app-wide by ai_chat.css.
   ============================================================ */
.se-grow__top { margin: 6px 0 14px; }
.se-grow__head { margin-bottom: 16px; }
.se-grow__title {
  font-family: var(--bp-display-family); font-weight: 500; font-size: 27px;
  letter-spacing: -.01em; margin: 4px 0 0;
}

.se-grow__work {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--bp-s-5);
  align-items: stretch;
}
@media (max-width: 880px) {
  .se-grow__work { grid-template-columns: 1fr; }
}

/* chat column (primary). Sizes to its content but caps at the space below the
   app-bar/head (and above the footer) so short conversations never force a page
   scroll while a long chat log scrolls internally. --bp-* viewport reserve
   accounts for the sticky header + this page's title block + footer breathing
   room; dvh so mobile browser chrome is handled. */
.se-grow__chat {
  display: flex; flex-direction: column; background: var(--bp-paper);
  border: 1px solid var(--bp-rule); border-radius: var(--bp-r-lg);
  overflow: hidden; min-height: 0; max-height: calc(100dvh - 220px);
}
@media (max-width: 880px) { .se-grow__chat { max-height: 70dvh; } }
.se-grow__chat-top {
  display: flex; align-items: center; gap: 11px; padding: 14px 18px;
  border-bottom: 1px solid var(--bp-rule-soft);
}
.se-grow__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--bp-accent-soft); color: var(--bp-accent);
  display: grid; place-items: center;
  font-family: var(--bp-display-family); font-weight: 600; font-size: 14px;
}
.se-grow__who { font-weight: 600; font-size: 14px; }
.se-grow__who small {
  display: block; font-weight: 400; color: var(--bp-ink-muted); font-size: 12px;
}
.se-grow__log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px 18px 8px;
  display: flex; flex-direction: column;
}
.se-grow__msg {
  max-width: 86%; padding: 11px 15px; font-size: 14.5px; line-height: 1.5;
  margin-bottom: 11px;
}
.se-grow__msg--coach {
  background: var(--bp-surface); color: var(--bp-ink-2);
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-lg) var(--bp-r-lg) var(--bp-r-lg) var(--bp-r-sm);
}
.se-grow__msg--me {
  background: var(--bp-accent); color: var(--bp-accent-ink); margin-left: auto;
  border-radius: var(--bp-r-lg) var(--bp-r-lg) var(--bp-r-sm) var(--bp-r-lg);
}
.se-grow__msg strong { font-weight: 600; }
.se-grow__foot { border-top: 1px solid var(--bp-rule-soft); padding: 12px 16px 14px; }
.se-grow__input {
  border: 1px solid var(--bp-rule); border-radius: var(--bp-r-lg);
  background: var(--bp-paper); padding: 4px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end;
}
.se-grow__textarea {
  border: 0; background: transparent; color: var(--bp-ink); font: inherit;
  font-size: 14px; min-height: 42px; max-height: 120px; resize: none;
  padding: 9px 10px; outline: none;
}
.se-grow__textarea::placeholder { color: var(--bp-ink-subtle); }
.se-grow__input .bp-btn { margin: 5px; }

/* network panel. Same content-sizing + viewport cap as the chat column, so the
   two stay matched (grid align-items: stretch) without forcing a page scroll. */
.se-grow__panel {
  display: flex; flex-direction: column; background: var(--bp-paper);
  border: 1px solid var(--bp-rule); border-radius: var(--bp-r-lg);
  overflow: hidden; min-height: 0; max-height: calc(100dvh - 220px);
}
.se-grow__panel-head {
  padding: 15px 18px 13px; border-bottom: 1px solid var(--bp-rule-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.se-grow__panel-ttl { font-weight: 600; font-size: 14.5px; }
/* goal: current counts vs. the editable recommended target ---------- */
.se-grow__goal {
  padding: 12px 18px; border-bottom: 1px solid var(--bp-rule-soft);
  display: grid; gap: 8px;
}
.se-grow__goal-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.se-grow__goal-label {
  font-family: var(--bp-mono-family); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bp-ink-muted);
}
.se-grow__goal-progress {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--bp-mono-family); font-size: 13px; color: var(--bp-ink-2);
}
.se-grow__goal-progress b { color: var(--bp-accent); font-size: 16px; }
.se-grow__goal-progress b.is-met { color: var(--bp-success); }
.se-grow__goal-sep { color: var(--bp-ink-subtle); }
.se-grow__goal-input {
  width: 3.2em; padding: 3px 6px; font: inherit;
  font-family: var(--bp-mono-family); font-size: 14px; text-align: center;
  background: var(--bp-paper); color: var(--bp-ink);
  border: 1px solid var(--bp-rule); border-radius: var(--bp-r-sm);
}
.se-grow__goal-input:focus {
  outline: none; border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 15%, transparent);
}

.se-grow__people { padding: 6px 14px; flex: 1; min-height: 0; overflow-y: auto; }
.se-grow__empty {
  padding: 20px 18px; margin: 0; font-size: 13px; color: var(--bp-ink-muted);
}
.se-grow__person {
  display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center;
  padding: 10px 6px; border-bottom: 1px solid var(--bp-rule-soft);
}
.se-grow__person:last-child { border-bottom: 0; }
.se-grow__pic {
  width: 34px; height: 34px; border-radius: 50%; background: var(--bp-surface-2);
  color: var(--bp-ink-muted); display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; font-family: var(--bp-mono-family);
}
.se-grow__person-name { font-weight: 600; font-size: 14px; display: block; }
.se-grow__person-meta {
  font-size: 12px; color: var(--bp-ink-muted); margin-top: 1px; display: block;
}

/* companies list (compact) ---------------------------------------- */
.se-grow__companies { padding: 2px 14px 8px; }
.se-grow__companies:empty { display: none; }
.se-grow__company {
  padding: 7px 6px; font-size: 13.5px; font-weight: 600; color: var(--bp-ink-2);
  border-bottom: 1px solid var(--bp-rule-soft);
}
.se-grow__company:last-child { border-bottom: 0; }

/* form-mode escape ------------------------------------------------ */
.se-grow__form {
  padding: 12px 18px; border-top: 1px solid var(--bp-rule-soft);
  background: var(--bp-surface);
}
.se-grow__form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;
}
.se-grow__form-label {
  display: block; font-family: var(--bp-mono-family); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bp-ink-muted);
}
.se-grow__form-label .bp-input,
.se-grow__form-label .bp-select { margin-top: 4px; }
@media (max-width: 460px) { .se-grow__form-grid { grid-template-columns: 1fr; } }

.se-grow__panel-foot {
  padding: 14px 18px; border-top: 1px solid var(--bp-rule-soft);
  display: grid; gap: 10px;
}
.se-grow__escape {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--bp-ink-muted);
}
.se-grow__escape-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600;
}

/* ============================================================
   Plan a reach-out (S9, #1681; Design §3a; mockup
   search-execution-plan-reachout). Chat-primary tool with a live rail assembling
   the reach-out (Who / How / When / What) + a P2 form escape. Scoped under
   `.se-reach`; reuses the shared `chat-typing` indicator (ai_chat.css) and the
   `--bp-*` tokens. The chat + panel columns mirror `.se-grow__*`.
   ============================================================ */
.se-reach__top { margin: 6px 0 14px; }
.se-reach__head { margin-bottom: 16px; }
.se-reach__title {
  font-family: var(--bp-display-family); font-weight: 500; font-size: 27px;
  letter-spacing: -.01em; margin: 4px 0 0;
}

.se-reach__work {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--bp-s-5);
  align-items: stretch;
}
@media (max-width: 880px) {
  .se-reach__work { grid-template-columns: 1fr; }
}

/* chat column (primary) — same content-sizing + viewport cap as grow-network. */
.se-reach__chat {
  display: flex; flex-direction: column; background: var(--bp-paper);
  border: 1px solid var(--bp-rule); border-radius: var(--bp-r-lg);
  overflow: hidden; min-height: 0; max-height: calc(100dvh - 220px);
}
@media (max-width: 880px) { .se-reach__chat { max-height: 70dvh; } }
.se-reach__chat-top {
  display: flex; align-items: center; gap: 11px; padding: 14px 18px;
  border-bottom: 1px solid var(--bp-rule-soft);
}
.se-reach__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--bp-accent-soft); color: var(--bp-accent);
  display: grid; place-items: center;
  font-family: var(--bp-display-family); font-weight: 600; font-size: 14px;
}
.se-reach__who { font-weight: 600; font-size: 14px; }
.se-reach__who small {
  display: block; font-weight: 400; color: var(--bp-ink-muted); font-size: 12px;
}
.se-reach__log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px 18px 8px;
  display: flex; flex-direction: column;
}
.se-reach__msg {
  max-width: 86%; padding: 11px 15px; font-size: 14.5px; line-height: 1.5;
  margin-bottom: 11px;
}
.se-reach__msg--coach {
  background: var(--bp-surface); color: var(--bp-ink-2);
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-lg) var(--bp-r-lg) var(--bp-r-lg) var(--bp-r-sm);
}
.se-reach__msg--me {
  background: var(--bp-accent); color: var(--bp-accent-ink); margin-left: auto;
  border-radius: var(--bp-r-lg) var(--bp-r-lg) var(--bp-r-sm) var(--bp-r-lg);
}
.se-reach__msg strong { font-weight: 600; }
.se-reach__foot { border-top: 1px solid var(--bp-rule-soft); padding: 12px 16px 14px; }

/* reply pills */
.se-reach__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 11px; }
.se-reach__pills:empty { display: none; }
.se-reach__pill {
  padding: 8px 14px; border-radius: var(--bp-r-pill);
  border: 1px solid var(--bp-rule); background: var(--bp-paper);
  color: var(--bp-ink-2); font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: all var(--bp-dur-fast) var(--bp-easing);
}
.se-reach__pill:hover {
  border-color: var(--bp-accent); color: var(--bp-ink); background: var(--bp-accent-soft);
}
.se-reach__pill--primary {
  background: var(--bp-accent); color: var(--bp-accent-ink); border-color: var(--bp-accent);
}
.se-reach__pill--primary:hover { filter: brightness(1.1); color: var(--bp-accent-ink); }
.se-reach__pill--soft { font-style: italic; color: var(--bp-ink-muted); }
/* Muted suffix on a Who chip for a contact who already has a reach-out planned —
   visible, but de-emphasized so it doesn't compete with the name. */
.se-reach__pill-tag { color: var(--bp-ink-subtle); font-weight: 400; font-size: 12px; }

/* Who typeahead — a searchable list over ALL contacts (the shortlist chips are
   only a recommendation), so the picker scales past a handful of people. */
.se-reach__suggestions {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--bp-rule); border-radius: var(--bp-r-md);
  background: var(--bp-paper); padding: 4px;
}
.se-reach__suggestion {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  width: 100%; text-align: left; padding: 8px 10px;
  border: 0; border-radius: var(--bp-r-sm); background: transparent;
  font: inherit; cursor: pointer; transition: background var(--bp-dur-fast) var(--bp-easing);
}
.se-reach__suggestion:hover { background: var(--bp-accent-soft); }
.se-reach__suggestion-name { font-size: 14px; font-weight: 600; color: var(--bp-ink); }
.se-reach__suggestion-meta { font-size: 12.5px; color: var(--bp-ink-muted); }
.se-reach__suggestion-flag {
  margin-left: auto; font-size: 11px; color: var(--bp-ink-subtle);
  border: 1px solid var(--bp-rule-soft); border-radius: var(--bp-r-pill); padding: 1px 8px;
}

.se-reach__input {
  border: 1px solid var(--bp-rule); border-radius: var(--bp-r-lg);
  background: var(--bp-paper); padding: 4px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end;
}
.se-reach__textarea {
  border: 0; background: transparent; color: var(--bp-ink); font: inherit;
  font-size: 14px; min-height: 42px; max-height: 120px; resize: none;
  padding: 9px 10px; outline: none;
}
.se-reach__textarea::placeholder { color: var(--bp-ink-subtle); }
.se-reach__input .bp-btn { margin: 5px; }

/* the reach-out panel (right) — the PlannedAction assembling live. */
.se-reach__panel {
  display: flex; flex-direction: column; background: var(--bp-paper);
  border: 1px solid var(--bp-rule); border-radius: var(--bp-r-lg);
  overflow: hidden; min-height: 0; max-height: calc(100dvh - 220px);
}
.se-reach__panel-head {
  padding: 15px 18px 13px; border-bottom: 1px solid var(--bp-rule-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.se-reach__panel-ttl { font-weight: 600; font-size: 14.5px; }
.se-reach__done-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--bp-success);
}
.se-reach__body { padding: 8px 18px 4px; flex: 1; min-height: 0; overflow-y: auto; }

.se-reach__field { padding: 13px 0; border-bottom: 1px solid var(--bp-rule-soft); }
.se-reach__field:last-child { border-bottom: 0; }
.se-reach__k {
  font-family: var(--bp-mono-family); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bp-ink-muted); margin-bottom: 5px;
}
.se-reach__v { font-size: 14.5px; color: var(--bp-ink-subtle); font-style: italic; }
.se-reach__field.is-filled .se-reach__v {
  color: var(--bp-ink); font-style: normal; font-weight: 500;
}
.se-reach__field--pop { animation: se-reach-pop var(--bp-dur-med) var(--bp-easing); }
@keyframes se-reach-pop { from { background: var(--bp-accent-soft); } to { background: transparent; } }
.se-reach__new-note { font-size: 12px; color: var(--bp-ink-muted); margin: 6px 0 0; line-height: 1.4; }
.se-reach__draft { margin-top: 8px; }
.se-reach__draft-text { min-height: 132px; font-size: 13.5px; }

/* form-mode escape (P2) */
.se-reach__form { padding: 8px 18px 4px; flex: 1; min-height: 0; overflow-y: auto; }
.se-reach__form-row { padding: 10px 0; }
.se-reach__form-label {
  display: block; font-family: var(--bp-mono-family); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bp-ink-muted);
  margin-bottom: 6px;
}

.se-reach__panel-foot {
  padding: 14px 18px; border-top: 1px solid var(--bp-rule-soft);
  display: grid; gap: 10px;
}
.se-reach__escape {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--bp-ink-muted);
}
.se-reach__escape-toggle {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600;
}
.se-reach__panel.is-done .se-reach__panel-foot .bp-btn--primary {
  background: var(--bp-success); border-color: var(--bp-success);
}

/* Target companies (S1, #1710) — the pipeline + draft panel, reusing the reach-out
   chat-primary shell (se-reach__*) with a company-list body. */
.se-targets__pipeline { padding: 8px 18px 4px; flex: 1; min-height: 0; overflow-y: auto; }
.se-targets__empty { font-size: 13.5px; color: var(--bp-ink-muted); font-style: italic; padding: 8px 0; }
/* A row is a stack now (S6, #1716): the name/status line, then the optional
   attempt line, ruled-out chips, and the collapsed set-aside control. */
.se-targets__row { padding: 11px 0; border-bottom: 1px solid var(--bp-rule-soft); }
.se-targets__row:last-child { border-bottom: 0; }
.se-targets__row-main {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.se-targets__name { font-size: 14.5px; font-weight: 500; color: var(--bp-ink); }
.se-targets__status { font-size: 12.5px; color: var(--bp-ink-muted); text-align: right; }
.se-targets__row.is-gap .se-targets__status { color: var(--bp-highlight); font-weight: 600; }

/* The attempt line — factual, never a verdict, so it stays muted and small and
   never borrows the is-gap highlight. */
.se-targets__tried {
  margin: 4px 0 0; font-size: 12px; color: var(--bp-ink-muted); font-style: italic;
}

/* Ruled-out routes: doors the user told us are closed. */
.se-targets__ruled { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.se-targets__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 6px 2px 8px; border-radius: var(--bp-r-sm, 4px);
  background: var(--bp-surface-2); border: 1px solid var(--bp-rule-soft);
  font-size: 11.5px; color: var(--bp-ink-muted);
}
.se-targets__chip-x {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 13px; line-height: 1; color: var(--bp-ink-muted);
}
.se-targets__chip-x:hover { color: var(--bp-ink); }

/* Set-aside control — collapsed by default so a list of targets doesn't read as a
   row of exit signs. */
.se-targets__aside { margin-top: 6px; }
.se-targets__aside-toggle {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 11.5px; font-weight: 600; color: var(--bp-ink-muted);
  padding: 2px 8px; border: 1px solid var(--bp-rule-soft); border-radius: var(--bp-r-sm, 4px);
}
.se-targets__aside-toggle::-webkit-details-marker { display: none; }
.se-targets__aside-toggle:hover { color: var(--bp-ink); border-color: var(--bp-rule); }
.se-targets__aside[open] .se-targets__aside-toggle { color: var(--bp-ink); }
.se-targets__aside-menu { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.se-targets__aside-opt {
  text-align: left; cursor: pointer; padding: 5px 8px;
  border: 0; border-radius: var(--bp-r-sm, 4px); background: none;
  font-size: 12.5px; color: var(--bp-ink);
}
.se-targets__aside-opt:hover { background: var(--bp-accent-soft); color: var(--bp-accent); }

/* The set-aside group — one collapsed summary at the foot of the list. */
.se-targets__parked { margin-top: 10px; border-top: 1px solid var(--bp-rule-soft); padding-top: 10px; }
.se-targets__parked-toggle {
  cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 600; color: var(--bp-ink-muted);
}
.se-targets__parked-toggle::-webkit-details-marker { display: none; }
.se-targets__parked-toggle::after { content: " \02c5"; }
.se-targets__parked-toggle:hover { color: var(--bp-ink); }
.se-targets__row.is-parked { opacity: .62; }
.se-targets__row.is-parked .se-targets__status { color: var(--bp-ink-muted); font-weight: 400; }
.se-targets__bring-back { margin-top: 4px; background: none; border: 0; cursor: pointer; padding: 0; }

.se-targets__draft {
  padding: 8px 18px 4px; border-top: 1px solid var(--bp-rule-soft);
  background: var(--bp-accent-soft);
}
.se-targets__draft-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0;
}
.se-targets__draft-item + .se-targets__draft-item { border-top: 1px solid var(--bp-rule-soft); }

/* form-mode escape (P2) — reuses se-reach__form-label */
.se-targets__form { padding: 8px 18px 4px; }
.se-targets__form-row { padding: 10px 0; }
.se-targets__form-inline { display: flex; gap: 8px; align-items: center; }
.se-targets__form-inline .bp-input { flex: 1; min-width: 0; }

/* ============================================================
   Phase transition screen (T1 #1700, PRD D11) — the crossing from the
   Preparation Phase into Execution. Narrower than the working surfaces:
   this is a moment, not a workspace. Scoped under `.se-transition` so the
   dashboard's own `.se-page` width and rhythm are untouched.
   ONE highlight moment (the eyebrow) per the design contract.
   ============================================================ */
.se-transition { max-width: var(--bp-w-stage); }

/* phase rail ------------------------------------------------------ */
.se-transition__rail {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--bp-s-4); margin: 0 0 var(--bp-s-6); padding: 0; list-style: none;
  font-family: var(--bp-mono-family); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
}
.se-transition__rail-node {
  display: inline-flex; align-items: center; gap: var(--bp-s-2);
  color: var(--bp-ink-subtle);
}
.se-transition__rail-node + .se-transition__rail-node::before {
  content: "→"; margin-right: var(--bp-s-3); color: var(--bp-ink-subtle);
}
.se-transition__rail-dot {
  width: 9px; height: 9px; border-radius: var(--bp-r-pill);
  border: 1.5px solid currentColor;
}
.se-transition__rail-node.is-done { color: var(--bp-success); }
.se-transition__rail-node.is-done .se-transition__rail-dot { background: var(--bp-success); }
.se-transition__rail-node.is-next { color: var(--bp-accent); font-weight: 700; }
.se-transition__rail-node.is-next .se-transition__rail-dot { background: var(--bp-accent); }

/* hero ------------------------------------------------------------ */
/* Measures belong on the elements themselves, never on the hero: `ch` resolves
   against each element's OWN font-size, so one number means very different
   widths here — 1ch is 10px on the hero, 35px on the 56px title, 11px on the
   20px lede. Any cap on the hero is therefore a body-text measure, and it
   clamped both children while silently killing their own max-widths. */
.se-transition__hero { text-align: center; margin: 0 auto var(--bp-s-6); }
.se-transition__eyebrow {
  display: block; margin-bottom: var(--bp-s-4);
  font-family: var(--bp-mono-family); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--bp-highlight); /* the view's single highlight mark */
}
/* 25ch is ~875px at the 56px display size — a typical generated headline lands
   at 3 lines, which is the stacking that gives it presence. */
.se-transition__title { margin: 0 auto var(--bp-s-4); max-width: 25ch; }
.se-transition__lede { margin: 0 auto; max-width: 52ch; color: var(--bp-ink-2); }

/* section heads --------------------------------------------------- */
.se-transition__section { margin-top: var(--bp-s-7); }
.se-transition__section-head {
  display: flex; align-items: center; gap: var(--bp-s-3);
  margin: 0 0 var(--bp-s-4);
}
.se-transition__section-head h2 { margin: 0; white-space: nowrap; }
.se-transition__section-rule { height: 1px; background: var(--bp-rule); flex: 1; }

/* proof-of-work ledger -------------------------------------------- */
.se-transition__proof {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bp-s-3);
}
.se-transition__card {
  display: grid; grid-template-columns: auto 1fr; gap: var(--bp-s-4);
  align-items: start;
}
.se-transition__card--wide { grid-column: span 2; }
.se-transition__card-glyph {
  width: 40px; height: 40px; border-radius: var(--bp-r-md);
  background: var(--bp-accent-soft); color: var(--bp-accent);
  display: grid; place-items: center; font-size: 19px;
}
.se-transition__card-stage {
  margin: 0 0 var(--bp-s-1); font-family: var(--bp-mono-family); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bp-ink-subtle);
}
.se-transition__card-title {
  margin: 0 0 var(--bp-s-2); font-family: var(--bp-display-family);
  font-weight: 500; font-size: 16px; letter-spacing: -.01em;
}
.se-transition__card-detail { margin: 0; font-size: 13.5px; color: var(--bp-ink-2); }
.se-transition__card-detail b { color: var(--bp-ink); font-weight: 600; }
.se-transition__chips {
  display: flex; flex-wrap: wrap; gap: var(--bp-s-1);
  margin: var(--bp-s-2) 0 0; padding: 0; list-style: none;
}
.se-transition__chip {
  padding: 3px 9px; border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-pill); background: var(--bp-surface);
  font-size: 11.5px; color: var(--bp-ink-2);
}

/* growth beat ----------------------------------------------------- */
.se-transition__growth { padding: var(--bp-s-5) var(--bp-s-6); }
.se-transition__then-now {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--bp-s-5); align-items: center;
}
.se-transition__col-cap {
  margin: 0 0 var(--bp-s-2); font-family: var(--bp-mono-family); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bp-ink-subtle);
}
.se-transition__then-line {
  margin: 0; font-size: 14px; line-height: 1.5;
  color: var(--bp-ink-muted); font-style: italic;
}
.se-transition__arrow { color: var(--bp-ink-subtle); font-size: 20px; display: grid; place-items: center; }
.se-transition__quote {
  margin: 0; font-family: var(--bp-serif-family); font-size: 18px;
  line-height: 1.5; color: var(--bp-ink); letter-spacing: -.005em;
}
.se-transition__quote::before { content: "\201C"; }
.se-transition__quote::after { content: "\201D"; }
.se-transition__attribution {
  margin: var(--bp-s-2) 0 0; font-size: 12.5px; color: var(--bp-ink-muted);
}

/* readiness ladder ------------------------------------------------ */
.se-transition__readiness { background: var(--bp-surface); }
.se-transition__readiness-note {
  margin: 0 0 var(--bp-s-4); font-size: 12.5px; color: var(--bp-ink-muted);
}

/* doorway --------------------------------------------------------- */
.se-transition__doorway {
  margin-top: var(--bp-s-7); padding: var(--bp-s-6) var(--bp-s-5);
  text-align: center; background: var(--bp-accent-soft);
  border: 1px solid var(--bp-rule); border-radius: var(--bp-r-lg);
}
.se-transition__doorway-title { margin: 0 0 var(--bp-s-3); }
.se-transition__doorway-body {
  margin: 0 auto var(--bp-s-5); max-width: 50ch;
  font-size: 14.5px; color: var(--bp-ink-2);
}
.se-transition__doorway-body b { color: var(--bp-ink); font-weight: 600; }
.se-transition__cta-row {
  display: flex; gap: var(--bp-s-2); justify-content: center; flex-wrap: wrap;
}
.se-transition__fineprint {
  margin: var(--bp-s-4) auto 0; max-width: 46ch;
  font-size: 12.5px; color: var(--bp-ink-muted);
}

@media (max-width: 760px) {
  .se-transition__proof { grid-template-columns: 1fr; }
  .se-transition__card--wide { grid-column: span 1; }
  .se-transition__then-now { grid-template-columns: 1fr; gap: var(--bp-s-3); }
  .se-transition__arrow { transform: rotate(90deg); }
}

/* ============================================================
   Resume & assets (actionability S2, #1711) — the Execution entry
   into the four Stage-4 communication assets. A reading/list surface,
   so it takes the narrower measure rather than the dashboard's grid.
   ============================================================ */
.se-assets { max-width: var(--bp-w-read); }
.se-assets__top { margin: 6px 0 14px; }
.se-assets__head { margin-bottom: var(--bp-s-4); }
.se-assets__title {
  font-family: var(--bp-display-family); font-weight: 500; font-size: 27px;
  letter-spacing: -.01em; margin: 4px 0 0;
}
.se-page .se-assets__count {
  font-family: var(--bp-mono-family); font-size: 11px; letter-spacing: .06em;
  color: var(--bp-ink-muted);
}
.se-assets .se-coach { margin-bottom: var(--bp-s-6); }
.se-assets .se-section-head { margin-top: var(--bp-s-6); }

.se-assets__list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: var(--bp-s-2); }
.se-asset {
  display: flex; align-items: center; gap: var(--bp-s-4);
  background: var(--bp-paper); border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md); padding: var(--bp-s-4) var(--bp-s-5);
}
/* The one asset the coach just named — the single primary move on the screen. */
.se-asset--lead { border-color: var(--bp-accent); box-shadow: 0 0 0 1px var(--bp-accent); }
.se-asset__body { flex: 1 1 auto; min-width: 0; }
.se-asset__head { display: flex; align-items: center; gap: var(--bp-s-2); flex-wrap: wrap; }
.se-asset__name { font-weight: 600; font-size: 14.5px; }
.se-asset__why { margin: 4px 0 0; font-size: 13px; color: var(--bp-ink-2); }
.se-asset .bp-btn { flex: none; }

.se-assets__note {
  margin: var(--bp-s-5) 0 0; font-size: 12.5px; color: var(--bp-ink-muted);
}

@media (max-width: 560px) {
  .se-asset { flex-direction: column; align-items: stretch; }
  .se-asset .bp-btn { align-self: flex-start; }
}

/* ---------------------------------------------------------------------------
   Interview practice (actionability S3, #1712) — the prep panel, reusing the
   reach-out chat-primary shell (se-reach__*) with a prep body: what we're
   prepping for, the target companies as focus shortcuts, the Stage-6 playbook
   carried forward, and the questions worked this session.
   --------------------------------------------------------------------------- */
.se-prep__body { padding: 8px 18px 4px; flex: 1; min-height: 0; overflow-y: auto; }

.se-prep__focus {
  margin: 10px 0 4px; font-size: 15px; font-weight: 600; color: var(--bp-ink);
}

/* "Add <company> to your target companies" (#1730) — the consent tap that carries
   the opening the coach just pinned into the user's real pipeline. It sits directly
   under the focus line, where the company it names already reads. */
.se-prep__add { margin-top: 8px; }
.se-prep__add-note {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--bp-ink-muted);
}

/* "Add this interview to your plan" (#1731) — the confirm form the control opens.
   Stacked rather than gridded: this lives in the narrow prep rail, where two
   columns would put a date picker in half a rail's width. */
.se-prep__capture { margin-top: 8px; }
.se-prep__capture-form {
  display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 12px;
  background: var(--bp-paper); border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
}
.se-prep__capture-form[hidden] { display: none; }
.se-prep__capture-field { display: flex; flex-direction: column; gap: 4px; }
.se-prep__capture-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* "Add a debrief to your plan for <day>" (#1731 slice 2) — the persistent half of
   the offer. Deliberately the same quiet ghost control as the two above rather
   than anything that announces itself: the whole reason the coach is allowed to
   mention the debrief as well is that this half never arrives, it just waits. */
.se-prep__debrief { margin-top: 8px; }

.se-prep__companies { margin-top: var(--bp-s-4); }
.se-prep__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.se-prep__playbook { margin-top: var(--bp-s-5); }
.se-prep__star { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--bp-ink-2); }
.se-prep__star li { margin: 3px 0; }
/* The letter + name is the reminder; the blurb is the footnote under it, so it
   drops a step in weight and sits on its own line rather than crowding the rail. */
.se-prep__star-blurb {
  display: block; font-size: 12.5px; line-height: 1.45; color: var(--bp-ink-muted);
}
.se-prep__kept-label {
  margin: 12px 0 4px; font-family: var(--bp-mono-family); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bp-ink-muted);
}
.se-prep__kept {
  margin: 0 0 10px; padding: 8px 0 8px 12px; font-size: 13.5px; line-height: 1.5;
  color: var(--bp-ink-2); border-left: 2px solid var(--bp-rule);
}
.se-prep__empty { font-size: 13.5px; color: var(--bp-ink-muted); line-height: 1.5; margin: 8px 0 0; }

.se-prep__worked { margin-top: var(--bp-s-5); }
.se-prep__worked-list {
  margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--bp-ink-2);
}
.se-prep__worked-list li { margin: 4px 0; }

/* The debrief's running record (#1731 slice 3, #1766). The coach writes it as short
   labelled lines, so the newlines ARE the structure — without pre-wrap the whole
   record collapses into one paragraph and stops being scannable at a glance, which
   is the only reason it's shown live rather than at the end. */
.se-debrief__record { white-space: pre-wrap; }

/* The one always-present control: muted until a rep closes, bold after. Never a
   completion — reps are repeatable here, so the copy keeps the door open. */
.se-prep__done-msg { margin: 0; font-size: 12.5px; color: var(--bp-ink-muted); line-height: 1.45; }
.se-prep__done.is-ready .se-prep__done-msg { color: var(--bp-ink-2); }

/* ---------------------------------------------------------------------------
   Opportunities (actionability S4, #1713) — the log/track surface for a role at
   a target company. Deliberately shaped like the assets hub (a single narrow
   column, form then list), not like the chat tools: this screen is data entry
   plus the state it produces.
   --------------------------------------------------------------------------- */
.se-opps { max-width: var(--bp-w-read); }
.se-opps__top { margin: 6px 0 14px; }
.se-opps__head { margin-bottom: var(--bp-s-4); }
.se-opps__title {
  font-family: var(--bp-display-family); font-weight: 500; font-size: 27px;
  letter-spacing: -.01em; margin: 4px 0 0;
}
.se-opps .se-coach { margin-bottom: var(--bp-s-6); }
.se-opps .se-section-head { margin-top: var(--bp-s-6); }
.se-page .se-opps__count {
  font-family: var(--bp-mono-family); font-size: 11px; letter-spacing: .06em;
  color: var(--bp-ink-muted);
}

/* No target companies yet — the screen hands the user to the tool that fixes
   that instead of showing a form they cannot submit. */
.se-opps__blank {
  background: var(--bp-paper); border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md); padding: var(--bp-s-5);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--bp-s-4);
}
.se-opps__blank-msg { margin: 0; font-size: 13.5px; color: var(--bp-ink-2); line-height: 1.55; }

.se-page .se-opp-form {
  display: flex; flex-direction: column; gap: 10px; margin-top: 10px;
  background: var(--bp-paper); border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md); padding: 14px;
}
/* `align-items: start` keeps the two labelled controls on the same top edge when
   only one of them carries help text underneath. */
.se-page .se-opp-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start;
}
/* Status, applied-on and the deadline. Declared before the 560px collapse below,
   which carries the same specificity and so wins on narrow screens. */
.se-page .se-opp-row--triple { grid-template-columns: 1fr 1fr 1fr; }
/* bp-field carries its own bottom margin for stacked forms; inside a row the
   grid gap owns the spacing. */
.se-page .se-opp-row .bp-field { margin-bottom: 0; }
/* The applied-on date locks while the role is only `identified` — nobody has
   applied yet, so there is no date to give. Dimming the whole field (label and
   help with it, at the same .55 the "soon" states use) reads as a deliberate
   lock rather than a broken control. */
.se-page .se-opp-row .bp-field:has(.bp-input:disabled) { opacity: .55; }
.se-page .se-opp-row .bp-input:disabled { cursor: not-allowed; }
/* The interview date (#1962), revealed by the status select the way the row
   form's fields are. It rides a normal `.se-opp-row` rather than sitting loose
   in the form: every other control here is in the two- or three-column grid, and
   a full-bleed date input under a triple row would read as a different kind of
   control on a screen that has just been given its first two.

   `.se-opp-row` sets `display: grid`, and an author rule beats the UA sheet's
   `[hidden]` whatever its specificity — so hiding it has to be said out loud,
   exactly as `.se-opp-update .bp-field[hidden]` says it for the row form. */
.se-page .se-opp-interview[hidden] { display: none; }
.se-page .se-opp-form__error { font-size: 13px; color: var(--bp-danger); margin: 0; }
.se-page .se-opp-form__actions { display: flex; justify-content: flex-end; }

/* Always present, and the mirror of the applied-on date: live exactly when that
   field is locked. Ticking the box is the consent — rendering the block is not,
   which is why it can sit open without reading as pressure to apply. */
.se-page .se-opp-plan {
  border-top: 1px solid var(--bp-rule); padding-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.se-page .se-opp-plan__label { font-size: 13px; font-weight: 600; color: var(--bp-ink); }
.se-page .se-opp-plan__consent {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--bp-ink-2);
}
/* Locked once the role is past `identified` — the application already happened,
   so there is nothing left to plan. Same .55 the other locked states use. */
.se-page .se-opp-plan.is-locked { opacity: .55; }
.se-page .se-opp-plan.is-locked .se-opp-plan__consent { cursor: not-allowed; }

.se-opps__empty { font-size: 13.5px; color: var(--bp-ink-muted); line-height: 1.55; margin: 10px 0 0; }
.se-opps__list {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--bp-s-2);
}
.se-opp {
  background: var(--bp-paper); border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md); padding: var(--bp-s-4) var(--bp-s-5);
}
.se-opp__body { min-width: 0; }
.se-opp__head { display: flex; align-items: center; gap: var(--bp-s-3); }
.se-opp__role { font-weight: 600; font-size: 14.5px; }
.se-opp__meta { margin: 4px 0 0; font-size: 12.5px; color: var(--bp-ink-muted); }
/* The deadline is the one fragment on the meta line with a clock on it, so it
   sits a step out of the muted run the rest of the line is in. A passed one goes
   further still: that is the whole reason the date is captured.
   Warning, NOT danger (#1782): employers routinely leave postings up after the
   date on them, so a passed date is not evidence the role is gone. Red reads as a
   verdict even when the words don't say so, and this surface may not pass one. */
.se-opp__deadline { color: var(--bp-ink-2); font-weight: 600; }
.se-opp__deadline.is-passed { color: var(--bp-warning); }
.se-opp__notes { margin: 6px 0 0; font-size: 13px; color: var(--bp-ink-2); line-height: 1.5; }

/* How a role ended, stated on the row (#1971). Its own line rather than another
   fragment on the muted meta run: an ending is the last thing that happened to
   this role and the first thing the reader wants off the row. Muted ink and no
   colour of its own — a wall of red rejections by week eight is the log turning
   into a scoreboard of failure, which is the exact thing this phase must not do.
   The offer's answer-by date takes the accent instead: one date, one consequence. */
.se-opp__ending {
  margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--bp-ink-muted);
}
.se-opp__ending--offer { color: var(--bp-ink); }

/* The revision surface, collapsed (#1971). A secondary affordance: the primary
   job of this screen is reading where things stand, and twenty rows each wearing
   an open status select would be unreadable. The summary is button-styled so it
   reads as the control it is rather than as a disclosure triangle, and the
   default marker is removed on both engines. */
.se-opp__update { margin: 10px 0 0; }
.se-opp__update-toggle { display: inline-flex; cursor: pointer; list-style: none; }
.se-opp__update-toggle::-webkit-details-marker { display: none; }
.se-opp__update[open] .se-opp__update-toggle { margin-bottom: 10px; }
.se-opp-update {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--bp-rule); padding-top: 14px;
}
/* Flex rather than a fixed grid, and the reason is the point of the control:
   most statuses show ONE field beside the select, and a 3-track grid would
   reserve the other two as visible holes. Flex lets the row close up around
   whatever the chosen status actually needs. */
.se-opp-update__row {
  display: flex; flex-wrap: wrap; gap: var(--bp-s-3); align-items: flex-start;
}
.se-opp-update__row .bp-field {
  /* grow 0: a lone status select stretched across the card would read as the
     screen's main control rather than as one row's quiet correction. */
  flex: 0 1 200px; min-width: 0;
  /* .bp-field's standing 18px bottom margin is for stacked forms; here the row
     gap owns the spacing and the margin would double it. */
  margin-bottom: 0;
}
/* The one field that needs more than the common width: "Rejected after
   interviewing" truncates at 200px, and the before/after-interview distinction
   is the whole reason the taxonomy has five values instead of one. */
.se-opp-update__row .bp-field--reason { flex-basis: 250px; }
/* `hidden` is an attribute, and both of these set `display`, which wins over it.
   Restating it is what makes the JS-off first paint and the Stimulus toggle agree. */
.se-opp-update__row[hidden] { display: none; }
.se-opp-update .bp-field[hidden] { display: none; }
.se-opp-update__actions { display: flex; justify-content: flex-end; }

@media (max-width: 560px) {
  .se-page .se-opp-row { grid-template-columns: 1fr; }
  .se-opp-update__row .bp-field { flex-basis: 100%; }
}

/* ============================================================
   The open door (#1975) — a free-text box on the DASHBOARD, whose ANSWER opens
   in a panel over the page (#2030, Direction E; DECISIONS §5.10).

   THE BOX DOES NOT MOVE. What is styled here is the hub's share of the door —
   the box and the receipts read answers leave behind — and the exchange styles
   the panel borrows for its contents. The panel itself is `.bp-drawer`
   (modal.css): fixed, so nothing in this block contributes to page height once
   an answer has landed.

   Two conversations share this page, so the first job of this block is to make
   sure they can never be mistaken for each other. The coach banner's signature
   is an accent left bar, a round BP avatar and a mono "YOUR COACH" label above
   serif display copy. This region deliberately has none of them, its answers are
   prose blocks rather than chat bubbles, and the panel's heading is the client's
   own words in the body face.
   ============================================================ */
.se-ask {
  display: block;
  background: var(--bp-surface); border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-lg); padding: 16px 22px 20px; margin: -8px 0 22px;
}
.se-ask__head { display: flex; gap: 14px; align-items: flex-start; }
.se-ask__ico {
  width: 32px; height: 32px; border-radius: var(--bp-r-md); flex: none;
  background: var(--bp-paper); border: 1px solid var(--bp-rule);
  color: var(--bp-ink-2); display: grid; place-items: center; font-size: 16px;
}
/* Sans, not the banner's serif display face — the clearest single signal that
   this is a different object speaking. */
.se-page .se-ask__ttl {
  font-family: inherit; font-weight: 600; font-size: 15.5px;
  margin: 5px 0 3px; letter-spacing: 0;
}
.se-page .se-ask__sub {
  font-size: 13.5px; color: var(--bp-ink-muted); margin: 0; max-width: 68ch;
}

/* the box */
.se-ask__row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  align-items: end; margin-top: 12px;
}
/* A CHAT COMPOSER, not a form field (#2027). It grows with what is typed
   (`chat_composer`'s autosize, from one line to the ceiling) and then scrolls,
   so `overflow-y` starts hidden and the JS flips it at the cap.

   THE CEILING IS LOAD-BEARING, and 42/120 is not a fresh guess: `.se-grow__
   textarea` and `.se-reach__textarea` on this very page already use it, and the
   door's own 44/130 made it the outlier a third time. D5.10's whole measured
   win is a hub that stays constant — six conversations for 32px more than three
   — and an uncapped box gives that back on one pasted recruiter email.

   `resize: none` because the drag handle was never an affordance anyone chose:
   it existed only so you could see text that had wrapped out of a one-line
   window, which is the defect autosize just fixed. */
.se-page .se-ask__input {
  min-height: 42px; max-height: 120px; resize: none; font-size: 14px;
  background: var(--bp-paper); overflow-y: hidden;
}
/* Mid-turn the box is `readonly`, not `disabled` — it is the panel's declared
   `opener:`, and a disabled element cannot take focus, so Escape during a turn
   would drop a keyboard user on <body>. `readonly` gets no UA greying, so the
   wait has to be said here or the box looks live while it is refusing input. */
.se-page .se-ask__input[readonly] { opacity: .6; cursor: default; }
.se-ask__go { white-space: nowrap; }
@media (max-width: 620px) {
  .se-ask__row { grid-template-columns: 1fr; }
  .se-ask__go { justify-self: stretch; }
}

/* ------------------------------------------------------------
   RECEIPTS — what a read answer becomes once the panel is closed.
   One line: the question, its bottom line as the gist, and when.
   A button, not a link: it reopens the panel, it does not navigate.

   ⚠️ THE CAP IS LOAD-BEARING (DECISIONS §5.10.2), and the clipping here is half
   of it. Direction E puts the ANSWER out of flow, so the answer costs the hub
   nothing at any length — the residues are what still grows. Each of these is one
   line and never two, whatever the client typed, and `_ask_receipts` keeps only
   three of them standing. Without both halves the door is O(1) in the answer and
   O(n) in what answers leave behind: the original defect with a smaller constant.
   ------------------------------------------------------------ */
.se-ask__receipts { margin-top: 14px; border-top: 1px solid var(--bp-rule-soft); }
.se-ask__receipt {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  padding: 10px 2px; border: 0; border-bottom: 1px solid var(--bp-rule-soft);
  background: transparent; font: inherit; font-size: 13.5px;
  color: var(--bp-ink-2); cursor: pointer;
}
.se-ask__receipt:last-child { border-bottom: 0; }
/* `min-width: 0` on both, or a flex item refuses to shrink below its content and
   the ellipsis never engages — which is the cap quietly failing. */
.se-ask__receipt .q {
  font-weight: 600; color: var(--bp-ink); flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.se-ask__receipt .gist {
  color: var(--bp-ink-muted); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.se-ask__receipt .when {
  color: var(--bp-ink-subtle); font-size: 12.5px; white-space: nowrap;
  margin-left: auto; flex: none;
}
.se-ask__receipt:hover .q { color: var(--bp-accent); }
.se-ask__receipt:focus-visible {
  outline: 2px solid var(--bp-accent); outline-offset: 2px; border-radius: var(--bp-r-sm);
}
/* At the phone tier the gist is the first thing to go: two clipped fragments on
   one narrow line say less than one whole question does. */
@media (max-width: 620px) {
  .se-ask__receipt .gist { display: none; }
}

/* ------------------------------------------------------------
   THE THREAD — inside the panel, never on the hub (#2030). Newest first, and
   every exchange rendered in full: the panel is bounded by the viewport and
   contributes zero to page height, so the "Earlier questions" collapse this
   used to carry has nothing left to bound. It also had to go — a hub receipt
   reopens the panel AT its answer by scrolling to it, and a closed <details>
   has no scroll position to offer. The disclosure moved to the receipts above,
   where the growth now lives. See `_ask_thread`.
   ------------------------------------------------------------ */
.se-ask__thread:empty { display: none; }
.se-ask__x { padding-top: 14px; border-top: 1px solid var(--bp-rule-soft); }
/* The newest exchange sits directly under the panel's own heading rule; a second
   rule 14px below it would read as a divider with nothing between the two. */
.bp-drawer__body > .se-ask__thread > .se-ask__x:first-child {
  padding-top: 2px; border-top: 0;
}
.se-page .se-ask__q {
  font-size: 14px; color: var(--bp-ink); font-weight: 600; margin: 0 0 10px;
}
.se-ask__q-label {
  display: block; font-family: var(--bp-mono-family); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 400;
  color: var(--bp-ink-subtle); margin-bottom: 3px;
}
/* NO MEASURE. The shipped door capped this at 68ch inside a full-width card,
   which reserved 41% of the card and never used it — a looks-wrong problem the
   panel dissolves rather than fixes: the panel's width IS the measure now, about
   60ch at this size once its padding is off (DECISIONS §5.10.6). Putting a `ch`
   cap back here would reserve space inside a 600px panel for nothing. */
.se-ask__a { font-size: 14.5px; line-height: 1.6; color: var(--bp-ink-2); }
.se-ask__a p { margin: 0 0 .75em; }
.se-ask__a p:last-child { margin-bottom: 0; }
.se-ask__a strong { font-weight: 600; color: var(--bp-ink); }
/* THE BOTTOM LINE, set apart. The first paragraph IS the answer, by prompt
   contract (#2031) — and it is the same sentence the hub's receipt shows as its
   gist, which is why that rule had to ship before this panel did. Selected
   rather than wrapped: the reply is one markdown string, and marking up its lede
   would mean parsing prose in a view to find a boundary CSS can already see. */
.se-ask__a > p:first-child {
  font-size: 15.5px; line-height: 1.5; color: var(--bp-ink);
  font-weight: 600; margin-bottom: .8em;
}
.se-ask__x--pending .chat-typing { margin: 4px 0 8px; }
/* The wait state is on every question and is the cheapest thing to get wrong:
   the panel opens immediately with the pending question, so the client is never
   looking at a box that appears to have swallowed what they typed. */
.se-page .se-ask__wait {
  font-size: 12.5px; color: var(--bp-ink-subtle); margin: 6px 0 0;
}
.se-page .se-ask__error {
  font-size: 13.5px; color: var(--bp-ink-muted); font-style: italic; margin: 8px 0 0;
}

/* the offer — hands off rather than absorbs.
   Dashed while it is still only an offer; solid once it is a record. That edge
   IS the distinction the surface turns on, so it is the thing that changes. */
.se-ask-offer {
  margin: 16px 0 0; padding: 12px 15px;
  border: 1px dashed var(--bp-accent); border-radius: var(--bp-r-md);
  background: var(--bp-accent-soft);
}
.se-page .se-ask-offer__ttl {
  font-size: 13.5px; font-weight: 600; color: var(--bp-ink); margin: 0 0 10px;
}
.se-ask-offer__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.se-ask-offer__form { display: contents; }
.se-ask__decline {
  border: 0; background: transparent; font: inherit; font-size: 13px;
  font-style: italic; color: var(--bp-ink-muted); cursor: pointer; padding: 6px 2px;
}
.se-ask__decline:hover { color: var(--bp-ink-2); text-decoration: underline; }
/* THE COMMIT, ANSWERED IN PLACE. The dashed edge goes solid because it is a
   record now and not an offer — and the panel does NOT dismiss. Being legible
   here and on the plan behind the panel in the same moment is the beat that
   decided drawer-vs-modal (DECISIONS §5.10.2). */
.se-ask-offer--done {
  border-style: solid; border-color: var(--bp-rule); background: var(--bp-surface);
}
.se-ask-offer--done .se-ask-offer__ttl {
  margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.se-ask-offer__tick {
  width: 17px; height: 17px; border-radius: 50%; background: var(--bp-success);
  color: #fff; font-size: 10px; font-weight: 700; display: grid;
  place-items: center; flex: none;
}
.se-page .se-ask-offer__note {
  font-size: 12.5px; color: var(--bp-ink-muted); margin: 0 0 6px;
}

/* the coach's suggested follow-ups. Rendered only on the turn that produced
   them — see `_ask_exchange`. */
.se-ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.se-ask__chip {
  padding: 7px 13px; border-radius: var(--bp-r-pill);
  border: 1px solid var(--bp-rule); background: var(--bp-paper);
  color: var(--bp-ink-2); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all var(--bp-dur-fast) var(--bp-easing);
}
.se-ask__chip:hover {
  border-color: var(--bp-accent); color: var(--bp-ink); background: var(--bp-accent-soft);
}

/* Older conversations, collapsed (#2030). Inherited from the "Earlier questions"
   disclosure this door used to carry inside its thread — same mechanism, moved
   to where the unbounded growth actually is now that the answer is out of flow.
   A plain <details>: it is open/closed state and nothing else, it survives
   without a controller, and it is keyboard- and screen-reader-correct for free. */
.se-ask__older { border-top: 1px solid var(--bp-rule-soft); }
.se-ask__older-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 9px 2px 7px; list-style: none;
  font-family: var(--bp-mono-family); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bp-ink-muted);
}
.se-ask__older-toggle::-webkit-details-marker { display: none; }
.se-ask__older-toggle::before {
  content: "▸"; font-family: inherit; font-size: 11px;
  transition: transform var(--bp-dur-fast) var(--bp-easing);
}
.se-ask__older[open] > .se-ask__older-toggle::before { transform: rotate(90deg); }
.se-ask__older-toggle:hover { color: var(--bp-ink-2); }
/* Indented, so a folded-out receipt still reads as subordinate to the three
   standing above it rather than as a fourth one. */
.se-ask__older .se-ask__receipt { padding-left: 16px; }

/* The panel's follow-up composer sits in the drawer's footer, where the row's
   own top margin would double the footer's padding. */
.bp-drawer__footer .se-ask__row { margin-top: 0; }
.bp-drawer__footer .se-ask__input { min-height: 40px; font-size: 13.5px; }

/* The quiet line is tier-split because no one sentence is true at both — see
   `_ask_footer`. On a phone the panel is full-bleed and the hub is gone behind
   it, so "you can tick a row off" is a promise that tier cannot keep and
   "Escape" is a key it does not have (DECISIONS §5.10.3). */
.se-ask__hint--narrow { display: none; }
@media (max-width: 620px) {
  .se-ask__hint--wide { display: none; }
  .se-ask__hint--narrow { display: inline; }
}