/*
 * BW H Dashboard. Opmaak in de huisstijl van BW H: warm zwart, wit en
 * neutrale grijzen. Geen blauw of cyaan.
 *
 * Zwart betekent overal hetzelfde: deze omgeving is bij, of dit is de actie
 * die werk vooruit zet. Groen: de site is bereikbaar, of het onderhoud is recent. Oranje betekent: hier
 * wacht werk. Rood: dit ging mis.
 */

:root {
  interpolate-size: allow-keywords;
  --ink: #220808;
  --ink-soft: #3A2222;
  /* Warme grijzen: ze horen bij het warme zwart. */
  --grey-600: #645E5A;
  --grey-300: #B4AEA9;
  --grey-200: #E6E2DE;
  --grey-100: #F2EFEC;
  --paper: #F4F2EF;
  --side: #FAF9F7;
  --white: #FFFFFF;
  --shadow: 0 1px 2px rgba(34, 8, 8, 0.04), 0 4px 16px rgba(34, 8, 8, 0.03);
  /* Het accent voor "bij" en voor de actie die werk vooruit zet: zwart, met een lichtgrijze wash. */
  --accent: var(--ink);
  --accent-wash: var(--grey-100);
  /* Bereikbaar: de balken en de stip van de meting. Het enige groen in de app. */
  --ok: #2E9E5B;
  --wait: #E8590C;
  --wait-wash: #FDEFE6;
  --error: #B4161B;
  --error-wash: #FBEAEA;

  /* Basel Grotesk is het lettertype van BW H. Het staat op de computers van het bureau.
     Zonder dat lettertype valt de pagina terug op een vergelijkbare schreefloze. */
  --font: "Basel Grotesk", "Basel Grotesk Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 10px;
  --radius-lg: 14px;
  --sidebar: 248px;
  /* Eén ritme voor beweging: kort voor kleur en kleine dingen, iets langer voor in- en uitklappen. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 0.18s;
  --slow: 0.24s;
  --gap: 24px;
  --page: 1120px;
  --rail: 2px;
  --stop: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 15px;
  letter-spacing: 0;
}

p {
  margin: 10px 0 0;
}

a {
  color: var(--ink);
  text-decoration-color: var(--grey-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--ink);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

code,
.commit {
  font-family: var(--mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

.muted {
  color: var(--grey-600);
  font-size: 14px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Kop en menu. Op een breed scherm is de kop een vaste zijbalk links; op een smal scherm een balk bovenaan. */

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 16px;
  background: var(--side);
  border-bottom: 1px solid var(--grey-200);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  display: block;
}

.brand h1 {
  font-size: 17px;
  letter-spacing: -0.02em;
}

.brand h1 a {
  text-decoration: none;
}

.brand h1 span {
  color: var(--grey-600);
  font-weight: 500;
}

/* Het menu van de klant: een paar links naast elkaar. */
.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}

/* Het interne menu. Telefoon: logo en gebruiker op de eerste regel, daaronder één knop met de naam van de
   pagina. Open staan alle onderdelen onder elkaar, in groepen. Vanaf 901 px staat het menu altijd open:
   een rij bovenaan, en vanaf 1280 px de zijbalk. Een browser zonder ::details-content toont de knop ook breed. */
.nav:has(.nav__items) {
  display: contents;
}

.nav__menu {
  flex: 1 1 100%;
  order: 3;
  min-width: 0;
}

.nav__menu > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  list-style: none;
}

.nav__menu > summary::-webkit-details-marker {
  display: none;
}

.nav__menu > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid var(--grey-600);
  border-bottom: 1.5px solid var(--grey-600);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--slow) var(--ease);
}

.nav__menu[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.nav__menulabel {
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav__here {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav__menu::details-content {
  height: 0;
  overflow: clip;
  transition: height var(--slow) var(--ease), content-visibility var(--slow) allow-discrete;
}

.nav__menu[open]::details-content {
  height: auto;
}

.nav__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0 2px;
}
.nav__items a,
.nav__who {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--grey-600);
  text-decoration: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.nav__items a:hover,
.nav__who:hover {
  background: var(--grey-100);
  color: var(--ink);
}

.nav__items a[aria-current="page"],
.nav__who[aria-current="page"] {
  background: var(--grey-200);
  color: var(--ink);
  font-weight: 600;
}

/* In het open menu op een telefoon: tikdoelen van 44 px. */
@media (max-width: 900px) {
  .nav__items a {
    padding: 11px 12px;
  }
}

.nav .icon {
  flex: none;
}

.nav__group {
  margin: 14px 12px 4px;
  color: var(--grey-600);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav form {
  margin: 0;
}

.nav__user {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav__name {
  display: none;
}

.nav__out {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--grey-600);
  cursor: pointer;
}

.nav__out:hover {
  background: var(--grey-100);
  color: var(--ink);
}

@supports selector(::details-content) {
  @media (min-width: 901px) {
    .nav__menu > summary {
      display: none;
    }

    .nav__menu::details-content {
      height: auto;
      overflow: visible;
      content-visibility: visible;
    }
  }
}

/* Tablet en kleine laptop: alle onderdelen in één rij onder het logo. Ze passen; scrollen kan als reserve. */
@media (min-width: 901px) and (max-width: 1279px) {
  .nav__items {
    flex-direction: row;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav__items a {
    flex: none;
    padding: 7px 10px;
  }

  .nav__group {
    display: none;
  }
}

/* Alleen het interne dashboard krijgt de zijbalk, en pas vanaf 1280 px: smaller krijgen Sites en het paneel te weinig ruimte.
   De login en de pagina's voor klanten houden de balk bovenaan. */
@media (min-width: 1280px) {
  body:has(.nav__items) {
    padding-left: var(--sidebar);
  }

  .top:has(.nav__items) {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 22px;
    width: var(--sidebar);
    padding: 20px 14px 14px;
    border-right: 1px solid var(--grey-200);
    border-bottom: 0;
  }

  .brand {
    padding: 0 8px;
  }

  .nav:has(.nav__items) {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    font-size: 14px;
  }

  .nav__menu {
    flex: 1;
    order: 0;
    min-height: 0;
    overflow-y: auto;
  }

  .nav__items {
    padding: 0;
  }

  .nav__items a {
    padding: 7px 10px;
  }

  .nav__group {
    margin: 18px 10px 6px;
  }

  .nav__user {
    margin-left: 0;
    padding-top: 12px;
    border-top: 1px solid var(--grey-200);
  }

  .nav__who {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
  }

  .nav__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav__name small {
    color: var(--grey-600);
    font-size: 12px;
    font-weight: 400;
  }
}

.linkbutton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--grey-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.linkbutton:hover {
  text-decoration-color: var(--ink);
}

main {
  max-width: var(--page);
  margin: 0 auto;
  padding: 28px 16px 64px;
}

@media (min-width: 1280px) {
  main {
    padding: 36px 40px 64px;
  }
}

/* De kop van een pagina: titel en uitleg links, een korte stand rechts. */
.pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 24px;
}

.pagehead h2 {
  font-size: 28px;
  letter-spacing: -0.025em;
}

.pagehead p {
  margin-top: 6px;
}

.pagehead .chip {
  height: 32px;
  padding: 0 14px;
  color: var(--grey-600);
}

.page--wide {
  --page: 1600px;
}

/* De brede pagina (Sites) is een werkscherm: de kop staat vast, de lijst en het paneel scrollen elk apart.
   De pagina zelf scrolt niet, dus er is nooit witruimte onder de inhoud. */
@media (min-width: 901px) {
  .page--wide {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }

  .page--wide main {
    display: flex;
    flex: 1;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding-bottom: 20px;
  }

  .page--wide .split {
    flex: 1;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
  }

  .page--wide .split__list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
  }

  /* Alleen de lijst groeit mee. Zoekveld, filters en legenda houden hun eigen hoogte. */
  .page--wide .split__list > * {
    flex: none;
  }

  .page--wide .sitelist {
    flex: 1 1 0;
    max-height: none;
    min-height: 0;
  }

  .page--wide .split__detail {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .page--wide .split__detail > :last-child {
    margin-bottom: 0;
  }
}

.viewas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 0 0 20px;
  padding: 8px 14px;
  border: 1px dashed var(--grey-300);
  border-radius: var(--radius-lg);
  color: var(--grey-600);
  font-size: 13px;
}

.viewas--aan {
  border: 1px solid var(--wait);
  background: var(--wait-wash);
  color: var(--ink);
}

.viewas .button {
  margin-left: auto;
}

.inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.inline select {
  padding: 4px 6px;
  font: inherit;
  font-size: 14px;
}

.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
}

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 4px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  background: var(--white);
  font-size: 14px;
}

.subnav a {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--grey-600);
  text-decoration: none;
}

.subnav a:hover {
  background: var(--grey-100);
  color: var(--ink);
}

.subnav a[aria-current="page"] {
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.tile:hover,
.tile:focus-visible {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.tile strong {
  font-size: 17px;
}

.tile span {
  color: var(--grey-600);
  font-size: 14px;
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--grey-100);
}

.tile .tile__icon {
  color: var(--ink);
}

.tile .tile__fact {
  align-self: flex-start;
  margin-top: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

/* De tegels op Start staan los op de pagina, als losse kaarten. */
main > .tiles {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 var(--gap);
}

.updated {
  margin: 0 0 16px;
  text-align: right;
}

/* De kaart van een project: een spoor met drie haltes */

.card {
  margin-bottom: var(--gap);
  padding: 28px 28px 32px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px var(--gap);
  margin-bottom: 28px;
}

.card__head h2 {
  font-size: 26px;
  letter-spacing: -0.02em;
}

.envs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.facts--wide dt {
  width: 160px;
}

.rowlink--plain span:first-child {
  margin-left: 0;
}

.counters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: var(--gap);
}

.counter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
}

.counter:hover,
.counter:focus-visible {
  border-color: var(--ink);
}

.counter[aria-current="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.counter strong {
  font-size: 24px;
  line-height: 1.1;
}

.counter span {
  font-size: 13px;
  color: var(--grey-600);
}

.counter--wacht strong {
  color: var(--wait);
}

.counter--ok strong {
  color: var(--grey-300);
}

.listbar__hint {
  margin: 0;
  font-size: 14px;
}

.tag {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--grey-600);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

.tag--wacht {
  background: var(--wait-wash);
  color: var(--wait);
}

.stale {
  color: var(--wait);
  font-weight: 600;
}

.row--ended td {
  color: var(--grey-600);
}

.table--sites td:first-child {
  max-width: 320px;
}

/* Sites: lijst links, paneel rechts. Eén maat voor alle afstanden: 8, 12, 16, 20, 28. */

.split {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

/* Het spoor van het project staat bovenaan het paneel van zijn site. Iets compacter dan de losse kaart. */
.split__detail .updated {
  margin-bottom: 8px;
}

.split__detail .card {
  padding: 24px 24px 28px;
}

.split__detail .card__head {
  margin-bottom: 20px;
}

.split__detail .card__head h2 {
  font-size: 22px;
}

/* Het spoor staat in het paneel naast de lijst. Onder deze breedte stapelen de haltes en loopt het spoor verticaal. */
@media (max-width: 1300px) {
  .envs {
    grid-template-columns: 1fr;
  }

  .env {
    position: relative;
    padding: 0 0 28px 30px;
  }

  .env:last-child {
    padding-bottom: 0;
  }

  .rail {
    position: absolute;
    top: 3px;
    bottom: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    width: var(--stop);
    height: auto;
    margin: 0;
  }

  .rail__line {
    flex-direction: column;
    width: var(--rail);
    height: auto;
    padding: 10px 0 0;
  }

  .rail__line--open {
    background: repeating-linear-gradient(to bottom, var(--grey-300) 0 6px, transparent 6px 12px);
  }

  /* Verticaal past het label niet; "Wat gaat er mee" noemt het aantal al. */
  .rail__line b {
    display: none;
  }
}

/* Het spoor in het klein in de lijst van sites */
.sitelist__item .mini {
  gap: 8px;
}

.sitelist__item .mini i {
  width: 8px;
  height: 8px;
}

/* De lijst blijft in beeld en scrolt zelf. Het paneel staat in de pagina en scrolt gewoon mee. */
.split__list {
  padding: 20px;
}

.split__list .search {
  max-width: none;
  margin: 0 0 12px;
}

.split__list .search input {
  min-width: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  background: var(--white);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}

.chip span {
  color: var(--grey-600);
  font-variant-numeric: tabular-nums;
}

.chip:hover {
  border-color: var(--ink);
}

.chip[aria-current="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.chip[aria-current="true"] span {
  color: var(--grey-300);
}

.split__count {
  display: flex;
  justify-content: space-between;
  margin: 0 0 8px;
  font-size: 13px;
}

.sitelist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 -8px 0 0;
  /* Ruimte tussen de regels en de scrollbalk. */
  padding: 0 16px 0 0;
  list-style: none;
  max-height: calc(100vh - 360px);
  min-height: 200px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.sitelist__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  position: relative; /* Houdt de verborgen tekst van het bolletje binnen de regel, anders rekt hij de pagina op. */
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  line-height: 1.3;
}

.sitelist__item--recent {
  background: var(--white);
}

.sitelist__item--oud {
  background: var(--wait-wash);
}

.sitelist__item--geen {
  background: var(--grey-100);
  color: var(--grey-600);
}

.sitelist__item:hover {
  border-color: var(--grey-300);
}

.sitelist__item[aria-current="true"] {
  border-color: var(--ink);
  box-shadow: inset 3px 0 0 var(--ink);
}

.sitelist__item[aria-current="true"] .sitelist__name {
  font-weight: 600;
}

.sitelist__name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sitelist__name small {
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split__hint {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

.split__hint .dot {
  width: 9px;
  height: 9px;
  margin: 0 2px 2px 0;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  vertical-align: middle;
}

.dot--recent {
  background: var(--ok);
}

.dot--oud {
  background: var(--wait);
}

.dot--geen {
  background: var(--grey-300);
}

/* Het paneel van één site */

.split__detail .panel {
  padding: 24px 28px;
}

.detail__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--grey-100);
}

.detail__head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.2;
}

.detail__head h2 .dot {
  width: 12px;
  height: 12px;
}

.detail__head p {
  margin: 0;
  font-size: 14px;
}

.detail__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.detail__tags {
  margin: 16px 0 0;
}

.detail__tags .tag {
  margin: 0 6px 0 0;
}

.detail__meta {
  margin: 12px 0 0;
  font-size: 14px;
}

.detail__form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--grey-100);
}

.grid.grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
}

@media (min-width: 1500px) {
  .grid.grid--three {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grid.grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.field--compact {
  margin: 0;
}

.field--compact > span {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-600);
}

.field--compact input,
.field--compact select {
  padding: 8px 10px;
  font-size: 14px;
}

.field output {
  display: block;
  padding: 8px 0;
  font-size: 14px;
}

.fieldgroup {
  margin: 0 0 12px;
  padding: 16px 18px 18px;
  border: 1px solid var(--grey-100);
  border-radius: var(--radius);
  background: var(--paper);
}

.fieldgroup--onderhoud {
  border-color: var(--grey-200);
  background: var(--accent-wash);
}

.fieldgroup h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.fieldgroup__fields {
  display: grid;
  /* Zoveel kolommen als het paneel breed is, niet het scherm: zo past het ook naast de zijbalk en op een telefoon. */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px 20px;
}

.fieldgroup__full {
  grid-column: 1 / -1;
}

.field--measured output {
  font-variant-numeric: tabular-nums;
}

.field--measured small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.fieldgroup__hint {
  margin: 10px 0 0;
  font-size: 13px;
}

.fieldgroup--onderhoud .field--compact input,
.fieldgroup--onderhoud .field--compact select {
  border-color: var(--grey-300);
}

.fieldgroup--details summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.fieldgroup--details summary::-webkit-details-marker {
  display: none;
}

.fieldgroup--details summary h4 {
  margin: 0;
}

.fieldgroup--details summary h4::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px 1px 0;
  border-right: 1.6px solid var(--ink);
  border-bottom: 1.6px solid var(--ink);
  transform: rotate(-45deg);
}

.fieldgroup--details[open] summary h4::before {
  transform: rotate(45deg);
}

.fieldgroup--details summary span {
  font-size: 13px;
}

.fieldgroup--details[open] summary {
  margin-bottom: 12px;
}

/* Openklappen met een korte beweging. Browsers die de hoogte van details nog niet kunnen animeren, vervagen alleen. */
.fieldgroup--details::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
}

.fieldgroup--details[open]::details-content {
  height: auto;
}

.fieldgroup--details[open] .fieldgroup__fields {
  animation: fieldgroup-in 0.25s ease;
}

.fieldgroup--details summary h4::before {
  transition: transform 0.2s ease;
}

@keyframes fieldgroup-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--closed,
  .fieldgroup--details::details-content,
  .fieldgroup--details summary h4::before,
  .tabs a {
    transition: none;
  }

  .chat__msg {
    animation: none;
  }

  .fieldgroup--details[open] .fieldgroup__fields {
    animation: none;
  }
}

.detail__save {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  font-size: 13px;
}

.split__detail .grid--two .panel {
  margin-bottom: 0;
}

.split__detail .panel h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.split__detail .notes li {
  padding: 10px 0;
}

.split__detail .notes p {
  margin: 0 0 3px;
  font-size: 14px;
}

.split__detail .field textarea {
  padding: 8px 10px;
  font-size: 14px;
}

.split__detail .notes + form,
.split__detail .panel > p.muted + form,
.split__detail .log + p {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--grey-100);
}

.split__detail form .field {
  margin: 0 0 10px;
}

.split__detail .panel > p.muted {
  font-size: 14px;
}

.checks--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 16px 0;
  padding: 0;
  border: 0;
}

.checks--grid legend {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-600);
}

.check--row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Instellingen > Onderdelen: één vinkje per onderdeel, de uitleg onder de naam. */
.features {
  display: grid;
  gap: 14px;
  margin: 16px 0 20px;
}

.features .check--row {
  align-items: flex-start;
}

.features .check--row strong,
.features .check--row .muted {
  display: block;
}

.uptime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap);
  margin-bottom: 8px;
}

.uptime-grid .uptime {
  margin: 0;
}

.uptime-grid + .panel,
.split__detail .panel .panel {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

.log {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.log li {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--grey-100);
}

.log li:first-child {
  border-top: 0;
  padding-top: 0;
}

.log__date {
  flex: none;
  width: 110px;
  color: var(--grey-600);
}

@media (max-width: 900px) {
  .split,
  .grid.grid--three,
  .grid.grid--two {
    grid-template-columns: 1fr;
  }

  /* Op een smal scherm staat het paneel onder de lijst. De lijst blijft kort, zodat het paneel in de buurt blijft. */
  .sitelist {
    max-height: 40vh;
  }

  .detail__head {
    flex-direction: column;
  }
}

.notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.notes li {
  padding: 10px 0;
  border-top: 1px solid var(--grey-100);
}

.notes li:first-child {
  border-top: 0;
}

.notes p {
  margin: 0 0 2px;
}

.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.env {
  min-width: 0;
  padding-right: var(--gap);
}

.env:last-child {
  padding-right: 0;
}

.env > h3 {
  margin-bottom: 4px;
  color: var(--grey-600);
  font-weight: 500;
}

/* Het spoor. De halte staat links, de lijn loopt door tot de volgende halte. */

.rail {
  display: flex;
  align-items: center;
  height: var(--stop);
  margin: 0 calc(var(--gap) * -1) 18px 0;
}

.env:last-child .rail {
  margin-right: 0;
}

.rail__stop {
  flex: none;
  width: var(--stop);
  height: var(--stop);
  border: var(--rail) solid var(--ink);
  border-radius: 50%;
  background: var(--white);
}

.rail--bron .rail__stop {
  background: var(--ink);
}

.rail--gelijk .rail__stop {
  border-color: var(--accent);
  background: var(--accent);
}

.rail--achter .rail__stop,
.rail--wacht .rail__stop {
  border-color: var(--wait);
}

.rail--onbekend .rail__stop,
.rail--leeg .rail__stop {
  border-color: var(--grey-300);
}

.rail__line {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--rail);
  padding-left: 10px;
  background: var(--ink);
}

.rail__line--open {
  background: repeating-linear-gradient(to right, var(--grey-300) 0 6px, transparent 6px 12px);
}

/* Hoeveel commits de volgende halte nog mist. */

.rail__line b {
  padding: 0 6px;
  background: var(--white);
  color: var(--wait);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

/* De stand van een halte is de kop van dat blok. */

.pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
}

.pill::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grey-300);
  transform: translateY(-1px);
}

.pill--gelijk::before {
  background: var(--accent);
}

.pill--achter::before,
.pill--wacht::before {
  background: var(--wait);
}

.env > .pill,
.lead {
  display: flex;
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lead {
  display: block;
}

.env > .pill::before {
  width: 10px;
  height: 10px;
}

.facts {
  margin: 14px 0 0;
  font-size: 14px;
}

.facts div {
  display: flex;
  gap: 8px;
  padding: 3px 0;
}

.facts dt {
  width: 78px;
  flex: none;
  color: var(--grey-600);
}

.facts dd {
  margin: 0;
}

.software {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

/* In een paneel zijn de labels langer en de tekst groter dan op een kaart. */
.panel .facts {
  margin: 0 0 14px;
  font-size: inherit;
}

.panel .facts dt {
  width: 120px;
}

/* Knoppen */

.button {
  display: inline-block;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--ink-soft);
  color: var(--white);
}

/* De actie die werk vooruit zet, krijgt het accent. */

.env .button:not(.button--ghost):not(.button--small) {
  background: var(--accent);
  color: var(--white);
}

.env .button:not(.button--ghost):not(.button--small):hover {
  background: var(--ink-soft);
}

.button--ghost {
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--grey-300);
}

.button--ghost:hover {
  background: var(--grey-100);
  color: var(--ink);
}

.button--danger {
  background: var(--error);
}

.button--danger:hover {
  background: #8E1116;
}

.button--small {
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 13px;
}

.env .button {
  margin-top: 6px;
}

.env .button--small {
  margin-top: 0;
}

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

.aside {
  margin-left: 16px;
}

/* Lijsten in een blok: commits, vorige versies, pull requests */

.pending {
  margin-top: 14px;
  font-size: 14px;
}

.pending summary {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--grey-300);
  text-underline-offset: 3px;
}

.pending summary:hover {
  text-decoration-color: var(--ink);
}

.pending ul,
.pulls ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.pending li,
.pulls li {
  padding: 7px 0;
  border-top: 1px solid var(--grey-100);
}

.modal .pending ul {
  max-height: 240px;
  overflow-y: auto;
}

.pulls {
  margin-top: 20px;
  font-size: 14px;
}

.pulls h3 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.pulls p {
  margin: 4px 0 0;
}

/* De lijst voor veel projecten */

.back {
  margin: 0 0 12px;
  font-size: 14px;
}

.listbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px var(--gap);
  margin-bottom: 18px;
}

.search {
  display: flex;
  flex: 1 1 280px;
  gap: 8px;
  max-width: 440px;
}

.search input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.searchbar {
  display: flex;
  margin-bottom: 18px;
}

.panel > .search {
  margin-bottom: 18px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  background: var(--white);
  font-size: 14px;
}

.filters a {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--grey-600);
  text-decoration: none;
}

.filters a:hover {
  background: var(--grey-100);
  color: var(--ink);
}

.filters a[aria-current="true"] {
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
}

.filters a[aria-current="true"] span {
  color: var(--grey-300);
}

.filters span {
  color: var(--grey-600);
  font-size: 13px;
  font-weight: 400;
}

.table--list td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.table.table--list .pill {
  margin-left: 0;
  font-size: 15px;
  font-weight: 500;
}

.rowlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  text-decoration: none;
}

.rowlink span:last-child {
  text-decoration: underline;
  text-decoration-color: var(--grey-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.rowlink:hover span:last-child {
  text-decoration-color: var(--ink);
}

/* Het spoor in het klein: drie haltes op een lijn. */

.mini {
  position: relative;
  display: inline-flex;
  flex: none;
  gap: 10px;
}

.mini::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  left: 4px;
  height: var(--rail);
  background: var(--grey-300);
  transform: translateY(-50%);
}

.mini i {
  position: relative;
  width: 10px;
  height: 10px;
  border: var(--rail) solid var(--grey-300);
  border-radius: 50%;
  background: var(--white);
}

.mini .mini--bron {
  border-color: var(--ink);
  background: var(--ink);
}

.mini .mini--gelijk {
  border-color: var(--accent);
  background: var(--accent);
}

.mini .mini--achter,
.mini .mini--wacht {
  border-color: var(--wait);
  background: var(--wait);
}

/* Meldingen */

.notice {
  margin: 0 0 16px;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  background: var(--wait-wash);
  color: var(--ink);
  font-size: 15px;
}

.notice--ok {
  background: var(--accent-wash);
}

.notice--error {
  background: var(--error-wash);
  color: var(--error);
}

.warning {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--wait);
  border-radius: var(--radius);
  background: var(--wait-wash);
  font-size: 15px;
}

.warning ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.warning li {
  padding: 2px 0;
}

.qr {
  width: 220px;
  margin: 18px 0 6px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}

.secret {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--grey-100);
  font-size: 15px;
  letter-spacing: 0.04em;
  user-select: all;
}

.codes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 8px 32px;
  margin: 18px 0;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--grey-100);
  list-style: none;
}

.codes code {
  font-size: 16px;
  user-select: all;
}

.field--short {
  max-width: 220px;
}

/* Panelen en formulieren */

.panel {
  margin-bottom: var(--gap);
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.panel--narrow {
  max-width: 440px;
  margin-inline: auto;
}

.panel > h2 {
  margin-bottom: 14px;
}

.panel h3 {
  margin-top: 24px;
}

.panel p,
.panel li {
  max-width: 75ch;
}

.field {
  display: block;
  margin: 16px 0;
}

.field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
}

.field input,
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

/* Een eigen pijltje voor elke keuzelijst, met ruimte tot de rand. Het bestand staat naast de stijl, want de CSP staat geen data-URI toe. */
.field select,
.inline select {
  padding-right: 34px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("chevron.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

.field input:hover,
.field select:hover {
  border-color: var(--grey-600);
}

.field small {
  display: block;
  margin-top: 5px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gap);
}

.grid__full {
  grid-column: 1 / -1;
}

.grid__head {
  margin: 10px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--grey-200);
  font-size: 16px;
}

.grid__head .muted {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 400;
}

.before {
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--paper);
}

.before h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.after {
  margin: 18px 0 0;
}

.hook {
  margin-top: var(--gap);
  padding-top: 16px;
  border-top: 1px solid var(--grey-200);
}

.hook h3 {
  margin-top: 0;
}

/* Tabel */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.table th,
.table td {
  padding: 12px 10px 12px 0;
  border-bottom: 1px solid var(--grey-100);
  text-align: left;
  vertical-align: middle;
}

/* Uitklapper in een logregel, bijvoorbeeld de adressen van een mail. */
.table .more summary {
  cursor: pointer;
  color: var(--grey-600);
  font-size: 13px;
}

.table .more summary:hover {
  color: var(--ink);
}

/* Gebruikers: één regel per persoon, de stand eronder, één knop rechts. */
.table--users td:nth-child(4) {
  white-space: nowrap;
}

.table--users td:last-child {
  text-align: right;
}

.table--users .userstate {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
}

.table--users .userstate .pill {
  margin-left: 0;
}

/* Sitetoegang voor een externe gebruiker: een eigen kader, zodat het niet tussen de gewone velden zweeft. */
/* Klapt open en dicht met een animatie, zonder vaste hoogte: de rij van het raster gaat van 0fr naar 1fr. */
.reveal {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease 0.05s, visibility 0s;
}

.reveal__inner {
  min-height: 0;
  overflow: hidden;
}

.reveal--closed {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.25s ease, opacity 0.15s ease, visibility 0s 0.25s;
}

.scope {
  margin: 8px 0 16px;
  padding: 4px 16px 14px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
}

.scope legend {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
}

.scope .field {
  margin: 8px 0 12px;
}

.scope .check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 15px;
}

.scope small {
  display: block;
  line-height: 1.5;
}

/* Het venster Gebruiker bewerken: onder het formulier de minder vaak gebruikte acties. */
.modal__more {
  margin-top: var(--gap);
  padding-top: 16px;
  border-top: 1px solid var(--grey-200);
}

.modal__more h3 {
  margin: 0 0 8px;
  color: var(--grey-600);
  font-size: 14px;
  font-weight: 600;
}

.linklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.linklist form {
  margin: 0;
}

.table th {
  border-bottom-color: var(--ink);
  color: var(--grey-600);
  font-size: 14px;
  font-weight: 500;
}

.table tr:last-child td {
  border-bottom: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 16px;
  font-size: 14px;
}

.actions form {
  margin: 0;
}

.table .pill {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
}

.steps {
  margin: 0;
  padding-left: 20px;
}

.steps li {
  padding: 4px 0;
}

ul.steps {
  list-style: disc;
}

.checks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checks li {
  padding: 5px 0;
}

.checks .pill {
  margin-right: 10px;
}

.output {
  margin: 8px 0 0;
  padding: 12px 14px;
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--grey-100);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Venster voor een bevestiging. Boven de zijbalk (20) en de kaarten die later op de pagina staan, onder het
   deployscherm (50). */

.modal {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(34 8 8 / 0.55);
}

.modal__box {
  width: min(100%, 480px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px;
  background: var(--white);
  border-radius: var(--radius);
  border-top: 4px solid var(--accent);
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: var(--gap);
}

/* De logs van een container: breder venster, vaste breedte van tekens, zelf scrollen */
.modal__box:has(.logs) {
  width: min(100%, 960px);
}

.logs {
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--grey-100);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Tijden die tijd.js elke seconde bijwerkt: cijfers even breed, dan verspringt de tekst niet */
[data-sinds],
[data-loopt] {
  font-variant-numeric: tabular-nums;
}

/* Smal scherm: het spoor loopt van boven naar beneden */

/* De statuspagina: per omgeving de stand van nu en één streepje per dag */

.uptime {
  margin-top: 24px;
}

.uptime__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 10px;
}

.panel .uptime__head h3 {
  margin: 0;
  color: var(--grey-600);
  font-weight: 500;
}

.uptime__percent {
  margin-left: auto;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.bars {
  display: flex;
  gap: 2px;
  height: 32px;
}

.bars i {
  flex: 1 1 0;
  min-width: 1px;
  border-radius: 1px;
  background: var(--grey-200);
}

.bars .bars__ok {
  background: var(--ok);
}

.bars .bars__storing {
  background: var(--wait);
}

/* Nog nooit een antwoord: waarschijnlijk klopt het adres niet. */
.bars .bars__nooit {
  background: var(--grey-600);
}

.pill--nooit::before {
  background: var(--grey-600);
}

.bars i:hover {
  opacity: 0.6;
}

.panel .bars__legend {
  display: flex;
  justify-content: space-between;
  max-width: none;
  margin: 6px 0 0;
  font-size: 13px;
}

.uptime + h3 {
  margin-top: 32px;
}

/* De stand van een site op de kaart van het overzicht */

.health {
  margin-left: 10px;
  color: var(--grey-600);
  font-size: 14px;
  text-decoration: none;
}

.health::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ok);
  transform: translateY(-1px);
}

.health--storing {
  color: var(--wait);
  font-weight: 600;
}

.health--storing::before {
  background: var(--wait);
}

.health:hover {
  text-decoration: underline;
}

/* De pagina Server: de stand van nu in vakken, en per cijfer twee grafieken */

.filters + .table,
.filters + p {
  margin-top: 14px;
}

.stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 18px 0 0;
}

.stats__item {
  padding: 14px 16px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
}

.stats__item--over {
  border-color: var(--wait);
  background: var(--wait-wash);
}

.stats dt {
  color: var(--grey-600);
  font-size: 14px;
}

.stats dd {
  margin: 2px 0 0;
}

.stats strong {
  display: block;
  font-size: 26px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stats .muted {
  display: block;
  font-size: 13px;
}

.stats .pill {
  font-size: 13px;
}

.charts {
  display: grid;
  margin-top: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}

.chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  margin-bottom: 8px;
}

.panel .chart__head h3 {
  margin: 0;
  color: var(--grey-600);
  font-weight: 500;
}

.chart__frame {
  position: relative;
  border-bottom: 1px solid var(--grey-300);
}

.chart__plot {
  display: block;
  width: 100%;
  height: 120px;
}

.chart__max {
  position: absolute;
  top: 0;
  left: 0;
  padding-right: 6px;
  background: var(--white);
  font-size: 12px;
  line-height: 1;
}

.chart__grid,
.chart__limit,
.chart__line {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.chart__grid {
  stroke: var(--grey-100);
  stroke-width: 1px;
}

.chart__limit {
  stroke: var(--wait);
  stroke-width: 1px;
  stroke-dasharray: 4 4;
}

.chart__line {
  stroke: var(--accent);
  stroke-width: 1.5px;
  stroke-linejoin: round;
}

.chart__area {
  fill: var(--accent-wash);
}

.chart__peak {
  fill: var(--grey-200);
}

.chart__peak--over {
  fill: var(--wait);
  opacity: 0.45;
}

.chart__avg {
  fill: var(--accent);
}

.chart__plot g:hover,
.chart__day:hover {
  opacity: 0.6;
}

/* Een wijziging van de server, zoals een upgrade: een gestreepte grijze lijn met een breed onzichtbaar vlak voor de tooltip. */
.chart__plot .chart__change:hover {
  opacity: 1;
}
.chart__change line {
  stroke: var(--ink-soft);
  stroke-width: 1.5px;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.chart__change rect {
  fill: transparent;
}

/* Terugkijken naar een andere dag. */
.server-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
.server-day input[type="date"] {
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.server-day [aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}
.server-changes {
  margin: 0 0 16px;
  font-size: 14px;
}
.server-changes p {
  margin: 0 0 4px;
}
.server-changes ul {
  margin: 0;
  padding-left: 18px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.panel .chart__legend {
  display: flex;
  justify-content: space-between;
  max-width: none;
  margin: 6px 0 0;
  font-size: 13px;
}

/* De containers: elke rij op één regel, een lange image-naam kort met de hele naam als tooltip */
@media (min-width: 861px) {
  .table--containers td {
    vertical-align: middle;
    white-space: nowrap;
  }

  .table--containers td:nth-child(2) {
    white-space: normal;
  }

  .table--containers code {
    display: inline-block;
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  .table--containers .actions {
    flex-wrap: nowrap;
  }
}

@media (max-width: 860px) {
  .charts {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .table thead {
    display: none;
  }

  .table tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--grey-100);
  }

  .table td {
    display: block;
    padding: 2px 0;
    border: 0;
  }

  .actions {
    justify-content: flex-start;
    margin-top: 8px;
  }

  .bars {
    gap: 1px;
  }

  /* Zonder kop van de tabel zegt het label welke waarde dit is. */
  .table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--grey-600);
  }
}

/* --- Delen met klanten ------------------------------------------------- */
.share__image {
  margin: 0 0 16px;
}
.share__image img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
}
.share__pages {
  display: grid;
  gap: 16px;
  margin: 0 0 16px;
}
.share__pages figure {
  position: relative;
  margin: 0;
}
.page--item {
  --page: 1760px;
}
.share__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
  margin-top: 20px;
}
.share__side {
  position: sticky;
  top: 16px;
  box-sizing: border-box;
  max-height: calc(100vh - 32px);
  padding-left: 24px;
  overflow-y: auto;
  border-left: 1px solid var(--grey-100);
}
.share__side h3 {
  margin-top: 0;
}
@media (max-width: 1100px) {
  .share__layout {
    grid-template-columns: 1fr;
  }
  .share__side {
    position: static;
    max-height: none;
    padding-left: 0;
    border-left: 0;
  }
}
/* Bij een demo-site staat de site al over de hele breedte: de opmerkingen eronder, in één kolom. */
.share__layout--site {
  grid-template-columns: minmax(0, 720px);
}
.share__layout--site .share__main:empty {
  display: none;
}
.share__layout--site .share__side {
  position: static;
  max-height: none;
  padding-left: 0;
  border-left: 0;
}
.share__hint {
  margin: 0 0 8px;
  font-size: 0.9rem;
}
.share__page img {
  cursor: crosshair;
}
.pin {
  position: absolute;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid var(--white);
  border-radius: 999px;
  background: var(--wait);
  /* Een donkere rand om de witte: zichtbaar op lichte én donkere ontwerpen. */
  box-shadow: 0 0 0 2px var(--ink), 0 3px 10px rgb(34 8 8 / 0.5);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transform: translate(-50%, -50%);
}
.pin--flash {
  animation: pin-flash 0.6s ease-in-out 3;
}
@keyframes pin-flash {
  50% {
    transform: translate(-50%, -50%) scale(1.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pin--flash {
    animation: none;
    outline: 4px solid var(--wait);
    outline-offset: 3px;
  }
}
a.pin:hover,
a.pin:focus-visible,
.pin--new {
  background: var(--ink);
}
.pin--inline {
  position: static;
  width: 24px;
  height: 24px;
  margin-right: 2px;
  border-width: 2px;
  vertical-align: middle;
  box-shadow: none;
  font-size: 0.75rem;
  transform: none;
}
.share__thread li:target {
  padding-left: 12px;
  border-left: 3px solid var(--wait);
  background: var(--wait-wash);
}
.share__replies {
  margin: 8px 0 0 12px;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--grey-200);
  list-style: none;
}
.share__replies li {
  padding: 6px 0;
  border-top: 0;
}
.share__answer {
  margin-top: 6px;
}
/* Verwijder bij een opmerking (alleen intern): klein en grijs, rechts van wie en wanneer. */
.share__weg {
  margin-left: 6px;
  color: var(--grey-600);
  font-size: 0.85rem;
  text-decoration-color: var(--grey-300);
}
.share__weg:hover {
  color: var(--error);
}
.share__quote {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 2px solid var(--grey-200);
  background: var(--grey-100);
  border-radius: var(--radius);
}
.share__quote p {
  margin: 0;
}
.share__answer summary {
  display: inline-block;
  color: var(--grey-600);
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}
.share__answer form {
  margin-top: 8px;
}
.modal[hidden] {
  display: none;
}
.share__pages img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
}
.share__pages figcaption {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--grey-600);
  text-align: right;
}
.share__pdf {
  display: block;
  width: 100%;
  height: 75vh;
  min-height: 420px;
  margin: 0 0 16px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
}
.share__preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
}
.share__thread {
  margin-bottom: 20px;
}
.share__reply textarea {
  min-height: 80px;
}
/* Open links: de link in een smal veld om te kopiëren, en het formulier voor een nieuwe link op één regel. */
.input--copy {
  width: 100%;
  min-width: 220px;
  padding: 6px 8px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--grey-100);
  color: var(--ink);
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Een link om te kopiëren: het veld en de knop op één regel. */
.copy {
  display: flex;
  gap: 8px;
  align-items: center;
}
.copy .button {
  flex: none;
}
.share__linkform {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.share__linkform .field {
  flex: 1 1 260px;
  margin: 0;
}
/* Een demo-site als venster: een balk met het adres en daaronder de site zelf. De groene stip: de site staat live
   in het venster (zelfde betekenis als bij de meting). Grijs: alleen het adres. */
.site__lead {
  margin: 20px 0 0;
}
.site {
  margin: 20px 0 0;
  overflow: hidden;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.site__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid var(--grey-200);
}
.site__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grey-300);
}
.site__dot--live {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgb(46 158 91 / 0.16);
}
.site__address {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.site__address strong {
  font-weight: 600;
}
.site__address span {
  color: var(--grey-600);
}
/* Computer of mobiel: twee knoppen in één pil. Het keuzerondje zelf is onzichtbaar maar bereikbaar met het toetsenbord. */
.site__view {
  display: flex;
  flex: none;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--grey-100);
}
.site__view legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.site__view input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.site__view span {
  display: block;
  padding: 5px 14px;
  border-radius: 999px;
  color: var(--grey-600);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.site__view input:checked + span {
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.site__view input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.site__stage {
  display: grid;
  justify-items: center;
  padding: 28px;
  background: var(--grey-100);
  transition: padding var(--slow) var(--ease);
}
/* Computer: een scherm met een donkere rand op de grijze ondergrond, net als het toestel bij mobiel. Zo is te zien
   waar de site begint en eindigt, ook als de site zelf wit is. */
.site__frame {
  display: block;
  width: 100%;
  height: clamp(480px, 76vh, 980px);
  border: 10px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  transition: width var(--slow) var(--ease), height var(--slow) var(--ease), border-radius var(--slow) var(--ease);
}
/* Mobiel: de breedte van een telefoon, met de omtrek van een toestel. */
.site:has(input[value="mobiel"]:checked) .site__stage {
  padding: 28px 16px;
}
.site:has(input[value="mobiel"]:checked) .site__frame {
  /* 390 pixels scherm binnen de rand van 10. */
  width: 410px;
  max-width: 100%;
  height: min(800px, 76vh);
  border-radius: 36px;
}
/* Mag de site niet in een kader: het adres groot, met de knop. */
.site--dicht .site__stage {
  justify-items: start;
  gap: 4px;
  padding: 48px 32px;
}
.site__host {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.site--dicht .button {
  margin-top: 16px;
}
@media (max-width: 700px) {
  /* Op een telefoon is "computer" al mobiel. */
  .site__view {
    display: none;
  }
  .site__bar .button {
    display: none;
  }
  /* Het kader zelf is hier het scherm: geen rand eromheen. */
  .site__stage {
    padding: 0;
  }
  .site__frame {
    height: 72vh;
    border: 0;
    border-radius: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site__stage,
  .site__frame,
  .site__view span {
    transition: none;
  }
}

/* De miniatuur van een demo-site in een kaart: de site op 1/4, dus een venster van vier keer de kaartbreedte. */
.site-thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--white);
}
.site-thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 400%;
  border: 0;
  transform: scale(0.25);
  transform-origin: 0 0;
  pointer-events: none;
}
.site-thumb__host {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  padding: 3px 10px 3px 22px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--grey-200);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.site-thumb__host::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--ok);
}
.site-thumb--dicht {
  display: grid;
  place-items: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--grey-100), var(--grey-200));
  text-align: center;
}
.site-thumb--dicht span {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* De klantpagina's: smaller en zonder dashboardmenu. */
body.client main {
  max-width: 900px;
}

/* --- Wiki: opgezet als documentatie. ------------------------------------------
   Links de navigatie, in het midden de pagina op leesbreedte, rechts "Op deze pagina".
   Beweging is rustig en kort: alleen waar iemand iets doet, nooit opnieuw bij elke pagina. */

.page--docs {
  --page: 1440px;
}

.docs {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 208px;
  gap: 0 56px;
  align-items: start;
}

.docs--notoc {
  grid-template-columns: 248px minmax(0, 1fr);
}

/* Op een breed scherm is de wiki een vast scherm, zoals Sites: kop en menu staan stil, de drie kolommen
   vullen de rest en scrollen elk apart. Scrollen met de muis op de navigatie scrolt alleen de navigatie,
   nooit de pagina ernaast. Pagina's in de privé-map zonder kolommen (Bestanden, Chat) scrollen gewoon. */
@media (min-width: 901px) {
  .page--docs:has(.docs) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }

  .page--docs:has(.docs) main {
    display: flex;
    flex: 1;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding-bottom: 0;
  }

  .page--docs:has(.docs) main > * {
    flex: none;
  }

  .page--docs:has(.docs) main > .docs {
    flex: 1;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
  }

  .docs__nav,
  .docs__main,
  .docs__toc {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .docs__main {
    padding-bottom: 48px;
    scrollbar-gutter: stable;
  }
}

/* Het menu van de wiki. Op een telefoon is het één knop die openklapt. Op een breed scherm staat het
   altijd open en is de knop weg. Een browser zonder ::details-content toont de knop ook breed. */
.docs__menu > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  list-style: none;
}

.docs__menu > summary::-webkit-details-marker {
  display: none;
}

.docs__menu > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid var(--grey-600);
  border-bottom: 1.5px solid var(--grey-600);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--slow) var(--ease);
}

.docs__menu[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.docs__menulabel {
  flex: none;
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs__menuhere {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs__menu[open] > summary {
  margin-bottom: 20px;
}

.docs__menu::details-content {
  height: 0;
  overflow: clip;
  transition: height var(--slow) var(--ease), content-visibility var(--slow) allow-discrete;
}

.docs__menu[open]::details-content {
  height: auto;
}

@supports selector(::details-content) {
  @media (min-width: 901px) {
    .docs__menu > summary {
      display: none;
    }

    .docs__menu::details-content {
      height: auto;
      overflow: visible;
      content-visibility: visible;
    }
  }
}

.docs__nav {
  padding: 4px 20px 24px 0;
  border-right: 1px solid var(--grey-200);
}

.docs__search {
  max-width: none;
  margin: 0 0 24px;
}

.docs__search input {
  padding: 7px 10px;
  font-size: 14px;
}

.docs__search .button {
  padding: 7px 12px;
  font-size: 14px;
}

.docs__new {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--grey-200);
  font-size: 14px;
}

.docs__new a {
  color: var(--grey-600);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

.docs__new a:hover {
  color: var(--ink);
}

.docs__main {
  min-width: 0;
  /* De browser laat bij een klik alleen dit deel zacht wisselen. Zie @view-transition onderaan dit blok. */
  view-transition-name: wiki-doc;
}

/* De navigatie */

.wikitree {
  font-size: 14px;
}

.wikitree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wikitree > ul > li + li {
  margin-top: 20px;
}

.wikitree a {
  display: block;
  color: var(--grey-600);
  text-decoration: none;
  line-height: 1.35;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.wikitree a:hover,
.wikitree a[aria-current="true"] {
  color: var(--ink);
}

/* Een kopje bovenin: het begin van een deel. */
.wikitree__section > a {
  padding: 2px 0 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wikitree__section > a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* De pagina's in een deel: een dunne lijn links, de gekozen pagina krijgt die lijn in zwart. */
.wikitree li ul {
  border-left: 1px solid var(--grey-200);
}

.wikitree li li > a,
.wikitree li li > details > summary > a {
  margin-left: -1px;
  padding: 5px 0 5px 14px;
  border-left: 2px solid transparent;
}

.wikitree li li > a:hover,
.wikitree li li > details > summary > a:hover {
  border-left-color: var(--grey-300);
}

.wikitree li li > a[aria-current="true"],
.wikitree li li > details > summary > a[aria-current="true"] {
  border-left-color: var(--ink);
  font-weight: 600;
}

.wikitree li li ul {
  margin: 2px 0 4px 14px;
}

.wikitree__conf > a::after,
.wikitree__conf > details > summary > a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0 2px 8px;
  border-radius: 50%;
  background: var(--grey-300);
}

/* Dieper in de boom klapt een pagina met pagina's eronder open en dicht. */
.wikitree__node > summary {
  display: flex;
  align-items: center;
  list-style: none;
}

.wikitree__node > summary::-webkit-details-marker {
  display: none;
}

.wikitree__node > summary > a {
  flex: 1;
  min-width: 0;
}

.wikitree__chev {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}

.wikitree__chev:hover {
  background: var(--grey-100);
}

.wikitree__chev::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--grey-600);
  border-bottom: 1.5px solid var(--grey-600);
  transform: translateX(-1px) rotate(-45deg);
  transition: transform var(--slow) var(--ease);
}

.wikitree__node[open] > summary .wikitree__chev::before {
  transform: translateY(-1px) rotate(45deg);
}

.wikitree__node::details-content,
.wiki__history::details-content {
  height: 0;
  overflow: clip;
  transition: height var(--slow) var(--ease), content-visibility var(--slow) allow-discrete;
}

.wikitree__node[open]::details-content,
.wiki__history[open]::details-content {
  height: auto;
}

/* De pagina */

.doc {
  max-width: 760px;
  padding-bottom: 24px;
}

.doc--form {
  max-width: 980px;
}

.wiki__crumbs {
  margin: 0 0 12px;
  font-size: 14px;
}

.wiki__crumbs a {
  color: var(--grey-600);
  text-decoration: none;
}

.wiki__crumbs a:hover {
  color: var(--ink);
}

.doc__sep {
  margin: 0 4px;
  color: var(--grey-300);
}

.doc__eyebrow {
  margin: 0 0 8px;
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}

.doc__title {
  margin: 0;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.wiki__formtitle {
  margin-bottom: 20px;
}

.doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  font-size: 14px;
}

.doc__actions a {
  color: var(--grey-600);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

.doc__actions a:hover {
  color: var(--ink);
}

.doc__lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.doc__children {
  margin-top: 48px;
}

.wiki__subhead {
  margin: 0 0 12px;
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc__cards,
.doc__results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.doc__results {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.doc__cards a,
.doc__results a,
.doc__pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  background: var(--white);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease);
}

.doc__cards a:hover,
.doc__results a:hover,
.doc__pager a:hover {
  border-color: var(--ink);
}

.doc__cards span,
.doc__results span {
  color: var(--grey-600);
  font-size: 14px;
  line-height: 1.45;
}

.doc__pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 48px;
}

.doc__pager a {
  font-weight: 600;
}

.doc__pager small {
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 400;
}

.doc__prev small::before {
  content: "\2190  ";
}

.doc__next {
  text-align: right;
}

.doc__next small::after {
  content: "  \2192";
}

.doc__meta {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--grey-200);
  font-size: 14px;
}

.doc__meta > p {
  margin: 0;
}

.wiki__history {
  margin-top: 8px;
}

.wiki__history summary {
  color: var(--grey-600);
  cursor: pointer;
}

.wiki__history .notes li {
  padding: 8px 0;
}

.wiki__history .notes p {
  margin: 0;
}

.wiki__missing {
  border-bottom: 1px dashed var(--grey-300);
  color: var(--grey-600);
}

/* Op deze pagina */

.docs__toc {
  font-size: 13px;
}

.docs__toctitle {
  margin: 4px 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs__toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--grey-200);
}

.docs__toc a {
  display: block;
  margin-left: -1px;
  padding: 4px 0 4px 12px;
  border-left: 2px solid transparent;
  color: var(--grey-600);
  text-decoration: none;
  line-height: 1.35;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.docs__toc a:hover {
  border-left-color: var(--grey-300);
  color: var(--ink);
}

.docs__toc4 a {
  padding-left: 24px;
}

/* Het formulier */

.wiki__edit textarea {
  min-height: 420px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  tab-size: 2;
}

.wiki__edit .field small {
  display: block;
  margin-top: 6px;
  color: var(--grey-600);
  font-size: 13px;
  line-height: 1.6;
}

.wiki__place {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0 20px;
  align-items: start;
}

.wiki__place .check--row {
  grid-column: 1 / -1;
  margin: 4px 0 16px;
}

/* De tekst van een pagina */

.prose {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.7;
}

.prose > :first-child {
  margin-top: 0;
}

.doc .prose > p:first-child {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin: 32px 0 10px;
  line-height: 1.25;
  scroll-margin-top: 24px;
}

.prose h3 {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--grey-200);
  font-size: 24px;
  letter-spacing: -0.01em;
}

.prose > h3:first-child {
  padding-top: 0;
  border-top: 0;
}

.prose h4 {
  font-size: 20px;
  letter-spacing: -0.01em;
}

.prose h5,
.prose h6 {
  font-size: 15px;
}

.prose__anchor {
  margin-left: 8px;
  color: var(--grey-300);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease);
}

.prose :is(h3, h4, h5, h6):hover .prose__anchor,
.prose__anchor:focus-visible {
  opacity: 1;
}

.prose__anchor:hover {
  color: var(--ink);
}

.prose p {
  margin: 0 0 14px;
}

.prose a:not(.prose__anchor) {
  text-decoration-color: var(--grey-300);
  text-underline-offset: 3px;
}

.prose a:not(.prose__anchor):hover {
  text-decoration-color: var(--ink);
}

.prose a[target="_blank"]::after {
  content: " \2197";
  color: var(--grey-600);
  font-size: 0.8em;
}

.prose ul,
.prose ol {
  margin: 0 0 14px;
  padding-left: 24px;
}

.prose li {
  margin: 4px 0;
}

.prose li ul,
.prose li ol {
  margin: 4px 0 0;
}

.prose ul {
  list-style: none;
  padding-left: 20px;
}

.prose ul > li {
  position: relative;
}

/* Een net streepje als opsommingsteken, geen bolletje. */
.prose ul > li::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: -16px;
  width: 8px;
  height: 1.5px;
  background: var(--grey-600);
}

/* Een citaat is een kader voor een opmerking, zoals een notitie in documentatie. */
.prose blockquote {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--grey-100);
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose code {
  padding: 1px 5px;
  border: 1px solid var(--grey-200);
  border-radius: 4px;
  background: var(--grey-100);
  font-family: var(--mono);
  font-size: 0.875em;
}

.prose pre {
  margin: 0 0 16px;
  padding: 16px 18px;
  overflow-x: auto;
  border-radius: 8px;
  background: var(--ink);
  color: var(--grey-100);
  font-size: 13.5px;
  line-height: 1.6;
}

.prose pre code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.prose hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--grey-200);
}

.prose .table {
  margin: 0 0 16px;
  font-size: 15px;
}

/* De bevestiging */

.wiki .modal {
  animation: wiki-fade var(--fast) var(--ease);
}

.wiki .modal__box {
  animation: wiki-pop var(--slow) var(--ease);
}

@keyframes wiki-fade {
  from {
    opacity: 0;
  }
}

@keyframes wiki-pop {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}

/* Tussen twee pagina's: alleen de pagina in het midden vervaagt. Navigatie en kop staan stil.
   Browsers zonder deze functie laden gewoon de nieuwe pagina. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(wiki-doc) {
  animation: none;
}

::view-transition-old(wiki-doc) {
  animation: doc-out 0.1s var(--ease) both;
}

::view-transition-new(wiki-doc) {
  animation: doc-in var(--fast) var(--ease) both;
}

@keyframes doc-out {
  to {
    opacity: 0;
  }
}

@keyframes doc-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .wikitree a,
  .wikitree__chev,
  .wikitree__chev::before,
  .docs__menu > summary::after,
  .docs__menu::details-content,
  .nav__menu > summary::after,
  .nav__menu::details-content,
  .wikitree__node::details-content,
  .wiki__history::details-content,
  .doc__actions a,
  .doc__cards a,
  .doc__results a,
  .doc__pager a,
  .docs__toc a,
  .prose__anchor {
    transition: none;
  }

  .wiki .modal,
  .wiki .modal__box {
    animation: none;
  }
}

/* Smal, of breed met de zijbalk ernaast: dan geen inhoudsopgave rechts. */
@media (max-width: 1180px), (min-width: 1280px) and (max-width: 1439px) {
  .docs {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 0 40px;
  }

  .docs__toc {
    display: none;
  }
}

@media (max-width: 900px) {
  .docs,
  .docs--notoc {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs__nav {
    margin-bottom: 24px;
    padding: 0;
    border-right: 0;
  }

  /* Een lange boom scrolt binnen het open menu, zodat de pagina eronder in de buurt blijft. */
  .docs__menu[open] .wikitree {
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .wikitree a {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .doc__title {
    font-size: 28px;
  }

  .doc__pager,
  .wiki__place {
    grid-template-columns: 1fr;
  }
}

body.client.page--item main {
  max-width: var(--page);
}

/* De privé-map: tabs bovenaan en de chat */

.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  margin: 0 0 20px;
  font-weight: 600;
}

.tabs a {
  padding: 6px 0;
  color: var(--grey-600);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tabs a:hover,
.tabs a[aria-current="page"] {
  color: var(--ink);
}

.tabs a[aria-current="page"] {
  border-bottom-color: var(--ink);
}

.tabs__lock {
  margin-left: auto;
}

.chat__log {
  display: grid;
  gap: 12px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.chat__msg {
  max-width: 72ch;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--grey-100);
  animation: wiki-fade 0.25s ease both;
}

.chat__msg p {
  margin: 0;
}

.chat__msg--vraag {
  justify-self: end;
  background: var(--ink);
  color: var(--white);
}

.chat__reset {
  margin-top: 12px;
}

/* Vraag Mistral onder een pagina in de privé-map. */
.pagechat {
  margin-top: 32px;
  scroll-margin-top: 24px;
}

.chat__state {
  margin: 8px 0 0;
}

.chat__choice {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.diff {
  margin: 12px 0 0;
  padding: 8px 0;
  overflow-x: auto;
  list-style: none;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
}

.diff li {
  max-width: none;
  padding: 0 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diff__weg {
  background: var(--error-wash);
  color: var(--error);
}

.diff__weg::before {
  content: "− ";
}

.diff__erbij {
  background: color-mix(in srgb, var(--ok) 12%, var(--white));
  color: var(--ink);
}

.diff__erbij::before {
  content: "+ ";
}

.diff__gap {
  color: var(--grey-600);
}

.recovery {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--grey-100);
  font-size: 18px;
  letter-spacing: 0.04em;
  word-break: break-all;
}

/* Automatiseringen: de editor van n8n vult de brede pagina. */
.automations {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-height: 70vh;
}

.automations__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
}

.automations__bar p {
  margin: 0;
}

.automations__frame {
  flex: 1;
  width: 100%;
  min-height: 70vh;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
}

/* Telefoon. De kop staat bij de regels van het menu, bovenaan. */
@media (max-width: 900px) {
  main {
    padding: 20px 16px 48px;
  }

  /* minmax(0, 1fr): een lange naam of een rij chips duwt de kolom anders breder dan het scherm. */
  .split,
  .grid.grid--three,
  .grid.grid--two {
    grid-template-columns: minmax(0, 1fr);
  }

  .split__list {
    padding: 16px;
  }

  /* Een lang e-mailadres of een lange repo-naam breekt af in plaats van de tabel te verbreden. */
  .table td {
    overflow-wrap: anywhere;
  }
  /* Een tabel in een wikipagina blijft een tabel: zonder kolomkoppen zijn de cellen niet te lezen. Hij scrolt zelf zijwaarts. */
  .prose .table {
    display: block;
    overflow-x: auto;
  }

  .prose .table thead {
    display: table-header-group;
  }

  .prose .table tr {
    display: table-row;
    padding: 0;
  }

  .prose .table th,
  .prose .table td {
    display: table-cell;
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--grey-100);
    overflow-wrap: normal;
    min-width: 8em;
  }

  /* Knoppen in een venster: even breed naast of onder elkaar, niet los rechts uitgelijnd. */
  .modal__actions .button {
    flex: 1 1 auto;
  }
}

/* Vinger in plaats van muis: tikdoelen van minstens 36 px. */
@media (pointer: coarse) {
  .chip {
    height: 36px;
    padding: 0 14px;
  }

  .viewas .linkbutton {
    padding: 8px 0;
  }

  .subnav a {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .tabs a {
    padding: 10px 0;
  }

  .wikitree a {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .check input {
    flex: none;
    width: 20px;
    height: 20px;
  }
}


/* Telefoon: de tabs van Admin en Server zijn losse pillen die afbreken, zodat je ze allemaal ziet.
*/
@media (max-width: 900px) {
  .subnav,
  .filters {
    width: auto;
    padding: 0;
    border: 0;
    background: none;
  }

  .subnav a,
  .filters a {
    border: 1px solid var(--grey-200);
    background: var(--white);
    white-space: nowrap;
  }

  .subnav a[aria-current="page"],
  .filters a[aria-current="true"] {
    border-color: var(--ink);
    background: var(--ink);
  }
}

/* De pagina Jenkins: breder voor de kaarten, maar gewoon scrollen (geen werkscherm zoals Sites) */
.page--breed {
  --page: 1600px;
}

/* De pagina Jenkins: de jobs, en daaronder los de website-deploys (de kaarten met GitHub, DEV en LIVE) */
.deploys {
  margin-top: 24px;
}

.deploys--sites {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 2px solid var(--grey-200);
}

.deploys__head {
  margin-bottom: 16px;
}

.deploys__head .deploys__title {
  margin-bottom: 4px;
}

.deploys__title {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

.deploys .card + .card {
  margin-top: 16px;
}

/* Een site op de mini (zoals base.bwhsite.nl) staat als job-kaart boven de projectkaarten: ruimte ertussen. */
.deploys .jobswrap + .card {
  margin-top: 24px;
}

/* Op de pagina van een site: de weg naar de deploys van het project */
.deploylink {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
}

/* ===== Jenkins: de jobs als kaarten =========================================================================== */

/* De hoek van het licht dat langs de rand van een draaiende job loopt */
@property --hoek {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.jobs__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.jobs__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip--loopt {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.chip--loopt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white);
  animation: job-knipper 1.2s var(--ease) infinite;
}

.chip--mislukt {
  background: var(--error-wash);
  border-color: var(--error-wash);
  color: var(--error);
}

.chip--gelukt {
  color: var(--ok);
}

.jobs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}

.job {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 18px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: border-color var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}

.job__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.job__title {
  flex: 1;
  min-width: 0;
}

.job__title h3 {
  font-size: 17px;
  letter-spacing: -0.01em;
}

/* Het i-icoon naast de naam: de toelichting opent in een venster. */
.job__info {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  padding: 0;
  vertical-align: -5px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--grey-600);
  cursor: pointer;
}

.job__info:hover,
.job__info:focus-visible {
  background: var(--grey-100);
  color: var(--ink);
}

/* Het bolletje: de stand in één oogopslag */
.job__orb {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--grey-300);
}

.job--gelukt .job__orb { background: var(--ok); }
.job--mislukt .job__orb { background: var(--error); }
.job--wacht .job__orb { background: var(--wait); }
.job--loopt .job__orb { background: var(--ink); }

.job--loopt .job__orb::before,
.job--loopt .job__orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ink);
  animation: job-ring 1.8s var(--ease) infinite;
}

.job--loopt .job__orb::after {
  animation-delay: 0.9s;
}

.job--wacht .job__orb {
  animation: job-knipper 1.2s var(--ease) infinite;
}

/* Het spoor: repo, Jenkins en het doel. Tijdens een run reist er een pakketje over. */
.job__flow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}

.job__stop {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--grey-600);
  white-space: nowrap;
}

/* Jenkins in het midden krimpt niet; de namen links en rechts wel, met puntjes */
.job__stop--mid {
  flex-shrink: 0;
}

.job__line {
  position: relative;
  flex: 1;
  min-width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--grey-200);
  overflow: hidden;
}

.job__packet {
  position: absolute;
  top: 50%;
  left: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ink));
  opacity: 0;
  transform: translate(-100%, -50%);
}

.job--loopt .job__stop,
.deploying .job__stop {
  background: var(--ink);
  color: var(--white);
}

.job--loopt .job__packet,
.deploying .job__packet {
  opacity: 1;
  animation: job-pakket 1.6s var(--ease) infinite;
}

.job--loopt .job__line + .job__stop + .job__line .job__packet,
.deploying .job__line + .job__stop + .job__line .job__packet {
  animation-delay: 0.8s;
}

.job--gelukt .job__line {
  background: color-mix(in srgb, var(--ok) 35%, var(--grey-200));
}

/* Tijdens een run stromen de lijntjes: streepjes die naar het doel lopen, met het pakketje erover */
.job--loopt .job__line,
.deploying .job__line {
  --lijn: var(--grey-600);
  background-color: var(--grey-200);
  background-image: linear-gradient(90deg, var(--lijn) 50%, transparent 50%);
  background-size: 10px 100%;
  animation: job-stroom 0.5s linear infinite;
}

/* Klaar: het spoor staat stil in de kleur van de uitslag */
.job--vers.job--gelukt .job__line { background: color-mix(in srgb, var(--ok) 55%, var(--white)); }
.job--vers.job--mislukt .job__line { background: color-mix(in srgb, var(--error) 45%, var(--white)); }

/* De stand en de tijd */
.job__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  font-size: 14px;
}

.pill--loopt::before { background: var(--ink); }
.pill--gelukt::before { background: var(--ok); }
.pill--mislukt::before { background: var(--error); }
.pill--wacht::before { background: var(--wait); }
.pill--prive::before { background: transparent; border: 1.5px dashed var(--grey-600); }

/* De voortgang: gevuld volgens de verwachte duur, met een glans die meeloopt */
.job__progress {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: var(--grey-100);
  overflow: hidden;
}

.job__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--voortgang, 0%);
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0, rgb(255 255 255 / 0.55) 50%, transparent 100%) 0 0 / 60px 100% no-repeat,
    var(--ink);
  animation: job-glans 1.4s linear infinite;
  transition: width 1s linear;
}

.job__progress--over .job__bar {
  animation: job-glans 1.4s linear infinite, job-adem 1.6s var(--ease) infinite;
}

/* Geen verwachte duur (eerste run): een blokje dat heen en weer gaat */
.job__progress--onbekend .job__bar {
  width: 35%;
  animation: job-heen-weer 1.6s var(--ease) infinite alternate;
}

/* De laatste runs: de hoogte is de duur, de kleur de uitslag */
.job__history {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
}

.job__run {
  flex: 0 0 auto;
  width: 10px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--grey-300);
  cursor: pointer;
  transform-origin: bottom;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.job__run--h1 { height: 20%; }
.job__run--h2 { height: 40%; }
.job__run--h3 { height: 60%; }
.job__run--h4 { height: 80%; }
.job__run--h5 { height: 100%; }
.job__run--gelukt { background: var(--ok); }
.job__run--mislukt { background: var(--error); }
.job__run--loopt { background: var(--ink); animation: job-adem 1.2s var(--ease) infinite; }

.job__history:hover .job__run { opacity: 0.45; }
.job__history .job__run:hover,
.job__history .job__run:focus-visible { opacity: 1; }

.job__run:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Het kaartje bij een balkje: nummer en uitslag, moment, duur tegenover het gemiddelde */
.job__run {
  position: relative;
}

.job__tip {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 10px);
  left: 50%;
  display: grid;
  gap: 3px;
  width: max-content;
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--grey-100);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  box-shadow: 0 10px 30px rgb(34 8 8 / 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

/* Het pijltje onder het kaartje */
.job__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-top-color: var(--ink);
  transform: translateX(-50%);
}

.job__tip strong {
  color: var(--white);
  font-size: 13px;
}

.job__tip em {
  margin-top: 3px;
  color: var(--grey-300);
  font-style: normal;
}

.job__run:hover .job__tip,
.job__run:focus-visible .job__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Aan de randen van de kaart klapt het kaartje naar binnen */
.job__run--links .job__tip { left: -6px; transform: translate(0, 4px); }
.job__run--links:hover .job__tip,
.job__run--links:focus-visible .job__tip { transform: translate(0, 0); }
.job__run--links .job__tip::after { left: 11px; }
.job__run--rechts .job__tip { left: auto; right: -6px; transform: translate(0, 4px); }
.job__run--rechts:hover .job__tip,
.job__run--rechts:focus-visible .job__tip { transform: translate(0, 0); }
.job__run--rechts .job__tip::after { left: auto; right: 5px; transform: none; }

/* Het bolletje van de pil op het donkere kaartje */
.job__tip .pill--gelukt::before { background: var(--ok); }
.job__tip .pill--loopt::before { background: var(--white); }

/* Tijdens een run: licht dat langs de rand draait, en een zachte gloed */
.job--loopt {
  border-color: transparent;
  box-shadow: 0 8px 28px rgb(34 8 8 / 0.10);
}

.job--loopt::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--hoek), var(--grey-200) 0 62%, var(--grey-600) 78%, var(--ink) 88%, var(--grey-200) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: job-hoek 2.6s linear infinite;
}

/* Alleen als het verversen hapert: een oranje label met wat er mis is */
.chip--live {
  display: none;
}

.chip--live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: job-knipper 2s var(--ease) infinite;
}

.jobswrap--offline .chip--live {
  display: inline-flex;
  border-color: var(--wait-wash);
  background: var(--wait-wash);
  color: var(--wait);
}

.jobswrap--offline .chip--live::before {
  background: var(--wait);
}

/* Net gestart: een ring om de kaart en een label, daarna gaat de kaart over in de wachtrij of de run */
.job--gestart {
  animation: job-gestart 1.4s var(--ease) 2;
}

.job--gestart::after {
  content: "Gestart";
  position: absolute;
  top: -11px;
  right: 18px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  animation: job-label 2.6s var(--ease) both;
}

@keyframes job-gestart {
  0% { box-shadow: 0 0 0 0 rgb(34 8 8 / 0.35), var(--shadow); }
  100% { box-shadow: 0 0 0 14px rgb(34 8 8 / 0), var(--shadow); }
}

@keyframes job-label {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); }
  12%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* Net klaar: de afloop blijft 2 minuten staan. Volle balk, het pakketje aan het eind, het spoor in de kleur. */
.job__vers {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 600;
  animation: job-open var(--slow) var(--ease);
}

.job--vers.job--gelukt .job__vers { background: color-mix(in srgb, var(--ok) 14%, var(--white)); color: var(--ok); }
.job--vers.job--mislukt .job__vers { background: var(--error-wash); color: var(--error); }

.job__progress--klaar .job__bar {
  width: 100%;
  background: var(--grey-300);
  animation: job-vol 0.6s var(--ease) both;
}

.job--gelukt .job__progress--klaar .job__bar { background-color: var(--ok); }
.job--mislukt .job__progress--klaar .job__bar { background-color: var(--error); }

/* De afloop: het pakketje maakt één laatste ritje over het hele spoor en verdwijnt bij het doel. Daarna staat alles stil. */
.job--klaar .job__packet {
  opacity: 1;
  animation: job-pakket 0.5s var(--ease) both;
}

.job--klaar .job__line + .job__stop + .job__line .job__packet {
  animation-delay: 0.3s;
}

.job--vers.job--gelukt .job__packet { background: linear-gradient(90deg, transparent, var(--ok)); }
.job--vers.job--mislukt .job__packet { background: linear-gradient(90deg, transparent, var(--error)); }

.job--vers.job--gelukt .job__stop { background: color-mix(in srgb, var(--ok) 14%, var(--white)); color: var(--ok); }
.job--vers.job--mislukt .job__stop:last-child { background: var(--error-wash); color: var(--error); }

/* De afloop: groen oplichten met een vinkje, of rood met een korte schok */
.job--klaar.job--gelukt {
  animation: job-gelukt 1.6s var(--ease) 0.6s forwards;
}

.job--klaar.job--gelukt .job__orb {
  animation: job-plop 0.6s var(--ease) 0.6s both;
}

.job--vers.job--gelukt .job__orb {
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.job--vers.job--gelukt .job__orb::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 4px;
  height: 8px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.job--klaar.job--mislukt {
  animation: job-schok 0.5s var(--ease) 0.6s, job-mislukt 1.6s var(--ease) 0.6s forwards;
}

/* De log achter een knop: een terminal in de kaart */
.job__log {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.terminal {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ink);
  animation: job-open var(--slow) var(--ease);
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  color: var(--grey-300);
  font-size: 12px;
}

.terminal__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  font-weight: 600;
}

.terminal__live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: job-knipper 1.2s var(--ease) infinite;
}

.terminal--klaar .terminal__live::before {
  animation: none;
  background: var(--grey-300);
}

.terminal__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal__follow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.terminal__copy {
  padding: 3px 8px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 6px;
  background: none;
  color: var(--grey-100);
  font: inherit;
  cursor: pointer;
}

.terminal__copy:hover {
  background: rgb(255 255 255 / 0.08);
}

.terminal__text {
  max-height: 340px;
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  color: var(--grey-100);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.modal__box--log {
  width: min(100%, 960px);
}

/* Een deploy van een website loopt: een scherm met het pakketje van GitHub naar DEV of LIVE */
.deploying {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(34 8 8 / 0.6);
  animation: job-open var(--slow) var(--ease);
}

.deploying__box {
  width: min(100%, 520px);
  padding: 32px 28px 28px;
  border-radius: var(--radius-lg);
  background: var(--white);
  text-align: center;
  box-shadow: 0 24px 64px rgb(34 8 8 / 0.25);
}

.deploying__box h2 {
  margin-top: 26px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.deploying__box p {
  margin-top: 8px;
}

.job__flow--groot {
  gap: 12px;
  font-size: 14px;
}

.job__flow--groot .job__stop {
  padding: 6px 14px;
}

.job__flow--groot .job__line {
  height: 3px;
}

.job__flow--groot .job__packet {
  width: 40px;
  height: 3px;
}

@keyframes job-hoek { to { --hoek: 360deg; } }
@keyframes job-stroom { from { background-position: 0 0; } to { background-position: 10px 0; } }
@keyframes job-vol { from { width: var(--van, 0%); } to { width: 100%; } }
@keyframes job-ring { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes job-knipper { 50% { opacity: 0.35; } }
@keyframes job-pakket { from { left: 0; transform: translate(-100%, -50%); } to { left: 100%; transform: translate(0, -50%); } }
@keyframes job-glans { from { background-position: -60px 0, 0 0; } to { background-position: calc(100% + 60px) 0, 0 0; } }
@keyframes job-adem { 50% { opacity: 0.6; } }
@keyframes job-heen-weer { from { transform: translateX(-10%); } to { transform: translateX(200%); } }
@keyframes job-plop { 0% { transform: scale(0.6); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes job-open { from { opacity: 0; transform: translateY(4px); } }
@keyframes job-schok { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

@keyframes job-gelukt {
  0% { border-color: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); }
  40% { border-color: var(--ok); box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok) 0%, transparent); }
  100% { border-color: var(--grey-200); box-shadow: var(--shadow); }
}

@keyframes job-mislukt {
  0%, 40% { border-color: var(--error); box-shadow: 0 0 0 4px var(--error-wash); }
  100% { border-color: var(--grey-200); box-shadow: var(--shadow); }
}

@media (prefers-reduced-motion: reduce) {
  .job *,
  .job,
  .job::before,
  .job::after,
  .deploying,
  .deploying *,
  .chip--loopt::before,
  .chip--live::before,
  .terminal,
  .terminal__live::before {
    animation: none !important;
    transition: none !important;
  }

  .job--loopt .job__packet,
  .deploying .job__packet {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* De alleen-lezen kopie op de VPS: een balk boven elke pagina. */
.kopie {
	background: #1a1a1a;
	color: #fff;
	text-align: center;
	padding: 8px 16px;
	font-size: 0.9rem;
}

/* ===== Klantprojecten =========================================================================================== */

/* De stand bovenaan: vier getallen */
.kp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
}

.kp-stat strong {
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kp-stat span {
  color: var(--grey-600);
  font-size: 13px;
}

.kp-stat--jij {
  border-color: var(--wait);
  background: var(--wait-wash);
}

.kp-stat--jij strong {
  color: var(--wait);
}

.kp-stat--akkoord strong {
  color: var(--ok);
}

.kp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.kp-toolbar .chips {
  margin: 0;
}

/* Elk project als kaart, met een voorbeeld of een monogram */
.kp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.kp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.kp-card:hover,
.kp-card:focus-visible {
  border-color: var(--grey-300);
  box-shadow: 0 12px 32px rgb(34 8 8 / 0.10);
  transform: translateY(-2px);
}

.kp-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Wacht er iets op BW H: een oranje rand links */
.kp-card--jij::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--wait);
}

.kp-card--dicht {
  opacity: 0.72;
}

.kp-card--dicht .kp-card__cover img {
  filter: grayscale(1);
}

.kp-card__cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--grey-100), var(--grey-200));
}

.kp-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--slow) var(--ease);
}

.kp-card:hover .kp-card__cover img {
  transform: scale(1.04);
}

/* Het monogram: twee letters, voor een project zonder voorbeeld en voor een contact */
.kp-mono {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.kp-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 14px;
}

.kp-card__client {
  margin: 0;
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kp-card__name {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.kp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.kp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 600;
}

.kp-tag--intern {
  border: 1px dashed var(--grey-300);
  background: transparent;
}

.kp-tag--jij {
  background: var(--wait-wash);
  color: var(--wait);
}

.kp-tag--jij::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wait);
  animation: job-knipper 1.6s var(--ease) infinite;
}

.kp-tag--akkoord {
  background: color-mix(in srgb, var(--ok) 12%, var(--white));
  color: var(--ok);
}

.kp-tag--open {
  background: var(--ink);
  color: var(--white);
}

/* Privé of vrijgegeven aan de klant. Privé: een stippellijn, zoals iets dat nog niet af is. */
.kp-tag--prive {
  border: 1px dashed var(--grey-600);
  background: transparent;
  color: var(--ink);
}

.kp-tag--vrij {
  background: var(--ink);
  color: var(--white);
}

/* Klanten: de projecten in Simplicate als korte lijst in de cel. */
.klanten__projecten {
  margin: 0;
  padding: 0;
  list-style: none;
}

.klanten__projecten li + li {
  margin-top: 2px;
}

.klanten__nummer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Het adres in het portaal, onder de kop van een klantproject. */
.kp-portaal {
  margin-top: 12px;
  max-width: 560px;
}

.kp-portaal .input--copy {
  flex: 1;
  min-width: 0;
}

/* De balk: akkoord, wacht op jou en wacht op de klant naast elkaar. Breedte in twaalfden (geen style door de CSP). */
.kp-bar {
  display: flex;
  gap: 2px;
  height: 6px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 6px;
  background: var(--grey-100);
}

.kp-bar--leeg {
  background: repeating-linear-gradient(90deg, var(--grey-100) 0 6px, var(--white) 6px 9px);
}

.kp-bar > span {
  height: 100%;
  border-radius: 6px;
}

.kp-bar__akkoord { background: var(--ok); }
.kp-bar__jij { background: var(--wait); }
.kp-bar__klant { background: var(--grey-300); }
.kp-bar__prive { background: repeating-linear-gradient(90deg, var(--grey-300) 0 3px, transparent 3px 6px); }

.kp-w1 { flex: 1; } .kp-w2 { flex: 2; } .kp-w3 { flex: 3; } .kp-w4 { flex: 4; } .kp-w5 { flex: 5; } .kp-w6 { flex: 6; }
.kp-w7 { flex: 7; } .kp-w8 { flex: 8; } .kp-w9 { flex: 9; } .kp-w10 { flex: 10; } .kp-w11 { flex: 11; } .kp-w12 { flex: 12; }

.kp-card__foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  color: var(--grey-600);
  font-size: 12px;
}

/* Leeg: een monogram en één zin */
.kp-empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 48px 20px;
  border: 2px dashed var(--grey-200);
  border-radius: var(--radius-lg);
  color: var(--grey-600);
  text-align: center;
}

.kp-empty--klein {
  padding: 28px 20px;
}

/* Eén project: kop, items links, contacten en activiteit rechts */
.kp-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
  padding: 24px 26px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.kp-hero__text {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* De repo van een site of demo-site: naam als link, opdracht voor Claude om te kopiëren. Alleen in het dashboard. */
.repo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0 0;
}

.repo__label {
  color: var(--grey-600);
  font-size: 13px;
}

.repo__name {
  font-weight: 600;
}

/* Een demo-site: de toelichting onder de kop, dan één kader met de repo en de mini. Elke regel: wat, stand, knoppen. */
.site__text {
  max-width: 64ch;
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.bron {
  margin: 16px 0 0;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  font-size: 14px;
}

.bron__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  min-height: 52px;
  padding: 8px 10px 8px 16px;
}

.bron__row + .bron__row {
  border-top: 1px solid var(--grey-100);
}

.bron dt {
  color: var(--grey-600);
  font-size: 13px;
}

.bron dd {
  margin: 0;
  min-width: 0;
}

.bron__what {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  overflow-wrap: anywhere;
}

.bron__what a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.bron__what a:hover {
  text-decoration: underline;
}

.bron__what .bron__url {
  color: var(--grey-600);
  font-weight: 400;
}

.bron__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.bron__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bron__state::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grey-300);
}

.bron__state--ok::before {
  background: var(--ok);
}

.bron__state--bezig::before {
  background: var(--wait);
}

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

.bron__state--fout::before {
  background: var(--error);
}

.bron__commit {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--grey-100);
  color: var(--grey-600);
  font-size: 12px;
}

@media (max-width: 640px) {
  .bron__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 12px 16px;
  }

  .bron__buttons {
    justify-content: flex-start;
    margin-top: 4px;
  }
}

.kp-hero h2 {
  font-size: 30px;
  letter-spacing: -0.025em;
}

.kp-hero .kp-bar {
  max-width: 420px;
  margin-top: 4px;
}

.kp-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1000px) {
  .kp-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kp-items h3,
.kp-box h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 17px;
}

.kp-itemgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}

.kp-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.kp-item:hover,
.kp-item:focus-visible {
  box-shadow: 0 10px 26px rgb(34 8 8 / 0.10);
  transform: translateY(-2px);
}

.kp-item--jij {
  border-color: var(--wait);
}

/* Een kopje per project uit Simplicate boven de items, intern en in de Studio. */
.kp-project,
.client__project {
  margin: 20px 0 10px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.kp-project:first-of-type,
.client__project:first-of-type {
  margin-top: 4px;
}

.kp-item--prive {
  border-style: dashed;
  border-color: var(--grey-300);
}

.kp-item__thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--grey-100), var(--grey-200));
}

.kp-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.kp-item__type {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--white);
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 600;
}

.kp-item__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
}

.kp-item__body > .muted {
  font-size: 12px;
}

.kp-item__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
  margin-top: 6px;
  font-size: 13px;
}

.kp-item__notes {
  color: var(--grey-600);
  font-size: 12px;
}

.pill--nooit::before { background: var(--grey-300); }

.kp-older {
  margin-top: 16px;
}

.kp-older summary {
  color: var(--grey-600);
  cursor: pointer;
}

.kp-older ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.kp-side {
  display: grid;
  gap: 16px;
}

.kp-box {
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
}

.kp-box__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.kp-contacts {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kp-contacts li {
  display: flex;
  gap: 12px;
  min-width: 0;
}

.kp-contacts .kp-mono {
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.kp-contacts div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 14px;
}

.kp-contacts .muted {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
}

.kp-contacts__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 12px;
}

/* De tijdlijn: een lijn met een bolletje per gebeurtenis; oranje = de klant, inkt = BW H, groen = akkoord */
.kp-timeline {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}

.kp-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--grey-200);
}

.kp-timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.kp-timeline li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -18px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--grey-200);
}

.kp-timeline__klant::before { background: var(--wait) !important; }
.kp-timeline__akkoord::before { background: var(--ok) !important; }

.kp-timeline a {
  color: inherit;
  text-decoration: none;
}

.kp-timeline a:hover {
  text-decoration: underline;
}

.kp-timeline .muted {
  font-size: 12px;
}

/* De versies van een item */
.kp-versions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.kp-version {
  padding: 3px 10px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.kp-version[aria-current="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .kp-card,
  .kp-card__cover img,
  .kp-item,
  .kp-tag--jij::before {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Server: overzicht van alle servers --------------------------------- */
/* Rust: één regel met een groene stip. Iets aan de hand: een paneel met de berichten bovenaan. */
.srv-calm {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--gap);
  color: var(--grey-600);
}
.srv-calm__dot,
.incident__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
.incidents {
  border-color: var(--wait-wash);
  box-shadow: inset 4px 0 0 var(--wait), var(--shadow);
}
.incidents h2 {
  margin-bottom: 4px;
  font-size: 20px;
}
.incidents__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.incident {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 14px;
  padding: 16px 0;
  border-top: 1px solid var(--grey-100);
}
.incident:first-child {
  border-top: 0;
}
.incident__dot {
  margin-top: 8px;
  background: var(--wait);
}
.incident__body p {
  margin: 0;
}
.incident__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px !important;
}
.incident__server,
.incident__service {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
.incident__server {
  background: var(--ink);
  color: var(--white);
}
.incident__service {
  background: var(--grey-100);
  color: var(--ink-soft);
}
.incident__text {
  font-size: 16px;
  line-height: 1.45;
}
.incident__meta {
  margin-top: 4px !important;
  color: var(--grey-600);
  font-size: 13px;
}
.incident form {
  align-self: center;
}
.incident--dicht .incident__dot {
  background: var(--grey-300);
}
.incident--dicht .incident__server {
  background: var(--grey-200);
  color: var(--ink-soft);
}
.incident--dicht .incident__text {
  color: var(--grey-600);
  font-size: 15px;
}
.incidents--dicht {
  padding-top: 20px;
  padding-bottom: 20px;
  border-color: var(--grey-200);
  box-shadow: var(--shadow);
}
.incidents--dicht summary {
  font-weight: 600;
  cursor: pointer;
}
.incidents--dicht[open] summary {
  margin-bottom: 4px;
}

/* De servers als kaarten. De hele kaart is de link. Een probleem krijgt links een oranje rand. */
.srv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.srv-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.srv-card:hover {
  border-color: var(--grey-300);
  box-shadow: 0 2px 4px rgba(34, 8, 8, 0.05), 0 10px 28px rgba(34, 8, 8, 0.07);
  transform: translateY(-2px);
}
.srv-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.srv-card--storing,
.srv-card--let-op {
  box-shadow: inset 4px 0 0 var(--wait), var(--shadow);
}
.srv-card--stil {
  box-shadow: inset 4px 0 0 var(--grey-300), var(--shadow);
}
.srv-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.srv-card__head h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.srv-card__uptime {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: -6px;
}
.srv-card__uptime strong {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.srv-card__uptime .muted {
  font-size: 13px;
}
.srv-card .bars {
  height: 22px;
  gap: 1px;
}
/* De streepjes van 90 dagen spreken in een kaart voor zich: geen legenda eronder. */
.srv-card .bars__legend {
  display: none;
}
.filters + .pagehead {
  margin-top: 28px;
}
.incidents__list,
.panel .incident {
  max-width: none;
}
.srv-card__meters {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--grey-100);
}
.meter {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.meter__label {
  color: var(--grey-600);
}
.meter__bar {
  width: 100%;
  height: 6px;
}
.meter__track {
  fill: var(--grey-100);
}
.meter__fill {
  fill: var(--ink);
}
.meter__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.meter--over .meter__fill {
  fill: var(--wait);
}
.meter--over .meter__value {
  color: var(--wait);
}
.srv-card__traffic {
  display: flex;
  gap: 18px;
  margin: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.srv-card__foot {
  margin: auto 0 0;
  color: var(--grey-600);
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .srv-card {
    transition: none;
  }
  .srv-card:hover {
    transform: none;
  }
}

/* ---------- Live meekijken bij een pdf of ontwerp (live.js) ----------
   De kleur per persoon komt als --kleur van live.js (CSSOM, de CSP staat dat toe). */
.live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  font-size: 14px;
}
.live[hidden],
.live-schrijft[hidden] {
  display: none;
}
.live__avatars {
  display: flex;
  padding-left: 6px;
}
.live__avatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -6px;
  padding: 0;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--kleur, var(--ink));
  color: var(--white);
  font: 600 11px/1 var(--font);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.live__avatar--jij {
  background: var(--grey-200);
  color: var(--ink);
  cursor: default;
}
.live__avatar:not(.live__avatar--jij):hover,
.live__avatar:focus-visible {
  outline: 2px solid var(--kleur, var(--ink));
  outline-offset: 1px;
}
.live__tekst {
  color: var(--grey-600);
}
.live--samen .live__tekst {
  color: var(--ink);
  font-weight: 600;
}
/* Een groene stip: er kijkt nu iemand mee. */
.live--samen .live__tekst::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgb(46 158 91 / 0.16);
  vertical-align: 1px;
}

.live-cursor {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transition: left 0.1s linear, top 0.1s linear;
}
.live-cursor--direct {
  transition: none;
}
.live-cursor svg {
  display: block;
  margin: -2px 0 0 -2px;
  fill: var(--kleur);
  stroke: var(--white);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgb(34 8 8 / 0.35));
}
.live-cursor__naam {
  position: absolute;
  top: 18px;
  left: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--kleur);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgb(34 8 8 / 0.25);
}

/* Iemand schrijft een opmerking op een plek: een punt dat klopt, met een wolkje "Naam typt…". */
.live-typt {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.live-typt__punt {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 3px solid var(--white);
  border-radius: 999px;
  background: var(--kleur);
  box-shadow: 0 0 0 2px var(--ink), 0 3px 10px rgb(34 8 8 / 0.5);
  transform: translate(-50%, -50%);
  animation: live-klop 1.4s ease-in-out infinite;
}
.live-typt__wolk {
  position: absolute;
  top: -14px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 999px 999px 999px 4px;
  background: var(--kleur);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgb(34 8 8 / 0.25);
}
@keyframes live-klop {
  50% {
    box-shadow: 0 0 0 2px var(--ink), 0 0 0 10px rgb(34 8 8 / 0.08), 0 3px 10px rgb(34 8 8 / 0.5);
  }
}

/* Boven de opmerkingen: wie er nu schrijft. */
.live-schrijft {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--kleur, var(--ink));
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--grey-100);
  font-size: 14px;
}
.live-nieuw {
  margin: 0 0 12px;
}

/* Drie stippen die om de beurt oplichten: er wordt getypt. */
.live-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
}
.live-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: live-stip 1.2s ease-in-out infinite;
}
.live-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.live-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes live-stip {
  0%, 60%, 100% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-cursor {
    transition: none;
  }
  .live-typt__punt,
  .live-dots i {
    animation: none;
  }
}

/* --- Rollen en rechten ------------------------------------------------- */
/* Per onderdeel een groep, per rol een kolom. De kop met de rollen blijft staan bij scrollen. */
.rechten {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.rechten th,
.rechten td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--grey-100);
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
}

.rechten td {
  width: 132px;
  text-align: center;
}

.rechten thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  padding-top: 16px;
  padding-bottom: 14px;
  background: var(--white);
  border-bottom: 1px solid var(--ink);
  text-align: center;
  vertical-align: bottom;
}

.rechten thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.rechten thead th:last-child {
  border-top-right-radius: var(--radius-lg);
}

.rechten__rol {
  display: block;
  font-weight: 600;
}

.rechten__meta {
  display: block;
  color: var(--grey-600);
  font-size: 13px;
  white-space: nowrap;
}

.rechten__kop th,
.rechten__kop td {
  padding-top: 22px;
  padding-bottom: 10px;
  background: var(--grey-100);
  border-bottom-color: var(--grey-200);
}

.rechten__kop th {
  font-weight: 600;
  font-size: 15px;
}

.rechten tbody tr:not(.rechten__kop):hover th,
.rechten tbody tr:not(.rechten__kop):hover td {
  background: var(--grey-100);
}

.rechten__naam {
  display: block;
}

.rechten__uitleg {
  display: block;
  margin-top: 2px;
  color: var(--grey-600);
  font-size: 13px;
}

.rechten__label {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--grey-300);
  border-radius: 999px;
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 400;
  vertical-align: 1px;
}

.rechten__groep--uit th,
.rechten__groep--uit td,
.rechten__uit th,
.rechten__uit td {
  color: var(--grey-600);
}

.rechten .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

.rechten__wie {
  display: none;
}

/* Afwijkend van de standaard: een stip rechtsboven in het vakje. */
.rechten td.rechten__eigen {
  position: relative;
}

.rechten td.rechten__eigen::after,
.rechten__stip {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wait);
}

.rechten td.rechten__eigen::after {
  position: absolute;
  top: 12px;
  left: calc(50% + 14px);
}

/* Gewijzigd en nog niet opgeslagen. */
.rechten td.rechten__gewijzigd .check {
  background: var(--wait-wash);
  box-shadow: inset 0 0 0 1.5px var(--wait);
}

.rechten__legenda {
  margin: 12px 0 0;
  font-size: 13px;
}

.rechten__stip {
  margin-right: 4px;
  vertical-align: 1px;
}

/* De balk met opslaan blijft onderin staan. Met wijzigingen springt hij eruit. */
.rechten__balk {
  position: sticky;
  z-index: 3;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding: 12px 12px 12px 20px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.rechten__balk [hidden] {
  display: none;
}

.rechten__stand {
  margin-right: auto;
  color: var(--grey-600);
  font-size: 14px;
}

.rechten-form--gewijzigd .rechten__balk {
  border-color: var(--wait);
  box-shadow: 0 8px 28px rgb(34 8 8 / 0.12);
}

.rechten-form--gewijzigd .rechten__stand {
  color: var(--ink);
}

/* Telefoon: per recht een blok, met de vier rollen als vakjes eronder. De vakjes per groep vallen weg. */
@media (max-width: 760px) {
  .rechten,
  .rechten tbody,
  .rechten tr,
  .rechten th,
  .rechten td {
    display: block;
    width: auto;
  }

  .rechten thead {
    display: none;
  }

  .rechten tbody tr:not(.rechten__kop) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--grey-100);
  }

  .rechten tbody tr:not(.rechten__kop) th {
    grid-column: 1 / -1;
    padding: 0 0 6px;
    border: 0;
  }

  .rechten tbody tr:not(.rechten__kop) td {
    padding: 0;
    border: 0;
    text-align: left;
  }

  .rechten__kop td {
    display: none;
  }

  .rechten__kop th {
    padding: 16px;
  }

  .rechten .check {
    justify-content: flex-start;
    gap: 8px;
    border-radius: var(--radius);
    padding: 0 8px 0 4px;
  }

  .rechten__wie {
    display: inline;
    font-size: 14px;
  }

  .rechten td.rechten__eigen::after {
    top: 6px;
    left: auto;
    right: 8px;
  }

  .rechten__balk {
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
  }
}

/* Eigen keuzelijst (kiezer.js): elke <select> opent dit venster, in dezelfde stijl als een bevestiging */
.kies {
  position: fixed;
  z-index: 45;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(34 8 8 / 0.55);
  animation: kies-fade var(--fast) var(--ease);
}

.kies[hidden] {
  display: none;
}

.kies-open {
  overflow: hidden;
}

.kies__paneel {
  width: min(100%, 440px);
  max-height: min(640px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius);
  border-top: 4px solid var(--accent);
  animation: kies-op 0.24s var(--ease);
}

.kies__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 12px 24px;
}

.kies__kop h2 {
  margin: 0;
  font-size: 20px;
}

.kies__sluit {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--grey-200);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.kies__sluit:hover {
  border-color: var(--ink);
}

.kies__zoek {
  margin: 0 20px 10px 24px;
  padding: 10px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font: inherit;
}

.kies__zoek:focus {
  outline: none;
  border-color: var(--ink);
}

.kies__lijst {
  margin: 0;
  padding: 4px 12px 14px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kies__optie {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kies__optie::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--grey-300);
  border-radius: 50%;
}

.kies__optie:hover,
.kies__optie:focus-visible {
  background: var(--grey-100);
  outline: none;
}

.kies__optie[aria-selected="true"] {
  font-weight: 600;
}

.kies__optie[aria-selected="true"]::before {
  border: 5px solid var(--ink);
}

.kies__optie:disabled {
  color: var(--grey-300);
  background: none;
  cursor: default;
}

.kies__leeg {
  padding: 12px;
  color: var(--grey-600);
}

@keyframes kies-fade { from { opacity: 0; } }
@keyframes kies-op { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes kies-sheet { from { opacity: 0; transform: translateY(40px); } }

@media (max-width: 600px) {
  .kies {
    place-items: end stretch;
    padding: 0;
  }

  .kies__paneel {
    width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation-name: kies-sheet;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kies,
  .kies__paneel {
    animation: none;
  }
}

/* Chat met Ari (ari.php, ari.js): een rond balletje rechtsonder op elke pagina, met een paneel erboven.
   Boven de zijbalk (20), onder een bevestiging (40). Open en dicht met details, ook zonder JavaScript. */
body:has(> .ari) main {
  padding-bottom: 112px;
}

.ari {
  position: fixed;
  z-index: 30;
  right: 24px;
  bottom: 24px;
}

.ari__bol {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  list-style: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgb(34 8 8 / 0.18), 0 10px 28px rgb(34 8 8 / 0.16);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.ari__bol::-webkit-details-marker {
  display: none;
}

.ari__bol img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.ari__bol:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgb(34 8 8 / 0.2), 0 14px 32px rgb(34 8 8 / 0.18);
}

.ari__bol:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.ari[open] .ari__bol {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--ink);
}

.ari__paneel {
  position: fixed;
  right: 24px;
  bottom: 96px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  width: min(400px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 120px));
  overflow: hidden;
  background: var(--white);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgb(34 8 8 / 0.08), 0 24px 56px rgb(34 8 8 / 0.18);
  transform-origin: bottom right;
  animation: kies-op var(--slow) var(--ease);
}

.ari__kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--grey-200);
}

.ari__kop img {
  flex: none;
  border-radius: 50%;
}

.ari__wie {
  flex: 1;
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}

.ari__wie small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--grey-600);
  font-size: 13px;
}

.ari__nieuw .button--small {
  margin: 0;
}

.ari__dicht {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--grey-600);
  cursor: pointer;
}

.ari__dicht:hover {
  background: var(--grey-100);
  color: var(--ink);
}

.ari__log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.ari__leeg {
  margin: auto 0;
  color: var(--grey-600);
  font-size: 15px;
  text-align: center;
  text-wrap: pretty;
}

.ari__msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ari__msg p {
  margin: 0;
}

.ari__msg--jij {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--ink);
  color: var(--white);
}

.ari__msg--ari {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: var(--grey-100);
}

.ari__msg .prose {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.ari__msg .prose > * + * {
  margin-top: 8px;
}

.ari__msg .prose :is(h1, h2, h3, h4) {
  margin: 12px 0 4px;
  font-size: 15px;
}

.ari__msg .prose :is(ul, ol) {
  margin-bottom: 0;
  padding-left: 20px;
}

.ari__msg .prose pre {
  overflow-x: auto;
}

.ari__ai {
  margin-top: 8px !important;
  color: var(--grey-600);
  font-size: 12px;
}

.ari__bezig p {
  color: var(--grey-600);
  animation: ari-denkt 1.4s ease-in-out infinite;
}

@keyframes ari-denkt { 50% { opacity: 0.45; } }

.ari__fout {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--error-wash);
  color: var(--error);
  font-size: 14px;
}

.ari__fout p {
  margin: 0;
}

.ari__vraag {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--grey-200);
}

.ari__vraag textarea {
  width: 100%;
  min-height: 44px;
  max-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  resize: none;
  field-sizing: content;
}

.ari__vraag textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.ari__stuur {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
}

.ari__stuur:hover {
  background: var(--ink-soft);
}

.ari__stuur:disabled {
  opacity: 0.35;
  cursor: default;
}


/* Groter (de knop met de twee hoeken): breder en hoger, om een voorstel goed te zien. Geen volledig scherm. */
.ari--groot .ari__paneel {
  width: min(880px, calc(100vw - 48px));
  height: calc(100vh - 120px);
}

.ari--groot .ari__msg {
  max-width: 92%;
}

.ari--groot .ari__artifact img {
  max-height: 480px;
}

.ari__groot[aria-pressed="true"] {
  background: var(--grey-100);
  color: var(--ink);
}

/* Op een telefoon vult het paneel het scherm. Het balletje zit eronder; sluiten gaat met het kruisje. */
@media (max-width: 600px) {
  .ari {
    right: 16px;
    bottom: 16px;
  }

  .ari__paneel {
    inset: 0;
    width: auto;
    height: auto;
    border-top: 0;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation-name: kies-sheet;
  }

  .ari[open] .ari__bol {
    visibility: hidden;
  }

  /* Op een telefoon is het paneel al zo groot als het scherm. */
  .ari__groot {
    display: none;
  }
}

.ari--stil .ari__paneel {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .ari__paneel,
  .ari__bezig p {
    animation: none;
  }

  .ari__bol {
    transition: none;
  }
}

@media print {
  .ari {
    display: none;
  }
}

/* Een voorstel van Ari (Ari Artifacts) onder een antwoord in de chat: de screenshot met de link. */
.ari__confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ari__artifact {
  display: block;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.ari__artifact img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--grey-200);
}

.ari__artifact span {
  display: block;
  padding: 8px 12px;
}

.ari__artifact:hover {
  border-color: var(--grey-300);
}

/* Het tabblad Artifacts: één voorstel, de versies onder elkaar, desktop en mobiel naast elkaar. */
.ari-leeg {
  border-radius: 50%;
}

.ari-versies {
  display: grid;
  gap: 32px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.ari-versie h3 {
  margin-bottom: 12px;
  font-size: 17px;
}

.ari-versie h3 a {
  color: inherit;
}

.ari-versie__beeld {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 220px);
  align-items: start;
  gap: 16px;
}

.ari-versie__beeld a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.ari-versie__beeld img {
  display: block;
  width: 100%;
  height: auto;
}

.ari-versie__desktop img {
  max-height: 560px;
  object-fit: cover;
  object-position: top center;
}

.ari-versie__mobiel img {
  max-height: 560px;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 700px) {
  .ari-versie__beeld {
    grid-template-columns: 1fr;
  }

  .ari-versie__mobiel {
    max-width: 240px;
  }
}

/* De editor van Ari Artifacts: het hele scherm, zoals Figma. Boven de balk met gereedschap, links Ari, pagina's, lagen en
   invoegen, in het midden het canvas met de schermen, rechts de eigenschappen. Elk deel scrolt apart. */
body.page--canvas {
  height: 100dvh;
  padding-left: 0 !important;
  overflow: hidden;
}

.page--canvas .top,
.page--canvas .viewas:not(.viewas--aan) {
  display: none;
}

.page--canvas main {
  max-width: none;
  height: 100dvh;
  padding: 0 !important;
}

.ed {
  --ed-rand: var(--grey-200);
  display: grid;
  grid-template-columns: 316px minmax(0, 1fr) 280px;
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "balk balk balk" "melding melding melding" "links vlak paneel";
  height: 100dvh;
  background: var(--side);
  font-size: 13px;
}

.ed [hidden] {
  display: none !important;
}

.ed__balk {
  grid-area: balk;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 8px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--ed-rand);
}

.ed__terug {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  color: var(--ink);
}

.ed__terug:hover {
  background: var(--grey-100);
}

.ed__naam {
  min-width: 0;
}

.ed__naam h2 {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed__naam p {
  margin: 0;
  overflow: hidden;
  color: var(--grey-600);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
  padding: 3px;
  border-radius: var(--radius);
  background: var(--grey-100);
}

.ed__tool {
  display: grid;
  place-items: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.ed__tool:hover:not(:disabled) {
  background: var(--white);
}

.ed__tool[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
}

.ed__tool:disabled {
  color: var(--grey-300);
  cursor: default;
}

.ed__streep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--grey-300);
}

.ed__acties {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.ed__zoom,
.ed__versie {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ed-rand);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.ed__zoom {
  min-width: 60px;
  font-variant-numeric: tabular-nums;
}

.ed__versie {
  max-width: 220px;
}

.ed__zoommenu {
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 30;
  display: grid;
  min-width: 220px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--ed-rand);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(34 8 8 / 0.12);
}

.ed__zoommenu button {
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  white-space: pre;
  cursor: pointer;
}

.ed__zoommenu button:hover {
  background: var(--grey-100);
}

.ed__melding {
  grid-area: melding;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--white);
}

.ed__melding .button--ghost {
  border-color: rgb(255 255 255 / 0.4);
  background: transparent;
  color: var(--white);
}

/* Links: Ari, pagina's, lagen, invoegen en opmerkingen. */
.ed__links {
  grid-area: links;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--white);
  border-right: 1px solid var(--ed-rand);
}

.ed__tabs {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 6px 6px 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--ed-rand);
  scrollbar-width: none;
}

.ed__tabs button {
  flex: none;
  padding: 8px 6px;
  font-size: 12px !important;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--grey-600);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ed__tabs button[aria-selected="true"] {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.ed__tabs span {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
}

.ed__pane {
  flex: 1;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ed__chat {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.ed__chat .ari__log {
  flex: 1;
  min-height: 0;
}

.ed-pane__kop {
  margin: 8px 6px 6px;
  color: var(--grey-600);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ed-pane__tekst {
  margin: 0 6px 8px;
}

.ed-pane__nieuw {
  width: 100%;
  margin-top: 8px;
}

.ed-paginas,
.ed-lagen,
.ed-lagen ul,
.ed-bouwstenen {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed-pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 6px;
  border-radius: 8px;
}

.ed-pagina[aria-current="true"] {
  background: var(--grey-100);
}

.ed-pagina__naam {
  display: grid;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ed-pagina__naam small {
  color: var(--grey-600);
  font-family: var(--mono);
  font-size: 11px;
}

.ed-pagina__schermen {
  display: flex;
  gap: 2px;
}

.ed-pagina__schermen button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--ed-rand);
  border-radius: 6px;
  background: var(--white);
  color: var(--grey-600);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.ed-pagina__schermen button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.ed-pagina__varianten {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
  padding: 6px 0 2px 10px;
  border-left: 2px solid var(--grey-200);
}

.ed-pagina__label {
  color: var(--grey-600);
  font-size: 11px;
}

.ed-pagina__variant {
  display: flex;
  gap: 4px;
}

.ed-pagina__variant > :first-child {
  flex: 1;
  justify-content: flex-start;
}

.ed-tips-ari {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ed-tips-ari button {
  padding: 4px 9px;
  border: 1px solid var(--ed-rand);
  border-radius: 999px;
  background: var(--white);
  color: var(--grey-600);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ed-tips-ari button:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.ed-pagina__meer {
  display: flex;
  grid-column: 1 / -1;
  gap: 4px;
}

.ed-laag {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding-right: 8px;
  border-radius: 6px;
  cursor: default;
  user-select: none;
}

.ed-laag:hover {
  background: var(--grey-100);
}

.ed-laag[aria-selected="true"] {
  background: var(--ink);
  color: var(--white);
}

.ed-laag[data-zone="voor"] {
  box-shadow: inset 0 2px 0 var(--ink);
}

.ed-laag[data-zone="na"] {
  box-shadow: inset 0 -2px 0 var(--ink);
}

.ed-laag[data-zone="in"] {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.ed-laag__pijl {
  width: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 10px;
  cursor: pointer;
}

.ed-laag__tag {
  flex: none;
  color: var(--grey-600);
  font-family: var(--mono);
  font-size: 11px;
}

.ed-laag[aria-selected="true"] .ed-laag__tag {
  color: var(--grey-300);
}

.ed-laag__naam {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-invoeg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ed-invoeg .ed-paneel__knop {
  justify-content: flex-start;
  height: 40px;
}

.ed-bouwstenen li {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.ed-bouwstenen li > :first-child {
  flex: 1;
  justify-content: flex-start;
}

.ed__chat .canvas__vraag {
  padding: 10px 12px 12px;
}

#ed-opm {
  padding: 8px 10px;
}

/* Het canvas: schermen op een vlak met stippen, schuiven en zoomen. */
.ed__vlak {
  position: relative;
  grid-area: vlak;
  overflow: hidden;
  background-color: var(--grey-100);
  background-image: radial-gradient(rgb(34 8 8 / 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}

.ed__wereld {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.ed__pan {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: grab;
}

.ed__pan--sleep {
  cursor: grabbing;
}

.ed-scherm {
  position: absolute;
}

.ed-scherm__naam {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: var(--grey-600);
  font: inherit;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  /* De naam blijft even groot, hoe ver je ook zoomt (zoals in Figma). canvas.js zet --z. */
  max-width: calc(100% * var(--z, 1));
  transform: scale(calc(1 / var(--z, 1)));
  transform-origin: 0 100%;
}

.ed-scherm__naam:hover {
  color: var(--ink);
}

/* Een variant van Ari: een rand eromheen en een knop om hem te kiezen, even groot hoe ver je ook zoomt. */
.ed-scherm--variant .ed-scherm__frame {
  outline: 2px dashed var(--grey-300);
  outline-offset: 6px;
}

.ed-scherm__kies {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 6px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transform: scale(calc(1 / var(--z, 1)));
  transform-origin: 100% 100%;
}

.ed-scherm__frame {
  display: block;
  border: 0;
  border-radius: 2px;
  background: var(--white);
  box-shadow: 0 1px 3px rgb(34 8 8 / 0.08), 0 8px 32px rgb(34 8 8 / 0.08);
}

/* Rechts: de eigenschappen van het gekozen element. */
.ed__paneel {
  grid-area: paneel;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border-left: 1px solid var(--ed-rand);
}

.ed-paneel__leeg {
  padding: 16px;
  color: var(--grey-600);
}

.ed-tips {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 16px 0 0;
  font-size: 12px;
}

.ed-tips dt {
  color: var(--ink);
  font-family: var(--mono);
}

.ed-tips dd {
  margin: 0;
}

.ed-paneel__kop {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--ed-rand);
}

.ed-paneel__kop strong {
  font-family: var(--mono);
  font-size: 12px;
}

.ed-paneel__klas {
  font-family: var(--mono) !important;
}

.ed-paneel__gedeeld {
  margin: 0;
  color: var(--grey-600);
  font-size: 12px;
}

.ed-paneel__acties {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ed-paneel__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--ed-rand);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ed-paneel__knop:hover {
  border-color: var(--grey-300);
  background: var(--grey-100);
}

.ed-paneel__ari {
  width: 100%;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.ed-paneel__ari:hover {
  background: var(--ink-soft);
  color: var(--white);
}

.ed-bp {
  display: flex;
  gap: 2px;
  margin: 12px 12px 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--grey-100);
}

.ed-bp button {
  flex: 1;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--grey-600);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ed-bp button[aria-pressed="true"] {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.ed-bp--eigen::after {
  content: " •";
}

.ed-bp__uitleg {
  margin: 0 12px 4px;
  color: var(--grey-600);
  font-size: 11px;
}

.ed-groep {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--ed-rand);
}

.ed-groep h3 {
  margin-bottom: 8px;
  font-size: 12px;
}

.ed-veld {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 6px;
  min-height: 30px;
}

.ed-veld__label {
  overflow: hidden;
  color: var(--grey-600);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-veld--eigen .ed-veld__label {
  color: var(--ink);
  font-weight: 600;
}

.ed-veld__label--scrub {
  cursor: ew-resize;
  user-select: none;
}

.ed-veld__wis {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--grey-600);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.ed-veld__wis:hover {
  background: var(--grey-100);
  color: var(--ink);
}

.ed-veld input[type="text"],
.ed-veld select,
.ed-paneel__klas,
.ed-doos input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--grey-100);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.ed-veld input[type="text"]:hover,
.ed-veld select:hover,
.ed-doos input:hover {
  border-color: var(--ed-rand);
}

.ed-veld input[type="text"]:focus,
.ed-veld select:focus,
.ed-paneel__klas:focus,
.ed-doos input:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--white);
}

.ed-veld input::placeholder,
.ed-doos input::placeholder {
  color: var(--grey-600);
  opacity: 0.7;
}

.ed-veld__knop {
  flex: none;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--ed-rand);
  border-radius: 6px;
  background: var(--white);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ed-knoppen {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: var(--grey-100);
}

.ed-knoppen button {
  flex: 1;
  height: 24px;
  padding: 0 4px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--grey-600);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ed-knoppen button[aria-pressed="true"] {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.ed-knoppen button[aria-pressed="true"].ed-knoppen--geerfd {
  background: none;
  box-shadow: inset 0 0 0 1px var(--grey-300);
}

.ed-kleur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.ed-kleur input[type="color"] {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--ed-rand);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
}

.ed-kleur input[type="text"] {
  flex: 1;
}

.ed-stalen {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  width: 100%;
}

.ed-stalen button {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid rgb(34 8 8 / 0.15);
  border-radius: 4px;
  cursor: pointer;
}

/* Marge en padding: twee lagen vakjes om een kern, zoals de inspector van een browser. */
.ed-doos {
  position: relative;
  display: grid;
  gap: 0;
  font-size: 11px;
}

.ed-doos__margin,
.ed-doos__padding {
  position: relative;
  display: grid;
  grid-template-areas: ". top ." "left midden right" ". bottom .";
  grid-template-columns: 52px 1fr 52px;
  gap: 2px;
  padding: 16px 4px 4px;
  border: 1px dashed var(--grey-300);
  border-radius: 6px;
}

.ed-doos__padding {
  grid-area: midden;
  grid-template-columns: 44px 1fr 44px;
  background: var(--grey-100);
  border-style: solid;
  border-color: var(--ed-rand);
}

.ed-doos__naam {
  position: absolute;
  top: 2px;
  left: 6px;
  color: var(--grey-600);
}

.ed-doos__top {
  grid-area: top;
}

.ed-doos__right {
  grid-area: right;
}

.ed-doos__bottom {
  grid-area: bottom;
}

.ed-doos__left {
  grid-area: left;
}

.ed-doos input {
  height: 22px;
  padding: 0 4px;
  background: var(--white);
  text-align: center;
}

.ed-doos__top,
.ed-doos__bottom {
  justify-self: center;
  width: 48px !important;
}

.ed-doos__left,
.ed-doos__right {
  align-self: center;
}

.ed-doos--eigen {
  font-weight: 700;
}

.ed-doos__kern {
  grid-area: midden;
  min-height: 18px;
  border: 1px solid var(--ed-rand);
  border-radius: 4px;
  background: var(--white);
}

/* Alleen kijken: geen invoer, het paneel is te lezen. */
.ed--kijk .ed__paneel .ed-groep,
.ed--kijk .ed-paneel__acties {
  opacity: 0.6;
}

.ed-code {
  width: min(100%, 960px) !important;
}

.ed-code section {
  margin-top: 16px;
}

.ed-code__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ed-code pre {
  max-height: 40vh;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border-radius: var(--radius);
  background: var(--grey-100);
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.canvas-opm__lijst {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.canvas-opm {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 32px;
  align-items: start;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius);
  transition: background var(--fast) var(--ease);
}

.canvas-opm:hover,
.canvas-opm--licht {
  background: var(--grey-100);
}

.canvas-opm p {
  margin: 0;
  font-size: 14px;
}

.canvas-opm__n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
}

.canvas-opm__el {
  overflow: hidden;
  color: var(--grey-600);
  font-family: var(--mono);
  font-size: 12px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-opm__door,
.canvas-opm__af,
.canvas-opm__leeg {
  margin: 0;
  color: var(--grey-600);
  font-size: 12px !important;
}

.canvas-opm__stuur {
  width: 100%;
}

.ari__door {
  margin-top: 4px !important;
  color: var(--grey-300);
  font-size: 12px;
}

.canvas__vraag {
  display: grid;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--grey-200);
}

.canvas__vraag textarea {
  width: 100%;
  min-height: 44px;
  max-height: 160px;
  padding: 10px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  resize: none;
  field-sizing: content;
}

.canvas__vraag textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.canvas__vraag-knoppen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.canvas__gekozen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  background: var(--grey-100);
  font-family: var(--mono);
  font-size: 12px;
}

.canvas__gekozen[hidden] {
  display: none;
}

.canvas__gekozen span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-delen fieldset {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.canvas-delen__keuze {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  cursor: pointer;
}

.canvas-delen__keuze:has(input:checked) {
  border-color: var(--ink);
  background: var(--grey-100);
}

.canvas-delen__keuze small {
  display: block;
  color: var(--grey-600);
  font-size: 13px;
}

.canvas-delen__mensen {
  display: grid;
  gap: 4px;
  max-height: 180px;
  padding: 4px 4px 4px 34px;
  overflow-y: auto;
}

.canvas-delen:not(:has(input[value="mensen"]:checked)) .canvas-delen__mensen {
  display: none;
}