/* ==========================================================================
   pages/about.css — de over-pagina
   #why: de pixelbol zelf staat in styles.css en main.js (.ps*); hier alleen
   het aanwijzen van een probleem en het stuk oplossing dat erbij hoort.
   #counted: de getallenband. #limits: wat we niet beweren, doorgestreept.
   Nieuwe klassen beginnen met ab-.
   ========================================================================== */

/* ---------- #why: een probleem kiezen ---------- */

/* main.js tekent de lijnen vanaf de rechterkant van .problem-tab: de maat van
   het label verandert dus nooit, alleen de kleur. */
.ab-ps .problem { transition: opacity .35s ease; }
.js .ab-ps .problem { cursor: pointer; }
.ab-ps .problem-tab {
  color: var(--ink);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.ab-ps .problem-tab[role="button"]:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-sm); }
.ab-ps .problem-tab[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.ab-ps .problem p { transition: color .3s ease; }
.ab-ps .problem.is-on p { color: var(--ink); }
.ab-ps[data-ab-on] .problem:not(.is-on) { opacity: .42; }

/* het stuk oplossing dat bij het gekozen probleem hoort blijft staan */
.ab-ans { transition: opacity .35s ease; }
.ab-ps[data-ab-on="1"] .ab-ans:not([data-for="1"]),
.ab-ps[data-ab-on="2"] .ab-ans:not([data-for="2"]) { opacity: .32; }

/* de lijn van dat probleem naar de bol: sterker, en hij stroomt naar de bol */
.ab-ps .ps-lines [data-ab-for] { transition: stroke-opacity .3s ease, stroke-width .3s ease, opacity .3s ease, r .3s ease; }
.ab-ps[data-ab-on="1"] .ps-lines path[data-ab-for="1"],
.ab-ps[data-ab-on="2"] .ps-lines path[data-ab-for="2"] {
  stroke-opacity: .9;
  stroke-width: 1.6px;
  stroke-dasharray: 5 7;
  animation: ab-flow .8s linear infinite;
}
.ab-ps[data-ab-on="1"] .ps-lines path[data-ab-for="2"],
.ab-ps[data-ab-on="2"] .ps-lines path[data-ab-for="1"] { stroke-opacity: .12; }
.ab-ps[data-ab-on="1"] .ps-lines circle[data-ab-for="1"],
.ab-ps[data-ab-on="2"] .ps-lines circle[data-ab-for="2"] { r: 7px; }
.ab-ps[data-ab-on="1"] .ps-lines circle[data-ab-for="2"],
.ab-ps[data-ab-on="2"] .ps-lines circle[data-ab-for="1"] { opacity: .35; }
@keyframes ab-flow { to { stroke-dashoffset: -12; } }

/* Welk stuk van de oplossing een probleem beantwoordt. Voor schermlezers staat
   het er altijd; op een smal scherm (waar de oplossing onder de bol staat, uit
   beeld) ook zichtbaar onder het gekozen probleem. */
.ab-fix {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 899px) {
  .ab-ps .problem.is-on .ab-fix {
    position: static;
    width: auto;
    height: auto;
    max-width: 44ch;
    margin: 14px 0 0;
    padding: 11px 14px 12px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.5;
    animation: ab-in .35s cubic-bezier(.2, .8, .2, 1) both;
  }
}
@keyframes ab-in { from { opacity: 0; transform: translateY(-4px); } }

/* Zonder JavaScript is er geen bol om de oplossing op te zetten (main.js zet
   hem erop): dan staat de oplossing gewoon naast de problemen, in inkt. */
html:not(.js) .ab-ps .ps-solution {
  position: static;
  align-self: center;
  justify-self: center;
  max-width: 42ch;
  color: var(--ink);
}
html:not(.js) .ab-ps .ps-solution p { color: var(--ink-2); text-shadow: none; }

/* de uitleg staat er alleen met JavaScript: zonder doet aanwijzen niets */
.ab-hint { display: none; }
.js .ab-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--tag);
}
.js .ab-hint::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}
@media (min-width: 900px) {
  /* los van de verdeling in de kolom, zodat de labels (en dus de lijnen) niet verschuiven */
  .js .ab-hint { position: absolute; left: 0; bottom: 0; }
}

/* ---------- #counted: de getallenband ---------- */

.ab-ledger {
  position: relative;
  padding: clamp(8px, 1.4vw, 20px) clamp(8px, 1.4vw, 20px) clamp(16px, 2vw, 26px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.ab-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .ab-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ab-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ab-cell {
  --pad: clamp(12px, 1.4vw, 20px);
  position: relative;
  flex: 1 0 auto;                  /* even hoog in een rij, zodat de kleur bij aanwijzen overal gelijk is */
  padding: clamp(18px, 2vw, 28px) var(--pad) clamp(16px, 1.8vw, 24px);
  border-radius: 20px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease;
}
html:not(.js) .ab-cell { flex: none; }   /* zonder JavaScript staat de uitleg er direct onder */
.ab-cell[role="button"] { cursor: pointer; }
.ab-cell[role="button"]:focus-visible { outline-offset: -2px; }
/* bovenaan elke cel een haarlijn, met een streep in de sectiekleur die meeloopt
   terwijl het getal optelt, en die het gekozen getal aanwijst */
.ab-cell::before,
.ab-cell::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pad);
  right: var(--pad);
  height: 1px;
  background: var(--line-2);
}
.ab-cell::after {
  top: -1px;
  height: 3px;
  border-radius: 3px;
  background: var(--c);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), opacity .6s ease;
}
.ab-stat.is-counting .ab-cell::after { opacity: 1; transform: scaleX(1); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; }
.ab-stat.is-counted .ab-cell::after { transform: scaleX(1); }
.ab-cell.is-peek,
.ab-cell[aria-pressed="true"] { background: var(--tint); }
.ab-cell.is-peek::after,
.ab-cell[aria-pressed="true"]::after { opacity: 1; transform: scaleX(1); transition-duration: .45s, .2s; }

/* Gewone (proportionele) cijfers: de tabelcijfers van Mona Sans hebben een
   doorgestreepte nul en een 1 met voet, dat leest als code, niet als kop. */
.ab-num,
.ab-num .count {
  font-variant-numeric: normal;
}
.ab-num {
  display: block;
  margin-left: -.045em;            /* grote cijfers optisch op de lijn van het label */
  color: var(--ink);
  font: 500 clamp(48px, 7vw, 112px)/.84 var(--sans);
  letter-spacing: -.055em;
  white-space: nowrap;
}
/* twee kolommen: daar mogen de cijfers naar verhouding groter */
@media (max-width: 899px) {
  .ab-num { font-size: clamp(52px, 17vw, 96px); }
}
.ab-label {
  display: block;
  max-width: 17ch;
  margin-top: clamp(12px, 1.3vw, 18px);
  color: var(--tag);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.35;
}

/* wat er geteld is: zonder JavaScript onder elk getal, met JavaScript in de
   regel onder de band (en voor schermlezers bij het getal zelf) */
.ab-what {
  margin: 0 0 10px;
  padding: 0 clamp(12px, 1.4vw, 20px);
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.45;
}
.js .ab-what {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ab-readout { display: none; }
.js .ab-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  min-height: calc(2 * 1.5em + 18px);
  margin: clamp(12px, 1.8vw, 20px) clamp(12px, 1.4vw, 20px) 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: clamp(14px, 1.2vw, 15.5px);
  line-height: 1.5;
}
.ab-readout-key {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 600;
}
.ab-readout-key::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
}
.ab-readout-key:empty { display: none; }
.ab-readout-text { flex: 1 1 320px; min-width: 0; }

/* ---------- #limits: wat we niet beweren ---------- */

.ab-limits { align-items: stretch; }
.ab-think { position: relative; }
.ab-think-in {
  position: relative;
  height: clamp(240px, 70vw, 360px);
}
/* naast de lijst blijft het karakter in beeld terwijl je leest */
@media (min-width: 900px) {
  .ab-think-in {
    position: sticky;
    top: 84px;
    height: min(600px, 100vh - 110px);
    min-height: 420px;
  }
}
.ab-think-char { position: absolute; inset: 0; }
.ab-think-bubble {
  max-width: 220px;
  border-radius: 14px 14px 14px 4px;
  transform-origin: 0 100%;
}

.ab-limits-card {
  padding: clamp(4px, .8vw, 10px) clamp(20px, 2.8vw, 40px);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.ab-limit-list { margin: 0; padding: 0; list-style: none; }
.ab-limit { padding: clamp(16px, 1.9vw, 24px) 0; }
.ab-limit + .ab-limit { border-top: 1px solid var(--line); }

/* De streep is een achtergrond, zodat hij van links naar rechts kan groeien
   (ook over twee regels). Zonder JavaScript en met minder beweging staat hij er al. */
.ab-limit del {
  color: var(--ink-3);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.5;
  text-decoration: none;
  background: linear-gradient(var(--red), var(--red)) no-repeat 0 58% / 100% 2px;
  transition: background-size .8s cubic-bezier(.65, 0, .35, 1) var(--ab-d, 0s), color .8s ease var(--ab-d, 0s);
}
.js .ab-limit:not(.is-struck) del {
  color: var(--ink-2);
  background-size: 0% 2px;
}
.ab-real {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font: 500 clamp(21px, 2.1vw, 30px)/1.16 var(--sans);
  letter-spacing: -.025em;
  text-wrap: balance;
}

@media (forced-colors: active) {
  .ab-limit del { text-decoration: line-through; background: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .ab-limit:not(.is-struck) del { color: var(--ink-3); background-size: 100% 2px; }
  .ab-ps .ps-lines path[data-ab-for] { animation: none !important; }
}