/* The ⓘ buttons and the notes they open (info.js), on the home page and the standalone pages. */
.with-info { display: flex; align-items: center; gap: 8px; }
.info-btn { width: 20px; height: 20px; padding: 0; border-radius: 50%; font: italic 600 12px/1 Georgia, serif; cursor: pointer;
  color: var(--muted); border: 1.5px solid var(--muted); background: none; display: inline-grid; place-items: center; flex: none; }
.info-btn.sm { width: 16px; height: 16px; font-size: 10px; border-width: 1.2px; text-transform: none; }
.info-btn[aria-expanded="true"] { color: var(--surface); background: var(--muted); }
.note p { margin: 0 0 4px; }
.note a { color: var(--accent); }
.note ul { margin: 0 0 4px; padding-left: 1.1em; }
.note li { margin: 2px 0; }
.note b { font-weight: 600; color: var(--ink-2); }
.cap .info-btn { margin-left: 4px; vertical-align: -4px; }

/* A source number (.cite) opens its source in place (info.js), instead of jumping to the list at the bottom
   (Tomas, 14 Nov 2026: "src als popover, ipv jump to bottom"). */
.cite a { user-select: none; -webkit-user-select: none; padding: 0 2px; position: relative; }
.cite a::after { content: ""; position: absolute; inset: -14px -3px; }   /* a bigger target for the thumb */
.cite a[aria-expanded="true"] { background: var(--accent); color: var(--surface); border-radius: 3px; }
.src-pop { position: absolute; z-index: 30; width: min(340px, calc(100vw - 32px)); padding: 12px 40px 12px 14px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18); font-size: 0.9rem; line-height: 1.4; }
.src-pop .src-title { font-weight: 600; color: var(--accent); text-decoration: none; }
.src-pop .src-title:hover { text-decoration: underline; }
.src-pop .src-meta, .src-pop .src-page { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 3px; }
.src-pop .src-all { display: inline-block; margin-top: 8px; font-size: 0.8rem; color: var(--ink-2); }
.src-pop .src-x { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: none;
  color: var(--muted); font-size: 18px; cursor: pointer; user-select: none; -webkit-user-select: none; }

/* "All specs" on a mic page: the value in ink, the rest (condition, other values, notes)
   small and grey under it, and a sentence the rows of a group share once under its heading (Tomas, 15 Nov 2026,
   pick "10A · Waarde eerst, de rest klein en grijs"; tools/build_app.py spec_groups). */
.specs .v { display: block; color: var(--ink); font-variant-numeric: tabular-nums; }
.specs .rest { display: block; color: var(--muted); font-size: 0.82em; line-height: 1.35; margin-top: 2px; font-weight: 400; }
.specs tr.once td { color: var(--muted); font-size: 0.82em; border-top: 0; padding-top: 0; }