/* ============================================================================
   help.css — the contextual help panel (ADR 0031).

   The panel is a column of the shell, not a dialog: it takes its width from the
   content beside it and leaves the page working, because the whole point is to
   follow the instructions on the screen they are about. There is no scrim and
   nothing is trapped; Escape closes it and the focus goes back to the key that
   opened it.

   The article inside is a document of its own (the installed help bundle), so
   nothing below reaches it: its own stylesheet travels with the bundle. What is
   here is the frame around it.
   ============================================================================ */

.shell-help-key {
    width: 28px;
    height: 24px;
}

.shell-help-key[aria-expanded="true"] {
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.shell-help-key[aria-expanded="true"] .ui-glyph { color: var(--color-text); }

.help-drawer {
    flex: 0 0 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-left: 1px solid var(--color-stroke);
    border-top: 1px solid var(--color-stroke);
    border-top-left-radius: var(--radius-lg);
    overflow: hidden;
}

.help-drawer-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-stroke-subtle);
}

.help-drawer-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-card-title);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-drawer-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.help-drawer-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    background: var(--color-surface);
}

/* Nothing to open: the panel says which version and which language it looked for, because that is
   the whole of what is wrong and it is what a support call needs. */
.help-drawer-missing {
    flex: 1 1 auto;
    padding: var(--space-7) var(--space-5);
    text-align: center;
}

.help-drawer-missing p {
    margin: var(--space-3) 0 0;
    color: var(--color-text-secondary);
}

/* Narrow (a phone or a tablet held upright on the network): a 380px column beside a page that
   already has none is two unusable halves, so the panel takes the screen instead. It is still not
   modal: closing it puts the page back exactly as it was. */
@media (max-width: 720px) {
    .help-drawer {
        position: fixed;
        inset: 0;
        z-index: var(--z-popover);
        border: 0;
        border-radius: 0;
    }
}