/* ================================================================
   HELLBOX COMICS — GATE 0.2 RECOVERY
   LAPTOP/MOBILE POLISH + GLOBALIZATION FOUNDATION

   Loads AFTER style.css.

   Scope:
   - Preserve the working Gate 0.1 visual system.
   - Repair environmental-discovery reachability and hover geometry.
   - Tighten ordinary laptop/mobile composition.
   - Keep Press prototype readable while Press V2 remains future work.
   - Establish RTL/long-translation safety for the new static locale system.
   - Do NOT retune ultrawide/rotated-widescreen compositions yet.
   ================================================================ */


/* ----------------------------------------------------------------
   ENVIRONMENTAL DISCOVERY — REACHABILITY, NOT MAP PINS
   ---------------------------------------------------------------- */

/*
   The production art remains the interface.  Gate 0.1 already removed
   visible + markers.  Gate 0.2 therefore fixes only hit-area behavior.
*/

.lair-hotspot,
.obsession-hotspot,
.press-art-hotspot {
    z-index: 30;
}

/* Decorative overlays and hints must never steal a discovery click. */
.hero-blackout,
.hero-scene::before,
.hero-scene::after,
.obsession-wall::before,
.obsession-wall-hint,
.press-glow,
.machine-field {
    pointer-events: none !important;
}

/*
   Hero copy is presentation.  Only intentional controls inside it may
   receive pointer input.  This prevents invisible text boxes from
   stealing clicks from the artwork.
*/
.hero-inner,
.hero-meta,
.hero-scroll-note,
.hero-copy,
.system-label,
.hero-description {
    pointer-events: none !important;
}

.hero-logo-button,
.hero-actions,
.hero-actions a,
.hero-transmission,
.hero-transmission *,
.hero-copy a,
.hero-copy button {
    pointer-events: auto !important;
}

/*
   Gate 0.1 accidentally dropped translate(-50%, -50%) on theory-wall
   hover/focus.  That made a target jump when approached and could make
   the wall feel intermittent.  Preserve its measured art coordinate.
*/
.obsession-hotspot:hover,
.obsession-hotspot:focus-visible {
    transform:
        translate(-50%, -50%)
        scale(1.01) !important;
}

/*
   Standard non-ultrawide desktop/laptop hero: the highest measured targets can sit partly
   beneath the fixed header because the artwork itself begins behind it.
   Their invisible hit centers are lowered slightly into the usable art.
   The visual art is not moved.
*/
@media
(min-width: 761px)
and (min-aspect-ratio: 4 / 5)
and (max-aspect-ratio: 16 / 9) {

    /*
       Screenshot-verified laptop reachability pass.
       Several original art coordinates technically worked but sat beneath
       persistent interface layers:
       - Cabal / Pulse Byte were too close to the fixed header.
       - Pages landed beneath Harrow's transmission card.
       - Production copy lived beneath the large hero headline/actions.

       These targets stay on the same depicted objects/foreground evidence,
       but move to exposed portions of those objects so the art can actually
       teach the visitor where interaction exists.
    */

    .hotspot-cabal {
        left: 64.5%;
        top: max(16.5%, 150px);
        width: 92px;
        height: 84px;
    }

    .hotspot-monitor {
        left: 39.5%;
        top: max(18%, 160px);
        width: 110px;
        height: 90px;
    }

    .hotspot-pages {
        left: 45%;
        top: 82%;
        width: 112px;
        height: 92px;
    }

    .hotspot-redacted {
        left: 30%;
        top: 77%;
        width: 122px;
        height: 104px;
    }
}

/* Touch targets remain generous without revealing themselves as buttons. */
@media (hover: none), (pointer: coarse) {
    .lair-hotspot,
    .obsession-hotspot,
    .press-art-hotspot {
        min-width: 64px;
        min-height: 64px;
    }
}


/* ----------------------------------------------------------------
   FLOATING HARROW UI — PRESENT, NOT IN THE WAY
   ---------------------------------------------------------------- */

.harrow-orb {
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 180ms step-end !important;
}

body.floating-ui-suppressed .harrow-orb,
body.drawer-open .harrow-orb,
body.reader-open .harrow-orb,
body.mobile-menu-open .harrow-orb,
body.artwork-dragging .harrow-orb,
body.form-focus .harrow-orb {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(18px, 12px, 0) scale(0.92) !important;
}


/* ----------------------------------------------------------------
   THEORY TICKER — CONTROL NEVER COVERS THE THOUGHT
   ---------------------------------------------------------------- */

.obsession-strip {
    position: relative;
}

#tickerToggle,
.obsession-pause,
.ticker-toggle {
    position: absolute !important;
    z-index: 7;
    right: 10px !important;
    top: 50% !important;
    bottom: auto !important;

    transform: translateY(-50%) !important;

    min-width: 42px !important;
    min-height: 34px !important;
    padding: 0 10px !important;

    border: 1px solid rgba(255,255,255,0.32) !important;
    background: rgba(27,8,48,0.86) !important;
    color: #fff !important;

    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.obsession-track {
    padding-right: 92px !important;
}


/* ----------------------------------------------------------------
   PRESS — TEMPORARY GATE 0.2 STABILIZATION
   ---------------------------------------------------------------- */

.press-state-rail {
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.press-state,
.press-state-rail > * {
    scroll-snap-align: start;
}

/* The physical machine remains the visual instruction. */
.press-lever-label,
.press-lever-warning,
.press-lever-copy,
.press-lever-hint,
[data-press-lever-label],
[data-lever-copy],
#pressLeverLabel,
#pressLeverWarning,
#pressLeverHint {
    display: none !important;
}


/* ----------------------------------------------------------------
   STANDARD NON-ULTRAWIDE DESKTOP/LAPTOP — COMPRESS EMPTY SPACE
   Deliberately excludes ultrawides and rotated/tall display tuning.
   ---------------------------------------------------------------- */

@media
(min-width: 901px)
and (min-aspect-ratio: 4 / 5)
and (max-aspect-ratio: 16 / 9) {

    .manifesto-section,
    .archive-section,
    .evidence-section,
    .press-section,
    .harrow-section,
    .signals-section,
    .classified-section {
        min-height: 0 !important;
    }

    .manifesto-section {
        padding-top: clamp(74px, 6vw, 98px) !important;
        padding-bottom: clamp(74px, 6vw, 98px) !important;
    }

    .archive-section {
        padding-top: clamp(76px, 6vw, 102px) !important;
        padding-bottom: clamp(72px, 5.5vw, 94px) !important;
    }

    .evidence-section {
        padding-top: clamp(74px, 5.5vw, 94px) !important;
        padding-bottom: clamp(66px, 5vw, 88px) !important;
    }

    .press-section {
        padding-top: clamp(72px, 5.4vw, 92px) !important;
        padding-bottom: clamp(74px, 5.6vw, 96px) !important;
    }

    .harrow-section {
        padding-top: clamp(76px, 5.7vw, 98px) !important;
        padding-bottom: clamp(70px, 5.2vw, 90px) !important;
    }

    .signals-section {
        padding-top: clamp(70px, 5vw, 88px) !important;
        padding-bottom: clamp(72px, 5.2vw, 92px) !important;
    }

    .classified-section {
        padding-top: clamp(72px, 5.2vw, 92px) !important;
        padding-bottom: clamp(74px, 5.4vw, 96px) !important;
    }

    .exit-section {
        min-height: clamp(540px, 62vh, 720px) !important;
    }

    .press-stage {
        align-items: center !important;
    }

    .press-machine-zone {
        min-height: clamp(610px, 64vw, 760px) !important;
    }
}


/* ----------------------------------------------------------------
   MOBILE REFINEMENT
   ---------------------------------------------------------------- */

@media (max-width: 760px) {

    .section-number {
        margin-bottom: 26px !important;
    }

    .manifesto-section,
    .archive-section,
    .evidence-section,
    .press-section,
    .harrow-section,
    .signals-section,
    .classified-section {
        min-height: 0 !important;
        padding-top: 68px !important;
        padding-bottom: 72px !important;
    }

    .harrow-response {
        max-height: min(68dvh, 620px);
        overflow-y: auto;
    }

    .signals-section {
        padding-top: 64px !important;
    }

    .signal-card {
        min-height: 134px !important;
    }

    #tickerToggle,
    .obsession-pause,
    .ticker-toggle {
        right: 6px !important;
        min-width: 38px !important;
        padding: 0 7px !important;
        font-size: 10px !important;
    }

    .obsession-track {
        padding-right: 72px !important;
    }
}


/* ----------------------------------------------------------------
   GLOBALIZATION FOUNDATION
   Translation source of truth is static locale JSON.
   Google Translation assists production; it never translates live DOM.
   ---------------------------------------------------------------- */

html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] .site-header,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .header-network,
html[dir="rtl"] .terminal-top,
html[dir="rtl"] .transmission-header,
html[dir="rtl"] .reader-controls {
    direction: rtl;
}

html[dir="rtl"] .hero-copy,
html[dir="rtl"] .drawer-copy,
html[dir="rtl"] .harrow-file,
html[dir="rtl"] .section-intro {
    text-align: right;
}

/* Longer translated strings must wrap instead of escaping controls. */
button,
a,
.system-label,
.section-number,
.hero-meta,
.transmission-label,
.header-nav,
.header-network,
.footer-status,
.footer-bottom,
.access-setting,
.mobile-nav a,
.mobile-nav button {
    overflow-wrap: anywhere;
}


/* ----------------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------------- */

@media (prefers-contrast: more) {
    .lair-hotspot:focus-visible,
    .obsession-hotspot:focus-visible,
    .press-art-hotspot:focus-visible {
        outline-width: 3px !important;
    }
}

@media (forced-colors: active) {
    .lair-hotspot:focus-visible,
    .obsession-hotspot:focus-visible,
    .press-art-hotspot:focus-visible {
        outline: 3px solid ButtonText !important;
    }
}

/* ----------------------------------------------------------------
   DESKTOP ACCESS / LANGUAGE ENTRY
   The selector itself remains inside the existing accessibility panel.
   This button simply makes that panel reachable from the primary header
   on ordinary desktop/laptop layouts.
   ---------------------------------------------------------------- */

.header-access-button {
    min-height: 38px;
    padding: 0 2px 7px;

    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: #b2adb5;

    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;

    cursor: pointer;
    transition:
        color 0.18s ease,
        border-color 0.18s ease;
}

.header-access-button:hover,
.header-access-button:focus-visible {
    color: #fff;
    border-bottom-color: var(--purple-hot);
}

@media (max-width: 760px) {
    .header-access-button {
        display: none;
    }
}

/* ----------------------------------------------------------------
   GATE 0.2 - STANDARD DESKTOP/LAPTOP PRESS STRUCTURE
   Screenshot audit correction 2026-08-29

   IMPORTANT:
   Gate 0.1 desktop begins at 761px. The previous repair incorrectly began
   at 901px, so on some laptop/zoom/device-scale combinations the broken
   legacy Press rules won and the HARROW // MACHINE console remained an
   absolute overlay.

   This pass starts at the actual desktop breakpoint with no arbitrary pixel-width ceiling and makes the viewport
   itself the right-column grid item. The machine console is a separate,
   normal-flow row beneath the machine art. It cannot overlap the left
   mini-terminal.
   ---------------------------------------------------------------- */

@media
(min-width: 761px)
and (min-aspect-ratio: 4 / 5)
and (max-aspect-ratio: 16 / 9) {

    html {
        scroll-padding-top: calc(var(--header-h) + 34px);
    }

    section[id] {
        scroll-margin-top: calc(var(--header-h) + 34px) !important;
    }

    #press {
        scroll-margin-top: calc(var(--header-h) + 42px) !important;
    }

    .press-stage {
        display: grid !important;

        grid-template-columns:
            minmax(290px, 0.56fr)
            minmax(0, 1.44fr) !important;

        grid-template-rows:
            auto
            auto !important;

        column-gap: clamp(26px, 3vw, 46px) !important;
        row-gap: 14px !important;

        align-items: start !important;
    }

    .press-copy {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;

        min-width: 0;
        align-self: start !important;
    }

    /*
       Critical structural correction:
       Gate 0.1 globally made this wrapper display:contents. Override that
       on desktop so the whole machine art is one predictable grid item.
    */
    .press-machine-viewport {
        display: block !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        overflow: visible !important;
    }

    .press-machine-zone {
        position: relative !important;

        width: 100% !important;
        min-height: 0 !important;

        aspect-ratio: 1536 / 1024;

        margin: 0 !important;

        isolation: isolate;
    }

    .press-machine {
        position: absolute !important;
        inset: 0 !important;

        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: 100% !important;

        transform: none !important;
    }

    .press-machine-art {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;
    }

    /*
       The console is a sibling of press-machine-viewport in the DOM.
       Make it the second row of the RIGHT column. No absolute positioning,
       no negative margins, no overlap with press-mini-terminal.
    */
    .press-machine-console {
        position: relative !important;

        grid-column: 2 !important;
        grid-row: 2 !important;

        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        transform: none !important;

        display: grid !important;
        grid-template-columns:
            minmax(220px, 0.72fr)
            minmax(0, 1.28fr) !important;

        align-self: start !important;

        z-index: 4 !important;

        box-shadow:
            0 20px 52px rgba(0,0,0,0.42) !important;
    }

    .machine-console-top {
        grid-column: 1 / -1 !important;
    }

    .machine-console-message {
        min-height: 100px !important;

        border-right:
            1px solid var(--line) !important;
    }

    .machine-console-readouts {
        border-top: 0 !important;

        align-self: stretch !important;
    }

    .machine-console-readouts > div {
        min-height: 100px !important;
    }

    .press-state-rail {
        position: relative;

        z-index: 3;

        margin-top: 20px !important;
    }
}