/* /applications/: the 3D cutaway stage (heading inside it) and the
   accessible HTML list of the nine applications below. */
.stage-head { max-width: 1240px; margin: 0 auto; padding: 56px 24px 32px; }
.stage-head h1 { margin: 0 0 12px; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.05; color: var(--ink); }
.stage-head p { margin: 0; max-width: 60ch; font-size: 1.125rem; color: var(--ink-2); }
.stage-media { position: relative; }

.app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px; border: 1px solid var(--steel-200); border-radius: 8px; background: var(--paper); }
.app:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.app-body { position: relative; padding-left: 52px; }
.app-n { position: absolute; left: 0; top: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--foam); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.app h2 { margin: 2px 0 8px; font-size: 1.375rem; line-height: 1.2; color: var(--ink); }
.app p { margin: 0 0 10px; color: var(--ink-2); max-width: 60ch; }
.app-prod { font-weight: 600; }
.app .badges { margin-bottom: 12px; }
.app-guide { margin: 0; }
.app-photo { margin: 0; }
.app-photo img { width: 100%; height: auto; border-radius: 8px; display: block; }
.app-photo.tall img { max-height: 420px; width: auto; max-width: 100%; }
.app-photo figcaption { margin-top: 6px; font-size: 14px; color: var(--ink-2); }

@media (min-width: 1024px) {
  .app:has(.app-photo) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
@media (max-width: 767px) {
  .stage-head { padding: 32px 16px 20px; }
  .app { padding: 18px; }
  .app-body { padding-left: 46px; }
}

/* ---- 3D stage ---------------------------------------------------------
   Without JS or on phones: the still with numbered markers (links to the
   list). With the 3D bundle (html.apps-3d): the canvas fills the stage and
   the markers follow the scene. Without a still, the stage only shows in 3D. */
.apps-stage-sec { background: var(--steel-100); border-bottom: 1px solid var(--steel-200); }
.apps-stage-sec:not(.has-still) { display: none; }
.apps-3d .apps-stage-sec { display: block; }
.stage { position: relative; max-width: 1240px; margin: 0 auto; overflow: hidden; }
.stage-still { display: block; width: 100%; height: auto; }
.stage-gl { display: none; }
.stage-skip { position: absolute; left: 16px; top: 12px; z-index: 5; padding: 8px 12px; border-radius: 8px; background: var(--paper); transform: translateY(-200%); }
.stage-skip:focus { transform: none; }

.apps-3d .stage { height: clamp(420px, min(62vw, 100vh - var(--hdr, 80px)), 680px); max-width: none; } /* never taller than the window */
.apps-3d .stage-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.apps-3d .stage-gl { display: block; position: absolute; inset: 0; }
.apps-3d .stage-gl canvas { display: block; }
.apps-3d .stage-media { position: absolute; inset: 0; }
/* With 3D the heading overlays the top-left of the stage, so the whole
   scene fits the first screen; it fades while a detail is open. */
.apps-3d .stage-head { position: absolute; z-index: 2; top: 0; left: 0; max-width: min(780px, 64%); margin: 0; padding: 24px 32px; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.apps-3d .stage-head h1 { margin-bottom: 8px; font-size: clamp(1.75rem, 1rem + 1.5vw, 2.5rem); }
.apps-3d .stage-head p { font-size: 1rem; }
.apps-3d .stage.is-focus .stage-head { opacity: 0; }
.apps-3d .hs { left: 0; top: 0; }

/* Before the intro ends, markers are invisible and inert. */
.apps-3d .stage:not(.is-live) .hs { pointer-events: none; }
.apps-3d .stage-gl canvas { cursor: grab; }
.apps-3d .stage.is-dragging canvas { cursor: grabbing; }
.stage.is-focus .hs:not(.is-active) { opacity: .35; }
.hs.is-active .hs-n { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.hs { transition: opacity var(--dur-fast) var(--ease-out); }

/* Info panel: slides in from the right over the stage. */
.stage-panel { position: absolute; top: 16px; right: 16px; bottom: 16px; width: min(380px, 42%); z-index: 3; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--steel-200); border-radius: 8px; box-shadow: 0 1px 2px rgb(17 20 24 / .06), 0 8px 24px rgb(17 20 24 / .06); transform: translateX(calc(100% + 24px)); visibility: hidden; transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.stage-panel.is-open { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease-out); }
.sp-body { flex: 1; overflow-y: auto; padding: 20px 20px 8px; }
.sp-title { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.sp-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--foam); color: var(--ink); font-size: 16px; font-weight: 600; }
.sp-n.fire { background: var(--fire); color: var(--paper); }
.sp-body p { margin: 0 0 10px; color: var(--ink-2); }
.sp-body .app-prod { font-weight: 600; color: var(--ink); }
.sp-body .badges { margin-bottom: 12px; }
.sp-photo { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 12px; }
.sp-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sp-nav { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--steel-200); }
.sp-btn, .sp-back, .su-btn { font: inherit; cursor: pointer; border: 1px solid var(--steel-200); background: var(--paper); color: var(--ink); border-radius: 8px; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sp-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.sp-btn .ic { width: 20px; height: 20px; }
.sp-btn .ic.flip { transform: scaleX(-1); }
.sp-count { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sp-back { margin-left: auto; height: 40px; padding: 0 14px; font-weight: 600; }
.sp-btn:hover, .sp-back:hover, .su-btn:hover, .sp-btn:focus-visible, .sp-back:focus-visible, .su-btn:focus-visible { border-color: var(--accent); color: var(--accent); }

/* Zoom buttons and the hint line, bottom left. */
/* Bottom bar: the instruction centred, view tools (replay, zoom) on the right.
   The bar itself lets clicks and drags through to the canvas. */
.stage-ui { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; pointer-events: none; transition: right var(--dur-base) var(--ease-out); }
.stage-ui > * { pointer-events: auto; }
.su-hint { grid-column: 2; display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 14px; border-radius: 8px; background: rgb(255 255 255 / .9); box-shadow: 0 1px 2px rgb(17 20 24 / .06); font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.su-tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.su-zoom { display: flex; }
.su-btn { width: 40px; height: 40px; font-size: 20px; line-height: 1; }
.su-zoom .su-btn:first-child { border-radius: 8px 0 0 8px; }
.su-zoom .su-btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.su-zoom .su-btn:hover, .su-zoom .su-btn:focus-visible { position: relative; z-index: 1; }
/* With a detail open, the tools move left of the panel. */
.stage.is-focus .stage-ui { right: calc(min(380px, 42%) + 32px); }
.su-replay { height: 40px; padding: 0 14px; font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--steel-200); background: var(--paper); color: var(--ink); border-radius: 8px; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.su-replay:hover, .su-replay:focus-visible { border-color: var(--accent); color: var(--accent); }
.su-hint .ic { width: 18px; height: 18px; }
.su-hint .ic.down { transform: rotate(90deg); }
.stage.is-focus .su-hint, .stage.is-focus .su-replay, .stage:not(.is-live) .su-replay { visibility: hidden; }

/* Guided scroll (>= 1024px): the stage sticks under the header while the
   page scrolls through ten steps (overview + nine details), 45vh each. */
.apps-guided .stage-wrap { height: calc(100vh - var(--hdr, 0px) + 10 * 45vh); }
.apps-guided .stage { position: sticky; top: var(--hdr, 0px); height: calc(100vh - var(--hdr, 0px)); min-height: 420px; }

/* Still export: fixed 1600 x 1000 canvas, no page chrome. */
.apps-still .stage { width: 1600px; height: 1000px; }
.apps-still .stage-markers, .apps-still .stage-ui, .apps-still .stage-panel, .apps-still .stage-head { display: none; }