/* ═══════════════════════════════════════════════════════════════════════════
   styles/samaa.css
   ─────────────────────────────────────────────────────────────────────────
   OWNED BY: modules/samaa/screen.js · Phase 1A · variant B "Radial Disc"
   SCOPED:   all selectors live under .sb-card[data-card-id="samaa"]
             (Samāʿ is its own top-level sidebar card as of v228b)
   THEMING:  all colors via existing tokens; no hex literals (rule A2)
   LAST AUDIT: 2026-05-23
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override theme tokens at the card level so contrast is GUARANTEED on any
   theme. Both the Samāʿ and Blur cards have a fixed cream visual identity
   (warm-paper background). We re-bind --mz-ink* to fixed dark warm values
   + force an opaque cream background on the whole card so the theme's
   "ink" (which goes light on dark themes) can't bleed in and make text
   invisible on cream. This also covers the sb-card-h chevron + title. */
.sb-card[data-card-id="samaa"],
.sb-card[data-card-id="blur"] {
  --mz-ink:   #2d2a23;
  --mz-ink-2: rgba(45, 42, 35, 0.85);
  --mz-ink-3: rgba(45, 42, 35, 0.72);    /* bumped from .62 → .72 for WCAG AA on cream */
  --mz-ink-4: rgba(45, 42, 35, 0.55);
  --mz-paper: #f7f1de;
  --sm-paper: #f7f1de;
  background: #f7f1de;
}
/* The "Clear all blur" button — was 3.30:1 with rose-100% on light-rose-tint.
   Darker rose + slightly deeper tint gives >4.5:1. */
.sb-card[data-card-id="blur"] .sb-bl-clear-all {
  color: #9a3a23;                          /* deeper rose for AA on cream tint */
  background: rgba(154, 58, 35, 0.10);
  border-color: rgba(154, 58, 35, 0.45);
}
.sb-card[data-card-id="blur"] .sb-bl-clear-all:hover  { background: rgba(154, 58, 35, 0.18); }
.sb-card[data-card-id="blur"] .sb-bl-clear-all:active { background: rgba(154, 58, 35, 0.26); }
/* The active "Off" mode row uses gold bg + white-ish description; bump
   description color so 'Full text · no blur' reads with AA on the gold. */
.sb-card[data-card-id="blur"] .sb-bl-row.is-on .ds {
  color: rgba(255, 255, 255, 0.92);
}
.sb-card[data-card-id="samaa"] .sb-card-body,
.sb-card[data-card-id="blur"]  .sb-card-body {
  background: var(--sm-paper);
}
/* sb-card-h has a hardcoded chevron color (rgba 0.5) — fine on cream now.
   Title uses --mz-gilt-rich (a hardcoded warm gold) — also fine on cream. */
.sb-card[data-card-id="samaa"] .sm-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: var(--ui-font, Inter, system-ui, sans-serif);
  color: var(--mz-ink);
}

/* ── header strip · TWO ROWS to avoid overlap ──────────────── */
.sb-card[data-card-id="samaa"] .sm-header {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line, rgba(0,0,0,.08));
}
.sb-card[data-card-id="samaa"] .sm-hdr-row {
  display: flex; align-items: center; gap: 8px;
}
.sb-card[data-card-id="samaa"] .sm-hdr-row-top {
  min-height: 36px;
}
.sb-card[data-card-id="samaa"] .sm-hdr-row-bot {
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
}
.sb-card[data-card-id="samaa"] .sm-hdr-row-bot:empty,
.sb-card[data-card-id="samaa"] .sm-hdr-row-bot:has(> :empty:not(:has(*))) {
  /* keep visible only when at least one pill has content */
}
.sb-card[data-card-id="samaa"] .sm-hdr-tools {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 2px;
}
.sb-card[data-card-id="samaa"] .sm-end {
  width: 36px; height: 36px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--rose, var(--danger, currentColor)); opacity: .75;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.sb-card[data-card-id="samaa"] .sm-end:hover { background: rgba(196,97,74,.10); opacity: 1; }
.sb-card[data-card-id="samaa"] .sm-end svg { display: block; }
.sb-card[data-card-id="samaa"] .sm-back {
  width: 36px; height: 36px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--mz-ink-2, rgba(45,42,35,0.7)); opacity: .7;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.sb-card[data-card-id="samaa"] .sm-back:hover { background: rgba(0,0,0,.05); opacity:1; }
.sb-card[data-card-id="samaa"] .sm-back-spacer {
  width: 36px; height: 36px;
}
.sb-card[data-card-id="samaa"] .sm-title {
  flex: 1;
  font: 700 14px var(--ui-font, Manrope, Inter);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mz-ink, #2d2a23);
}
.sb-card[data-card-id="samaa"] .sm-status {
  font: 500 11px ui-monospace, monospace;
  color: var(--mz-ink, #2d2a23);   /* full ink — was --mz-ink-2 + .65 opacity = invisible */
  letter-spacing: .04em; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-card[data-card-id="samaa"] .sm-status:empty { display: none; }
.sb-card[data-card-id="samaa"] .sm-streak {
  font: 700 11px var(--ui-font, Manrope, Inter);
  color: var(--mz-ink, #2d2a23);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(217, 179, 74, .14);
  border: 1px solid rgba(217, 179, 74, .35);
  letter-spacing: .02em;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.sb-card[data-card-id="samaa"] .sm-streak .sm-streak-flame {
  display: inline-flex; align-items: center;
  color: var(--rose, var(--accent, currentColor));
}
.sb-card[data-card-id="samaa"] .sm-streak .sm-streak-flame svg { display: block; }
.sb-card[data-card-id="samaa"] .sm-streak .sm-streak-cur {
  /* dark ink for readable contrast on the light gold-tinted pill */
  color: var(--mz-ink, #2d2a23);
  font-weight: 800;
}
.sb-card[data-card-id="samaa"] .sm-streak .sm-streak-best {
  color: var(--mz-ink-2, rgba(45,42,35,0.7));
  font-weight: 600;
  font-size: 10px;
}
.sb-card[data-card-id="samaa"] .sm-streak:empty { display: none; }
.sb-card[data-card-id="samaa"] .sm-audio-state {
  font: 700 10px ui-monospace, monospace;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(45,42,35,0.12);   /* darker chip so the mz-ink text reads */
  color: var(--mz-ink, #2d2a23);
  white-space: nowrap;
  min-width: 28px; text-align: center;
}
.sb-card[data-card-id="samaa"] .sm-audio-state:empty { display: none; }
.sb-card[data-card-id="samaa"] .sm-audio-state:not(:empty) { display: inline-block; }

/* ── body ───────────────────────────────────────────────────── */
.sb-card[data-card-id="samaa"] .sm-body {
  flex: 1;
  padding: 16px 14px 20px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: auto;
}

/* ── disc ───────────────────────────────────────────────────── */
.sb-card[data-card-id="samaa"] .sm-disc-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 6px 0 2px;
}
.sb-card[data-card-id="samaa"] .sm-reciter {
  font: 600 14px var(--ui-font, Manrope, Inter);
  color: var(--mz-ink, #2d2a23); letter-spacing: .02em;
}
.sb-card[data-card-id="samaa"] .sm-disc {
  width: 188px; height: 188px;
  border-radius: 50%;
  border: 2px solid var(--gold, currentColor);
  /* explicit deep-navy base + sheen gradient — disc stays dark regardless of theme */
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(0,0,0,0) 70%),
    linear-gradient(160deg, #3a4a6e, #1e2944);
  color: #f7f1de;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  box-shadow:
    0 14px 32px -12px rgba(0,0,0,.35),
    inset 0 0 0 6px rgba(255,255,255,.3);
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, border-color .18s;
  font-family: var(--ui-font, Manrope, Inter);
}
.sb-card[data-card-id="samaa"] .sm-disc:hover { transform: scale(1.025); }
.sb-card[data-card-id="samaa"] .sm-disc:active { transform: scale(.97); }
.sb-card[data-card-id="samaa"] .sm-disc.is-reveal {
  border-color: var(--rose, var(--accent, currentColor));
}
.sb-card[data-card-id="samaa"] .sm-disc-big {
  font: 700 30px var(--ui-font, Manrope); letter-spacing: .04em;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.sb-card[data-card-id="samaa"] .sm-disc-big svg { display: block; }
.sb-card[data-card-id="samaa"] .sm-disc-small {
  font: 500 11px var(--ui-font, Inter);
  /* Disc has a dark gradient bg, so subtext must be LIGHT to be readable */
  color: #f1ead4;
  letter-spacing: .08em; text-transform: uppercase;
  margin-top: 6px; text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.sb-card[data-card-id="samaa"] .sm-disc-big {
  color: #f7f1de;
}

/* ── ring (secondary buttons; auto-fits 3, 4, or 6 by row) ─── */
.sb-card[data-card-id="samaa"] .sm-ring {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.sb-card[data-card-id="samaa"] .sm-ring-btn {
  min-height: 44px;
  /* explicit cream-on-cream chip with dark ink — theme-independent for guaranteed contrast */
  border: 1px solid rgba(45, 42, 35, 0.2);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  font: 600 12px var(--ui-font, Inter);
  color: var(--mz-ink, #2d2a23);
  cursor: pointer;
  letter-spacing: .02em;
}
.sb-card[data-card-id="samaa"] .sm-ring-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(45, 42, 35, 0.45);
}
.sb-card[data-card-id="samaa"] .sm-ring-btn:active {
  background: rgba(255, 255, 255, 1);
}

/* ── grouped controls (used by the revealed-state ring) ─────── */
/* Labeled sections with their own row of chips. Subtle dividers
   keep groups visually separated without an outer box. */
.sb-card[data-card-id="samaa"] .sm-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.sb-card[data-card-id="samaa"] .sm-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-card[data-card-id="samaa"] .sm-group + .sm-group {
  border-top: 1px solid rgba(45, 42, 35, 0.12);
  padding-top: 8px;
}
.sb-card[data-card-id="samaa"] .sm-group-label {
  font: 600 10px var(--ui-font, Inter);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(45, 42, 35, 0.55);
  padding-left: 2px;
}
.sb-card[data-card-id="samaa"] .sm-group-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
/* Outcome row · single primary button spans the row + gold accent. */
.sb-card[data-card-id="samaa"] .sm-group-outcome .sm-group-row {
  grid-template-columns: 1fr;
}
.sb-card[data-card-id="samaa"] .sm-group-btn.is-primary,
.sb-card[data-card-id="samaa"] .sm-group-outcome .sm-group-btn {
  background: var(--mz-gilt, #cf9a3a);
  color: #2d2a23;
  border-color: rgba(45, 42, 35, 0.32);
  font-weight: 700;
}
.sb-card[data-card-id="samaa"] .sm-group-outcome .sm-group-btn:hover {
  background: #e6b04a;
  border-color: rgba(45, 42, 35, 0.55);
}

/* ── pool hint ──────────────────────────────────────────────── */
.sb-card[data-card-id="samaa"] .sm-pool-hint {
  text-align: center;
  font: 500 11px var(--ui-font, Inter);
  color: var(--mz-ink-2, rgba(45,42,35,0.7));
  letter-spacing: .06em; text-transform: uppercase;
  padding-top: 4px;
}

/* ── empty state ────────────────────────────────────────────── */
.sb-card[data-card-id="samaa"] .sm-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 36px 16px 24px; text-align: center;
}
.sb-card[data-card-id="samaa"] .sm-empty-glyph {
  font: 700 48px var(--ui-font, Manrope);
  color: var(--mz-ink-2, rgba(45,42,35,0.7)); opacity: .35; line-height: 1;
}
.sb-card[data-card-id="samaa"] .sm-empty-line {
  font: 600 14px var(--ui-font, Manrope); color: var(--mz-ink, #2d2a23);
}
.sb-card[data-card-id="samaa"] .sm-empty-sub {
  font: 500 12px var(--ui-font, Inter); color: var(--mz-ink-2, rgba(45,42,35,0.7)); opacity: .7;
}

/* ── tag screens ────────────────────────────────────────────── */
.sb-card[data-card-id="samaa"] .sm-tag-title {
  font: 700 12px var(--ui-font, Manrope);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mz-ink-2, rgba(45,42,35,0.7)); text-align: center;
  margin-top: 6px;
}
.sb-card[data-card-id="samaa"] .sm-tag-four {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.sb-card[data-card-id="samaa"] .sm-tag-btn {
  min-height: 56px;
  border: 1.5px solid var(--line, rgba(0,0,0,.15));
  border-radius: 12px;
  background: rgba(255,255,255,0.55);
  color: var(--mz-ink, #2d2a23);
  font: 600 14px var(--ui-font, Manrope);
  cursor: pointer;
  letter-spacing: .04em;
}
.sb-card[data-card-id="samaa"] .sm-tag-correct { border-color: var(--moss, var(--gold, currentColor)); }
.sb-card[data-card-id="samaa"] .sm-tag-slip    { border-color: var(--rose, var(--accent, currentColor)); }
.sb-card[data-card-id="samaa"] .sm-tag-btn:hover { background: var(--sm-paper, #f7f1de); }
.sb-card[data-card-id="samaa"] .sm-tag-cancel {
  align-self: stretch; min-height: 40px;
  border: 0; background: transparent; cursor: pointer;
  font: 500 12px var(--ui-font, Inter);
  color: var(--mz-ink-2, rgba(45,42,35,0.7)); opacity: .7;
  margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.sb-card[data-card-id="samaa"] .sm-tag-cancel:hover { opacity: 1; }
.sb-card[data-card-id="samaa"] .sm-tag-cancel svg { display: block; }

.sb-card[data-card-id="samaa"] .sm-tag-sixteen {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.sb-card[data-card-id="samaa"] .sm-slip-btn {
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--line, rgba(0,0,0,.12));
  border-radius: 8px;
  background: rgba(255,255,255,0.55);
  color: var(--mz-ink, #2d2a23);
  font: 500 11px var(--ui-font, Inter);
  cursor: pointer;
  line-height: 1.2; text-align: center;
}
.sb-card[data-card-id="samaa"] .sm-slip-btn:hover {
  background: var(--sm-paper, #f7f1de);
  border-color: var(--gold, currentColor);
}

/* ── settings gear in header ─────────────────────────────────── */
.sb-card[data-card-id="samaa"] .sm-gear {
  width: 36px; height: 36px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--mz-ink-2, rgba(45,42,35,0.7)); opacity: .7;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.sb-card[data-card-id="samaa"] .sm-gear:hover { background: rgba(0,0,0,.05); opacity: 1; }

/* ── settings panel ──────────────────────────────────────────── */
.sb-card[data-card-id="samaa"] .sm-set-title {
  font: 700 14px var(--ui-font, Manrope);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mz-ink, #2d2a23); text-align: center;
  margin: 4px 0 12px;
}
.sb-card[data-card-id="samaa"] .sm-set-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; gap: 12px;
  background: rgba(255,255,255,.4);
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 10px;
}
.sb-card[data-card-id="samaa"] .sm-set-label {
  flex: 1;
  font: 500 13px var(--ui-font, Inter);
  color: var(--mz-ink, #2d2a23);
}
.sb-card[data-card-id="samaa"] .sm-set-segment {
  display: inline-flex; gap: 2px;
  background: rgba(45,42,35,0.06);
  border-radius: 8px; padding: 2px;
}
.sb-card[data-card-id="samaa"] .sm-set-seg-btn {
  min-width: 38px; min-height: 32px;
  border: 0; background: transparent; cursor: pointer;
  font: 600 13px var(--ui-font, Inter);
  color: var(--mz-ink-2, rgba(45,42,35,0.7));
  border-radius: 6px;
  padding: 4px 10px;
}
.sb-card[data-card-id="samaa"] .sm-set-seg-btn.is-on {
  background: var(--gold, var(--accent, currentColor));
  color: var(--mz-ink, #2d2a23);
  font-weight: 700;
}
.sb-card[data-card-id="samaa"] .sm-set-toggle {
  min-width: 80px; min-height: 36px;
  border: 1px solid var(--line, rgba(0,0,0,.15));
  background: rgba(255,255,255,0.55);
  color: var(--mz-ink-2, rgba(45,42,35,0.7));
  font: 600 12px var(--ui-font, Inter);
  border-radius: 8px; padding: 6px 12px;
  cursor: pointer; letter-spacing: .04em;
}
.sb-card[data-card-id="samaa"] .sm-set-toggle.is-on {
  background: var(--moss, var(--gold, currentColor));
  color: var(--mz-ink, #2d2a23);
  border-color: transparent;
  font-weight: 700;
}
.sb-card[data-card-id="samaa"] .sm-set-section {
  font: 600 11px var(--ui-font, Manrope);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mz-ink-2, rgba(45,42,35,0.7)); opacity: .7;
  margin: 14px 0 4px; text-align: center;
}
.sb-card[data-card-id="samaa"] .sm-set-reciters {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.sb-card[data-card-id="samaa"] .sm-set-reciter {
  min-height: 40px; padding: 6px 8px;
  border: 1px solid var(--line, rgba(0,0,0,.12));
  background: rgba(255,255,255,0.55);
  color: var(--mz-ink-2, rgba(45,42,35,0.7));
  font: 500 11px var(--ui-font, Inter);
  border-radius: 8px; cursor: pointer; text-align: left;
  line-height: 1.2;
}
.sb-card[data-card-id="samaa"] .sm-set-reciter.is-on {
  background: var(--gold, var(--accent, currentColor));
  color: var(--mz-ink, #2d2a23);
  border-color: transparent;
  font-weight: 600;
}

/* ── ranges (range picker section in settings) ──────────────── */
.sb-card[data-card-id="samaa"] .sm-set-ranges {
  display: flex; flex-direction: column; gap: 4px;
}
.sb-card[data-card-id="samaa"] .sm-set-range {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  background: rgba(255,255,255,.45);
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 8px;
  font: 500 12px var(--ui-font, Inter);
  color: var(--mz-ink, #2d2a23);
}
.sb-card[data-card-id="samaa"] .sm-range-label { flex:1; }
.sb-card[data-card-id="samaa"] .sm-range-count {
  font: 500 10px var(--ui-font, Inter);
  color: var(--mz-ink-2, rgba(45,42,35,0.7)); opacity: .6;
  margin-left: 4px;
}
.sb-card[data-card-id="samaa"] .sm-range-x {
  width: 32px; height: 32px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--rose, var(--danger, currentColor)); opacity: .6;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.sb-card[data-card-id="samaa"] .sm-range-x svg { display: block; }
.sb-card[data-card-id="samaa"] .sm-range-x:hover {
  background: rgba(196,97,74,.08); opacity: 1;
}
.sb-card[data-card-id="samaa"] .sm-set-range-empty {
  text-align: center;
  font: 500 11px var(--ui-font, Inter);
  color: var(--mz-ink-2, rgba(45,42,35,0.7)); opacity: .55;
  padding: 12px 4px;
  font-style: italic;
}
.sb-card[data-card-id="samaa"] .sm-set-range-add {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 6px;
  padding: 10px;
  background: rgba(255,255,255,.35);
  border: 1px dashed var(--line, rgba(0,0,0,.15));
  border-radius: 10px;
}
.sb-card[data-card-id="samaa"] .sm-range-row {
  display: flex; gap: 6px; align-items: center;
}
.sb-card[data-card-id="samaa"] .sm-range-row-surah {
  flex-direction: column; align-items: stretch; gap: 4px;
}
.sb-card[data-card-id="samaa"] .sm-range-row-fromto {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.sb-card[data-card-id="samaa"] .sm-range-row-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-top: 2px;
}
.sb-card[data-card-id="samaa"] .sm-range-label-line {
  font: 600 10px var(--ui-font, Inter);
  color: var(--mz-ink-2, rgba(45,42,35,0.7));
  letter-spacing: .12em; text-transform: uppercase;
}
.sb-card[data-card-id="samaa"] .sm-range-select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line, rgba(0,0,0,.15));
  border-radius: 8px;
  background: var(--sm-paper, #f7f1de);
  color: var(--mz-ink, #2d2a23);
  font: 600 13px var(--ui-font, Inter);
  padding: 6px 10px;
  cursor: pointer;
}
.sb-card[data-card-id="samaa"] .sm-range-select:focus {
  outline: 2px solid var(--gold, var(--accent, currentColor));
  outline-offset: -1px;
}
.sb-card[data-card-id="samaa"] .sm-set-range-add label {
  display: flex; flex-direction: column; gap: 2px;
  font: 500 10px var(--ui-font, Inter);
  color: var(--mz-ink-2, rgba(45,42,35,0.7));
  letter-spacing: .08em; text-transform: uppercase;
}
.sb-card[data-card-id="samaa"] .sm-range-in {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line, rgba(0,0,0,.12));
  border-radius: 6px;
  background: var(--sm-paper, #f7f1de);
  color: var(--mz-ink, #2d2a23);
  font: 600 13px ui-monospace, monospace;
  text-align: center;
  padding: 4px 6px;
}
.sb-card[data-card-id="samaa"] .sm-range-in:focus {
  outline: 2px solid var(--gold, var(--accent, currentColor));
  outline-offset: -1px; border-color: transparent;
}
.sb-card[data-card-id="samaa"] .sm-range-add-btn {
  min-height: 40px; padding: 6px 12px;
  border: 0;
  background: var(--gold, var(--accent, currentColor));
  color: var(--mz-ink, #2d2a23);
  font: 700 12px var(--ui-font, Manrope);
  letter-spacing: .02em;
  border-radius: 8px; cursor: pointer;
}
.sb-card[data-card-id="samaa"] .sm-range-add-btn:hover { filter: brightness(1.1); }
.sb-card[data-card-id="samaa"] .sm-range-add-whole {
  background: transparent;
  /* explicit warm gold (theme-independent, was --gold which can resolve to mint) */
  border: 1px solid #7c5b14;
  color: #7c5b14;
}
.sb-card[data-card-id="samaa"] .sm-range-add-whole:hover {
  background: rgba(124, 91, 20, .12);
}