/* GRIND. Glass, wiring for the app and the public site.
   The component itself is grind-glass.css (unchanged). This file only says where it sits:
   per-instance alpha (raised so text keeps 4.5:1 over the worst background behind it),
   positions the component would otherwise reset, the backdrop behind hero cards, focus rings and themes.
   It is not processed by tools/build_themes.py, so its colours are not recoloured per theme. */

/* ---------- Instances ---------- */
/* Nav bars: frost, sticky, pill. Dark content can scroll under them, so the frost is denser. */
.grind-glass.gg-nav[data-variant]{--gg-alpha:.8;--gg-radius:999px}
.topbar.gg-nav{position:sticky;top:12px;z-index:40;height:62px;margin:12px 20px 0;padding:0 12px 0 26px;border-bottom:0}
.site-header.gg-nav{position:sticky}
.topbar.gg-nav :is(.slash,.date-label,.topbar>span,.topbar a,.topbar span:not(.app-lang *):not(.th-wrap *)){color:var(--gg-text)}
.topbar.gg-nav .slash{opacity:1}
.site-header.gg-nav .nav-menu{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header.gg-nav>.nav-panel{position:fixed}
/* An element with backdrop-filter contains fixed children: drop the header's blur while the mobile sheet is open. */
.site-header.gg-nav:has(>.nav-panel:not([hidden])){-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;background:transparent}
.site-header.gg-nav:has(>.nav-panel:not([hidden]))::before,.site-header.gg-nav:has(>.nav-panel:not([hidden]))::after{display:none}

/* Modals, sheets, document viewer: frost, dense enough for forms over dimmed content. */
.grind-glass.gg-sheet[data-variant]{--gg-alpha:.9;--gg-blur:12px}
.grind-glass.gg-sheet :is(label,.help,.icon-button,.subtext,.muted,.panel-heading p){color:#586650}
dialog.grind-glass.gg-sheet{position:fixed;border:0}
dialog.grind-glass.gg-sheet:not(.dv){--gg-radius:28px}
#modal::backdrop{background:rgba(32,58,45,.3)}
.grind-glass.gg-sheet .modal-header{border-bottom-color:rgba(32,58,45,.12)}
.nav-panel.gg-sheet{--gg-radius:0px}

/* Hero cards: ink. Over light pages the ink must stay near opaque for cream text to keep 4.5:1. */
.grind-glass.gg-hero[data-variant]{--gg-alpha:1.08}
.grind-glass>.mc-summary-mark,.grind-glass>.ov-remove{position:absolute}
.grind-glass.gg-hero :is(.ov-index,.ov-course-tag,.ov-focus-bottom,.ov-focus-bottom>span,.mc-summary div>span,.mc-summary strong small,.sc-week-banner p,.sc-arrow small,.sc-arrow i,.stat-title,.stat-note,.stat-icon){color:var(--gg-text)}
.grind-glass.gg-hero .ov-focus-body p{color:var(--gg-text)}
.grind-glass.gg-hero .sc-arrow li.is-past b{color:var(--gg-text)}
.grind-glass.gg-hero .sc-arrow li.is-today small{color:#D9F88D}
.stat.grind-glass{border:0}

/* Landing hero rail: ink on the dark tiles, frost on the others. */
.grind-glass.gg-tile[data-variant="ink"]{--gg-alpha:1}
.grind-glass.gg-tile[data-variant="frost"]{--gg-alpha:.5}
/* Inside the horizontal scroller the component's 60px shadow is cut at the scroller's edges and draws a box: tighter shadow there. */
.grind-glass.gg-tile{box-shadow:0 12px 24px rgba(32,58,45,.16),inset 0 1.5px 1px rgba(255,255,255,.5)}
.gg-stage-rail .qz-track{padding-top:14px;padding-bottom:40px}

/* Lens: the next deadline on the radar, over a lime band so the clear pill sits over something. */
.rd-item.is-next{position:relative}
.rd-item.is-next::after{content:"";position:absolute;z-index:0;top:1px;bottom:1px;left:120px;right:-8px;border-radius:999px;background:#D9F88D}
.rd-card.gg-lens{z-index:1;border-color:transparent}
.rd-card.gg-lens:hover{border-color:transparent}
.rd-card.gg-lens .rd-weight small{color:var(--gg-text)}
@media(max-width:620px){.rd-item.is-next::after{left:24px;right:-6px}}

/* ---------- Backdrop behind hero cards: lime and blush circles, faint dot grid ---------- */
.gg-stage{position:relative;isolation:isolate}
.gg-stage::before{content:"";position:absolute;z-index:-1;inset:-26px -22px;border-radius:40px;pointer-events:none;
  background:
    radial-gradient(circle at 86% 14%,#D9F88D 0 118px,transparent 119px),
    radial-gradient(circle at 4% 96%,#F2DEE5 0 150px,transparent 151px),
    radial-gradient(rgba(37,77,59,.14) 1.4px,transparent 1.9px) 0 0/48px 48px}
.gg-stage-wide{margin-bottom:32px}
.gg-stage-wide>.grind-glass{margin-bottom:0}
.stats-grid.gg-stage::before{inset:-18px -16px;background:
    radial-gradient(circle at 2% 8%,#D9F88D 0 70px,transparent 71px),
    radial-gradient(circle at 98% 100%,#F2DEE5 0 90px,transparent 91px),
    radial-gradient(rgba(37,77,59,.14) 1.4px,transparent 1.9px) 0 0/48px 48px}
.gg-stage-rail::before{inset:-34px 0 -30px;border-radius:0;background:
    radial-gradient(circle at 16% 34%,#F2DEE5 0 170px,transparent 171px),
    radial-gradient(circle at 52% 72%,#D9F88D 0 150px,transparent 151px),
    radial-gradient(circle at 92% 30%,#F2DEE5 0 120px,transparent 121px),
    radial-gradient(rgba(37,77,59,.14) 1.4px,transparent 1.9px) 0 0/48px 48px}
@media(max-width:750px){
  .topbar.gg-nav{top:8px;height:52px;margin:8px 10px 0;padding:0 6px 0 16px}
  .gg-stage::before{inset:-14px -10px;border-radius:28px}
  .gg-stage-rail::before{inset:-20px 0}
}

/* ---------- Focus rings on glass ---------- */
.grind-glass:focus-visible,.grind-glass :focus-visible{outline:2px solid #D9F88D;outline-offset:2px}
.grind-glass:is([data-variant="frost"],[data-variant="lime"],[data-variant="lens"]):focus-visible,
.grind-glass:is([data-variant="frost"],[data-variant="lime"],[data-variant="lens"]) :focus-visible{outline-color:#203A2D}

/* ---------- Themes (app). Glass follows the theme the student picked. ---------- */
html[data-theme="ocean"] .grind-glass:not([data-variant]),html[data-theme="ocean"] .grind-glass[data-variant="ink"]{--gg-tint:48,68,99}
html[data-theme="ocean"] .grind-glass:is([data-variant="frost"],[data-variant="lens"]){--gg-tint:240,248,249;--gg-text:#253449}
html[data-theme="lavender"] .grind-glass:not([data-variant]),html[data-theme="lavender"] .grind-glass[data-variant="ink"]{--gg-tint:82,58,85}
html[data-theme="lavender"] .grind-glass:is([data-variant="frost"],[data-variant="lens"]){--gg-tint:244,246,252;--gg-text:#3d2d40}
html[data-theme="sunset"] .grind-glass:not([data-variant]),html[data-theme="sunset"] .grind-glass[data-variant="ink"]{--gg-tint:91,60,31}
html[data-theme="sunset"] .grind-glass:is([data-variant="frost"],[data-variant="lens"]){--gg-tint:252,244,244;--gg-text:#442e1b}
html[data-theme="ocean"] .rd-item.is-next::after,html[data-theme="ocean"] .gg-stage::before{filter:hue-rotate(95deg)}
html[data-theme="lavender"] .rd-item.is-next::after,html[data-theme="lavender"] .gg-stage::before{filter:hue-rotate(160deg) saturate(.6)}
html[data-theme="sunset"] .rd-item.is-next::after,html[data-theme="sunset"] .gg-stage::before{filter:hue-rotate(-100deg)}

/* Midnight (dark): ink glass on dark grounds, lime kept for highlights, frost turns to ink. */
html[data-theme="midnight"] .grind-glass[data-variant="frost"]{--gg-tint:37,77,59;--gg-text:#F6F7F1}
html[data-theme="midnight"] .grind-glass.gg-nav[data-variant]{--gg-alpha:.92}
html[data-theme="midnight"] .grind-glass.gg-hero[data-variant]{--gg-alpha:.62}
html[data-theme="midnight"] .grind-glass[data-variant="lens"]{--gg-text:#203A2D}
html[data-theme="midnight"] .grind-glass[data-variant="frost"]:focus-visible,html[data-theme="midnight"] .grind-glass[data-variant="frost"] :focus-visible{outline-color:#D9F88D}
html[data-theme="midnight"] #modal::backdrop{background:rgba(0,0,0,.45)}
html[data-theme="midnight"] .grind-glass.gg-sheet :is(label,.help,.icon-button,.subtext,.muted,.panel-heading p){color:#C9D8B8}
html[data-theme="midnight"] .gg-stage::before{opacity:.35}
html[data-theme="midnight"] .rd-card.gg-lens :is(.rd-name>strong,.rd-weight strong,.rd-weight small,.rd-rel){color:#203A2D}