/* Toggle rows: the app's settings rows (build_app.py .li.tapsw + .sw). The WHOLE row is the
   switch, as in iOS Settings, so the target is the full 44px+ row and the pill only shows
   the state. Also holds the small sound switch (.db-sound-toggle) used by the demos.

   <div class="db-toggle-group">
     <button type="button" class="db-toggle-row" role="switch" aria-checked="false" data-db="toggle"
             [data-toggle-target="#sel" data-toggle-class="is-night"]>
       <span class="db-toggle-row__text"><b>Night mode</b><span>Softer, darker colours...</span></span>
       <span class="db-switch" aria-hidden="true"></span>
     </button>
   </div> */
.db-toggle-group{border-radius:14px;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.db-toggle-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;margin:0;border:0;border-top:1px solid rgba(255,255,255,.08);
  background:none;color:var(--fg);font-family:var(--db-font);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background var(--m-dur-fast) var(--m-ease)}
.db-toggle-row:first-child{border-top:0}
.db-toggle-row:hover{background:rgba(255,255,255,.05)}
.db-toggle-row:active{background:rgba(255,255,255,.09)}
.db-toggle-row:focus-visible{outline:3px solid var(--db-focus);outline-offset:-3px;border-radius:14px}
.db-toggle-row__text{flex:1;min-width:0}
.db-toggle-row__text b{display:block;font-size:1rem;font-weight:600;line-height:1.25}
.db-toggle-row__text span{display:block;margin-top:2px;font-size:.84rem;line-height:1.35;color:var(--fg-muted)}
.db-switch{position:relative;flex:none;width:52px;height:32px;border-radius:var(--db-r-pill);background:rgba(255,255,255,.16);
  transition:background var(--m-dur) var(--m-ease);pointer-events:none}
.db-switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.98);
  box-shadow:0 2px 5px rgba(4,6,20,.3);transition:transform var(--m-dur) var(--m-ease-spring)}
.db-toggle-row[aria-checked="true"] .db-switch{background:var(--db-gold)}
.db-toggle-row[aria-checked="true"] .db-switch::after{transform:translateX(20px)}
.db-light .db-toggle-group{background:rgba(255,255,255,.7);border-color:rgba(27,36,64,.12)}
.db-light .db-toggle-row{border-top-color:rgba(27,36,64,.1)}
.db-light .db-toggle-row:hover{background:rgba(27,36,64,.04)}
.db-light .db-switch{background:rgba(27,36,64,.18)}

/* the sound switch: a small pill, OFF until the visitor turns it on */
.db-sound-toggle{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem 0 .8rem;border:0;border-radius:var(--db-r-pill);cursor:pointer;
  background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;color:var(--db-muted);font:600 .92rem var(--db-font);
  transition:background var(--m-dur-fast) var(--m-ease),color var(--m-dur-fast) var(--m-ease)}
.db-sound-toggle:hover{background:rgba(255,255,255,.13);color:var(--db-ink)}
.db-sound-toggle__icon{display:flex}
.db-sound-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.db-sound-toggle.is-on{color:var(--db-ink);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--db-gold) 60%,transparent) inset}
.db-sound-toggle.is-on svg{stroke:var(--db-gold)}

/* a small shelf preview that the toggles act on (demo helper, see demos/toggles.html) */
.db-shelf-preview{padding:14px;border-radius:var(--db-r-lg);background:radial-gradient(130% 100% at 50% -10%,var(--db-night-top),var(--db-night-bottom));
  border:var(--db-border);transition:filter var(--m-dur-slow) var(--m-ease)}
.db-shelf-preview.is-night{filter:brightness(.78) saturate(.8) sepia(.12)}
.db-shelf-preview__label{margin:10px 2px 6px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--db-muted)}
.db-shelf-preview > .db-shelf-preview__label:first-child{margin-top:0}
.db-shelf-preview__row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.db-shelf-preview__row img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;box-shadow:0 4px 10px rgba(4,6,20,.4)}
.db-shelf-preview [hidden]{display:none}

@media (prefers-reduced-motion:reduce){.db-toggle-row,.db-switch,.db-switch::after,.db-shelf-preview,.db-sound-toggle{transition:none}}