/* =============================================================================
   AIToolsay — Advanced Options panel
   -----------------------------------------------------------------------------
   The disclosure panel + every control inside it, on all ~2,000 tool pages.
   Loaded once by ai-tool-shell and ai-writers-shell.

   WHY EVERY SELECTOR IS PREFIXED `.pg-root .pg-acc-*`
   Each tool blade ships its own <style> (815 of 2,000 do) declaring things like
   `.scg-grid{grid-template-columns:1fr 1fr}`, `.aix-textarea{…}`, `.scg-slider{…}`
   — same class prefix per tool, all at specificity (0,1,0) and all rendered
   AFTER this file. Anything here at (0,1,0) or (0,2,0) would lose to them. The
   `.pg-root .pg-acc-body <thing>` shape lands at (0,3,x) and wins everywhere,
   which is also why this layer is ADDITIVE: the shell's original rules stay put
   as a base so no tool's local override is left standing on nothing.

   Two traps this file has to respect:
     • NEVER declare `display` on .pg-acc-body. The panel opens by toggling an
       `.open` class against `.pg-acc-body{display:none}`; a higher-specificity
       display here would pin it permanently open.
     • The accordion header is a <button>, so it is caught by the site-wide
       `body:not(.admin-shell):not(.theme-dark) button:focus-visible` reset at
       (0,3,2). Its focus rule carries the `body:not(.admin-shell)` prefix to
       clear that bar. See [generate CTA] for the same trap.

   Native <select> caveat: the dropdown POPUP is drawn by the OS, not the page.
   `color-scheme` is what makes it render dark in dark mode; `option{}` colours
   are honoured on Windows/Linux Chrome + Firefox and ignored by macOS Safari.
   The closed control is fully ours.
   ========================================================================== */

.pg-root .pg-acc-trigger,
.pg-root .pg-acc-body {
  --ao-1: #4C8DF2;
  --ao-2: #3680ED;
  --ao-3: #2060C0;
  --ao-glow: 54, 128, 237;
  --ao-field: #fff;
  --ao-field-hover: #fff;
  --ao-line: #e3e8ef;
  --ao-line-strong: #cfd8e6;
  --ao-ink: #1a2230;
  --ao-ink-2: #5b6779;
  --ao-tint: rgba(54, 128, 237, .07);
  --ao-panel: #fbfcfe;
  --ao-knob: #fff;
}

/* ── HEADER ─────────────────────────────────────────────────────────────── */
.pg-root .pg-acc-trigger {
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: transparent;
  transition: background .2s ease;
}
.pg-root .pg-acc-trigger .acc-left {
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ao-ink);
  min-inline-size: 0;
  text-align: start;
}
/* Icon becomes a gradient chip rather than a loose glyph. */
.pg-root .pg-acc-trigger .acc-left .ai {
  flex-shrink: 0;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--ao-1), var(--ao-3));
  box-shadow: 0 6px 14px -6px rgba(var(--ao-glow), .65),
              inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
/* Chevron gets a real hit target instead of a bare 12px glyph. */
.pg-root .pg-acc-trigger .acc-chev {
  flex-shrink: 0;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--ao-ink-2);
  background: var(--ao-tint);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .2s ease, color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-acc-trigger:hover { background: var(--ao-tint); }
  .pg-root .pg-acc-trigger:hover .acc-left .ai {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 10px 20px -8px rgba(var(--ao-glow), .75),
                inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  .pg-root .pg-acc-trigger:hover .acc-chev {
    background: rgba(var(--ao-glow), .16);
    color: var(--ao-2);
  }
}

/* Open: the header reads as the lid of an open drawer. */
.pg-root .pg-acc-trigger.open { background: var(--ao-tint); }
.pg-root .pg-acc-trigger.open .acc-chev {
  background: linear-gradient(135deg, var(--ao-1), var(--ao-3));
  color: #fff;
}

body:not(.admin-shell) .pg-root .pg-acc-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ao-field), 0 0 0 6px rgba(var(--ao-glow), .85);
}

/* ── PANEL ──────────────────────────────────────────────────────────────── */
/* No `display` here — see the header note. */
.pg-root .pg-acc-body {
  padding: 4px 16px 18px;
  border-top: 1px solid var(--ao-line);
}

/* Auto-fit tracks: 1 column on a phone, 2 on a tablet, 3 on a wide card —
   no per-breakpoint bookkeeping, and it overrides each tool's hard-coded
   `1fr 1fr`. min() keeps a single column from overflowing a narrow parent. */
.pg-root .pg-acc-body .pg-opts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px 18px;
  margin-top: 16px;
}

/* ── FIELD LABELS ───────────────────────────────────────────────────────── */
/* Micro-caps on input groups only. Toggle rows keep sentence case: their label
   is a setting name read as a sentence, not a field caption. */
.pg-root .pg-acc-body .pg-opt-group:not([class*="toggle"]) > label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ao-ink-2);
}

/* ── SELECTS ────────────────────────────────────────────────────────────── */
.pg-root .pg-acc-body select {
  inline-size: 100%;
  appearance: none;
  -webkit-appearance: none;
  min-block-size: 44px;
  padding: 11px 40px 11px 14px;
  border: 1.5px solid var(--ao-line);
  border-radius: 11px;
  background-color: var(--ao-field);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6779' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ao-ink);
  cursor: pointer;
  /* Makes the OS-drawn option popup follow the theme. */
  color-scheme: light;
  transition: border-color .18s ease, box-shadow .18s ease,
              background-color .18s ease, transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-acc-body select:hover {
    border-color: rgba(var(--ao-glow), .5);
    background-color: var(--ao-field-hover);
    box-shadow: 0 4px 14px -8px rgba(var(--ao-glow), .55);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233680ED' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  }
}

.pg-root .pg-acc-body select:focus,
.pg-root .pg-acc-body select:focus-visible {
  outline: none;
  border-color: var(--ao-2);
  box-shadow: 0 0 0 4px rgba(var(--ao-glow), .16);
}

/* Honoured by Chrome/Firefox on Windows + Linux; Safari draws its own. */
.pg-root .pg-acc-body select option {
  background: var(--ao-field);
  color: var(--ao-ink);
}

/* ── TEXT INPUTS + TEXTAREAS ────────────────────────────────────────────── */
/* `background-image:none` fixes a real bug: textareas are given class .pg-sel
   by the tool blades, so they inherited the SELECT's chevron and rendered a
   stray arrow floating in the corner of the box. */
.pg-root .pg-acc-body textarea,
.pg-root .pg-acc-body input[type="text"],
.pg-root .pg-acc-body input[type="number"],
.pg-root .pg-acc-body input[type="url"],
.pg-root .pg-acc-body input[type="email"] {
  inline-size: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  background-color: var(--ao-field);
  border: 1.5px solid var(--ao-line);
  border-radius: 11px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ao-ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pg-root .pg-acc-body textarea { min-block-size: 86px; line-height: 1.55; resize: vertical; }

@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-acc-body textarea:hover,
  .pg-root .pg-acc-body input[type="text"]:hover,
  .pg-root .pg-acc-body input[type="number"]:hover { border-color: rgba(var(--ao-glow), .45); }
}
.pg-root .pg-acc-body textarea:focus,
.pg-root .pg-acc-body input[type="text"]:focus,
.pg-root .pg-acc-body input[type="number"]:focus,
.pg-root .pg-acc-body input[type="url"]:focus,
.pg-root .pg-acc-body input[type="email"]:focus {
  outline: none;
  border-color: var(--ao-2);
  box-shadow: 0 0 0 4px rgba(var(--ao-glow), .16);
}

/* ── TOGGLE ROWS ────────────────────────────────────────────────────────── */
/* Matched by substring because the prefix is per-tool (.scg-, .aix-, …) —
   the same pattern the shell's own dark-mode rules already use. */
.pg-root .pg-acc-body [class*="toggle-group"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Sit on the row's baseline instead of stretching. A toggle cell has no
     micro-label above it, so grid's default `stretch` made it taller than the
     label+select cells beside it and the row looked misaligned. */
  align-self: end;
  gap: 14px;
  min-block-size: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--ao-line);
  border-radius: 11px;
  background: var(--ao-field);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pg-root .pg-acc-body [class*="toggle-group"] > label:first-child {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ao-ink);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-acc-body [class*="toggle-group"]:hover {
    border-color: rgba(var(--ao-glow), .45);
    box-shadow: 0 4px 14px -8px rgba(var(--ao-glow), .5);
  }
}

.pg-root .pg-acc-body [class*="switch"] {
  position: relative;
  flex-shrink: 0;
  inline-size: 46px;
  block-size: 26px;
  margin: 0;
  cursor: pointer;
}
.pg-root .pg-acc-body [class*="switch"] input {
  position: absolute;
  opacity: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  cursor: pointer;
}
.pg-root .pg-acc-body [class*="switch"] > [class*="slider"] {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #dfe5ee;
  box-shadow: inset 0 1px 3px rgba(16, 26, 40, .16);
  transition: background .24s ease, box-shadow .24s ease;
  pointer-events: none;
}
.pg-root .pg-acc-body [class*="switch"] > [class*="slider"]::before {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--ao-knob);
  box-shadow: 0 2px 5px rgba(16, 26, 40, .28);
  transition: transform .26s cubic-bezier(.34, 1.4, .64, 1);
}
.pg-root .pg-acc-body [class*="switch"] input:checked + [class*="slider"] {
  background: linear-gradient(135deg, var(--ao-1), var(--ao-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
              0 3px 10px -4px rgba(var(--ao-glow), .7);
}
.pg-root .pg-acc-body [class*="switch"] input:checked + [class*="slider"]::before {
  transform: translateX(20px);
}
[dir="rtl"] .pg-root .pg-acc-body [class*="switch"] input:checked + [class*="slider"]::before {
  transform: translateX(-20px);
}
.pg-root .pg-acc-body [class*="switch"] input:focus-visible + [class*="slider"] {
  box-shadow: 0 0 0 3px var(--ao-field), 0 0 0 6px rgba(var(--ao-glow), .8);
}

/* ── RANGE SLIDERS ──────────────────────────────────────────────────────── */
.pg-root .pg-acc-body input[type="range"] {
  block-size: 6px;
  border-radius: 999px;
  background: #e4e9f1;
}
.pg-root .pg-acc-body input[type="range"]::-webkit-slider-thumb {
  inline-size: 20px;
  block-size: 20px;
  margin-top: -7px;
  background: linear-gradient(135deg, var(--ao-1), var(--ao-3));
  border: 2.5px solid var(--ao-knob);
  box-shadow: 0 2px 8px -2px rgba(var(--ao-glow), .8);
}
.pg-root .pg-acc-body input[type="range"]::-moz-range-thumb {
  inline-size: 20px;
  block-size: 20px;
  background: linear-gradient(135deg, var(--ao-1), var(--ao-3));
  border: 2.5px solid var(--ao-knob);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .pg-root .pg-acc-trigger { padding: 12px 13px; gap: 11px; }
  .pg-root .pg-acc-trigger .acc-left { font-size: 14.5px; gap: 10px; }
  .pg-root .pg-acc-trigger .acc-left .ai { inline-size: 32px; block-size: 32px; border-radius: 10px; }
  .pg-root .pg-acc-body { padding: 4px 13px 16px; }
  .pg-root .pg-acc-body .pg-opts-grid { gap: 13px; margin-top: 14px; }
  /* 16px stops iOS Safari zooming the page when a field takes focus. */
  .pg-root .pg-acc-body select,
  .pg-root .pg-acc-body textarea,
  .pg-root .pg-acc-body input[type="text"],
  .pg-root .pg-acc-body input[type="number"] { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-acc-trigger,
  .pg-root .pg-acc-trigger .acc-left .ai,
  .pg-root .pg-acc-trigger .acc-chev,
  .pg-root .pg-acc-body select,
  .pg-root .pg-acc-body [class*="toggle-group"],
  .pg-root .pg-acc-body [class*="slider"],
  .pg-root .pg-acc-body [class*="slider"]::before { transition: none; }
  .pg-root .pg-acc-trigger:hover .acc-left .ai { transform: none; }
}

/* ── DARK MODE ──────────────────────────────────────────────────────────── */
/* A token swap. `color-scheme: dark` is the load-bearing line: without it the
   OS-drawn option popup stays a white list on a dark page. */
body.theme-dark .pg-root .pg-acc-trigger,
body.theme-dark .pg-root .pg-acc-body {
  --ao-1: #5C9BF5;
  --ao-2: #3F88EF;
  --ao-3: #2A6BCC;
  --ao-glow: 96, 164, 245;
  --ao-field: #1b1b1e;
  --ao-field-hover: #202024;
  --ao-line: #34343a;
  --ao-line-strong: #45454d;
  --ao-ink: #E6E6E9;
  --ao-ink-2: #9A9AA4;
  --ao-tint: rgba(96, 164, 245, .12);
  --ao-panel: #161618;
  --ao-knob: #f2f2f4;
}
/* The shell's older dark rules (`body.theme-dark .pg-acc-body select`, (0,2,2))
   outrank this file's base field rule at (0,2,1) and were still painting
   #202020. Restate the token-driven values here, where the selector reaches
   (0,3,2)+ and the --ao-* tokens are actually in charge. */
body.theme-dark .pg-root .pg-acc-body select,
body.theme-dark .pg-root .pg-acc-body textarea,
body.theme-dark .pg-root .pg-acc-body input[type="text"],
body.theme-dark .pg-root .pg-acc-body input[type="number"],
body.theme-dark .pg-root .pg-acc-body input[type="url"],
body.theme-dark .pg-root .pg-acc-body input[type="email"] {
  background-color: var(--ao-field);
  border-color: var(--ao-line);
  color: var(--ao-ink);
}
body.theme-dark .pg-root .pg-acc-body [class*="toggle-group"] {
  background: var(--ao-field);
  border-color: var(--ao-line);
}

body.theme-dark .pg-root .pg-acc-body select {
  color-scheme: dark;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
@media (hover: hover) and (pointer: fine) {
  body.theme-dark .pg-root .pg-acc-body select:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360A4F5' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  }
}
body.theme-dark .pg-root .pg-acc-body select option { background: #1b1b1e; color: #E6E6E9; }
body.theme-dark .pg-root .pg-acc-body [class*="switch"] > [class*="slider"] {
  background: #3a3a42;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}
/* An ON toggle stayed grey in dark mode — no blue at all.
   The off-state rule above and the checked rule in the light section score an
   EXACT specificity tie at (0,5,1):
     .pg-root .pg-acc-body [class*=switch] input:checked + [class*=slider]
       = 5 classes (.pg-root .pg-acc-body [attr] :checked [attr]) + 1 type (input)
     body.theme-dark .pg-root .pg-acc-body [class*=switch] > [class*=slider]
       = 5 classes (.theme-dark .pg-root .pg-acc-body [attr] [attr]) + 1 type (body)
   On a tie the later rule wins, and the dark block is later in the file — so
   dark mode painted every toggle in its off colour. Restating checked here at
   (0,6,2) settles it. This also finally beats the shell's legacy inline
   `body.theme-dark .pg-acc-body input:checked + [class*=slider]{background:#3680ED}`
   (0,4,2), which had been losing to the off-state rule for the same reason. */
body.theme-dark .pg-root .pg-acc-body [class*="switch"] input:checked + [class*="slider"] {
  background: linear-gradient(135deg, var(--ao-1), var(--ao-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
              0 3px 10px -4px rgba(var(--ao-glow), .75);
}
body.theme-dark .pg-root .pg-acc-body input[type="range"] { background: #3a3a42; }
body.theme-dark .pg-root .pg-acc-body textarea::placeholder,
body.theme-dark .pg-root .pg-acc-body input::placeholder { color: #7C7C86; }

/* =============================================================================
   SELECT POPUP  (assets/js/ai-select.js)
   -----------------------------------------------------------------------------
   The OS-drawn <select> dropdown replaced by a real listbox. Lives in a portal
   on <body>, NOT inside .pg-root — so it cannot inherit the shell's tokens and
   carries its own --aiop-* set. Kept in step with the .pg-acc-body palette.

   The closed control is still the native <select>: everything above styles it,
   this block only styles what appears when it is pressed.
   ========================================================================== */
.aios-panel {
  --aiop-1: #4C8DF2;
  --aiop-2: #3680ED;
  --aiop-3: #2060C0;
  --aiop-glow: 54, 128, 237;
  --aiop-surface: #fff;
  --aiop-raised: #f6f8fc;
  --aiop-line: #e3e8ef;
  --aiop-ink: #1a2230;
  --aiop-ink-2: #5b6779;
  --aiop-ink-3: #8b96a7;
  --aiop-tint: rgba(54, 128, 237, .09);
  --aiop-tint-2: rgba(54, 128, 237, .15);

  position: absolute;
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--aiop-line);
  border-radius: 14px;
  background: var(--aiop-surface);
  box-shadow: 0 4px 10px -4px rgba(16, 26, 40, .10),
              0 24px 48px -20px rgba(16, 26, 40, .32);
  font-family: inherit;
}
.aios-panel.is-open { display: flex; animation: aiosIn .16s cubic-bezier(.2, .8, .3, 1); }
.aios-panel.no-anim { animation: none; }
@keyframes aiosIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Filter — only rendered past 10 options */
.aios-search { display: none; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--aiop-line); }
.aios-panel.has-search .aios-search { display: flex; }
.aios-search svg { inline-size: 15px; block-size: 15px; flex-shrink: 0; color: var(--aiop-ink-3); }
.aios-search input {
  flex: 1; min-inline-size: 0;
  border: 0; outline: none; background: none;
  font: inherit; font-size: 13.5px; color: var(--aiop-ink);
}
.aios-search input::placeholder { color: var(--aiop-ink-3); }

.aios-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Declare the gesture we support. Without it a browser may hand an ambiguous
     drag to the page instead of the list. */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  scrollbar-width: thin;
}
.aios-list::-webkit-scrollbar { inline-size: 8px; }
.aios-list::-webkit-scrollbar-track { background: transparent; }
.aios-list::-webkit-scrollbar-thumb {
  background: rgba(var(--aiop-glow), .4); border-radius: 99px; border: 2px solid var(--aiop-surface);
}

/* <optgroup> label */
.aios-group {
  position: sticky; top: -6px; z-index: 1;
  margin: 2px -6px 2px;
  padding: 9px 16px 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--aiop-ink-3);
  background: var(--aiop-surface);
  box-shadow: 0 1px 0 var(--aiop-line);
}

.aios-opt {
  display: flex; align-items: center; gap: 10px;
  min-block-size: 40px;
  padding: 8px 12px; margin: 1px 0;
  border-radius: 9px;
  font-size: 13.5px; font-weight: 500; line-height: 1.35;
  color: var(--aiop-ink);
  cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease, color .14s ease;
}
/* Options WRAP — a long option must never be clipped. */
.aios-label { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }

.aios-tick {
  flex-shrink: 0; inline-size: 16px; block-size: 16px;
  display: grid; place-items: center;
  color: var(--aiop-2); opacity: 0; transform: scale(.5);
  transition: opacity .16s ease, transform .16s ease;
}
.aios-tick svg { inline-size: 13px; block-size: 13px; }

.aios-opt.is-active { background: var(--aiop-tint); box-shadow: inset 3px 0 0 rgba(var(--aiop-glow), .55); }
.aios-opt.is-sel {
  background: var(--aiop-tint-2);
  box-shadow: inset 3px 0 0 var(--aiop-2);
  color: var(--aiop-3); font-weight: 700;
}
.aios-opt.is-sel .aios-tick { opacity: 1; transform: none; }
.aios-opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.aios-empty { padding: 22px 16px; text-align: center; font-size: 13px; color: var(--aiop-ink-3); }

/* ── PHONE: bottom sheet ─────────────────────────────────────────────────────
   An anchored 240px popover on a 390px screen is a worse experience than the
   OS picker it replaced. Below 576px the panel becomes a sheet instead:
   full-width, thumb-height rows, dismissable backdrop. */
.aios-backdrop {
  position: fixed; inset: 0; z-index: 999;
  display: none;
  background: rgba(10, 16, 26, .45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.aios-backdrop.is-on { display: block; animation: aiosFade .18s ease; }
@keyframes aiosFade { from { opacity: 0 } to { opacity: 1 } }

.aios-panel.is-sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: auto !important;
  max-width: none;
  /* dvh, not vh: when the on-screen keyboard opens for the filter box, vh keeps
     reporting the full screen and the bottom of the sheet ends up behind it. */
  max-height: min(72vh, 560px) !important;
  max-height: min(72dvh, 560px) !important;
  border-radius: 20px 20px 0 0;
  border-inline: 0; border-block-end: 0;
  box-shadow: 0 -12px 40px -12px rgba(16, 26, 40, .35);
  animation: aiosUp .22s cubic-bezier(.2, .8, .3, 1);
  /* clears the home indicator on iOS */
  padding-block-end: env(safe-area-inset-bottom, 0px);
}
@keyframes aiosUp { from { transform: translateY(100%) } to { transform: none } }
.aios-panel.is-sheet.no-anim { animation: none; }
/* Grab handle */
.aios-panel.is-sheet::before {
  content: ""; flex-shrink: 0;
  inline-size: 40px; block-size: 4px;
  margin: 9px auto 3px;
  border-radius: 99px;
  background: var(--aiop-line);
}
.aios-panel.is-sheet .aios-search { padding: 12px 16px; }
.aios-panel.is-sheet .aios-search input { font-size: 16px; }  /* no iOS zoom */
.aios-panel.is-sheet .aios-list { padding: 6px 10px 14px; }
.aios-panel.is-sheet .aios-opt { min-block-size: 48px; font-size: 15px; padding: 10px 14px; border-radius: 11px; }
.aios-panel.is-sheet .aios-group { top: 0; padding: 10px 16px 7px; }

@media (hover: hover) and (pointer: fine) {
  .aios-opt:hover { background: var(--aiop-tint); }
}
@media (prefers-reduced-motion: reduce) {
  .aios-panel, .aios-backdrop, .aios-opt, .aios-tick { animation: none !important; transition: none; }
}

/* ── DARK ──────────────────────────────────────────────────────────────────
   The portal is outside .pg-root but still inside <body>, so body.theme-dark
   is the hook that works. */
body.theme-dark .aios-panel {
  --aiop-1: #5C9BF5;
  --aiop-2: #3F88EF;
  --aiop-3: #7FB4F8;
  --aiop-glow: 96, 164, 245;
  --aiop-surface: #1b1b1e;
  --aiop-raised: #232329;
  --aiop-line: #34343a;
  --aiop-ink: #E6E6E9;
  --aiop-ink-2: #9A9AA4;
  --aiop-ink-3: #82828C;
  --aiop-tint: rgba(96, 164, 245, .13);
  --aiop-tint-2: rgba(96, 164, 245, .22);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .55),
              0 24px 50px -20px rgba(0, 0, 0, .8);
}
body.theme-dark .aios-panel.is-sheet { box-shadow: 0 -12px 40px -12px rgba(0, 0, 0, .8); }
body.theme-dark .aios-backdrop { background: rgba(0, 0, 0, .6); }

/* Page held still behind the mobile sheet. JS also pins body{position:fixed;top:-Ypx}
   because on iOS overflow:hidden alone does not hold the scroll. */
body.aios-locked { overflow: hidden; }