/* 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); }

/* ═══════════════════════════════════════════════════════════════════════════
   App v3.8 (Bas, 10 okt 2026): kader, Live-scroll, Schedule, More.
   Sunset blijft blok, lijn, vierkantje of knop; nooit tekstkleur.
   ═══════════════════════════════════════════════════════════════════════════ */

.app.is-dark { background: var(--ribbel-zwart); color: #fff; }
.app.is-dark .topbar { background: #000; }

/* Het SUB SUB-kader: één ronde hoek linksboven, verschoven sunset-vel, hoekjes bij groot. */
.sframe { position: relative; display: block; isolation: isolate; flex: none; }
.sframe::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sunset); border-top-left-radius: var(--hoek);
  transform: translate(var(--sv, 10px), var(--sv, 10px));
}
.sframe-in { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--graphite); border-top-left-radius: var(--hoek); }
.sframe-in img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sframe-in img.sframe-logo { object-fit: contain; padding: 18%; }
.sframe-kaart { --sv: 8px; width: 112px; }
.sframe-klein { --sv: 5px; }
.sframe-klein .sframe-in, .sframe-klein::before { border-top-left-radius: 10px; }
.sframe-groot::after, .sframe-kaart::after {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  background:
    linear-gradient(var(--sunset-flat), var(--sunset-flat)) top right / 14px 2px no-repeat,
    linear-gradient(var(--sunset-flat), var(--sunset-flat)) top right / 2px 14px no-repeat,
    linear-gradient(var(--sunset-flat), var(--sunset-flat)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--sunset-flat), var(--sunset-flat)) bottom left / 2px 14px no-repeat;
}

/* Koppen van de v3.8-schermen */
.shows-head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.shows-head::before { content: ""; width: 8px; height: 8px; background: var(--sunset); flex: none; }
.sched-head { padding: 18px 20px 0; margin: 0 0 14px; }

/* Live, gescrold */
.shows { align-self: stretch; padding: 40px 0 28px; display: grid; gap: 34px; color: #fff; }
.shows-card { display: flex; gap: 18px; align-items: center; }
.shows-card-text { min-width: 0; }
.shows-time, .sched-time, .shows-tile-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: #fff; }
.shows-name { margin-top: 4px; font-family: var(--font-display); text-transform: uppercase; font-size: 18px; line-height: 1.1; }
.shows-sub { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.shows-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; padding-right: 5px; }
.shows-tile-name {
  margin-top: 14px; font-family: var(--font); font-weight: 700; font-size: 12.5px; line-height: 1.2;
  /* vaste tweeregelige hoogte: alle tijden staan op één lijn */
  height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.shows-tile-when { margin-top: 6px; color: #fff; font-size: 10.5px; }

/* Schedule */
.sched, .more { padding-bottom: 24px; color: #fff; }
.sched-days { display: flex; justify-content: space-between; padding: 0 20px 10px; }
.sched-day {
  background: none; border: 0; padding: 8px 4px; color: var(--steel);
  font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.sched-day.is-active { color: #fff; box-shadow: inset 0 -2px 0 var(--sunset-flat); }
.sched-list { list-style: none; margin: 0; padding: 0 20px; }
.sched-row {
  display: grid; grid-template-columns: 40px 52px minmax(0, 1fr); gap: 12px; align-items: center;
  /* vaste hoogte: bij het wisselen van dag of hover verschuift er niets */
  min-height: 68px; padding: 10px 0 10px 0; box-shadow: inset 0 -1px 0 var(--graphite);
}
.sched-row .sframe-klein { width: 40px; margin-right: 5px; }
.sched-time { display: grid; line-height: 1.35; font-size: 10.5px; }
.sched-name { font-family: var(--font-display); text-transform: uppercase; font-size: 14px; line-height: 1.15; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-title { margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, .72); }
.sched-row.is-live { background: rgba(255, 255, 255, .06); box-shadow: inset 3px 0 0 var(--sunset-flat), inset 0 -1px 0 var(--graphite); padding-left: 10px; margin-left: -10px; }
.sched-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: #fff; }
.sched-live::before { content: ""; width: 7px; height: 7px; background: var(--sunset); }
.sched-empty { padding: 12px 20px; color: var(--steel); font-size: 13px; }
.sched-foot, .more-foot { padding: 18px 20px 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--steel); display: grid; gap: 8px; }
.more-coord { margin-top: 4px; }

/* More */
.more-insta, .more-row {
  display: flex; align-items: center; gap: 14px; width: calc(100% - 40px); margin: 0 20px; padding: 16px 0;
  background: none; border: 0; border-bottom: 1px solid var(--graphite); color: #fff; text-align: left; text-decoration: none; font: inherit;
}
.more-insta { padding: 12px 0; }
.more-insta-icon { width: 36px; height: 36px; display: grid; place-items: center; background: var(--sunset); color: #000; border-top-left-radius: 10px; flex: none; }
.more-insta-icon svg { width: 20px; height: 20px; }
.more-follow { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border: 1px solid var(--sunset-flat); border-radius: 999px; }
.more-row-text { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }
.more-row-title { font-weight: 700; font-size: 14px; }
.more-row-sub { font-size: 11.5px; color: var(--steel); }
.more-chevron { width: 16px; height: 16px; color: var(--steel); flex: none; }

.tabbar.tabbar-4 { grid-template-columns: repeat(4, 1fr); }

/* Programmatisch scrollen (focus, scrollIntoView) mag het vaste app-vlak niet verschuiven: de sfeerlaag is groter dan het scherm. */
.app { overflow: hidden; overflow: clip; }