/* ============================================================
   Soluna — Almanak
   Het ontwerpsysteem, als één laag over de rest.

   ── Waarom deze laag hier apart staat ──────────────────────

   Almanak is geen nieuw thema maar een manier van weglaten: geen kaarten, geen
   schaduwen, geen gevulde vlakken. Alles staat op het zand en wordt gescheiden
   door een haarlijn.

   Die regel raakt bijna elk onderdeel, maar op precies dezelfde manier. Door hem
   hier bij elkaar te zetten in plaats van hem door components.css en agenda.css
   heen te weven, blijft zichtbaar wát Almanak is — en kun je hem er met één
   regel in index.html weer uit halen.

   ── Waarom dit bestand NIET wordt uitgerold ────────────────

   De tokens, de iconen, de ring en de maan komen uit de volledige Soluna-app en
   worden hierheen gekopieerd. Deze laag niet: hij verwijst naar `.leskaart`,
   `.beheerrij` en `.plekkaart`, en die bestaan daar niet. De opmaak van een
   scherm is per app anders; de taal van het ontwerp is dat niet.

   ── De zes regels ──────────────────────────────────────────

   1. Elk scherm opent met de RING: vijf segmenten, één opgelicht. Waar staat het
      jaar, en dus welk element nu aan de beurt is.
   2. Onder de ring: seizoen · element in wijde kapitalen, de titel in Cormorant,
      en hooguit één regel. Gecentreerd.
   3. Daaronder is alles links uitgelijnd, gescheiden door haarlijnen.
   4. Een element draagt nooit een vlak — alleen de ring en de tekens in goudlijn.
   5. Terracotta is het enige accent en betekent: dit kun je aantikken. Goud is
      lijn en teken. Olijf alleen voor 'gereserveerd'.
   6. De poort is nacht, de rest is licht.
   ============================================================ */

/* ============================================================
   1. De ring
   ============================================================ */

.ring { display: block; }
/* Het hele jaar, in vijf stille segmenten. */
.ring__jaar { stroke: var(--goud-2); opacity: 0.7; }
/* Waar we nu staan. Het enige dat oplicht. */
.ring__nu { stroke: var(--goud); }

/* ============================================================
   2. De kop van elk scherm
   ============================================================ */

.almanak-kop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-8) 0 0;
}

.almanak-kop__seizoen {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* Goud is hier tekst en geen lijn; --goud-tekst is de enige gouden tint die
     op zand genoeg contrast haalt. */
  color: var(--goud-tekst);
}

.almanak-kop__titel {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
}

.almanak-kop__lede {
  margin: 11px auto 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  /* 30 tekens is waar een regel nog in één blik te lezen is. */
  max-width: 30ch;
}

/* De haarlijn die de kop van de inhoud scheidt. */
.almanak-streep {
  height: 1px;
  background: var(--hairline);
  margin: var(--sp-7) 0 0;
  border: 0;
}

/* ============================================================
   3. Geen vlakken, geen schaduwen

   Alles wat een eigen vlak of een schaduw had, wordt een blok op het zand met
   een haarlijn eromheen. De toast en de voet van een sheet houden hun schaduw:
   die zweven echt boven de pagina, en dan is een schaduw informatie.
   ============================================================ */

.surface,
.detail-list,
.plekkaart {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   4. De lesregel

   Een les was een kaartje met een datumblok. In Almanak is het een regel: de
   dag links in Cormorant, de titel ernaast, en de haarlijn eronder.
   ============================================================ */

.leskaart {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
@media (hover: hover) {
  .leskaart:hover { background: transparent; box-shadow: none; }
}

/* Het datumblok wordt getal en weekdag onder elkaar, zonder doos eromheen. */
.leskaart__dag {
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
}

/* ============================================================
   5. Beheer

   Rijen tussen haarlijnen, en de staat van een les als kleine kapitalen in
   goud. Die stond in een gevulde pil — en terracotta betekent in dit systeem
   'dit kun je aantikken'. Een staat kun je niet aantikken, dus dat was een
   belofte die je breekt.
   ============================================================ */

.beheerrij {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.beheerrij__titel {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
}
.beheerrij__staat {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--goud-tekst);
}
.beheerrij--cancelled .beheerrij__staat { color: var(--text-tertiary); }

/* ============================================================
   6. Tabbladen en pillen
   ============================================================ */

/* Een gouden onderlijn in plaats van een gevulde pil in een gevulde goot. */
.tabs,
.segmented {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 0;
  gap: var(--sp-6);
}
.tab,
.segmented__item {
  background: transparent;
  border-radius: 0;
  min-height: 44px;
  /* De lijn van het actieve tabblad valt samen met de lijn onder de strip. */
  margin-bottom: -1px;
  border-bottom: 1.5px solid transparent;
}
.tab--actief,
.segmented__item.is-active {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-bottom-color: var(--goud);
  color: var(--text);
}

.chip {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--hairline);
}
.chip.is-active,
.chip[aria-pressed='true'] {
  background: var(--accent-wash);
  border-color: transparent;
  color: var(--accent);
}

/* ============================================================
   7. Velden

   Een opschrift in wijde kapitalen en één lijn eronder. Geen doos: die zou het
   enige gevulde vlak op een verder open scherm zijn.
   ============================================================ */

.input,
.textarea,
.select {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.input:focus,
.textarea:focus,
.select:focus {
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--accent);
  outline: none;
}

/* ============================================================
   8. De poort

   Welkom, inloggen en wachtwoord herstellen zijn nacht. Daar is de haarlijn
   licht in plaats van donker — een donkere lijn op een donkere grond is geen
   lijn.
   ============================================================ */

/* ── De grond ──────────────────────────────────────────────────────────

   `.screen--night` zet de KLEURTOKENS om in plaats van de onderdelen. Alles wat
   op zo'n scherm staat — velden, kaarten, randen, koppen — leest die tokens al,
   dus het wordt vanzelf donker. Zonder dat zou elk nieuw onderdeel op deze
   schermen opnieuw een uitzondering nodig hebben, en dan is de eerste die dat
   vergeet meteen een grijs vlak op een zwarte grond. */
/* Het blad dat omhoog schuift, zoals het reserveerformulier, hangt buiten het
   scherm aan <body>. Het erft de nacht dus niet vanzelf. `openSheet()` zet er
   `sheet--nacht` op als er een donker scherm onder ligt; dan krijgt het precies
   dezelfde tokens. Zonder dat schoof er een wit vlak over een donkere pagina.
   De tabbalk onderaan evenzo; die krijgt `tabbalk--nacht` van
   `kleurDeStatusbalk()` in app.js. */
.screen--night,
.sheet--nacht,
.tabbalk--nacht {
  /* De grond is dieper dan een gewone donkere modus: dit is dezelfde nacht als
     het welkomstscherm (#14110E), niet 'de app maar dan donker'. */
  --bg:             #14110E;
  --bg-elevated:    #1E1915;
  --bg-sunken:      #100D0B;
  --surface:        #221C17;
  --surface-muted:  #29221C;
  --text:           #F6ECE0;
  /* Iets lichter dan je zou verwachten, en dat is nagerekend en niet gegokt: de
     gloed rechtsboven maakt de grond onder de tekst lichter, en daar viel deze
     kleur op het helderste punt net onder 4,5:1. Een contrastmeter ziet dat niet
     — die leest achtergrondkleuren en geen verlopen. */
  --text-secondary: #D2C6B8;
  --text-tertiary:  #B6A99B;
  --text-on-accent: #14110E;
  --accent:         #D79A78;
  --accent-soft:    #C58763;
  --accent-wash:    #33291F;
  --border:         rgba(246, 236, 224, 0.12);
  --border-strong:  rgba(246, 236, 224, 0.22);
  --hairline:       rgba(246, 236, 224, 0.08);
  --overlay:        rgba(8, 6, 5, 0.62);
  --nav-bg:         rgba(20, 17, 14, 0.88);
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.38);
  --sh-md: 0 8px 26px -8px rgba(0, 0, 0, 0.55);
  --sh-lg: 0 20px 50px -18px rgba(0, 0, 0, 0.65);
}

/* ── Meer contrast gevraagd ─────────────────────────────────────────────

   Instellingen › Toegankelijkheid › 'Verhoog contrast' op een iPhone. Wie dat
   aanzet, ziet de zachte grijzen en de haarlijnen van de nacht slecht, en die
   zijn hier juist het ontwerp. Dan wordt de tweede tekst bijna wit en wordt
   een haarlijn een lijn die je ziet. De vorm blijft; alleen het licht gaat
   omhoog. */
@media (prefers-contrast: more) {
  .screen--night,
  .sheet--nacht,
  .tabbalk--nacht {
    --text-secondary: #ECE3D8;
    --text-tertiary:  #DCD1C4;
    --border:         rgba(246, 236, 224, 0.32);
    --border-strong:  rgba(246, 236, 224, 0.5);
    --hairline:       rgba(246, 236, 224, 0.28);
  }
}

.screen--night {
  position: relative;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
}


/* ── Het licht reist mee ───────────────────────────────────────────────

   `fixed` en niet `absolute`: de maan en de sterren blijven staan waar ze staan
   terwijl de inhoud eronder doorschuift. Je neemt het licht dus mee naar
   beneden, en daarom hoeft de onderkant geen eigen lamp te hebben.

   Geen scroll-handler en geen JavaScript: de browser tekent deze laag apart, dus
   het blijft vloeiend. */
.nightsky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(168% 108% at 97% -18%, rgba(255, 233, 204, 0.34), rgba(255, 226, 190, 0.12) 38%, transparent 82%);
}

/* De maan hoort bij de PAGINA en niet bij het beeld: hij staat bovenaan en
   scrolt weg, terwijl zijn licht bij je blijft. Dat moet zo — de schijf is bijna
   wit en de tekst loopt eroverheen; bleef hij staan, dan schuift er tekst dwars
   doorheen. */
.nightsky-moon {
  position: absolute;
  top: 0;
  right: 0;
  width: 210px; height: 210px;
  pointer-events: none;
}
.nightsky__moon {
  position: absolute;
  top: -55px;
  right: -18px;
  width: 210px; height: 210px;
}

.nightsky__stars { position: absolute; inset: 0; }
.nightsky__star {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #FFF6E6;
  opacity: 0.25;
  animation-name: sterlicht;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* Opzwellen, niet knipperen: op deze schermen leest of typt iemand iets, en
   beweging in de ooghoek kost aandacht. Elk sterretje heeft zijn eigen duur en
   vertraging, dus ze lopen nooit synchroon — dat is wat het levend maakt. */
@keyframes sterlicht {
  0%, 100% { opacity: 0.18; transform: scale(0.9); }
  50%      { opacity: 0.85; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .nightsky__star { animation: none; opacity: 0.5; }
}

/* De tekstkleur hoort bij de nacht, niet alleen de tokens. Een scherm zet hem
   hieronder zelf; een blad en de tabbalk niet, en dan erfde tekst zonder eigen
   kleur de inkt van <body>: donker op donker, zoals 'Betalen op locatie' in de
   bevestiging. */
.sheet--nacht,
.tabbalk--nacht { color: var(--text); }

/* De pagina achter een donker scherm, en de omhulling van de app die zijn eigen
   zandkleur heeft. Zie `kleurDeStatusbalk()` in app.js. */
html.pagina--nacht,
html.pagina--nacht body,
html.pagina--nacht .app-shell { background: #14110E; }

/* De inhoud boven de twee lichtlagen. Die twee zijn zelf uitgezonderd: ze zijn
   allebei absoluut of vast geplaatst, en `relative` zou dat overschrijven.

   De reserveerbalk van het lesscherm om precies dezelfde reden: die staat vast
   onderaan, boven de tabbalk. Toen het lesscherm donker werd, schoof hij anders
   mee met de pagina en verdween hij onder de laatste alinea. */
.screen--night > *:not(.nightsky):not(.nightsky-moon):not(.action-bar) { position: relative; }

.screen--night .almanak-kop__seizoen { color: var(--goud); }
.screen--night .ring__jaar { stroke: rgba(196, 160, 89, 0.38); }
.screen--night .almanak-streep { background: rgba(242, 235, 227, 0.10); }
.screen--night .input,
.screen--night .textarea { border-bottom-color: rgba(242, 235, 227, 0.16); }
@media (prefers-contrast: more) {
  .screen--night .almanak-streep { background: rgba(242, 235, 227, 0.3); }
  .screen--night .input,
  .screen--night .textarea { border-bottom-color: rgba(242, 235, 227, 0.5); }
}

/* De maan staat in de kop van de poort, gecentreerd boven de titel. */
.screen--night .login__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.screen--night .login__head > * { width: 100%; }
.screen--night .login__head .lede { margin-inline: auto; max-width: 32ch; }