/* Sets · home-hero.css
   Stijl voor de heldkaart bovenaan Vandaag. Zie js/home-hero.js.

   Twee designregels sturen alles hieronder:

   G1 — één held per scherm. Deze kaart is met opzet de grootste van de
   home: meer lucht, meer contrast en een groter getal dan de blokken
   eronder. Als hij niet duidelijk wint, doet hij zijn werk niet.

   G2 — grote tabulaire getallen. Het belangrijkste getal is minstens
   40px, mono en `tabular-nums`, de labels zijn klein, hoofdletters en
   ruim gespatieerd. Een cijfer dat bij het aftellen verspringt leest als
   ruis; vandaar tabulair, ook op de metaregel.

   Kleuren uitsluitend uit de tokens van styles/polish.css, zodat licht en
   donker met dezelfde regels meebewegen. Alleen de zeldzame toestand (een
   PR) mag goud — designregel G3. */

.home-hero-card {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 20px;
  border: 1px solid var(--sets-border);
  border-radius: 20px;
  background: var(--sets-surface-1);
  box-shadow: var(--sets-shadow-card);
  /* Tekstkleur komt uit het gedeelde token, niet uit --sets-accent: dat laatste
     is een vlakkleur en haalt in lichte modus 2,21:1 op wit. --sets-accent-text
     is per thema gezet (15:1 donker, 5,6:1 licht) en houdt één bron.
     Het streepje mag wél de vlakkleur houden: een grafisch element vraagt 3:1. */
  --home-hero-accent-text: var(--sets-accent-text);
  --home-hero-accent-line: var(--sets-accent);
}

/* Defect D4 uit de visuele audit. In lichte modus is --sets-accent #91bd11
   en dat haalt op wit 2.21:1 — AA vraagt 4.5:1 voor tekst en 3:1 voor een
   grafisch element. De bovenregel van deze kaart is de slechtst denkbare
   plek voor een kleur die je niet kunt lezen.

   Geen nieuwe hex (SCOPE-regel 5): het accent wordt met de tekstkleur van
   hetzelfde thema gemengd. Dat houdt de signaalkleur herkenbaar en levert
   5.0:1 voor de tekst en 3.9:1 voor het streepje op --sets-surface-1. Twee
   verhoudingen, omdat een streepje geen 4.5:1 hoeft en anders onnodig
   donker wordt. */
html:not(.dark) .home-hero-card {
  --home-hero-accent-line: color-mix(in srgb, var(--sets-accent) 70%, var(--sets-text));
}

/* Een smalle accentrand links in plaats van een gekleurd vlak: hij maakt
   van de kaart een aankondiging zonder de leesbaarheid van de tekst aan
   te tasten, in beide thema's. */
.home-hero-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--home-hero-accent-line);
}

/* De tip is de terugval en geen aankondiging: geen accentrand. */
.home-hero-card.is-tip::before {
  display: none;
}

.home-hero-card.is-pr::before,
.home-hero-card.is-recap::before {
  background: var(--sets-gold);
}

.home-hero-eyebrow {
  margin-bottom: 10px;
  color: var(--sets-text-3);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-hero-card.is-pr .home-hero-eyebrow {
  color: var(--sets-gold-text);
}

.home-hero-card.is-comeback .home-hero-eyebrow,
.home-hero-card.is-streak .home-hero-eyebrow,
.home-hero-card.is-ring .home-hero-eyebrow,
.home-hero-card.is-start .home-hero-eyebrow {
  color: var(--home-hero-accent-text);
}

/* ── Het getal ───────────────────────────────────────────────── */

.home-hero-figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.home-hero-value {
  color: var(--sets-text);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* G2: minstens 40px. `clamp` zodat een 320px-scherm hem niet laat
     afbreken en een brede telefoon er ruimte aan geeft. */
  font-size: clamp(40px, 13vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.home-hero-card.is-pr .home-hero-value {
  color: var(--sets-gold-text);
}

.home-hero-unit {
  color: var(--sets-text-3);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.home-hero-label {
  margin-bottom: 12px;
  color: var(--sets-text-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* ── De zin erbij ────────────────────────────────────────────── */

.home-hero-title {
  color: var(--sets-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.home-hero-body {
  margin-top: 6px;
  color: var(--sets-text-2);
  font-size: 13px;
  line-height: 1.5;
}

.home-hero-meta {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 10px;
  color: var(--sets-text-3);
  font-size: 12px;
  line-height: 1.3;
}

.home-hero-meta-number {
  color: var(--sets-text-2);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── De knop ─────────────────────────────────────────────────── */

/* Hoogstens twee knoppen, onder elkaar: de sessie bovenaan, de eigen actie
   van de kaart eronder in de rustige vorm. Zie actionButton() in
   js/home-hero.js voor wanneer welke. */
.home-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.home-hero-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--sets-button-from), var(--sets-button-to));
  color: var(--sets-accent-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.12s var(--sets-ease-out), filter 0.12s var(--sets-ease-out);
}

.home-hero-action:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}

.home-hero-action:focus-visible {
  outline: 2px solid var(--sets-focus);
  outline-offset: 2px;
}

/* De rustige vorm.

   Twee kaarten dragen hem op hun eigen actie omdat hij nergens anders past:
   goud is voor zeldzame dingen (G3), en een gevulde knop op een gouden
   accentrand maakt van de PR- en recapkaart een reclamebanner. Hun actie
   blijft omlijnd en het goud blijft van het getal.

   De startknop valt daar bewust buiten. Sinds de vaste knopbalk onderaan
   Vandaag weg is, is dat de enige weg naar een sessie; twee identiek
   omlijnde knoppen onder elkaar zouden geen rangorde meer hebben. */
.home-hero-action.is-quiet,
.home-hero-card.is-pr .home-hero-action.is-quiet,
.home-hero-card.is-recap .home-hero-action.is-quiet {
  background: transparent;
  border: 1px solid var(--sets-border-strong);
  color: var(--sets-text);
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-action {
    transition: none;
  }
  .home-hero-action:active {
    transform: none;
  }
}

/* ── Rangorde op de rest van de home ─────────────────────────────
   De held is de grootste kaart; de blokken die hetzelfde zeggen worden
   niet twee keer getekend. js/home-hero.js zet het attribuut op <html>,
   dus zonder die module verandert er hier niets.

   Alleen verbergen wat de held letterlijk overneemt: bij "vandaag
   gepland" en "vandaag getraind" draagt de held dezelfde boodschap én
   dezelfde startknop als de vandaag-kaart. Bij elke andere held blijft
   die kaart gewoon staan — hij zegt dan iets anders. */
html[data-home-hero="today_plan"] #home-today-card,
html[data-home-hero="trained_today"] #home-today-card {
  display: none;
}

/* ── De gedegradeerde tipkaart ───────────────────────────────────
   Woont hier en niet in styles/polish.css omdat het een gevolg van de
   held is: zodra er een held staat, krimpt de tip tot één regel. De
   basisregels van .home-tip-card blijven in polish.css staan; deze
   overschrijven ze op specificiteit, niet op laadvolgorde. */
.home-tip-card.is-compact {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--sets-surface-2);
  box-shadow: none;
}

.home-tip-card.is-compact .home-tip-eyebrow {
  margin-bottom: 2px;
  color: var(--sets-text-3);
}

.home-tip-card.is-compact .home-tip-title {
  margin-bottom: 0;
  overflow: hidden;
  color: var(--sets-text-2);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}