/* Lekton — woff2 (the .ttf URLs previously here 404'd; on-disk files
   are the lekton-*-1.woff2 trio used by marker-client.css).
   font-display:swap so text renders immediately in the system fallback
   while the font downloads. */
@font-face {
    font-family: "Lekton";
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://www.krskrt.com/wp-content/uploads/sites/2/fonts/lekton-normal-400-1.woff2?v=3") format("woff2");
}
@font-face {
    font-family: "Lekton";
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url("https://www.krskrt.com/wp-content/uploads/sites/2/fonts/lekton-normal-700-1.woff2?v=3") format("woff2");
}
@font-face {
    font-family: "Lekton";
    font-style:  italic;
    font-weight: 400;
    font-display: swap;
    src: url("https://www.krskrt.com/wp-content/uploads/sites/2/fonts/lekton-italic-400-1.woff2?v=3") format("woff2");
}
/* KrsKrt Magic Marker — Central Screen styles  v3.2 */

/* ---- Field flash highlight -------------------------------------------- */
@keyframes mm-field-flash {
    0%   { box-shadow: 0 0 0 2px #22c55e; }
    100% { box-shadow: none; }
}
.mm-field-updated {
    animation: mm-field-flash 0.8s ease-out forwards;
}

/* ---- Active part highlight (Phase 3) ---------------------------------- */
/* The `mm-part-active` class is applied to H1 elements ONLY (see
   central-screen.js: every `add('mm-part-active')` call sites a `h1`-only
   querySelectorAll first, so other heading levels H2..H6 never get the
   class and never get the scroll offset). The H1-prefixed rule is the
   only one that matters in practice — kept that way to make the
   intent unambiguous. */
h1.mm-part-active {
    scroll-margin-top: 24px;
}

/* ---- Magic Marker button pristine state (no markers yet) -------------- */
#krskrt-mm-panel > #krskrt-mm-btn.krskrt-mm-btn--pristine {
    background:   #dcfce7;
    border-color: #86efac;
}
#krskrt-mm-panel > #krskrt-mm-btn.krskrt-mm-btn--pristine:hover {
    background:   #bbf7d0;
    color:        #00374a;
}

/* ---- Session-QR panel button (#krskrt-sq-btn) ------------------------- */
#krskrt-mm-panel > #krskrt-sq-btn.krskrt-mm-btn--pristine {
    background:   #dcfce7;
    border-color: #86efac;
}
#krskrt-mm-panel > #krskrt-sq-btn.krskrt-mm-btn--pristine:hover {
    background:   #bbf7d0;
    color:        #00374a;
}

/* ---- Session-QR floating overlay (.mm-cs-sq-overlay) ------------------- */
/* Use the favicon from --kf-sq-favicon (set inline from the page's session-qr
   block) instead of the generic krskrt-sync.svg used by the MM QR overlay. */
.mm-cs-sq-overlay .mm-cs-qr-code-wrap::after {
    background-image: var(--kf-sq-favicon, none);
}

/* URL: bold uppercase, allow wrapping at the <wbr> after /kk/.
   width stays at the inherited 180 px (matches QR canvas) — auto would
   resolve to viewport width in the fixed-position fit-content overlay,
   inflating the card to its max-width. The <a> is display:block so it
   already fills the 180 px container. */
.mm-cs-sq-overlay .mm-cs-qr-or a {
    white-space:    normal;
    font-weight:    bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- Phosphor icons inside the floating panel buttons ----------------- */
/* The Phosphor woff2 has the metric+y-shift fix baked in (see Phosphor
   notes in the mu-plugin CLAUDE.md), so no transform/vertical-align nudge
   is needed any more — the previous `transform: translateY(-1px)` was
   compensating for the un-fixed font and would now pull the icon a pixel
   too high. Just sets the panel-icon size + nukes the inline-baseline gap. */
#krskrt-mm-panel > button .ph {
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- Save-status indicator on #krskrt-dv-btn -------------------------- */
/* The button hosts three overlay slots (see dataview.js):
     .krskrt-dv-icon-main--cloud — plain cloud, only on --pending
                                   (paired with the green asterisk).
     .krskrt-dv-icon-main--check — cloud-check, on idle / saved.
     .krskrt-dv-delta            — green "*" pinned top-left, only on
                                   --pending, signals "unsent data exists".
   The two cloud variants are absolutely stacked on top of each other so the
   asterisk+cloud combo can crossfade smoothly into the cloud-check on the
   pending → saved transition. */
/* `#krskrt-mm-panel >` is here purely to outrank `#krskrt-mm-panel > button .ph`
   (1 ID + 1 elem + 1 class) — without it our `transform` loses the
   specificity tie and the icon stays anchored at the button's top-left. */
#krskrt-mm-panel > #krskrt-dv-btn .krskrt-dv-icon-main {
    position:   absolute;
    top:        50%;
    left:       50%;
    /* -50% centring + -1px to preserve the optical nudge from the panel
       `.ph` rule above (which our transform would otherwise override). */
    transform:  translate(-50%, calc(-50% - 1px));
    transition: opacity 0.3s ease, color 0.3s ease;
}
/* Default (idle / saved): show cloud-check, hide plain cloud. */
#krskrt-dv-btn .krskrt-dv-icon-main--cloud { opacity: 0; }
#krskrt-dv-btn .krskrt-dv-icon-main--check { opacity: 1; }
/* Pending: show plain cloud (asterisk overlay sits on top), hide cloud-check. */
#krskrt-mm-panel > #krskrt-dv-btn.krskrt-dv-btn--pending .krskrt-dv-icon-main--cloud { opacity: 1; }
#krskrt-mm-panel > #krskrt-dv-btn.krskrt-dv-btn--pending .krskrt-dv-icon-main--check { opacity: 0; }

/* `saved` — cloud-check goes green, then fades back to #00374a over 5 s. */
#krskrt-mm-panel > #krskrt-dv-btn.krskrt-dv-btn--saved {
    color: #00374a;
}
#krskrt-mm-panel > #krskrt-dv-btn.krskrt-dv-btn--saved .krskrt-dv-icon-main--check {
    animation: krskrt-dv-saved 5s ease-out forwards;
}
@keyframes krskrt-dv-saved {
    0%   { color: #22c55e; }
    35%  { color: #22c55e; }
    100% { color: #00374a; }
}

/* Delta indicator — green "*" pinned top-left of the cloud icon, visible
   only on .krskrt-dv-btn--pending. Signals "data entered but not yet
   confirmed-saved by the relay" — covers the whole interval from first
   keystroke to field_saved ack. Hidden on --saved. */
#krskrt-dv-btn .krskrt-dv-delta {
    position:       absolute;
    top:            6px;
    left:           9px;
    color:          #22c55e;
    font-size:      22px;
    font-weight:    700;
    line-height:    1;
    pointer-events: none;
    opacity:        0;
    transform:      scale(0.6);
    transition:     opacity 0.15s ease, transform 0.15s ease;
    z-index:        2;
    text-shadow:    0 0 2px rgba(0, 0, 0, 0.25);
}
#krskrt-mm-panel > #krskrt-dv-btn.krskrt-dv-btn--pending .krskrt-dv-delta {
    opacity:   1;
    transform: scale(1);
    /* Soft pulse so the eye picks it up without being noisy. */
    animation: krskrt-dv-delta-pulse 1.4s ease-in-out infinite;
}
@keyframes krskrt-dv-delta-pulse {
    0%, 100% { opacity: 1;    }
    50%      { opacity: 0.55; }
}

/* "Data saved every Ns" tooltip — appears the moment the spinning-arrows
   'saving' state begins and stays through the green 'saved' fade-out, then
   disappears together with the green. Modelled after .az-part-dot-tip in
   autozoom-scrollbar.css. pointer-events:none so it can never intercept
   clicks even when overlapping form fields. Positioned to the LEFT of the
   button (the panel sits in the top-right corner of the viewport). */
#krskrt-dv-btn .krskrt-dv-btn-tip {
    position:       absolute;
    right:          calc(100% + 10px);
    top:            50%;
    /* Match the cloud-button: same 44 px height, same 10 px radius. */
    height:         44px;
    box-sizing:     border-box;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    transform:      translateY(-50%) translateX(4px);
    background:     rgba(0, 55, 74, 0.90);
    color:          #fff;
    /* Inherit the page's default body font (avoid the icon-font and the
       UI-font Lekton — let the theme decide). */
    font-family:    inherit;
    font-size:      12px;
    line-height:    1.2;
    white-space:    nowrap;
    text-align:     center;
    padding:        0 12px;
    border-radius:  10px;
    pointer-events: none;
    opacity:        0;
    /* Identical to .az-part-dot-tip — symmetric on appear AND disappear:
       both opacity and transform tween for 0.18 s with the same easing,
       so showing and hiding mirror each other regardless of which CSS
       rule (state class, :hover, --tip-used) is driving the change. */
    transition:     opacity 0.18s ease, transform 0.18s ease;
    z-index:        10;
}
/* Two-line layout: "Data saved every" / "N seconds". Each child span
   is a block so they stack; the parent stays nowrap so neither line
   wraps mid-phrase. */
#krskrt-dv-btn .krskrt-dv-btn-tip__l1,
#krskrt-dv-btn .krskrt-dv-btn-tip__l2 {
    display: block;
}
#krskrt-dv-btn.krskrt-dv-btn--pending .krskrt-dv-btn-tip,
#krskrt-dv-btn.krskrt-dv-btn--saved   .krskrt-dv-btn-tip {
    opacity:   1;
    transform: translateY(-50%) translateX(0);
}
/* After the first save on a page, the button gains .krskrt-dv-btn--tip-used —
   subsequent pending/saved cycles still animate the icon but the tooltip
   stays hidden. Cleared on page reload.
   Resets BOTH opacity AND transform so the tip slides out as it fades —
   mirroring the appear animation (.az-part-dot-tip pattern). Without the
   transform reset, only opacity would tween while the tip stayed at its
   final translateX(0), giving an asymmetric "fade only" disappear. */
#krskrt-dv-btn.krskrt-dv-btn--tip-used .krskrt-dv-btn-tip {
    opacity:   0;
    transform: translateY(-50%) translateX(4px);
}
/* …but on hover, always re-surface the tooltip — even when --tip-used
   has suppressed it. Listed AFTER the suppress rule so it wins on tied
   specificity (both are 0,2,1). */
#krskrt-dv-btn:hover .krskrt-dv-btn-tip,
#krskrt-dv-btn:focus-visible .krskrt-dv-btn-tip {
    opacity:   1;
    transform: translateY(-50%) translateX(0);
}
/* `position: relative` so the tooltip's absolute positioning anchors here.
   `font-family: inherit` repairs the inheritance chain — UA stylesheets
   default <button> to a system-ui stack, which would otherwise be picked
   up by .krskrt-dv-btn-tip's own `font-family: inherit` and break parity
   with .az-part-dot-tip (which sits inside a <span> that already inherits
   the body font). With this in place both tooltips render in the theme's
   body font (currently `--wp--preset--font-family--cocracy`). */
#krskrt-dv-btn {
    position:    relative;
    font-family: inherit;
}

/* ---- Block visibility — hidden on central screen ---------------------- */
.krskrt-cs-hidden { display: none; }

/* ---- QR card (fixed, no backdrop) ------------------------------------- */
/* Lekton-only zone. The overlay (KrsKrt + Report variants on Central,
   reflected as mm-pass-card on Marker) renders PIN, addresses and QR
   guidance — content that should always be in the monospace UI font
   regardless of the per-form Used Fonts choice. The compound selector
   pairs the overlay class with every element targeted by the wp_head
   override, lifting specificity above the override (each becomes
   minimum 0,2,1 vs. the override's 0,1,1) so it wins even with
   `!important` on both sides. */
.mm-cs-qr-overlay,
.mm-cs-qr-overlay :is(
    p, blockquote, ul, ol, li, dl, dd, dt,
    h1, h2, h3, h4, h5, h6,
    button, .wp-block-button__link, input[type="submit"], input[type="button"],
    a, span, label, div, code, strong, em
) {
    font-family: "Lekton", ui-monospace, Menlo, Consolas, monospace !important;
}

.mm-cs-qr-overlay {
    display:        none;
    position:       fixed;
    background:     #fff;
    border:         1px solid #dedede;
    border-radius:  10px;
    overflow:       hidden;
    padding:        0;
    box-shadow:     0 1px 4px rgba(0,0,0,0.08);
    z-index:        99998;
    width:          fit-content;
    max-width:      320px;
    text-align:     center;
}
.mm-cs-qr-section-top    { padding: 12px; }
.mm-cs-qr-section-bottom { padding: 12px; background: #dedede; }
.mm-cs-qr-overlay.is-visible { display: block; }

/* ── Top bar: mode buttons left, close absolute top-right ─────────────── */
.mm-cs-qr-topbar {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
    gap:             4px;
    margin-bottom:   0;
    padding:         10px 36px 0;
}

.mm-cs-qr-mode-group {
    display: flex;
    gap:     4px;
}

.mm-cs-qr-mode-btn {
    width:         28px;
    height:        28px;
    border-radius: 7px;
    border:        1px solid #dedede;
    background:    transparent;
    font-size:     16px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #00374a;

    transition:    background 0.12s, border-color 0.12s;
    padding:       0;
    line-height:   1;
}
.mm-cs-qr-mode-btn:hover { background: #dcfce7; border-color: #86efac; }
.mm-cs-qr-mode-btn.is-active {
    background:   #dcfce7;
    border-color: #22c55e;
    color:        #166534;
}

/* Close: no border/bg, absolutely positioned in overlay corner */
.mm-cs-qr-close {
    position:    absolute;
    top:         6px;
    right:       8px;
    width:       28px;
    height:      36px;
    background:  none;
    border:      none;
    box-shadow:  none;
    cursor:      pointer;
    color:       #aaa;
    font-size:   30px;
    line-height: 1;
    padding:     0;
    display:     flex;
    align-items: center;
    justify-content: center;
}
.mm-cs-qr-close:hover { color: #00374a; }

/* ── Heading ──────────────────────────────────────────────────────────── */
/* The heading element is a <div> in central-screen.js (NOT a <p>) — UI
   chrome must not pick up the JFB inline rule
   `.jet-form-builder-template p { text-wrap: balance; max-width: 1000px; }`
   that ships on every /kk/* page. Keeping the heading off <p> means a
   plain single-class selector (specificity (0,1,0)) is enough — there
   is no JFB rule competing for it. If a future change reintroduces a
   <p>, that JFB rule wins and the QR card visibly bursts (see the
   "Known gotchas" section in CLAUDE.md). */
.mm-cs-qr-heading {
    max-width:   180px;
    box-sizing:  border-box;
    margin:      0 auto 10px;
    font-size:   28px;
    font-weight: 400;
    line-height: 1.15;
    color:       #00374a;
    white-space: nowrap;
}
/* The three text-bearing classes below get their final font-size from
   central-screen.js's fitOverlayText() — measured against the actual loaded
   Lekton metrics, accounting for letter-spacing, gated on document.fonts.ready,
   and refreshed via ResizeObserver. The static `font-size` here is just the
   first-paint fallback before the JS swap-in (and keeps a single line of text
   readable if JS is disabled). `white-space: nowrap` on each ensures the
   pre-fit fallback never wraps to two lines.                              */
.mm-cs-qr-heading strong {
    font-weight:      800;
    display:          block;
    font-size:        21px;
    white-space:      nowrap;
    color:            #fff;
    background-color: #00374a;
    border-radius:    5px;
    padding:          5px 10px;
    letter-spacing:   2px;
    text-transform:   uppercase;
    /* Constrain to parent .mm-cs-qr-heading max-width (180px). Without
       this the child's content-box + padding can compute to 200px wide
       (180 content + 2×10 padding) and burst the parent on the right,
       leaving the right edge of the dark pill sticking past the card.
       border-box makes the 10px padding eat into the 180px instead of
       extending it. */
    max-width:        100%;
    box-sizing:       border-box;
}
.mm-cs-qr-heading-sub {
    display:     block;
    font-size:   15px;
    font-style:  italic;
    white-space: nowrap;
    padding:     0 10px;
    margin-bottom: 4px;
    /* Same fix as `.mm-cs-qr-heading strong` above — without it the
       italic "Scan to …" sub-heading bursts the parent's 180 px cap on
       narrow inline-card columns because content-box adds the 20 px of
       horizontal padding outside the auto-computed width. */
    max-width:   100%;
    box-sizing:  border-box;
}

/* ── QR code ──────────────────────────────────────────────────────────── */
.mm-cs-qr-code-wrap { display: block; margin: 0 auto 4px; position: relative; }
.mm-cs-qr-code-wrap img,
.mm-cs-qr-code-wrap canvas { display: block; margin: 0 auto; }
.mm-cs-qr-code-wrap::after {
    content:             '';
    position:            absolute;
    top:                 50%;
    left:                50%;
    transform:           translate(-50%, -50%);
    width:               76px;
    height:              76px;
    background-color:    #fff;
    background-image:    url('../img/krskrt-sync.svg');
    background-position: center;
    background-size:     72px 72px;
    background-repeat:   no-repeat;
    border-radius:       0;
    pointer-events:      none;
}

/* Report variant: same square tile, different illustration, no animation. */
.mm-cs-report-inline-host .mm-cs-qr-code-wrap::after {
    background-image:    url('../img/krskrt-report.svg');
}

/* ── "Or go to..." sentence + PIN ────────────────────────────────────── */
.mm-cs-qr-or {
    /* Width matches the QR canvas (180 px) so a long URL inside the inner
       <a> can never push the overlay wider than the QR. fitOverlayText()
       in central-screen.js sizes the URL <a>'s font-size to fill this
       180 px exactly, clamped 14–24 px (see comment on the rules above). */
    width:       180px;
    margin:      0 auto 8px;
    color:       #00374a;
    line-height: 1.2;
}
.mm-cs-qr-or a {
    display:         block;
    font-size:       17px;     /* first-paint fallback — JS overrides */
    white-space:     nowrap;
    color:           #00374a;
    font-weight:     bold;
    text-transform:  uppercase;
    text-decoration: none;
    letter-spacing:  0.5px;
}
/* kf-session-qr URLs vary in length (per-event project slugs, possibly long).
   When the JS fit hits the 14 px floor and the URL still doesn't fit, allow
   the browser to break at the single <wbr> the PHP template emits right after
   "krskrt.com/kk/" — slashes and dots aren't break opportunities by default,
   so this is the only place a wrap can happen. The other overlay variants
   keep `white-space: nowrap` (their URLs are short and stable). */
.kf-session-qr .mm-cs-qr-or a {
    white-space: normal;
}
.mm-cs-qr-or a:hover { text-decoration: underline; }

.mm-cs-qr-pin {
    box-sizing:      border-box;
    display:         flex;
    align-items:     stretch;
    width:           180px;
    margin:          0 auto;
    line-height:     1;
    text-decoration: none;
    color:           #00374a;
}
.mm-cs-qr-pin-label {
    background-color: #00374a;
    color:            #fff;
    font-family:      "Lekton", sans-serif;
    font-weight:      700;
    font-size:        19px;
    letter-spacing:   0.1em;
    padding:          0 12px;
    border-radius:    5px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    margin-right:     8px;
}
.mm-cs-qr-pin-code {
    flex:           1;
    font-family:    "Lekton", sans-serif;
    font-weight:    700;
    font-size:      32px;
    letter-spacing: 0.2em;
    color:          #00374a;
    text-align:     center;
}

/* ── Marker list ──────────────────────────────────────────────────────── */
.mm-cs-qr-marker-list {
    margin-top:      8px;
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             6px;
    min-height:      0;
}
.mm-cs-qr-marker-list:empty { display: none; }

.mm-cs-qr-marker-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    font-size:     12px;
    font-weight:   600;
    color:         #888;
    padding:        0 7px;
    border-radius: 20px;
    border:        1px solid #e0e0e0;
    background:    #f5f5f5;
}
.mm-cs-qr-marker-chip.is-connected {
    color:        #166534;
    border-color: #86efac;
    background:   #dcfce7;
}

.mm-cs-qr-marker-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #ccc;
    flex-shrink:   0;
}
.mm-cs-qr-marker-chip.is-connected .mm-cs-qr-marker-dot {
    background: #22c55e;
}

/* ---- Inline variant (jet-forms/magic-marker-field block) -------------- */
.mm-cs-qr-overlay.mm-cs-qr-inline {
    display:       block;          /* always visible (no .is-visible gating) */
    position:      static;
    z-index:       auto;
    border-radius: 5px;             /* per spec (overlay is 10px) */
    width:         fit-content;
    min-width:     unset;
    margin:        0 auto;
    right:         auto;
    top:           auto;
    box-shadow:    unset;
}
.mm-cs-qr-overlay.mm-cs-qr-inline .mm-cs-qr-topbar,
.mm-cs-qr-overlay.mm-cs-qr-inline .mm-cs-qr-close { display: none; }
.mm-cs-qr-inline-host:empty { min-height: 0; }

/* ---- Report variant (Report & Finish block, download mode) ----------- */
/* Same card chrome as the Magic Marker QR; only the bottom section
   differs — three big chip-style PDF/Webpage/Spreadsheet links replace
   the small connected-marker chip list.                                  */
.mm-cs-report-inline-host:empty { min-height: 0; }

/* Single segmented pill: bleeds to the card edges so the buttons span
   the full width of the bottom section, with vertical separators between
   them — same approach as .mm-klokky-btns.                              */
.mm-cs-report-actions {
    display:    flex;
    margin:     10px -12px -12px;   /* eat the section padding (12px) on left/right/bottom */
    background: #00374a;
    overflow:   hidden;
}
.mm-cs-report-action {
    flex:            1 1 0;
    min-width:       0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
    color:           #fff;
    font-family:     "Lekton", sans-serif;
    font-weight:     700;
    font-size:       15px;
    text-transform:  uppercase;
    letter-spacing:  0.5px;
    text-decoration: none;
    padding:         10px 8px;
    border:          none;
    border-right:    1px solid rgba(255,255,255,0.25);
    min-height:      18px;
    cursor:          pointer;
    transition:      background 0.12s;
    line-height:     1;
}
.mm-cs-report-action:last-child { border-right: none; }
.mm-cs-report-action:hover  { background: rgba(255,255,255,0.10); color: #fff; }
.mm-cs-report-action:active { background: rgba(255,255,255,0.18); }
.mm-cs-report-action:focus  { outline: 2px solid #86efac; outline-offset: 2px; }

/* Greyed state while saveCurrentState === 'pending': the relay has
   un-persisted field edits in flight (~5s debounce), and the server-side
   report cache would otherwise capture stale data. Class toggled by
   applySaveStateToReportButtons() in central-screen.js. */
.mm-cs-report-action.is-saving {
    opacity:        0.45;
    cursor:         wait;
    pointer-events: none;
}
.mm-cs-report-action.is-saving:hover {
    background: transparent; /* defeat the normal hover lift */
}

/* ---- Scroll-lock while start-gate is visible -------------------------- */
html.mm-start-locked,
body.mm-start-locked {
    overflow:     hidden;
    touch-action: none;
}

/* ---- Start-gate / Finish button (shared look) -------------------------- */
/* The Finish button (rendered inside the Email & Finish block) shares the
   green pulse / sparkle / fade animation with the start gate, but is laid
   out inline (no fixed positioning). Position-related rules are scoped to
   `.mm-start-btn`; everything else is shared.                              */
.mm-start-btn,
.mm-cs-finish-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         15px 30px 13px;
    border:          none;
    border-radius:   10px;
    cursor:          pointer;
    white-space:     nowrap;

    background:      #00374a;
    color:           #4ade80;

    font-family:     inherit;
    font-size:       24px;
    font-weight:     800;
    letter-spacing:  2px;
    text-transform:  uppercase;
    line-height:     1;

    box-shadow:      0 6px 0 #00262D, 0 8px 14px rgba(0,0,0,0.25);
    transform:       translateY(0);
    transition:      transform 0.08s ease-out,
                     box-shadow 0.08s ease-out,
                     opacity 0.35s ease-out;

    animation:       mm-start-pulse 1.6s ease-in-out infinite;
    position:        relative; /* scope sparkle ::after for both variants */
}

/* The Start / Resume button no longer pins itself — it sits inside the
   `.mm-start-actions` wrapper, which handles bottom-left fixed positioning
   so the privacy balloon can dock directly above the button. The Finish
   button stays inline within the Email & Finish row. */
.mm-start-btn {
    position:        relative;
    z-index:         100000;
}

.mm-start-btn:hover,
.mm-cs-finish-btn:hover { color: #6aeeaa; }
.mm-start-btn:focus,
.mm-cs-finish-btn:focus { outline: none; }

.mm-start-btn:active,
.mm-start-btn.is-pressed,
.mm-cs-finish-btn:active,
.mm-cs-finish-btn.is-pressed {
    transform:  translateY(6px);
    box-shadow: 0 0 0 #00262D, 0 2px 4px rgba(0,0,0,0.25);
    animation:  none;
}

@keyframes mm-start-pulse {
    0%, 100% {
        box-shadow: 0 6px 0 #00262D, 0 8px 14px rgba(0,0,0,0.25),
                    0 0 0 0  rgba(74,222,128,0.55);
    }
    50% {
        box-shadow: 0 6px 0 #00262D, 0 8px 14px rgba(0,0,0,0.25),
                    0 0 0 14px rgba(74,222,128,0);
    }
}

.mm-start-btn.is-sparkling::after,
.mm-cs-finish-btn.is-sparkling::after {
    content:         '';
    position:        absolute;
    inset:           -4px;
    border-radius:   14px;
    pointer-events:  none;
    animation:       mm-start-sparkle 0.7s ease-out forwards;
}
@keyframes mm-start-sparkle {
    0%   { box-shadow: 0 0 0 0   rgba(74,222,128,0.55), 0 0 0 0   rgba(255,255,255,0.5); opacity: 1;   }
    60%  { box-shadow: 0 0 0 18px rgba(74,222,128,0),    0 0 0 10px rgba(255,255,255,0);   opacity: 0.9; }
    100% { box-shadow: 0 0 0 26px rgba(74,222,128,0),    0 0 0 18px rgba(255,255,255,0);   opacity: 0;   }
}

.mm-start-btn.is-gone,
.mm-cs-finish-btn.is-gone {
    opacity:        0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .mm-start-btn,
    .mm-cs-finish-btn { animation: none; }
    .mm-start-btn.is-sparkling::after,
    .mm-cs-finish-btn.is-sparkling::after { animation: none; }
}

/* ---- Resume gate ------------------------------------------------------ */
/* Shown on every refresh of an already-started central session. Its sole
   purpose is to acquire a user gesture (sticky activation) so marker-
   triggered videos can autoplay with sound. */
.mm-resume-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0, 55, 74, 0.85);   /* #00374a with opacity */
    z-index:    99998;
    cursor:     pointer;
    transition: opacity 0.35s ease-out;
}
.mm-resume-overlay.is-gone {
    opacity:        0;
    pointer-events: none;
}
.mm-start-btn.mm-start-btn--resume {
    position: relative;
    z-index:  99999;
}

/* ---- Start / Resume bottom-left dock (wraps balloon + button) -------- */
.mm-start-actions {
    position:        fixed;
    bottom:          13px;
    left:            7px;
    z-index:         100000;
    width:           180px;
    display:         flex;
    flex-direction:  column;
    align-items:     stretch;
    gap:             8px;
    pointer-events:  auto;
    transition:      opacity 0.35s ease-out;
}
.mm-start-actions .mm-start-btn {
    width:      180px;
    box-sizing: border-box;
}
.mm-start-actions.is-gone {
    opacity:         0;
    pointer-events:  none;
}
.mm-start-actions--resume {
    z-index: 99999;
}

/* ---- JFB action button (hidden on Magic Marker forms) -----------------
   The new FINISH button programmatically clicks `.jet-form-builder__submit`
   to fire JFB's AJAX submit (Form Records still save, before-send hook
   still emails). Authors keep their action-button block in the form; we
   just hide it visually. central-screen.css is enqueued only on KrsKrt
   form pages, so non-MM forms are unaffected. */
.jet-form-builder__submit-wrap,
button.jet-form-builder__submit {
    display: none !important;
}

/* ---- Finish-block content ----------------------------------------------
   Rendered by the new `jet-forms/krskrt-finish-content` block. The plugin
   tags the surrounding container with `mm-finish-container` at runtime,
   defaulting it to a 100vh viewport pane so the lock lands on a clean
   screen even if the author hasn't sized their wrapper. */
.mm-finish-container {
    display:         flex;
    align-items:     center;
    justify-content: center;
}
/* The inner finish block (SVG check + heading + buttons) is hidden
   until central-screen.js calls showFinishLanding (FINISH press or
   session_finished broadcast). The wrapping container stays in place
   so the surrounding background / padding aren't lost — only the
   visible UI is suppressed, and the container collapses to whatever
   height its remaining content needs (no forced 100vh pane). */
.mm-finish-block-content.mm-finish-hidden { display: none; }
/* Fade-out applied during hideFinishLanding — JS adds this class first,
   then swaps to .mm-finish-hidden once the opacity transition has had
   time to play. Without this the block snaps out the moment the user
   clicks "Return to KrsKrt". */
.mm-finish-block-content.mm-finish-fading {
    opacity:        0;
    pointer-events: none;
}

/* Two-column post-finish landing.
   Left column: the inline Magic-Marker-style report card (mounted by
                central-screen.js into .mm-cs-report-inline-host).
   Right column: the green checkmark, the two-line "KrsKrt" / "Finished!"
                heading, the privacy notice, and the Return / Restart
                action row. Whole block is hidden via .mm-finish-hidden
                until showFinishLanding fires; both columns then appear
                together. */
/* Sized to its own content — checkmark on the left, a stacked column
   on the right with a single-line "KrsKrt Finished!" heading on top
   and the Return / Restart buttons directly below. No wrapping anywhere
   (`white-space: nowrap` on the heading + `flex-wrap: nowrap` on the
   action row). */
.mm-finish-block-content {
    padding:      0;
    display:      inline-flex;
    width:        max-content;
    max-width:    100%;
    gap:          16px;
    align-items:  center;
    text-align:   left;
    transition:   opacity 0.4s ease-out;
}
.mm-finish-block-content__right {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            12px;
    min-width:      0;
}
.mm-finish-heading {
    font-size:    48px;
    font-weight:  800;
    line-height:  1.0;
    margin:       0;
    white-space:  nowrap;
}

/* Animated green checkmark — matches the marker-screen done-modal SVG so
   both screens show the same finish indicator. Circle draws first, then
   tick draws on top. Circle is rotated -90° so the stroke starts at
   12 o'clock instead of 3 o'clock. */
.mm-finish-check {
    display:        block;
    flex-shrink:    0;
    overflow:       visible;
}
.mm-finish-check__circle {
    stroke-dasharray:  226;
    stroke-dashoffset: 226;
    animation:         mm-finish-circle 0.55s ease-out forwards;
    transform-origin:  50% 50%;
    transform:         rotate(-90deg);
}
.mm-finish-check__tick {
    stroke-dasharray:  56;
    stroke-dashoffset: 56;
    animation:         mm-finish-tick 0.35s 0.45s ease-out forwards;
}
@keyframes mm-finish-circle { to { stroke-dashoffset: 0; } }
@keyframes mm-finish-tick   { to { stroke-dashoffset: 0; } }

/* Pop gesture: triggered by JS adding `.is-popping` to the SVG on every
   FINISH press. The check itself was already drawn earlier in the session
   by the one-shot circle / tick keyframes above, so this only calls
   attention to it — a quick scale up + back with a short green glow. JS
   removes + force-reflows + re-adds the class for replay. */
.mm-finish-check { transform-origin: center; }
.mm-finish-check.is-popping {
    animation: mm-finish-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mm-finish-pop {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(74,222,128,0)); }
    40%  { transform: scale(1.18); filter: drop-shadow(0 0 8px rgba(74,222,128,0.65)); }
    100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(74,222,128,0)); }
}

.mm-finish-actions {
    display:         flex;
    gap:             12px;
    justify-content: flex-start;
    flex-wrap:       nowrap;
}
.mm-finish-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         14px 22px;
    border:          1px solid currentColor;
    border-radius:   10px;
    cursor:          pointer;
    font-family:     inherit;
    font-size:       16px;
    font-weight:     700;
    letter-spacing:  0.05em;
    line-height:     1;
    background:      transparent;
    color:           inherit;
    transition:      transform 0.08s ease-out, box-shadow 0.12s ease-out,
                     background 0.15s ease-out, color 0.15s ease-out;
}
.mm-finish-btn:hover  { transform: translateY(-1px); }
.mm-finish-btn:active { transform: translateY(1px); }
.mm-finish-btn:focus  { outline: none; box-shadow: 0 0 0 3px rgba(74,222,128,0.35); }
.mm-finish-btn .ph    { font-size: 18px; line-height: 1; }

.mm-finish-btn--primary {
    background:   #00374a;
    color:        #4ade80;
    border-color: #4ade80;
}
.mm-finish-btn--primary:hover { color: #6aeeaa; }

.mm-finish-btn--secondary {
    background: transparent;
}

/* Pulse used to draw attention to the finish-landing buttons when the
   operator scrolls up against the scroll-floor — same green ring as the
   start / finish button pulse, just scoped to .mm-finish-btn. */
@keyframes mm-finish-btn-blink {
    0%, 100% { box-shadow: 0 0 0 0  rgba(74,222,128,0.55); }
    50%      { box-shadow: 0 0 0 12px rgba(74,222,128,0);  }
}
.mm-finish-btn.is-blinking {
    animation: mm-finish-btn-blink 0.6s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) {
    .mm-finish-btn.is-blinking { animation: none; }
}

/* ---- Typing-mutex overlay (other side is typing here) -------------------- */
.jet-form-builder-row { position: relative; }
.mm-typing-host       { position: relative; }

.mm-typing-shield {
    position: absolute;
    inset: 0;
    background: transparent;
    cursor: not-allowed;
    z-index: 5;
}

.mm-typing-indicator {
    position: absolute;
    right: 10px;
    bottom: 8px;
    display: flex;
    gap: 4px;
    pointer-events: none;
    z-index: 6;
}
.mm-typing-indicator span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #9aa0a6;
    animation: mm-typing-blink 1.2s infinite ease-in-out;
}
.mm-typing-indicator span:nth-child(2) { animation-delay: .2s; }
.mm-typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes mm-typing-blink {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-2px); }
}

/* ============================================================
   Hashtag command: FLIP
   ============================================================ */

html.mm-flipped {
    transform:        rotate(180deg);
    transform-origin: center center;
}

/* ============================================================
   Hashtag command: KLOKKY timer
   ============================================================ */

#mm-klokky-overlay {
    position:      fixed;
    bottom:        7px;
    right:         7px;
    z-index:       99997;
    background:    #00374a;
    color:         #fff;
    border-radius: 10px;
    border:        1px solid #dedede;
    padding:       20px 10px 0;
    box-shadow:    0 1px 4px rgba(0,0,0,0.12);
    font-family:   "Lekton", sans-serif;
    text-align:    center;
    width:         fit-content;
    overflow:      hidden;
}

#mm-klokky-display {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    line-height:    1;
    gap:            0;
    padding-bottom: 8px;

}

.mm-klokky-mm,
.mm-klokky-ss {
    font-size:      6rem;
    font-weight:    700;
    letter-spacing: 0;
    line-height:    0.82;
    display:        block;
}

.mm-klokky-btns {
    display:  flex;
    gap:      0;
    margin:      0 -10px;
    border-top:  1px solid #dedede;
    position: relative;
    z-index:  1;
}

.mm-klokky-btn {
    flex:           1;
    padding:        8px 14px;
    border-radius:  0;
    background:     none;
    border:         none;
    border-right:   1px solid #dedede;
    color:          #fff;
    font-family:    "Lekton", sans-serif;
    font-size:      15px;
    font-weight:    700;
    cursor:         pointer;
    line-height:    1.3;
    letter-spacing: 0.5px;
}
.mm-klokky-btn:last-child { border-right: none; }
.mm-klokky-btn:hover  { background: rgba(255,255,255,0.12); }
.mm-klokky-btn:active { background: rgba(255,255,255,0.22); }
.mm-klokky-reset      { font-size: 20px; padding: 6px 12px; }

@keyframes mm-klokky-flash {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.mm-klokky-zero #mm-klokky-display {
    animation: mm-klokky-flash 1.8s ease-in-out infinite;
    color:     #ffffff3d;
}

/* ============================================================
   Hashtag command: PAUSE
   ============================================================ */

body.mm-paused > *:not(#mm-pause-overlay) {
    filter:         blur(8px);
    pointer-events: none;
}

#mm-pause-overlay {
    position:    fixed;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -50%);
    z-index:     99999;
    text-align:  center;
    user-select: none;
}

.mm-pause-icon {
    display:        block;
    font-size:      18vmin;
    line-height:    1;
    pointer-events: none;
}

.mm-pause-close {
    position:      absolute;
    top:           -1.2rem;
    right:         -1.2rem;
    width:         2.4rem;
    height:        2.4rem;
    border-radius: 50%;
    background:    rgba(0,0,0,0.55);
    border:        2px solid rgba(255,255,255,0.4);
    color:         #fff;
    font-size:     1.4rem;
    line-height:   1;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    pointer-events: auto;
}
.mm-pause-close:hover { background: rgba(0,0,0,0.8); }

/* ============================================================
   Central screen command palette (floating dropdown)
   ============================================================ */

#mm-cs-cmd-palette {
    display:       none;
    /* Anchored inside the focused input's row so it inherits autozoom's
       per-section `zoom`. JS sets `top` and `left` to the caret position
       (mirror-div technique) so the palette tracks the typed `#`, even on
       tall textareas. */
    position:      absolute;
    z-index:       99996;
    background:    #1a1a2e;
    border:        1px solid #2a2a40;
    border-radius: 8px;
    box-shadow:    0 4px 16px rgba(0,0,0,0.25);
    min-width:     220px;
    overflow:      hidden;
}

.mm-cs-cmd-item {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    padding:        10px 14px;
    background:     transparent;
    border:         none;
    border-bottom:  1px solid #2a2a40;
    cursor:         pointer;
    text-align:     left;
    width:          100%;
    color:          #e8e8f0;
    font-family:    "Lekton", sans-serif;
}
.mm-cs-cmd-item:last-child  { border-bottom: none; }
.mm-cs-cmd-item:hover       { background: #00374a; }

.mm-cs-cmd-name {
    font-size:   15px;
    font-weight: 700;
    color:       #22c55e;
    line-height: 1.2;
}
.mm-cs-cmd-desc {
    font-size:  12px;
    color:      #8888a0;
    margin-top: 2px;
}


/* ---- Klokky close button ------------------------------------------------ */
.mm-klokky-close {
    position:    absolute;
    top:         4px;
    right:       6px;
    background:  none;
    border:      none;
    box-shadow:  none;
    color:       rgba(255,255,255,0.5);
    font-size:   20px;
    line-height: 1;
    padding:     2px 4px;
    cursor:      pointer;
    z-index:     1;
}
.mm-klokky-close:hover { color: #fff; }

/* ============================================================
   Number field — stepper buttons (overlaid inside the field)
   ============================================================ */

.mm-cs-number-row {
    position: relative;
    display:  block;
}

/* Hide browser native up/down spin arrows; leave room for stepper group */
.mm-cs-number-row input[type="number"] {
    -moz-appearance: textfield;
    padding-right:   56px;
    width:           100%;
    box-sizing:      border-box;
}
.mm-cs-number-row input[type="number"]::-webkit-outer-spin-button,
.mm-cs-number-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Stepper group: absolute overlay on the right edge */
.mm-cs-stepper-group {
    position:    absolute;
    right:       5px;
    top:         0;
    bottom:      0;
    display:     flex;
    align-items: center;
    gap:         0;
    padding:     0 4px;
}

.mm-cs-stepper-btn {
    width:       24px;
    height:      24px;
    border:      none;
    background:  transparent;
    color:       #00374a;
    font-size:   17px;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     0;
    line-height: 1;
    border-radius: 4px;
    transition:  background 0.1s;
}
.mm-cs-stepper-btn:hover {
    background: rgba(0, 55, 74, 0.08);
}
.mm-cs-stepper-btn:active {
    background: rgba(0, 55, 74, 0.15);
}
.mm-cs-stepper-btn .ph {
    pointer-events: none;
}

/* ----------------------------------------------------------------------- */
/* Repeater — row-remove button overlay (inside field, right-aligned)      */
/* ----------------------------------------------------------------------- */

/* Give the row a positioning context so the absolute button stays inside */
.jet-form-builder-repeater__row {
    position:          relative;
    margin-bottom:     var(--jfb-rep-row-gap, 8px);
}
.jet-form-builder-repeater__row:last-child {
    margin-bottom: 0;
}

/* Multi-column: CSS Grid handles row- and column-gap uniformly,
   so there is no trailing gap and the add button never shifts. */
.jfb-rep-multi-col {
    display:               grid;
    grid-template-columns: repeat(var(--jfb-rep-columns, 1), 1fr);
    row-gap:               var(--jfb-rep-row-gap, 8px);
    column-gap:            var(--jfb-rep-col-gap, 8px);
}
/* Grid gap owns the spacing; remove margin-based gap from rows inside grid. */
.jfb-rep-multi-col > .jet-form-builder-repeater__row {
    margin-bottom:     0;
    break-inside:      avoid;
    page-break-inside: avoid;
}

@media (max-width: 767px) {
    .jfb-rep-multi-col {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------------- */
/* Repeater inline add cell (multi-column, add_button_inline toggle)        */
/* The cell is rendered as the last child of __items in PHP and always      */
/* appears last visually via CSS order:9999 — new rows added by JFB JS get  */
/* the default order:0 and naturally appear before the cell.                */
/* ----------------------------------------------------------------------- */
.jfb-rep-inline-add-cell {
    order:      9999; /* always last in the CSS Grid regardless of DOM order */
    box-sizing: border-box;
}
/* Hide the cell (not just the button) when the add button is disabled,
   so there is no empty grid hole visible to the user. */
.jfb-rep-inline-add-cell:has(> button.jet-form-builder-repeater__new:disabled) {
    display: none;
}

/* Pin the remove button to the top-right corner of the field area.
   top matches the block-group margin-top that separates the field from the
   row edge; right gives a consistent margin from the field border.
   No height or centering — the button simply docks to the corner regardless
   of textarea height. */
.jet-form-builder-repeater__row-remove {
    position:       absolute;
    right:          9px;
    top:            9px;
    pointer-events: none;
}

/* Style the inner button to match .mm-cs-stepper-btn.
   The Phosphor ph-x icon is a real <i class="ph ph-x"> child element. */
.jet-form-builder-repeater__row-remove button.jet-form-builder-repeater__remove {
    pointer-events:  all;
    width:           24px;
    height:          24px;
    border:          none;
    background:      transparent;
    color:           #00374a;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    line-height:     1;
    border-radius:   4px;
    margin:          0;
    text-decoration: none;
    transition:      background 0.1s;
}
.jet-form-builder-repeater__row-remove button.jet-form-builder-repeater__remove > .ph {
    font-size:      18px;
    pointer-events: none;
}
.jet-form-builder-repeater__row-remove button.jet-form-builder-repeater__remove:hover {
    background: rgba(0, 55, 74, 0.08);
}
.jet-form-builder-repeater__row-remove button.jet-form-builder-repeater__remove:active {
    background: rgba(0, 55, 74, 0.15);
}

/* ----------------------------------------------------------------------- */
/* GDPR — privacy-notice balloon + Clear-data button (Finish block)        */
/* ----------------------------------------------------------------------- */

/* Default balloon look — used by the Start / Resume gate.  Width follows
   the Start button (auto via the flex column wrapper); the triangle on the
   bottom edge points down at the button. */
.krskrt-privacy-balloon {
    --kp-bg: var(--krskrt-finish-balloon-bg, #00374a);
    position:   relative;
    box-sizing: border-box;
    padding:    8px;
    background: var(--kp-bg);
    color:      #fff;
    border-radius: 6px;
    font-size:  0.9em;
    line-height: 1.1;
    text-align: center;
}
.krskrt-privacy-balloon--gate::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    border-left:  8px solid transparent;
    border-right: 8px solid transparent;
    border-top:   8px solid var(--kp-bg);
}

/* In the Finish block, the notice should NOT be a balloon — keep it as
   flat white text above the action buttons.  Strips the box, triangle and
   spacing back to the bare line(s) of text. */
.krskrt-privacy-balloon--finish {
    background: none;
    padding:    0;
}
.krskrt-privacy-balloon--finish::after { content: none; }

@media ( max-width: 760px ) {
    .krskrt-privacy-balloon--finish { text-align: center; }
}

.mm-finish-btn--clear {
    background:   transparent;
    color:        #f87171;
    border-color: #f87171;
}
.mm-finish-btn--clear:hover { color: #fca5a5; border-color: #fca5a5; }

/* -------------------------------------------------------------------------
 * Binary-mode finish confirmation modal (Phase 3) — full-screen overlay
 * mirrored across Central + Marker via the relay. Triggered by clicks on
 * [data-action="finish"] (krskrt mode) or [data-action="clear-session"]
 * (jfb mode) inside the KrsKrt Finished block.
 * ------------------------------------------------------------------------- */
.mm-finish-confirm[hidden] { display: none; }
.mm-finish-confirm {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0, 0.55);
    z-index: 100000;
    padding: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity 160ms ease-out;
}
.mm-finish-confirm.is-open {
    opacity: 1; pointer-events: auto;
}
.mm-finish-confirm__panel {
    background: #fff;
    color: #111;
    max-width: 520px; width: 100%;
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 20px 50px rgba(0,0,0, 0.35);
}
.mm-finish-confirm__text {
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 0 24px;
    word-break: break-word;
}
.mm-finish-confirm__actions {
    display: flex; gap: 12px; justify-content: flex-end;
    flex-wrap: wrap;
}
.mm-finish-confirm__btn {
    appearance: none;
    border: 2px solid currentColor;
    border-radius: 8px;
    padding: 10px 20px;
    font: inherit; font-weight: 600;
    cursor: pointer;
    background: transparent;
}
.mm-finish-confirm__btn--cancel { color: #555; border-color: #ccc; }
.mm-finish-confirm__btn--cancel:hover { background: #f4f4f4; }
.mm-finish-confirm__btn--ok {
    color: #fff; background: #f87171; border-color: #f87171;
}
.mm-finish-confirm__btn--ok:hover { background: #ef4444; border-color: #ef4444; }

/* -------------------------------------------------------------------------
 * Krskrt-mode "Finish" button — same big-pulse / press / sparkle / gone
 * styling as the old `.mm-cs-finish-btn`, scoped to
 * `.mm-finish-block-content[data-mode="krskrt"]`. Fills the row
 * horizontally so it reads as the form's terminal action.
 * ------------------------------------------------------------------------- */
.mm-finish-block-content[data-mode="krskrt"] .mm-finish-actions {
    width:           100%;
    justify-content: stretch;
}
.mm-finish-block-content[data-mode="krskrt"] .mm-finish-btn[data-action="finish"] {
    width:           100%;
    flex:            1 1 auto;
    padding:         15px 30px 13px;
    border:          none;
    border-radius:   10px;
    cursor:          pointer;
    white-space:     nowrap;

    background:      #00374a;
    color:           #4ade80;

    font-family:     inherit;
    font-size:       24px;
    font-weight:     800;
    letter-spacing:  2px;
    text-transform:  uppercase;
    line-height:     1;

    box-shadow:      0 6px 0 #00262D, 0 8px 14px rgba(0,0,0,0.25);
    transform:       translateY(0);
    transition:      transform 0.08s ease-out,
                     box-shadow 0.08s ease-out,
                     opacity 0.35s ease-out;

    animation:       mm-start-pulse 1.6s ease-in-out infinite;
    position:        relative;
}
.mm-finish-block-content[data-mode="krskrt"] .mm-finish-btn[data-action="finish"]:hover {
    color: #6aeeaa;
}
.mm-finish-block-content[data-mode="krskrt"] .mm-finish-btn[data-action="finish"]:focus {
    outline: none;
}
.mm-finish-block-content[data-mode="krskrt"] .mm-finish-btn[data-action="finish"]:active,
.mm-finish-block-content[data-mode="krskrt"] .mm-finish-btn[data-action="finish"].is-pressed {
    transform:  translateY(6px);
    box-shadow: 0 0 0 #00262D, 0 2px 4px rgba(0,0,0,0.25);
    animation:  none;
}
.mm-finish-block-content[data-mode="krskrt"] .mm-finish-btn[data-action="finish"].is-sparkling::after {
    content:         '';
    position:        absolute;
    inset:           -4px;
    border-radius:   14px;
    pointer-events:  none;
    animation:       mm-start-sparkle 0.7s ease-out forwards;
}
.mm-finish-block-content[data-mode="krskrt"] .mm-finish-btn[data-action="finish"].is-gone {
    opacity:        0;
    pointer-events: none;
}
/* The old FINISH button had no icon; suppress the inherited rotate icon
   (`.ph-arrow-counter-clockwise`) on the krskrt-mode button. */
.mm-finish-block-content[data-mode="krskrt"] .mm-finish-btn[data-action="finish"] .ph {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .mm-finish-block-content[data-mode="krskrt"] .mm-finish-btn[data-action="finish"] { animation: none; }
    .mm-finish-block-content[data-mode="krskrt"] .mm-finish-btn[data-action="finish"].is-sparkling::after { animation: none; }
}

/* =========================================================================
   Interactive image fullscreen overlay
   (matches .krskrt-video-modal color palette and close-button style)
   ========================================================================= */
.mm-cs-image-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         99999;
    background:      rgba(0, 0, 0, 0.88);
    align-items:     center;
    justify-content: center;
    cursor:          zoom-out;
    overflow:        hidden;
    padding:         7px;
    box-sizing:      border-box;
    animation:       mm-cs-image-in 0.18s ease-out;
}
@keyframes mm-cs-image-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mm-cs-image-overlay.is-visible { display: flex; }

.mm-cs-image-overlay__img {
    /* Pure CSS sizing: img keeps its natural aspect ratio and is
       capped at 100% of the (already 7px-padded) overlay. */
    display:          block;
    width:            auto;
    height:           auto;
    max-width:        100%;
    max-height:       100%;
    background:       #fff;
    border:           1px solid #dedede;
    border-radius:    5px;
    cursor:           zoom-in;
    transform-origin: center center;
    transition:       transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change:      transform;
}

/* Close button — matches .krskrt-video-modal__close */
.mm-cs-image-overlay__close {
    position:        absolute;
    top:             16px;
    right:           16px;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.18);
    color:           #fff;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    transition:      background-color 0.15s ease-in-out;
    z-index:         1;
}
.mm-cs-image-overlay__close:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* Close-zoom button — sits underneath the X close, visible only when zoomed.
   Same chrome as .mm-cs-image-overlay__close; toggled via inline display by JS. */
.mm-cs-image-overlay__close-zoom {
    position:        absolute;
    top:             68px; /* 16 (close top) + 44 (close height) + 8 (gap) */
    right:           16px;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.18);
    color:           #fff;
    border:          none;
    cursor:          pointer;
    display:         none;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    font-size:       22px;
    transition:      background-color 0.15s ease-in-out;
    z-index:         1;
}
.mm-cs-image-overlay__close-zoom:hover {
    background: rgba(255, 255, 255, 0.32);
}
.mm-cs-image-overlay__close-zoom .ph {
    font-size: 22px;
    line-height: 1;
}

/* -------------------------------------------------------------------------
 * JFB repeater action buttons — same dark "lift + press" chrome as the
 * krskrt-mode FINISH button (.mm-finish-block-content[data-mode="krskrt"]
 * .mm-finish-btn[data-action="finish"]) but WITHOUT the pulsating animation
 * and WITHOUT overriding the current font-size — those buttons live inline
 * in repeater rows and don't need to attract terminal-action attention.
 * ------------------------------------------------------------------------- */
.jet-form-builder-repeater__actions {
    margin: 8px 0 0 0;
}

/* Shared style for all "add new row" buttons — covers both the regular
   (__actions) variant and the inline (jfb-rep-inline-add-cell) variant.
   height:36px + 6px bottom box-shadow = exactly 42px total visual height.
   font-size intentionally NOT set — inherits whatever the form theme uses. */
button.jet-form-builder-repeater__new {
    height:         38px;
    min-width:      38px;
    padding:        0 10px;
    gap:            6px;
    display:        flex;
    align-items:    center;
    border:         1px solid #dedede;
    border-radius:  5px;
    cursor:         pointer;
    white-space:    nowrap;
    background:     #fff;
    color:          #a0a0a0;
    font-family:    inherit;
    font-weight:    bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height:    1;
    box-shadow:     0 4px 0 #a0a0a0, 0 6px 8px rgba(0,0,0,0.25);
    transform:      translateY(0);
    transition:     transform 0.08s ease-out, box-shadow 0.08s ease-out;
    position:       relative;
}
button.jet-form-builder-repeater__new > .ph {
    font-size:   17px;
    color:       #00374a;
    line-height: 1;
    flex-shrink: 0;
}
button.jet-form-builder-repeater__new:hover {
    background: #f6f6f6;
    color:      #00374a;
}
button.jet-form-builder-repeater__new:focus {
    outline: none;
}
button.jet-form-builder-repeater__new:active,
button.jet-form-builder-repeater__new.is-pressed {
    transform:  translateY(4px);
    box-shadow: 0 0 0 #a0a0a0, 0 2px 4px rgba(0,0,0,0.25);
}