/**
 * chadworks demo shell.
 *
 * Frames the ported interfaces. Never styles them: nothing in here may target
 * .sap-* or .tvp-*. Brand tokens per CWS-BRAND.md (light theme).
 */

:root {
    --bg-base: #ffffff;
    --bg-surface: #ede7f6;
    --text-primary: #243989;
    --text-secondary: #6b6168;
    --text-tertiary: rgba(36, 57, 137, 0.55);
    --accent: #8054bc;
    --border-subtle: rgba(36, 57, 137, 0.10);
    --border-medium: rgba(36, 57, 137, 0.18);

    --grad-deep: #243989;
    --grad-mid: #5668ad;
    --grad-peak: #e5d2f4;

    --bar-bg: rgba(255, 255, 255, 0.82);
    --card-bg: var(--bg-base);

    --font-display: "Lexend", system-ui, sans-serif;
    --font-body: "Instrument Sans", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --radius: 10px;
    --ease-swoop: cubic-bezier(0.16, 1, 0.3, 1);
    --site-width-cap: 1200px;
}

/* Dark scope. SAP and TVP are rack-unit and CRT interfaces built for a dark
   room, so a light page fights them. Retokenized only: nothing below targets
   .sap-* or .tvp-*, so the ported interfaces stay untouched. */
.cwd-body--dark {
    --bg-base: #0c0e1a;
    --bg-surface: #191d3a;
    --text-primary: #e9ebf7;
    --text-secondary: #a6adcd;
    --text-tertiary: rgba(233, 235, 247, 0.55);
    --accent: #a98cdd;
    --border-subtle: rgba(233, 235, 247, 0.10);
    --border-medium: rgba(233, 235, 247, 0.20);

    --grad-deep: #8ea2e8;
    --grad-mid: #a98cdd;
    --grad-peak: #e5d2f4;

    --bar-bg: rgba(12, 14, 26, 0.82);
    --card-bg: rgba(233, 235, 247, 0.04);

    color-scheme: dark;
}

.cwd-body {
    margin: 0;
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

.cwd-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- topbar ---- */

/* The return button is pulled OUT of the flow and pinned far left, so the
   wordmark and page title center against the full bar rather than against
   whatever space the button leaves. */
.cwd-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 0.875rem 1.75rem;
    background: var(--bar-bg);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--border-subtle);
}

.cwd-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.cwd-brand sup {
    font-size: 0.5em;
    top: -0.7em;
    margin-left: 0.1em;
}

.cwd-bar-div {
    width: 1px;
    height: 1.25rem;
    background: var(--border-medium);
}

.cwd-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
}

.cwd-note {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.cwd-back {
    position: absolute;
    left: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.875rem;
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    background: var(--card-bg);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 200ms var(--ease-swoop),
                color 200ms var(--ease-swoop),
                background-color 200ms var(--ease-swoop);
}

.cwd-back__arrow {
    width: 0.6875rem;
    height: 0.6875rem;
    fill: currentColor;
    flex-shrink: 0;
}

.cwd-back:hover,
.cwd-back:focus-visible {
    border-color: var(--accent);
    background: var(--bg-surface);
    color: var(--accent);
}

/* Too narrow to hold a pinned button beside a centered pair without them
   colliding, so the bar drops back to one centered row in flow. */
@media (max-width: 48rem) {
    .cwd-back {
        position: static;
        transform: none;
    }
}

/* ---- stage: holds a ported interface ---- */

.cwd-stage {
    flex: 1;
    padding: 2.5rem 1.75rem 4rem;
    background:
        radial-gradient(80rem 40rem at 50% -10%, var(--bg-surface), transparent 70%),
        var(--bg-base);
}

.cwd-stage-inner {
    max-width: var(--site-width-cap);
    margin: 0 auto;
}

/* Centered stage. Production centers SAP on its page from the body itself:
   body.awcr-sap-page is `display:flex; justify-content:center;
   align-items:center; min-height:100dvh`. This shell cannot take that class,
   because it also carries `background: ... !important` and a body-level
   display:flex that would break the topbar and footer. So the stage reproduces
   the same centering on the .cwd-* side, which keeps the rule that shell CSS
   never styles .sap-*. The player sizes itself: both of its grid children are a
   fixed 400px, so as a flex item it resolves to its 802px max-content width
   instead of stretching to the 1200px cap and packing left. */
.cwd-stage--center {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Symmetric, or the stage's 2.5rem/4rem top/bottom padding lands the
       player 24px above true center. */
    padding-block: 2.5rem;
}

.cwd-stage--center .cwd-stage-inner {
    max-width: none;
    margin: 0;
}

/* TVP stage. A SECOND sanctioned exception to "shell CSS never styles the
   ported interfaces" (the first is the .cwd-phone frame), by Chad's call
   2026-07-14b. Kept here rather than in assets/core/tvp.css so the production
   file stays pristine and this is a one-block revert.

   .tvp-container is built to BE the page: it paints its own dark background,
   holds 100vh, and pads itself off the viewport edge. Inside this shell that
   reads as a black slab floating on the page, so it is neutralized and the
   stage background shows through instead.

   Width: 1018px is what the content between the bezel paddles measured before
   they were removed (1200 stage - 32 container padding - 150 paddles). Holding
   it keeps the interface the size it always was, rather than letting the screen
   grow into the space the paddles vacated. */
.cwd-stage--tvp .cwd-stage-inner {
    max-width: 1018px;
}

.cwd-stage--tvp .tvp-container {
    background: transparent;
    padding: 0;
    min-height: 0;
}

/* .tvp-monitor-screen wraps the WHOLE layout, not just the monitor, so its
   #0a0a0a fill runs the full 1870px past the player and behind the video grid.
   Every panel inside (player wrapper, CRT frame, featured list, categories)
   paints its own chrome, so dropping this fill only clears the gaps between
   them and lets the page through. */
.cwd-stage--tvp .tvp-monitor-screen {
    background: transparent;
    /* The 1px #2a2a2a top rule read as an edge of the bezel while the screen
       was filled. With the fill gone it is a line floating across the page. */
    border-top: none;
}

/* ---- phone frame ----
   Ported from the copperwake feed page on greenfield-base
   (themes/copperwake/sfvv-r-feed.php), which is the reference treatment.
   Presentation only. The SFVV-R contract sanctions skinning via a wrapping
   stylesheet, so retargeting the wrap's 100dvh to a 9:16 column is framing,
   not a change to the interface.

   APP PAGE: greenfield locks its feed page to the viewport
   (body { height:100dvh; overflow:hidden }) so the ONLY scroller on the page is
   the feed. Without that the page scrolls behind a `scroll-snap: y mandatory`
   feed and every swipe fights a second scroller. That is the jank. This shell
   carries a topbar and a footer, so the lock is a flex column instead of a bare
   100dvh, but the rule it enforces is the same one. */
.cwd-body--app {
    height: 100dvh;
    overflow: hidden;
}

.cwd-body--app .cwd-shell {
    height: 100dvh;
    min-height: 0;
}

.cwd-body--app .cwd-stage {
    min-height: 0;
    padding: 1.5rem 1.75rem;
}

.cwd-body--app .cwd-stage-inner {
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Drive the frame off HEIGHT and let aspect-ratio derive the width. Setting
   width + max-height instead lets max-height win and silently break the 9:16,
   which letterboxes the clips.
   Overflow stays VISIBLE so the demo annotation can straddle the frame edge;
   the scroller clips its own rounded corners (see border-radius: inherit). */
.cwd-phone {
    height: 100%;
    aspect-ratio: 9 / 16;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 18px;
    border: 1px solid var(--border-medium);
    box-shadow: 0 24px 60px rgba(36, 57, 137, 0.18);
    background: #241f1c;
}

/* Resolve the height chain on all FOUR layers, as greenfield does. The feed is
   built as a full-viewport experience, so every viewport-locked ancestor needs
   retargeting to the frame.
   Miss #sfvv-r-root -> 100% resolves against auto, the feed grows to content
   height, and the cycle-restart logic loads batches forever (observed once:
   940 videos, 985,521px).
   Miss .sfvvr-feed  -> the scroller's own height is never pinned to the frame.
   Miss .sfvvr-slot  -> slots stay viewport-tall inside a shorter feed, so the
   clips letterbox and snapping lands off. */
.cwd-phone > #sfvv-r-root,
.cwd-phone .sfvvr-wrap,
.cwd-phone .sfvvr-feed,
.cwd-phone .sfvvr-slot {
    height: 100%;
}

/* Round the inner layers too, or their dark backgrounds peek through the
   frame's corner anti-aliasing as thin arcs. */
.cwd-phone > #sfvv-r-root,
.cwd-phone .sfvvr-wrap,
.cwd-phone .sfvvr-feed {
    border-radius: inherit;
}

.cwd-phone .sfvvr-wrap {
    background: transparent;
}

.cwd-phone .sfvvr-slide video {
    object-fit: cover;
}

/* Demo annotation: a note-paper sticky. Straddles the frame edge on
   desktop/tablet, sits fully inside on mobile. */
.sfvvr-note-tag {
    background: #fff6d9;
    color: #3e2a1e !important;
    text-shadow: none !important;
    padding: 10px 12px;
    border: 1px solid #e3d3a8;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(36, 31, 28, 0.25);
}

.cwd-phone .sfvvr-note-tag {
    left: -121px;
    top: 8%;
}

@media (max-width: 767px) {
    .cwd-phone .sfvvr-note-tag {
        left: 12px;
        top: 14%;
    }
}

@media (max-width: 40rem) {
    .cwd-phone {
        width: 100%;
        max-height: none;
        height: 100%;
        aspect-ratio: auto;
        border-radius: 12px;
    }
}

/* ---- index ---- */

.cwd-index {
    flex: 1;
    padding: 4.5rem 1.75rem 5rem;
    background:
        radial-gradient(80rem 40rem at 50% -20%, var(--bg-surface), transparent 70%),
        var(--bg-base);
}

.cwd-index-inner {
    max-width: var(--site-width-cap);
    margin: 0 auto;
}

.cwd-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin: 0 0 1rem;
}

.cwd-index h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 2.75rem;
    background: linear-gradient(100deg, var(--grad-deep), var(--grad-mid) 55%, var(--grad-peak));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cwd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: 1.25rem;
}

.cwd-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 300ms var(--ease-swoop),
                transform 300ms var(--ease-swoop),
                box-shadow 300ms var(--ease-swoop);
}

.cwd-card:hover,
.cwd-card:focus-visible {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(36, 57, 137, 0.10);
}

.cwd-card h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.625rem;
    color: var(--text-primary);
}

.cwd-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.cwd-card .cwd-tag {
    align-self: flex-start;
    margin-top: 1.5rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--bg-surface);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: var(--accent);
}

/* ---- footer ---- */

.cwd-foot {
    padding: 1.5rem 1.75rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.cwd-foot-inner {
    max-width: var(--site-width-cap);
    margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .cwd-card {
        transition: none;
    }
    .cwd-card:hover,
    .cwd-card:focus-visible {
        transform: none;
    }
}