/* Ranking the Family: formulier en beheer als drukwerk uit 1928.
   Layout: smalle kolom voor invullen, bredere voor beheer.
   Katoenpapier met korrel, inkt die in het papier gedrukt lijkt, blinddruk, dubbele kaderlijnen.
   Bewust één lichte papierwereld, ook in donkere modus. */
:root {
  --papier: #efe8dc;
  --vel: #f7f2e9;
  --inkt: #2f2b27;
  --grijs: #6d645b;
  --roze: #c98f86;
  --roze-zacht: #ead3cc;
  --salie: #8fa08a;
  --salie-zacht: #dbe1d4;
  --oker: #c9a45c;
  --rood: #a8473b;
  --ruis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .22 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --hout: "Alfa Slab One", "Rockwell", "Georgia", serif;
  --boek: "IM Fell English", "Georgia", "Times New Roman", serif;
  --kap: "IM Fell English SC", "Georgia", serif;
  --pen: "Yesteryear", "Brush Script MT", cursive;
  --druk: 0 1px 0 rgba(255, 255, 255, .55), 0 -.5px 0 rgba(0, 0, 0, .22);
  --blind: inset 1.5px 1.5px 2.5px rgba(0, 0, 0, .16), inset -1.5px -1.5px 2px rgba(255, 255, 255, .9);
  --relief: 1.5px 1.5px 2.5px rgba(0, 0, 0, .14), -1px -1px 1.5px rgba(255, 255, 255, .85);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--inkt); font-family: var(--boek); font-size: 17px; line-height: 1.5;
  background: var(--ruis), var(--papier);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 24px 56px;
}
.wrap { max-width: 580px; margin: 0 auto; display: grid; gap: 22px; min-width: 0; }
.wrap.breed { max-width: 960px; }
p { margin: 0; }
a { color: inherit; }
.muted { color: var(--grijs); }
.note { font-size: 14px; color: var(--grijs); font-style: italic; }

/* Kop als drukwerk */
header.kop { display: grid; gap: 8px; text-align: center; padding-top: 4px; }
.titel { margin: 0; line-height: .9; font-weight: 400; text-shadow: var(--druk); text-wrap: balance; }
.titel .w { font-family: var(--hout); font-size: clamp(40px, 12vw, 64px); letter-spacing: .02em; text-transform: uppercase; display: block; }
.titel .s { font-family: var(--pen); font-size: clamp(26px, 7vw, 38px); color: var(--roze); display: block; margin: -.12em 0 -.18em; }
.lijn { display: flex; align-items: center; gap: 10px; font-family: var(--kap); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; justify-content: center; text-shadow: var(--druk); }
.lijn::before, .lijn::after { content: ""; flex: 1; max-width: 160px; height: 4px; border-top: 1.5px solid var(--inkt); border-bottom: .75px solid var(--inkt); }
.eyebrow { font-family: var(--kap); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--rood); }
h1, h2 { font-weight: 400; margin: 0; text-wrap: balance; }
h2 { font-family: var(--boek); font-style: italic; font-size: 25px; line-height: 1.2; text-shadow: var(--druk); }
h3 { font-size: 18px; margin: 0; }

/* Vel papier met dubbel kader */
.panel {
  position: relative; background: var(--ruis), var(--vel); padding: 22px; display: grid; gap: 16px; min-width: 0;
  border: 1.5px solid var(--inkt); outline: .75px solid var(--inkt); outline-offset: 4px; margin: 5px;
  box-shadow: 0 1px 1px rgba(47, 43, 39, .08), 0 10px 24px -14px rgba(47, 43, 39, .35);
}

label.field { display: grid; gap: 6px; font-family: var(--kap); letter-spacing: .06em; font-size: 15px; }
input[type=text], input[type=password], input[type=number], textarea, select {
  font: 17px var(--boek); padding: 10px 12px; border: 0; border-bottom: 1.5px solid var(--inkt);
  background: rgba(255, 255, 255, .45); box-shadow: var(--blind); color: var(--inkt); width: 100%; min-width: 0; border-radius: 0;
}
textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
::placeholder { color: #a39a8f; font-style: italic; }

/* Knoppen: inktblok of gestanst kader */
.btn {
  border: 1.5px solid var(--inkt); padding: 10px 20px; font: 400 15px var(--kap); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  background: var(--inkt); color: var(--vel); text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--inkt), inset 0 0 0 3px rgba(247, 242, 233, .5);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.geel { background: var(--roze); border-color: var(--inkt); color: var(--inkt); box-shadow: inset 0 0 0 2px var(--roze), inset 0 0 0 3px rgba(47, 43, 39, .45); }
.btn.ghost { background: transparent; color: var(--inkt); box-shadow: var(--relief); }
.btn.klein { padding: 5px 12px; font-size: 13px; }
.btn.gevaar { background: transparent; color: var(--rood); border-color: var(--rood); box-shadow: none; }
.btn:disabled { opacity: .4; cursor: default; }
:focus-visible { outline: 2px solid var(--rood); outline-offset: 3px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.vol .btn { flex: 1; }

/* Prenten: als losse drukvellen */
.strip-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 3vw, 18px); padding: 6px 4px 10px; }
.strip-paneel { margin: 0; background: var(--vel); padding: 6px; box-shadow: 0 1px 2px rgba(47, 43, 39, .2), 0 8px 16px -8px rgba(47, 43, 39, .35); transform: rotate(var(--r, 0deg)); }
.strip-paneel img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(.25) saturate(.85); }
.strip-paneel:nth-child(6n+1) { --r: -2deg; } .strip-paneel:nth-child(6n+2) { --r: 1.5deg; } .strip-paneel:nth-child(6n+3) { --r: -.8deg; }
.strip-paneel:nth-child(6n+4) { --r: 1.8deg; } .strip-paneel:nth-child(6n+5) { --r: -1.4deg; } .strip-paneel:nth-child(6n+6) { --r: 1deg; }
.strip-tekening svg { display: block; width: 100%; height: auto; }
.prent-klein { position: absolute; top: 36px; right: 18px; width: 78px; }
.prent-klein ~ .eyebrow, .prent-klein ~ h2 { padding-right: 92px; }
.prent-klein .strip-paneel { --r: 3deg; animation: none !important; }

/* Formulier */
.progress { display: flex; gap: 5px; }
.progress i { flex: 1; height: 7px; box-shadow: var(--blind); }
.progress i.done { background: var(--inkt); box-shadow: none; }
.podium { display: grid; gap: 6px; }
.podium.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.podium.compact .slot { min-height: 42px; padding: 3px 4px; gap: 8px; }
.podium.compact .slot b { font-size: 19px; width: 20px; }
.podium.compact .slot .avatar { width: 30px; }
.podium.compact .slot .who { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium.compact .slot .leeg { font-size: 14px; }
.slot { display: flex; align-items: center; gap: 12px; padding: 6px; border-bottom: 1px dotted var(--inkt); min-height: 50px; }
.slot.filled { background: linear-gradient(transparent 70%, rgba(201, 143, 134, .22) 70%); }
.slot b { font-family: var(--hout); font-weight: 400; font-size: 22px; width: 26px; color: var(--roze); font-variant-numeric: tabular-nums; text-shadow: var(--druk); }
.slot .avatar { width: 36px; }
.slot .who { flex: 1; }
.slot .leeg { color: #a39a8f; font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1px solid var(--inkt); background: transparent; color: var(--inkt); padding: 3px 12px 3px 3px; border-radius: 0;
  font: 400 15px var(--kap); letter-spacing: .04em; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; box-shadow: var(--relief);
}
.chip .avatar { width: 28px; }
.chip .avatar b { font-size: 11px; }
.chip[aria-pressed="true"] { background: var(--inkt); color: var(--vel); box-shadow: var(--blind); }
.chip small { font-family: var(--hout); font-size: 13px; color: var(--roze); }
.samenvatting { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.samenvatting li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px dotted var(--inkt); }
.samenvatting li strong { font-weight: 400; font-style: italic; }
.samenvatting li:last-child { border-bottom: 0; }
.samenvatting button { justify-self: start; background: none; border: 0; color: var(--rood); font: 400 14px var(--kap); letter-spacing: .1em; padding: 0; cursor: pointer; }
.bubbel { font-family: var(--boek); font-style: italic; font-size: 21px; line-height: 1.35; text-align: center; padding: 14px 10px; border-top: 1.5px solid var(--inkt); border-bottom: 1.5px solid var(--inkt); position: relative; }
.bubbel::before, .bubbel::after { content: "\2766"; position: absolute; left: 50%; transform: translateX(-50%); background: var(--vel); padding: 0 8px; font-style: normal; font-size: 15px; color: var(--roze); line-height: 1; }
.bubbel::before { top: -9px; } .bubbel::after { bottom: -9px; content: "\2767"; }

/* Meldingen en badges */
.melding { padding: 12px 16px; border-left: 4px solid var(--salie); background: rgba(219, 225, 212, .6); font-style: italic; }
.melding.fout { border-left-color: var(--rood); background: rgba(234, 211, 204, .6); }
.badge { font: 400 12px var(--kap); letter-spacing: .1em; padding: 2px 8px; border: 1px solid var(--inkt); white-space: nowrap; }
.badge.ok { background: var(--salie-zacht); }

/* Beheer */
.handleiding summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.handleiding summary::-webkit-details-marker { display: none; }
.handleiding summary::after { content: "+"; font-family: var(--hout); font-size: 24px; color: var(--roze); }
.handleiding[open] summary::after { content: "\2212"; }
.handleiding[open] summary { margin-bottom: 4px; }
.stappen { margin: 0; padding-left: 26px; display: grid; gap: 10px; }
.stappen li::marker { font-family: var(--hout); color: var(--roze); }
.stappen strong { font-weight: 400; font-family: var(--kap); letter-spacing: .06em; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { box-shadow: var(--blind); padding: 12px 14px; display: grid; gap: 4px; }
.stat > span { font-family: var(--kap); letter-spacing: .1em; font-size: 13px; font-style: normal; }
.stat strong { font-family: var(--hout); font-weight: 400; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: var(--druk); }
.meter { height: 8px; box-shadow: var(--blind); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--salie); }
.lijst { display: grid; gap: 0; }
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding-block: 12px; border-top: 1px dotted var(--inkt); }
.item:first-child { border-top: 0; }
.item > .avatar { width: 50px; }
.item > .avatar b { font-size: 18px; }
.item > .beeldje { width: 50px; height: 50px; object-fit: cover; box-shadow: var(--relief); filter: sepia(.25); }
.item > .beeldje.leeg { display: grid; place-items: center; font-family: var(--hout); font-size: 20px; color: var(--roze); box-shadow: var(--blind); }
.item form.inline, .item .inline { display: flex; gap: 8px; min-width: 0; }
.item .acties { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.item .sub { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.item .link { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; min-width: 0; }
.item .link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--grijs); padding: 5px 10px; box-shadow: var(--blind); }
.fotoknop { position: relative; overflow: hidden; }
.fotoknop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.nav a { text-decoration: none; }
form.teksten { display: grid; gap: 14px; }
@media (max-width: 560px) {
  .item { grid-template-columns: auto minmax(0, 1fr); }
  .item .acties { grid-column: 1 / -1; justify-content: flex-start; }
  .panel { padding: 18px 16px; }
}

/* Avatar: foto als afdruk met dunne inktrand, anders initialen in houten letter */
.avatar { display: inline-grid; place-items: center; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--av, #8fa08a); flex: none; box-shadow: 0 0 0 1px var(--inkt), 0 0 0 2.5px var(--vel), 0 0 0 3.5px rgba(47, 43, 39, .35); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.3) saturate(.8) contrast(1.05); }
.avatar b { color: var(--vel); font-family: var(--hout); font-weight: 400; line-height: 1; }

@media (prefers-reduced-motion: no-preference) {
  .strip-paneel { animation: inspring .5s ease both; animation-delay: var(--d, 0ms); }
  .chip, .slot { transition: background .15s, box-shadow .15s; }
}
@keyframes inspring { from { opacity: 0; transform: translateY(10px) rotate(var(--r, 0deg)); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }

/* Cijfers in kapitalen-letter zien eruit als I en O: daarom cijfers in de houten letter */
.cijfer { font-family: "Alfa Slab One", Georgia, serif; font-style: normal; letter-spacing: .02em; font-size: .92em; }