/* Discovery.
   Wider gutters and more air than the rest of the app on purpose: this is
   the first screen a client ever sees, and it should read as a conversation
   rather than as a console. One question is never crowded by the next. */

.discovery { padding: 44px 36px 64px; }

/* The generic question step: one column, generously measured. A second
   column here would put two questions side by side, which is the exact
   thing progressive disclosure is meant to prevent. */
.discovery-col { max-width: 780px; margin: 0 auto; }

.discovery-welcome {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 64px; align-items: start;
}

.discovery-onething { max-width: 720px; margin: 0 auto; padding-top: 24px; }

/* The front door. Same two-column shape as the welcome step, because it is
   the same conversation starting one screen earlier. */
.discovery-start {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 64px; padding: 64px 36px 56px; align-items: start;
}
@media (max-width: 1100px) {
  .discovery-start { grid-template-columns: 1fr; gap: 32px; }
}

/* The summary leads with what happens now: the two cards side by side, the
   roadmap right under them, and the read-back after. One column, so each
   row takes the full width. */
.discovery-summary {
  display: grid; grid-template-columns: 1fr;
  gap: 32px; align-items: start;
}
.summary-next-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 1100px) {
  .discovery-welcome, .summary-next-pair {
    grid-template-columns: 1fr; gap: 32px;
  }
}

/* A question is a block with room around it, separated by space rather than
   by a rule. Rules make a form; space makes a conversation. */
.question {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-hairline);
}
.question:last-of-type { border-bottom: 0; }

/* An answer carries a tick as well as a fill. Colour alone is a weak signal
   for "this is what I picked" — it fails for anyone colour-blind, it fails in
   a screenshot, and it fails at a glance on a row of eight chips where the
   client is scanning rather than reading. The tick is unmistakable. It is
   deliberately NOT applied to the chips used as filters and tabs elsewhere in
   the console, where pressed means "you are looking at this" rather than
   "you chose this". */
.fchip-pick[aria-pressed="true"]::before {
  content: '✓';
  font-size: 11px;
  line-height: 1;
}

/* "Not sure yet" is a legitimate answer and is styled as one: the same chip
   as every other option, in the warn colour rather than in red or grey.
   Anything that reads as a failure or a skip gets abandoned instead of
   clicked, and the honest answer is worth more than a guess. */
.fchip-unsure[aria-pressed="false"] {
  border-style: dashed;
  color: var(--text-secondary);
}
.fchip-unsure[aria-pressed="true"],
.fchip-unsure[aria-pressed="true"]:hover {
  /* Keeps its own amber identity rather than going solid like a normal
     answer, because "not sure yet" is a different KIND of answer. A solid
     amber fill is not available: --status-warn darkens in the light theme
     and --text-on-bright never inverts, so the pair would be illegible. A
     full-weight border plus the tick carries it instead. */
  background: var(--status-warn-tint);
  border: 2px solid var(--status-warn);
  color: var(--status-warn);
  padding: 8px 15px;
}

.fchip-sm { padding: 6px 12px; font-size: 10px; }

/* Ask [Producer]. Quiet until wanted, which is most of the time. */
.ask-trigger {
  align-self: flex-start;
  /* A face sits inside the pill, so it is a flex row with the avatar tucked
     against the left edge rather than centred text with padding. */
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--font);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-meta);
  padding: 5px 16px 5px 5px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ask-trigger:hover { color: var(--text-primary); border-color: var(--border-strong); }

.ask-panel {
  padding: 18px;
  background: var(--surface-panel);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-media);
}

.voice-note {
  padding: 14px 16px;
  background: var(--surface-panel);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-media);
}
.voice-note audio { width: 100%; height: 34px; }

/* The running count. This is the emotional core of the whole Discovery:
   the client arrives thinking "one video" and watches the number climb as
   they click, until they have scoped nine pieces themselves. Nobody had to
   argue with them. It is sized accordingly. */
.count-banner {
  padding: 24px 28px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  position: sticky; top: 12px; z-index: 5;
}
.count-number {
  font: 700 52px/1 var(--font);
  letter-spacing: var(--tracking-tight);
  background: var(--gradient-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.length-row { padding: 4px 0; }

.line-row {
  padding: 10px 0;
  border-top: 1px solid var(--border-hairline);
}
.line-row:first-child { border-top: 0; }

/* The one thing, quoted back. It shaped every decision downstream, so it
   is not a row in a summary table. */
.takeaway {
  padding: 28px 32px;
  border-radius: var(--radius-card);
  border: 1px solid var(--status-warn-border);
  background: var(--status-warn-tint);
}

.callout-behalf {
  padding: 16px 20px;
  border-radius: var(--radius-media);
  border: 1px solid var(--status-warn-border);
  background: var(--status-warn-tint);
  max-width: 60ch;
}

/* A dead end that is not an error: a spent or expired link. The person
   reading it has no account and nowhere else to go, so the page has to be
   the whole answer. Centred in the viewport rather than sitting at the top
   of an otherwise empty screen. */
.room-locked {
  width: 100%;
  max-width: 620px;
  /* .screen is a flex column, so a max-width child stretches and then sits
     at the start unless it is told to centre itself. */
  align-self: center;
  padding: 96px 32px;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
  text-align: left;
}

/* ---- The producer's side -------------------------------------------------
   Everything the client entered, readable at a glance and live. */

.disc-grid {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 24px; align-items: start;
}
@media (max-width: 1200px) { .disc-grid { grid-template-columns: 1fr; } }

.disc-answer {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 20px; padding: 14px 0;
  border-top: 1px solid var(--border-hairline);
}
.disc-answer:first-of-type { border-top: 0; }
@media (max-width: 800px) { .disc-answer { grid-template-columns: 1fr; gap: 6px; } }

/* An unanswered question and a question answered "not sure yet" look
   different on purpose. The second one is information. */
.disc-answer.is-unknown .disc-value { color: var(--status-warn); }
.disc-answer.is-empty .disc-value { color: var(--text-placeholder); }

/* Work that arrived on its own and is waiting on a person, not on a client.
   The only thing on the producer's Discovery screen with nobody's name
   against it, so it sits above everything and carries the warn border. */
.claim-strip {
  padding: 18px 22px;
  border: 1px solid var(--status-warn-border);
  background: var(--status-warn-tint);
  border-radius: var(--radius-card);
}

.disc-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--status-ok-border);
  border-radius: var(--radius-pill);
  color: var(--status-ok);
  font: 500 10px/1 var(--font);
  letter-spacing: .08em; text-transform: uppercase;
}

/* ---- The living roadmap --------------------------------------------------
   One object, two lives. Recommended: grayed, undated, dressed as a draft.
   Locked: live, dated, the current beat highlighted. The dressing is the
   whole safety mechanism for live edits, so the gray is unmistakable. */

.roadmap { display: flex; flex-direction: column; gap: 20px; }

.roadmap-title {
  font: 700 20px/1.2 var(--font);
  letter-spacing: var(--tracking-tight);
}

/* The horizontal stepper from the design: a node-and-line rail with the
   beat name and a quiet sub-line beneath each node. Wraps into further
   rows as the set deepens (post-only runs nine beats). */
.roadmap-rail-h {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  row-gap: 26px;
}

.roadmap-beat {
  display: flex; flex-direction: column; gap: 12px;
  text-align: left;
  padding-right: 16px;
}
.roadmap-beat:disabled { cursor: default; }

.roadmap-line { display: flex; align-items: center; }
.roadmap-line::after {
  content: ''; flex: 1; height: 1px; background: var(--border-strong);
}
.roadmap-beat:last-child .roadmap-line::after { background: transparent; }

.roadmap-node {
  width: 14px; height: 14px; flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
}
.roadmap-beat.done .roadmap-node {
  background: var(--gradient-1); border: 0;
  width: 16px; height: 16px;
}
.roadmap-tick { font-size: 9px; font-weight: 700; color: var(--text-on-bright); }
.roadmap-beat.current .roadmap-node { border: 2px solid var(--status-warn); }

.roadmap-beat-name {
  font: 700 13px/1.25 var(--font);
}
.roadmap-sub {
  font-size: 11px; color: var(--text-meta); margin-top: -8px;
}
.roadmap-beat:not(:disabled):hover .roadmap-beat-name {
  background: var(--gradient-1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.roadmap-foot {
  font-size: 12px; color: var(--text-meta);
  border-top: 1px solid var(--border-hairline);
  padding-top: 16px;
}

/* The draft dressing, exactly as mocked: the whole rail quiets to .55
   except the beat already done, which is what makes the roadmap feel
   underway from second one. */
.roadmap.is-recommended .roadmap-beat { opacity: .55; }
.roadmap.is-recommended .roadmap-beat.done { opacity: 1; }

/* ---- The handoff moment --------------------------------------------------
   The one-time screen after Discovery submit. Emotional, not informational:
   a person, in their own words, saying "I have it and I am on it". */

.handoff {
  flex: 1;
  display: grid; grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 64px; align-items: center;
  padding: 64px 48px;
  max-width: 1100px; margin: 0 auto; width: 100%;
}
@media (max-width: 900px) { .handoff { grid-template-columns: 1fr; gap: 32px; } }

.handoff-photo {
  width: 100%; aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-well);
  display: flex; align-items: center; justify-content: center;
}
.handoff-photo img { width: 100%; height: 100%; object-fit: cover; }
.handoff-initials { font: 700 84px/1 var(--font); color: var(--text-meta); }

.handoff-quote {
  font: 450 26px/1.35 var(--font);
  letter-spacing: var(--tracking-tight);
}

/* ---- The activity checklist ----------------------------------------------
   Check marks, never timestamps. A dated feed rots on a quiet day; a
   partially filled list reads as in progress. */

.checklist { display: flex; flex-direction: column; gap: 4px; }
.checklist-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 7px 2px;
}
.checklist-step:not(.done) { opacity: .45; }
.checklist-mark {
  width: 20px; height: 20px; flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.checklist-step.done .checklist-mark {
  background: var(--gradient-1); border: 0;
  color: var(--text-on-bright);
}
.checklist-step .t-body-sm { color: var(--text-primary); }

/* The design's question pills: bordered, rounded, quiet. */
.question-pill {
  border: 1px solid var(--border-hairline);
  border-radius: 16px;
  padding: 14px;
  font-size: 13px; line-height: 1.4;
  color: var(--text-secondary);
}

/* The room's header block: eyebrow, a big title, and the two ways to reach
   a person, exactly as mocked. */
.room-head-title {
  font: 700 34px/1.05 var(--font);
  letter-spacing: -.01em;
}


/* ---- The workspace flow -----------------------------------------------------
   One continuous page with the project rail, for clients whose account has
   the Discovery workspace switched on. The rail is the whiteboard's left
   column: campaigns as group labels, projects under them, the active one
   marked. Sticky so the map of their work never scrolls away from them. */

.flow-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}

.flow-side {
  border-right: 1px solid var(--border-hairline);
  padding: 28px 18px 40px;
  /* The topbar is sticky at 64px; the rail tucks in under it. */
  position: sticky;
  top: 64px;
  align-self: start;
  height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.flow-side-all { color: var(--text-quiet); }
.flow-side-all:hover { color: var(--text-primary); }

.flow-side-camp { color: var(--text-meta); padding: 0 10px; }

.flow-side-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-input);
  color: var(--text-secondary);
  font: 400 13px/1.4 var(--font);
}
.flow-side-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.flow-side-item[aria-current="page"] {
  background: var(--tint-soft);
  color: var(--text-primary);
  font-weight: 450;
}
.flow-side-item .dot { flex: none; }
.flow-side-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The door to something new: a real button now (Chris asked), pinned to
   the rail's foot, full width so it reads as the rail's one action. */
.flow-side-new { margin-top: auto; justify-content: center; }

.flow-main {
  max-width: 880px;
  padding: 0 44px 88px;
}

/* Pinned under the sticky top bar, so the title and the tracker stay in
   view however deep into the questions the page is. Opaque on purpose:
   the questions scroll UNDER it. */
.flow-head {
  position: sticky;
  top: 64px;
  z-index: 10;
  background: var(--surface-app);
  padding: 26px 0 16px;
  border-bottom: 1px solid var(--border-hairline);
}

.flow-intro { padding: 18px 0 4px; }

.flow-trackwrap { min-width: 220px; }

/* Section rhythm: a hairline and air between "Q1, Q2, Q3", nothing louder.
   The first one skips its rule: the pinned head already draws that line. */
.flow-sec {
  border-top: 1px solid var(--border-hairline);
  margin-top: 36px;
  padding-top: 36px;
}
.flow-main section.flow-sec:first-of-type { border-top: 0; margin-top: 20px; padding-top: 0; }

/* The dropdown wears the same clothes as every other input. */
select.input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
select.input option { background: var(--surface-card); color: var(--text-primary); }

@media (max-width: 1000px) {
  .flow-shell { grid-template-columns: 1fr; }
  .flow-side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-hairline);
    padding: 20px 24px;
  }
  .flow-main { padding: 0 24px 72px; }
}