/* GENERATED from data/index.html — do not edit; edit the theme there. */
/* THEME:BEGIN — extracted to data/gb.css by embed_html.py; the other
   pages link that file, so edit the theme here and only here. */
/* ------------------------------------------------------------------
   Retro Songbird theme — the retrosongbird.com look.

   Warm paper background, near-black ink, one accent colour. Light only,
   like the site — no dark-scheme variant. Buttons are
   the site's: black caps with accent text and an accent offset shadow
   that the button presses into. The accent is set per unit at provisioning
   (/api/settings "accent", default yellow); every page reads it from
   localStorage before first paint and index.html syncs it from the speaker.

   Fonts, served from LittleFS as Latin subsets:
     TAY Waffle Cone — titles, labels, buttons (brand face)
     Nunito 400/600  — body copy (Vernon Adams, SIL OFL 1.1)
   Variable names are kept from the old DMG theme so the inline styles
   across the pages keep working: --ink text, --ink-2 secondary text,
   --hi raised surface, --pale sunken surface, --lcd page background.
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'TAY Waffle Cone';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/waffle.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/nunito400.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/nunito600.woff2) format('woff2');
}

:root {
  --accent:    #FFB600;   /* retrosongbird.com yellow; overridden at runtime */
  --on-accent: #111111;   /* text on an accent fill (JS picks black/white) */

  --ink:   #111111;   /* text, borders, button caps */
  --ink-2: #57534c;   /* secondary text (>=4.5:1 on --hi and --lcd) */
  --tone:  #b9b5ac;   /* hairlines, dividers */
  --dim:   #a09c93;   /* disabled / decorative only, never body copy */
  --pale:  #ffffff;   /* sunken surfaces: inputs, list rows, troughs */
  --lcd:   #E3E2DE;   /* page background */
  --hi:    #FCFBF7;   /* raised panels: cards */
  --btn:   #111111;   /* button cap */

  --f-head: 'TAY Waffle Cone', 'Nunito', system-ui, sans-serif;
  --f-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-micro: 13px;
  --fs-body:  16px;
  --fs-head:  18px;
  --fs-title: 30px;
  --fs-huge:  44px;

  --bd: 2px;          /* control border */
  --bd-lg: 3px;       /* card border */
  --r: 12px;          /* card radius */
  --r-sm: 10px;       /* button / input radius */
  --col: 440px;       /* single-column width */

  --grid:   transparent;
  --shadow: var(--accent);
  --disabled: #a09c93;
}


* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  background: var(--lcd);
  color: var(--ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 2.5rem;
  -webkit-tap-highlight-color: transparent;
}

/* The Game Boy screen itself stays crisp; nothing else is pixel art now. */
canvas { image-rendering: pixelated; }
::selection { background: var(--accent); color: var(--on-accent); }

b, strong { font-weight: 600; color: var(--ink); }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- header */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}
/* The logo is two masks from one image: the polygon behind the bird fills
   with the accent, the bird and note draw on top in ink. */
.brand-bird {
  position: relative;
  width: 150px;
  aspect-ratio: 360 / 302;
  margin-bottom: 0.5rem;
}
.brand-bird::before, .brand-bird::after {
  content: '';
  position: absolute;
  inset: 0;
}
.brand-bird::before {
  background: var(--accent);
  -webkit-mask: url(/bird_fill.png) center / contain no-repeat;
          mask: url(/bird_fill.png) center / contain no-repeat;
}
.brand-bird::after {
  background: var(--ink);
  -webkit-mask: url(/bird_ink.png) center / contain no-repeat;
          mask: url(/bird_ink.png) center / contain no-repeat;
}

.page-title {
  font-family: var(--f-head);
  font-size: var(--fs-title);
  font-weight: 400;
  text-align: center;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.logo {
  width: 144px;
  height: auto;
  margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------- cards */
.card {
  width: 100%;
  max-width: var(--col);
  background: var(--hi);
  border: var(--bd-lg) solid var(--ink);
  border-radius: var(--r);
  padding: 1.1rem 1.1rem 1.2rem;
  margin-bottom: 1.5rem;
}

/* Tab-style label on the card's top edge, filled with the accent. */
.card-label {
  display: inline-block;
  font-family: var(--f-head);
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  border: var(--bd) solid var(--ink);
  border-radius: 8px;
  padding: 0.4rem 0.65rem 0.35rem;
  margin: -1.9rem 0 0.9rem -0.35rem;
}

.eyebrow {
  font-family: var(--f-head);
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  margin-bottom: 0.6rem;
}

/* Progress bar = .meter wrapper + .meter-fill inner; JS sets the width. */
.meter {
  height: 14px;
  border: var(--bd) solid var(--ink);
  border-radius: 999px;
  background: var(--pale);
  overflow: hidden;
}
.meter-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
}

/* Cassette glyph (the mixtape button), masked so it takes currentColor. */
.mt-cassette {
  display: inline-block;
  width: 20px;
  height: 13px;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 0h16v10H0zM2 2v4h12V2zM4 7h8v2H4z'/%3E%3Cpath d='M4 3h2v2H4zM10 3h2v2h-2z'/%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 16 10' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 0h16v10H0zM2 2v4h12V2zM4 7h8v2H4z'/%3E%3Cpath d='M4 3h2v2H4zM10 3h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

hr, .rule {
  border: 0;
  border-top: var(--bd) solid var(--tone);
  margin: 0.75rem 0;
}

/* ------------------------------------------------------------ time card */
.time-display {
  font-family: var(--f-head);
  font-size: var(--fs-huge);
  text-align: center;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.time-display .ampm { font-size: var(--fs-head); margin-left: 0.4rem; }

.time-edit { display: none; }
.time-edit.active { display: block; }

.time-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.time-input {
  width: 5rem;
  font-family: var(--f-head);
  font-size: var(--fs-title);
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--pale);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-sm);
  color: var(--ink);
  padding: 0.35rem 0;
  -moz-appearance: textfield;
}
.time-input::-webkit-inner-spin-button,
.time-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.time-input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }

.time-colon {
  font-family: var(--f-head);
  font-size: var(--fs-title);
  color: var(--ink);
}

/* ------------------------------------------------ segmented toggle (AM/PM) */
.ampm-row {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 0.75rem;
}

.ampm-btn {
  font-family: var(--f-head);
  font-size: var(--fs-micro);
  padding: 0.7rem 1.4rem;
  border: var(--bd) solid var(--ink);
  background: var(--pale);
  color: var(--ink);
  cursor: pointer;
}
.ampm-btn:first-child { border-right-width: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.ampm-btn:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ampm-btn.active { background: var(--btn); color: var(--accent); }

/* ------------------------------------------------------------- buttons */
/* One button, retrosongbird.com's: black cap, accent text, accent offset
   shadow it presses into. .alt is the quieter outline sibling for
   secondary actions; .transmit-btn is the full-width version. */
.set-btn, .transmit-btn {
  font-family: var(--f-head);
  font-size: var(--fs-micro);
  line-height: 1.1;
  letter-spacing: .03em;
  color: var(--accent);
  background: var(--btn);
  border: var(--bd) solid var(--btn);
  border-radius: var(--r-sm);
  box-shadow: 4px 4px 0 var(--accent);
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.set-btn {
  display: block;
  margin: 0.95rem auto 0;
  padding: 0.7rem 1.1rem;
}
.set-btn:hover, .transmit-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--accent); }
.set-btn:active, .transmit-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--accent); }
.set-btn.alt {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
  box-shadow: none;
}
.set-btn.alt:hover { transform: none; box-shadow: none; background: var(--pale); }
.set-btn.alt:active { transform: translate(1px, 1px); box-shadow: none; }
.set-btn:disabled, .transmit-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: 4px 4px 0 var(--accent);
}
.set-btn.alt:disabled { box-shadow: none; }

.transmit-wrap { width: 100%; max-width: var(--col); margin-top: 1rem; }
.transmit-btn {
  width: 100%;
  padding: 1rem;
  font-size: var(--fs-head);
}

/* -------------------------------------------------------------- inputs */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], select, textarea {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--pale);
  border: var(--bd) solid var(--ink);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: .8; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
select { -webkit-appearance: none; appearance: none; cursor: pointer; }

input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px;
  border: var(--bd) solid var(--ink);
  border-radius: 5px;
  background: var(--pale);
  cursor: pointer;
  vertical-align: middle;
}
input[type="checkbox"]:checked { background: var(--accent); box-shadow: inset 0 0 0 3px var(--pale); }

/* ---------------------------------------------------------- range/slider */
.slider-wrap { position: relative; display: flex; align-items: center; gap: 0.75rem; }
.slider-icon { font-size: var(--fs-body); color: var(--ink-2); flex-shrink: 0; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  background: var(--pale);
  border: var(--bd) solid var(--ink);
  border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin-top: -8px;
  background: var(--accent);
  border: var(--bd) solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 10px;
  background: var(--pale);
  border: var(--bd) solid var(--ink);
  border-radius: 999px;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--accent);
  border: var(--bd) solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}

/* -------------------------------------------------------------- status */
.vol-status {
  text-align: center;
  font-size: var(--fs-body);
  color: var(--ink-2);
  margin-top: 0.5rem;
  min-height: 1rem;
  opacity: 0;
}
.vol-status.show { opacity: 1; }

/* ------------------------------------------------------------ wifi list */
.wifi-net {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.75rem;
  margin: 0.4rem 0;
  background: var(--pale);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--ink);
}
.wifi-net:hover, .wifi-net:active { background: var(--accent); color: var(--on-accent); }
.wifi-net-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wifi-net-rssi { color: var(--ink-2); margin-left: 0.5rem; flex-shrink: 0; }
.wifi-net:hover .wifi-net-rssi, .wifi-net:active .wifi-net-rssi { color: var(--on-accent); }

/* ------------------------------------------------------------- details */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: '\25B8\00a0'; }
details[open] > summary::before { content: '\25BE\00a0'; }

/* ---------------------------------------------------------- scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tone); border-radius: 999px; border: 2px solid var(--hi); }

/* Footer Bird Cartel mark — small and faded, like retrosongbird.com. */
.cartel-link { display: block; width: 68px; margin: 1.25rem auto 0; opacity: .65; transition: opacity .1s ease; }
.cartel-link:hover { opacity: 1; }
.cartel-logo { display: block; width: 68px; height: auto; }

/* THEME:END */