:root{--bg:#f6f1e9;--card:#fff;--ink:#23201c;--muted:#7a736a;--line:#e7dfd3;--brand:#c2410c;--brand-ink:#fff;--ok:#16a34a;--bad:#b91c1c;--r:12px;
  --t-verjaardag:#db2777;--t-feest:#d97706;--t-vakantie:#16a34a;--t-afspraak:#2563eb;--t-overig:#6b7280}
*{box-sizing:border-box}html{font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--brand)}h1{font-size:1.6rem;margin:.2em 0 .5em}h2{font-size:1.15rem;margin:1.6em 0 .5em}h1 .h-sub,h2 .h-sub{font-size:.8rem;font-weight:400;margin-left:.4em}
main{flex:1;width:100%;max-width:860px;margin:0 auto;padding:16px}main.wide{max-width:1100px}
.top{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-weight:700;color:var(--ink);text-decoration:none;font-size:1.1rem}.top nav{display:flex;gap:4px;margin-left:auto}
.top nav a{text-decoration:none;color:var(--ink);padding:6px 10px;border-radius:8px}.top nav a.on,.top nav a:hover{background:var(--bg)}
.me{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-weight:600;padding:6px 10px;border-radius:8px;border:1px solid var(--line)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}.narrow{max-width:420px;margin:40px auto}.center{text-align:center}
.muted{color:var(--muted)}.small{font-size:.85rem}.err{color:var(--bad);background:#fee2e2;padding:8px 12px;border-radius:8px}
.flash{max-width:860px;margin:10px auto -6px;padding:8px 16px;color:var(--ok);font-size:.9rem}
.row{display:flex;align-items:center;gap:8px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.gap{gap:8px}.stack{display:flex;flex-direction:column;gap:12px}.inline{display:inline}
.btn{display:inline-block;padding:8px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;text-decoration:none;font:inherit;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:#c9bfb0}.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}.btn.danger{color:var(--bad)}.btn.sm{padding:5px 10px;font-size:.85rem}
.btn.google{background:#fff;border:1px solid #ccc}.or{margin:14px 0 8px;color:var(--muted)}
input,select,textarea,button{font:inherit}input:not([type=checkbox]):not([type=color]),select,textarea{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;width:100%;min-width:0}
textarea{resize:vertical}label{display:flex;flex-direction:column;gap:4px;font-size:.9rem}fieldset{border:1px solid var(--line);border-radius:8px}legend{font-size:.9rem;padding:0 6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.checks{display:flex;flex-wrap:wrap;gap:6px}.chk{flex-direction:row;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:20px;background:#fff;cursor:pointer}
.chk:has(input:checked){border-color:var(--c,var(--brand));background:color-mix(in srgb,var(--c,var(--brand)) 12%,#fff)}
.who{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.whobtn{padding:22px;font-size:1.2rem;font-weight:700;border:2px solid var(--c);border-radius:var(--r);background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--ink);cursor:pointer}.whobtn:hover{background:var(--c);color:#fff}
.chips{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}.chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.8rem;background:color-mix(in srgb,var(--c) 15%,#fff);color:color-mix(in srgb,var(--c) 80%,#000);border:1px solid color-mix(in srgb,var(--c) 40%,#fff)}.chip.sm{font-size:.72rem;padding:1px 7px}
.type{font-size:.85rem;color:var(--muted)}
.list{display:flex;flex-direction:column;gap:10px}.ev{display:flex;gap:14px;text-decoration:none;color:inherit}.ev:hover{border-color:#c9bfb0}
.ev-date{flex:0 0 52px;text-align:center;background:var(--bg);border-radius:10px;padding:6px 0;line-height:1.1}.ev-date b{display:block;font-size:1.5rem}.ev-date span{font-size:.75rem;text-transform:uppercase;color:var(--muted)}
.ev-body{flex:1;min-width:0}.ev-title{font-weight:700;font-size:1.05rem}.ev-meta{font-size:.85rem;color:var(--muted);margin:2px 0 6px}
.subs{margin:6px 0 0;padding-left:18px;font-size:.9rem}.subs li{margin:2px 0}.stats{display:inline-flex;gap:10px;font-size:.8rem;color:var(--muted);margin-top:4px;margin-left:6px}
ul.plain{list-style:none;padding:0;margin:0}ul.plain li{padding:6px 0;border-bottom:1px solid var(--line)}
.quick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.quick input[name=title]{flex:2 1 200px}.quick input[type=date]{flex:1 1 140px}.quick select{flex:1 1 150px}.quick .checks{flex:1 1 100%}
.info{display:flex;flex-direction:column;gap:8px}.info .big{font-size:1.1rem;font-weight:600}.notes{white-space:pre-wrap;margin:4px 0;padding:10px;background:var(--bg);border-radius:8px}
.crumb{font-size:.85rem;color:var(--muted);margin:0}
.table{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px}
.trow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px;border-radius:8px}.trow.new{background:var(--bg);margin-top:4px}.trow.head,.trow.foot{font-size:.8rem;color:var(--muted);padding:2px 10px}.trow.foot{border-top:1px solid var(--line);margin-top:4px;color:var(--ink)}
.trow .grow{flex:1 1 140px}.trow .num{width:60px;flex:0 0 60px}.trow .money{width:96px;flex:0 0 96px;text-align:right}.trow select{width:auto;flex:0 1 auto}.trow .spacer{width:18px}
.trow.done input[name=title]{text-decoration:line-through;color:var(--muted)}
.trow.js .save{display:none}.trow.saving{opacity:.6}.trow.saved{background:#ecfdf5}.trow.fail{background:#fee2e2}
.x{border:0;background:none;color:var(--muted);cursor:pointer;padding:4px 6px;font-size:1rem}.x:hover{color:var(--bad)}
select.st-komt{background:#dcfce7}select.st-komt_niet{background:#fee2e2}select.st-uitgenodigd{background:#dbeafe}
.comments{display:flex;flex-direction:column;gap:10px}.comment{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}.comment p{margin:4px 0 0;white-space:pre-wrap}.comment form{float:right}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cal-h{background:var(--bg);padding:6px;font-size:.75rem;text-align:center;color:var(--muted);text-transform:uppercase}
.cal-d{background:#fff;min-height:88px;padding:4px;font-size:.78rem;display:flex;flex-direction:column;gap:2px}.cal-d.empty{background:#faf7f2}.cal-d.we{background:#fdfbf8}.cal-d.today{outline:2px solid var(--brand);outline-offset:-2px}
.dnum{align-self:flex-end;color:var(--muted);text-decoration:none;padding:0 4px}.dnum:hover{color:var(--brand)}.today .dnum{color:var(--brand);font-weight:700}
.cal-ev{display:block;padding:2px 5px;border-radius:5px;color:#fff;text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:var(--t-overig)}.cal-ev small{opacity:.85}
.cal-ev.t-verjaardag{background:var(--t-verjaardag)}.cal-ev.t-feest{background:var(--t-feest)}.cal-ev.t-vakantie{background:var(--t-vakantie)}.cal-ev.t-afspraak{background:var(--t-afspraak)}
@media(max-width:700px){.cal-d{min-height:52px;padding:2px}.cal-ev{font-size:0;padding:0;height:6px;margin-top:2px}.cal-ev small{display:none}}
h1 a.nav{text-decoration:none;color:var(--muted);padding:0 8px}h1 a.nav:hover{color:var(--brand)}
code{font-size:.82rem;background:var(--bg);padding:2px 6px;border-radius:5px;word-break:break-all}code.copy{cursor:copy}code.copied{background:#dcfce7}
details{margin-top:4px}summary{cursor:pointer;font-weight:600}details ol,details p{margin:6px 0}
@media(max-width:560px){.top{padding:8px 10px;gap:8px}.top nav a{padding:6px 7px;font-size:.9rem}.brand{font-size:1rem}.me span.dot{margin:0}.me{font-size:0;padding:6px}.me .dot{width:16px;height:16px;font-size:1rem}main{padding:12px}.who{grid-template-columns:1fr}}

.hero{display:block;width:100%;max-width:360px;margin:0 auto 10px;border-radius:18px}.hero.sm{max-width:260px}
.welcome{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#fff7ed,#fde8d3);border:1px solid #f3d9c0;border-radius:var(--r);padding:14px 18px;margin-bottom:18px}
.welcome div{flex:1;min-width:0}.welcome h1{margin:0 0 4px}.welcome p{margin:0}.welcome img{width:200px;max-width:40%;border-radius:14px;flex:0 0 auto}
@media(max-width:560px){.welcome{flex-direction:column-reverse;text-align:center}.welcome img{width:100%;max-width:260px}}
html{background:var(--bg) radial-gradient(circle at 10% 0%,#fde8d3 0,transparent 40%),radial-gradient(circle at 90% 100%,#dcfce7 0,transparent 35%)}