/* ============================================================================
   Impulse88 — modal system
   Spec:   design_handoff_impulse88_stadium/MODALS.md
   Design: design/Impulse88 Modals.dc.html

   One shell. Only the accent colour and the body change between "variants".
   Pairs with Views/Shared/_Modal.cshtml and wwwroot/js/impulse88-modal.js.
   ============================================================================ */

.imp-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;              /* above the legacy Bootstrap modal layer (1050) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.imp-modal[hidden] { display: none; }

/* accent — the only token that varies between variants */
.imp-modal-lime  { --imp-modal-accent: var(--imp-lime); --imp-modal-on-accent: var(--imp-bg); }
.imp-modal-red   { --imp-modal-accent: var(--imp-red);  --imp-modal-on-accent: #fff; }
.imp-modal-amber { --imp-modal-accent: var(--imp-amber);--imp-modal-on-accent: var(--imp-bg); }

.imp-modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(4, 7, 10, .6);
}

.imp-modal-panel {
    position: relative;
    width: 100%;
    max-width: var(--imp-modal-w, 420px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--imp-surface);
    border: 1px solid var(--imp-line-2);
    border-radius: 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    animation: imp-modal-in .16s ease-out;
}

@keyframes imp-modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* focus parks here when the dialog has no primary action — it is a container,
   not a control, so it must not draw the global focus ring */
.imp-modal-panel:focus,
.imp-modal-panel:focus-visible { outline: none; }

.imp-modal-accent { flex: none; height: 4px; background: var(--imp-modal-accent); }

/* mobile only */
.imp-modal-grab { display: none; }

/* ---------- header ---------- */

.imp-modal-head {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--imp-line);
}

.imp-modal-closerow { flex: none; display: flex; justify-content: flex-end; padding: 14px 14px 0; }

.imp-modal-eyebrow {
    font: 700 11px/1 var(--imp-cond);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--imp-modal-accent);
}

.imp-modal-title {
    font: 800 19px/1.2 var(--imp-sans);
    letter-spacing: -.025em;
    color: var(--imp-text);
}

.imp-modal-eyebrow + .imp-modal-title { margin-top: 9px; }

.imp-modal-close {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--imp-line-2);
    font: 400 17px/1 var(--imp-sans);
    color: var(--imp-text-2);
    cursor: pointer;
}

.imp-modal-close:hover { border-color: var(--imp-lime); color: var(--imp-lime); }

/* ---------- body ---------- */

.imp-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 22px;
    font: 400 14px/1.7 var(--imp-sans);
    color: var(--imp-text-2);
}

.imp-modal-body.scroll { max-height: 230px; }

/* decoration over the scroll cut — must not eat clicks */
.imp-modal-fade {
    flex: none;
    height: 28px;
    margin-top: -28px;
    position: relative;
    pointer-events: none;
    background: linear-gradient(rgba(15, 22, 29, 0), var(--imp-surface));
}

.imp-modal-copy { font: 400 14px/1.7 var(--imp-sans); color: var(--imp-text-2); margin: 0; }

/* key/value rows — confirm variant */
.imp-modal-rows { display: flex; flex-direction: column; gap: 12px; }
.imp-modal-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.imp-modal-row > span { font: 400 13px/1.4 var(--imp-sans); color: var(--imp-text-2); }
.imp-modal-row > b { font: 700 14px/1.3 var(--imp-sans); color: var(--imp-text); text-align: right; }
.imp-modal-divider { height: 1px; background: var(--imp-line); }

.imp-modal-figure { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.imp-modal-figure > span { font: 700 12px/1 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-modal-figure > b { font: 800 26px/1 var(--imp-sans); color: var(--imp-text); font-variant-numeric: tabular-nums; }

/* form fields inside a modal reuse the global .form-control / .input-label */
.imp-modal-fields { display: flex; flex-direction: column; gap: 16px; }
.imp-modal-fields .input-label { display: block; }
.imp-modal-fields .form-control { margin-top: 8px; }
.imp-modal-hint { font: 400 11px/1.5 var(--imp-sans); color: var(--imp-text-4); margin-top: 7px; }
.imp-modal-field.error .form-control { border-color: var(--imp-red) !important; }
.imp-modal-field.error .imp-modal-hint { color: var(--imp-red); }

/* ---------- hero (result) ---------- */

.imp-modal-hero {
    flex: none;
    padding: 26px 22px;
    text-align: center;
    background: linear-gradient(100deg, var(--imp-surface-3), var(--imp-bg-2));
    border-bottom: 1px solid var(--imp-line);
}

.imp-modal-hero .imp-modal-eyebrow { letter-spacing: .24em; }
.imp-modal-hero-figure { font: 800 44px/1 var(--imp-sans); letter-spacing: -.035em; color: var(--imp-text); margin-top: 12px; font-variant-numeric: tabular-nums; }
.imp-modal-hero-copy { font: 400 13px/1.6 var(--imp-sans); color: var(--imp-text-2); margin-top: 11px; }

/* ---------- feedback (success / error) ---------- */

.imp-modal-feedback { flex: none; padding: 8px 22px 22px; text-align: center; }

.imp-modal-ring {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid var(--imp-modal-accent);
    border-radius: 99px;
    color: var(--imp-modal-accent);
}

.imp-modal-feedback .imp-modal-eyebrow { margin-top: 16px; }
.imp-modal-feedback-title { font: 800 20px/1.25 var(--imp-sans); letter-spacing: -.025em; color: var(--imp-text); margin-top: 9px; }
.imp-modal-feedback-copy { font: 400 13px/1.65 var(--imp-sans); color: var(--imp-text-2); margin-top: 10px; }
.imp-modal-feedback-copy p { margin: 0; }

/* eyebrow suppressed — whatever follows the ring takes the eyebrow's spacing */
.imp-modal-ring + .imp-modal-feedback-title,
.imp-modal-ring + .imp-modal-feedback-copy { margin-top: 16px; }

/* no title — the copy sits straight under the eyebrow, so it needs the room
   the title would have taken rather than the tight title-to-copy gap */
.imp-modal-eyebrow + .imp-modal-feedback-copy { margin-top: 12px; }

/* mono chip so support can trace a transaction or error */
.imp-modal-ref {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 10px;
    background: var(--imp-surface-2);
    border: 1px solid var(--imp-line);
    font: 400 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: .06em;
    color: var(--imp-text-3);
}

.imp-modal-refrow { flex: none; padding: 0 22px 4px; }

/* ---------- footer ---------- */

.imp-modal-foot {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 16px 22px 20px;
    border-top: 1px solid var(--imp-line);
}

.imp-modal-foot.bare { border-top: 0; padding-top: 0; }

/* Both actions share the row equally. flex-basis:0 with equal grow is what
   makes them truly the same width — flex:1 alone still lets a longer label
   ("SAVE ACCOUNT" vs "CANCEL") claim more space via its content size. */
.imp-modal-secondary {
    flex: 1 1 0;
    font: 700 14px/1 var(--imp-cond);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--imp-text-2);
    background: transparent;
    border: 1px solid var(--imp-line-2);
    padding: 16px 0;
    cursor: pointer;
}

.imp-modal-secondary:hover { border-color: var(--imp-lime); color: var(--imp-lime); }

.imp-modal-primary {
    flex: 1 1 0;
    font: 700 15px/1 var(--imp-cond);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--imp-modal-on-accent);
    background: var(--imp-modal-accent);
    /* transparent border, not `border: 0` — Chrome resolves flex-basis:0 against
       the content box here, so the secondary's 1px borders made it 2px wider.
       Matching the border makes both boxes identical; padding drops 17->16 to
       keep the height where it was. */
    border: 1px solid transparent;
    padding: 16px 0;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    cursor: pointer;
}

.imp-modal-primary:hover { filter: brightness(1.08); }

/* single action fills the row */
.imp-modal-foot > .imp-modal-primary:only-child,
.imp-modal-foot > .imp-modal-secondary:only-child { flex: 1; width: 100%; }

/* an error is not an achievement — its only action is a ghost button */
.imp-modal-red.imp-modal-feedback-error .imp-modal-primary { display: none; }

/* body scroll lock, set by the JS */
body.imp-modal-open { overflow: hidden !important; }

/* ============================================================================
   Mobile (<=768px) — same tokens, docked to the bottom edge
   ============================================================================ */

@media only screen and (max-width: 767px) {

    .imp-modal { padding: 0; align-items: flex-end; }

    .imp-modal-panel {
        max-width: none;
        max-height: 88vh;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        animation: imp-modal-up .2s ease-out;
    }

    @keyframes imp-modal-up {
        from { transform: translateY(100%); }
        to   { transform: none; }
    }

    /* grab handle replaces top spacing */
    .imp-modal-grab { display: grid; place-items: center; padding: 10px 0 2px; }
    .imp-modal-grab > i { display: block; width: 44px; height: 4px; border-radius: 99px; background: var(--imp-line-2); }

    .imp-modal-head { padding: 14px 18px; }
    .imp-modal-title { font-size: 18px; }
    .imp-modal-eyebrow { font-size: 10px; letter-spacing: .2em; }
    .imp-modal-body { padding: 16px 18px; }
    .imp-modal-hero { padding: 22px 18px; }
    .imp-modal-hero-figure { font-size: 34px; }
    .imp-modal-feedback { padding: 8px 18px 18px; }

    /* actions stack full width, primary on top for thumb reach. Same 44px
       height as the page's phone buttons (impulse88-theme.css, 767px block)
       — these used to be 18px padding on a 15px face, ~53px each, so the
       two of them plus the old 26px bottom pad ate a third of the sheet.
       The home-indicator clearance comes from the safe-area inset now, so
       phones without one don't pay for it. */
    .imp-modal-foot {
        flex-direction: column;
        gap: 8px;
        padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .imp-modal-foot > .imp-modal-primary,
    .imp-modal-foot > .imp-modal-secondary { flex: none; width: 100%; font-size: 14px; padding: 14px 0; }
    .imp-modal-foot > .imp-modal-primary { order: 1; clip-path: none; }
    .imp-modal-foot > .imp-modal-secondary { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .imp-modal-panel { animation: none !important; }
}