/* =========================================================
   Solution prototype: the current Figma editor (light theme)
   that plays a fixed script.
   Layout: rail | agent chat | canvas | design properties.
   Colors, icons and the agent chat come from figma-ui.css.
   ========================================================= */

body {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
  background: var(--fig-panel);
  color: var(--fig-text);
  font-size: 11px;
}
body.is-clean { grid-template-rows: 1fr; }
body.is-clean .script-bar { display: none; }

/* ---------- Script controls (hidden with ?clean) ---------- */
.script-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: #1e1e1e; color: #fff; font-size: 12px; border-bottom: 1px solid #000; }
.script-bar button { padding: 4px 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); color: #fff; }
.script-bar button:hover { background: rgba(255, 255, 255, 0.18); }
.script-bar__label { margin-left: 8px; color: rgba(255, 255, 255, 0.75); }
.script-bar__hint { margin-left: auto; color: rgba(255, 255, 255, 0.4); }
.script-bar a { color: rgba(255, 255, 255, 0.75); }

/* ---------- Loop mode (?loop): fades out before it starts over ---------- */
body.is-loop .fig { transition: opacity 0.4s ease; }
body.is-loop.is-fading .fig { opacity: 0; }

/* ---------- Try mode (?try): annotated demo; moderated tests had no arrows ---------- */
body.is-try .cursor { display: none; }
/* Cue is always the external arrow — never restyle the control itself */
.try-target {
  cursor: var(--fig-cursor);
  position: relative;
  z-index: 2;
}
.try-spot { display: none !important; }
/* External pointer — sits beside the target, never paints over it */
.try-arrow {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 5px;
  height: auto;
  max-width: min(220px, calc(100% - 24px));
  padding: 0;
  pointer-events: none;
  color: var(--fig-blue);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95));
  animation: try-arrow-nudge 1.15s ease-in-out infinite;
}
.try-arrow[hidden] { display: none; }
.try-arrow__tip {
  flex: none;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid currentColor;
}
.try-arrow.is-end {
  flex-direction: row-reverse;
  animation-name: try-arrow-nudge-end;
}
.try-arrow.is-end .try-arrow__tip {
  border-left: 0;
  border-right: 7px solid currentColor;
}
.try-arrow.is-end .try-arrow__label { order: 0; }
/* D · Action + example: 13px title, 12px detail */
.try-arrow__label {
  order: -1;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--fig-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 8px rgba(0, 0, 0, 0.12);
}
.try-arrow__label.is-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 180px;
  white-space: normal;
}
.try-arrow__label.is-stack strong {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.try-arrow__label.is-stack span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  opacity: 0.92;
}
.try-arrow__label.is-long {
  max-width: 148px;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
}
.try-arrow:not(.is-end) .try-arrow__label.is-long { text-align: right; }
@keyframes try-arrow-nudge {
  50% { transform: translateX(3px); }
}
@keyframes try-arrow-nudge-end {
  50% { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .try-arrow { animation: none; }
}
.try-caption { position: absolute; bottom: 68px; left: 50%; z-index: 21; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100% - 32px)); padding: 9px 14px; transform: translateX(-50%); border-radius: 10px; background: #1e1e1e; color: rgba(255, 255, 255, 0.7); box-shadow: var(--fig-toolbar-shadow); font-size: 12px; line-height: 16px; }
.try-caption:has(.try-caption__count) { color: #fff; font-weight: 550; }
.try-caption__count { flex: none; padding: 1px 6px; border-radius: 5px; background: var(--fig-blue); color: #fff; font-variant-numeric: tabular-nums; }
.try-caption button { flex: none; padding: 4px 10px; border-radius: 6px; background: var(--fig-blue); color: #fff; font-weight: 550; cursor: pointer; }
.try-caption.is-action { padding-right: 8px; color: #fff; }

/* Task brief: floating card on canvas (CTA moments) or full-bleed bar above the prototype */
.try-task {
  position: absolute; top: 12px; left: 50%; z-index: 21;
  display: flex; flex-direction: column; align-items: stretch;
  width: min(420px, calc(100% - 32px));
  transform: translateX(-50%);
  color: var(--fig-text); text-align: left;
  pointer-events: none;
}
/* Full-bleed strip above .fig — never covers canvas chrome (Edits, frames, etc.) */
body.is-try-bar {
  grid-template-rows: auto auto 1fr;
}
body.is-clean.is-try-bar {
  grid-template-rows: auto 1fr;
}
.try-task.is-bar {
  position: relative;
  top: auto;
  left: auto;
  z-index: 5;
  width: 100%;
  max-width: none;
  transform: none;
  pointer-events: auto;
}
.try-task.is-bar .try-task__frame {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 20px;
  border-radius: 0;
  background: #f3f9ff;
  box-shadow: inset 0 -1px 0 #d7e9fb;
}
.try-task.is-bar .try-task__progress {
  width: 112px;
  flex: none;
  align-self: center;
}
.try-task.is-bar .try-task__kicker {
  flex: none;
}
.try-task.is-bar .try-task__title {
  flex: none;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
}
.try-task.is-bar .try-task__goal {
  flex: 1 1 220px;
  margin: 0;
  color: var(--fig-text-2, #6b6f76);
  font-size: 12px;
  line-height: 18px;
}
.try-task.is-bar .try-task__nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.try-task__nav-btn {
  margin: 0;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--fig-text);
  box-shadow: inset 0 0 0 1px var(--fig-border, #d9d9d9);
  font: inherit;
  font-size: 11px;
  font-weight: 550;
  line-height: 16px;
  cursor: pointer;
}
.try-task__nav-btn:hover:not(:disabled) { background: #f5f5f5; }
.try-task__nav-btn:disabled { opacity: 0.4; cursor: default; }
.try-task__nav-btn[data-try-skip] {
  background: var(--fig-blue);
  color: #fff;
  box-shadow: none;
}
.try-task__nav-btn[data-try-skip]:hover { filter: brightness(1.05); }
.try-task.is-bar.is-changing .try-task__frame {
  animation: task-bar-flash 0.55s ease;
}
@keyframes task-bar-flash {
  0% { background: #e5f4ff; }
  100% { background: #f3f9ff; }
}
/* CTA briefs (Start / Next / Replay) sit in the canvas center so they own attention */
.try-task:has(.try-task__btn) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 48px));
}
.try-task__fname,
.try-task__handles { display: none; }
.try-task__frame {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #fff;
  outline: none;
  box-shadow:
    0 0 0 1.5px var(--fig-blue),
    0 0 0 5px rgba(13, 153, 255, 0.16),
    0 12px 32px rgba(0, 0, 0, 0.14);
  pointer-events: auto;
}
.try-task:has(.try-task__btn) .try-task__frame {
  gap: 8px;
  padding: 20px 22px;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.12);
}
.try-task:has(.try-task__btn) .try-task__title { font-size: 18px; line-height: 24px; padding-right: 28px; }
.try-task:has(.try-task__btn) .try-task__goal { font-size: 13px; line-height: 20px; }
/* Suggest-mode notices share the same top slot — hide them while the task brief is up */
body.is-task .canvas__notice { display: none !important; }
.try-task__progress {
  display: flex; gap: 4px; align-self: stretch; height: 4px;
}
.try-task__progress i {
  flex: 1; height: 4px; border-radius: 2px; background: #e6e6e6;
}
.try-task__progress i.is-done,
.try-task__progress i.is-on { background: var(--fig-blue); }
.try-task__kicker {
  margin: 0; display: inline-flex; width: fit-content;
  padding: 3px 8px; border-radius: 4px;
  background: var(--fig-blue-soft, #e5f4ff);
  color: var(--fig-blue-text, #007be5);
  font-size: 11px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.try-task.is-changing .try-task__frame { animation: task-step 0.7s ease; }
.try-task.is-changing .try-task__kicker { animation: task-kicker 0.45s ease; }
.try-task.is-changing .try-task__progress i.is-on { animation: task-pip 0.45s ease; }
@keyframes task-step {
  0% { box-shadow: 0 0 0 1.5px var(--fig-blue), 0 0 0 0 rgba(13, 153, 255, 0.45), 0 12px 32px rgba(0, 0, 0, 0.14); }
  45% { box-shadow: 0 0 0 1.5px var(--fig-blue), 0 0 0 9px rgba(13, 153, 255, 0.22), 0 12px 32px rgba(0, 0, 0, 0.14); }
}
@keyframes task-kicker {
  from { opacity: 0; transform: translateY(6px); }
}
@keyframes task-pip {
  from { transform: scaleX(0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .try-task.is-changing .try-task__frame,
  .try-task.is-changing .try-task__kicker,
  .try-task.is-changing .try-task__progress i.is-on,
  .try-task.is-bar.is-changing .try-task__frame { animation: none; }
}
.try-task__title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 650; }
.try-task__goal { margin: 0; color: var(--fig-text); font-size: 13px; line-height: 19px; }
.try-task__close {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--fig-text-3, #8a8d95);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.try-task__close:hover { background: rgba(0, 0, 0, 0.06); color: var(--fig-text); }
.try-task__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; align-self: stretch; margin-top: 10px; }
.try-task__btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 9px 16px; border: 0; border-radius: 6px;
  background: var(--fig-blue); color: #fff;
  font: inherit; font-size: 13px; font-weight: 550; line-height: 16px;
  text-decoration: none; cursor: pointer;
}
.try-task__btn:hover { filter: brightness(1.05); }
.try-task__btn--secondary {
  background: #fff; color: var(--fig-text);
  box-shadow: inset 0 0 0 1px var(--fig-border, #e6e6e6);
}
.try-task__btn--secondary:hover { background: #f5f5f5; filter: none; }

/* Standalone welcome page — Figma UI is hidden until “Try the prototype” */
body.is-welcome {
  display: block;
  height: 100vh;
  overflow: hidden;
  background: #f8f8f8;
}
body.is-welcome .fig,
body.is-welcome .script-bar { display: none !important; }
.try-task.is-welcome {
  position: fixed; inset: 0; top: 0; left: 0;
  width: auto; max-width: none; height: 100%;
  transform: none; pointer-events: auto;
  background: #f8f8f8; z-index: 100;
}
.try-welcome {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  width: 100%; height: 100%; min-height: 100%;
}
.try-welcome__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--fig-text-3, #8a8d95);
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.try-welcome__close:hover { background: rgba(0,0,0,.06); color: var(--fig-text); }
.try-welcome__left {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
  background: #f8f8f8;
}
.try-welcome__right {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 36px);
  background: #fff; border-left: 1px solid var(--fig-border, #e6e6e6);
}
.try-welcome__eyebrow {
  margin: 0 0 10px;
  font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fig-blue-text, #007be5);
}
.try-welcome__right .try-welcome__eyebrow { margin-bottom: 16px; }
.try-welcome__quote {
  margin: 0; max-width: 16ch;
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; font-weight: 500;
  letter-spacing: -0.02em; color: var(--fig-text);
  text-wrap: balance;
}
.try-welcome__lead {
  margin: 14px 0 0; max-width: 42ch;
  font-size: 14px; line-height: 22px; color: var(--fig-text-2);
}
.try-welcome__note {
  margin: 14px 0 0; max-width: 46ch; padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--fig-blue) 28%, var(--fig-line, #e6e6e6));
  background: color-mix(in srgb, var(--fig-blue) 8%, #fff);
  color: var(--fig-text-2);
  font-size: 12px; line-height: 1.45;
}
.try-welcome__note b { color: var(--fig-text); font-weight: 600; }
.try-welcome__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin-top: 28px;
}
.try-welcome__btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 10px 16px; border: 0; border-radius: 8px;
  background: var(--fig-blue); color: #fff;
  font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; text-decoration: none;
}
.try-welcome__btn:hover { filter: brightness(1.05); }
.try-welcome__btn--secondary {
  background: #fff; color: var(--fig-text);
  box-shadow: inset 0 0 0 1px var(--fig-border, #e6e6e6);
}
.try-welcome__btn--secondary:hover { background: #f5f5f5; filter: none; }
.try-welcome__metrics {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column;
}
.try-welcome__metrics li {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 0; border-bottom: 1px solid var(--fig-border, #e6e6e6);
  font-size: 13px; line-height: 19px; color: var(--fig-text-2);
}
.try-welcome__metrics li:last-child { border-bottom: 0; }
.try-welcome__metrics b { color: var(--fig-text); font-weight: 600; font-size: 13px; }
.try-welcome.try-end {
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding: clamp(28px, 4vw, 48px); box-sizing: border-box; overflow: auto;
}
.try-end .try-welcome__left,
.try-end .try-welcome__right { padding: 0; background: none; border: 0; }
.try-end .try-welcome__left { align-items: center; text-align: center; }
.try-end .try-welcome__quote { max-width: none; }
.try-end .try-welcome__actions { justify-content: center; margin-top: 20px; }
.try-end__stages {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.try-end__stage {
  --c: #5b43d6; --t: #efedff;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--fig-border, #e6e6e6); background: #fff;
}
.try-end__shot {
  display: grid; place-items: center; overflow: hidden;
  height: clamp(220px, 36vh, 360px); margin: 2px 0 4px;
  border-radius: 8px; background: var(--fig-canvas, #f5f5f5);
  pointer-events: none; user-select: none;
}
.try-end__fit { width: max-content; }
.try-end__fit > .msg-agent { padding: 12px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.try-end__shot--before .plan-step .plan-step__actions { display: flex !important; gap: 4px; }
.try-end__shot--before .plan-step .plan-step__decision { display: none; }
.try-end__fit > .ev-live {
  margin: 0; border-radius: 10px; overflow: visible;
  background: var(--fig-panel, #fff); color: var(--fig-text);
  box-shadow: var(--fig-toolbar-shadow), 0 12px 28px rgba(0, 0, 0, 0.14);
  font-size: 11px; line-height: 16px;
}
@media (max-width: 960px) {
  .try-end__stages { grid-template-columns: 1fr; }
}
.try-end__stage--during { --c: #0a6dc2; --t: #e8f3fc; }
.try-end__stage--after { --c: #087a55; --t: #e8f6f0; }
.try-end__badge {
  align-self: flex-start; padding: 2px 8px; border-radius: 999px;
  background: var(--t); color: var(--c);
  font-size: 11px; line-height: 16px; font-weight: 600;
}
.try-end__row {
  display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline;
  margin: 0; font-size: 13px; line-height: 19px;
}
.try-end__row small { font-size: 11px; font-weight: 600; color: var(--fig-text-3, #8a8d95); }
.try-end__row--then span { color: var(--fig-text-3, #8a8d95); text-decoration: line-through; text-decoration-color: rgba(200, 59, 69, .45); }
.try-end__row--now small { color: var(--c); }
.try-end__row--now span { color: var(--fig-text); font-weight: 500; }
@media (max-width: 720px) {
  .try-welcome { grid-template-columns: 1fr; }
  .try-welcome__right { border-left: 0; border-top: 1px solid var(--fig-border, #e6e6e6); }
}

/* Free-form prompt in task mode — any wording, mentions optional and in any order */
body.is-task.is-free-prompt .composer__placeholder,
body.is-task.is-free-prompt .composer__draft { display: none !important; }
body.is-task.is-free-prompt .composer__free { display: block; }
body.is-task.is-free-prompt .composer__libraries { display: none; }
/* Keep empty-state chrome (“What’s next?” + suggestions) while they write */
.composer__free { min-height: 60px; outline: none; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 20px; color: var(--fig-text); }
.composer__free:empty::before { content: attr(data-placeholder); color: var(--fig-text-3); pointer-events: none; }
.composer__free .mention { margin: 0 2px; vertical-align: baseline; }
/* Sent bubble keeps mention chips (no remove control) */
.msg-user .mention {
  display: inline-flex; align-items: center; gap: 3px;
  margin: 0 1px; padding: 0 5px; border-radius: 4px;
  background: var(--fig-blue-soft, #e5f1ff); color: var(--fig-blue-text, #0a6dc2);
  font-weight: 550; line-height: 18px; white-space: nowrap; vertical-align: baseline;
}
.msg-user .mention__icon { width: 10px; height: 10px; opacity: 0.8; }
.msg-user .mention--component { background: #f1e5ff; color: #8638e5; }
body.is-task.is-free-prompt .trip,
body.is-task.is-free-prompt .trip .trip__title,
body.is-task.is-free-prompt .trip .btn-primary,
body.is-task.is-free-prompt .phone[data-mention],
body.is-task.is-free-prompt [data-mention] { cursor: var(--fig-cursor); }
/* Ready state styling lives in figma-ui.css (.composer.is-ready .composer__send) */

/* ---------- Editor layout ---------- */
.fig { position: relative; display: grid; grid-template-columns: 48px 285px 1fr 241px; min-height: 0; }

/* ---------- Scripted pointer ---------- */
/* Its tip sits at the element's top-left, so a translate puts the tip on the target */
.cursor { position: absolute; top: 0; left: 0; z-index: 20; width: 14px; height: 14px; pointer-events: none; }
.cursor.is-moving { transition: transform 0.55s cubic-bezier(0.45, 0, 0.2, 1); }
.cursor img { display: block; width: 14px; height: 14px; }
.cursor__ring { position: absolute; top: -5px; left: -5px; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--fig-blue) 40%, transparent); opacity: 0; }
.cursor.is-clicking .cursor__ring { animation: cursor-click 0.45s ease-out; }
@keyframes cursor-click {
  from { opacity: 0.9; transform: scale(0.3); }
  to { opacity: 0; transform: scale(1.6); }
}

/* Agent chat docked on the left */
.fig > .chat { border-right: 1px solid var(--fig-edge); }
/* Once the request is sent, the conversation starts at the top instead of the centred empty state */
.chat__thread:has(> .msg-user:not([hidden])) { padding-top: 8px; }
/* The designer's answer to the agent's question: the picked choice turns blue (figma-ui.css), the other steps back */
[data-state="answer"] .msg-option:not([data-choice="layout"]) { opacity: 0.45; }
/* The recorded answer is an outlined pill: white, blue border, blue words, no dot */
/* Clarifying question that stays above the Layout only chip */
.msg-ask-detail {
  margin: 0;
  color: var(--fig-text-2);
  font-size: 12px;
  line-height: 18px;
}
.msg-answer-chip,
p.msg-user[data-from="answer"] {
  align-self: flex-end;
  width: max-content;
  max-width: none;
  margin: -6px 0 0;
  padding: 0;
  background: transparent;
}
.msg-answer-chip .msg-choice,
p.msg-user[data-from="answer"] {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--fig-blue);
  border-radius: 999px;
  background: #fff;
  color: var(--fig-blue-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  box-shadow: none;
  cursor: default;
}
.msg-answer-chip .msg-choice::before,
p.msg-user[data-from="answer"]::before { content: none; }

/* Plan step controls: pencil edits the new value, check accepts, dismiss rejects */
button.plan-icon-btn {
  background: #fff;
  font: inherit;
  cursor: pointer;
}
button.plan-icon-btn:hover { background: var(--fig-field); }
button.plan-icon-btn:active { background: var(--fig-line); }
.plan-step.is-accepted .plan-step__actions,
.plan-step.is-rejected .plan-step__actions,
.plan-step:has(.plan-step__status--accepted:not(.plan-step__status--local):not([hidden])) .plan-step__actions,
.plan-step:has(.plan-step__status--rejected:not(.plan-step__status--local):not([hidden])) .plan-step__actions {
  display: none;
}
.plan-step__decision {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
}
.plan-step__statuses {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.plan--previewed .plan-step__undo--local { display: none; }
.plan-step.is-accepted .plan-step__undo--local,
.plan-step.is-rejected .plan-step__undo--local { display: grid; }
/* Local accept/reject must match scripted status chrome (tick / strike) */
.plan-step.is-accepted .plan-step__num {
  background: #14ae5c !important;
  color: transparent;
}
.plan-step.is-accepted .plan-step__num::after {
  content: "✓";
  position: absolute;
  color: #fff;
  font-size: 10px;
}
.plan-step.is-rejected .plan-step__title { text-decoration: line-through; }
.plan-step.is-rejected :is(.plan-step__num, .plan-step__title, .plan-step__path, .plan-step__change, .plan-step__why) {
  opacity: 0.45;
}
/* Prefer local decision chrome over scripted duplicates — keep “Edited” cue visible */
.plan-step.is-accepted .plan-step__status:not(.plan-step__status--local):not(.plan-step__status--live):not([data-cue="edited-1"]),
.plan-step.is-rejected .plan-step__status:not(.plan-step__status--local):not(.plan-step__status--live),
.plan-step.is-accepted .plan-step__undo:not(.plan-step__undo--local),
.plan-step.is-rejected .plan-step__undo:not(.plan-step__undo--local) {
  display: none !important;
}
.plan-step [data-cue="edited-1"].try-target {
  cursor: var(--fig-cursor);
}
button.plan-step__undo {
  margin: 0; padding: 0; border: 0; background: none;
  color: var(--fig-blue-text); font: inherit; font-size: 11px; font-weight: 550;
  line-height: 16px; cursor: pointer;
}
button.plan-step__undo:hover { text-decoration: underline; }
button.plan-step__undo--local {
  place-items: center; width: 20px; height: 18px;
  border: 1px solid var(--fig-line); border-radius: 5px; background: #fff;
  line-height: 1;
}
button.plan-step__undo--local .i { width: 12px; height: 12px; }
button.plan-step__undo--local:hover { text-decoration: none; background: var(--fig-field); }
.plan__head .plan__head-side { gap: 8px; margin-left: auto; }
button.plan-add {
  display: inline-flex; align-items: center; gap: 2px;
  margin: 0; padding: 1px 7px; border: 1px solid var(--fig-blue); border-radius: 5px;
  background: #fff; color: var(--fig-blue-text);
  font: inherit; font-size: 11px; font-weight: 600; line-height: 16px;
  white-space: nowrap; cursor: pointer;
}
button.plan-add .i { width: 12px; height: 12px; }
button.plan-add:hover { background: var(--fig-blue); color: #fff; }
.plan-regen { display: none; align-items: center; gap: 8px; margin: 0; padding: 20px 12px; color: var(--fig-text-2); font-size: 12px; }
.plan--previewed.is-regenerating .plan__steps,
.plan--previewed.is-regenerating .plan-foot { display: none; }
.plan--previewed.is-regenerating .plan-regen { display: flex; }
button.plan-regen-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 8px 0 0; padding: 0; border: 0; background: none;
  color: var(--fig-blue-text); font: inherit; font-size: 11px; font-weight: 550;
  line-height: 16px; cursor: pointer;
}
button.plan-regen-btn .i { width: 12px; height: 12px; }
button.plan-regen-btn:hover { text-decoration: underline; }
.plan--previewed .plan-step--added .plan-step__num { background: var(--fig-blue); color: #fff; }
.plan--previewed .plan-step--added:is(.is-accepted, :has(.plan-step__status--accepted:not([hidden]))) .plan-step__num { background: #14ae5c; color: transparent; }
.plan-step__title-edit {
  flex: 1; min-width: 0; margin: 0; padding: 0 4px;
  border: 1px solid var(--fig-blue); border-radius: 4px;
  background: #fff; color: var(--fig-text);
  font: inherit; font-size: 12px; font-weight: 550; line-height: 18px;
}
.plan-step--specifying { background: #f5fbff; }
.plan-step--specifying .plan-icon-btn--edit { display: none; }
button.plan-btn { font: inherit; font-size: 11px; font-weight: 550; line-height: 16px; cursor: pointer; }
.plan-btn.plan-btn--off:not(.plan-btn--primary) { border-color: var(--fig-field); background: var(--fig-field); color: var(--fig-text-3); cursor: default; }
/* Accept → Run: plan window matches the case-study mid-run chrome */
.plan--previewed.is-live-run > .plan__head:not(.plan__head--live),
.plan--previewed.is-live-run > .plan-foot:not(.plan-foot--live),
.plan--previewed.is-live-run .plan-step__actions,
.plan--previewed.is-live-run .plan-step__decision,
.plan--previewed.is-live-run .plan-step__status:not(.plan-step__status--live),
.plan--previewed.is-live-run .plan-step__undo,
.plan--previewed.is-live-run .evidence-reason,
.plan--previewed.is-live-run .plan-step__layers:not(.plan-step__layers--live) { display: none; }
.plan--previewed.is-live-run .plan-step--guess { box-shadow: none; }
.plan--previewed.is-live-run .plan-step--running .plan-step__path,
.plan--previewed.is-live-run .plan-step--running .plan-step__change:not(.stp-resume-change) { display: none; }
.plan--previewed.is-live-run .plan-step--running .stp-resume-change {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.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, #0a6dc2);
  font-size: 10px;
  font-style: normal;
  font-weight: 550;
  white-space: nowrap;
}
.canvas .btn-primary.cv-btn--live {
  background: color-mix(in srgb, var(--live-fill, #315edb) 18%, white) !important;
  color: var(--live-fill, #315edb) !important;
  box-shadow: inset 0 0 0 2px var(--live-fill, #315edb);
}
.canvas .btn-primary.cv-btn--live.stp-coral {
  background: #fde3da !important;
  color: #c2410c !important;
  box-shadow: inset 0 0 0 2px #e8613c;
}
.plan--previewed.is-live-run .plan-step--queued .plan-step__path { display: none; }
.fig.is-live-run .plan-regen-btn,
.fig.is-live-run .canvas__notice,
.fig:has([data-live-pad]) .step-preview--2,
.fig:has([data-live-fill]) .step-tag--1,
.fig.is-applied-width .step-preview--3 { display: none; }
.plan--previewed.is-live-run .plan-step.is-live-rolled { background: #fafafa; box-shadow: inset 2px 0 0 var(--fig-text-3); }
.plan-step.is-live-applied .plan-step__actions,
.plan-step.is-live-applied .plan-step__decision { display: none; }
.fig.is-plan-settled .canvas__notice,
.fig:has(.plan-step.is-live-applied) .plan-regen-btn { display: none; }
.msg-agent > .msg-status--live-run { margin-top: 8px; }
.msg-agent.is-live-running > p:not(.msg-run-lead):not(.msg-status):not(.msg-status--live-run) { display: none !important; }

/* Floating Edits log during a live run (case-study walkthrough close-up) */
.canvas .ev-live {
  position: absolute;
  z-index: 12;
  top: 16px;
  right: 16px;
  width: 288px;
  max-height: calc(100% - 96px);
  overflow: auto;
  margin: 0;
  border-radius: 10px;
  background: var(--fig-panel);
  box-shadow: var(--fig-toolbar-shadow), 0 12px 28px rgba(0, 0, 0, 0.14);
  color: var(--fig-text);
  font-size: 11px;
  line-height: 16px;
  animation: ev-in 0.35s ease both;
}
@keyframes ev-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.ev-live .ev__head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 6px 0 12px;
  border-bottom: 1px solid var(--fig-line);
  position: sticky;
  top: 0;
  background: var(--fig-panel);
  z-index: 1;
}
.ev-live .ev__head b { font-weight: 600; }
.ev-live .ev__head > span:not(.icon-btn) { flex: 1; color: var(--fig-text-2); font-variant-numeric: tabular-nums; }
.ev-live .ev__head .icon-btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--fig-text-2);
  cursor: pointer;
}
.ev-live .ev__head .icon-btn:hover { background: var(--fig-field); }
.ev-live .ev__head .icon-btn .i { width: 14px; height: 14px; }
.ev-live .ev__foot {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--fig-line);
  color: var(--fig-text-3);
  position: sticky;
  bottom: 0;
  background: var(--fig-panel);
}
.ev-live summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--fig-field);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
}
.ev-live summary::-webkit-details-marker { display: none; }
.ev-live .ev-chev {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--fig-text-3);
  transform: rotate(-90deg);
  transition: transform 0.15s;
}
.ev-live details[open] > summary .ev-chev { transform: none; }
.ev-live summary b { flex: 1; color: var(--fig-text-2); font-weight: 600; }
.ev-live summary em { color: var(--fig-text-3); font-style: normal; }
.ev-live .ev2-grp.is-on > summary b,
.ev-live .ev2-grp.is-on > summary em { color: var(--agent); }
.ev-live .ev2-grp.is-queued > summary { opacity: 0.5; }
.ev-live .ev2-grp.is-done > summary b { color: var(--fig-text-2); }
.ev-live ol { margin: 0; padding: 0; list-style: none; }
.ev-live .ev2-row {
  display: grid;
  grid-template-columns: 14px minmax(52px, 0.9fr) minmax(0, 1.4fr) 22px;
  align-items: center;
  column-gap: 8px;
  height: 30px;
  padding: 0 10px;
  border-top: 1px solid var(--fig-line);
}
.ev-live .ev2-row > .i { width: 14px; height: 14px; color: var(--fig-text-3); }
.ev-live .ev2-row b {
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Prop is redundant with the group title + leading icon */
.ev-live .ev2-prop { display: none; }
.ev-live .ev2-diff {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--fig-field);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  overflow: hidden;
}
.ev-live .ev2-diff > * { flex: none; }
.ev-live .ev2-diff s,
.ev-live .ev2-diff ins {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72px;
}
.ev-live .ev2-diff span { color: var(--fig-text-3); }
.ev-live .ev2-diff s { color: #e03e1a; text-decoration: line-through; }
.ev-live .ev2-diff ins { color: #14ae5c; text-decoration: none; }
.ev-live .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-live .ev2-row em {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  color: var(--fig-text-3);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}
.ev-live .ev2-row.is-on { background: color-mix(in srgb, var(--agent) 6%, white); }
.ev-live .ev2-row.is-on b { color: var(--agent); }
.ev-live .ev2-row.is-planned { opacity: 0.45; }
.ev-live .ev2-row.is-back .ev2-diff { opacity: 0.55; }
.ev-live .ev2-row.is-back em {
  color: #e8613c;
  font-size: 12px;
  line-height: 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;
}
.canvas .cv-live {
  --agent: var(--step-2, #8b3dff);
  box-shadow: 0 0 0 3px var(--agent);
  animation: cv-pulse 1.6s ease-out infinite;
}
.canvas .cv-tag {
  position: absolute;
  bottom: 100%;
  left: -3px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  padding: 0 8px;
  border-radius: 5px 5px 5px 0;
  background: var(--agent, var(--step-2));
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  pointer-events: none;
}
.canvas .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;
}
@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) {
  .canvas .cv-live, .canvas .cv-spin, .ev-spin { animation: none; }
}
.plan--previewed.is-live-run .plan-step:not(:has(.plan-step__status--live.plan-step__status--applied)) .plan-step__num::after { content: none; }
.plan--previewed.is-live-run .plan-step:not(.plan-step--running):not(:has(.plan-step__status--live.plan-step__status--applied)) .plan-step__num { color: #fff; }
.plan--previewed.is-live-run .plan-step:nth-child(1):not(.plan-step--running):not(:has(.plan-step__status--live.plan-step__status--applied)) .plan-step__num { background: var(--step-1); }
.plan--previewed.is-live-run .plan-step:nth-child(2):not(.plan-step--running):not(:has(.plan-step__status--live.plan-step__status--applied)) .plan-step__num { background: var(--step-2); }
.plan--previewed.is-live-run .plan-step:nth-child(3):not(.plan-step--running):not(:has(.plan-step__status--live.plan-step__status--applied)) .plan-step__num { background: var(--step-3); }
.plan--previewed.is-live-run .plan-step--added:not(.plan-step--running):not(:has(.plan-step__status--live.plan-step__status--applied)) .plan-step__num { background: var(--fig-blue); }
/* Stopped plan (case-study walkthrough) */
.plan__bar i.stp-bar-back {
  background: repeating-linear-gradient(-45deg, var(--fig-text-3) 0 2px, var(--fig-line) 2px 4px);
}
.plan-step.stp-back,
.plan--previewed.is-live-run .plan-step.is-live-rolled {
  background: #fafafa;
  box-shadow: inset 2px 0 0 var(--fig-text-3);
}
.plan-step.stp-back .plan-step__num,
.plan--previewed.is-live-run .plan-step.is-live-rolled .plan-step__num {
  background: var(--fig-field);
  color: var(--fig-text-2);
  font-size: 11px;
}
.plan-step.stp-back .plan-step__num::after,
.plan--previewed.is-live-run .plan-step.is-live-rolled .plan-step__num::after { content: none; }
.stp-status--back,
.plan-step__status--live.stp-status--back { color: var(--fig-text-2); }
.plan-step.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.stp-none .plan-step__num::after { content: none; }
.plan-step__change.stp-change { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.plan-step__change .ev-sw,
.stp-field .ev-sw,
.stp-menu .ev-sw,
.ev-live .ev-sw {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  vertical-align: -1px;
  flex: none;
}
.stp-menu .ev-sw { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.stp-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  margin-left: auto;
  padding: 0 2px 0 6px;
  border: 0;
  border-radius: 5px;
  background: var(--fig-field);
  color: var(--fig-text);
  font: inherit;
  font-size: 11px;
  font-weight: 450;
  cursor: pointer;
}
.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: 148px;
  margin: 4px 0 2px auto;
  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;
  cursor: pointer;
  font-size: 11px;
}
.stp-menu li:hover { background: rgba(255, 255, 255, 0.08); }
.stp-menu li.is-on { background: var(--fig-blue); }
.stp-menu li span { margin-left: auto; color: #fff; }
.stp-menu .ev-sw { width: 12px; height: 12px; }
.stp-note {
  margin: 6px 0 0;
  color: var(--fig-text-3);
  font-size: 10px;
  line-height: 14px;
}
.canvas .btn-primary.stp-ghost {
  position: relative;
  background: color-mix(in srgb, var(--stp-preview, #315edb) 35%, transparent) !important;
  color: #fff !important;
  outline: 2px dashed var(--stp-preview, #315edb);
  outline-offset: 2px;
}
.canvas .btn-primary.stp-ghost .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: 11px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}
.canvas .trip.stp-pad-preview {
  outline: 2px dashed var(--agent, var(--fig-blue));
  outline-offset: 2px;
}
.plan--previewed .stp-acts { display: flex; gap: 6px; margin-top: 6px; }
.plan-foot--stopped {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.plan-foot--stopped p { font-variant-numeric: tabular-nums; }
.plan-step.stp-back > .plan-step__path:not(.stp-stopped-path),
.plan-step.stp-back > .plan-step__change:not(.stp-change),
.plan-step.stp-back > .evidence-reason,
.plan-step.stp-back > .plan-step__layers,
.plan-step.stp-none > .plan-step__path { display: none; }
.canvas .cv-tag.cv-tag--kept {
  background: #14ae5c;
}
/* Scripted stop: match case-study Kept / Rolled back / Not started chrome */
.fig[data-state="stop"] .plan--previewed > .plan__steps > .plan-step:nth-child(2) {
  background: #fafafa;
  box-shadow: inset 2px 0 0 var(--fig-text-3);
}
.fig[data-state="stop"] .plan--previewed > .plan__steps > .plan-step:nth-child(2) .plan-step__num {
  background: var(--fig-field);
  color: var(--fig-text-2);
  font-size: 11px;
}
.fig[data-state="stop"] .plan--previewed > .plan__steps > .plan-step:nth-child(2) .plan-step__num::after { content: none; }
.fig[data-state="stop"] .plan--previewed > .plan__steps > .plan-step:nth-child(3) .plan-step__num {
  box-sizing: border-box;
  border: 1px dashed var(--fig-text-3);
  background: none;
  color: var(--fig-text-3);
}
.fig[data-state="stop"] .plan--previewed > .plan__steps > .plan-step:nth-child(3) .plan-step__num::after { content: none; }
.fig[data-state="stop"] .plan--previewed > .plan__steps > .plan-step:nth-child(3) .plan-step__path { display: none; }
.plan-foot--live { margin-top: 0; }
.plan-step__change ins.is-width,
.plan-step__change ins.is-pad { cursor: pointer; }
.plan-step__change ins.is-width::after,
.plan-step__change ins.is-pad::after {
  content: "";
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.55;
}
.plan-step__change ins.is-width.is-open,
.plan-step__change ins.is-pad.is-open {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--fig-blue-soft);
  box-shadow: 0 0 0 1px var(--fig-blue);
}
.pad-menu {
  position: fixed;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--fig-toolbar-shadow), 0 8px 20px rgba(0, 0, 0, 0.14);
}
.pad-menu__field {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--fig-field, #f5f5f5);
  color: var(--fig-text);
}
.pad-menu__field input {
  width: 28px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  outline: none;
}
.pad-menu__field input::-webkit-outer-spin-button,
.pad-menu__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pad-menu__field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.pad-menu__ico {
  flex: none;
  width: 12px;
  height: 12px;
  border: 1px solid var(--fig-text-3, #b3b3b3);
  border-radius: 2px;
  position: relative;
}
.pad-menu__ico--h::before,
.pad-menu__ico--h::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: currentColor;
  opacity: 0.7;
}
.pad-menu__ico--h::before { left: 2px; }
.pad-menu__ico--h::after { right: 2px; }
.pad-menu__ico--v::before,
.pad-menu__ico--v::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.pad-menu__ico--v::before { top: 2px; }
.pad-menu__ico--v::after { bottom: 2px; }
.pad-menu__indie {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fig-text-2, #6b6f76);
  cursor: pointer;
}
.pad-menu__indie .i { width: 16px; height: 16px; }
.pad-menu__indie:hover { background: var(--fig-field, #f5f5f5); color: var(--fig-text); }
.pad-menu__indie.is-on {
  background: var(--fig-blue-soft);
  color: var(--fig-blue-text);
}
.width-menu {
  position: fixed;
  z-index: 30;
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  background: #2c2c2c;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.28);
}
.width-menu__sep {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255, 255, 255, 0.1);
}
.width-menu button {
  display: grid;
  grid-template-columns: 16px 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  cursor: pointer;
}
.width-menu button:hover { background: rgba(255, 255, 255, 0.08); }
.width-menu button[aria-selected="true"] {
  background: var(--fig-blue);
  color: #fff;
}
.width-menu__check,
.width-menu__ico {
  width: 16px;
  height: 16px;
  display: block;
}
.width-menu__check-slot { width: 16px; height: 16px; }
.width-menu button span:last-child { min-width: 0; }
.step-spec { display: flex; flex-direction: column; gap: 6px; }
.step-spec__kinds,
.step-spec__segment { display: flex; flex-wrap: wrap; gap: 4px; }
.step-spec__kinds button,
.step-spec__segment button {
  padding: 1px 6px;
  border: 1px solid var(--fig-line);
  border-radius: 5px;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 550;
  line-height: 16px;
  color: var(--fig-text);
}
.step-spec__kinds button.is-on,
.step-spec__segment button.is-on {
  border-color: var(--fig-blue);
  background: var(--fig-blue-soft);
  color: var(--fig-blue-text);
}
.step-spec__color {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 6px;
  border: 1px solid var(--fig-line); border-radius: 5px;
  background: var(--fig-field);
  font: inherit; font-size: 11px;
}
.step-spec__color ins {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fig-text); font-weight: 450; text-decoration: none;
}
.step-spec__color i {
  width: 14px; height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 3px;
}
.step-spec__field {
  display: flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 6px;
  border-radius: 5px; background: var(--fig-field);
}
.step-spec__field:focus-within { box-shadow: inset 0 0 0 1px var(--fig-blue); }
.step-spec__field input {
  width: 100%; min-width: 0; padding: 0;
  border: 0; background: transparent;
  font: inherit; font-size: 11px; outline: none;
}
.step-spec__field span { flex: none; color: var(--fig-text-2); }
.plan-step__edit {
  width: 7.5em;
  margin: 0;
  padding: 0 4px;
  border: 1px solid var(--fig-blue);
  border-radius: 4px;
  background: #fff;
  color: #009951;
  font: inherit;
  font-weight: 550;
  line-height: 16px;
}
.plan-step__change ins.is-color-editing {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--fig-blue-soft);
  box-shadow: 0 0 0 1px var(--fig-blue);
}
.color-editor {
  position: fixed;
  z-index: 30;
  width: 228px;
  padding: 10px;
  border-radius: 13px;
  background: var(--fig-panel);
  box-shadow: var(--fig-toolbar-shadow), 0 12px 28px rgba(0, 0, 0, 0.16);
  color: var(--fig-text);
  font-size: 11px;
  line-height: 16px;
}
.color-editor__pad {
  position: relative;
  height: 128px;
  border-radius: 8px;
  background-color: #f00;
  background-image:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: crosshair;
  touch-action: none;
}
.color-editor__hue {
  position: relative;
  height: 12px;
  margin: 10px 2px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: ew-resize;
  touch-action: none;
}
.color-editor__pad i,
.color-editor__hue i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.color-editor__hue i { top: 50%; }
.color-editor__fields { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.color-editor__field {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  border-radius: 5px;
  background: var(--fig-field);
}
.color-editor__field span { flex: none; color: var(--fig-text-2); }
.color-editor__field input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fig-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.color-editor__field:focus-within { box-shadow: inset 0 0 0 1px var(--fig-blue); }
.color-editor__rgb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }

/* ---------- Canvas ---------- */
/* UI3 cursor-black — hotspot near arrow tip */
.fig {
  --fig-cursor: url("assets/cursors/cursor-black.png") 5 4, url("assets/cursors/cursor-black.svg") 2 1, default;
}
.canvas {
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--fig-canvas);
  cursor: var(--fig-cursor);
}
.canvas.is-pan-ready { cursor: grab; }
.canvas.is-panning { cursor: grabbing; user-select: none; }
.canvas .toolbar,
.canvas .try-task,
.canvas .canvas__notice { cursor: default; }
.canvas .try-task button,
.canvas .try-task a,
.canvas .toolbar button { cursor: pointer; }
/* Holds the app screens; solution.js fits + zooms/pans like Figma */
.canvas__fit {
  display: flex; flex: none; align-items: flex-start; gap: 72px;
  transform-origin: center center;
  will-change: transform;
}
/* Frames, the Earthling screens and selection boxes live in figma-ui.css,
   so the ideation cards can draw the same canvas */

/* The In prompt outline grows card by card as each one is clicked into the prompt.
   Each trip card is 132px tall with 10px between cards, plus the outline's 6px reach above and below. */
.trips > .prompt-scope { bottom: auto; height: calc(var(--cards-in-prompt, 3) * 142px + 2px); transition: height 0.25s ease; }
[data-state="pick-rome"] .trips > .prompt-scope,
[data-state="type-2"] .trips > .prompt-scope { --cards-in-prompt: 1; }
[data-state="pick-kyoto"] .trips > .prompt-scope,
[data-state="type-3"] .trips > .prompt-scope { --cards-in-prompt: 2; }
/* Each run's result stays on the canvas once its step shows Applied (data-applies marks that label) */
/* Moment 05: running "Add auto layout" changes the three cards' padding from 12 to 16 */
.trips > .trip { transition: padding 0.3s ease; }
.fig:has([data-applies="auto-layout"]:not([hidden])) .trips > .trip { padding: 16px; }
/* Moment 07: running the component change widens every Book trip button, Paris's too */
.btn-primary { transition: padding 0.3s ease; }
.fig:has([data-applies="button-padding"]:not([hidden])) .btn-primary:not(.btn-primary--block) { padding-inline: 16px; }
.fig:has([data-applies="paris-padding"]:not([hidden])) .trip--paris { padding: 16px; outline: 1px solid #e8762c; outline-offset: 2px; }
.step-tag--miss { background: #e8762c; }
.plan-redirect { margin-top: 8px; }
.plan--ledger { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .trips > .prompt-scope, .trips > .trip, .btn-primary { transition: none; } }

/* Moment 07: step 4 edits the Button / Primary main component. It takes the component card's amber,
   in its number and in the dashed preview hugging every instance on the canvas.
   The preview uses the card's lighter border amber, so it stands out on the dark app screens. */
.plan--component .plan-step__num { background: #a65c00; color: #fff; }
.prompt-scope--button { --agent: #f0c38a; inset: -4px; border-radius: 999px; }
.prompt-scope--button .prompt-scope__tag { top: 50%; left: auto; right: calc(100% + 6px); transform: translateY(-50%); color: #6b3b00; }

/* Moment 05: the checklist comes in a row at a time, like the agent writing it out */
.msg-agent .plan > *, .msg-agent .plan-step { animation: plan-row-in 0.35s ease both; }
.msg-agent .plan-step:nth-child(1) { animation-delay: 0.2s; }
.msg-agent .plan-step:nth-child(2) { animation-delay: 0.45s; }
.msg-agent .plan-step:nth-child(3) { animation-delay: 0.7s; }
.msg-agent .plan > .plan-foot { animation-delay: 0.95s; }
/* The component change comes in last as one card, after the plan's own footer */
.msg-agent .plan--component { animation: plan-row-in 0.35s ease 1.2s both; }
.msg-agent .plan--component > *, .msg-agent .plan--component .plan-step { animation: none; }
@keyframes plan-row-in {
  from { opacity: 0; transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) { .msg-agent .plan, .msg-agent .plan > *, .msg-agent .plan-step { animation: none; } }

/* A notice pinned to the top of the canvas, like Figma's own banners */
.canvas__notice { position: absolute; top: 12px; left: 50%; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; transform: translateX(-50%); border-radius: 8px; background: var(--fig-panel); box-shadow: var(--fig-toolbar-shadow); color: var(--fig-text-2); font-size: 11px; line-height: 16px; white-space: nowrap; }
.canvas__notice b { color: var(--fig-text); font-weight: 550; }
.canvas__notice-link { color: var(--fig-blue-text); font-weight: 550; }

/* Floating bottom toolbar: creation tools, then the mode switcher */
.toolbar { position: absolute; bottom: 12px; left: 50%; display: flex; align-items: center; overflow: hidden; transform: translateX(-50%); border-radius: 13px; background: #fff; box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15); }
.toolbar__tools { display: flex; align-items: flex-start; gap: 8px; padding: 8px; }
.tool { display: flex; align-items: center; gap: 1px; }
.tool__icon { display: flex; padding: 4px; border-radius: 5px; }
.tool__icon.is-on { background: #0d99ff; }
.tool__more { display: flex; justify-content: center; width: 16px; padding: 4px 0; border-radius: 5px; }
.toolbar__mode { position: relative; width: 64px; height: 48px; border-left: 1px solid #e6e6e6; }
.toolbar__switch { position: absolute; top: 12px; left: 11px; width: 40px; height: 24px; border-radius: 5px; background: #f5f5f5; }
.toolbar__knob { position: absolute; top: 1px; left: 1px; display: grid; place-items: center; width: 22px; height: 22px; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15); }
.toolbar img { display: block; flex: none; }

/* ---------- Design properties (right) ---------- */
.props { display: flex; flex-direction: column; min-height: 0; overflow: auto; background: #fff; border-left: 1px solid rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.9); font-size: 11px; line-height: 16px; letter-spacing: 0.055px; }
.props img { display: block; flex: none; }
.avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #9747ff; color: #fff; font-weight: 600; }
.props__head { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-bottom: 1px solid #e6e6e6; }
.props__row { display: flex; align-items: center; justify-content: space-between; }
.props__row--top { padding-left: 4px; }
.props__me { display: flex; align-items: center; }
.props__me { gap: 2px; }
.props__initial { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #9747ff; color: #fff; font-size: 11px; font-weight: 550; }
.props__me-more { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f5f5f5; }
.props__right { display: flex; align-items: center; gap: 8px; }
.props__play { display: flex; align-items: center; gap: 1px; border-radius: 5px; }
.props__play-icon { display: flex; padding: 4px; }
.props__share { display: flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 5px; background: #0d99ff; color: #fff; font-weight: 450; }
.props__tabs { display: flex; gap: 4px; }
.props__tab { display: flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 5px; color: rgba(0, 0, 0, 0.5); font-weight: 450; }
.props__tab.is-on { background: #f5f5f5; color: rgba(0, 0, 0, 0.9); font-weight: 550; }
.props__zoom {
  display: flex; align-items: center; justify-content: flex-end;
  width: 60px; height: 24px; border-radius: 5px; cursor: pointer;
}
.props__zoom:hover { background: #f5f5f5; }
.props__zoom span { flex: 1; text-align: center; padding-left: 4px; }

.props__page { display: flex; flex-direction: column; padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; }
.props__heading { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 8px 8px 8px 16px; }
.props__heading b { font-weight: 550; }
.props__fill { display: flex; align-items: flex-start; gap: 8px; padding: 4px 8px 4px 16px; }
.props__color { display: flex; flex: 1; align-items: center; height: 24px; border-radius: 5px; background: #f5f5f5; }
.props__chit { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.props__chit::before { content: ""; width: 14px; height: 14px; border-radius: 2px; background: #f5f5f5; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.props__chit--cc::before { background: #ccc; box-shadow: none; }
.props__hex { flex: 1; }
.props__pct { display: flex; justify-content: space-between; width: 53px; height: 24px; align-items: center; padding: 0 5px 0 7px; border-left: 1px solid #fff; }
.props__pct i { font-style: normal; color: rgba(0, 0, 0, 0.5); }

.props__styles { display: flex; flex-direction: column; padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; }
.props__sub { margin: 0; padding: 12px 8px 4px 16px; color: rgba(0, 0, 0, 0.5); font-weight: 450; }
.props__list { margin: 0 0 4px; padding: 0; list-style: none; }
.props__list li { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 16px; }
.props__list i { margin-left: -8px; font-style: normal; color: rgba(0, 0, 0, 0.5); white-space: pre; }
.props__ag, .props__glyph { display: grid; place-items: center; width: 20px; flex: none; font-size: 13px; letter-spacing: 0; }
.props__glyph svg { display: block; }
.props__line { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 8px 0 16px; border-bottom: 1px solid #e6e6e6; color: rgba(0, 0, 0, 0.5); font-weight: 550; }
.props__line--muted { height: auto; padding: 8px 8px 8px 16px; font-weight: 450; }

/* Page/Styles vs selection inspector */
.props[data-props="page"] [data-props-view="layer"],
.props[data-props="layer"] [data-props-view="page"] { display: none; }
.props[data-props="layer"] [data-props-view="layer"] { display: flex; }

.props__layer { flex-direction: column; min-height: 0; }
.props__layer[hidden] { display: none !important; }
.props__layer-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 4px 8px 4px 16px; border-bottom: 1px solid #e6e6e6; }
.props__layer-type { font-size: 13px; font-weight: 550; letter-spacing: -0.0325px; line-height: 22px; }
.props__layer-actions { display: flex; align-items: center; }

.props__section { display: flex; flex-direction: column; padding-bottom: 12px; border-bottom: 1px solid #e6e6e6; }
.props__sec-head { display: flex; align-items: center; height: 40px; padding: 0 8px 0 16px; font-weight: 450; }
.props__sec-head--tools { justify-content: space-between; gap: 4px; }
.props__sec-head b { font-weight: 550; }
.props__sec-tools { display: flex; align-items: center; margin-left: auto; }

.props__icons { display: flex; align-items: flex-start; gap: 8px; padding: 4px 8px 4px 16px; }
.props__igroup { display: flex; flex: 1; gap: 1px; min-width: 0; height: 24px; overflow: hidden; border-radius: 5px; }
.props__icon { display: grid; place-items: center; flex: 1; min-width: 0; background: #f5f5f5; }
.props__fields { display: flex; align-items: flex-start; gap: 8px; padding: 4px 8px 4px 16px; }
.props__fields--pad { padding-right: 40px; }
.props__num { display: flex; flex: 1; align-items: center; min-width: 0; height: 24px; border-radius: 5px; background: #f5f5f5; }
.props__num i { display: grid; place-items: center; width: 24px; flex: none; font-style: normal; color: rgba(0, 0, 0, 0.5); }
.props__num b { flex: 1; min-width: 0; overflow: hidden; font-weight: 450; text-overflow: ellipsis; white-space: nowrap; }

.props__check { display: flex; align-items: center; gap: 8px; padding: 8px 40px 0 16px; font-weight: 450; }
.props__box { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: #f5f5f5; }
.props__box img { display: block; }

.props__fill-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 8px 4px 16px; }
.props__fill-actions { display: flex; align-items: center; gap: 4px; }
.props__chit[data-props-chit] { position: relative; }
.props__chit[data-props-chit]::before { background: var(--props-fill, #fff); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.props__chit[data-fill="image"]::before { background-image: var(--props-fill); background-size: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.props__chit[data-fill="gradient"]::before { background: url("assets/props/fill-gradient.png") center / cover; box-shadow: none; }

/* Live selection: Figma blue bounds on every layer mentioned in the free prompt */
.sel-live { position: absolute; inset: -1px; z-index: 2; border: 1px solid var(--fig-select, #0d99ff); pointer-events: none; }
.sel-live i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid var(--fig-select, #0d99ff); }
.sel-live i:nth-child(1) { top: -4px; left: -4px; }
.sel-live i:nth-child(2) { top: -4px; right: -4px; }
.sel-live i:nth-child(3) { bottom: -4px; left: -4px; }
.sel-live i:nth-child(4) { bottom: -4px; right: -4px; }
.trip__title > .sel-live i, .btn-primary > .sel-live i { width: 5px; height: 5px; }
.trip__title > .sel-live i:nth-child(odd), .btn-primary > .sel-live i:nth-child(odd) { left: -3px; }
.trip__title > .sel-live i:nth-child(even), .btn-primary > .sel-live i:nth-child(even) { right: -3px; }
.trip__title > .sel-live i:nth-child(-n + 2), .btn-primary > .sel-live i:nth-child(-n + 2) { top: -3px; }
.trip__title > .sel-live i:nth-child(n + 3), .btn-primary > .sel-live i:nth-child(n + 3) { bottom: -3px; }
/* Multi-select: individuals are outlines only; the group box carries handles + size */
.sel-live.is-multi i,
.sel-live.is-multi .sel-live__size { display: none; }
.sel-live__size {
  position: absolute; top: calc(100% + 6px); left: 50%;
  padding: 1px 4px; transform: translateX(-50%);
  border-radius: 2px; background: var(--fig-select, #0d99ff); color: #fff;
  font-size: 10px; font-weight: 500; line-height: 14px; white-space: nowrap;
}
.sel-live-group {
  position: absolute; z-index: 3;
  border: 1px solid var(--fig-select, #0d99ff);
  pointer-events: none;
}
.sel-live-group i {
  position: absolute; width: 7px; height: 7px;
  background: #fff; border: 1px solid var(--fig-select, #0d99ff);
}
.sel-live-group i:nth-child(1) { top: -4px; left: -4px; }
.sel-live-group i:nth-child(2) { top: -4px; right: -4px; }
.sel-live-group i:nth-child(3) { bottom: -4px; left: -4px; }
.sel-live-group i:nth-child(4) { bottom: -4px; right: -4px; }
.sel-live-group__size {
  position: absolute; top: calc(100% + 6px); left: 50%;
  padding: 1px 4px; transform: translateX(-50%);
  border-radius: 2px; background: var(--fig-select, #0d99ff); color: #fff;
  font-size: 10px; font-weight: 500; line-height: 14px; white-space: nowrap;
}

/* ---------- Post-run Summary (case-study after-run, s01 try) ---------- */
.msg-agent.is-post-run > p:not(.msg-run-lead):not(.msg-hold-lead) { display: none !important; }
.msg-agent.is-post-run > .msg-hold-lead { display: block !important; margin: 8px 0 0; }
.msg-hold-confirm { margin-top: 10px; }
.msg-hold-confirm > p { margin: 0; }
.msg-hold-confirm .aft-msg-acts {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0;
  color: var(--fig-text-3);
}
.msg-hold-confirm .aft-msg-acts .icon-btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  pointer-events: none;
}
.msg-hold-confirm .aft-msg-acts .icon-btn .i { width: 14px; height: 14px; }
.aft-vh__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--fig-edge, #e6e6e6);
  color: #1e1e1e;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.aft-vh__pill:hover { background: #e5f4ff; box-shadow: 0 0 0 1px #0d99ff; }
.aft-rc--post {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--fig-line);
  border-radius: 8px;
  background: var(--fig-panel);
}
.aft-rc--post .plan__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--fig-line);
}
.aft-rc--post .plan__head b { font-weight: 600; }
.aft-rc--post .plan__head > span:last-child {
  margin-left: auto;
  color: var(--fig-text-2);
  font-variant-numeric: tabular-nums;
}
.aft-rc--post .plan__bar .is-done { background: #14ae5c; }
.aft-rc--post button { font: inherit; color: inherit; text-align: left; cursor: pointer; background: none; border: 0; padding: 0; }
.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; }
/* Case-study Idea A flag-tabs receipt */
.aft-rc--post .aft-rtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--fig-line);
}
.aft-rc--post .aft-rtab {
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--fig-text-2) !important;
  font-size: 10px !important;
  white-space: nowrap;
}
.aft-rc--post .aft-rtab.is-on {
  background: var(--fig-field);
  color: var(--fig-text) !important;
  font-weight: 550;
}
.aft-rc--post .aft-v1 { margin: 0; padding: 0; list-style: none; }
.aft-rc--post .aft-v1__step + .aft-v1__step { border-top: 1px solid var(--fig-line); }
.aft-rc--post .aft-v1__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 8px 6px 8px 10px;
}
.aft-rc--post .aft-v1__head:hover { background: rgba(0, 0, 0, 0.03); }
.aft-rc--post .aft-v1__head > span { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.aft-rc--post .aft-v1__head b { font-weight: 550; }
.aft-rc--post .aft-v1__counts { display: flex; flex-wrap: wrap; gap: 4px; }
.aft-rc--post .aft-v1__step.is-open > .aft-v1__head {
  background: #f2f9ff;
  box-shadow: inset 2px 0 0 #0d99ff;
}
.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; }
.aft-rc__foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--fig-line);
  background: #f9f9f9;
}
.aft-rc--post.is-kept .aft-rc__foot .plan-btn--primary { opacity: 0.7; }
.canvas .cv-tag.aft-ba__tag {
  top: 8px;
  bottom: auto;
  left: 8px;
  margin: 0;
  border-radius: 5px;
  font-size: 11px;
  line-height: 20px;
  transition: opacity 0.15s;
}
.canvas .cv-tag.aft-ba__tag.is-dim { opacity: 0.35; }
.aft-ba__tag--edited { background: #0d99ff; }
.aft-ba__tag--guess { background: #8a38f5; }
.aft-ba__tag--held { background: #f5a524; color: #3d2600; }
.aft-ba__tag--rev { background: #5c5c5c; }
/* Hover an Edits row/step → that layer lights up on the canvas */
.canvas .is-post-hl {
  position: relative;
  outline: 2px solid #0d99ff;
  outline-offset: 3px;
  border-radius: 10px;
  z-index: 2;
  box-shadow: 0 0 0 4px color-mix(in srgb, #0d99ff 18%, transparent);
  transition: outline-color 0.12s ease, box-shadow 0.12s ease;
}
.canvas .is-post-hl > .cv-tag--post {
  opacity: 1;
  transform: scale(1.04);
}

/* Post-run Review panel (accept / reject steps and edits) */
.aft-rvp--post {
  width: 300px;
  max-height: calc(100% - 48px);
}
.aft-rvp--post .aft-rv__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--fig-line);
}
.aft-rvp--post .aft-rv__head b { font-weight: 600; }
.aft-rvp--post .aft-rv__head > span:not(.aft-rv__bar) {
  color: var(--fig-text-2);
  font-variant-numeric: tabular-nums;
}
.aft-rvp--post .aft-rv__kept {
  justify-self: end;
  padding: 0 6px;
  border-radius: 4px;
  background: #e6f6ec;
  color: #0b8a43 !important;
  font-size: 10px;
  font-weight: 600;
}
.aft-rvp--post .aft-rv__bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: var(--fig-field);
  overflow: hidden;
}
.aft-rvp--post .aft-rv__bar i { display: block; height: 100%; background: #14ae5c; }
.aft-rvp--post .aft-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--fig-line);
}
.aft-rvp--post .aft-tabs button {
  padding: 2px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--fig-text-2);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.aft-rvp--post .aft-tabs button.is-on {
  background: var(--fig-field);
  color: var(--fig-text);
  font-weight: 550;
}
.aft-rvp--post .aft-rvp__grp.aft-grp--sel > summary {
  background: #f2f9ff;
  box-shadow: inset 2px 0 0 #0d99ff;
}
.aft-rvp--post .ev2-grp > summary {
  display: flex;
  align-items: center;
  gap: 6px;
}
.aft-rvp--post .ev2-grp > summary .aft-rv__acts { margin-left: auto; }
.aft-rvp--post .ev2-grp > summary em { flex: none; }
.aft-rvp--post .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--post .aft-rvp__gs.is-acc { color: #0b8a43; }
.aft-rvp--post .aft-rvp__gs.is-rej { color: var(--fig-text-3); }
.aft-rvp--post .aft-rv__acts { display: flex; gap: 4px; }
.aft-rvp--post .aft-rv__btn {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--fig-line);
  color: var(--fig-text-2);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.aft-rvp--post .aft-rv__btn--yes:hover { background: #e6f6ec; color: #0b8a43; }
.aft-rvp--post .aft-rv__btn--no:hover { background: #fdecea; color: #c4321c; }
.aft-rvp--post .aft-rv__btn--no.is-click { background: #fdecea; color: #c4321c; box-shadow: inset 0 0 0 1px #e03e1a; }
.aft-rvp--post .aft-rvp__row.is-cue { background: #fffaf2; outline: 1.5px solid #0d99ff; outline-offset: -1px; }
.aft-rvp--post .aft-rvp__row.aft-k--held:not(.is-acc):not(.is-rej) { background: #fffaf2; }
.aft-rvp--post .aft-rvp__note {
  padding: 0 10px 6px 29px;
  color: #b26200;
  font-size: 10px;
  font-weight: 550;
  line-height: 14px;
  list-style: none;
}
.aft-rvp--post .aft-rvp__note.is-open { background: #fffaf2; }
.aft-rvp--post .aft-cmp__btn--foot {
  margin-right: auto;
  padding: 4px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #0a5fb4;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.aft-rvp--post .aft-rvp__row {
  grid-template-columns: 14px minmax(40px, 0.7fr) minmax(0, 1fr) auto auto;
  column-gap: 5px;
}
.aft-rvp--post .aft-rvp__row .ev2-prop {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fig-text-2);
  font-size: 10px;
}
.aft-rvp--post .aft-rvp__row .ev2-diff { max-width: 96px; }
.aft-rvp--post .aft-rvp__ok {
  width: 40px;
  color: #14ae5c !important;
  font-weight: 700;
  font-style: normal;
  text-align: center;
}
.aft-rvp--post .aft-rvp__row.is-rej b,
.aft-rvp--post .aft-rvp__row.is-rej .ev2-prop {
  color: var(--fig-text-3);
  text-decoration: line-through;
}
.aft-rvp--post .aft-rvp__row.is-rej .ev2-diff { opacity: 0.45; }
.aft-rvp--post .aft-rvp__restore {
  flex: none;
  width: 45px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fig-blue-text, #007be5);
  font: inherit;
  font-size: 10px;
  font-weight: 550;
  text-align: right;
  cursor: pointer;
}
.aft-rvp--post .aft-rv__foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--fig-line);
  background: #f9f9f9;
}
.aft-rvp--post .aft-rvp__saved {
  margin: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--fig-line);
  color: var(--fig-text-2);
  font-size: 10px;
}

/* Post-run Compare — free canvas (bar + frames on the grey, Design docks like Edits) */
/* Keep the bottom toolbar visible — free canvas stays consistent in Compare */
.canvas.is-comparing > .canvas__fit,
.canvas.is-comparing > .canvas__notice,
.canvas.is-comparing > .try-task,
.canvas.is-comparing > .aft-rvp--post { visibility: hidden; }
.canvas.is-comparing > .toolbar { visibility: visible; z-index: 16; }
/* Dim chat + props while comparing; Exit compare restores them with the overlay */
.fig:has(.canvas.is-comparing) > .chat,
.fig:has(.canvas.is-comparing) > .props {
  opacity: 0.34;
  filter: saturate(0.7);
  pointer-events: none;
  transition: opacity 0.22s ease, filter 0.22s ease;
  user-select: none;
}
.fig > .chat,
.fig > .props {
  transition: opacity 0.22s ease, filter 0.22s ease;
}
.aft-cd--post {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  background: transparent;
}
/* Centered in the free canvas (clears the Design panel gutter on the right) */
.aft-cd--post .aft-cd__bar {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 252px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 32px);
  height: 36px;
  margin-inline: auto;
  padding: 0 6px 0 14px;
  border-radius: 10px;
  background: #1e1e1e;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: auto;
}
.aft-cd--post .aft-cd__bar.try-target {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 2px #0d99ff,
    0 8px 20px rgba(0, 0, 0, 0.22);
}
.aft-cd--post .aft-cd__vs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.aft-cd--post .aft-cd__mode {
  margin-right: 2px;
  color: rgba(255, 255, 255, 0.48);
  font-weight: 500;
}
.aft-cd--post .aft-cd__vs b {
  color: #fff;
  font-weight: 560;
}
.aft-cd--post .aft-cd__swap {
  flex: none;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.45);
}
.aft-cd--post .aft-cd__sep {
  flex: none;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.14);
}
.aft-cd--post .aft-cd__act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.aft-cd--post .aft-cd__kept {
  color: #5fd28f;
  font-variant-numeric: tabular-nums;
  font-weight: 560;
}
.aft-cd--post .aft-cd__exit {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-weight: 560;
  cursor: pointer;
  transition: background 0.12s ease;
}
.aft-cd--post .aft-cd__exit:hover { background: rgba(255, 255, 255, 0.16); }
.aft-cd--post .aft-cd__exit:focus-visible {
  outline: 2px solid #0d99ff;
  outline-offset: 1px;
}
.aft-cd--post .aft-cd__exit.is-primary {
  background: #0d99ff;
  color: #fff;
}
.aft-cd--post .aft-cd__exit.is-primary:hover { background: #007be5; }
.aft-cd--post .aft-cd__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 248px 72px 24px;
  overflow: auto;
  pointer-events: auto;
}
.aft-cd--post .aft-cd__pair {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}
.aft-cd--post .aft-cd__arrow {
  align-self: center;
  margin-top: 28px;
  color: #8c8c8c;
  font-size: 16px;
}
.aft-cd--post .aft-cd__frame .phone { zoom: 0.58; }
.aft-cd--post .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--post .aft-cd__lab.is-now { background: #0d99ff; color: #fff; }
.aft-cd--post .aft-cd__ro { margin-left: 5px; color: #8c8c8c; font-size: 10px; }
.aft-cd--post .aft-mv__dim .trip { opacity: 0.75; filter: saturate(0.7); }
/* Design panel: pinned top-right on the canvas (same corner as Edits) */
.canvas > .aft-cd__panel--post {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 15;
  width: 220px;
  max-height: calc(100% - 96px);
  overflow: auto;
  margin: 0;
  border-radius: 10px;
  background: var(--fig-panel, #fff);
  box-shadow: var(--fig-toolbar-shadow, 0 1px 3px rgba(0, 0, 0, 0.08)), 0 12px 28px rgba(0, 0, 0, 0.14);
  color: #1e1e1e;
  font-size: 11px;
  line-height: 16px;
}
.canvas > .aft-cd__panel--post.aft-grp--sel,
.canvas > .aft-cd__panel--post.try-target {
  box-shadow: var(--fig-toolbar-shadow, 0 1px 3px rgba(0, 0, 0, 0.08)), 0 0 0 2px #0d99ff;
}
.aft-cd__panel--post .aft-cd__tabs {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 7px 10px;
  border-bottom: 1px solid var(--fig-line);
}
.aft-cd__panel--post .aft-cd__tabs span { color: var(--fig-text-3); }
.aft-cd__panel--post .aft-cd__ph {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 7px 10px 3px;
}
.aft-cd__panel--post .aft-cd__ph span { color: var(--fig-text-3); }
.aft-cd__panel--post .aft-fw__sum {
  margin: 0;
  padding: 2px 0 6px;
  list-style: none;
}
.aft-cd__panel--post .aft-fw__sum li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
}
.aft-cd__panel--post .aft-fw__sum .i { width: 14px; height: 14px; color: var(--fig-text-3); }
.aft-cd__panel--post .aft-fw__sum b { flex: 1; font-weight: 550; }
.aft-cd__panel--post .aft-fw__chip {
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10px;
  font-style: normal;
  font-weight: 550;
  line-height: 17px;
}
.aft-cd__panel--post .aft-fw__chip.is-edited { background: #e5f4ff; color: #007be5; }
.aft-cd__panel--post .aft-fw__chip.is-guess { background: #f1e8fd; color: #7c3aed; }
.aft-cd__panel--post .aft-fw__chip.is-held { background: #fff3d6; color: #8a6116; }
.aft-cd__panel--post .aft-fw__chip.is-rev { background: #ececec; color: #5c5c5c; }
.aft-cd__panel--post .aft-fw__hint {
  margin: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--fig-line);
  color: var(--fig-text-3);
  font-size: 10px;
  line-height: 14px;
}

/* Post-run Hold / Waiting to publish */
.aft-gt--post {
  position: relative;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--fig-edge, #e6e6e6);
  color: #1e1e1e;
  font-size: 11px;
}
.aft-gt--post .aft-gt__hd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--fig-line, #ececec);
}
.aft-gt--post .aft-gt__hd b { font-weight: 600; }
.aft-gt--post .aft-gt__hd > span {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fff4e5;
  color: #8a4b00;
  font-size: 10px;
}
.aft-gt--post .aft-gt__lock { width: 12px; height: 12px; flex-shrink: 0; color: #b86200; }
.aft-gt--post.is-done .aft-gt__lock { color: #14ae5c; }
.aft-gt--post.is-done .aft-gt__hd > span { background: none; color: var(--fig-text-3); }
.aft-gt--post .aft-gt__list { margin: 0; padding: 2px 0; list-style: none; }
.aft-gt--post .aft-gt__row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
}
.aft-gt--post .aft-gt__ic { display: grid; place-items: center; color: #9747ff; }
.aft-gt--post .aft-gt__ic .i { width: 14px; height: 14px; }
.aft-gt--post .aft-gt__txt { display: flex; flex-direction: column; min-width: 0; }
.aft-gt--post .aft-gt__txt b { font-weight: 500; }
.aft-gt--post .aft-gt__txt em { color: var(--fig-text-3); font-size: 10px; font-style: normal; line-height: 14px; }
.aft-gt--post .aft-gt__diff {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--fig-text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}
.aft-gt--post .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--post .aft-gt__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 8px 10px;
  border-top: 1px solid var(--fig-line, #ececec);
}
.aft-gt--post .aft-gt__acts { display: flex; align-items: center; gap: 6px; }
.aft-gt--post .aft-gt__link {
  border: 0;
  background: none;
  color: #0a5fb4;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
.aft-gt--post .aft-gt__swap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 10px 4px;
  padding: 10px;
  border-radius: 6px;
  background: #2d3120;
  color: rgba(255, 255, 255, 0.6);
}
.aft-gt--post .aft-gt__swap .btn-primary { pointer-events: none; }
.aft-gt--post .aft-gt__files { margin: 4px 0 0; padding: 0; list-style: none; }
.aft-gt--post .aft-gt__files li {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px;
}
.aft-gt--post .aft-gt__files em {
  color: var(--fig-text-3);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.aft-gt--post .aft-gt__file { display: inline-flex; align-items: center; gap: 5px; }
.aft-gt--post .aft-gt__file .i { width: 12px; height: 12px; color: var(--fig-text-3); }
.aft-gt--post .aft-gt__note {
  margin: 0;
  padding: 2px 10px 8px;
  color: var(--fig-text-3);
  font-size: 10px;
}