/* MAMY – huisstijl, geladen ná de eigen stijl van elke pagina (startscherm-stijl voor de hele site):
   altijd donker en warm, met een behang in Mamy-oranje (een tikje donkerder dan het logo, met zacht de streepjes
   van het logo en een warme gloed). De pagina's zetten hun eigen donkere kleuren altijd aan; hier komen de gedeelde tinten. */
:root{
  --mamy-oranje:#CE8A37;--mamy-bruin:#B37C44;--mamy-donker:#E3A65C;
  --bg:#22150c;--surface:rgba(38,21,9,.56);--surface-2:rgba(70,42,20,.55);--vast:#2e1e13;--fg:#f7ede5;--muted:#e3cdb9;--line:#4a3426;--line-strong:#6b4d38;--muted-soft:#34231a;
  --accent:#E3A65C;--accent-hover:#EDB878;--accent-ink:#1E1308;--accent-soft:#3D2914;
  --btn:#D99A50;--btn-fg:#1E1308;--inv:#E3A65C;--verk:#F0B470;--lijst:#D9A066;
  --ink:#f7ede5;--ink-2:#dcc7b6;--ink-3:#d2b7a2;   /* werklijsten */
  --behang-kleur:#7a4013;
  --glasbalk:rgba(60,30,8,.12);
  color-scheme:dark;
}
/* het behang: vast achter de pagina (op de iPhone schuift het mee en loopt het uit in dezelfde donkere kleur) */
html{background-color:var(--behang-kleur);min-height:100%}
/* het behang zelf: een vaste laag achter alles, zo loopt het tot het einde van elke pagina door (ook op de iPhone) */
html::after{content:"";position:fixed;left:0;right:0;top:0;height:100vh;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,226,180,.07) 0 22px,transparent 22px 44px),
    radial-gradient(110% 60% at 85% 100%,rgba(240,170,85,.45) 0%,rgba(240,170,85,0) 60%),
    radial-gradient(80% 45% at 10% 0%,rgba(255,200,130,.18) 0%,rgba(255,200,130,0) 60%),
    linear-gradient(180deg,#a65d1f 0%,#97521a 30%,#874816 58%,#713a12 82%,#5a2e0d 100%);
  background-repeat:no-repeat;background-size:100% 100%}
@supports (height:100lvh){html::after{height:100lvh}}
body{background:transparent!important}
/* bovenaan: een wazige band achter de klok en de batterij van de gsm (als MAMY op het beginscherm staat) */
html::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);z-index:2147483000;pointer-events:none;
  background:rgba(120,62,20,.6);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.logo,.merk-woord{color:#fff1df;text-shadow:0 1px 10px rgba(80,35,5,.35)}
.merk-sub{color:#f3dcc6!important}
/* dialoogvensters: zelfde warme tint en een wazige achtergrond, zoals op de iPhone */
dialog::backdrop{background:rgba(12,6,2,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* menu's en balken bovenaan/onderaan: doorzichtig glas in plaats van zwarte blokken */
.glasbalk,.footer,.topbalk,.onderbalk,.balk-onder{background:var(--glasbalk)!important;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-color:rgba(255,235,215,.1)!important}
body::before{background:transparent!important}
/* kaarten zijn glas; vensters en pop-ups blijven dicht zodat ze goed leesbaar zijn */
dialog:not(.ios),.modal-paneel,.alarm-paneel,.paneel-kop,#mistBody,.dkop{background-color:var(--vast)!important}
/* invulvakken: ook licht doorzichtig, geen zwarte blokjes */
:root{--knop-glas:rgba(255,235,215,.1)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{background-color:rgba(18,9,3,.4)}
dialog input:not([type=checkbox]):not([type=radio]),dialog select,dialog textarea{background-color:rgba(0,0,0,.28)}
/* iPhone: datum- en tijdvakken hebben een vaste minimumbreedte en staken soms uit hun kader */
input[type=date],input[type=time],input[type=datetime-local]{min-width:0;max-width:100%}
/* iOS Safari negeert de breedte van een datumvak zolang het zijn eigen iOS-stijl heeft: dan stak het rechts uit (bv. de sluitlijst) */
@supports (-webkit-touch-callout:none){
  input[type=date],input[type=time],input[type=datetime-local]{-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box}
  input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;margin:0}
}