/* PolitiCloud glass: sitewide, crisp glass with a neon (synthwave) glow, strongest in dark mode.
   - The page carries a soft wash of all three lean colors, so translucent cards have color to show through.
   - Cards are translucent (see --surface in app.css), with a light reflection across the top that follows the
     cursor on desktop, and edges/glow that pick up the color around them: a Left story glows faintly blue,
     Center purple, Right red, everything else picks up the page's purple.
   - Real blur (backdrop-filter) only on things that float over content (header, nav, menus, drawers),
     so long feeds stay smooth on phones. */
:root {
  --wash-left: color-mix(in srgb, var(--left) 17%, transparent);       /* page wash, top left */
  --wash-right: color-mix(in srgb, var(--right) 13%, transparent);     /* page wash, top right */
  --wash-center: color-mix(in srgb, var(--center) 16%, transparent);   /* page wash, bottom */
  --glass-light: rgb(255 255 255 / .32);   /* reflection highlight (kept low: no milky haze) */
  --glass-rim: rgb(255 255 255 / .7);      /* bright top edge */
  --glass-edge: 40%;         /* neon edge: how strongly edges take on the surrounding color */
  --glass-edge-hi: 65%;      /* ...on hover */
  --glass-glow: 30%;         /* neon halo around each card */
  --glass-glow-hi: 50%;      /* ...on hover */
  --glass-float: color-mix(in srgb, var(--bg) 74%, transparent);   /* menus, sticky bars */
  --glass-sheet: color-mix(in srgb, var(--bg) 90%, transparent);   /* big panels over a dark backdrop */
  --glass-blur: blur(22px) saturate(180%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --wash-left: color-mix(in srgb, var(--left) 22%, transparent);
    --wash-right: color-mix(in srgb, var(--right) 18%, transparent);
    --wash-center: color-mix(in srgb, var(--center) 24%, transparent);
    --glass-light: rgb(255 255 255 / .05);
    --glass-rim: rgb(255 255 255 / .12);
    --glass-edge: 60%;
    --glass-edge-hi: 90%;
    --glass-glow: 45%;
    --glass-glow-hi: 70%;
    --glass-float: color-mix(in srgb, var(--bg) 70%, transparent);
    --glass-sheet: color-mix(in srgb, var(--bg) 86%, transparent);
  }
}

/* ---------- The page behind the glass ---------- */
html { background: var(--bg); }
body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 50vmax at 0% 0%, var(--wash-left), transparent 70%),
    radial-gradient(55vmax 45vmax at 100% 6%, var(--wash-right), transparent 70%),
    radial-gradient(70vmax 50vmax at 50% 105%, var(--wash-center), transparent 70%),
    var(--bg);
}

/* ---------- Glass cards ---------- */
:is(.card, .rail-box, .notice, .claim-card, .stat, .vote, .take, .ext, .signin-nudge, .chamber-wrap,
    .panel, .panel-card, .empty-card, .pf-card, .pf-sec, .official, .map-wrap, .cl-col, .tr-card,
    .sq-linkcard, .mny-sub, .more-panel a) {
  --tint: var(--c, var(--center));
  position: relative;
  background:
    radial-gradient(240px circle at var(--mx, 18%) var(--my, -30%), var(--glass-light), transparent 62%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 0 0 1px color-mix(in srgb, var(--tint) var(--glass-edge), transparent),
    0 0 18px -4px color-mix(in srgb, var(--tint) var(--glass-glow), transparent),
    0 1px 2px rgb(0 0 0 / .05);
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
/* Story cards already carry their lean as --c: their glass takes on that color */
.card[data-b="left"] { --tint: var(--left); }
.card[data-b="center"] { --tint: var(--center); }
.card[data-b="right"] { --tint: var(--right); }

@media (hover: hover) and (pointer: fine) {
  :is(.card, .rail-box, .claim-card, .official, .tr-card, .sq-linkcard, .more-panel a, .ext):hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 var(--glass-rim),
      inset 0 0 0 1px color-mix(in srgb, var(--tint) var(--glass-edge-hi), transparent),
      0 0 26px -2px color-mix(in srgb, var(--tint) var(--glass-glow-hi), transparent),
      0 1px 2px rgb(0 0 0 / .05);
  }
}

/* ---------- Floating glass: real blur, only where something floats over content ---------- */
.drawer-panel, .geo-menu, .more-panel, .sq-menu, .lcr, .pf-save {
  background: var(--glass-float);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.drawer-panel, .more-panel { background: var(--glass-sheet); }
.drawer-panel { box-shadow: inset 1px 0 0 var(--glass-rim), -10px 0 40px rgb(0 0 0 / .2); }
.geo-menu, .more-panel, .sq-menu { box-shadow: inset 0 1px 0 var(--glass-rim), 0 20px 50px rgb(0 0 0 / .25); }
@media (max-width: 899px) {
  .side { background: var(--glass-sheet); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}
.drawer-close { background: var(--glass-float); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 var(--glass-rim), var(--shadow); }

/* Older browsers without backdrop-filter: keep floating things solid so text never bleeds through */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .drawer-panel, .geo-menu, .more-panel, .sq-menu, .lcr, .pf-save, .side, .drawer-close, .top, .bottom-nav { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.card, .rail-box, .claim-card, .official, .tr-card, .sq-linkcard, .more-panel a, .ext) { transition: none; }
  :is(.card, .rail-box, .claim-card, .official, .tr-card, .sq-linkcard, .more-panel a, .ext):hover { transform: none; }
}

/* ---------- Left / Center / Right: tinted glass in each side's own color ---------- */
.lcr button[data-b="left"] { --k: var(--left); }
.lcr button[data-b="center"] { --k: var(--center); }
.lcr button[data-b="right"] { --k: var(--right); }
.lcr button[data-b] {
  color: var(--k);
  border: 1px solid color-mix(in srgb, var(--k) 45%, var(--glass-rim));
  background:
    radial-gradient(160px circle at var(--mx, 25%) var(--my, -20%), var(--glass-light), transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--k) 22%, transparent), color-mix(in srgb, var(--k) 6%, transparent)),
    var(--surface);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 0 12px -4px color-mix(in srgb, var(--k) 60%, transparent),
    0 0 20px -4px color-mix(in srgb, var(--k) 65%, transparent);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, opacity .2s ease, filter .2s ease;
}
.lcr button[data-b="left"].on, .lcr button[data-b="center"].on, .lcr button[data-b="right"].on {
  color: var(--k); border-color: color-mix(in srgb, var(--k) 70%, var(--glass-rim));
  background:
    radial-gradient(160px circle at var(--mx, 25%) var(--my, -20%), var(--glass-light), transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--k) 24%, transparent), color-mix(in srgb, var(--k) 8%, transparent)),
    var(--surface);
}
.lcr button[data-b]:not(.on) { opacity: .6; filter: saturate(.5); box-shadow: inset 0 1px 0 var(--glass-rim); }
.lcr .lcr-sym, .lcr .lcr-txt b { text-shadow: 0 0 12px color-mix(in srgb, var(--k) 65%, transparent); }
.lcr .lcr-bar {
  height: 5px; border-radius: 0 99px 99px 0; opacity: 1;
  background: linear-gradient(180deg, color-mix(in srgb, white 45%, var(--k)), var(--k));
  box-shadow: 0 0 10px color-mix(in srgb, var(--k) 70%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .lcr button[data-b]:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 14px -4px color-mix(in srgb, var(--k) 75%, transparent), 0 0 30px -2px color-mix(in srgb, var(--k) 80%, transparent); }
}
.lcr button[data-b]:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .lcr button[data-b], .lcr button[data-b]:hover, .lcr button[data-b]:active { transition: none; transform: none; } }