/* De drie merkletters van Sub Sub Ibiza uit de brandkit (SIL OFL), zelf
   gehost in de bundel (public-subsub/fonts). Vóór sunset.css laden:
   VITE_RUUD_THEME_CSS="themes/subsub-fonts.css:themes/sunset.css". */
@font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/archivo-black.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/archivo-regular.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/archivo-bold.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/space-mono-regular.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/space-mono-bold.woff2') format('woff2'); }

/* ═══════════════════════════════════════════════════════════════════════════
   Thema "Sunset" — de luisteraarsapp in de brandguide van het Sub Sub-sjabloon
   (src/components/website-templates/generators/subsub-style.ts), zoals de
   site van Bloom Radio hem draagt sinds 17 sep 2026.

   - zwart en wit dragen het merk; sunset (#FF7A40 → #FF5E8A) is het signaal:
     alleen op de play-knop, het live-label, de verzendknop en de hoekjes.
     Sunset is nooit tekstkleur.
   - koppen in Archivo Black, kapitalen; tekst in Archivo; labels in Space
     Mono, kapitalen.
   - geribbeld papier (zwart op het live-scherm, wit in de lijsten),
     hoekmarkeringen op twee diagonale hoeken van de hoes, één ronde hoek
     (linksboven) en het verschoven sunset-vel achter de hoes.
   - geen rondingen, geen ringen, geen groen.

   Laadt ná styles.css en het palet-<style>; alles hier wint.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sunset-a: #FF7A40;
  --sunset-b: #FF5E8A;
  --sunset: linear-gradient(135deg, var(--sunset-a) 0%, var(--sunset-b) 100%);
  --sunset-v: linear-gradient(180deg, var(--sunset-a) 0%, var(--sunset-b) 100%);
  --sunset-flat: #FF6A5C;
  --graphite: #1A1A1A;
  --steel: #7A7A7A;
  --concrete: #E6E6E6;
  --ribbel-zwart: #000 repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 6px);
  --ribbel-licht: #fff repeating-linear-gradient(90deg, rgba(0, 0, 0, .055) 0 1px, transparent 1px 6px);
  --hoek: 22px;

  /* Het blauw van de basis wordt zwart; "lime" (de enige actiekleur) wordt
     sunset-plat, zodat elke plek die de basis met --lime kleurt al goed valt. */
  --blue-bright: #1A1A1A;
  --blue:        #000000;
  --blue-chrome: #000000;
  --blue-ink:    #000000;
  --blue-deep:   #000000;
  --lime:        #FF6A5C;
  --lime-deep:   #FF5E8A;

  --ink:   #000000;
  --ink-2: #4D4D4D;
  --ink-3: #5C5C5C;
  --paper: #FFFFFF;
  --card:  #FFFFFF;
  --hair:  rgba(0, 0, 0, .10);
  --hair-blue: rgba(255, 255, 255, .18);

  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0;

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Archivo Black', 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Vlakken ─────────────────────────────────────────────────────────────── */

.app { background: var(--ribbel-licht); }
.backdrop-blue { background: var(--ribbel-zwart); }
/* De sfeerlaag van de hoes blijft, maar als zeefdruk: zwart-wit, hoge
   contrast, sunset in multiply — de guide-hero (57% zwart, 24% sunset). */
.ambient { filter: blur(70px) grayscale(1) contrast(1.6) brightness(.55); mix-blend-mode: normal; }
.app.is-live .ambient.is-on { opacity: .55; }
.ambient-scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .7) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 4px);
}

/* ── Topbalk ─────────────────────────────────────────────────────────────── */

.topbar { background: #000; border-bottom: 1px solid var(--graphite); }
.app.is-live .topbar { background: transparent; border-bottom-color: transparent; }
.brand-mark { border-radius: 0; box-shadow: none; background: #000; object-fit: contain; }
.brand-name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; font-size: 15px; }
.brand-sub { font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px; color: var(--steel); }

.live-pill {
  border-radius: 0;
  background: var(--sunset);
  color: #000;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10px;
}
.live-pill .live-dot { background: #000; }
.live-pill.is-off { background: var(--graphite); color: #fff; box-shadow: none; }

/* ── Live-scherm ─────────────────────────────────────────────────────────── */

/* Hoes: geen ronding behalve linksboven; het verschoven sunset-vel erachter en
   twee hoekmarkeringen (rechtsboven, linksonder) — de drie bouwstenen van de
   guide, niets meer. */
.cover-wrap { isolation: isolate; }
.cover-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(10px, 10px);
  background: var(--sunset);
  border-top-left-radius: var(--hoek);
  z-index: -1;
}
.cover-wrap::after {
  content: "";
  position: absolute;
  inset: -8px;
  pointer-events: none;
  background:
    linear-gradient(var(--sunset-flat), var(--sunset-flat)) top right / 22px 2px no-repeat,
    linear-gradient(var(--sunset-flat), var(--sunset-flat)) top right / 2px 22px no-repeat,
    linear-gradient(var(--sunset-flat), var(--sunset-flat)) bottom left / 22px 2px no-repeat,
    linear-gradient(var(--sunset-flat), var(--sunset-flat)) bottom left / 2px 22px no-repeat;
}
.cover {
  border-radius: 0;
  border-top-left-radius: var(--hoek);
  background: #000;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
}
.cover-fallback { border-radius: 0; border-top-left-radius: var(--hoek); background: var(--graphite); }

.track-label {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--steel);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.track-label::before { content: ""; width: 8px; height: 8px; background: var(--sunset); flex: none; }
.track-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  font-size: 23px;
  line-height: 1.08;
}
.track-artist { font-family: var(--font); font-weight: 400; color: rgba(255, 255, 255, .78); }

.slot-tag { border-radius: 0; background: #fff; color: #000; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }

.progress-track { border-radius: 0; height: 3px; background: rgba(255, 255, 255, .22); }
.progress-fill { border-radius: 0; background: var(--sunset); }
.progress-times { font-family: var(--font-mono); letter-spacing: .06em; }

.play-fab {
  border-radius: 0;
  border-top-left-radius: var(--hoek);
  background: var(--sunset);
  color: #000;
  box-shadow: 0 18px 40px -14px rgba(255, 106, 92, .7);
}
.control-side { border-radius: 0; color: #fff; }

.upnext { border-radius: 0; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--graphite); }
.upnext-label { font-family: var(--font-mono); font-weight: 400; color: #fff; letter-spacing: .12em; }
.upnext-label::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--sunset); margin-right: 8px; vertical-align: 1px; }
.upnext-art, .upnext-art-empty { border-radius: 0; }
.upnext-title { font-family: var(--font); font-weight: 700; }

/* ── Lijsten en formulieren (wit) ────────────────────────────────────────── */

.screen-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  font-size: 26px;
  line-height: 1.05;
}
.screen-sub { font-family: var(--font); color: var(--ink-2); }
.section-head {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: .12em;
  color: #000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-head::before { content: ""; width: 8px; height: 8px; background: var(--sunset); flex: none; }

.list, .form-card, .empty, .picked, .picker, .voice { border-radius: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--concrete); }
.list { border-top-left-radius: var(--hoek); }
.row + .row { box-shadow: inset 0 1px 0 var(--concrete); }
.row-art, .row-art-empty, .picker-art, .picker-art-empty, .picked-art, .picked-art-empty { border-radius: 0; }
.row-title, .picker-title, .picked-title { font-family: var(--font); font-weight: 700; color: #000; }
.row-time { font-family: var(--font-mono); letter-spacing: .06em; color: var(--steel); }
.picked { box-shadow: inset 0 0 0 2px #000; }

.field, .field input, .field textarea, .field select { border-radius: 0; }
.field input, .field textarea, .field select { background: #F2F2F2; color: #000; box-shadow: inset 0 0 0 1px var(--concrete); }
.field input::placeholder, .field textarea::placeholder { color: var(--steel); }
.field input:focus, .field textarea:focus { box-shadow: inset 0 0 0 2px #000; }
.field-hint, .field-optional, .form-trust, .status-line { font-family: var(--font-mono); letter-spacing: .04em; font-size: 10.5px; }

.submit {
  border-radius: 0;
  border-top-left-radius: var(--hoek);
  background: var(--sunset);
  color: #000;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 13px;
  box-shadow: none;
}
.voice-btn { border-radius: 0; }
.voice-btn.is-recording { background: var(--sunset); color: #000; }
.sent-check { border-radius: 0; background: var(--sunset); color: #000; }

/* ── Minispeler en tabbalk ───────────────────────────────────────────────── */

.mini {
  border-radius: 0;
  border-top-left-radius: var(--hoek);
  background: #000;
  color: #fff;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--graphite);
}
.mini-art { border-radius: 0; }
.mini-title { font-family: var(--font); font-weight: 700; }
.mini-artist { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--steel); text-transform: uppercase; }
.mini-btn { border-radius: 0; background: var(--sunset); color: #000; }
.mini-progress { background: var(--sunset); }

.tabbar { background: #000; color: #fff; box-shadow: none; border-top: 1px solid var(--graphite); }
.tab { color: var(--steel); font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px; }
.tab.is-active { color: #fff; box-shadow: inset 0 2px 0 var(--sunset-flat); }