:root { color-scheme: dark; --ink:#0a1020; --panel:#111a2e; --panel-2:#18233b; --text:#f1f4f9; --text-2:#aab6c8; --line:rgba(190,208,235,.2); --accent:#7db0ff; --on-accent:#0a1020; --ok:#58d39b; --part:#f2c14e; --open:#ff8d84; --na:#8996ab; --font:"Hanken Grotesk","Segoe UI","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:var(--ink); color:var(--text); font:400 1rem/1.5 var(--font); overflow-x:clip; }
[hidden] { display:none!important; }
h1,h2,h3,h4,p,ul,ol { margin:0; padding:0; } ul,ol { list-style:none; }
h1,h2 { font-weight:300; letter-spacing:-.02em; line-height:1.08; text-wrap:balance; }
h3 { font-weight:500; line-height:1.25; }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.wrap { width:100%; max-width:1280px; margin-inline:auto; padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px)); }
.eyebrow { font:400 .74rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.site-header { position:sticky; top:0; z-index:20; background:rgba(10,16,32,.92); border-bottom:1px solid var(--line); }
.site-header .wrap { display:flex; align-items:center; gap:28px; min-height:72px; }
.brand { color:var(--text); text-decoration:none; font-weight:600; font-size:1.05rem; letter-spacing:.16em; }
.nav { display:flex; flex-wrap:wrap; gap:6px 26px; margin-left:auto; }
.nav a { color:var(--text-2); text-decoration:none; font-size:.96rem; padding-block:6px; }
.nav a:hover,.nav a[aria-current] { color:var(--text); }
.top { padding-block:clamp(36px,6vw,68px) 28px; display:grid; gap:12px; }
.crumb { font-size:.9rem; color:var(--text-2); } .crumb a { color:var(--text-2); }
.top h1 { font-size:clamp(2.4rem,6vw,4.2rem); }
.top .sub { color:var(--text-2); font-size:1.12rem; max-width:62ch; }
.layout { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:28px; align-items:start; padding-bottom:56px; }
@media (max-width:960px) { .layout { grid-template-columns:minmax(0,1fr); } }
.setup { position:sticky; top:88px; display:grid; gap:16px; padding:18px; background:var(--panel); border:1px solid var(--line); max-height:calc(100vh - 104px); overflow-y:auto; }
@media (max-width:960px) { .setup { position:static; max-height:none; } }
#questions { display:grid; gap:16px; }
.q { display:grid; gap:6px; min-width:0; }
.q label:not(.seg label),.q .qt { font-size:.93rem; font-weight:500; }
.q small { color:var(--text-2); font-size:.84rem; line-height:1.35; }
select,input[type="text"],input[type="datetime-local"] { width:100%; min-height:44px; padding:8px 10px; font:inherit; color:var(--text); background:var(--ink); border:1px solid var(--line); }
select option { background:var(--panel); }
.seg { display:flex; flex-wrap:wrap; gap:6px; }
.seg label { cursor:pointer; }
.seg input,.state input { position:absolute; opacity:0; width:1px; height:1px; }
.seg span { display:inline-block; padding:6px 11px; font-size:.9rem; border:1px solid var(--line); color:var(--text-2); }
.seg input:checked + span { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:500; }
.seg input:focus-visible + span,.state input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; font:500 .96rem/1.2 var(--font); cursor:pointer; text-decoration:none; background:var(--text); color:var(--ink); border:1px solid var(--text); }
.btn:hover { background:var(--accent); border-color:var(--accent); }
.btn--line { background:transparent; color:var(--text); border-color:rgba(190,208,235,.5); }
.btn--line:hover { background:transparent; color:var(--text); border-color:var(--text); }
.result { display:grid; gap:22px; min-width:0; }
.verdict { display:grid; gap:8px; padding:20px; background:var(--panel-2); border:1px solid var(--line); }
.verdict h2 { font-size:clamp(1.7rem,3.4vw,2.5rem); }
.verdict p { color:var(--text-2); max-width:70ch; }
.verdict .note { color:var(--part); font-size:.92rem; }
.summary { display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); }
.sum { flex:1 1 210px; display:grid; gap:6px; padding:12px 14px; background:var(--ink); min-width:0; }
.sum b { font-weight:500; font-size:.96rem; }
.sum span { font:400 .78rem/1.2 var(--mono); color:var(--text-2); }
.bar { display:flex; height:6px; background:rgba(190,208,235,.14); overflow:hidden; } .bar i { display:block; height:100%; }
.report { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) auto; gap:12px; align-items:end; padding:16px; background:var(--panel); border:1px solid var(--line); }
.report .status { grid-column:1/-1; font-size:.92rem; color:var(--ok); min-height:1.3em; }
@media (max-width:720px) { .report { grid-template-columns:minmax(0,1fr); } }
.pillar > h3 { font-size:1.3rem; font-weight:400; padding-bottom:10px; border-bottom:1px solid var(--line); }
.req { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 18px; padding:13px 0; border-bottom:1px solid var(--line); }
.req h4 { font-size:1rem; font-weight:500; line-height:1.3; }
.req p { color:var(--text-2); font-size:.92rem; line-height:1.4; }
.req .art { font:400 .74rem/1.3 var(--mono); color:var(--accent); margin-bottom:3px; }
.tag { display:inline-block; margin-left:6px; padding:1px 6px; font:400 .7rem/1.4 var(--mono); color:var(--part); border:1px solid var(--part); }
.memo { margin-top:4px; } .memo summary { cursor:pointer; font-size:.84rem; color:var(--text-2); } .memo input { margin-top:6px; }
.state { display:flex; flex-wrap:wrap; gap:4px; align-self:start; } .state label { cursor:pointer; }
.state span { display:inline-block; padding:5px 8px; font-size:.8rem; color:var(--text-2); border:1px solid var(--line); }
.state input:checked + span.s-open { background:var(--open); border-color:var(--open); color:var(--ink); }
.state input:checked + span.s-part { background:var(--part); border-color:var(--part); color:var(--ink); }
.state input:checked + span.s-ok { background:var(--ok); border-color:var(--ok); color:var(--ink); }
.state input:checked + span.s-na { background:var(--na); border-color:var(--na); color:var(--ink); }
@media (max-width:640px) { .req { grid-template-columns:minmax(0,1fr); } }
.block { border-top:1px solid var(--line); padding-block:40px; display:grid; gap:12px; }
.block h2 { font-size:clamp(1.8rem,4vw,2.8rem); }
.block > p { color:var(--text-2); max-width:66ch; }
.clock { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:28px; }
@media (max-width:800px) { .clock { grid-template-columns:minmax(0,1fr); } }
.clock-in { display:grid; gap:14px; }
.dates { border-top:1px solid var(--line); }
.dates li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding:12px 0; border-bottom:1px solid var(--line); }
.dates b { font-weight:500; } .dates time { font:400 .95rem/1.4 var(--mono); }
.dates small { grid-column:1/-1; color:var(--text-2); font-size:.88rem; }
.fine { color:var(--text-2); font-size:.88rem; }
.src { display:grid; gap:6px; }
.cat { border-top:1px solid var(--line); margin-bottom:56px; }
.cat a { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,5fr) auto; gap:6px 28px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); color:var(--text); text-decoration:none; transition:padding-left .2s ease; }
.cat a:hover { padding-left:10px; } .cat h2 { font-size:clamp(1.5rem,3vw,2.1rem); }
.cat small { display:block; color:var(--accent); font:400 .76rem/1.4 var(--mono); }
@media (max-width:640px) { .site-header { position:static; } .site-header .wrap { flex-wrap:wrap; gap:6px 16px; padding-block:12px; min-height:0; } .nav { margin-left:0; width:100%; gap:4px 16px; } .setup { top:12px; } }
.cat p { color:var(--text-2); } .cat .go { color:var(--accent); }
@media (max-width:760px) { .cat a { grid-template-columns:minmax(0,1fr); } }
.term { border-bottom:1px dotted var(--accent); cursor:help; }
.term:hover,.term:focus-visible { color:var(--accent); }
#gloss-tip { position:fixed; z-index:50; max-width:min(320px,calc(100vw - 16px)); padding:10px 12px; background:var(--panel-2); color:var(--text); border:1px solid var(--accent); font:400 .88rem/1.4 var(--font); box-shadow:0 8px 24px rgba(0,0,0,.45); }
#gloss-tip b { display:block; margin-bottom:2px; color:var(--accent); font-weight:600; }
.glossary { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:0 20px; margin:0; }
.glossary dt,.glossary dd { margin:0; padding:9px 0; border-bottom:1px solid var(--line); font-size:.94rem; }
.glossary dt { font-weight:500; } .glossary dd { color:var(--text-2); }
@media (max-width:640px) { .glossary { grid-template-columns:minmax(0,1fr); } .glossary dt { border-bottom:0; padding-bottom:0; } .glossary dd { padding-top:2px; } }
details.terms summary { cursor:pointer; color:var(--accent); }
.site-footer { border-top:1px solid var(--line); padding-block:24px; color:var(--text-2); font-size:.92rem; }
.site-footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; }
.site-footer a { color:var(--text-2); }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .cat a { transition:none; } }
.notice { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 20px; align-items:center; padding:14px 16px; margin-bottom:22px; background:var(--panel-2); border:1px solid var(--part); }
.notice p { font-size:.94rem; color:var(--text); }
@media (max-width:640px) { .notice { grid-template-columns:minmax(0,1fr); } }
.filebar { display:flex; flex-wrap:wrap; gap:8px; grid-column:1/-1; }
.vh { position:absolute; width:1px; height:1px; opacity:0; }
.filebar label { cursor:pointer; }
.planrow { display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,160px); gap:6px; margin:6px 0; }
.planrow select,.planrow input { min-height:38px; font-size:.9rem; margin:0; }
input[type="date"] { width:100%; min-height:38px; padding:6px 8px; font:inherit; color:var(--text); background:var(--ink); border:1px solid var(--line); }
@media (max-width:640px) { .planrow { grid-template-columns:minmax(0,1fr); } }
.prose { max-width:46rem; display:grid; gap:14px; padding-bottom:56px; }
.prose h2 { font-size:1.6rem; margin-top:14px; } .prose h3 { font-size:1.15rem; margin-top:6px; }
.prose p,.prose li { color:var(--text-2); } .prose ul { display:grid; gap:6px; padding-left:18px; list-style:disc; }
.todo { color:var(--part); }
.split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; padding-bottom:40px; }
.split > div { display:grid; gap:10px; align-content:start; min-width:0; }
.split ul { display:grid; border-top:1px solid var(--line); } .split li { padding:9px 0; border-bottom:1px solid var(--line); }
.split h2 { font-size:1.7rem; } .split p { color:var(--text-2); }
@media (max-width:760px) { .split { grid-template-columns:minmax(0,1fr); } }
.linkrow { display:flex; flex-wrap:wrap; gap:10px; padding-bottom:56px; }
.cmp-wrap { overflow-x:auto; border:1px solid var(--line); margin-bottom:12px; }
.cmp { width:100%; min-width:760px; border-collapse:collapse; }
.cmp th,.cmp td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:center; font-size:.94rem; }
.cmp th:first-child,.cmp td:first-child { text-align:left; font-weight:400; }
.cmp thead th { font-weight:500; background:var(--panel); }
.cmp tr.shared td { background:rgba(125,176,255,.12); }
.cmp .off { display:none; } .dot { color:var(--accent); }
.cmp-pick { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.cmp-pick label { cursor:pointer; } .cmp-pick input { position:absolute; opacity:0; width:1px; height:1px; }
.cmp-pick span { display:inline-block; padding:6px 11px; border:1px solid var(--line); color:var(--text-2); font-size:.9rem; }
.cmp-pick input:checked + span { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.cmp-pick input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.pkgs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:56px; }
.pkg { display:grid; gap:12px; align-content:start; padding:22px; background:var(--ink); min-width:0; }
.pkg h2 { font-size:1.7rem; } .pkg p { color:var(--text-2); } .pkg ul { display:grid; gap:4px; padding-left:18px; list-style:disc; color:var(--text-2); } .pkg b { color:var(--text); font-weight:500; }
@media (max-width:760px) { .pkgs { grid-template-columns:minmax(0,1fr); } }
.brand img { display:block; height:38px; width:auto; margin-left:-3px; }
.prose .todo,.prose p.todo { color:var(--part); }
