/* =============================================================
   modal.css — blocking action dialog styles (MitsuHub)
   Styles window.Modal (modal.js). Link AFTER design-tokens.css.
   ============================================================= */

.mh-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-scrim);
    backdrop-filter: blur(var(--modal-scrim-blur));
    -webkit-backdrop-filter: blur(var(--modal-scrim-blur));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    transition: opacity var(--transition-base);
    padding: 20px;
}

.mh-modal-overlay.mh-modal-enter {
    opacity: 1;
}

.mh-modal-overlay.mh-modal-exit {
    opacity: 0;
    pointer-events: none;
}

.mh-modal-dialog {
    background: var(--modal-bg-dialog);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(var(--fg-rgb, 255, 255, 255), 0.05);
    transform: scale(0.9) translateY(20px);
    transition: transform var(--dur-slow) var(--ease-spring);
}

.mh-modal-enter .mh-modal-dialog {
    transform: scale(1) translateY(0);
}

.mh-modal-exit .mh-modal-dialog {
    transform: scale(0.9) translateY(20px);
}

.mh-modal-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-circle);
    margin-bottom: 16px;
    box-shadow: var(--shadow-lg);
}

.mh-modal-icon-wrapper i {
    color: var(--text);
    font-size: 1.375rem;
}

.mh-modal-title {
    color: var(--text);
    font-size: 1.125rem;
    font-weight: var(--weight-semibold);
    margin: 0 0 8px;
    font-family: 'Poppins', sans-serif;
}

.mh-modal-message {
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.7);
    font-size: 0.875rem;
    line-height: var(--leading-normal);
    margin: 0 0 24px;
    font-family: 'Poppins', sans-serif;
}

.mh-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.mh-modal-cancel-btn,
.mh-modal-ok-btn,
.mh-modal-destructive-btn {
    flex: 1;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), filter var(--transition-base), transform var(--transition-base);
    font-family: 'Poppins', sans-serif;
}

.mh-modal-cancel-btn {
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.08);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.7);
    border: 1px solid var(--border);
}

.mh-modal-cancel-btn:hover {
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.12);
    color: #ffffff;
}

.mh-modal-ok-btn {
    color: white;
    border: none;
    box-shadow: var(--shadow-md);
}

.mh-modal-ok-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: var(--shadow-md);
}

.mh-modal-ok-btn:active,
.mh-modal-cancel-btn:active {
    transform: scale(0.98);
}

.mh-modal-prompt-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.05);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.875rem;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 24px;
    outline: none;
    transition: border-color var(--transition-base);
    box-sizing: border-box;
}

.mh-modal-prompt-input:focus {
    border-color: var(--border-brand);
    box-shadow: var(--ring-blue);
}

.mh-modal-prompt-input::placeholder {
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.3);
}

@media (max-width: 768px) {
    .mh-modal-dialog {
        padding: 24px;
        border-radius: var(--radius-lg);
        max-width: calc(100vw - 40px);
    }

    .mh-modal-icon-wrapper {
        width: 48px;
        height: 48px;
    }

    .mh-modal-icon-wrapper i {
        font-size: 18px;
    }

    .mh-modal-title {
        font-size: 16px;
    }

    .mh-modal-cancel-btn,
    .mh-modal-ok-btn {
        padding: 10px 20px;
        font-size: 0.8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mh-modal-overlay {
        transition: opacity var(--transition-fast);
    }

    .mh-modal-dialog {
        transition: none;
        transform: none !important;
    }
}

/* =============================================================
   Modal.destructive - the shared destructive confirmation.

   Hierarchy is the whole job here. The previous pass had four text roles -
   title, description, ledger, confirm label - rendered as either bold or
   secondary, with the object's NAME bolded twice. Everything carried the same
   weight, so nothing led and the eye had nowhere to land first.

   The structure now inverts what leads: the ACTION is a quiet eyebrow and the
   OBJECT is the hero, because what someone needs to recognise in that half
   second is WHICH club they are about to delete, not that deleting is a thing
   that happens. Five roles, each separated on more than one axis - size, case,
   weight, colour and grouping - so no two read alike.
   ============================================================= */

.mh-modal-destructive {
    max-width: 480px;
    padding: 0;
    text-align: left;
    overflow: hidden;
}

/* One rhythm, applied by the LAYOUT rather than by per-element margins.

   Measured before this change, the three major section gaps came out 19, 20 and
   21px - they were meant to be identical, but each was produced by a different
   mechanism (a margin here, a margin plus a line box there, the body's padding
   at the end) and line-box rounding pulled them apart. A column gap makes them
   equal by construction, so they cannot drift again.

   The intro block below keeps its own tighter internal spacing, because eyebrow,
   title and description are one cluster and should read closer to each other
   than to the sections that follow. */
.mh-modal-destructive__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 26px 26px 20px;
}

/* 1. EYEBROW - the action, and it is not a whisper.

   It was --text-dim on the reasoning that the object matters more than the verb.
   That under-read the moment: this is the one label naming what is about to
   happen, and burying it made a destructive dialog open quietly. It now carries
   the danger colour and a glyph.

   The glyph sits on the EYEBROW's own line, not beside the title. That was the
   earlier mistake - a glyph in the title row pushed the heading out of the text
   column and nothing below it lined up. On its own line it costs no alignment. */
/* The header cluster. Its three lines belong together, so they sit tighter than
   the 20px section rhythm around them. */
.mh-modal-destructive__intro {
    display: block;
}

.mh-modal-destructive__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--danger);
    margin-bottom: 10px;
}

.mh-modal-destructive__eyebrow i {
    font-size: 0.8125rem;
    flex-shrink: 0;
}

/* 2. HERO - the object. The one large thing on the surface. It wraps rather
   than truncating: a name cut off at an ellipsis is exactly the wrong thing to
   be uncertain about here. */
.mh-modal-destructive .mh-modal-title {
    display: block;
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* 3. BODY - the explanation. Muted, and carries NO bold: the name is already
   the hero above it, and repeating it in bold here is what flattened the two
   into one texture. */
.mh-modal-destructive .mh-modal-message {
    margin: 0;
    text-align: left;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* 4. LEDGER - reads as a receipt. Label flush left, count flush RIGHT, so both
   columns have a hard edge and the variable gap falls in the middle where it
   reads as spacing rather than as misalignment. The previous pass right-aligned
   the count against the LABEL, which put the ragged gap between two things that
   belong together: 214 sat tight to its word while 5 floated away from its. */
.mh-modal-consequences {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.02);
    max-height: 40vh;
    overflow-y: auto;
}

/* An explicit line-height, because the label and the count are different
   weights and their line boxes resolved to different heights - rows measured 39
   and 40px in the same list. One pixel is enough to make a list of four rows
   look hand-placed rather than ruled. Stated here, every row computes the same. */
.mh-modal-consequence {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 10px 14px;
    font-size: 0.875rem;
    line-height: var(--leading-normal);
}

.mh-modal-consequence + .mh-modal-consequence {
    border-top: 1px solid var(--border);
}

.mh-modal-consequence-label {
    color: var(--text-secondary);
}

.mh-modal-consequence-count {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
    color: var(--text);
}

/* 5. THE GATE - its own zone, not a stray label and input. Inset, bordered and
   darker than the dialog, so it reads as something you step into rather than
   another paragraph. */
.mh-modal-confirm {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.22);
    padding: 14px;
}

.mh-modal-confirm-label {
    display: block;
    font-size: 0.625rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 9px;
}

/* The literal string to type. The chip - bordered, inset, its own line - is what
   says "reproduce this exactly"; the typeface is not doing that work.

   It WAS monospace, which suits an id or a hash but not a human name: mono word
   spaces are wide enough that "Shonen Sunday" read as though it contained a
   double space, which is the one thing a string you must copy character for
   character must never look like.

   No user-select: all either. That made the target one click from the clipboard,
   and a gate whose easiest path is paste is not a gate. Normal selection stays -
   this should not be hostile, just not a shortcut. */
.mh-modal-confirm-target {
    display: block;
    /* Explicit, because this is a <code> element and the USER AGENT stylesheet
       sets monospace on it. Deleting the font-family declaration did not remove
       the monospace - it just handed the decision back to the browser, and the
       chip still rendered with wide mono word spaces. Measured, not assumed. */
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 9px;
    overflow-wrap: anywhere;
}

/* 16px minimum: below that iOS zooms the viewport on focus, which strands a
   position:fixed overlay off-centre with no way back. */
.mh-modal-confirm-input {
    box-sizing: border-box;
    /* Inputs do not inherit the page font either - the UA picks a system face.
       Set so the field and the chip above it are visibly the same text. */
    font-family: 'Poppins', sans-serif;
    width: 100%;
    padding: 10px 12px;
    margin: 0;
    font-size: 16px;
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.04);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
}

.mh-modal-confirm-input:focus {
    outline: none;
    border-color: var(--border-strong);
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.06);
}

/* Confirmation, not correction. There is no mismatch state on purpose: marking
   the field red while someone is still halfway through typing punishes them for
   the act of typing. The field stays neutral until it matches, then says so. */
.mh-modal-confirm-input.is-matched {
    border-color: var(--success);
}

/* THE SIGNATURE, and it is information rather than decoration: the stripes
   appear if and only if the action cannot be undone. A recoverable action gets
   the same row with the stripes and the colour removed, so the two states are
   legible at a glance without reading a word. */
.mh-modal-irreversible {
    display: flex;
    align-items: center;
    /* CENTRED, and tracked out. Left-aligned against the stripes it read as one
       more line of body copy that happened to be red. Centred across the full
       width it reads as a statement stamped across the dialog - which is what it
       is, and it is the last thing seen before the decision. */
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 15px 26px;
    font-size: 0.8125rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    color: var(--danger);
    border-top: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--danger) 9%, transparent) 0 6px,
        transparent 6px 13px
    );
}

.mh-modal-irreversible--restorable {
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.02);
}

.mh-modal-destructive .mh-modal-actions {
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 26px 22px;
}

.mh-modal-destructive .mh-modal-cancel-btn,
.mh-modal-destructive .mh-modal-destructive-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
}

.mh-modal-destructive-btn {
    background: var(--danger);
    color: white;
    border: none;
    box-shadow: none;
}

.mh-modal-destructive-btn:hover:not(:disabled) {
    background: var(--danger-dark);
}

/* Disabled goes NEUTRAL rather than faded-red. A washed-out danger button reads
   as broken - as though the action failed - when what it means is "not yet". */
.mh-modal-destructive-btn:disabled {
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.07);
    color: var(--text-muted);
    cursor: not-allowed;
}

@media (max-width: 480px) {
    /* The horizontal padding tightens at this width; the BOTTOM does not. It is
       the gap between the last section and the band, and it has to stay equal to
       the column gap or the rhythm breaks on the last step only - measured 20/20/18
       at 375px before this. */
    .mh-modal-destructive__body {
        padding: 22px 18px 20px;
    }

    .mh-modal-destructive .mh-modal-title {
        font-size: 1.3125rem;
    }

    .mh-modal-irreversible {
        padding: 12px 18px;
    }

    .mh-modal-destructive .mh-modal-actions {
        flex-direction: column;
        padding: 16px 18px 18px;
    }

    .mh-modal-destructive .mh-modal-cancel-btn,
    .mh-modal-destructive .mh-modal-destructive-btn {
        width: 100%;
        min-height: 44px;
    }
}