/* Sets · week-recap.css
   Stijl voor de weekrecapkaart. Zie js/week-recap.js.

   Dit is de enige kaart op de home die maar één keer per week verschijnt,
   dus mag hij de grootste zijn (designregel G1: één held per scherm — op
   zondagavond is dit die held). Het aantal sessies is het ene grote getal,
   mono en `tabular-nums`, zodat een 1 evenveel ruimte krijgt als een 8 en
   het cijfer niet verspringt terwijl het optelt (G2).

   Alle kleuren komen uit de tokens van styles/polish.css; die laag is echt
   themagevoelig. Waar een token niet volstaat — doorschijnende vlakken die
   in licht anders moeten wegen — staat onderaan een `html:not(.dark)`-blok. */

/* ---------- De host ----------

   `#home-week-recap` draagt `px-5 pb-5`, en padding valt niet weg op een
   leeg blok: een lege `<div>` met `padding-bottom: 1.25rem` is 20px hoog.
   De kaart staat ongeveer 138 van de 168 uur per week níét op het scherm,
   dus dat zou de rest van de week een gat op de home zijn.

   De klasse `hidden` uit tailwind.css is de hoofdregel — die zet
   `js/week-recap.js` (en die staat ook in de markup, zodat de host al
   verborgen is vóór het eerste script draait, net als
   `#draft-resume-banner`). De `:empty`-regel hieronder is het vangnet voor
   het geval de host ooit zonder die klasse geplaatst wordt: leeg is leeg,
   ongeacht wie er vergat te schakelen. */

#home-week-recap:empty {
  display: none;
}

.week-recap-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid var(--sets-border-strong);
  background: var(--sets-surface-1);
  box-shadow: var(--sets-shadow-card);
  padding: 0.875rem 1rem 1rem;
}

/* Een dunne accentrand bovenaan maakt er een aankondiging van in plaats van
   nog een vlak in de rij. Alleen hier, want alleen deze kaart is zeldzaam. */
.week-recap-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--sets-accent) 0%,
    var(--sets-accent-strong) 55%,
    transparent 100%
  );
}

/* De terugkeerweek (nul sessies na een volle week) krijgt geen accent: er
   valt niets te vieren, alleen iets te hervatten. */
.week-recap-card.is-comeback::before {
  background: var(--sets-border-strong);
}

/* ---------- Kop ---------- */

.week-recap-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.week-recap-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sets-accent-text);
}

.week-recap-card.is-comeback .week-recap-kicker {
  color: var(--sets-text-3);
}

.week-recap-range {
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sets-text-3);
  text-align: right;
}

.week-recap-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -6px -4px 0;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  color: var(--sets-text-3);
  background: transparent;
  transition: background-color 0.15s var(--sets-ease-out), color 0.15s var(--sets-ease-out);
}

.week-recap-close:active {
  background: var(--sets-surface-3);
  color: var(--sets-text);
}

.week-recap-close:focus-visible {
  outline: 2px solid var(--sets-focus);
  outline-offset: 2px;
}

/* ---------- Het ene grote getal ---------- */

.week-recap-headline {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 0.5rem;
  margin-top: 0.5rem;
}

.week-recap-figure {
  grid-row: 1 / span 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--sets-text);
}

.week-recap-figure-label {
  align-self: end;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sets-text-3);
}

/* De vergelijking met vorige week staat direct onder het getal: dát is wat
   de kaart persoonlijk maakt, niet het getal zelf. */
.week-recap-delta {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.15rem;
  font-size: 12px;
  line-height: 1.3;
  color: var(--sets-text-2);
}

.week-recap-delta-figure {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--sets-text-2);
}

.week-recap-delta.is-up .week-recap-delta-figure {
  color: var(--sets-accent-text);
}

/* Minder dan vorige week is geen fout en krijgt dus geen alarmkleur —
   alleen minder nadruk. */
.week-recap-delta.is-down .week-recap-delta-figure,
.week-recap-delta.is-flat .week-recap-delta-figure {
  color: var(--sets-text-3);
}

.week-recap-delta.is-first {
  color: var(--sets-text-3);
}

/* ---------- Drie kleinere getallen ---------- */

.week-recap-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.week-recap-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.75rem;
  border: 1px solid var(--sets-border);
  background: var(--sets-surface-2);
}

.week-recap-stat-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 19px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--sets-text);
}

/* Goud is voorbehouden aan het zeldzame (designregel G3): PR's, verder niets. */
.week-recap-stat.is-gold .week-recap-stat-value {
  color: var(--sets-gold-text);
}

.week-recap-stat-unit {
  margin-left: 0.15rem;
  font-size: 11px;
  font-weight: 500;
  color: var(--sets-text-3);
}

.week-recap-stat-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sets-text-3);
}

/* ---------- Beste set ---------- */

.week-recap-best {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--sets-border);
  font-size: 12.5px;
  line-height: 1.3;
}

.week-recap-best-label {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sets-text-3);
}

/* De oefeningnaam is gebruikersinvoer en mag lang zijn; hij wijkt, het
   getal ernaast niet. */
.week-recap-best-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sets-text-2);
}

.week-recap-best-value {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--sets-text);
}

.week-recap-best.is-pr .week-recap-best-value {
  color: var(--sets-gold-text);
}

/* ---------- Etiketten ---------- */

.week-recap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.week-recap-tag {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--sets-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sets-text-2);
  background: var(--sets-surface-2);
}

.week-recap-tag.is-goal {
  border-color: color-mix(in srgb, var(--sets-accent) 45%, transparent);
  color: var(--sets-accent-text);
}

/* ---------- Delen ---------- */

.week-recap-share {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  margin-top: 0.875rem;
  border-radius: 0.875rem;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sets-accent-ink);
  background: linear-gradient(180deg, var(--sets-button-from), var(--sets-button-to));
  transition: transform 0.12s var(--sets-ease-out), filter 0.12s var(--sets-ease-out);
}

.week-recap-share:active {
  transform: scale(0.97);
  filter: brightness(0.95);
}

.week-recap-share:focus-visible {
  outline: 2px solid var(--sets-focus);
  outline-offset: 2px;
}

/* De terugkeerweek deelt niemand; die knop wordt een rustige actie. */
.week-recap-card.is-comeback .week-recap-share {
  color: var(--sets-text);
  background: var(--sets-surface-3);
}

/* ---------- Lichte modus ----------
   De tokens hierboven schakelen zelf mee; alleen de plekken waar een token
   niet genoeg is staan hier. Thema = de `dark`-class op <html>. */

html:not(.dark) .week-recap-card {
  background: var(--sets-surface-1);
  border-color: var(--sets-border);
}

/* In licht is een vol accent als bovenrand te schreeuwerig naast de witte
   kaarten eromheen; iets zachter houdt dezelfde functie. */
html:not(.dark) .week-recap-card::before {
  background: linear-gradient(
    90deg,
    var(--sets-accent) 0%,
    color-mix(in srgb, var(--sets-accent) 40%, transparent) 55%,
    transparent 100%
  );
}

html:not(.dark) .week-recap-stat {
  background: var(--sets-surface-2);
  border-color: var(--sets-border);
}

/* ---------- Smalle schermen ----------
   Onder 360px staan drie tegels naast elkaar te dringen; het grote getal
   levert dan als eerste ruimte in, niet de labels. */

@media (max-width: 360px) {
  .week-recap-figure {
    font-size: 46px;
  }

  .week-recap-stats {
    gap: 0.375rem;
  }

  .week-recap-stat {
    padding: 0.45rem 0.5rem;
  }

  .week-recap-stat-value {
    font-size: 17px;
  }
}

/* Wie beweging uitzet, krijgt geen indruk-animaties terug via deze kaart. */
@media (prefers-reduced-motion: reduce) {
  .week-recap-close,
  .week-recap-share {
    transition: none;
  }

  .week-recap-share:active {
    transform: none;
  }
}