/* Help button and the keyboard shortcuts dialog, shared by every page. */

.help-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--help-button-border, #d9e2e2);
    border-radius: 50%;
    background: var(--help-button-bg, rgba(255, 255, 255, .84));
    color: var(--help-button-color, #1b2d38);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease,
        color .18s ease, transform .18s ease;
}

.help-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.help-button:hover,
.help-button:focus-visible {
    border-color: var(--help-button-hover-border, #a87938);
    background: var(--help-button-hover-bg, #ffffff);
    color: var(--help-button-hover-color, #745020);
    transform: translateY(-1px);
}

.help-button:focus-visible {
    outline: 3px solid rgba(60, 130, 164, .35);
    outline-offset: 2px;
}

.help-dialog {
    width: min(600px, calc(100vw - 32px));
    max-height: min(86vh, 760px);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(16, 27, 34, .35);
    color: #1b2d38;
    font-family: Arial, sans-serif;
    text-align: left;
}

.help-dialog::backdrop {
    background: rgba(16, 27, 34, .55);
}

.help-dialog-inner {
    padding: 22px 24px 24px;
}

.help-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.help-dialog h2 {
    margin: 0;
    color: #162b3a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    font-weight: normal;
}

.help-close {
    width: 36px;
    height: 36px;
    border: 1px solid #d9e2e2;
    border-radius: 50%;
    background: #ffffff;
    color: #1b2d38;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
}

.help-close:hover,
.help-close:focus-visible {
    border-color: #a87938;
    color: #745020;
}

.help-section {
    margin-top: 20px;
}

.help-dialog h3 {
    margin: 0 0 8px;
    color: #745020;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.help-dialog .help-note {
    margin: 0 0 8px;
    color: #687a82;
    font-size: .88rem;
    line-height: 1.5;
    text-align: left;
}

.help-list {
    margin: 0;
    padding: 0;
    border: 1px solid #e3eaea;
    border-radius: 10px;
}

.help-row {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 10px 14px;
    border-bottom: 1px solid #edf1f0;
}

.help-row:last-child {
    border-bottom: 0;
}

.help-row dt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    color: #687a82;
    font-size: .8rem;
}

.help-row dd {
    margin: 0;
    font-size: .92rem;
    line-height: 1.45;
}

.help-dialog kbd {
    display: inline-block;
    min-width: 1.9em;
    padding: 3px 7px;
    border: 1px solid #ccd6d6;
    border-bottom-width: 2px;
    border-radius: 6px;
    background: #f5f8f7;
    color: #162b3a;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.help-tips {
    margin: 0;
    padding-left: 20px;
    font-size: .92rem;
    line-height: 1.55;
}

@media (max-width: 480px) {
    .help-dialog-inner {
        padding: 18px 16px 20px;
    }

    .help-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}