/* ============================================================================
   KEYBOARD SHORTCUTS - the dialog opened by "?" (js/shortcuts.js). Prefix sc-.

   Tokens only. Every colour is a theme-aware token, so there is nothing to
   declare twice for dark mode here, and nothing in this file animates: the
   dialog's own entrance is motion.css's `.modal.fade .modal-dialog`, which
   already honours prefers-reduced-motion.

   THE GROUPS FLOW IN AN auto-fit GRID, not a fixed column count. Which groups
   exist depends on the page on screen (the ones for this page come first), so a
   template that names a count would leave an empty track whenever the number
   is odd - the same reason panel grids elsewhere in the app are auto-fit.
   ============================================================================ */

.sc-intro {
    margin: 0 0 var(--sp-6);
    color: var(--text-soft);
    font-size: var(--fs-md);
    line-height: var(--lh-prose);
}

.sc-sec-h {
    margin: var(--sp-7) 0 var(--sp-4);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--text);
}
.sc-intro + .sc-sec-h { margin-top: 0; }

.sc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--sp-7) var(--sp-8);
    align-items: start;
}

.sc-group { min-width: 0; }
/* The page you are on: a gold rule, the app's chrome colour, never an encoding. */
.sc-group.is-here {
    border-left: 3px solid var(--accent-line);
    padding-left: var(--sp-5);
}

.sc-gh {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--text);
}
.sc-where {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    line-height: var(--lh-snug);
    color: var(--text-soft);
}

/* ONE GRID FOR THE WHOLE LIST, rows dissolved into it (display: contents), so the
   key column is as wide as the widest key set in THIS group and the descriptions
   line up under each other. A fixed first column had to be wide enough for the
   widest cluster in any group, which left every description in a 330px card with
   half the width. */
.sc-rows {
    margin: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--sp-6);
}
.sc-row { display: contents; }
.sc-keys, .sc-do {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border-soft);
}
.sc-row:first-child > .sc-keys, .sc-row:first-child > .sc-do { border-top: 0; }

.sc-keys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: start;
    gap: var(--sp-2);
    margin: 0;
}
.sc-do {
    margin: 0;
    /* a cap is taller than a line of text; this puts the first line on the cap's centre */
    padding-top: calc(var(--sp-3) + .2rem);
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--text);
}

/* The cap. Bootstrap styles a bare <kbd> as a black chip; this is the cap people
   know - a pale key with a heavier bottom edge. */
.sc-key {
    display: inline-block;
    min-width: 1.7rem;
    padding: .1rem .45rem;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    text-align: center;
}
.sc-or, .sc-plus {
    color: var(--text-soft);
    font-size: var(--fs-xs);
}
.sc-plus { margin: 0 calc(var(--sp-1) * -1); }