/* base.css — the universal foundation shared by the themed surfaces
 * (app.html / index.html / menu.html / admin.html), linked immediately after
 * tokens.css. Only the truly-identical reset lives here: the page-specific
 * components (.card, .field, button.primary) intentionally DIFFER per surface —
 * app's card is a dense form panel, admin's a wider table panel, menu's a
 * clickable tile — so they stay in each page's own stylesheet, not here.
 * viewer.html keeps its own standalone dark theme and does NOT link this. */

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); color: var(--ink); }

/* ---- (i) affordance: dense explanation, folded away (js/info.js) ----
 * The one exception to the reset-only charter above: the (i) is the app-wide
 * exposition affordance and must render identically on every surface, so its
 * skin lives here rather than per page. */
.lab-i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  margin-left: 5px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel2); color: var(--dim); font: 600 10px/1 var(--sans); font-style: italic;
  cursor: pointer; vertical-align: middle; flex: 0 0 auto; }
.lab-i:hover { border-color: var(--accent); color: var(--accent-soft); }
.lab-i[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-soft); background: rgba(77,163,255,.12); }
.lab-i-body { display: block; margin: 6px 0 2px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--panel);
  color: var(--ink2); font-size: 11.5px; line-height: 1.55; text-align: left; }

/* (i) bodies carry one <span class="lab-i-p"> per idea — block, not <p>, so
   they stay legal inside the <p> wrappers several call sites use. */
.lab-i-body .lab-i-p { display: block; }
.lab-i-body .lab-i-p + .lab-i-p { margin-top: 7px; }