/* Lekton — body/UI font: font-display:swap so text shows immediately in
   the system fallback while the woff2 downloads. Phosphor (icons) uses
   font-display:block — with swap, users would see "tofu" boxes for the
   PUA codepoints while loading; block keeps icons invisible up to ~3 s
   and then falls back. */
@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=4") 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=4") 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=4") format("woff2");
}

@font-face {
    font-family: "Phosphor";
    font-style:  normal;
    font-weight: normal;
    font-display: block;
    src: url("https://www.krskrt.com/wp-content/uploads/sites/2/fonts/Phosphor.woff2?v=phosphor-collapse-1") format("woff2");
}
@font-face {
    font-family: "Phosphor-PUA";
    font-style:  normal;
    font-weight: normal;
    font-display: block;
    src: url("https://www.krskrt.com/wp-content/uploads/sites/2/fonts/Phosphor.woff2?v=phosphor-collapse-1") format("woff2");
    unicode-range: U+E000-F8FF;
}

/* KrsKrt Magic Marker — Marker Client  v3.2 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; min-height: 100%;
    font-family: "Lekton", sans-serif;
    font-size: 16px; -webkit-text-size-adjust: 100%;
    background: #0f0f1a; color: #e8e8f0;
}

/* ============================================================
   Sticky navigation bar
   ============================================================ */

.mm-mc-navbar {
    position:   sticky;
    top:        0;
    display:    flex;
    align-items: center;
    justify-content: flex-start;
    gap:        10px;
    padding:    0 14px 0 0;
    background: #1a1a2e;
    border-bottom: 1px solid #2a2a40;
    z-index:    100;
    min-height: 56px;
}

.mm-mc-navbar--waiting { background: #1e1e1e; border-color: #333; }

.mm-mc-navbar-logo {
    align-self: stretch;
    width: auto;
    max-height: 56px;
    aspect-ratio: 1;
    object-fit: contain;
    flex-shrink: 0;
}

/* Identity stack: "Marker A" + status, immediately right of logo */
.mm-mc-navbar-identity {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             1px;
    order:           2;
    margin-left:     auto;
    flex-shrink:     0;
    text-align:      center;

    border:          1px solid #86efac;
    border-radius:   10px;
    height:          36px;
    padding:         0 12px;
}
.mm-mc-navbar-letter {
    font-family: "Lekton", sans-serif;
    font-weight: 700;
    font-size:   12px;
    color:       #22c55e;
    line-height: 1;
    margin-top:  1px;
    white-space: nowrap;
}

/* Status pill compact style when inside identity stack */
.mm-mc-navbar-identity .mm-mc-status {
    padding:         0;
    background:      transparent;
    border-radius:   0;
    font-size:       11px;
    line-height:     1.1;
    gap:             3px;
    color:           #22c55e;
    font-weight:     700;
    text-transform:  uppercase;
    align-items:     baseline;
}
.mm-mc-navbar-identity .mm-mc-status-dot {
    width:  8px;
    height: 8px;
    background: #22c55e;
}
/* Identity chip — disconnected state */
.mm-mc-navbar-identity.is-disconnected {
    border-color: #f87171;
}
.mm-mc-navbar-identity.is-disconnected .mm-mc-navbar-letter,
.mm-mc-navbar-identity.is-disconnected .mm-mc-status {
    color: #f87171;
}
.mm-mc-navbar-identity.is-disconnected .mm-mc-status-dot {
    background: #f87171;
}

.mm-mc-navbar-identity .mm-mc-status-text {
    letter-spacing: 1.5px;
}

/* Center: chevron buttons — absolutely centered in navbar */
.mm-mc-navbar-center {
    position:   absolute;
    left:       50%;
    transform:  translateX(-50%);
    display:    flex;
    align-items: center;
    gap:        6px;
}

.mm-mc-nav-btn {
    width: 44px; height: 44px; border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border:     1px solid rgba(255,255,255,0.15);
    color:      #e8e8f0; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; transition: background 0.15s;
}
.mm-mc-nav-btn:hover  { background: rgba(255,255,255,0.15); }
.mm-mc-nav-btn:active { background: rgba(255,255,255,0.25); }
.mm-mc-nav-btn svg    { pointer-events: none; }

/* Status (shown in center when no nav buttons) */
.mm-mc-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500; padding: 3px 10px;
    border-radius: 20px; transition: background 0.3s, color 0.3s;
}
.mm-mc-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.mm-mc-status--connecting .mm-mc-status-dot {
    animation: mm-mc-status-pulse 1.2s ease-in-out infinite;
}
@keyframes mm-mc-status-pulse {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.3; }
}
.mm-mc-status--connecting   { background: #2a1f00; color: #f59e0b; }
.mm-mc-status--connected    { background: #052e16; color: #4ade80; }
.mm-mc-status--disconnected { background: #2d0909; color: #f87171; }
.mm-mc-status--error        { background: #2d0909; color: #f87171; }

/* Action button (Pass / Take) — right side */
.mm-mc-action-btn {
    order: 3;
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 10px 0 16px; border-radius: 10px; border: none;
    font-size: 14px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer;
    white-space: nowrap; transition: background 0.15s, transform 0.1s;
    flex-shrink: 0; line-height: 1; font-family: inherit;
}
.mm-mc-action-btn:active { transform: scale(0.95); }

.mm-mc-pass-btn { background: rgba(255,255,255,0.1); color: #e8e8f0; border: 1px solid rgba(255,255,255,0.2); }
.mm-mc-pass-btn:hover { background: rgba(255,255,255,0.18); }
.mm-mc-take-btn { background: #00a9bb; color: #fff; }
.mm-mc-take-btn:hover { background: #00c4d8; }

/* ============================================================
   Content area
   ============================================================ */

.mm-mc-content {
    padding: 16px 16px 80px; max-width: 600px; margin: 0 auto;
    min-height: calc(100vh - 56px);
}

.mm-mc-content--waiting { background: #1c1c1c; }

/* Part heading */
.mm-mc-part-heading {
    font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 16px; padding-top: 8px;
}
.mm-mc-part-heading--greyed { opacity: 0.2; }

/* No-content message (kept for potential reuse) */
.mm-mc-waiting-msg {
    font-size: 17px; color: rgba(255,255,255,0.4); text-align: center; padding: 40px 24px;
}

/* Top section (part -1) title — shows the KrsKrt form name */
.mm-mc-top-title {
    font-size:   28px;
    font-weight: 700;
    color:       rgba(255, 255, 255, 0.85);
    text-align:  center;
    padding:     40px 24px 24px;
    margin:      0;
    line-height: 1.2;
    word-break:  break-word;
}

/* ============================================================
   Field cards — white background
   ============================================================ */

.mm-mc-field {
    position: relative;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px 14px 10px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
    color: #111;
}
.mm-mc-field:focus-within { border-color: #6366f1; }

/* Greyed-out field (waiting state) */
.mm-mc-field--greyed {
    opacity: 0.2;
    pointer-events: none;
}

/* Typing-mutex: applied when the OTHER side is typing this field */
.mm-typing-host { position: relative; }
.mm-typing-shield {
    position: absolute; inset: 0;
    background: transparent; cursor: not-allowed; z-index: 5;
    border-radius: 10px;
}
.mm-typing-indicator {
    position: absolute; right: 12px; bottom: 10px;
    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); }
}

.mm-mc-label {
    display: block; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: #777; margin-bottom: 6px; padding-right: 60px;
}

.mm-mc-input {
    width: 100%; background: transparent; border: none; outline: none;
    color: #111; font-size: 18px; line-height: 20px;
    font-family: "Lekton", sans-serif; font-weight: 500;
    padding: 0;
    resize: none; overflow: hidden;
}
.mm-mc-input::placeholder { color: #c8c8c8; }
.mm-mc-input.jfb-icon-placeholder::placeholder {
    font-family: "Phosphor-PUA", 'Lekton', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 17px; font-weight: normal; font-style: normal;
    color: #c8c8c8; opacity: 1;
}

/* ============================================================
   Select field — native dropdown (42px, Phosphor chevron-down)
   Borderless like .mm-mc-input (the field card provides the box);
   the chevron mirrors the number stepper's Phosphor icon.
   ============================================================ */
.mm-mc-select-wrap { position: relative; margin-top: 4px; }
.mm-mc-select {
    width: 100%; height: 42px; box-sizing: border-box;
    background: transparent; border: none; outline: none;
    color: #111; font-size: 18px; line-height: 20px;
    font-family: "Lekton", sans-serif; font-weight: 500;
    padding: 0 30px 0 0;            /* room for the chevron */
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    cursor: pointer;
}
.mm-mc-select:disabled { opacity: 0.5; cursor: default; }
/* Muted while the placeholder option is selected (toggled in JS). */
.mm-mc-select.mm-mc-select--placeholder { color: #c8c8c8; }
/* Icon placeholder: Phosphor-PUA paints the PUA glyph (unicode-range gated),
   Lekton renders the text — same trick as the input placeholders. */
.mm-mc-select.jfb-icon-placeholder {
    font-family: "Phosphor-PUA", 'Lekton', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.mm-mc-select-wrap::after {
    content: "\e136";              /* ph-caret-down */
    font-family: "Phosphor"; font-style: normal; font-weight: normal;
    line-height: 1; font-size: 18px; color: #555;
    position: absolute; top: 50%; right: 4px;
    transform: translateY(-50%); pointer-events: none;
}

/* ============================================================
   Range field — mirror of the central screen (krskrt-range.css).
   The Marker doesn't load JFB's main.css, so the full slider
   styling lives here too. Bubble + step positions set by JS.
   ============================================================ */
.mm-mc-range-wrap {
    --krskrt-range-thumb: 34px;
    --krskrt-range-track: 8px;
    display: block; position: relative; width: 100%;
    margin-top: 4px;
}
input[type="range"].mm-mc-range {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    width: 100%; margin: 0; padding: 0; background: transparent; display: block;
    position: relative; z-index: 2; outline: none; border: none;
    min-height: var(--krskrt-range-thumb);
    cursor: pointer;
}
/* Step dots are painted into the track background (radial-gradients, set by JS);
   the native thumb paints over the track so the handle is always on top. */
input[type="range"].mm-mc-range::-webkit-slider-runnable-track {
    height: var(--krskrt-range-track);
    background: var(--jet-fb__range-field-range--bgc, #e3ddd8);
    border-radius: 15px; border: none;
}
input[type="range"].mm-mc-range::-moz-range-track {
    height: var(--krskrt-range-track);
    background: var(--jet-fb__range-field-range--bgc, #e3ddd8);
    border-radius: 15px; border: none;
}
input[type="range"].mm-mc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--krskrt-range-thumb); height: var(--krskrt-range-thumb);
    border-radius: 5px; background: #fff;
    border: 1px solid var(--krskrt-range-thumb-border, #dedede);
    box-shadow: 0 3px 0 #a0a0a0, 0 6px 8px rgba(0,0,0,0.25);
    margin-top: calc((var(--krskrt-range-thumb) - var(--krskrt-range-track)) / -2);
}
input[type="range"].mm-mc-range::-moz-range-thumb {
    width: var(--krskrt-range-thumb); height: var(--krskrt-range-thumb);
    border-radius: 5px; background: #fff;
    border: 1px solid var(--krskrt-range-thumb-border, #dedede);
    box-shadow: 0 3px 0 #a0a0a0, 0 6px 8px rgba(0,0,0,0.25);
}
input[type="range"].mm-mc-range:disabled { opacity: 0.5; cursor: default; }

.mm-mc-range-wrap .range-value {
    position: absolute; top: 0; height: var(--krskrt-range-thumb);
    display: flex; align-items: center; justify-content: center;
    transform: translateX(-50%); pointer-events: none; z-index: 3;
    font-family: "Lekton", sans-serif; font-size: 14px; line-height: 1;
    color: #a0a0a0; white-space: nowrap; font-weight: 700;
}
/* Unset state: hand-swipe-right hint instead of a number (the Marker doesn't
   load the upstream Phosphor stylesheet, so the codepoint is set explicitly). */
.mm-mc-range-wrap .range-value .krskrt-range-hint {
    display: none;
    font-family: "Phosphor"; font-style: normal; font-weight: normal;
    font-size: 18px; line-height: 1; color: #a0a0a0;
}
.mm-mc-range-wrap .range-value .krskrt-range-hint::before { content: "\ec92"; }
.mm-mc-range-wrap .range-value.is-unset .krskrt-range-hint { display: inline-block; }
.mm-mc-range-wrap .range-value.is-unset .jet-form-builder__field-value-number { display: none; }

/* ============================================================
   Option lists (radio / select / checkbox) — light theme
   ============================================================ */

.mm-mc-option-list  { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.mm-mc-option-btn {
    width: 100%; text-align: left; padding: 11px 14px;
    background: #f8f8f8; border: 1px solid #e0e0e0; border-radius: 8px;
    color: #222; font-size: 15px; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mm-mc-option-btn:hover    { background: #f0f0f0; border-color: #6366f1; color: #111; }
.mm-mc-option-btn:disabled { cursor: default; opacity: 0.5; }

/* Radio selected */
.mm-mc-radio-btn.is-selected { background: #ede9fe; border-color: #6366f1; color: #312e81; }

/* Checkbox selected */
.mm-mc-check-btn.is-selected { background: #dcfce7; border-color: #22c55e; color: #14532d; }

/* Radio / checkbox icons — CSS-drawn (no Unicode glyph dependency) */
.mm-mc-opt-icon {
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    width:        18px;
    height:       18px;
    flex-shrink:  0;
    border-radius: 50%;
    border:       2px solid #ccc;
    transition:   border-color 0.15s, background 0.15s;
}
/* Per-option colour (mirrors central screen) */
.mm-mc-opt-icon.has-color { border-width: 3px; border-color: var(--mm-opt-color, #ccc); }
.mm-mc-radio-btn.is-selected .mm-mc-opt-icon.has-color,
.mm-mc-check-btn.is-selected .mm-mc-opt-icon.has-color {
    background:   var(--mm-opt-color);
    border-color: var(--mm-opt-color);
}

/* Row layout — buttons in a horizontal row instead of stacked */
.mm-mc-option-list.mm-mc-radio-list--row {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;
}
.mm-mc-option-list.mm-mc-radio-list--row .mm-mc-option-btn {
    width: auto; flex: 1 1 auto;
}
/* Icon-only options (no labels) — keep them tight when row */
.mm-mc-option-list.mm-mc-radio-list--row.mm-mc-radio-list--icons .mm-mc-option-btn {
    flex: 0 0 auto; padding: 8px 10px; justify-content: center;
}

/* Vertical item alignment — icon stacked above label inside each button */
.mm-mc-option-btn--vertical-item {
    flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
/* Vertical-reverse — label above icon */
.mm-mc-option-btn--vertical-reverse-item {
    flex-direction: column-reverse; align-items: center; text-align: center; gap: 6px;
}

/* Radio */
.mm-mc-radio-btn .mm-mc-opt-icon { border-radius: 50%; }
.mm-mc-radio-btn.is-selected .mm-mc-opt-icon {
    border-color: #6366f1;
    background:   #6366f1;
}
.mm-mc-radio-btn.is-selected .mm-mc-opt-icon::after {
    content:       '';
    display:       block;
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #fff;
}

/* Checkbox */
.mm-mc-check-btn .mm-mc-opt-icon { border-radius: 4px; }
.mm-mc-check-btn.is-selected .mm-mc-opt-icon {
    border-color: #22c55e;
    background:   #22c55e;
}
.mm-mc-check-btn.is-selected .mm-mc-opt-icon::after {
    content:     '✓';
    font-size:   12px;
    line-height: 1;
    color:       #fff;
    font-weight: 900;
}

/* ============================================================
   Sent indicator
   ============================================================ */

.mm-mc-sent-indicator {
    position: absolute; bottom: 10px; right: 12px;
    font-size: 13px; font-weight: 700; color: #22c55e;
    opacity: 0; pointer-events: none;
}
@keyframes mm-sent-pulse { 0%,80%{opacity:1} 100%{opacity:0} }
.mm-mc-sent-indicator.is-sent { animation: mm-sent-pulse 1s ease-out forwards; }

/* ============================================================
   Repeater field
   ============================================================ */

.mm-mc-repeater { margin-bottom: 16px; }

.mm-mc-repeater-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: #aaa; margin-bottom: 8px;
}

.mm-mc-repeater-row {
    background: #f9f9f9; border: 1px solid #e8e8e8; border-radius: 10px;
    padding: 12px 14px; margin-bottom: 8px;
}
.mm-mc-repeater-row:last-child { margin-bottom: 0; }

/* Greyed-out repeater (inactive marker) — single opacity on container */
.mm-mc-repeater--greyed {
    opacity:        0.2;
    pointer-events: none;
}

.mm-mc-repeater-row-num {
    font-size: 11px; font-weight: 700; color: #aaa;
    text-transform: uppercase; margin-bottom: 10px;
}

.mm-mc-repeater-row .mm-mc-field {
    background: #fff; margin-bottom: 8px;
}
.mm-mc-repeater-row .mm-mc-field:last-child { margin-bottom: 0; }

.mm-mc-repeater-rows { margin-bottom: 0; }

/* Delete-row button — positioned top-right of each row card */
.mm-mc-repeater-row {
    position: relative;
}
.mm-mc-repeater-row-remove {
    position:         absolute;
    top:              8px;
    right:            8px;
    width:            26px;
    height:           26px;
    border:           none;
    background:       transparent;
    color:            #aaa;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          0;
    border-radius:    5px;
    font-family:      inherit;
    transition:       background 0.12s, color 0.12s;
}
.mm-mc-repeater-row-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color:      #ef4444;
}
.mm-mc-repeater-row-remove:active {
    background: rgba(239, 68, 68, 0.2);
}
.mm-mc-repeater-row-remove:disabled,
.mm-mc-repeater-row-remove[disabled] {
    opacity:        0.3;
    cursor:         not-allowed;
    pointer-events: none;
}
.mm-mc-repeater-row-remove > i {
    font-size:      16px;
    pointer-events: none;
}
/* Give the row-num a bit of right padding so it doesn't overlap the X button */
.mm-mc-repeater-row .mm-mc-repeater-row-num {
    padding-right: 30px;
}

.mm-mc-repeater-add {
    display:         flex;
    align-items:     center;
    gap:             6px;
    width:           100%;
    margin-top:      8px;
    padding:         10px 14px;
    border:          1px solid #e0e0e0;
    border-radius:   8px;
    background:      #f8f8f8;
    color:           #555;
    font-size:       16px;
    font-family:     inherit;
    cursor:          pointer;
    transition:      background 0.15s, border-color 0.15s, color 0.15s;
    line-height:     1.4;
}
.mm-mc-repeater-add > .ph {
    font-size:   17px;
    color:       #00374a;
    line-height: 1;
    flex-shrink: 0;
}
.mm-mc-repeater-add:hover {
    background:      #ede9fe;
    border-color:    #6366f1;
    color:           #312e81;
}
.mm-mc-repeater-add:active { background: #ddd6fe; }
.mm-mc-repeater-add:disabled,
.mm-mc-repeater-add[disabled] {
    opacity:        0.4;
    cursor:         not-allowed;
    pointer-events: none;
}

/* ============================================================
   Fixed bottom bar — [scroll↑][scroll↓] | [PREV][NEXT...]
   ============================================================ */

.mm-mc-bottom-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    transition: bottom 0.1s;
    /* z-index 350 sits above the done modal (300) so the central scroll
       buttons remain reachable while the finish overlay is showing. */
    display: flex; gap: 8px; z-index: 350;
    background: #1a1a2e; border-top: 1px solid #2a2a40;
    padding: 10px 12px 14px;
}
/* Once the session is finished, only the central-scroll group is useful
   — hide the prev/next nav group so the bar is just the scroll
   controls. Body class is toggled in onSessionFinished /
   onSessionResumed / onSessionRestarted. */
body.mm-mc-done-visible .mm-mc-nav-group { display: none; }

/* Button groups: adjacent buttons share borders, only outer corners rounded */
.mm-mc-btn-group {
    display: flex;
    gap: 0;
}
.mm-mc-nav-group {
    flex: 1;
    min-width: 0;
}
.mm-mc-btn-group > .mm-mc-bottom-btn:not(:last-child) {
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
}
.mm-mc-btn-group > .mm-mc-bottom-btn:not(:first-child) {
    border-top-left-radius:    0;
    border-bottom-left-radius: 0;
    border-left:               none;
}

.mm-mc-bottom-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px;
    padding: 0 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
    font-family: inherit; cursor: pointer; line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.mm-mc-bottom-btn svg     { pointer-events: none; flex-shrink: 0; }
.mm-mc-bottom-btn:active  { background: rgba(255,255,255,0.25); }

/* Square buttons: scroll up, scroll down, prev */
.mm-mc-scroll-btn,
.mm-mc-prev-btn {
    width: 46px;
    padding: 0;
    flex-shrink: 0;
    color: #8888aa;
}
.mm-mc-prev-btn:hover:not(:disabled) { background: rgba(255,255,255,0.15); color: #e8e8f0; }
.mm-mc-prev-btn:disabled             { opacity: 0.25; cursor: default; }

/* Scroll buttons: the double-chevron is GREEN when scrolling is actually
   possible in that direction within the active section, and greyed-out (but
   still visible — not hidden) when it isn't. The enabled/disabled state is
   driven by central's scroll_bounds broadcast via applyScrollBounds(). */
.mm-mc-scroll-btn:not(:disabled)       { color: #4ade80; }
.mm-mc-scroll-btn:hover:not(:disabled) { background: rgba(255,255,255,0.15); color: #6aeeaa; }
.mm-mc-scroll-btn:disabled             { opacity: 0.3; color: #8888aa; cursor: default; }

/* NEXT fills remaining space within nav-group */
.mm-mc-next-btn {
    flex: 1;
    color: #4ade80;
}
.mm-mc-next-btn:hover { background: rgba(255,255,255,0.15); color: #6aeeaa; }

/* ---- Content blocks (marker-visible content from central page) -------- */
.mm-mc-content-block {
    background:    #1e1e2e;
    border:        1px solid #2a2a40;
    border-radius: 8px;
    padding:       10px 14px;
    color:         #c8c8d8;
    font-size:     14px;
    line-height:   1.5;
    word-break:    break-word;
}
.mm-mc-content-block img {
    max-width:     100%;
    height:        auto;
    display:       block;
    border-radius: 4px;
}
.mm-mc-content-block--greyed { opacity: 0.2; pointer-events: none; }
.mm-mc-content-block p { margin: 0 0 8px; }
.mm-mc-content-block p:last-child { margin-bottom: 0; }
.mm-mc-content-block h1,
.mm-mc-content-block h2,
.mm-mc-content-block h3 {
    color:         #e8e8f0;
    margin:        0 0 6px;
    font-size:     15px;
    font-weight:   600;
}

/* ---- Lightbox (full-screen image, tap to close, pinch to zoom) -------- */
.mm-lightbox {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.92);
    z-index:         300;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    cursor:          zoom-out;
    overflow:        hidden;
    touch-action:    none;
}
.mm-lightbox.is-visible { display: flex; }
.mm-lightbox img {
    max-width:        100%;
    max-height:       100%;
    object-fit:       contain;
    background:       #fff;
    border:           1px solid #dedede;
    border-radius:    5px;
    box-shadow:       0 8px 40px rgba(0,0,0,0.8);
    cursor:           zoom-out;
    transform-origin: center center;
    will-change:      transform;
    user-select:      none;
}

/* ============================================================
   Modals (takeover, pass)
   ============================================================ */

.mm-modal {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.75); z-index: 200;
    align-items: center; justify-content: center; padding: 20px;
}
.mm-modal.is-visible { display: flex; }

.mm-modal-box {
    background: #1a1a2e; border: 1px solid #2a2a40; border-radius: 14px;
    padding: 24px 20px 20px; max-width: 340px; width: 100%;
    text-align: center; position: relative;
}
.mm-modal-close {
    position: absolute; top: 10px; right: 14px;
    background: none; border: none; font-size: 22px; color: #666; cursor: pointer;
}
.mm-modal-close:hover { color: #fff; }
.mm-modal-title { font-size: 16px; font-weight: 600; color: #e8e8f0; margin: 0 0 8px; line-height: 1.4; }
.mm-modal-sub   { font-size: 13px; color: #8888aa; margin: 0 0 16px; }
.mm-modal-btns  { display: flex; gap: 10px; justify-content: center; }
.mm-modal-btn   {
    padding: 10px 22px; border-radius: 8px; border: none;
    font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.mm-modal-btn--accept  { background: #22c55e; color: #fff; }
.mm-modal-btn--accept:hover { background: #16a34a; }
.mm-modal-btn--decline { background: #374151; color: #e8e8f0; }
.mm-modal-btn--decline:hover { background: #4b5563; }
.mm-modal-url {
    display: block; font-size: 12px; color: #6366f1; margin-top: 12px;
    word-break: break-all; text-decoration: none;
}
.mm-modal-url:hover { text-decoration: underline; }

/* Confirm-send modal — replicates the finish button at tap-target size */
#mm-confirm-send .mm-modal-box {
    max-width: 360px;
    padding: 40px 16px 20px;
}
.mm-confirm-send-btn {
    width: 100%;
    height: 56px;
    font-size: 16px;
    background: rgba(74, 222, 128, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #4ade80;
}
.mm-confirm-send-btn:hover,
.mm-confirm-send-btn:active {
    background: rgba(74, 222, 128, 0.24);
    color: #6aeeaa;
}

/* Still-typing guard modal — shown by prev/next nav when Central has
   typed in the last few seconds. Same shell as the confirm-send modal,
   neutral (non-green) action button. */
#mm-confirm-typing .mm-modal-box {
    max-width: 360px;
    padding: 32px 16px 20px;
}
.mm-confirm-typing-btn {
    width: 100%;
    height: 48px;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    color: #e8e8f0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mm-confirm-typing-btn:hover,
.mm-confirm-typing-btn:active {
    background: rgba(255,255,255,0.16);
    color: #ffffff;
}

/* ============================================================
   Pass-the-marker modal — direct reflection of central's
   `.mm-cs-qr-overlay.mm-cs-qr-inline` so scanning auto-connects.
   The QR URL carries `?pin=…&intent=take` so the scanning device
   skips PIN entry and immediately requests takeover.
   ============================================================ */
.mm-pass-modal { padding: 0; }
.mm-pass-close {
    position:    fixed;
    top:         8px;
    right:       12px;
    background:  none;
    border:      none;
    color:       #c8c8d8;
    font-size:   30px;
    line-height: 1;
    cursor:      pointer;
    z-index:     201;
}
.mm-pass-close:hover { color: #fff; }

/* Lekton-only zone. Mirrors the rule in central-screen.css — keeps
   the QR overlay (and its inner text) in the monospace UI font even
   when the form's Used Fonts panel sets a Google Font for body text.
   The wp_head override doesn't run on /marker/ pages (they bypass
   wp_head), but central-screen.css's font-family rule could leak in
   via shared classes — this rule is defensive. */
.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;
}

/* Reflection of `.mm-cs-qr-overlay.mm-cs-qr-inline` from central-screen.css */
.mm-pass-modal .mm-cs-qr-overlay.mm-cs-qr-inline {
    background:    #fff;
    border:        1px solid #dedede;
    padding:       10px 18px 16px;
    border-radius: 5px;
    width:         fit-content;
    max-width:     320px;
    margin:        0 auto;
    text-align:    center;
}

.mm-pass-modal .mm-cs-qr-heading {
    font-size:   28px;
    font-weight: 400;
    line-height: 1.15;
    color:       #00374a;
    margin:      0 0 10px;
    white-space: nowrap;
}
.mm-pass-modal .mm-cs-qr-heading strong {
    font-weight:      800;
    display:          block;
    font-size:        22px;
    color:            #fff;
    background-color: #00374a;
    border-radius:    5px;
    padding:          5px 10px;
    letter-spacing:   0.5px;
}
.mm-pass-modal .mm-cs-qr-heading-sub {
    font-size:      15px;
    display:        block;
    text-transform: uppercase;
    margin-bottom:  4px;
}

.mm-pass-modal .mm-cs-qr-code-wrap { display: block; margin: 0 auto 4px; position: relative; }
.mm-pass-modal .mm-cs-qr-code-wrap img,
.mm-pass-modal .mm-cs-qr-code-wrap canvas { display: block; margin: 0 auto; }
.mm-pass-modal .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;
}

.mm-pass-modal .mm-cs-qr-section-top    { padding: 12px; }
.mm-pass-modal .mm-cs-qr-section-bottom { padding: 12px; background: #dedede; }

.mm-pass-modal .mm-cs-qr-or {
    width:       180px;
    margin:      0 auto 8px;
    color:       #00374a;
    line-height: 1.2;
}
.mm-pass-modal .mm-cs-qr-or a {
    display:         block;
    color:           #00374a;
    font-weight:     bold;
    text-transform:  uppercase;
    text-decoration: none;
    font-size:       17px;
    letter-spacing:  0.5px;
}
.mm-pass-modal .mm-cs-qr-or a:hover { text-decoration: underline; }

.mm-pass-modal .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-pass-modal .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:          2px 12px 0;
    border-radius:    5px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    margin-right:     8px;
}
.mm-pass-modal .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;
    padding:         3px 0 0;
}

/* ============================================================
   Done modal
   ============================================================ */

.mm-mc-done-modal {
    display: none; position: fixed; inset: 0; background: #0f0f1a; z-index: 300;
    flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 32px 24px;
}
.mm-mc-done-modal.is-visible { display: flex; }
.mm-mc-done-heading { font-size: 28px; font-weight: 800; color: #fff; margin: 0 0 24px; }

/* Animated green checkmark — same SVG used on the central screen's
   finish overlay (see krskrt-finish-content.php + central-screen.css
   for the matching definition). */
.mm-finish-check {
    display:        block;
    margin:         0 auto 16px;
    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; } }

/* Action buttons mirror Central's .mm-finish-btn layout but use the
   marker-client dark-theme palette. The modal has no close button; the
   only ways out are Return to KrsKrt (resume) or Start new session
   (restart) — both go through the relay so every screen stays in sync. */
.mm-mc-done-actions {
    display:         flex;
    gap:             12px;
    justify-content: center;
    flex-wrap:       wrap;
    margin-top:      8px;
}

/* Download section: "Download KrsKrt Report" sub-heading + a single
   segmented pill with PDF / HTML / Excel links to /report/{PIN}/{format}/.
   Same dark palette and Lekton font as the rest of the modal. */
.mm-mc-done-subheading {
    margin:         16px 0 8px;
    font-family:    "Lekton", sans-serif;
    font-size:      14px;
    font-weight:    700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          #94a3b8;
    text-align:     center;
}
.mm-mc-done-downloads {
    display:        flex;
    width:          100%;
    max-width:      280px;
    margin:         0 auto 16px;
    background:     #00374a;
    border-radius:  10px;
    overflow:       hidden;
}
.mm-mc-done-dl {
    flex:            1 1 0;
    min-width:       0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         10px 8px;
    min-height:      44px;
    color:           #fff;
    font-family:     "Lekton", sans-serif;
    font-weight:     700;
    font-size:       15px;
    letter-spacing:  0.5px;
    text-transform:  uppercase;
    text-decoration: none;
    line-height:     1;
    border-right:    1px solid rgba(255,255,255,0.25);
    transition:      background 0.12s;
}
.mm-mc-done-dl:last-child { border-right: none; }
.mm-mc-done-dl:hover  { background: rgba(255,255,255,0.10); color: #fff; }
.mm-mc-done-dl:active { background: rgba(255,255,255,0.18); }
.mm-mc-done-dl:focus  { outline: 2px solid #6ee7b7; outline-offset: 2px; }
.mm-mc-done-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    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:           #e8e8f0;
    transition:      transform 0.08s ease-out,
                     background 0.15s ease-out,
                     color 0.15s ease-out;
}
.mm-mc-done-btn:hover  { transform: translateY(-1px); }
.mm-mc-done-btn:active { transform: translateY(1px); }
.mm-mc-done-btn:focus  { outline: none; box-shadow: 0 0 0 3px rgba(74,222,128,0.4); }

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

.mm-mc-done-btn--secondary {
    background: transparent;
    color:      #e8e8f0;
}

/* ============================================================
   Toast
   ============================================================ */

.mm-mc-toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #374151; color: #e8e8f0; padding: 10px 20px;
    border-radius: 20px; font-size: 13px; font-weight: 600;
    opacity: 0; transition: opacity 0.2s, transform 0.2s;
    z-index: 500; pointer-events: none;
}
.mm-mc-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Details accordion toggle button
   ============================================================ */

.mm-mc-details-btn {
    display:       flex;
    align-items:   center;
    gap:           10px;
    width:         100%;
    padding:       13px 14px;
    margin-bottom: 12px;
    background:    #fff;
    border:        1px solid #e0e0e0;
    border-radius: 10px;
    color:         #111;
    font-size:     15px;
    font-family:   inherit;
    cursor:        pointer;
    text-align:    left;
    transition:    background 0.15s, border-color 0.15s;
}
.mm-mc-details-btn:hover { border-color: #00374a; }
.mm-mc-details-btn--greyed { opacity: 0.2; pointer-events: none; }

/* Right-pointing triangle, rotates to down when open */
.mm-mc-details-tri {
    flex-shrink:  0;
    display:      inline-block;
    width:        0;
    height:       0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #00374a;
    transition:   transform 0.2s;
}
.mm-mc-details-btn.is-open .mm-mc-details-tri { transform: rotate(90deg); }

/* Truncate long summary text with ellipsis */
.mm-mc-details-summary {
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    color:         #111;
}

/* ============================================================
   Hashtag command palette
   ============================================================ */

#mm-cmd-palette {
    display:         none;
    flex-direction:  column;
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         500;
    background:      #1a1a2e;
    border-top:      1px solid #2a2a40;
    max-height:      50vh;
    overflow-y:      auto;
    padding-bottom:  env(safe-area-inset-bottom, 0px);
}

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

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

/* ============================================================
   KLOKKY topbar timer
   ============================================================ */

/* 56x56 square that sits right next to the favicon. Mirrors the internal
   border structure of #mm-klokky-overlay (horizontal separator between
   display and buttons, vertical separator between the two buttons),
   adapted for the Marker's dark navbar palette. */
#mm-topbar-timer {
    order:           1;
    flex-shrink:     0;
    /* Cancel the navbar's 10px flex `gap` so the timer sits flush against
       the 56px favicon, with only its own right-border as the separator. */
    margin-left:     -10px;
    box-sizing:      border-box;
    width:           56px;
    height:          56px;
    display:         flex;
    flex-direction:  column;
    align-items:     stretch;
    justify-content: stretch;
    gap:             0;
    padding:         0;
    border-left:     1px solid #2a2a40;
    border-right:    1px solid #2a2a40;
    overflow:        hidden;
}

/* 50/50 vertical split so the button row is 28px tall and each button,
   being `flex:1` of a 56px-wide row, becomes a 28x28 square. */
#mm-topbar-timer-display {
    flex:            1 1 0;
    min-height:      0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     "Lekton", sans-serif;
    font-weight:     700;
    font-size:       17px;
    color:           #fff;
    line-height:     1;
    letter-spacing:  0;
    margin-top:      3px;
}

.mm-topbar-timer-buttons {
    display:    flex;
    gap:        0;
    border-top: 1px solid #2a2a40;
    flex:       1 1 0;
    min-height: 0;
}

.mm-topbar-timer-btn {
    flex:          1;
    padding:       0;
    border:        0;
    border-right:  1px solid #2a2a40;
    border-radius: 0;
    background:    transparent;
    color:         #fff;
    font-family:   "Lekton", sans-serif;
    font-size:     12px;
    font-weight:   700;
    cursor:        pointer;
    line-height:   1;
    height:        100%;
}
.mm-topbar-timer-btn:last-child { border-right: 0; }
.mm-topbar-timer-btn:hover      { background: rgba(255,255,255,0.08); }
.mm-topbar-timer-btn:active     { background: rgba(255,255,255,0.18); }
.mm-topbar-timer-reset          { font-size: 14px; padding: 0; }

/* Compress identity chip when timer is active — hide status text, keep dot */
.mm-mc-navbar-identity.mm-timer-active .mm-mc-status-text { display: none; }

/* ============================================================
   Number field — stepper buttons (always visible)
   ============================================================ */

.mm-mc-number-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Hide browser native up/down spin arrows */
.mm-mc-number-row .mm-mc-input {
    flex: 1;
    -moz-appearance: textfield;
}
.mm-mc-number-row .mm-mc-input::-webkit-outer-spin-button,
.mm-mc-number-row .mm-mc-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mm-mc-stepper-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #f8f8f8;
    color: #555;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mm-mc-stepper-btn:hover {
    background: #ede9fe;
    border-color: #6366f1;
    color: #312e81;
}
.mm-mc-stepper-btn:active {
    background: #ddd6fe;
}
.mm-mc-stepper-btn > i {
    pointer-events: none;
    font-family:    "Phosphor";
    font-style:     normal;
    font-weight:    normal;
    speak:          never;
    text-transform: none;
    line-height:    1;
    display:        inline-block;
}
.mm-mc-stepper-btn > i.ph-minus::before { content: "\e32a"; }
.mm-mc-stepper-btn > i.ph-plus::before  { content: "\e3d4"; }

/* ============================================================
   Canonical Phosphor icon registry (loaded via Phosphor family — patched Light glyphs).
   See CLAUDE.md "Icon system" for which icon to use for which
   action — the registry below MUST match that table.
   ============================================================ */
.ph {
    font-family: "Phosphor";
    font-style:  normal;
    font-weight: normal;
    line-height: 1;
    speak:       never;
    display:     inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ph::before                       { display: inline-block; }
.ph.ph-corners-out::before        { content: "\e1d0"; }
.ph.ph-x::before                  { content: "\e4f6"; }
.ph.ph-minus::before              { content: "\e32a"; }
.ph.ph-plus::before               { content: "\e3d4"; }
.ph.ph-caret-left::before         { content: "\e138"; }
.ph.ph-caret-right::before        { content: "\e13a"; }
.ph.ph-caret-double-up::before    { content: "\e12c"; }
.ph.ph-caret-double-down::before  { content: "\e126"; }
.ph.ph-caret-double-left::before  { content: "\e128"; }
.ph.ph-caret-double-right::before { content: "\e12a"; }
.ph.ph-arrow-left::before         { content: "\e058"; }
.ph.ph-arrow-bend-up-right::before{ content: "\e026"; }
.ph.ph-corners-in::before         { content: "\e1ce"; }
.ph.ph-magnifying-glass::before   { content: "\e30c"; }
.ph.ph-magnifying-glass-plus::before { content: "\e310"; }
.ph.ph-arrows-clockwise::before   { content: "\e094"; }
.ph.ph-pause::before              { content: "\e39e"; }
.ph.ph-play::before               { content: "\e3d0"; }
.ph.ph-push-pin::before           { content: "\e3e2"; }
.ph.ph-star-four::before          { content: "\e6a4"; }

/* QR-blur field: flex row — blur toggle left, mode group right ----------- */
.mm-mc-field--qr-blur .mm-mc-qr-controls-row {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* Session-QR mode buttons — inherit viz-buttonbar group styling.
   Inactive = faint; active = indigo highlight (same as stepper hover). */
.mm-mc-viz-buttonbar > .mm-mc-sq-mode-group > .mm-mc-sq-mode-btn:not(.is-active) {
    opacity: 0.4;
}
.mm-mc-viz-buttonbar > .mm-mc-sq-mode-group > .mm-mc-sq-mode-btn.is-active {
    background: #ede9fe;
    color:      #312e81;
    opacity:    1;
}

/* ======================================================================== */
/* Video field                                                              */
/* ======================================================================== */

.mm-mc-video-field {
    padding: 0;
}

.mm-mc-video-field .krskrt-video-field {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 10px;
    background: #FFF;
    overflow: hidden;
    cursor: default;
    user-select: none;
}
.mm-mc-video-field .krskrt-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}
.mm-mc-video-field .krskrt-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Top-right close button — only visible while central is playing or paused.
   Display is toggled inline by JS (setPosterRemoteState). */
.mm-mc-video-field .krskrt-video-close-btn {
    position:        absolute;
    top:             8px;
    right:           8px;
    width:           36px;
    height:          36px;
    padding:         0;
    border:          0;
    border-radius:   50%;
    background:      rgba(220, 53, 69, 0.85);
    color:           #fff;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     0;
    transition:      background 0.15s;
    z-index:         2;
}
.mm-mc-video-field .krskrt-video-close-btn:hover,
.mm-mc-video-field .krskrt-video-close-btn:active {
    background: rgba(220, 53, 69, 1);
}
.mm-mc-video-field .krskrt-video-close-btn svg { width: 18px; height: 18px; }

.krskrt-video-field-actions {
    position: absolute;
    bottom:   8px;
    right:    8px;
    display:  flex;
    gap:      8px;
}
.krskrt-video-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 4px 2px;
    border-radius: 5px;
    border: 1px solid #dedede;
    background: rgba(255, 255, 255, 0.9);
    color: #111;
    font-family: "Lekton", sans-serif;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.2;
}
.krskrt-video-btn:active {
    transform: translateY(1px);
}
.krskrt-video-btn svg {
    flex-shrink: 0;
}

/* Modal (marker-side "View over here") */
.krskrt-video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.krskrt-video-modal__player {
    position: relative;
    width: min(96vw, calc(96vh * 16 / 9));
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}
.krskrt-video-modal__player > video,
.krskrt-video-modal__player > iframe,
.krskrt-video-modal__player > .krskrt-video-yt-target {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.krskrt-video-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #FFF;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
html.krskrt-video-modal-open,
body.krskrt-video-modal-open {
    overflow: hidden;
}

/* Tap-to-play fallback — mounted by KrsKrtVideo when autoplay is rejected
   (mobile browsers, in-app webviews). Tapping calls ctrl.play() inside the
   gesture handler so audio playback is permitted. */
.krskrt-video-tap-to-play {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0, 0, 0, 0.55);
    color:           #fff;
    border:          0;
    cursor:          pointer;
    z-index:         5;
    -webkit-tap-highlight-color: transparent;
}
.krskrt-video-tap-to-play:active { background: rgba(0, 0, 0, 0.7); }

/* ============================================================
   Marker intro modal — full-screen dark overlay with editor-
   provided HTML, a close (×) in the top-right corner, and a
   fixed START button at the bottom styled like the first-part
   NEXT button (reuses .mm-mc-bottom-bar / .mm-mc-next-btn).
   ============================================================ */

.mm-mc-intro-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background: #1a1a2e;
    color: #e8e8f0;
    opacity: 0;
    /* Transform origin aims the scale-down animation at the top-left
       favicon, so on dismiss the modal "flies into" the logo. */
    transform-origin: 0 0;
    transform: scale(1);
    transition: opacity 0.18s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.mm-mc-intro-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.mm-mc-intro-modal.is-minimizing {
    opacity:   0;
    transform: scale(0.02);
    pointer-events: none;
}

.mm-mc-intro-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: #e8e8f0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.mm-mc-intro-close:hover,
.mm-mc-intro-close:focus-visible {
    background: rgba(255,255,255,0.18);
    color: #fff;
    outline: none;
}

/* Outer scroll shell: takes all vertical space, scrolls. Horizontal
   padding matches .mm-mc-content so the edges line up 1:1 with the
   regular content area. */
.mm-mc-intro-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 60px 16px 90px; /* top: below close button; bottom: above bar */
}

/* Inner wrapper: content constraint + centering, same as .mm-mc-content. */
.mm-mc-intro-body__inner {
    max-width:  600px;
    margin:     0 auto;
    font-size:  15px;
    line-height: 1.5;
    color:      #e8e8f0;
}

.mm-mc-intro-body__inner h1,
.mm-mc-intro-body__inner h2,
.mm-mc-intro-body__inner h3,
.mm-mc-intro-body__inner h4 {
    color: #ffffff;
    margin: 1em 0 0.4em;
    line-height: 1.25;
}
.mm-mc-intro-body__inner h1 { font-size: 22px; }
.mm-mc-intro-body__inner h2 { font-size: 19px; }
.mm-mc-intro-body__inner h3 { font-size: 17px; }
.mm-mc-intro-body__inner p  { margin: 0 0 0.8em; }
.mm-mc-intro-body__inner ul,
.mm-mc-intro-body__inner ol { margin: 0 0 0.8em 1.4em; padding: 0; }
.mm-mc-intro-body__inner li { margin: 0 0 0.25em; }
.mm-mc-intro-body__inner a  { color: #4ade80; text-decoration: underline; }

/* Divider + privacy paragraph appended to the intro modal so the user
   can re-read the consent text any time after pressing START. */
.mm-mc-intro-body__inner .mm-mc-intro-hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.mm-mc-intro-body__inner .mm-mc-intro-privacy {
    color:       #c8c8d8;
    font-size:   13px;
    line-height: 1.5;
    margin:      0;
}

/* Small hint-pulse on the logo after the modal collapses into it, so
   the user can see where it landed. */
@keyframes krskrt-logo-hint {
    0%   { transform: scale(1);    }
    30%  { transform: scale(1.25); }
    100% { transform: scale(1);    }
}
.mm-mc-navbar-logo.is-hinting {
    animation: krskrt-logo-hint 0.55s ease-out;
}

/* Reuses .mm-mc-bottom-bar base styling via class-sharing on the element.
   Only the is-visible animation is specific to the intro. */

/* ============================================================
   Email-addresses chip widget (buildEmailChipsField)
   Mirrors the central .jfb-email-chips layout: flex-wrap row of
   pill-shaped chips + a tail input with a "+" button. Adapted for
   the dark marker background.
   ============================================================ */

.mm-mc-chipbox {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.5rem;
}

/* Chip + tail input share the same pill silhouette so they look
   identical on both screens (just dark-themed for the marker). */
/* Light theme — matches the rest of the Marker content area
   (`.mm-mc-input`, option buttons) and the central `.jfb-email-chip`
   pills. White background, thin #dedede border, Lekton, dark text. */
.mm-mc-chip,
.mm-mc-chip-input {
    position:      relative;
    box-sizing:    border-box;
    height:        44px;
    padding:       0 38px 0 14px;        /* room for the icon button */
    background:    #fff;
    border:        1px solid #dedede;
    border-radius: 5px;
    color:         #00374a;
    font-family:   "Lekton", sans-serif;
    font-size:     17px;
    line-height:   44px;
    margin:        0;
    max-width:     100%;
    min-width:     0;
}

.mm-mc-chip {
    display:        inline-flex;
    align-items:    center;
    overflow:       hidden;
    white-space:    nowrap;
    text-overflow:  ellipsis;
}

.mm-mc-chip-input-wrap {
    position: relative;
    display:  inline-flex;
    flex:     1 1 180px;
    min-width: 0;
}
.mm-mc-chip-input {
    flex:   1 1 auto;
    width:  100%;
    outline: none;
}
.mm-mc-chip-input::placeholder {
    color:   #c8c8c8;
    opacity: 1;
}
.mm-mc-chip-input.is-invalid {
    border-color: #ef4444;
    background:   #fef2f2;
    animation:    mm-mc-chip-shake 0.4s ease;
}
@keyframes mm-mc-chip-shake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-4px); }
    50%     { transform: translateX(4px);  }
    75%     { transform: translateX(-2px); }
}

/* Shared + / × button — absolutely positioned inside each pill's
   right-padding gutter. Neutral dark glyph to sit on the light pill. */
.mm-mc-chip__add,
.mm-mc-chip__remove {
    position:        absolute;
    top:             50%;
    right:           6px;
    transform:       translateY(-50%);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    padding:         0;
    margin:          0;
    border:          0;
    border-radius:   50%;
    background:      transparent;
    color:           #00374a;
    cursor:          pointer;
    font-size:       20px;
    line-height:     1;
    opacity:         0.6;
    transition:      background 0.12s, color 0.12s, opacity 0.12s;
}
.mm-mc-chip__add:hover,
.mm-mc-chip__add:focus-visible,
.mm-mc-chip__remove:hover,
.mm-mc-chip__remove:focus-visible {
    opacity:    1;
    color:      #00374a;
    background: rgba(0, 0, 0, 0.06);
    outline:    none;
}

/* ============================================================
   Info hint — "marker ← info" beside the favicon (logo)
   ============================================================ */
.mm-mc-info-hint {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    align-items:    flex-start;
    gap:            0;
    margin-left:    8px;
    line-height:    1.05;
    font-size:      11px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          #c8c8d8;
    cursor:         pointer;
    user-select:    none;
}
.mm-mc-info-hint:hover { color: #ffffff; }
.mm-mc-info-hint .mm-mc-info-hint-row {
    display:     inline-flex;
    align-items: center;
    gap:         3px;
}
.mm-mc-info-hint .ph {
    font-family: "Phosphor";
    font-style:  normal;
    font-size:   13px;
    line-height: 1;
    speak:       none;
}
.mm-mc-info-hint .ph-arrow-left::before {
    content: "\e058";   /* Phosphor "arrow-left" */
}
.mm-mc-info-hint.is-hidden { display: none; }

/* 5-second green highlight applied after the marker presses START, so the
   user sees where the privacy notice lives going forward. */
@keyframes mm-mc-info-hint-privacy-pulse {
    0%   { color: #4ade80; }
    80%  { color: #4ade80; }
    100% { color: #c8c8d8; }
}
.mm-mc-info-hint.mm-mc-info-hint--privacy-pulse {
    color: #4ade80;
    animation: mm-mc-info-hint-privacy-pulse 5s ease-out;
}
.mm-mc-info-hint.mm-mc-info-hint--privacy-pulse:hover {
    color: #6aeeaa;
}

/* Phosphor icons inside the pass-marker action button */
.mm-mc-action-btn .ph {
    font-family: "Phosphor";
    font-style:  normal;
    line-height: 1;
    font-size:   1em;
    margin-left: 4px;
    speak:       none;
}
.mm-mc-action-btn .ph-arrow-bend-up-right::before {
    content: "\e026";   /* Phosphor "arrow-bend-up-right" */
}

/* ============================================================
   Start-gate overlay — full-screen backdrop, centers START button
   ============================================================ */
html.mm-mc-start-locked,
body.mm-mc-start-locked {
    overflow:     hidden;
    touch-action: none;
}

.mm-mc-start-overlay {
    position:        fixed;
    inset:           0;
    z-index:         100001;            /* above navbar (100), modals (300), palette (99999) */
    background:      #1a1a2e;            /* matches body bg so fields disappear */
    display:         flex;
    align-items:     center;
    justify-content: center;
    /* Mirrors .mm-mc-intro-modal: when dismissed, the gate scales down
       toward the top-left favicon. */
    transform-origin: 0 0;
    transform:        scale(1);
    transition:       opacity 0.32s ease, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.mm-mc-start-overlay.is-gone {
    opacity:        0;
    pointer-events: none;
}
.mm-mc-start-overlay.is-minimizing {
    opacity:        0;
    transform:      scale(0.02);
    pointer-events: none;
}

/* Stacked gate: privacy notice above, START button below. The overlay's
   align-items:center handles vertical centering. */
.mm-mc-start-overlay__gate {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             24px;
    max-width:       560px;
    width:           100%;
    padding:         0 24px;
    box-sizing:      border-box;
    text-align:      center;
}

/* Plain text privacy notice; overlay is already dark, no balloon chrome. */
.mm-mc-start-overlay__privacy {
    margin:      0;
    color:       #e8e8f0;
    font-size:   15px;
    line-height: 1.5;
}

/* ============================================================
   Start-gate button — mirrors central's .mm-start-btn (dark mode)
   ============================================================ */
.mm-mc-start-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-mc-start-pulse 1.6s ease-in-out infinite;
}
.mm-mc-start-btn:hover { color: #6aeeaa; }
.mm-mc-start-btn:focus { outline: none; }

.mm-mc-start-btn:active,
.mm-mc-start-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-mc-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-mc-start-btn.is-sparkling::after {
    content:         '';
    position:        absolute;
    inset:           -4px;
    border-radius:   14px;
    pointer-events:  none;
    animation:       mm-mc-start-sparkle 0.7s ease-out forwards;
}
@keyframes mm-mc-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-mc-start-btn.is-gone {
    opacity:        0;
    pointer-events: none;
}

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

/* ----------------------------------------------------------------------- */
/* GDPR — privacy-notice balloon + Clear-data button on the marker modal   */
/* ----------------------------------------------------------------------- */

/* In the marker-side Finish modal the notice is plain white text — no
   balloon. Matches the style applied in the central screen's
   `mm-finish-block-content`. */
.krskrt-privacy-balloon--done {
    margin:        16px auto 0;
    padding:       0 16px;
    max-width:     420px;
    color:         #fff;
    background:    none;
    border-radius: 0;
    font-size:     0.95em;
    line-height:   1.4;
    text-align:    center;
}
.krskrt-privacy-balloon--done::after { content: none; }

.mm-mc-done-btn--clear {
    background: transparent;
    color: #f87171;
    border-color: #f87171;
}
.mm-mc-done-btn--clear:hover {
    background: rgba(248, 113, 113, 0.08);
    color: #fca5a5;
    border-color: #fca5a5;
}

/* -------------------------------------------------------------------------
 * Binary-mode finish confirmation modal (Phase 3) — marker side mirror of
 * the Central overlay. See central-screen.css for the parent style notes.
 * ------------------------------------------------------------------------- */
.mm-mc-finish-confirm[hidden] { display: none; }
.mm-mc-finish-confirm {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0, 0.6);
    z-index: 100000;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity 160ms ease-out;
}
.mm-mc-finish-confirm.is-open {
    opacity: 1; pointer-events: auto;
}
.mm-mc-finish-confirm__panel {
    background: #fff;
    color: #111;
    max-width: 480px; width: 100%;
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 16px 40px rgba(0,0,0, 0.4);
}
.mm-mc-finish-confirm__text {
    font-size: 1rem;
    line-height: 1.45;
    margin: 0 0 20px;
    word-break: break-word;
}
.mm-mc-finish-confirm__actions {
    display: flex; gap: 10px; justify-content: flex-end;
    flex-wrap: wrap;
}
.mm-mc-finish-confirm__btn {
    appearance: none;
    border: 2px solid currentColor;
    border-radius: 8px;
    padding: 10px 18px;
    font: inherit; font-weight: 600;
    cursor: pointer;
    background: transparent;
    min-height: 44px;
}
.mm-mc-finish-confirm__btn--cancel { color: #555; border-color: #ccc; }
.mm-mc-finish-confirm__btn--cancel:active { background: #f4f4f4; }
.mm-mc-finish-confirm__btn--ok {
    color: #fff; background: #f87171; border-color: #f87171;
}
.mm-mc-finish-confirm__btn--ok:active { background: #ef4444; border-color: #ef4444; }

/* -------------------------------------------------------------------------
 * Inline Report download pill — rendered as a regular field in the
 * marker's part flow, mirroring the position of the `jet-forms/krskrt-
 * report` block on the central form. Reuses the segmented-pill styling
 * from `.mm-mc-done-downloads` / `.mm-mc-done-dl`.
 * ------------------------------------------------------------------------- */
.mm-mc-field--report .mm-mc-report-inline {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             8px;
    padding:         8px 0;
}
.mm-mc-field--report .mm-mc-report-inline__label {
    font-family:     "Lekton", sans-serif;
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    color:           #94a3b8;
    line-height:     1;
}
.mm-mc-field--report .mm-mc-done-downloads {
    margin:          0;
    max-width:       320px;
}

/* =========================================================================
   Interactive image field
   (card styling matches .mm-mc-video-field / .krskrt-video-field pattern)
   ========================================================================= */
/* Standalone wrapper — does NOT use mm-mc-field so the white box doesn't enclose the action bar */
.mm-mc-image-field {
    display:       flex;
    flex-direction: column;
    gap:           0;
    margin-bottom: 12px;        /* match mm-mc-field spacing */
}
/* Greyed state (no mm-mc-field base to inherit from) */
.mm-mc-image-field.mm-mc-field--greyed {
    opacity:        0.2;
    pointer-events: none;
}

.krskrt-image-field-card {
    position:      relative;
    width:         100%;
    border:        0;
    border-radius: 10px;  /* fully rounded — the light action bar floats below */
    overflow:      hidden;
    background:    #fff;
    line-height:   0;
}

.krskrt-image-field-card__img {
    display:    block;
    width:      100%;
    height:     auto;
    transition: filter 0.15s;
}
.krskrt-image-field-card:active .krskrt-image-field-card__img {
    filter: brightness(0.78);
}

/* Magnify hint circle — matches .mm-mc-video-field .krskrt-video-play-icon */
.krskrt-image-field-card__hint {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    width:           72px;
    height:          72px;
    border-radius:   50%;
    background:      rgba(0, 0, 0, 0.55);
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;
    transition:      background 0.15s;
}
/* Phosphor codepoint — single weight, font loaded via @font-face above */
.krskrt-image-field-card__hint::before {
    content:     "\e310";
    font-family: "Phosphor";
    font-size:   28px;
    line-height: 1;
}
/* Green = image is currently showing on the central screen */
.krskrt-image-field-card__hint.is-active {
    background: rgba(34, 197, 94, 0.80);
}

/* Action bar — light "explicit buttons" scheme, matching .mm-mc-viz-buttonbar:
   discrete light buttons separated by a gap (not a dark segmented strip). */
.krskrt-image-field-actions {
    display:    flex;
    gap:        8px;
    margin-top: 8px;
    background: transparent;
    border:     0;
}

.krskrt-image-action-btn {
    flex:            1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         10px 12px;
    min-height:      44px;
    border:          1px solid #e0e0e0;
    border-radius:   8px;
    background:      #f8f8f8;
    color:           #555;
    font-family:     "Lekton", sans-serif;
    font-size:       13px;
    font-weight:     700;
    line-height:     1.2;
    letter-spacing:  0.4px;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background 0.15s, border-color 0.15s, color 0.15s;
}
.krskrt-image-action-btn .ph { font-size: 16px; color: inherit; }
.krskrt-image-action-btn:hover {
    background:   #ede9fe;
    border-color: #6366f1;
    color:        #312e81;
}
.krskrt-image-action-btn:active { background: #ddd6fe; }
.krskrt-image-action-btn:disabled {
    opacity:        0.4;
    pointer-events: none;
}

/* Chevron prev/next pair — a button group (rounded outer, shared seam),
   exactly like the viz stepper group. Sits at the bottom-left. */
.krskrt-image-nav-group {
    display:       flex;
    flex:          0 0 auto;
    border:        1px solid #e0e0e0;
    border-radius: 8px;
    background:    #f8f8f8;
    overflow:      hidden;
}
.krskrt-image-action-btn.krskrt-image-nav-btn {
    flex:          0 0 auto;
    width:         46px;
    padding:       10px 0;
    border:        0;
    border-radius: 0;
    background:    transparent;
}
.krskrt-image-nav-btn + .krskrt-image-nav-btn { border-left: 1px solid #e0e0e0; }
.krskrt-image-nav-btn:hover    { background: #ede9fe; color: #312e81; }
.krskrt-image-nav-btn:disabled { opacity: 0.4; pointer-events: none; }

/* Slide counter ("1 / 3") beside the chevrons */
.krskrt-image-nav-count {
    flex:        0 0 auto;
    display:     inline-flex;
    align-items: center;
    font-family: "Lekton", sans-serif;
    font-size:   13px;
    font-weight: 700;
    color:       #888;
    padding:     0 2px;
    white-space: nowrap;
}

/* =========================================================================
 * Marker masonry modal — TRULY full-screen view of a data-viz masonry block.
 * The modal IS the canvas (no extra padded container). The floating scroll
 * group reuses the bottom-bar's mm-mc-bottom-btn / mm-mc-scroll-btn styling.
 * Item clicks broadcast viz_item_open so the zoom modal mirrors on both
 * screens.
 * ========================================================================= */
.mm-mc-viz-expand {
    width:           36px;
    height:          36px;
    margin-left:     8px;
    border:          1px solid #e0e0e0;
    background:      #f8f8f8;
    color:           #555;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    flex-shrink:     0;
    padding:         0;
    transition:      background 0.15s, border-color 0.15s, color 0.15s;
}
.mm-mc-viz-expand:hover {
    background:    #ede9fe;
    border-color:  #6366f1;
    color:         #312e81;
}
.mm-mc-viz-expand .ph,
.mm-mc-viz-expand svg { display: inline-block; pointer-events: none; font-size: 18px; }

/* The viz tile button bar: stepper-group (− +) | scroll-group (↑↑ ↓↓) | expand
 * Each sub-group is itself a mm-mc-btn-group so adjacent buttons read as
 * one unit (rounded outer corners, shared internal seam). */
.mm-mc-viz-buttonbar {
    gap: 8px;
}

/* Inline preview surface for non-masonry viz on the marker. Mirrors the
 * central block's renderers (wordcloud, bar-h, bar-v) at a smaller size,
 * with image-field-style tap-to-zoom that targets the central modal. */
.mm-mc-viz-stage {
    margin: 0 0 8px;
}
.mm-mc-viz-preview {
    position:        relative;
    height:          240px;
    border:          1px solid #dedede;
    border-radius:   6px 6px 0 0;
    background:      #fff;
    overflow:        hidden;
    cursor:          pointer;
    -webkit-tap-highlight-color: transparent;
}
.mm-mc-viz-preview > .kf-viz-canvas {
    width:      100%;
    height:     100%;
    min-height: 0;
}
.mm-mc-viz-preview-hint {
    position:        absolute;
    bottom:          6px;
    right:           6px;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      rgba(0, 0, 0, 0.45);
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;
    font-size:       16px;
    opacity:         0.85;
}
.mm-mc-viz-preview-hint .ph { font-size: 16px; line-height: 1; }

/* When the central modal is open the hint reads "tap to zoom" instead of
 * "tap to open" — swap the corners-out for a magnifying-glass-plus glyph
 * via class state. */
.mm-mc-viz-preview.is-open .mm-mc-viz-preview-hint .ph::before {
    content: "\e310"; /* magnifying-glass-plus */
}

/* Repeater "rows" (table) preview — the marker SPA doesn't load the forms
 * data-viz stylesheet, so mirror the .kf-viz-rows-* rules here (compact). */
.mm-mc-viz-preview.kf-viz--rows > .kf-viz-canvas {
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding:    6px;
}
.mm-mc-viz-preview .kf-viz-rows-grid {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.mm-mc-viz-preview .kf-viz-rows-head {
    display:               grid;
    grid-template-columns: repeat(var(--kf-cols, 1), minmax(0, 1fr));
    gap:                   0 8px;
    padding:               0 8px;
}
.mm-mc-viz-preview .kf-viz-rows-th {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color:          #00374a;
    min-width:      0;
    word-break:     break-word;
}
.mm-mc-viz-preview .kf-viz-row {
    display:               grid;
    grid-template-columns: repeat(var(--kf-cols, 1), minmax(0, 1fr));
    gap:                   0 8px;
    align-items:           start;
    background:            #fff;
    border:                1px solid #dedede;   /* border-color set inline */
    border-radius:         5px;
    padding:               6px 8px;
}
.mm-mc-viz-preview .kf-viz-rows-cell {
    position:    relative;
    color:       #00374a;
    font-size:   12px;
    line-height: 1.3;
    min-width:   0;
    max-height:  calc(1.3em * var(--kf-clamp, 4));
    overflow:    hidden;
    word-break:  break-word;
    white-space: pre-wrap;
}
.mm-mc-viz-preview .kf-viz-item-ellipsis { font-weight: 700; margin-left: 1px; pointer-events: none; }

/* Action bar — dark strip below the preview, mirrors
 * .krskrt-image-field-actions on the image field. Hidden until the
 * modal opens; close-zoom is hidden until the user has tapped to zoom. */
.mm-mc-viz-actions {
    display:      none;
    border:       1px solid #dedede;
    border-top:   0;
    border-radius: 0 0 6px 6px;
    overflow:     hidden;
    background:   #00374a;
}
.mm-mc-viz-actions.is-open { display: flex; }
.mm-mc-viz-action-btn {
    flex:           1 1 0;
    border:         0;
    background:     transparent;
    color:          #fff;
    padding:        10px 12px;
    font-size:      13px;
    font-weight:    700;
    line-height:    1.2;
    letter-spacing: 0.4px;
    cursor:         pointer;
    white-space:    nowrap;
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            6px;
}
.mm-mc-viz-action-btn:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.15); }
.mm-mc-viz-action-btn:hover  { background: rgba(255,255,255,0.08); }
.mm-mc-viz-action-btn:active { background: rgba(255,255,255,0.18); }
.mm-mc-viz-action-btn .ph    { font-size: 16px; }
.mm-mc-viz-buttonbar > .mm-mc-btn-group {
    display:        flex;
    border:         1px solid #e0e0e0;
    border-radius:  8px;
    background:     #f8f8f8;
    overflow:       hidden;
}
.mm-mc-viz-buttonbar > .mm-mc-btn-group > .mm-mc-stepper-btn {
    border:         0;
    border-radius:  0;
    background:     transparent;
}
.mm-mc-viz-buttonbar > .mm-mc-btn-group > .mm-mc-stepper-btn + .mm-mc-stepper-btn {
    border-left:    1px solid #e0e0e0;
}
.mm-mc-viz-buttonbar > .mm-mc-btn-group > .mm-mc-stepper-btn:hover {
    background: #ede9fe;
}
.mm-mc-viz-buttonbar .mm-mc-stepper-btn .ph { font-size: 16px; }

.mm-viz-modal {
    position:        fixed;
    inset:           0;
    z-index:         100002;
    background:      #fff;
    display:         flex;
    flex-direction:  column;
    padding:         0;
    margin:          0;
    box-sizing:      border-box;
}
.mm-viz-close {
    position:        absolute;
    top:             12px;
    right:           12px;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      rgba(0, 55, 74, 0.28);
    color:           #fff;
    border:          0;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         3;
    padding:         0;
}
.mm-viz-close:hover { background: rgba(0, 55, 74, 0.42); }
.mm-viz-close .ph,
.mm-viz-close svg   { display: inline-block; pointer-events: none; font-size: 22px; }

.mm-viz-title {
    flex:            0 0 auto;
    text-align:      center;
    padding:         18px 56px 8px;
    color:           #00374a;
    font-size:       22px;
    font-weight:     700;
    line-height:     1.25;
    word-break:      break-word;
}
.mm-viz-canvas {
    flex:            1 1 auto;
    width:           100%;
    background:      #fff;
    padding:         12px 12px 96px;
    overflow-y:      auto;
    overflow-x:      hidden;
    box-sizing:      border-box;
}
.mm-viz-grid {
    display:         grid;
    grid-template-columns: repeat(var(--mm-viz-cols, 2), minmax(0, 1fr));
    gap:             0 8px;
    align-items:     start;
}
.mm-viz-col {
    display:         flex;
    flex-direction:  column;
    min-width:       0;
}
.mm-viz-item {
    position:               relative;
    cursor:                 pointer;
    background:             #fff;
    border:                 1px solid #dedede;
    border-radius:          5px;
    padding:                8px 10px;
    margin:                 0 0 8px;
    color:                  #00374a;
    font-size:              14px;
    line-height:            1.35;
    /* Hard-clip so no text bleeds past the clamp; native ellipsis is
     * suppressed and replaced by a coloured ::after via .is-clamped. */
    max-height:             calc(1.35em * var(--mm-viz-clamp, 4));
    overflow:               hidden;
    word-break:             break-word;
}
/* Inline ellipsis appended into the truncated text by JS — sits flush
 * against the last word and inherits the item's border colour from the
 * inline style attribute. */
.mm-viz-item-ellipsis {
    font-weight:    700;
    margin-left:    1px;
    pointer-events: none;
}
.mm-viz-item.is-new {
    animation: mmVizFadeIn 0.4s ease-out both, mmVizPulse 1.6s ease-out 0.4s 1;
}
@keyframes mmVizFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mmVizPulse {
    0%   { box-shadow: 0 0 0 0   var(--mm-viz-rgba, rgba(0,55,74,0.45)); }
    60%  { box-shadow: 0 0 0 6px rgba(0,0,0,0); }
    100% { box-shadow: 0 0 0 0   rgba(0,0,0,0); }
}

/* Floating scroll group — uses the same mm-mc-bottom-btn / mm-mc-scroll-btn
 * styling as the bottom bar so the buttons match. */
.mm-viz-scroll-group {
    position: fixed;
    bottom:   16px;
    left:     16px;
    z-index:  100003;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    border-radius: 14px;
    overflow: hidden;
}
.mm-viz-scroll-group .mm-mc-bottom-btn { width: 56px; height: 48px; }
.mm-viz-scroll-group .mm-mc-bottom-btn .ph,
.mm-viz-scroll-group .mm-mc-bottom-btn svg { display: inline-block; pointer-events: none; font-size: 22px; }

/* =========================================================================
 * Marker single-item zoom modal — mirror of the central zoom.
 * ========================================================================= */
.mm-viz-zoom {
    position:        fixed;
    inset:           0;
    z-index:         100004;
    background:      rgba(15, 15, 26, 0.94);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px;
    box-sizing:      border-box;
}
.mm-viz-zoom-content {
    max-width:       min(900px, 88vw);
    max-height:      80vh;
    overflow:        auto;
    background:      #fff;
    color:           #00374a;
    border:          4px solid var(--mm-zoom-border, #00374a);
    border-radius:   8px;
    padding:         28px 32px;
    font-size:       24px;
    line-height:     1.4;
    white-space:     pre-wrap;
    word-break:      break-word;
}
.mm-viz-zoom-prev,
.mm-viz-zoom-next,
.mm-viz-zoom-close {
    position:        absolute;
    width:           52px;
    height:          52px;
    border-radius:   50%;
    background:      #fff;
    color:           #00374a;
    border:          1px solid #dedede;
    cursor:          pointer;
    padding:         0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 2px 8px rgba(0, 0, 0, 0.18);
}
.mm-viz-zoom-prev .ph, .mm-viz-zoom-next .ph, .mm-viz-zoom-close .ph,
.mm-viz-zoom-prev svg, .mm-viz-zoom-next svg, .mm-viz-zoom-close svg {
    display:        inline-block;
    pointer-events: none;
    font-size:      24px;
}
.mm-viz-zoom-prev:hover,
.mm-viz-zoom-next:hover,
.mm-viz-zoom-close:hover { background: #f4f4f4; }
.mm-viz-zoom-prev:disabled,
.mm-viz-zoom-next:disabled { background: #fff; }
.mm-viz-zoom-prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.mm-viz-zoom-next  { right: 16px; top: 50%; transform: translateY(-50%); }
.mm-viz-zoom-close { top: 16px; right: 16px; }
.mm-viz-zoom-prev[disabled],
.mm-viz-zoom-next[disabled] { opacity: 0.35; cursor: default; }

/* Per-row controls (rows table). The marker is a REMOTE CONTROL — the row
 * content renders on the central screen, so this overlay only shows a hint
 * plus the prev/next/close buttons (.mm-viz-zoom-*). */
.mm-viz-row-remote {
    max-width:      min(420px, 80vw);
    background:     #fff;
    color:          #00374a;
    border-radius:  12px;
    padding:        28px 32px;
    text-align:     center;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            12px;
}
.mm-viz-row-remote-icon { font-size: 32px; line-height: 1; opacity: 0.7; }
.mm-viz-row-remote-icon .ph,
.mm-viz-row-remote-icon svg { font-size: 32px; }
.mm-viz-row-remote-text { font-size: 15px; line-height: 1.45; }

/* Marker stub shown when expanding a non-masonry viz (wordcloud / bar
 * charts). The real fullscreen viz lives on the central screen; this is
 * just a confirmation surface with a close button. */
.mm-viz-stub {
    position:        fixed;
    inset:           0;
    z-index:         100002;
    background:      #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px;
    box-sizing:      border-box;
}
.mm-viz-stub-close {
    position:        absolute;
    top:             12px;
    right:           12px;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      rgba(0, 55, 74, 0.28);
    color:           #fff;
    border:          0;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
}
.mm-viz-stub-close:hover { background: rgba(0, 55, 74, 0.42); }
.mm-viz-stub-close svg   { display: block; pointer-events: none; }
.mm-viz-stub-inner {
    text-align:      center;
    max-width:       320px;
    color:           #00374a;
}
.mm-viz-stub-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           96px;
    height:          96px;
    border-radius:   50%;
    background:      rgba(0, 55, 74, 0.08);
    color:           #00374a;
    margin:          0 auto 16px;
}
.mm-viz-stub-icon svg { width: 56px; height: 56px; }
.mm-viz-stub-text {
    font-size:   18px;
    font-weight: 600;
    line-height: 1.35;
}

/* ============================================================
   Reconnect modal — non-blocking overlay shown while the WS is
   disconnected. Auto-closes on successful reconnect. Sits ABOVE
   the start-gate (z 100001) so a disconnect at session-start
   still surfaces it.
   ============================================================ */
.mm-mc-reconnect-modal {
    position:        fixed;
    inset:           0;
    z-index:         100002;
    display:         none;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;
}
.mm-mc-reconnect-modal.is-visible {
    display:        flex;
    pointer-events: auto;
}

.mm-mc-reconnect-backdrop {
    position:       absolute;
    inset:          0;
    background:     rgba(0, 0, 0, 0.55);
    /* Non-blocking: the backdrop visually dims the form but doesn't
       capture clicks. The panel itself is the only interactive area. */
    pointer-events: none;
}

.mm-mc-reconnect-panel {
    position:       relative;
    pointer-events: auto;
    background:     #1a1a2e;
    color:          #e8e8f0;
    border-radius:  14px;
    padding:        32px 32px 24px;
    max-width:      360px;
    width:          calc(100% - 32px);
    text-align:     center;
    box-shadow:     0 24px 80px rgba(0, 0, 0, 0.5);
}

.mm-mc-reconnect-close {
    position:        absolute;
    top:             8px;
    right:           8px;
    width:           36px;
    height:          36px;
    border-radius:   50%;
    border:          0;
    background:      transparent;
    color:           #c8c8d8;
    font-size:       18px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.12s ease, color 0.12s ease;
}
.mm-mc-reconnect-close:hover,
.mm-mc-reconnect-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color:      #ffffff;
    outline:    none;
}

@keyframes mm-mc-reconnect-pulse {
    0%, 100% {
        color:      #4ade80;
        transform:  scale(1);
        text-shadow: 0 0 0 rgba(74, 222, 128, 0);
    }
    50% {
        color:      #6aeeaa;
        transform:  scale(1.18);
        text-shadow: 0 0 14px rgba(74, 222, 128, 0.55);
    }
}
.mm-mc-reconnect-icon {
    font-family: "Phosphor";
    font-style:  normal;
    display:     inline-block;
    font-size:   56px;
    line-height: 1;
    margin-bottom: 14px;
    color:       #4ade80;
    animation:   mm-mc-reconnect-pulse 1.2s ease-in-out infinite;
}
.mm-mc-reconnect-modal.is-failing .mm-mc-reconnect-icon {
    color:     #f87171;
    animation: none;
}

.mm-mc-reconnect-title {
    margin:      0 0 6px;
    font-size:   18px;
    font-weight: 700;
    color:       #ffffff;
}
.mm-mc-reconnect-sub {
    margin:      0;
    font-size:   14px;
    line-height: 1.45;
    color:       #c8c8d8;
}

.mm-mc-reconnect-actions {
    display:         flex;
    justify-content: center;
    gap:             10px;
    margin-top:      18px;
}
.mm-mc-reconnect-btn {
    appearance:    none;
    border:        0;
    padding:       10px 16px;
    border-radius: 8px;
    background:    #00374a;
    color:         #4ade80;
    font:          inherit;
    font-weight:   700;
    cursor:        pointer;
    transition:    background 0.12s ease, color 0.12s ease;
}
.mm-mc-reconnect-btn:hover {
    background: #00475e;
    color:      #6aeeaa;
}
.mm-mc-reconnect-btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    color:      #e8e8f0;
}
.mm-mc-reconnect-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color:      #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .mm-mc-reconnect-icon { animation: none; }
}

/* ── AI cloud marker mirror ─────────────────────────────────────────
 * Per-tag interactivity inside the marker preview tile. The marker
 * never builds the mindmap rings (variants/answers stay on Central);
 * it only mirrors which phrase is in focus so the user sees their
 * tap reflected.
 */
.mm-mc-viz-preview.kf-viz--aicloud .kf-viz-tag {
    /* Render the tag as a pill with explicit padding so the whole
     * coloured shape is tappable, not just the text glyphs. Bare
     * inline spans had a sub-character hit-box on phones — easy to
     * miss. */
    display:        inline-block;
    padding:        4px 10px;
    margin:         2px;
    border-radius:  4px;
    cursor:         pointer;
    transition:     opacity 200ms ease, filter 200ms ease, transform 200ms ease, background-color 120ms ease;
}
.mm-mc-viz-preview.kf-viz--aicloud .kf-viz-tag:active {
    background:     rgba(0, 55, 74, 0.08);
}

/* Disabled state for the marker prev/next + scroll buttons.
 * Without this rule, the browser's default disabled styling is
 * almost invisible against the existing pale stepper background,
 * making the buttons look identical whether actionable or not. */
.mm-mc-stepper-btn:disabled,
.mm-mc-stepper-btn[disabled] {
    opacity:        0.35;
    cursor:         not-allowed;
    pointer-events: none;
}
.mm-mc-stepper-btn:disabled:hover,
.mm-mc-stepper-btn[disabled]:hover {
    background:     #f8f8f8;
    border-color:   #e0e0e0;
    color:          #555;
}
.mm-mc-viz-preview.kf-viz--aicloud .kf-viz-canvas.is-focusing .kf-viz-tag.is-blurred {
    /* Visually dimmed but STILL TAPPABLE so the marker user can
     * switch focus to another phrase. Earlier `pointer-events: none`
     * here was the silent killer: after focusing one phrase, every
     * other phrase became unclickable. */
    opacity:        0.18;
    filter:         blur(2px);
    transform:      scale(0.85);
}
.mm-mc-viz-preview.kf-viz--aicloud .kf-viz-canvas.is-focusing .kf-viz-tag.is-focus {
    transform:    scale(1.1);
    text-shadow:  0 0 10px rgba(255, 255, 255, 0.9);
    z-index:      2;
}