/*
  De stijl van de viewer.
  Donker en ingetogen, zodat het beeld het werk doet en de interface niet
  meepraat. Alles wat tekst is staat op een halfdoorzichtig, licht vervaagd
  paneel: leesbaar boven een lichte lucht en boven een donkere vloer, zonder
  dat er een blok voor het gebouw komt te staan.
*/

:root {
  --ink: #eef1f4;
  --ink-dim: #a2abb4;
  --line: rgba(255, 255, 255, 0.12);
  --panel: rgba(14, 17, 21, 0.72);
  --panel-solid: #12161b;
  --accent: #f0a04b;
  --accent-cool: #6ec0d8;
  --error: #ff8a7a;
  --radius: 10px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #05070a;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--ink-dim);
}

.error {
  color: var(--error);
}

/* --- Panelen -------------------------------------------------------------- */

.panel {
  position: fixed;
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 10;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

#topbar {
  top: 16px;
  left: 16px;
  right: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* De naam mag afkappen in plaats van over twee regels te lopen. De panelen
   eronder hangen op een vaste afstand van de bovenkant, dus een balk die een
   regel hoger wordt schuift onder het zonpaneel door. */
.identity {
  min-width: 0;
}

#topbar h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#topbar .meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modes {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* De standpunten staan naast de modusknoppen en zijn bewust ingetogener: het
   zijn snelkoppelingen naar een plek, niet een andere manier van kijken. */
.viewpoints {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.viewpoints::-webkit-scrollbar {
  display: none;
}

.viewpoints button {
  padding: 6px 11px;
  font-size: 12px;
  background: transparent;
  white-space: nowrap;
}

.viewpoints button:hover {
  background: rgba(255, 255, 255, 0.1);
}

button {
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

button:hover {
  background: rgba(255, 255, 255, 0.12);
}

button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #17120b;
  font-weight: 600;
}

button.ghost {
  background: transparent;
  color: var(--ink-dim);
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* --- Zonpaneel ------------------------------------------------------------ */

#solar-panel {
  top: 92px;
  left: 16px;
  width: 300px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 14px 16px 16px;
}

.row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.row label {
  font-size: 11.5px;
  color: var(--ink-dim);
}

input[type="date"],
input[type="text"],
input[type="password"] {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  width: 100%;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat .value {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.stat .unit {
  font-size: 10.5px;
  color: var(--ink-dim);
  line-height: 1.2;
}

.facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.facts dt {
  color: var(--ink-dim);
  flex-shrink: 0;
}

.facts dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

details {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--accent-cool);
}

#assumptions-body {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-dim);
}

#assumptions-body p {
  margin: 0 0 6px;
}

#assumptions-body strong {
  color: var(--ink);
  font-weight: 500;
}

/* --- Leerpaneel ----------------------------------------------------------- */

/* De rechterkolom. De panelen erin staan niet meer los vastgepind maar onder
   elkaar, zodat een paneel dat groeit het volgende opzij duwt in plaats van
   eroverheen te gaan liggen. */
.column {
  position: fixed;
  top: 92px;
  right: 16px;
  bottom: 76px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  z-index: 10;
  pointer-events: none;
}

.column > .panel {
  position: static;
  flex-shrink: 0;
  pointer-events: auto;
}

#hydrogen-panel,
#buffer-panel {
  padding: 14px 16px 16px;
}

/* De kanttekening bij de jaarproductie. Hij mag opvallen: hij zegt iets dat
   het cijfer erboven relativeert, en dat is precies waarvoor hij er staat. */
.reality {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 6px 6px 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-dim);
}

#learning-panel {
  padding: 14px 16px;
}

.lesson {
  border-left: 2px solid var(--accent-cool);
  padding: 2px 0 2px 10px;
  margin-bottom: 12px;
  font-size: 12px;
}

.lesson .head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
}

.lesson .why {
  color: var(--ink-dim);
  font-size: 11.5px;
  margin-top: 3px;
}

.lesson .bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  margin-top: 6px;
  overflow: hidden;
}

.lesson .bar span {
  display: block;
  height: 100%;
  background: var(--accent-cool);
}

/* --- Prompt en natuurkunde ------------------------------------------------ */

#prompt-bar {
  bottom: 16px;
  left: 16px;
  width: 520px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
}

#prompt-form {
  display: flex;
  gap: 8px;
}

#prompt-result {
  margin-top: 8px;
  font-size: 11.5px;
  max-height: 74px;
  overflow-y: auto;
}

#prompt-result a {
  color: inherit;
}

/* In de publieke demo staat het vak er wel maar doet het niets. Knoppen
   hebben die stand al (button:disabled hierboven); een invoerveld niet, en
   zonder dit ziet een uitgeschakeld vak eruit als een vak dat het niet doet. */
#prompt-input:disabled {
  opacity: 0.45;
  cursor: default;
}

#physics-bar {
  bottom: 16px;
  right: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  max-width: 380px;
}

.hint {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 12px;
  color: var(--ink-dim);
  z-index: 12;
}

/* --- Overlays ------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 10, 0.86);
  backdrop-filter: blur(6px);
  z-index: 30;
}

.overlay-card {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 30px;
  width: min(380px, calc(100vw - 40px));
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.overlay-card h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.overlay-card p {
  margin: 0;
  font-size: 12.5px;
}

.spinner {
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Inklappen --------------------------------------------------------------
   Een paneel dat je dicht kunt doen.

   WAAROM DIT BESTAAT. Op een telefoon vulden de panelen samen het hele scherm:
   zonopbrengst, energie, de promptregel en de bedieningshint lagen over elkaar
   EN over het gebouw heen. Je opende de demo van een fabriek en zag geen
   fabriek. Op een telefoon staan ze daarom dicht en tik je ze open als je een
   getal wilt zien.

   De kop blijft altijd staan, want die is tegelijk de knop. Het driehoekje
   ervoor wijst naar beneden als het paneel open is en opzij als het dicht is,
   dezelfde taal als een <details>. */
.panel > h2.klapbaar {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel > h2.klapbaar::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: rotate(90deg);
  transition: transform 120ms ease;
  opacity: 0.75;
}
.panel.ingeklapt > h2.klapbaar::before {
  transform: rotate(0deg);
}
.panel.ingeklapt > h2.klapbaar {
  margin-bottom: 0;
}
.panel.ingeklapt > *:not(h2) {
  display: none;
}

@media (max-width: 900px) {
  /* Op een smal scherm past er geen tweede kolom naast het gebouw. De
     leerlaag valt weg; de waterstofketen is de reden dat dit pand er staat en
     blijft, maar dan onderaan en over de volle breedte. */
  #learning-panel {
    display: none;
  }
  /* De knoppenbalk past niet op een telefoon. Hem laten AFBREKEN maakt hem
     drie regels hoog (gemeten: 146 pixels), en dan valt het zonpaneel eroverheen
     en is het gebouw helemaal weg. Hem laten SCHUIVEN houdt hem een regel hoog
     en alle knoppen bereikbaar. Daarvoor moeten twee dingen kloppen: niets mag
     afbreken (`nowrap`, ook binnen de knoppen zelf) en de balk moet mogen
     overlopen. Eén van die twee vergeten en het effect is nul. */
  #topbar {
    top: 8px;
    left: 8px;
    right: 8px;
    padding: 8px 10px;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #topbar h1 {
    font-size: 15px;
  }
  #topbar .identity,
  #topbar .modes {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  /* De naam van de twin mag inkorten; de knoppen niet. */
  #topbar .identity {
    max-width: 44vw;
    overflow: hidden;
  }
  #topbar .identity h1,
  #topbar .identity .meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Een dichtgeklapt paneel is niet meer dan zijn kop, dus de hoogtegrens van
     hierboven mag weg zodra hij open is: dan is scrollen binnen het paneel
     beter dan een paneel dat half over het volgende valt. */
  .panel.ingeklapt {
    max-height: none;
  }
  /* Twee panelen boven elkaar op een smal scherm passen alleen als ze allebei
     weten hoe hoog ze mogen worden. Samen ruim onder de volle hoogte, want de
     balk erboven en de promptregel eronder vragen ook hun deel. */
  .column {
    top: auto;
    left: 8px;
    right: 8px;
    /* Boven de promptregel uit. Die is op een telefoon ongeveer 120 pixels
       hoog (invoerveld, knop en de uitnodiging eronder) en staat zelf 8 van
       de onderkant. Stond dit op 84, dan viel de kop van het energiepaneel er
       half achter en kon je hem niet meer aantikken. */
    bottom: 140px;
    width: auto;
    max-height: 34vh;
  }
  #solar-panel {
    left: 8px;
    width: calc(100vw - 16px);
    max-height: 34vh;
  }
  #prompt-bar {
    bottom: 8px;
    left: 8px;
    right: 8px;
    width: auto;
  }
  #physics-bar {
    display: none;
  }
}

/* --- Gemeten of gerekend ---------------------------------------------------
   Het verschil tussen een waarneming en een berekening moet in een oogopslag
   te zien zijn, en met dezelfde kleuren als de statusstrips in het model. Als
   die twee uit elkaar lopen, is het onderscheid erger dan geen onderscheid. */
.provenance {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.6rem;
  border-left: 3px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 4px 4px 0;
  font-size: 0.78rem;
  line-height: 1.45;
}
.provenance.measured {
  border-left-color: #3dff86;
}
.provenance .dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  vertical-align: baseline;
}
/* Dezelfde drie kleuren als in scene.js: groen meet, blauw rekent, amber zwijgt. */
.provenance .dot.meten { background: #3dff86; }
.provenance .dot.rekenen { background: #3ba7ff; }
.provenance .dot.stil { background: #ff9e22; }

/* --- De meter -------------------------------------------------------------
   Beelden per seconde, tekenopdrachten, driehoeken en de maat waarop echt
   getekend wordt. Vaste cijferbreedte, zodat de getallen niet dansen terwijl
   je kijkt, en linksonder waar hij niets van het gebouw afdekt. */

#meter {
  position: fixed;
  /* Boven de promptbalk en links van de natuurkundebalk: de enige strook waar
     hij niets afdekt van wat er al staat. */
  left: 16px;
  bottom: 92px;
  z-index: 14;
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(8, 10, 14, 0.72);
  color: rgba(255, 255, 255, 0.85);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
}

/* --- Bedienen -------------------------------------------------------------
   Het kruis, wat je met het aangewezen object kunt, en wat het over zichzelf
   vertelt. Alle drie zo klein mogelijk: dit hoort te helpen en niet mee te
   praten. */

#crosshair {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  pointer-events: none;
  z-index: 13;
}
#crosshair::before,
#crosshair::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}
#crosshair::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  margin-left: -0.5px;
}
#crosshair::after {
  top: 50%;
  left: 0;
  height: 1px;
  width: 100%;
  margin-top: -0.5px;
}

#action-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(26px, -50%);
  max-width: 320px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 13px;
  font-size: 12px;
  color: var(--ink);
  pointer-events: none;
  z-index: 13;
}
#action-target {
  display: block;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 5px;
}
#action-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#action-list li {
  color: var(--ink-dim);
  padding: 1px 0;
  white-space: nowrap;
}
#action-list kbd {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  padding: 1px 5px;
  margin-right: 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

#inspect-panel {
  position: fixed;
  right: 16px;
  bottom: 76px;
  width: 320px;
  max-height: 46vh;
  overflow-y: auto;
  z-index: 14;
}
#inspect-panel h3 {
  margin: 12px 0 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
#inspect-close {
  margin-top: 10px;
}

/* --- Film -----------------------------------------------------------------
   Het filmpaneel staat naast het zonpaneel en niet erover: wie een pad
   opneemt, wil de stand van de zon kunnen blijven zien. Het is een extra
   stand en geen aparte weergave, dus er verdwijnt niets als hij opengaat. */
#film-panel {
  top: 92px;
  left: 332px;
  width: 330px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 14px 16px 16px;
}

.film-frames {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.film-frames li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

/* Het punt waar de camera nu is tijdens het afspelen. Zonder deze markering
   is een pad van acht punten een lijst waarin je jezelf kwijtraakt. */
.film-frames li.active {
  border-color: var(--accent);
}

.film-frames .naam {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.film-frames .tijden {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--ink-dim);
}

.film-frames .tijden input {
  width: 58px;
  padding: 2px 4px;
  font-size: 11px;
}

.film-frames button {
  padding: 2px 8px;
  font-size: 11px;
}

.film-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.film-actions button {
  flex: 1 1 auto;
}

.film-progress .bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-bottom: 6px;
}

.film-progress .bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.1s linear;
}

#film-status {
  font-size: 11.5px;
  margin: 0;
}

@media (max-width: 900px) {
  #film-panel {
    left: 8px;
    width: calc(100vw - 16px);
    max-height: 40vh;
  }
}

/* --- Foto -------------------------------------------------------------------
   Het fotopaneel staat op dezelfde plek als het filmpaneel: het zijn allebei
   opnamestanden en ze zijn nooit tegelijk open (viewer.js sluit de een als de
   ander opengaat). De voortgangsbalk leent de filmstijl, want het is
   letterlijk dezelfde belofte: dit duurt lang en dat hoort zichtbaar te zijn. */
#photo-panel {
  top: 92px;
  left: 332px;
  width: 300px;
  padding: 14px 16px 16px;
}

#photo-status {
  font-size: 11.5px;
  margin: 0;
}

@media (max-width: 900px) {
  #photo-panel {
    left: 8px;
    width: calc(100vw - 16px);
  }
}

/* --- Duimknuppel -------------------------------------------------------------
   Lopen met je duim, op een aanraakscherm.

   Hij verschijnt waar je duim neerkomt en niet op een vaste plek: een vaste
   plek dwingt je hand ergens heen, en dit werkt met elke hand en elk formaat
   telefoon. Zie `duimknuppel.js` voor de rest van het waarom.

   `pointer-events: none` is hier belangrijk. De knuppel is een plaatje, geen
   knop: de vinger die hem bedient ligt al op het canvas eronder en die mag
   niet halverwege door dit element worden onderschept. */
.duimknuppel {
  position: fixed;
  z-index: 30;
  width: 128px;
  height: 128px;
  margin: -64px 0 0 -64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: rgba(12, 16, 22, 0.28);
  backdrop-filter: blur(2px);
  pointer-events: none;
  display: grid;
  place-items: center;
}
.duimknuppel[hidden] {
  display: none;
}
.duimknuppel-knop {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  will-change: transform;
}