/* ============================================================
   Core-functionality showcase — a product tour under the hero.
   A row of capability feature-tabs above ONE large stage; the
   active tab's animation panel shows, the others hide. Each panel
   is an existing animation block (logging, ask-when-unsure, …)
   whose own IntersectionObserver handles play/pause. Tab switching
   is driven by js/core-showcase.js.
   ============================================================ */
/* ---- the blueprint canvas ----
   .cshow is a designed canvas, not a (fake) browser window. Faint dashed
   guide-lines cross behind the content (drawn by .cshow::before) and fade
   out at the edges via a mask, so the lines bleed past the content rather
   than stopping at a hard frame. Plus-marks sit at the content corners
   (.cshow-mark). No border, no shadow, no title bar. The "Vercel/blueprint"
   aesthetic: hairline, ~12% opacity, one grid unit, tight dashes.
   Quality rules followed: lines you sense before you see; 1px; #e5e7eb;
   4/2 dash; single 26px grid unit; edge-faded; corner crosshairs. */
.cshow {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 36px auto 0;
    padding: 8px 0 0;
}
@media (min-width: 640px) {
    .cshow { margin-top: 44px; }
    /* room to spare here, so let the grid bleed past the content sides */
    .cshow::before { inset: -8px -40px; }
}

/* the dashed crossing grid — a full-bleed layer behind the content that
   extends past it and dissolves at the edges. Horizontal bleed is 0 by
   default (mobile): .cshow nearly touches the viewport there, so any
   horizontal bleed spills off-screen and gets clipped raggedly by the
   page's overflow-x-hidden (killing the soft edge-fade). The radial mask
   already dissolves the lines before the edge, so no horizontal bleed is
   needed for the effect. Desktop re-adds the bleed (room to spare). */
.cshow::before {
    content: "";
    position: absolute;
    inset: -8px 0;              /* mobile: no horizontal bleed (stays on-screen) */
    z-index: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(to right,  #c7ccdb 0 1px, transparent 1px 27px),
        repeating-linear-gradient(to bottom, #c7ccdb 0 1px, transparent 1px 27px);
    /* render the lines dashed by punching gaps with a dot mask, then fade
       the whole layer toward the edges so nothing terminates hard */
    opacity: 0.5;
    -webkit-mask-image:
        repeating-linear-gradient(to right,  #000 0 4px, transparent 4px 6px),
        repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 6px),
        radial-gradient(ellipse 78% 82% at 50% 50%, #000 55%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-image:
        repeating-linear-gradient(to right,  #000 0 4px, transparent 4px 6px),
        repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 6px),
        radial-gradient(ellipse 78% 82% at 50% 50%, #000 55%, transparent 100%);
    mask-composite: intersect;
}

/* ---- tabs (on the canvas, centred; no window chrome) ---- */
.cshow-tabs {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
}
.cshow-tab {
    appearance: none;
    border: 1px solid #e6e8f0;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.cshow-tab svg { width: 16px; height: 16px; flex: none; color: #9ca3af; transition: color 0.2s ease; }
.cshow-tab:hover { border-color: #d6dbef; color: #111827; }
.cshow-tab:hover svg { color: #6b7280; }
/* Active tab = a SELECTED state (not a primary action), so it reads as a
   raised white pill with a brand-blue accent (blue text + icon) — NOT solid
   black. Solid black is reserved for the signup CTA so the two don't compete. */
.cshow-tab.is-active {
    border-color: #cdd6ff;
    color: #4c6cff;
    background: #ffffff;
    box-shadow: 0 6px 16px -8px rgba(76, 108, 255, 0.35), 0 1px 2px rgba(17, 24, 39, 0.06);
}
.cshow-tab.is-active svg { color: #4c6cff; }
.cshow-tab:focus-visible { outline: 2px solid #4c6cff; outline-offset: 2px; }

/* ---- responsive: horizontal scroll strip ----
   On narrow screens the four tabs don't fit in one row. Instead of wrapping
   to multiple rows, they become a single-row horizontal SCROLLER — extra
   tabs sit off the right edge and the user swipes to reveal them. The row
   edges fade (mask) to hint there's more, and the scrollbar is hidden. */
@media (max-width: 879px) {
    .cshow-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;              /* Firefox */
        /* left edge ALIGNS with the box below (.cshow-screen has 14px padding),
           while the row still bleeds off the RIGHT so extra tabs peek + can be
           swiped to. */
        padding-left: 14px;
        margin-right: -16px;
        padding-right: 16px;
        /* soft fade at the right edge to signal "more to scroll" */
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
                mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
    }
    .cshow-tabs::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
    .cshow-tab {
        flex: 0 0 auto;                     /* keep intrinsic size; don't shrink */
        scroll-snap-align: start;
    }
}
@media (max-width: 480px) {
    .cshow-tab { padding: 7px 11px; font-size: 12.5px; }
}

/* ---- the screen: where the active animation lives ----
   On wide screens a FIXED height keeps the canvas from resizing between
   tabs (the demos are side-by-side and ~500px tall there). On narrow
   screens the demos stack vertically and grow much taller than any fixed
   height, so the canvas height is AUTO (mobile-first) — pinning it would
   clip the stacked panels. Transparent so the blueprint grid shows
   through around the floating cards. */
.cshow-screen {
    position: relative;
    z-index: 1;
    padding: 22px 14px 14px;   /* extra top room so the corner marks clear the card */
    height: auto;            /* mobile: grow to fit the stacked demo */
}
@media (min-width: 880px) {
    /* side-by-side demos → lock a stable height so tabs don't jump */
    .cshow-screen { padding: 12px 30px 18px; height: 580px; }
}

/* ---- corner crosshair plus-marks at the content corners ---- */
.cshow-mark {
    position: absolute;
    z-index: 3;
    width: 13px;
    height: 13px;
    pointer-events: none;
    /* a thin "+" drawn with two crossing bars via gradients */
    background:
        linear-gradient(#9aa2b8, #9aa2b8) center / 100% 1px no-repeat,
        linear-gradient(#9aa2b8, #9aa2b8) center / 1px 100% no-repeat;
    opacity: 0.7;
}
.cshow-mark--tl { top: 4px;  left: 8px; }
.cshow-mark--tr { top: 4px;  right: 8px; }
.cshow-mark--bl { bottom: 4px; left: 8px; }
.cshow-mark--br { bottom: 4px; right: 8px; }
@media (min-width: 640px) {
    .cshow-mark--tl { left: 16px; } .cshow-mark--tr { right: 16px; }
    .cshow-mark--bl { left: 16px; } .cshow-mark--br { right: 16px; }
}
/* hide the corner plus-marks on responsive/stacked view */
@media (max-width: 879px) {
    .cshow-mark { display: none; }
}

/* ---- the stage ----
   Mobile: normal flow so the stacked panel sets the height. Desktop:
   fills the fixed screen and vertically centres the active panel. */
.cshow-stage { position: relative; }
@media (min-width: 880px) {
    .cshow-stage {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
.cshow-stage > .cshow-panel.is-active { width: 100%; }
.cshow-panel {
    /* hidden panels are fully removed from layout so the stage height
       tracks the active panel (animations have very different heights). */
    display: none;
    animation: cshow-fade 0.4s ease;
}
.cshow-panel.is-active { display: block; }
@keyframes cshow-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cshow-panel { animation: none; }
}

/* temporary placeholder for a not-yet-built capability panel */
.cshow-soon {
    min-height: 360px;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed #d1d5db; border-radius: 22px;
    color: #9ca3af; font-size: 15px; font-weight: 500;
    background: linear-gradient(180deg, #f8faff, #f3f5fb);
}

/* ---- lift the animation cards off the blueprint canvas ----
   The cards float directly on the dashed grid, so each keeps its own
   drop-shadow. NOTE: the shadow must NOT go on .hsd-frame (the wrapper that
   holds BOTH left+right cards) — that renders one big shadow spanning both
   boxes. The per-card shadow lives on .hsd-left/.hsd-right (from
   hero-split-demo-v2.css) and on .cb-card/.cs-card; here we only need to make
   sure the split-demo cards read against the canvas, so target the panels
   directly, never the frame. */
.cshow-screen .hsd-left,
.cshow-screen .hsd-right,
.cshow-screen .cb-card,
.cshow-screen .cs-card {
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
/* the wrapper frame casts NO shadow of its own */
.cshow-screen .hsd-frame { box-shadow: none !important; }

/* ---- consistent card height across ALL tabs (desktop) ----
   The log + ask demos read their card height from the SHARED
   .hsd-left/.hsd-right rule in hero-split-demo-v2.css (540px), which also
   loads on live pages. Scope a 480px override to the showcase ONLY so every
   capability's boxes match the smaller size, without touching live pages.
   (send/book/task set 480px in their own scoped files.) */
@media (min-width: 880px) {
    .cshow-screen .hsd-left,
    .cshow-screen .hsd-right { height: 480px !important; }
}
/* cap-book + cap-task right panels are intentionally FLAT (their inner scenes
   — the faded desktop and the calendar/board card — carry their own frames),
   so they must NOT take the panel shadow above, or we'd double-shadow the
   right side. */
.cshow-screen .cap-book .hsd-right,
.cshow-screen .cap-task .hsd-right { box-shadow: none !important; }

/* slightly darker card borders (gray-300) than the shared default
   (gray-200) so the cards read crisply against the dashed canvas.
   Scoped to the showcase only — the log/ask demo borders all read from
   --hsd-border, so overriding the var recolours every sub-card + the
   connector lines in one shot; the calendar/email cards use their own
   --cb-border / --cs-border vars. */
.cshow-screen #hero-split-demo,
.cshow-screen #unc-demo { --hsd-border: #d1d5db; }
.cshow-screen .cap-book { --cb-border: #d1d5db; }
.cshow-screen .cap-send { --cs-border: #d1d5db; }
/* remove the panels' own top margins + min-heights so the fixed screen
   height controls layout and the panel centres in it (they were tuned
   for sitting on a plain page) */
.cshow-screen #hero-split-demo,
.cshow-screen #unc-demo { margin-top: 0 !important; }
.cshow-screen .cap-book,
.cshow-screen .cap-send { min-height: 0; }