/* ===== Modals ===== */
/* The card can be taller than the viewport - the contact variant, with the
   textarea, is the tallest at 680px, which does not fit a 667px screen.
   All three declarations are needed, and none of them alone is enough:

     - align-items: center on its own centres the card and then clips its
       top out of reach when the card is too tall; the overflowing half
       cannot be scrolled to.
     - margin: auto on the card centres it while there is room and lets
       the overlay scroll once there is not.
     - overflow-x is set explicitly because a non-visible overflow on one
       axis makes the other compute to `auto` - the same rule behind the
       scrollbar flash in the Evals table (5bb205e). */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(8,18,25,0.5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 24px;
    overflow-y: auto; overflow-x: hidden;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-card {
    background: var(--surface); border-radius: 18px;
    width: 100%; max-width: 420px; margin: auto;
    box-shadow: 0 40px 120px rgba(0,0,0,0.3);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.3s ease;
    position: relative;
}
.modal-overlay.open .modal-card { transform: none; }
.modal-card-wide { max-width: 1100px; padding: 56px 24px 24px; min-width: 0; }
#zoom-stage { margin: 0 auto; }
.modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-3); transition: all 0.2s;
}
.modal-close:hover { border-color: #c8d4da; color: var(--ink); }
.modal-header { padding: 30px 30px 0; }
.modal-header h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.modal-header p { font-size: 0.83rem; color: var(--text-2); line-height: 1.6; margin-top: 8px; }
.modal-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--accent);
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
}
.modal-label::before { content: ''; width: 12px; height: 2px; background: var(--accent); }
.modal-body { padding: 22px 30px 28px; }
.modal-body label {
    font-size: 0.72rem; font-weight: 600; color: var(--ink-soft);
    display: block; margin-bottom: 6px;
}
.modal-body label span { font-weight: 400; color: var(--text-3); }
.modal-body input, .modal-body textarea {
    width: 100%; height: 42px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-soft);
    padding: 0 14px; font-family: inherit; font-size: 0.85rem;
    color: var(--ink); outline: none; transition: border-color 0.2s;
}
/* The shared rule above is sized for a single-line input: a fixed 42px
   height and no vertical padding would flatten a rows="4" textarea to one
   line and put its first line against the top border. Height goes back to
   the rows attribute, and only vertical resizing is allowed - dragging it
   wider would break out of the modal card. */
.modal-body textarea {
    height: auto; padding: 11px 14px; line-height: 1.5;
    resize: vertical; min-height: 42px; display: block;
}
.modal-body input::placeholder, .modal-body textarea::placeholder { color: var(--text-3); }
.modal-body input:focus, .modal-body textarea:focus { border-color: var(--accent); background: var(--surface); }
.form-group { margin-bottom: 14px; }
.form-group:last-of-type { margin-bottom: 20px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-error { margin-top: 6px; font-size: 0.72rem; color: #9c2f21; min-height: 1em; }
.form-error { margin-bottom: 12px; font-size: 0.74rem; color: #9c2f21; text-align: center; }
/* Links inside an error inherit the error's colour rather than the
   global --accent. The red is doing semantic work - this is a
   failure - and a turquoise word inside it reads as a second, unrelated
   message. The underline carries the affordance, so no colour change is
   needed to mark it as a link, and `currentColor` keeps the underline
   from staying pale turquoise against red.

   On the container, not on individual messages: the auto-linkified
   addresses in `signup_needs_sales` and the generic fallback land here
   too and have the same clash. */
.form-error a { color: inherit; text-decoration-color: currentColor; }
.modal-submit {
    width: 100%; height: 44px; border-radius: 11px;
    background: var(--accent-dark); border: none;
    display: flex; align-items: center; justify-content: center;
    gap: 8px; cursor: pointer; color: white;
    font-family: inherit; font-weight: 600; font-size: 0.85rem;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.modal-submit:hover { background: var(--accent-dark); box-shadow: 0 6px 20px rgba(12,25,41,0.25); }
.modal-footer-text { text-align: center; margin-top: 14px; font-size: 0.64rem; color: var(--text-3); }
.modal-footer-text a { color: var(--text-2); }
.modal-success { display: none; text-align: center; padding: 48px 32px; }
.modal-success.show { display: block; }
.modal-success h3 { font-size: 1.2rem; font-weight: 700; margin-top: 16px; }
.modal-success p { font-size: 0.85rem; color: var(--text-2); margin-top: 8px; line-height: 1.6; }