/* Palm Boats aan de steiger. Huisstijl = dagdemo / ontwerppagina (lagune en zon).
   Elke status heeft een teken en een woord; kleur komt er alleen bij (Kalle is kleurenblind). */
:root{
  --bg:#f5f8f7; --surface:#ffffff; --paper:#fbfaf6; --ink:#12262b; --muted:#4f6468;
  --line:#d5e0df; --lagoon:#0d5f6e; --lagoon-soft:#e2eef0; --sun:#a3500f; --sun-soft:#fbeadb;
  --pen:#1d3f9a; --screen:#eef3f2;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Helvetica Neue",Arial,system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c1a1d; --surface:#122427; --paper:#172b2e; --ink:#e7f0ef; --muted:#a3b8ba;
  --line:#2f4c50; --lagoon:#6cc3cf; --lagoon-soft:#173a40; --sun:#f0a463; --sun-soft:#3a2716;
  --pen:#9db7ff; --screen:#0f1f22; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1a1d; --surface:#122427; --paper:#172b2e; --ink:#e7f0ef; --muted:#a3b8ba;
  --line:#2f4c50; --lagoon:#6cc3cf; --lagoon-soft:#173a40; --sun:#f0a463; --sun-soft:#3a2716;
  --pen:#9db7ff; --screen:#0f1f22; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.45;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{font-family:var(--display);line-height:1.15;margin:0;text-wrap:balance}
h2{font-size:1.55rem} h3{font-size:1.15rem} h4{font-size:1rem}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--muted)} .fine{font-size:.88rem;color:var(--muted)} .num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

.wrap{max-width:1180px;margin:0 auto;padding:12px 16px 40px;display:flex;flex-direction:column;gap:14px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.02em}
.brand span{color:var(--sun)}
.net{font-size:.9rem;font-weight:700;padding:5px 12px;border-radius:999px;border:1.5px solid currentColor;white-space:nowrap}
.net.aan{color:var(--lagoon)} .net.uit{color:var(--sun);background:var(--sun-soft)}
.proefband{border:2px dashed var(--sun);color:var(--sun);background:var(--sun-soft);border-radius:10px;padding:6px 12px;font-weight:700}
.proefband::before{content:"⚑ "}

nav.tabs{display:flex;gap:6px;flex-wrap:wrap}
nav.tabs button{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 16px;min-height:48px;font-weight:700;cursor:pointer}
nav.tabs button[aria-current="page"]{border:2px solid var(--ink);background:var(--lagoon-soft)}
nav.tabs button[aria-current="page"]::after{content:" · hier";font-weight:400;color:var(--muted)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.rij{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.rij:first-of-type{border-top:none}
.rij time{font-family:var(--display);font-weight:700;color:var(--lagoon);font-variant-numeric:tabular-nums;white-space:nowrap}
.rij .b{font-weight:700} .rij .s{font-size:.85rem;color:var(--muted)}
.rij .acties{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chip{font-size:.82rem;font-weight:700;padding:3px 10px;border-radius:999px;border:1.5px solid currentColor;white-space:nowrap;display:inline-block}
.chip.ok{color:var(--lagoon)} .chip.ok::before{content:"✓ "}
.chip.open{color:var(--sun)} .chip.open::before{content:"○ "}
.chip.wacht{color:var(--muted)} .chip.wacht::before{content:"◐ "}
.chip.let{color:var(--sun);background:var(--sun-soft)} .chip.let::before{content:"⚠ "}
.chip.weg{color:var(--muted);text-decoration:line-through} .chip.weg::before{content:"✕ "}

.btn{border:2px solid var(--lagoon);background:var(--lagoon);color:var(--bg);border-radius:12px;padding:8px 18px;min-height:48px;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;color:var(--lagoon)}
.btn.big{min-height:58px;font-size:1.1rem;padding:10px 26px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.let{border-color:var(--sun);background:transparent;color:var(--sun)}

.stepper{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;list-style:none;padding:0;margin:0}
.stepper li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);font-size:.8rem;color:var(--muted);background:var(--surface)}
.stepper li b{font-family:var(--display);font-size:.95rem;color:var(--ink)}
.stepper li[aria-current="step"]{border-color:var(--ink);border-width:2px}
.stepper li[aria-current="step"] b::after{content:" · nu";font-weight:400;color:var(--muted)}
.stepper li.done{background:var(--lagoon-soft);cursor:pointer}
.stepper li.done b::before{content:"✓ "}

.pane{display:flex;flex-direction:column;gap:14px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fields.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.field small{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700}
.field input,.field select,.field textarea{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;min-height:48px;background:var(--bg);width:100%}
.field textarea{min-height:70px}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--lagoon);outline-offset:1px}
.field.auto{background:var(--lagoon-soft)}
.field.vol{grid-column:1/-1}

.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pick button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;min-height:72px;cursor:pointer}
.pick button[aria-pressed="true"]{border:3px solid var(--ink);background:var(--lagoon-soft)}
.pick button[aria-pressed="true"] .t::before{content:"● ";}
.pick .t{font-family:var(--display);font-weight:700} .pick .s{font-size:.85rem;color:var(--muted)}

.check{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer}
.check input[type=checkbox]{width:30px;height:30px;accent-color:var(--lagoon)}
.check.nodig{border-color:var(--sun)}
.check .who{font-size:.95rem}
.check select{border:1.5px solid var(--line);border-radius:10px;padding:8px;min-height:44px;background:var(--bg)}

.stepnum{display:flex;align-items:center;gap:10px}
.stepnum button{width:48px;height:48px;border-radius:12px;border:1.5px solid var(--lagoon);background:var(--surface);color:var(--lagoon);font-size:1.4rem;font-weight:700;cursor:pointer}
.stepnum output{min-width:2ch;text-align:center;font-family:var(--display);font-size:1.3rem;font-weight:700}

.terms{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 18px;max-height:46vh;overflow:auto;font-size:.95rem}
.terms h4{margin:12px 0 4px} .terms ol{margin:0;padding-left:1.5em} .terms li{margin:2px 0}
.kern{background:var(--lagoon-soft);border-radius:12px;padding:12px 16px}
.kern ul{margin:6px 0 0;padding-left:1.2em}

.sigbox{background:#fff;border:2px dashed var(--muted);border-radius:12px;position:relative;height:240px;touch-action:none}
.sigbox canvas{width:100%;height:100%;display:block;border-radius:10px;touch-action:none}
.sigbox .hint{position:absolute;inset:auto 0 12px;text-align:center;color:#4f6468;font-size:.95rem;pointer-events:none}
.sigbox.has .hint{display:none}
.sigline{position:absolute;left:24px;right:24px;bottom:48px;border-top:1px solid #b9c7c6;pointer-events:none}

dl.sum{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:0}
dl.sum dt{color:var(--muted)} dl.sum dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);padding-top:8px;font-family:var(--display);font-size:1.3rem}
.pay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pay button{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;min-height:72px;cursor:pointer}
.pay button[aria-pressed="true"]{border:3px solid var(--ink);background:var(--lagoon-soft)}
.pay button[aria-pressed="true"] b::before{content:"● "}
.pay .s{font-size:.82rem;color:var(--muted)}

.foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.say{font-weight:700;color:var(--sun)} .say:empty{display:none}
.say.goed{color:var(--lagoon)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}

.lock{border:3px solid var(--ink);border-radius:14px;padding:16px 18px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.lock h3::before{content:"🔒 "}
.lock ul{margin:0;padding-left:1.2em}

.week{display:flex;flex-direction:column;gap:12px}
.dag h3{margin-bottom:4px}
.leeg{color:var(--muted);font-style:italic}

table.prijs{width:100%;border-collapse:collapse}
table.prijs th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:6px}
table.prijs td{padding:4px 6px;border-top:1px solid var(--line)}
table.prijs input{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:8px;min-height:44px;background:var(--bg)}
.waarschuw{border:2px solid var(--sun);background:var(--sun-soft);border-radius:12px;padding:10px 14px}
.waarschuw::before{content:"⚠ ";font-weight:700}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:12px;font-weight:700;z-index:9;max-width:90vw}

@media (max-width:820px){
  .stepper{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pay{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pick,.fields,.fields.drie,.pay{grid-template-columns:1fr}
  .rij{grid-template-columns:auto 1fr}
  .rij .acties{grid-column:1/-1;justify-content:flex-start}
}