/* palette.css — ⌘K */
.palette { padding: 0; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: min(640px, calc(100vw - 32px)); max-height: min(70vh, 560px); margin: 12vh auto auto; box-shadow: 0 40px 100px -30px color-mix(in oklab, #000 60%, transparent); }
.palette::backdrop { background: color-mix(in oklab, var(--bg) 55%, transparent); backdrop-filter: blur(3px); }
.palette[open] { animation: pl-in .16s var(--ease); }
@keyframes pl-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pl-box { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; }
.pl-input { font: 500 20px/1.4 var(--f-ar); padding: 18px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); outline: none; }
:root:lang(en) .pl-input { font-family: var(--f-lat); }
.pl-input::placeholder { color: var(--text-faint); }
.pl-list { overflow-y: auto; padding: 6px 0; margin: 0; overscroll-behavior: contain; }
.pl-group { font: 500 12px/1 var(--f-ar); color: var(--text-faint); padding: 14px 20px 6px; }
:root:lang(en) .pl-group { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.pl-item { display: flex; align-items: baseline; gap: 12px; padding: 10px 20px; cursor: pointer; border-inline-start: 3px solid transparent; }
.pl-item.is-active { background: var(--surface); border-inline-start-color: var(--signature); }
.pl-label { flex: 1 1 auto; min-width: 0; }
.pl-hint { font: 12px/1 var(--f-mono); color: var(--text-faint); }
.pl-empty { padding: 20px; color: var(--text-muted); }
.pl-key { display: flex; gap: 8px; align-items: center; padding: 8px 20px; }
.pl-key kbd { min-width: 24px; text-align: center; }
.pl-foot { padding: 10px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-faint); display: flex; gap: 8px; }
.pl-foot kbd { font-size: 11px; }
@media (pointer: coarse) { .pl-foot { display: none; } }
.toast { position: fixed; inset-inline: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); margin: auto; width: max-content; max-width: calc(100vw - 32px); padding: 10px 16px; background: var(--text); color: var(--bg); font-size: 14px; z-index: 90; opacity: 0; transform: translateY(8px); transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; transform: none; }