@charset "UTF-8";
/* =========================================================
   Ideation: before, while and after the agent acts.
   Loaded after styles.css. Bundles the Figma UI look used by the
   prototype (shared.css, figma-ui.css) with the ideation sections'
   own styles. Every token and reset is scoped to .ide-section,
   so nothing here changes the rest of the case study.
   ========================================================= */

/* ---------- Shared tokens and wireframe primitives ---------- */
/* =========================================================
   Shared styles for ideation.html and solution.html
   Two visual languages live here:
   1. Wireframe (wf-*): greyscale boxes and text bars for early options
   2. Figma UI3 tokens (--ui-*): the polished look for chosen options
      and the solution prototype
   ========================================================= */
:where(.ide-section) {
  /* Wireframe palette: greys, plus one accent for the element being explored */
  --wf-bg: #ffffff;
  --wf-fill: #f1f2f4;
  --wf-line: #c9ccd2;
  --wf-ink: #5f6269;
  --wf-accent: #315edb;

  /* Figma UI3, light theme */
  --ui-canvas: #f5f5f5;
  --ui-panel: #ffffff;
  --ui-field: #f5f5f5;
  --ui-border: #e6e6e6;
  --ui-text: rgba(0, 0, 0, 0.9);
  --ui-text-2: rgba(0, 0, 0, 0.5);
  --ui-select: #0d99ff;
  --ui-select-soft: #e5f4ff;
  --ui-component: #9747ff;

  /* Anything the agent does or proposes. Change it here to re-theme both pages. */
  --agent: #8b3dff;
  --agent-soft: rgba(139, 61, 255, 0.1);

  /* Ideation page chrome (matches the case study) */
  --page-bg: #f8f8f8;
  --ink: #1e1e1e;
  --grey: #5f6269;
  --muted: #8a8d95;
  --border: #e6e6e6;
  --chosen: #087a55;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:where(.ide-section) *, :where(.ide-section) *::before, :where(.ide-section) *::after { box-sizing: border-box; }


:where(.ide-section) :is(h1, h2, h3, h4, p) { margin: 0; }
:where(.ide-section) a { color: inherit; text-decoration: none; }
:where(.ide-section) button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Wireframe primitives ---------- */

/* A wireframe sketch: the greyscale card that holds the other wf-* pieces */
.wf {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--wf-bg);
  border: 1px solid var(--wf-line);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--wf-ink);
}

.wf-label { font-size: 10px; color: var(--muted); }
.wf-text { font-size: 11px; color: var(--wf-ink); }
.wf-text b { color: var(--ink); font-weight: 600; }

.wf-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wf-row--end { align-self: stretch; justify-content: flex-end; }
.wf-row--between { align-self: stretch; justify-content: space-between; }
.wf-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* Placeholder line standing in for text we don't care about yet */
.wf-bar { width: 100%; height: 6px; border-radius: 3px; background: var(--wf-line); }
.wf-bar--40 { width: 40%; }
.wf-bar--60 { width: 60%; }

.wf-box { padding: 8px; background: var(--wf-fill); border: 1px solid var(--wf-line); border-radius: 6px; }
.wf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--wf-bg); border: 1px solid var(--wf-line); border-radius: 999px; white-space: nowrap; }
.wf-btn { display: inline-flex; padding: 3px 10px; background: var(--wf-bg); border: 1px solid var(--wf-line); border-radius: 5px; white-space: nowrap; }
.wf-btn--sm { padding: 1px 8px; font-size: 10px; }

/* A chip that sits inside a sentence, like a mention */
.wf-token { display: inline-flex; padding: 0 5px; border: 1px solid var(--wf-line); border-radius: 4px; white-space: nowrap; }

/* Agent chat prompt box: attachments, text, then the icon row */
.wf-composer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; background: var(--wf-bg); border: 1.5px solid var(--wf-line); border-radius: 10px; }
.wf-composer .wf-text { line-height: 1.9; }
.wf-icon { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--wf-line); border-radius: 50%; font-size: 9px; }
.wf-icon--send { background: var(--wf-ink); border-color: var(--wf-ink); color: #fff; }

/* Figma's own selection outline, so it can be told apart from agent marks */
.wf-selected { border-color: var(--ui-select); box-shadow: 0 0 0 1px var(--ui-select); }

/* A trip card on a wireframe canvas */
.wf-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 8px; background: var(--wf-fill); border: 1px solid var(--wf-line); border-radius: 6px; }

/* Boundary drawn around the layers the agent may edit */
.wf-scope { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 16px 6px 6px; border: 1.5px dashed var(--wf-accent); border-radius: 8px; }
.wf-scope__tag { position: absolute; top: -9px; left: 8px; padding: 1px 6px; border-radius: 4px; background: var(--wf-accent); color: #fff; font-size: 10px; }

/* A layer marked by the agent, with an optional name tag on its corner */
.wf-marked { position: relative; border-color: var(--wf-accent); box-shadow: 0 0 0 1px var(--wf-accent); }
.wf-tag { position: absolute; top: -8px; left: 6px; padding: 0 4px; border-radius: 3px; background: var(--wf-accent); color: #fff; font-size: 9px; line-height: 13px; }

/* The mention and the layer the pointer is over, lit up together */
.wf-card.is-hover { background: color-mix(in srgb, var(--wf-accent) 14%, white); }
.wf-token.wf-accent.is-hover { background: var(--wf-accent); color: #fff; }

/* An agent plan: numbered steps, each with a second line saying what it will change */
.wf-plan { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--wf-bg); border: 1px solid var(--wf-line); border-radius: 6px; }
.wf-step { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 0 6px; }
.wf-step > i { grid-row: span 2; font-style: normal; color: var(--muted); }
.wf-step__change { font-size: 10px; color: var(--muted); }

/* Editing a plan: a step's checkbox, a dropped step, a value being typed, and a before/after change */
.wf-check { width: 10px; height: 10px; margin-top: 2px; border: 1px solid var(--wf-line); border-radius: 2px; }
.wf-check.is-on { background: var(--wf-accent); border-color: var(--wf-accent); }
.wf-step.is-dropped > span { color: var(--muted); text-decoration: line-through; }
.wf-field { display: inline-block; min-width: 18px; padding: 0 3px; border: 1px solid var(--wf-accent); border-radius: 3px; background: var(--wf-bg); color: var(--ink); }
.wf-step__change del { color: var(--muted); }
.wf-step__change ins { text-decoration: none; color: var(--wf-accent); font-weight: 600; }

/* Reviewing a plan step by step: each step is approved or edited on its own */
.wf-step--review { grid-template-columns: 12px minmax(0, 1fr) auto; }
.wf-step--review > span { grid-column: 2; }
.wf-step--review > .wf-step__actions { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: flex; gap: 4px; }
.wf-step__approved { font-size: 10px; color: var(--wf-accent); white-space: nowrap; }

/* Two-way switch in the composer, e.g. Plan / Edit */
.wf-switch { display: inline-flex; padding: 1px; border: 1px solid var(--wf-line); border-radius: 5px; font-size: 10px; }
.wf-switch span { padding: 0 6px; border-radius: 4px; }
.wf-switch .is-on { background: var(--wf-accent); color: #fff; }

/* The one element this option is about */
.wf-accent { border-color: var(--wf-accent); color: var(--wf-accent); }
.wf-box.wf-accent, .wf-chip.wf-accent, .wf-btn.wf-accent, .wf-token.wf-accent { background: color-mix(in srgb, var(--wf-accent) 8%, white); }
.wf-dim { opacity: 0.35; }

/* ---------- Figma UI3 components ---------- */
/* =========================================================
   Figma UI3 components, as they look in the editor today.
   Used by the solution prototype and by the ideation cards,
   so both show the same Figma. Icons live in figma-icons.svg.
   ========================================================= */

/* Figma UI3 light theme. Every UI color comes from these tokens,
   so the whole editor can switch theme here. */
:where(.ide-section) {
  --fig-panel: #ffffff;
  --fig-edge: #e6e6e6;        /* lines between panels */
  --fig-line: #e6e6e6;        /* lines inside panels, outlined cards */
  --fig-field: #f5f5f5;       /* inputs, active tab */
  --fig-text: rgba(0, 0, 0, 0.9);
  --fig-text-2: rgba(0, 0, 0, 0.5);
  --fig-text-3: rgba(0, 0, 0, 0.3);
  --fig-blue: #0d99ff;        /* Share, active tool */
  --fig-blue-soft: #e5f4ff;
  --fig-blue-text: #007be5;
  --fig-select: #0d99ff;      /* canvas selection */
  --fig-canvas: #f5f5f5;
  --fig-toolbar: #ffffff;
  --fig-toolbar-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --fig-send-off: #e6e6e6;    /* Send before anything is typed */
  --fig-send-off-icon: #ffffff;
}

/* ---------- Shared bits ---------- */
.i { flex: none; width: 16px; height: 16px; color: inherit; }
.i--sm { width: 12px; height: 12px; }
.spacer { flex: 1; }
.icon-btn { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; color: var(--fig-text); }

/* ---------- Navigation rail: the icon strip on the editor's far left ---------- */
.rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; background: var(--fig-panel); border-right: 1px solid var(--fig-edge); }
.rail__btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: var(--fig-text); }
.rail__btn:first-child { margin-bottom: 8px; }
.rail__btn.is-on { background: var(--fig-blue-soft); color: var(--fig-blue-text); }
.rail__btn--end { margin-top: auto; }

/* ---------- Agent chat panel ---------- */
.chat { display: flex; flex-direction: column; min-height: 0; background: var(--fig-panel); color: var(--fig-text); font-size: 11px; line-height: 16px; }
.chat__head { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 8px 0 16px; }
.chat__title { display: flex; flex: 1; flex-direction: column; }
.chat__title b { font-size: 12px; font-weight: 550; }
.chat__title span { color: var(--fig-text-2); }
/* Back to the chat list, before the title (the down chevron turned to point left) */
.chat__head:has(.chat__back) { padding-left: 4px; }
.chat__back .i { transform: rotate(90deg); }
/* Long chat titles cut off with "…" so the header icons always fit */
.chat__title { min-width: 0; }
.chat__title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__ai { padding: 1px 4px; border: 1px solid var(--fig-line); border-radius: 4px; font-size: 9px; font-weight: 600; line-height: 12px; color: var(--fig-text-2); }

.chat__thread { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 64px 16px 16px; overflow: auto; }
.chat__empty { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 15px; font-weight: 550; }
.chat__empty-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fig-blue-soft); color: var(--fig-blue-text); }
.chat__empty-mark .i { width: 20px; height: 20px; }

.suggestions { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.suggestion { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--fig-line); border-radius: 8px; font-size: 12px; }
.suggestion span { flex: 1; }
.suggestion__chevron { color: var(--fig-text-2); }

/* ---------- Messages in the chat thread ---------- */
/* What the designer sent: a grey bubble on the right */
.msg-user { align-self: flex-end; max-width: 88%; padding: 8px 10px; border-radius: 12px; background: var(--fig-field); font-size: 12px; line-height: 20px; }
/* The designer's message with their avatar beside it, as in Figma */
.msg-from-you { display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; }
.msg-from-you .msg-user { max-width: calc(100% - 26px); }
:where(.ide-section) .avatar { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #9747ff; color: #fff; font-size: 10px; font-weight: 600; line-height: 1; }
/* Keeps a mention and the punctuation after it on the same line */
.msg-glue { white-space: nowrap; }
/* The agent's reply: plain text on the panel, no bubble */
.msg-agent { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 18px; }
.msg-agent p { margin: 0; }
/* A plan written as plain numbered text, the way the agent replies today */
.msg-steps { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 16px; }
/* Still working: a dot and a status line */
.msg-status { display: flex; align-items: center; gap: 6px; color: var(--fig-text-2); }
.msg-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--agent); }
/* Something the agent guessed rather than read from the prompt. Dashed so it reads as
   "not certain"; in the agent colour because the agent made it up. Click to change. */
.assumed { border-bottom: 1px dashed var(--agent); color: var(--agent); font-weight: 550; }
/* Figma today, after Send: the selection chip sits above the designer's bubble */
.msg-sent { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* Figma today, while the agent works: one status line that keeps changing
   (Analyzing, Thinking…), then a list of steps. None of it says what the agent understood.
   Status lines and the step list share one spot and take turns over a 10s loop. */
.agent-work { display: grid; }
.agent-work > * { grid-area: 1 / 1; align-self: start; }
.agent-step { display: flex; margin: 0; align-items: center; gap: 8px; color: var(--fig-text-2); font-size: 12px; line-height: 18px; }
.agent-step .i { flex: none; width: 14px; height: 14px; }
.agent-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* Each status shows for 1.5s, one after another (--step sets its turn) */
.agent-work > .agent-step { opacity: 0; animation: agent-status 10s infinite; animation-delay: calc(var(--step) * 1.5s); }
/* After the four statuses (6s), the step list stays until the loop restarts */
.agent-work > .agent-steps { opacity: 0; animation: agent-steps 10s infinite; }
@keyframes agent-status { 0%, 14.9% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes agent-steps { 0%, 59.9% { opacity: 0; } 60%, 100% { opacity: 1; } }
/* Text still in progress: a light sweep across the words */
.agent-shimmer { background: linear-gradient(90deg, var(--fig-text-2) 35%, var(--fig-text) 50%, var(--fig-text-2) 65%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: agent-shimmer 1.6s linear infinite; }
@keyframes agent-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* Without motion: no cycling or sweep, just the finished step list */
@media (prefers-reduced-motion: reduce) {
  .agent-work > .agent-step { display: none; }
  .agent-work > .agent-steps { opacity: 1; animation: none; }
  .agent-shimmer { animation: none; }
}

/* A question the agent needs answered before it carries on */
.msg-ask { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--fig-line); border-radius: 8px; }
.msg-choices { display: flex; flex-wrap: wrap; gap: 6px; }
/* Several questions in one box: a little more room before each next question */
.msg-ask .msg-choices + p { margin-top: 4px; }
.msg-choice { padding: 3px 10px; border: 1px solid var(--fig-line); border-radius: 999px; font-size: 11px; font-weight: 550; line-height: 16px; white-space: nowrap; }
/* The picked answer turns blue */
.msg-choice[aria-pressed="true"] { border-color: var(--fig-blue); background: var(--fig-blue-soft); color: var(--fig-blue-text); }

/* Clickable answers in the interactive demo */
button.msg-choice:hover:not([aria-pressed="true"]) { background: var(--fig-field); }
/* Once a question is answered, the answers not picked step back */
:is(.msg-choices, .msg-options, .msg-previews):has([aria-pressed="true"]) [data-answer]:not([aria-pressed="true"]) { opacity: 0.45; }

/* Answers as a list, each one saying what it would change */
.msg-options { display: flex; flex-direction: column; gap: 4px; }
.msg-option { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 0 8px; width: 100%; padding: 7px 8px; border: 1px solid var(--fig-line); border-radius: 6px; background: none; color: inherit; font: inherit; font-size: 12px; line-height: 18px; text-align: left; cursor: pointer; }
/* A radio dot, so it reads as "pick one" */
.msg-option::before { content: ""; grid-row: span 2; width: 12px; height: 12px; margin-top: 3px; box-sizing: border-box; border: 1px solid var(--fig-text-3); border-radius: 50%; }
.msg-option b { font-weight: 550; }
.msg-option span { grid-column: 2; color: var(--fig-text-2); font-size: 11px; line-height: 16px; }
.msg-option:hover:not([aria-pressed="true"]) { background: var(--fig-field); }
/* The picked answer (clicked in the ideation demo, or scripted in the prototype) */
.msg-option[aria-pressed="true"],
[data-state="answer"] .msg-option[data-choice="layout"] { border-color: var(--fig-blue); background: var(--fig-blue-soft); }
.msg-option[aria-pressed="true"]::before,
[data-state="answer"] .msg-option[data-choice="layout"]::before { border: 4px solid var(--fig-blue); }
/* The way out: answer in your own words, or let the agent decide */
.msg-escape { display: flex; justify-content: space-between; gap: 8px; color: var(--fig-text-2); font-size: 11px; line-height: 16px; }
.msg-escape span:last-child { color: var(--fig-blue-text); }

/* The vague words in the designer's message, marked so the question can point back to them */
.msg-vague { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--agent) 14%, transparent); box-shadow: inset 0 -1.5px 0 var(--agent); color: inherit; }
/* The agent quotes those words above its question */
.msg-quote { padding-left: 8px; border-left: 2px solid var(--agent); color: var(--fig-text-2); }

/* Answers as small previews of what each one would do to a card */
.msg-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.msg-preview { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--fig-line); border-radius: 6px; background: none; color: inherit; font: inherit; font-size: 11px; line-height: 16px; text-align: left; cursor: pointer; }
.msg-preview b { font-weight: 550; }
.msg-preview:hover:not([aria-pressed="true"]) { background: var(--fig-field); }
.msg-preview[aria-pressed="true"] { border-color: var(--fig-blue); background: var(--fig-blue-soft); }
.msg-preview__thumb { display: grid; place-items: center; padding: 6px; border-radius: 4px; background: var(--fig-canvas); }

/* A question that takes over the top of the composer until it's answered */
.composer__ask { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-bottom: 1px solid var(--fig-line); font-size: 12px; line-height: 18px; }
.composer__ask p { margin: 0; }
.composer__ask-count { color: var(--fig-text-2); font-size: 11px; line-height: 16px; }
/* Several questions: which one this is, with a bar per question that fills as they're reached */
.composer__ask-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ask-steps { display: flex; gap: 3px; }
.ask-steps i { width: 14px; height: 3px; border-radius: 2px; background: var(--fig-line); }
.ask-steps i.is-done { background: var(--fig-blue); }
/* An earlier question, already answered, kept as one line */
.composer__ask .composer__ask-answered { color: var(--fig-text-2); font-size: 11px; line-height: 16px; }
/* In the composer toolbar, next to the mic: let the agent decide instead of answering */
.composer__skip { flex: none; color: var(--fig-blue-text); font-size: 11px; line-height: 16px; white-space: nowrap; }

/* ---------- The agent's plan: one checklist, a row per step ---------- */
/* Which mode the agent is in, shown in the panel header (e.g. "Suggest mode") */
/* The whole plan sits in one box: a title bar, the numbered steps, then actions for the whole plan */
.plan { border: 1px solid var(--fig-line); border-radius: 8px; overflow: hidden; font-size: 11px; line-height: 16px; }
.plan p { margin: 0; }
.plan__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--fig-line); background: #f9f9f9; }
.plan__head b { font-weight: 550; }
.plan__head span { display: inline-flex; align-items: center; gap: 4px; color: var(--fig-text-2); }
.plan__head .i { width: 12px; height: 12px; }
.plan__steps { margin: 0; padding: 0; list-style: none; }

/* A step: number and title, with Accept / Reject or its status on the right.
   Below the title: which layers, old → new, and why. */
.plan-step { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.plan-step + .plan-step { border-top: 1px solid var(--fig-line); }
.plan-step > :not(.plan-step__head) { margin-left: 22px; }
.plan-step__head { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 18px; }
.plan-step__num { position: relative; display: grid; flex: none; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--fig-field); font-size: 10px; font-style: normal; line-height: 1; }
/* Suggest mode: each step has its own colour, shared by its number here and its preview on the canvas,
   so the designer can tell which outline belongs to which step. Kept clear of Figma's selection blue
   and of the green and red used for accepted and rejected. */
:where(.ide-section) { --step-1: #e07a00; --step-2: #8b3dff; --step-3: #e5368f; }
.plan--previewed .plan-step:nth-child(1) .plan-step__num { background: var(--step-1); color: #fff; }
.plan--previewed .plan-step:nth-child(2) .plan-step__num { background: var(--step-2); color: #fff; }
.plan--previewed .plan-step:nth-child(3) .plan-step__num { background: var(--step-3); color: #fff; }
.plan-step__title { flex: 1; min-width: 0; font-weight: 550; }
.plan-step__path, .plan-step__why { color: var(--fig-text-2); }
/* Old value struck out in red, new value in green, like tracked changes in a doc */
.plan-step__change s { color: #dc3412; }
.plan-step__change ins { color: #009951; font-weight: 550; text-decoration: none; }

/* Small Accept (✓) and Reject (✕) buttons beside the title */
.plan-step__actions { display: flex; flex: none; gap: 4px; }
.plan-icon-btn { display: grid; place-items: center; width: 20px; height: 18px; padding: 0; border: 1px solid var(--fig-line); border-radius: 5px; font-size: 11px; line-height: 1; }
.plan-icon-btn .i { width: 12px; height: 12px; }
/* The pencil: edit the step's new value */
.plan-icon-btn--edit { color: var(--fig-text-2); }
.plan-icon-btn--accept { color: #009951; }
.plan-icon-btn--reject { color: #dc3412; }
/* Once decided, the buttons give way to the step's status */
.plan-step__status { flex: none; font-size: 11px; font-weight: 550; white-space: nowrap; }
.plan-step__status--accepted, .plan-step__status--applied { color: #009951; }
.plan-step__status--rejected { color: #dc3412; }
/* Not done yet: "Applying…" or "Queued" while the agent works through the plan */
.plan-step__status--pending { color: var(--fig-text-2); font-weight: 400; }
.plan-step__undo { flex: none; color: var(--fig-blue-text); font-size: 11px; font-weight: 550; }
/* Accepted or applied: the step number turns into a green tick */
.plan-step:has(:is(.plan-step__status--accepted, .plan-step__status--applied):not([hidden])) .plan-step__num { background: #14ae5c; color: transparent; }
.plan-step:has(:is(.plan-step__status--accepted, .plan-step__status--applied):not([hidden])) .plan-step__num::after { content: "✓"; position: absolute; color: #fff; font-size: 10px; }
/* Rejected: the step is crossed out and fades back, so the steps that will run stand out */
.plan-step:has(.plan-step__status--rejected:not([hidden])) .plan-step__title { text-decoration: line-through; }
.plan-step:has(.plan-step__status--rejected:not([hidden])) :is(.plan-step__num, .plan-step__title, .plan-step__path, .plan-step__change, .plan-step__why) { opacity: 0.45; }

/* Buttons for the whole plan, in its footer */
.plan-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--fig-line); border-radius: 5px; background: var(--fig-panel); font-size: 11px; font-weight: 550; line-height: 16px; white-space: nowrap; }
.plan-btn--primary { border-color: var(--fig-blue); background: var(--fig-blue); color: #fff; }
/* Nothing accepted yet, so there's nothing to run */
.plan-btn--primary.plan-btn--off { border-color: var(--fig-field); background: var(--fig-field); color: var(--fig-text-3); }

/* The plan's footer: a running count, then the actions for the whole plan */
.plan-foot { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--fig-line); background: #f9f9f9; }
.plan-foot p { color: var(--fig-text-2); }
.plan-foot__actions { display: flex; align-items: center; gap: 6px; }
.plan-foot__actions .plan-btn--primary { margin-left: auto; }

/* ---------- The plan while it runs ----------
   A progress bar in the header, a spinner on the running step with its change ticking off layer by layer,
   queued steps faded, and Stop in the footer. A step runs when it has .plan-step--running
   or shows a visible .plan-step__status--running. */
.plan__head .plan__bar { display: grid; flex: 1; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin: 0 10px; }
.plan__bar i { height: 3px; border-radius: 2px; background: var(--fig-line); }
.plan__bar i.is-done { background: #14ae5c; }
.plan__bar i.is-on { background: linear-gradient(90deg, var(--agent) 66%, color-mix(in srgb, var(--agent) 25%, white) 66%); }
.plan--running .plan-step__head { font-size: 11px; line-height: 16px; }
.plan--running .plan-step__num { margin-top: 0; }
:is(.plan-step--running, .plan-step:has(.plan-step__status--running:not([hidden]))) { background: color-mix(in srgb, var(--agent) 5%, white); box-shadow: inset 2px 0 0 var(--agent); }
:is(.plan-step--running, .plan-step:has(.plan-step__status--running:not([hidden]))) .plan-step__num { box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); background: none; color: transparent; animation: plan-spin 0.9s linear infinite; }
:is(.plan-step--running, .plan-step:has(.plan-step__status--running:not([hidden]))) .plan-step__title { color: var(--agent); }
.plan-step__status--running { color: var(--agent); font-variant-numeric: tabular-nums; }
.plan-step__change s, .plan-step__change ins { display: inline-flex; align-items: center; gap: 3px; vertical-align: bottom; }
.plan-step__change i { width: 9px; height: 9px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; }
.plan-step__layers { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 2px; color: var(--fig-text-2); font-size: 10px; line-height: 15px; }
.plan-step__layers span { white-space: nowrap; }
.plan-step__layers span::before { content: "○ "; color: var(--fig-text-3); }
.plan-step__layers .is-done::before { content: "✓ "; color: #14ae5c; }
.plan-step__layers .is-on { color: var(--agent); font-weight: 550; }
.plan-step__layers .is-on::before { content: "◌ "; color: var(--agent); }
:is(.plan-step--queued, .plan-step:has(.plan-step__status--pending:not([hidden]))) .plan-step__title { font-weight: 500; }
:is(.plan-step--queued, .plan-step:has(.plan-step__status--pending:not([hidden]))) .plan-step__change { opacity: 0.55; }
.plan-foot--running { flex-direction: row; align-items: center; justify-content: space-between; }
.plan-foot--running p { font-variant-numeric: tabular-nums; }
.plan-btn--stop i { width: 7px; height: 7px; border-radius: 1.5px; background: currentColor; }
@keyframes plan-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  :is(.plan-step--running, .plan-step:has(.plan-step__status--running:not([hidden]))) .plan-step__num { animation: none; }
}

/* ---------- Evidence marks: what the plan is based on ----------
   Green means the words come from somewhere real: the prompt, a layer, a variable or another frame.
   Purple (the agent's colour) means the agent made it up, so the designer should check it. */
:where(.ide-section) {
  --evidence-backed: #3aa776;
  --evidence-guess-soft: color-mix(in srgb, var(--agent) 12%, white);
}
/* Guessed words highlighted inside a step's sentence */
.mark { padding: 0 2px; border-radius: 3px; color: inherit; }
.mark--guess { background: var(--evidence-guess-soft); box-shadow: inset 0 -1.5px 0 var(--agent); }
/* A step's own sentence in the plan, in the same size as its change line */
.plan-step__text { color: var(--fig-text); }
/* Guess rail: a purple bar down each step that holds a guess, like a change bar in a document */
.plan-step--guess { box-shadow: inset 2px 0 0 var(--agent); }
.plan-step--guess .plan-step__num { background: var(--evidence-guess-soft); color: var(--agent); }
/* Plan header summary: "8 backed · 2 guesses", each count in its own colour */
.evidence-summary { display: inline-flex; gap: 4px; color: var(--fig-text-2); }
.evidence-summary b { font-weight: 550; }
.evidence-summary .is-backed { color: var(--evidence-backed); }
.evidence-summary .is-guess { color: var(--agent); }
/* The agent's reason under a guess step, opened by a small "Guess" tag */
.evidence-reason { color: var(--fig-text-2); }
.evidence-tag { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 4px; background: var(--evidence-guess-soft); color: var(--agent); font-size: 10px; font-weight: 550; line-height: 15px; vertical-align: 1px; }

/* Ways of drawing guesses that lost to the rail, kept for moment 06's Also tried */
/* Quiet guesses: only the step number turns purple, and the guessed words get a dotted underline */
.plan-step--guess-number .plan-step__num { background: var(--evidence-guess-soft); color: var(--agent); }
.mark--dotted { padding: 0; background: none; box-shadow: none; text-decoration: underline dotted var(--agent) 1.5px; text-underline-offset: 3px; }
.evidence-reason b { color: var(--agent); font-weight: 550; }
/* Guesses first: the guesses pulled out above the plan, to check before anything else */
.guesses-first { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--fig-line); background: var(--evidence-guess-soft); list-style: none; }
.guesses-first li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 6px; }
.guesses-first li .plan-step__num { background: #fff; color: var(--agent); }
.guesses-first li span { grid-column: 2; color: var(--fig-text-2); }
.guesses-first .guesses-first__head { display: block; color: var(--agent); font-weight: 550; }
/* Split by evidence: the plan in two groups, each under its own heading */
.plan-group { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid var(--fig-line); background: #fcfcfc; color: var(--fig-text-2); font-weight: 550; }
.plan__steps + .plan-group { border-top: 1px solid var(--fig-line); }
.plan-group--guess { background: var(--evidence-guess-soft); color: var(--agent); }
.plan-group__action { color: var(--fig-blue-text); }

/* ---------- How far a step reaches: friction sized to the stakes ---------- */
/* Amber means "this goes further than your selection" in every option below */
/* Local by default: a quiet line on what the step touches, and a link-style way to go wider */
.scope-note { color: var(--fig-text-2); }
.scope-widen { display: flex; align-items: flex-start; gap: 4px; color: var(--fig-text-2); }
.scope-widen .i { width: 12px; height: 12px; margin-top: 2px; color: var(--fig-blue-text); }
.scope-widen b { color: var(--fig-blue-text); font-weight: 550; }

/* Component changes run on their own: a second, amber-edged plan card holding only the component change */
.plan--component { border-color: #f0c38a; }
.plan--component .plan__head { border-bottom-color: #f0c38a; background: #fff8ef; }
.plan--component .plan__head b { display: inline-flex; align-items: center; gap: 6px; color: #a65c00; }
.plan--component .plan__head .i { width: 12px; height: 12px; }

/* ---------- Composer (libraries tip optional, stacked on the input) ---------- */
.composer { margin: 0 16px 16px; border: 1px solid var(--fig-line); border-radius: 12px; }
.composer__libraries { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border-bottom: 1px solid var(--fig-line); }
.composer__libraries div { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.composer__libraries a { color: var(--fig-blue-text); }
.composer__dismiss { color: var(--fig-text-2); }
.composer__input { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
.composer__text { align-self: stretch; min-height: 60px; margin: 0; font-size: 12px; line-height: 20px; }
.composer__placeholder { color: var(--fig-text-3); }
.composer__foot { display: flex; align-self: stretch; align-items: center; gap: 4px; }
.composer__mic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fig-blue-soft); color: var(--fig-blue-text); }
.composer__send { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fig-send-off); color: var(--fig-send-off-icon); }
/* While the agent works, Send becomes Stop: a dark circle with a square */
.composer__stop { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fig-text); }
.composer__stop::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: #fff; }
/* How much the agent may do on its own: Plan only, Suggest or Apply directly */
.mode-pick { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 5px; background: var(--fig-field); font-weight: 550; }
.mode-pick .i { width: 12px; height: 12px; }
.mode-pick .i:last-child { color: var(--fig-text-2); }

/* Focused composer with something typed: blue outline, Send turns on.
   The prototype turns it on while its prompt is being typed, and off once it's sent. */
.composer.is-focused,
.composer:has(.composer__draft:not([hidden]) [data-type]:not([hidden])) { border-color: var(--fig-blue); box-shadow: 0 0 0 1px var(--fig-blue); }
/* Focused but still empty: Send stays off until something is typed */
.composer.is-focused .composer__placeholder ~ .composer__foot .composer__send { background: var(--fig-send-off); color: var(--fig-send-off-icon); }
.composer.is-focused .composer__send,
.composer:has(.composer__draft:not([hidden]) [data-type]:not([hidden])) .composer__send { background: var(--fig-blue); color: #fff; }

/* Figma today: the selection attaches above the prompt as one chip */
.context-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; border-radius: 4px; background: var(--fig-blue-soft); color: var(--fig-blue-text); font-weight: 550; line-height: 20px; white-space: nowrap; }
.context-chip .i { width: 12px; height: 12px; }

/* Proposed: a layer mentioned inside the prompt, in Figma selection
   blue because it points at a layer on the canvas */
.mention { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: 4px; background: var(--fig-blue-soft); color: var(--fig-blue-text); font-weight: 550; line-height: 18px; white-space: nowrap; }
.mention__icon { width: 10px; height: 10px; opacity: 0.8; }
/* Components are purple everywhere in Figma, so a component mention is too */
.mention--component { background: #f1e5ff; color: #8638e5; }

/* ---------- Canvas: frames and Figma's selection ---------- */
.frame { position: relative; }
.frame__label { position: absolute; bottom: 100%; left: 0; padding-bottom: 4px; color: rgba(0, 0, 0, 0.6); }

/* Selection overlays sit above the layers, as in Figma: bounds, corner handles, size badge */
.sel-box { position: absolute; inset: -1px; z-index: 1; border: 1px solid var(--fig-select); pointer-events: none; }
.sel-box i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid var(--fig-select); }
.sel-box i:nth-child(1) { top: -4px; left: -4px; }
.sel-box i:nth-child(2) { top: -4px; right: -4px; }
.sel-box i:nth-child(3) { bottom: -4px; left: -4px; }
.sel-box i:nth-child(4) { bottom: -4px; right: -4px; }
/* Smaller handles on small layers like a text line or a button */
.trip__title > .sel-box i, .btn-primary > .sel-box i { width: 5px; height: 5px; }
.trip__title > .sel-box i:nth-child(odd), .btn-primary > .sel-box i:nth-child(odd) { left: -3px; }
.trip__title > .sel-box i:nth-child(even), .btn-primary > .sel-box i:nth-child(even) { right: -3px; }
.trip__title > .sel-box i:nth-child(-n + 2), .btn-primary > .sel-box i:nth-child(-n + 2) { top: -3px; }
.trip__title > .sel-box i:nth-child(n + 3), .btn-primary > .sel-box i:nth-child(n + 3) { bottom: -3px; }
.sel-box__size { position: absolute; top: calc(100% + 8px); left: 50%; padding: 1px 4px; transform: translateX(-50%); border-radius: 2px; background: var(--fig-select); color: #fff; font-size: 10px; font-weight: 500; white-space: nowrap; }

/* ---------- Earthling: the travel app being designed on the canvas ---------- */
.phone { display: flex; flex-direction: column; gap: 12px; width: 280px; height: 600px; padding: 12px 16px 16px; overflow: hidden; background: #2d3120; color: #f1f3e6; }
/* A scrolling feed drawn at full length, as designers often do in Figma */
.phone--feed { height: auto; }
.phone__status { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; }
.phone__search { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 12px; color: rgba(241, 243, 230, 0.6); }
.phone__mic { width: 22px; height: 22px; border-radius: 50%; background: #e4ff97; }
.phone__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #e4ff97; }

.trips { position: relative; display: flex; flex-direction: column; gap: 10px; }
.trip {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 132px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.55)), var(--photo);
}
.trip--rome { --photo: linear-gradient(150deg, #c9b893, #6f6248); }
.trip--kyoto { --photo: linear-gradient(150deg, #e0a17f, #6b3a33); }
.trip--lisbon { --photo: linear-gradient(150deg, #9fc3d1, #2f5566); }
.trip--paris { --photo: linear-gradient(150deg, #b9a7c9, #4b3f5c); }
.trip__info { display: flex; flex-direction: column; gap: 2px; }
/* Hugs its text so selecting the title layer outlines just the word */
.trip__title { position: relative; align-self: flex-start; font-size: 18px; font-weight: 700; color: #fff; }
.trip__meta { font-size: 11px; opacity: 0.85; }

/* Instance of the library component "Button / Primary" */
.btn-primary { position: relative; padding: 6px 12px; border-radius: 999px; background: #fff; color: #1e1e1e; font-size: 11px; font-weight: 600; white-space: nowrap; }
.btn-primary--block { margin-top: auto; padding: 12px; font-size: 13px; text-align: center; }

.itin__head { display: flex; flex-direction: column; gap: 4px; }
.itin__title { font-size: 20px; font-weight: 700; color: #fff; }
.itin { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.itin li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 12px; }
.itin span { font-size: 10px; font-weight: 600; color: #e4ff97; }

/* Proposed: one outline around every layer the unsent prompt covers.
   Drawn in the agent colour so it never reads as Figma's blue selection,
   and it stays put while the designer selects other layers.
   Place it inside a positioned wrapper around the layers. */
.prompt-scope { position: absolute; inset: -6px; border: 1.5px solid var(--agent); border-radius: 18px; pointer-events: none; }
/* Explored alternative: an outline hugging a single layer instead of the whole group */
.prompt-scope--layer { inset: -3px; border-radius: 16px; }
/* Hovering a mention tints the layer it points to, and the mention fills to match */
.prompt-scope.is-hover { background: color-mix(in srgb, var(--agent) 22%, transparent); }
.mention.is-hover { background: var(--agent); color: #fff; }
/* A change the agent suggests but hasn't made: dashed, because it's only a preview */
.prompt-scope--preview { border-style: dashed; }
/* An outline around a text layer, like Lisbon's title: tight to the word, with its tag beside it so it doesn't cover the text */
.prompt-scope--text { inset: -3px -5px; border-radius: 4px; }
.prompt-scope--text .prompt-scope__tag { top: 50%; left: calc(100% + 4px); transform: translateY(-50%); }
/* A step's preview takes its step's colour (outline and tag both follow --agent) */
.step-preview--2 { --agent: var(--step-2); }
.step-preview--3 { --agent: var(--step-3); }
/* Step 1 renames layers, so each card shows its new name in a tag, like Figma's layer name labels */
.step-tag { position: absolute; top: 8px; right: 8px; padding: 0 5px; border-radius: 4px; color: #fff; font-size: 10px; font-weight: 550; line-height: 16px; white-space: nowrap; }
.step-tag--1 { background: var(--step-1); }
.prompt-scope__tag { position: absolute; top: -9px; left: 10px; padding: 0 5px; border-radius: 4px; background: var(--agent); color: #fff; font-size: 10px; line-height: 16px; font-weight: 550; white-space: nowrap; }

/* ---------- Ideation section ---------- */

/* ---------- Stages: one section each (before, while, after) ---------- */
/* --stage is set on each section: the stage colour from the synthesis matrix */
/* Stage heading: the heading doubles as the map of all three stages.
   The current stage is written in full in ink; the others are short and faded.
   Each stop's dot colour comes from --dot, set inline per stop. */
.ide-stage-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.ide-intro .ide-stage-path { font-size: max(24px, min(clamp(32px, 3.175vw, 48px), 4.1cqi)); }
.ide-stage-path__stop { display: inline-flex; align-items: center; gap: 12px; color: #c4c6cb; }
.ide-stage-path__stop::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); opacity: 0.35; }
.ide-stage-path__stop.is-current { color: var(--text); }
.ide-stage-path__stop.is-current::before { width: 12px; height: 12px; opacity: 1; }
.ide-stage-path__arrow { width: 28px; height: 20px; opacity: 0.25; }

/* ---------- Storytelling layer ----------
   One colour code throughout: coral is how Figma works today, the stage purple is the proposal. */
.ide-section { --today: #d0533f; --today-soft: #fdf1ee; --stage-soft: #f4f2fd; }
.ide-section > .card > .ide-intro { margin: -48px -32px 0; padding: 48px 32px 40px; background: var(--stage-soft); border-bottom: 1px solid color-mix(in srgb, var(--stage) 14%, var(--border)); }
.ide-section > .card > .ide-intro .ide-answers > li { background: #fff; }
.ide-section > .card > .ide-intro .ide-pivot span { background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage) 14%, var(--border)); }

.ide-eyebrow { margin: 0; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stage); }
.ide-intro { gap: 20px; }
.ide-intro .lead { margin: 0; max-width: 820px; }
.ide-intro .lead strong { font-weight: 500; color: var(--ink); }

/* The shift: the problem turns into a question, answered by the three moves the walkthrough then shows */
.ide-pivot { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.ide-pivot::before, .ide-pivot::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.ide-pivot span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--stage-soft); color: var(--stage); font-size: 15px; }
.ide-question { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ide-question > * { margin: 0; }
.ide-question__q { max-width: 680px; font-size: 30px; line-height: 38px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.ide-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ide-answers > li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--stage) 22%, var(--border)); border-radius: 12px; background: var(--stage-soft); }
.ide-answers > li > span { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--stage); }
.ide-answers > li > b { font-size: 15px; line-height: 22px; font-weight: 550; color: var(--ink); }
.ide-answers > li > small { font-size: 13px; line-height: 19px; color: var(--grey); }

/* Chapter markers: numbered, with a hairline running to the edge */
.ide-chapter { display: flex; flex-direction: column; gap: 4px; margin-bottom: -16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.ide-chapter__path { color: var(--muted); font-size: 11px; line-height: 16px; }
.ide-chapter__count { font-variant-numeric: tabular-nums; }
.ide-chapter__label { display: flex; align-items: center; gap: 6px; color: var(--stage); font-size: 13px; line-height: 18px; font-weight: 600; }
.ide-chapter__label .i { width: 14px; height: 14px; flex: none; }

/* ---------- Solution walkthrough: the live prototype, pinned while the page scrolls ----------
   Each scroll step zooms onto one part; a ring picks it out like a Figma selection, and a
   tooltip with an arrow says why it's designed that way. ideation.js drives it. */
/* The case study's card clips with overflow: hidden, which stops the frame from sticking; clip looks the same but allows it */
.card:has(.ide-story) { overflow: clip; }

/* Spaced like the case study's solution block (stack-18) */
.ide-story { display: flex; flex-direction: column; gap: 18px; }

/* Pinned just under the 48px top bar */
.ide-story__sticky { position: sticky; top: 72px; z-index: 1; }
/* Sized so the frame and the progress bar below it always fit in the window */
.ide-story { --story-width: min(100%, calc((100vh - 290px) * 1.6)); }
.ide-story__stage { position: relative; width: var(--story-width); margin: 0 auto; }
/* The frame's top bar: same width, shared stroke, a hairline where it meets the prototype */
.ide-story__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: var(--story-width);
  margin: 0 auto;
  padding: 18px 24px;
  border: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  background: #fff;
}
.ide-story__head > * { margin: 0; }
.ide-story__frame {
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  background: #f5f5f5;
}
/* Drawn on top so the prototype can't cover the stroke; continues the top bar's border */
.ide-story__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* The camera holds the 1440 × 900 prototype; the script moves and scales it to zoom */
.ide-story__camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  transform-origin: 0 0;
  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ide-story__camera iframe {
  position: absolute;
  inset: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.ide-story__camera iframe.is-active { opacity: 1; }
/* Screens written into the page (stage 02) stack the same way */
.ide-story__camera > .ide-story__screen { position: absolute; inset: 0; opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.ide-story__camera > .ide-story__screen.is-active { opacity: 1; }

/* Ring around the part being explained, drawn like a Figma selection (thin line, corner handles)
   and lit by a soft glow. The tag above it names the part, like Figma's selection label. */
.ide-story__rings { position: absolute; inset: 0; pointer-events: none; }
.ide-story__ring {
  --glow: 0 0 0 3px color-mix(in srgb, var(--stage) 18%, transparent), 0 0 28px 6px color-mix(in srgb, var(--stage) 50%, transparent);
  position: absolute;
  border-radius: 2px;
  outline: 1.5px solid var(--stage);
  box-shadow: var(--glow);
  opacity: 0;
  pointer-events: none;
  transition: left 800ms cubic-bezier(0.2, 0.7, 0.2, 1), top 800ms cubic-bezier(0.2, 0.7, 0.2, 1),
              width 800ms cubic-bezier(0.2, 0.7, 0.2, 1), height 800ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 300ms ease;
}
.ide-story__ring.is-on { opacity: 1; }
/* Corner handles: a white square inside a purple one at each corner */
.ide-story__ring::before {
  content: "";
  position: absolute;
  inset: -4.5px;
  background:
    linear-gradient(#fff, #fff) left 1.5px top 1.5px / 5px 5px no-repeat,
    linear-gradient(#fff, #fff) right 1.5px top 1.5px / 5px 5px no-repeat,
    linear-gradient(#fff, #fff) left 1.5px bottom 1.5px / 5px 5px no-repeat,
    linear-gradient(#fff, #fff) right 1.5px bottom 1.5px / 5px 5px no-repeat,
    linear-gradient(var(--stage), var(--stage)) left top / 8px 8px no-repeat,
    linear-gradient(var(--stage), var(--stage)) right top / 8px 8px no-repeat,
    linear-gradient(var(--stage), var(--stage)) left bottom / 8px 8px no-repeat,
    linear-gradient(var(--stage), var(--stage)) right bottom / 8px 8px no-repeat;
}
.ide-story__ring[data-tag]::after {
  content: attr(data-tag);
  position: absolute;
  top: -27px;
  left: -4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--stage);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  font-weight: 550;
  letter-spacing: 0.055px;
  white-space: nowrap;
}
/* One pulse when the ring lands, to pull the eye to it; the glow stays on throughout */
.ide-story__ring.is-arriving { animation: ide-ring-arrive 700ms ease-out 650ms; }
@keyframes ide-ring-arrive {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stage) 45%, transparent), var(--glow); }
  to { box-shadow: 0 0 0 14px color-mix(in srgb, var(--stage) 0%, transparent), var(--glow); }
}

/* Tooltip: what this part is and why it's designed this way */
.ide-story__note {
  position: absolute;
  z-index: 2;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  /* The case study's card: white, hairline border, 12px corners */
  border-radius: 12px;
  background: #fff;
  outline: 1px solid var(--border);
  outline-offset: -1px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: opacity 250ms ease, transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Hidden while the camera moves; it slides in towards the part once the camera has nearly arrived */
.ide-story__note.is-hidden { opacity: 0; transform: translate(var(--enter-x, 0), var(--enter-y, 8px)); transition-duration: 150ms; }
.ide-story__note[data-arrow="left"] { --enter-x: 10px; --enter-y: 0; }
.ide-story__note[data-arrow="right"] { --enter-x: -10px; --enter-y: 0; }
.ide-story__note[data-arrow="up"] { --enter-x: 0; --enter-y: 10px; }
.ide-story__note[data-arrow="down"] { --enter-x: 0; --enter-y: -10px; }
/* The arrow on the tooltip's edge points at the middle of the part */
/* When the part leaves no room inside the frame, the note sits under it, arrow up to the part */
.ide-story__note.is-below { position: relative; width: auto; margin-top: 14px; }
.ide-story__note.is-below[data-arrow="up"]::before { outline: 1px solid var(--border); clip-path: polygon(0 0, 100% 0, 0 100%); }
.ide-story__note[data-arrow]::before { content: ""; position: absolute; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); }
.ide-story__note[data-arrow="up"]::before { top: -6px; left: calc(var(--arrow-x) - 6px); }
.ide-story__note[data-arrow="down"]::before { bottom: -6px; left: calc(var(--arrow-x) - 6px); }
.ide-story__note[data-arrow="left"]::before { left: -6px; top: calc(var(--arrow-y) - 6px); }
.ide-story__note[data-arrow="right"]::before { right: -6px; top: calc(var(--arrow-y) - 6px); }

/* Type from the case study's scale: a small heading, the rationale in ink, points in grey body */
.ide-note__title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 550; letter-spacing: -0.1px; color: var(--ink); }
/* The design rationale, read first */
.ide-note__why { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 20px; font-weight: 550; letter-spacing: -0.0325px; color: var(--ink); }
/* Short points with ticks in the stage colour, for scanning */
.ide-note__points { display: grid; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.ide-note__points li { position: relative; padding-left: 18px; font-size: 13px; line-height: 20px; font-weight: 450; letter-spacing: -0.0325px; color: var(--grey); }
.ide-note__points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--stage); font-weight: 650; }

/* Progress: one quiet continuous line, like a video timeline.
   Each screen is a stretch of the line (wider when it has more steps), named underneath.
   Each step is a slice of that stretch; a small knob sits on the current one. */
.ide-story__progress { --track: #e3e3e8; display: flex; align-items: flex-start; justify-content: center; gap: 18px; margin: 20px auto 0; }
/* Ghost arrows: no fill, border or shadow until hovered */
.ide-progress__step-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -7px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.ide-progress__step-button:not(:disabled):hover { border-color: var(--border); background: #f5f5f7; color: var(--ink); }
.ide-progress__step-button:disabled { opacity: 0.35; cursor: default; }
.ide-progress__chapters { display: flex; gap: 6px; width: min(720px, 76%); }
.ide-progress__chapter { flex: var(--steps) 1 0; display: flex; flex-direction: column; gap: 6px; }
.ide-progress__bars { display: flex; }
/* Each step is a button with a generous hit area around the visible line */
.ide-progress__bar { position: relative; flex: 1; height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer; }
.ide-progress__bar::before { content: ""; display: block; height: 4px; background: var(--track); transition: background 250ms ease; }
.ide-progress__bar:first-child::before { border-radius: 2px 0 0 2px; }
.ide-progress__bar:last-child::before { border-radius: 0 2px 2px 0; }
.ide-progress__bar.is-done::before { background: var(--stage); }
/* The fill runs up to the knob, which sits in the middle of the current step */
.ide-progress__bar.is-current::before { background: linear-gradient(to right, var(--stage) 50%, var(--track) 50%); }
.ide-progress__bar.is-current::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--stage); box-shadow: 0 0 0 3px #fff, 0 1px 3px rgba(0, 0, 0, 0.2); transform: translate(-50%, -50%); }
.ide-progress__chapters.is-at-start .ide-progress__chapter:first-child .ide-progress__bar:first-child::after { content: ""; position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--stage); box-shadow: 0 0 0 3px #fff, 0 1px 3px rgba(0, 0, 0, 0.2); transform: translate(-50%, -50%); }
.ide-progress__label { font-size: 12px; line-height: 18px; font-weight: 450; letter-spacing: -0.0325px; color: var(--muted); white-space: nowrap; transition: color 250ms ease; }
.ide-progress__chapter.is-current .ide-progress__label { color: var(--ink); font-weight: 550; }

/* Steps: the scroll triggers (their text is read by screen readers).
   Pulled up under the pinned stage so the first step starts while the frame is in view. */
.ide-story__steps { position: relative; margin: -40vh 0 0; padding: 0 0 50vh; list-style: none; pointer-events: none; }
.ide-story__steps > li { height: 65vh; }
.ide-story__step-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .ide-story__camera, .ide-story__ring, .ide-story__note, .ide-story__camera iframe, .ide-story__camera > .ide-story__screen { transition: none; }
  .ide-story__ring.is-arriving { animation: none; }
}
/* ---------- Moments: one small step of the designer's journey ---------- */
/* ---------- Phases: mini sections that group moments by what the designer is doing ---------- */
.ide-phases { display: flex; flex-direction: column; gap: 72px; }
.ide-phase { display: flex; flex-direction: column; gap: 32px; }
.ide-phase__head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.ide-phase__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 550; letter-spacing: -0.3px; color: var(--ink); }
/* The closing recap sits after the phases, as far from the last one as the phases are from each other (card gap 40 + 32 = 72) */
.ide-recap { margin-top: 32px; }
.ide-recap .ide-gif { margin: 0; }

.ide-moments { display: flex; flex-direction: column; gap: 48px; margin: 0; padding: 0; list-style: none; }

.ide-moment { display: flex; flex-direction: column; gap: 20px; }
.ide-moment__head { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 8px; max-width: 760px; }
.ide-moment__num { grid-row: span 2; padding-top: 4px; font-size: 13px; line-height: 16px; color: var(--stage); }
.ide-moment__title { font-size: 17px; line-height: 24px; font-weight: 550; letter-spacing: -0.17px; color: var(--ink); }
.ide-moment.is-todo .ide-moment__head { opacity: 0.55; }

/* "Unexplored" badge, same as the synthesis matrix's dashed tokens */
.ide-unexplored {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 36px;
  padding: 10px 12px;
  border-radius: 6px;
  outline: 1px dashed #c9ccd2;
  outline-offset: -1px;
  color: var(--muted);
}
/* A whole stage that hasn't been designed yet: no moment number to line up with */
.ide-unexplored--stage { margin-left: 0; }
.ide-unexplored i {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-style: normal;
}

/* ---------- Options: Figma today, then the ideas compared ---------- */
/* Subgrid keeps every card's sketch and text lined up across the row */
.ide-opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: auto;
  gap: 0 16px;
  margin-left: 36px;
}
/* Figma today beside a single proposal: two halves */
.ide-opts--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Figma today and two ideas: all three side by side in one row */
.ide-opts--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ide-opt {
  position: relative;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  margin-bottom: 16px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}

/* Border sits above the sketch, like the case study's thumbnails */
.ide-opt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--border);
  pointer-events: none;
}
.ide-opt.is-chosen::after { box-shadow: inset 0 0 0 2px var(--brand); }

/* Check mark in the corner of the chosen card, like a picked option */
.ide-chosen-mark { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0, 0, 0, 0.15); }
.ide-chosen-mark svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ide-moment.is-todo .ide-opt { opacity: 0.6; }.ide-opt__visual { display: flex; align-items: center; justify-content: center; padding: 24px 20px; background: #f2f2f2; }
/* A real Figma agent panel (figma-ui.css), shown as a floating crop */
.ide-opt__visual > .ide-figma,
.ide-alt__visual > .ide-figma { width: 100%; max-width: 285px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fig-edge); overflow: hidden; }

/* The real agent panel at its true 285px width, centred on the canvas with a
   little canvas above and below, outlined by the edge line Figma draws between
   panels. No rounded corners or shadow: it's docked, not floating. */
.ide-opts--docked .ide-opt__visual { align-items: stretch; padding: 24px 0; background: var(--fig-canvas); }
.ide-opt__visual > .ide-dock { width: 285px; max-width: none; border-radius: 0; box-shadow: none; border: 1px solid var(--fig-edge); }
/* Same spacing as the prototype's chat once a conversation has started */
.ide-dock .chat__thread { padding-top: 8px; overflow: visible; }

/* A chat panel mid-conversation: shorter gaps than an empty chat, one-line composer */
.ide-thread .chat__thread { flex: none; gap: 12px; padding: 4px 12px 12px; overflow: visible; }
.ide-thread .composer { margin: 0 12px 12px; }
.ide-thread .composer__text { min-height: 0; }
/* A panel that fills its area top to bottom, with the composer at the bottom as in a real chat window */
.ide-opt__visual > .ide-thread--full { align-self: stretch; }
.ide-thread--full .chat__thread { flex: 1; }

/* A slice of the Figma canvas with the Home frame on it */
.ide-opt__visual > .ide-editor { max-width: 285px; }
.ide-editor__canvas { display: flex; justify-content: center; padding: 22px 16px 14px; background: var(--fig-canvas); font-size: 11px; }
/* The phone is drawn at 50%, like zooming out in Figma. Outlines and the
   In prompt tag are doubled first so they still read at full size. */
.ide-editor .phone { zoom: 0.5; }
.ide-editor .phone .prompt-scope { border-width: 3px; }
.ide-editor .phone .prompt-scope__tag { top: -18px; padding: 0 10px; border-radius: 8px; font-size: 20px; line-height: 32px; }
.ide-editor .phone .sel-box { border-width: 2px; }
.ide-editor .phone .sel-box i { width: 12px; height: 12px; border-width: 2px; }
.ide-editor .phone .sel-box i:nth-child(-n + 2) { top: -7px; }
.ide-editor .phone .sel-box i:nth-child(n + 3) { bottom: -7px; }
.ide-editor .phone .sel-box i:nth-child(odd) { left: -7px; }
.ide-editor .phone .sel-box i:nth-child(even) { right: -7px; }

/* Clarifying-question alternatives: a small Lisbon card inside each answer preview */
.msg-preview__thumb .trip { width: 248px; zoom: 0.42; }
/* "Colour and type too": the same card with new colours and a new title font */
.trip--restyled { --photo: linear-gradient(150deg, #f4c27a, #a6452e); }
.trip--restyled .trip__title { font-family: Georgia, serif; font-weight: 400; }
.trip--restyled .btn-primary { background: #e4ff97; }

.ide-opt__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; box-shadow: inset 0 1px 0 var(--border); }
/* The case study's reset stops at h4 */
.ide-opt__body h5 { margin: 0; }
.ide-opt__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ide-opt__id { color: var(--stage); }
.ide-opt--today .ide-opt__id { color: var(--muted); }

/* Status pills, sized like the case study's stage pills */
.ide-pill { padding: 0 6px; border-radius: 999px; font-size: 9px; line-height: 14px; font-weight: 550; letter-spacing: 0.045px; white-space: nowrap; }
.ide-pill--today { background: #f5f5f5; color: var(--grey); }

/* For / Against */
.ide-tradeoffs { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ide-tradeoffs div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
.ide-tradeoffs dt { color: var(--muted); }
.ide-tradeoffs dd { margin: 0; }

/* Verdict: closes each option card in a tinted strip, edge to edge.
   Chosen uses the chosen card's blue, Out a muted red. margin-top: auto pins
   it to the bottom, so the strips line up across a row of cards. */
.verdict-strip[data-verdict="chosen"] { --verdict: var(--brand); }
.verdict-strip[data-verdict="out"] { --verdict: #d4462a; }
.verdict-strip {
  margin: auto -16px -16px;
  padding: 10px 16px 12px;
  border-top: 1px solid color-mix(in srgb, var(--verdict) 25%, white);
  background: color-mix(in srgb, var(--verdict) 7%, white);
  color: var(--ink);
}
.verdict-strip b { display: block; color: var(--verdict); font-weight: 600; }

/* How I chose: one verdict line per option, then the trade-off and what would change it.
   Verdicts and notes share one label column (subgrid) sized to the longest label. */
.ide-how { grid-column: 1 / -1; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; margin-bottom: 16px; padding: 14px 16px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.ide-how > * { grid-column: 1 / -1; }
.ide-how__verdicts, .ide-how__notes { display: grid; grid-template-columns: subgrid; margin: 0; }
.ide-how__verdicts li, .ide-how__notes div { display: contents; }
.ide-how__verdicts { row-gap: 6px; padding: 0; list-style: none; }
.ide-how__verdicts li { color: var(--grey); }
.ide-how__verdicts b { font-weight: 550; color: var(--ink); white-space: nowrap; }
/* Dot colour: green chosen, amber folded into the choice, red ruled out */
.ide-how__verdicts b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--verdict); }
.ide-how__verdicts [data-verdict="chosen"] { --verdict: #14ae5c; color: var(--ink); }
.ide-how__verdicts [data-verdict="part"] { --verdict: #f0a000; }
.ide-how__verdicts [data-verdict="out"] { --verdict: #e03e1a; }
.ide-how__notes { row-gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.ide-how__notes dt { color: var(--muted); }
.ide-how__notes dd { margin: 0; color: var(--ink); }
/* Board columns are narrow: each label sits above its sentence */
body[data-view="board"] .ide-how { grid-template-columns: minmax(0, 1fr); }
body[data-view="board"] .ide-how__verdicts span,
body[data-view="board"] .ide-how__notes dd { margin-bottom: 4px; }

/* The moment playing out in the solution prototype, full width under the options */
.ide-gif { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 14px 16px 16px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.ide-gif img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--border); }

/* ---------- Decision first: Figma today, the chosen idea, then the rest shrunk ---------- */
/* One wrapper keeps a moment at two parts (head + body), so the board view's subgrid still lines up */
.ide-decided { display: flex; flex-direction: column; gap: 16px; margin-left: 36px; }
/* Today on the left, the chosen idea (the prototype GIF) wider on the right */
.ide-decision { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 16px; }
.ide-decision > figure { display: flex; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 5px; background: #fff; }
.ide-decision > .ide-decision__chosen { border: 2px solid var(--brand); }
.ide-decision__caption { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.ide-decision__label { color: var(--brand); }
.ide-decision .ide-opt__visual { flex: 1; }
/* The prototype recording under a decided moment: the column's gap already spaces it */
.ide-decided > .ide-gif { margin: 0; }

/* Ideas that didn't win: why first, then the panel at full size so it can still be read */
.ide-also { display: flex; flex-direction: column; gap: 10px; }
.ide-also__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ide-alt { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 5px; background: #fff; }
.ide-alt__text { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.ide-alt__visual { display: flex; flex: 1; align-items: center; justify-content: center; padding: 24px; border-top: 1px solid var(--border); background: #f2f2f2; }
.ide-switch-if { margin: 0; }
/* Inside a grid of option cards it spans the full row, not one card's width */
.ide-opts > .ide-switch-if { grid-column: 1 / -1; }

/* Board columns are narrow: everything stacks */
body[data-view="board"] .ide-decided { margin-left: 0; }
body[data-view="board"] .ide-decision,
body[data-view="board"] .ide-also__list { grid-template-columns: minmax(0, 1fr); }

.ide-why { padding: 8px 10px; border-radius: 6px; background: color-mix(in srgb, var(--brand) 7%, white); }
.ide-why b { color: var(--brand); }

/* =========================================================
   Component by component: a tab per component, Figma now and Proposed side by side,
   and a pager underneath. ideation.js drives the tabs and the pager.
   ========================================================= */
.ide-comps { display: flex; flex-direction: column; gap: 18px; }
.ide-comps__head { display: flex; flex-direction: column; gap: 6px; }
.ide-comps__head > * { margin: 0; }

/* Same segmented control as the Quick Overview stage picker; six items wrap to two rows */
.ide-comps__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); counter-reset: comp-tab; }
.ide-comps__tabs:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ide-comps__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ide-comps__tab::before { counter-increment: comp-tab; content: counter(comp-tab, decimal-leading-zero); display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f1f1f4; font-size: 10px; }
.ide-comps__tab:hover { background: #f6f6f8; color: var(--grey); }
.ide-comps__tab[aria-selected="true"] { background: color-mix(in srgb, var(--stage, #5b43d6) 10%, #fff); color: var(--stage); }
.ide-comps__tab[aria-selected="true"]::before { background: var(--stage); color: #fff; }

.ide-comp { display: flex; flex-direction: column; gap: 18px; }
.ide-comp[hidden] { display: none; }
.ide-comp__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--ink); }

/* Figma now (grey) and Proposed (lavender) share one stage, side by side */
.ide-comp__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #f2f2f2; }
.ide-comp__half { display: flex; flex-direction: column; margin: 0; padding-top: 16px; }
.ide-comp__half figcaption { display: flex; align-items: center; min-height: 26px; padding: 0 20px; }
.ide-comp__half--p { position: relative; background: color-mix(in srgb, var(--stage, #5b43d6) 12%, white); }
.ide-comp__half--p figcaption { color: var(--stage); }
.ide-comp__half figcaption::before { content: ""; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: currentColor; }
.ide-comp__half--p .ide-opt__visual .ide-figma { box-shadow: 0 12px 32px color-mix(in srgb, var(--stage, #5b43d6) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--stage, #5b43d6) 25%, transparent); }

.ide-comp__view { flex: 1; display: flex; flex-direction: column; }
.ide-comp__view > .ide-opt__visual { flex: 1; background: none; }
.ide-comp__view:not(.ide-opts--docked) > .ide-opt__visual { align-items: flex-start; }
.ide-comp__view.ide-opts--docked > .ide-opt__visual { padding: 24px 0; background: none; }
.ide-comp__pair .ide-opt__visual > .ide-thread { align-self: stretch; }
.ide-comp__pair .ide-thread .chat__thread { flex: 1; }
.ide-comp__pair .ide-opt__visual > .ide-editor { width: auto; max-width: 100%; border: 0; background: none; box-shadow: none !important; }
.ide-comp__pair .ide-editor__canvas { padding: 36px 24px 32px; background: none; }
.ide-comp__pair .ide-editor .phone { zoom: 0.78; border-radius: 14px; overflow: visible; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.14); }
.ide-comp__pair .ide-editor .phone__eyebrow { display: block; margin-bottom: 22px; }
.ide-comp__pair .ide-editor .phone .prompt-scope__tag { top: -13px; padding: 0 7px; border-radius: 6px; font-size: 14px; line-height: 22px; }
.ide-comp__pair .ide-editor .phone .prompt-scope { border-width: 2.5px; }
.ide-comp__pair .ide-editor .frame__label { padding-bottom: 6px; font-size: 11px; font-weight: 500; color: rgba(0, 0, 0, 0.5); }
.ide-comp__pair .agent-step { color: rgba(0, 0, 0, 0.7); }

/* One plain-language line per side, lined up under its half */
.ide-comp__strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ide-comp__strip > div { display: flex; flex-direction: column; gap: 6px; padding: 0 20px; }
.ide-comp__strip > div:first-child { border-left: 2px solid var(--today); }
.ide-comp__strip > div:last-child { border-left: 2px solid var(--stage); }
.ide-comp__strip > div > * { margin: 0; }
.ide-comp__strip > div::before { font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ide-comp__strip > div:first-child::before { content: "The problem"; color: var(--today); }
.ide-comp__strip > div:last-child::before { content: "The fix"; color: var(--stage); }
/* Pager: the same ov-nav as the stage pickers, coloured by the section stage */
.ide-comps__pager { --c: var(--stage, #5b43d6); --t: color-mix(in srgb, var(--c) 10%, white); --l: color-mix(in srgb, var(--c) 24%, white); margin-top: 8px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--border); }

/* Answer cards: FigJam stickies, each with the real Figma panel taped on */
.ans--q .ide-answers > li { --sticky: #dcd0ff; }
.ans--q .ide-answers > li:nth-child(2) { --sticky: #e8e1ff; }
.ans--q .ide-answers > li:nth-child(3) { --sticky: #d2c4ff; }
.ans--q .ide-answers { gap: 22px; padding: 14px 4px 6px; }
.ans--q .ide-answers > li { padding: 16px 18px 20px; border: 0; border-radius: 4px; background: var(--sticky) !important; box-shadow: 0 1px 2px rgba(40, 20, 120, 0.12), 0 8px 18px rgba(40, 20, 120, 0.14); transform: rotate(-1deg); }
.ans--q .ide-answers > li:nth-child(2) { transform: rotate(0.8deg); }
.ans--q .ide-answers > li:nth-child(3) { transform: rotate(-0.4deg); }
.ans--q .ide-answers > li > span { color: #3b2a99; }
.ans--q .ide-answers > li > small { color: #2f2650; }
.q-clip { position: relative; margin-bottom: 12px; padding-bottom: 14px; border-bottom: 1px dashed rgba(59, 42, 153, 0.22); transform: rotate(1.2deg); }
.ans--q .ide-answers > li:nth-child(2) .q-clip { transform: rotate(-1deg); }
.ans--q .ide-answers > li:nth-child(3) .q-clip { transform: rotate(0.8deg); }
.q-tape { position: absolute; z-index: 1; top: -9px; left: 50%; width: 56px; height: 16px; margin-left: -28px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); transform: rotate(-3deg); }
.r-real { margin: 0; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.r-real--typing { border-color: var(--fig-blue); box-shadow: 0 0 0 1px var(--fig-blue), 0 4px 12px rgba(0, 0, 0, 0.08); }
.r-real--typing .composer__send { background: var(--fig-blue); color: #fff; }
.r-real .composer__text { min-height: 0; }
.r-real .composer__ask { border-bottom: 0; }
.r-real .spacer { flex: 1; }
.q-crop { box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; height: 196px; margin: 0 -8px; padding: 4px 8px 8px; overflow: hidden; }
.ide-intro .q-crop { height: auto; }
.ide-intro .ans--q .ide-answers { gap: 26px; padding-top: 18px; }
.ide-intro .ans--q .ide-answers > li { transform-origin: 50% 0; transform: rotate(-2.6deg) translateY(4px); box-shadow: 0 1px 1px rgba(40, 20, 120, 0.08), 0 14px 18px -10px rgba(40, 20, 120, 0.4), 6px 18px 24px -14px rgba(40, 20, 120, 0.25); }
.ide-intro .ans--q .ide-answers > li:nth-child(2) { transform: rotate(1.9deg) translateY(-6px); box-shadow: 0 1px 1px rgba(40, 20, 120, 0.08), 0 14px 18px -10px rgba(40, 20, 120, 0.4), -6px 18px 24px -14px rgba(40, 20, 120, 0.25); }
.ide-intro .ans--q .ide-answers > li:nth-child(3) { transform: rotate(-1.3deg) translateY(10px); }
.ide-intro { container-type: inline-size; }
@container (max-width: 760px) {
  .ide-intro .ans--q .ide-answers { grid-template-columns: minmax(0, 1fr); gap: 32px; width: min(100%, 380px); margin-inline: auto; }
}

/* Stage template (while, after): every tint comes from the section's --stage */
.ide-section--tinted { --stage-soft: color-mix(in srgb, var(--stage) 6%, #fff); }
.ide-section--tinted .ans--q .ide-answers > li { --sticky: color-mix(in srgb, var(--stage) 20%, #fff); }
.ide-section--tinted .ans--q .ide-answers > li:nth-child(2) { --sticky: color-mix(in srgb, var(--stage) 12%, #fff); }
.ide-section--tinted .ans--q .ide-answers > li:nth-child(3) { --sticky: color-mix(in srgb, var(--stage) 27%, #fff); }
.ide-section--tinted .ans--q .ide-answers > li > span { color: color-mix(in srgb, var(--stage) 80%, #000); }
.ide-section--tinted .ans--q .ide-answers > li > small { color: color-mix(in srgb, var(--stage) 25%, #1e1e1e); }
.ide-section--tinted .q-clip { border-bottom-color: color-mix(in srgb, var(--stage) 28%, transparent); }
.ide-tpl-part { display: flex; flex-direction: column; gap: 24px; }
.ide-tpl-part--story { gap: 0; }
.ide-tpl-part--story .ide-story__head { width: 100%; }
.ide-tpl-part--story .ide-slot--frame { aspect-ratio: 1440 / 900; min-height: 0; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px; }
.ide-section--tinted .ide-intro .ans--q .ide-answers > li { box-shadow: 0 1px 1px color-mix(in srgb, var(--stage) 10%, transparent), 0 14px 18px -10px color-mix(in srgb, var(--stage) 40%, transparent), 6px 18px 24px -14px color-mix(in srgb, var(--stage) 25%, transparent); }
.ide-section--tinted .ide-intro .ans--q .ide-answers > li:nth-child(2) { box-shadow: 0 1px 1px color-mix(in srgb, var(--stage) 10%, transparent), 0 14px 18px -10px color-mix(in srgb, var(--stage) 40%, transparent), -6px 18px 24px -14px color-mix(in srgb, var(--stage) 25%, transparent); }

/* A dashed slot where a design will go */
.ide-slot { display: grid; place-items: center; min-height: 112px; padding: 12px; border: 1.5px dashed color-mix(in srgb, var(--stage) 40%, transparent); border-radius: 8px; background: rgba(255, 255, 255, 0.7); color: color-mix(in srgb, var(--stage) 75%, #000); font-size: 12px; line-height: 16px; font-weight: 500; text-align: center; }
.ide-slot--frame { min-height: 320px; border-radius: 12px; background: color-mix(in srgb, var(--stage) 3%, #fafafa); font-size: 13px; }

@media (max-width: 820px) {
  .ide-opts--pair, .ide-opts--trio { grid-template-columns: minmax(0, 1fr); }
  .ide-opts, .ide-unexplored { margin-left: 0; }
  .ide-comp__pair, .ide-comp__strip { grid-template-columns: minmax(0, 1fr); }
  .ide-comp__strip { gap: 16px; }
  .ide-answers { grid-template-columns: minmax(0, 1fr); }
  .ide-comps__tabs, .ide-comps__tabs:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .ide-section > .card > .ide-intro { margin: -32px -20px 0; padding: 32px 20px 32px; }
}

/* ---------- Case study: the three stages as folder dividers ---------- */
/* The tab row pins under the page's top bar (--folder-top, set by ideation.js);
   the tab of the stage being read comes to the front, joined to its card. */
.ide-folder { display: flex; flex-direction: column; gap: 8px; }
.ide-folder > .section[id] { scroll-margin-top: calc(var(--folder-top, 40px) + var(--folder-tabs, 56px)); }
.ide-folder > .section > .section-label { display: none; }
.ide-folder__tabs { position: sticky; top: var(--folder-top, 40px); z-index: 5; display: flex; align-items: flex-end; gap: 0; margin-bottom: -8px; padding-top: 12px; background: var(--page-bg); }
.ide-folder__tab { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; margin-bottom: -2px; padding: 9px 18px 11px; border-radius: 12px 12px 0 0; background: color-mix(in srgb, var(--c) 16%, #f4f4f6); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent); color: var(--muted); font-size: 14px; line-height: 20px; letter-spacing: -0.2px; text-decoration: none; transition: transform 0.25s, background 0.25s, color 0.25s; }
.ide-folder__tab + .ide-folder__tab { margin-left: -12px; padding-left: 28px; }
.ide-folder__tab[aria-current] + .ide-folder__tab { z-index: 2; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent), 6px 0 12px -8px rgba(16, 24, 40, 0.28); }
.ide-folder__tab:hover { transform: translateY(3px); color: var(--text); }
.ide-folder__tab i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ide-folder__tab b { overflow: hidden; font-weight: 550; white-space: nowrap; text-overflow: ellipsis; }
/* The blue line under the tabs is the top edge of the selected folder; the current tab sits over it */
.ide-folder__tabs::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; z-index: 3; height: 2px; background: var(--brand); box-shadow: 0 -3px 8px rgba(16, 24, 40, 0.1); }
.ide-folder > .section.is-current > .card { outline: 2px solid var(--brand); outline-offset: -2px; }
.ide-folder__tab[aria-current] { position: relative; z-index: 4; padding-top: 12px; padding-bottom: 14px; background: color-mix(in srgb, var(--c) 6%, #fff); box-shadow: inset 2px 0 var(--brand), inset -2px 0 var(--brand), inset 0 2px var(--brand), -8px 0 14px -8px rgba(16, 24, 40, 0.3), 8px 0 14px -8px rgba(16, 24, 40, 0.3); color: var(--text); transform: none; }
.ide-folder .ide-story__sticky { top: calc(var(--folder-top, 40px) + var(--folder-tabs, 56px) + 16px); }

@media (max-width: 760px) {
  .ide-folder__tab { padding: 10px 12px; font-size: 13px; }
}

/* ---------- Stage 02: while the agent acts ---------- */
/* =========================================================
   Stage 02 · While the agent acts
   Wireframe pieces this stage needs on top of shared.css and ideation.css.
   Everything stays greyscale with --wf-accent for the element being explored.
   ========================================================= */

/* Nothing is chosen yet, so options close on an open verdict */
#ideation-during .verdict-strip[data-verdict="open"] { --verdict: var(--stage); }
#ideation-during .verdict-strip[data-verdict="explored"] { --verdict: rgba(0, 0, 0, 0.45); }

/* A slice of canvas: the Home frame with the trip cards */
.wf-canvas { position: relative; width: 100%; gap: 8px; padding: 22px 12px 12px; background: #f5f5f5; }
.wf-canvas > .wf-label { position: absolute; top: 5px; left: 12px; }
.wf-canvas .wf-card { position: relative; }

/* The agent's cursor, drawn like a collaborator's in multiplayer */
.wf-cursor { position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; }
.wf-cursor svg { width: 12px; height: 12px; fill: var(--wf-accent); }
.wf-cursor span { margin-top: 9px; padding: 0 5px; border-radius: 3px; background: var(--wf-accent); color: #fff; font-size: 9px; line-height: 14px; }

/* Canvas feedback while the checklist ticks off, on the real Figma canvas.
   The visual is the canvas itself, with no window around it. The phone is drawn at 75%,
   so sizes inside it are divided by 0.75 to land at their on-screen size. */
.ide-opt__visual--cv { align-items: center; padding: 40px 20px 28px; background: var(--fig-canvas); background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px); background-size: 12px 12px; }
.ide-opt__visual > .cv { width: auto; max-width: none; border-radius: 0; box-shadow: none; overflow: visible; font-size: 11px; }
.cv .frame__label { padding-bottom: 6px; color: rgba(0, 0, 0, 0.55); font-size: 11px; font-weight: 500; }
.cv .phone { zoom: 0.75; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 12px 32px rgba(0, 0, 0, 0.14); }
.cv .btn-primary.cv-btn--new { background: #315edb; color: #fff; }
.cv .btn-primary.cv-btn--live { background: #dbe4fb; color: #315edb; box-shadow: inset 0 0 0 2px #315edb; }

/* A: the layer being edited, outlined in the agent colour with the step label on its corner, like a multiplayer selection */
.cv .cv-live { box-shadow: 0 0 0 3px var(--agent); animation: cv-pulse 1.6s ease-out infinite; }
.cv-tag { position: absolute; bottom: 100%; left: -3px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 3px; padding: 0 8px; border-radius: 5px 5px 5px 0; background: var(--agent); color: #fff; font-size: 13px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.cv-spin { width: 10px; height: 10px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: plan-spin 0.9s linear infinite; }

/* B: one marker per step on each layer, ticking off with the plan */
.cv-pins { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(4px); }
.cv-pins i { position: relative; display: grid; box-sizing: border-box; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #fff; color: var(--fig-text-3); font-size: 11px; font-style: normal; font-weight: 650; }
.cv-pins i.is-done { background: #14ae5c; color: #fff; }
.cv-pins i.is-on { color: var(--agent); }
.cv-pins i.is-on::before { content: ""; position: absolute; inset: 0; border: 2.5px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); border-radius: 50%; animation: plan-spin 0.9s linear infinite; }

/* C: the old value as a faded ghost above the new one */
.cv-diff { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cv .cv-ghost { opacity: 0.55; text-decoration: line-through; }
.cv-arrow { color: #fff; font-size: 14px; font-weight: 700; line-height: 14px; }

/* D: the agent as a multiplayer cursor */
.cv-cursor { position: absolute; z-index: 2; top: 82px; left: calc(100% - 104px); pointer-events: none; }
.cv-cursor svg { display: block; width: 18px; height: 18px; fill: var(--agent); stroke: #fff; stroke-width: 0.6; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.cv-cursor b { position: absolute; left: 12px; bottom: 100%; margin-bottom: -4px; padding: 0 8px; border-radius: 0 5px 5px 5px; background: var(--agent); color: #fff; font-size: 13px; font-weight: 600; line-height: 22px; white-space: nowrap; }

@keyframes cv-pulse { 0% { box-shadow: 0 0 0 3px var(--agent), 0 0 0 3px color-mix(in srgb, var(--agent) 40%, transparent); } 100% { box-shadow: 0 0 0 3px var(--agent), 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .cv .cv-live, .cv-spin, .cv-pins i.is-on::before { animation: none; } }

/* Done, editing now, queued */
.wf-card.is-done { opacity: 0.6; }
.wf-card.is-queued { border-style: dashed; border-color: var(--wf-accent); }
.wf-card .wf-tag--queued { background: #fff; color: var(--wf-accent); box-shadow: inset 0 0 0 1px var(--wf-accent); }

/* Canvas following the agent: a viewport frame drawn around what's on screen */
.wf-follow { position: absolute; inset: 4px; border: 2px solid var(--wf-accent); border-radius: 6px; pointer-events: none; }
.wf-follow span { position: absolute; top: -9px; right: 8px; padding: 0 5px; border-radius: 3px; background: var(--wf-accent); color: #fff; font-size: 9px; line-height: 14px; }

/* Today's rotating status line */
.wf-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.wf-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--wf-line); border-top-color: var(--wf-ink); }
.wf-status s { text-decoration: none; opacity: 0.45; }

/* Plan steps as progress */
.wf-step__state { display: inline-grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; font-size: 8px; font-style: normal; }
.wf-step--done > i.wf-step__state { background: var(--wf-ink); color: #fff; }
.wf-step--running > i.wf-step__state { border: 1.5px solid var(--wf-accent); border-top-color: transparent; }
.wf-step--queued > i.wf-step__state { border: 1px solid var(--wf-line); }
.wf-step--running > span:first-of-type { color: var(--wf-accent); font-weight: 600; }
.wf-step--queued > span { color: var(--muted); }
.wf-step--skipped > span:first-of-type { color: var(--muted); text-decoration: line-through; }
.wf-step .wf-btn--sm { justify-self: end; }
.wf-step--act { grid-template-columns: 12px minmax(0, 1fr) auto; }
.wf-step--act > .wf-btn { grid-column: 3; grid-row: 1 / span 2; align-self: center; }

/* One-line progress bar pinned in the composer */
.wf-progress { display: flex; flex-direction: column; gap: 5px; align-self: stretch; }
.wf-progress__track { height: 4px; border-radius: 2px; background: var(--wf-fill); box-shadow: inset 0 0 0 1px var(--wf-line); overflow: hidden; }
.wf-progress__track i { display: block; width: 45%; height: 100%; background: var(--wf-accent); }

/* Live change feed: one row per edit, visible on the canvas or not */
.wf-feed { display: flex; flex-direction: column; align-self: stretch; margin: 2px 0 0 18px; border-left: 1px solid var(--wf-line); }
.wf-feed > div { padding: 2px 0 2px 8px; font-size: 10px; }
.wf-feed del { color: var(--muted); }
.wf-feed ins { text-decoration: none; color: var(--wf-accent); font-weight: 600; }
.wf-feed .is-new { background: color-mix(in srgb, var(--wf-accent) 8%, white); }
.wf-feed .is-warn { box-shadow: inset 2px 0 0 var(--wf-ink); }
.wf-feed .is-warn b { color: var(--ink); }

/* Badges pinned to a layer on the canvas */
.wf-badge { position: absolute; top: -8px; right: 6px; padding: 0 5px; border-radius: 3px; background: var(--wf-accent); color: #fff; font-size: 9px; line-height: 14px; }
.wf-badge + .wf-badge { right: 62px; }
.wf-badge.is-fading { opacity: 0.4; }

/* Layers panel rows */
.wf-layers { gap: 2px; padding: 8px; }
.wf-layer { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 3px; }
.wf-layer--child { padding-left: 16px; }
.wf-layer em { margin-left: auto; font-size: 9px; font-style: normal; color: var(--wf-accent); }
.wf-layer.is-changed { background: color-mix(in srgb, var(--wf-accent) 8%, white); }
.wf-layer.is-changed::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wf-accent); }

/* A layer the agent holds while it works */
.wf-lock { position: absolute; top: -8px; right: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: 3px; background: var(--wf-ink); color: #fff; font-size: 9px; line-height: 14px; }

/* Something the plan didn't say would happen */
.wf-box.wf-warn { display: flex; flex-direction: column; gap: 2px; border-width: 1.5px; border-color: var(--wf-ink); }
.wf-warn b { color: var(--ink); }

/* A message from the designer, queued while the agent works */
.wf-bubble { align-self: flex-end; max-width: 85%; padding: 4px 8px; border-radius: 8px 8px 2px 8px; background: var(--wf-fill); border: 1px solid var(--wf-line); }
.wf-bubble--queued { border-style: dashed; border-color: var(--wf-accent); }

/* Step states legend: one small box per state, full width above the variations */
.dur-states { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.dur-states .wf { gap: 4px; padding: 10px; }
.dur-state { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; font-size: 9px; font-style: normal; }
.dur-state--queued { border: 1px solid var(--wf-line); }
.dur-state--working { border: 1.5px solid var(--wf-accent); border-top-color: transparent; }
.dur-state--done { background: var(--wf-ink); color: #fff; }
.dur-state--rolled { border: 1.5px solid var(--wf-ink); color: var(--wf-ink); font-weight: 700; }
.dur-state--skipped { background: var(--wf-fill); color: var(--muted); }
.dur-variations { grid-column: 1 / -1; margin: 0 0 12px; }
.dur-variations b { color: var(--ink); font-weight: 600; }

/* Agent chat: a thread already under way, so tighter than an empty chat */
.dur-chat .chat__head { height: 40px; padding-left: 12px; }
.dur-chat .chat__thread { flex: 1; gap: 10px; padding: 4px 10px 10px; overflow: visible; }
.dur-chat .msg-user { font-size: 11px; line-height: 16px; }
.dur-chat .composer { margin: 0 10px 10px; }
.dur-chat .composer__input { padding: 8px; gap: 4px; }
.dur-chat .composer__text { min-height: 0; font-size: 11px; }

/* The chat panel on its own, at Figma's docked width */
.ide-opt__visual > .dur-chat { width: 285px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fig-edge); overflow: hidden; }

/* To-do list: a checkbox per step. Checked and struck through when done,
   a spinning ring while working, an empty box while queued. */
.todo { border: 1px solid var(--fig-line); border-radius: 8px; overflow: hidden; font-size: 11px; line-height: 16px; }
.todo__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--fig-line); background: #f9f9f9; }
.todo__head b { font-weight: 550; }
.todo__head span { color: var(--fig-text-2); }
.todo__list { margin: 0; padding: 4px 0; list-style: none; }
.todo__item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; }
.todo__box { display: grid; flex: none; place-items: center; width: 14px; height: 14px; margin-top: 1px; border: 1px solid var(--fig-text-3); border-radius: 4px; }
.todo__box svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.todo__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.todo__text b { font-weight: 550; }
.todo__text small { color: var(--fig-text-2); font-size: 11px; }
.todo__item .plan-btn { padding: 0 6px; }
.todo__item.is-done .todo__box { border-color: #14ae5c; background: #14ae5c; }
.todo__item.is-done .todo__text b { color: var(--fig-text-2); font-weight: 400; text-decoration: line-through; }
.todo__item.is-working { background: color-mix(in srgb, var(--agent) 6%, white); }
.todo__item.is-working .todo__box { border: 2px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); border-radius: 50%; animation: dur-spin 0.9s linear infinite; }
.todo__item.is-working .todo__text b { color: var(--agent); }
@media (prefers-reduced-motion: reduce) { .todo__item.is-working .todo__box { animation: none; } }

/* ---------- Checklist styles to choose from ---------- */
.dur-styles { margin-top: 4px; }
.dur-styles .ide-opt__visual > .dur-chat { width: 100%; max-width: 285px; }
.dur-styles .dur-chat .chat__thread { padding-bottom: 12px; }

/* Style 2: round checks, done stays readable */
.todo--round .todo__box { border-radius: 50%; }
.todo--round .todo__item.is-done .todo__text b { text-decoration: none; color: var(--fig-text-2); }

/* Style 3: numbered stepper joined by a line */
.todo--stepper .todo__item { position: relative; }
.todo--stepper .todo__box { position: relative; z-index: 1; width: 18px; height: 18px; margin-top: -1px; border-radius: 50%; background: #fff; font-size: 10px; color: var(--fig-text-2); }
.todo--stepper .todo__item:not(:last-child)::before { content: ""; position: absolute; top: 22px; bottom: -6px; left: 18px; width: 2px; background: var(--fig-line); }
.todo--stepper .todo__item.is-done::before { background: #14ae5c; }
.todo--stepper .todo__item.is-done .todo__text b { text-decoration: none; }
.todo--stepper .todo__item.is-working { background: none; }
.todo--stepper .todo__item.is-working .todo__box { border: 0; background: var(--agent); color: #fff; animation: none; }

/* Style 4: inline in the reply, no card */
.todo--inline { border: 0; border-radius: 0; }
.todo--inline .todo__head { justify-content: flex-start; gap: 4px; padding: 0 0 4px; border: 0; background: none; }
.todo--inline .todo__head .i { color: var(--fig-text-2); }
.todo--inline .todo__head span { margin-left: 2px; }
.todo--inline .todo__list { padding: 0; }
.todo--inline .todo__item { gap: 6px; padding: 3px 0 3px 2px; }
.todo--inline .todo__box { width: 12px; height: 12px; border-radius: 3px; }
.todo--inline .todo__box svg { width: 10px; height: 10px; }
.todo--inline .todo__item.is-working { background: none; }
.todo--inline .todo__item.is-working .todo__box { border-width: 1.5px; }

/* Style 5: progress bar in the header, state in words on each row */
.todo__progress { height: 3px; background: var(--fig-line); }
.todo__progress i { display: block; height: 100%; background: linear-gradient(90deg, #14ae5c 68%, var(--agent) 68%); }
.todo__state { flex: none; font-size: 10px; font-style: normal; font-weight: 550; color: var(--fig-text-2); }
.todo__item.is-done .todo__state { color: #009951; }
.todo__item.is-working .todo__state { color: var(--agent); }
.todo--status .todo__item.is-done .todo__text b { text-decoration: none; }

/* Style 6: grouped into done, now and up next */
.todo--grouped { padding: 6px 0; }
.todo__group { display: flex; align-items: center; gap: 4px; padding: 2px 10px 6px; border-bottom: 1px solid var(--fig-line); color: #009951; font-weight: 550; }
.todo__group .i { transform: rotate(-90deg); }
.todo__label { display: block; padding: 6px 10px 0; color: var(--fig-text-2); font-size: 10px; font-weight: 550; text-transform: uppercase; letter-spacing: 0.04em; }
.todo__now { border-bottom: 1px solid var(--fig-line); }
.todo__now .todo__item { margin-top: 2px; padding-bottom: 8px; }
.todo--grouped .todo__list { padding: 0; }

/* Style 7: layer chips per step */
.todo__chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.todo__chips i { padding: 0 5px; border-radius: 4px; background: var(--fig-field); color: var(--fig-text-2); font-size: 10px; font-style: normal; line-height: 15px; }
.todo__chips i.is-done { background: #e6f6ee; color: #007a3d; }
.todo__chips i.is-done::before { content: "✓ "; }
.todo__chips i.is-on { background: color-mix(in srgb, var(--agent) 14%, white); color: var(--agent); }
.todo--chips .todo__item.is-done .todo__text b { text-decoration: none; }

/* Style 8: durations */
.todo--time .todo__state { font-variant-numeric: tabular-nums; }
.todo--time .todo__item:not(.is-done):not(.is-working) .todo__state { color: var(--fig-text-3); }
.todo--time .todo__item.is-done .todo__state { color: var(--fig-text-2); }

/* Style 9: a card per step */
.todo-cards { display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 16px; }
.todo-card { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--fig-line); border-radius: 6px; }
.todo-card:not(.is-working) { flex-direction: row; align-items: center; gap: 8px; }
.todo-card b { font-weight: 550; }
.todo-card .todo__box { margin-top: 0; }
.todo-card.is-done { background: #fafafa; }
.todo-card.is-done b { color: var(--fig-text-2); font-weight: 400; }
.todo-card.is-done .todo__box { border-color: #14ae5c; background: #14ae5c; }
.todo-card.is-working { padding: 8px; border-color: color-mix(in srgb, var(--agent) 35%, white); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.todo-card.is-working small { margin-left: 22px; color: var(--fig-text-2); font-size: 11px; }
.todo-card__top { display: flex; align-items: center; gap: 8px; }
.todo-card__top b { flex: 1; }
.todo-card__top .plan-btn { padding: 0 6px; }
.todo-card.is-working .todo__box,
.todo-detail .todo__box { border: 2px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); border-radius: 50%; animation: dur-spin 0.9s linear infinite; }
.todo-card.is-working b, .todo-detail b { color: var(--agent); }
.todo-card__bar { height: 3px; margin: 4px 0 0 22px; border-radius: 2px; background: var(--fig-field); overflow: hidden; }
.todo-card__bar i { display: block; height: 100%; background: var(--agent); }

/* Style 10 and 12: progress ring (conic fill from --p, a percentage) */
.todo-ring { flex: none; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#14ae5c calc(var(--p) * 1%), var(--fig-line) 0); -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px); mask: radial-gradient(circle, transparent 5px, #000 5.5px); }
.todo-ticker { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--fig-line); border-radius: 8px; font-size: 11px; line-height: 16px; }
.todo-ticker .todo__text b { color: var(--agent); }
.todo-ticker .plan-btn { padding: 0 6px; }
.todo-ticker > .i { color: var(--fig-text-2); }
.todo--ring .todo__head { justify-content: flex-start; gap: 8px; }
.todo--ring .todo__head span:last-child { margin-left: auto; }
.todo--ring .todo-ring { width: 14px; height: 14px; -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.5px); mask: radial-gradient(circle, transparent 4px, #000 4.5px); }
.todo--ring .todo__item.is-working { background: none; }

/* Style 11: horizontal stepper */
.todo-dots { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 10px 6px 8px; list-style: none; border-bottom: 1px solid var(--fig-line); }
.todo-dots li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--fig-text-2); font-size: 10px; }
.todo-dots li:not(:last-child)::after { content: ""; position: absolute; top: 8px; left: calc(50% + 11px); right: calc(-50% + 11px); height: 2px; background: var(--fig-line); }
.todo-dots li.is-done::after { background: #14ae5c; }
.todo-dots i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--fig-text-3); border-radius: 50%; background: #fff; font-size: 10px; font-style: normal; }
.todo-dots i svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.todo-dots .is-done i { border-color: #14ae5c; background: #14ae5c; }
.todo-dots .is-working i { border-color: var(--agent); background: var(--agent); color: #fff; }
.todo-dots .is-working span { color: var(--agent); font-weight: 550; }
.todo-detail { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: color-mix(in srgb, var(--agent) 6%, white); }
.todo-detail small { margin-left: 22px; color: var(--fig-text-2); font-size: 11px; }
.todo-detail .todo__box { margin-top: 0; }

/* Run controls on the chosen checklist */
.dur-controls .ide-opt__visual > .dur-chat { width: 100%; max-width: 285px; }
.dur-controls .dur-chat .chat__thread { padding-bottom: 12px; }
.todo__head .plan-btn { padding: 0 6px; font-size: 10px; }
.todo__item { position: relative; align-items: center; }
.todo__item:has(small, .todo__note, .todo__tip, .todo__edit) { align-items: flex-start; }
.todo__item.is-hover { background: var(--fig-field); }
.todo__item.is-working.is-hover { background: color-mix(in srgb, var(--agent) 10%, white); }
.todo__acts { display: flex; flex: none; gap: 4px; }
.todo__act { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border: 1px solid var(--fig-line); border-radius: 4px; background: #fff; color: var(--fig-text); font-size: 10px; font-weight: 550; }
.todo__act .i { width: 12px; height: 12px; }
.todo__item > .todo__act { flex: none; }
.todo__item.is-skipped .todo__box { border-style: dashed; color: var(--fig-text-3); font-size: 10px; }
.todo__item.is-skipped .todo__text b { color: var(--fig-text-3); font-weight: 400; text-decoration: line-through; }
.todo__item.is-rolled { background: #fff7e6; }
.todo__item.is-rolled .todo__box { border: 1.5px solid #b86e00; border-radius: 50%; color: #b86e00; font-size: 9px; font-weight: 700; }
.todo__item.is-rolled .todo__text b { color: #8a5300; }
.todo__item.is-rolled .todo__state { color: #b86e00; }
.todo__item.is-paused .todo__box { border-color: var(--fig-text-2); }
.todo__item.is-paused .todo__state { color: var(--fig-text); }
.todo__banner { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--fig-line); background: #fff7e6; color: #8a5300; font-size: 10px; }
.todo__pause { flex: none; width: 8px; height: 9px; border-inline: 2.5px solid currentColor; }
.todo__tip { align-self: flex-start; white-space: nowrap; margin-top: 4px; padding: 2px 6px; border-radius: 4px; background: #1e1e1e; color: #fff; font-size: 10px; }
.todo__note { align-self: flex-start; margin-top: 3px; padding: 1px 6px; border-left: 2px solid var(--agent); border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--agent) 8%, white); color: var(--fig-text); font-size: 10px; }
.todo__item.is-editing { background: #fff; box-shadow: inset 0 0 0 1px var(--fig-blue); }
.todo__edit { margin-top: 4px; padding: 3px 6px; border-radius: 4px; background: var(--fig-field); color: var(--fig-text-2); font-size: 10px; }
.todo__edit b { color: var(--fig-text); }
.todo__edit i { margin-left: 1px; color: var(--fig-blue); font-style: normal; animation: dur-blink 1s steps(1) infinite; }
.todo__edit-acts { display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px; }
.todo__edit-acts .plan-btn, .todo__ask-acts .plan-btn { padding: 0 6px; font-size: 10px; }
.todo__ask { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--fig-line); background: color-mix(in srgb, var(--agent) 6%, white); font-size: 11px; }
.todo__ask b { font-weight: 550; }
.todo__ask-acts { display: flex; gap: 4px; margin-left: auto; }
.dur-chat:has(.todo__menu), .todo:has(.todo__menu) { overflow: visible; }
.todo__menu { position: absolute; z-index: 2; top: calc(100% - 2px); right: 8px; display: flex; flex-direction: column; min-width: 112px; padding: 4px 0; border-radius: 6px; background: #1e1e1e; color: #fff; font-size: 11px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.todo__menu span { padding: 3px 10px; }
.todo__menu span:first-child { background: var(--fig-blue); }
.todo__item:has(.todo__log) { align-items: flex-start; }
.todo__log { display: flex; flex-direction: column; gap: 3px; margin: 5px 0 1px; padding: 0 0 0 8px; border-left: 1px solid color-mix(in srgb, var(--agent) 30%, white); list-style: none; font-size: 10px; line-height: 14px; }
.todo__log li { display: flex; align-items: center; gap: 6px; color: var(--fig-text-2); }
.todo__log li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--fig-text-3); }
.todo__log li.is-done::before { background: #14ae5c; }
.todo__log li.is-on { color: var(--fig-text); font-weight: 550; }
.todo__log li.is-on::before { background: var(--agent); animation: dur-blink 1s steps(1) infinite; }
.todo__log span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo__log em { display: flex; flex: none; align-items: center; gap: 3px; color: var(--fig-text-2); font-style: normal; font-weight: 400; }
.todo__log em i { width: 9px; height: 9px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; }
/* Polished base panel */
.ide-opt__visual > .dur-live { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07), 0 0 0 1px var(--fig-edge); border-radius: 10px; }
.dur-live .chat__head { height: 44px; border-bottom: 1px solid var(--fig-line); }
.dur-live__status { display: flex; align-items: center; gap: 5px; color: var(--agent) !important; font-weight: 500; }
.dur-live__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--agent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--agent) 40%, transparent); animation: dur-pulse 1.6s ease-out infinite; }
.dur-live .chat__thread { gap: 8px; padding-top: 12px; }
.dur-live .msg-user { padding: 6px 10px; border-radius: 10px 10px 2px 10px; }
.dur-live__reply { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--fig-text-2); }
.dur-live__reply .i { width: 14px; height: 14px; color: var(--agent); }
.dur-live .todo { border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.dur-live .todo__head { padding: 8px 10px 6px; border: 0; background: none; }
.dur-live .todo__head span { font-variant-numeric: tabular-nums; }
.dur-live__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 0 10px 8px; border-bottom: 1px solid var(--fig-line); }
.dur-live__bar i { height: 3px; border-radius: 2px; background: var(--fig-field); }
.dur-live__bar i.is-done { background: #14ae5c; }
.dur-live__bar i.is-on { background: linear-gradient(90deg, var(--agent) 66%, color-mix(in srgb, var(--agent) 25%, white) 66%); }
.dur-live .todo__list { padding: 2px 0; }
.dur-live .todo__item { min-height: 28px; padding: 6px 10px; }
.dur-live .todo__item:not(.is-done):not(.is-working) .todo__state { color: var(--fig-text-3); font-weight: 450; }
.dur-live .todo__item.is-working { background: color-mix(in srgb, var(--agent) 5%, white); box-shadow: inset 2px 0 0 var(--agent); }
.dur-live .todo__item.is-working .todo__state { font-variant-numeric: tabular-nums; }
.dur-live .todo__log { margin: 6px 0 2px -15px; padding-left: 14px; border-left-color: color-mix(in srgb, var(--agent) 25%, white); gap: 4px; }
.dur-live .todo__log li.is-on::before { width: 7px; height: 7px; margin-left: -1px; border: 1.5px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); background: none; box-sizing: border-box; animation: dur-spin 0.9s linear infinite; }
.dur-live .todo__log li.is-on em { color: var(--agent); }
.dur-live .todo__foot { justify-content: space-between; align-items: center; background: #fcfcfc; border-radius: 0 0 10px 10px; }
.dur-live__time { color: var(--fig-text-2); font-size: 10px; font-variant-numeric: tabular-nums; }
.dur-live .composer { border-radius: 10px; }
.dur-live .todo__item:has(> .todo__log, > [class^="lx-"]) { flex-wrap: wrap; align-items: center; row-gap: 0; }
.dur-live .todo__item > .todo__log { flex-basis: 100%; margin: 6px 0 2px 7px; padding-left: 14px; }
.dur-live .todo__item > [class^="lx-"] { flex-basis: 100%; margin: 6px 0 2px 22px; }

/* Chosen panel, built from the plan components in solution.html */
.ide-opt__visual > .dur-run { width: 100%; max-width: 285px; }
.dur-run .chat__head, .dur-live .chat__head { height: auto; min-height: 48px; padding: 10px 10px 10px 14px; }
.dur-run .chat__head { border-bottom: 1px solid var(--fig-line); }
.dur-run .chat__thread { gap: 12px; padding: 12px 14px; }
.dur-run .msg-user { font-size: 11px; line-height: 18px; }
.dur-run .msg-agent { font-size: 11px; line-height: 16px; }
.dur-run .composer { margin: 0 14px 14px; }
.dur-run .composer__text { min-height: 0; font-size: 11px; }

/* Live log variations */
.dur-logs { margin-top: 4px; }
.dur-logs .ide-opt__visual > .dur-chat { width: 100%; max-width: 285px; }
.dur-logs .dur-chat .chat__thread { padding: 10px 10px 12px; }
.todo__log--values em { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; }
.todo__log--values s { color: var(--fig-text-3); }
.lx-spin { flex: none; width: 8px; height: 8px; border: 1.5px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); border-radius: 50%; animation: dur-spin 0.9s linear infinite; }
.lx-diff { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--agent) 18%, white); border-radius: 6px; background: #fff; font-size: 10px; }
.lx-diff__row { display: flex; align-items: center; gap: 5px; color: var(--fig-text-2); }
.lx-diff__row > span:first-child { width: 22px; color: var(--fig-text); font-weight: 550; }
.lx-diff__row s, .lx-diff__new { display: inline-flex; align-items: center; gap: 3px; }
.lx-diff__row s { color: var(--fig-text-3); }
.lx-diff__new { color: var(--fig-text); font-weight: 550; }
.lx-diff i, .lx-chip i, .lx-latest i[style] { flex: none; width: 9px; height: 9px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; }
.lx-diff__layers { display: flex; gap: 8px; color: var(--fig-text-2); }
.lx-diff__layers span::before { content: "○ "; color: var(--fig-text-3); }
.lx-diff__layers .is-done::before { content: "✓ "; color: #14ae5c; }
.lx-diff__layers .is-on { color: var(--agent); font-weight: 550; }
.lx-diff__layers .is-on::before { content: "◌ "; color: var(--agent); }
.lx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 4px; border: 1px solid var(--fig-line); border-radius: 999px; background: #fff; font-size: 10px; line-height: 15px; }
.lx-chip.is-on { border-color: color-mix(in srgb, var(--agent) 35%, white); color: var(--agent); font-weight: 550; }
.lx-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lx-preview figure { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; padding: 6px 0 4px; border: 1px solid var(--fig-line); border-radius: 6px; background: #fff; }
.lx-preview i { position: relative; width: 38px; height: 12px; border-radius: 3px; background: #9aa3af; overflow: hidden; }
.lx-preview .is-done i { background: var(--c); }
.lx-preview .is-on { border-color: var(--agent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent) 15%, transparent); }
.lx-preview .is-on i::after { content: ""; position: absolute; inset: 0; background: var(--c); animation: lx-fill 1.8s ease-in-out infinite; }
.lx-preview figcaption { color: var(--fig-text-2); font-size: 9.5px; }
.lx-preview .is-on figcaption { color: var(--agent); font-weight: 550; }
.lx-tools { display: flex; flex-direction: column; gap: 3px; margin-left: -2px; padding: 0; list-style: none; font-size: 10px; line-height: 14px; }
.lx-tools li { display: flex; align-items: center; gap: 5px; color: var(--fig-text-2); }
.lx-tools .i { width: 12px; height: 12px; flex: none; }
.lx-tools b { color: var(--fig-text); font-weight: 500; }
.lx-tools .is-on { color: var(--agent); }
.lx-tools .is-on b { color: var(--agent); font-weight: 550; }
.lx-stream { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 6px; background: #1e1e1e; color: #d4d4d4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; line-height: 13px; }
.lx-stream span::before { content: "› "; color: #6b6b6b; }
.lx-stream .is-done::after { content: " ✓"; color: #4ade80; }
.lx-stream .is-on { color: #fff; }
.lx-stream .is-on i { display: inline-block; width: 5px; height: 10px; vertical-align: -1px; background: #c4a5ff; animation: dur-blink 1s steps(1) infinite; }
.lx-latest { display: flex; flex-direction: column; gap: 3px; font-size: 10px; line-height: 14px; }
.lx-latest__now { display: flex; align-items: center; gap: 6px; font-weight: 550; }
.lx-latest__now em { display: flex; align-items: center; gap: 3px; margin-left: auto; color: var(--fig-text-2); font-style: normal; font-weight: 400; }
.lx-latest__more { color: var(--fig-text-2); padding-left: 14px; }
.lx-latest__more u { margin-left: 4px; color: var(--fig-blue-text, var(--fig-blue)); text-decoration: none; }
.lx-narrate { margin: 0; color: var(--fig-text-2); font-size: 10.5px; line-height: 15px; }
.lx-narrate b { color: var(--fig-text); font-weight: 550; }
@keyframes lx-fill { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(0); } }
@keyframes dur-pulse { 70% { box-shadow: 0 0 0 5px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.todo__foot { display: flex; justify-content: flex-end; padding: 6px 10px; border-top: 1px solid var(--fig-line); }
.todo__stop { gap: 5px; padding: 0 8px; font-size: 10px; }
.todo__stop i { width: 7px; height: 7px; border-radius: 1.5px; background: currentColor; }
@keyframes dur-blink { 50% { opacity: 0; } }

/* Floating progress pill on the canvas, dark like Figma's own canvas toasts */
.dur-hud { position: absolute; left: 50%; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 3px 3px 3px 8px; transform: translateX(-50%); border-radius: 999px; background: #1e1e1e; color: #fff; font-size: 10px; line-height: 16px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
/* In the chat panel: pinned above the composer, full width, so it stays put while the thread scrolls */
.dur-hud--docked { position: static; transform: none; margin: 0 10px 8px; box-shadow: none; }
.dur-hud--docked > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.dur-hud__spin { width: 10px; height: 10px; border: 1.5px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: dur-spin 1s linear infinite; }
@keyframes dur-spin { to { transform: rotate(360deg); } }
.dur-hud__bar { display: flex; gap: 2px; }
.dur-hud__bar i { width: 10px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); }
.dur-hud__bar .is-done { background: #14ae5c; }
.dur-hud__bar .is-on { background: var(--agent); }
.dur-hud__stop { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-weight: 550; }
@media (prefers-reduced-motion: reduce) {
  .dur-hud__spin { animation: none; }
}

/* The open question each moment leaves */
.dur-todo { grid-column: 1 / -1; margin: 0 0 8px; padding: 10px 14px; border-radius: 5px; background: #fff; box-shadow: inset 3px 0 0 var(--stage), inset 0 0 0 1px var(--border); }
.dur-todo span { color: var(--stage); font-weight: 600; margin-right: 6px; }

/* Plans sit outside .wf, so they need the wireframe's type size */
.wf-plan { font-size: 11px; line-height: 1.4; color: var(--wf-ink); }

/* Wireframes fill their option card at the same width as the Figma panel */
.ide-opt__visual > .wf { width: 100%; max-width: 285px; }
#ideation-during .ide-opt__visual { align-items: flex-start; }
/* ---------- Per-edit log: every edit the agent makes, written down as it lands ----------
   Built from the plan components in figma-ui.css, so it reads like the plan in solution.html.
   Each edit is a plan step: its number turns into a check, and the status slot holds the time. */
.elog .plan__head span { font-variant-numeric: tabular-nums; }
.elog-step { padding: 6px 10px; }
.elog-step .plan-step__status--applied { color: var(--fig-text-3); font-weight: 450; font-variant-numeric: tabular-nums; }
.elog-step.is-new { background: color-mix(in srgb, #14ae5c 6%, white); }
.elog-step.is-hover { background: var(--fig-field); }
.elog-step .plan-step__undo { margin-left: 6px; }
#ideation-during .plan-step__change s:has(> i:only-child) { text-decoration: none; opacity: 0.8; }

/* A, C, D, E, F: the plan folds to a single line above the log */
.elog-plan .plan-foot { padding: 6px 10px; }
.elog-plan + .elog, .elog-plan + .elog-said { margin-top: 8px; }

/* B: each edit of the running step, nested under its change */
.elog-sub { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0 22px; padding: 0; list-style: none; font-size: 10px; line-height: 15px; }
.elog-sub__row { display: flex; align-items: center; gap: 6px; color: var(--fig-text-2); }
.elog-sub__row i { box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: #14ae5c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.8 5.2l1.5 1.5 3-3.2' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.elog-sub__row span { flex: 1; color: var(--fig-text); }
.elog-sub__row em { color: var(--fig-text-3); font-style: normal; font-variant-numeric: tabular-nums; }
.elog-sub__row.is-on i { border: 1.5px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); background: none; animation: plan-spin 0.9s linear infinite; }
.elog-sub__row.is-on :is(span, em) { color: var(--agent); }

/* C: Plan | Edits switch under the header, like Figma's segmented control */
.elog-tabs { display: flex; gap: 2px; margin: 8px 14px 0; padding: 2px; border-radius: 6px; background: var(--fig-field); font-size: 11px; }
.elog-tabs span { display: flex; flex: 1; align-items: center; justify-content: center; gap: 4px; padding: 3px 0; border-radius: 4px; color: var(--fig-text-2); }
.elog-tabs [aria-selected="true"] { background: #fff; color: var(--fig-text); font-weight: 550; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.elog-tabs i { padding: 0 4px; border-radius: 999px; background: var(--agent); color: #fff; font-size: 9px; font-style: normal; line-height: 13px; }

/* E: narrated, one sentence per edit */
.elog-said { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.elog-said__item { position: relative; padding-left: 12px; color: var(--fig-text); font-size: 11px; line-height: 16px; }
.elog-said__item::before { content: ""; position: absolute; top: 6px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #14ae5c; }
.elog-said__item b { font-weight: 550; }
.elog-said__item ins { display: inline-flex; align-items: center; gap: 3px; color: #14ae5c; text-decoration: none; vertical-align: bottom; }
.elog-said__item ins i { width: 8px; height: 8px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; }
.elog-said__item.is-on { color: var(--fig-text-2); }
.elog-said__item.is-on::before { box-sizing: border-box; top: 5px; width: 7px; height: 7px; border: 1.5px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); background: none; animation: plan-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .elog-sub__row.is-on i, .elog-said__item.is-on::before { animation: none; } }

/* ---------- Per-edit log alongside the plan: a slice of the Figma window ----------
   Canvas on the left, the chat with the running plan on the right, as in solution.html.
   The phone is drawn at 62%, so sizes inside it are divided by 0.62 to land at their on-screen size. */
.lw-intro { margin: 8px 0 12px 36px; }
.lw-intro b { color: var(--fig-text); font-weight: 600; }
#ideation-during .ide-opts--wide { grid-template-columns: minmax(0, 1fr); }
.ide-opt__visual--lw { align-items: stretch; padding: 24px; }
.lw { display: grid; grid-template-columns: minmax(0, 1fr) 285px; width: 100%; height: 600px; overflow: hidden; border-radius: 8px; background: var(--fig-panel); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fig-edge); font-size: 11px; }
.lw--layers { grid-template-columns: 220px minmax(0, 1fr) 285px; }
.lw__canvas { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; background: var(--fig-canvas); background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px); background-size: 12px 12px; }
.lw .cv .phone { zoom: 0.62; }
.lw__chat { min-height: 0; overflow: hidden; border-left: 1px solid var(--fig-edge); }

/* G: the log as its own floating panel, top right of the canvas */
.lw--float .lw__canvas { justify-content: flex-start; padding-left: 48px; }
.lw-float { position: absolute; top: 14px; right: 14px; width: 244px; margin: 0; background: var(--fig-panel); box-shadow: var(--fig-toolbar-shadow); }
.lw-float .plan__head .icon-btn { width: 20px; height: 20px; margin: -4px -6px -4px 2px; }

/* H: a note beside each card. Written at 1/0.62 so the note lands at true size. */
.lw--pins .lw__canvas { justify-content: flex-start; padding-left: 40px; }
.lw--pins .phone, .lw--pins .trips { overflow: visible; }
.lw-pin { position: absolute; top: 50%; left: calc(100% + 66px); display: flex; flex-direction: column; gap: 3px; width: 290px; padding: 9px 13px; transform: translateY(-50%); border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 0 1.5px rgba(0, 0, 0, 0.06); color: var(--fig-text); font-size: 17px; line-height: 26px; }
.lw-pin::before { content: ""; position: absolute; top: 50%; right: 100%; width: 50px; border-top: 2px dashed color-mix(in srgb, var(--agent) 55%, white); }
.lw-pin p { display: flex; align-items: center; gap: 8px; margin: 0; }
.lw-pin span { flex: 1; white-space: nowrap; }
.lw-pin s { color: #e03e1a; }
.lw-pin ins { display: inline-flex; align-items: center; gap: 5px; color: #14ae5c; text-decoration: none; }
.lw-pin ins i { width: 13px; height: 13px; border-radius: 3px; }
.lw-pin em { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--fig-field); color: var(--fig-text-2); font-size: 13px; font-style: normal; font-weight: 600; }
.lw-pin p.is-on { color: var(--agent); }
.lw-pin p.is-on ins { color: var(--agent); }
.lw-pin p.is-on em { background: color-mix(in srgb, var(--agent) 12%, white); color: var(--agent); }
.lw-ok, .lw-spin { flex: none; box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; }
.lw-ok { background: #14ae5c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.8 5.2l1.5 1.5 3-3.2' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.lw-spin { border: 2.5px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); animation: plan-spin 0.9s linear infinite; }

/* I: a timeline bar along the bottom of the canvas, one tick per edit */
.lw--time .lw__canvas { align-items: flex-start; padding-top: 44px; }
.lw-time { position: absolute; right: 14px; bottom: 14px; left: 14px; display: flex; align-items: flex-end; gap: 12px; padding: 8px 10px 10px 12px; border-radius: 10px; background: var(--fig-panel); box-shadow: var(--fig-toolbar-shadow); }
.lw-time__clock { padding-bottom: 1px; color: var(--fig-text-2); font-variant-numeric: tabular-nums; }
.lw-time__track { display: flex; flex: 1; gap: 6px; }
.lw-seg { flex: 1; }
.lw-seg > p { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; color: var(--fig-text-2); font-size: 10px; line-height: 14px; }
.lw-seg > p b { display: grid; width: 14px; height: 14px; place-items: center; border-radius: 50%; background: var(--fig-field); color: var(--fig-text-2); font-size: 9px; }
.lw-seg:nth-child(-n + 2) > p { color: var(--fig-text); }
.lw-seg:nth-child(1) > p b { background: #14ae5c; color: #fff; }
.lw-seg:nth-child(2) > p b { background: var(--agent); color: #fff; }
.lw-seg__ticks { display: flex; gap: 3px; height: 18px; padding: 3px; border-radius: 5px; background: var(--fig-field); }
.lw-seg__ticks > i { position: relative; flex: 1; border-radius: 3px; background: rgba(0, 0, 0, 0.08); }
.lw-seg__ticks > i.is-done { background: #14ae5c; }
.lw-seg__ticks > i.is-on { background: repeating-linear-gradient(-45deg, var(--agent) 0 4px, color-mix(in srgb, var(--agent) 55%, white) 4px 8px); }
.lw-seg__ticks > i.is-hover { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #14ae5c; }
.lw-tip { position: absolute; bottom: calc(100% + 34px); left: 50%; width: 190px; padding: 8px 10px; transform: translateX(-50%); border-radius: 8px; background: var(--fig-panel); box-shadow: var(--fig-toolbar-shadow); font-style: normal; }
.lw-tip::after { content: ""; position: absolute; top: 100%; left: 50%; width: 8px; height: 8px; transform: translate(-50%, -4px) rotate(45deg); background: var(--fig-panel); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.06); }
.lw-tip__head { display: flex; justify-content: space-between; margin: 0 0 2px; }
.lw-tip__head b { font-weight: 550; }
.lw-tip__head span { color: var(--fig-text-3); font-variant-numeric: tabular-nums; }
.lw-tip .plan-step__change { margin: 0 0 4px; padding: 0; }
.lw-tip .plan-step__undo { margin: 0; }

/* J: edits marked in the Layers panel */
.lw-layers { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--fig-edge); }
.lw-layers__head { display: flex; align-items: center; justify-content: space-between; height: 40px; margin: 0; padding: 0 12px; border-bottom: 1px solid var(--fig-line); }
.lw-layers__head b { font-weight: 550; }
.lw-layers__head span { color: var(--agent); font-weight: 500; }
.lw-layers ol { margin: 0; padding: 6px 0; list-style: none; }
.lw-layer__row { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 calc(12px + var(--d) * 14px); color: var(--fig-text); }
.lw-layer__row .i { flex: none; width: 16px; height: 16px; color: var(--fig-text-2); }
.lw-layer__row b { flex: 1; font-weight: 450; }
.lw-layer.is-open > .lw-layer__row b { font-weight: 550; }
.lw-layer.is-live { background: color-mix(in srgb, var(--agent) 8%, white); box-shadow: inset 2px 0 0 var(--agent); }
.lw-layer.is-live > .lw-layer__row b { color: var(--agent); font-weight: 550; }
.lw-layer .plan-step__change { margin: -4px 0 0; padding: 0 10px 6px calc(34px + var(--d) * 14px); }
.lw-badges { display: flex; gap: 3px; }
.lw-badges i { display: grid; box-sizing: border-box; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: #14ae5c; color: #fff; font-size: 9px; font-style: normal; font-weight: 650; }
.lw-badges i.is-on { position: relative; background: none; color: var(--agent); }
.lw-badges i.is-on::before { content: ""; position: absolute; inset: 0; border: 1.5px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); border-radius: 50%; animation: plan-spin 0.9s linear infinite; }

@media (prefers-reduced-motion: reduce) { .lw-spin, .lw-badges i.is-on::before { animation: none; } }

/* Lighter versions of the floating Edits panel (G1 to G4) */
.lw-chip { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 999px; background: var(--fig-panel); box-shadow: var(--fig-toolbar-shadow); white-space: nowrap; }
.lw-chip .lw-spin { width: 12px; height: 12px; border-width: 1.5px; }
.lw-chip b { color: var(--agent); font-weight: 550; }
.lw-chip span { color: var(--fig-text-2); }
.lw-chip .i { width: 16px; height: 16px; color: var(--fig-text-2); }
.lw-float--lite { width: 220px; }
.lw-prev { opacity: 0.5; }
.lw-more { margin: 0; padding: 6px 10px; border-top: 1px solid var(--fig-line); color: var(--fig-blue-text); font-weight: 550; }
.lw-float .elog-sub { margin-left: 22px; }
.elog-sub.lw-lines { gap: 0; margin: 0; padding: 4px 0; font-size: 11px; line-height: 16px; }
.lw-lines .elog-sub__row { padding: 4px 10px; }
.lw-lines .elog-sub__row i { width: 12px; height: 12px; background-size: 12px; }
.lw-lines small { margin-left: 4px; color: var(--fig-text-2); font-size: 11px; }
.lw-lines .is-on small { color: inherit; }

/* G: edits grouped under the plan's steps. Checked steps fold, and open on click. */
.lw-group > summary { cursor: pointer; list-style: none; }
.lw-group > summary::-webkit-details-marker { display: none; }
.lw-chev { flex: none; width: 16px; height: 16px; margin: 0 -4px 0 2px; color: var(--fig-text-3); transform: rotate(-90deg); transition: transform 0.15s; }
.lw-group[open] .lw-chev { transform: none; }

/* ---------- G, visual variations: the Edits panel as its own component ---------- */
.ide-opt__visual--ev { align-items: flex-start; padding: 28px 16px; background: var(--fig-canvas); background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px); background-size: 12px 12px; }
.ev { width: 100%; max-width: 256px; overflow: hidden; border-radius: 10px; background: var(--fig-panel); box-shadow: var(--fig-toolbar-shadow); color: var(--fig-text); font-size: 11px; line-height: 16px; }
.ev__head { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--fig-line); }
.ev__head b { font-weight: 600; }
.ev__head > span:not(.icon-btn) { flex: 1; color: var(--fig-text-2); font-variant-numeric: tabular-nums; }
.ev__head .icon-btn { width: 22px; height: 22px; }
.ev__foot { margin: 0; padding: 8px 12px; border-top: 1px solid var(--fig-line); color: var(--fig-text-3); }
.ev summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.ev summary::-webkit-details-marker { display: none; }
.ev-chev { flex: none; width: 14px; height: 14px; color: var(--fig-text-3); transform: rotate(-90deg); transition: transform 0.15s; }
.ev details[open] > summary .ev-chev { transform: none; }
.ev ol { margin: 0; padding: 0; list-style: none; }
.ev s { color: #e03e1a; }
.ev ins { color: #14ae5c; text-decoration: none; }
.ev-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.ev-spin { display: inline-block; flex: none; box-sizing: border-box; width: 10px; height: 10px; border: 1.5px solid color-mix(in srgb, var(--agent) 25%, white); border-top-color: var(--agent); border-radius: 50%; animation: plan-spin 0.9s linear infinite; }

/* V1: timeline rail */
.ev1-grp > summary { padding: 9px 12px; }
.ev1-grp > summary b { flex: 1; font-weight: 550; }
.ev1-grp > summary em { color: var(--fig-text-3); font-style: normal; }
.ev1-grp.is-on > summary em { color: var(--agent); }
.ev1-tag { padding: 0 5px; border-radius: 4px; background: var(--fig-field); color: var(--fig-text-2); font-size: 9px; font-weight: 600; line-height: 15px; text-transform: uppercase; letter-spacing: 0.04em; }
.ev1-grp.is-on .ev1-tag { background: color-mix(in srgb, var(--agent) 12%, white); color: var(--agent); }
.ev1-grp + .ev1-grp { border-top: 1px solid var(--fig-line); }
.ev1-rail { position: relative; padding: 0 12px 10px !important; }
.ev1-rail li { position: relative; display: grid; grid-template-columns: 30px 14px 1fr; align-items: start; padding-bottom: 8px; }
.ev1-rail li:not(:last-child)::after { content: ""; position: absolute; top: 9px; bottom: -1px; left: 36px; border-left: 1.5px solid var(--fig-line); }
.ev1-rail time { padding-top: 1px; color: var(--fig-text-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.ev1-node { position: relative; z-index: 1; width: 7px; height: 7px; margin: 5px 0 0 1px; border-radius: 50%; background: #14ae5c; }
.ev1-rail .is-on .ev1-node { background: var(--agent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent) 22%, white); animation: ev-pulse 1.4s ease-in-out infinite; }
.ev1-rail .is-on :is(time, b) { color: var(--agent); }
.ev1-rail b { font-weight: 500; }
.ev1-rail p { margin: 0; color: var(--fig-text-2); }

/* V2: inspector rows */
.ev2-grp > summary { padding: 8px 10px; background: var(--fig-field); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.ev2-grp > summary b { flex: 1; color: var(--fig-text-2); font-weight: 600; }
.ev2-grp > summary em { color: var(--fig-text-3); font-style: normal; }
.ev2-grp.is-on > summary b, .ev2-grp.is-on > summary em { color: var(--agent); }
.ev2-row { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-top: 1px solid var(--fig-line); }
.ev2-row .i { flex: none; width: 14px; height: 14px; color: var(--fig-text-3); }
.ev2-row b { width: 46px; font-weight: 500; }
.ev2-prop { display: flex; flex: 1; align-items: center; gap: 3px; color: var(--fig-text-2); }
.ev2-diff { display: flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; background: var(--fig-field); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; }
.ev2-diff span { color: var(--fig-text-3); }
.ev2-row em { width: 26px; color: var(--fig-text-3); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.ev2-row.is-on { background: color-mix(in srgb, var(--agent) 6%, white); }
.ev2-row.is-on b { color: var(--agent); }
.ev2-row.is-on em { display: flex; justify-content: flex-end; }

/* V3: dark console */
.ev3 { background: #1e1e1e; color: rgba(255, 255, 255, 0.9); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; }
.ev3 .ev__head { border-color: rgba(255, 255, 255, 0.1); font-family: Inter, system-ui, sans-serif; font-size: 11px; }
.ev3 .ev__head > span:not(.icon-btn) { color: rgba(255, 255, 255, 0.45); }
.ev3 .icon-btn { color: rgba(255, 255, 255, 0.6); }
.ev3-live { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25); animation: ev-pulse 1.4s ease-in-out infinite; }
.ev3 .ev-chev { color: rgba(255, 255, 255, 0.4); }
.ev3-grp > summary { padding: 7px 10px 4px; color: rgba(255, 255, 255, 0.55); }
.ev3-grp > summary b { flex: 1; font-weight: 500; }
.ev3-grp > summary em { font-style: normal; }
.ev3-grp.is-on > summary { color: #c4b5fd; }
.ev3-grp ol { padding: 0 10px 6px 30px; }
.ev3-grp li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 6px; line-height: 19px; }
.ev3-grp time { color: rgba(255, 255, 255, 0.35); }
.ev3-grp li span { color: rgba(255, 255, 255, 0.5); }
.ev3-diff { display: flex; align-items: center; gap: 3px; color: #4ade80 !important; }
.ev3-grp li.is-on, .ev3-grp li.is-on :is(time, span) { color: #c4b5fd; }
.ev3-grp li.is-on b::after { content: "▍"; margin-left: 2px; animation: ev-blink 1s steps(1) infinite; }
.ev3 .ev__foot { border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.35); }

/* V4: before and after thumbnails */
.ev4-grp > summary { padding: 9px 12px; }
.ev4-grp > summary b { flex: 1; font-weight: 550; }
.ev4-grp > summary > em { color: var(--fig-text-3); font-style: normal; }
.ev4-grp.is-on > summary b, .ev4-grp.is-on > summary > em { color: var(--agent); }
.ev4-grp + .ev4-grp { border-top: 1px solid var(--fig-line); }
.ev4-mini { display: flex; align-items: center; gap: 2px; color: var(--fig-text-3); }
.ev4-mini .ev4-sq { width: 10px; height: 10px; }
.ev4-mini em { font-style: normal; font-size: 9px; }
.ev4-tiles { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 12px 12px !important; }
.ev4-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 8px; background: var(--fig-field); }
.ev4-tile b { font-weight: 500; }
.ev4-thumb { display: flex; align-items: center; gap: 3px; color: var(--fig-text-3); }
.ev4-thumb em { font-size: 9px; font-style: normal; }
.ev4-sq { display: block; width: 18px; height: 18px; background: #c9cdd3; }
.ev4-tile.is-done { box-shadow: inset 0 0 0 1px color-mix(in srgb, #14ae5c 35%, transparent); }
.ev4-tile.is-on { background: color-mix(in srgb, var(--agent) 7%, white); box-shadow: inset 0 0 0 1.5px var(--agent); animation: ev-glow 1.4s ease-in-out infinite; }
.ev4-tile.is-on b { color: var(--agent); }

/* V5: Layers-panel rows */
.ev5-grp > summary { height: 30px; padding: 0 10px 0 6px; }
.ev5-grp > summary .i:not(.ev-chev) { width: 14px; height: 14px; color: var(--fig-text-2); }
.ev5-grp > summary b { flex: 1; font-weight: 600; }
.ev5-grp > summary em { color: var(--fig-text-3); font-style: normal; }
.ev5-grp.is-on > summary em { color: var(--agent); }
.ev5-grp ol { padding-bottom: 4px; }
.ev5-row { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 30px; }
.ev5-row .i { width: 14px; height: 14px; color: var(--fig-text-3); }
.ev5-row b { flex: 1; font-weight: 450; }
.ev5-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 5px; border-radius: 4px; background: var(--fig-field); color: var(--fig-text-2); line-height: 17px; }
.ev5-row em { display: none; color: var(--fig-text-3); font-style: normal; }
.ev5-row:hover em, .ev5-row.is-on em { display: inline; }
.ev5-row.is-on { background: color-mix(in srgb, var(--agent) 10%, white); }
.ev5-row.is-on :is(b, em, .i) { color: var(--agent); }
.ev5-row.is-on b { font-weight: 550; }

/* V6: grouped by change, layers as chips */
.ev6-agent { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--agent); color: #fff; }
.ev6-agent .i { width: 12px; height: 12px; }
.ev6 .ev__head > span:not(.icon-btn):not(.ev6-agent) { flex: 1; text-align: right; }
.ev6 .ev__head b { flex: none; }
.ev6-grp { padding: 10px 12px; }
.ev6-grp + .ev6-grp { border-top: 1px solid var(--fig-line); }
.ev6-change { flex: 1; margin: 0; font-size: 12px; font-weight: 550; }
.ev6-change .ev-sw { width: 10px; height: 10px; }
.ev6-grp > summary em { color: var(--fig-text-3); font-style: normal; }
.ev6-grp.is-on > summary em { color: var(--agent); }
.ev6-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.ev6-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 4px; border-radius: 999px; background: var(--fig-field); }
.ev6-chip i:not(.ev-spin) { width: 10px; height: 10px; border-radius: 50%; background: #14ae5c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.8 5.2l1.5 1.5 3-3.2' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ev6-chip.is-on { background: color-mix(in srgb, var(--agent) 10%, white); color: var(--agent); }

@keyframes ev-pulse { 50% { box-shadow: 0 0 0 5px transparent; } }
@keyframes ev-blink { 50% { opacity: 0; } }
@keyframes ev-glow { 50% { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--agent) 40%, white); } }
@media (prefers-reduced-motion: reduce) { .ev-spin, .ev1-rail .is-on .ev1-node, .ev3-live, .ev3-grp li.is-on b::after, .ev4-tile.is-on { animation: none; } }
.ev3 b { color: inherit; }
.ev3 .ev__head b { color: #fff; }
.ev6 .ev__head > .ev6-agent { flex: none; }
.ev5-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-steps { width: 264px; }
.lw-steps .plan__head .icon-btn { margin-left: 4px; }
.lw-group > summary { display: flex; flex-direction: column; gap: 2px; }
.lw-group > summary > :not(.plan-step__head) { margin-left: 22px; }
.lw-group > summary .plan-step__head .lw-chev { margin-top: 0; }
.lw-group > summary:hover .plan-step__title { text-decoration: underline; text-decoration-color: var(--fig-text-3); text-underline-offset: 2px; }
.lw-edits { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; padding: 0; list-style: none; color: var(--fig-text-2); font-size: 10px; line-height: 15px; }
.lw-edits li { display: flex; gap: 4px; }
.lw-edits li::before { content: "✓"; width: 10px; color: #14ae5c; }
.lw-edits span { flex: 1; }
.lw-edits em { color: var(--fig-text-3); font-style: normal; font-variant-numeric: tabular-nums; }
.lw-edits .is-on { color: var(--agent); font-weight: 550; }
.lw-edits .is-on::before { content: "◌"; color: var(--agent); }
.lw-edits .is-on em { color: var(--agent); }
.lw-steps .plan-foot--running p:last-child { color: var(--fig-text-3); }
.plan-step.lw-group > summary { margin-left: 0; }
.lw-float.ev { width: 264px; max-width: none; }

/* Moment 04: every change linked to its cause. The link is drawn in Figma's selection blue, apart from the agent's purple */
.cz-stack { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cz-stack > .lw-float { position: static; }
.ev2-row.is-hover { background: rgba(0, 0, 0, 0.04); box-shadow: inset 2px 0 0 #0d99ff; }
.cz-card { position: relative; width: 236px; padding: 10px 12px; border-radius: 10px; background: var(--fig-panel); box-shadow: var(--fig-toolbar-shadow); color: var(--fig-text); font-size: 11px; line-height: 16px; }
.cz-card::before { content: ""; position: absolute; top: -5px; left: 64px; width: 10px; height: 10px; background: var(--fig-panel); transform: rotate(45deg); box-shadow: -1px -1px 0 var(--fig-line); }
.cz-card b { color: inherit; }
.cz-card__head { display: flex; justify-content: space-between; gap: 6px; margin: 0 0 8px; }
.cz-card__head b { font-weight: 600; }
.cz-card__head span { color: var(--fig-text-3); font-variant-numeric: tabular-nums; }
.cz-card dl { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 5px 8px; margin: 0; }
.cz-card dl > div { display: contents; }
.cz-card dt { color: var(--fig-text-3); }
.cz-card dd { display: flex; align-items: center; gap: 5px; margin: 0; }
.cz-num { display: inline-grid; flex: none; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--agent); color: #fff; font-size: 9px; font-style: normal; font-weight: 600; line-height: 1; }
.cz-card__foot { margin: 8px -12px 0; padding: 8px 12px 0; border-top: 1px solid var(--fig-line); color: #0d99ff; font-weight: 500; }
.cz-mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, #0d99ff 16%, white); box-shadow: 0 0 0 1px color-mix(in srgb, #0d99ff 40%, transparent); color: inherit; }
.cz-sel { position: relative; box-shadow: 0 0 0 2px #0d99ff; }
.cz-chip { position: absolute; bottom: 100%; right: -2px; margin-bottom: 5px; padding: 0 8px; border-radius: 5px 5px 0 5px; background: #0d99ff; color: #fff; font-size: 13px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.plan-step.cz-ring { box-shadow: inset 0 0 0 1.5px #0d99ff; }
.cz-why { margin: 2px 0 0 22px; color: var(--fig-text-2); font-size: 10px; line-height: 15px; }
.cz-why b { color: var(--fig-text); font-weight: 550; }

/* Stage 02 walkthrough: each screen is a full Figma window, 1216 × 760 like the camera */
.ide-story__screen > .lw { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
/* Laid out like the stage 01 prototype: navigation rail, then the chat, then the canvas */
.ide-story__screen > .lw { grid-template-columns: 48px 285px minmax(0, 1fr); }
.ide-story__screen > .lw > .rail { order: -2; }
.ide-story__screen > .lw > .lw__chat { order: -1; border-right: 1px solid var(--fig-edge); border-left: 0; }
/* No zoom here: the rings measure layers on the canvas, and zoom throws those measurements off */
.ide-story__screen .lw .cv .phone { zoom: 1; }
.ide-story__screen .lw--float .lw__canvas { padding-left: 96px; }

/* Moment 04: stop state */
#ideation-during .ide-intro .ans--q .ide-answers:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#ideation-during .ide-intro .ans--q .ide-answers > li:nth-child(4) { transform: rotate(1.4deg) translateY(-2px); }

/* Figma today, interrupted: the last step freezes and a feedback row appears under the reply */
.msg-feedback { display: flex; align-items: center; gap: 2px; margin: 2px 0 0 -4px; color: var(--fig-text-2); }
.msg-feedback .spacer { flex: 1; }
.msg-feedback svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

/* Stop & resume tab: the agent chat through four stop frames on a loop, like a GIF. 4 frames x 3.2s = 12.8s */
.stp-loop-wrap { flex-direction: column; align-items: stretch !important; gap: 16px; padding: 24px 20px 22px; }
.stp-loop { display: grid; justify-items: center; }
.stp-loop__frame { grid-area: 1 / 1; display: flex; width: 100%; max-width: 285px; opacity: 0; animation: stp-loop 12.8s infinite; animation-delay: calc(var(--i) * 3.2s - 12.8s); }
.stp-loop__frame > .chat { flex: 1; min-width: 0; border-radius: 8px; overflow: hidden; }
.stp-cap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 340px; margin: 0 auto; }
.stp-cap__text { display: grid; width: 100%; }
.stp-cap__text p { grid-area: 1 / 1; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink, #111); text-align: center; opacity: 0; animation: stp-loop 12.8s infinite; animation-delay: calc(var(--i) * 3.2s - 12.8s); }
.stp-cap__text b { margin-right: 8px; color: var(--stage); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stp-cap__bar { position: relative; width: 100%; height: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--stage) 18%, transparent); }
.stp-cap__bar::after { content: ""; position: absolute; inset: 0; background: var(--stage); transform-origin: left; animation: stp-cap-bar 12.8s linear infinite; }
@keyframes stp-loop { 0% { opacity: 0; } 2.5%, 23.5% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes stp-cap-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .stp-loop__frame, .stp-cap__text p, .stp-cap__bar::after { animation: none; }
  .stp-loop__frame[style="--i:1"], .stp-cap__text p[style="--i:1"] { opacity: 1; }
  .stp-cap__bar::after { transform: scaleX(0.5); }
}
.lw--stop:has(.stp-back) { height: 670px; }
.lw--stop:has(.stp-menu) { height: 760px; }
.ev2-grp.stp-grp-back > summary b, .ev2-grp.stp-grp-back > summary em { color: var(--fig-text-2); }
.ev2-row.stp-rb b { color: var(--fig-text-2); }
.ev2-row.stp-rb .ev2-diff { opacity: 0.5; }
.ev2-row.stp-rb em { color: var(--fig-text-2); }
.ev2-row.stp-planned { opacity: 0.45; }
.ev2-row.stp-rb.is-hover b { color: var(--fig-text); }
.ev2-row.stp-rb.is-hover .ev2-diff { opacity: 1; }
.stp-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; color: var(--fig-text-2); }
.stp-key { display: inline-flex; align-items: center; gap: 6px; }
.stp-key b { color: var(--fig-text); font-weight: 550; }
.stp-key::before { content: ""; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; }
.stp-key.is-kept::before { background: #14ae5c; }
.stp-key.is-back::before { background: var(--fig-field); box-shadow: inset 0 0 0 1.5px var(--fig-text-2); }
.stp-key.is-none::before { border: 1.5px dashed var(--fig-text-3); }
.plan__bar i.stp-bar-back { background: repeating-linear-gradient(-45deg, var(--fig-text-3) 0 2px, var(--fig-line) 2px 4px); }
.stp-back { background: #fafafa; box-shadow: inset 2px 0 0 var(--fig-text-3); }
.stp-back .plan-step__num { background: var(--fig-field); color: var(--fig-text-2); font-size: 11px; }
.stp-status--back { color: var(--fig-text-2); }
.stp-none .plan-step__num { box-sizing: border-box; border: 1px dashed var(--fig-text-3); background: none; color: var(--fig-text-3); }
.plan-step__change.stp-change { display: flex; align-items: center; gap: 4px; }
.stp-field { display: inline-flex; align-items: center; gap: 4px; height: 20px; margin-left: auto; padding: 0 2px 0 6px; border-radius: 5px; background: var(--fig-field); color: var(--fig-text); font-weight: 450; }
.stp-field .i { width: 14px; height: 14px; color: var(--fig-text-3); }
.stp-field.is-focus { background: var(--fig-panel); box-shadow: inset 0 0 0 1px var(--fig-blue); }
.stp-menu { width: 132px; margin: 4px 0 2px auto !important; padding: 4px 0; border-radius: 8px; background: #1e1e1e; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); color: #fff; list-style: none; }
.stp-menu li { display: flex; align-items: center; gap: 6px; height: 24px; margin: 0 4px; padding: 0 8px; border-radius: 5px; }
.stp-menu li.is-on { background: var(--fig-blue); }
.stp-menu li span { margin-left: auto; }
.stp-note { margin-top: 6px !important; color: var(--fig-text-3); font-size: 10px; line-height: 14px; }
.stp-acts { display: flex; gap: 6px; margin-top: 6px; }
.stp-foot { flex-wrap: wrap; row-gap: 4px; }
.plan-foot .stp-hint { flex-basis: 100%; font-size: 10px; line-height: 14px; }
.plan-btn--stop.is-hover { background: var(--fig-field); }
.stp-yours { margin-left: 4px; padding: 0 4px; border-radius: 3px; background: color-mix(in srgb, var(--fig-blue) 14%, white); color: var(--fig-blue-text); font-size: 10px; font-style: normal; font-weight: 550; white-space: nowrap; }
.cv .btn-primary.stp-old { background: #9aa3af; color: #fff; }
.cv .btn-primary.stp-ghost { background: color-mix(in srgb, #315edb 35%, transparent); color: #fff; outline: 2px dashed #315edb; outline-offset: 2px; }
.cv .btn-primary.stp-ghost.stp-coral { background: color-mix(in srgb, #e8613c 50%, transparent); outline-color: #e8613c; }
.cv .btn-primary.cv-btn--live.stp-coral { background: #fde3da; color: #c2410c; box-shadow: inset 0 0 0 2px #e8613c; }
.stp-chip { position: absolute; bottom: 100%; right: -4px; margin-bottom: 8px; padding: 0 8px; border-radius: 5px 5px 0 5px; background: #757575; color: #fff; font-size: 13px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.cv-tag.stp-tag--kept { background: #14ae5c; }
.stp-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; border-top: 1px solid var(--fig-line); color: var(--fig-text-2); }
.stp-sum .stp-key b { margin-right: -2px; }
.stp-alts .plan-foot > p { white-space: nowrap; }

/* Stage 02 stickies: each note hugs its own UI, so none ends in a blank strip */
#ideation-during .ide-intro .ans--q .ide-answers { align-items: start; }
.ev2-grp.is-queued > summary { opacity: 0.5; }

/* ---------- Stage 03: after the agent acts ---------- */
/* =========================================================
   Stage 03 · After the agent acts
   The content brief for this stage: what the research asks of it,
   the moments to design, and the ideas to compare for each one.
   Visuals are empty slots until each moment is explored.
   ========================================================= */

/* Nothing is chosen yet, so options close on an open verdict */
#ideation-after .verdict-strip[data-verdict="open"] { --verdict: var(--stage); }
#ideation-after .verdict-strip[data-verdict="today"],
#ideation-after .verdict-strip[data-verdict="explored"] { --verdict: rgba(0, 0, 0, 0.45); }

/* ---------- The brief: research inputs the moments answer to ---------- */
.aft-brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aft-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.aft-card--wide { grid-column: 1 / -1; }
.aft-label { margin: 0; color: var(--stage); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.aft-hmw { margin: 0; color: var(--ink); font-size: 20px; line-height: 28px; font-weight: 550; letter-spacing: -0.2px; }
.aft-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.aft-list li { display: flex; flex-direction: column; gap: 2px; }
.aft-list b { color: var(--ink); font-size: 13px; line-height: 19px; font-weight: 550; }
.aft-list span { color: var(--grey); font-size: 13px; line-height: 19px; }
.aft-list--out b { color: var(--grey); font-weight: 500; }

/* The run the designer comes back to: one row per step */
.aft-run { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.aft-run li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 6px; background: color-mix(in srgb, var(--stage) 6%, white); }
.aft-run b { color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 550; }
.aft-run span { color: var(--grey); font-size: 12px; line-height: 17px; }
.aft-run .is-flag { background: #fff4e5; box-shadow: inset 0 0 0 1px #f5c98a; }
.aft-run .is-flag em { color: #b26200; font-size: 12px; line-height: 17px; font-style: normal; font-weight: 550; }

/* ---------- Each moment's definition: problem, principle, what success looks like ---------- */
.aft-def { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 0 36px; padding: 12px 16px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.aft-def div { display: flex; flex-direction: column; gap: 4px; }
.aft-def dt { color: var(--muted); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.aft-def dd { margin: 0; color: var(--ink); font-size: 13px; line-height: 19px; }

/* An option's sketch is an empty slot until it's explored */
#ideation-after .ide-opt__visual { min-height: 220px; }
#ideation-after .ide-opt__visual > .ide-slot { align-self: stretch; width: 100%; }
#ideation-after .ide-opt--today .ide-opt__visual > .ide-slot { border-color: #c9ccd2; color: var(--muted); }

/* ---------- Moment 01 explorations: where the end-of-run summary lives ---------- */
#ideation-after .ide-opt__visual { align-items: flex-start; }
.ide-opt__visual > .aft-chat { width: 100%; max-width: 285px; }
.aft-chat .chat__thread { gap: 10px; }
.aft-msg-acts { display: flex; margin: 0; color: var(--fig-text-3); }
.aft-msg-acts .icon-btn { width: 22px; height: 22px; }

/* B: Edits by layer */
.ide-opt__visual > .aft-changes { max-width: 260px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fig-edge); }
.aft-tabs { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--fig-line); color: var(--fig-text-2); }
.aft-tabs span { padding: 2px 8px; border-radius: 5px; }
.aft-tabs .is-on { background: var(--fig-field); color: var(--fig-text); font-weight: 550; }
.aft-tabs__flag { margin-left: auto; background: #fff4e5; color: #b26200; font-size: 10px; font-weight: 550; }
.aft-row { height: 26px; padding-left: 30px; }
.aft-grp-flag > summary { background: #fff4e5; }
.aft-grp-flag > summary b, .aft-grp-flag > summary em { color: #b26200 !important; }
.aft-row--flag { background: #fffaf2; }

/* C: markers on the canvas */
.aft-mk { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 285px; padding: 18px 16px 52px; border-radius: 8px; background: var(--fig-canvas, #e9e9e9); box-shadow: 0 0 0 1px var(--fig-edge); }
.aft-mk__row { display: flex; gap: 14px; }
.aft-mk__card { position: relative; flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 6px 6px 8px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1.5px var(--agent); font-size: 10px; }
.aft-mk__img { height: 34px; border-radius: 3px; background: linear-gradient(135deg, #cfd8e3, #e9edf2); }
.aft-mk__line { width: 70%; height: 4px; border-radius: 2px; background: #e3e3e8; }
.aft-mk__btn { width: 40%; height: 9px; border-radius: 3px; background: #e8613c; }
.aft-mk__badge { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--agent); color: #fff; font-size: 10px; font-weight: 600; box-shadow: 0 0 0 2px #fff; }
.aft-mk__card.is-flag { box-shadow: 0 0 0 1.5px #e08a00; }
.aft-mk__card.is-flag .aft-mk__badge { background: #e08a00; }
.aft-mk__bar { position: absolute; left: 50%; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; background: #1e1e1e; color: #fff; font-size: 10px; white-space: nowrap; transform: translateX(-50%); }
.aft-mk__dot { width: 6px; height: 6px; border-radius: 50%; background: #b48cff; }
.aft-mk__sep { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.2); }
.aft-mk__bar b { font-weight: 550; }

/* ---------- Moment 02: a four-step clip, each frame with what's happening, working and missing ---------- */
.aft-clip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-left: 36px; }
.aft-clip__step { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; min-width: 0; margin: 0; }
.aft-clip__cap { display: flex; align-items: center; gap: 10px; }
.aft-clip__cap > span:last-child { display: flex; flex-direction: column; }
.aft-clip__cap small { color: var(--muted); font-size: 11px; line-height: 16px; }
.aft-clip__cap b { color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 600; }
.aft-clip__n { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--stage); color: #fff; font-size: 12px; font-weight: 600; }

/* Each frame is the chat panel alone, on the same grey stage as the moment 01 ideas */
.aft-clip__screen { display: flex; flex: 1; justify-content: center; align-items: flex-start; padding: 24px 16px; border-radius: 6px; background: #f2f2f2; }
.aft-clip__panel { width: 100%; max-width: 260px; }

/* Cards on the canvas: proposed edits outlined, accepted green, off-request amber */
.cv .btn-primary.aft-coral { background: #e8613c; color: #fff; }
.aft-card--after { border-radius: 12px; }
.aft-card--prop { outline: 2px dashed var(--agent); outline-offset: 3px; }
.aft-card--acc { outline: 2px solid #14ae5c; outline-offset: 3px; }
.aft-card--flag { outline: 2px dashed #e08a00; outline-offset: 3px; }
.cv-tag.aft-tag--prop { background: var(--agent); }
.cv-tag.aft-tag--acc { background: #14ae5c; }
.cv-tag.aft-tag--flag { background: #e08a00; }

/* The review card in the chat */
.aft-rv { overflow: hidden; margin-top: 8px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--fig-line); }
.aft-rv__head { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 10px 10px 8px; }
.aft-rv__head b { font-weight: 600; }
.aft-rv__head > span:not(.aft-rv__bar) { color: var(--fig-text-2); font-variant-numeric: tabular-nums; }
.aft-rv__kept { justify-self: end; padding: 0 6px; border-radius: 4px; background: #e6f6ec; color: #0b8a43 !important; font-size: 10px; font-weight: 600; }
.aft-rv__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--fig-field); overflow: hidden; }
.aft-rv__bar i { display: block; height: 100%; background: #14ae5c; }
.aft-rv__rows { margin: 0; padding: 0; list-style: none; }
.aft-rv__row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--fig-line); }
.aft-rv__check { flex: none; width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px #c4c4c4; }
.aft-rv__row.is-accepted .aft-rv__check { background: #14ae5c; box-shadow: none; }
.aft-rv__row.is-rejected .aft-rv__check { background: #b3b3b3; box-shadow: none; }
.aft-rv__main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.aft-rv__main b { font-weight: 550; }
.aft-rv__main span { color: var(--fig-text-3); font-size: 10px; }
.aft-rv__row.is-rejected .aft-rv__main b { color: var(--fig-text-3); text-decoration: line-through; }
.aft-rv__flag { color: #b26200 !important; font-weight: 550; }
.aft-rv__row.is-flag.is-open { background: #fffaf2; }
.aft-rv__acts { display: flex; gap: 4px; }
.aft-rv__btn { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--fig-line); color: var(--fig-text-2); font-size: 11px; }
.aft-rv__btn--yes.is-click { background: #e6f6ec; color: #0b8a43; box-shadow: inset 0 0 0 1px #14ae5c; }
.aft-rv__btn--no.is-click { background: #fdecea; color: #c4321c; box-shadow: inset 0 0 0 1px #e03e1a; }
.aft-rv__status { font-size: 10px; font-weight: 600; white-space: nowrap; }
.aft-rv__status.is-acc { color: #0b8a43; }
.aft-rv__status.is-rej { color: var(--fig-text-3); }
.aft-rv__status u { color: var(--fig-blue-text, #0d99ff); text-decoration: none; }
.aft-rv__foot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--fig-line); background: #f9f9f9; }
.aft-rv__foot .is-click { position: relative; }
.aft-cursor { position: absolute; top: 55%; left: 55%; z-index: 2; width: 18px; height: 18px; pointer-events: none; }

/* Notes under each frame */
.aft-clip__notes { display: flex; flex-direction: column; gap: 6px; }
.aft-note { padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 19px; color: var(--ink); }
.aft-note p, .aft-note ul { margin: 0; }
.aft-note ul { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; }
.aft-note__t { margin-bottom: 4px !important; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.aft-note--now { background: #eef4fd; }
.aft-note--now .aft-note__t { color: #0a6dc2; }
.aft-note--works { background: #eaf6f0; }
.aft-note--works .aft-note__t { color: #087a55; }
.aft-note--missing { background: #fdeeec; }
.aft-note--missing .aft-note__t { color: #c4321c; }

/* ---------- Moment 03: flag what was assumed ---------- */
/* Cards with no badges, for Figma today and the pins idea */
.aft-mk--plain { padding-bottom: 18px; }
.aft-mk__card--plain { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.aft-anno { margin: 0; padding: 6px 8px; border: 1px dashed #b3b3b3; border-radius: 6px; color: var(--muted); font-size: 11px; line-height: 15px; text-align: center; }

/* A: Check these, above everything else */
.aft-check { overflow: hidden; }
.aft-check__head { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px; background: #fff4e5; }
.aft-check__head b { font-weight: 600; color: #8a4b00; }
.aft-check__head span { padding: 0 6px; border-radius: 8px; background: #e08a00; color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; }
.aft-check__rows { margin: 0; padding: 0; list-style: none; }
.aft-check__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 10px; border-top: 1px solid var(--fig-line); }
.aft-check__kind { grid-column: 1 / -1; justify-self: start; padding: 0 5px; border-radius: 4px; font-size: 9px; font-weight: 600; line-height: 15px; text-transform: uppercase; letter-spacing: 0.04em; }
.is-off .aft-check__kind { background: #fff4e5; color: #b26200; }
.is-guess .aft-check__kind { background: color-mix(in srgb, var(--agent) 12%, white); color: var(--agent); }
.aft-check__row div { display: flex; flex-direction: column; min-width: 0; }
.aft-check__row b { font-weight: 550; }
.aft-check__row div span { color: var(--fig-text-2); font-size: 10px; }
.aft-check__row s { color: #e03e1a; }
.aft-check__row ins { color: #14ae5c; text-decoration: none; }
.aft-check__acts { display: flex; align-self: center; gap: 4px; }
.aft-check__rest { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px; border-top: 1px solid var(--fig-line); background: #f9f9f9; color: var(--fig-text-2); }
.aft-check__rest .i { width: 14px; height: 14px; transform: rotate(-90deg); }
.aft-check__rest span { flex: 1; }
.aft-check__rest em { color: var(--fig-text-3); font-style: normal; }

/* B: pins on flagged layers, like unresolved comments */
.aft-pin { position: absolute; top: -10px; right: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50% 50% 50% 0; color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, 0.2); }
.aft-pin--off { background: #e08a00; }
.aft-pin--guess { background: var(--agent); }
.aft-mk__card.is-pinned { box-shadow: 0 0 0 1.5px #e08a00; }
.aft-pop { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 3px; width: 168px; padding: 8px 10px; border-radius: 8px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--fig-edge); font-size: 10px; line-height: 14px; }
.aft-pop p { margin: 0; }
.aft-pop__k { color: #b26200; font-weight: 600; }
.aft-pop b { font-weight: 550; }
.aft-pop s { color: #e03e1a; }
.aft-pop ins { color: #14ae5c; text-decoration: none; }
.aft-pop__why { color: var(--fig-text-3); }
.aft-pop__acts { display: flex; gap: 4px; margin-top: 3px; }
.aft-mk:has(.aft-pop) { padding-bottom: 104px; }


/* ---------- Moment 01, Idea A: the receipt is also the review ---------- */
.aft-rc .plan__bar .is-done { background: #14ae5c; }
.aft-rc__progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; border-bottom: 1px solid var(--fig-line); color: var(--fig-text-2); font-size: 10px; font-variant-numeric: tabular-nums; }
.aft-rc__bar { height: 4px; border-radius: 2px; background: var(--fig-field); overflow: hidden; }
.aft-rc__bar i { display: block; height: 100%; background: #14ae5c; }
.aft-rc__rows { margin: 0; padding: 0; list-style: none; }
.aft-rc__row { padding: 7px 10px; border-top: 1px solid var(--fig-line); }
.aft-rc__row:first-child { border-top: 0; }
.aft-rc__row.is-done { background: #f3fbf6; }
.aft-rc__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aft-rc__main p { margin: 0; }
.aft-rc__top { display: flex; align-items: center; gap: 6px; }
.aft-rc__top b { font-weight: 550; }
.aft-rc__diff { color: var(--fig-text-2); }
.aft-rc__diff s { color: #e03e1a; }
.aft-rc__diff ins { color: #14ae5c; text-decoration: none; }
.aft-rc__meta { color: var(--fig-text-3); font-size: 10px; }
.aft-rc__foot { display: flex; justify-content: space-between; padding: 8px 10px; border-top: 1px solid var(--fig-line); background: #f9f9f9; }
.aft-rc__foot .is-off { opacity: 0.45; }

/* The Edited chip doubles as the row's tick box */
.aft-tick { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 0 6px 0 3px; border-radius: 4px; background: #e5f4ff; color: #007be5; font-size: 10px; font-weight: 550; line-height: 18px; cursor: pointer; }
.aft-tick i { display: grid; place-items: center; width: 11px; height: 11px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1.5px #7cc4fa; }
.aft-tick svg { width: 9px; height: 9px; }
.aft-tick.is-done { background: #14ae5c; color: #fff; }
.aft-tick.is-done i { background: transparent; box-shadow: none; color: #fff; }

/* ---------- Moment 01: edited, added, held; each step opens in Edits ---------- */
/* One colour per kind of change, shared by the counts, the step pills and the rows */
.aft-k--edited { --k: #0d99ff; --k-ink: #007be5; --k-soft: #e5f4ff; }
.aft-k--added { --k: #14ae5c; --k-ink: #0b8a43; --k-soft: #e6f6ec; }
.aft-k--held { --k: #e08a00; --k-ink: #b26200; --k-soft: #fff4e5; }

/* A: three counts, then one row per step */
.aft-sum button { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.aft-sum__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--fig-line); }
.aft-sum__tile { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 6px; background: var(--k-soft); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.15s; }
.aft-sum__tile b { color: var(--k-ink); font-size: 16px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.aft-sum__tile span { color: var(--k-ink); font-size: 10px; font-weight: 550; }
.aft-sum__tile:hover, .aft-sum__tile.is-on { box-shadow: inset 0 0 0 1.5px var(--k); }
.aft-sum__steps { margin: 0; padding: 0; list-style: none; }
.aft-sum__steps li + li { border-top: 1px solid var(--fig-line); }
.aft-sum__step { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 6px 7px 10px; }
.aft-sum__step:hover { background: rgba(0, 0, 0, 0.03); }
.aft-sum__step.is-on { background: #f2f9ff; box-shadow: inset 2px 0 0 #0d99ff; }
.aft-sum__step .plan-step__num { flex: none; }
.aft-sum__name { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.aft-sum__name b { font-weight: 550; }
.aft-sum__name > span { display: flex; flex-wrap: wrap; gap: 4px; }
.aft-sum__name em { padding: 0 5px; border-radius: 4px; background: var(--k-soft); color: var(--k-ink); font-size: 10px; font-style: normal; font-weight: 550; line-height: 16px; }
.aft-sum__chev { flex: none; width: 14px; height: 14px; color: var(--fig-text-3); transform: rotate(-90deg); }
.aft-sum__step.is-on .aft-sum__chev { color: #0d99ff; }

/* B: the open step (or count), then its edits grouped by layer or by component */
.aft-changes button { font: inherit; color: inherit; cursor: pointer; }
.aft-changes .plan-btn--primary { color: #fff; }
.aft-tabs button { padding: 2px 8px; border-radius: 5px; }
.aft-tabs button.is-on { background: var(--fig-field); color: var(--fig-text); font-weight: 550; }
.aft-grp--held > summary { background: #fff4e5; }
.aft-grp--held > summary b, .aft-grp--held > summary em { color: #b26200 !important; }
.aft-grp--sel > summary { background: #f2f9ff; box-shadow: inset 2px 0 0 #0d99ff; }
.aft-grp--sel > summary b { color: var(--fig-text); }
.aft-b__foot { display: flex; align-items: center; gap: 8px; }
.aft-b__foot span { flex: 1; min-width: 0; }
.aft-b__foot b { color: #b26200; font-weight: 550; }
.aft-changes .aft-b__apply { flex: none; padding: 0; color: var(--fig-blue-text, #007be5); font-weight: 550; }

/* ---------- Moment 01, more ways to show it (C–E): stage 01 and 02 parts, finished ---------- */
.aft-more { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0 36px; padding-top: 20px; border-top: 1px dashed var(--border); }
.aft-more__t { margin: 0; color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 600; }
.aft-more p { margin: 0; }
/* A kind tag, sized like the stage 01 evidence tag */
.aft-tag { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 4px; background: var(--k-soft); color: var(--k-ink); font-size: 10px; font-style: normal; font-weight: 550; line-height: 15px; vertical-align: 1px; }

/* C: the plan card closes in place */
.aft-plan .plan-step__head { width: 100%; padding: 0; font: inherit; font-size: 12px; line-height: 18px; color: inherit; text-align: left; cursor: pointer; }
.aft-plan .plan-step__head .ev-chev { margin-top: 2px; }
.aft-plan__step.is-open .plan-step__head .ev-chev { transform: none; }
.aft-plan__step + .aft-plan__step { border-top: 1px solid var(--fig-line); }
.aft-plan__step.is-open { background: #fafafa; }
.aft-plan .plan-step__status.aft-k--held { color: var(--k-ink); }
.aft-plan__step--held { box-shadow: inset 2px 0 0 #e08a00; }
.aft-plan__detail { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding: 8px 0 0 22px; border-top: 1px dashed var(--fig-line); }
.aft-plan__sub { margin: 0; color: var(--fig-text-3); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.aft-plan__sub ~ .aft-plan__sub { margin-top: 4px; }
.aft-plan__layers .aft-l::before { content: "✓ "; color: #14ae5c; }
.aft-plan__layers .aft-l.aft-k--added::before { content: "+ "; color: #14ae5c; font-weight: 600; }
.aft-plan__layers .aft-l.aft-k--held { color: #b26200; font-weight: 550; }
.aft-plan__layers .aft-l.aft-k--held::before { content: "‖ "; color: #e08a00; }
.aft-plan__comps { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 10px; line-height: 15px; }
.aft-plan__comps li { display: flex; align-items: center; gap: 4px; }
.aft-plan__comps .i { flex: none; width: 12px; height: 12px; color: var(--fig-purple, #9747ff); }
.aft-plan__comps b { font-weight: 550; }
.aft-plan__comps span { color: var(--fig-text-2); }
.aft-plan .stp-acts .plan-btn { font-size: 10px; }

/* D: the Edits log, closed out */
.ide-opt__visual > .aft-log { max-width: 270px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fig-edge); }
.aft-log button { font: inherit; color: inherit; cursor: pointer; }
.aft-log__filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--fig-line); }
.aft-log__f { padding: 1px 7px; border-radius: 5px; color: var(--fig-text-2) !important; font-size: 10px !important; }
.aft-log__f b { color: var(--k-ink, var(--fig-text)); font-weight: 600; }
.aft-log__f.is-on { background: var(--k-soft, var(--fig-field)); color: var(--k-ink, var(--fig-text)) !important; font-weight: 550; }
.aft-log .ev2-grp > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.aft-log .ev2-grp > summary b { text-transform: none; letter-spacing: 0; font-size: 11px; }
.aft-log__sub { display: flex; align-items: center; gap: 4px; padding: 6px 10px 2px; color: var(--fig-text-3); font-size: 10px; font-weight: 600; }
.aft-log__sub .i { width: 12px; height: 12px; }
.aft-log__row.aft-k--added .ev2-diff { color: #0b8a43; }
.aft-log__row.aft-k--held { background: #fffaf2; }
.aft-log__row.aft-k--held em { color: #b26200; font-weight: 550; }
.aft-log__note { padding: 4px 10px 8px 30px; color: var(--fig-text-3); font-size: 10px; line-height: 14px; }

/* E: step markers stay on the cards */
.ide-opt__visual > .aft-cv { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.aft-cv .cv-pins i.aft-pin--held { background: #e08a00; color: #fff; }
.aft-cv .cv-pins i.is-sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--agent); }
.aft-cv .btn-primary.is-coral { background: #e8613c; color: #fff; }
.aft-cv .aft-cv__hit { box-shadow: 0 0 0 3px var(--k); }
.aft-cv__tag { top: 10px; bottom: auto; left: 10px; margin: 0; border-radius: 5px; background: var(--k); }
.aft-cv__bar { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: #1e1e1e; }
.aft-cv__bar button { min-width: 26px; height: 24px; padding: 0 8px; border-radius: 6px; color: rgba(255, 255, 255, 0.7); font: inherit; font-size: 11px; font-weight: 550; cursor: pointer; }
.aft-cv__bar button.is-on { background: var(--agent); color: #fff; }
.aft-cv__cap { max-width: 260px; margin: 0; color: var(--fig-text-2); font-size: 11px; line-height: 16px; text-align: center; }
.aft-cv__cap b { color: var(--fig-text); font-weight: 600; }
.aft-log__row .ev2-diff s { color: #e03e1a; }
.aft-log__row .ev2-diff ins { color: #0b8a43; text-decoration: none; }
.aft-log__row .ev2-prop { white-space: nowrap; }
.aft-plan__comps li { flex-wrap: wrap; }
.aft-plan__comps li span { flex-basis: 100%; padding-left: 16px; }
.aft-log__row b { width: auto; max-width: 64px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.aft-log__row .ev2-diff { white-space: nowrap; }

/* ---------- Idea A, as the case study's review list (A1–A3) ---------- */
.aft-fl button { font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* Kind flags, in the review list's colours */
.aft-flag { display: inline-block; flex: none; padding: 0 6px; border-radius: 5px; font-size: 10px; font-style: normal; font-weight: 550; line-height: 17px; white-space: nowrap; }
.aft-flag--added { background: #e9f9ee; color: #2f7d4b; }
.aft-flag--edited { background: #e6f2fd; color: #2b65a8; }
.aft-flag--held { background: #fff3d6; color: #8a6116; }
.aft-flag--guess { background: #f1e8fd; color: #7c3aed; }
/* One row per change: flag and layer, the change, then where it came from */
.aft-frs { margin: 0; padding: 0; list-style: none; }
.aft-fr { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-top: 1px solid var(--fig-line); }
.aft-fr p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
.aft-fr__top { gap: 6px !important; }
.aft-fr__top b { font-weight: 600; }
.aft-fr__diff { color: var(--fig-text-2); }
.aft-fr__meta { color: var(--fig-text-3); font-size: 10px; line-height: 15px; }

/* A1: kind tabs, then steps that open in place */
.aft-rtabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--fig-line); }
.aft-rtab { padding: 2px 7px; border-radius: 5px; color: var(--fig-text-2) !important; font-size: 10px !important; white-space: nowrap; }
.aft-rtab.is-on { background: var(--fig-field); color: var(--fig-text) !important; font-weight: 550; }
.aft-v1 { margin: 0; padding: 0; list-style: none; }
.aft-v1__step + .aft-v1__step { border-top: 1px solid var(--fig-line); }
.aft-v1__head, .aft-v3__step { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 6px 8px 10px; }
.aft-v1__head:hover, .aft-v3__step:hover { background: rgba(0, 0, 0, 0.03); }
.aft-v1__head > span, .aft-v3__step > span { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.aft-v1__head b, .aft-v3__step b { font-weight: 550; }
.aft-v1__counts { display: flex; flex-wrap: wrap; gap: 4px; }
.aft-v1__step.is-open > .aft-v1__head { background: #f2f9ff; box-shadow: inset 2px 0 0 #0d99ff; }
/* A2: one step at a time */
.aft-v2__bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--fig-line); }
.aft-v2__pills { display: flex; gap: 2px; }
.aft-pill { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fig-field); font-size: 10px !important; font-weight: 550; text-align: center !important; }
.aft-pill.is-on { background: #0d99ff; color: #fff !important; }
.aft-seg { display: flex; padding: 2px; border-radius: 6px; background: var(--fig-field); }
.aft-seg button { padding: 1px 6px; border-radius: 4px; color: var(--fig-text-2) !important; font-size: 10px !important; }
.aft-seg button.is-on { background: #fff; color: var(--fig-text) !important; font-weight: 550; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.aft-v2__title { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; }
.aft-v2__title small { color: var(--fig-text-3); font-size: 10px; }
.aft-v2__title b { font-size: 12px; font-weight: 600; }
.aft-v2__title > span { display: flex; flex-wrap: wrap; gap: 4px; }

/* A3: needs a look first, then a step on its own page */
.aft-v3__sum { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--fig-line); }
.aft-v3__sub { display: flex; align-items: center; gap: 4px; margin: 0; padding: 8px 10px 4px; color: var(--fig-text-3); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.aft-v3__sub .i { width: 12px; height: 12px; }
.aft-v3__look .aft-fr { background: #fffcf5; }
.aft-v3__steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fig-line); }
.aft-v3__steps li + li { border-top: 1px solid var(--fig-line); }
.aft-v3__back { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--fig-line); }
.aft-v3__back .icon-btn { width: 24px; height: 24px; }
.aft-v3__back .icon-btn .i { transform: rotate(90deg); }
.aft-v3__back > span { display: flex; flex-direction: column; }
.aft-v3__back small { color: var(--fig-text-3); font-size: 10px; }
.aft-v3__back b { font-weight: 600; }

/* ---------- Main ideation page: moment 01 in the after-stage component breakdown ---------- */
.ide-comp__pair.aft-comp-pair, .ide-comp__strip.aft-comp-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ide-comp__view > .aft-duo { display: flex; align-items: flex-start; justify-content: center; gap: 16px; padding: 24px 20px 28px; }
.aft-duo > .aft-chat { flex: 0 1 285px; min-width: 0; }
.aft-duo > .aft-changes { flex: 0 1 260px; min-width: 0; box-shadow: 0 12px 32px color-mix(in srgb, var(--stage, #087a55) 18%, transparent), 0 0 0 1px var(--fig-edge); }
.ide-comp__half:not(.ide-comp__half--p) .ide-comp__view > .ide-opt__visual { padding: 24px 20px 28px; }
.ide-comp__half:not(.ide-comp__half--p) .aft-chat { max-width: 240px; }
.q-crop > .aft-fl.r-real { border-radius: 8px; }
@media (max-width: 760px) {
  .ide-comp__pair.aft-comp-pair, .ide-comp__strip.aft-comp-pair { grid-template-columns: minmax(0, 1fr); }
  .ide-comp__view > .aft-duo { flex-wrap: wrap; }
}

/* The Edits panel at the end of the run: by layer or by component, with accept and reject (moments 01 and 02) */
.aft-rvp { max-width: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fig-edge); }
.aft-changes > .aft-rv__head { border-bottom: 1px solid var(--fig-line); }
.aft-changes .aft-rv__btn { width: 20px; height: 20px; padding: 0; border: 0; background: #fff; font: inherit; font-size: 10px; cursor: pointer; }
.aft-changes .ev2-grp > summary .aft-rv__acts { margin-left: 4px; }
.aft-changes .ev2-grp > summary em { flex: none; }
.aft-rvp__gs { margin-left: 4px; color: var(--fig-text-2); font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.aft-rvp__gs.is-acc { color: #0b8a43; }
.aft-rvp__row { gap: 5px; }
.aft-rvp__row b { flex: none; width: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.aft-rvp__row .ev2-prop { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.aft-rvp__row .ev2-diff { flex: none; white-space: nowrap; }
.aft-rvp__row .ev2-diff s { color: #e03e1a; }
.aft-rvp__row .ev2-diff ins { color: #0b8a43; text-decoration: none; }
.aft-rvp__row.aft-k--held:not(.is-acc):not(.is-rej) { background: #fffaf2; }
.aft-rvp__note { padding: 0 10px 6px 29px; color: #b26200; font-size: 10px; font-weight: 550; line-height: 14px; }
.aft-rvp__note.is-open { background: #fffaf2; }
.aft-rvp__ok { width: 45px; color: #14ae5c !important; font-weight: 700; text-align: center !important; }
.aft-rvp__row.is-rej b, .aft-rvp__row.is-rej .ev2-prop { color: var(--fig-text-3); text-decoration: line-through; }
.aft-rvp__row.is-rej .ev2-diff { opacity: 0.45; }
.aft-rvp__restore { flex: none; width: 45px; padding: 0; color: var(--fig-blue-text, #007be5) !important; font-size: 10px !important; font-weight: 550; text-align: right; }
.aft-changes .aft-rv__foot .plan-btn { font: inherit; font-size: 11px; cursor: pointer; }
.aft-rvp__saved { border-top: 1px solid var(--fig-line); }
/* Main ideation page: the review frames loop like the stop flow in stage 02 */
.stp-loop__frame > .aft-rvp { flex: 1; align-self: flex-start; min-width: 0; max-width: 270px; margin: 0 auto; }

/* Moment 03: Before / After variations on the canvas. The phone is drawn at 55% (42% in pairs),
   so sizes inside it are divided by the zoom to land at their on-screen size. */
.ide-opt__visual--cv.aft-mv { align-items: flex-start; padding: 28px 12px 24px; }
.aft-mv__cv { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.aft-mv__cv .phone { zoom: 0.55; }
.aft-mv__cv .trips { gap: 16px; }
.aft-mv__cv .trip.is-sq { border-radius: 3px; }
.aft-mv__cv .trip.is-reg .trip__title { font-weight: 400; }
.aft-mv__cv .trip .aft-cursor { width: 32px; height: 32px; }
.aft-ba__sel { box-shadow: 0 0 0 4px #0d99ff; }
.cv-tag.aft-ba__tag { top: 10px; bottom: auto; left: 10px; margin: 0; padding: 0 10px; border-radius: 6px; font-size: 17px; line-height: 30px; }
.aft-ba__tag--edited { background: #0d99ff; }
.aft-ba__tag--guess { background: #8a38f5; }
.aft-ba__tag--held { background: #f5a524; color: #3d2600; }
.aft-ba__tag--peek { background: #1e1e1e; }
.aft-ba__seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 6px; background: #2c2c2c; }
.aft-ba__seg > span { position: relative; padding: 2px 8px; border-radius: 4px; color: rgba(255, 255, 255, 0.7); font-size: 11px; font-weight: 500; }
.aft-ba__seg > span.is-on { background: #fff; color: #1e1e1e; }
.aft-ba__seg .aft-cursor { top: 50%; left: 60%; }
.aft-mv__chip { margin: 0; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--fig-edge, #e6e6e6); color: #1e1e1e; font-size: 11px; text-align: center; }
.aft-mv__chip kbd { padding: 0 4px; border-radius: 3px; background: #f0f0f0; font: inherit; font-weight: 600; }

/* Figma today: version history floating over the canvas */
.aft-mv__float { border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 12px 28px rgba(0, 0, 0, 0.14); font-size: 11px; color: #1e1e1e; }
.aft-mv__vh { position: absolute; top: 34%; right: 0; z-index: 2; width: 168px; }
.aft-mv__fh { margin: 0; padding: 7px 10px; border-bottom: 1px solid var(--fig-line, #e6e6e6); }
.aft-mv__vh ul { margin: 0; padding: 4px 0; list-style: none; }
.aft-mv__vh li { display: flex; flex-direction: column; padding: 4px 10px; }
.aft-mv__vh li.is-on { background: #e5f4ff; }
.aft-mv__vh li span { color: var(--fig-text-3, #8c8c8c); }
.aft-mv__ff { margin: 0; padding: 6px 10px 8px; border-top: 1px solid var(--fig-line, #e6e6e6); color: var(--fig-text-3, #8c8c8c); font-size: 10px; line-height: 1.4; }

/* Moment 03 ideas: version history in the chat panel */
.aft-vh { position: relative; }
.aft-vh .chat__thread { padding-top: 16px; }
.aft-vh__ic { flex: none; width: 14px; height: 14px; }
.aft-vh .aft-cursor { top: 50%; left: 70%; }
.aft-vh__link { padding: 0; border: 0; background: none; color: var(--fig-blue-text, #007be5); font: inherit; font-weight: 500; cursor: default; }
.aft-vh__mark { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-top: 1px dashed var(--fig-line, #e6e6e6); border-bottom: 1px dashed var(--fig-line, #e6e6e6); color: var(--fig-text-3, #8c8c8c); font-size: 11px; }
.aft-vh__mark span { flex: 1; min-width: 0; }
.aft-vh__mark b { color: #1e1e1e; font-weight: 600; }
.aft-vh__mark.is-saved { border-top-style: solid; border-bottom-style: solid; color: #1e1e1e; }
.aft-vh__pill { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--fig-edge, #e6e6e6); color: #1e1e1e; font-size: 11px; font-weight: 500; white-space: nowrap; }
.aft-vh__pill.is-hover, .aft-vh__pin.is-hover .aft-vh__pill { background: #e5f4ff; box-shadow: 0 0 0 1px #0d99ff; }
.aft-msg-acts .aft-vh__pill { margin-left: 4px; }
.aft-vh__tip { padding: 6px 8px; border-radius: 6px; background: #1e1e1e; color: #fff; font-size: 11px; line-height: 1.4; }
.aft-vh__card { border-radius: 8px; box-shadow: 0 0 0 1px var(--fig-edge, #e6e6e6); overflow: hidden; font-size: 11px; }
.aft-vh__ch, .aft-vh__cf { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 8px; }
.aft-vh__ch span, .aft-vh__cf span { flex: 1; color: var(--fig-text-3, #8c8c8c); }
.aft-vh__ch span { flex: none; margin-left: auto; }
.aft-vh__cf { border-top: 1px solid var(--fig-line, #e6e6e6); }
.aft-vh__thumbs { display: flex; justify-content: center; gap: 10px; padding: 8px; background: var(--fig-canvas, #f5f5f5); }
.aft-vh__thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 4px 6px 6px; border-radius: 6px; }
.aft-vh__thumb.is-on { background: #e5f4ff; box-shadow: 0 0 0 1px #0d99ff; }
.aft-vh__thumb .phone { zoom: 0.22; }
.aft-vh__thumb .frame__label { display: none; }
.aft-vh__thumb figcaption { color: #1e1e1e; font-size: 10px; font-weight: 500; }
.aft-vh__hbtn { position: relative; margin-left: auto; }
.aft-vh__hbtn.is-on { background: #e5f4ff; color: #007be5; }
.aft-vh__hbtn i { position: absolute; top: -2px; right: -3px; min-width: 12px; height: 12px; padding: 0 3px; border-radius: 6px; background: #0d99ff; color: #fff; font-size: 8px; font-style: normal; font-weight: 700; line-height: 12px; text-align: center; }
.aft-vh__drop { position: absolute; top: 44px; right: 8px; left: 24px; z-index: 3; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 12px 28px rgba(0, 0, 0, 0.16); font-size: 11px; }
.aft-vh__dh { margin: 0; padding: 7px 10px; border-bottom: 1px solid var(--fig-line, #e6e6e6); }
.aft-vh__drop ul { margin: 0; padding: 4px 0; list-style: none; }
.aft-vh__drop li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 5px 10px; }
.aft-vh__drop li.is-on { background: #e5f4ff; }
.aft-vh__drop li b { grid-column: 1; }
.aft-vh__drop li span { grid-column: 1; color: var(--fig-text-3, #8c8c8c); }
.aft-vh__drop li em, .aft-vh__drop li .aft-vh__link { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; }
.aft-vh__drop li em { color: var(--fig-text-3, #8c8c8c); }
.aft-vh__df { margin: 0; padding: 6px 10px 8px; border-top: 1px solid var(--fig-line, #e6e6e6); color: var(--fig-text-3, #8c8c8c); font-size: 10px; line-height: 1.4; }
.aft-vh__pin { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.aft-vh__pin .msg-user { max-width: 88%; }
.aft-vh[data-aft-vh="header"] { min-height: 300px; }

/* Moment 03: compare changes on the canvas, in Design mode */
.aft-sub { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.aft-sub > * { margin: 0; }
.aft-clip__screen.aft-dev { position: relative; flex-direction: column; align-items: stretch; gap: 12px; padding: 10px 12px 18px; background-color: var(--fig-canvas, #f5f5f5); background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px); background-size: 12px 12px; }
.aft-dev .aft-cursor { top: 40%; left: 70%; }
.aft-mv__pair { display: flex; align-items: flex-start; justify-content: center; gap: 18px; }
.aft-mv__pair .phone { zoom: 0.42; }
.aft-dev__pair .aft-mv__cv, .aft-dev__pair > .frame { width: auto; }
.aft-dev__pair .phone { zoom: 0.5; }

/* Assessment under the clip */
.aft-assess { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aft-assess__col { padding: 12px 14px; border-radius: 8px; }
.aft-assess__col--good { background: #edf7f0; }
.aft-assess__col--bad { background: #fdf0ec; }
.aft-assess__col--good .aft-note__t { color: #0e8a47; }
.aft-assess__col--bad .aft-note__t { color: #c4320a; }
.aft-assess ul { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; padding-left: 16px; font-size: 13px; line-height: 1.45; }
.aft-assess__verdict { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--fig-edge, #e6e6e6); font-size: 13px; line-height: 1.5; }
.aft-assess { gap: 16px; margin-left: 36px; }
.aft-dev__pair { margin-top: 6px; }
.aft-cd__row { display: flex; align-items: flex-start; justify-content: center; gap: 12px; margin-top: 6px; }
.aft-cd__row > .aft-mv__cv { width: auto; }
.aft-ba__tag--rev { background: #5c5c5c; }
.aft-cd__panel { flex: none; width: 210px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fig-edge, #e6e6e6); font-size: 11px; color: #1e1e1e; }
.aft-cd__panel > p { margin: 0; }
.aft-cd__tabs { display: flex; gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--fig-line, #e6e6e6); }
.aft-cd__tabs span { color: var(--fig-text-3, #8c8c8c); }
.aft-cd__ph { display: flex; justify-content: space-between; padding: 7px 10px 3px; }
.aft-cd__ph span { color: var(--fig-text-3, #8c8c8c); }
.aft-cd__panel ul { margin: 0; padding: 2px 0 6px; list-style: none; }
.aft-cd__panel li { display: grid; grid-template-columns: 1fr auto 16px; align-items: center; gap: 2px 6px; padding: 4px 10px; }
.aft-cd__panel li.is-guess { background: #f5edff; }
.aft-cd__panel li.is-rev { background: #f5f5f5; }
.aft-cd__panel li.is-rev .ev2-diff { opacity: 0.45; text-decoration: line-through; }
.aft-cd__p { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aft-cd__p svg { flex: none; width: 12px; height: 12px; }
.aft-cd__panel .ev2-diff { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.aft-cd__panel .ev2-diff s { color: var(--fig-text-3, #8c8c8c); }
.aft-cd__panel .ev2-diff ins { text-decoration: none; font-weight: 600; }
.aft-cd__rev { position: relative; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; color: var(--fig-text-3, #8c8c8c); font-size: 12px; }
.aft-cd__panel li.is-guess .aft-cd__rev { background: #fff; color: #7a2ee0; box-shadow: 0 0 0 1px #c9a7f7; }
.aft-cd__rev .aft-cursor { top: 50%; left: 60%; }
.aft-cd__panel li .aft-vh__link { grid-column: 3; font-size: 10px; justify-self: end; }
.aft-cd__m { grid-column: 1 / -1; color: var(--fig-text-3, #8c8c8c); font-size: 10px; font-style: normal; }
.aft-cd__m--guess { color: #7a2ee0; }
.aft-cd__row:only-child { margin-top: 16px; }
.aft-cd__row:only-child .frame__label { white-space: nowrap; }
.aft-cd__row--entry { align-items: flex-start; }
.aft-cd__row--entry .aft-cd__ev { flex: none; width: 240px; margin-top: 18px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fig-edge, #e6e6e6); overflow: hidden; }

/* Compare: a neutral count next to a tinted button. #0a5fb4 on #e5f4ff passes AA for small text. */
.aft-cmp { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.aft-cmp__n { color: #5c5c5c; font-size: 11px; font-weight: 500; white-space: nowrap; }
.aft-changes .aft-cmp__btn, .aft-cmp__btn { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border: 0; border-radius: 5px; background: #e5f4ff; color: #0a5fb4; font: inherit; font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; cursor: default; }
.aft-cmp__btn .aft-vh__ic { width: 12px; height: 12px; }
.aft-cmp__btn .aft-cursor { top: 40%; left: 70%; }
.aft-changes .aft-cmp__btn--icon { padding: 2px; margin-left: auto; }
.aft-changes .aft-cmp__btn--tab { margin-left: auto; }
/* Tertiary: text only, so Reject all and Accept all keep the weight */
.aft-changes .aft-cmp__btn--foot { margin-right: auto; margin-left: -4px; padding: 4px 6px; background: transparent; color: #0a5fb4; font-weight: 500; }
.aft-rv__head:has(.aft-cmp__btn) { grid-template-columns: 1fr auto auto; align-items: center; }
.aft-rv__head:has(.aft-cmp__btn) .aft-rv__bar { grid-column: 1 / -1; }
.aft-tabs button { white-space: nowrap; }
/* On the canvas: same pair, on a white pill so it reads over the dotted grid */
.aft-cd__badge { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 2px 2px 2px 8px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px #d6e9fb, 0 1px 2px rgba(0, 0, 0, 0.08); vertical-align: middle; white-space: nowrap; }
.aft-cd__badge .aft-cmp__n { font-size: 10px; }
.aft-cd__badge .aft-cmp__btn { padding: 1px 6px 1px 4px; font-size: 10px; }
.aft-rvp__row:has(.aft-cmp__btn--icon) { background: #f5f9ff; }

/* Compare toolbar: dark and compact, floating over the canvas like Figma's own bars */
.aft-cd__bar { display: inline-flex; align-self: center; align-items: center; gap: 12px; height: 32px; padding: 0 4px 0 12px; border-radius: 10px; background: #1e1e1e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.55); font-size: 11px; line-height: 16px; white-space: nowrap; }
.aft-cd__vs { display: inline-flex; align-items: center; gap: 4px; }
.aft-cd__vs b { color: #fff; font-weight: 500; }
.aft-cd__vs em { display: grid; place-items: center; width: 16px; font-style: normal; }
.aft-cd__vs > span { margin-right: 2px; }
.aft-cd__sep { flex: none; width: 1px; height: 16px; background: rgba(255, 255, 255, 0.16); }
.aft-cd__act { display: inline-flex; align-items: center; gap: 8px; }
.aft-cd__exit { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 500; }
.aft-cd__exit.is-primary { background: #0d99ff; }
.aft-cd__kept { color: #5fd28f; font-weight: 500; }
/* Before and now, side by side */
.aft-cd__pair { gap: 10px; margin-top: 14px; }
.aft-cd__arrow { align-self: center; margin-top: 14px; color: #8c8c8c; font-size: 16px; }
.aft-cd__lab { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #e6e6e6; color: #1e1e1e; font-size: 10px; font-weight: 600; line-height: 14px; }
.aft-cd__lab.is-now { background: #0d99ff; color: #fff; }
.aft-cd__ro { margin-left: 5px; color: #8c8c8c; font-size: 10px; }
.aft-mv__dim .trip { opacity: 0.75; filter: saturate(0.7); }
.aft-dev .frame__label { white-space: nowrap; }

/* Main page: the compare clip as a looping proposal */
.aft-cmp-loop .stp-loop__frame > .aft-dev { flex: 1; align-self: stretch; min-height: 390px; }

/* Moment 04: publish gate, three steps across */
.aft-clip--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aft-clip__screen.aft-gate { align-items: flex-start; padding: 18px 12px; }
.aft-gt { position: relative; width: 100%; max-width: 260px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fig-edge, #e6e6e6); font-size: 11px; color: #1e1e1e; overflow: hidden; }
.aft-gt > p { margin: 0; }
.aft-gt__banner { padding: 7px 10px; background: #fff4e5; color: #8a4b00; line-height: 1.4; }
.aft-gt__list { margin: 0; padding: 4px 0; list-style: none; }
.aft-gt__row { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 3px 6px; padding: 6px 10px; }
.aft-gt__row + .aft-gt__row { border-top: 1px solid var(--fig-line, #e6e6e6); }
.aft-gt__ic { display: grid; place-items: center; color: #9747ff; }
.aft-gt__ic svg { width: 14px; height: 14px; }
.aft-gt__row b { font-weight: 600; }
.aft-gt__row .ev2-diff { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: 3px; }
.aft-gt__row .ev2-diff s { color: var(--fig-text-3, #8c8c8c); }
.aft-gt__row .ev2-diff ins { text-decoration: none; font-weight: 600; }
.aft-gt__row em { grid-column: 2 / -1; color: var(--fig-text-3, #8c8c8c); font-size: 10px; font-style: normal; line-height: 1.4; }
.aft-gt__flag { padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.aft-gt__flag.is-held { background: #fff4e5; color: #8a4b00; }
.aft-gt__flag.is-pub { background: #e5f4ff; color: #0a5fb4; }
.aft-gt__ph { display: flex; justify-content: space-between; padding: 8px 10px 4px; }
.aft-gt__ph span { color: var(--fig-text-3, #8c8c8c); }
.aft-gt__swap { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 10px; padding: 10px; border-radius: 6px; background: #2d3120; color: rgba(255, 255, 255, 0.6); }
.aft-gt__files { margin: 4px 0 0; padding: 0; list-style: none; }
.aft-gt__files li { display: flex; justify-content: space-between; padding: 4px 10px; }
.aft-gt__files em { color: var(--fig-text-3, #8c8c8c); font-style: normal; font-variant-numeric: tabular-nums; }
.aft-gt__file { display: inline-flex; align-items: center; gap: 5px; }
.aft-gt__file svg { width: 12px; height: 12px; color: var(--fig-text-3, #8c8c8c); }
.aft-gt__note { padding: 6px 10px; border-top: 1px solid var(--fig-line, #e6e6e6); color: #5c5c5c; }
.aft-gt__msg { display: flex; flex-direction: column; gap: 3px; margin: 0 10px 8px; padding: 6px 8px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--fig-edge, #e6e6e6); }
.aft-gt__msg span { color: var(--fig-text-3, #8c8c8c); font-size: 10px; }
.aft-gt__msg b { font-weight: 500; }
.aft-gt__toast { display: flex; align-items: center; gap: 8px; margin: 4px 8px 8px !important; padding: 8px 10px; border-radius: 6px; background: #1e1e1e; color: #fff; line-height: 1.4; }
.aft-gt__toast b { color: #7cc4ff; font-weight: 600; }
.aft-gt .aft-cmp__btn--foot { position: relative; }

/* Moment 04 in the chat: a fixed-height panel scrolled to the latest message */
.aft-clip__screen.aft-gate { padding: 14px 12px; }
.aft-gt-chat { width: 100%; height: 560px; overflow: hidden; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fig-edge, #e6e6e6); }
.aft-gt-chat .chat__thread { flex: 1 1 0; min-height: 0; justify-content: flex-end; overflow: hidden; padding-top: 8px; }
.aft-gt-chat .chat__thread > * { flex-shrink: 0; }
.aft-gt-chat .msg-agent > p { margin: 8px 0 0; }
.aft-gt--chat { max-width: none; margin-top: 8px; box-shadow: 0 0 0 1px var(--fig-edge, #e6e6e6); }
.aft-gt--chat .aft-gt__banner { display: flex; align-items: center; gap: 6px; }
.aft-gt--chat .aft-gt__banner span { margin-left: auto; font-size: 10px; opacity: 0.8; }
.aft-gt--chat .aft-gt__banner.is-pub { background: #e5f4ff; color: #0a5fb4; }
.aft-gt__lock { width: 12px; height: 12px; flex-shrink: 0; }

/* Moment 04 refine: the held card reads as part of the reply, not a second panel */
.aft-gt--chat { border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--fig-edge, #e6e6e6); }
.aft-gt__hd { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--fig-line, #ececec); }
.aft-gt__hd b { font-weight: 600; }
.aft-gt__hd span { margin-left: auto; padding: 1px 6px; border-radius: 4px; background: #fff4e5; color: #8a4b00; font-size: 10px; }
.aft-gt__hd .aft-gt__lock { color: #b86200; }
.aft-gt--chat.is-done .aft-gt__hd .aft-gt__lock { color: #14ae5c; }
.aft-gt--chat.is-done .aft-gt__hd span { background: none; color: var(--fig-text-3, #8c8c8c); }
.aft-gt--chat .aft-gt__list { padding: 2px 0; }
.aft-gt--chat .aft-gt__row { grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; padding: 7px 10px; }
.aft-gt--chat .aft-gt__row + .aft-gt__row { border-top: 0; }
.aft-gt__txt { display: flex; flex-direction: column; min-width: 0; }
.aft-gt__txt b { font-weight: 500; }
.aft-gt--chat .aft-gt__txt em { grid-column: auto; font-size: 10px; line-height: 14px; }
.aft-gt__diff { display: inline-flex; align-items: center; gap: 3px; color: var(--fig-text-3, #8c8c8c); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.aft-gt__diff .ev-sw { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.aft-gt__foot { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px 10px; border-top: 1px solid var(--fig-line, #ececec); }
.aft-gt__link { position: relative; color: #0a5fb4; font-weight: 500; }
.aft-gt--chat .aft-gt__swap { margin: 8px 10px 4px; }
.aft-gt--chat .aft-gt__note { border-top: 0; padding: 2px 10px 8px; color: var(--fig-text-3, #8c8c8c); }

/* Main page: the publish gate loops through 3 frames instead of 4 */
.aft-gate-loop .stp-loop__frame, .aft-gate-loop .stp-cap__text p { animation: aft-loop3 9.6s infinite; animation-delay: calc(var(--i) * 3.2s - 9.6s); }
.aft-gate-loop .stp-cap__bar::after { animation-duration: 9.6s; }
@keyframes aft-loop3 { 0% { opacity: 0; } 3.3%, 31.3% { opacity: 1; } 34.6%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .aft-gate-loop .stp-loop__frame, .aft-gate-loop .stp-cap__text p { animation: none; }
}

/* Compare frames as a Figma window: drawn at 840 × 540 and zoomed to fit (see fitWindows in the script) */
.aft-clip__screen.aft-dev { display: block; padding: 0; background: none; }
.aft-cmp-loop .stp-loop__frame { max-width: none; }
.aft-cmp-loop .stp-loop__frame > .aft-dev { min-height: 0; }
.aft-fw__fit { display: flex; justify-content: center; width: 100%; min-width: 0; contain: inline-size; }
.aft-cmp-loop .stp-loop { grid-template-columns: minmax(0, 1fr); }
.aft-clip__screen.aft-dev { min-width: 0; }
.aft-fw { display: grid; flex: none; grid-template-columns: auto 240px; justify-content: center; column-gap: 32px; position: relative; width: 720px; height: 600px; color: #1e1e1e; font-size: 11px; line-height: 16px; text-align: left; }
.aft-fw .i { width: 16px; height: 16px; }
.aft-fw__left, .aft-fw__right { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; background: #fff; }
.aft-fw__left { border-right: 1px solid #e6e6e6; }
.aft-fw__right { align-self: center; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12); }
.aft-fw__left > p, .aft-fw__left ul { margin: 0; }
.aft-fw__file { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-bottom: 1px solid #e6e6e6; }
.aft-fw__file b { display: block; font-weight: 600; }
.aft-fw__file em { display: block; color: rgba(0, 0, 0, 0.5); font-style: normal; }
.aft-fw__logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #f5f5f5; }
.aft-fw__tabs { display: flex; gap: 14px; padding: 10px 12px; border-bottom: 1px solid #e6e6e6; }
.aft-fw__tabs span { color: rgba(0, 0, 0, 0.5); }
.aft-fw__sec { padding: 10px 12px 4px; font-weight: 600; }
.aft-fw__pages, .aft-fw__layers { padding: 0 4px; list-style: none; }
.aft-fw__pages li { padding: 4px 8px 4px 28px; border-radius: 5px; }
.aft-fw__pages li.is-on { font-weight: 600; }
.aft-fw__pages { padding-bottom: 6px; border-bottom: 1px solid #e6e6e6; }
.aft-fw__ly { display: flex; align-items: center; gap: 6px; height: 28px; padding-left: calc(8px + var(--d) * 16px); border-radius: 5px; }
.aft-fw__ly .i { color: rgba(0, 0, 0, 0.5); }
.aft-fw__ly.is-on { background: #e5f4ff; }
.aft-fw__ly.is-on .i { color: #0d99ff; }
.aft-fw__canvas { display: flex; flex-direction: column; min-width: 0; }
.aft-fw__canvas > .aft-cd__bar { position: absolute; top: 10px; left: 50%; z-index: 2; transform: translateX(-50%); }
.aft-fw__stage { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: 48px 12px 16px; }
.aft-fw .phone { zoom: 0.71 !important; }
/* Undo the phone's zoom so the tags render at the canvas tag's own size (13px / 22px), as in the While stage */
.aft-fw .cv-tag.aft-ba__tag { zoom: calc(1 / 0.71); top: 6px; left: 6px; padding: 0 8px; border-radius: 5px; font-size: 13px; line-height: 22px; }
.aft-fw .aft-mv__cv { width: auto; }
.aft-fw .aft-cd__pair { margin-top: 0; }
.aft-fw__right > .aft-cd__panel { width: auto; border-radius: 0; box-shadow: none; }
.aft-fw__right > p { margin: 0; }
.aft-fw__right .aft-cd__tabs { padding: 10px 12px; }
.aft-fw__right .aft-cd__ph { padding: 10px 12px 4px; }
.aft-fw__right .aft-cd__panel li { padding: 6px 12px; }
.aft-fw__ev { min-height: 0; overflow: hidden; }
.aft-fw__sum { margin: 0; padding: 2px 0 6px; list-style: none; }
.aft-fw__sum li { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; }
.aft-fw__sum .i { color: rgba(0, 0, 0, 0.5); }
.aft-fw__sum .cv-tag { position: static; margin-left: auto; }
.aft-fw__hint { padding: 8px 12px; border-top: 1px solid #e6e6e6; color: rgba(0, 0, 0, 0.5); }
.aft-fw__chip { margin-left: auto; padding: 0 6px; border-radius: 4px; background: #e5f4ff; color: #007be5; font-size: 10px; font-style: normal; font-weight: 500; line-height: 18px; }
.aft-fw__chip.is-guess { background: #f1e8ff; color: #7a2ee0; }
.aft-fw__chip.is-held { background: #fff1d6; color: #8a4b00; }

/* Main page stickies for after the agent acts: four across, like the While section */
#ideation-after .ide-intro .ans--q .ide-answers:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#ideation-after .ide-intro .ans--q .ide-answers > li:nth-child(4) { transform: rotate(1.4deg) translateY(-2px); }
.aft-stk { align-items: center; gap: 8px; }
.aft-stk > .aft-gt { width: 100%; }
#ideation-after .ide-intro .q-crop { max-height: 400px; }
.q-crop > .aft-stk-chat { width: 100%; max-width: none; height: auto; overflow: hidden; border-radius: 8px; }
.q-crop > .aft-stk-rvp { overflow: hidden; border-radius: 8px; }
.aft-stk-rvp .aft-rv__foot { justify-content: flex-end; gap: 8px; padding: 10px 12px; }
.aft-stk-rvp .aft-cmp__btn--foot { display: none; }
.aft-stk .aft-gt__hd span { display: none; }
.aft-fw__chip.is-rev { background: #f0f0f0; color: #5c5c5c; }

/* Stage 03 walkthrough: full Figma windows at the camera's 1216 × 760 */
.ide-story__screen .aft-wt .lw__canvas.aft-wt__cmp { justify-content: center; padding: 0 24px; }
.aft-wt .lw-float.aft-rvp { max-height: calc(100% - 28px); overflow: hidden; border-radius: 12px; }
/* Longer threads sit scrolled to the latest message, the earlier ones running off the top */
.aft-wt__chat { display: flex; flex-direction: column; }
.aft-wt__chat.is-latest .chat__thread { justify-content: flex-end; min-height: 0; overflow: hidden; }
.aft-wt__chat.is-latest .chat__thread > * { flex: none; }
.aft-stk-gate .aft-gt__hd span { display: none; }