/**
 * Working Memory: N-Back — anchored layout (v2 redesign, 2026-06-25)
 * Fleet chrome (UniversalHeader + UniversalContainer + UniversalFooter) comes from
 * shared CSS; this file styles the body using the --as-* design tokens.
 *
 * ANCHORED LAYOUT (spec .claude/nback-redesign-spec.md §4, hard requirement): the
 * card is fixed-height zones — badge · topzone · timerzone · picstage · actionzone.
 * Content swaps INSIDE each zone; the card never changes height and the image never
 * shifts across watch → respond → feedback → next, in either pacing mode.
 *
 * COLOR GRAMMAR (fleet-compliant, no purple — 1.7.286, Lyda): prompt/instruction
 * = blue (--as-read), audio = cyan (--as-audio), answers = navy tiles (green/red
 * ONLY after the tap, as feedback), advance/progress = blue, hint = amber
 * (--as-hint). The watch phase (formerly the violet --as-encode MODE color) now
 * uses the blue instruction treatment + a blue card border; it stays distinct
 * from the respond phase via the 👀 banner text, the "N-BACK" badge, and the
 * grayed Match/No Match. (--as-encode is no longer referenced here.)
 */

.nback-memory-root {
    max-width: 100%;
    margin: 0 auto;
    color: #283044;
    font-family: var(--as-font);
}

/* ---- Loading / error / empty ---- */
.nback-memory-root .nb-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 16px;
    color: #64748b;
}
.nback-memory-root .nb-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--as-read-accent, #2563eb);
    border-radius: 50%;
    animation: nb-spin 0.8s linear infinite;
}
@keyframes nb-spin { to { transform: rotate(360deg); } }
.nback-memory-root .nb-error { color: #dc2626; font-weight: 600; }

/* ============================================================
   ANCHORED CARD — fixed-height zones, no reflow.
   ============================================================ */
.nback-memory-root .nb-anchored {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}
/* N-back level badge — anchored to the IMAGE CARD's top-left corner (1.7.286,
   Lyda QA). It used to float on the exercise's top-left edge, where it dropped
   over the instruction banner. Now it lives INSIDE .nb-card (which is
   position:relative) so it sits on the stimulus card, clear of the banner.
   Fleet blue (= primary/progress) instead of the old dark navy pill.
   line-height:1 is REQUIRED so it doesn't inherit the Elementor kit's ~40px
   global line-height (which inflated it to ~44px tall). */
.nback-memory-root .nb-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: var(--as-read-accent, #2563eb);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    padding: 5px 9px;
    border-radius: 999px;
}

/* ---- TOPZONE (54px) — ALL instructions live here, above the image, always ---- */
.nback-memory-root .nb-topzone {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.nback-memory-root .nb-prompt {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: var(--as-read-text, #1b49c4);   /* prompt = blue */
}
.nback-memory-root .nb-prompt-key { color: var(--as-read-accent, #2563eb); }
.nback-memory-root .nb-watch-banner {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 10px;
    /* PLAIN TEXT — no box (1.7.290, Lyda): dropped the pale bg tint + border so
       the instruction renders like the rest of the exercise's instructions (and
       so the pinned Self-Paced|Auto toggle no longer collides with a boxed
       banner on tablet). Just fleet directive-blue text. Kept fleet colors: blue
       text = "look here"; phase still cued by the 👀 text + "N-BACK" badge +
       grayed Match/No Match + blue card border. */
    background: transparent;
    border: 0;
    color: var(--as-read-text, #1e40af);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}
.nback-memory-root .nb-watch-sub { font-weight: 600; opacity: 0.85; }

/* ---- TIMERZONE (7px) — draining bar (auto) or reserved blank (self) ---- */
.nback-memory-root .nb-timerzone { height: 7px; margin-bottom: 14px; }
.nback-memory-root .nb-timer {
    height: 7px;
    border-radius: 999px;
    background: #d7e2f5;
    overflow: hidden;
}
.nback-memory-root .nb-timer-fill {
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: var(--as-read-accent, #2563eb);   /* timer = blue (progress), not green */
}

/* ---- PICSTAGE (fixed) — the picture card + non-layout hint overlay ---- */
.nback-memory-root .nb-picstage {
    position: relative;
    display: flex;
    justify-content: center;
}
.nback-memory-root .nb-card {
    position: relative;   /* anchors the .nb-badge to the card's top-left corner */
    width: 100%;
    /* Phone base bumped 206→246 to hold the larger 160px image (Lyda QA 1.7.286);
       phone is tall so the footer stays visible. Tablet overrides via min(...)+100
       in the min-width:768 block below. */
    height: 246px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--tile-border, #e4e9f1);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(40, 48, 68, 0.06), 0 6px 18px rgba(40, 48, 68, 0.06);
}
/* watch phase signals with BORDER-COLOR ONLY (same 1px width → no footprint change).
   Fleet blue (was violet --as-encode) — the "look at this" cue (1.7.286). */
.nback-memory-root .nb-card-watch { border-color: var(--as-read-accent, #2563eb); }
.nback-memory-root .nb-card-tappable { cursor: pointer; }
.nback-memory-root .nb-card-tappable:hover { border-color: var(--as-read-accent, #2563eb); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2); }
.nback-memory-root .nb-card-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border-radius: 14px;
}
.nback-memory-root .nb-card-noimg { font-size: 60px; line-height: 1; }
.nback-memory-root .nb-card-wordrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
}
.nback-memory-root .nb-card-word { font-size: 21px; font-weight: 800; color: #283044; }
/* Cyan audio button — kit-proofed (the Elementor kit's global button min-width/
   padding stretched it into an oval; the sanctioned !important fixes the box only). */
.nback-memory-root .nb-card-aud {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border: 2px solid var(--as-audio, #0e9bb5);
    border-radius: 50% !important;
    background: #ffffff;
    color: var(--as-audio-deep, #0b7e93);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.nback-memory-root .nb-card-aud:hover { background: var(--as-audio-soft, #e0f5f9); }
.nback-memory-root .nb-card-aud.is-playing {
    background: var(--as-audio, #0e9bb5);
    color: #ffffff;
    animation: nb-aud-pulse 1.4s ease-in-out infinite;
}
@keyframes nb-aud-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14, 155, 181, 0); }
    50% { box-shadow: 0 0 0 6px rgba(14, 155, 181, 0.18); }
}

/* Hint overlay — re-shows the n-back target. Absolute → never shifts the layout. */
.nback-memory-root .nb-hint-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px;
    background: #ffffff;
    border: 1px solid var(--as-hint-border, #ca8a04);   /* hint = fleet amber (1.7.286) */
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(40, 48, 68, 0.18);
    animation: nb-fade 0.2s ease-out;
}
.nback-memory-root .nb-hint-cap {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--as-hint-text, #92400e);   /* hint = fleet amber (1.7.286) */
}
.nback-memory-root .nb-hint-img { width: 70px; height: 70px; object-fit: contain; border-radius: 8px; }
@keyframes nb-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- ACTIONZONE (72px) — Match / No-Match (always present) or the Start gate ---- */
.nback-memory-root .nb-actionzone { min-height: 72px; margin-top: 14px; display: flex; align-items: stretch; }
/* Answer row: minmax(0,1fr) (NOT 1fr, which floors each track at the button's
   min-content) + min-width:0 + sane padding overriding the kit's button
   `padding:15px 50px` — otherwise "No Match"'s inflated min-content forced an
   unequal 157/188 split that overran the card's right edge on mobile (Lyda live
   QA, ~390px). Same containment as the Reading Yes/No and Sound Awareness rows. */
.nback-memory-root .nb-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; box-sizing: border-box; }
.nback-memory-root .nb-ans {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 10px 12px;
    box-sizing: border-box;
    min-height: 72px;
    border: 1px solid var(--tile-border, #e4e9f1);
    border-radius: 14px;
    background: #ffffff;          /* navy tile — NOT green/red until tapped */
    color: #283044;
    cursor: pointer;
    opacity: 1;
    box-shadow: 0 1px 2px rgba(40, 48, 68, 0.06), 0 6px 18px rgba(40, 48, 68, 0.06);
    transition: border-color 0.13s, background 0.13s, color 0.13s, box-shadow 0.13s;
}
.nback-memory-root .nb-ans:hover:not(:disabled) {
    border-color: var(--as-read-accent, #2563eb);
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.18);
}
.nback-memory-root .nb-ans-label { font-size: 18px; font-weight: 800; line-height: 1; }
.nback-memory-root .nb-ans-mk { min-height: 14px; font-size: 12px; font-weight: 700; line-height: 1; }  /* reserved feedback line */
/* disabled / reference (grayed) — explicit opacity so the kit fade can't wash it out */
.nback-memory-root .nb-ans:disabled {
    background: #f1f3f7;
    border-color: #e8ebf1;
    color: #aab2c0;
    box-shadow: none;
    cursor: default;
    opacity: 1;
}
/* feedback (these come AFTER :disabled so a disabled-during-feedback tile still colors) */
.nback-memory-root .nb-ans.is-correct {
    background: var(--as-success-bg, #f0fdf4);
    border-color: var(--as-success, #16a34a);
    color: #136b34;
}
.nback-memory-root .nb-ans.is-wrong {
    background: var(--as-danger-bg, #fef2f2);
    border-color: var(--as-danger, #dc2626);
    color: #a51c1c;
    animation: nb-shake 0.35s ease-in-out;
}
@keyframes nb-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Start gate (auto mode) — blue primary, full width of the action zone */
.nback-memory-root .nb-start-btn {
    width: 100%;
    min-height: 64px;
    border: none;
    border-radius: 14px;
    background: var(--as-read-accent, #2563eb);
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.nback-memory-root .nb-start-btn:hover { background: var(--as-accent-deep, #1d4ed8); }
.nback-memory-root .nb-start-btn:active { transform: translateY(1px); }

/* ============================================================
   END-OF-SESSION SUMMARY (fallback when SessionSummary is absent)
   ============================================================ */
.nback-memory-root .nb-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 20px;
}
.nback-memory-root .nb-summary-score { font-size: 30px; font-weight: 800; color: #283044; }
.nback-memory-root .nb-summary-label { font-size: 14px; color: #64748b; margin-bottom: 12px; }
.nback-memory-root .nb-summary-primary {
    min-width: 170px;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--as-read-accent, #2563eb);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.nback-memory-root .nb-summary-primary:hover { background: var(--as-accent-deep, #1d4ed8); }

/* ---- Bare shell (no UniversalHeader) ---- */
.nback-memory-root .nb-bare-shell { display: flex; flex-direction: column; gap: 12px; }

/* ---- PACE TOGGLE — visible segmented control (Self-paced | Auto), 1.7.286.
   Surfaces the pacing setting on the widget itself (was gear-only). Fleet
   grammar: blue = selected. min-width/padding/line-height are declared so the
   Elementor kit's global button rules can't inflate the pills. ---- */
.nback-memory-root .nb-pace {
    display: inline-flex;
    align-self: center;
    margin: 0 auto 10px;
    padding: 3px;
    gap: 2px;
    background: var(--as-surface-soft, #f8fafc);
    border: 1px solid var(--as-border, #e5e7eb);
    border-radius: 999px;
}
.nback-memory-root .nb-pace-btn {
    min-width: 0;
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--as-text-muted, #64748b);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.nback-memory-root .nb-pace-btn.is-active {
    background: var(--as-read-accent, #2563eb);   /* blue = selected */
    color: #ffffff;
}
.nback-memory-root .nb-pace-btn:not(.is-active):hover {
    color: var(--as-read-text, #1e40af);
}
/* On TABLET+ (≥768px), pin the pace toggle to the top-right corner so it doesn't
   consume vertical card-stack height — with the bigger tablet image + the ~210px
   site header, an in-flow toggle pushed Match/No Match past the fold in BOTH
   landscape (1024×768) and portrait (768×1024). The banner is wide enough at
   ≥768 that its centered text stays well clear of the corner toggle (verified:
   ~150px gap at 768, more above). Phone (<768) keeps the in-flow top row (it has
   the vertical room and a narrower banner). 1.7.288. .nb-anchored is
   position:relative (above), so top/right anchor to it. */
@media (min-width: 768px) {
    .nback-memory-root .nb-pace {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        z-index: 3;
    }
}

/* ---- Small phones (scale the bumped 160px image down a touch) ---- */
@media (max-width: 380px) {
    .nback-memory-root .nb-card { height: 226px; }
    .nback-memory-root .nb-card-img { width: 140px; height: 140px; }
    .nback-memory-root .nb-card-word { font-size: 19px; }
    .nback-memory-root .nb-ans-label { font-size: 17px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .nback-memory-root .nb-spinner,
    .nback-memory-root .nb-card-aud.is-playing,
    .nback-memory-root .nb-ans.is-wrong,
    .nback-memory-root .nb-hint-overlay { animation: none; }
    /* timer bar: no smooth drain — JS still advances on time, the bar just jumps */
    .nback-memory-root .nb-timer-fill { transition: none !important; }
}

/* =========================================================================
   TABLET & UP — enlarge the memory stimulus image, height-bounded (1.7.284)
   The whole task is remembering the picture, yet it was a 120px thumbnail on
   tablet. Grow it — but bound it by the VIEWPORT height (min(px, vh)) so it gets
   large in PORTRAIT (tall) without pushing the Match/No Match buttons off a
   SHORT LANDSCAPE viewport (the site header eats ~210px there, same crunch that
   bit Naming). The card height tracks the image (calc(img + 100px)) so the
   anchored frame stays snug. min-width only — phone (<768px) byte-for-byte
   unchanged. Verified logged-in on staging: portrait 768×1024 = 287px (was 200,
   Match/No Match fully visible); landscape 1024×768 = 215px (was 240 — footer
   headroom improved: Match/No Match top at ~733, visible). Still far bigger than
   the 120px phone image. 28vh caps height at ~28% of the viewport. */
@media (min-width: 768px) {
    .nback-memory-root .nb-card-img { width: min(290px, 28vh); height: min(290px, 28vh); }
    .nback-memory-root .nb-card { height: calc(min(290px, 28vh) + 100px); }
}