/* Eyefly Dataportaal — basis en pagina's.
 *
 * Wat het ontwerpsysteem niet levert: de grond onder de componenten (body,
 * links, een schermlezerklasse) en de opbouw van de pagina's die het portaal
 * zelf heeft (aanmelden, overzicht, projectpagina).
 *
 * Zelfde regel als componenten.css: elke waarde komt uit tokens.css, er staat
 * hier geen losse kleur, maat of hoek. Staat een waarde niet in de tokens, dan
 * is dat een ontwerpbeslissing die eerst in het systeem hoort (ONTWERP.md).
 *
 * Prefix pp- voor pagina's van het portaal, vw- voor de viewer (viewer.css).
 * Responsieve regels staan bij het component, niet onderaan.
 */

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

/* De hoogte van de topbalk: 64 px binnenkant plus 1 px rand. De werkruimte
   trekt hem van de schermhoogte af. Onder 860 px is de balk lager
   (componenten.css, .ey-top__in). */
:root { --topbalk: 65px; }
@media (max-width: 860px) { :root { --topbalk: 57px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--canvas); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
/* Een klasse met display:flex verslaat het hidden-attribuut, en dan neemt een
   verborgen paneel toch ruimte in. Dit staat er niet voor niets. */
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: inherit; }
a { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
main:focus { outline: none; }   /* alleen de skip-link zet hier focus, met een ander doel */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-only--focus:focus {
  position: fixed; left: var(--space-3); top: var(--space-3); z-index: 100;
  width: auto; height: auto; margin: 0; padding: var(--space-2) var(--space-4);
  clip: auto; overflow: visible;
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-raised); text-decoration: none;
}

/* Iconen: 16 px, lijndikte 1,5, ronde uiteinden, kleur van de tekst ernaast. */
.ey-icoon {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ey-icoon--groot { width: 24px; height: 24px; }

/* Een lijn tekst die alleen ink-subtle is, en een bijzin. */
.pp-stil { color: var(--ink-subtle); }
.pp-gedempt { color: var(--ink-muted); }

/* ── topbalk ───────────────────────────────────────────── */

/* Het merkteken is het vogeltje uit het logo. Het heeft zijn eigen kleuren, en
   daarmee is er in het portaal geen verloop meer nodig: het blauw-paarse vlak van
   het systeem (.ey-merk__teken) wordt niet gebruikt. */
.pp-vogel { display: block; height: 24px; width: auto; flex: none; }
.pp-merknaam { white-space: nowrap; }
@media (max-width: 860px) { .pp-merknaam { display: none; } }

/* De projectwisselaar in de werkruimte is hier een link, geen knop: componenten.css
   kent alleen de knop. En de titel moet ink blijven; .ey-wissel span kleurt de
   omhullende span ink-subtle, en de <b> erin erft dat. */
.ey-wissel { text-decoration: none; min-width: 0; flex: 0 1 auto; }
.ey-wissel > span { min-width: 0; overflow: hidden; }
.ey-wissel b { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Onder 860 px vervalt de tweede regel van de wisselaar en blijft de naam met een
   ellips (Projectwisselaar.md). "Alle projecten" vervalt ook: het merkteken is al
   een link naar het overzicht, en de balk is te smal voor beide. */
@media (max-width: 860px) {
  .ey-wissel .data-sm { display: none; }
  .pp-alle { display: none; }
}

/* ── aanmelden ─────────────────────────────────────────── */

.pp-inlog {
  min-height: calc(100vh - var(--topbalk)); min-height: calc(100dvh - var(--topbalk));
  display: grid; place-items: center; padding: var(--space-6) var(--space-4);
}
.pp-inlog .ey-kaart { width: 100%; max-width: 420px; padding: var(--space-6); }
.pp-inlog .ey-kaart > * + * { margin-top: var(--space-4); }
.pp-inlog .ey-knop { width: 100%; }
/* De foutmelding staat gereserveerd (min-height in .ey-veld__fout), zodat het
   formulier niet verspringt zodra er iets misgaat. */
.pp-inlog .ey-veld__fout { margin-top: 0; }

/* ── overzicht ─────────────────────────────────────────── */

/* Het overzicht is breder dan een gewone pagina: links de modellen, rechts een kolom
   (ONTWERP.md, "De opbouw"). Tekst en tabellen blijven op hun eigen breedte. */
.pp-breed, .pp-top--breed .ey-top__in { max-width: 1640px; }
.pp-top--breed .ey-top__in { padding: 0 var(--space-6); }   /* zelfde zijmarge als .ey-pagina */
.pp-overzicht__kop {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.pp-overzicht__kop .lead { margin-top: var(--space-2); }
.pp-overzicht__kop .ey-chiprij { padding-top: var(--space-2); }
.pp-overzicht__rooster {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-6);
  align-items: start; margin-top: var(--space-6);
}
@media (max-width: 1180px) { .pp-overzicht__rooster { grid-template-columns: minmax(0, 1fr); } }
.pp-zij > * + * { margin-top: var(--space-5); }
.pp-zij .ey-sectiekop { align-items: center; }
.pp-levlijst { margin-top: var(--space-2); }
a.pp-lev { color: inherit; text-decoration: none; }
a.pp-lev:hover .ey-levering__naam b { text-decoration: underline; text-underline-offset: 3px; }
.pp-lev .ey-levering__naam span { overflow-wrap: anywhere; }
.pp-lev .ey-levering__grootte { white-space: nowrap; }

/* Een tegel zonder posterframe toont een fijn puntenraster in plaats van een leeg
   vlak: de tegel hoort naar een puntenwolk te verwijzen, en het beeld zelf komt pas
   als het per opname is vastgelegd. Het raster is een tint van chrome, dus in beide
   thema's hetzelfde, en verdwijnt zodra er een echt beeld is (geen klasse meer). */
.pp-tegel--zonder-beeld {
  background: radial-gradient(circle, var(--chrome-hover) 1.5px, transparent 2px) 0 0 / 14px 14px, var(--stage);
}

/* De hele tegel is klikbaar via de naam; de acties liggen erboven, zodat er
   geen link in een link staat. Een <a> om de tegel heen met knoppen erin is
   ongeldig en leest een schermlezer als één lange regel voor. */
.pp-tegel__naam { text-decoration: none; }
.pp-tegel__naam:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-tegel__naam::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-xl); }
.pp-tegel__naam:focus-visible { outline: none; }
.pp-tegel__naam:focus-visible::after { outline: 2px solid var(--chrome-accent); outline-offset: -2px; }
.ey-modeltegel__acties { position: relative; z-index: 1; }
.ey-modeltegel__acties .ey-knop:focus-visible { outline-color: var(--chrome-accent); }
/* De tegel is in beide thema's donker. De primaire knop is in het lichte thema
   navy (action) en verdwijnt dan op het donkere vlak; op de tegel krijgt hij daarom
   de chrome-accentkleur, zoals de actieve stand in de gereedschapsbalk. */
.ey-modeltegel__acties .ey-knop:not([data-soort]) { background: var(--chrome-accent); color: var(--stage); }
.ey-modeltegel__acties .ey-knop:not([data-soort]):hover { background: var(--chrome-ink); }

/* ── projectpagina ─────────────────────────────────────── */

.pp-project__terug { margin: 0 0 var(--space-3) calc(var(--space-2) * -1); }
.pp-project__kop {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  align-items: flex-end; justify-content: space-between;
}
.pp-project__kop > div { flex: 1 1 560px; min-width: 0; }
.pp-project__kop h1 { margin-bottom: var(--space-4); overflow-wrap: anywhere; }

.pp-opnamen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3);
}
.pp-opname {
  display: block; height: 100%; padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none;
}
a.pp-opname:hover { border-color: var(--line-control); }
.pp-opname[aria-current="true"] { border-color: var(--accent-ink); background: var(--accent-surface); }
.pp-opname b { display: block; font-weight: 500; }
.pp-opname span { display: block; color: var(--ink-subtle); margin-top: var(--space-1); }
/* ink-subtle haalt op accent-surface in het lichte thema 4,27 tegen een norm van
   4,5: de tint eronder maakt het vlak donkerder. Gemeten, niet gezien. */
.pp-opname[aria-current="true"] span { color: var(--ink-muted); }

.pp-scroll { overflow-x: auto; }
.pp-bestand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pp-bestand__soort {
  flex: none; min-width: 42px; padding: 3px var(--space-1); text-align: center;
  border: 1px solid var(--line-control); border-radius: var(--radius-sm); color: var(--ink-subtle);
}
.pp-bestand b { display: block; font-weight: 500; color: var(--ink); }
.pp-bestand span:not(.pp-bestand__soort) { display: block; color: var(--ink-subtle); overflow-wrap: anywhere; }
.pp-acties { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.pp-acties .ey-knop { min-height: 34px; }
.ey-tabel [data-kolom="actie"] { width: auto; }

/* ── laden en fouten ───────────────────────────────────── */

.pp-laden .ey-modelraster { margin-top: var(--space-6); }
.pp-melding { max-width: 720px; margin: var(--space-7) auto 0; }
.pp-melding .ey-leeg { padding: var(--space-8) var(--space-5); }

/* ── werkruimte: de pagina om de viewer heen ───────────── */

/* De viewer vult het scherm onder de topbalk en scrolt de pagina niet. */
.pp-hoofd--werkruimte { height: calc(100vh - var(--topbalk)); height: calc(100dvh - var(--topbalk)); }
.pp-hoofd--werkruimte > .ey-werkruimte { height: 100%; }