/* Themes: light (default), dark, paper, neuromancer. With no data-theme the system setting picks light or dark.
   Category colours c1-c6 are saturated and differ in hue AND lightness; each has a label colour (cNt).
   Semantic colours: undet (dark red), two (violet), other (grey), uncalled (pale, outlined). */
:root { --fg:#1d1d1f; --muted:#5f5f66; --bg:#fff; --card:#f2f2f5; --line:#c9c9d0; --accent:#0b5fb5; --accent-text:#fff; --warn-bg:rgba(199,119,0,.12); --warn:#8a5300;
  --font:system-ui,sans-serif; --mono:ui-monospace,monospace; --glow:none;
  --c1:#0a5da8; --c1t:#fff; --c2:#f0a000; --c2t:#111; --c3:#0f8a5f; --c3t:#fff; --c4:#c2418c; --c4t:#fff; --c5:#4fb3e8; --c5t:#111; --c6:#e8d44d; --c6t:#111;
  --undet:#8b1111; --undett:#fff; --two:#6a3fb0; --twot:#fff; --other:#6b6b73; --othert:#fff; --uncalled:#e4e4ea; --uncalledt:#333;  --locus:#fff3c4; --gene:#2a7f62; --gene-missing:#b0b0b5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme:dark; --fg:#f2f2f4; --muted:#a8a8b0; --bg:#17171a; --card:#26262b; --line:#3d3d44; --accent:#5aa9ff; --accent-text:#08121f; --warn-bg:rgba(255,170,60,.12); --warn:#ffb866;
  --c1:#4c9be8; --c1t:#08121f; --c2:#f5b335; --c2t:#111; --c3:#2fc596; --c3t:#08121f; --c4:#e46fb5; --c4t:#111; --c5:#8fd0f5; --c5t:#111; --c6:#ece06a; --c6t:#111;
  --undet:#e5484d; --undett:#fff; --two:#a07df0; --twot:#111; --other:#85858d; --othert:#111; --uncalled:#34343a; --uncalledt:#ddd;  --locus:#4a4220; --gene:#5fd0a4; --gene-missing:#5a5a5f; } }
:root[data-theme="dark"] { color-scheme:dark; --fg:#f2f2f4; --muted:#a8a8b0; --bg:#17171a; --card:#26262b; --line:#3d3d44; --accent:#5aa9ff; --accent-text:#08121f; --warn-bg:rgba(255,170,60,.12); --warn:#ffb866;
  --c1:#4c9be8; --c1t:#08121f; --c2:#f5b335; --c2t:#111; --c3:#2fc596; --c3t:#08121f; --c4:#e46fb5; --c4t:#111; --c5:#8fd0f5; --c5t:#111; --c6:#ece06a; --c6t:#111;
  --undet:#e5484d; --undett:#fff; --two:#a07df0; --twot:#111; --other:#85858d; --othert:#111; --uncalled:#34343a; --uncalledt:#ddd;  --locus:#4a4220; --gene:#5fd0a4; --gene-missing:#5a5a5f; }
:root[data-theme="light"] { color-scheme:light; }
/* paper: warm cream stock, serif text, ink-like colours */
:root[data-theme="paper"] { color-scheme:light; --fg:#2b2418; --muted:#6d614c; --bg:#f4ecd8; --card:#eadfc3; --line:#cdbf9b; --accent:#8a3b12; --accent-text:#fff8e8; --warn-bg:rgba(138,59,18,.10); --warn:#8a3b12;
  --font:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --c1:#1f4e79; --c1t:#fff8e8; --c2:#c9781a; --c2t:#201808; --c3:#3b7a3f; --c3t:#fff8e8; --c4:#8e3b6e; --c4t:#fff8e8; --c5:#3a8fa0; --c5t:#10202a; --c6:#c4ab2e; --c6t:#201808;
  --undet:#6e1414; --undett:#fff8e8; --two:#5b3f8a; --twot:#fff8e8; --other:#7d7260; --othert:#fff8e8; --uncalled:#ddd0ae; --uncalledt:#4a3f2a;  --locus:#e6d49a; --gene:#3b7a3f; --gene-missing:#a89e84; }
/* neuromancer: black glass, phosphor green text, neon categories, monospace */
:root[data-theme="neuromancer"] { color-scheme:dark; --fg:#33ff8c; --muted:#1fb866; --bg:#030806; --card:#0a1a12; --line:#146b3e; --accent:#00e5ff; --accent-text:#001418; --warn-bg:rgba(255,43,214,.10); --warn:#ff2bd6;
  --font:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --glow:0 0 6px rgba(51,255,140,.45);
  --c1:#00e5ff; --c1t:#001418; --c2:#ff2bd6; --c2t:#14000f; --c3:#a6ff00; --c3t:#101800; --c4:#ffb000; --c4t:#1a1000; --c5:#7c5cff; --c5t:#fff; --c6:#ff7a45; --c6t:#1a0800;
  --undet:#ff1744; --undett:#fff; --two:#c8a2ff; --twot:#10001a; --other:#4d7a62; --othert:#fff; --uncalled:#0f2a1c; --uncalledt:#33ff8c;  --locus:#2b0f33; --gene:#00e5ff; --gene-missing:#2c5a44; }
* { box-sizing: border-box; }
body { margin:0; padding:0 16px; font:16px/1.55 var(--font); color:var(--fg); background:var(--bg); }
nav { max-width:960px; margin:0 auto; padding:14px 0; display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; border-bottom:1px solid var(--line); }
nav b { font-size:1.1rem; margin-right:auto; } nav a { text-decoration:none; }
main { max-width:960px; margin:0 auto; padding-bottom:24px; }
h1 { font-size:2rem; margin:28px 0 4px; } h2 { font-size:1.35rem; margin:40px 0 8px; } h3 { font-size:1.05rem; margin:22px 0 6px; }
.lede { font-size:1.15rem; color:var(--muted); margin:0 0 18px; }
a { color:var(--accent); } code { font:13.5px var(--mono); background:var(--card); padding:1px 4px; border-radius:4px; }
.cta { display:inline-block; background:var(--accent); color:var(--accent-text); text-decoration:none; padding:10px 18px; border-radius:8px; font-weight:600; margin:6px 8px 6px 0; }
.cta.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.notice { border:1px solid var(--warn); background:var(--warn-bg); border-radius:8px; padding:12px 14px; margin:18px 0; }
.muted { color:var(--muted); font-size:.92rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:16px 0; }
.card { background:var(--card); border-radius:10px; padding:12px 14px; } .card .v { font-size:1.6rem; font-weight:650; } .card .l { color:var(--muted); font-size:.88rem; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; counter-reset:s; padding:0; list-style:none; }
.steps li { background:var(--card); border-radius:10px; padding:12px 14px; counter-increment:s; }
.steps li::before { content:counter(s); display:inline-block; width:1.6em; height:1.6em; line-height:1.6em; text-align:center; border-radius:50%; background:var(--accent); color:var(--accent-text); font-weight:600; margin-right:8px; }
.tablewrap { overflow-x:auto; margin:10px 0; } table { border-collapse:collapse; width:100%; font-size:.93rem; }
th,td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top; } th { font-weight:600; white-space:nowrap; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
.chart { margin:10px 0 4px; } .chart svg { width:100%; height:auto; display:block; } .chart text { fill:var(--fg); font:12px var(--font); } .chart .m { fill:var(--muted); }
.legend { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.85rem; color:var(--muted); margin:4px 0 12px; } .legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; }
.tag { display:inline-block; font-size:.78rem; padding:1px 8px; border-radius:99px; border:1px solid var(--line); color:var(--muted); }
.tag.done { color:var(--c3); border-color:var(--c3); } .tag.plan { color:var(--c2); border-color:var(--c2); }
[data-theme="paper"] .tag.done { color:#2d6a31; border-color:#2d6a31; } [data-theme="paper"] .tag.plan { color:#9a5a0e; border-color:#9a5a0e; }
.controls { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin:12px 0; } .controls label { font-size:.92rem; }
input,select,button { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
button { cursor:pointer; } tr.click { cursor:pointer; } tr.click:hover { background:var(--card); }
footer { max-width:960px; margin:40px auto 24px; border-top:1px solid var(--line); padding-top:14px; }
h1,h2,h3 { text-shadow:var(--glow); }
[data-theme="neuromancer"] h1::before { content:"> "; } [data-theme="neuromancer"] a { text-decoration:underline dotted; }
[data-theme="neuromancer"] .card, [data-theme="neuromancer"] .notice, [data-theme="neuromancer"] .steps li { border:1px solid var(--line); }
[data-theme="neuromancer"] body { background-image:repeating-linear-gradient(0deg,rgba(51,255,140,.035) 0 1px,transparent 1px 3px); }
[data-theme="paper"] h1, [data-theme="paper"] h2 { font-weight:600; letter-spacing:.01em; }
#theme { margin-left:4px; font-size:.85rem; padding:3px 6px; }
.locus-card { margin:10px 0; padding:12px 14px; } .locus-card svg { width:100%; height:auto; display:block; } .locus-card text { fill:var(--fg); font-family:var(--font); } .locus-card .m { fill:var(--muted); }
.cards-list { display:block; }