/* ==========================================================================
   ⌘K command palette — shell/palette.js
   The overlay, card, input, list, group, item and footer classes live in
   study.css; everything here is the row internals and the states that the
   keyboard needs. Tokens only.
   ========================================================================== */

/* Rows are a tap target in their own right, and the highlight has to read as
   selection rather than hover, so it keeps a left marker as well as a fill. */
.st-pal-item {
    position: relative;
    min-height: var(--st-tap);
    cursor: pointer;
    scroll-margin: 6px 0;
}
.st-pal-item::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: transparent;
}
.st-pal-item.is-active::before { background: var(--st-accent); }
.st-pal-item.is-active .st-pal-text__title { font-weight: 700; }

/* Leading art sits on a 28px column so dots and icon tiles line up. */
.st-pal-item .st-tile { width: 28px; height: 28px; border-radius: 8px; }
.st-pal-dot { width: 10px; height: 10px; margin: 0 9px; }

.st-pal-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}
.st-pal-text__title { font-weight: 500; line-height: 1.3; }

.st-pal-item .st-kbd { flex: 0 0 auto; margin-left: auto; }

.st-pal-empty {
    padding: 18px 12px 8px;
    font-size: 14px;
    color: var(--st-ink-3);
    text-align: center;
}

.st-pal-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.st-pal-hint .st-kbd { font-weight: 700; }

/* The group heading is a label, not a row — stop it reading as tappable. */
.st-palette__group { pointer-events: none; user-select: none; }
.st-palette__group:first-child { padding-top: 6px; }

/* Shared-sheet tweaks kept here rather than editing study.css: on a phone the
   palette wants the full sheet, and the list the room a 50vh cap denies it. */
@media (max-width: 760px) {
    .st-palette { padding: 6vh 12px 12px; }
    .st-palette__list { max-height: 60vh; }
    .st-palette__foot { flex-wrap: wrap; }
}

@media (max-width: 420px) {
    /* Three hints do not fit; the one you actually need on a phone is escape. */
    .st-pal-hint:nth-child(2) { display: none; }
}