/* Give each picture a job: page-specific layer on top of the house style. */

.stage { background: #000; aspect-ratio: 3 / 2; max-height: calc(100dvh - var(--bar-h) - 24px); margin: 0 auto; }
.stage-blur, .stage-still, .stage-video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.stage-blur { object-fit: cover; filter: blur(28px) saturate(1.1) brightness(0.55); transform: scale(1.15); }
.stage-still, .stage-video { object-fit: contain; }
.stage-still { transition: opacity 0.6s, filter 0.9s; }
.stage-video { opacity: 0; transition: opacity 0.6s; pointer-events: none; }
.stage[data-state='film'] .stage-video { pointer-events: auto; }

/* Pile: before every picture has a job, the result is hidden under a heavy blur. */
.stage[data-state='pile'] .stage-still { opacity: 0; }
.stage[data-state='pile'] .stage-blur { filter: blur(40px) saturate(0.2) brightness(0.4); }
.stage[data-state='still'] .stage-still { opacity: 1; }
.stage[data-state='film'] .stage-still { opacity: 0; }
.stage[data-state='film'] .stage-video { opacity: 1; }
.stage[data-state='developing'] .stage-still { opacity: 1; animation: develop 1.2s ease-out both; }
@keyframes develop {
  from { filter: blur(24px) saturate(0) brightness(1.4); }
  to { filter: none; }
}

.stage-pile {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  transition: opacity 0.4s;
}
.stage:not([data-state='pile']) .stage-pile { opacity: 0; }
.pile-count {
  margin: 120px 0 0; font-size: 12px; color: var(--muted); text-align: center;
}
.pile-count b { font: 400 22px / 1 'Instrument Serif', serif; color: var(--accent); margin-right: 2px; }
.stage:not([data-state='pile']) .stage-play { opacity: 0; pointer-events: none; }
.stage-play { transition: opacity 0.3s; }

/* Click-to-pause target once the film is up */
.stage[data-state='film'] .stage-video { cursor: pointer; }

/* Sound icon states */
#sound .snd-on { display: none; }
#sound[aria-pressed='true'] .snd-on { display: inline; }
#sound[aria-pressed='true'] .snd-off { display: none; }

/* ---------- Job board ---------- */
.board { margin-top: 26px; }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.board-title { margin: 0; font: 400 32px / 1 'Instrument Serif', serif; letter-spacing: -0.02em; }
.board-hint { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 12px; color: var(--muted); }
.board-reset {
  min-height: 32px; padding: 0 12px; border: 1px solid var(--rule); background: transparent;
  font-size: 11px; color: var(--ink);
}
.board-reset:hover { border-color: var(--accent); }
.board-cards { display: grid; grid-template-columns: repeat(var(--cards, 4), minmax(0, 1fr)); gap: 10px; }
.jobcard {
  display: flex; flex-direction: column; text-align: left; padding: 0;
  border: 1px solid var(--rule); background: var(--panel);
}
.jobcard:hover:not(:disabled) { border-color: var(--accent); color: inherit; }
.jobcard-img { position: relative; aspect-ratio: 1; overflow: hidden; background: #0004; }
.jobcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s, filter 0.35s; }
.jobcard:not(.given) .jobcard-img img { filter: saturate(0.7) brightness(0.85); }
.jobcard:hover:not(.given) .jobcard-img img { transform: scale(1.03); filter: none; }
.jobcard .tag {
  position: absolute; left: 8px; top: 8px; padding: 5px 8px;
  border: 1px dashed var(--glass-line); border-radius: 3px;
  background: var(--glass); backdrop-filter: blur(8px);
  font: 500 10px / 1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.jobcard.given .tag {
  border: 1px solid var(--accent); background: var(--accent); color: var(--bg);
  animation: stick 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes stick {
  from { transform: translateY(-8px) rotate(-6deg) scale(1.15); opacity: 0; }
  to { transform: rotate(-2deg); opacity: 1; }
}
.jobcard-text { padding: 10px 11px 12px; }
.jobcard-text strong { display: block; font-size: 12px; font-weight: 500; color: var(--ink); }
.jobcard-text small { display: block; margin-top: 5px; min-height: 2.9em; font-size: 11px; line-height: 1.45; color: var(--muted); }
.jobcard:not(.given) .gave { visibility: hidden; }
.jobcard.given .gave { color: var(--ink); }
.jobcard.given .gave b { color: var(--accent); font-weight: 500; }
.board-trick { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); min-height: 1.6em; }
.board-trick b { color: var(--ink); font-weight: 500; }

/* Grid children must be allowed to shrink. */
.stage-layout > * { min-width: 0; }

/* Glossary tip: out of layout until it is shown, never wider than the screen. */
.term-tip { display: none; max-width: min(260px, calc(100vw - 32px)); }
.term:hover .term-tip, .term:focus-visible .term-tip, .term[aria-expanded='true'] .term-tip { display: block; }

/* Rail thumbnails (the finished picture) and card text */
.rail-item .rail-thumb { flex: 0 0 52px; margin-left: auto; width: 52px; height: 35px; object-fit: cover; border-radius: 3px; border: 1px solid #fff2; }
.rail-item:not(.selected) .rail-thumb { opacity: 0.75; }
aside .card q { color: var(--ink); }
aside .card h3 { margin-top: 6px; }

/* Dialog quotes */
.how-steps q, .how-lede q { color: var(--ink); }

@media (max-width: 1100px) {
  .stage-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  aside { order: -1; min-width: 0; }
  aside .card, .rail-label { display: none; }
  #rail { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #rail::-webkit-scrollbar { display: none; }
  #rail .rail-item {
    flex: 0 0 auto; width: auto; gap: 9px; padding: 9px 12px;
    border: 1px solid var(--rule); background: var(--panel);
  }
  #rail .rail-item strong { margin: 0; white-space: nowrap; }
  #rail .rail-item small { display: none; }
  #rail .rail-item .rail-thumb { width: 30px; height: 20px; flex-basis: 30px; }
  #rail .rail-item.selected { border-color: var(--accent); }
}
@media (max-width: 800px) {
  .pile-count { margin-top: 96px; }
  .stage-top .shortcut-row { display: none; }
}
@media (max-width: 560px) {
  .board-cards {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin;
  }
  .jobcard { scroll-snap-align: start; }
}
@media (max-width: 480px) {
  .board-title { font-size: 26px; }
  .pile-count { margin-top: 76px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage[data-state='developing'] .stage-still { animation: none; }
  .jobcard.given .tag { animation: none; transform: rotate(-2deg); }
}

/* Prompt drawer */
.prompt-model { margin-left: 10px; font: 400 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
#prompt .prompt-excerpt { max-width: none; font-family: var(--mono); color: var(--ink); }
#prompt-refs { font-size: 12px; }
.copy { margin-top: 8px; }
.copy[data-done] { border-color: var(--accent); color: var(--accent); }
.prompt-downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }
.prompt-downloads .action { justify-content: flex-start; }
.how-downloads { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .how-downloads { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .how-downloads { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .prompt-downloads { grid-template-columns: 1fr; } .prompt-model { display: block; margin: 6px 0 0; } }

/* Official Scenario mark (four translucent layers), from the brand SVG */
.bar-logo { width: 22px; height: 22px; stroke: none; color: var(--ink); }

/* Shared site footer: the runtime mounts its links in [data-exploration-controls] */
.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; max-width: 1600px; margin: 40px auto 0; padding: 14px 4.2%;
  border-top: 1px solid var(--rule); font: 500 12px / 1.4 var(--mono); color: var(--muted);
}
.site-foot .foot-id { letter-spacing: 0.1em; text-transform: uppercase; }
.site-foot .foot-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.site-foot .foot-link:hover { color: var(--accent); }
.site-foot [data-exploration-controls] { margin-left: auto; border-top: 0; }
@media (max-width: 820px) { .site-foot [data-exploration-controls] { margin-left: 0; width: 100%; } }