/* public_html/assets/app.css */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/font/inter-tight.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/font/inter-tight-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/font/inter-tight-italic.woff2') format('woff2');
}

:root {
  --paper: #ffffff;
  --achter: #f4f6fa;
  --tint: #eef1f6;
  --ink: #1c1d20;
  --muted: #5c6068;
  --rule: #e2e5ea;
  --accent: #0f56c3;
  --accent-soft: #e4ecfc;
  --accent-ink: #0b3f92;
  --alert: #a12626;
  --schaduw: 0 1px 2px rgba(28, 29, 32, .08), 0 2px 8px rgba(28, 29, 32, .05);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: 14.5px; }

html, body {
  margin: 0;
  height: 100%;
  /* dvh krimpt mee met de adresbalk van de telefoon; vh doet dat niet. */
  height: 100dvh;
  background: var(--achter);
  color: var(--ink);
  font: 400 1rem/1.5 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: 'cv05' 1;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }

button {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: .35rem .7rem;
  cursor: pointer;
  transition: background-color .12s ease;
}
button:hover { background: var(--tint); }
button:disabled { opacity: .4; cursor: default; }
button:disabled:hover { background: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, span:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Topbalk */

.topbar {
  display: flex;
  align-items: center;
  height: 3.5rem;
  padding: 0 1.25rem;
  background: var(--achter);
}
.wordmark { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }
.zoekvak { flex: 1; max-width: 36rem; margin: 0 auto; }
.zoekvak input {
  width: 100%;
  padding: .55rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--tint);
  font: inherit;
}
.zoekvak input:hover { background: #e7eaf0; }
.zoekvak input:focus {
  background: var(--paper);
  border-color: var(--rule);
  box-shadow: var(--schaduw);
  outline: none;
}

.fragment {
  color: var(--muted);
  font-size: .88rem;
  margin-left: .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quiet {
  margin-left: 0;
  color: var(--muted);
  text-decoration: none;
  padding: .3rem .6rem;
  border-radius: 6px;
}
.quiet:hover { background: var(--tint); color: var(--ink); }

.zoomvak {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin-left: 1.25rem;
  padding: .1rem .15rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.zoomvak.aan {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-ink);
}
.zoom-knop {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
}
.zoom-label {
  padding: 0 .45rem;
  border-radius: 999px;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.zoomvak.aan .zoom-label { color: var(--accent-ink); font-weight: 500; }
.editor-kop .zoomvak { margin-left: .5rem; }
.editor-kop .zoomvak button { border: 0; }

/* Indeling */

.layout {
  display: grid;
  grid-template-columns: 15.5rem 1fr;
  height: calc(100% - 3.5rem);
}

.zijkant {
  display: flex;
  flex-direction: column;
  padding: 0 .5rem .75rem;
  overflow: auto;
}

.nieuw-wrap { position: relative; padding: 0 .25rem 1rem; }
.nieuw-knop {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .7rem 1.4rem;
  font-weight: 500;
  box-shadow: var(--schaduw);
}
.nieuw-knop:hover { background: var(--tint); }
.nieuw-knop::before { content: '+'; font-size: 1.15em; line-height: 1; }

.nieuw-menu {
  position: absolute;
  z-index: 5;
  top: 3.4rem;
  left: .25rem;
  min-width: 13rem;
  list-style: none;
  margin: 0;
  padding: .35rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--schaduw);
}
.nieuw-menu button { display: block; width: 100%; text-align: left; border-radius: 6px; }

/* Mappenboom */

.tree { flex: 1; overflow: auto; }
.tree ul { list-style: none; margin: 0; padding: 0 0 0 .8rem; }
.tree > ul { padding-left: 0; }
.tree li > span {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .3rem .2rem .75rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 2rem;
}
.tree-naam {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree li > span .puntjes { flex: none; width: 1.7rem; height: 1.7rem; }

@media (hover: hover) {
  .tree li > span .puntjes { visibility: hidden; }
  .tree li > span:hover .puntjes,
  .tree li > span .puntjes:focus-visible { visibility: visible; }
}
.tree li > span:hover { background: var(--tint); }
.tree li > span.here { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }

.labelbalk { border-top: 1px solid var(--rule); padding-top: .5rem; margin-top: .5rem; }
.zij-kopje {
  padding: .2rem .75rem .3rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
}
.labelitem { display: flex; align-items: center; gap: .5rem; }
.labelnaam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.labelstip {
  flex: none;
  width: .6rem;
  height: .6rem;
  border-radius: 999px;
  display: inline-block;
}

.rijlabels { display: inline-flex; gap: .2rem; margin-left: .5rem; flex: none; }
.rijnotitie {
  color: var(--muted);
  font-size: .88rem;
  margin-left: .6rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.labelkeuze { margin-bottom: .8rem; }
.labelregel {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .2rem;
  border-radius: 6px;
}
.labelregel:hover { background: var(--tint); }
.labelregel input { accent-color: var(--accent); }
.labelmini { font-size: .82rem; color: var(--muted); padding: .1rem .35rem; }

@media (hover: hover) {
  .labelmini { visibility: hidden; }
  .labelregel:hover .labelmini { visibility: visible; }
}

.labelnieuw { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.labelnieuw .venster-veld { flex: 1; min-width: 8rem; }
.labelnieuw .stil { border: 1px solid var(--rule); }
.kleurkeuze { display: flex; gap: .2rem; }
.kleurknop {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border-radius: 999px;
  border: 2px solid transparent;
}
.kleurknop.aan { border-color: var(--ink); }
.venster-kopje { color: var(--muted); font-size: .85rem; margin: .8rem 0 .25rem; }

.zij-onder { border-top: 1px solid var(--rule); padding-top: .5rem; margin-top: .5rem; }
.zij-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .34rem .75rem;
  border-radius: 999px;
}
.zij-item.here { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }

/* Werkvlak */

.pane { position: relative; overflow: auto; padding: 0 1rem 3rem 0; }
/* Kruimelpad en selectiebalk delen dezelfde regel, zodat er niets verspringt. */
.kopbalk { position: relative; height: 2.9rem; display: flex; align-items: center; }
.crumbs { padding: 0 .25rem; color: var(--muted); font-size: 1.05rem; }
.kruimelknop {
  margin-left: .75rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: .88rem;
  color: var(--ink);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 .3rem; }

.paneel {
  background: var(--paper);
  border-radius: 14px;
  min-height: calc(100% - 3.3rem);
  padding: .5rem 0;
}

.selbalk {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1.25rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .4rem 0 1rem;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  animation: sluier-in .14s ease;
}
.sel-telling { font-weight: 500; margin-right: auto; }
.selbalk button { border: 1px solid rgba(15, 86, 195, .25); }
.selbalk button:hover { background: rgba(15, 86, 195, .12); }
.selbalk .stil { border-color: transparent; color: var(--accent-ink); }

/* Lijst */

.listing { display: block; }

.kolomkop, .row {
  display: grid;
  grid-template-columns: 1fr 8rem 5.5rem 2.75rem;
  align-items: center;
  gap: .5rem;
  padding: 0 1rem;
}
.kolomkop {
  color: var(--muted);
  font-size: .85rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}
.kolomkop .rechts, .row .meta { text-align: right; }

.row { height: 2.75rem; border-radius: 8px; }
.row:hover { background: var(--tint); }
.row.gekozen { background: var(--accent-soft); }
.row.gekozen:hover { background: #dbe6fa; }

/* Op de plek van het icoon verschijnt een hokje zodra je erover gaat. */
.kiesvak {
  position: relative;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
}
.kiesvak input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
/* Een icoon met opacity 0 vangt nog steeds kliks; dat mag hier niet. */
.kiesvak .icoon { transition: opacity .1s ease; pointer-events: none; }
.row.gekozen .kiesvak input { opacity: 1; }
.row.gekozen .kiesvak .icoon { opacity: 0; }

@media (hover: hover) {
  .row:hover .kiesvak input { opacity: 1; }
  .row:hover .kiesvak .icoon { opacity: 0; }
}

.row .name {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.row .name a, .row .name > span {
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .name a:hover { text-decoration: underline; }
.row.is-folder .name a { font-weight: 500; }

.icoon { flex: none; width: 1.15rem; height: 1.15rem; color: var(--muted); }
.icoon.map { color: #6b7684; }
.icoon.doc { color: var(--accent); }

.row .meta { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9rem; }
.row .tools { display: flex; justify-content: flex-end; min-width: 0; }
.row .tools button { color: var(--muted); }

@media (hover: hover) {
  .row .tools button { visibility: hidden; }
  .row:hover .tools button,
  .row .tools button:focus-visible { visibility: visible; }
}
.row .tools button:hover { background: #e2e6ee; color: var(--ink); }

.puntjes {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
}

.rij-menu {
  position: fixed;
  z-index: 30;
  min-width: 12rem;
  list-style: none;
  margin: 0;
  padding: .35rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--schaduw);
}
.rij-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 6px;
  padding: .35rem .55rem;
}
.rij-menu button:hover { background: var(--tint); }

.leeg { color: var(--muted); padding: 2.5rem 1rem; }

/* Dashboard */

.dashvak { padding: .5rem 1rem 1.25rem; border-bottom: 1px solid var(--rule); }
.dashvak:last-child { border-bottom: 0; }
.dashkop {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 600;
  margin: .75rem 0 .6rem;
}
.dashtelling {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 0 .5rem;
  font-size: .82rem;
}
.dashrij { padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.dashrij:last-child { border-bottom: 0; }
.dashrij.compact { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.dashlink {
  padding: 0;
  border: 0;
  text-align: left;
  color: var(--ink);
  font: inherit;
}
.dashlink:hover { background: none; text-decoration: underline; }
.dashbij { color: var(--muted); }
.dashtekst { margin: .3rem 0; }

/* Uploadzone */

.dropzone {
  position: absolute;
  inset: 0 1rem 0 0;
  pointer-events: none;
  background: rgba(244, 246, 250, .92);
  border: 2px dashed var(--accent);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-ink);
  font-weight: 500;
}

/* Vensters */

dialog { border: 0; padding: 0; }
dialog:not([open]) { display: none !important; }
dialog::backdrop { background: rgba(28, 29, 32, .4); }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 29, 32, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
  transition: background-color .16s ease;
}
.overlay.in { background: rgba(28, 29, 32, .4); }

.dialog {
  background: var(--paper);
  border-radius: 14px;
  padding: 1.1rem;
  width: 24rem;
  max-height: 80dvh;
  overflow: auto;
  box-shadow: var(--schaduw);
  opacity: 0;
  transform: translateY(8px) scale(.99);
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, .7, .3, 1);
}
.overlay.in .dialog { opacity: 1; transform: none; }

.venster-uitleg { color: var(--muted); margin: 0 0 .8rem; }
.venster-veld {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  resize: vertical;
}
.venster-knoppen { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.venster-knoppen .stil { border: 1px solid var(--rule); }
.venster-knoppen .primair {
  background: var(--accent);
  color: #fff;
  padding: .4rem 1.1rem;
}
.venster-knoppen .primair:hover { background: var(--accent-ink); }
.dialog h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; }
ul.mapkeuze { list-style: none; margin: 0 0 .75rem; padding: 0; }
ul.mapkeuze button { display: block; width: 100%; text-align: left; border-radius: 6px; padding: .35rem .5rem; }
ul.mapkeuze button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.dialog .annuleer { width: 100%; border: 1px solid var(--rule); }

.editor-dialog, .history-dialog, .share-dialog {
  width: min(74rem, 96vw);
  max-width: none;
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--schaduw);
}
.editor-dialog, .history-dialog { height: 94vh; height: 94dvh; max-height: none; }

.editor-dialog.is-vol {
  width: calc(100vw - 3rem);
  height: calc(100dvh - 3rem);
  max-width: none;
}
.share-dialog { width: min(36rem, 95vw); }

.editor-kop {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--rule);
}
.editor-naam { font-weight: 600; font-size: 1.05rem; }
.editor-status { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; font-size: .9rem; }
.editor-kop button { flex: none; border: 1px solid var(--rule); }

.editor-body { flex: 1; display: grid; grid-template-columns: 1fr 17rem; min-height: 0; }
.editor-host { display: flex; flex-direction: column; min-height: 0; }
.editor-host .ql-toolbar { border: 0; border-bottom: 1px solid var(--rule); }
.editor-host .ql-container {
  border: 0;
  flex: 1;
  overflow: auto;
  font-family: inherit;
  /* Alleen de tekst in de editor schaalt mee met de weergaveknop. */
  font-size: calc(1.02rem * var(--docschaal, 1));
}
.editor-host .ql-editor { padding: 1.5rem 2rem; }
.editor-vlak { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* Speler */

.speler-dialog {
  width: min(34rem, 94vw);
  max-width: none;
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--schaduw);
}
.speler-dialog.is-film { width: min(56rem, 94vw); }
.speler-download {
  color: var(--muted);
  text-decoration: none;
  padding: .3rem .6rem;
  border-radius: 6px;
  margin-left: auto;
}
.speler-download:hover { background: var(--tint); color: var(--ink); }
.spelervlak { padding: 1rem; }
.spelergeluid { width: 100%; }
.spelerfilm { width: 100%; max-height: 70dvh; border-radius: 8px; background: #000; display: block; }

/* Versies */

.history-body { flex: 1; display: grid; grid-template-columns: 17rem 1fr; min-height: 0; }
ul.versielijst {
  list-style: none;
  margin: 0;
  padding: .5rem;
  overflow: auto;
  border-right: 1px solid var(--rule);
}
ul.versielijst button {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 6px;
  padding: .35rem .5rem;
  font-variant-numeric: tabular-nums;
}
ul.versielijst button:hover { background: var(--tint); }
ul.versielijst button { display: flex; flex-direction: column; gap: .05rem; }
.versie-dag {
  padding: .7rem .5rem .25rem;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
}
.versie-naam { font-weight: 600; }
.versie-tijd { color: var(--muted); font-size: .88rem; }
ul.versielijst button.genoemd { background: #fdf7e6; }
ul.versielijst button.genoemd:hover { background: #f9eecd; }
button:disabled { opacity: .4; cursor: default; }
button:disabled:hover { background: none; }
ul.versielijst button.here { background: var(--accent-soft); color: var(--accent-ink); }
.versie-voorbeeld { overflow: auto; }
.versie-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
.versie-kop button { border: 1px solid var(--rule); }
.versie-inhoud { padding: 1rem 1.5rem; }

/* Opmerkingen */

.droive-opmerking {
  background: #fdf0cf;
  box-shadow: inset 0 -1px 0 #d8b95c;
  cursor: pointer;
}
.droive-opmerking.opgelicht { background: #f8df9c; }

.opmerkingen {
  border-left: 1px solid var(--rule);
  background: var(--achter);
  overflow: auto;
  padding: .7rem;
}
.opmerking-knop { width: 100%; margin-bottom: .6rem; border: 1px solid var(--rule); background: var(--paper); }
.opmerking-kaart {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: .6rem .7rem;
  margin-bottom: .5rem;
}
.opmerking-kaart.is-klaar { opacity: .5; }
.opmerking-kaart.is-los { border-left: 3px solid #c9a227; }
.opmerking-kop { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.opmerking-citaat {
  color: var(--muted);
  font-style: italic;
  margin: .35rem 0 .1rem;
  border-left: 2px solid var(--rule);
  padding-left: .45rem;
}
.opmerking-tekst { margin: .4rem 0 .55rem; }
.opmerking-knoppen { display: flex; gap: .35rem; }
.opmerking-knoppen button { flex: 1; font-size: .85rem; border: 1px solid var(--rule); }

/* Delen */

.share-body { padding: .9rem; }
ul.linklijst { list-style: none; margin: 0 0 1rem; padding: 0; }
ul.linklijst li { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
ul.linklijst li.link-af { color: var(--muted); }
.link-kop { display: flex; align-items: baseline; gap: .5rem; }
.link-meta { color: var(--muted); font-size: .88em; }
.link-rij { display: flex; gap: .35rem; margin-top: .4rem; }
.link-url {
  flex: 1;
  min-width: 0;
  padding: .3rem .5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--achter);
  color: var(--muted);
}
.link-rij button { border: 1px solid var(--rule); }
.leeg-regel { color: var(--muted); }
.share-nieuw { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.share-nieuw input[type=text] {
  flex: 1;
  min-width: 12rem;
  padding: .45rem .6rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.share-nieuw button[data-act="share-add"] {
  background: var(--accent);
  color: #fff;
  padding: .45rem 1rem;
}
.share-nieuw button[data-act="share-add"]:hover { background: var(--accent-ink); }
.share-optie { color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.share-optie select { border: 1px solid var(--rule); border-radius: 6px; padding: .3rem .4rem; }

/* Leespagina */

.lees-body { background: var(--paper); }
.lees { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.25rem 5rem; }
.lees h1 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.015em; margin: 0 0 1.5rem; }
.lees-uitleg { color: var(--muted); }
.lees-inhoud { padding: 0; font-size: 1.05rem; }
.lees-inhoud p { line-height: 1.65; }
.lees-beeld { max-width: 100%; height: auto; border-radius: 10px; }
.lees-speler { width: 100%; }
.lees-film { width: 100%; max-height: 70dvh; border-radius: 10px; background: #000; }
.lees-pdf { width: 100%; height: 80vh; height: 80dvh; border: 1px solid var(--rule); border-radius: 10px; }
.lees-knop {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
}
.lees-knop:hover { background: var(--tint); }
.lees-terug { color: var(--muted); }
.lees-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.lees-kop h1 { margin: 0; }
.lees-status { color: var(--muted); font-variant-numeric: tabular-nums; }
.lees-werkvlak { display: grid; grid-template-columns: 1fr 16rem; gap: 1.25rem; align-items: start; }
.lees-werkvlak .opmerkingen { border: 0; background: none; padding: 0; }
.lees-editor { border: 1px solid var(--rule); border-radius: 10px; min-height: 24rem; }
.lees-editor .ql-container { border: 0; font-family: inherit; font-size: 1.05rem; min-height: 22rem; }
.lees-editor .ql-toolbar { border: 0; border-bottom: 1px solid var(--rule); }
ul.lees-lijst { list-style: none; margin: 0; padding: 0; }
ul.lees-lijst li { padding: .55rem 0; border-bottom: 1px solid var(--rule); }
ul.lees-lijst a { color: var(--ink); text-decoration: none; }
ul.lees-lijst a:hover { text-decoration: underline; }
ul.lees-lijst a.is-map { font-weight: 500; }

/* Beweging */

@keyframes venster-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes sluier-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

dialog[open] { animation: venster-in .18s cubic-bezier(.2, .7, .3, 1); }
dialog[open]::backdrop { animation: sluier-in .18s ease; }

.rij-menu, .nieuw-menu:not([hidden]) {
  animation: menu-in .13s cubic-bezier(.2, .7, .3, 1);
  transform-origin: top right;
}
.nieuw-menu:not([hidden]) { transform-origin: top left; }

.listing { animation: venster-in .16s ease; }

.row, .tree li > span, .zij-item, button, .quiet {
  transition: background-color .12s ease, color .12s ease, opacity .12s ease;
}
.row .tools button { transition: background-color .12s ease, color .12s ease; }
.droive-opmerking { transition: background-color .25s ease; }
.opmerking-kaart { animation: venster-in .16s ease; }

/* Uploadvoortgang */

.uploadvak {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: min(24rem, calc(100vw - 2rem));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--schaduw);
  overflow: hidden;
  z-index: 22;
  animation: venster-in .18s cubic-bezier(.2, .7, .3, 1);
}
.uploadkop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .5rem .55rem .8rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}
.uploaddicht, .uploadstop {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border-radius: 999px;
  color: var(--muted);
  line-height: 1;
}
.uploadrij {
  display: grid;
  grid-template-columns: 1fr 6rem 3rem auto;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--rule);
}
.uploadrij:last-child { border-bottom: 0; }
.uploadnaam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploadbalk {
  height: .35rem;
  background: var(--tint);
  border-radius: 999px;
  overflow: hidden;
}
.uploadvulling {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .15s linear;
}
.uploadstaat {
  color: var(--muted);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.uploadfout { grid-column: 2 / -1; color: var(--alert); font-size: .85rem; }

/* Melding */

.toast {
  animation: venster-in .18s cubic-bezier(.2, .7, .3, 1);
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  margin-left: min(-15rem, -45vw);
  width: min(30rem, 90vw);
  text-align: center;
  background: var(--ink);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 8px;
  box-shadow: var(--schaduw);
  z-index: 20;
}
.toast.fout { background: var(--alert); }

/* Inloggen */

.login-body { display: grid; place-items: center; background: var(--achter); }
.login {
  width: 20rem;
  padding: 2rem;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: var(--schaduw);
}
.login h1 { font-size: 1.4rem; font-weight: 600; letter-spacing: -.015em; margin: 0 0 1.25rem; }
.login label { display: block; margin: .85rem 0 .25rem; color: var(--muted); }
.login input {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
}
.login button {
  margin-top: 1.2rem;
  width: 100%;
  padding: .55rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
}
.login button:hover { background: var(--accent-ink); }
.melding {
  border-left: 3px solid var(--alert);
  background: #fbf1f1;
  border-radius: 6px;
  padding: .55rem .75rem;
  margin: 0;
}

.menuknop { display: none; }
.zijsluier { position: fixed; inset: 0; background: rgba(28, 29, 32, .35); z-index: 24; }

@media (max-width: 820px) {
  .menuknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-right: .5rem;
    font-size: 1.15rem;
  }
  .layout { grid-template-columns: 1fr; }
  .zijkant {
    position: fixed;
    top: 3.5rem;
    bottom: 0;
    left: 0;
    width: 16rem;
    background: var(--achter);
    border-right: 1px solid var(--rule);
    z-index: 25;
    transform: translateX(-105%);
    transition: transform .2s cubic-bezier(.2, .7, .3, 1);
  }
  .zijkant.open { transform: none; }
  .pane { padding-left: 1rem; }
  .kolomkop, .row { grid-template-columns: 1fr 5.5rem 7rem; }
  .kolomkop .datum, .row .datum { display: none; }
  .row .tools button { visibility: visible; }
  .editor-body { grid-template-columns: 1fr; }
  .lees-werkvlak { grid-template-columns: 1fr; }
}

/* Vingers zijn groter dan muisaanwijzers. */
@media (pointer: coarse) {
  .row { height: 3.2rem; }
  .puntjes { width: 2.4rem; height: 2.4rem; }
  .tree li > span { min-height: 2.6rem; }
  .tree li > span .puntjes { width: 2.2rem; height: 2.2rem; }
  .zij-item { padding: .55rem .75rem; }
  .rij-menu button, ul.mapkeuze button, .nieuw-menu button { padding: .6rem .6rem; }
  .editor-kop button, .venster-knoppen button { min-height: 2.4rem; }
}

@media (max-width: 560px) {
  .wordmark { display: none; }
  .topbar { padding: 0 .75rem; }
  .zoekvak { margin: 0 .5rem 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::backdrop { transition: none !important; animation: none !important; }
  .dialog { opacity: 1; transform: none; }
}




/* Capture */

.capture-knop { display: flex; align-items: center; gap: .5rem; }

.capture-stip {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: #d93636; flex: 0 0 auto;
}

.capture-dialog {
  width: min(52rem, 94vw);
  height: min(80vh, 60rem);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: .6rem;
  overflow: hidden;
}

.capture-dialog::backdrop { background: rgba(0, 0, 0, .45); }

.capture-dialog .capture-body {
  height: calc(100% - 3rem);
  background: #111;
}

.capture-dialog iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* public_html/assets/app.css */