/* ─────────────────────────────────────────────────────────────────────────
   AED Report Form

   A long, single-column form people fill in from a printed copy. The layout
   optimises for that: one question per row, generous vertical rhythm, and a
   measure narrow enough that the eye doesn't lose its place between the
   question text and the answer.
   ───────────────────────────────────────────────────────────────────────── */

.aed-form-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 20px 64px;
}

/* ─── Header ──────────────────────────────────────────────────────────── */

.aed-form-header {
    margin-bottom: 20px;
}

.aed-form-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #5a6472);
    text-decoration: none;
    margin-bottom: 12px;
}

.aed-form-back:hover {
    color: var(--primary, #c8102e);
}

.aed-form-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary, #16202c);
}

.aed-form-subtitle {
    margin: 6px 0 0;
    max-width: 60ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary, #5a6472);
}

/* ─── Card ────────────────────────────────────────────────────────────── */

.aed-form-card {
    background: var(--card, #fff);
    border: 1px solid var(--border, #e3e7ec);
    border-radius: 16px;
    overflow: hidden;
}

.aed-form-section {
    padding: 24px 28px;
}

.aed-form-section + .aed-form-section {
    border-top: 1px solid var(--border, #e3e7ec);
}

/* ─── Fields ──────────────────────────────────────────────────────────── */

.aed-field + .aed-field {
    margin-top: 20px;
}

.aed-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #16202c);
}

/* Field 3 has no label on the paper form; keep one for screen readers. */
.aed-label-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.aed-req {
    margin-left: 2px;
    color: var(--primary, #c8102e);
    font-weight: 700;
}

.aed-help {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-tertiary, #8a94a3);
}

.aed-error {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lapsed, #c0392b);
}

/* Dates and dropdowns don't need the full measure, and look unmoored at it. */
.aed-input-narrow {
    max-width: 320px;
}

.aed-input-narrow + .mud-input-control {
    margin-top: 10px;
}

/* "Incident Location" and its description box sit side by side, as printed. */
.aed-field-split {
    display: grid;
    grid-template-columns: minmax(220px, auto) 1fr;
    gap: 20px;
    align-items: start;
}

/* ─── Questions ───────────────────────────────────────────────────────── */

.aed-question + .aed-question {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px dashed var(--border, #e3e7ec);
}

.aed-question-head {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 10px;
}

.aed-question-number {
    flex: 0 0 auto;
    min-width: 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-tertiary, #8a94a3);
    font-variant-numeric: tabular-nums;
}

.aed-question-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-primary, #16202c);
}

/* Indent answers under the question text, past the number gutter. */
.aed-question-answer {
    padding-left: 28px;
}

/* ─── Radio rows ──────────────────────────────────────────────────────── */

.aed-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aed-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    border: 1px solid var(--border, #e3e7ec);
    border-radius: 9999px;
    background: var(--surface, #f7f8fa);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.aed-radio:hover {
    border-color: var(--text-tertiary, #8a94a3);
}

.aed-radio.is-selected {
    border-color: var(--primary, #c8102e);
    background: color-mix(in srgb, var(--primary, #c8102e) 8%, transparent);
}

/* The native input stays in the accessibility tree and keeps keyboard and
   screen-reader behaviour; the pill below is what people actually see. */
.aed-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.aed-radio-dot {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--text-tertiary, #8a94a3);
    background: #fff;
    box-sizing: border-box;
}

.aed-radio.is-selected .aed-radio-dot {
    border-color: var(--primary, #c8102e);
    border-width: 5px;
}

.aed-radio input[type="radio"]:focus-visible ~ .aed-radio-dot {
    outline: 2px solid var(--primary, #c8102e);
    outline-offset: 2px;
}

.aed-radio-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #16202c);
}

.aed-radio input[type="radio"]:disabled ~ .aed-radio-text {
    color: var(--text-tertiary, #8a94a3);
}

/* ─── Debrief request (FF-2317) ───────────────────────────────────────── */

/* A tinted card rather than a bare checkbox in the run of questions. It is the
   one thing on this page that asks Project ADAM for something back, and the
   reporter has just answered sixteen questions about a resuscitation — an
   unadorned tick box at the bottom reads as more form to fill in. */
.aed-debrief-card {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border, #e3e7ec);
    border-radius: 12px;
    background: var(--surface, #f7f8fa);
    cursor: pointer;
}

.aed-debrief-card:hover {
    border-color: var(--primary, #9f2241);
}

/* The checkbox is the label's own control, so a click anywhere on the card
   toggles it — including on the help text, which is the largest target. */
.aed-debrief-card:focus-within {
    outline: 2px solid var(--primary, #9f2241);
    outline-offset: 2px;
}

.aed-debrief-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 9px;
}

.aed-debrief-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #16202c);
}

.aed-debrief-help {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary, #5c6674);
}

/* ─── Footer ──────────────────────────────────────────────────────────── */

.aed-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 28px;
    border-top: 1px solid var(--border, #e3e7ec);
    background: var(--surface, #f7f8fa);
}

/* ─── Narrow screens ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .aed-form-section {
        padding: 20px 16px;
    }

    /* Stacked, because side-by-side leaves neither field a usable width. */
    .aed-field-split {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .aed-question-answer {
        padding-left: 0;
    }

    .aed-radio {
        flex: 1 1 auto;
        justify-content: center;
    }
}