/*
 * Gedeelde stijl van de camerapagina en de ontwikkelaarsweergave: kleuren,
 * letters, knoppen, invoervelden en het titelblok. De zorgapp (zorg.html) heeft
 * een eigen, lichtere stijl.
 *
 * Keuze: geel betekent alleen "mogelijk gevallen" en rood alleen "alarm". De
 * personenkleuren mijden rood en geel, zodat een persoon nooit op een melding lijkt.
 */

@font-face { font-family: "Barlow"; src: url("/static/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/static/fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/static/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/static/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Calque: inkt op licht papier. */
  --grond: #f1efe9;
  --vlak: #e8e5dd;
  --inkt: #1b1d1f;
  --inkt-2: #55595d;
  --inkt-3: #8a8e91;
  --lijn: #cfcbc1;
  --lijn-sterk: #1b1d1f;
  --geel: #ecc53c;
  --op-geel: #1b1d1f;
  --rood: #c3301b;
  --op-rood: #fbf7f1;
  /* Personen. Uit OKLCH (blauw 255°, groen 150°, paars 310°, petrol 200°,
     indigo 275°, mos 130°), elk minstens 3:1 op grond en vlak. */
  --persoon-a: #2863ab;
  --persoon-b: #2f8247;
  --persoon-c: #713995;
  --persoon-d: #188489;
  --persoon-e: #39417d;
  --persoon-f: #4c682e;

  --letter: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --smal: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  --ease-uit: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Lichtdruk: dezelfde tekening in negatief, voor de nachtdienst. */
    --grond: #16181a;
    --vlak: #1e2124;
    --inkt: #ebe8e0;
    --inkt-2: #a2a6a9;
    --inkt-3: #6f7478;
    --lijn: #313539;
    --lijn-sterk: #ebe8e0;
    --geel: #e3bd35;
    --op-geel: #16181a;
    --rood: #d23c24;
    --op-rood: #fbf7f1;
    --persoon-a: #6fa7ee;
    --persoon-b: #76cf8a;
    --persoon-c: #be8ce1;
    --persoon-d: #71d0d5;
    --persoon-e: #7f8cd5;
    --persoon-f: #8aab67;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font: 400 16px/1.45 var(--letter);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--inkt);
}
::selection { background: var(--geel); color: var(--op-geel); }
:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--lijn) transparent; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }

/* --- knoppen ------------------------------------------------------------- */

.knop {
  --k-grond: transparent;
  --k-inkt: var(--inkt);
  --k-rand: var(--lijn-sterk);
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 18px;
  border: 1.5px solid var(--k-rand); border-radius: 3px;
  background: var(--k-grond); color: var(--k-inkt);
  font: 600 17px/1 var(--letter);
  cursor: pointer; user-select: none; text-decoration: none;
  transition: transform 140ms var(--ease-uit), background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.knop:active { transform: scale(0.97); }
.knop:disabled { opacity: .45; cursor: default; transform: none; }
.knop svg { width: 20px; height: 20px; flex: none; }
.knop.vol { --k-grond: var(--inkt); --k-inkt: var(--grond); }
.knop.klein { min-height: 40px; padding: 0 12px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .knop:not(:disabled):hover { --k-grond: var(--vlak); }
  .knop.vol:not(:disabled):hover { --k-grond: var(--inkt-2); }
}

/* --- velden -------------------------------------------------------------- */

.veld { display: grid; gap: 6px; }
.veld > span { font: 600 14px/1.2 var(--smal); color: var(--inkt-2); }
.invoer {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1.5px solid var(--lijn); border-radius: 3px;
  background: var(--grond); color: var(--inkt);
  font: 500 17px/1.2 var(--letter);
}
.invoer:focus { outline: none; border-color: var(--inkt); }
.invoer::placeholder { color: var(--inkt-3); }
.eenheid { position: relative; }
.eenheid .invoer { padding-right: 34px; }
.eenheid::after {
  content: attr(data-eenheid); position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%); color: var(--inkt-2); font-weight: 500; pointer-events: none;
}

/* --- titelblok: het vaste raster van elke tekening ------------------------ */

.titelblok {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--lijn-sterk);
  background: var(--grond);
}
.titelblok > .cel {
  padding: 10px 12px 11px;
  border-right: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  min-width: 0;
}
.titelblok > .cel.rechts { border-right: 0; }
.titelblok > .cel.breed { grid-column: 1 / -1; border-right: 0; }
.titelblok > .cel.laatst { border-bottom: 0; }
.cel .label { display: block; font: 600 13px/1.1 var(--smal); color: var(--inkt-2); margin-bottom: 3px; }
.cel .waarde { font: 600 18px/1.2 var(--letter); overflow-wrap: anywhere; }

.stip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--inkt-3); vertical-align: 1px; }
.stip.aan { background: var(--inkt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inkt) 18%, transparent); }
.stip.weg { background: transparent; border: 1.5px solid var(--inkt-2); }