:root{
  --bg:#f3f6f6; --surface:#ffffff; --ink:#15282b; --muted:#56696c; --line:#d6e0e0;
  --brand:#1f5d62; --mor:#c9792b; --far:#2f6fa3; --soft:#e6eeee; --focus:#1f5d62;
  --display:"Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1a1c; --surface:#16252800; --ink:#e4eeee; --muted:#9db0b2; --line:#2a3d40;
  --brand:#6fb7bc; --mor:#e29a52; --far:#6aa6d8; --soft:#1b2c2f; --focus:#8fd0d4; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1a1c; --surface:#16252800; --ink:#e4eeee; --muted:#9db0b2; --line:#2a3d40;
  --brand:#6fb7bc; --mor:#e29a52; --far:#6aa6d8; --soft:#1b2c2f; --focus:#8fd0d4; color-scheme:dark}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--body)}
.wrap{max-width:760px;margin:0 auto;padding-block:28px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:28px}
header{display:grid;gap:6px}
.brand{font:700 14px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
h1{font:700 clamp(30px,6vw,42px)/1.1 var(--display);margin:0;text-wrap:balance}
.lead{margin:0;color:var(--muted);max-width:62ch}
h2{font:700 20px/1.2 var(--display);margin:0 0 12px}
section{display:grid;gap:12px}
.panel{border:1px solid var(--line);border-radius:10px;padding:20px;display:grid;gap:18px;background:var(--bg)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
label{font-weight:700;font-size:14px;display:block;margin-bottom:6px}
input[type=date]{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%;box-sizing:border-box}
.check{display:flex;gap:10px;align-items:center;font-size:15px}
.check input{width:18px;height:18px;accent-color:var(--brand)}
input[type=range]{width:100%;accent-color:var(--brand)}
.scale{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.totals{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tot{padding:16px;border-radius:10px;background:var(--soft);display:grid;gap:2px;min-width:0}
.tot .who{font-size:14px;font-weight:700;display:flex;gap:8px;align-items:center}
.dot{width:10px;height:10px;border-radius:50%}
.tot .n{font:700 40px/1 var(--display);font-variant-numeric:tabular-nums}
.tot .sub{font-size:13px;color:var(--muted)}
.ribbon{overflow-x:auto}
.lane{display:grid;grid-template-columns:64px repeat(52,minmax(5px,1fr));gap:2px;align-items:center;min-width:420px}
.lane+.lane{margin-top:4px}
.lane .nm{font-size:13px;color:var(--muted)}
.c{height:22px;border-radius:2px;background:var(--soft)}
.c.m{background:var(--mor)} .c.f{background:var(--far)}
.c.preg{background:repeating-linear-gradient(135deg,var(--mor) 0 3px,transparent 3px 6px)}
.c.birth{box-shadow:inset 2px 0 0 var(--ink)}
.axis{display:grid;grid-template-columns:64px repeat(52,minmax(5px,1fr));gap:2px;font-size:11px;color:var(--muted);min-width:420px;margin-top:6px;font-variant-numeric:tabular-nums}
.axis span{white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-2px;margin-right:6px}
ol.dates{list-style:none;margin:0;padding:0;display:grid}
ol.dates li{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
ol.dates time{font-weight:700;font-variant-numeric:tabular-nums}
ol.dates p{margin:0} ol.dates small{color:var(--muted);display:block}
.note{font-size:14px;color:var(--muted);max-width:65ch;margin:0}
.explain p{margin:0;max-width:65ch}
footer{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
footer a{color:var(--brand)}
@media (max-width:480px){ol.dates li{grid-template-columns:1fr;gap:2px}.tot .n{font-size:34px}}
body{margin:0}
.brand a{color:inherit;text-decoration:none}
select,input[type=number]{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%;box-sizing:border-box}
select option{color:#15282b}
input[type=date]{min-height:44px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:6px;align-content:start;text-decoration:none;color:var(--ink);background:var(--bg)}
a.card:hover{border-color:var(--brand)}
.card h3{font:700 18px/1.2 var(--display);margin:0;color:var(--brand)}
.card p{margin:0;font-size:15px;color:var(--muted)}
.card.soon{opacity:.65}
.tag{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.result{padding:18px;border-radius:10px;background:var(--soft);display:grid;gap:4px}
.result .big{font:700 clamp(24px,5vw,32px)/1.15 var(--display)}
.result .sub{font-size:14px;color:var(--muted)}
table.t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.t th,table.t td{text-align:left;padding:8px 6px;border-top:1px solid var(--line);font-size:15px}
table.t th{font-size:13px;color:var(--muted);border-top:0}
table.t td.n,table.t th.n{text-align:right}
.hl li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.warn{color:#9a4a00}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .warn{color:#e29a52}}
:root[data-theme="dark"] .warn{color:#e29a52}
@media (max-width:480px){.hl li{grid-template-columns:1fr;gap:2px}}