/*
 * Home — Pre-Flight Briefing document.
 * Two-row document header (title/approval + field strip). Full-width payment
 * with a top label bar so the PayPal iframe has breathing room. Period-style
 * section numerals. Tokens only.
 */

.briefing-doc {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--eh-space-7) clamp(var(--eh-space-4), 4vw, var(--eh-space-7)) 0;
    font-family: var(--eh-font-mono);
    font-size: 0.95rem;
    line-height: var(--eh-lh-snug);
    color: var(--eh-color-ink);
}

/* ============================================================
 * Classification bar — top and bottom strip
 * ============================================================ */

.doc-classification {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--eh-space-4);
    padding: var(--eh-space-2) var(--eh-space-5);
    background: var(--eh-color-ink);
    color: var(--eh-color-paper-raised);
    font-family: var(--eh-font-mono);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: var(--eh-tracking-caps);
    text-transform: uppercase;
    margin-bottom: var(--eh-space-5);
}
.doc-classification:last-child {
    margin-bottom: 0;
    margin-top: var(--eh-space-5);
    justify-content: center;
    gap: var(--eh-space-5);
}
.doc-classification-mark {
    color: var(--eh-color-brass);
    white-space: nowrap;
}

/* ============================================================
 * Document header — 2 rows: title+approval on top, field strip below
 * ============================================================ */

.doc-header {
    border: 2px solid var(--eh-color-ink);
    background: var(--eh-color-paper-raised);
}

.doc-header-row-title {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 2px solid var(--eh-color-ink);
}

.doc-header-title {
    flex: 1 1 auto;
    padding: var(--eh-space-5) var(--eh-space-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--eh-space-1);
    border-right: 1px solid var(--eh-color-ink);
}
.doc-header-form {
    font-family: var(--eh-font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: var(--eh-tracking-caps);
    text-transform: uppercase;
    color: var(--eh-color-brass);
}
.doc-header-heading {
    font-family: var(--eh-font-mono);
    font-weight: 700;
    font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem);
    letter-spacing: var(--eh-tracking-caps);
    text-transform: uppercase;
    color: var(--eh-color-ink);
    margin: 0;
    line-height: 1.05;
}
.doc-header-sub {
    font-family: var(--eh-font-body);
    font-style: italic;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--eh-color-ink-soft);
    margin-top: var(--eh-space-1);
}

/* -- Approval stamp cell (right of title row) -- */
.doc-header-approval {
    flex: 0 0 auto;
    width: 200px;
    padding: var(--eh-space-4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--eh-space-3);
    background: var(--eh-color-paper);
}
.doc-approval-label {
    font-family: var(--eh-font-mono);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: var(--eh-tracking-caps);
    text-transform: uppercase;
    color: var(--eh-color-ink-muted);
}
.doc-approval-stamp {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: var(--eh-space-2) var(--eh-space-4);
    border: 2px double var(--eh-color-oxblood);
    color: var(--eh-color-oxblood);
    font-family: var(--eh-font-mono);
    text-transform: uppercase;
    transform: rotate(-4deg);
    position: relative;
    align-self: center;
}
.doc-approval-stamp::before {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid currentColor;
    opacity: 0.3;
    pointer-events: none;
}
.doc-approval-word {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: var(--eh-tracking-caps);
}
.doc-approval-date {
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

/* -- Fields strip (row 2 of header) -- */
.doc-header-fields {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}
.doc-field-cell {
    padding: var(--eh-space-3) var(--eh-space-4);
    border-right: 1px dotted var(--eh-color-rule-strong);
    font-family: var(--eh-font-mono);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.doc-field-cell:last-child {
    border-right: none;
}
.doc-field-cell dt {
    font-weight: 400;
    letter-spacing: var(--eh-tracking-caps);
    text-transform: uppercase;
    color: var(--eh-color-ink-muted);
    font-size: 0.66rem;
}
.doc-field-cell dd {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--eh-color-ink);
    font-size: 0.85rem;
}

/* ============================================================
 * Sections
 * ============================================================ */

.doc-section {
    margin-top: var(--eh-space-9);
    margin-bottom: var(--eh-space-9);
}

.doc-section-head {
    display: flex;
    align-items: baseline;
    gap: var(--eh-space-4);
    margin-bottom: var(--eh-space-5);
}

.doc-numeral {
    font-family: var(--eh-font-mono);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    color: var(--eh-color-brass);
    flex: 0 0 auto;
    min-width: 3ch;
}
.doc-numeral::after {
    content: ".";
    color: var(--eh-color-ink);
}

.doc-section-title {
    font-family: var(--eh-font-mono);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--eh-tracking-caps);
    color: var(--eh-color-ink);
    margin: 0;
    flex: 0 0 auto;
    padding-right: var(--eh-space-4);
}

.doc-rule {
    flex: 1 1 auto;
    height: 0;
    border-bottom: 1px solid var(--eh-color-ink);
    align-self: center;
    margin-bottom: 4px;
}

/* ============================================================
 * Prose
 * ============================================================ */

.doc-prose {
    font-family: var(--eh-font-body);
    font-size: var(--eh-fs-body);
    line-height: var(--eh-lh-normal);
    color: var(--eh-color-ink);
    max-width: 64ch;
    margin-bottom: var(--eh-space-5);
}
.doc-prose p {
    margin: 0 0 var(--eh-space-4);
}
.doc-prose p:last-child {
    margin-bottom: 0;
}
.doc-prose strong {
    color: var(--eh-color-brass);
    font-weight: 700;
}

/* ============================================================
 * Numbered form fields (Operating Conditions)
 * ============================================================ */

.doc-fields {
    margin: 0;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--eh-color-rule-strong);
    border-bottom: 1px solid var(--eh-color-rule-strong);
}

.doc-line {
    display: flex;
    align-items: baseline;
    gap: var(--eh-space-3);
    font-family: var(--eh-font-mono);
    font-size: 0.92rem;
    padding: var(--eh-space-2) var(--eh-space-2);
    margin: 0;
    border-bottom: 1px dotted var(--eh-color-rule);
}
.doc-line:last-child {
    border-bottom: none;
}

.doc-line-num {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--eh-color-ink-muted);
    flex: 0 0 2.5ch;
    letter-spacing: 0.05em;
}

.doc-line-key {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--eh-color-ink);
    flex: 0 0 auto;
}

.doc-line-dots {
    flex: 1 1 auto;
    align-self: end;
    min-height: 1px;
    border-bottom: 1px dotted var(--eh-color-ink-muted);
    margin-bottom: 0.4em;
    opacity: 0.55;
}

.doc-line-value {
    flex: 0 0 auto;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--eh-color-brass);
    margin: 0;
    text-align: right;
}
.doc-line-value-on {
    color: var(--eh-color-sage);
}
.doc-line-value-off {
    color: var(--eh-color-ink-muted);
}

/* ============================================================
 * Clearances — numbered list with status badges
 * ============================================================ */

.doc-clearances {
    list-style: none;
    padding: 0;
    margin: var(--eh-space-5) 0 var(--eh-space-6);
    font-family: var(--eh-font-mono);
    border-top: 1px solid var(--eh-color-ink);
    border-bottom: 1px solid var(--eh-color-ink);
}
.doc-clearances li {
    display: flex;
    align-items: center;
    gap: var(--eh-space-4);
    padding: var(--eh-space-3) var(--eh-space-3);
    border-bottom: 1px dotted var(--eh-color-rule-strong);
}
.doc-clearances li:last-child {
    border-bottom: none;
}
.doc-clearance-num {
    font-family: var(--eh-font-mono);
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--eh-color-ink-muted);
    flex: 0 0 3ch;
    letter-spacing: 0.05em;
}
.doc-clearances a {
    flex: 1 1 auto;
    color: var(--eh-color-ink);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: 0.92rem;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}
.doc-clearances a:hover {
    color: var(--eh-color-brass);
    border-bottom-color: var(--eh-color-brass);
    text-decoration: none;
}
.doc-clearance-status {
    font-family: var(--eh-font-mono);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: var(--eh-tracking-caps);
    text-transform: uppercase;
    color: var(--eh-color-sage);
    border: 1px solid currentColor;
    padding: 2px var(--eh-space-2);
    border-radius: var(--eh-radius-sm);
    flex: 0 0 auto;
}

/* ============================================================
 * Action field — "Action Req'd / File Application"
 * ============================================================ */

.doc-action {
    display: flex;
    align-items: stretch;
    border: 2px solid var(--eh-color-ink);
    background: var(--eh-color-paper-raised);
    font-family: var(--eh-font-mono);
}
.doc-action-label {
    flex: 0 0 auto;
    background: var(--eh-color-ink);
    color: var(--eh-color-paper-raised);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: var(--eh-tracking-caps);
    text-transform: uppercase;
    padding: var(--eh-space-3) var(--eh-space-4);
    display: flex;
    align-items: center;
}
.doc-action-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eh-space-4);
    padding: var(--eh-space-3) var(--eh-space-5);
    color: var(--eh-color-brass);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}
.doc-action-arrow {
    color: var(--eh-color-brass);
    font-weight: 700;
    font-size: 1.15em;
}
@media (prefers-reduced-motion: no-preference) {
    .doc-action-link {
        transition: background-color var(--eh-dur-fast) var(--eh-ease-out);
    }
    .doc-action-arrow {
        transition: transform var(--eh-dur-fast) var(--eh-ease-out);
    }
    .doc-action-link:hover .doc-action-arrow {
        transform: translateX(4px);
    }
}
.doc-action-link:hover {
    background: var(--eh-color-brass-soft);
    color: var(--eh-color-brass-dark);
    text-decoration: none;
}
.doc-action-link:hover .doc-action-arrow {
    color: var(--eh-color-brass-dark);
}
html[data-theme="dark"] .doc-action-link:hover {
    background: var(--eh-color-brass-soft);
    color: var(--eh-color-brass);
}
html[data-theme="dark"] .doc-action-link:hover .doc-action-arrow {
    color: var(--eh-color-brass);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .doc-action-link:hover {
        background: var(--eh-color-brass-soft);
        color: var(--eh-color-brass);
    }
    html:not([data-theme="light"]) .doc-action-link:hover .doc-action-arrow {
        color: var(--eh-color-brass);
    }
}

/* ============================================================
 * Payment block — top label bar, full-width PayPal below
 * ============================================================ */

.doc-payment {
    border: 2px solid var(--eh-color-ink);
    /* White in light mode, dark navy in dark mode — token is theme-aware. */
    background: var(--eh-color-input-surface);
    margin-top: var(--eh-space-4);
}

/* PayPal renders an <input type="number"> for the donation amount directly
 * into our DOM (not inside an iframe). Their default styling gives it a
 * medium-grey border that reads as a "grey field" against the cream doc.
 * Force our own input styling with !important because PayPal's SDK re-applies
 * inline styles asynchronously after our CSS parses. */
.doc-payment input[type="number"],
.doc-payment input[type="text"],
.doc-payment input[type="email"] {
    background: var(--eh-color-input-surface) !important;
    color: var(--eh-color-ink) !important;
    border: 1px solid var(--eh-color-ink) !important;
    border-radius: var(--eh-radius-sm) !important;
    font-family: var(--eh-font-mono) !important;
}
.doc-payment-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--eh-space-3);
    background: var(--eh-color-ink);
    color: var(--eh-color-paper-raised);
    padding: var(--eh-space-3) var(--eh-space-5);
    font-family: var(--eh-font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: var(--eh-tracking-caps);
    text-transform: uppercase;
}
.doc-payment-meta {
    color: var(--eh-color-brass);
    font-size: 0.7rem;
}
.doc-payment-inner {
    padding: var(--eh-space-6) var(--eh-space-5);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
}
.doc-payment-inner .paypal-button {
    flex: 1 1 auto;
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: center;
}

#paypal-container-3QGDW6DLB95VU {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
    min-height: 60px;
    box-sizing: border-box;
}

/* ============================================================
 * Signature / sign-off block
 * ============================================================ */

.doc-signoff {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--eh-space-7);
    margin-top: var(--eh-space-9);
    padding-top: var(--eh-space-5);
    border-top: 1px solid var(--eh-color-ink);
}

.doc-sig {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--eh-space-1);
    font-family: var(--eh-font-mono);
    text-align: center;
}
.doc-sig-label {
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: var(--eh-tracking-caps);
    text-transform: uppercase;
    color: var(--eh-color-ink-muted);
}
.doc-sig-line {
    width: min(100%, 160px);
    height: 1px;
    background: var(--eh-color-ink);
    opacity: 0.6;
    margin: var(--eh-space-4) auto var(--eh-space-1);
}
.doc-sig-value {
    font-family: var(--eh-font-body);
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    color: var(--eh-color-ink);
}

/* ============================================================
 * Mobile tuning
 * ============================================================ */

@media (max-width: 760px) {
    .briefing-doc { font-size: 0.88rem; }

    .doc-header-row-title {
        flex-direction: column;
    }
    .doc-header-title {
        border-right: none;
        border-bottom: 2px solid var(--eh-color-ink);
    }
    .doc-header-approval {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: var(--eh-space-3) var(--eh-space-4);
    }
    .doc-header-fields {
        grid-template-columns: 1fr 1fr;
    }
    .doc-field-cell {
        border-bottom: 1px dotted var(--eh-color-rule-strong);
    }
    .doc-field-cell:nth-child(odd) {
        border-right: 1px dotted var(--eh-color-rule-strong);
    }
    .doc-field-cell:nth-child(even) {
        border-right: none;
    }
    .doc-field-cell:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .doc-line {
        flex-wrap: wrap;
        gap: var(--eh-space-2);
    }
    .doc-line-dots {
        min-width: var(--eh-space-6);
    }

    .doc-action {
        flex-direction: column;
    }
    .doc-action-label {
        align-self: stretch;
        justify-content: flex-start;
    }
    .doc-action-link {
        gap: var(--eh-space-3);
    }

    .doc-signoff {
        grid-template-columns: 1fr;
        gap: var(--eh-space-5);
    }
}

@media (max-width: 480px) {
    .doc-classification {
        flex-wrap: wrap;
        gap: var(--eh-space-2);
        font-size: 0.64rem;
    }
    .doc-header-fields {
        grid-template-columns: 1fr;
    }
    .doc-field-cell {
        border-right: none !important;
    }
    .doc-clearances a {
        font-size: 0.82rem;
    }
}