/* LIQUID glass sidebar · stage 5 — the command palette: a glass dialog laid out once up front (hidden by
   visibility, so the first open costs no layout), its input, grouped options, highlighted letters, key hints. */

/* ---------- semantic + component tokens (variants override the primitives) ---------- */
:root {
  --side-w: 256px; --rail-w: 64px; --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);
  --rail-pill: calc(var(--rail-w) - 2 * var(--sb-pad));
  --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; }
kbd { font: 500 11px/1 var(--font); min-width: 20px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--kbd-bg); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.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); }
.m-side { --sb-w: var(--side-w); }
.m-rail { --sb-w: var(--rail-w); }
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); }
.m-rail:not(.is-overlay) .sb-glass { clip-path: inset(0 calc(var(--side-w) - var(--rail-w)) 0 0 round var(--radius-sb)); }
.m-rail:not(.is-overlay) .sb-head, .m-rail:not(.is-overlay) .sb-body, .m-rail:not(.is-overlay) .sb-foot { clip-path: inset(-40px calc(var(--side-w) - var(--rail-w)) -40px 0); }
.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; }
.m-rail:not(.is-overlay) .sb-edge { opacity: 1; transform: translateX(calc(var(--rail-w) - var(--side-w))); }
.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, .sub { 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, .sub-li.is-active > .item, .group.has-active:not(.is-open) > .row > .item { color: var(--ink); }
.is-active > .item::before, .group.has-active:not(.is-open) > .row > .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); }
.is-magnifying .ic-wrap .ic { transition: transform .08s linear; }
.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); }
.dot { position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hot); box-shadow: 0 0 0 2px var(--dot-ring); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--ease-out); }
.disclose { position: absolute; right: calc(var(--lane) - 2px); top: 50%; width: 28px; height: 28px; margin-top: -14px; display: grid; place-items: center; border-radius: 8px; color: var(--ink-3); transition: background .15s, opacity .2s .1s, color .15s; z-index: 2; }
.disclose:hover { background: var(--hover-bg); color: var(--ink); }
.disclose .ic { width: 16px; height: 16px; transition: transform .28s var(--ease); }
.group.is-open .disclose .ic { transform: rotate(90deg); }
.group .row > .item { padding-right: calc(var(--lane) + 26px); }
.sub { display: none; flex-direction: column; gap: var(--row-gap, 2px); margin: 2px 0 4px; }
.group.is-open > .sub { display: flex; }
.sub-item { --ic: 16px; height: calc(var(--row-h) - 6px); padding-left: calc(var(--item-pl) + 24px); font-size: calc(var(--row-fs, 14.5px) - 1px); }

/* rail: labels go, the pill becomes a square, things that cannot be seen cannot be focused */
.m-rail:not(.is-overlay) .label, .m-rail:not(.is-overlay) .badge, .m-rail:not(.is-overlay) .disclose, .m-rail:not(.is-overlay) .rail-hide { opacity: 0; transition: opacity .12s, visibility 0s .14s; visibility: hidden; }
.m-rail:not(.is-overlay) .item::before { right: calc(100% - var(--rail-pill)); }
.m-rail:not(.is-overlay) .item.has-badge .dot { opacity: 1; transform: none; }
.m-rail:not(.is-overlay) .sub { display: none; }
.m-rail:not(.is-overlay) .group.has-active > .row > .item::before { background: var(--pill-bg); box-shadow: var(--pill-shadow); opacity: 1; }
.rail-only { opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s .15s; }
.m-rail:not(.is-overlay) .rail-only { opacity: 1; visibility: visible; transition: opacity .2s .18s; }

/* 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)); }

/* tooltip, scrim */
#tip { position: fixed; left: 0; top: 0; z-index: 70; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 11px; border-radius: 10px; background: var(--tip-bg); color: var(--tip-ink); font-size: 13px; font-weight: 500; box-shadow: var(--pop-shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .12s; }
#tip.is-on { opacity: 1; }
#tip kbd { height: 18px; min-width: 18px; font-size: 10.5px; }
#tip kbd + kbd { margin-left: -4px; }
.tip-n { font-weight: 600; color: var(--accent); margin-left: 2px; }
.scrim { position: fixed; inset: 0; z-index: 15; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .3s; }
.is-overlay .scrim { opacity: 1; pointer-events: auto; }
.is-overlay .sb-clip { box-shadow: var(--overlay-shadow); }

/* ---------- palette ---------- */
#palette { position: fixed; inset: 0; z-index: 80; display: grid; justify-items: center; align-items: start; padding: max(10vh, 24px) 16px 16px; }
#palette:not(.is-shown) { visibility: hidden; pointer-events: none; }
.pal-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .16s; }
.pal-box { position: relative; width: min(600px, 100%); max-height: min(560px, 80vh); display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--pal-bg); -webkit-backdrop-filter: var(--glass-filter-strong); backdrop-filter: var(--glass-filter-strong); box-shadow: var(--pal-shadow); opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .16s, transform .22s var(--ease-out); }
.pal-box::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; }
#palette.is-open .pal-box { opacity: 1; transform: none; }
#palette.is-open .pal-scrim { opacity: 1; }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 0 14px 0 16px; height: 56px; border-bottom: 1px solid var(--line); }
.pal-in .ic { color: var(--ink-3); }
.pal-in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font: 400 16px/1 var(--font); }
.pal-in input::placeholder { color: var(--ink-3); }
.pal-list { overflow: auto; padding: 6px; overscroll-behavior: contain; }
.pal-gh { padding: 10px 10px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.pal-opt { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 10px; border-radius: 10px; color: var(--ink-2); cursor: pointer; font-size: 14px; }
.pal-opt[aria-selected="true"] { background: var(--pal-sel); color: var(--ink); }
.pal-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--pal-ic-bg); color: var(--ink-2); flex: none; }
.pal-ic .ic { width: 16px; height: 16px; }
.pal-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-label mark { background: none; color: var(--accent); font-weight: 600; }
.pal-sub { color: var(--ink-3); }
.pal-hint { font-size: 12px; color: var(--accent); }
.pal-keys { display: flex; gap: 4px; }
.pal-empty { padding: 28px 16px; text-align: center; color: var(--ink-3); }
.pal-foot { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.pal-foot span { display: inline-flex; align-items: center; gap: 5px; }
.pal-foot .pal-count { margin-left: auto; }

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

/* ---------- touch: every control at least 44 px ---------- */
@media (pointer: coarse) {
  .item { height: max(var(--row-h), 44px); }
  .sub-item { height: max(calc(var(--row-h) - 6px), 44px); }
  .disclose { width: 44px; height: 44px; margin-top: -22px; }
  .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; }