/* Kabalen in the browser. Same look as the local app (web.py), from Formatbibel docs/07_STIL.md:
   dark and cinematic, one pink accent. No external fonts: the page loads nothing from other hosts. */
:root{--bg:#FFFFFF;--bg-2:#F4F3F5;--panel:#FFFFFF;--ink:#111111;--muted:#6B6670;--faint:#9D98A2;--line:#E6E3E8;
--line-strong:#D3CFD6;--pink:#FF4370;--pink-text:#D81E55;--pink-soft:rgba(255,67,112,.10);--ok:#0E8A55;--warn:#A86400;
--bad:#D81E55;--glow:none;--shadow:0 1px 2px rgba(17,17,17,.06);--head:rgba(255,255,255,.82);
--font:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
--mono:Consolas,"SF Mono",Menlo,monospace;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0A070D;--bg-2:#120C17;--panel:#16101C;--ink:#FFFFFF;
--muted:#A59EAB;--faint:#6F6876;--line:rgba(255,255,255,.09);--line-strong:rgba(255,255,255,.18);--pink-text:#FF5A82;
--pink-soft:rgba(255,67,112,.14);--ok:#3DDC97;--warn:#FFB547;--bad:#FF5A82;--shadow:none;--head:rgba(10,7,13,.72);
--glow:radial-gradient(900px 520px at 12% -10%,rgba(255,67,112,.20),transparent 60%),radial-gradient(800px 600px at 95% 0%,rgba(110,40,170,.28),transparent 60%);
color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0A070D;--bg-2:#120C17;--panel:#16101C;--ink:#FFFFFF;--muted:#A59EAB;--faint:#6F6876;
--line:rgba(255,255,255,.09);--line-strong:rgba(255,255,255,.18);--pink-text:#FF5A82;--pink-soft:rgba(255,67,112,.14);
--ok:#3DDC97;--warn:#FFB547;--bad:#FF5A82;--shadow:none;--head:rgba(10,7,13,.72);
--glow:radial-gradient(900px 520px at 12% -10%,rgba(255,67,112,.20),transparent 60%),radial-gradient(800px 600px at 95% 0%,rgba(110,40,170,.28),transparent 60%);
color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);background-image:var(--glow);background-attachment:fixed;color:var(--ink);
font:17px/1.55 var(--font);overflow-x:hidden}
[hidden]{display:none!important}
a{color:var(--pink-text)}

.bar{position:sticky;top:0;z-index:10;min-height:64px;display:flex;align-items:center;gap:12px;
padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));
background:var(--head);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{font-size:1.3rem;font-weight:700;letter-spacing:-.03em}.brand i{font-style:normal;color:var(--pink)}
.theme{margin-left:auto;display:flex;border:1px solid var(--line-strong);border-radius:999px;padding:3px}
.theme button{background:transparent;color:var(--muted);border:0;border-radius:999px;padding:0 12px;height:28px;font:inherit;font-size:.82rem;cursor:pointer}
.theme button.on{background:var(--ink);color:var(--bg)}

main{max-width:1100px;margin:0 auto;padding:44px max(16px,env(safe-area-inset-right,0px)) 72px max(16px,env(safe-area-inset-left,0px));display:grid;gap:28px}
.over{font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--pink-text)}
h1,h2{font-weight:600;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,58px);line-height:1.04;letter-spacing:-.045em;margin:6px 0 12px}
h1.title::after{content:".";color:var(--pink)}
h2{font-size:clamp(22px,2.6vw,30px);line-height:1.12;letter-spacing:-.03em;margin:0 0 6px}
h2::before{content:"/ ";color:var(--pink)}
.lead{font-size:1.12rem;color:var(--muted);max-width:62ch;margin:0}
.muted{color:var(--muted)}.small{font-size:.88rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.btn{font:inherit;font-size:.95rem;font-weight:600;height:44px;padding:0 22px;border-radius:999px;cursor:pointer;
display:inline-flex;align-items:center;border:1px solid var(--pink);background:var(--pink);color:#fff;text-decoration:none;
transition:filter .15s,border-color .15s,color .15s}
.btn:hover{filter:brightness(1.08)}.btn:focus-visible,.theme button:focus-visible,.day:focus-visible{outline:2px solid var(--pink-text);outline-offset:3px}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--line-strong);font-weight:500}
.btn.sec:hover{border-color:var(--pink);color:var(--pink-text);filter:none}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

.drop{border:1.5px dashed var(--line-strong);border-radius:18px;padding:24px;display:grid;gap:12px;background:var(--bg-2)}
.drop.over-zone{border-color:var(--pink);background:var(--pink-soft)}
.drop-head{font-weight:600;font-size:1.1rem;margin:0}
.drop p{margin:0}

.status{display:grid;gap:8px}
.notice{border:1px solid var(--line);border-radius:14px;padding:12px 18px;background:var(--bg-2)}
.notice.bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.notes{margin:6px 0 0;padding-left:20px;color:var(--muted)}
.facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:14px 22px 14px 0;margin-right:22px;border-right:1px solid var(--line)}.fact:last-child{border-right:0}
.fact b{display:block;font-size:2rem;font-weight:600;letter-spacing:-.045em;line-height:1.1;color:var(--pink);font-variant-numeric:tabular-nums}
.fact span{font-size:.85rem;color:var(--muted)}

.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.day{text-align:left;font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);border-bottom:2px solid var(--line-strong);
border-radius:14px;padding:16px 18px;background:var(--panel);box-shadow:var(--shadow);display:grid;gap:6px;transition:transform .2s}
.day:hover{transform:translateY(-2px)}
.day.r{border-bottom-color:var(--bad)}.day.y{border-bottom-color:var(--warn)}.day.g{border-bottom-color:var(--ok)}
.day .name{font-weight:600;letter-spacing:-.02em}.day .date{font-size:.85rem;color:var(--muted)}
.day .n{font-size:2.4rem;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.n.r{color:var(--pink)}.n.y{color:var(--warn)}.n.g{color:var(--ok)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;margin-top:8px}
.dot.r{background:var(--bad)}.dot.y{background:var(--warn)}.dot.g{background:var(--ok)}

#day,#days{scroll-margin-top:84px}
.import{display:grid;gap:12px}
.files{margin:0;padding-left:20px}.files li{margin:3px 0}
.questions{display:grid;gap:0}
.q{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--line)}.q:first-child{border-top:0}
.q label{font-weight:600}.q.answered label{color:var(--muted)}.q .btn{justify-self:start;height:34px;font-size:.85rem;padding:0 14px}
.q select{font:inherit;max-width:520px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink)}
.q select:focus{outline:none;border-color:var(--pink)}
.report summary{cursor:pointer;color:var(--muted)}
.report h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:18px 0 6px}
.lines{margin:0;padding-left:20px;font-size:.92rem}.lines li{margin:2px 0}
.lines.not_understood li::marker{color:var(--bad)}.lines.guessed li::marker{color:var(--warn)}
.findings{display:grid}
.f{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);min-width:0}
.f:first-child{border-top:0}
.f .t{min-width:0}.f .hint{color:var(--muted);font-size:.9rem;margin-top:3px}
.f .rule{font:12px var(--mono);color:var(--faint);margin-right:6px}

.log summary{cursor:pointer;color:var(--muted);font-size:.9rem}
.log pre{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font:12.5px/1.6 var(--mono);color:var(--muted);white-space:pre-wrap;overflow-x:auto}

.open-app{display:grid;gap:8px;border:1px solid var(--line);border-bottom:2px solid var(--pink);border-radius:14px;padding:18px;background:var(--panel)}
.open-app p{margin:0}
.busy{position:fixed;z-index:50;left:50%;transform:translateX(-50%);bottom:max(20px,env(safe-area-inset-bottom,0px));
background:var(--ink);color:var(--bg);border-radius:999px;padding:10px 20px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.3)}

@media (prefers-reduced-motion:reduce){.btn,.day{transition:none}.day:hover{transform:none}}