/* generate (#/generate): Opus 5.5 at work, on white. Its cursor drags out a new dark frame, sets pink keyframes
   on a track under it, scrubs the ink playhead while the in-betweens fill in, fuzz-tests extreme inputs and
   sweeps every frame; the panel on the right reports each stage honestly (and says so in demo mode).
   The cursor (.mp-cursor) is shared with the onboarding's "generate new" card. Its name tag is the only
   yellow in the app. */

/* ================================================================ Opus 5.5's cursor */
.mp-cursor { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: flex-start; pointer-events: none; }
.mp-cursor svg {
  width: 16px; height: 21px; flex: none; transform-origin: 2px 2px; transition: transform .08s;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28));
}
.mp-cursor svg path { fill: var(--ink); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.mp-cursor.is-click svg { transform: scale(.84); }
.mp-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 15px 0 0 -2px; }
.mp-name { padding: 4px 8px; border-radius: 5px 5px 5px 2px; background: var(--opus); color: var(--ink); white-space: nowrap; font: 650 12px/1 var(--font); }
.mp-say {
  width: max-content; max-width: min(300px, 62vw); padding: 8px 11px; border-radius: 3px 12px 12px 12px;
  background: #fff; border: 1px solid var(--line-2); color: var(--ink); box-shadow: var(--shadow-pop);
  font: 450 14px/1.4 var(--font); overflow-wrap: anywhere;
}
.mp-say:empty { display: none; }

/* ================================================================ layout: the stage + the stage list */
.gen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  height: calc(100vh - var(--bar-h)); height: calc(100dvh - var(--bar-h));
}
.gen-canvas { position: relative; overflow: hidden; min-height: 0; background: #fff; }
.gen-world { position: absolute; inset: 0; }
.gen .mp-cursor { opacity: 0; will-change: transform; }
.gen .mp-cursor.on { opacity: 1; }
.gen-panel { min-height: 0; overflow-y: auto; padding: 44px 32px 40px; background: #fff; border-left: 1px solid var(--line); }

/* ================================================================ the frame Opus drags out */
.gf { position: absolute; visibility: hidden; }
.gf.is-framed { visibility: visible; }
.gf-slot { position: absolute; inset: 0; overflow: hidden; border-radius: var(--frame-r); background: var(--frame); box-shadow: var(--frame-shadow); }
.gf-label {
  position: absolute; left: 0; right: 0; bottom: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 0 2px 12px; white-space: nowrap; color: var(--ink); font: 600 14px/1.2 var(--font);
}
.gf-name { overflow: hidden; text-overflow: ellipsis; }
.gf-tag { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
/* before there is a template: the category's wireframe, drawn by the playhead */
.gf-sketch { position: absolute; left: 18%; top: 12%; width: 64%; height: 76%; color: rgba(255, 255, 255, .5); }
.gf-sketch .sketch { width: 100%; height: 100%; }
.gf-sketch .sketch :is(path, rect, circle, line, polyline, ellipse) {
  vector-effect: non-scaling-stroke; stroke-width: 2px; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 0));
}
.gf-sketch .sketch text { opacity: var(--draw, 0); }
.has-player .gf-sketch { display: none; }
.gf-drag { position: absolute; width: 0; height: 0; visibility: hidden; border: 1.5px solid var(--pink); border-radius: 4px; background: var(--pink-soft); }
.gf-drag.on { visibility: visible; }
.gf-dim {
  position: absolute; right: 0; top: 100%; margin-top: 8px; padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--ink); color: #fff; font: 600 11.5px/1 var(--font); font-variant-numeric: tabular-nums;
}

/* ================================================================ the keyframe track under the frame */
.gf-track { position: absolute; height: 10px; visibility: hidden; }
.gf-track.on { visibility: visible; }
.gf-line, .gf-checked { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; }
.gf-line { background: var(--line); }
.gf-checked { background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.gf-ticks i { position: absolute; top: 50%; width: 1px; height: 8px; margin: -4px 0 0 -.5px; background: var(--tick); opacity: 0; transition: opacity .2s; }
.gf-ticks i.on { opacity: 1; }
.gf-track.checked .gf-ticks i.on { background: var(--ink-3); }
.gf-keys i {
  position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; opacity: 0; border-radius: 2px;
  background: var(--pink); box-shadow: 0 0 0 2px #fff; transform: rotate(45deg);
}
.gf-keys i.on { opacity: 1; }
.gf-head { position: absolute; top: -9px; bottom: -9px; left: 0; width: 2px; margin-left: -1px; background: var(--ink); visibility: hidden; }
.gf-head.on { visibility: visible; }
.gf-head::before {
  content: ''; position: absolute; left: 50%; top: -3px; width: 11px; height: 9px; transform: translateX(-50%);
  background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}
/* fuzz cases: outline pills, ticked off in ink */
.gf-fuzz { position: absolute; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gf-fuzz li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-3); opacity: 0; transform: translateY(4px);
  font: 500 13px/1 var(--font);
  transition: opacity var(--dur), transform .3s var(--ease), border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}
.gf-fuzz li.on { opacity: 1; transform: none; }
.gf-fuzz li.testing { color: var(--ink); border-color: var(--ink); }
.gf-fuzz li.passed { color: var(--ink-2); }
.gf-fuzz li i { position: relative; display: grid; place-items: center; width: 14px; height: 14px; }
.gf-fuzz li i::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.gf-fuzz li.testing i::before { background: var(--pink); }
.gf-fuzz li.passed i::before { display: none; }
.gf-fuzz li svg { position: absolute; inset: 0; width: 14px; height: 14px; }
.gf-fuzz li svg path, .stages li svg path {
  fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .4s var(--ease) .05s;
}
.gf-fuzz li.passed svg path { stroke-dashoffset: 0; }

/* ================================================================ the stage list */
.gen-title { margin: 0; text-wrap: balance; font: 700 clamp(28px, 2.6vw, 38px)/1.08 var(--font); letter-spacing: -.03em; }
.gen-title .wi { display: inline-block; }
.gen-brief { margin-top: 26px; }
.gen-brief > .f-label { margin-bottom: 9px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.brief-bar {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--r-bar); box-shadow: var(--shadow-bar);
}
.brief-bar .pbar-mark { margin-top: 6px; }
.brief-q { margin: 0; font: 450 15.5px/1.45 var(--font); color: var(--ink); overflow-wrap: anywhere; }
.demo-banner { margin-top: 16px; padding: 14px 16px 15px; border-radius: 14px; background: var(--soft); }
.demo-tag { display: inline-block; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 11.5px/1 var(--font); }
.demo-banner p { margin: 9px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.demo-wl { margin-top: 14px; }
.demo-wl > .f-label { margin-bottom: 8px; font-size: 13.5px; }
.demo-banner .wl-done { background: #fff; }
.stages { list-style: none; margin: 22px 0 6px; padding: 0; }
.stages li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 15px; transition: color var(--dur); }
.stages li:last-child { border-bottom: 0; }
.stages li i { position: relative; display: grid; place-items: center; width: 18px; height: 18px; flex: none; }
.stages li i::before {
  content: ''; width: 8px; height: 8px; transform: rotate(45deg); border-radius: 1.5px; border: 1.5px solid var(--tick);
  transition: background-color var(--dur), border-color var(--dur), opacity var(--dur);
}
.stages li svg { position: absolute; inset: 0; width: 18px; height: 18px; }
.stages li.now { color: var(--ink); font-weight: 600; }
.stages li.now i::before { background: var(--pink); border-color: var(--pink); }
.stages li.done { color: var(--ink-2); }
.stages li.done i::before { opacity: 0; }
.stages li.done svg path { stroke-dashoffset: 0; }
.gen-status { min-height: 1.5em; margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.gen-status.err { color: var(--err); }
.gen-credit { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.gen-credit:empty { display: none; }
.gen .onb-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.gen .onb-nav:empty { display: none; }

@media (max-width: 900px) {
  .gen { grid-template-columns: 1fr; height: auto; }
  .gen-canvas { height: clamp(340px, 56vw + 150px, 560px); }
  .gen-panel { overflow: visible; padding: 26px 16px 48px; border-left: 0; border-top: 1px solid var(--line); }
}