/* Het rapport van de e-mailscan.

   Alles wat telt staat in het eerste scherm: de ring met de totaalscore,
   de vier categorieën ernaast, en het kostenplaatje er direct onder. De
   uitgebreide bevindingen staan in een uitklapper, zodat ze bereikbaar
   zijn zonder de eerste blik te vullen.

   Geen rood in de statuskleuren. Een scan die alles alarmerend kleurt om
   druk op te bouwen, prikt een marketeer zo doorheen -- en dat is hier
   de doelgroep. */

@layer components {
  /* Ring en categorieën naast elkaar; op een smal scherm onder elkaar. */
  .rapport__kop {
    display: grid;
    gap: var(--space-l);
    align-items: center;
    padding: var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow-card);
  }

  @media (min-width: 46rem) {
    .rapport__kop {
      grid-template-columns: minmax(15rem, 22rem) 1fr;
      padding: var(--space-l);
    }
  }

  /* Op een breed scherm staan de categorieën en het oordeel naast
     elkaar in plaats van onder elkaar, zodat de ring niet in zijn eentje
     een halve pagina hoogte vult. */
  @media (min-width: 64rem) {
    .rapport__kop {
      grid-template-columns: minmax(15rem, 20rem) minmax(17rem, 1.1fr) minmax(15rem, 1fr);
      gap: var(--space-l);
      padding: var(--space-l) var(--space-xl);
    }

    .rapport__oordeel {
      margin-block-start: 0;
      align-self: center;
      padding: var(--space-m);
    }
  }

  .rapport__ring {
    display: block;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
  }

  .rapport__segment {
    fill: none;
    stroke-width: 22;
  }

  .rapport__segmentlabel {
    fill: var(--color-on-accent);
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    text-anchor: middle;
  }

  .rapport__totaallabel {
    fill: var(--color-muted);
    font-family: var(--font-body);
    font-size: 9px;
    text-anchor: middle;
  }

  .rapport__totaal {
    fill: var(--color-accent);
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    text-anchor: middle;
  }

  /* Categorieën naast de ring. De naam mag de ruimte opvullen, maar het
     percentage en het stempel blijven rechts tegen elkaar staan in
     plaats van uit elkaar getrokken over de hele kolom. */
  .rapport__categorieen {
    margin: 0;
    padding: 0;
    list-style: none;
    align-self: center;
  }

  .rapport__categorie {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--space-xs);
    align-items: center;
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--color-line);
  }

  .rapport__categorie:last-child {
    border-block-end: 0;
  }

  .rapport__punt {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: var(--radius-pill);
  }

  .rapport__naam {
    font-family: var(--font-display);
    font-weight: 600;
  }

  .rapport__percentage {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .rapport__stempel {
    padding: 0.15rem var(--space-2xs);
    border-radius: var(--radius-pill);
    font-size: var(--step--1);
    font-weight: 700;
    white-space: nowrap;
  }

  /* Drie tinten met een taak: goed, aandacht, prioriteit. */
  .is-goed .rapport__punt,
  .rapport__punt.is-goed {
    background: var(--color-mint);
  }

  .is-goed .rapport__stempel,
  .rapport__stempel.is-goed {
    background: color-mix(in oklch, var(--color-mint) 16%, var(--color-bg));
    color: color-mix(in oklch, var(--color-mint) 70%, var(--color-ink));
  }

  .is-aandacht .rapport__punt,
  .rapport__punt.is-aandacht {
    background: var(--color-accent);
  }

  .is-aandacht .rapport__stempel,
  .rapport__stempel.is-aandacht {
    background: var(--color-surface);
    color: var(--color-accent-strong);
  }

  .is-prioriteit .rapport__punt,
  .rapport__punt.is-prioriteit {
    background: color-mix(in oklch, var(--color-ink) 45%, var(--color-bg));
  }

  .is-prioriteit .rapport__stempel,
  .rapport__stempel.is-prioriteit {
    background: color-mix(in oklch, var(--color-ink) 8%, var(--color-bg));
    color: var(--color-ink);
  }

  .rapport__oordeel {
    margin-block-start: var(--space-m);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-s);
    background: var(--color-surface);
  }

  .rapport__oordeel h3 {
    margin: 0 0 var(--space-3xs);
    font-size: var(--step-1);
  }

  .rapport__oordeel p {
    margin: 0;
    color: var(--color-muted);
  }

  /* Kosten: drie cijfers naast elkaar, meteen te overzien. */
  .rapport__kosten {
    margin-block-start: var(--space-m);
  }

  .rapport__tegels {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  }

  .rapport__tegel {
    padding: var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg);
  }

  .rapport__tegel--nu {
    background: var(--color-surface);
  }

  .rapport__tegel--hh {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    align-items: center;
    justify-content: space-between;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card);
  }

  /* De tekst mag krimpen tot ongeveer twintig rem; daaronder springt de
     actiekolom eronder in plaats van ernaast. */
  .rapport__tegelinhoud {
    flex: 1 1 20rem;
    min-width: 0;
  }

  .rapport__tegelactie {
    flex: 0 1 auto;
    text-align: end;
  }

  .rapport__tegelnoot {
    margin: var(--space-2xs) 0 0;
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  /* Staat de tegel in het raster van drie, dan is er geen ruimte naast
     de tekst en hoort alles gewoon onder elkaar. */
  @media (max-width: 63.99rem) {
    .rapport__tegelactie {
      flex-basis: 100%;
      text-align: start;
    }
  }

  .rapport__tegelkop {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--step--1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .rapport__bedrag {
    margin: var(--space-3xs) 0 0;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .rapport__tegel--hh .rapport__bedrag {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .rapport__tegeltekst {
    margin: var(--space-2xs) 0 0;
    color: var(--color-muted);
    font-size: var(--step--1);
    line-height: 1.5;
  }

  .rapport__kantel {
    margin-block-start: var(--space-s);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-s);
    background: var(--color-surface);
    font-size: var(--step--1);
  }

  .rapport__voetnoot {
    margin-block-start: var(--space-2xs);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  /* Uitklapper met alle bevindingen */
  .rapport__meer {
    margin-block-start: var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg);
  }

  .rapport__meer > summary {
    padding: var(--space-m);
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    list-style: none;
  }

  .rapport__meer > summary::-webkit-details-marker {
    display: none;
  }

  .rapport__meer > summary::after {
    content: ' \25BE';
    color: var(--color-accent);
  }

  .rapport__meer[open] > summary::after {
    content: ' \25B4';
  }

  .rapport__meer > div {
    padding: 0 var(--space-m) var(--space-m);
  }
}