/* The Synth Lab (a-011, ADR-0088). Phone first at 390px; on an iPad turned
   sideways next to the MiniFreak, the words go left and the toy and the map
   stay on the right. Taps are 56px on Alice's site (ADR-0005). */

.room-top .round { margin-left: auto; }
.round {
  display: grid; place-items: center; flex: 0 0 auto; width: var(--tap); height: var(--tap); padding: 0; border: 0;
  border-radius: var(--radius-full); background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  font: 700 var(--step-1)/1 var(--font-ui); cursor: pointer; touch-action: manipulation;
}
.round[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* buttons that stay pressed: levels, tabs, choices */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  min-height: var(--tap); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line);
  font: 700 var(--step-0)/1.1 var(--font-ui); cursor: pointer; touch-action: manipulation;
}
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* the bar on top: book, recipes or experiments; reading a chapter, the levels under it (ADR-0096) */
.labbar { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.tabs, .levels { display: grid; gap: var(--space-2); }
.tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.levels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tab, .level {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 64px; padding: var(--space-2);
  border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line);
  font: 700 var(--step--1)/1.15 var(--font-ui); text-align: center; cursor: pointer; touch-action: manipulation;
}
.tab { min-height: 72px; font-size: var(--step--1); }
.tab > span:last-child { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.tab .ico { font-size: 1.5rem; line-height: 1.1; }
.level .ico { font-size: 1.05rem; line-height: 1.2; letter-spacing: -1px; }
.tab[aria-pressed="true"], .level[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.tab[aria-pressed="true"] { box-shadow: 0 3px 0 var(--accent-2); }
@media (min-width: 40rem) {
  .tab { display: flex; justify-content: center; gap: var(--space-2); min-height: 60px; font-size: var(--step-0); }
  .labbar { grid-template-columns: minmax(0, 1fr); }
}

/* which MiniFreak the maps draw: white (ours) or black — last on the page, small (ADR-0090, ADR-0096) */
.mfcolour {
  margin-block: var(--space-8) var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 2px var(--line); display: grid; gap: var(--space-2);
}
.mfcolour h2 { margin: 0; font-size: var(--step-0); }
.mfcolour-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.mfcolour .chip { min-height: 48px; padding: 0 var(--space-3); }
.mfcolour.following .seg .chip { opacity: .55; }
label.follow { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; cursor: pointer; font-weight: 600; color: var(--ink-soft); }
label.follow input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }

/* a shelf: every chapter, the recipes, the experiments — the finder, then groups of cards */
.shelf h2 { margin-top: 0; }
.shelf .intro { max-width: 62ch; }
.shelf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.shelf-head h2 { margin: 0; }
.finder {
  display: grid; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-2);
  border-radius: var(--radius-lg); background: var(--surface-2);
}
.starseg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.starseg .chip { padding: 0 var(--space-2); min-height: 48px; }
.starseg .chip .stars { color: inherit; letter-spacing: 0; }
.finder-row { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.search-box { position: relative; display: block; }
.search-box .lens { position: absolute; left: 14px; top: 50%; translate: 0 -50%; pointer-events: none; font-size: 1rem; }
.search {
  width: 100%; min-height: 48px; padding: 0 var(--space-3) 0 42px; border: 0; border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line);
}
.search:focus-visible, .sort:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sortbox { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.sortbox span { flex: 0 0 auto; color: var(--ink-soft); font-size: var(--step--1); }
.sort {
  flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); font-weight: 700;
}
.toggles .chip { min-height: 48px; padding: 0 var(--space-3); font-size: var(--step--1); }
@media (min-width: 40rem) {
  .finder { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: center; }
  .finder-row { grid-template-columns: minmax(0, 1fr) auto; }
  .toggles { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .finder { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) auto; }
  .toggles { grid-column: auto; flex-wrap: nowrap; }
}
.count { margin: 0 0 var(--space-2); color: var(--ink-soft); font-size: var(--step--1); font-weight: 600; }
.none { padding: var(--space-6) var(--space-4); text-align: center; border-radius: var(--radius-lg); background: var(--surface-2); }
.group + .group { margin-top: var(--space-6); }
.group-h { display: flex; align-items: baseline; gap: .3em; margin: 0 0 var(--space-3); font-size: var(--step-1); }
.group-h small { color: var(--ink-soft); font-size: var(--step--1); font-weight: 600; }
.ccards { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.ccard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  min-height: var(--tap); padding: var(--space-3); border: 0; border-radius: var(--radius); text-align: left;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font: inherit; cursor: pointer; touch-action: manipulation;
}
.ccard .ico { font-size: 1.6rem; }
.ccard .stars { font-size: var(--step--1); }
.tick { color: var(--accent-2); }
.fav {
  display: grid; place-items: center; width: 48px; height: 48px; margin: -6px -8px -6px 0; padding: 0; border: 0;
  border-radius: var(--radius-full); background: transparent; color: var(--ink-soft); font: 400 1.6rem/1 var(--font-ui);
  cursor: pointer; touch-action: manipulation;
}
.fav[aria-pressed="true"] { color: #e0245e; }
.rside { display: flex; align-items: center; gap: var(--space-1); }

/* reading: the chapter list and "by topic" side by side */
.chapter-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); }
.chapter-top .contents { flex: 1 1 14rem; margin: 0; }
.chapter-top > .chip { min-height: var(--tap); }
.welcome-more { margin-top: var(--space-4); }

/* the first time */
.welcome h2 { margin-top: var(--space-2); }
.welcome-levels { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.welcome-level {
  display: grid; gap: var(--space-2); justify-items: start; text-align: left; border: 0; cursor: pointer;
  font: inherit; color: inherit; min-height: var(--tap); rotate: 0deg !important;
}
.welcome-level strong { font-size: var(--step-1); }
.welcome-level .big-ico { font-size: 2.6rem; line-height: 1; }

/* a chapter */
.contents { margin-bottom: var(--space-4); }
.contents[open] { flex-basis: 100%; }
.contents summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.contents ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.toc {
  width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-align: left; font: 600 var(--step-0)/1.25 var(--font-ui); cursor: pointer;
}
.toc[aria-current="page"] { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--accent); }
.toc .tick { color: var(--accent-2); }
.kicker { margin: 0; color: var(--ink-soft); font-weight: 600; }
.chapter-head h2 { margin-top: var(--space-1); }
.chapter-body { display: grid; gap: var(--space-4); }
.words > * + * { margin-top: var(--space-4); }
.doing > :first-child { margin-top: 0; }
.words p, .words li { max-width: 62ch; }
.words b, .recipe-body b { color: var(--accent); }
[data-theme="dark"] .words b, [data-theme="dark"] .recipe-body b { color: var(--accent-3); }
.fact, .try, .steps, .toybox, .mapbox {
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow);
}
.fact { background: var(--surface-2); }
.try { box-shadow: inset 0 0 0 3px var(--accent-3); background: transparent; }
.fact h3, .try h3, .steps h3, .toybox h3, .mapbox h3, .words h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }
.fact p:last-child, .try p:last-child { margin-bottom: 0; }
.steps-list { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-3); }
.engines { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.pager { display: flex; justify-content: space-between; gap: var(--space-2); margin-block: var(--space-6); }
.pager .btn:disabled { opacity: .35; cursor: default; }
.end { margin-bottom: var(--space-6); rotate: 0deg !important; }

/* phone: the story, then the toy and the map, then the steps. Sideways iPad: words left, toy right. */
.chapter-body { grid-template-areas: "story" "side" "doing"; }
.story { grid-area: story; } .side { grid-area: side; } .doing { grid-area: doing; }
@media (min-width: 60rem) {
  .chapter-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "story side" "doing side"; align-items: start; gap: var(--space-4) var(--space-6); }
}
.side { display: grid; gap: var(--space-4); }

/* the toy */
.toy { display: grid; gap: var(--space-3); }
.screen { display: grid; gap: var(--space-2); }
.screen .seg { justify-content: center; }
.scope, .adsr, .air { width: 100%; border-radius: var(--radius); background: var(--surface-2); }
.scope { height: 150px; }
.adsr { height: 110px; }
.air { height: 190px; }
.ctls { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.ctl { display: grid; gap: 2px; }
.ctl label { display: flex; justify-content: space-between; gap: var(--space-2); font-weight: 700; }
.ctl .val { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 600; }
.ctl-name { font-weight: 700; }
.ctl--choice .seg { gap: 6px; }
.ctl--choice .chip { min-height: 48px; padding: 0 var(--space-3); font-size: var(--step--1); }
.ctl--choice .chip .ico { font-size: 1.1rem; }
.ctl input[type="range"] { width: 100%; height: var(--tap); margin: 0; accent-color: var(--accent); touch-action: pan-y; }
.kbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.octs { display: flex; align-items: center; gap: var(--space-2); }
.oct { min-width: 4.2em; text-align: center; font-weight: 700; }
.readout { margin: 0; text-align: center; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }

.keys {
  position: relative; height: 170px; border-radius: var(--radius) var(--radius) 6px 6px; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; background: #2a2420;
}
.key { position: absolute; top: 0; cursor: pointer; }
.key.white {
  bottom: 0; border-radius: 0 0 8px 8px; background: #fffdf8; box-shadow: inset -1px 0 0 #d9cbbb, 0 1px 2px rgb(0 0 0 / .2);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; color: #6d5b4f; font: 700 .8rem/1 var(--font-ui);
}
.key.black { height: 60%; z-index: 1; border-radius: 0 0 6px 6px; background: #2b2b2b; box-shadow: inset 0 -5px 0 #111; }
.key.down { background: var(--accent) !important; color: #fff; }

/* eight harmonics */
.harm { display: grid; gap: var(--space-2); }
.harm-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
.harm-col { display: grid; gap: 4px; justify-items: center; font: 700 .8rem/1 var(--font-ui); color: var(--ink-soft); cursor: ns-resize; }
.harm-track { position: relative; width: 100%; height: 130px; border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.harm-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent-2); border-radius: 10px 10px 0 0; }
.vowels .chip { min-width: 3.2rem; }

/* the MiniFreak's map (ADR-0090): the synth's own colours whatever the page's theme —
   the white MiniFreak (ours) unless the switch on top says black (data-mf on <html>) */
.mapbox figure { margin: 0 0 var(--space-3); }
.mapbox figcaption { color: var(--ink-soft); font-size: var(--step--1); text-align: center; }
.map-small { max-width: 22rem; margin-inline: auto !important; }
.mf-map {
  width: 100%; height: auto; border-radius: 10px;
  --mf-body: #f4f3f0; --mf-edge: #d4d1cb; --mf-ink: #2c2c31; --mf-soft: #66666e; --mf-blue: #2f80c4; --mf-rule: #54545c;
  --mf-knob: #1f1f23; --mf-knob-edge: #000; --mf-tick: #fff; --mf-pale: #f7f7f7; --mf-pale-edge: #a9a9ae;
  --mf-btn: #cfcfd2; --mf-btn-edge: #9b9ba2; --mf-plate: #fbfaf8; --mf-plate-edge: #d3cfc8; --mf-zig: #d2875a;
  --mf-display: #26262c; --mf-keybed: #e3e1dc; --mf-key: #fff; --mf-key-edge: #cbc8c2; --mf-key-black: #1c1c1f;
  --mf-hi: #d6266a; --mf-hi-fill: rgb(214 38 106 / .1);
}
[data-mf="black"] .mf-map {
  --mf-body: #1c1c21; --mf-edge: #34343c; --mf-ink: #d6d6de; --mf-soft: #a2a2ad; --mf-blue: #5db0ef; --mf-rule: #8c8c98;
  --mf-knob: #3a3a43; --mf-knob-edge: #5a5a65; --mf-tick: #fff; --mf-pale: #e9e9ec; --mf-pale-edge: #8e8e96;
  --mf-btn: #44444d; --mf-btn-edge: #64646e; --mf-plate: #25252b; --mf-plate-edge: #3d3d46; --mf-zig: #c76a38;
  --mf-display: #0e0e11; --mf-keybed: #111114; --mf-key: #f4f1ea; --mf-key-edge: #bdb8ae; --mf-key-black: #141417;
  --mf-hi: #f4b942; --mf-hi-fill: rgb(244 185 66 / .14);
}
.mf-map text { font-family: var(--font-ui); }
.mf-body { fill: var(--mf-body); stroke: var(--mf-edge); stroke-width: 2; }
.mf-display { fill: var(--mf-display); }
.mf-keybed { fill: var(--mf-keybed); }
.mf-sec.mf-lit { fill: var(--mf-hi-fill); stroke: var(--mf-hi); stroke-width: 2.5; }
.mf-title { fill: var(--mf-ink); font-size: 8px; font-weight: 800; letter-spacing: .03em; }
.mf-rule { stroke: var(--mf-rule); stroke-width: .8; }
.mf-label { fill: var(--mf-ink); font-size: 6.2px; font-weight: 600; }
.mf-tiny { fill: var(--mf-soft); font-size: 4.4px; font-weight: 600; }
.mf-cell { fill: var(--mf-ink); font-size: 5.6px; font-weight: 700; }
.mf-shiftname, .mf-tiny.mf-shiftname { fill: var(--mf-blue); }
.mf-on-dark { fill: #ececf1; }
.mf-on-dark .mf-shiftname, .mf-on-dark.mf-shiftname { fill: #6bb8f2; }
.mf-label.mf-lit, .mf-cell.mf-lit, .mf-tiny.mf-lit, .mf-title.mf-lit { fill: var(--mf-hi); font-weight: 800; }
.mf-label.mf-on-dark.mf-lit { fill: #ffd36e; }
.mf-grid { stroke: var(--mf-soft); stroke-width: .5; fill: none; }
.mf-dot { fill: var(--mf-ink); }
.mf-dot-on { fill: var(--mf-blue); }
.mf-knob, .mf-enc { fill: var(--mf-knob); stroke: var(--mf-knob-edge); stroke-width: 1; }
.mf-white { fill: var(--mf-key); stroke: var(--mf-key-edge); stroke-width: .8; }
circle.mf-white { fill: var(--mf-pale); stroke: var(--mf-pale-edge); stroke-width: 1.2; }
.mf-encring { fill: none; stroke: var(--mf-soft); stroke-width: .7; }
.mf-encring.mf-on-dark { stroke: #8a8a94; fill: none; }
.mf-orange { fill: #f26b1d; stroke: #c9500c; stroke-width: 1; }
.mf-btn { fill: var(--mf-btn); stroke: var(--mf-btn-edge); stroke-width: 1; }
.mf-btn-dark { fill: #6a6a73; stroke: #8a8a94; }
.mf-shiftring { fill: none; stroke: #58b4f0; stroke-width: 2; }
.mf-plate, .mf-strip { fill: var(--mf-plate); stroke: var(--mf-plate-edge); stroke-width: 1; }
.mf-zigzag { fill: none; stroke: var(--mf-zig); stroke-width: .9; }
.mf-led { fill: var(--mf-btn-edge); }
.mf-led-on { fill: #4db2ff; }
.mf-screen { fill: #000; stroke: #3c3c44; stroke-width: 1; }
.mf-screentext { fill: #9fd8ff; font-size: 7px; font-weight: 800; }
.mf-in { stroke: var(--mf-hi); stroke-width: 1.6; }
.mf-hit { stroke: var(--mf-hi); stroke-width: 2.4; }
.mf-tick { stroke: var(--mf-tick); stroke-width: 2; stroke-linecap: round; }
.mf-tick-dark { stroke: #3a3a40; }
.mf-ring { fill: none; stroke: var(--mf-hi); stroke-width: 2.5; animation: mf-pulse 1.4s ease-in-out infinite; }
@keyframes mf-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .mf-ring { animation: none; } }
.mf-black { fill: var(--mf-key-black); }
.mf-felt { fill: #e9742b; }
.mf-logo { fill: var(--mf-ink); font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.mf-logo-thin { font-weight: 300; }
.mf-brand { fill: var(--mf-ink); font-size: 9px; font-weight: 800; letter-spacing: .08em; }

/* recipes */
.recipes > p { max-width: 62ch; }
.recipe { padding: 0; margin-bottom: var(--space-3); rotate: 0deg !important; overflow: hidden; }
.cards { display: grid; gap: var(--space-3); }
.cards .recipe { margin-bottom: 0; }
.recipe summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  min-height: var(--tap); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none;
}
.recipe summary::-webkit-details-marker { display: none; }
.recipe summary .ico { font-size: 1.8rem; }
.rname { display: grid; }
.rname small { color: var(--ink-soft); }
.stars { color: var(--accent-3); letter-spacing: 1px; white-space: nowrap; }
.recipe-body { display: grid; gap: var(--space-4); padding: 0 var(--space-4) var(--space-4); }
.recipe-body .toybox { box-shadow: inset 0 0 0 2px var(--line); }
.recipe-play, .recipe-words { display: grid; gap: var(--space-4); align-content: start; }
.recipe-what { margin: 0; max-width: 62ch; }
.recipe-body { grid-template-areas: "what" "play" "words"; }
.recipe-what { grid-area: what; } .recipe-play { grid-area: play; } .recipe-words { grid-area: words; }
@media (min-width: 60rem) {
  .recipe-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "what play" "words play"; align-items: start; gap: var(--space-4) var(--space-6); }
}
.presets .chip { font-size: var(--step--1); }
.hint { color: var(--ink-soft); font-size: var(--step--1); }

/* Big screen: only the book */
body.big { overflow: auto; }
body.big .topbar, body.big .wrap > :not(main):not(.room-top), body.big .room-top > :not(#big) { display: none; }
body.big .room-top { position: fixed; top: var(--space-2); right: var(--space-2); z-index: 5; padding: 0; }
body.big .wrap { width: min(100% - 2 * var(--space-4), 1280px); }
body.big #lab { padding-top: var(--space-4); }
body.big .labbar { padding-right: calc(var(--tap) + var(--space-2)); }
body.big .mfcolour { display: none; }