/* Shared look for subpages (docs/pages.md). Tokens are the same as :root in ../index.html: change both together. */
:root{--bg:#0f1720;--panel:#16212c;--line:#273545;--ink:#e8eef4;--mute:#93a4b5;--good:#2fbf71;--ok:#e5c34b;--bad:#e05d5d;--unk:#8a8fa3;--acc:#4aa3ff;
 --hover:#1c2a38;--sel:#203a57;--well:#182532;--err:#ff9b9b;--link:#9cc9ff;--glass:rgba(22,33,44,.92);
 --ink2:#c8d3de;--up:#7fe0a6;--on-acc:#06121f;--acc-hi:#6ab4ff;--line-hi:#3a4d63;--err-line:#7a3a3a;
 /* screen edges kept clear of the notch and home bar (viewport-fit=cover) */
 --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
/* on controls filled with --acc a blue ring would vanish: light ring with a gap */
.btn.p:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mute{color:var(--mute);font-size:12px}
.err{color:var(--err);font-size:12.5px}

/* top bar: back link, title, page actions */
.pbar{position:absolute;z-index:5;left:max(12px,var(--sal));right:max(12px,var(--sar));top:max(12px,var(--sat));display:flex;align-items:center;gap:8px;min-height:50px;padding:7px 8px;background:var(--glass);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(6px)}
.pbar .back{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px 0 6px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13px}
.pbar .back:hover{background:var(--hover)}
.pbar .ttl{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pbar .ttl b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .ttl small{color:var(--mute);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .acts{flex:none;display:flex;gap:6px}

/* buttons, as .pg-btn on the main page */
.btn{background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:0 12px;min-height:34px;font:inherit;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--line-hi);background:var(--hover)}
.btn.p{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600}
.btn.p:hover{background:var(--acc-hi)}
.btn.s{min-height:28px;padding:0 9px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:default}
.ib{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;color:var(--mute);cursor:pointer;padding:0}
.ib:hover{color:var(--ink);background:var(--hover)}
.ib[disabled]{opacity:.35;cursor:default}.ib[disabled]:hover{color:var(--mute);background:none}

/* segmented choice */
.seg{display:flex;gap:2px;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.seg button{flex:1 1 auto;min-width:0;min-height:28px;padding:0 9px;border:0;border-radius:7px;background:none;color:var(--mute);font:500 12.5px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink);background:var(--hover)}
.seg button[aria-pressed=true]{background:var(--sel);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(74,163,255,.55)}

/* panels and dialogs */
.panel{background:var(--glass);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(6px)}
.modal{position:fixed;inset:0;z-index:20;background:rgba(5,10,15,.7);display:flex;align-items:center;justify-content:center;padding:16px}
.modal .in{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:520px;max-width:100%;max-height:100%;overflow:auto;padding:16px}
.modal h2{margin:0 0 4px;font-size:16px}
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:14px 0 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}

@media (max-width:760px){
 .pbar{left:max(8px,var(--sal));right:max(8px,var(--sar));top:max(8px,var(--sat));min-height:46px;padding:5px 6px}
 /* tap targets at least 40 px on phones */
 .btn,.btn.s,.seg button{min-height:40px}.ib{width:40px;height:40px}
 .pbar .back{min-height:40px;min-width:40px;justify-content:center}
 .pbar .back span{display:none}
}