/* ═══════════════════════════════════════════════════════════════════════
   EssayCraft Pro — READING CONTROLS  (accessibility text toolbar)
   Copyright (c) 2026 Blade Research Inc. All rights reserved.

   A fully self-contained, opt-in reader toolbar that works on EVERY profile
   — client dashboard (#ecp-app / #ecp-main), editor Workroom (#ecp-wr /
   #ecp-wr-main) and the logged-out landing (.ecp-landing).

   It lets a user:
     • grow / shrink ALL on-screen text  (A− / A+)   → var(--ecp-rc-zoom)
     • pick a text style  (font family)             → body.ecp-rc-has-font
     • pick a reading text colour                    → body.ecp-rc-has-color

   DESIGN CONTRACT — "do not tamper":
   Everything below is namespaced ecp-rc-* and every effect is GATED behind a
   variable/class that JS only sets when the user opts in. With no saved
   preference, --ecp-rc-zoom = 1 (a no-op) and no body class is present, so the
   app renders byte-for-byte as it did before. Nothing here overrides an
   existing rule until the user chooses to.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1) TEXT SIZE  — scale the content scroller(s) with `zoom`.
   The app's CSS is ~99% px-based, so a root font-size change would do nothing.
   `zoom` scales the rendered content of the scrollers reliably on every screen.
   Default is 1 → completely inert until the user presses A+/A−.
   ───────────────────────────────────────────────────────────────────────── */
.ecp-shell #ecp-main,
#ecp-wr-main,
body > #ecp-app > .ecp-landing,
.ecp-landing {
  zoom: var(--ecp-rc-zoom, 1);
}

/* Fixed overlays live INSIDE the scroller here (credits / references modals).
   Counter-zoom them so a magnified page never drags a modal off-screen.
   --ecp-rc-zoom-inv is set by JS to exactly 1 / zoom. */
#ecp-main .ecp-modal-overlay,
#ecp-main .ecp-auth-modal,
#ecp-wr-main .ecp-modal-overlay {
  zoom: var(--ecp-rc-zoom-inv, 1);
}

/* Fallback for engines that do not implement `zoom` (JS adds body.ecp-rc-nozoom
   only when it detects that, and only when a non-100% size is chosen). The
   scroller is scaled from its top-left and its box is divided back out so the
   layout still fills the viewport. */
body.ecp-rc-nozoom .ecp-shell #ecp-main,
body.ecp-rc-nozoom #ecp-wr-main,
body.ecp-rc-nozoom .ecp-landing {
  zoom: 1;
  transform: scale(var(--ecp-rc-zoom, 1));
  transform-origin: 0 0;
  width: var(--ecp-rc-zoom-pct, 100%);
  height: var(--ecp-rc-zoom-pct, 100%);
}

/* ─────────────────────────────────────────────────────────────────────────
   2) TEXT STYLE  — apply the chosen family to readable text only.
   No icon fonts exist in this app (icons are emoji/SVG), so this is safe.
   Gated on body.ecp-rc-has-font; family carried in --ecp-rc-font.
   ───────────────────────────────────────────────────────────────────────── */
body.ecp-rc-has-font :is(#ecp-main, #ecp-wr-main, .ecp-landing)
  :where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, td, th, span, label, a,
         strong, em, b, i, small, blockquote, figcaption,
         button, input, textarea, select, option) {
  font-family: var(--ecp-rc-font) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   3) TEXT COLOUR — recolour prose only (never buttons, pills, badges, icons),
   so the UI chrome keeps its meaning. Gated on body.ecp-rc-has-color.
   ───────────────────────────────────────────────────────────────────────── */
body.ecp-rc-has-color :is(#ecp-main, #ecp-wr-main, .ecp-landing)
  :where(p, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6,
         blockquote, figcaption, label, small, strong, em, b, i) {
  color: var(--ecp-rc-color) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   3b) ADVANCED TYPOGRAPHY — weight / letter-spacing / line-height.
   Each gated on its own body class, so every one is inert until chosen.
   Weight deliberately EXCLUDES headings and <strong>/<b> so the page keeps its
   visual hierarchy instead of flattening to a single weight.
   ───────────────────────────────────────────────────────────────────────── */
body.ecp-rc-has-weight :is(#ecp-main, #ecp-wr-main, .ecp-landing)
  :where(p, li, dd, dt, td, label, small, blockquote, figcaption) {
  font-weight: var(--ecp-rc-weight) !important;
}
body.ecp-rc-has-spacing :is(#ecp-main, #ecp-wr-main, .ecp-landing)
  :where(p, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6, label, small, blockquote, figcaption) {
  letter-spacing: var(--ecp-rc-spacing) !important;
}
body.ecp-rc-has-line :is(#ecp-main, #ecp-wr-main, .ecp-landing)
  :where(p, li, dd, dt, td, blockquote, figcaption) {
  line-height: var(--ecp-rc-line) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   4) THE WIDGET  — launcher + panel. Anchored bottom-LEFT (bottom-right is
   used by the live-message popup). Appended to <body>, so it is NEVER zoomed.
   Theme-aware via body.ecp-rc-dark (JS mirrors the app's dark state).
   ═══════════════════════════════════════════════════════════════════════ */
#ecp-rc {
  --rc-bg:      #ffffff;
  --rc-fg:      #16212e;
  --rc-sub:     #5b6b7d;
  --rc-line:    #e4e9f0;
  --rc-soft:    #f4f7fb;
  --rc-soft2:   #eef2f8;
  --rc-teal:    #0f9aa0;
  --rc-teal-d:  #0c7f84;
  --rc-gold:    #e2b23c;
  --rc-shadow:  0 22px 60px rgba(16, 34, 52, .26), 0 2px 8px rgba(16, 34, 52, .10);
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 2147483200;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.ecp-rc-dark #ecp-rc {
  --rc-bg:    #14212e;
  --rc-fg:    #e8eef7;
  --rc-sub:   #93a4b8;
  --rc-line:  #24384a;
  --rc-soft:  #1b2c3b;
  --rc-soft2: #223649;
  --rc-shadow: 0 22px 60px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
}

/* ── Launcher button ── */
.ecp-rc-launch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--rc-line);
  border-radius: 16px;
  background: var(--rc-bg);
  color: var(--rc-fg);
  box-shadow: var(--rc-shadow);
  cursor: pointer;
  font-weight: 800;
  line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ecp-rc-launch:hover  { transform: translateY(-2px); }
.ecp-rc-launch:active { transform: translateY(0); }
.ecp-rc-launch:focus-visible { outline: 3px solid var(--rc-teal); outline-offset: 2px; }
.ecp-rc-launch .ecp-rc-launch-a  { font-size: 15px; }
.ecp-rc-launch .ecp-rc-launch-aa { font-size: 22px; margin-left: -3px; }

/* ── Panel ── */
.ecp-rc-panel {
  position: absolute;
  left: 0;
  bottom: 62px;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: var(--rc-bg);
  color: var(--rc-fg);
  border: 1px solid var(--rc-line);
  border-radius: 18px;
  box-shadow: var(--rc-shadow);
  padding: 16px 16px 18px;
  transform-origin: bottom left;
  transform: translateY(10px) scale(.97);
  opacity: 0;
  visibility: hidden;
  transition: transform .18s ease, opacity .18s ease, visibility .18s;
}
#ecp-rc.ecp-rc-open .ecp-rc-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}

.ecp-rc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ecp-rc-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ecp-rc-title-ic { font-size: 16px; }
.ecp-rc-close {
  border: none;
  background: var(--rc-soft);
  color: var(--rc-sub);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.ecp-rc-close:hover { background: var(--rc-soft2); color: var(--rc-fg); }

.ecp-rc-sec { margin-top: 14px; }
.ecp-rc-sec:first-of-type { margin-top: 4px; }
.ecp-rc-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rc-sub);
  margin: 0 0 8px;
}

/* ── Size stepper ── */
.ecp-rc-size {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}
.ecp-rc-step {
  height: 46px;
  border: 1px solid var(--rc-line);
  border-radius: 12px;
  background: var(--rc-soft);
  color: var(--rc-fg);
  cursor: pointer;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.ecp-rc-step:hover:not(:disabled) { background: var(--rc-soft2); border-color: var(--rc-teal); }
.ecp-rc-step:active:not(:disabled) { transform: scale(.97); }
.ecp-rc-step:disabled { opacity: .4; cursor: not-allowed; }
.ecp-rc-step-minus { font-size: 18px; }
.ecp-rc-step-plus  { font-size: 22px; }
.ecp-rc-step .ecp-rc-step-a { font-weight: 800; }
.ecp-rc-step-minus .ecp-rc-step-a { font-size: 12px; }
.ecp-rc-step-plus  .ecp-rc-step-a { font-size: 17px; }

.ecp-rc-size-read {
  min-width: 78px;
  text-align: center;
  padding: 0 4px;
}
/* Type-in size box. font-size stays >= 16px so iOS Safari does not
   auto-zoom the whole page the moment the field is focused. */
.ecp-rc-size-inwrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
}
.ecp-rc-size-input {
  width: 3.2em;
  padding: 2px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--rc-fg);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  text-align: right;
  font-family: inherit;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ecp-rc-size-input::-webkit-outer-spin-button,
.ecp-rc-size-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ecp-rc-size-input:hover  { border-color: var(--rc-line); }
.ecp-rc-size-input:focus  { outline: none; border-color: var(--rc-teal); background: var(--rc-soft); }
.ecp-rc-size-pct { font-size: 15px; font-weight: 800; color: var(--rc-sub); }
.ecp-rc-size-cap {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rc-sub);
}

/* ── Size slider — big touch target on phones, thin track on desktop ── */
.ecp-rc-size-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 14px 0 2px;
  background: transparent;
  touch-action: pan-y;
}
.ecp-rc-size-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px; background: var(--rc-soft2);
}
.ecp-rc-size-range::-moz-range-track {
  height: 6px; border-radius: 99px; background: var(--rc-soft2);
}
.ecp-rc-size-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9px;
  border-radius: 50%; border: 3px solid #fff;
  background: var(--rc-teal);
  box-shadow: 0 2px 8px rgba(16,34,52,.30);
  cursor: pointer;
}
.ecp-rc-size-range::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%; border: 3px solid #fff;
  background: var(--rc-teal);
  box-shadow: 0 2px 8px rgba(16,34,52,.30);
  cursor: pointer;
}
.ecp-rc-size-range:focus { outline: none; }
.ecp-rc-size-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(15,154,160,.30); }
body.ecp-rc-dark .ecp-rc-size-range::-webkit-slider-thumb,
body.ecp-rc-dark .ecp-rc-size-range::-moz-range-thumb { border-color: #14212e; }

.ecp-rc-size-scale {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 700; color: var(--rc-sub);
}

/* ── Quick presets ── */
.ecp-rc-size-presets {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.ecp-rc-size-preset {
  flex: 1 1 auto;
  min-width: 54px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--rc-line);
  border-radius: 9px;
  background: var(--rc-soft);
  color: var(--rc-fg);
  font-size: 12px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ecp-rc-size-preset:hover { border-color: var(--rc-teal); background: var(--rc-soft2); }
.ecp-rc-size-preset.is-active {
  background: var(--rc-teal); border-color: var(--rc-teal); color: #fff;
}

/* ── Chip grids (styles) ── */
.ecp-rc-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ecp-rc-chip {
  border: 1px solid var(--rc-line);
  border-radius: 11px;
  background: var(--rc-soft);
  color: var(--rc-fg);
  padding: 10px 10px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  line-height: 1.15;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ecp-rc-chip small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rc-sub);
  margin-bottom: 2px;
}
.ecp-rc-chip:hover { border-color: var(--rc-teal); }
.ecp-rc-chip.is-active {
  border-color: var(--rc-teal);
  background: color-mix(in srgb, var(--rc-teal) 12%, var(--rc-bg));
  box-shadow: inset 0 0 0 1px var(--rc-teal);
}

/* ── Font picker: grouped + scrollable (many options now) ── */
.ecp-rc-fontbox {
  max-height: 268px;
  overflow-y: auto;
  padding: 2px 4px 2px 0;
}
.ecp-rc-fontbox .ecp-rc-sublabel:first-child { margin-top: 0; }

/* ── Advanced typography: segmented rows ── */
.ecp-rc-adv {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rc-line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ecp-rc-advrow { display: flex; flex-direction: column; gap: 5px; }
.ecp-rc-advlbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rc-sub);
}
.ecp-rc-seg {
  display: flex;
  gap: 4px;
  background: var(--rc-soft);
  border: 1px solid var(--rc-line);
  border-radius: 10px;
  padding: 3px;
}
.ecp-rc-segb {
  flex: 1;
  min-width: 0;
  height: 28px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--rc-fg);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .14s ease, color .14s ease;
}
.ecp-rc-segb:hover { background: var(--rc-soft2); }
.ecp-rc-segb.is-active {
  background: var(--rc-teal);
  color: #fff;
}

/* ── Colour: pills row (Default / Auto / Custom picker) ── */
.ecp-rc-sublabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rc-sub);
  margin: 10px 0 6px;
}
.ecp-rc-cbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.ecp-rc-cpill {
  flex: 1;
  height: 34px;
  border: 1px solid var(--rc-line);
  border-radius: 10px;
  background: var(--rc-soft);
  color: var(--rc-fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ecp-rc-cpill:hover { border-color: var(--rc-teal); }
.ecp-rc-cpill.is-active {
  border-color: var(--rc-teal);
  background: color-mix(in srgb, var(--rc-teal) 14%, var(--rc-bg));
  box-shadow: inset 0 0 0 1px var(--rc-teal);
}
.ecp-rc-cpick {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  border: 1px solid var(--rc-line);
  border-radius: 10px;
  background: var(--rc-soft);
  color: var(--rc-fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.ecp-rc-cpick:hover { border-color: var(--rc-teal); }
.ecp-rc-cpick-ic { font-size: 14px; }
.ecp-rc-cinput {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* ── Colour: palette grid ── */
.ecp-rc-pal {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 7px;
}
.ecp-rc-recent { margin-bottom: 4px; }
.ecp-rc-pal-sw {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .12);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}
body.ecp-rc-dark .ecp-rc-pal-sw { border-color: rgba(255, 255, 255, .16); }
.ecp-rc-pal-sw:hover { transform: scale(1.12); }
.ecp-rc-pal-sw.is-active {
  box-shadow: 0 0 0 2px var(--rc-bg), 0 0 0 4px var(--rc-teal);
}
.ecp-rc-pal-sw.is-active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* ── Fancy text generator ── */
.ecp-rc-hint {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--rc-teal);
  text-transform: none;
  margin-left: 4px;
}
.ecp-rc-fx-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rc-line);
  border-radius: 11px;
  background: var(--rc-soft);
  color: var(--rc-fg);
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease;
  box-sizing: border-box;
}

/* CRITICAL — the styled letters are Mathematical Alphanumeric codepoints
   (U+1D400…). They only render when a font that contains them is used. Themes
   (Divi) force their own webfont site-wide with !important, and that font has
   no glyphs for these letters — so every style collapses to one plain look.
   We pin a stack of fonts that DO cover the block (present on Windows / macOS /
   Android) and defeat the theme with !important. font-style/weight are forced
   normal so untransformed text isn't skewed; the intrinsic bold/italic of each
   math glyph is a property of the character itself and is preserved. */
.ecp-rc-fx-input,
.ecp-rc-fx-prev {
  font-family: "Segoe UI", "Segoe UI Symbol", -apple-system, BlinkMacSystemFont,
               "Apple Symbols", "STIX Two Math", "Noto Sans", "Noto Sans Math",
               "Noto Sans Symbols", "Noto Sans Symbols 2", "Cambria Math",
               "DejaVu Sans", system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
.ecp-rc-fx-input:focus { border-color: var(--rc-teal); }
.ecp-rc-fx-input::placeholder { color: var(--rc-sub); }
.ecp-rc-fx-list {
  margin-top: 8px;
  max-height: 224px;
  overflow-y: auto;
  border: 1px solid var(--rc-line);
  border-radius: 12px;
}
.ecp-rc-fx-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-bottom: 1px solid var(--rc-line);
  background: transparent;
  color: var(--rc-fg);
  cursor: pointer;
  text-align: left;
  transition: background .12s ease;
}
.ecp-rc-fx-row:last-child { border-bottom: none; }
.ecp-rc-fx-row:hover { background: var(--rc-soft); }
.ecp-rc-fx-name {
  flex: 0 0 82px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rc-sub);
}
.ecp-rc-fx-prev {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ecp-rc-fx-copy {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  color: var(--rc-teal);
  border: 1px solid var(--rc-line);
  border-radius: 8px;
  padding: 4px 9px;
  transition: background .12s ease, color .12s ease;
}
.ecp-rc-fx-row:hover .ecp-rc-fx-copy { background: color-mix(in srgb, var(--rc-teal) 12%, var(--rc-bg)); }
.ecp-rc-fx-copy.is-done { color: #fff; background: var(--rc-teal); border-color: var(--rc-teal); }

/* ── Reset all ── */
.ecp-rc-reset {
  margin-top: 16px;
  width: 100%;
  height: 40px;
  border: 1px solid var(--rc-line);
  border-radius: 11px;
  background: transparent;
  color: var(--rc-sub);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ecp-rc-reset:hover { background: var(--rc-soft); color: var(--rc-fg); border-color: var(--rc-teal); }

/* ── Mobile: dock the panel as a bottom sheet ── */
@media (max-width: 560px) {
  #ecp-rc { left: 16px; bottom: 16px; }
  .ecp-rc-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
    max-height: 78vh;
    border-radius: 20px;
  }
  /* Phones: bigger hit areas for the size controls */
  .ecp-rc-step { height: 52px; }
  .ecp-rc-size-preset { min-height: 40px; font-size: 13px; }
  .ecp-rc-size-range { margin: 18px 0 2px; }
  .ecp-rc-size-range::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -12px; }
  .ecp-rc-size-range::-moz-range-thumb { width: 30px; height: 30px; }
}

/* ── Respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .ecp-rc-launch,
  .ecp-rc-panel,
  .ecp-rc-step,
  .ecp-rc-sw,
  .ecp-rc-chip { transition: none; }
}