.app-dock{
  position:fixed;
  top:max(.7rem,env(safe-area-inset-top));
  right:max(.7rem,env(safe-area-inset-right));
  z-index:58;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.45rem;
  margin:0;
  padding:0;
  pointer-events:none;
}
#onderbalk.app-dock{
  position:fixed!important;
  inset:auto max(.7rem,env(safe-area-inset-right)) auto auto!important;
  top:max(.7rem,env(safe-area-inset-top))!important;
  display:flex!important;
  width:auto;
  height:auto;
  background:none!important;
  pointer-events:none;
}
.app-dock-open,.app-dock-menu{
  pointer-events:auto;
}
.app-dock-knop[hidden]{
  display:none!important;
}
.app-dock-open,.app-dock-knop{
  -webkit-tap-highlight-color:transparent;
}
.app-dock-knop.app-thuis{
  position:fixed;
  top:max(.7rem,env(safe-area-inset-top));
  left:max(.7rem,env(safe-area-inset-left));
  z-index:59;
  /* De knop groeit mee met het woord. Met een vaste breedte werd "Home"
     afgekapt tot "Ho…" zodra het lettertype of de tekstgrootte iets afweek. */
  width:auto;
  height:3.05rem;
  min-width:44px;
  min-height:44px;
  padding:.2rem .45rem;
  border:var(--rand-dun) solid rgba(255,232,132,.68);
  border-radius:999px;
  background:linear-gradient(155deg,rgba(255,249,213,.98),rgba(255,227,105,.92));
  color:var(--nacht);
  box-shadow:0 0 1rem rgba(104,221,185,.2),var(--schaduw-knop);
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  text-decoration:none;
  pointer-events:auto;
}
.app-thuis .app-dock-icoon{
  width:1.25rem;
  height:1.25rem;
  filter:none;
}
.app-thuis .app-dock-tekst{
  font-size:.68rem;
  overflow:visible;
  text-overflow:clip;
}
.app-dock-open .app-dock-tekst{
  display:none;
}
.app-dock-open{
  width:3.05rem;
  height:3.05rem;
  border:var(--rand-dun) solid rgba(255,232,132,.68);
  border-radius:1rem;
  background:linear-gradient(155deg,rgba(38,101,211,.96),rgba(8,29,76,.98));
  color:var(--maan);
  box-shadow:0 0 1.1rem rgba(104,221,185,.32),var(--schaduw-knop);
  font-size:1.45rem;
  cursor:pointer;
}
/* Instellingen: een venster van zo'n tachtig procent van het scherm, midden in
   beeld, met een donkere sluier eromheen. Rijen met pictogram, naam en rechts
   een schakelaartje voor wat aan of uit kan. Op elke breedte dicht tot je tikt. */
.app-dock-sluier{
  position:fixed;
  inset:0;
  z-index:64;
  background:rgba(3,10,28,.62);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--rustig),visibility var(--rustig);
}
.app-dock-sluier.is-open{
  opacity:1;
  visibility:visible;
}
.app-dock-menu{
  position:fixed;
  left:50%;
  top:50%;
  z-index:65;
  display:flex;
  flex-direction:column;
  width:clamp(min(18rem,calc(100vw - 1.5rem)),80vw,42rem);
  max-height:min(80vh,80svh);
  padding:.9rem 1rem 1rem;
  border:var(--rand-dun) solid rgba(255,232,132,.5);
  border-radius:var(--radius);
  background:rgba(7,22,47,.96);
  box-shadow:0 1.4rem 3rem rgba(1,7,20,.55),inset 0 1px rgba(255,255,255,.14);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-50%) scale(.94);
  transition:opacity var(--rustig),transform var(--rustig),visibility var(--rustig);
}
.app-dock-menu.is-open{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%);
}
.app-dock-kop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding:0 0 .6rem .2rem;
  border-bottom:1px solid rgba(205,234,255,.2);
  margin-bottom:.7rem;
}
.app-dock-titel{
  color:var(--ster);
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.app-dock-sluit{
  flex:0 0 auto;
  width:2.75rem;
  height:2.75rem;
  min-width:44px;
  min-height:44px;
  padding:0;
  border:1px solid rgba(205,234,255,.3);
  border-radius:50%;
  background:rgba(23,78,189,.5);
  color:var(--tekst-op-donker);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.app-dock-sluit svg{
  width:1.3rem;
  height:1.3rem;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
}
.app-dock-sluit:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
.app-dock-lijst{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:.5rem;
  overflow:auto;
  overscroll-behavior:contain;
  padding:.1rem;
}
.app-dock-scheiding{
  grid-column:1/-1;
  height:1px;
  margin:.25rem .2rem;
  background:rgba(205,234,255,.22);
}
.app-dock-menu .app-dock-knop{
  width:100%;
  min-height:44px;
  height:3.4rem;
  padding:.3rem .8rem .3rem .7rem;
  border:1px solid rgba(205,234,255,.22);
  border-radius:var(--radius-klein);
  background:linear-gradient(155deg,rgba(23,78,189,.7),rgba(7,22,47,.92));
  color:var(--tekst-op-donker);
  box-shadow:inset 0 1px rgba(255,255,255,.12);
  text-decoration:none;
  cursor:pointer;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:.7rem;
  transition:transform var(--snel),border-color var(--snel),box-shadow var(--snel);
}
.app-dock-menu .app-dock-icoon{
  width:1.55rem;
  height:1.55rem;
}
.app-dock-menu .app-dock-tekst{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  font-size:1rem;
  font-weight:700;
  line-height:1.15;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
}
.app-dock-schakel{
  flex:0 0 auto;
  position:relative;
  width:2.5rem;
  height:1.45rem;
  border-radius:999px;
  background:rgba(205,234,255,.26);
  box-shadow:inset 0 1px 2px rgba(1,7,20,.4);
  transition:background var(--snel);
}
.app-dock-schakel::after{
  content:"";
  position:absolute;
  top:.17rem;
  left:.17rem;
  width:1.1rem;
  height:1.1rem;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(1,7,20,.45);
  transition:transform var(--snel);
}
.app-dock-knop[aria-pressed="true"] .app-dock-schakel{
  background:var(--mint,#68ddb9);
}
.app-dock-knop[aria-pressed="true"] .app-dock-schakel::after{
  transform:translateX(1.05rem);
}
.app-dock-wis{
  border-color:rgba(255,150,140,.4)!important;
}
.app-dock-wis .app-dock-icoon{
  color:#ffb0a6;
}
.app-dock-wis.is-bevestigen{
  border-color:#ff8f82!important;
  background:linear-gradient(155deg,rgba(196,52,40,.9),rgba(84,12,8,.96))!important;
  box-shadow:0 0 .9rem rgba(255,110,96,.45),inset 0 1px rgba(255,255,255,.18)!important;
}
.app-dock-wis.is-bevestigen .app-dock-icoon{
  color:#fff;
}
#onderbalk.app-dock .app-dock-open{
  width:3.05rem;
  height:3.05rem;
  padding:0!important;
  border:var(--rand-dun) solid rgba(255,232,132,.68)!important;
  border-radius:1rem!important;
  background:linear-gradient(155deg,rgba(38,101,211,.96),rgba(8,29,76,.98))!important;
  color:var(--maan)!important;
}
.app-dock-knop:active{
  transform:translateY(1px) scale(.96);
}
.app-dock-knop:focus-visible,.app-dock-open:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
.app-dock-knop.is-gelukt{
  border-color:var(--mint);
  box-shadow:0 0 .9rem rgba(104,221,185,.5);
}
.app-dock-icoon{
  width:1.42rem;
  height:1.42rem;
  line-height:1;
  filter:drop-shadow(0 .12rem .18rem rgba(1,7,20,.45));
}
.app-dock-icoon svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.app-icoon-sprite{
  position:fixed;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
}
.app-dock-tekst{
  max-width:100%;
  overflow:hidden;
  font-size:.58rem;
  font-weight:800;
  line-height:1.05;
  letter-spacing:.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.op-slot .app-dock,
body.op-slot .app-dock-menu,
body.op-slot .app-dock-sluier{
  display:none;
}
body.op-slot .app-thuis{
  display:none;
}
body.heeft-app-thuis{
  padding-top:calc(env(safe-area-inset-top) + 4.35rem)!important;
}
@media (prefers-reduced-motion:reduce){
  .app-dock-menu,.app-dock-sluier,.app-dock-knop,.app-dock-schakel,.app-dock-schakel::after{transition:none}
}