/* ============================================================
   ICON SYSTEM
   Inline SVGs (js/icons.js) replaced the old emoji/glyph "icons".
   Size them HERE, in one place — never inline on the <svg> — so a
   single rule rescales every icon. Icon+label buttons get a gap so
   the glyph and the text don't collide.
   ============================================================ */
.small-btn { gap: 6px; }
.small-btn > svg { width: 15px; height: 15px; flex: 0 0 auto; }
#epubPickBtn { display: inline-flex; align-items: center; gap: 8px; }
#epubPickBtn > svg { width: 16px; height: 16px; flex: 0 0 auto; }
.panel-close > svg { width: 18px; height: 18px; }
.lib-card .remove > svg { width: 18px; height: 18px; }
.mobilebar-btn { gap: 6px; }
.mobilebar-btn > svg { width: 22px; height: 22px; flex: 0 0 auto; }
#mPlayBtn > svg { width: 26px; height: 26px; }
/* Inline icons that live inside text (the "goal met" check) track the font. */
#goalRequiredRate > svg,
#goalPillRate > svg { width: 1em; height: 1em; vertical-align: -0.12em; }
.stats-row-caret > svg { width: 11px; height: 11px; vertical-align: middle; }
/* Cloud-availability mark on recently-read cards + library-scan rows. */
.lib-cloud, .scan-cloud { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; color: var(--muted); opacity: 0.85; }
.lib-cloud > svg, .scan-cloud > svg { width: 14px; height: 14px; }

/* ---------- Control-panel fields (this block was repeated inline on each
   <select>/<input> in index.html; one class now owns it). ---------- */
.ctrl-field {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: 6px;
  font: inherit;
}
.ctrl-field-wide { width: 260px; }
.ctrl input[type=range].ctrl-range-narrow { width: 120px; }