/* Component kit, draft 3. Every screen is a composition of these parts.
   Colour doctrine (draft 5): ink and greys do the work. Each palette's one highlight marks what you can act on
   (buttons, the active tab and pill, your votes, links, focus). Status has its own fixed colours: green accepted
   and likely, amber disputed, red ruled out, grey still possible. The gradient is the brand mark only.
   Tokens come from palettes.css (generated from tokens.json). Light is Ubuntu; dark is kami OS mono. */

@font-face{font-family:"Ubuntu";font-weight:300;src:url(fonts/ubuntu-latin-300-normal.woff2)}
@font-face{font-family:"Ubuntu";font-weight:400;src:url(fonts/ubuntu-latin-400-normal.woff2)}
@font-face{font-family:"Ubuntu";font-weight:400;font-style:italic;src:url(fonts/ubuntu-latin-400-italic.woff2)}
@font-face{font-family:"Ubuntu";font-weight:500;src:url(fonts/ubuntu-latin-500-normal.woff2)}
@font-face{font-family:"Ubuntu";font-weight:700;src:url(fonts/ubuntu-latin-700-normal.woff2)}
@font-face{font-family:"JetBrains Mono";font-weight:400;src:url(fonts/jetbrains-mono-latin-400-normal.woff2)}
@font-face{font-family:"JetBrains Mono";font-weight:500;src:url(fonts/jetbrains-mono-latin-500-normal.woff2)}
@font-face{font-family:"JetBrains Mono";font-weight:700;src:url(fonts/jetbrains-mono-latin-700-normal.woff2)}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:400;src:url(fonts/atkinson-hyperlegible-next-latin-400-normal.woff2)}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:600;src:url(fonts/atkinson-hyperlegible-next-latin-600-normal.woff2)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
[data-mode=dark] body{padding-bottom:30px;font-size:14px;background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:16px 16px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{flex:none}
::selection{background:color-mix(in srgb,var(--hl) 30%,var(--bg))}
:root{--r:14px;--r-sm:9px}
[data-mode=dark]{--r:10px;--r-sm:6px}

/* ---------- type ---------- */
.lab{font:500 11.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.mono{font-family:var(--f-mono)}
.dim{color:var(--dim)} .mute{color:var(--mute)} .hlt{color:var(--hl)} .okt{color:var(--accepted-text)}
.xs{font-size:12.5px} .sm{font-size:13.5px}
.one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h1{font:700 44px/1.06 var(--f-display);letter-spacing:-.025em}
.h2{font:700 24px/1.2 var(--f-display);letter-spacing:-.015em}
[data-mode=dark] .h1{font:500 30px/1.15 var(--f-mono);letter-spacing:-.02em}
[data-mode=dark] .h2{font:500 13px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.lede{font:400 18px/1.55 var(--f-prose);color:var(--ink);max-width:64ch}
[data-mode=dark] .lede{font-size:16px}
.prose p{font:400 16.5px/1.65 var(--f-prose);margin:0 0 12px;max-width:66ch}
.idt{font:500 12.5px/1 var(--f-mono);letter-spacing:.03em;color:var(--dim);white-space:nowrap}

/* ---------- layout ---------- */
.wrap{max-width:1312px;margin:0 auto;padding:0 32px}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-width:0}
.sp{flex:1}
.g2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px}
.rail{display:flex;flex-direction:column;gap:20px}
.card{background:var(--raised);border:1px solid var(--line);border-radius:var(--r)}
[data-mode=light] .card{box-shadow:0 1px 2px rgb(60 40 20 / .04),0 6px 18px rgb(60 40 20 / .05)}
.pad{padding:18px 20px}
.sect>.lab{display:block;margin-bottom:12px}

/* ---------- frame ---------- */
.top{height:60px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px;padding:0 32px;background:var(--bg)}
.brand{display:flex;align-items:center;gap:10px;font:700 16px/1 var(--f-display);white-space:nowrap;letter-spacing:-.01em}
[data-mode=dark] .brand{font:500 12.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.bmark{width:24px;height:24px;flex:none;color:var(--hl);display:block}
.search{display:flex;align-items:center;gap:9px;height:38px;width:340px;padding:0 12px 0 14px;border:1px solid var(--line);border-radius:19px;background:var(--raised);color:var(--mute);font-size:14px;white-space:nowrap}
[data-mode=dark] .search{border-radius:var(--r-sm)}
.search span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
kbd{font:500 11px/1 var(--f-mono);color:var(--dim);border:1px solid var(--line);border-radius:4px;padding:3px 5px;background:var(--surface)}
.nav{display:flex;gap:6px}
.nav a{display:flex;align-items:center;height:36px;padding:0 12px;border-radius:18px;font:500 15px/1 var(--f-ui);color:var(--dim);white-space:nowrap}
.nav a.on{color:var(--ink);background:var(--surface)}
[data-mode=dark] .nav a{font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-sm)}
[data-mode=dark] .nav a.on{color:var(--hl);background:color-mix(in srgb,var(--hl) 10%,transparent)}
.ib{width:36px;height:36px;display:grid;place-items:center;border-radius:18px;color:var(--dim)}
.ib svg,.ic{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid var(--line);border-radius:19px;background:var(--raised);color:var(--ink);font:500 14px/1 var(--f-ui);white-space:nowrap}
.btn.pri{background:var(--hl);border-color:var(--hl);color:var(--on-hl);font-weight:700}
.btn.q{border-color:transparent;background:transparent;color:var(--dim)}
.btn .ic{width:15px;height:15px}
.btn.sm{height:30px;padding:0 12px;font-size:13px}
[data-mode=dark] .btn{font:500 12px/1 var(--f-mono);border-radius:var(--r-sm)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs a{height:44px;display:flex;align-items:center;gap:7px;padding:0 14px;font:500 15px/1 var(--f-ui);color:var(--dim);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a.on{color:var(--ink);border-color:var(--hl)}
.tabs a em{font:500 12px/1 var(--f-mono);font-style:normal;color:var(--mute)}
[data-mode=dark] .tabs a{font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.pills{display:flex;gap:6px;align-items:center}
.pills a{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:18px;font:500 14px/1 var(--f-ui);color:var(--dim);white-space:nowrap;border:1px solid transparent}
.pills a.on{background:var(--ink);color:var(--bg)}
.pills a.on{background:var(--hl);color:var(--on-hl);font-weight:700}
[data-mode=dark] .pills a{font:500 12px/1 var(--f-mono);border-radius:var(--r-sm)}
[data-mode=dark] .pills a.on{background:transparent;border-color:var(--hl);color:var(--hl)}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font:500 10.5px/1 var(--f-mono);color:var(--ink);flex:none}
.av.lg{width:96px;height:96px;font:700 30px/1 var(--f-display)}
.av.ai{border-radius:7px;border-style:dashed;color:var(--dim)}
.ai{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border:1px dashed var(--mute);border-radius:10px;font:500 11px/1 var(--f-mono);color:var(--dim);white-space:nowrap}
.keys{position:absolute;left:0;right:0;bottom:0;height:30px;display:flex;align-items:center;gap:22px;padding:0 32px;border-top:1px solid var(--line);background:var(--bg);font:400 11.5px/1 var(--f-mono);color:var(--mute)}
.keys b{color:var(--dim);font-weight:500}

/* ---------- status: shape + intensity of one hue ---------- */
.sg{display:inline-block;width:15px;height:15px;vertical-align:-3px;flex:none}
.chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px 0 9px;border-radius:14px;border:1.5px solid var(--line);font:500 13.5px/1 var(--f-ui);color:var(--dim);white-space:nowrap}
[data-mode=dark] .chip{font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-sm);height:26px}
.chip.s-accepted{background:var(--accepted-text);border-color:var(--accepted-text);color:var(--on-accepted);font-weight:700}
.chip.s-likely{border-color:var(--accepted);color:var(--accepted-text);font-weight:700}
.chip.s-disputed{border-color:var(--disputed);color:var(--disputed-text);font-weight:700}
.chip.s-ruled{background:var(--ruled-out-text);border-color:var(--ruled-out-text);color:var(--on-ruled-out);font-weight:700}
.chip.plain{border:0;background:none;padding:0;height:auto}
.chip.plain.s-accepted,.chip.plain.s-likely{color:var(--accepted-text)} .chip.plain.s-disputed{color:var(--disputed-text)} .chip.plain.s-ruled{color:var(--ruled-out-text)}

/* settlement bar: one question; each answer's share of the evidence */
.settle{display:flex;gap:3px;height:40px;border-radius:12px;overflow:hidden}
[data-mode=dark] .settle{border-radius:6px}
.settle i{display:flex;align-items:center;gap:6px;padding:0 12px;min-width:6px;font:500 13px/1 var(--f-ui);font-style:normal;white-space:nowrap;overflow:hidden;color:var(--ink);background:color-mix(in srgb,var(--ink) 13%,var(--raised))}
.settle i b{font:700 13px/1 var(--f-mono)}
.settle i.s-likely,.settle i.s-accepted{background:var(--accepted-text);color:var(--on-accepted);font-weight:700}
.settle.sm i.s-likely,.settle.sm i.s-accepted{background:var(--accepted)}
.settle i.s-disputed{background:var(--disputed);color:var(--on-disputed);font-weight:700}
.settle i.s-ruled{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ruled-out) 30%,transparent) 0 3px,transparent 3px 7px);color:var(--ruled-out-text)}
[data-mode=dark] .settle i{font:500 11.5px/1 var(--f-mono)}
.settle.sm{height:12px;border-radius:6px;gap:2px} .settle.sm i{padding:0}
.settle.none{background:repeating-linear-gradient(135deg,var(--line) 0 4px,transparent 4px 9px);border:1px solid var(--line)}

/* votes: up and down, like Reddit. Mysteries, questions, sources, methods and comments only */
.vote{display:flex;flex-direction:column;align-items:center;gap:1px;width:44px;flex:none}
.vote a{width:34px;height:28px;display:grid;place-items:center;border-radius:9px;color:var(--mute)}
.vote a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vote b{font:700 15px/1.2 var(--f-mono);color:var(--ink)}
.vote.up a.u,.vote.down a.d{color:var(--hl)} .vote.up a.u svg,.vote.down a.d svg{stroke-width:2.9} .vote.up b,.vote.down b{color:var(--hl)}
.vote.h{flex-direction:row;width:auto;gap:2px}
.vote.h a{width:26px;height:26px} .vote.h a svg{width:16px;height:16px} .vote.h b{font-size:13px;min-width:24px;text-align:center}

/* the answer box: what a question's status means, in words */
.abox{--sc:var(--accepted);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 22px;border-radius:var(--r);border:2px solid var(--sc);background:color-mix(in srgb,var(--sc) 7%,var(--raised))}
.abox.s-disputed{--sc:var(--disputed)} .abox.s-ruled{--sc:var(--ruled-out)} .abox.s-open{--sc:var(--line)}
.abox .k{font:700 13.5px/1.2 var(--f-ui);color:var(--st,var(--accepted-text));text-transform:none}
.abox.s-disputed{--st:var(--disputed-text)} .abox.s-ruled{--st:var(--ruled-out-text)} .abox.s-open{--st:var(--dim)}
.abox .a{font:700 24px/1.2 var(--f-display);letter-spacing:-.015em;margin-top:3px}
.abox .w{font-size:14px;color:var(--dim);margin-top:4px}
.abox .big{width:46px;height:46px}
[data-mode=dark] .abox .k{font:500 11.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
[data-mode=dark] .abox .a{font:500 19px/1.3 var(--f-mono)}

/* feed and list rows */
.frow{display:grid;grid-template-columns:44px minmax(0,1fr) 256px;gap:18px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.frow .q{display:block;font:700 18px/1.3 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
[data-mode=dark] .frow .q{font:500 15px/1.35 var(--f-mono);letter-spacing:0}
.meta{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden}
.meta b{color:var(--ink);font-weight:500}
.meta .ic{width:15px;height:15px}
.frow .rt{display:flex;flex-direction:column;gap:7px}
.frow .st{font:500 13px/1.2 var(--f-ui);display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden}
.frow .st b{font-weight:700}
[data-mode=dark] .frow .st{font:500 12px/1.2 var(--f-mono)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tile{padding:16px 18px}
.tile .k{display:flex;align-items:center;gap:8px;font:500 14px/1.2 var(--f-ui)}
.tile .n{font:700 40px/1 var(--f-display);margin-top:10px;letter-spacing:-.02em}
[data-mode=dark] .tile .n{font:500 30px/1 var(--f-mono)}
.tile .ex{font-size:13.5px;color:var(--dim);margin-top:6px;line-height:1.4}
.tile .go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:700 13.5px/1 var(--f-ui);color:var(--hl);white-space:nowrap}
.tile .go .ic{width:15px;height:15px}

/* left rail */
.lrail{padding:20px 16px;border-right:1px solid var(--line)}
.lrail a{display:flex;align-items:center;gap:11px;height:38px;padding:0 12px;border-radius:19px;font-size:15px;color:var(--dim);white-space:nowrap}
[data-mode=dark] .lrail a{border-radius:var(--r-sm);font-size:13px}
.lrail a.on{background:var(--surface);color:var(--ink);font-weight:500}
.lrail .lab{display:block;margin:20px 12px 6px}
.lrail a em{margin-left:auto;font:400 12px/1 var(--f-mono);font-style:normal;color:var(--mute)}

/* ID marks: monochrome, they inherit the text colour */
.idm{display:block;color:var(--ink)}
.idm[data-key],.cpy{cursor:copy}
.copied{position:fixed;z-index:99;padding:5px 9px;border-radius:6px;background:var(--ink);color:var(--bg);font:500 12px/1 var(--f-ui);pointer-events:none;transform:translate(-50%,-130%);white-space:nowrap}

/* golden record card: fixed anatomy, gradient foil border */
.gcard{width:256px;border-radius:16px;border:1px solid var(--line);background:var(--raised);overflow:hidden;position:relative}
[data-mode=light] .gcard{box-shadow:0 1px 2px rgb(60 40 20 / .05),0 10px 26px rgb(60 40 20 / .08)}
[data-mode=dark] .gcard{border-radius:10px}
.gcard .band{display:flex;align-items:center;gap:10px;padding:12px 14px 10px}
.gcard .band b{display:block;font:700 16px/1.15 var(--f-display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-mode=dark] .gcard .band b{font:500 13px/1.2 var(--f-mono)}
.gcard .band small{display:block;font:500 11.5px/1 var(--f-mono);color:var(--dim);margin-top:4px;letter-spacing:.03em}
.gcard .pic{height:150px;background:var(--surface);overflow:hidden;position:relative}
.gcard .pic img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.gcard .pic .ph{width:100%;height:100%;display:grid;place-items:center;color:var(--ink)}
.gcard .stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.gcard .stats div{padding:9px 2px;text-align:center;border-left:1px solid var(--line)}
.gcard .stats div:first-child{border-left:0}
.gcard .stats b{display:block;font:700 17px/1 var(--f-display)} [data-mode=dark] .gcard .stats b{font:500 14px/1 var(--f-mono)}
.gcard .stats small{display:block;font-size:11px;color:var(--dim);margin-top:4px}
.gcard .stl{padding:11px 14px 4px}
.gcard .stl .w{display:flex;align-items:center;gap:6px;font:500 13px/1.25 var(--f-ui);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-mode=dark] .gcard .stl .w{font:500 11.5px/1.25 var(--f-mono)}
.gcard .foot{display:flex;justify-content:space-between;gap:8px;padding:9px 14px 11px;margin-top:8px;border-top:1px solid var(--line);font:400 11px/1.3 var(--f-mono);color:var(--mute);white-space:nowrap}
.gcard .foot span{overflow:hidden;text-overflow:ellipsis}

/* comments, Reddit-style */
.cm{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding-top:16px}
.cm .who{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dim);white-space:nowrap}
.cm .who b{color:var(--ink);font-weight:500}
.cm .body{font:400 15.5px/1.55 var(--f-prose);margin:5px 0 6px;max-width:72ch}
[data-mode=dark] .cm .body{font-size:14.5px}
.cm .acts{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--dim)}
.cm .acts a{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.cm .kids{border-left:2px solid var(--line);padding-left:16px;margin-top:4px}
.compose{display:flex;align-items:center;gap:10px;height:48px;padding:0 8px 0 16px;border:1px solid var(--line);border-radius:24px;background:var(--raised);color:var(--mute);font-size:14.5px}
[data-mode=dark] .compose{border-radius:var(--r-sm)}

/* answers list (question page) */
.ans{display:grid;grid-template-columns:minmax(0,1fr) 190px 170px;gap:24px;align-items:center;padding:16px 20px;border-top:1px solid var(--line)}
.ans:first-child{border-top:0}
.ans .an{display:flex;align-items:center;gap:10px;font:700 17px/1.25 var(--f-display)}
[data-mode=dark] .ans .an{font:500 14px/1.3 var(--f-mono)}
.ans .ad{font-size:14px;color:var(--dim);margin-top:5px;line-height:1.45}
.ans.lead{background:color-mix(in srgb,var(--accepted) 6%,var(--raised))}
.ans.out .an{color:var(--mute)} .ans.out .an span:not(.tid){text-decoration:line-through;text-decoration-thickness:1.5px}
.meter .mh{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--dim);margin-bottom:7px;white-space:nowrap}
.meter .mh b{font-weight:700;color:var(--ink)}
.meter .mb{display:flex;gap:2px;height:9px}
.meter .mb i{flex:1;border-radius:2px;background:var(--line)}
.meter .mb i.f{background:var(--ink)} .meter .mb i.a{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.meter .rv{display:flex;gap:6px;align-items:center}
.meter .rv i{width:20px;height:20px;border-radius:50%;border:1.5px dashed var(--mute)}
.meter .rv i.ok{border:0;background:var(--accepted)}

/* change requests */
.crstate{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:16px;font:700 14px/1 var(--f-ui);color:var(--on-accepted);background:var(--accepted-text);white-space:nowrap}
[data-mode=dark] .crstate{font:500 12px/1 var(--f-mono);border-radius:var(--r-sm)}
.checks{overflow:hidden}
.checks>div{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 16px;border-top:1px solid var(--line);font-size:14.5px}
.checks>div:first-child{border-top:0}
.tl2{list-style:none;position:relative;margin-left:13px;border-left:2px solid var(--line)}
.tl2 li{position:relative;padding:0 0 20px 26px}
.tl2 li>.dot{position:absolute;left:-14px;top:-2px;width:26px;height:26px;border-radius:50%;background:var(--bg);border:2px solid var(--line);display:grid;place-items:center}
.tl2 li>.dot svg{width:13px;height:13px}
.tl2 .ev{font-size:15px} .tl2 .ev b{font-weight:500}
.tl2 .when{font:400 12px/1 var(--f-mono);color:var(--mute);margin-left:6px}
.tl2 .box{margin-top:9px;padding:12px 16px;font-size:15px;line-height:1.5}
.diff{font:400 13px/1.7 var(--f-mono);overflow:hidden}
.diff>div{padding:0 16px;white-space:pre}
.diff .h{background:var(--surface);color:var(--dim);padding:7px 16px;border-bottom:1px solid var(--line)}
.diff .m{background:color-mix(in srgb,var(--ruled-out) 9%,transparent)} .diff .p{background:color-mix(in srgb,var(--accepted) 10%,transparent)}
.mergebox{display:flex;gap:16px;align-items:center;padding:16px 18px;border:2px solid var(--accepted);border-radius:var(--r);background:var(--raised)}

/* people */
.ppl{display:flex;flex-direction:column;gap:10px}
.ppl>div{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px}
.ppl small{font:400 11.5px/1 var(--f-mono);color:var(--mute);white-space:nowrap}

/* profile: calendar, depth, track record */
.cal text{font:400 10px var(--f-mono);fill:var(--mute)}
.depth{display:grid;grid-template-columns:210px minmax(0,1fr) 48px;gap:14px;align-items:center;padding:7px 0}
.depth .stk{display:flex;height:20px;gap:2px;border-radius:5px;overflow:hidden}
.depth .stk i{display:flex;align-items:center;padding-left:7px;font:700 11px/1 var(--f-mono);font-style:normal;color:var(--bg);white-space:nowrap;overflow:hidden}
.beads{display:flex;flex-wrap:wrap;gap:5px}
.beads .sg{width:16px;height:16px}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:left;padding:0 12px;height:36px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}

/* catalog key: no dashes, so a double-click or one click takes the whole key; the prefix is bold ink,
   the body is two groups set apart by spacing only (nothing extra is copied) */
.kid{font:400 12.5px/1 var(--f-mono);color:var(--dim);white-space:nowrap;user-select:all;cursor:text}
.kid b{font-weight:700;color:var(--ink);letter-spacing:.02em}
.kid span{margin-left:.32em} .kid span+span{margin-left:.24em}
.kidc{display:inline-flex;align-items:center;gap:1px;white-space:nowrap}
.cpy{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;color:var(--mute);vertical-align:middle}
.cpy .ic{width:14px;height:14px}
.ib.on{color:var(--hl);background:color-mix(in srgb,var(--hl) 12%,transparent)}
.gcard .band .kid b{display:inline;font:inherit;font-weight:700;color:var(--ink)}

/* artifact card: one component, a preview per media kind */
.acard{overflow:hidden;display:flex;flex-direction:column}
.acard .pv{position:relative;height:150px;background:var(--surface);overflow:hidden;border-bottom:1px solid var(--line)}
.acard .pv img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.acard .pv svg{display:block;width:100%;height:100%}
.acard .play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--raised);display:grid;place-items:center;box-shadow:0 2px 10px rgb(0 0 0 / .25)}
.acard .play svg{width:18px;height:18px;fill:var(--ink);stroke:none;margin-left:3px}
.acard .play.sm{left:auto;right:12px;top:12px;margin:0;width:34px;height:34px}
.acard .play.sm svg{width:13px;height:13px}
.acard .dur{position:absolute;right:10px;bottom:10px;font:500 11.5px/1 var(--f-mono);padding:4px 7px;border-radius:6px;background:var(--raised);color:var(--ink)}
.acard.k-video .pv img{filter:brightness(.55)}
.acard .tx{padding:14px 14px 0;font:400 12.5px/1.75 var(--f-mono);color:var(--ink);white-space:nowrap;overflow:hidden}
.acard .tx em{display:inline-block;width:20px;font-style:normal;color:var(--mute)}
.acard .lt{height:100%;padding:16px 18px;background:var(--raised);font:italic 400 15px/1.5 var(--f-prose);color:var(--ink)}
.acard .lt q{quotes:"“" "”"}
.acard .dc{margin:12px 18px;padding:10px 12px;height:calc(100% - 24px);background:var(--raised);border:1px solid var(--line);border-radius:4px;font-size:12px}
.acard .dc b{display:block;font-weight:700;margin-bottom:5px}
.acard .dc div{display:flex;justify-content:space-between;padding:2px 0;border-top:1px solid var(--line);font-family:var(--f-mono);color:var(--dim)}
.acard .dt{margin:14px;border:1px solid var(--line);border-radius:6px;overflow:hidden;font:400 12px/1 var(--f-mono);background:var(--raised)}
.acard .dt div{display:grid;grid-template-columns:1fr 1.4fr .8fr;padding:7px 10px;border-top:1px solid var(--line)}
.acard .dt .h{border-top:0;background:var(--surface);color:var(--dim)}
.acard .bd{padding:12px 14px 14px}
.acard .kd{display:flex;align-items:center;gap:6px;font:500 12px/1 var(--f-ui);color:var(--dim);white-space:nowrap}
.acard .kd .ic{width:14px;height:14px}
.acard .kd .st{font:400 11px/1 var(--f-mono);color:var(--mute)}
.acard .tt{font:700 15px/1.3 var(--f-display);margin-top:8px}
[data-mode=dark] .acard .tt{font:500 13px/1.35 var(--f-mono)}
.acard .mt{font-size:13px;color:var(--dim);margin-top:3px;line-height:1.4}
.agrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rail .gcard{width:auto}
.acard .poster{width:100%;height:100%;background:radial-gradient(circle at 50% 60%,#4a4440,#141210)}

/* ---- draft 5: the article ---- */
.art{display:grid;grid-template-columns:212px minmax(0,1fr);gap:44px;padding-top:28px}
.toc{position:sticky;top:20px;align-self:start;font-size:14px}
.toc .lab{display:block;margin:0 0 10px}
.toc a{display:grid;grid-template-columns:22px minmax(0,1fr);height:32px;align-items:center;color:var(--dim);border-left:2px solid var(--line);padding-left:12px;white-space:nowrap}
.toc a em{font:400 11.5px/1 var(--f-mono);font-style:normal;color:var(--mute)}
.toc a.sub{padding-left:34px;height:28px;font-size:13px;grid-template-columns:minmax(0,1fr)}
.toc a.on{color:var(--ink);font-weight:500;border-color:var(--hl)}
.toc .tools{margin-top:22px;display:flex;flex-direction:column;gap:2px}
.toc .tools a{border:0;padding-left:0;display:flex;gap:9px;height:30px}
.toc .tools .ic{width:15px;height:15px}
.ahead{border-bottom:1px solid var(--line);padding-bottom:14px}
.ahead .ttl{display:flex;align-items:flex-end;gap:16px}
.ahead .acts{margin-left:auto;display:flex;gap:10px;align-items:center}
.ahead .tabs{border-bottom:0;margin-top:14px}
.abody{padding-top:22px}
.abody .prose p{max-width:76ch}
.abody h2{font:700 25px/1.2 var(--f-display);letter-spacing:-.015em;margin:38px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px}
[data-mode=dark] .abody h2{font:500 17px/1.3 var(--f-mono);letter-spacing:0}
.abody h2 .edit{margin-left:auto;font:500 12.5px/1 var(--f-ui);color:var(--dim);display:inline-flex;gap:6px;align-items:center}
.abody h2 .edit .ic{width:13px;height:13px}
.abody h3{font:700 18px/1.3 var(--f-display);margin:22px 0 8px}
[data-mode=dark] .abody h3{font:500 14.5px/1.3 var(--f-mono)}
.abody .lead p:first-child{font-size:17.5px}
.ent{color:var(--hl);font-weight:500}
.cite{font:500 11px/0 var(--f-mono);vertical-align:super;color:var(--hl);margin-left:1px;white-space:nowrap}
.gen{border-bottom:1.5px dotted var(--mute);cursor:help}
.ibox{float:right;width:316px;margin:0 0 20px 32px;font-size:14px;overflow:hidden}
.ibox .it{padding:14px 16px 12px;font:700 18px/1.25 var(--f-display);text-align:center;border-bottom:1px solid var(--line)}
[data-mode=dark] .ibox .it{font:500 14px/1.3 var(--f-mono)}
.ibox img{display:block;width:100%;height:220px;object-fit:cover;object-position:center 30%}
.ibox figcaption{font-size:12.5px;color:var(--dim);padding:7px 16px 10px;border-bottom:1px solid var(--line);line-height:1.4}
.ibox dl{margin:0;padding:6px 16px 10px;display:grid;grid-template-columns:104px minmax(0,1fr);gap:0 12px}
.ibox dt{font-weight:700;padding:7px 0;border-top:1px solid var(--line);line-height:1.35}
.ibox dd{margin:0;padding:7px 0;border-top:1px solid var(--line);line-height:1.35}
.ibox dt:first-of-type,.ibox dd:first-of-type{border-top:0}
.ibox .ik{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border-top:1px solid var(--line)}
.ibox .ik small{display:block;font-size:12px;color:var(--dim);margin-top:4px;line-height:1.35}
.ibox .noimg{height:120px;display:grid;place-items:center;background:var(--surface);border-bottom:1px solid var(--line)}
.wdg{margin:16px 0 8px;overflow:hidden}
.wdg .wh{display:flex;align-items:center;gap:9px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--dim);white-space:nowrap}
.wdg .wh b{color:var(--ink);font-weight:700;font-size:14px}
.wdg .wh .live{display:inline-flex;align-items:center;gap:6px}
.wdg .wh .live i{width:7px;height:7px;border-radius:50%;background:var(--hl)}
.wdg .wh a{color:var(--hl);font-weight:500;display:inline-flex;align-items:center;gap:4px}
.wdg .wh .ic{width:14px;height:14px}
.wdg .wb{padding:16px}
.wdg .wb.flush{padding:0}
.wdg .tbl td,.wdg .tbl th{padding-left:16px}
.agal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.agal figure{margin:0} .agal img{width:100%;height:112px;object-fit:cover;border-radius:8px;display:block}
.agal figcaption{font-size:12.5px;line-height:1.35;margin-top:6px} .agal figcaption span{color:var(--dim)}
.refs{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.5}
.refs li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:8px 0;border-top:1px solid var(--line);align-items:baseline}
.refs li:first-child{border-top:0}
.refs .rn{font:500 12.5px/1.5 var(--f-mono);color:var(--dim)}
.refs .rm{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--dim);white-space:nowrap}
.refs .rm .kid{font-size:11.5px}
.seealso{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.seealso a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;font-size:14px;line-height:1.35}
.seealso b{color:var(--hl);font-weight:500;display:block}
.seealso span{color:var(--dim);font-size:13px}
.afoot{display:flex;align-items:center;gap:14px;margin-top:34px;padding:14px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--dim)}
.afoot .ic{width:16px;height:16px}
.illus{display:flex;align-items:center;gap:10px;padding:10px 16px;margin-top:18px;font-size:14px;color:var(--dim);background:var(--surface);border-radius:var(--r-sm)}
.illus b{color:var(--ink)}
.wq .r{display:grid;grid-template-columns:44px minmax(0,1fr) 250px;gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.wq .r:first-child{border-top:0}
.wq .qt{font:700 16px/1.3 var(--f-display)} [data-mode=dark] .wq .qt{font:500 13.5px/1.35 var(--f-mono)}
.wq .rt{display:flex;flex-direction:column;gap:6px}
.wq .st{display:flex;align-items:center;gap:7px;font-size:13.5px;white-space:nowrap;overflow:hidden}
.wit{display:grid;grid-template-columns:96px 150px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:10px 16px;border-top:1px solid var(--line);font-size:14px;line-height:1.45}
.wit:first-child{border-top:0}
.wit .tm{font:500 12.5px/1.45 var(--f-mono);color:var(--dim);white-space:nowrap}
.wit b{font-weight:700}
.empty{display:flex;align-items:center;gap:16px;padding:22px 18px;color:var(--dim);font-size:14px}
.empty .sp{flex:1}
.cite.cn{color:var(--dim);font-style:italic}
.ifig{margin:0}
.iim{position:relative;height:210px;overflow:hidden;border-bottom:1px solid var(--line)}
.ibox .iim img{height:210px}
.iim svg{display:block;width:100%;height:100%}
.imk{position:absolute;right:10px;bottom:10px;padding:5px;border-radius:8px;background:var(--raised);box-shadow:0 1px 6px rgb(0 0 0 / .22);line-height:0}
.imk.bl{right:auto;left:10px;padding:4px;border-radius:7px}
.ibox .ik{gap:10px}
.ibox .ik .lab{margin:0}
.segm{display:inline-flex;border:1px solid var(--line);border-radius:19px;overflow:hidden;background:var(--raised)}
.segm a{display:flex;align-items:center;gap:7px;height:36px;padding:0 15px;font:500 14px/1 var(--f-ui);color:var(--dim);white-space:nowrap}
.segm a .ic{width:15px;height:15px}
.segm a.on{background:var(--hl);color:var(--on-hl);font-weight:700}
[data-mode=dark] .segm{border-radius:var(--r-sm)}
.role{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--line);border-radius:6px;font:500 11.5px/1 var(--f-ui);color:var(--dim);white-space:nowrap}
.role.r-editor{border-color:var(--ink);color:var(--ink);font-weight:700}
.role.r-curator{color:var(--ink)}
.tgl{display:inline-block;position:relative;width:38px;height:22px;border-radius:11px;background:var(--line);flex:none;vertical-align:middle}
.tgl:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--raised);box-shadow:0 1px 2px rgb(0 0 0 / .25)}
.tgl.on{background:var(--hl)} .tgl.on:after{left:19px;background:var(--on-hl)}
.step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--raised);height:30px;font:500 13px/1 var(--f-mono)}
.step a{width:26px;display:grid;place-items:center;color:var(--dim)} .step b{min-width:20px;text-align:center;font-weight:700}
.dd{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 10px;border:1px solid var(--line);border-radius:8px;background:var(--raised);font-size:13.5px;white-space:nowrap}
.dd .ic{width:14px;height:14px;color:var(--dim)}
.yes{color:var(--ink)} .yes .ic{width:17px;height:17px;stroke-width:2.4}

/* settings pages */
.stg{display:grid;grid-template-columns:232px minmax(0,1fr);gap:40px;padding-top:30px}
.snav a{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-radius:19px;font-size:15px;color:var(--dim)}
[data-mode=dark] .snav a{border-radius:var(--r-sm);font-size:13px}
.snav a.on{background:var(--surface);color:var(--ink);font-weight:500}
.snav .lab{display:block;margin:22px 12px 6px}
/* prototype: one page serves both modes */
.i-l,.i-d{display:contents} [data-mode=light] .i-d,[data-mode=dark] .i-l{display:none}
[data-mode=light] .keys{display:none}
/* the answers meter: one segment per answer, sorted by status, height = strength of the evidence (draft 8) */
.meter2{display:flex;align-items:flex-end;gap:2px;height:46px;padding:0 0 6px;border-bottom:1px solid var(--line)}
.meter2 i{flex:1 1 0;min-width:3px;max-width:12px;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.meter2 .m-accepted,.meter2 .m-likely{background:var(--accepted)}
.meter2 .m-disputed{background:var(--disputed)}
.meter2 .m-ruled{background:var(--ruled-out);opacity:.75}
.avimg{display:block;border-radius:50%;flex:none;object-fit:cover}