/* =====================================================================
   help.css — the "?" and the card it opens. See help.js.

   Shared by all four front-ends, so it assumes nothing about the page:
   the "?" takes its colour from whatever it sits in (currentColor) so it
   reads on the dark consoles and the light request page alike, and the
   card carries its own fixed palette so it is legible on any background.

   Every layout property on .help-q is set explicitly. The consoles style
   classes like .btn-warn with width:100% — the trap that once turned a
   small Revoke button into a full-width bar — so nothing here is left to
   inherit.
   ===================================================================== */

.help-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    margin: 0 0 0 6px;
    padding: 0;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    font: 700 10.5px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    vertical-align: middle;
    flex: 0 0 auto;
    cursor: help;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Pages colour spans inside labels: the request page paints every
   `.field label > span` red, for the required-field asterisk, and the "?" is
   a span inside a label too. That selector outranks a lone `.help-q`, so the
   class is doubled here to win back the colour without `!important`. */
span.help-q.help-q {
    color: inherit;
}

/* The glyph is drawn here, not typed into the element — see makeButton()
   in help.js for why the element itself must stay empty. */
.help-q::before {
    content: '?';
    display: block;
    transform: translateY(0.5px);
}

/* A larger invisible hit area than the visible circle, so it can be
   pressed on a phone — and in gloves, on the volunteer portal — without
   making every heading look cluttered. */
.help-q::after {
    content: '';
    position: absolute;
    inset: -9px;
}

/* EXCEPT on the SOS and welfare alarms. There the "?" sits in the alarm's
   title, above Acknowledge and Stand down, and today there is plenty of room.
   But a later change to that popup's layout could slide an invisible 9px hit
   area over one of those buttons, and a swallowed tap on "Stand down" during a
   live SOS is the worst way this feature could fail. So on the alarms the "?"
   is exactly as big as it looks, and no bigger. */
#sos-alert .help-q::after,
#welfare-alert .help-q::after {
    inset: 0;
}

.help-q:hover,
.help-q:focus-visible {
    opacity: 1;
    transform: scale(1.08);
}

.help-q:focus-visible {
    outline: 2px solid #2f81f7;
    outline-offset: 2px;
}

/* On its own line under a control rather than inline beside it. */
.help-q--block {
    margin: 4px 0 0;
}

/* The volunteer portal is used outdoors, in gloves, often in poor light. */
.help-page-rider .help-q {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    font-size: 12px;
    opacity: 0.7;
}

/* ---------------------------------------------------------------------
   The card
   --------------------------------------------------------------------- */

.help-overlay {
    position: fixed;
    inset: 0;
    /* Above EVERYTHING in the app, because a "?" is often inside an open
       modal and its card must sit on top. The highest in use are the SOS and
       welfare-overdue alarms, which app.js / app2.js build at 100000 and
       100001 — so a lower number here would open the help card BEHIND the
       alarm it is explaining. Those alarms are built in JavaScript, not the
       stylesheets, which is why checking only the CSS gets this wrong. */
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 12, 20, 0.55);
    animation: help-fade 0.14s ease-out;
}

.help-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #1c2330;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    font: 400 14.5px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
    animation: help-rise 0.16s ease-out;
}

.help-card__title {
    margin: 0;
    padding: 18px 20px 8px;
    font: 700 17px/1.3 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #0d1117;
    text-wrap: balance;
}

.help-card__body {
    padding: 0 20px 4px;
    overflow-y: auto;
    color: #2b3445;
}

/* A "?" on a group (a menu, a panel) shows several guide entries at once. */
.help-card__sub {
    margin: 14px 0 4px;
    font: 700 13px/1.3 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #1f5fbf;
    letter-spacing: 0.01em;
}
.help-card__body > .help-card__sub:first-child { margin-top: 2px; }

.help-card__body p { margin: 0 0 10px; }
.help-card__body ul,
.help-card__body ol { margin: 0 0 10px; padding-left: 20px; }
.help-card__body li { margin: 0 0 5px; }
.help-card__body strong { color: #0d1117; }
.help-card__body code {
    font: 600 0.92em/1 ui-monospace, 'Cascadia Mono', Consolas, monospace;
    background: #eef1f5;
    padding: 1px 5px;
    border-radius: 4px;
}

.help-card__foot {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 12px 20px 16px;
    border-top: 1px solid #e6e9ef;
    margin-top: 10px;
}

.help-card__foot button {
    box-sizing: border-box;
    width: auto;
    margin: 0;
    padding: 9px 16px;
    border-radius: 8px;
    font: 600 14px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    min-height: 40px;
}

.help-card__more {
    background: transparent;
    color: #1f5fbf;
    border: 1px solid #c9d6ea;
}

.help-card__more:hover { background: #f1f5fb; }

.help-card__close {
    background: #1f5fbf;
    color: #ffffff;
    border: 1px solid #1f5fbf;
}

.help-card__close:hover { background: #184c99; }

.help-card__foot button:focus-visible {
    outline: 2px solid #2f81f7;
    outline-offset: 2px;
}

/* Phones: a sheet from the bottom, where a thumb can reach "Got it". */
@media (max-width: 520px) {
    .help-overlay { align-items: flex-end; padding: 0; }
    .help-card {
        max-width: none;
        max-height: 82vh;
        border-radius: 14px 14px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .help-card__foot button { flex: 1 1 auto; min-height: 46px; }
}

/* When "Open the full guide" lands on a topic, show which one. */
.help-item--flash {
    animation: help-flash 1.6s ease-out;
    border-radius: 6px;
}

@keyframes help-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes help-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes help-flash {
    0%   { box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.65); }
    100% { box-shadow: 0 0 0 3px rgba(47, 129, 247, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .help-overlay, .help-card, .help-item--flash { animation: none; }
    .help-q { transition: none; }
    .help-q:hover, .help-q:focus-visible { transform: none; }
}

/* Never print the "?"s — the history report and the ward posters are
   printed, and a stray help circle on a poster screwed to a wall would be
   there for years. */
@media print {
    .help-q, .help-overlay { display: none !important; }
}