/* Archief van Onverloren Verhalen — de band
   Een instructieblad uit 1955, maar dan in negatief: zwarte pagina, witte
   inkt, rood waar het apparaat iets van u wil. Haarlijnen in plaats van
   kaders, geen ronde hoeken, geen schaduwen. Drukwerk, geen interface. */

:root {
  --bg:        #0a0b0c;
  --paneel:    #0d0e10;
  --veld:      #121416;
  --veld-op:   #171a1c;

  --lijn:      rgba(244,243,240,.20);
  --lijn-zacht:rgba(244,243,240,.10);
  --lijn-hard: rgba(244,243,240,.48);

  --inkt:      #f4f3f0;
  --zacht:     #c2bfb7;
  --dof:       #8e8a82;
  --vaag:      #6b6862;

  --rood:      #e8402f;
  --rood-dof:  rgba(232,64,47,.42);
  --signaal:   #e8402f;
  --let-op:    #e3b45c;
  --goed:      #96c7b0;

  --r: 0;
  --ui:   "Libre Franklin", ui-sans-serif, -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Arial, sans-serif;
  --boek: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--inkt);
  font: 15px/1.6 var(--ui); -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--rood); color: #0a0b0c; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #1d2022; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* Twee letters die door het hele blad lopen: kapitalen in klein korps voor
   alles wat een opschrift is, en een schreef voor alles wat gelezen wordt. */
.opschrift, .sectie > h2, .ls-cel i, .regel i, .band-kop i, .chip,
.stappen b, .aanwijzing p, .colofon, .mark b, .btn {
  font-family: var(--ui);
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ raamwerk */
.shell {
  display: grid;
  grid-template-rows: 54px minmax(0,1fr) auto;
  grid-template-areas: "top" "stage" "bediening";
  height: 100vh; height: 100dvh;
}

/* ------------------------------------------------------------------ kopregel */
.topbar {
  grid-area: top; display: flex; align-items: stretch; gap: 0;
  background: var(--bg); border-bottom: 1px solid var(--lijn);
}
.mark {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 0 18px 0 20px; border-right: 1px solid var(--lijn);
}
.mark b { font-size: 11.5px; font-weight: 700; letter-spacing: .22em; }
.mark span {
  font-family: var(--boek); font-size: 12px; font-style: italic;
  letter-spacing: 0; text-transform: none; color: var(--dof);
}

/* De invulvelden van het formulier: label erboven, waarde op een liniaal. */
.livestrip { display: flex; align-items: center; flex: 1; min-width: 0;
  overflow: hidden; }
.ls-cel {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 0 16px; min-width: 0; border-right: 1px solid var(--lijn-zacht);
  height: 100%;
}
.ls-cel i {
  font-size: 8.5px; letter-spacing: .18em; color: var(--vaag);
  font-style: normal;
}
.ls-cel b {
  font: 400 13px/1.2 var(--boek); letter-spacing: 0; color: var(--inkt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--lijn); padding-bottom: 2px;
}
.ls-cel.uit b { color: var(--vaag); }
.ls-cel.leeft b { color: var(--rood); border-bottom-color: var(--rood-dof); }

.link { display: flex; align-items: center; gap: 8px; padding: 0 18px;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--vaag); border-left: 1px solid var(--lijn); }
.link i { width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--lijn-hard); background: transparent;
  transition: background .2s, border-color .2s, box-shadow .2s; }
.link.op { color: var(--rood); }
.link.op i { background: var(--rood); border-color: var(--rood);
  box-shadow: 0 0 0 3px rgba(232,64,47,.18); }

/* ------------------------------------------------------------------- de pagina */
.stage { grid-area: stage; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; }
.blad, .sectie, .bandpaneel, .bedieningrij, .schijfrij { min-width: 0; }
.blad {
  max-width: 760px; margin: 26px auto 34px; padding: 34px 40px 26px;
  border: 1px solid var(--lijn); position: relative;
}
/* de dubbele rand van een gedrukte bladspiegel */
.blad::before {
  content: ""; position: absolute; inset: 5px; border: 1px solid var(--lijn-zacht);
  pointer-events: none;
}

.blad-kop { margin-bottom: 26px; }
.blad-kop h1 {
  margin: 0 0 10px; font: 400 27px/1.15 var(--boek); letter-spacing: .06em;
  text-transform: uppercase; text-align: center;
}
.blad-kop h1::after {
  content: ""; display: block; width: 46px; height: 2px;
  background: var(--rood); margin: 13px auto 0;
}
.blad-kop p {
  margin: 0 auto; font: 400 15px/1.7 var(--boek); color: var(--zacht);
  max-width: 54ch; text-align: center;
}
.blad-kop .acties { display: flex; justify-content: center; margin-top: 14px; }

.sectie { margin: 30px 0 0; }
.sectie > h2 {
  margin: 0 0 14px; font-size: 9.5px; color: var(--dof);
  display: flex; align-items: center; gap: 12px;
}
.sectie > h2::before, .sectie > h2::after {
  content: ""; height: 1px; background: var(--lijn); flex: 1;
}
.sectie > h2::before { max-width: 22px; }
.sectie > .uitleg { margin: -4px 0 16px; font: 400 14px/1.7 var(--boek);
  color: var(--dof); max-width: 62ch; }

.colofon {
  margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--lijn);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 8.5px; letter-spacing: .18em; color: var(--vaag);
}
.colofon i { font-style: normal; font-family: var(--mono); letter-spacing: .1em; }

/* ---------------------------------------------------------------- de stappen */
.stappen {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.stappen li {
  border: 1px solid var(--lijn); padding: 11px 12px 12px 34px;
  position: relative; transition: border-color .2s, opacity .2s;
}
.stappen li::before {
  content: attr(data-n); position: absolute; left: 10px; top: 10px;
  width: 17px; height: 17px; border: 1px solid var(--lijn-hard);
  border-radius: 50%; display: grid; place-items: center;
  font: 400 10px/1 var(--mono); color: var(--zacht);
  transition: all .2s;
}
.stappen b { display: block; font-size: 9.5px; color: var(--inkt);
  letter-spacing: .13em; }
.stappen span { display: block; margin-top: 4px; font: italic 12.5px/1.45 var(--boek);
  color: var(--dof); letter-spacing: 0; }

body[data-stap="1"] .stappen li[data-n="1"],
body[data-stap="2"] .stappen li[data-n="2"],
body[data-stap="3"] .stappen li[data-n="3"] { border-color: var(--rood-dof); }
body[data-stap="1"] .stappen li[data-n="1"]::before,
body[data-stap="2"] .stappen li[data-n="2"]::before,
body[data-stap="3"] .stappen li[data-n="3"]::before {
  border-color: var(--rood); background: var(--rood); color: #0a0b0c;
}
body[data-stap="1"] .stappen li[data-n="1"] b,
body[data-stap="2"] .stappen li[data-n="2"] b,
body[data-stap="3"] .stappen li[data-n="3"] b { color: var(--rood); }
body[data-stap="2"] .stappen li[data-n="1"],
body[data-stap="3"] .stappen li[data-n="1"],
body[data-stap="3"] .stappen li[data-n="2"] { opacity: .4; }

/* ---------------------------------------------------------------- draaischijf */
.schijfrij {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px;
  align-items: center; margin-top: 4px;
}
.schijf {
  position: relative; width: 320px; height: 320px; max-width: 100%;
  aspect-ratio: 1; user-select: none; justify-self: center;
}
/* de schijf als lijntekening: witte omtrek op zwart */
.schijf-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--inkt); background: var(--bg);
  transition: border-color .25s, opacity .25s;
}
.schijf-ring::after {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  border: 1px solid var(--lijn-zacht);
}
.schijf-disc { position: absolute; inset: 12px; border-radius: 50%;
  will-change: transform; }
.gat {
  position: absolute; width: 52px; height: 52px; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--inkt); background: var(--bg);
  color: var(--inkt); font: 500 19px/1 var(--ui); cursor: pointer;
  display: grid; place-items: center; letter-spacing: 0;
  transition: color .16s, border-color .16s, background .16s;
}
.gat:hover { background: var(--inkt); color: var(--bg); }
.gat.wacht { border-color: var(--rood); color: var(--rood); }
.gat.wacht:hover { background: var(--rood); color: var(--bg); }
.gat.geraakt { background: var(--rood); border-color: var(--rood); color: var(--bg); }
.schijf.geblokkeerd .gat {
  color: var(--vaag); border-color: var(--lijn); cursor: not-allowed;
}
.schijf.geblokkeerd .schijf-ring { border-color: var(--lijn); }

/* het nummerkaartje in het hart van de schijf */
.schijf-hart {
  position: absolute; left: 50%; top: 50%; width: 132px; height: 132px;
  transform: translate(-50%,-50%); border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 7px;
  text-align: center; pointer-events: none;
  border: 1px solid var(--lijn); background: var(--bg);
}
.schijf-hart i {
  font-size: 7.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--vaag); font-style: normal;
}
.schijf-hart b {
  font: 400 26px/1 var(--mono); color: var(--inkt);
  border: 1px solid var(--lijn-hard); padding: 5px 16px; min-width: 62px;
}
.schijf-hart b.leeg { color: var(--vaag); border-color: var(--lijn); }
.stopnok {
  position: absolute; width: 8px; height: 26px; border-radius: 4px;
  border: 1.5px solid var(--inkt); background: var(--bg); pointer-events: none;
}

/* de aanwijzingen erbij, met een streepje naar de tekening toe */
.aanwijzing { display: flex; flex-direction: column; gap: 12px; }
.aanwijzing p {
  margin: 0; border: 1px solid var(--lijn); padding: 8px 10px;
  font-size: 8.5px; line-height: 1.55; color: var(--zacht);
  letter-spacing: .13em; position: relative;
}
.aanwijzing p em {
  font-style: normal; color: var(--rood);
}
.aanwijzing.links p::after, .aanwijzing.rechts p::after {
  content: ""; position: absolute; top: 50%; width: 14px; height: 1px;
  background: var(--lijn-hard);
}
.aanwijzing.links { align-items: flex-end; text-align: right; }
.aanwijzing.links p::after { left: 100%; }
.aanwijzing.rechts p::after { right: 100%; }
.schijfnoot {
  grid-column: 1 / -1; margin: 6px 0 0; text-align: center;
  font: italic 13px/1.6 var(--boek); color: var(--dof);
}

/* ---------------------------------------------------------------- bediening */
.bediening {
  grid-area: bediening; background: var(--bg);
  border-top: 1px solid var(--lijn); padding: 12px 20px;
}
.bedieningrij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 760px; margin: 0 auto; }
.hoorn, .drukknop {
  width: 100%; text-align: left; border: 1px solid var(--lijn-hard);
  background: transparent; padding: 12px 14px; cursor: pointer;
  display: flex; align-items: center; gap: 13px;
  transition: border-color .15s, background .15s, color .15s;
}
.hoorn:hover:not(:disabled), .drukknop:hover:not(:disabled) {
  border-color: var(--inkt); background: rgba(244,243,240,.05);
}
.hoorn .icoon { flex-shrink: 0; width: 28px; height: 28px; color: var(--dof);
  transition: color .2s; }
.hoorn .icoon svg { display: block; width: 28px; height: 28px; }
.hoorn.op .icoon { color: var(--rood); }
.hoorn .tekst b, .drukknop .tekst b {
  display: block; font: 400 10px/1.3 var(--ui); letter-spacing: .15em;
  text-transform: uppercase;
}
.hoorn .tekst span, .drukknop .tekst span {
  display: block; margin-top: 3px; font: italic 12px/1.35 var(--boek);
  color: var(--dof);
}
.drukknop:disabled { opacity: .35; cursor: not-allowed; }
.drukknop .rond { width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--dof); flex-shrink: 0;
  display: grid; place-items: center; }
.drukknop .rond::after { content: ""; width: 11px; height: 11px;
  border-radius: 50%; background: transparent; transition: background .2s; }
.drukknop.rec { border-color: var(--rood); }
.drukknop.rec .rond { border-color: var(--rood); }
.drukknop.rec .rond::after { background: var(--rood);
  animation: pols 1.1s ease-in-out infinite; }
.drukknop.rec .tekst b { color: var(--rood); }
@keyframes pols { 50% { opacity: .2; } }

/* --------------------------------------------------------------------- band */
.bandpaneel { border: 1px solid var(--lijn); background: var(--bg); }
.band-kop {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border-bottom: 1px solid var(--lijn);
}
.band-kop i { font-size: 8.5px; color: var(--dof); font-style: normal; }
.band-kop .teller { margin-left: auto; font: 12px/1 var(--mono);
  color: var(--zacht); letter-spacing: .08em;
  border: 1px solid var(--lijn); padding: 3px 7px; }
.spoelen { display: flex; gap: 8px; align-items: center; }
.spoel { width: 16px; height: 16px; }
.spoel circle, .spoel line { fill: none; stroke: var(--vaag); stroke-width: 1.3; }
.draait .spoel { animation: rond 1.9s linear infinite; transform-origin: 50% 50%; }
.draait.snel .spoel { animation-duration: .5s; }
@keyframes rond { to { transform: rotate(360deg); } }
.draait .spoel circle, .draait .spoel line { stroke: var(--rood); }

/* het gesprek als afgedrukt transcript */
.lijn-lijf { max-height: 40vh; min-height: 132px; overflow-y: auto;
  padding: 14px 16px; }
.regel { padding: 9px 0; animation: opkomen .22s ease-out; }
.regel + .regel { border-top: 1px solid var(--lijn-zacht); }
@keyframes opkomen { from { opacity: 0; transform: translateY(3px); } }
.regel i {
  display: block; margin-bottom: 4px; font-size: 8px; letter-spacing: .2em;
  color: var(--vaag); font-style: normal;
}
.regel p { margin: 0; font: 400 16px/1.62 var(--boek); color: var(--inkt); }
.regel.beller i { color: var(--rood); }
.regel.beller p { font-style: italic; color: var(--zacht); }
.regel.stil p { color: var(--vaag); font-style: italic; font-size: 15px; }
.regel.apparaat.nu p { color: #fff; }
.vu { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.vu span { width: 3px; background: var(--lijn-hard); height: 3px;
  transition: height .07s linear, background .07s; }
.vu span.hoog { background: var(--rood); }

/* ---------------------------------------------------------- stand van de band */
.flitsen { border: 1px solid var(--lijn); }
.flits { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.flits u {
  font: 400 19px/1 var(--mono); color: var(--inkt); text-decoration: none;
  border: 1px solid var(--lijn-hard); padding: 5px 10px;
}
.flits span { font: italic 14px/1.5 var(--boek); color: var(--dof); }

/* ---------------------------------------------------------------- controles */
.btn {
  border: 1px solid var(--lijn-hard); background: transparent;
  color: var(--zacht); padding: 6px 13px; cursor: pointer;
  font: 400 9.5px/1.4 var(--ui); letter-spacing: .15em;
  text-transform: uppercase; white-space: nowrap; text-decoration: none;
  display: inline-block; transition: color .15s, border-color .15s, background .15s;
}
.btn:hover:not(:disabled) { color: var(--bg); background: var(--inkt);
  border-color: var(--inkt); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--inkt); border-color: var(--inkt); color: #0a0b0c; }
.btn.primary:hover:not(:disabled) { background: var(--rood); border-color: var(--rood);
  color: var(--bg); }
.btn.mini { padding: 4px 9px; font-size: 8.5px; }
.btn:focus-visible, .gat:focus-visible, .hoorn:focus-visible,
.drukknop:focus-visible { outline: 1px solid var(--rood); outline-offset: 2px; }
.chip {
  font-size: 8.5px; padding: 5px 9px; border: 1px solid var(--lijn);
  color: var(--dof); white-space: nowrap; display: inline-block;
}

/* ------------------------------------------------------------------- regie */
.regie[hidden] { display: none; }
.regie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--lijn); border-left: 2px solid var(--let-op);
  padding: 8px 11px; margin-bottom: 18px; }
.regie i { font-size: 8.5px; letter-spacing: .18em; font-style: normal;
  text-transform: uppercase; color: var(--let-op); }
.regie select { width: auto; background: var(--bg); border: 1px solid var(--lijn);
  padding: 4px 8px; font-size: 12px; color: var(--inkt); outline: 0; }
.regie small { color: var(--dof); font-size: 11px; margin-left: auto;
  font-family: var(--mono); }

/* ----------------------------------------------------------------- typvak */
#typtekst {
  width: 100%; background: var(--bg); border: 1px solid var(--lijn);
  padding: 11px 13px; color: var(--inkt); outline: 0;
  font: 400 16px/1.6 var(--boek); resize: vertical;
}
#typtekst:focus { border-color: var(--rood); }
#typtekst::placeholder { color: var(--vaag); font-style: italic; }
.typvoet { margin-top: 10px; }

/* ---------------------------------------------------------------- meldingen */
.leeg { padding: 20px 2px; color: var(--dof); font: italic 14px/1.6 var(--boek); }
.melding { border: 1px solid var(--lijn); border-left: 2px solid var(--lijn-hard);
  padding: 10px 13px; font: 400 13px/1.6 var(--boek); color: var(--zacht);
  margin-bottom: 14px; }
.melding.let-op { border-left-color: var(--let-op); }
.melding.fout { border-left-color: var(--rood); }
.melding b { color: var(--inkt); font-weight: 400; }

.toasts { position: fixed; right: 16px; bottom: 96px; display: flex;
  flex-direction: column; gap: 8px; z-index: 40; pointer-events: none; }
.toast { background: var(--bg); border: 1px solid var(--lijn-hard);
  padding: 9px 13px; font: 400 13px/1.5 var(--boek); max-width: 320px; }
.toast.fout { border-color: var(--rood); color: #ffbdb2; }

/* De oude statusbalk blijft bestaan omdat het script erin schrijft. */
.statusbar { display: none; }

/* ------------------------------------------------------------------ telefoon */
@media (max-width: 820px) {
  .topbar { height: 50px; }
  .mark { padding: 0 12px; gap: 7px; }
  .mark b { font-size: 10.5px; letter-spacing: .18em; }
  .mark span { display: none; }
  .livestrip .ls-cel:nth-child(1) { display: none; }
  .ls-cel { padding: 0 11px; max-width: 40vw; }
  .ls-cel i { font-size: 8px; }
  .ls-cel b { font-size: 12.5px; }
  .link { padding: 0 12px; }
  .link span { display: none; }

  .blad { margin: 12px 10px 18px; padding: 22px 16px 18px; max-width: none; }
  .blad::before { inset: 4px; }
  .blad-kop h1 { font-size: 21px; letter-spacing: .05em; }
  .blad-kop p { font-size: 14.5px; text-align: left; }
  .blad-kop h1::after { margin-top: 11px; }
  .sectie { margin-top: 26px; }

  .stappen { grid-template-columns: 1fr; gap: 7px; }
  .stappen li { padding: 9px 11px 9px 32px; }
  .stappen li::before { top: 9px; }
  .stappen span { display: inline; margin-left: 0; }

  .schijfrij { grid-template-columns: 1fr; gap: 16px; }
  .schijf { width: min(320px, 84vw); height: auto; }
  .gat { width: 15.8%; height: 15.8%; font-size: 17px; }
  .schijf-hart { width: 38%; height: 38%; gap: 5px; }
  .schijf-hart i { font-size: 7px; }
  .schijf-hart b { font-size: 21px; padding: 4px 11px; min-width: 50px; }
  .aanwijzing { flex-direction: row; flex-wrap: wrap; gap: 7px; }
  .aanwijzing.links { align-items: stretch; text-align: left; order: 3; }
  .aanwijzing.rechts { order: 4; }
  .aanwijzing p { flex: 1 1 150px; }
  .aanwijzing.links p::after, .aanwijzing.rechts p::after { display: none; }
  .schijfnoot { text-align: left; font-size: 12.5px; }

  .lijn-lijf { max-height: none; min-height: 104px; padding: 12px 13px; }
  .regel p { font-size: 15.5px; }
  .vu { display: none; }

  .bediening { padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)); }
  .bedieningrij { gap: 8px; }
  .hoorn, .drukknop { padding: 10px 11px; gap: 9px; }
  .hoorn .tekst span, .drukknop .tekst span { display: none; }
  .hoorn .tekst b, .drukknop .tekst b { font-size: 9.5px; letter-spacing: .12em; }
  .hoorn .icoon, .hoorn .icoon svg { width: 22px; height: 22px; }
  .drukknop .rond { width: 22px; height: 22px; }
  .drukknop .rond::after { width: 9px; height: 9px; }

  .toasts { right: 10px; left: 10px; bottom: 88px; }
  .toast { max-width: none; }
  .colofon { font-size: 8px; letter-spacing: .14em; }
}

@media (max-width: 380px) {
  .hoorn .tekst b, .drukknop .tekst b { font-size: 9px; letter-spacing: .1em; }
  .hoorn, .drukknop { padding: 10px 8px; gap: 7px; }
}

/* ------------------------------------------------------------ archiefblad */
body.archiefblad { overflow: auto; }
body.archiefblad .blad { margin: 30px auto 60px; max-width: 900px; }
.fragment { border-top: 1px solid var(--lijn-zacht); padding: 13px 2px; }
.fragment .keuze { font-size: 8.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--vaag); margin-bottom: 6px; }
.fragment .keuze a { color: var(--dof); }
.fragment .tekst { font: 400 15px/1.65 var(--boek); color: var(--inkt); }
.fragment .tekst.leeg { color: var(--vaag); font-style: italic; }
audio { width: 100%; max-width: 440px; height: 30px; margin-top: 9px;
  filter: invert(.92) hue-rotate(180deg) saturate(.1); }