/* ── Autoplay editor — LIGHT Tapium identity (tokens: chrome/base.css :root) ─
   White surface like .bet-sheet / .wf-modal; magenta --accent / --hover-fill for
   selection & primary; green --bet-fill for placed bets (same as the field). No
   dark panel, no invented colours. */

/* strategy row in the ap-sheet (the sheet itself is white) */
.ap-strategy-row {
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin: 0 0 9px; padding: 9px 14px 9px 9px; min-height: 44px;
    background: var(--surface-btn); border: none; border-radius: var(--r-field); color: var(--ink); cursor: pointer;
    font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent;
    transition: background 120ms var(--ease), transform 80ms var(--ease);
}
.ap-strategy-row:active { transform: scale(0.98); background: var(--surface-press); }
/* Figure glyph plate — a bit darker than the row, slightly rounded corners. */
.ap-strategy-ico {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: #E2E2E6; color: #B4B4BC;
}
.ap-strategy-ico .ap-ico { width: 18px; height: 18px; }
/* Name is left-aligned on the sheet-content edge (same left as the −/+ counter). */
.ap-strategy-name { flex: 1; text-align: left; font-size: 14px; font-weight: 600; letter-spacing: normal; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-strategy-caret { color: var(--placeholder); font-size: 17px; }
/* running → engaged dark-magenta (--hover-ink) so STOP reads distinct from START */
#ap-start.ap-running { background: var(--hover-ink); }

/* The editor card, scrim, sizing and open/close animation all come from the
   framework .wf-modal-wrap/.wf-modal now; the editor only fills .wf-body with
   its screens. The body is a flex column so .ape-screen fills it (needed for the
   fixed-height CELLS screen). */
.ap-editor .wf-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; }
/* [hidden] must beat the flex display rules below (screens, rulebar, mode toggle) */
.ap-editor [hidden] { display: none !important; }
/* Header = the reference .wf-head / .wf-back / .wf-pf-help / .wf-close-out (the
   markup uses those classes directly — no .ape-* header styles exist anymore).
   Shared by all editor screens (lib/edit/cells/repeat). The drill-down sub-screens
   (cells/repeat) are back-only per the reference: no header cross there. */
.ap-editor .wf-modal[data-screen="cells"] .wf-close-out,
.ap-editor .wf-modal[data-screen="repeat"] .wf-close-out,
.ap-editor .wf-modal[data-screen="preview"] .wf-close-out { display: none; }

/* "How strategies work" — тело #ap-editor-help-modal собирается общими блоками
   справки (.wf-pf-explain + Collapse), собственных стилей ему не нужно. */
.ape-screen {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    /* the card no longer fills the screen → content scrolls inside the body */
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
}
/* Drill-down EDIT STRATEGY sub-screens (name list, cells, repeat) share padding. */
.ape-editlist, .ape-cells-screen, .ape-repeat-screen { padding: 10px 12px 12px; }

/* EDIT STRATEGY list: stacked field label + name + navigator rows, SAVE pinned bottom. */
.ape-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
/* Navigator plates = the PF SHA256/SEED info-plate look (.wf-pfp-sha): grey
   var(--surface) plate, small dim uppercase label left (.wf-pfp-hxlbl), dark 15px value
   right (.wf-pfp-hxval) — NOT an input look (inputs are taller + focus caret). */
.ape-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 52px; padding: 0 10px 0 14px; border: none; border-radius: var(--r-field); cursor: pointer;
    background: var(--surface); color: var(--ink);
    transition: background .12s var(--ease);
}
.ape-nav:active { background: #ECECEE; }
.ape-nav-l {
    flex: none; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 0.01em; text-transform: uppercase; color: var(--label);
}
.ape-nav-r { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ape-nav-prev {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 15px/20px 'Inter', sans-serif; letter-spacing: -0.01em; color: var(--ink);
}
.ape-nav-chev { width: 18px; height: 18px; color: var(--label); flex: none; }

/* BET CELLS PRESET is a FIXED-height panel: no vertical scroll of the modal — only
   the field pans horizontally inside .ape-gridwrap (grid fits vertically). */
.ape-cells-screen.ape-fixed { overflow: hidden; touch-action: none; }
/* The betting field is the whole POINT of this screen, so it gets priority over the
   backdrop's usual 20px breathing room (.wf-modal-backdrop padding, further up this
   file): shrink the backdrop's own vertical padding down to 8px whenever it's
   showing the cells/preview screen, and hand that space straight to the panel/grid
   instead of leaving it as empty margin above and below the modal. */
.wf-modal-backdrop:has(> .wf-modal-wrap > .wf-modal[data-screen="cells"]),
.wf-modal-backdrop:has(> .wf-modal-wrap > .wf-modal[data-screen="preview"]) {
    padding-top: 8px; padding-bottom: 8px;
}
.wf-modal-backdrop:has(> .wf-modal-wrap > .wf-modal[data-screen="cells"]) .wf-modal-wrap,
.wf-modal-backdrop:has(> .wf-modal-wrap > .wf-modal[data-screen="preview"]) .wf-modal-wrap {
    max-height: calc(100dvh - 16px);
}
/* BET CELLS PRESET height is a starting ceiling only — near-full-screen (viewport
   minus the 8px backdrop padding). AutoplayEditorModal._sizeCellsPanel() then
   shrinks this DOWN via an inline style to exactly what the grid's rowCells need
   (chrome + rows·BASE_CELL, floored at chrome + rows·MIN_FIT_CELL so every row is
   at least finger-comfortable), so a big desktop window doesn't stretch the panel
   (and inflate the cells toward MAX_CELL) further than the content needs. A fixed
   CSS fraction (the old 50dvh desktop branch) can't do this: its fixed per-screen
   chrome (header/total/save) eats a bigger share of a smaller box, so the SAME
   50dvh that fits fine on a huge monitor starves the grid on a merely wide-but-
   average window or a wide-but-short embed (e.g. the crowdfunding page's iframe,
   706px tall live) — verified live in both directions (canvas 178px at 50dvh/706px
   tall vs. only 7 of 11 rows shown at 50dvh/1000px tall despite empty space below
   TOTAL/SAVE). JS reading actual rowCells replaces the percentage guess. */
.ap-editor .wf-modal[data-screen="cells"],
.ap-editor .wf-modal[data-screen="preview"] { height: calc(100dvh - 16px); }
/* The field box fills ALL the room between the label and TOTAL/SAVE (no cap), and
   bleeds edge-to-edge: negative margins cancel the screen's 12px side padding so the
   canvas spans the full modal width. Cells fit by height inside (EditorGrid). */
.ape-cells-screen .ape-gridwrap {
    flex: 1 1 auto; height: auto; max-height: none; min-height: 180px;
    margin: 0 -12px; border-radius: 0; border-left: none; border-right: none;
}
.ape-fieldnote { margin-bottom: 8px; }
/* TOTAL: N BET(S) — centered, heading font Black, title ink. */
.ape-total {
    flex: none; text-align: center; margin: 10px 2px 2px;
    font-family: var(--ff-head); font-weight: 900; font-size: 14px;
    letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink);
}
/* REPEAT: keep the cadence at the top, SAVE anchored at the bottom of the panel. */
.ape-repeat-screen .ape-bottom { margin-top: auto; }

/* editor screen */
.ape-namerow { display: flex; gap: 8px; flex: none; margin-bottom: 0; }
/* Standard modal text input (the settings nickname field .wf-nick): 52px tall,
   grey #F4F4F6, radius 14, Inter 16/700 (≥16px also kills the iOS focus zoom). */
.ape-name {
    flex: 1; min-width: 0; height: 52px; box-sizing: border-box; padding: 0 14px;
    border-radius: var(--r-field); border: none; background: #F4F4F6; color: var(--ink);
    font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700;
    letter-spacing: -0.01em; caret-color: var(--hover-fill);
}
.ape-name::placeholder { color: var(--placeholder); }
/* The grid box flex-fills the room left inside the panel (after the form, cadence,
   per-round note and action buttons) and never forces the window taller than the
   screen: the grid pans/zooms INSIDE this fixed box. min-height keeps it tappable on
   short screens; max-height caps it so the coefficient grid stays inside the card. */
.ape-gridwrap { position: relative; flex: 1 1 auto; min-height: 190px; max-height: 52vh; border-radius: var(--r-field); overflow: hidden; background: var(--bg); border: 1px solid var(--hairline); }
.ape-grid { display: block; width: 100%; height: 100%; touch-action: none; }
.ape-chip {
    min-height: 34px; padding: 0 12px; border-radius: var(--r-copy); border: none;
    background: var(--surface-btn); color: var(--ink); font-weight: 600; font-size: 12px; cursor: pointer;
    transition: background 120ms var(--ease);
}
.ape-chip:active { background: var(--surface-press); }

/* v2.1 repeat-cadence control — segmented toggle + big stepper (mobile-first) */
.ape-cadence { flex: none; display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; }
.ape-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--label-2); }
.ape-seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-btn); border-radius: 16px; }
.ape-seg-btn {
    flex: 1; min-height: 48px; border: none; border-radius: var(--r-chip); background: transparent; color: var(--label-3);
    font-weight: 700; font-size: 13px; cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease), transform 100ms var(--ease);
}
.ape-seg-btn.active { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.ape-seg-btn:active { transform: scale(0.98); }
.ape-stepper { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 0 2px; }
.ape-step-btn {
    flex: none; width: 52px; height: 52px; border: none; border-radius: 16px; background: var(--surface-btn); color: var(--ink);
    font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .12s var(--ease), transform 100ms var(--ease);
}
.ape-step-btn:active { background: #E3E3E6; transform: scale(0.95); }
.ape-step-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ape-step-val { min-width: 44px; text-align: center; font-family: var(--ff-head); font-weight: 900; font-size: 26px; color: var(--ink); }
.ape-step-unit { color: var(--label-3); font-size: 12px; font-weight: 700; text-transform: uppercase; }
/* Plain-language mode hint — centered block with breathing room above/below. */
.ape-cadence-hint {
    font-size: 11px; line-height: 1.4; color: var(--label-3);
    text-align: center; align-self: center; max-width: 88%; margin: 14px auto 16px;
}

/* shared inline-SVG icons (autoplay/icons.js) — inherit currentColor */
.ap-ico { width: 20px; height: 20px; flex: none; pointer-events: none; }
.ap-op { display: inline-flex; align-items: center; justify-content: center; }
.ap-lib-new, .ap-lib-import { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }


/* bottom action bar */
.ape-bottom { flex: none; display: flex; gap: 8px; padding: 10px 0 calc(2px + env(safe-area-inset-bottom)); }
.ape-btn { min-height: 48px; border: none; border-radius: 24px; font-family: var(--ff-head); font-weight: 900; font-size: 14px; letter-spacing: 0.01em; text-transform: uppercase; cursor: pointer; transition: transform 100ms var(--ease), filter 120ms var(--ease); }
.ape-btn:active { transform: scale(0.97); }
/* Run — the main call-to-action: large, full-width primary button. */
.ape-run { flex: 1; background: var(--hover-fill); color: #FFFFFF; }
.ape-run:active { filter: brightness(0.95); }
.ape-btn:disabled { opacity: 0.4; cursor: not-allowed; }


/* shared transient toast (single grey row inside #notif-stack) — the grey slot
   sits directly under #conn-pill. Grey = "same grey as the coefficients"
   (#4D4D4D), 15%-alpha glass, Inter Semibold 14. */
.wf-toast-host {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    max-width: 100%;
    pointer-events: none;
}
.wf-toast {
    /* width budget = the stack's 20px side gutters — no tighter cap. */
    max-width: 100%;
    /* radius = half the single-line box height (line-height 1.25em + 16px vertical
       padding). One line → perfect pill (side caps are full semicircles); two+
       lines → the SAME fixed radius, so the corners stay evenly rounded instead of
       ballooning into huge side arcs. */
    padding: 8px 16px; border-radius: calc((1.25em + 16px) / 2); box-sizing: border-box;
    background: var(--notice-bg, rgba(77, 77, 77, 0.15)); color: var(--notice-ink, #4D4D4D);
    backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    text-align: center; line-height: 1.25;
    opacity: 0; transform: translateY(-10px);
    transition: opacity .2s var(--ease), transform .26s var(--ease-spring);
}
/* the 2-line clamp lives on an INNER element: with clamp+padding on the pill
   itself, overflow:hidden clips at the padding box and a sliver of the third
   line bleeds into the bottom padding. Here overflow clips exactly at line 2. */
.wf-toast-text {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden;
    white-space: normal; overflow-wrap: anywhere;
    /* hard fallback for engines where line-clamp doesn't kick in: the span has
       NO padding, so this clips exactly on the line-2 boundary (no sliver). */
    max-height: calc(1.25em * 2);
}
.wf-toast.show { opacity: 1; transform: translateY(0); }
/* Never more than ONE grey row: if several pills coexist for any reason, only the
   latest (last in DOM) is visible — "show the last one". */
.wf-toast-host .wf-toast:not(:last-child) { display: none; }
/* desktop: cap both pills at a quarter of the screen; mobile keeps full
   width minus the stack's 20px gutters. */
@media (min-width: 768px) {
    .wf-toast, #conn-pill { max-width: 25vw; }
}

/* library screen */
.ap-lib { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 10px; }
.ap-lib-actions { display: flex; gap: 8px; flex: none; margin-bottom: 10px; }
.ap-lib-new { flex: 1; min-height: 48px; border: none; border-radius: 24px; background: var(--hover-fill); color: #FFFFFF; font-family: var(--ff-head); font-weight: 900; font-size: 14px; text-transform: uppercase; cursor: pointer; }
.ap-lib-new:active { transform: scale(0.98); }
.ap-lib-import { flex: none; padding: 0 16px; min-height: 48px; border: none; border-radius: 24px; background: var(--surface-btn); color: var(--ink); font-family: var(--ff-head); font-weight: 900; font-size: 14px; text-transform: uppercase; cursor: pointer; }
.ap-lib-import:active { background: var(--surface-press); }
/* icon strokes bold enough to sit next to 900-weight labels */
.ap-lib-new svg *, .ap-lib-import svg * { stroke-width: 2.8px; }
/* the list scrolls with the standard modal scrollbar (.wf-scroll is on the node) */
.ap-lib-list { display: flex; flex-direction: column; gap: 8px; }
/* every card is the SAME size in any state (normal / active / preset): fixed
   box-sizing + min-height so the pink ring or preset fill never changes bounds. */
.ap-card { position: relative; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px; border-radius: 16px; background: var(--bg); border: 1px solid var(--hairline); }
/* selected → 2px INNER brand-pink ring */
.ap-card.active { border-color: transparent; box-shadow: inset 0 0 0 2px var(--hover-fill); }
/* preset (built-in) → grey fill, no outline */
.ap-card.preset { background: var(--surface-btn); border-color: transparent; }
/* minimalist radio: outlined dot, filled brand-pink on the selected card */
.ap-card-radio {
    flex: none; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--placeholder); display: flex; align-items: center; justify-content: center;
}
.ap-card.active .ap-card-radio { border-color: var(--hover-fill); }
.ap-card.active .ap-card-radio::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--hover-fill);
}
.ap-card-main { flex: 1; min-width: 0; display: block; text-align: left; border: none; background: transparent; color: inherit; font: inherit; padding: 0; margin: 0; cursor: pointer; }
.ap-card-name {
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: var(--fs-value); line-height: 1.2; color: var(--ink);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere;
}
.ap-card-meta { font-size: 11px; color: var(--label-3); margin-top: 3px; }
.ap-card-ops { flex: none; display: flex; gap: 3px; }
.ap-op { width: 40px; height: 40px; border: none; border-radius: var(--r-copy); background: var(--surface-btn); color: var(--ink); font-size: 15px; cursor: pointer; transition: background 120ms var(--ease); }
.ap-op:active { background: var(--surface-press); }
.ap-op-del { color: var(--label-3); }
/* armed delete confirm (✓) — brand pink, not maroon */
.ap-op.arm { background: var(--hover-fill); color: #FFFFFF; }
.ap-op:disabled { opacity: 0.3; cursor: not-allowed; }

/* import pane (replaces the native prompt()) */
.ap-import-pane { display: flex; flex-direction: column; gap: 8px; flex: none; margin-bottom: 10px; }
.ap-import-ta {
    min-height: 110px; resize: none; padding: 10px 12px; border-radius: var(--r-chip);
    border: 1px solid var(--hairline); background: #FAFAFB; color: var(--ink);
    font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5;
    caret-color: var(--hover-fill);
}
.ap-import-ta::placeholder { color: var(--placeholder); }
.ap-import-ta:focus { outline: none; border-color: var(--placeholder); }
.ap-import-actions { display: flex; gap: 8px; }
.ap-import-actions .ape-chip {
    flex: 1; min-height: 40px; border-radius: 20px;
    font-family: var(--ff-head); font-weight: 900; font-size: 13px;
    letter-spacing: 0.01em; text-transform: uppercase;
}
.ap-import-go { background: var(--hover-fill); color: #FFFFFF; }

/* save validation error flash (replaces the native alert()) */
.ape-btn.ape-err { background: #B0243B; color: #FFFFFF; }

/* a11y: visible focus rings (keyboard) + ≥44px touch hit-areas on small controls */
.ape-btn:focus-visible, .ap-op:focus-visible, .ape-chip:focus-visible,
.ape-seg-btn:focus-visible, .ape-step-btn:focus-visible,
.ap-lib-new:focus-visible, .ap-lib-import:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
.ape-chip { position: relative; }
.ape-chip::before {
    content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: max(100%, 44px); height: max(100%, 44px);
}