/* Workshop player, on the datawalks.net system ("one bit", datawalks-web/DESIGN.md):
   ink and paper only, IBM Plex self-hosted, square corners, no shadow, a 4px pixel grid,
   state shown by swapping ink and paper. One departure, from the Figma frame: red marks
   "now" (the playhead and the play button). The spectrogram is data, shown in grey, as
   the event artwork is the one place colour enters on datawalks.net. */

@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url(fonts/ibm-plex-serif-700-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --ink: #000000;
  --paper: #ffffff;
  --now: #ff0000;
  --font-display: "IBM Plex Serif", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
  --pixel: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--ink); }
[hidden] { display: none !important; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.screen { display: flow-root; max-width: 480px; min-height: 100vh; min-height: 100svh; margin: 0 auto; background: var(--paper); }
/* player screens only: one screen, no scrolling; the spectrogram takes what is left */
.screen.is-player { display: flex; flex-direction: column; height: 100vh; height: 100svh; overflow: hidden; }
.screen.is-player .bar { flex: none; padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
#player { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.player { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* step bar: ◀ STEP 2 / recorded sound ▶ */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; padding-bottom: 10px; padding-left: var(--gl); padding-right: var(--gr); border-bottom: 1px solid var(--ink);
}
.bar-title { display: flex; flex-direction: column; align-items: center; }
.bar-title strong { font: 400 13px/1.6 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.bar-title span { font: italic 400 16px/1.2 var(--font-mono); }
.arrow { width: 28px; height: 28px; }
.arrow::before {
  content: ""; display: block; width: 0; height: 0; margin: auto;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.arrow-left::before { border-right: 20px solid var(--ink); }
.arrow-right::before { border-left: 20px solid var(--ink); }
.arrow:disabled { visibility: hidden; }

/* the spectrogram, then the transport on the ink plate, then the seam */
.spectro-wrap { position: relative; flex: 1 1 auto; min-height: 220px; }
#spectro { position: absolute; top: 0; left: 0; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; background: var(--paper); }
.transport {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-top: 12px; padding-bottom: 12px; padding-left: var(--gl); padding-right: var(--gr); background: var(--ink); color: var(--paper);
}
.clock { display: flex; flex-direction: column; font: 400 13px/1.6 var(--font-mono); white-space: nowrap; }
.clock span:first-child { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.clock.right { align-items: flex-end; text-align: right; }
.play { width: 48px; height: 48px; border-radius: 50%; background: var(--now); display: grid; place-items: center; }
.play:disabled { opacity: 0.5; }
.play.is-loading .icon-play { display: none; }
.play.is-loading::after { content: "loading"; color: var(--paper); font: 400 14px/1 var(--font-mono); letter-spacing: 0.02em; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.play:focus-visible { outline-color: var(--paper); }
.icon-play { width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  border-left: 20px solid var(--paper); margin-left: 4px; }
.play.is-playing .icon-play { width: 16px; height: 24px; border: 0; margin: 0;
  border-left: 4px solid var(--paper); border-right: 4px solid var(--paper); }

.seam { flex: none; }
.seam__row { height: calc(var(--pixel) * 2); background-size: var(--pixel) var(--pixel); }
.seam__row--75 { background-image: conic-gradient(transparent 0 25%, var(--ink) 0 100%); }
.seam__row--50 { background-image: conic-gradient(var(--ink) 0 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0 100%); }
.seam__row--25 { background-image: conic-gradient(var(--ink) 0 25%, transparent 0 100%); }

/* the landscape: sky (when), listener (which part of the sound), tree. One pixel
   picture on a 4px grid; three real buttons lie over it, pressed = ink and paper swapped. */
.land { position: relative; flex: none; width: 100%; aspect-ratio: 96 / 40; background: var(--paper); color: var(--ink); isolation: isolate; }
@supports not (aspect-ratio: 1 / 1) {
  .land { height: 0; padding-top: 41.6667%; }
  .land svg { position: absolute; top: 0; left: 0; }
}
.land svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; fill: currentColor; }
.land-lab { position: absolute; font: 400 14px/1 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.land-sky { left: max(4px, env(safe-area-inset-left, 0px)); top: 4px; padding: 3px 4px; background: var(--paper); letter-spacing: 0.14em; text-transform: uppercase; }
.land-band, .land-tree { top: 88%; height: 12%; width: 50%; padding-left: 4px; padding-right: 4px; line-height: 14px; text-align: center; background: var(--paper); }

.land-band { left: 0; } .land-tree { left: 50%; }
.hot { position: absolute; display: block; }
.hot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; inset: 0; background: #fff; mix-blend-mode: difference; opacity: 0; }
.hot.pressed::before, .hot:active::before { opacity: 1; }
.hot-sky { left: 0; top: 0; width: 100%; height: 35%; }
.hot-band { left: 0; top: 35%; width: 50%; height: 65%; }
.hot-tree { left: 50%; top: 35%; width: 50%; height: 65%; }

/* one short caption, and the "i" that holds the full text */
.capline { flex: none; display: flex; align-items: center; border-top: 1px solid var(--ink);
  padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); padding-left: var(--gl); padding-right: var(--gr); }
#caption { flex: 1 1 auto; margin-right: 12px; min-width: 0; font: 400 13px/1.4 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-btn { flex: none; width: 32px; height: 32px; border: 1px solid var(--ink); font: italic 400 14px/1 var(--font-mono); }
.info-btn:hover, .info-btn:active { background: var(--ink); color: var(--paper); }
.pix { display: block; width: 96px; height: 96px; }
.pix svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; fill: currentColor; }


/* chooser: a second sheet of paper over the first, ruled on top, no shadow */
.sheet { position: fixed; top: 0; left: 0; right: 0; bottom: 0; inset: 0; display: flex; align-items: flex-end; justify-content: center; z-index: 10;
  background-image: conic-gradient(var(--ink) 0 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0 100%);
  background-size: var(--pixel) var(--pixel); }
.sheet[hidden] { display: none; }
.sheet-card {
  width: 100%; max-width: 480px; background: var(--paper); border-top: 1px solid var(--ink);
  padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding-left: var(--gl); padding-right: var(--gr);
}
.sheet-title { margin: 0 0 12px; font: italic 400 16px/1.2 var(--font-mono); }
.sheet-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.option {
  display: flex; flex-direction: column; align-items: center; padding: 12px 4px;
  border: 1px solid var(--ink); font: 400 13px/1.4 var(--font-mono); text-align: center;
}
.option > * + * { margin-top: 4px; }
.option strong { font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.option[aria-pressed="true"], .option:hover { background: var(--ink); color: var(--paper); }
.option .pix { width: 48px; height: 48px; }
.sheet-options.is-text { display: block; }
.sheet-text p { margin: 0 0 10px; font: 400 15px/1.5 var(--font-body); }
.sheet-text .fact { font: 400 13px/1.6 var(--font-mono); }
.sheet-text .placeholder { font: italic 400 13px/1.5 var(--font-mono); border: 1px solid var(--ink); padding: 12px; }
.sheet-close { display: block; width: 100%; margin-top: 12px; padding: 12px; background: var(--ink); color: var(--paper);
  font: 400 13px/1.1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }


/* ---- pages: start, prompts, questions, pictures, survey ---- */
.page { padding-top: 20px; padding-bottom: 40px; padding-left: var(--gl); padding-right: var(--gr); }
.screen.is-start .bar { display: none; }
.lead { margin: 0 0 20px; font: 400 17px/1.55 var(--font-body); }
.lead.big { font: italic 700 32px/1.2 var(--font-display); }
.count { margin: 24px 0 0; font: 400 14px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.meta-line { margin: 0 0 20px; font: 400 14px/1.4 var(--font-mono); letter-spacing: 0.06em; }
.note { margin: 0 0 20px; font: 400 13px/1.5 var(--font-body); }
.preload-status { margin-top: 12px; min-height: 1.5em; font: 400 13px/1.4 var(--font-mono); }
.head { margin: 0 0 6px; font: italic 700 20px/1.25 var(--font-display); }
.scale-note { margin: 0 0 14px; font: 400 13px/1.4 var(--font-mono); letter-spacing: 0.06em; }

.page-start { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
.field { margin-bottom: 16px; }
.text-input { display: block; width: 100%; min-height: 48px; padding: 10px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink); font: 400 16px/1.4 var(--font-body); }
.text-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.text-input.word { margin-bottom: 12px; }
.primary-btn { display: block; width: 100%; min-height: 52px; padding: 12px; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); font: 400 14px/1.1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.primary-btn:disabled { background: var(--paper); color: var(--ink); opacity: 0.35; cursor: default; }

.page-listen { display: flex; flex-direction: column; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); padding-bottom: 24px; }
.prompts { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.prompt-item { display: flex; align-items: flex-start; padding: 14px 0; }
.prompt-icon { flex: none; width: 40px; height: 40px; margin: 4px 16px 0 0; color: var(--ink); }
.prompt-icon svg { display: block; width: 40px; height: 40px; fill: currentColor; shape-rendering: crispEdges; }
.prompt-body { flex: 1; min-width: 0; }
.prompt-item .meta-line { margin: 0 0 6px; }
.prompt { margin: 0; font: 400 18px/1.4 var(--font-body); }
.prompt-nav { display: flex; justify-content: space-between; }
.small-btn { min-height: 44px; padding: 8px 16px; border: 1px solid var(--ink); font: 400 14px/1.4 var(--font-mono); letter-spacing: 0.08em; }
.small-btn:hover:not(:disabled), .small-btn:active:not(:disabled) { background: var(--ink); color: var(--paper); }
.small-btn:disabled { opacity: 0.3; cursor: default; }

.q { margin-bottom: 24px; }
.q-text { display: block; margin: 0 0 10px; font: 400 17px/1.4 var(--font-body); }
.q-scale { margin-bottom: 16px; }
.q-scale .q-text { margin-bottom: 8px; font-size: 15px; line-height: 1.35; }
.q-label { display: block; margin: 0 0 6px; font: 400 14px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.q-input { display: block; width: 100%; min-height: 96px; padding: 10px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--font-body); resize: vertical; }
.q-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.ins { display: grid; gap: 6px; }
.ins-pic { position: relative; display: block; padding: 4px 8px 4px 34px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.ins-pic svg { display: block; width: 100%; height: auto; }
.ins-n { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 400 13px/1 var(--font-mono); }
.ins-pic[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.page-ins .q-text { font-size: 15px; margin-bottom: 8px; }
.page-ins { padding-top: 14px; }

.choices { display: grid; gap: 8px; }
.choices.big { grid-template-columns: 1fr 1fr; }
.choices.big .choice { min-height: 52px; text-align: center; font-size: 17px; }
.choice { padding: 12px; border: 1px solid var(--ink); text-align: left; font: 400 16px/1.3 var(--font-body); }
.choice[aria-pressed="true"], .box[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.scale7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.box { min-height: 44px; border: 1px solid var(--ink); font: 400 14px/1 var(--font-mono); }


/* ---- touch and old-browser hardening ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }
button, .play, .land, .transport, .bar, .sheet-card, #spectro {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#spectro { touch-action: none; }
input, textarea { -webkit-appearance: none; appearance: none; border-radius: 0; touch-action: manipulation; }

.q-hint { margin: 2px 0 6px; font: italic 400 14px/1.4 var(--font-mono); }
.page-notice .q { margin-bottom: 18px; }