:root {
  color-scheme: light dark;
  --bg: #f6f7f9; --panel: #fff; --line: #dde1e6; --ink: #1a1d21; --dim: #667085;
  --accent: #2563eb; --ok: #16803c; --bad: #b42318; --warn: #b54708; --mut: #98a2b3;
  font-family: system-ui, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #101318; --panel: #181c23; --line: #2a303a; --ink: #e6e9ee; --dim: #9aa4b2;
          --accent: #60a5fa; --ok: #4ade80; --bad: #f87171; --warn: #fbbf24; --mut: #6b7280; }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

#topbar { display: flex; align-items: center; gap: 1rem; padding: .55rem .9rem;
  background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.brand { font-size: 1.05rem; letter-spacing: .04em; }
.brand b { color: var(--accent); }
#devicebar { flex: 1; font-size: .82rem; color: var(--dim); display: flex; gap: .9rem; flex-wrap: wrap; }
#devicebar b { color: var(--ink); font-weight: 600; }
#devicebar .cd { color: var(--accent); font-variant-numeric: tabular-nums; }
#keybtn { background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--dim);
  padding: .3rem .6rem; cursor: pointer; }
#keybtn.set { color: var(--ok); border-color: var(--ok); }

#layout { flex: 1; display: flex; min-height: 0; }
#sidebar { width: 21rem; flex: none; border-right: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column; min-height: 0; }
#search { margin: .6rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink); font-size: .85rem; }
#catalog { overflow-y: auto; flex: 1; padding-bottom: 2rem; }
.nsgroup summary { cursor: pointer; padding: .45rem .8rem; font-weight: 600; font-size: .84rem;
  list-style: none; display: flex; align-items: center; gap: .5rem; user-select: none; }
.nsgroup summary::before { content: "▸"; color: var(--mut); transition: transform .12s; }
.nsgroup[open] summary::before { transform: rotate(90deg); }
.nsgroup summary .cnt { margin-left: auto; color: var(--mut); font-weight: 400; font-size: .75rem; }
.mrow { display: flex; align-items: center; gap: .5rem; padding: .28rem .8rem .28rem 1.6rem;
  font-size: .82rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow:hover { background: var(--bg); }
.mrow.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; }
.dot.works { background: var(--ok); }
.dot.broken, .dot.fw-blocked { background: var(--bad); }
.dot.fw-blocked { background: var(--warn); }
.dot.not-on-epaper { background: transparent; border: 1px solid var(--mut); }
.dot.untested { background: var(--mut); opacity: .45; }
.dot.callable { background: var(--accent); }
.dot.absent { background: transparent; border: 1px dashed var(--mut); }

#main { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; }
.card h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); margin-bottom: .7rem; }
.empty { color: var(--mut); font-size: .85rem; }

#method .mname { font-size: 1.05rem; font-weight: 600; font-family: ui-monospace, Consolas, monospace; }
#method .msig { color: var(--dim); font-family: ui-monospace, Consolas, monospace; font-size: .9rem; margin-top: .15rem; }
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 99px; font-size: .72rem;
  font-weight: 600; margin-left: .6rem; vertical-align: 2px; }
.badge.works { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge.broken { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.badge.fw-blocked { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.badge.not-on-epaper, .badge.untested, .badge.absent { background: color-mix(in srgb, var(--mut) 18%, transparent); color: var(--dim); }
.badge.callable { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
#method .meta { font-size: .78rem; color: var(--dim); margin-top: .5rem; }
#method .note { font-size: .84rem; margin-top: .5rem; padding: .55rem .7rem; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0 6px 6px 0; }
.applyrow { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; align-items: center; }
.applyrow input, .applyrow textarea, #evalbox textarea { border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink); padding: .45rem .6rem; font-size: .84rem; font-family: ui-monospace, Consolas, monospace; }
#args { flex: 1; min-width: 16rem; }
#ttl { width: 7rem; } #cnote { width: 13rem; font-family: system-ui; }
button.apply, #evalgo, .quickrow button { background: var(--accent); color: #fff; border: 0; border-radius: 6px;
  padding: .5rem .9rem; font-size: .85rem; cursor: pointer; font-weight: 600; }
.quickrow { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.quickrow button { background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-weight: 400; }
.quickrow .hint { color: var(--mut); font-size: .78rem; }
#evalbox { margin-top: .7rem; display: flex; gap: .6rem; align-items: flex-start; }
#evalbox textarea { flex: 1; }
.hidden { display: none !important; }

#commands table { width: 100%; border-collapse: collapse; font-size: .82rem; }
#commands th { text-align: left; color: var(--dim); font-weight: 500; padding: .25rem .5rem; border-bottom: 1px solid var(--line); }
#commands td { padding: .3rem .5rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  vertical-align: top; }
#commands td.val { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; max-width: 30rem;
  overflow-wrap: anywhere; }
.st { font-weight: 600; font-size: .75rem; }
.st.done { color: var(--ok); } .st.error { color: var(--bad); }
.st.pending { color: var(--warn); } .st.delivered { color: var(--accent); }
.st.expired, .st.cancelled { color: var(--mut); }
td .cancel { color: var(--bad); cursor: pointer; border: 0; background: none; font-size: .8rem; }

.shotstrip { display: flex; gap: .7rem; overflow-x: auto; }
.shotstrip a { flex: none; text-align: center; font-size: .7rem; color: var(--dim); text-decoration: none; }
.shotstrip img { height: 7rem; border: 1px solid var(--line); border-radius: 6px; display: block; }

#refreshdot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mut); margin-left: .4rem; }
#refreshdot.on { background: var(--ok); }
#toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--ink);
  color: var(--bg); padding: .6rem 1.1rem; border-radius: 8px; font-size: .85rem; z-index: 10; }
@media (max-width: 780px) { #sidebar { width: 15rem; } }

#credit { flex: none; padding: .35rem .9rem; background: var(--panel); border-top: 1px solid var(--line);
  font-size: .72rem; color: var(--dim); text-align: right; }
#credit b { color: var(--ink); font-weight: 600; letter-spacing: .03em; }
#credit a { color: var(--dim); text-decoration: none; }
#credit a:hover { color: var(--accent); text-decoration: underline; }


/* ───────────── status filter · catalog footer ───────────── */
#statusfilter { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 .6rem .5rem; }
.sf { display: flex; align-items: center; gap: .3rem; font-size: .7rem; padding: .18rem .45rem;
  border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--dim); cursor: pointer; }
.sf.on { border-color: var(--accent); color: var(--accent); }
#catfoot { flex: none; padding: .45rem .8rem; border-top: 1px solid var(--line);
  font-size: .7rem; color: var(--mut); }
#catfoot b { color: var(--dim); }
.nsgroup.notpresent summary { color: var(--mut); }

/* ───────────── tabs ───────────── */
#tabs { display: flex; gap: .4rem; flex: none; }
.tab { background: none; border: 1px solid var(--line); border-radius: 8px 8px 0 0; border-bottom: 0;
  padding: .45rem 1rem; font-size: .82rem; color: var(--dim); cursor: pointer; }
.tab.sel { background: var(--panel); color: var(--ink); font-weight: 600; }
.tabpane { display: flex; flex-direction: column; gap: 1rem; }

/* ───────────── method detail extras ───────────── */
.grade, .scanmode { display: inline-block; margin-left: .5rem; font-size: .66rem; font-weight: 600;
  letter-spacing: .04em; padding: .1rem .4rem; border-radius: 4px; border: 1px solid var(--line); color: var(--dim); }
.scanmode.read { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.scanmode.never { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
#method .danger { margin-top: .6rem; padding: .55rem .7rem; border-left: 3px solid var(--bad);
  background: color-mix(in srgb, var(--bad) 9%, transparent); border-radius: 0 6px 6px 0; font-size: .84rem; }
#method .nsnote { border-left-color: var(--mut); background: color-mix(in srgb, var(--mut) 8%, transparent);
  color: var(--dim); font-size: .78rem; }

/* ───────────── library view ───────────── */
.blurb { font-size: .84rem; color: var(--dim); margin-bottom: .6rem; line-height: 1.5; }
.blurb code { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; color: var(--ink); }
.fact { display: flex; gap: .8rem; padding: .4rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  font-size: .82rem; line-height: 1.5; }
.fact b { flex: none; width: 8rem; color: var(--accent); }
.libns { margin-bottom: 1.6rem; }
.libns.notpresent { opacity: .82; }
.libns h4 { font-size: .92rem; font-family: ui-monospace, Consolas, monospace; display: flex;
  flex-wrap: wrap; gap: .4rem; align-items: center; }
.libpriv { font-size: .74rem; color: var(--mut); margin: .25rem 0; font-family: ui-monospace, Consolas, monospace; }
.libnote { font-size: .8rem; color: var(--dim); line-height: 1.55; margin: .4rem 0 .6rem;
  padding: .5rem .7rem; border-left: 3px solid var(--mut); background: color-mix(in srgb, var(--mut) 7%, transparent);
  border-radius: 0 6px 6px 0; }
.chip { font-size: .66rem; font-weight: 600; padding: .1rem .45rem; border-radius: 99px;
  background: color-mix(in srgb, var(--mut) 20%, transparent); color: var(--dim); }
.chip.works { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.chip.broken, .chip.fw-blocked { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.libtable { width: 100%; border-collapse: collapse; font-size: .78rem; }
.libtable th { text-align: left; color: var(--mut); font-weight: 500; padding: .25rem .5rem;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.libtable td { padding: .32rem .5rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  vertical-align: top; }
.libtable td.mono { font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }
.libtable td.dim { color: var(--mut); }
.libcell { line-height: 1.5; min-width: 16rem; max-width: 34rem; }
.scrollx { overflow-x: auto; }
.libns { overflow-x: auto; }
.libtable { min-width: 46rem; }
.libtable td.sigcell { white-space: normal; max-width: 15rem; overflow-wrap: anywhere; }
.byfw { font-size: .66rem; color: var(--warn); margin-top: .15rem; }
#libcount, #scanstate, #scanplan { font-weight: 400; text-transform: none; letter-spacing: 0; }
#scanreportcard h3 { text-transform: none; letter-spacing: 0; font-size: .9rem; }

/* ───────────── scan view ───────────── */
.scanid { font-size: .88rem; margin-bottom: .7rem; }
.scanid .dim { font-size: .76rem; color: var(--mut); margin-top: .2rem; }
.drift { color: var(--warn) !important; }
.scancounts { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.sc { font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 99px;
  background: color-mix(in srgb, var(--mut) 18%, transparent); color: var(--dim); }
.sc.regression { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.sc.recovered { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.sc.new, .sc.new-evidence { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.scangroup { margin-bottom: .9rem; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; }
.scangroup > summary { cursor: pointer; font-size: .82rem; font-weight: 600; list-style: none;
  display: flex; gap: .5rem; align-items: center; }
.scangroup > summary::before { content: "▸"; color: var(--mut); }
.scangroup[open] > summary::before { content: "▾"; }
.scangroup > summary .cnt { margin-left: auto; color: var(--mut); font-weight: 400; font-size: .75rem; }
.scangroup.regression { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.scangroup.recovered { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.nslist { font-size: .76rem; margin: .4rem 0; line-height: 1.9; }
.nslist code { font-family: ui-monospace, Consolas, monospace; background: var(--bg);
  border: 1px solid var(--line); border-radius: 4px; padding: .05rem .3rem; }
#scanout { width: 100%; margin-top: .7rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink); padding: .6rem; font-size: .76rem;
  font-family: ui-monospace, Consolas, monospace; }
#scanload, #scanmd, #scanjson { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: .5rem .9rem; font-size: .85rem; cursor: pointer; }