/* USBSID-Pico Web Config - Commodore 64 Retro Style */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

:root {
  --c64-bg:        #4040b4;
  --c64-border:    #7b71e7;
  --c64-text:      #9090f0;
  --c64-white:     #ffffff;
  --c64-cyan:      #70daff;
  --c64-yellow:    #f0f060;
  --c64-red:       #ff6060;
  --c64-green:     #60e060;
  --c64-orange:    #e08830;
  --c64-gray:      #6060a0;
  --c64-darkgray:  #303090;
  --c64-screen:    #3030a0;
  --c64-inset:     #282878;
  --c64-btn-bg:    #7070d0;
  --c64-btn-hover: #9090f0;
  --c64-btn-active:#b0b0ff;
  --c64-select-bg: #3030a0;
  --c64-blogtext:  #9494f4;
  --c64-bloggray:  #6969a9;
  --font-main:     'VT323', 'Share Tech Mono', monospace;
  --font-size:     18px;
  /* --c64-blogfontsize: 15px; */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: #1a1a5a;
  min-height: 100%;
}

body {
  font-family: var(--font-main);
  font-size: var(--font-size);
  background: var(--c64-bg);
  color: var(--c64-text);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  letter-spacing: 0.04em;
}

/* Scanlines overlay - 2px line on mobile, 1px on desktop */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.12) 2px,
    rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
  z-index: 9999;
}
@media (min-width: 768px) {
  body::before {
    background: repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(0,0,0,0.08) 3px,
      rgba(0,0,0,0.08) 4px
    );
  }
}

/* Outer frame mimics C64 bezel */
#c64-frame {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 12px 20px;
  border: 4px solid var(--c64-border);
  border-radius: 6px;
  background: var(--c64-bg);
  box-shadow: 0 0 40px rgba(0,0,0,0.6), inset 0 0 12px rgba(0,0,0,0.2);
}

/* Header */
#c64-header {
  text-align: center;
  padding: 10px 0 6px;
  border-bottom: 2px solid var(--c64-border);
  margin-bottom: 8px;
}
#c64-header h1 {
  font-family: var(--font-main);
  font-size: 2.4rem;
  color: var(--c64-white);
  /* text-transform: uppercase; */
  letter-spacing: 0.12em;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}
#c64-header .subtitle {
  font-size: 1rem;
  color: var(--c64-cyan);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* Status bar */
#c64-status {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c64-inset);
  border: 2px solid var(--c64-gray);
  padding: 4px 10px;
  margin-bottom: 8px;
  font-size: 1rem;
}
#c64-status .status-led {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c64-red);
  box-shadow: 0 0 4px var(--c64-red);
  transition: background 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}
#c64-status .status-led.connected {
  background: var(--c64-green);
  box-shadow: 0 0 8px var(--c64-green);
}
#c64-status .status-text { flex: 1; color: var(--c64-cyan); }
#c64-status .status-version { color: var(--c64-cyan); font-size: 0.9rem; }

/* Tabs */
#c64-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--c64-border);
  padding-bottom: 4px;
}
.c64-tab {
  font-family: var(--font-main);
  font-size: 1rem;
  text-transform: uppercase;
  background: var(--c64-darkgray);
  color: var(--c64-text);
  border: 2px solid var(--c64-gray);
  padding: 3px 14px;
  cursor: pointer;
  letter-spacing: 0.1em;
  border-radius: 2px 2px 0 0;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.c64-tab:hover { background: var(--c64-btn-hover); color: var(--c64-white); }
.c64-tab.active {
  background: var(--c64-btn-bg);
  color: var(--c64-white);
  border-bottom-color: var(--c64-btn-bg);
}
/* External link buttons in the tab bar - same shape, cyan accent, pushed to right */
.c64-tab-link {
  font-family: var(--font-main);
  font-size: 1rem;
  text-transform: uppercase;
  background: var(--c64-darkgray);
  color: var(--c64-cyan);
  border: 2px solid var(--c64-cyan);
  padding: 3px 14px;
  cursor: pointer;
  letter-spacing: 0.1em;
  border-radius: 2px 2px 0 0;
  transition: background 0.15s, color 0.15s;
  user-select: none;
  margin-left: auto;
}
.c64-tab-link + .c64-tab-link { margin-left: 4px; }
.c64-tab-link:hover { background: var(--c64-cyan); color: var(--c64-bg); }
@media (max-width: 400px) {
  .c64-tab {
    font-size: 0.75rem;
    padding: 3px 6px;
    letter-spacing: 0;
  }
}
.c64-panel { display: none; }
.c64-panel.active { display: block; }

/* Generic box */
.c64-box {
  border: 2px solid var(--c64-border);
  background: var(--c64-inset);
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 2px;
}
.c64-box-title {
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--c64-yellow);
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--c64-gray);
  padding-bottom: 3px;
}

/* Buttons */
.c64-btn {
  font-family: var(--font-main);
  font-size: 1rem;
  text-transform: uppercase;
  background: var(--c64-btn-bg);
  color: var(--c64-white);
  border: 2px solid var(--c64-border);
  padding: 3px 12px;
  cursor: pointer;
  letter-spacing: 0.08em;
  border-radius: 2px;
  transition: background 0.12s, transform 0.08s;
  user-select: none;
  /* A <button> centres its own label; a <label class="c64-btn"> does not, and
     BROWSE and LOCAL FILES are labels wrapping a hidden file input. Stretched
     by the flex row they sat left of centre while every real button beside
     them was centred. Said here rather than on label.c64-btn so the two kinds
     of control cannot drift apart again. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.c64-btn:hover { background: var(--c64-btn-hover); }
.c64-btn:active { background: var(--c64-btn-active); transform: translateY(1px); }
.c64-btn:disabled { background: var(--c64-darkgray); color: var(--c64-gray); cursor: not-allowed; }
.c64-btn.c64-btn-connect { background: #508050; border-color: var(--c64-green); color: var(--c64-white); }
.c64-btn.c64-btn-connect:hover { background: #60a060; }
.c64-btn.c64-btn-warn   { background: #805020; border-color: var(--c64-orange); }
.c64-btn.c64-btn-warn:hover { background: #a06030; }
.c64-btn.c64-btn-danger { background: #802020; border-color: var(--c64-red); }
.c64-btn.c64-btn-danger:hover { background: #a03030; }
.c64-btn.c64-btn-play   { background: #305030; border-color: var(--c64-green); }
.c64-btn.c64-btn-play:hover { background: #508050; }
.c64-btn.c64-btn-stop   { background: #503030; border-color: var(--c64-red); }
.c64-btn.c64-btn-sm     { font-size: 0.85rem; padding: 2px 8px; }
.c64-btn.active         { background: var(--c64-cyan); color: var(--c64-inset); }

/* Selects */
.c64-select {
  font-family: var(--font-main);
  font-size: 1rem;
  text-transform: uppercase;
  background: var(--c64-select-bg);
  color: var(--c64-text);
  border: 2px solid var(--c64-border);
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 2px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239090f0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}
.c64-select:focus { border-color: var(--c64-cyan); color: var(--c64-white); }
.c64-select option { background: var(--c64-inset); color: var(--c64-text); }

/* Inputs */
.c64-input {
  font-family: var(--font-main);
  font-size: 1rem;
  background: var(--c64-inset);
  color: var(--c64-cyan);
  border: 2px solid var(--c64-border);
  padding: 2px 8px;
  border-radius: 2px;
  outline: none;
  width: 100%;
}
.c64-input:focus { border-color: var(--c64-cyan); }

/* Player section */
#player-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#player-transport {
  display: flex;
  gap: 4px;
  align-items: center;
}
#sid-file-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
#sid-file-select { flex: 1; min-width: 200px; max-width: 400px; }

/* Prefill buttons above the URL input */
#sid-url-presets {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.c64-btn.sid-url-preset { font-size: 0.75rem; padding: 1px 6px; }

.subtune-info {
  color: var(--c64-yellow);
  font-size: 1rem;
  min-width: 80px;
  text-align: center;
}
.sid-meta {
  font-size: 0.85rem;
  color: var(--c64-gray);
  margin-top: 2px;
  min-height: 1.2em;
}

/* Emulator selector */
#emulator-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.95rem;
  flex-wrap: wrap;
}
#emulator-row label { color: var(--c64-cyan); text-transform: uppercase; }

/* Mode radios.
 *
 * A fieldset because that is what a set of radios is, and because the legend
 * gives the group a name without a floating <label for> pointing at one of
 * them. Its default border and padding are dropped: the c64-box around it is
 * the frame here. */
#emulator-modes {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  flex: 1;
}
#emulator-modes legend {
  padding: 0 0 2px;
  color: var(--c64-cyan);
  text-transform: uppercase;
  font-size: 0.9rem;
}
/* Columns rather than a wrapping row. The labels are very different lengths
   and one of them grows a "no WebUSB here" note, so a flex row wrapped into
   four on one line and a lone fifth underneath.
   Two columns exactly, not auto-fit: with five modes, auto-fit found room for
   three on a wide screen and left two on the second row, which is the same
   ragged look in a different shape. Two gives 2/2/1 down the panel. */
#emulator-mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 12px;
  align-items: center;
}
@media (min-width: 620px) {
  #emulator-mode-grid { grid-template-columns: 1fr 1fr; }
}
.c64-radio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--c64-text);
  /* 32px of vertical target. A radio's own 13px box is far too small to hit
   * with a thumb, and this box is the label as well as the control. */
  padding: 6px 8px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 3px;
  user-select: none;
  line-height: 1.15;
}
.c64-radio:hover { border-color: var(--c64-border); }
.c64-radio input[type=radio] {
  accent-color: var(--c64-cyan);
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  flex: none;
}
/* The chosen mode has to be readable at a glance, and a 16px dot on a dark
 * background is not enough on a phone. The class is set from JavaScript rather
 * than with :has(input:checked), which Firefox only got in 121: the page still
 * has to be usable on an older phone browser. */
.c64-radio.c64-radio-on {
  border-color: var(--c64-cyan);
  background: rgba(0, 180, 255, 0.08);
}
.c64-radio.c64-radio-on .c64-radio-text { color: var(--c64-white); }
/* Unavailable here: dimmed, not hidden, and it keeps its reason suffix. */
.c64-radio.c64-radio-off,
.c64-radio.c64-radio-off input[type=radio] { cursor: not-allowed; }
.c64-radio.c64-radio-off .c64-radio-text { color: var(--c64-gray); }
.c64-radio-why {
  color: var(--c64-orange);
  font-size: 0.78rem;
  white-space: nowrap;
}

input[type=range].c64-range {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--c64-darkgray);
  border: 1px solid var(--c64-border);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
input[type=range].c64-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c64-btn-bg);
  border: 2px solid var(--c64-border);
  cursor: pointer;
}
input[type=range].c64-range::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c64-btn-bg);
  border: 2px solid var(--c64-border);
  cursor: pointer;
}

/* SID Registers table */
#regs-panel .c64-box {
  overflow-x: auto;
}
.sid-regs-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  min-width: 320px;
}
.sid-reg-cell {
  background: var(--c64-screen);
  border: 1px solid var(--c64-gray);
  text-align: center;
  font-size: 0.8rem;
  padding: 2px 4px;
  cursor: default;
}
.sid-reg-cell .reg-addr { color: var(--c64-gray); font-size: 0.7rem; }
.sid-reg-cell .reg-name { color: var(--c64-text); font-size: 0.65rem; min-height: 0.75rem; }
.sid-reg-cell .reg-val  { color: var(--c64-cyan); }
.sid-reg-cell.reg-written { background: var(--c64-darkgray); }
.sid-reg-cell.reg-written .reg-val { color: var(--c64-yellow); }

/* Config section */
.config-section-title {
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--c64-yellow);
  border-bottom: 1px solid var(--c64-border);
  margin: 8px 0 6px;
  padding-bottom: 3px;
  letter-spacing: 0.1em;
}
.config-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.config-row label {
  min-width: 160px;
  color: var(--c64-text);
  font-size: 0.95rem;
  text-transform: uppercase;
}
.config-row .c64-select { min-width: 140px; }
.config-row .config-hint {
  font-size: 0.8rem;
  color: var(--c64-gray);
}
.config-row .config-value-display {
  font-size: 0.9rem;
  color: var(--c64-cyan);
  min-width: 80px;
}

.config-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
@media (max-width: 700px) {
  .config-grid-2 { grid-template-columns: 1fr; }
}

/* Presets row */
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
}
.preset-row .preset-label {
  color: var(--c64-cyan);
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-right: 4px;
}

/* Debug section */
#debug-panel {
  display: none;
}
#debug-panel.visible { display: block; }
.c64-debug-log {
  background: #101030;
  border: 2px solid var(--c64-gray);
  color: #60e060;
  font-family: var(--font-main);
  font-size: 0.85rem;
  padding: 6px 10px;
  height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Footer */
#c64-footer {
  text-align: center;
  color: var(--c64-gray);
  font-size: 0.85rem;
  padding: 8px 0 2px;
  border-top: 1px solid var(--c64-darkgray);
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#c64-footer a { color: var(--c64-cyan); text-decoration: none; }
#c64-footer a:hover { color: var(--c64-white); }

/* Utility / misc */
.c64-hidden { display: none !important; }
.c64-text-white  { color: var(--c64-white); }
.c64-text-cyan   { color: var(--c64-cyan); }
.c64-text-yellow { color: var(--c64-yellow); }
.c64-text-red    { color: var(--c64-red); }
.c64-text-green  { color: var(--c64-green); }
.c64-text-gray   { color: var(--c64-gray); }

.c64-hr {
  border: none;
  border-top: 1px solid var(--c64-border);
  margin: 8px 0;
}

/* Two-column layout for config panels */
.c64-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 750px) {
  .c64-cols { grid-template-columns: 1fr; }
  .config-row label { min-width: 120px; }
}

/* "Blink" cursor animation for title */
@keyframes c64blink {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0; }
}
.c64-cursor::after {
  content: '\2588';
  display: inline-block;
  animation: c64blink 1s step-end infinite;
  color: var(--c64-white);
  margin-left: 2px;
}

/* Marquee-style scroll hint */
.c64-scroll-notice {
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--c64-cyan);
}

/* LED indicator inline */
.mini-led {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c64-red);
  vertical-align: middle;
  margin-right: 4px;
  transition: background 0.3s, box-shadow 0.3s;
}
.mini-led.on {
  background: var(--c64-green);
  box-shadow: 0 0 6px var(--c64-green);
}
.mini-led.warn {
  background: var(--c64-orange);
  box-shadow: 0 0 6px var(--c64-orange);
}

/* Glow animation for attention-requiring buttons */
@keyframes c64glow {
  0%,100% { box-shadow: 0 0 6px var(--c64-orange), 0 0 14px rgba(224,136,48,0.4); }
  50%     { box-shadow: 0 0 18px var(--c64-orange), 0 0 32px rgba(224,136,48,0.7); }
}
.c64-btn-glow {
  animation: c64glow 1.5s ease-in-out infinite;
  border-color: var(--c64-orange) !important;
}

/* Persistent confirmation warning banner */
#warn-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,60,60,0.13);
  border: 2px solid var(--c64-red);
  border-radius: 4px;
  padding: 10px 14px;
  margin: 6px 8px;
  color: var(--c64-red);
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.5;
}
#warn-confirmation.c64-hidden { display: none !important; }

/* ────────────────────────────────────────────────────────────────────────
   SID library browser (usbsid-sidbrowser.js)

   Two panes: directories left as a tree, the open directory's tunes right.
   Under 700px they stack; the directory list stays a list rather than becoming
   a dropdown, since a tree is walked a level at a time and each level is short.

   Every row is a <button>, not a <div> with a click handler. A button is
   focusable, reachable by keyboard and understood by a screen reader, and on
   touch it does not need the 300ms tap resolution a div sometimes gets.
   ──────────────────────────────────────────────────────────────────────── */
#sid-browser-tools {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
#sid-search-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
#sid-search {
  flex: 1;
  min-width: 0;         /* or the input refuses to shrink inside the flex row */
  font-size: 0.9rem;
}
/* Chrome's own clear button on a type=search, which duplicates ours and is
   invisible against this background. */
#sid-search::-webkit-search-cancel-button { display: none; }
#sid-search-clear { flex: none; padding: 2px 10px; }

#sid-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.c64-btn.sid-chip { font-size: 0.75rem; padding: 3px 8px; }
/* The filter in force. These select a subset rather than scrolling to one, so
   which is active has to be visible: without it the list looks arbitrarily
   short with nothing saying why. */
.c64-btn.sid-chip.sid-chip-on {
  background: var(--c64-cyan);
  border-color: var(--c64-cyan);
  color: var(--c64-inset);
}

#sid-browser-panes {
  display: grid;
  grid-template-columns: minmax(110px, 26%) 1fr;
  gap: 6px;
  align-items: stretch;
}
#sid-dir-list,
#sid-file-list {
  background: var(--c64-inset);
  border: 2px solid var(--c64-border);
  border-radius: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;   /* scrolling the list must not scroll the page */
  -webkit-overflow-scrolling: touch;
  height: 260px;
  position: relative;
}
#sid-dir-list { padding: 2px; }

.sid-dir {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;              /* a thumb sized target */
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--c64-text);
  font-family: var(--font-main);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.sid-dir:hover { border-color: var(--c64-border); }
.sid-dir.sid-dir-open {
  background: rgba(0, 180, 255, 0.12);
  border-color: var(--c64-cyan);
  color: var(--c64-white);
}
.sid-dir-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sid-dir-count { color: var(--c64-gray); font-size: 0.75rem; flex: none; }

.sid-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--c64-darkgray);
  color: var(--c64-yellow);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-bottom: 1px solid var(--c64-border);
}

.sid-file {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  min-height: 40px;
  padding: 5px 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--c64-text);
  font-family: var(--font-main);
  text-align: left;
  cursor: pointer;
}
.sid-file:hover { background: rgba(255, 255, 255, 0.05); }
.sid-file.sid-file-on { background: rgba(0, 180, 255, 0.15); }
.sid-file.sid-file-on .sid-file-title { color: var(--c64-white); }
.sid-file-title {
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sid-file-sub {
  font-size: 0.72rem;
  color: var(--c64-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sid-empty {
  padding: 12px 10px;
  color: var(--c64-gray);
  font-size: 0.85rem;
}

#sid-browser-nav {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
#sid-browser-nav .c64-btn { flex: 1; min-height: 34px; }

@media (max-width: 700px) {
  /* One column, directories above the files, and **the same clickable list**.
     It was a native <select> here at first, from when the pane held every
     directory flat and a picker was the lesser evil. Now that it is a tree
     walked one level at a time the list is a handful of rows, and having to
     open a dropdown to go into a folder, on the device where tapping a row is
     the obvious thing to do, was the wrong way round. */
  #sid-browser-panes { grid-template-columns: 1fr; }
  #sid-dir-list { display: block; height: auto; max-height: 34vh; }
  #sid-file-list { height: 44vh; }
}

/* ────────────────────────────────────────────────────────────────────────
   Now playing, in TRANSPORT
   ──────────────────────────────────────────────────────────────────────── */
#now-playing {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c64-darkgray);
}
#np-name {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#np-meta {
  font-size: 0.85rem;
  /* Was --c64-gray, which is the colour for text nobody needs to read. This is
     the tune's title, author and year: the most interesting line in the box. */
  color: var(--c64-text);
  min-height: 1.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#np-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.np-time {
  font-size: 1.05rem;
  color: var(--c64-green);
  /* Tabular figures, or the whole row jiggles once a second as the digits
     change width. */
  font-variant-numeric: tabular-nums;
}
#np-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.np-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--c64-yellow);
  border: 1px solid var(--c64-yellow);
  border-radius: 2px;
  padding: 0 5px;
  line-height: 1.5;
}

/* HVSC's STIL notes for the tune being played.
   Inset like the other read-only panels, and capped in height: a handful of
   entries run to a couple of thousand characters (Rob Hubbard on Commando is
   one) and without a limit a single tune pushes the transport buttons off the
   screen. */
#np-stil {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: var(--c64-inset);
  border: 2px solid var(--c64-gray);
  font-size: 0.85rem;
  max-height: 11em;
  overflow-y: auto;
}
#np-stil-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.np-stil-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--c64-yellow);
  border: 1px solid var(--c64-yellow);
  border-radius: 2px;
  padding: 0 5px;
  line-height: 1.5;
  flex: none;
}
#np-stil-path {
  color: var(--c64-gray);
  font-size: 0.8rem;
  /* Truncated rather than wrapped, and from the left: the path is here for
     recognition and the interesting end of it is the file name. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}
.np-stil-row { margin-top: 3px; line-height: 1.35; }
.np-stil-key {
  color: var(--c64-gray);
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-right: 4px;
}
.np-stil-val { color: var(--c64-text); }
.np-stil-val.np-stil-title { color: var(--c64-cyan); }
/* A subtune's own notes, marked as belonging to it and not to the file. */
.np-stil-sub {
  margin-top: 5px;
  padding-left: 6px;
  border-left: 2px solid var(--c64-darkgray);
}
.np-stil-subhead {
  color: var(--c64-yellow);
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* ────────────────────────────────────────────────────────────────────────
   Touch sizing

   Everything above is sized for a mouse. A 22px tall transport button is
   under half of what a thumb can reliably hit, which is most of why the page
   "does not work" on a phone: the taps were landing between the buttons.

   Keyed on the pointer rather than on the width. A narrow desktop window is
   still a mouse and does not need 44px buttons, and a tablet in landscape is
   wide and still a thumb. `pointer: coarse` is the question actually being
   asked.
   ──────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .c64-btn,
  .c64-btn.c64-btn-sm {
    min-height: 40px;
    padding: 6px 12px;
    font-size: 0.95rem;
  }
  .c64-tab { min-height: 40px; padding: 6px 12px; }
  .c64-select { min-height: 40px; }
  .c64-input { min-height: 40px; }
  /* Named again: the rules that size these are ID scoped or set their own
     min-height, and win on specificity over the .c64-btn rule above. */
  .c64-radio { min-height: 40px; }
  .sid-dir { min-height: 40px; }
  #sid-browser-nav .c64-btn { min-height: 40px; }

  /* The transport is the row that is pressed most, so it gets the whole
     width and shares it out rather than crowding into one line. */
  #player-transport {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 6px;
    width: 100%;
  }
  #player-transport .c64-btn { width: 100%; }
  #player-controls { gap: 10px; }
  /* A range slider's thumb is a 12px dot by default. */
  input[type=range].c64-range { height: 12px; }
  input[type=range].c64-range::-webkit-slider-thumb { width: 22px; height: 22px; }
  input[type=range].c64-range::-moz-range-thumb { width: 22px; height: 22px; }

  /* Rows of small buttons: let them wrap into full width targets instead of
     shrinking to fit. */
  #sid-file-row .c64-btn,
  #sid-url-presets .c64-btn { flex: 1 1 auto; }
}

/* The one place a phone still needs a width rule: the player panel's boxes
   have desktop padding that eats a quarter of a 390px screen. */
@media (max-width: 480px) {
  #c64-frame { padding: 6px 6px 14px; }
  .c64-box { padding: 6px 8px; }
  #c64-header h1 { font-size: 1.8rem; }
  #c64-header .subtitle { font-size: 0.8rem; letter-spacing: 0.1em; }
}

/* Where we are in the directory tree. The tree is walked one level at a time,
   so without this there is nothing on screen saying which level that is. */
#sid-crumb {
  font-size: 0.78rem;
  color: var(--c64-cyan);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;          /* keep the deepest part visible when it overflows */
  text-align: left;
}
.sid-dir.sid-dir-up { color: var(--c64-yellow); }

/* The end of what has been rendered.
   The file list puts a screenful in the DOM and appends as you scroll: a full
   HVSC is 65 000 tunes, and rendering them all came to 194 380 DOM nodes and
   seconds of layout. This says why the list stops where it does. */
.sid-more {
  padding: 8px 10px;
  color: var(--c64-gray);
  font-size: 0.75rem;
  text-align: center;
}

/* Blog panel - static content generated from _docs_etc/blog/blog.md by
   _docs_etc/blog/blog_to_c64panel.py. Scoped to #panel-blog so it doesn't
   affect the About panel's own hand-written c64-box content. */
#panel-blog p {
  color: var(--c64-blogtext);
  line-height: 1.6;
  margin: 0 0 8px;
  /* font-size: var(--c64-blogfontsize); */
}
#panel-blog p:last-child { margin-bottom: 0; }
#panel-blog strong { font-weight:bold; }
#panel-blog a { color: var(--c64-cyan); text-decoration: none; }
#panel-blog a:hover { text-decoration: underline; color: var(--c64-white); }
#panel-blog img { display: block; max-width: 75%; height: auto; border-radius: 0px; padding-bottom: 2px; margin: 0px auto; }
#panel-blog .c64-img-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: center;
  gap: 8px;
  margin: 4px 0;
}
#panel-blog .c64-img-grid img { max-width: 100%; margin: 0; }
#panel-blog sup { display: block; margin: 0px auto; text-align: center; color: var(--c64-bloggray); font-size: 0.8em; }
#panel-blog .c64-date-author { display: block; font-size: 0.8rem; color: var(--c64-bloggray); }
#panel-blog code {
  background: var(--c64-screen);
  color: var(--c64-cyan);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 0.9em;
}
#panel-blog ul, #panel-blog ol {
  color: var(--c64-blogtext);
  line-height: 1.6;
  margin: 0 0 8px;
  padding-left: 22px;
}
#panel-blog ul ul, #panel-blog ol ol, #panel-blog ul ol, #panel-blog ol ul {
  margin: 4px 0 4px;
}
.c64-blog-h2 {
  color: var(--c64-yellow);
  /* font-size: 0.95rem; */
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 14px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--c64-gray);
}
#panel-blog .c64-box > .c64-blog-h2:first-of-type { margin-top: 4px; }
.c64-blog-h3 {
  color: var(--c64-cyan);
  /* font-size: 0.9rem; */
  font-size: 1.1rem;
  margin: 10px 0 4px;
}
#panel-blog .c64-box-title {
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--c64-yellow);
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--c64-gray);
  padding-bottom: 6px;
}
#panel-blog .c64-blog-title {
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--c64-yellow);
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--c64-gray);
  padding-bottom: 3px;
  /* display: block; */
  /* align-self: auto; */
}

/* Blog section/subsection labels are real h2-h5 elements now (SEO/semantic
   structure), not divs. Reset the UA heading defaults (top margin, bold
   weight) they'd otherwise add on top of the explicit values above, so the
   retag is visually invisible. */
#panel-blog h2.c64-blog-title,
#panel-blog h3.c64-box-title,
#panel-blog h4.c64-blog-h2,
#panel-blog h5.c64-blog-h3 {
  margin-top: 0;
  font-weight: normal;
  display: block;
}

/* Visually hidden but present in the DOM: for search engines and screen
   readers only, never shown on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}