/* Uiverse adaptations: chase2k25/slimy-chipmunk-97 (glass glider) and
   Admin12121/massive-dodo-67 (recessed switch). MIT; see THIRD_PARTY_UI_LICENSES.md.
   Existing buttons/inputs own every action. No new layout, fake trend or success state. */
:root {
  --control-orange:#ffc082;
  --control-edge:rgba(255,205,153,.34);
  --control-press:140ms;
  --control-switch:420ms;
  --control-glide:500ms;
}
/* One glass bed + one moving plate, adapted to the real nine-item vertical rail.
   Width and position follow measured original buttons, never a hard-coded /3. */
#nav.has-motion-plate {
  border:1px solid rgba(239,208,172,.13);
  border-radius:19px;
  background:rgba(236,216,192,.035);
  box-shadow:inset 1px 1px 4px rgba(255,238,215,.11),inset -1px -1px 6px rgba(0,0,0,.24);
  padding:6px 0;
  isolation:isolate;
}
#nav .glass-nav-plate {
  position:absolute;top:0;left:0;z-index:0;pointer-events:none;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,166,83,.22),rgba(225,147,73,.65));
  border:1px solid rgba(255,215,166,.47);
  box-shadow:inset 1px 1px 4px rgba(255,237,204,.36),inset -1px -1px 6px rgba(99,55,20,.17),0 4px 12px rgba(12,9,5,.25);
  transform-origin:top left;
}
#nav .glass-nav-plate::before {
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,236,196,.13),transparent 52%);
  box-shadow:inset 0 0 10px rgba(255,218,155,.10);pointer-events:none;
}
#nav .nav-item>span {display:block;font-size:12px;line-height:1.4;}
#nav .nav-item {max-width:100%;transition:color 300ms ease-in-out,background 180ms,transform var(--control-press);}
#nav .nav-item.active,#nav.has-motion-plate .nav-item.active {color:#fff4e4;background:transparent;box-shadow:none;}
#nav .nav-item.active .icon {color:#fff4e4;}
#nav .nav-item:not(.active) {color:#ded3c4;}
#nav .nav-item:not(.active):hover {color:#fff6e9;background:rgba(255,221,182,.06);}
#nav .nav-item:focus-visible {outline:2px solid var(--control-orange);outline-offset:-3px;}
/* Original checkbox remains focusable and covers the physical track. The whole
   associated label also works. Consent and human-approval boxes are not restyled. */
.zh-switch-row {cursor:pointer;}
.zh-switch-row .zh-switch {
  position:relative;display:inline-flex;vertical-align:middle;flex:0 0 80px;
  width:80px;height:46px;min-width:80px;align-items:center;justify-content:center;
  margin:0;isolation:isolate;
}
.zh-switch-row .zh-switch>input[type=checkbox] {
  position:absolute;inset:0;z-index:3;display:block;opacity:0;
  width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:0;
  cursor:pointer;appearance:auto;
}
.zh-switch-track {
  display:block;position:relative;width:78px;height:40px;border-radius:40px;
  background:#24231f;border:1px solid #5c5141;
  box-shadow:inset 0 4px 8px #13120fd9,0 2px 4px -1px #d8c49c28;
  pointer-events:none;transition:border-color 280ms,background 280ms;
}
.zh-switch-knob {
  position:absolute;top:4px;left:4px;z-index:2;display:block;width:30px;height:30px;
  border-radius:50%;border:1px solid #e0c99f25;
  background:linear-gradient(#645947,#373329);
  box-shadow:inset 0 3px 3px #f4d2a133,0 3px 8px #0009;
  transform:translateX(0);transition:transform var(--control-switch) cubic-bezier(.22,1.2,.36,1),box-shadow var(--control-press);
}
.zh-switch-indicator {
  position:absolute;top:11px;right:11px;display:block;width:16px;height:16px;
  border-radius:50%;border:2px solid #b5a48b;
  background:transparent;opacity:.9;transform:translateX(0);
  transition:transform var(--control-switch) cubic-bezier(.22,1.2,.36,1),border-color 280ms,background 280ms,opacity 180ms;
}
.zh-switch>input:checked+.zh-switch-track {border-color:#b88c58;background:#30271c;}
.zh-switch>input:checked+.zh-switch-track .zh-switch-knob {
  transform:translateX(38px);background:linear-gradient(#827052,#51402b);
  box-shadow:inset 0 3px 3px #fbe2b845,0 3px 8px #0009;
}
.zh-switch>input:checked+.zh-switch-track .zh-switch-indicator {
  transform:translateX(-35px);border-color:#ffc383;background:#f3a75424;opacity:1;
}
.zh-switch>input:checked+.zh-switch-track .zh-switch-indicator::after {
  content:"";position:absolute;inset:4px;border-radius:50%;background:#ffd093;
}
.zh-switch>input:focus-visible+.zh-switch-track {outline:2px solid #ffd2a2;outline-offset:4px;}
.zh-switch>input:active:not(:disabled)+.zh-switch-track .zh-switch-knob {box-shadow:inset 0 2px 5px #17130e77,0 1px 3px #0008;}
.zh-switch>input:disabled {cursor:wait;}
.zh-switch:has(input:disabled) {opacity:.55;}
.zh-switch[data-switch-pulse=on] .zh-switch-indicator,.zh-switch[data-switch-pulse=off] .zh-switch-indicator {animation:zh-indicator-confirm 440ms ease-out both;}
@keyframes zh-indicator-confirm {0%{opacity:1}32%{opacity:.3}100%{opacity:1}}
#daily-sync-form .zh-switch-row,#inbox-config-form .zh-switch-row {display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:48px;flex-wrap:nowrap;}
#daily-sync-form .zh-switch-help,#inbox-config-form .zh-switch-help {display:block;flex-basis:100%;color:var(--muted);font-size:12px;line-height:1.8;max-width:60ch;}
.inbox-list-head .zh-switch-row {display:flex;align-items:center;gap:10px;font-size:13px;}
/* Action buttons borrow only the physical surface. They do not acquire an
   on/off indicator and never animate a confirmation before the real result. */
button.zh-press {
  border-color:var(--control-edge);
  box-shadow:inset 0 1px 1px #ffebc42b,inset 0 -1px 1px #18130c33,0 3px 6px #0b090329;
  transition:transform var(--control-press),box-shadow var(--control-press),background 220ms,border-color 220ms;
}
button.zh-press:not(.primary):not(.send-btn) {background:linear-gradient(160deg,#65543b22,#27252055);}
button.zh-press.primary,button.zh-press.send-btn {background:linear-gradient(160deg,#ffbe77,#f09b4c);color:#302013;}
button.zh-press:active:not(:disabled) {transform:translateY(1px) scale(.975);box-shadow:inset 0 2px 4px #32200c35,0 1px 2px #0003;}
button.zh-press:disabled {box-shadow:inset 0 1px 2px #d7bf9121;}
button.glass-assistant-entry.zh-press:active:not(:disabled) {transform:translateX(-50%) translateY(1px) scale(.975);}
@media(hover:hover) {
  button.zh-press:not(:disabled):hover {border-color:#e7ba7f7d;box-shadow:inset 0 1px 2px #fff0d03b,0 5px 10px #100a032b;}
  button.zh-press.primary:not(:disabled):hover,button.zh-press.send-btn:not(:disabled):hover {background:linear-gradient(160deg,#ffcc8b,#ffaa59);}
}
@media(max-width:760px) {
  #nav.has-motion-plate {padding:7px 5px;border-radius:17px;}
  #nav .glass-nav-plate {border-radius:13px;}
  #nav .nav-item>span {font-size:14px;line-height:1.5;}
  .zh-switch-row .zh-switch {flex-basis:80px;}
  #daily-sync-form .zh-switch-row,#inbox-config-form .zh-switch-row {gap:12px;line-height:1.7;}
  .inbox-list-head .zh-switch-row {width:100%;justify-content:space-between;}
}
@media(prefers-reduced-motion:reduce) {
  .zh-switch *,.glass-nav-plate,button.zh-press {animation:none!important;transition:none!important;}
}
@media(forced-colors:active) {
  .zh-switch-track,.zh-switch-knob,.zh-switch-indicator,#nav .glass-nav-plate {forced-color-adjust:none;background:Canvas;border-color:CanvasText;box-shadow:none;}
  .zh-switch>input:checked+.zh-switch-track .zh-switch-indicator {background:Highlight;border-color:Highlight;}
  #nav .nav-item.active {outline:2px solid Highlight;outline-offset:-3px;color:CanvasText;}
}