Upload folder using huggingface_hub

README.md

@@ -1,10 +1,27 @@
 ---
-title: Audit Conversion
-emoji: 🌖
-colorFrom: pink
-colorTo: purple
+title: LocalGate Audit — Conversion
+emoji: ✅
+colorFrom: gray
+colorTo: gray
 sdk: static
+app_file: index.html
 pinned: false
+license: apache-2.0
+hf_oauth: true
+hf_oauth_expiration_minutes: 1440
+hf_oauth_scopes:
+  - read-repos
+  - contribute-repos
+hf_oauth_authorized_org: localgate
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# LocalGate audit — conversion
+
+Private static annotation Space. Use the **direct URL**
+(https://localgate-audit-conversion.static.hf.space) — the embedded view links out.
+Sign in with your HF account; judgments are committed to a private dataset in
+**your own namespace** (`{you}/localgate-audit-results`) under your own token,
+so every grade is attributed by commit author. Progress saves continuously and
+resumes across sessions. Incident response: revoke a leaked token at
+https://huggingface.co/settings/tokens and remove this app under Settings →
+Connected Applications.

app.js

@@ -0,0 +1,399 @@
+/* LocalGate audit engine — shared by both audit Spaces.
+ *
+ * Design contract (deliverables/AUDIT_SPACES_BUILD.md, FINAL SPEC):
+ *  - Same-tab OAuth on the direct *.static.hf.space URL; embedded views link out.
+ *  - Token lives in sessionStorage only; the hub library persists nothing itself.
+ *  - Scopes are read-repos + contribute-repos: results go to a private dataset in
+ *    the ANNOTATOR'S OWN namespace ({user}/localgate-audit-results), created on
+ *    first login. Nobody can write anyone else's results at the permission layer.
+ *  - Append-only event log: every judgment/revision is a new row; analysis takes
+ *    newest-ts-per-key. Upload = whole-file rewrite of the user's own file.
+ *  - All content rendered via textContent. No innerHTML anywhere in this file.
+ *  - localStorage holds the event log per (task, user) — loss bound is zero;
+ *    uploads every SAVE_EVERY judgments / on 's' / on tab-hide / at the end.
+ */
+import { oauthLoginUrl, oauthHandleRedirectIfPresent, uploadFiles, downloadFile,
+         createRepo } from "./hub-2.15.0.bundle.mjs";
+
+/* global CONFIG */
+const ORG_ID = "6a7af86a89612db0d39b0b14";           // localgate — forces the org grant
+const ITEMS_REPO = { type: "dataset", name: "localgate/audit-items" };
+const SAVE_EVERY = 5;
+
+const $ = (sel) => document.querySelector(sel);
+const el = (tag, cls, text) => {
+  const node = document.createElement(tag);
+  if (cls) node.className = cls;
+  if (text !== undefined) node.textContent = text;
+  return node;
+};
+
+// ── rubric fingerprint (same discipline as convert.py's PROMPT_VERSION) ──────
+async function rubricVersion() {
+  const data = new TextEncoder().encode(CONFIG.rubric + "\0" + JSON.stringify(CONFIG.fields));
+  const hash = await crypto.subtle.digest("SHA-256", data);
+  return [...new Uint8Array(hash)].slice(0, 6).map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+// ── auth ─────────────────────────────────────────────────────────────────────
+function storedAuth() {
+  try {
+    const raw = sessionStorage.getItem("oauth");
+    if (!raw) return null;
+    const auth = JSON.parse(raw);
+    if (new Date(auth.accessTokenExpiresAt) <= new Date()) return null;
+    return auth;
+  } catch { return null; }
+}
+
+async function ensureAuth() {
+  let auth = storedAuth();
+  if (auth) return auth;
+  const fresh = await oauthHandleRedirectIfPresent();
+  if (fresh) {
+    sessionStorage.setItem("oauth", JSON.stringify(fresh));
+    history.replaceState(null, "", location.pathname);   // ?code is single-use; keep it out of history
+    return fresh;
+  }
+  return null;
+}
+
+async function signIn() {
+  const url = await oauthLoginUrl();                     // reads window.huggingface.variables in a Space
+  window.location.href = url + "&orgIds=" + ORG_ID;      // no param passthrough in the helper; append
+}
+
+// ── state ────────────────────────────────────────────────────────────────────
+const state = {
+  auth: null, user: null, items: [], order: [], idx: 0,
+  events: [],                    // append-only, mirrored to localStorage
+  unsaved: 0, sessionId: crypto.randomUUID().slice(0, 8),
+  shownAt: 0, rubricVersion: "", resultsRepo: null, lastSummary: null,
+  breakShownAt: Date.now(),
+};
+
+const logKey = () => `audit:${CONFIG.task}:${state.user}`;
+const latestByKey = (events) => {
+  const map = new Map();
+  for (const ev of events) map.set(ev.key, ev);          // events are time-ordered
+  return map;
+};
+
+function loadLocalEvents() {
+  try { return JSON.parse(localStorage.getItem(logKey()) ?? "[]"); }
+  catch { return []; }
+}
+function persistLocal() {
+  localStorage.setItem(logKey(), JSON.stringify(state.events));
+}
+
+// Seeded per-user order (fatigue decorrelation) — mulberry32 over a string hash.
+function seededOrder(n, seed) {
+  let h = 1779033703;
+  for (const ch of seed) { h = Math.imul(h ^ ch.charCodeAt(0), 3432918353); h = (h << 13) | (h >>> 19); }
+  const rand = () => {
+    h = Math.imul(h ^ (h >>> 16), 2246822507); h = Math.imul(h ^ (h >>> 13), 3266489909);
+    return ((h ^= h >>> 16) >>> 0) / 4294967296;
+  };
+  const order = [...Array(n).keys()];
+  for (let i = n - 1; i > 0; i--) { const j = Math.floor(rand() * (i + 1)); [order[i], order[j]] = [order[j], order[i]]; }
+  return order;
+}
+
+// Warm-ups always come first, in file order; real items follow in seeded order.
+function buildOrder() {
+  const warm = [], real = [];
+  state.items.forEach((item, i) => (item.warmup ? warm : real).push(i));
+  const shuffled = seededOrder(real.length, `${CONFIG.task}:${state.user}`).map((i) => real[i]);
+  state.order = [...warm, ...shuffled];
+}
+
+function keyOf(item) { return String(item.id ?? item.key); }
+
+function firstUngraded() {
+  const done = latestByKey(state.events);
+  for (let pos = 0; pos < state.order.length; pos++) {
+    const item = state.items[state.order[pos]];
+    const ev = done.get(keyOf(item));
+    if (!ev || !CONFIG.isComplete(ev)) return pos;
+  }
+  return state.order.length;
+}
+
+// ── results repo (own namespace; contribute-repos scope) ─────────────────────
+async function ensureResultsRepo() {
+  const name = `${state.user}/localgate-audit-results`;
+  state.resultsRepo = { type: "dataset", name };
+  try {
+    await createRepo({ repo: state.resultsRepo, accessToken: state.auth.accessToken,
+                       private: true });
+  } catch (err) {
+    // 409 = already exists (any prior session) — the expected steady state.
+    if (!/409|exist/i.test(String(err))) throw err;
+  }
+}
+
+const remotePath = () => `${CONFIG.task}/${state.user}.jsonl`;
+
+async function pullRemote() {
+  const blob = await downloadFile({ repo: state.resultsRepo, path: remotePath(),
+                                    accessToken: state.auth.accessToken });
+  if (blob === null) return [];                          // no file yet — first session
+  return (await blob.text()).split("\n").filter(Boolean).map((line) => JSON.parse(line));
+}
+
+async function push() {
+  if (!state.events.length) return;
+  const jsonl = state.events.map((ev) => JSON.stringify(ev)).join("\n") + "\n";
+  await uploadFiles({
+    repo: state.resultsRepo, accessToken: state.auth.accessToken,
+    commitTitle: `${CONFIG.task}: ${state.user} — ${state.events.length} events`,
+    files: [{ path: remotePath(), content: new Blob([jsonl]) }],
+  });
+  state.unsaved = 0;
+  renderStatus();
+}
+
+async function pushGuarded() {
+  try { await push(); }
+  catch (err) {
+    banner(/403|401/.test(String(err))
+      ? "Saved locally, but publishing failed (permissions). Nothing is lost — press s to retry after it's fixed."
+      : `Saved locally; publishing failed: ${String(err).slice(0, 120)} — press s to retry.`);
+  }
+}
+
+// ── recording ────────────────────────────────────────────────────────────────
+function record(item, values, unsure, note) {
+  const key = keyOf(item);
+  const prior = [...state.events].reverse().find((ev) => ev.key === key);
+  state.events.push({
+    key, ...values,
+    unsure: !!unsure, note: note || "",
+    user: state.user, ts: new Date().toISOString(),
+    order_index: state.idx, elapsed_ms: Date.now() - state.shownAt,
+    edit_count: prior ? (prior.edit_count ?? 0) + 1 : 0,
+    session_id: state.sessionId, rubric_version: state.rubricVersion,
+    client: `${CONFIG.task}@${CONFIG.build}`,
+    ...(item.warmup ? { warmup: true } : {}),
+  });
+  persistLocal();
+  state.lastSummary = `${key} → ${CONFIG.summarize(values)}${unsure ? " (unsure)" : ""}`;
+  state.unsaved += 1;
+  if (state.unsaved >= SAVE_EVERY) pushGuarded();
+}
+
+// ── UI ───────────────────────────────────────────────────────────────────────
+function banner(text) {
+  const box = $("#banner");
+  box.textContent = text;
+  box.hidden = !text;
+}
+
+function renderStatus() {
+  const done = [...latestByKey(state.events).values()]
+    .filter((ev) => !ev.warmup && CONFIG.isComplete(ev)).length;
+  const total = state.items.filter((item) => !item.warmup).length;
+  $("#progress").textContent =
+    `${done}/${total} graded · ${state.unsaved} unsaved` +
+    (state.items[state.order[state.idx]]?.warmup ? " · WARM-UP" : "");
+  $("#bar-fill").style.width = `${(100 * done) / total}%`;
+}
+
+function contentBlock(label, text, opts = {}) {
+  const wrap = el("section", "field" + (opts.scroll ? " response" : ""));
+  const head = el("b", null, label + (opts.count ? ` · ${text.length} chars` : ""));
+  wrap.append(head);
+  const body = el("div", "content");
+  body.textContent = text;                               // textContent ONLY — never innerHTML
+  wrap.append(body);
+  if (opts.scroll) wrap.append(el("div", "endmark", "· · · end of response · · ·"));
+  return wrap;
+}
+
+function renderItem() {
+  const main = $("#main");
+  main.replaceChildren();
+  banner("");
+
+  if (state.idx >= state.order.length) {
+    main.append(el("h2", null, "All items graded — thank you!"));
+    main.append(el("p", null, "Final save in progress. You can close this tab once the counter reads 0 unsaved."));
+    pushGuarded();
+    renderStatus();
+    $("#controls").hidden = true;
+    return;
+  }
+  const item = state.items[state.order[state.idx]];
+  if (item.warmup) {
+    main.append(el("p", "warmup-note",
+      "Warm-up item — discussable with the others; real items start after these and must be graded independently."));
+  }
+  for (const block of CONFIG.blocks(item)) {
+    main.append(contentBlock(block.label, block.text, block));
+  }
+  state.shownAt = Date.now();
+  renderControls(item);
+  renderStatus();
+  if (Date.now() - state.breakShownAt > 45 * 60 * 1000) {
+    banner("You've been at this a while — good moment for a break. Everything up to the counter is saved.");
+    state.breakShownAt = Date.now();
+  }
+}
+
+function renderControls(item) {
+  const controls = $("#controls");
+  controls.hidden = false;
+  controls.replaceChildren();
+  const current = latestByKey(state.events).get(keyOf(item));
+  const selection = { ...(current ? CONFIG.valuesOf(current) : {}) };
+  let unsure = current?.unsure ?? false;
+
+  const groups = [];
+  for (const field of CONFIG.fields) {
+    const group = el("div", "grp");
+    group.append(el("span", "lbl", field.label));
+    for (const [value, hotkey] of field.options) {
+      const button = el("button", null, value);
+      button.append(el("kbd", null, hotkey));
+      if (selection[field.name] === value) button.classList.add("sel");
+      button.addEventListener("click", () => choose(field.name, value));
+      group.append(button);
+    }
+    controls.append(group);
+    groups.push(group);
+  }
+
+  const unsureBtn = el("button", "unsure" + (unsure ? " sel" : ""), "unsure");
+  unsureBtn.append(el("kbd", null, "u"));
+  unsureBtn.title = "marks this judgment as uncertain — it still counts, the flag is analysis metadata";
+  unsureBtn.addEventListener("click", () => { unsure = !unsure; unsureBtn.classList.toggle("sel", unsure); });
+  controls.append(unsureBtn);
+
+  const note = el("input", null);
+  note.id = "note"; note.placeholder = CONFIG.notePlaceholder;
+  note.value = current?.note ?? "";
+  controls.append(note);
+
+  const nav = el("div", "nav");
+  const prev = el("button", null, "← prev"); prev.append(el("kbd", null, "j"));
+  prev.addEventListener("click", () => move(-1));
+  const skip = el("button", null, "next →"); skip.append(el("kbd", null, "k"));
+  skip.addEventListener("click", () => move(1));
+  const save = el("button", null, "save"); save.append(el("kbd", null, "s"));
+  save.addEventListener("click", () => pushGuarded());
+  nav.append(prev, skip, save);
+  controls.append(nav);
+
+  if (state.lastSummary) controls.append(el("div", "last", `last: ${state.lastSummary} — j to revisit`));
+
+  function choose(name, value) {
+    selection[name] = value;
+    CONFIG.fields.forEach((field, fi) => {
+      groups[fi].querySelectorAll("button").forEach((button) => {
+        const label = button.childNodes[0].textContent;
+        button.classList.toggle("sel", selection[field.name] === label);
+      });
+    });
+    if (CONFIG.fields.every((field) => selection[field.name])) {
+      record(item, selection, unsure, note.value);
+      move(1);
+    }
+  }
+  controls._choose = choose;   // for the keyboard handler
+  controls._toggleUnsure = () => unsureBtn.click();
+}
+
+function move(delta) {
+  state.idx = Math.max(0, Math.min(state.order.length, state.idx + delta));
+  renderItem();
+}
+
+document.addEventListener("keydown", (event) => {
+  if (event.target.tagName === "INPUT" || $("#controls").hidden) return;
+  const controls = $("#controls");
+  if (event.key === "j") { event.preventDefault(); move(-1); return; }
+  if (event.key === "k") { event.preventDefault(); move(1); return; }
+  if (event.key === "s") { event.preventDefault(); pushGuarded(); return; }
+  if (event.key === "u") { event.preventDefault(); controls._toggleUnsure?.(); return; }
+  if (event.key === "e") {
+    event.preventDefault();
+    const resp = document.querySelector(".response .content");
+    if (resp) resp.parentElement.scrollTop = resp.parentElement.scrollHeight;
+    return;
+  }
+  const binding = CONFIG.hotkeys[event.key];
+  if (binding) { event.preventDefault(); controls._choose?.(binding[0], binding[1]); }
+});
+
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState === "hidden" && state.unsaved) pushGuarded();   // best-effort
+});
+
+// ── boot ─────────────────────────────────────────────────────────────────────
+async function boot() {
+  $("#task-title").textContent = CONFIG.title;
+  state.rubricVersion = await rubricVersion();
+  $("#rubric-body").textContent = CONFIG.rubric;
+
+  if (window.self !== window.top) {
+    // Embedded in hf.co: OAuth storage is partitioned here — link out instead.
+    const main = $("#main");
+    main.replaceChildren(el("p", null, "Open this Space in its own tab to sign in:"));
+    const link = el("a", "open-out", location.href);
+    link.href = location.href; link.target = "_blank"; link.rel = "noopener";
+    main.append(link);
+    return;
+  }
+
+  state.auth = await ensureAuth();
+  if (!state.auth) {
+    const main = $("#main");
+    main.replaceChildren(el("p", null, CONFIG.landing));
+    main.append(el("p", "independence", CONFIG.independence));
+    const button = el("button", "signin", "Sign in with Hugging Face");
+    button.addEventListener("click", signIn);
+    main.append(button);
+    return;
+  }
+
+  const username = state.auth.userInfo.preferred_username;
+  const inOrg = (state.auth.userInfo.orgs ?? []).some((org) => org.preferred_username === "localgate");
+  if (!inOrg) {
+    $("#main").replaceChildren(el("p", null,
+      `@${username} is not on this study's annotator list — ask Samuel to add you to the localgate org.`));
+    return;
+  }
+  state.user = username;
+  $("#whoami").textContent = `@${username}`;
+
+  try {
+    const blob = await downloadFile({ repo: ITEMS_REPO, path: CONFIG.itemsPath,
+                                      accessToken: state.auth.accessToken });
+    if (blob === null) throw new Error("items file missing from localgate/audit-items");
+    state.items = JSON.parse(await blob.text());
+  } catch (err) {
+    $("#main").replaceChildren(el("p", null, `Could not load items: ${String(err).slice(0, 140)}`));
+    const retry = el("button", null, "retry");
+    retry.addEventListener("click", boot);
+    $("#main").append(retry);
+    return;
+  }
+
+  await ensureResultsRepo();
+  // Merge remote history with local log: union by (key, ts) — both are append-only.
+  let remote = [];
+  try { remote = await pullRemote(); }
+  catch (err) { banner(`Could not read previous progress (${String(err).slice(0, 80)}) — grading continues; local log is intact.`); }
+  const seen = new Set(remote.map((ev) => ev.key + "|" + ev.ts));
+  state.events = [...remote,
+                  ...loadLocalEvents().filter((ev) => !seen.has(ev.key + "|" + ev.ts))]
+    .sort((a, b) => a.ts.localeCompare(b.ts));
+  persistLocal();
+
+  buildOrder();
+  state.idx = firstUngraded();
+  renderItem();
+}
+
+boot();

config.js

@@ -0,0 +1,39 @@
+window.CONFIG = {
+  task: "conversion",
+  title: "Conversion audit — 152 items",
+  itemsPath: "conversion_items.json",
+  build: "c7f424d",
+  landing: "You will judge whether each rewritten exam question still asks the same "
+    + "question as the original, and whether it stands on its own without the answer "
+    + "options. 152 items plus 3 discussable warm-ups; expect roughly 1.5–2 hours, "
+    + "in as many sittings as you like — progress saves continuously.",
+  independence: "Grade independently: do not discuss real items with the other "
+    + "annotators until everyone has finished.",
+  rubric: "SAME QUESTION — yes when the rewrite asks for exactly the fact the "
+    + "original asked for; no when it broadens, narrows, or shifts what counts as a "
+    + "correct answer.\n\nSELF-CONTAINED — yes when the rewrite is answerable "
+    + "without ever seeing the answer options: it names its subject, includes any "
+    + "data the options used to carry, and does not say things like 'which of the "
+    + "following'. no when answering it would require the removed options or other "
+    + "missing context.\n\nJudge the rewrite as a fresh reader would. The original "
+    + "and its options are shown only so you can compare; the model that answers the "
+    + "rewrite will never see them.\n\nThe optional note is for anything that made an "
+    + "item hard to call — one clause is plenty. Press u to flag a judgment you "
+    + "are unsure about (it still counts; the flag helps the disagreement analysis).",
+  fields: [
+    { name: "same_question", label: "same question?", options: [["yes","1"],["no","2"]] },
+    { name: "self_contained", label: "self-contained?", options: [["yes","3"],["no","4"]] },
+  ],
+  hotkeys: { "1":["same_question","yes"], "2":["same_question","no"],
+             "3":["self_contained","yes"], "4":["self_contained","no"] },
+  notePlaceholder: "why (optional)",
+  isComplete: (ev) => !!(ev.same_question && ev.self_contained),
+  valuesOf: (ev) => ({ same_question: ev.same_question, self_contained: ev.self_contained }),
+  summarize: (v) => `same:${v.same_question} self:${v.self_contained}`,
+  blocks: (item) => [
+    { label: "original (with options)",
+      text: item.original + "\n\n" + item.options.map((o,i)=>String.fromCharCode(65+i)+". "+o).join("\n") },
+    { label: "reference answer", text: item.reference_answer },
+    { label: "rewritten (open-ended)", text: item.rewritten, count: true },
+  ],
+};

index.html

@@ -1,19 +1,25 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; connect-src https://huggingface.co https://*.hf.co; img-src 'self' data:; base-uri 'none'; form-action 'none'">
+<title>LocalGate audit</title>
+<link rel="stylesheet" href="style.css?v=c7f424d">
+</head>
+<body>
+<header>
+  <h1 id="task-title">Loading…</h1>
+  <span id="whoami"></span>
+  <span id="progress"></span>
+</header>
+<div id="bar"><div id="bar-fill"></div></div>
+<div id="banner" hidden></div>
+<main id="main"><p>Loading…</p></main>
+<details id="rubric"><summary>Rubric &amp; edge rules (keep open while grading)</summary>
+<pre id="rubric-body"></pre></details>
+<div id="controls" hidden></div>
+<script src="config.js?v=c7f424d"></script>
+<script type="module" src="app.js?v=c7f424d"></script>
+</body>
 </html>

style.css

@@ -1,28 +1,43 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+:root { --ink:#1a1a1a; --dim:#666; --paper:#fafaf7; --card:#fff; --line:#ddd;
+        --accent:#2c5f8a; --warn:#8a5a1a; }
+* { box-sizing: border-box; }
+body { margin:0; font:16px/1.55 Georgia, serif; color:var(--ink); background:var(--paper); }
+header { display:flex; gap:1rem; align-items:baseline; padding:.6rem 1.1rem; flex-wrap:wrap;
+         border-bottom:2px solid var(--ink); background:var(--card);
+         font-family:ui-sans-serif,system-ui; }
+header h1 { font-size:1rem; margin:0; }
+#whoami, #progress { color:var(--dim); font-size:.85rem; }
+#bar { height:5px; background:var(--line); } #bar-fill { height:100%; width:0; background:var(--accent); }
+#banner { padding:.5rem 1.1rem; background:#fdf3e3; color:var(--warn);
+          font-family:ui-sans-serif,system-ui; font-size:.9rem; }
+main { max-width:56rem; margin:1rem auto 11rem; padding:0 1rem; }
+.field { background:var(--card); border:1px solid var(--line); padding:.7rem 1rem; margin:.7rem 0; }
+.field b { display:block; font-family:ui-sans-serif,system-ui; font-size:.72rem;
+           text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin-bottom:.3rem; }
+.field .content { white-space:pre-wrap; overflow-wrap:anywhere; }
+.response { max-height:24rem; overflow-y:auto; border-width:2px; }
+.endmark { text-align:center; color:var(--dim); font-size:.8rem; padding-top:.5rem;
+           font-family:ui-sans-serif,system-ui; }
+.warmup-note { background:#eef4fa; border:1px solid var(--accent); padding:.5rem .8rem;
+               font-family:ui-sans-serif,system-ui; font-size:.9rem; }
+.independence { color:var(--dim); font-style:italic; }
+button.signin { font:inherit; font-size:1rem; padding:.6rem 1.4rem; cursor:pointer;
+                border:1.5px solid var(--ink); background:var(--ink); color:#fff; }
+details#rubric { position:fixed; bottom:5.6rem; left:0; right:0; background:var(--card);
+                 border-top:1px solid var(--line); padding:.4rem 1.1rem; max-height:40vh;
+                 overflow-y:auto; font-family:ui-sans-serif,system-ui; font-size:.85rem; }
+details#rubric summary { cursor:pointer; color:var(--accent); }
+details#rubric pre { white-space:pre-wrap; font:inherit; }
+#controls { position:fixed; bottom:0; left:0; right:0; background:var(--card);
+            border-top:2px solid var(--ink); padding:.55rem 1.1rem; display:flex;
+            gap:.6rem; align-items:center; flex-wrap:wrap; font-family:ui-sans-serif,system-ui; }
+#controls .grp { display:flex; gap:.35rem; align-items:center; }
+#controls .lbl { font-size:.78rem; color:var(--dim); }
+#controls button { font:inherit; font-size:.9rem; padding:.4rem .8rem; cursor:pointer;
+                   border:1.5px solid var(--line); background:var(--card); }
+#controls button.sel { border-color:var(--ink); background:var(--ink); color:#fff; }
+#controls button.unsure.sel { background:var(--warn); border-color:var(--warn); }
+#controls kbd { font-size:.7rem; opacity:.55; margin-left:.3rem; }
+#controls #note { font:inherit; font-size:.85rem; padding:.35rem; border:1px solid var(--line); width:13rem; }
+#controls .nav { margin-left:auto; display:flex; gap:.35rem; }
+#controls .last { width:100%; color:var(--dim); font-size:.78rem; }