/* ============================================================
   LIQUID GLASS, SITE-WIDE (25 Oct 2026, his ask)
   ============================================================
   Apple's rule, and this sheet's: glass is the layer that FLOATS over the
   content (the masthead, menus, dialogs, toasts, a toolbar pinned over a
   scrolling pane), never the content itself. Cards, lists, forms and the
   lime action stay solid. And never glass on glass: something sitting on a
   glass surface (the desktop nav on the masthead) gets a fill and a rim of
   light, not a second frost.

   Loaded after styles.css and page.css, so these rules win at equal
   specificity; a page served without this sheet looks as it did before.
   These surfaces frost, tint and catch light; only the tab bar also bends
   it (glass.js says why, measured).

   NEVER put backdrop-filter, opacity, filter, mask or clip-path on an
   element that HOLDS glass (the masthead holds the menus). Chromium makes it
   a backdrop root and the glass inside frosts an empty layer instead of the
   page. That is why the masthead's frost lives on a layer inside it (.bar-glass). */

:root {
  --lg-blur: 22px;
  --lg-sat: 1.7;
  /* Panels that hold text to read: menus, dialogs. */
  --lg-panel: rgba(26, 26, 30, .68);
  --lg-sheet: rgba(18, 18, 21, .8);
  --lg-veil: rgba(5, 5, 6, .52);
  --lg-toast: rgba(30, 30, 34, .62);
  --lg-fill: rgba(255, 255, 255, .045);
  --lg-pill: rgba(255, 255, 255, .11);
  --lg-hover: rgba(255, 255, 255, .08);
  --lg-rim: rgba(255, 255, 255, .13);
  --lg-hi: rgba(255, 255, 255, .34);
  --lg-lo: rgba(255, 255, 255, .1);
  --lg-edge: rgba(255, 255, 255, .09);
  --lg-shade: 0 22px 54px -14px rgba(0, 0, 0, .62), 0 3px 10px rgba(0, 0, 0, .3);
  /* Controls: a channel set into the page, and the lens that rides in it. */
  --lg-well: rgba(255, 255, 255, .035);
  --lg-ctl: rgba(255, 255, 255, .05);
  --lg-lens: rgba(255, 255, 255, .17);
  --lg-lens-hi: rgba(255, 255, 255, .6);
  --lg-lens-shade: 0 3px 10px rgba(0, 0, 0, .38), 0 1px 2px rgba(0, 0, 0, .3);
}
:root[data-theme="light"] {
  --lg-panel: rgba(255, 255, 255, .7);
  --lg-sheet: rgba(250, 250, 251, .84);
  --lg-veil: rgba(24, 24, 27, .24);
  --lg-toast: rgba(255, 255, 255, .72);
  --lg-fill: rgba(9, 9, 11, .035);
  --lg-pill: rgba(255, 255, 255, .92);
  --lg-hover: rgba(9, 9, 11, .055);
  --lg-rim: rgba(9, 9, 11, .09);
  --lg-hi: rgba(255, 255, 255, .95);
  --lg-lo: rgba(255, 255, 255, .5);
  --lg-edge: rgba(9, 9, 11, .07);
  --lg-shade: 0 22px 54px -16px rgba(0, 0, 0, .22), 0 3px 10px rgba(0, 0, 0, .07);
  --lg-well: rgba(9, 9, 11, .045);
  --lg-ctl: rgba(255, 255, 255, .6);
  --lg-lens: #fff;
  --lg-lens-hi: rgba(255, 255, 255, 1);
  --lg-lens-shade: 0 3px 10px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .1);
}

/* The filters live in one zero-size SVG; not display:none, which would
   switch them off. */
.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---------- the masthead ----------
   ITS OLD LOOK, KEPT (his call, 25 Oct: "I liked our old masthead better").
   Same tint and frost as styles.css gives .bar, but drawn by a layer behind
   its contents (.bar-glass, which glass.js puts in), so the menus that hang
   from the bar can be glass of their own: frost on the bar itself makes it a
   backdrop root, and the menus then showed the page sharp through them.
   A REAL ELEMENT, NOT ::before: Chromium ran no backdrop-filter on the bar's
   ::before (measured with a marker under the bar) and runs it on a span.
   THE BAR'S VIEW-TRANSITION NAME IS WORN ONLY DURING A TRANSITION, for the
   same reason: a named element is a backdrop root too. Named while a page
   change runs, it still holds still across the cross-fade. */
@media (prefers-reduced-motion: no-preference) {
  .bar { view-transition-name: none; }
  :root:active-view-transition:not([data-theme-switching]) .bar { view-transition-name: masthead; }
}
.bar.has-glass { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar-glass {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: color-mix(in oklab, var(--bg-2) 84%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
/* The intro mark overflows the masthead while it plays; its contents are
   held hidden then, so there is nothing to frost (styles.css has the note). */
html[data-boot] .bar-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- menus: the ☰ menu, the account menu, the board switch ----------
   Glass panels that grow out of the button that opened them, on the site's
   spring, rather than fading in under it. */
.bar-menu-list, .rg-menu {
  background: var(--lg-panel);
  border: .5px solid var(--lg-rim);
  border-radius: var(--r-2);
  -webkit-backdrop-filter: blur(26px) saturate(var(--lg-sat));
  backdrop-filter: blur(26px) saturate(var(--lg-sat));
  box-shadow:
    inset 1px 1px 0 -.5px var(--lg-hi),
    inset -1px -1px 0 -.5px var(--lg-lo),
    var(--lg-shade);
  animation: lg-grow .46s var(--spring) both;
}
@keyframes lg-grow { from { opacity: 0; transform: translateY(-6px) scale(.9); } }
.bar-menu-item:hover, .bar-menu-item:focus-visible, .rg-opt:hover, .rg-opt:focus-visible { background: var(--lg-hover); }
.acct-who { border-bottom-color: var(--lg-rim); }

/* ---------- dialogs ----------
   Heavy-frost sheets over a lighter veil, so the page stays faintly present
   behind the question instead of going black. They rise into place on the
   spring. */
.veil, .nudge-veil {
  background: var(--lg-veil);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
}
.modal, .nudge {
  background: var(--lg-sheet);
  border: .5px solid var(--lg-rim);
  -webkit-backdrop-filter: blur(34px) saturate(var(--lg-sat));
  backdrop-filter: blur(34px) saturate(var(--lg-sat));
  box-shadow:
    inset 1px 1px 0 -.5px var(--lg-hi),
    inset -1px -1px 0 -.5px var(--lg-lo),
    0 40px 100px -20px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .25);
}
.modal { animation: lg-rise .55s var(--spring); }
@keyframes lg-rise { from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.95); } }
.modal-top, .modal.tw[data-step="result"] .modal-top { border-bottom-color: var(--lg-rim); }

/* ---------- the toast ---------- */
.snack {
  background: var(--lg-toast);
  color: var(--ink);
  border: .5px solid var(--lg-rim);
  -webkit-backdrop-filter: blur(20px) saturate(var(--lg-sat));
  backdrop-filter: blur(20px) saturate(var(--lg-sat));
  box-shadow: inset 1px 1px 0 -.5px var(--lg-hi), inset -1px -1px 0 -.5px var(--lg-lo), var(--lg-shade);
}

/* ---------- the role pane's toolbar ----------
   Apply and the tailor stay pinned to the foot of the pane while the role
   scrolls under them: a glass toolbar, with light along its top edge. */
.p-cta {
  background: color-mix(in oklab, var(--card) 72%, transparent);
  border-top: 0;
  -webkit-backdrop-filter: blur(20px) saturate(var(--lg-sat));
  backdrop-filter: blur(20px) saturate(var(--lg-sat));
  box-shadow: inset 0 .5px 0 var(--lg-edge), inset 0 1.5px 1px -1px var(--lg-lo);
}

/* ---------- the tabs: Internships / Full-time, Software / Hardware / Misc ----------
   The channel is set into the page (a well of light with a shaded top edge)
   and the selection is a glass lens riding in it: translucent, lit along the
   edge the light comes from, a soft shadow under it. glass.js moves the lens
   on springs, its leading edge first, and lifts it under a finger that
   presses or slides along the tabs (.is-lift). */
.seg {
  border: .5px solid var(--lg-rim);
  background: var(--lg-well);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28), inset 0 -.5px 0 var(--lg-lo);
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.seg-ind {
  background: var(--lg-lens);
  box-shadow:
    inset 0 0 0 .5px var(--lg-rim),
    inset 1px 1.5px 0 -.5px var(--lg-lens-hi),
    inset -1px -1px 0 -.5px var(--lg-lo),
    var(--lg-lens-shade);
}
/* Under glass.js the springs move it; CSS keeps only the lift and the fade. */
.seg-ind.is-js {
  transition: opacity .2s ease, scale .42s var(--spring), box-shadow .25s var(--snap), background-color .25s var(--snap);
  will-change: transform, width;
}
.seg-ind.is-lift {
  scale: 1.07 1.12;
  box-shadow:
    inset 0 0 0 .5px var(--lg-rim),
    inset 1.5px 2px 0 -.5px var(--lg-lens-hi),
    inset -1px -1.5px 0 -.5px var(--lg-lo),
    0 8px 22px rgba(0, 0, 0, .34), 0 1px 3px rgba(0, 0, 0, .3);
}
.seg.has-ind .seg-b[aria-selected="true"] { color: var(--ink); }
.seg.has-ind .seg-b[aria-selected="true"] b { background: color-mix(in oklab, var(--ink) 14%, transparent); color: var(--ink); }
.seg.has-ind .seg-b[aria-selected="true"] .seg-new { color: var(--accent); }
.seg-b:active { scale: .97; }
.seg-b { transition: color .25s var(--ease-out), scale .35s var(--spring); }

/* ---------- the filters and the board's buttons ----------
   Glass controls: a translucent fill, a rim of light, and a press that gives
   under the finger and springs back. Hover still only lights the edge. */
.find, .picks label, .flag {
  background: var(--lg-ctl);
  border: .5px solid var(--lg-rim);
  box-shadow: inset 1px 1px 0 -.5px var(--lg-hi), inset -1px -1px 0 -.5px var(--lg-lo);
  transition: border-color .16s, background-color .16s, color .16s, scale .35s var(--spring);
}
.find:focus-within, .picks label:hover, .picks label:focus-within, .flag:hover { border-color: var(--rule-2); }
.picks label:active, .flag:active { scale: .97; }
.flag[aria-pressed="true"] {
  background: var(--lg-lens); color: var(--ink); border-color: var(--lg-rim);
  box-shadow: inset 1px 1.5px 0 -.5px var(--lg-lens-hi), inset -1px -1px 0 -.5px var(--lg-lo), var(--lg-lens-shade);
}

/* ---------- the board's filter rail ----------
   Sticky over the list on a wide screen: frosted glass, lit along its bottom
   edge rather than ruled. 92% opaque since 2 Oct only because lime decoration
   (.field) showed through it; that decoration is display:none, so it can be
   glass again. Only where it is pinned: at 1024px and under it scrolls away
   with the page (styles.css) and has nothing to frost. */
@media (min-width: 1025px) { .rail {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(var(--lg-sat));
  backdrop-filter: blur(24px) saturate(var(--lg-sat));
  border-bottom-color: transparent;
  box-shadow: inset 0 -.5px 0 var(--lg-edge), 0 10px 24px -18px rgba(0, 0, 0, .55);
} }

/* ---------- when the reader asked for less ---------- */
@media (prefers-reduced-transparency: reduce) {
  .bar-glass, .bar { background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bar-menu-list, .rg-menu { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .modal, .nudge { background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .snack { background: var(--card-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .p-cta { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .veil, .nudge-veil { background: rgba(5, 5, 6, .78); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .rail { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .seg-ind { background: var(--live); }
  .seg.has-ind .seg-b[aria-selected="true"] { color: var(--live-ink); }
}
@media (prefers-contrast: more) {
  .bar-glass, .bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bar-menu-list, .rg-menu, .modal, .nudge, .snack, .p-cta { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--rule-2); }
  .rail { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--rule-2); }
  .seg-ind { background: var(--live); }
  .seg.has-ind .seg-b[aria-selected="true"] { color: var(--live-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .bar-menu-list, .rg-menu, .modal { animation: none; }
  .seg-ind.is-lift, .seg-b:active, .picks label:active, .flag:active { scale: none; }
}