/* Idee: witte gravelweg als achtergrond, terra di Siena voor wat gedaan is, cipres voor rust, een donkere kop als de stoffige horizon. Weken zijn gravelsectoren. */
:root{
  --bg:#F4F3EE; --card:#FBFAF7; --ink:#1E1D1A; --muted:#6B675D; --line:#DAD6CB;
  --accent:#B2451C; --on-accent:#FFFFFF; --good:#2F5D45; --warn:#9A3412;
  --hero:#1E1D1A; --hero-ink:#F4F3EE; --hero-muted:#B9B4A7;
  --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1A1916; --card:#232220; --ink:#EDEAE2; --muted:#A09B8E; --line:#37352F;
    --accent:#E0683A; --on-accent:#1A1916; --good:#6FB28C; --warn:#F08A5D;
    --hero:#0F0E0C; --hero-ink:#F1EEE6; --hero-muted:#A9A498;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1A1916; --card:#232220; --ink:#EDEAE2; --muted:#A09B8E; --line:#37352F;
  --accent:#E0683A; --on-accent:#1A1916; --good:#6FB28C; --warn:#F08A5D;
  --hero:#0F0E0C; --hero-ink:#F1EEE6; --hero-muted:#A9A498;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.4;-webkit-text-size-adjust:100%}
h1,h2,h3,p{margin:0;text-wrap:balance}
.hero{background:var(--hero);color:var(--hero-ink);border-bottom:6px solid var(--accent)}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
.hero .wrap{padding-top:28px;padding-bottom:22px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:flex-end;justify-content:space-between}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(44px,11vw,84px);line-height:.92;letter-spacing:.02em;text-transform:uppercase}
.hero .tag{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:var(--hero-muted);margin-bottom:8px}
.hero .facts{color:var(--hero-muted);font-size:15px;margin-top:10px}
.count{text-align:right;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em}
.count b{display:block;font-size:clamp(48px,10vw,72px);line-height:.9;font-weight:700;color:var(--hero-ink);font-variant-numeric:tabular-nums}
.count span{font-size:16px;color:var(--hero-muted)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:20px 0 14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px 14px}
.tile .k{font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:14px;color:var(--muted)}
.tile .v{font-family:var(--display);font-weight:700;font-size:34px;line-height:1.05;font-variant-numeric:tabular-nums}
.tile .v small{font-size:18px;color:var(--muted);font-weight:600}
.tile .s{font-size:14px;color:var(--muted);margin-top:2px}
.road{display:flex;gap:2px;margin:4px 0 6px}
.road i{flex:1;height:14px;background:var(--line);border-radius:2px}
.road i.on{background:var(--accent)}
.road-l{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:22px;font-variant-numeric:tabular-nums}
.legend{font-size:13px;color:var(--muted);margin:0 0 14px}
.week{display:grid;grid-template-columns:176px 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:6px;margin-bottom:12px;overflow:hidden}
.rail{padding:14px 14px;border-right:1px solid var(--line)}
.sector{font-family:var(--display);font-weight:700;font-size:26px;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.stars{color:var(--accent);letter-spacing:2px;font-size:15px;margin:6px 0 4px}
.stars span{color:var(--line)}
.meta{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.ph{display:inline-block;margin-top:8px;font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--muted);border:1px solid var(--line);padding:1px 7px;border-radius:3px}
.sessions{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:30px 1fr auto;gap:0 12px;align-items:start;padding:12px 14px;cursor:pointer;border-top:1px solid var(--line);position:relative}
.sessions li:first-child .row{border-top:0}
.row input{position:absolute;opacity:0;width:30px;height:30px;margin:0;left:14px;top:10px;cursor:pointer}
.tick{width:28px;height:28px;border:2px solid var(--muted);border-radius:6px;display:grid;place-items:center;background:var(--card);margin-top:1px}
.tick svg{width:18px;height:18px;opacity:0}
input:checked + .tick{background:var(--accent);border-color:var(--accent)}
input:checked + .tick svg{opacity:1}
input:focus-visible + .tick{outline:3px solid var(--ink);outline-offset:2px}
.when{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center}
.when .d{font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.03em}
.chip{font-family:var(--display);font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:12px;padding:0 6px;border-radius:3px;border:1px solid var(--muted);color:var(--muted)}
.chip.kwaliteit{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip.lang{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip.test{border-style:dashed;border-color:var(--accent);color:var(--accent)}
.chip.tr{background:var(--good);border-color:var(--good);color:var(--on-accent)}
.flag{font-family:var(--display);font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:12px}
.flag.next{color:var(--accent)}
.flag.late{color:var(--warn)}
.flag.today{color:var(--good)}
.what b{display:block;font-weight:600;font-size:17px;margin-top:1px}
.what small{display:block;color:var(--muted);font-size:14px}
.what em{display:block;font-style:normal;font-size:14px;color:var(--ink);margin-top:2px}
.dur{font-family:var(--display);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums;white-space:nowrap}
li.done .what b{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}
li.done .dur{color:var(--muted)}
li.next .row{box-shadow:inset 4px 0 0 var(--accent)}
.gap{border:2px dashed var(--line);border-radius:6px;padding:18px 16px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.gap .sector{color:var(--muted)}
.gap p{color:var(--muted)}
.finish{background:var(--hero);color:var(--hero-ink);border-radius:6px;border-bottom:6px solid var(--accent);margin:18px 0 12px}
.finish .row{border:0;color:var(--hero-ink)}
.finish .tick{background:transparent;border-color:var(--hero-muted)}
.finish .when,.finish .what small{color:var(--hero-muted)}
.finish .what b{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.05}
.finish li.done .what b{color:var(--hero-ink);text-decoration:none}
.foot{font-size:13px;color:var(--muted);padding:8px 0 40px}
@media (max-width:640px){
  .week{grid-template-columns:1fr}
  .rail{border-right:0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline}
  .rail .stars{margin:0}
  .rail .ph{margin-top:0}
  .count{text-align:left}
}
@media (prefers-reduced-motion:no-preference){.tick,.road i{transition:background .15s,border-color .15s}}

/* site */
.nav{display:flex;flex-wrap:wrap;gap:4px 18px;padding:10px 0 0;font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:15px}
.nav a{color:var(--hero-muted);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--hero-ink);border-bottom-color:var(--accent)}
.hero .wrap{padding-top:14px}
.sec{margin:26px 0}
.sec h2{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.sec p,.sec li{max-width:68ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.card h3{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.card p,.card li{font-size:15px;color:var(--muted)}
.card a{color:var(--accent);font-weight:600}
.facts-l{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
.facts-l dt{font-family:var(--display);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-size:14px;padding-top:2px}
.facts-l dd{margin:0}
.todo{display:inline-block;font-family:var(--display);font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:12px;border:1px dashed var(--accent);color:var(--accent);padding:0 6px;border-radius:3px}
.timeline{list-style:none;margin:0;padding:0;border-left:3px solid var(--accent)}
.timeline li{padding:6px 0 10px 16px;position:relative}
.timeline b{font-family:var(--display);letter-spacing:.05em;text-transform:uppercase;font-size:18px}
.timeline span{display:block;color:var(--muted);font-size:15px}
.who{display:flex;flex-wrap:wrap;gap:12px}
.who a{flex:1 1 140px;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.04em;text-transform:uppercase}
.who a small{display:block;font-family:var(--body);font-weight:400;font-size:14px;letter-spacing:0;text-transform:none;color:var(--muted)}
.who a:hover{border-color:var(--accent)}
.wait{background:var(--card);border:2px dashed var(--line);border-radius:6px;padding:20px 18px;margin:20px 0}
.wait h2{font-family:var(--display);font-size:28px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);border:0;border-radius:6px;font-family:var(--display);font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:18px;padding:10px 18px;text-decoration:none;cursor:pointer}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
form.f{display:grid;gap:16px;margin:16px 0}
.f label,.f legend{font-weight:600;display:block;margin-bottom:4px}
.f small{display:block;color:var(--muted);font-weight:400}
.f input[type=text],.f input[type=number],.f select,.f textarea{width:100%;font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--muted);border-radius:6px;padding:9px 10px}
.f textarea{min-height:84px}
.f fieldset{border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin:0}
.f .opts{display:flex;flex-wrap:wrap;gap:6px 16px}
.f .opts label{font-weight:400;display:flex;gap:6px;align-items:center;margin:0}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:3px solid var(--ink);outline-offset:1px}
#outbox{width:100%;min-height:220px;font:14px/1.45 ui-monospace,Menlo,Consolas,monospace}

/* Stap 3: synchronisatie en groep */
.sync{margin:16px 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--muted);font-size:14px}
.sync.bad{color:var(--warn);border-color:var(--warn)}
.sync.ro{color:var(--ink)}
.sync a{color:var(--accent)}
.row input:disabled + .tick{opacity:.55}
.row input:disabled ~ *{cursor:default}
.grp{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:8px}
.grp .card .big{font-family:var(--display);font-weight:700;font-size:40px;line-height:1}
.grp .card .big small{font-size:18px;color:var(--muted);font-weight:600}
.grp .card .road{margin:12px 0 6px}
.grp .card .lst{font-size:14px;color:var(--muted);margin:6px 0 0}
.grp .card .wk{font-size:14px;margin:8px 0 0}
.grp .card h3 a{color:inherit;text-decoration:none}
.grp .card h3 a:hover{color:var(--accent)}
.grp + .legend{margin-top:14px}