/*
 * Instinctor Unfold (accordion) — static rules
 *
 * Pre-consolidation the renderer emitted ~50 lines of inline CSS per
 * unfold block, with the wrapper id baked into every selector. All
 * structural rules are identical for every unfold block on every page;
 * only per-instance VALUES (colours, dimensions, blur intensity, tile
 * columns) differ. Surfaced here as CSS variables on the wrapper —
 * the renderer emits a single `style="--unf-…"` declaration plus
 * `data-…` attributes, and these rules do the rest.
 *
 * Variables consumed (all set on .impulse-unfold by the renderer):
 *   --unf-title         header / title colour
 *   --unf-content       body text colour
 *   --unf-content-bg    body / active background
 *   --unf-accent        active / highlight colour
 *   --unf-border        border colour
 *   --unf-radius        border-radius (px)
 *   --unf-pad           content padding (px)
 *   --unf-width         outer accordion width (% or px) — desktop
 *   --unf-width-tab     tablet width override (optional)
 *   --unf-width-mob     mobile width override (optional)
 *   --unf-tile-h        tile min-height (tiles mode, px)
 *   --unf-card-h        card height (rolodex mode, px)
 *   --unf-gap           grid gap (tiles mode, px)
 *   --unf-cols          desktop columns (tiles)
 *   --unf-cols-tab      tablet columns (optional, falls back to desktop)
 *   --unf-cols-mob      mobile columns (optional, falls back to tablet)
 *   --unf-blur          spotlight blur (px)
 *   --unf-spot-bg       spotlight container bg
 *   --unf-t-size        title font-size (px)
 *   --unf-c-size        content font-size (px)
 *   --unf-n-size        number font-size (px)
 *
 * Phase 1 CSS-consolidation pass post-step-38.
 */

/* ── Outer width (all modes) ──────────────────────────────────────── */
.impulse-unfold {
    width: var(--unf-width, 100%);
    margin: 0 auto;
    align-self: center;
}
@media (max-width: 1024px) {
    .impulse-unfold { width: var(--unf-width-tab, var(--unf-width, 100%)); }
}
@media (max-width: 767px) {
    .impulse-unfold { width: var(--unf-width-mob, var(--unf-width-tab, var(--unf-width, 100%))); }
}

/* ─────────────────────────────────────────────────────────────────── */
/* TILES MODE                                                          */
/* ─────────────────────────────────────────────────────────────────── */
.impulse-acc-tiles {
    display: grid;
    grid-template-columns: repeat(var(--unf-cols, 3), 1fr);
    gap: var(--unf-gap, 16px);
}
@media (max-width: 1024px) {
    .impulse-acc-tiles {
        grid-template-columns: repeat(var(--unf-cols-tab, var(--unf-cols, 3)), 1fr);
    }
}
@media (max-width: 767px) {
    .impulse-acc-tiles {
        grid-template-columns: repeat(var(--unf-cols-mob, var(--unf-cols-tab, var(--unf-cols, 3))), 1fr);
    }
}

.impulse-acc-tile {
    position: relative;
    min-height: var(--unf-tile-h, 80px);
    background: var(--unf-content-bg, #fff);
    border: 1px solid var(--unf-border, #e0e0e0);
    border-radius: var(--unf-radius, 8px);
    overflow: hidden;
    display: grid;
    grid-template: 1fr / 1fr;
}
/* No hover lift / shadow — the only hover affordance is revealing side B
   (Sergei 2026-06-29: "no reason to pop hovered cards and show shadow"). */
.impulse-acc-tile-front {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    box-sizing: border-box;
    text-align: center;
}
/* Independent text alignment per face — Side A (front) follows data-align-a,
   Side B (back / slide) follows data-align-b. Each face has its own align
   buttons in the panel (Sergei 2026-06-29). !important because the per-variant
   face rules (flip back, slide) hard-set text-align:center later in this file
   at equal specificity. Center is the default (no rule needed). */
.impulse-acc-tiles[data-align-a="left"]  .impulse-acc-tile-front { align-items: flex-start !important; text-align: left  !important; }
.impulse-acc-tiles[data-align-a="right"] .impulse-acc-tile-front { align-items: flex-end   !important; text-align: right !important; }
.impulse-acc-tiles[data-align-b="left"]  .impulse-acc-tile-back,
.impulse-acc-tiles[data-align-b="left"]  .impulse-acc-tile-slide { align-items: flex-start !important; text-align: left  !important; }
.impulse-acc-tiles[data-align-b="right"] .impulse-acc-tile-back,
.impulse-acc-tiles[data-align-b="right"] .impulse-acc-tile-slide { align-items: flex-end   !important; text-align: right !important; }
.impulse-acc-tile-title {
    font-weight: 600;
    color: var(--unf-title, #1d2327);
    margin-bottom: 4px;
}
.impulse-acc-tile-num {
    font-size: 11px;
    opacity: 0.35;
    margin-bottom: 8px;
    color: var(--unf-title, #1d2327);
}
/* tiles_number: data-show-num="0" hides the leading 01/02/…. */
.impulse-acc-tiles[data-show-num="0"] .impulse-acc-tile-num { display: none !important; }

/* ── Tile expand: ZOOM (click opens modal) ───────────────────────── */
/* pointer-events is the load-bearing guard here, not display. The script sets
   an inline display:block to open the modal, and inline always outranks this
   rule - so once opened, `display:none` can never re-apply and a full-viewport
   fixed layer stays in the tree at opacity 0, eating every click on the page.
   That is why a tile opened exactly once and then nothing on the page was
   clickable again. The script now clears its inline display on close; this
   makes the layer harmless even mid-transition, or if a script ever fails to. */
.impulse-acc-tiles[data-expand="zoom"] .impulse-acc-tiles-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}
.impulse-acc-tiles[data-expand="zoom"] .impulse-acc-tiles-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}
.impulse-acc-tiles[data-expand="zoom"] .impulse-acc-tile-expanded {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: min(600px, 85vw);
    max-height: 80vh;
    background: var(--unf-content-bg, #fff);
    border-radius: var(--unf-radius, 8px);
    z-index: 9999;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease-in-out;
}
.impulse-acc-tiles[data-expand="zoom"] .impulse-acc-tile-expanded.active {
    display: block;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.impulse-acc-tile-expanded-header {
    padding: 24px 24px 12px;
    font-weight: 600;
    color: var(--unf-accent, #1d2327);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.impulse-acc-tile-expanded-body {
    padding: 0 24px 24px;
    color: var(--unf-content, #555);
    line-height: 1.7;
}
.impulse-acc-tile-close {
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--unf-title, #1d2327);
    opacity: 0.5;
    transition: opacity 0.2s;
}
.impulse-acc-tile-close:hover { opacity: 1; }

/* ── Tile expand: FLIP (HOVER rotates 3D to side B) ──────────────── */
.impulse-acc-tiles[data-expand="flip"] .impulse-acc-tile {
    perspective: 800px;
    overflow: visible;
}
.impulse-acc-tiles[data-expand="flip"] .impulse-acc-tile-flipper {
    grid-area: 1 / 1;
    display: grid;
    grid-template: 1fr / 1fr;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
/* Flip on HOVER (was a JS .flipped class toggled on click, which never fired in
   the editor — side B was invisible there). Pure CSS :hover works in editor and
   frontend alike. (Sergei 2026-06-29) */
.impulse-acc-tiles[data-expand="flip"] .impulse-acc-tile:hover .impulse-acc-tile-flipper {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.impulse-acc-tiles[data-expand="flip"] .impulse-acc-tile-front,
.impulse-acc-tiles[data-expand="flip"] .impulse-acc-tile-back {
    grid-area: 1 / 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-sizing: border-box;
    border-radius: var(--unf-radius, 8px);
    background: var(--unf-content-bg, #fff);
    border: 1px solid var(--unf-border, #e0e0e0);
}
.impulse-acc-tiles[data-expand="flip"] .impulse-acc-tile-front {
    transform: rotateY(0deg) translateZ(0);
    -webkit-transform: rotateY(0deg) translateZ(0);
}
.impulse-acc-tiles[data-expand="flip"] .impulse-acc-tile-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    padding: 20px;
    color: var(--unf-content, #555);
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    text-align: center;
    overflow-y: auto;
}
.impulse-acc-tile-back-title {
    font-weight: 600;
    color: var(--unf-accent, #1d2327);
    margin-bottom: 8px;
}

/* ── Tile expand: SLIDE (back slides up) ─────────────────────────── */
.impulse-acc-tiles[data-expand="slide"] .impulse-acc-tile-slide {
    grid-area: 1 / 1;
    background: var(--unf-content-bg, #fff);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
    box-sizing: border-box;
    color: var(--unf-content, #555);
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    text-align: center;
    border-radius: var(--unf-radius, 8px);
    overflow-y: auto;
}
/* Reveal side B on HOVER (pure CSS) — was driven by a JS .slid class toggled
   on click, which never fired in the editor (the editor swallows canvas clicks
   for selection), so side B was invisible there. CSS :hover works in editor and
   on the frontend alike, and removes the need for a close (X) button. */
.impulse-acc-tiles[data-expand="slide"] .impulse-acc-tile:hover .impulse-acc-tile-slide {
    transform: translateY(0);
}
.impulse-acc-tile-slide-title {
    font-weight: 600;
    color: var(--unf-accent, #1d2327);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ── Tile expand: FADE (hover crossfade) ─────────────────────────── */
.impulse-acc-tiles[data-expand="fade"] .impulse-acc-tile-front,
.impulse-acc-tiles[data-expand="fade"] .impulse-acc-tile-back {
    grid-area: 1 / 1;
    border-radius: var(--unf-radius, 8px);
    background: var(--unf-content-bg, #fff);
    transition: opacity 0.8s ease-in-out;
}
.impulse-acc-tiles[data-expand="fade"] .impulse-acc-tile-back {
    opacity: 0;
    padding: 20px;
    box-sizing: border-box;
    color: var(--unf-content, #555);
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    text-align: center;
    line-height: 1.7;
    overflow-y: auto;
}
.impulse-acc-tiles[data-expand="fade"] .impulse-acc-tile:hover .impulse-acc-tile-front { opacity: 0; }
.impulse-acc-tiles[data-expand="fade"] .impulse-acc-tile:hover .impulse-acc-tile-back  { opacity: 1; }

/* ── Tile expand: PUSH (hover horizontal slide) ──────────────────── */
.impulse-acc-tiles[data-expand="push"] .impulse-acc-tile-front {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.impulse-acc-tiles[data-expand="push"] .impulse-acc-tile-back {
    grid-area: 1 / 1;
    background: var(--unf-content-bg, #fff);
    transform: translateX(100%);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
    box-sizing: border-box;
    color: var(--unf-content, #555);
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    text-align: center;
    line-height: 1.7;
    border-radius: var(--unf-radius, 8px);
    overflow-y: auto;
}
.impulse-acc-tiles[data-expand="push"] .impulse-acc-tile:hover .impulse-acc-tile-front { transform: translateX(-100%); }
.impulse-acc-tiles[data-expand="push"] .impulse-acc-tile:hover .impulse-acc-tile-back  { transform: translateX(0); }

/* ─────────────────────────────────────────────────────────────────── */
/* SPOTLIGHT MODE                                                      */
/* ─────────────────────────────────────────────────────────────────── */
.impulse-acc-spotlight .impulse-acc-spot-item {
    opacity: 0.35;
    transform: scale(0.98);
    background: transparent;
    filter: blur(var(--unf-blur, 1px));
}
.impulse-acc-spotlight .impulse-acc-spot-item.active {
    opacity: 1 !important;
    transform: scale(1) !important;
    background: var(--unf-content-bg, #fff) !important;
    filter: none !important;
}
.impulse-acc-spotlight .impulse-acc-spot-header { color: var(--unf-title, #1d2327); }
.impulse-acc-spotlight .impulse-acc-spot-item.active .impulse-acc-spot-header {
    color: var(--unf-accent, #1d2327) !important;
}

/* ─────────────────────────────────────────────────────────────────── */
/* Shared font-size + stack-nav colours                                */
/* ─────────────────────────────────────────────────────────────────── */
.impulse-acc-spot-header span:first-child,
.impulse-unfold-card-title          { font-size: var(--unf-t-size, 15px); }

.impulse-acc-spot-body,
.impulse-unfold-card > div:last-child { font-size: var(--unf-c-size, 14px); }

.impulse-acc-stack-num {
    font-size: var(--unf-n-size, 11px);
    color: var(--unf-content, #666);
}
.impulse-acc-stack-num.active        { color: var(--unf-title, #1d2327); }
.impulse-acc-stack-nav button        { color: var(--unf-content, #666); }

/* ═════════════════════════════════════════════════════════════════════ */
/* REVEAL MODE                                                          */
/* Plain display:none/block toggles. Opacity/max-height transitions      */
/* were freezing at 0 in this iframe context — verified live. Snappy     */
/* binary swap is the reliable path; transitions can be re-introduced    */
/* once we identify what's killing them.                                  */
/* ═════════════════════════════════════════════════════════════════════ */

/* ── REVEAL ─────────────────────────────────────────────────────────── */
.impulse-acc-reveal {
    width: var(--unf-width, 100%);
    margin: 0 auto;
    /* 1 or 2 columns (--unf-rev-cols). minmax(0,1fr) stops long content from
       blowing out the track. column-gap separates the two columns; row-gap 0
       keeps the divider rhythm tight. A single column is visually identical to
       the legacy stacked layout. */
    display: grid;
    grid-template-columns: repeat(var(--unf-rev-cols, 1), minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
}
@media (max-width: 767px) {
    .impulse-acc-reveal { grid-template-columns: 1fr; }
    /* Tighter FAQ rows on mobile: scale the row padding down (2026-07-08). */
    .impulse-acc-reveal-title { padding: calc(var(--unf-row-pad, 11px) * 0.5) 0; }
}
.impulse-acc-reveal-item {
    border-bottom: 1px solid var(--unf-border, #e0e0e0);
}
.impulse-acc-reveal-title {
    display: block;
    width: 100%;
    padding: var(--unf-row-pad, 11px) 0;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    text-align: left;
    color: var(--unf-title, #1d2327);
    font-size: var(--unf-t-size, 15px);
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: border-left-color 0.3s ease-in-out,
                color 0.2s ease-in-out;
}
/* The indent moves the LABEL, not the box.
   It used to animate padding-left on the button itself, which narrows the space
   the text has: a question long enough to wrap re-wrapped to a different number
   of lines mid-hover, changing the row's height and nudging everything below it.
   Running the pointer down a long FAQ therefore shook the next section on every
   row it crossed. A transform does not reflow, and 12px + the 2px border matches
   the old 12px padding + 2px border exactly, so the resting look is unchanged. */
.impulse-acc-reveal-title > span {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.impulse-acc-reveal-title:hover > span,
.impulse-acc-reveal-item.open .impulse-acc-reveal-title > span {
    transform: translateX(12px);
}
.impulse-acc-reveal-title:hover,
.impulse-acc-reveal-item.open .impulse-acc-reveal-title {
    border-left-color: var(--unf-accent, #1d2327);
}
/* The body was `display:none` -> `display:block`. Nothing about that pair is
   animatable, so the JS that carefully sets max-height had no transition to
   drive and the row simply popped open. Collapsed height is now a real
   animatable state: max-height carries the open/close (JS supplies the pixel
   value from inner.scrollHeight), opacity fades slightly ahead of it, and the
   inner block rises the last few pixels into place so the copy arrives rather
   than appears.

   max-height MUST use the same duration and easing opening and closing. This is
   a single-open accordion, so switching rows collapses one while expanding
   another, and the page below is pushed by the SUM of the two. Give the close a
   shorter duration than the open and that sum is not monotonic: the outgoing row
   finishes first, the page snaps up, then drifts back down as the incoming row
   catches up. That reads as the next section shaking. Only the properties that
   cost no layout - opacity, the inner's rise - are allowed to differ. */
.impulse-acc-reveal-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.22s ease-in-out;
}
.impulse-acc-reveal-item.open .impulse-acc-reveal-body {
    opacity: 1;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.3s ease-in-out 0.08s;
}
.impulse-acc-reveal-inner {
    padding: 0 0 var(--unf-pad, 20px) 12px;
    color: var(--unf-content, #555);
    font-size: var(--unf-c-size, 14px);
    line-height: 1.7;
    transform: translateY(-6px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.impulse-acc-reveal-item.open .impulse-acc-reveal-inner {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .impulse-acc-reveal-body,
    .impulse-acc-reveal-item.open .impulse-acc-reveal-body,
    .impulse-acc-reveal-inner,
    .impulse-acc-reveal-item.open .impulse-acc-reveal-inner,
    .impulse-acc-reveal-title > span { transition: none; }
}

/* Zoom tiles carry their content in a hidden source node that the modal lifts
   its markup from, so a section-backed item opens with its real blocks instead
   of the empty legacy items[N].content string. Never displayed in place. */
.impulse-acc-tile-source { display: none !important; }

/* ── FOCUS row numbers (spot_number) ────────────────────────────────── */
/* Same opt-out contract as the Tiles numbers above. */
.impulse-acc-spotlight[data-show-num="0"] .impulse-acc-spot-num { display: none !important; }

/* ── STACK card text alignment (stack_align) ────────────────────────── */
/* Separate from block alignment: a full-width stack has no room to move as a
   block, so the only alignment that can read as "working" is the text's. */
.impulse-unfold-scroll[data-align-text="left"]   .impulse-unfold-card { text-align: left; }
.impulse-unfold-scroll[data-align-text="center"] .impulse-unfold-card { text-align: center; }
.impulse-unfold-scroll[data-align-text="right"]  .impulse-unfold-card { text-align: right; }

/* ── Block alignment (acc_align) ────────────────────────────────────── */
/* When acc_width < 100%, push the whole unfold block left / right or keep
   it centred. Attribute selector (0,2,0 specificity) beats the per-mode
   .impulse-acc-* { margin:0 auto } rules. Works for every mode root since
   they all carry the .impulse-unfold class. */
.impulse-unfold[data-align="left"]   { margin-left: 0 !important;    margin-right: auto !important; }
.impulse-unfold[data-align="center"] { margin-left: auto !important; margin-right: auto !important; }
.impulse-unfold[data-align="right"]  { margin-left: auto !important; margin-right: 0 !important; }