/* 02 Problem: one scene where context fails to follow you between tools. */

.problem { padding: clamp(96px, 12vw, 160px) 0 0; position: relative; }
.problem-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.problem-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 72px); }
.problem-head h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.035em; }
.problem-head p { margin-top: 18px; font-size: clamp(16px, 1.4vw, 18px); color: var(--body); max-width: 46ch; }

.problem-body {
  display: grid; grid-template-columns: minmax(260px, 356px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.problem-side { grid-column: 1; grid-row: 1; }
.problem-figure { grid-column: 2; grid-row: 1; margin: 0; container: problem / inline-size; min-width: 0; }

/* ---------- Steps (the three pains) ---------- */
.problem-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/* Each pain is a row; the current one takes the app's active-item wash: the tint at left fading into the
   page ground (not a card), and a hairline that fades out with it. The border is always there (transparent)
   so nothing shifts when a row becomes active. */
.problem-step {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: baseline;
  width: 100%; min-height: 44px; padding: 16px 18px 22px 14px;
  background: transparent; border: 1px solid transparent; border-radius: 14px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease), opacity var(--dur-slow) var(--ease);
}
.problem-step.is-active { --wash: var(--lime); }
.problem-step:focus-visible { outline-offset: 2px; }
/* Pointer-follow spotlight (JS sets --mx/--my). */
.problem-step::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.05), transparent 70%);
  transition: opacity var(--dur-base) var(--ease);
}
@media (hover: hover) { .problem-step:hover::before { opacity: 1; } }
.problem-step > :not(.problem-step-track) { position: relative; }
/* Progress lives inside the current row, under its text: a short rounded track, never clipped by the row. */
.problem-step-track {
  position: absolute; left: 52px; right: 18px; bottom: 11px; height: 2px; border-radius: 2px;
  background: rgb(255 255 255 / 0.07); overflow: hidden; opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.problem-step.is-active .problem-step-track { opacity: 1; }
/* Number chip (fc-order-n): quiet fill, lime ink + lime-line ring when current. */
.problem-step-n {
  grid-row: 1 / span 2; align-self: start; margin-top: 0;
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--raised); color: var(--muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  transition: color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.problem-step.is-active .problem-step-n { background: var(--card); color: var(--lime-ink); box-shadow: inset 0 0 0 1px var(--lime-line), inset 0 1px 0 rgb(255 255 255 / 0.05); }
.problem-step.is-done .problem-step-n { color: var(--body); }
.problem-step.is-active {
  background:
    linear-gradient(to right, color-mix(in oklab, var(--wash) 7%, var(--canvas)), var(--canvas) 70%) padding-box,
    linear-gradient(to right, color-mix(in oklab, var(--wash) 28%, transparent), rgb(255 255 255 / 0.06) 40%, transparent 90%) border-box;
}
.problem-step-fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0);
}
/* Rows that aren't current step back so the active one leads; hover brings them up. */
.problem-step:not(.is-active) { opacity: 0.72; }
@media (hover: hover) { .problem-step:not(.is-active):hover { opacity: 1; } }
.problem-step-title {
  display: block; color: var(--body-strong); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; text-wrap: balance;
  transition: color var(--dur-slow) var(--ease);
}
.problem-step-sub {
  display: block; margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.5;
  transition: color var(--dur-slow) var(--ease);
}
.problem-step:hover .problem-step-title { color: var(--ink); }
.problem-step.is-active .problem-step-title { color: var(--title); }
.problem-step.is-active .problem-step-sub { color: var(--body); }

.problem-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; margin-left: 2px; padding: 0 12px;
  background: none; border: 0; border-radius: 10px; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.problem-toggle:hover { color: var(--ink); background: var(--card); }
.problem-toggle svg { width: 16px; height: 16px; }
.problem-toggle .problem-toggle-play { display: none; }
.problem-toggle[aria-pressed="true"] .problem-toggle-play { display: block; }
.problem-toggle[aria-pressed="true"] .problem-toggle-pause { display: none; }

/* ---------- Stage ---------- */
.problem-stage {
  position: relative; aspect-ratio: 16 / 10.6; overflow: hidden;
  /* Featured panel: gradient hairline, lit from above. */
  border: 1px solid transparent; border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.055) 1px, transparent 1.4px) 11px 11px / 22px 22px padding-box,
    linear-gradient(var(--sunk), var(--sunk)) padding-box,
    linear-gradient(to bottom, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.03) 40%, var(--line-soft)) border-box;
  font-size: clamp(10.5px, 1.78cqi, 13px); line-height: 1.45;
  --win-w: 62%; --win-h: 76%;
}
.problem-scene { position: absolute; inset: 0; transition: opacity 600ms var(--ease); }
.problem-stage.is-fading .problem-scene { opacity: 0; }
.problem-instant, .problem-instant * { transition: none !important; }

/* Windows: positioned by act with transform only */
.problem-win {
  --x: 0%; --y: 0%; --s: 1;
  position: absolute; left: 0; top: 0; width: var(--win-w); height: var(--win-h);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-overlay);
  border-top-color: var(--line-strong);
  transform-origin: 0 0; transform: translate(var(--x), var(--y)) scale(var(--s));
  transition: transform 760ms var(--ease-inout), opacity 520ms var(--ease);
  will-change: transform;
}
.problem-win::after {
  content: ""; position: absolute; inset: 0; background: rgb(11 13 16 / 0.5); opacity: 0; pointer-events: none;
  transition: opacity 600ms var(--ease);
}
.problem-win--claude { z-index: 1; }
.problem-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.problem-win--codex { z-index: 3; }
.problem-win--gpt { z-index: 4; }
.problem-toasts { z-index: 5; }

.problem-stage[data-act="1"] .problem-win--claude { --x: 30%; --y: 12%; }
.problem-stage[data-act="1"] .problem-win--codex { --x: 72%; --y: 20%; opacity: 0; }
.problem-stage[data-act="1"] .problem-win--gpt { --x: 72%; --y: 30%; opacity: 0; }

.problem-stage[data-act="2"] .problem-win--claude { --x: 0%; --y: 3%; --s: 0.92; }
.problem-stage[data-act="2"] .problem-win--claude::after { opacity: 1; }
.problem-stage[data-act="2"] .problem-win--codex { --x: 60%; --y: 22%; }
.problem-stage[data-act="2"] .problem-win--gpt { --x: 72%; --y: 30%; opacity: 0; }

.problem-stage[data-act="3"] .problem-win--claude { --x: 3%; --y: 4%; --s: 0.78; }
.problem-stage[data-act="3"] .problem-win--claude::after { opacity: 1; }
.problem-stage[data-act="3"] .problem-win--codex { --x: 17%; --y: 18%; --s: 0.78; }
.problem-stage[data-act="3"] .problem-win--codex::after { opacity: 0.55; }
.problem-stage[data-act="3"] .problem-win--gpt { --x: 31%; --y: 32%; --s: 0.78; }

/* Window chrome */
.problem-bar {
  display: flex; align-items: center; gap: 0.75em; flex: none; height: 2.85em; padding: 0 0.95em;
  border-bottom: 1px solid var(--line-soft); white-space: nowrap;
  /* Title bar: a 1px top sheen and a whisper of light fading down, so the window reads lit from above. */
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sidebar) 96%, white), var(--sidebar));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.problem-lights { display: inline-flex; gap: 0.38em; }
.problem-lights i {
  width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--line-strong);
  background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.08), transparent 70%);
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.06);
}
.problem-app { display: inline-flex; align-items: center; gap: 0.45em; color: var(--ink); font-weight: 600; }
.problem-meta { margin-left: auto; color: var(--muted); font-size: 0.9em; }
.problem-ref { font-family: var(--mono); font-size: 0.92em; letter-spacing: -0.01em; }
.problem-logo { width: 1.15em; height: 1.15em; flex: none; }
.problem-logo--claude { color: #d97757; }
.problem-logo--codex, .problem-logo--openai { color: var(--ink); }

/* Running: the app's lime pill + the one live dot. */
.problem-run.pill { margin-left: auto; height: 1.8em; padding: 0 0.7em; gap: 0.45em; font-size: 0.88em; line-height: 1; }
.problem-run .live-dot { width: 0.5em; height: 0.5em; }
.problem-run.is-on + .problem-meta { margin-left: 0; }
.problem-run:not(.is-on) { display: none; }

/* Chat body */
.problem-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.8em; padding: 1em 1em 0.6em; overflow: hidden; }
.problem-msg { opacity: 0; transform: translateY(0.6em); transition: opacity 420ms var(--ease), transform 520ms var(--ease); }
.problem-msg.is-on { opacity: 1; transform: none; }
.problem-msg--user {
  align-self: flex-end; max-width: 82%; padding: 0.55em 0.85em;
  background: var(--raised); color: var(--ink); border-radius: 1em 1em 0.3em 1em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}
.problem-msg--ai { display: flex; gap: 0.65em; align-items: flex-start; color: var(--body-strong); max-width: 92%; }
.problem-msg--ai p { padding-top: 0.15em; }
.problem-agent.avatar {
  flex: none; display: inline-grid; place-items: center; width: 1.85em; height: 1.85em;
  border-radius: 0.5em; background-color: var(--raised); color: inherit; font-size: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07), 0 1px 2px rgb(0 0 0 / 0.35);
}
.problem-agent .problem-logo { width: 1.1em; height: 1.1em; }
.problem-agent--lg.avatar { width: 2.4em; height: 2.4em; border-radius: 0.65em; }
.problem-agent--lg .problem-logo { width: 1.3em; height: 1.3em; }

.problem-notice {
  display: flex; align-items: center; gap: 0.5em; color: var(--warning-ink); font-size: 0.92em;
  align-self: flex-start; padding: 0.3em 0.75em 0.3em 0.4em; border-radius: 0.6em;
  opacity: 0; transform: translateX(-0.6em); transition: opacity 420ms var(--ease), transform 520ms var(--ease);
}
.problem-notice.is-on { opacity: 1; transform: none; }
.problem-ico { width: 1.35em; height: 1.35em; flex: none; }

.problem-paste {
  align-self: flex-end; max-width: 86%; display: flex; flex-direction: column; gap: 0.3em;
  padding: 0.6em 0.85em; border: 1px dashed var(--line-strong); border-radius: 0.9em 0.9em 0.3em 0.9em; color: var(--ink);
}
.problem-paste-tag { display: inline-flex; align-items: center; gap: 0.4em; color: var(--muted); font-size: 0.86em; font-weight: 500; }
.problem-paste-tag .problem-ico { width: 1.2em; height: 1.2em; }
.problem-paste-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.problem-compose {
  margin-top: auto; display: flex; align-items: center; gap: 0.2em; padding: 0.6em 0.85em;
  border: 1px solid var(--line-strong); border-radius: 0.8em; background: var(--field); color: var(--muted);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25);
  opacity: 0; transition: opacity 420ms var(--ease) 300ms;
}
.problem-compose.is-on { opacity: 1; }
.problem-caret { width: 1px; height: 1.1em; margin-left: 0.15em; background: var(--body); animation: problem-blink 1.1s steps(1) infinite; }
@keyframes problem-blink { 50% { opacity: 0; } }

/* Context tray */
.problem-tray { flex: none; padding: 0.7em 1em 0.85em; border-top: 1px solid var(--line-soft); }
.problem-tray-label { display: block; margin-bottom: 0.45em; color: var(--muted); font-size: 0.86em; font-weight: 500; }
.problem-chips { position: relative; display: flex; flex-wrap: wrap; gap: 0.4em; min-height: 1.85em; }
/* Context chips speak the app's pill: kept = lime, retyped by hand = neutral + dashed, lost = warning. */
.problem-chip.pill {
  height: 1.85em; padding: 0 0.75em; gap: 0.45em; font-size: 0.9em; line-height: 1;
  opacity: 0; transform: scale(0.8);
  transition: opacity 260ms var(--ease), transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.problem-chip.is-on { opacity: 1; transform: none; }
.problem-chip:not(.is-on) { position: absolute; }
.problem-chip--retyped.pill { color: var(--body-strong); border: 1px dashed rgb(255 255 255 / 0.16); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05); }
.problem-chip--missing s { text-decoration-thickness: 1px; }
.problem-chip .problem-ref { font-size: 1em; }
.problem-dot { width: 0.45em; height: 0.45em; border-radius: 50%; flex: none; background: currentColor; opacity: 0.75; }
.problem-empty { position: absolute; left: 0; top: 0.25em; color: var(--muted); font-size: 0.9em; transition: opacity 260ms var(--ease); }
.problem-empty.is-on { opacity: 0; }

/* Ghost chips: copies that try to follow you into Codex and get stuck at its edge */
.problem-ghost { position: absolute; left: 0; top: 0; opacity: 1; transform-origin: 0 0; will-change: transform, opacity; transition: none; }
.problem-ghost::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  border: 1px solid var(--warning); background: var(--warning-soft);
}

/* Notifications: a list that keeps growing while you are elsewhere */
.problem-toasts {
  position: absolute; top: 5%; right: 3%; width: 31%;
  display: flex; flex-direction: column; align-items: stretch; gap: 0.6em;
}
.problem-toast {
  display: flex; gap: 0.65em; align-items: flex-start;
  /* Toast / overlay: raised surface lit from above, hairline, overlay shadow. */
  padding: 0.7em 0.8em; border: 1px solid var(--line-strong); border-radius: 12px;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--raised) 96%, white), var(--raised) 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), var(--shadow-overlay);
  opacity: 0; transform: translateX(1.2em);
  transition: opacity 360ms var(--ease), transform 560ms var(--ease);
}
.problem-toast.is-on { opacity: 1; transform: none; }
.problem-toast-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.problem-toast-copy b { color: var(--title); font-weight: 600; margin-bottom: 0.1em; }
.problem-toast-copy b .problem-ref { color: var(--muted); font-weight: 400; margin-left: 0.3em; }
.problem-toast-copy > span { color: var(--body-strong); }
.problem-badge.badge {
  --wash: var(--warning); background-color: var(--card);
  align-self: flex-end; margin-top: 0.2em; height: 2em; padding: 0 0.7em; gap: 0.45em; border-radius: 0.55em; font-size: 0.88em; font-weight: 500;
  opacity: 0; transform: translateY(-0.4em); transition: opacity 360ms var(--ease), transform 460ms var(--ease);
}
.problem-badge b { font-weight: 650; }
.problem-badge.is-on { opacity: 1; transform: none; }

/* Pause loops when offscreen or paused */
.problem:not([data-inview]) .live-dot,
.problem:not([data-inview]) .problem-caret,
.problem-stage.is-paused .live-dot,
.problem-stage.is-paused .problem-caret { animation-play-state: paused; }

/* ---------- Narrow container: taller stage, wider windows ---------- */
@container problem (max-width: 560px) {
  .problem-stage { aspect-ratio: 4 / 5.4; --win-w: 86%; --win-h: 68%; font-size: 11px; border-radius: var(--radius-lg); }
  .problem-stage[data-act="1"] .problem-win--claude { --x: 8%; --y: 13%; }
  .problem-stage[data-act="1"] .problem-win--codex { --x: 16.3%; --y: 40%; }
  .problem-stage[data-act="1"] .problem-win--gpt { --x: 31%; --y: 46%; }
  .problem-stage[data-act="2"] .problem-win--claude { --x: 0%; --y: 0%; --s: 0.92; }
  .problem-stage[data-act="2"] .problem-win--codex { --x: 16.3%; --y: 30%; }
  .problem-stage[data-act="2"] .problem-win--gpt { --x: 31%; --y: 46%; }
  .problem-stage[data-act="3"] .problem-win--claude { --x: 2%; --y: 3%; --s: 0.74; }
  .problem-stage[data-act="3"] .problem-win--codex { --x: 12%; --y: 12%; --s: 0.74; }
  .problem-stage[data-act="3"] .problem-win--gpt { --x: 22%; --y: 21%; --s: 0.74; }
  .problem-toasts { top: auto; bottom: 3.5%; left: 4%; right: 4%; width: auto; gap: 0.45em; }
  .problem-toast { padding: 0.5em 0.7em; align-items: center; }
  .problem-toast .problem-agent--lg { width: 2.1em; height: 2.1em; }
  .problem-toast-copy > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .problem-notice { display: none; }
}

@media (max-width: 900px) {
  .problem-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .problem-figure, .problem-side { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-toggle { display: none; }
  .problem .live-dot, .problem-caret { animation: none; }
}