/* ============================================================
   Hifzhelper — Setup screen (V3.9.0, switch redesign V3.10.0)
   REVISED from V3.7.x/V3.8.0's 2-card swipeable rail back to ONE
   continuous scrollable page, now that Dhor Plan and Haidh live here
   permanently too (confirmed in chat: no separate nav destinations for
   either — Settings is the only place to reach them, before and after
   onboarding). Reverts the V3.8.0 "remove the width cap, it's a
   multi-card grid now" decision right back the other way: a single
   bounded column is the correct shape again, same category as
   .login-card/#screen-admin, using the same --width-tablet/--width-
   desktop tokens.

   Sections (Profile, Hifz Setup, Dhor Schedule, Haidh) each keep their
   OWN independent save icon+status, same as the old 2-card version —
   only the outer shell changed from a swiped rail to one flowing column;
   each section's save semantics stay genuinely separate (saving Dhor
   Schedule also kicks off generation, saving Haidh also kicks off
   prediction — conflating these into one page-wide Save would silently
   re-trigger both any time either changed).

   V3.10.0: every plain either/or button-pair (gender, mushaf, Juz'/Surah,
   granularity, frequency) becomes a genuine switch/segmented-control —
   one rounded track, a sliding highlighted thumb, replacing the old
   .tajweed-tag button-group look for these specific controls (still
   used elsewhere — days-of-week, slide-in grid cells — unchanged).
   ============================================================ */

/* V3.44: #screen-settings's own background/width-cap overrides
   (V3.43's --surface-app special case) are REMOVED entirely, confirmed
   in chat -- Settings is no longer different from any other screen; it
   picks up the universal --surface-track background and min-height
   like everywhere else (css/base.css's .screen rule). --surface-app
   is retired, no longer used anywhere. Its 4 sections below now use
   the shared .screen-content class (css/base.css) for their own
   30/50 cap, rather than each screen individually duplicating that
   rule -- confirmed explicitly: the screen itself is never
   independently capped, only content is. */

.settings-section {
  /* V3.44: now also .screen-content (index.html) for its white
     background + 30/50 cap -- this rule only adds the border/radius/
     padding/spacing specific to how a Settings section looks, doesn't
     duplicate the background or width-cap .screen-content already
     provides. */
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.settings-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.settings-header-row h2 { margin: 0; }

.settings-hr {
  border: none;
  border-top: 1px solid var(--color-table-border);
  margin: var(--space-lg) 0;
}

.profile-readonly-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-table-border);
}
.profile-readonly-label {
  flex: 0 0 100px;
  font-size: 13px;
  color: var(--color-ink-faint);
}
.profile-readonly-value {
  flex: 1;
  font-size: 14px;
}
.profile-readonly-value.url-copy-row input {
  border: none;
  background: none;
  padding: 0;
  color: var(--color-ink);
}

/* Standalone action button (V3.38) — same pill shape/height as
   .switch-track, filled evergreen since this is a single button now,
   not a 2-way switch (Surah mode removed entirely; see js/settingsScreen.js).
   Reused as its own class rather than .switch-option, which assumes a
   .switch-track flex parent and a sliding .switch-thumb neither of
   which exist here any more. */
.settings-action-btn {
  display: block;
  width: 100%;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: var(--palette-evergreen);
  color: white;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* ---------- Switch / segmented-control (V3.10.0) ----------
   Generic N-way switch: one rounded track, a sliding highlighted thumb
   behind whichever option is active, positioned/sized by JS as a plain
   percentage of the track width (settingsScreen.js's renderSwitch()).
   Used for every plain either/or or either/or/or control on this screen
   (gender, mushaf, granularity, frequency) — replaces the .tajweed-tag
   button-group look for these specific fields (that pattern stays as-is
   for multi-select controls like days-of-week and the slide-in grids). */
.switch-track {
  position: relative;
  display: flex;
  height: 42px;
  border: 1px solid var(--color-table-border);
  border-radius: 999px;
  background: white;
  overflow: hidden;
}
.switch-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--palette-evergreen);
  transition: left 0.2s ease, width 0.2s ease, background 0.2s ease;
  z-index: 0;
}
/* Neutral resting state (Juz'/Surah switch before anything's marked, or
   any switch with no value yet) — a muted, unfilled thumb rather than
   guessing which side to highlight. */
.switch-thumb.neutral {
  background: var(--color-table-border);
}
.switch-option {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-ink);
  cursor: pointer;
  padding: 0 8px;
  transition: color 0.2s ease;
}
.switch-option.active { color: white; }
/* The empty middle zone of a neutral-center 3-way switch (Juz'/Surah) —
   not a real option, just reserves the middle third so the two real
   options sit left/right with a true center rest position between them. */
.switch-neutral-zone {
  flex: 1;
}
.switch-hint {
  font-size: 12px;
  color: var(--color-ink-faint);
  margin: 4px 0 var(--space-sm);
}

/* Small inline variant (V3.11.0) — gender, moved onto the Name row
   itself rather than its own full-width row/label. */
.switch-track-small {
  height: 26px;
  width: 72px;
  flex: 0 0 auto;
  margin-left: auto;
}
.switch-track-small .switch-option {
  font-size: 12px;
  padding: 0 4px;
}
/* V3.45.3: the Juz method switch's tracker option holds an icon
   instead of text (confirmed in chat) -- .btn-icon has no sizing of
   its own anywhere in the app, so it's constrained here specifically
   to fit this switch's own compact 26px-tall track. */
#juzMethodSwitch .btn-icon svg { width: 16px; height: 16px; }

/* Section-subheader (V3.11.0) — "Target for Dhor" reads as a proper
   header (darker, heavier) rather than a plain field label like the
   other <label> elements on this screen. */
.settings-subheader {
  display: block;
  margin-top: 20px;
  font-weight: 700;
  color: var(--color-ink);
  font-size: 15px;
}

#setup_mushaf_picker, #dhor_granularity_picker, #dhor_frequency_picker,
#gender_picker, #openJuzGridBtn { margin-bottom: var(--space-sm); }

.baseline-summary {
  font-size: 12px;
  color: var(--color-ink-faint);
  margin: 4px 0 var(--space-sm);
}

/* Days-of-week — forced to stay on one line always (compact enough that
   wrapping would be worse than shrinking), unlike other button-groups on
   this screen that wrap freely on narrow widths. */
#dhor_days_picker {
  display: flex;
  gap: 4px;
}
#dhor_days_picker .tajweed-tag {
  margin: 0;
  flex: 1;
  padding: 6px 2px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

/* Dhor schedule's portion-per-session row: number input first (left),
   then the Juz'/Half/Quarter switch (right) — reversed from the order
   these were first built in, per direct request. */
.granularity-quantity-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.granularity-quantity-row > .quantity-input-wrap { width: 90px; }
.granularity-quantity-row > .switch-track { flex: 1; min-width: 180px; }

/* Label-left/input-right rows (Default targets, Haidh) — one field per
   row, label and input on the same line rather than stacked. */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 8px 0;
}
.settings-row label { margin: 0; flex: 1; }
.settings-row input {
  width: 110px;
  flex: 0 0 auto;
  text-align: right;
}
.settings-row input[type="date"] { width: 160px; }

/* Juz'/Surah "mark completed sections" slide-in grids (V3.9.0) — replaces
   the old inline mode-toggle-then-grid pattern entirely (2 buttons that
   each open a full overlay now, rather than 2 buttons switching what an
   inline area shows). Reuses .modal-overlay/.modal-card as-is
   (components.css) for the overlay shell/close-icon/scroll behavior; only
   the grid itself needs its own rule, since these use FIXED column counts
   (3 for Juz', 3 for Surah as of V3.10.0's trial — was 2 — unlike the
   auto-fill/minmax responsive grid this project used for the same
   underlying cell style before V3.9.0). */
.section-grid-modal .modal-card {
  max-width: 520px;
}
.section-grid {
  display: grid;
  gap: 6px;
  margin-top: var(--space-md);
}
.section-grid.grid-juz { grid-template-columns: repeat(3, 1fr); }
.section-grid .tajweed-tag {
  margin: 0;
  text-align: center;
  display: block;
}

/* V3.74.0 — Maktab settings: mushaf as radios rather than a select.
   A select hides its options until tapped; these three differ by which
   boundaries they support, which is the whole basis for choosing, so the
   detail line has to be visible while choosing rather than after. */
.mset-mushaf {
  border: 1px solid var(--line, #d9d9d9);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-sm, 8px) var(--space-md, 16px) var(--space-md, 16px);
  margin: 0 0 var(--space-md, 16px);
}
.mset-mushaf legend { font-weight: 600; padding: 0 var(--space-xs, 4px); }
.mset-legend-note { font-weight: 400; color: var(--ink-soft, #8a8a8a); font-size: 12px; }
.mset-mushaf-opt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--space-sm, 8px);
  padding: var(--space-xs, 4px) 0;
  cursor: pointer;
}
/* The detail sits under the name, indented past the radio — the second
   column of both rows, so names and details each line up with each other. */
.mset-mushaf-detail {
  grid-column: 2;
  font-size: 12px;
  color: var(--ink-soft, #8a8a8a);
}

/* The heading truncated to "Maktab Set…" — the header row's first column
   was sized for a short title. Let it take the space it needs; the close
   button keeps its own. */
#screen-maktabSettings .card-header-row { grid-template-columns: 1fr auto; }
#screen-maktabSettings .card-header-row h2 { white-space: normal; }

/* V3.74.2 — Maktab Settings layout.
   Item 2: the four settings ran together with no separation. Each block
   now carries its own bottom margin rather than relying on the inputs'
   incidental spacing. */
#maktabSettingsBody > .form-label,
#maktabSettingsBody > .mset-name-row,
#maktabSettingsBody > .mset-mushaf { margin-bottom: var(--space-lg, 20px); }
#maktabSettingsBody .mset-mushaf { margin-top: var(--space-xs, 4px); }

/* Item 3: name field and save icon share a row, save on the right. */
.mset-name-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-md, 16px);
}
.mset-name-row .mset-name-field { margin-bottom: 0; }
.mset-save-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 0 0 var(--space-xs, 4px);
}
.mset-save-icon svg { width: 26px; height: 26px; }

/* Item 4: "Mushaf" matches "Maktab name" — same label styling, same left
   edge, sitting above the group rather than inset in its border. */
.mset-mushaf-label { display: block; }
.mset-mushaf-label .mset-legend-note { font-weight: 400; }

/* The two numeric settings wrapped, stranding "day" and "days" on their own
   lines beside the field. Label above, field and unit on the line below. */
#maktabSettingsBody .form-label { display: block; }
#maktabSettingsBody .form-label input[type="number"] {
  display: inline-block;
  width: auto;
  min-width: 96px;
  margin-top: var(--space-xs, 4px);
}

/* V3.78.0 (delivery 3): the two admin-managed lists on Maktab Settings. */
.mset-list-label { margin-top: var(--space-lg); }
.mset-list { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-sm); }
.mset-list-row { display: flex; align-items: center; gap: var(--space-sm); padding: 6px 10px; border: 1px solid var(--color-table-border); border-radius: var(--radius-sm); }
.mset-list-row.retired .mset-list-name { color: var(--color-ink-faint); text-decoration: line-through; }
.mset-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: none; font: inherit; font-size: 14px; text-align: left; padding: 0; cursor: pointer; color: var(--color-ink); }
.mset-list-add { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); }
.mset-list-add input[type="text"] { flex: 1; min-width: 0; }
.mset-major-check { display: flex; align-items: center; gap: 4px; font-size: 13px; flex: 0 0 auto; }
.mset-major-check input { width: auto; }
.mset-list-empty { font-size: 13px; color: var(--color-ink-faint); }
.tajweed-retired-note { color: var(--color-ink-faint); font-size: 12px; }

/* V3.79.0: the settings rail's own bits (the rail/card/dot sizing comes
   from the reused log-detail classes in detail-pages.css). */
.mset-tz-box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-md); }
.mset-tz-current { font-size: 14px; color: var(--color-ink); }
.mset-tz-other-row { width: 100%; }
.mset-tz-other-row input { width: 100%; box-sizing: border-box; }

/* The list rows: name input, (groups) description input, (tags) the
   MAJOR/MINOR pill, the retire checkbox. Inputs look quiet until focus. */
/* V3.89.0 (user): air between the add-row and RETIRE */
.mset-list-add { margin-bottom: var(--space-md); }
.mset-list-headers { display: flex; justify-content: flex-end; font-size: 11px; color: var(--color-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--space-sm); padding-right: 2px; }
.mset-name-input, .mset-desc-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  color: var(--color-ink);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 4px 6px;
}
.mset-desc-input { flex: 1.4; color: var(--color-ink-soft); }
.mset-name-input:focus, .mset-desc-input:focus { border-color: var(--color-table-border); background: var(--color-surface, #fff); outline: none; }
.mset-list-row.retired .mset-name-input { color: var(--color-ink-faint); text-decoration: line-through; }
.mset-major-pill { display: flex; flex: 0 0 auto; border: 1px solid var(--color-table-border); border-radius: 999px; overflow: hidden; }
.mset-major-pill button {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 9px;   /* V3.89.0 (user): smaller */
  letter-spacing: 0.03em;
  padding: 3px 8px;   /* V3.89.0: smaller */
  cursor: pointer;
  color: var(--color-ink-soft);
}
.mset-major-pill button.active { background: var(--palette-evergreen); color: white; }
.mset-retire-cb { flex: 0 0 auto; width: 18px; height: 18px; }

/* V3.80.0: the term selector on the General card */
.mset-term-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.mset-term-row input[type="date"] { flex: 0 1 auto; min-width: 0; }

/* ============================================================
   V3.85.0 — the General card to the user's schematic: label-left /
   control-right rows; one Time Zone field; small numeric inputs. */
.mset-row { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0; }
.mset-row-label { flex: 0 0 28%; font-weight: 600; }   /* V3.86.0 (user): wider inputs — the label column shrinks */
.mset-row > input[type="text"], .mset-row .mset-tz-field { flex: 1 1 auto; min-width: 0; }
.mset-row-top { align-items: flex-start; }
.mset-row .mset-mushaf { flex: 1 1 auto; margin: 0; }
.mset-row-narrow .mset-row-label { flex: 1 1 auto; font-weight: 500; }
.mset-row-narrow .mset-num { flex: 0 0 72px; width: 72px; text-align: center; }
.mset-name-row .mset-save-btn { margin-left: var(--space-sm); }
.mset-tz-field {
  text-align: left; cursor: pointer;
  border: 1px solid var(--color-table-border); border-radius: var(--radius-sm);
  background: var(--color-surface, #fff); padding: 8px 10px; font: inherit;
}
.mset-tz-chooser { margin: 0 0 var(--space-md) 28%; padding-left: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.mset-term-row { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
@media (max-width: 560px){
  .mset-row-label { flex-basis: 32%; }   /* V3.86.0: wider inputs on phones too */
  .mset-tz-chooser { margin-left: 0; }
}

/* V3.86.0: SAVE on its own top row (user's schematic) */
.mset-save-row { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
/* V3.86.0: the list add-rows — wide input, icon-sized Add */
.mset-list-add { display: flex; gap: var(--space-sm); align-items: stretch; }
.mset-list-add input[type="text"] { flex: 1 1 auto; min-width: 0; }
.mset-add-btn {
  flex: 0 0 46px; width: 46px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-table-border); border-radius: var(--radius-sm);
  background: var(--color-surface, #fff); cursor: pointer; color: var(--color-ink-soft);
}
.mset-add-btn .mset-save-icon, .mset-add-btn svg { width: 20px; height: 20px; }

/* V3.87.0: the Calendar card */
/* V3.88.1 (user): term rows are TWO lines — the name above, the dates
   below — instead of squeezing the name beside two date inputs. */
/* V3.90.0 (user): quiet name (border only on focus), pill dates, air */
.mset-term-row { display: block; margin: var(--space-lg, 20px) 0; }
.mset-term-row .mset-term-name {
  width: 100%; box-sizing: border-box; margin-bottom: 6px;
  border: 1px solid transparent; background: transparent;
  font: inherit; font-weight: 600; padding: 4px 6px; border-radius: var(--radius-sm);
}
.mset-term-row .mset-term-name:focus { border-color: var(--color-table-border); background: var(--color-surface, #fff); outline: none; }
.mset-term-row .mset-term-dates input[type="date"] {
  border: none; background: var(--color-bg-muted, #ececea);
  border-radius: 999px; padding: 8px 14px;
}
.mset-term-row .mset-term-dates { display: flex; gap: 6px; align-items: center; }
.mset-term-to { font-size: 13px; opacity: .7; }
.mset-cal-row { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.mset-cal-row input[type="date"] { flex: 0 0 auto; }
.mset-cal-row input[type="text"] { flex: 1 1 auto; min-width: 0; }
.mset-list-x { flex: 0 0 auto; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--color-ink-soft); padding: 2px 6px; }
.mset-cal-type { flex: 0 0 auto; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.mset-cal-type-islamic { color: var(--palette-evergreen, #2f7d5d); }
.mset-cal-type-holiday { color: #b4552d; }
.mset-cal-year-row { display: flex; gap: var(--space-sm); align-items: center; margin: var(--space-sm) 0; flex-wrap: wrap; }
.mset-cal-add-row { display: flex; gap: 6px; align-items: stretch; margin-top: var(--space-sm); }
.mset-cal-add-row input[type="text"] { flex: 1 1 auto; min-width: 0; }

/* V3.88.0: the Calendar card head + the two green buttons + the staged popup */
/* V3.92.0/.1 (user): the year rides NEXT TO the heading as a blue pill,
   BASELINE-aligned with the "Calendar" text. V3.92.1: the borderless
   select collapsed to its arrows on iOS (no intrinsic width) — an
   explicit min-width + appearance:none keeps the year visible. */
.mset-cal-head { display: flex; align-items: baseline; justify-content: flex-start; gap: var(--space-md); margin-bottom: var(--space-sm); }
.mset-cal-head .mset-list-label { margin: 0; }
#mset_cal_year {
  appearance: none; -webkit-appearance: none;
  background: var(--color-accent-soft, #D0DBE7); border: none; border-radius: 999px;
  padding: 6px 20px; font: inherit; font-weight: 600; cursor: pointer;
  min-width: 104px; text-align: center; text-align-last: center;
}
/* V3.92.1 (user): side by side — Public Holidays LEFT, Islamic Calendar
   RIGHT — and taller. */
.mset-cal-buttons { display: flex; flex-direction: row; gap: var(--space-sm); justify-content: center; margin-top: var(--space-md); }
.mset-cal-buttons .history-btn { flex: 1 1 0; justify-content: center; padding-top: 14px; padding-bottom: 14px; }
.cal-stage-card .cal-stage-list { max-height: 50vh; overflow-y: auto; margin: var(--space-sm) 0; }
/* V3.89.0: the popup-row render bug (user's screenshot — only the date
   showed). components.css gives every .modal-card input width:100%,
   which stacked the row's flex children full-width; scoped widths
   restore the row: date fixed, text flexes, × always visible. */
.cal-stage-card .mset-cal-row input[type="date"] { width: auto; flex: 0 0 auto; }
.cal-stage-card .mset-cal-row input[type="text"] { width: auto; flex: 1 1 auto; min-width: 0; }
.cal-stage-card .mset-cal-row .mset-list-x { flex: 0 0 auto; }
.cal-stage-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-md); }

/* V3.92.0 (user): the native picker chevron overlapped the date text in
   the pills — gone; the whole pill opens the picker (showPicker on tap
   for engines that don't open on field-click). */
.mset-term-dates input[type="date"]::-webkit-calendar-picker-indicator,
.mset-cal-row input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.mset-term-dates input[type="date"], .mset-cal-row input[type="date"] { cursor: pointer; }

/* V3.93.0 (user): the Calendar card's content centres */
#msetCardCalendar .mset-cal-head { justify-content: center; }
#msetCardCalendar .mset-list-label { display: block; text-align: center; }
#msetCardCalendar .mset-terms, #msetCardCalendar .mset-cal-buttons { max-width: 520px; margin-left: auto; margin-right: auto; }
#msetCardCalendar .mset-term-row .mset-term-name { text-align: center; }
#msetCardCalendar #mset_term_add, #msetCardCalendar #mset_term_add_big { display: block; margin: 0 auto; }
#msetCardCalendar .mset-term-dates { justify-content: center; }

/* ============================================================
   V3.94.0 (user, 2026-08-30) */
/* 38c: the staged rows — name line + italic Hijri beneath */
.cal-stage-card .mset-cal-row { display: block; }
.cal-stage-card .mset-cal-row-main { display: flex; gap: 6px; align-items: center; }
.cal-stage-card .mset-cal-row-main input[type="date"] { width: auto; flex: 0 0 auto; }
.cal-stage-card .mset-cal-row-main input[type="text"] { width: auto; flex: 1 1 auto; min-width: 0; }
.mset-cal-namecol { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mset-cal-namecol input[type="text"] { width: 100%; box-sizing: border-box; }
.mset-cal-hijri { font-size: 13px; opacity: .75; margin: 2px 0 0 6px; }
/* V3.95.0 (user): the border around the Calendar content (her pink box) */
#msetCardCalendar { border: 1.5px solid var(--color-table-border); border-radius: var(--radius-md); padding: var(--space-md); }
/* 39: Calendar as a HEADER; bigger +; content down a notch */
#msetCardCalendar { padding-top: var(--space-lg, 22px); }
.mset-cal-head .mset-list-label { font-size: 18px; font-weight: 700; }
#msetCardCalendar .mset-add-btn { padding: 8px 20px; font-size: 18px; line-height: 1; }

/* V3.96.0 (user, specced 2026-08-08/17): the Haaidha heading — text
   first, the opt-in checkbox to its RIGHT at twice the size. */
.haidh-heading-check { display: flex; align-items: center; gap: var(--space-sm); }
.haidh-heading-check input[type="checkbox"] { width: 32px; height: 32px; transform: none; }