@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* Palet en typografie uit de handoff "Vleminckveld 35 - Tenant Welcome Guide". */
:root{
  --paper:#F4EAE0;        /* de pagina zelf */
  --card:#FFFCF8;         /* kaarten en vrije blokken */
  --card-peak:#FBEEE6;    /* een vrij blok in de piekuren */
  --ink:#2E1D16;
  --cream:#F7EDE4;        /* tekst op donker */
  --terra:#C24E2C;
  --terra-soft:#E08159;
  --terra-tint:#F6DCCF;
  --taken:#EDDFD4;        /* blok van een andere unit */
  --track:#F0DFD3;
  --past-a:#EFE2D7;       /* de arcering van een voorbij blok */
  --past-b:#F7EFE8;
  --card-sub:#FAF4ED;     /* voet van een kaart, iets terug */
  --sep:#D3BFB1;          /* het streepje tussen NL en EN */
  --line:rgba(46,29,22,.12);
  --line-soft:rgba(46,29,22,.18);
  --muted:#7A6153;
  --muted-2:#8A6F60;
  --muted-3:#9C8272;
  --muted-4:#A18874;
  --muted-5:#B49C8C;
  --danger:#A8321A;
  --sans:Archivo,system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,monospace;
}

/* Koele ondergrond uit het designsysteem (tokens/surface-cool.css).
   Opt-in met data-v35-surface="cool" op <html>, zoals beide bewonersapps doen:
   de zandkleurige pagina en de kaarten worden koel, zodat terracotta het enige
   warme op het scherm is. Alleen vlakken, blokken en lijnen bewegen mee;
   terracotta, inkt en de typografie blijven waar ze staan.
   Weglaten van het attribuut zet alles terug op de warme grond. */
[data-v35-surface="cool"]{
  --stone-100:#EDEFEC;
  --stone-200:#DFE3DF;
  --stone-300:#E2E5E1;

  --paper:var(--stone-100);
  --card:#FFFFFF;
  --taken:var(--stone-200);
  --track:var(--stone-200);
  --past-a:var(--stone-300);
  --past-b:var(--stone-100);
  --card-sub:#F5F7F4;
  --sep:#C2C8C3;

  --line:rgba(30,38,34,.13);
  --line-soft:rgba(30,38,34,.19);
}

*{box-sizing:border-box}
/* De achtergrond hoort ook op html, niet alleen op body.
   Met viewport-fit=cover schildert iOS de strook achter de statusbalk vanaf het
   wortelelement. Is dat doorzichtig, dan valt hij terug op de schilkleur die bij
   het installeren uit het manifest is bewaard, en blijft er een oude kleur
   staan die met geen enkele herlading meer weggaat. */
html{background:var(--paper)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
.wrap{max-width:430px;margin:0 auto;padding:18px 20px 40px}
.wrap-wide{max-width:880px}

a{color:var(--terra)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- kop ---- */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.top>div{min-width:0}
/* het inlogscherm draagt zijn eigen kop; hier alleen de taalschakelaar */
.top-bare{align-items:center;margin-bottom:10px}
.top-bare .eyebrow{margin:0}
.eyebrow{
  font-family:var(--mono);font-weight:700;font-size:10px;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0 0 8px
}
h1{
  font-family:var(--sans);font-weight:800;font-size:27px;line-height:1.06;
  letter-spacing:-.02em;margin:0 0 14px;overflow-wrap:break-word;text-wrap:balance
}
.h2{font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.25;margin:0 0 8px}
.h3{
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin:18px 0 8px
}
.muted{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 0 12px;text-wrap:pretty}
.small{font-size:11.5px}
.mono{font-family:var(--mono)}
.warn{color:var(--danger);font-size:12.5px;line-height:1.5;margin:8px 0}
.nowrap{white-space:nowrap}
.wrapany{word-break:break-all}
.right{text-align:right}

.langswitch{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.langbtn{
  background:none;border:0;padding:2px 3px;cursor:pointer;
  font-family:var(--mono);font-weight:700;font-size:11px;color:#A88E7D
}
.langbtn.on{color:var(--terra)}
.langsep{color:var(--sep);font-size:11px}

/* Expliciet, want de balk verbergt ook een SVG-rect met dit attribuut en
   daarvoor wil ik niet op de browserstijl leunen. */
[hidden]{display:none !important}

/* ---- kaarten ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:12px}
.card-pad{padding:15px 16px}
/* Terug: een pijl in een getint vlak, zodat hij als knop leest. De oude
   variant was kale muted tekst en viel weg tegen de kaart. */
.back{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  margin-bottom:14px;padding:3px 0
}
.back i{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:34px;border-radius:10px;background:var(--terra-tint);
  transition:background .15s
}
.back svg{display:block;width:19px;height:19px;fill:var(--terra);transition:fill .15s}
.back:hover i{background:var(--terra)}
.back:hover svg{fill:#FFF6F1}
.back:focus-visible{outline:2.5px solid var(--terra);outline-offset:3px;border-radius:8px}

/* ---- aanmelden ---- */
.login{display:flex;flex-direction:column;gap:20px;padding-top:8px}
.lock{width:24px;height:24px;fill:var(--terra)}
.login h1{margin:0;font-size:28px}
.login .lead{margin:0;font-size:14px;line-height:1.5;color:var(--muted);text-wrap:pretty}

.pindots{display:flex;gap:9px}
.pindot{
  flex:1;height:52px;border-radius:12px;background:var(--card);
  border:1px solid rgba(46,29,22,.14);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:20px;color:transparent
}
.pindot.on{background:var(--terra);border-color:var(--terra);color:#FFF6F1}

.pinerror{
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--danger);margin:0
}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.key{
  height:60px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  font-family:var(--mono);font-weight:700;font-size:22px;color:var(--ink);cursor:pointer
}
.key:hover{border-color:var(--terra);color:var(--terra)}
.key:active{transform:scale(.97)}
.key-blank{visibility:hidden}
.key-back{background:none;border:0;display:flex;align-items:center;justify-content:center}
.key-back svg{width:20px;height:20px;fill:var(--muted-2)}
.key-back:hover{background:rgba(46,29,22,.06);border-radius:14px}

/* Zonder JavaScript blijft het een gewoon invulveld met een knop; met
   JavaScript nemen de cijfertoetsen het over. */
.pinfallback{display:flex;gap:9px;align-items:center}
body.js .pinfallback{display:none}
body:not(.js) .pindots,body:not(.js) .keypad{display:none}

/* ---- statuskaart ---- */
.drum{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:15px 16px;margin-bottom:12px
}
.drumtop{display:flex;align-items:flex-start;gap:13px}
.disc{flex:0 0 38px;width:38px;height:38px;margin-top:1px}

/* Machine-iconen: Material Design Icons (Pictogrammers), Apache License 2.0. */
.mdi-body{fill:var(--terra)}
.mdi-mark{fill:var(--terra)}
.mdi-dryer{display:none}
.drum-dryer .mdi-washer{display:none}
.drum-dryer .mdi-dryer{display:block}

/* fill-box maakt de onzichtbare cirkel op de deuropening het draaipunt */
.mdi-spin,.mdi-heat{transform-box:fill-box;transform-origin:50% 50%}
.drum-running .mdi-spin{animation:spin 3.4s linear infinite}
.drum-running .mdi-heat{animation:heat 2.4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes heat{
  0%,100%{transform:translateY(.6px) scaleY(.94);opacity:.75}
  50%    {transform:translateY(-.6px) scaleY(1.06);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .drum-running .mdi-spin,.drum-running .mdi-heat{animation:none}
}
.drum-unknown .mdi-body,.drum-unknown .mdi-mark{fill:var(--muted-5)}

.drum-state{font-family:var(--sans);font-weight:700;font-size:16px;line-height:1.25}
.drum-sub{margin-top:3px}
.drum-sub span{display:block;font-size:12.5px;line-height:1.4;color:var(--muted-2)}
.drum-sub .mono{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--muted)}
.drum-sub .warn{color:var(--danger);font-size:12.5px;margin:3px 0 0}

/* ---- tijdbalk van het lopende blok ----
   De vulling is verstreken bloktijd, de donkere streep staat op "nu", de
   lichte terracotta streep op het moment dat je was klaar is. */
.blockbar{display:flex;align-items:center;gap:9px;margin-top:13px}
.bb-time{font-family:var(--mono);font-weight:700;font-size:10px;color:var(--muted-4);flex:0 0 auto}
.bb-track{flex:1 1 auto;min-width:0;display:block}
.bb-track svg{display:block;width:100%;height:14px;overflow:visible}
.bb-bg{fill:var(--track)}
.bb-fill{fill:var(--terra-soft)}
.bb-now{fill:var(--ink)}
.bb-mark{fill:var(--terra);opacity:.5}
.blockbar-over .bb-fill{fill:var(--muted-5)}
/* Bij overloop blijft een markering die wel binnen het blok valt gewoon
   staan; alleen de machine die eroverheen gaat krijgt er geen, en dat
   staat in woorden onder de balk. */
.bb-warn{color:var(--danger);font-size:12.5px;line-height:1.45;margin:8px 0 0}

/* ---- chips ---- */
.youare{display:flex;gap:8px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.chip{
  font-family:var(--mono);font-weight:700;font-size:11px;line-height:1;
  text-transform:uppercase;
  background:var(--card);border:1px solid var(--line);color:var(--muted);
  padding:11px 13px;border-radius:999px;text-decoration:none;
  display:inline-flex;gap:5px;align-items:center
}
.chip-you{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip-you b{font-weight:700;color:var(--cream)}
.chip-link{cursor:pointer}
.inline{display:inline}

/* ---- quota ---- */
/* Zes en vier pegs passen naast hun label niet meer op een smalle telefoon.
   Het label mag daarom niet afbreken - dat leest slecht bij hoofdletters met
   letterafstand - en de twee tellers gaan liever onder elkaar staan. */
.quota{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;margin-bottom:8px}
.quota>span{display:flex;align-items:center;gap:8px}
.quota .lbl{
  font-family:var(--mono);font-weight:700;font-size:10px;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap
}
.pegs{display:flex;gap:4px}
.peg{width:10px;height:10px;border-radius:2px;display:inline-block;border:1.5px solid rgba(194,78,44,.4)}
.peg.on{background:var(--terra);border-color:var(--terra)}

/* ---- rooster ---- */
.grid{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:12px 12px 14px;position:relative
}
.row{display:grid;grid-template-columns:34px repeat(4,1fr);gap:6px;margin-bottom:6px}
.row>*{min-width:0}
.row:last-child{margin-bottom:0}
.hdrrow{
  position:sticky;top:0;z-index:2;background:var(--card);
  padding-top:2px;margin:-2px 0 4px;border-radius:8px
}
.hdr{
  text-align:center;font-family:var(--mono);font-weight:700;font-size:10px;
  line-height:1;color:var(--muted-2);padding-bottom:4px
}
.hdr.peak{color:var(--terra)}

/* het piekvenster als band boven het rooster */
.peakband{display:grid;grid-template-columns:34px repeat(4,1fr);gap:6px;margin-bottom:8px}
.peakband>b{
  grid-column:4/6;display:flex;align-items:center;gap:7px;
  background:var(--terra-tint);border-radius:6px;padding:4px 8px;
  font-family:var(--mono);font-weight:700;font-size:8.5px;letter-spacing:.1em;
  color:var(--terra);white-space:nowrap
}
.peakband i{flex:1;height:1px;background:rgba(194,78,44,.35)}

.day{display:flex;flex-direction:column;justify-content:center;font-family:var(--mono);font-weight:700}
.day span{font-size:9px;line-height:1.2;color:var(--muted-4)}
.day b{font-size:13px;line-height:1.2;color:var(--ink);font-weight:700}
/* In het weekend is elk blok piekuur, niet alleen de avond. Het label zegt dat
   in dezelfde terracotta als de piekband en als de cellen ernaast. Een donkere
   vulling kan hier niet: die kleur is in de legende van beheer. */
.day.we span,.day.we b{color:var(--terra)}
.row.today .day b{text-decoration:underline;text-underline-offset:3px}

.weekbreak{
  display:flex;align-items:center;gap:10px;margin:10px 0 12px;
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-4)
}
.weekbreak::after{content:'';flex:1;height:1px;background:var(--line)}

.cell{
  height:52px;border-radius:10px;width:100%;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--mono);font-weight:700;transition:.15s;text-align:center;
  background:var(--card);border:1px dashed var(--line-soft);color:var(--muted-5)
}
button.cell:hover{border-color:var(--terra);color:var(--terra)}
button.cell:active{transform:scale(.97)}
.cell.locked{cursor:default}
.cell.peakfree{background:var(--card-peak);border-color:rgba(194,78,44,.35)}
.cell.other{background:var(--taken);border:1px solid transparent;color:var(--muted-3);cursor:default}
.cell.mgmt{background:var(--ink);border:1px solid var(--ink);color:var(--cream);cursor:default}
.cell.mine{background:var(--terra);border:1px solid var(--terra);color:#FFF6F1}
.cell.soon{background:var(--card-peak);border:1.5px solid var(--terra);color:var(--terra)}
.cell.now{background:var(--card);border:2px solid var(--terra);color:var(--ink)}
.cell.now .sub{color:var(--terra);opacity:1}
.cell.blocked{
  background:repeating-linear-gradient(135deg,var(--terra-tint) 0 6px,#FBEEE6 6px 12px);
  border:1px dashed var(--terra);color:var(--terra);cursor:default
}
.cell.past{
  background:repeating-linear-gradient(135deg,var(--past-a) 0 6px,var(--past-b) 6px 12px);
  border:1px solid transparent;color:var(--muted-5);cursor:default
}
.cell.other.past,.cell.mgmt.past{opacity:.5}
.cell>span{max-width:100%;padding:0 3px;overflow:hidden}
.tag{font-size:11px;line-height:1.15;white-space:nowrap;text-overflow:ellipsis}
.cell.mine .tag{font-size:12px}
.sub{font-size:9px;opacity:.8;white-space:nowrap;text-overflow:ellipsis}
.cell:focus-visible,.langbtn:focus-visible,.btn:focus-visible,.key:focus-visible{
  outline:2.5px solid var(--terra);outline-offset:2px
}

/* ---- legende ---- */
.legend{
  display:flex;flex-wrap:wrap;gap:9px 14px;padding:14px 2px 0;
  font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted-2)
}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid transparent;flex:0 0 auto}
.sw-mine{background:var(--terra)}
.sw-other{background:var(--taken)}
.sw-mgmt{background:var(--ink)}
.sw-blocked{background:repeating-linear-gradient(135deg,var(--terra-tint) 0 3px,#FBEEE6 3px 6px);border-color:var(--terra)}
.sw-soon{background:var(--card-peak);border-color:var(--terra)}
.sw-peak{background:var(--terra-tint);border-color:rgba(194,78,44,.35)}

/* ---- uitleg ---- */
details.howto,details.history{
  margin-top:16px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:13px 15px
}
details.history{margin-top:12px}
summary{
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);cursor:pointer;list-style:none
}
summary::-webkit-details-marker{display:none}
details ul{margin:10px 0 0;padding-left:16px;font-size:13px;line-height:1.55;color:var(--muted)}
details li{margin-bottom:6px}
details.history ul{padding-left:0}

/* ---- formulieren ---- */
.btn{
  font-family:var(--sans);font-weight:600;font-size:13.5px;line-height:1;
  background:var(--card);border:1px solid rgba(46,29,22,.16);border-radius:12px;
  padding:13px 16px;cursor:pointer;color:var(--ink);text-decoration:none;display:inline-block
}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn-small{padding:9px 12px;font-size:12.5px;border-radius:10px}
.btn[disabled]{opacity:.4;cursor:default}

input[type=text],input[type=email],input[type=date],input[type=password],select{
  font-family:var(--sans);font-size:14px;padding:12px 14px;
  border:1px solid rgba(46,29,22,.14);border-radius:12px;
  background:var(--card);color:var(--ink);width:100%;max-width:100%;outline:none
}
input:focus,select:focus{border-color:var(--terra)}
label{display:block;font-size:12px;color:var(--muted-2);margin-bottom:8px}
label input,label select{margin-top:5px}
.stack{display:flex;flex-direction:column;gap:2px}
.actionbar{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;align-items:center}

.pininput{
  font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:.4em;
  text-align:center;padding:14px 10px;flex:1
}
.pinbig{
  font-family:var(--mono);font-weight:700;font-size:34px;letter-spacing:.16em;
  text-align:center;margin:14px 0;user-select:all;color:var(--ink)
}
.pinreveal{border-color:var(--terra);border-width:1.5px}

.switchrow{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;font-size:14px}
.switchrow input{margin-top:3px;flex:0 0 auto;width:auto;accent-color:var(--terra)}
.switchrow b{display:block;font-weight:600}
.switchrow em{display:block;font-style:normal;color:var(--muted);font-size:12.5px;line-height:1.45}

.plainlist{list-style:none;margin:0 0 12px;padding:0}
.plainlist li{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px
}
.plainlist li:last-child{border-bottom:0}

/* ---- eenmalige uitleg over het beginscherm ---- */
.intro{border:1.5px solid var(--terra);padding:17px 18px}
.intro .h2{font-size:18px;margin-bottom:8px}
.intro .muted{font-size:13.5px;margin-bottom:8px}

/* ---- admin ---- */
.adminhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.adminh1{font-family:var(--sans);font-weight:800;font-size:24px;letter-spacing:-.02em;margin:0}

.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:14px}
.sumcell{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;text-decoration:none;color:var(--ink);display:block
}
.sumcell b{display:block;font-family:var(--sans);font-weight:700;font-size:17px}
.sumcell span{
  display:block;font-family:var(--mono);font-weight:700;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-top:3px
}
/* Het PIN-veld naast de knop 'nieuwe PIN'. Smal, want het zijn zes cijfers. */
.pinfield{width:9ch;text-align:center;letter-spacing:.12em}

.sumcell.sum-warn{border-color:var(--terra);background:var(--terra-tint)}
.sumcell.sum-warn b{color:var(--terra)}

.adminnav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.adminnav a{
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 12px
}
.adminnav a.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}

.cardhead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--line)
}
.cardtitle{font-family:var(--sans);font-weight:700;font-size:17px;margin:0}
.cardsub{font-family:var(--mono);font-weight:700;font-size:10px;color:var(--muted-4);margin-left:7px}
.cardbody{padding:14px 16px}
.cardbody>:last-child{margin-bottom:0}
.cardfoot{padding:14px 16px;border-top:1px solid var(--line);background:var(--card-sub);border-radius:0 0 15px 15px}
.center{text-align:center}

.badge{
  font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;border-radius:6px;padding:5px 8px;white-space:nowrap;flex:0 0 auto
}
.badge-ok{background:var(--terra-tint);color:var(--terra)}
.badge-vacant{background:var(--taken);color:var(--muted-3)}
.badge-ending{background:var(--ink);color:var(--cream)}
.badge-planned{background:var(--terra);color:#FFF6F1}

.sectionlabel{
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin:18px 0 8px
}
.cardbody>.sectionlabel:first-child,.cardfoot>.sectionlabel:first-child{margin-top:0}
.periodline{font-size:14px;margin:0 0 4px}
.hint{font-size:12.5px;color:var(--muted-2);line-height:1.5;margin:5px 0 0}

.planned{background:#FDF3EC;border-bottom:1px solid var(--line)}
.plannedhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.plannedhead form{margin-left:auto}

.people{list-style:none;margin:0;padding:0}
.people li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line)
}
.people li:last-child{border-bottom:0}
.person{display:flex;flex-direction:column;gap:2px;min-width:0}
.person b{font-weight:600;font-size:14px}

.rows{list-style:none;margin:0;padding:0}
.rowitem{
  display:grid;grid-template-columns:100px 1fr auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line)
}
.rowitem:last-child{border-bottom:0}
.rowitem.off{opacity:.5}
.rowwhen{display:flex;flex-direction:column;line-height:1.25;font-family:var(--mono);font-size:11px}
.rowwhen b{font-weight:700;font-size:12px}
.rowwhen span{color:var(--muted-4);font-size:10.5px}
.rowmain{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;min-width:0;font-size:14px}
.rowaction{display:flex;justify-content:flex-end;gap:6px;min-width:0}
@media (max-width:600px){
  .rowitem,.rowitem-wrap{grid-template-columns:1fr;gap:6px}
  .rowaction{justify-content:flex-start}
  .rowwhen{flex-direction:row;gap:8px;align-items:baseline}
}

.kv{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--mono);font-size:10.5px;color:var(--muted-2)}
.kv i{font-style:normal;opacity:.6}

.pill{
  font-family:var(--mono);font-weight:700;font-size:9px;text-transform:uppercase;
  letter-spacing:.08em;background:var(--taken);color:var(--muted-3);
  border-radius:5px;padding:3px 6px
}
.pill-live{background:var(--terra-tint);color:var(--terra)}

.disclose{margin-top:10px}
.disclose>summary{list-style:none;display:inline-block}
.disclose>summary::-webkit-details-marker{display:none}
.disclose[open]>summary{margin-bottom:10px}
.disclose-right{margin-top:0}
.as-summary{cursor:pointer;text-transform:none;letter-spacing:normal;color:var(--ink)}
.as-summary.btn-primary{color:var(--cream)}

.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.field{display:flex;flex-direction:column;min-width:0}
.field-wide{grid-column:1/-1}
.field>label{font-size:12px;color:var(--muted-2);margin:0 0 5px}
.pairrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.pairrow>input{flex:1 1 150px;min-width:0}
.pairrow>select{flex:0 1 130px}
.pairrow:last-child{margin-bottom:0}

.action{padding:11px 0;border-bottom:1px solid var(--line)}
.action:last-child{border-bottom:0;padding-bottom:0}
.actionform{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.actionform input[type=date]{width:auto;flex:0 1 190px}

.notice{border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.5;margin:11px 0}
.notice-warn{background:var(--terra-tint);color:var(--terra)}

.btn-quiet{color:var(--muted-2)}
.btn-quiet:hover{color:var(--danger);border-color:var(--danger)}

.install-hint{display:none}
body.ios .install-hint{display:block}

/* ---- toast ---- */
#toast{
  position:fixed;left:50%;bottom:20px;transform:translate(-50%,14px);
  background:var(--ink);color:var(--cream);padding:12px 17px;border-radius:12px;
  font-family:var(--sans);font-size:13.5px;max-width:340px;text-align:center;line-height:1.4;
  opacity:0;pointer-events:none;transition:.2s;z-index:9
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.bad{background:var(--danger)}