/* The public 3D explorer of a build timelapse (FEAT-mcstats-19): the view
   fills the space between the site bar and the controls, on a phone too.
   Kit's tokens (--bg, --surface, --text, --border, --radius) carry the theme;
   --ex-sky is the view's background, read by explorer.js on each theme change. */
:root { --ex-sky: #0b0b2a; }                               /* retro: the starfield's night */
:root[data-theme="clean"] { --ex-sky: #b9d4ee; }
:root[data-theme="clean"][data-scheme="dark"] { --ex-sky: #141b28; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="clean"][data-scheme="system"] { --ex-sky: #141b28; }
}

body.ex-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.ex-head { padding: 12px 20px 6px; max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.ex-head .back { display: inline-block; min-height: 24px; line-height: 24px; margin-bottom: 4px; }   /* a 24 px target (QA-MSS3a-4) */
.ex-head h1 { font-size: 24px; }
.ex-main { flex: 1; display: flex; flex-direction: column; max-width: 1120px; width: 100%; margin: 0 auto;
           padding: 0 20px; box-sizing: border-box; }
.ex-view { position: relative; flex: 1; min-height: 320px; height: calc(100vh - 260px); height: calc(100dvh - 260px);
           background: var(--ex-sky); border: 1px solid var(--border); border-radius: var(--radius, 12px);
           overflow: hidden; touch-action: none; cursor: grab; }
.ex-view.dragging { cursor: grabbing; }
.ex-view:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ex-view canvas { display: block; width: 100%; height: 100%; }
.ex-status { position: absolute; left: 12px; top: 10px; margin: 0; padding: 4px 10px; font-size: 14px;
             background: var(--surface); color: var(--text); border-radius: var(--radius-sm, 8px); }
.ex-status:empty { display: none; }
.ex-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 0 4px; }
.ex-btn { min-width: 76px; min-height: var(--control-h, 44px); padding: 0 16px; font: inherit; font-weight: 600;
          color: #fff; background: var(--accent); border: 0; border-radius: var(--radius-sm, 8px); cursor: pointer; }
.ex-btn:disabled { opacity: 0.5; cursor: default; }
.ex-speed select { min-height: var(--control-h, 44px); font: inherit; color: var(--text); background: var(--surface);
                   border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); padding: 0 8px; }
.ex-frame { flex: 1 1 220px; min-width: 160px; min-height: var(--control-h, 44px); accent-color: var(--accent); }
.ex-date { min-width: 15ch; font-variant-numeric: tabular-nums; color: var(--text); }
.ex-tex { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h, 44px); cursor: pointer; }
.ex-tex input { width: 20px; height: 20px; accent-color: var(--accent); }
.ex-tex.off { opacity: 0.5; cursor: default; }
.ex-note { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
footer { margin-top: 16px; }

:root:not([data-theme="clean"]) .ex-view { border-radius: 0; border: 3px ridge var(--border); }
:root:not([data-theme="clean"]) .ex-btn,
:root:not([data-theme="clean"]) .ex-speed select,
:root:not([data-theme="clean"]) .ex-status { border-radius: 0; }
:root:not([data-theme="clean"]) .ex-btn { color: #000; }

@media (max-width: 600px) {
  .ex-head { padding: 8px 12px 4px; }
  .ex-head h1 { font-size: 20px; }
  .ex-main { padding: 0 12px; }
  .ex-view { height: 58vh; height: 58dvh; min-height: 280px; flex: none; }
  .ex-word { display: none; }
  .ex-frame { order: 5; flex-basis: 100%; }
  .ex-date { order: 6; }
}

/* Phone landscape (844 x 390, QA-MSS3a-3): no 320 px minimum; the view takes the window's height
   less one row of controls, so with the slider scrolled into view the whole view is on screen too. */
@media (max-height: 500px) and (orientation: landscape) {
  .ex-head { padding: 4px 20px 2px; }
  .ex-head h1 { font-size: 18px; }
  .ex-view { flex: none; min-height: 160px; height: calc(100vh - 72px); height: calc(100dvh - 72px); }
  .ex-controls { flex-wrap: nowrap; gap: 8px; padding: 6px 0 4px; }
  .ex-word { display: none; }
  .ex-frame { min-width: 120px; }
  .ex-date { min-width: 0; white-space: nowrap; }
}