/* Shared button material: translucent tint, curved reflection, rim and depth.
   CSS backdrop blur is the portable baseline; no SVG filter URL dependency. */
:root {
  --control-tint:rgba(255,255,255,.38); --control-hover:rgba(219,225,232,.82);
  --control-selected:rgba(223,227,232,.74); --control-selected-hover:rgba(204,212,222,.86); --control-ink:#24282d;
  --control-edge:rgba(56,65,77,.16); --control-rim:rgba(255,255,255,.95);
  --control-glow:rgba(255,255,255,.65); --control-bottom:rgba(80,91,105,.12);
  --control-shadow:rgba(26,36,48,.12); --control-primary:rgba(38,48,61,.88); --control-primary-hover:rgba(19,27,38,.94);
  --control-primary-ink:#fff; --control-solid:#f0f2f4; --control-hover-solid:#e1e6eb; --control-selected-solid:#dce1e7;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --control-tint:rgba(74,79,86,.42); --control-hover:rgba(92,99,109,.52);
    --control-selected:rgba(107,119,137,.64); --control-selected-hover:rgba(129,142,161,.72); --control-ink:#f6f7fa;
    --control-edge:rgba(235,242,255,.23); --control-rim:rgba(255,255,255,.50);
    --control-glow:rgba(220,233,255,.20); --control-bottom:rgba(0,0,0,.35);
    --control-shadow:rgba(0,0,0,.30); --control-primary:rgba(227,235,247,.90); --control-primary-hover:rgba(255,255,255,.99);
    --control-primary-ink:#20262e; --control-solid:#363c44; --control-hover-solid:#454d58; --control-selected-solid:#505b6a;
  }
}
:root[data-theme="dark"] {
  --control-tint:rgba(74,79,86,.42); --control-hover:rgba(92,99,109,.52);
  --control-selected:rgba(107,119,137,.64); --control-selected-hover:rgba(129,142,161,.72); --control-ink:#f6f7fa;
  --control-edge:rgba(235,242,255,.23); --control-rim:rgba(255,255,255,.50);
  --control-glow:rgba(220,233,255,.20); --control-bottom:rgba(0,0,0,.35);
  --control-shadow:rgba(0,0,0,.30); --control-primary:rgba(227,235,247,.90); --control-primary-hover:rgba(255,255,255,.99);
  --control-primary-ink:#20262e; --control-solid:#363c44; --control-hover-solid:#454d58; --control-selected-solid:#505b6a;
}
/* ID specificity intentionally replaces legacy per-screen materials, including
   dynamic admin/auth buttons. No wrappers or per-button initialization needed. */
:is(body,#account,#loginModal,.sidebar) button {
  position:relative; isolation:isolate; overflow:hidden; opacity:1;
  min-height:44px; min-width:44px; border:1px solid var(--control-edge); border-radius:999px;
  background:var(--control-tint); color:var(--control-ink);
  box-shadow:inset 0 1px 0 var(--control-rim),inset 1px 0 0 rgba(255,255,255,.13),inset 0 -1px 1px var(--control-bottom),0 3px 8px -3px var(--control-shadow),0 8px 20px -10px var(--control-shadow);
  -webkit-backdrop-filter:blur(12px) saturate(165%); backdrop-filter:blur(12px) saturate(165%);
  transform:scale(var(--press-scale,1)); transform-origin:center; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent; transition:opacity 160ms var(--ease-out);
}
:is(body,#account,#loginModal,.sidebar) button::before,
:is(body,#account,#loginModal,.sidebar) button::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
}
:is(body,#account,#loginModal,.sidebar) button::before {
  background:linear-gradient(165deg,var(--control-glow),transparent 46%,transparent 65%,var(--control-glow));
  opacity:.65; transition:opacity 160ms var(--ease-out);
}
:is(body,#account,#loginModal,.sidebar) button::after {
  inset:-50%; background:radial-gradient(ellipse at center,var(--control-glow),transparent 58%);
  transform:translate(var(--glass-x,0%),var(--glass-y,-22%)); opacity:0; transition:opacity 180ms var(--ease-out);
}
@media(hover:hover) and (pointer:fine) {
  :is(body,#account,#loginModal,.sidebar) button:not(.primary):not(.title-button):hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {background:var(--control-hover)}
  :is(body,#account,#loginModal,.sidebar) button:hover:not(:disabled):not([aria-disabled="true"])::after {opacity:.7}
}
:is(body,#account,#loginModal,.sidebar) button:not(.primary):not(.title-button):active:not(:disabled):not([aria-disabled="true"]) {background:var(--control-selected)}
:is(body,#account,#loginModal,.sidebar) button:is(.active,[aria-pressed="true"],[aria-current="page"]) {
  background:var(--control-selected); font-weight:600; border-color:var(--control-rim);
  box-shadow:inset 0 1px 1px var(--control-rim),inset 0 -1px 2px var(--control-bottom),0 3px 10px -4px var(--control-shadow);
}
/* Hovering a selected control must read as "more selected", never fall back to
   the unselected hover tint, which reads as a deselection. */
@media(hover:hover) and (pointer:fine) {
  :is(body,#account,#loginModal,.sidebar) button:not(.primary):not(.title-button):is(.active,[aria-pressed="true"],[aria-current="page"]):hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {background:var(--control-selected-hover)}
}
:is(body,#account,#loginModal,.sidebar) button.primary {
  background:var(--control-primary); color:var(--control-primary-ink); font-weight:600;
}
@media(hover:hover) and (pointer:fine) {
  :is(body,#account,#loginModal,.sidebar) button.primary:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {background:var(--control-primary-hover)}
}
:is(body,#account,#loginModal,.sidebar) button.primary:active:not(:disabled):not([aria-disabled="true"]) {background:var(--control-primary-hover)}
:is(body,#account,#loginModal,.sidebar) button:focus-visible {outline:2px solid var(--control-ink);outline-offset:3px}
:is(body,#account,#loginModal,.sidebar) button:is(:disabled,[aria-disabled="true"]) {opacity:.48;cursor:not-allowed;transform:none;box-shadow:inset 0 1px 0 var(--control-edge)}
:is(body,#account,#loginModal,.sidebar) button[aria-busy="true"] {cursor:progress}
:is(body,#account,#loginModal,.sidebar) button:is(:disabled,[aria-disabled="true"],[aria-busy="true"])::after {opacity:0}
/* Reading surfaces remain text, not oversized glass pills. */
:is(body,#account,#loginModal,.sidebar) button.title-button,
:is(body,#account,#loginModal,.sidebar) button.title-button:is(:hover,:active) {background:transparent;border-color:transparent;border-radius:8px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
:is(body,#account,#loginModal,.sidebar) button.title-button::before,
:is(body,#account,#loginModal,.sidebar) button.title-button::after {display:none}
#loginModal {background:var(--paper-color);color:var(--control-ink)}
#loginModal .auth-status {color:var(--label-secondary)}
#loginModal .close {width:44px;height:44px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root,:root[data-theme] {--control-tint:var(--control-solid);--control-hover:var(--control-hover-solid);--control-selected:var(--control-selected-solid);--control-selected-hover:var(--control-selected-solid)}
  :is(body,#account,#loginModal,.sidebar) button {background:var(--control-solid)}
  :is(body,#account,#loginModal,.sidebar) button.primary {background:var(--control-primary)}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :root,:root[data-theme] {
    --control-tint:var(--control-solid); --control-hover:var(--control-hover-solid);
    --control-selected:var(--control-selected-solid); --control-selected-hover:var(--control-selected-solid); --control-primary:var(--control-ink); --control-primary-hover:var(--control-ink);
    --control-primary-ink:var(--control-solid);
  }
  :is(body,#account,#loginModal,.sidebar) button {background:var(--control-solid);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-color:var(--control-ink)}
  :is(body,#account,#loginModal,.sidebar) button:not(.primary):not(.title-button):hover {background:var(--control-hover-solid)}
  :is(body,#account,#loginModal,.sidebar) button:is(.active,[aria-pressed="true"],[aria-current="page"]) {background:var(--control-selected-solid)}
  :is(body,#account,#loginModal,.sidebar) button.primary,
  :is(body,#account,#loginModal,.sidebar) button.primary:is(:hover,:active) {background:var(--control-ink);color:var(--control-solid)}
  :is(body,#account,#loginModal,.sidebar) button::before,
  :is(body,#account,#loginModal,.sidebar) button::after {display:none}
}
@media(prefers-reduced-motion:reduce) {
  :is(body,#account,#loginModal,.sidebar) button {transform:none;transition:none}
  :is(body,#account,#loginModal,.sidebar) button::before,
  :is(body,#account,#loginModal,.sidebar) button::after {transition:none}
}
@media(forced-colors:active) {
  :is(body,#account,#loginModal,.sidebar) button {background:ButtonFace;color:ButtonText;border:1px solid ButtonText;box-shadow:none}
  :is(body,#account,#loginModal,.sidebar) button.primary {background:Highlight;color:HighlightText}
  :is(body,#account,#loginModal,.sidebar) button::before,
  :is(body,#account,#loginModal,.sidebar) button::after {display:none}
}
/* Horizontal chips keep their labels on one line on compact screens. */
@media(max-width:700px) {
  header .categories {min-width:0;width:100%;flex:0 0 100%;overflow-x:auto;padding-block:4px 10px;scrollbar-width:none}
  header .categories button {flex:0 0 auto;white-space:nowrap}
}