/* DV64 GLASS date-range picker · Stage 3 of 4 adds the WebGL canvas (html.gl); the CSS frost and the CSS range below stay as the no-WebGL fallback.
   The page has one look (sunset, white type); it never follows the OS colour scheme. */
:root { color-scheme: only dark; --ink: rgba(255, 255, 255, .95); --ink2: rgba(255, 255, 255, .74); --violet: #5a48e8; --amber: #f59a4a; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #2a1430; overflow-x: hidden; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

.stage { position: relative; width: 100%; min-height: 100svh; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background: #3b1a3c url(../img/wallpaper-1376.webp) center / cover no-repeat; }
html.gl .stage { background: #2a1430; }
canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html:not(.gl) canvas.gl { display: none; }
html:not(.gl) .stage::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(80, 60, 160, .35), rgba(0, 0, 0, 0) 40%, rgba(40, 10, 40, .55)); backdrop-filter: blur(6px); }

.panes { position: absolute; inset: 0; }
.pane { position: absolute; left: 0; top: 0; width: var(--w); transform-origin: 0 0; border-radius: var(--r); will-change: transform; }
.pane:not(.is-front) { cursor: pointer; }
.pane:not(.is-front) .cell { cursor: pointer; }
html:not(.gl) .pane { background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 24px 60px rgba(40, 8, 40, .35); backdrop-filter: blur(26px) saturate(1.25) brightness(.82); -webkit-backdrop-filter: blur(26px) saturate(1.25) brightness(.82); }

.content { position: absolute; inset: 0; will-change: opacity; transition: opacity .18s ease-out; }
.head { position: absolute; left: var(--pad); right: var(--pad); top: var(--top); height: var(--headH); display: flex; align-items: center; justify-content: space-between; }
.title { margin: 0; font-size: calc(34px * var(--sc)); font-weight: 400; letter-spacing: -.012em; line-height: 1; color: var(--ink); text-shadow: 0 1px 3px rgba(50, 10, 40, .35); white-space: nowrap; }
.title .yr { font-weight: 300; color: rgba(255, 255, 255, .58); margin-left: .18em; font-size: .62em; letter-spacing: 0; }
.chevs, .foot, .title .yr { will-change: opacity; transition: opacity .32s ease; }
.pane.is-front .chevs, .pane:not(.is-front) .foot, .pane:not(.is-front) .title .yr { opacity: 0; }
.chevs { display: flex; gap: calc(14px * var(--sc)); color: rgba(255, 255, 255, .85); }
.chevs span { display: grid; place-items: center; width: calc(30px * var(--sc)); }

.grid { position: absolute; left: var(--pad); top: calc(var(--top) + var(--headH)); }
.wd { display: grid; grid-template-columns: repeat(7, var(--cell)); column-gap: var(--gap); height: var(--wdH); align-items: start; text-align: center;
  font-size: calc(13.5px * var(--sc)); font-weight: 500; color: var(--ink2); letter-spacing: .01em; text-shadow: 0 1px 2px rgba(50, 10, 40, .3); }
.rows { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: grid; grid-template-columns: repeat(7, var(--cell)); column-gap: var(--gap); }
.cell { position: relative; width: var(--cell); height: var(--cell); display: grid; place-items: center; border-radius: calc(10px * var(--sc));
  font-size: calc(18px * var(--sc)); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent; text-shadow: 0 1px 3px rgba(60, 14, 40, .5); }
.cell.blank { cursor: default; }
.cell .num { position: relative; z-index: 1; pointer-events: none; }
.cell[aria-current="date"]::after { content: ""; position: absolute; left: 50%; bottom: calc(7px * var(--sc)); width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); }
.cell.in-range { text-shadow: 0 1px 2px rgba(120, 36, 0, .65), 0 0 8px rgba(120, 36, 0, .35); }
.cell.is-start, .cell.is-end { font-weight: 600; text-shadow: 0 1px 2px rgba(30, 10, 90, .6); }
.pane.is-front .cell[data-dn]:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(150, 132, 255, .65); }
html:not(.gl) .pane.is-front .cell[data-dn]:active { background: rgba(255, 255, 255, .22); }

/* fallback glass when WebGL is unavailable: same layout, CSS frost, CSS range */
html:not(.gl) .cell[data-dn] { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
html:not(.gl) .cell.blank { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
html:not(.gl) .cell.in-range { background: linear-gradient(180deg, #ffc27a, #f08a3a 60%, #d2601f); box-shadow: 0 0 14px rgba(255, 140, 60, .55), inset 0 1px 0 rgba(255, 240, 210, .7); }
html:not(.gl) .cell.is-start, html:not(.gl) .cell.is-end { background: linear-gradient(180deg, #8f84ff, #4a3ad8); box-shadow: 0 0 16px rgba(110, 90, 255, .75), inset 0 0 0 1px rgba(210, 205, 255, .85); }
html:not(.gl) .cell.is-ring { box-shadow: inset 0 0 0 2px rgba(190, 180, 255, .9), 0 0 12px rgba(110, 90, 255, .5); }
html:not(.gl) .cell[data-dn]:hover { background: rgba(255, 255, 255, .16); }

.foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: var(--footH); display: flex; align-items: center; justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, .17); font-size: calc(15px * var(--sc)); font-weight: 500; color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 3px rgba(50, 10, 40, .4); white-space: nowrap; }
.foot b { font-weight: 500; color: rgba(255, 255, 255, .78); margin-right: .3em; }
.foot i { font-style: normal; color: rgba(255, 255, 255, .62); margin-left: .35em; font-weight: 400; }

.nav { position: absolute; z-index: 40; display: flex; }
.nav button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .92);
  cursor: pointer; transition: background-color .2s, transform .2s; -webkit-tap-highlight-color: transparent; }
.nav button:hover { background: rgba(255, 255, 255, .14); }
.nav button:active { transform: scale(.92); }
.nav button:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(150, 132, 255, .6); }
.nav svg { filter: drop-shadow(0 1px 2px rgba(50, 10, 40, .4)); }

.credit { position: absolute; right: 14px; bottom: 10px; z-index: 30; font-size: 11px; color: rgba(255, 255, 255, .55); letter-spacing: .01em; pointer-events: none; }

@media (max-width: 639px) {
  .credit { left: 0; right: 0; text-align: center; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cell, .nav button { transition: none; }
}