/* Vanilla port of references/platform/{tokens,liquid-glass}.css.
   Optical children sit behind content. Never filter the host or its text. */
:root {
  --glass-radius: 22px;
  --glass-fill: #06101dc4;
  --glass-lens: linear-gradient(120deg,#12345970,#071222a6 65%,#15334e50);
  --glass-edge: #9dceff30;
  --glass-shadow: 0 22px 38px -12px #000a,0 3px 6px #0008;
}
.glass-positioned { position: relative; }
:root .glass-host {
  isolation: isolate;
  background: var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.glass-optics {
  display: block; position: absolute; inset: 0; border-radius: inherit;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.glass-optics .glass-defs { position: absolute; width: 0; height: 0; }
.glass-optics > span { display: block; position: absolute; border-radius: inherit; }
.glass-lens {
  inset: 0; background: var(--glass-lens);
  -webkit-backdrop-filter: blur(2px) saturate(135%);
  backdrop-filter: var(--glass-filter,blur(2px)) saturate(135%);
}
.glass-rim {
  inset: 0; padding: 1.4px;
  background: conic-gradient(from var(--rim-angle,130deg) at 50% 50%,#d8edff90 0deg,#218eff26 38deg,transparent 80deg,#69b7ff36 115deg,#dcf0ffb3 144deg,#8ecbff0a 187deg,#ffffff05 232deg,#59acff75 285deg,#d8edff90 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.glass-bevel { inset: 3px; border: 1px solid #d4eaff16; box-shadow: inset 0 1px 2px #0005,inset 0 -2px 3px #80beff20,0 0 0 1px #0002; }
.glass-reflection {
  inset: 0;
  background: radial-gradient(ellipse 34% 8px at var(--glint-x,24%) 0,#f4fbff63,transparent 95%),radial-gradient(ellipse 24% 5px at calc(100% - var(--glint-x,24%)) 100%,#75bdff3b,transparent 96%),linear-gradient(122deg,transparent 8%,#8ecbff06 13%,transparent 16%,transparent 78%,#d3eaff08 80%,transparent 82%);
  opacity: .9;
}
/* Older browsers without composite masks get a simple edge, never a filled overlay. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .glass-rim { background: none; padding: 0; border: 1px solid #9dceff60; }
}
:root .pill.primary.glass-host {
  --glass-fill: #218eff;
  --glass-lens: linear-gradient(120deg,#c7e5ff24,#218eff00 65%,#0355b330);
  --glass-edge: #c9e8ff70; color: #fff;
}
:root .pill.light.glass-host {
  --glass-fill: #dcecffec;
  --glass-lens: linear-gradient(120deg,#ffffff55,#a9d4ff26);
  --glass-edge: #ffffff90; color: #06101d;
}
:root .ext-tabs.glass-host { --glass-fill: #081423d9; --glass-shadow: 0 8px 24px #0003; }
:root [role="tab"].glass-host { --glass-fill: #08142366; --glass-shadow: none; color: #c4d5e5; }
:root [role="tab"][aria-selected="true"].glass-host {
  --glass-fill: #164374d9; --glass-lens: linear-gradient(120deg,#75bdff40,#218eff22 65%,#4ca5ff30);
  --glass-edge: #8ecbff80; color: #fff;
}
:root :is(.kicker,.ext-chip,.app-store-link).glass-host { --glass-fill: #081a2be6; --glass-shadow: inset 0 1px #d5ebff0c,0 4px 12px #0003; }
:root :is(.ext-chip-blue,.app-store-link).glass-host { --glass-edge: #218effa6; }
:root .ext-screen-frame.glass-host { --glass-fill: #08132299; --glass-shadow: 0 24px 60px -28px #218eff70,0 3px 6px #0008; }
:root .ext-price-current.glass-host { --glass-edge: #218eff; }
:root .second-ui .feature-grid article.glass-host { --glass-fill: #06101dde; }
.site-header .signin { padding: 12px 16px; border: 1px solid var(--glass-edge); border-radius: 8px; opacity: 1; }
:root :is(.pill,.signin,[role="tab"]).glass-host:hover { --glass-edge: #c0e0ffa0; }
:root .glass-host:focus-visible { outline: 2px solid #8ecbff; outline-offset: 5px; }
.extended .ext-footer nav { gap: 8px; }
.extended .ext-footer nav a { padding: 10px 16px; border: 1px solid var(--glass-edge); border-radius: 8px; }
.second-ui .feature-grid article,.hero-title .kicker,.app-store-link { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .glass-optics { --glint-x: 24% !important; --rim-angle: 130deg !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root .glass-host { background: #0b1b2d; }
  .glass-lens { background: #0b1b2d; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root .pill.primary.glass-host,:root .pill.primary .glass-lens { background: #218eff; }
  :root .pill.light.glass-host,:root .pill.light .glass-lens { background: #dcecff; }
  :root [role="tab"][aria-selected="true"].glass-host,:root [role="tab"][aria-selected="true"] .glass-lens { background: #164374; }
}
@media print { .glass-optics { display: none; } }

/* Squared buttons with soft edges, matching the platform's 8px primary button (--r-md; Jordan, October 5th). */
:root .pill, :root .signin { border-radius: 8px; }
/* Finish the squaring (Jordan, October 5th): nav capsule, kicker and chips follow the 8px buttons; the nav bar gets a softer 12px. */
:root .site-header nav { border-radius: 12px; }
:root .kicker, :root .ext-chip { border-radius: 8px; }