/* applemusic.s33d v3.1: iPod-classic layout at every size: square-cornered screen on top, ROUND click wheel below,
   the whole device column scaled to fit and centred.
   s33d green on pure black, DejaVu Sans Mono Bold (bundled), square everything.
   Embedded (default) fills the host [MODULE] rectangle with no frame; ?standalone=1 adds the full-window frame. */
@font-face { font-family: 'DejaVu Sans Mono'; font-weight: 700; font-style: normal;
  src: url('../fonts/DejaVuSansMono-Bold.woff2') format('woff2'); font-display: swap; }
:root { --g: #0AB958; --g2: rgba(10,185,88,.6); --g3: rgba(10,185,88,.18); --bg: #000; --b: 2px; --dw: min(100vw, 64vh, 560px); --wheel: min(calc(var(--dw) * .62), 38vh); }
* { box-sizing: border-box; border-radius: 0 !important; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--g);
  font-family: 'DejaVu Sans Mono', monospace; font-weight: 700; font-size: 14px; -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
.hidden { display: none !important; }
.dim { color: var(--g2); }

.frame { position: absolute; inset: 0; display: flex; justify-content: center; }
html.standalone .frame { position: fixed; border: var(--b) solid var(--g); }
/* portrait device column: same layout at every size, centred */
.device { width: var(--dw); height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 10px 10px 0; }
html.standalone .device { padding-top: 12px; }

/* ---- screen ---- */
.screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; border: var(--b) solid var(--g); }
.titlebar { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; min-height: 48px;
  border-bottom: var(--b) solid var(--g); }
.back { min-width: 44px; min-height: 44px; width: 52px; height: 100%; background: none; border: 0; border-right: 1px solid var(--g3);
  padding: 0; cursor: pointer; font-size: 15px; }
.back:hover, .back:focus-visible { background: var(--g); color: var(--bg); outline: none; }
.back.off { visibility: hidden; }
.title { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; font-size: 15px; }
.pstate { text-align: center; color: var(--g2); font-size: 12px; }
.view { min-height: 0; overflow-y: auto; scrollbar-color: var(--g) var(--bg); position: relative; }
.statusline { padding: 4px 10px; font-size: 11px; color: var(--g2); border-top: 1px dashed var(--g3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* list rows (min 44px tap targets) */
.row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 46px;
  padding: 4px 12px 4px 8px; border-bottom: 1px solid var(--g3); cursor: pointer; user-select: none; }
.row.art-row { grid-template-columns: 14px 38px minmax(0, 1fr) auto; }
.row img { width: 38px; height: 38px; display: block; border: 1px solid var(--g2); image-rendering: pixelated; object-fit: cover; background: var(--bg); }
.row .ind { color: var(--g); font-size: 11px; }
.row .lbl { min-width: 0; }
.row .lbl .t, .row .lbl .s { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .lbl .s { color: var(--g2); font-size: 12px; }
.row .r { color: var(--g2); font-size: 12px; }
.row.sel { background: var(--g); color: var(--bg); }
.row.sel .lbl .s, .row.sel .r, .row.sel .ind { color: rgba(0,0,0,.7); }
.row.sel img { border-color: var(--bg); }
.row.hdr { min-height: 28px; cursor: default; color: var(--g2); font-size: 12px; border-bottom: 1px dashed var(--g3); padding-top: 10px; }
.row.sep { border-top: 1px dashed var(--g2); }
.empty { padding: 24px 12px; color: var(--g2); white-space: pre-wrap; }
.searchbar { display: flex; gap: 8px; padding: 8px; border-bottom: 1px dashed var(--g2); position: sticky; top: 0; background: var(--bg); z-index: 1; }
.searchbar input { flex: 1; min-width: 0; min-height: 40px; background: var(--bg); border: var(--b) solid var(--g); padding: 6px 9px; outline: none; caret-color: var(--g); }
.searchbar input::placeholder { color: var(--g2); }
.btn { background: var(--bg); border: var(--b) solid var(--g); padding: 6px 10px; min-height: 40px; cursor: pointer; white-space: nowrap; }
.btn:hover, .btn:focus-visible { background: var(--g); color: var(--bg); outline: none; }

/* now playing */
.np { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 12px 14px; padding: 14px 12px; align-items: center; }
.np .art { width: 100%; aspect-ratio: 1; border: 1px solid var(--g2); image-rendering: pixelated; display: block; object-fit: cover; background: var(--bg); }
.np .meta { min-width: 0; }
.np .meta div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; }
.np .meta .t { font-size: 16px; }
.np .meta .n { color: var(--g2); font-size: 12px; margin-top: 6px; }
.np .full { grid-column: 1 / -1; }
.np .line { display: flex; align-items: center; gap: 8px; }
.np .time { color: var(--g2); font-size: 11px; min-width: 38px; text-align: center; }
.np .lab { color: var(--g2); font-size: 11px; min-width: 38px; text-align: center; }
.np .lab.on { color: var(--bg); background: var(--g); }
.np canvas { width: 100%; height: 64px; display: block; border-top: 1px dashed var(--g3); border-bottom: 1px dashed var(--g3); }
.np .hint { color: var(--g2); font-size: 11px; text-align: center; }

.range { -webkit-appearance: none; appearance: none; flex: 1; height: 28px; background: transparent; margin: 0; cursor: pointer; }
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track { height: 6px; border: 1px solid var(--g2); background: linear-gradient(var(--g), var(--g)) 0 / var(--p, 0%) 100% no-repeat, var(--bg); }
.range::-moz-range-track { height: 6px; border: 1px solid var(--g2); background: var(--bg); }
.range::-moz-range-progress { height: 6px; background: var(--g); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 16px; margin-top: -6px; background: var(--g); border: 0; }
.range::-moz-range-thumb { width: 12px; height: 16px; background: var(--g); border: 0; }

/* ---- round click wheel (only the screen keeps square corners) ---- */
.wheelwrap { display: grid; place-items: center; padding: 16px 0 18px; }
.wheel { position: relative; width: var(--wheel); height: var(--wheel); border: var(--b) solid var(--g); border-radius: 50% !important;
  touch-action: none; user-select: none; }
.ring { position: absolute; inset: 31%; border: 1px solid var(--g3); border-radius: 50% !important; pointer-events: none; }
.wk { position: absolute; background: none; border: 0; cursor: pointer; display: grid; place-items: center; min-width: 44px; min-height: 44px;
  font-size: clamp(11px, calc(var(--wheel) * .058), 15px); letter-spacing: .5px; isolation: isolate; }
.wk:active, .wk:focus-visible { outline: none; color: var(--bg); background: transparent; text-shadow: none; }
.wk:active::before, .wk:focus-visible::before { content: ''; position: absolute; inset: 22% 10%; background: var(--g); z-index: -1; border-radius: 0 !important; }
.k-menu { top: 2%; left: 32%; right: 32%; height: 24%; }
.k-play { bottom: 2%; left: 32%; right: 32%; height: 24%; }
.k-prev { left: 2%; top: 32%; bottom: 32%; width: 24%; }
.k-next { right: 2%; top: 32%; bottom: 32%; width: 24%; }
.k-sel { left: 34%; top: 34%; width: 32%; height: 32%; border: var(--b) solid var(--g); border-radius: 50% !important; }
.k-sel:hover, .k-sel:active, .k-sel:focus-visible { background: var(--g); }

/* small polish for roomy columns (layout itself never changes) */
@media (min-width: 520px) and (min-height: 760px) {
  .titlebar { min-height: 50px; }
  .np canvas { height: 80px; }
}