/* Bencho-inspired paired utility controls: expanding hover disc and icon press. */
[data-study="quiet-cards"] .quiet-utility-group {
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
}
[data-study="quiet-cards"] .sidebar-footer > .quiet-utility-group {
  gap:0;
  width:fit-content;
  margin:0 0 20px -9px;
}
[data-study="quiet-cards"] .quiet-utility-group :is(.quiet-theme-toggle,.quiet-sound-toggle) {
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 36px;
  width:36px;
  height:36px;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  translate:none;
  scale:1;
  cursor:pointer;
  transition:color 160ms ease;
}
[data-study="quiet-cards"] .quiet-utility-group button::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:color-mix(in srgb,var(--ink) 8%,transparent);
  opacity:0;
  scale:.86;
  pointer-events:none;
  transition:opacity 150ms ease,scale 260ms cubic-bezier(.3,1.12,.4,1),background-color 160ms ease;
}
[data-study="quiet-cards"] .quiet-utility-group button:is(:hover,:focus-visible):not(:disabled) { color:var(--ink); }
[data-study="quiet-cards"] .quiet-utility-group button:is(:hover,:focus-visible):not(:disabled)::before {
  opacity:1;
  scale:1;
}
[data-study="quiet-cards"] .quiet-utility-group button:focus-visible {
  outline:none;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px color-mix(in srgb,var(--ink) 35%,transparent);
}
[data-study="quiet-cards"] .quiet-utility-group :is(.quiet-theme-toggle,.quiet-sound-toggle) > svg {
  position:absolute;
  inset:0;
  margin:auto;
  width:18px;
  height:18px;
  pointer-events:none;
  scale:1;
  transition:scale 260ms cubic-bezier(.3,1.12,.4,1),opacity 300ms cubic-bezier(.2,0,0,1),transform 300ms cubic-bezier(.2,0,0,1),filter 300ms cubic-bezier(.2,0,0,1);
}
/* Smaller moon silhouette; 2.25 × 16 / 24 keeps the shared 1.5px rendered stroke. */
[data-study="quiet-cards"] .quiet-utility-group .quiet-theme-toggle > .quiet-theme-moon {
  width:16px;
  height:16px;
}
[data-study="quiet-cards"] .quiet-utility-group .quiet-theme-moon path { stroke-width:2.25; }
[data-study="quiet-cards"] .quiet-utility-group .quiet-sound-toggle svg { stroke-width:2; }
[data-study="quiet-cards"] .quiet-utility-group button:hover:not(:disabled) > svg { scale:1.04; }
[data-study="quiet-cards"] .quiet-utility-group button:active:not(:disabled) { scale:1; }
[data-study="quiet-cards"] .quiet-utility-group button:active:not(:disabled) > svg {
  scale:.96;
  transition-duration:90ms;
}
/* The accessible action label also supplies the visible tooltip. */
[data-study="quiet-cards"] .quiet-utility-group button::after {
  content:attr(aria-label);
  position:absolute;
  z-index:30;
  top:calc(100% + 8px);
  left:50%;
  padding:5px 9px;
  border-radius:8px;
  background:var(--ink);
  color:var(--bg);
  font:500 11.5px/1.2 var(--mono);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  translate:-50% -4px;
  transition:opacity 120ms ease 40ms,translate 200ms cubic-bezier(.22,1,.36,1) 40ms;
}
[data-study="quiet-cards"] .quiet-utility-group button:last-child::after { left:auto; right:0; translate:0 -4px; }
[data-study="quiet-cards"] .quiet-utility-group button:is(:hover,:focus-visible):not(:disabled)::after {
  opacity:1;
  translate:-50% 0;
  transition-delay:420ms;
}
[data-study="quiet-cards"] .quiet-utility-group button:last-child:is(:hover,:focus-visible):not(:disabled)::after { translate:0 0; }
[data-study="quiet-cards"] .sidebar-footer > .quiet-utility-group button::after { left:0; right:auto; translate:0 -4px; }
[data-study="quiet-cards"] .sidebar-footer > .quiet-utility-group button:is(:hover,:focus-visible):not(:disabled)::after { translate:0 0; }
[data-study="quiet-cards"] .quiet-menu-footer .quiet-utility-group { margin-bottom:12px; }
@media (max-width:759px) {
  [data-study="quiet-cards"] .quiet-utility-group :is(.quiet-theme-toggle,.quiet-sound-toggle) {
    flex-basis:44px;
    width:44px;
    height:44px;
  }
  [data-study="quiet-cards"] .quiet-utility-group button:first-child::after { left:0; translate:0 -4px; }
  [data-study="quiet-cards"] .quiet-utility-group button:first-child:is(:hover,:focus-visible)::after { translate:0 0; }
}
@media (prefers-reduced-motion:reduce) {
  [data-study="quiet-cards"] .quiet-utility-group button,
  [data-study="quiet-cards"] .quiet-utility-group button::before,
  [data-study="quiet-cards"] .quiet-utility-group button::after,
  [data-study="quiet-cards"] .quiet-utility-group :is(.quiet-theme-toggle,.quiet-sound-toggle) > svg { transition:none; }
  [data-study="quiet-cards"] .quiet-utility-group button:hover > svg { scale:1; }
}