/* LIQUID glass sidebar · stage 2 — the drop's canvas: laid over the sidebar with a margin of 26 px on every side
   (--M) so the drop's shadow and stretch are never cut, never in the way of the pointer, hidden in reduced motion. */

/* ---------- semantic + component tokens (variants override the primitives) ---------- */
:root {
  --side-w: 256px; --icon-cx: 32px; --sb-pad: 10px; --ic: 20px;
  --row-h: 40px; --row-r: 10px; --lane: 44px; --gap: 14px; --app-pad: 12px; --radius-sb: 18px;
  --item-pl: calc(var(--icon-cx) - var(--sb-pad) - var(--ic) / 2);
  --ease: cubic-bezier(.32, .72, 0, 1); --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-rail: 420ms;
  --M: 26px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; text-rendering: optimizeLegibility; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ic { width: var(--ic); height: var(--ic); flex: none; display: block; }

/* ---------- app frame ---------- */
.app { position: relative; height: 100vh; height: 100dvh; display: grid; grid-template-columns: var(--sb-w, var(--side-w)) minmax(0, 1fr); gap: var(--gap); padding: var(--app-pad); }
main { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: auto; display: block; outline: none; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.views { display: grid; min-width: 0; }
.view { grid-area: 1 / 1; min-width: 0; }
.view:not(.is-on) { visibility: hidden; height: 0; overflow: hidden; }
.view.enter { animation: view-in .34s var(--ease-out); }
.view.revealing .blk:not(.shown) { visibility: hidden; }
.view.revealing .shown { animation: view-in .38s var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- sidebar ---------- */
.sb { position: relative; z-index: 20; width: var(--sb-w); height: 100%; min-height: 0; }
/* the clip lives on the glass and on each content block, never on a shared parent: a clip-path ancestor would become
   the glass's backdrop root and the blur would see nothing behind the sidebar */
.sb-clip { position: absolute; left: 0; top: 0; bottom: 0; width: var(--side-w); display: flex; flex-direction: column; border-radius: var(--radius-sb); transition: box-shadow .3s; }
.sb-glass { clip-path: inset(0 0 0 0 round var(--radius-sb)); transition: clip-path var(--t-rail) var(--ease); }
.sb-head, .sb-body, .sb-foot { clip-path: inset(-40px 0 -40px 0); transition: clip-path var(--t-rail) var(--ease); }
.sb-glass { position: absolute; inset: 0; border-radius: var(--radius-sb); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--glass-shadow); }
.sb-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.sb-glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-sheen); pointer-events: none; }
.sb-edge { position: absolute; top: 14px; bottom: 14px; left: calc(var(--side-w) - 1px); width: 1px; background: var(--edge-line); opacity: 0; pointer-events: none; transform: translateX(0); transition: transform var(--t-rail) var(--ease), opacity .25s; z-index: 2; }
.sb-head, .sb-body, .sb-foot { position: relative; z-index: 1; }
.sb-head { display: flex; align-items: center; gap: 8px; padding: 12px var(--sb-pad) 8px; min-height: 60px; }
.sb-body { flex: 1; min-height: 0; padding: 6px var(--sb-pad); }
.sb-foot { padding: 10px var(--sb-pad) 12px; }

/* nav rows */
.nav { list-style: none; margin: 0; padding: 0; }
.nav { display: flex; flex-direction: column; gap: var(--row-gap, 2px); }
.row { position: relative; display: flex; align-items: center; }
.item { position: relative; isolation: isolate; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: var(--row-h);
  padding: 0 var(--lane) 0 var(--item-pl); border-radius: var(--row-r); color: var(--ink-2); text-decoration: none; outline: none;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; font-size: var(--row-fs, 14.5px); font-weight: var(--row-fw, 500); letter-spacing: -.005em; cursor: pointer; }
.item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; border-radius: inherit; background: var(--hover-bg); opacity: 0; z-index: -1; transition: opacity .18s, right .32s var(--ease); }
@media (hover: hover) { .item:hover::before { opacity: 1; } }
.is-active > .item { color: var(--ink); }
.is-active > .item::before { background: var(--pill-bg); box-shadow: var(--pill-shadow); opacity: 1; }
.item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ic-wrap { position: relative; display: grid; place-items: center; width: var(--ic); height: var(--ic); flex: none; }
.ic-wrap .ic { transform-origin: 30% 50%; transition: transform .22s var(--ease-out); }
.label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .2s .1s; }
.badge { margin-left: auto; transition: opacity .2s .1s, transform .3s var(--ease-out); }

/* the drop */
canvas.drop { position: absolute; left: calc(-1 * var(--M)); top: calc(-1 * var(--M)); pointer-events: none; z-index: 5; }
canvas.drop.is-failed { display: none; }
.rm canvas.drop { visibility: hidden; }
.rm .is-active > .item::before { box-shadow: var(--pill-shadow-rm, var(--pill-shadow)); }

/* ---------- tablet overlay ---------- */

/* ---------- touch: every control at least 44 px ---------- */
@media (pointer: coarse) {
  .item { height: max(var(--row-h), 44px); }
  .skip { padding: 12px 16px; }
}

/* ---------- reduced motion ---------- */
.rm *, .rm *::before, .rm *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }

/* before fonts/measurements are ready nothing slides in from the wrong place */
html:not(.is-ready) .sb, html:not(.is-ready) main { transition: none !important; }