/* Background transparency only: never fade text, photographs or video. */
:root {
  --glass-alpha: 0;
  --glass-blur: 8px;
  --glass-effective-alpha: var(--glass-alpha);
  --glass-effective-blur: var(--glass-blur);
  --glass-surface: rgb(255 255 255 / var(--glass-effective-alpha));
  --glass-readable: var(--glass-surface);
  --glass-reflection: calc(.1 + var(--glass-effective-alpha) * .4);
}
.header, .filterbar, dialog, .hero-cta, .hero-pause, .play-badge, .modal-close, .toast {
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-effective-blur)) saturate(135%);
  backdrop-filter: blur(var(--glass-effective-blur)) saturate(135%);
}
.header::before { background: radial-gradient(ellipse 300px 95px at var(--light-x, 30%) var(--light-y, 0%), rgb(255 255 255 / var(--glass-reflection)), transparent 75%); }
.header :is(.wordmark, nav a, .member-entry), .filterbar, .hero-cta, .hero-pause { text-shadow: 0 1px 3px rgb(255 255 255 / 95%); }
.header .app-link { text-shadow: none; }
.header .search { background: var(--glass-readable); }
.header .search:focus-within { background: rgb(255 255 255 / 85%); }
.header nav a:hover, .member-entry:hover, .hero-cta:hover, .rail-controls button:hover, .hero-toolbar button:hover, #refresh-feed:hover, .member-app:hover { background: var(--glass-readable); }
.glass-pill { background: var(--glass-readable); }
.filters button[aria-pressed=true] { background: var(--glass-readable); }
.filters.has-glass-pill button[aria-pressed=true] { background: transparent; }
.brand-ring, .brand[aria-pressed=true] .brand-ring { background: var(--glass-surface); }
.brand-ring::after { opacity: var(--glass-reflection); }
.brand.is-lit .brand-ring::after { opacity: calc(var(--glass-reflection) + .12); }
.rail-controls button, .hero-toolbar button, #refresh-feed, .member-app, .help-nav a { background: var(--glass-readable); }
#feed .post { background: var(--glass-surface); }
.detail-copy, .member-body { background: var(--glass-readable); text-shadow: 0 1px 2px rgb(255 255 255 / 80%); }
.member-intro { background: rgb(235 255 190 / calc(.15 + var(--glass-effective-alpha) * .7)); }
.member-status { background: var(--glass-readable); }
dialog::backdrop { background: rgb(35 40 54 / 10%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* The material controller uses the same glass as the rest of the website. */
.glass-launcher {
  position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); right: max(22px, env(safe-area-inset-right)); z-index: 45;
  display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 17px;
  border: 0; border-radius: 26px; background: var(--glass-surface); color: #24252d;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--glass-edge), 0 6px 24px rgb(32 42 60 / 15%);
  font-size: 12px; font-weight: 650;
  transition: transform 260ms var(--glass-ease), box-shadow 260ms;
}
.glass-launcher svg { width: 19px; height: 19px; }
.glass-launcher:hover { transform: translateY(-2px); box-shadow: var(--glass-edge), 0 10px 28px rgb(32 42 60 / 19%); }
.glass-launcher[aria-expanded=true] { background: var(--glass-surface); color: #a62059; box-shadow: var(--glass-edge), inset 0 0 0 1px #b3487366, 0 6px 24px rgb(32 42 60 / 15%); }
.glass-panel {
  position: fixed; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 58px); right: max(22px, env(safe-area-inset-right));
  z-index: 46; width: 320px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 112px);
  padding: 20px; overflow-y: auto; overscroll-behavior: contain; border-radius: 25px;
  color: #272932; background: var(--glass-surface);
  -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
  box-shadow: inset 0 1px 1px #fff, 0 10px 28px rgb(26 35 52 / 12%), 0 25px 70px rgb(26 35 52 / 13%);
}
.glass-panel[hidden] { display: none; }
.glass-panel:not([hidden]) { animation: glass-panel-enter 240ms var(--glass-ease); }
@keyframes glass-panel-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.glass-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.glass-panel h2 { font-size: 19px; margin: 0; letter-spacing: -.025em; }
.glass-panel-close { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--glass-surface); }
.glass-panel-close svg { width: 17px; height: 17px; }
.glass-panel p { color: #666873; font-size: 12px; line-height: 1.7; margin: 8px 0 14px; }
.glass-sample { height: 84px; border-radius: 16px; overflow: hidden; position: relative; background: #fff url('assets/hero.png') center 44% / 125% auto no-repeat; box-shadow: inset 0 0 0 1px rgb(34 43 57 / 6%); }
.glass-sample::after {
  content: ''; position: absolute; width: 74px; height: 74px; top: 5px; left: calc(50% - 37px); border-radius: 50%;
  background: var(--glass-surface); -webkit-backdrop-filter: blur(var(--glass-effective-blur)); backdrop-filter: blur(var(--glass-effective-blur));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 96%), inset 0 -1px 1px rgb(255 255 255 / 45%), 0 5px 16px rgb(18 29 44 / 23%);
}
.glass-presets { display: flex; gap: 6px; margin: 14px 0 18px; }
.glass-presets button { flex: 1; min-height: 38px; font-size: 12px; border-radius: 19px; background: var(--glass-surface); color: #595c68; }
.glass-presets button[aria-pressed=true] { color: #a62059; box-shadow: inset 0 0 0 1px #b3487366, 0 3px 9px rgb(32 42 60 / 10%); font-weight: 750; }
.glass-slider-label { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; font-size: 13px; font-weight: 600; margin-top: 16px; }
.glass-slider-label output { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.glass-slider {
  display: block; width: 100%; height: 36px; margin: 6px 0 0; padding: 0; border: 0;
  appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; accent-color: #282a33;
}
.glass-slider::-webkit-slider-runnable-track { height: 5px; border-radius: 4px; background: linear-gradient(to right, rgb(40 43 55 / 62%) 0 var(--range-fill, 100%), rgb(90 97 116 / 15%) var(--range-fill, 100%) 100%); }
.glass-slider::-moz-range-track { height: 5px; border-radius: 4px; background: rgb(90 97 116 / 15%); }
.glass-slider::-moz-range-progress { height: 5px; background: rgb(40 43 55 / 62%); }
.glass-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 24px; width: 24px; margin-top: -9.5px; border-radius: 50%; background: var(--glass-surface); border: 1px solid #a1a7b7; box-shadow: 0 2px 7px rgb(36 45 63 / 22%); }
.glass-slider::-moz-range-thumb { height: 23px; width: 23px; border-radius: 50%; background: var(--glass-surface); border: 1px solid #a1a7b7; box-shadow: 0 2px 7px rgb(36 45 63 / 22%); }
.glass-range-hints { display: flex; justify-content: space-between; color: #6a6d78; font-size: 10px; }
.glass-panel-foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 19px; padding-top: 10px; border-top: 1px solid #e6e8ed; }
.glass-panel-foot span { font-size: 10px; color: #696c76; }
.glass-panel-foot button { min-height: 36px; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.glass-panel .glass-access-note { background: var(--glass-surface); padding: 9px 11px; border-radius: 10px; margin-bottom: 0; font-size: 11px; }
.glass-panel :disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 720px) {
  .glass-launcher { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); min-height: 44px; padding: 0 14px; }
  .glass-panel { right: 14px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 55px); max-height: calc(100dvh - 96px); padding: 18px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-effective-alpha: 1; --glass-effective-blur: 0px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass-effective-alpha: 1; --glass-effective-blur: 0px; }
  .glass-panel, .glass-launcher { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass-launcher[aria-expanded=true] { background: #25262d; }
}
@media (prefers-reduced-motion: reduce) { .glass-panel:not([hidden]) { animation: none; } .glass-launcher:hover { transform: none; } }

/* Global material contract. This is deliberately the final layer, including
   hover / focus / selected states inherited from earlier designs. Important
   is limited to material fills so no legacy black or white tile leaks through.
   Images, video pixels, text, icons, focus rings and selection marks are content. */
body :is(
  button, input:not([type="range"]), textarea, select, dialog,
  .header, .search, .filterbar, .glass-pill, .brand-ring,
  .post, .post-media, #detail-media, .detail-copy, .related,
  .member-intro, .member-body, .member-status, .empty, .toast,
  .site-footer, .hero-toolbar, .help-nav a, .help-status,
  .help-section details, .glass-panel, .glass-access-note,
  .app-link, .hero-cta, .play-badge, .skip
) {
  background-color: var(--glass-surface) !important;
  background-image: none !important;
}
/* A control's selected state is an edge, never an opaque background. */
body :is(.app-link, .member-submit, .empty button, .glass-launcher, .glass-presets button, .skip) {
  color: #24252d;
  text-shadow: 0 1px 2px rgb(255 255 255 / 90%);
}
.glass-launcher[aria-expanded=true], .glass-presets button[aria-pressed=true], .save.is-saved, #detail-save[aria-pressed=true] { color: #a62059; }
.glass-presets button[aria-pressed=true] { position: relative; }
.glass-presets button[aria-pressed=true]::after { content: ''; position: absolute; bottom: 5px; left: calc(50% - 7px); width: 14px; height: 2px; border-radius: 2px; background: currentColor; }
body :is(
  .header, .filterbar, dialog, .glass-panel, .glass-launcher, .toast,
  .app-link, .hero-cta, .hero-pause, .modal-close, .play-badge,
  .glass-panel-close, .help-nav a
) {
  -webkit-backdrop-filter: blur(var(--glass-effective-blur)) saturate(135%);
  backdrop-filter: blur(var(--glass-effective-blur)) saturate(135%);
}
/* Inner controls receive a lighter refraction to avoid excessive stacked blur. */
body :is(
  .search, .brand-ring, .rail-controls button, .glass-presets button,
  .member-app, .member-submit, .member-body input, .brand-more,
  #detail-save, #load-more, #reset, #refresh-feed, #clear-brand, .glass-pill
) {
  -webkit-backdrop-filter: blur(min(var(--glass-effective-blur), 6px));
  backdrop-filter: blur(min(var(--glass-effective-blur), 6px));
}
body :is(.app-link, .member-submit, .member-app, #reset, #load-more, .glass-panel-close, .glass-presets button) {
  box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(90 102 126 / 14%), 0 5px 15px rgb(34 45 64 / 10%);
}
body :is(.app-link, .member-submit, .member-app, #reset, #load-more):hover { box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(90 102 126 / 22%), 0 9px 23px rgb(34 45 64 / 16%); }
.glass-presets button[aria-pressed=true] { box-shadow: var(--glass-edge), inset 0 0 0 1px #b3487370, 0 5px 15px rgb(34 45 64 / 10%); }
.glass-panel { text-shadow: 0 1px 2px rgb(255 255 255 / 98%); }
.glass-panel p, .glass-range-hints, .glass-panel-foot span { color: #444650; }
.glass-panel-close { box-shadow: var(--glass-edge), 0 4px 12px rgb(30 39 56 / 12%); }
.glass-slider::-webkit-slider-thumb { -webkit-backdrop-filter: blur(min(var(--glass-effective-blur), 6px)); backdrop-filter: blur(min(var(--glass-effective-blur), 6px)); box-shadow: var(--glass-edge), 0 3px 8px rgb(36 45 63 / 26%); }
.glass-slider::-moz-range-thumb { backdrop-filter: blur(min(var(--glass-effective-blur), 6px)); box-shadow: var(--glass-edge), 0 3px 8px rgb(36 45 63 / 26%); }
.detail-copy, .member-body, .member-intro { -webkit-backdrop-filter: blur(min(var(--glass-effective-blur), 6px)); backdrop-filter: blur(min(var(--glass-effective-blur), 6px)); box-shadow: inset 0 1px 1px rgb(255 255 255 / 75%); }
.member-status, .help-status { box-shadow: inset 0 0 0 1px rgb(87 98 120 / 14%); }
.site-footer { box-shadow: inset 0 1px rgb(255 255 255 / 90%), 0 -8px 28px rgb(40 50 69 / 3%); -webkit-backdrop-filter: blur(var(--glass-effective-blur)); backdrop-filter: blur(var(--glass-effective-blur)); }
.empty { box-shadow: var(--glass-edge), 0 8px 26px rgb(30 40 58 / 7%); }
.hero { background-color: transparent; }
dialog::backdrop { background: rgb(35 40 54 / calc(var(--glass-effective-alpha) * .18)); -webkit-backdrop-filter: blur(calc(var(--glass-effective-blur) * .375)); backdrop-filter: blur(calc(var(--glass-effective-blur) * .375)); }

/* Reading surfaces are deliberately independent of the decorative glass shell.
   Even at 100% transparency, original captions retain a 96% white foundation. */
:root { --reading-surface: rgb(255 255 255 / max(.96, var(--glass-effective-alpha))); }
body #detail { padding:12px; }
#detail .detail-layout { gap:12px; }
body #detail .detail-copy {
  --glass-surface: var(--reading-surface);
  background-color:var(--reading-surface) !important;
  background-image:none !important;
  color:#252830;
  text-shadow:none;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px #fff,0 5px 16px rgb(30 40 56 / 5%);
}
#detail .detail-copy { min-width:0; border-radius:20px; }
#detail #detail-caption { color:#252830;line-height:1.9; }
#detail .detail-copy :is(#detail-handle,.detail-published,.small-note) { color:#555b65; }
@media (max-width:720px) {
  body #detail { padding:8px; }
  #detail .detail-copy { margin-top:8px;border-radius:17px; }
}