/* shared/ui/page.css: the page of a hub tool that has no camera behind it
 * (header, panels, buttons, sliders, windows, footer, theme frame).
 * Load after themes.css and select.css. Uses only theme variables.
 *
 * Markup (all optional):
 *   <body data-theme="liquid"><div id="theme-frame" aria-hidden="true"></div>
 *   <div class="page">
 *     <header class="tool-header"><a class="icon-btn home-btn" href="../">(house)</a>
 *       <h1 class="tool-title">…</h1>
 *       <div class="header-actions"><button class="icon-btn">…</button></div></header>
 *     <main>… <section class="panel">…</section> …</main>
 *     <footer class="tool-footer"><a class="support-link">…</a>
 *       <span class="designer-credit">… <a>@drephie</a></span></footer>
 *   </div>
 *   Windows: <div class="centered-modal" role="dialog" aria-modal="true"
 *     style="display:none"><div class="modal-header"><h2>…</h2>
 *     <button class="close-btn">×</button></div>…</div>  (shared/ui/modal.js)
 *   A window holding dropdowns: add class "has-dropdowns" so their lists can
 *     reach past its edge (it then doesn't scroll; keep it short).
 *   Patreon window (page.js createSupportPrompt): <div class="modal-overlay"
 *     role="dialog" aria-modal="true" style="display:none"><div class="centered-modal
 *     support-card"><button class="close-btn support-close">×</button>…
 *     <a class="btn patreon-btn">…</a><button class="btn support-continue"></button></div></div>
 *   Buttons: .btn, .btn.btn-primary (the main action, --color-primary),
 *     .btn.patreon-btn, .icon-btn, .round-btn (a drawn −; add class "plus" for +). Every one is at least
 *     44 × 44 px (Apple's minimum touch target).
 *   .computer-only: hidden on touch screens (no mouse), e.g. keyboard tips.
 *   svg.acc: a drawn sharp or flat (shared/ui/accidentals.js); the tool sizes it.
 *   Rows: .setting-row (label left, control right; wraps when it doesn't fit);
 *     .pair: two .control-group side by side (Theme | Language in Settings).
 *   Sliders: <input type="range" class="range">; set --fill (e.g. "40%") for
 *     the filled part, or --range-bg for a whole custom track, and --thumb
 *     for the thumb color.
 *
 * Layout (Apple's layout guidance, for the web): one spacing scale
 *   (--space-1 … --space-6: 4, 8, 12, 16, 24, 32 px), side margins of 16 px on
 *   phones and 24 px on computers plus the safe areas, labels in sentence case,
 *   and nothing wider than the screen: rows wrap, long labels wrap.
 */

body {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --fx: var(--frame-sides); --fy-top: var(--frame-top); --fy-bottom: var(--frame-bottom);
  --gutter: var(--space-5);
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background-color: var(--bg-page);
  background-image: var(--bg-image);
  background-attachment: fixed;
  color: var(--color-text); font-family: var(--font-main);
  font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  accent-color: var(--color-left); caret-color: var(--color-right);
  scrollbar-color: color-mix(in srgb, var(--color-text) 35%, transparent) transparent;
  transition: background-color 0.4s ease, color 0.4s ease;
}
::selection { background: color-mix(in srgb, var(--color-left) 40%, transparent); color: var(--color-text); }
/* Phones: thinner theme frames and 16 px margins, so nothing eats the screen. */
@media (max-width: 600px) {
  body { --gutter: var(--space-4); --fx: min(var(--frame-sides), 4px); --fy-top: min(var(--frame-top), 4px); --fy-bottom: min(var(--frame-bottom), 4px); }
}
@media not ((hover: hover) and (pointer: fine)) {
  .computer-only { display: none !important; }
}
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; background: var(--crt-scanline); }

#theme-frame { position: fixed; inset: 0; pointer-events: none; z-index: 55; box-sizing: border-box; }
body[data-theme="y2k"] #theme-frame { border: 1px solid color-mix(in srgb, var(--color-left) 60%, transparent); border-radius: var(--frame-radius); box-shadow: inset 0 0 40px color-mix(in srgb, var(--color-left) 16%, transparent); }
body[data-theme="pink"] #theme-frame { border: var(--fy-top) solid var(--border-panel); border-radius: calc(var(--frame-radius) + 8px); }
body[data-theme="retro"] #theme-frame { border: var(--fy-top) solid rgb(14, 16, 14); border-radius: calc(var(--frame-radius) * 2); box-shadow: inset 0 0 40px color-mix(in srgb, var(--color-left) 30%, transparent); }

.page {
  box-sizing: border-box; min-height: 100vh; min-height: 100dvh;
  max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4);
  padding: calc(var(--fy-top) + var(--space-4) + env(safe-area-inset-top)) calc(var(--fx) + var(--gutter) + max(env(safe-area-inset-right), var(--corner-x, 0px)))
           calc(var(--fy-bottom) + var(--space-4) + env(safe-area-inset-bottom)) calc(var(--fx) + var(--gutter) + max(env(safe-area-inset-left), var(--corner-x, 0px)));
}
/* A touch screen on its side: its rounded corners sit at the left and right
   ends, where some phones report no safe area: keep a little extra room. */
@media (pointer: coarse) and (orientation: landscape) { body { --corner-x: 14px; } }
.page > main { flex: 1; min-width: 0; }

.tool-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tool-title {
  margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.1; font-weight: var(--title-weight);
  text-transform: var(--title-transform); letter-spacing: var(--title-spacing); color: var(--color-title);
  text-wrap: balance; overflow-wrap: break-word;
}
.home-btn { flex: none; text-decoration: none; }
.home-btn + .tool-title { flex: 1; min-width: 0; }
.header-actions { display: flex; gap: var(--space-2); flex: none; }

.panel {
  box-sizing: border-box; min-width: 0; background: var(--color-panel);
  border: var(--border-width) solid var(--border-panel); border-radius: var(--radius-panel);
  padding: var(--space-5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

.btn, .icon-btn, .round-btn {
  font-family: var(--font-main); font-weight: 700; color: var(--color-btn-text);
  background: var(--color-panel); border: var(--border-width) solid var(--border-panel); cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out, transform 0.08s ease-out;
}
.btn { min-height: 48px; padding: 10px 20px; border-radius: var(--radius-control); font-size: 17px; line-height: 1.15; letter-spacing: 0; overflow-wrap: break-word; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); }
/* 19 px bold counts as large text, so white on the Patreon coral (3.4:1) passes. */
.btn.patreon-btn { display: flex; align-items: center; justify-content: center; font-size: 19px; text-decoration: none; background: var(--color-patreon); border-color: var(--color-patreon); color: var(--color-patreon-text); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--color-patreon) 60%, transparent); }
.btn:disabled { opacity: 0.55; cursor: default; }
.icon-btn { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-round); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 22px; height: 22px; }
.round-btn { width: 48px; height: 48px; flex: none; padding: 0; border-radius: var(--radius-round); font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.btn:active, .icon-btn:active, .round-btn:active { transform: scale(0.96); }
@media (hover: hover) {
  .btn:hover, .icon-btn:hover, .round-btn:hover { background: var(--color-hover); color: var(--color-hover-text); }
  .btn-primary:hover { background: color-mix(in srgb, var(--color-primary) 86%, var(--color-text)); border-color: transparent; color: var(--color-primary-text); }
  .btn.patreon-btn:hover { background: var(--color-patreon); color: var(--color-patreon-text); transform: scale(1.03); }
  .btn:disabled:hover { background: var(--color-panel); color: var(--color-btn-text); }
}
:is(.btn, .icon-btn, .round-btn, .close-btn, a):focus-visible { outline: 2px solid var(--color-right); outline-offset: 3px; }

.setting-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); min-height: 52px; }
.setting-row + .setting-row { border-top: 1px solid color-mix(in srgb, var(--border-panel) 50%, transparent); }
.setting-row > label, .setting-label { font-size: 15px; font-weight: 600; line-height: 1.25; min-width: 0; }
.setting-row .custom-select { min-width: 160px; max-width: 100%; }

.range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; border-radius: 3px; cursor: pointer;
  background: var(--range-bg, linear-gradient(90deg, var(--color-left) 0 var(--fill, 0%), color-mix(in srgb, var(--border-panel) 70%, transparent) var(--fill, 0%)));
}
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--thumb, var(--color-text)); border: 3px solid var(--bg-page); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--thumb, var(--color-text)); border: 3px solid var(--bg-page); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.range::-moz-range-track { background: transparent; }
.range:focus-visible { outline: 2px solid var(--color-right); outline-offset: 6px; }

.centered-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 70;
  box-sizing: border-box; width: min(420px, calc(100vw - 32px)); max-height: 85vh; max-height: 85dvh; overflow-y: auto;
  flex-direction: column; gap: var(--space-4); padding: var(--space-5);
  background: var(--bg-select); color: var(--color-text); border: var(--border-width) solid var(--border-panel); border-radius: var(--radius-panel);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55), 0 0 0 100vmax rgba(0, 0, 0, 0.45);
  scrollbar-width: thin; scrollbar-color: var(--color-left) transparent;
}
.centered-modal.has-dropdowns { overflow: visible; }
.modal-overlay { position: fixed; inset: 0; z-index: 80; box-sizing: border-box; padding: var(--space-4); align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.modal-overlay > .centered-modal { position: relative; top: auto; left: auto; transform: none; display: flex; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55); }
.support-card { text-align: center; gap: var(--space-4); padding-top: var(--space-6); }
.support-card h2 { margin: 0; font-family: var(--font-display); color: var(--color-title); font-size: 24px; line-height: 1.15; font-weight: var(--title-weight); text-transform: var(--title-transform); letter-spacing: var(--title-spacing); text-wrap: balance; }
.support-card p { margin: 0; font-size: 16px; line-height: 1.5; }
.support-close { position: absolute; top: 6px; right: 6px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--border-panel) 60%, transparent); padding-bottom: var(--space-3); }
.modal-header h2 { margin: 0; min-width: 0; font-family: var(--font-display); color: var(--color-title); font-size: 21px; line-height: 1.15; font-weight: var(--title-weight); text-transform: var(--title-transform); letter-spacing: var(--title-spacing); text-wrap: balance; }
/* In a window that scrolls, the header (and its ×) stays in view. */
.centered-modal:not(.has-dropdowns) > .modal-header { position: sticky; top: calc(-1 * var(--space-5)); z-index: 2; margin-top: calc(-1 * var(--space-5)); padding-top: var(--space-5); background: var(--bg-select); }
.close-btn { flex: none; background: transparent; border: none; border-radius: var(--radius-round); color: var(--color-text); font-size: 28px; font-weight: 400; line-height: 1; cursor: pointer; padding: 4px 8px; min-width: 44px; min-height: 44px; }
@media (hover: hover) { .close-btn:hover { background: var(--color-hover); } }
/* Drawn icons instead of text glyphs: × on close buttons, − on round buttons and
   + on round buttons with class "plus". Their names come from aria-label. */
.close-btn:not(.support-close), .round-btn { position: relative; }
.close-btn, .round-btn { font-size: 0 !important; }
.close-btn::before, .close-btn::after, .round-btn::before, .round-btn.plus::after {
  content: ''; position: absolute; left: 50%; top: 50%; height: 2px; border-radius: 1px; background: currentColor;
}
.close-btn::before, .close-btn::after { width: 20px; margin: -1px 0 0 -10px; transform: rotate(45deg); }
.close-btn::after { transform: rotate(-45deg); }
.round-btn::before, .round-btn.plus::after { width: 16px; margin: -1px 0 0 -8px; }
.round-btn.plus::after { transform: rotate(90deg); }

.centered-modal .control-group { display: flex; flex-direction: column; gap: var(--space-2); }
.centered-modal .control-group > label { font-size: 15px; font-weight: 600; }
/* Two short choices side by side (Theme | Language), so Settings windows fit a phone. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: end; }
.pair .control-group { min-width: 0; }
.about-text { font-size: 16px; line-height: 1.55; margin: 0; }
.about-text a, .about-small a { color: var(--color-right); font-weight: 700; text-underline-offset: 3px; }
.about-small { font-size: 14px; line-height: 1.5; margin: 0; color: var(--color-text-inactive); }

.tool-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--color-text-inactive); }
/* The links' touch area is 44 px tall (an invisible layer), without making the footer taller. */
.tool-footer a { position: relative; text-decoration: none; font-weight: 700; text-underline-offset: 3px; }
.tool-footer a::after { content: ''; position: absolute; inset: -18px -4px -10px; }
.tool-footer a:hover { text-decoration: underline; }
.support-link { color: var(--color-right); }
.designer-credit a { color: var(--color-right); }

/* Theme touches: depth and lettering that belong to each world. */
body[data-theme="y2k"] :is(.tool-title, .modal-header h2) { text-shadow: 0 0 14px color-mix(in srgb, var(--color-left) 55%, transparent); }
body[data-theme="y2k"] .panel { box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--color-left) 55%, transparent); }
body[data-theme="retro"] :is(.tool-title, .modal-header h2) { text-shadow: 0 0 var(--shadow-blur) color-mix(in srgb, var(--color-left) 60%, transparent); }
body[data-theme="pink"] .panel { box-shadow: 0 6px 0 -2px var(--border-panel); }
body[data-theme="pink"] :is(.btn:not(.btn-primary):not(.patreon-btn), .icon-btn, .round-btn) { background: var(--bg-select); }
body[data-theme="bw"] .tool-title { font-stretch: 115%; }
body[data-theme="bw"] .panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-theme="rouge"] .panel { box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3), 0 14px 30px -18px rgba(0, 0, 0, 0.7); }
body[data-theme="snap"] .panel { border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgba(75, 48, 0, 0.08), 0 10px 22px -12px rgba(75, 48, 0, 0.5); }

/* Phones: everything on one screen. */
@media (max-width: 600px) {
  .page { gap: var(--space-3); padding-top: calc(var(--fy-top) + var(--space-3) + env(safe-area-inset-top)); padding-bottom: calc(var(--fy-bottom) + var(--space-3) + env(safe-area-inset-bottom)); }
  .tool-title { font-size: 21px; }
  .panel { padding: var(--space-4); }
  .setting-row { min-height: 44px; }
  .btn { min-height: 46px; font-size: 16px; }
  .tool-footer { font-size: 12px; }
}

/* A problem the person must act on (the microphone is blocked, it stopped): a
   tinted box with a drawn warning mark, not plain text like a hint. The tools
   put .mic-msg on the element showing it (Pitch Training: .status.msg). */
:is(.mic-msg, .status.msg .status-main) {
  position: relative; box-sizing: border-box; display: block; max-width: min(30em, 100%); margin-inline: auto;
  padding: 10px 14px 10px 42px; border-radius: 12px; text-align: left; line-height: 1.4; color: var(--color-text);
  background: color-mix(in srgb, var(--color-bad) 14%, var(--bg-page)); border: 1px solid color-mix(in srgb, var(--color-bad) 55%, transparent);
}
:is(.mic-msg, .status.msg .status-main)::before {
  content: ''; position: absolute; left: 13px; top: 11px; width: 20px; height: 20px; background: var(--color-bad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 5h2.4l-.4 7h-1.6zM12 15.6a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 5h2.4l-.4 7h-1.6zM12 15.6a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-theme="bw"] :is(.mic-msg, .status.msg .status-main) { border-radius: 0; }

/* Reduce motion (a phone or computer setting): no pressing bounce. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .icon-btn:active, .round-btn:active { transform: none; }
}

/* A drawn sharp or flat (shared/ui/accidentals.js): strokes in the text colour. */
svg.acc { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; overflow: visible; }