/* ==========================================================================
   BALOCH SM — TEMPORAL 4D VISUAL SYSTEM
   ==========================================================================

   FILE:
   public_html/assets/css/motion/temporal-4d.css

   WEBSITE:
   https://investt.online

   PROJECT:
   BALOCH SM — FOREX LIVE INTELLIGENCE PLATFORM

   VERSION:
   1.0.0

   ==========================================================================
   PURPOSE

   Visualize the passage of time through:

   01. Historical market events
   02. Present market conditions
   03. Upcoming scheduled events
   04. Recorded event outcomes
   05. CPI and economic countdown displays
   06. Forex session timelines
   07. Confirmed signal chronology
   08. Signal validity windows
   09. Notification history
   10. Thirty-second popup time presentation
   11. Technical-analysis observation history
   12. Feed freshness information
   13. Risk-window indicators
   14. Subscription expiry presentation
   15. Payment review chronology
   16. Administrator audit events
   17. Timeline progress indicators
   18. Optional decorative temporal depth
   19. Mobile and touchscreen layouts
   20. Reduced-motion and accessibility support

   ==========================================================================
   WHAT "TEMPORAL 4D" MEANS

   This is a time-oriented visual design metaphor.

   It is NOT:

   - A literal four-dimensional graphics engine.
   - A predictive simulation of future market prices.
   - A historical market-data generator.
   - An independent timer or clock.
   - A replacement for the application event scheduler.

   The four temporal presentation contexts are:

       HISTORICAL — recorded past information
       CURRENT    — server-confirmed current information
       UPCOMING   — verified future schedules
       RESOLVED   — events with recorded outcomes

   Time coordinates, status and progress must come from
   authenticated services or verified frontend calculations.

   ==========================================================================
   COMPATIBLE COMPONENTS

   #price-chart
   #market-tabs
   #economic-events
   #recent-signals
   #signal-popup-stack
   #notice-panel
   #receipt-modal

   .cpi-countdown
   .economic-countdown
   .economic-event
   .notification-item
   .signal-popup
   .receipt-card
   .admin-audit-record

   ==========================================================================
   OPT-IN CSS CLASSES

   .temporal-4d
   .temporal-4d-scene
   .temporal-4d-plane
   .temporal-4d-timeline
   .temporal-4d-event
   .temporal-4d-marker
   .temporal-4d-time
   .temporal-4d-countdown
   .temporal-4d-progress
   .temporal-4d-scrubber
   .temporal-4d-window
   .temporal-4d-card
   .temporal-4d-band
   .temporal-4d-axis
   .temporal-4d-session
   .temporal-4d-ambient
   .temporal-4d-static

   ==========================================================================
   VERIFIED STATE ATTRIBUTES

   data-phase="historical"
   data-phase="current"
   data-phase="upcoming"
   data-phase="resolved"
   data-phase="unknown"

   data-time-state="scheduled"
   data-time-state="active"
   data-time-state="completed"
   data-time-state="expired"
   data-time-state="delayed"
   data-time-state="cancelled"
   data-time-state="stale"
   data-time-state="unverified"

   These are OPTIONAL PRESENTATION ATTRIBUTES.

   They are not assumed database columns or API fields.

   Frontend code must assign them only from valid data.

   ==========================================================================
   LOAD ORDER

   reset.css
   tokens.css
   themes/baloch-dark.css OR themes/baloch-light.css
   themes/market-colors.css
   layout.css
   components.css
   page-specific CSS
   notifications.css
   signal-receipt.css
   responsive.css
   accessibility.css
   motion/depth-3d.css
   motion/temporal-4d.css

   LAST:
   motion/reduced-motion.css

   ==========================================================================
   NON-NEGOTIABLE TRADING SAFETY

   - Forex LIVE only.
   - Never fabricate OHLCV candles.
   - Never manufacture previous signals.
   - Never predict a CPI result through CSS.
   - Never show an unverified event as confirmed.
   - Never imply a disconnected feed is LIVE.
   - Never distort chart axes or candle coordinates.
   - Never switch the chart pair automatically.
   - Never reveal another market's signal details.
   - Never control payment/subscription authorization.
   - Never use CSS animation to calculate elapsed time.

   ========================================================================== */


/* ==========================================================================
   01. TEMPORAL DESIGN TOKENS
   ========================================================================== */

:root {

    /* Perspective for opt-in decorative layers */

    --bsm-t4d-perspective: 1500px;

    --bsm-t4d-depth-near: 12px;

    --bsm-t4d-depth-mid: 6px;

    --bsm-t4d-depth-far: -8px;


    /* Layout */

    --bsm-t4d-gap:
        var(--bsm-space-4, 16px);

    --bsm-t4d-event-gap:
        var(--bsm-space-5, 20px);

    --bsm-t4d-padding:
        var(--bsm-space-4, 16px);

    --bsm-t4d-radius:
        var(--bsm-radius-lg, 16px);

    --bsm-t4d-track-width: 2px;

    --bsm-t4d-marker-size: 13px;

    --bsm-t4d-axis-height: 6px;


    /* Backgrounds */

    --bsm-t4d-bg:
        var(--bsm-bg-surface, #10263A);

    --bsm-t4d-bg-raised:
        var(--bsm-bg-surface-raised, #18354D);

    --bsm-t4d-bg-inset:
        var(--bsm-bg-surface-inset, #0D2032);


    /* Typography */

    --bsm-t4d-text:
        var(--bsm-text-primary, #F4F8FC);

    --bsm-t4d-muted:
        var(--bsm-text-secondary, #C9D7E5);

    --bsm-t4d-subtle:
        var(--bsm-text-muted, #A5B8C9);


    /* Borders */

    --bsm-t4d-border:
        var(
            --bsm-border-default,
            rgba(165, 184, 201, 0.26)
        );

    --bsm-t4d-border-soft:
        var(
            --bsm-border-subtle,
            rgba(165, 184, 201, 0.15)
        );


    /* Historical context */

    --bsm-t4d-past:
        var(--bsm-text-muted, #A5B8C9);

    --bsm-t4d-past-bg:
        var(--bsm-bg-surface-inset, #0D2032);


    /* Current context */

    --bsm-t4d-present:
        var(--bsm-color-primary, #35EAFF);

    --bsm-t4d-present-bg:
        var(
            --bsm-color-primary-soft,
            rgba(53, 234, 255, 0.09)
        );

    --bsm-t4d-present-border:
        var(
            --bsm-color-primary-border,
            rgba(53, 234, 255, 0.32)
        );


    /* Upcoming context */

    --bsm-t4d-future:
        var(--bsm-color-accent, #8270FF);

    --bsm-t4d-future-bg:
        var(
            --bsm-color-accent-soft,
            rgba(130, 112, 255, 0.12)
        );

    --bsm-t4d-future-border:
        var(
            --bsm-color-accent-border,
            rgba(130, 112, 255, 0.32)
        );


    /* Resolved context */

    --bsm-t4d-resolved:
        var(--bsm-color-success, #5CE4C7);

    --bsm-t4d-resolved-bg:
        var(
            --bsm-color-success-soft,
            rgba(92, 228, 199, 0.11)
        );


    /* Uncertain / warning */

    --bsm-t4d-warning:
        var(--bsm-color-warning, #FFCB69);

    --bsm-t4d-danger:
        var(--bsm-color-danger, #FF697C);


    /* Timeline track */

    --bsm-t4d-track:
        var(
            --bsm-border-strong,
            rgba(201, 215, 229, 0.46)
        );


    /* Elevation */

    --bsm-t4d-shadow:
        var(
            --bsm-shadow-md,
            0 8px 24px rgba(0, 0, 0, 0.20)
        );


    /* Motion */

    --bsm-t4d-motion-fast:
        var(--bsm-motion-fast, 120ms);

    --bsm-t4d-motion:
        var(--bsm-motion-medium, 240ms);

    --bsm-t4d-motion-slow:
        var(--bsm-motion-slow, 400ms);

    --bsm-t4d-easing:
        var(
            --bsm-ease-out,
            cubic-bezier(0.2, 0.7, 0.25, 1)
        );

}


/* ==========================================================================
   02. LIGHT / DARK THEME INTEGRATION
   ==========================================================================

   Semantic variables automatically inherit from the
   selected Baloch SM base theme.

   Additional light-theme adjustments apply only when
   a class-based or data-theme selection is present.
   ========================================================================== */

:is(
    html[data-theme="baloch-light"],
    html.theme-baloch-light,
    body[data-theme="baloch-light"],
    body.theme-baloch-light
) {

    --bsm-t4d-shadow:
        0 8px 26px rgba(19, 40, 60, 0.09);

}

:is(
    html[data-theme="baloch-dark"],
    html.theme-baloch-dark,
    body[data-theme="baloch-dark"],
    body.theme-baloch-dark
) {

    --bsm-t4d-shadow:
        0 9px 28px rgba(0, 0, 0, 0.24);

}


/* ==========================================================================
   03. BASE TEMPORAL CONTAINER
   ==========================================================================

   Does not force a specific display mode onto existing
   dashboard or administration components.
   ========================================================================== */

.temporal-4d,
.bsm-temporal-4d {
    position: relative;

    min-width: 0;

    max-width: 100%;

    color: var(--bsm-t4d-text);
}


/* ==========================================================================
   04. TEMPORAL SCENE
   ==========================================================================

   Perspective is limited to explicitly opted-in scenes.

   No perspective is applied to the application body,
   chart canvas, price axis or market-data table.
   ========================================================================== */

.temporal-4d-scene {
    position: relative;

    min-width: 0;

    perspective: var(--bsm-t4d-perspective);

    perspective-origin: 50% 40%;
}


/* ==========================================================================
   05. TEMPORAL VISUAL PLANE
   ==========================================================================

   Optional decorative depth layering.

   Use only for small presentation cards and ornaments.

   Do not apply to chart data, prices, receipts or forms.
   ========================================================================== */

.temporal-4d-plane {
    position: relative;

    transform-style: preserve-3d;

    backface-visibility: hidden;
}

.temporal-4d-plane[data-plane="near"] {
    transform:
        translateZ(var(--bsm-t4d-depth-near));
}

.temporal-4d-plane[data-plane="middle"] {
    transform:
        translateZ(var(--bsm-t4d-depth-mid));
}

.temporal-4d-plane[data-plane="far"] {
    transform:
        translateZ(var(--bsm-t4d-depth-far));
}


/* ==========================================================================
   06. TEMPORAL CARD FOUNDATION
   ========================================================================== */

.temporal-4d-card {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: var(--bsm-t4d-gap);

    min-width: 0;

    padding: var(--bsm-t4d-padding);

    border:
        1px solid
        var(--bsm-t4d-border);

    border-radius: var(--bsm-t4d-radius);

    background-color: var(--bsm-t4d-bg);

    color: var(--bsm-t4d-text);

    box-shadow: var(--bsm-t4d-shadow);
}


/* ==========================================================================
   07. TEMPORAL PHASE COLOR CONTRACT
   ==========================================================================

   These are visual variables only.

   The application must explicitly set the phase.

   An unspecified event must never automatically inherit
   a "current" or "verified" state.
   ========================================================================== */

.temporal-4d-card,
.temporal-4d-event,
.temporal-4d-marker,
.temporal-4d-band {
    --bsm-t4d-phase-color:
        var(--bsm-t4d-past);

    --bsm-t4d-phase-bg:
        var(--bsm-t4d-bg-inset);

    --bsm-t4d-phase-border:
        var(--bsm-t4d-border);
}


/* ==========================================================================
   08. HISTORICAL PHASE
   ========================================================================== */

.temporal-4d [data-phase="historical"],
.temporal-4d-card[data-phase="historical"],
.temporal-4d-event[data-phase="historical"] {
    --bsm-t4d-phase-color:
        var(--bsm-t4d-past);

    --bsm-t4d-phase-bg:
        var(--bsm-t4d-past-bg);

    --bsm-t4d-phase-border:
        var(--bsm-t4d-border);
}


/* ==========================================================================
   09. CURRENT PHASE
   ==========================================================================

   "Current" requires verified server/current-time state.

   The CSS color does not prove a source is LIVE.
   ========================================================================== */

.temporal-4d [data-phase="current"],
.temporal-4d-card[data-phase="current"],
.temporal-4d-event[data-phase="current"] {
    --bsm-t4d-phase-color:
        var(--bsm-t4d-present);

    --bsm-t4d-phase-bg:
        var(--bsm-t4d-present-bg);

    --bsm-t4d-phase-border:
        var(--bsm-t4d-present-border);
}


/* ==========================================================================
   10. UPCOMING PHASE
   ==========================================================================

   Future events must have a verified scheduled timestamp.
   ========================================================================== */

.temporal-4d [data-phase="upcoming"],
.temporal-4d-card[data-phase="upcoming"],
.temporal-4d-event[data-phase="upcoming"] {
    --bsm-t4d-phase-color:
        var(--bsm-t4d-future);

    --bsm-t4d-phase-bg:
        var(--bsm-t4d-future-bg);

    --bsm-t4d-phase-border:
        var(--bsm-t4d-future-border);
}


/* ==========================================================================
   11. RESOLVED PHASE
   ==========================================================================

   A resolved event must have an actual recorded resolution.

   A resolved signal is not automatically a winning signal.
   ========================================================================== */

.temporal-4d [data-phase="resolved"],
.temporal-4d-card[data-phase="resolved"],
.temporal-4d-event[data-phase="resolved"] {
    --bsm-t4d-phase-color:
        var(--bsm-t4d-resolved);

    --bsm-t4d-phase-bg:
        var(--bsm-t4d-resolved-bg);

    --bsm-t4d-phase-border:
        var(
            --bsm-color-success-border,
            var(--bsm-t4d-border)
        );
}


/* ==========================================================================
   12. UNKNOWN / UNVERIFIED PHASE
   ========================================================================== */

.temporal-4d [data-phase="unknown"],
.temporal-4d-card[data-phase="unknown"],
.temporal-4d-event[data-phase="unknown"],
.temporal-4d-event[data-time-state="unverified"] {
    --bsm-t4d-phase-color:
        var(--bsm-text-muted, #A5B8C9);

    --bsm-t4d-phase-bg:
        var(--bsm-bg-surface-inset, #0D2032);

    --bsm-t4d-phase-border:
        var(--bsm-border-default, #3B5A70);
}


/* ==========================================================================
   13. APPLY PHASE COLORS TO CARDS
   ========================================================================== */

.temporal-4d-card[data-phase] {
    border-color:
        var(--bsm-t4d-phase-border);

    background-image:
        linear-gradient(
            145deg,
            var(--bsm-t4d-phase-bg),
            transparent 65%
        );
}


/* ==========================================================================
   14. PHASE BADGE
   ==========================================================================

   The actual label must be rendered in HTML.

   Color alone is insufficient to convey event status.
   ========================================================================== */

.temporal-4d-phase-badge {
    display: inline-flex;
    align-items: center;

    gap: var(--bsm-space-2, 8px);

    width: fit-content;
    max-width: 100%;

    min-height: 28px;

    padding:
        var(--bsm-space-1, 4px)
        var(--bsm-space-3, 12px);

    border:
        1px solid
        var(--bsm-t4d-phase-border);

    border-radius:
        var(--bsm-radius-pill, 999px);

    background-color:
        var(--bsm-t4d-phase-bg);

    color:
        var(--bsm-t4d-phase-color);

    font-size:
        var(--bsm-text-xs, 0.75rem);

    font-weight:
        var(--bsm-weight-bold, 700);

    overflow-wrap: anywhere;
}


/* ==========================================================================
   15. VERTICAL TEMPORAL TIMELINE
   ==========================================================================

   Items must be real DOM records.

   Do not generate event entries with pseudo-elements.
   ========================================================================== */

.temporal-4d-timeline {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: var(--bsm-t4d-event-gap);

    width: 100%;

    min-width: 0;

    margin: 0;

    padding:
        var(--bsm-space-2, 8px)
        0;

    list-style: none;
}


/* ==========================================================================
   16. TIMELINE TRACK
   ==========================================================================

   Decorative line only.

   The line does not indicate the passage of real seconds.
   ========================================================================== */

.temporal-4d-timeline::before {
    content: "";

    position: absolute;

    inset-block:
        var(--bsm-space-2, 8px);

    inset-inline-start:
        calc(
            var(--bsm-t4d-marker-size) / 2
            - var(--bsm-t4d-track-width) / 2
        );

    width: var(--bsm-t4d-track-width);

    background-color: var(--bsm-t4d-track);

    opacity: 0.55;

    pointer-events: none;
}


/* ==========================================================================
   17. TIMELINE EVENT
   ========================================================================== */

.temporal-4d-timeline > .temporal-4d-event {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-2, 8px);

    min-width: 0;

    margin-inline-start:
        calc(
            var(--bsm-t4d-marker-size)
            + var(--bsm-space-4, 16px)
        );

    padding:
        var(--bsm-space-3, 12px)
        var(--bsm-space-4, 16px);

    border:
        1px solid
        var(--bsm-t4d-phase-border);

    border-radius:
        var(--bsm-radius-md, 12px);

    background-color: var(--bsm-t4d-bg);

    color: var(--bsm-t4d-text);
}


/* ==========================================================================
   18. TIMELINE MARKER
   ==========================================================================

   The marker is purely visual.

   A date and event description must exist in the DOM.
   ========================================================================== */

.temporal-4d-timeline > .temporal-4d-event::before {
    content: "";

    position: absolute;

    inset-block-start:
        var(--bsm-space-4, 16px);

    inset-inline-start:
        calc(
            -1 * (
                var(--bsm-t4d-marker-size)
                + var(--bsm-space-4, 16px)
            )
        );

    width: var(--bsm-t4d-marker-size);
    height: var(--bsm-t4d-marker-size);

    border:
        2px solid
        var(--bsm-t4d-bg);

    border-radius: 50%;

    background-color:
        var(--bsm-t4d-phase-color);

    box-shadow:
        0 0 0 2px
        var(--bsm-t4d-phase-border);

    pointer-events: none;
}


/* ==========================================================================
   19. TIMELINE EVENT HEADING
   ========================================================================== */

.temporal-4d-event-title {
    margin: 0;

    color: var(--bsm-t4d-text);

    font-size:
        var(--bsm-text-base-sm, 0.9375rem);

    font-weight:
        var(--bsm-weight-bold, 700);

    line-height: 1.4;

    overflow-wrap: break-word;
}


/* ==========================================================================
   20. TIME LABELS
   ==========================================================================

   Time values must be real data.

   Prefer native <time datetime="..."> markup.

   JavaScript must format timezone-aware timestamps.
   ========================================================================== */

.temporal-4d-time,
.temporal-4d-timestamp,
.temporal-4d-event time {
    color: var(--bsm-t4d-muted);

    font-family:
        var(
            --bsm-font-financial,
            ui-monospace,
            monospace
        );

    font-size:
        var(--bsm-text-xs, 0.75rem);

    font-variant-numeric: tabular-nums;

    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* ==========================================================================
   21. TIMEZONE LABELS
   ==========================================================================

   UTC and localized time must be explicitly identified.

   CSS cannot infer the current timezone of an event.
   ========================================================================== */

.temporal-4d-timezone,
.temporal-4d-time-note {
    color: var(--bsm-t4d-subtle);

    font-size:
        var(--bsm-text-xs, 0.75rem);

    line-height: 1.5;
}


/* ==========================================================================
   22. HORIZONTAL TIME AXIS
   ==========================================================================

   An optional time-axis visualization.

   Tick positions must be computed from verified timestamps.

   The CSS track itself does not represent a specific date
   range unless the application supplies one.
   ========================================================================== */

.temporal-4d-axis {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    min-width: 0;

    min-height: 24px;
}

.temporal-4d-axis-track {
    position: relative;

    width: 100%;

    height: var(--bsm-t4d-axis-height);

    border-radius:
        var(--bsm-radius-pill, 999px);

    background-color: var(--bsm-t4d-border-soft);
}


/* ==========================================================================
   23. TIME AXIS MARKER
   ==========================================================================

   Marker positioning belongs to the frontend.

   No default "now" position is invented here.
   ========================================================================== */

.temporal-4d-axis-marker {
    position: absolute;

    inset-block-start: 50%;

    width: 10px;
    height: 10px;

    border:
        2px solid
        var(--bsm-t4d-bg);

    border-radius: 50%;

    background-color:
        var(--bsm-t4d-phase-color);

    transform: translateY(-50%);
}


/* ==========================================================================
   24. TEMPORAL PROGRESS TRACK
   ==========================================================================

   IMPORTANT:

   A progress track is hidden until its application
   explicitly supplies a ready/verified progress state.

   This avoids presenting a fake default countdown.

   Expected DOM:

   .temporal-4d-progress[data-progress-state="ready"]

   The frontend supplies:

       --bsm-temporal-progress: number from 0 to 1

   The value must come from actual timestamps.
   ========================================================================== */

.temporal-4d-progress {
    display: none;

    width: 100%;

    height: 7px;

    border-radius:
        var(--bsm-radius-pill, 999px);

    background-color:
        var(--bsm-t4d-border-soft);

    overflow: hidden;
}

.temporal-4d-progress[data-progress-state="ready"] {
    display: block;
}


/* ==========================================================================
   25. PROGRESS FILL
   ==========================================================================

   JavaScript must calculate real progress.

   The fallback scale is zero, not a fabricated value.

   The frontend must set data-progress-state only when
   the corresponding progress value is valid.
   ========================================================================== */

.temporal-4d-progress-fill {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    background-color: var(--bsm-t4d-present);

    transform-origin: left center;

    transform:
        scaleX(
            clamp(
                0,
                var(--bsm-temporal-progress, 0),
                1
            )
        );

    transition:
        transform
        var(--bsm-t4d-motion)
        linear;
}


/* ==========================================================================
   26. PROGRESS DIRECTION
   ==========================================================================

   The bar can indicate actual elapsed or remaining time.

   The frontend should include a visible label identifying
   which interpretation is being displayed.
   ========================================================================== */

.temporal-4d-progress[data-progress-kind="remaining"]
    .temporal-4d-progress-fill {
    background-color: var(--bsm-t4d-future);
}

.temporal-4d-progress[data-progress-kind="elapsed"]
    .temporal-4d-progress-fill {
    background-color: var(--bsm-t4d-present);
}


/* ==========================================================================
   27. EXPIRED / STALE TIME STATE
   ==========================================================================

   The application must mark expired or stale records
   using actual server-time comparisons.
   ========================================================================== */

.temporal-4d-event[data-time-state="expired"],
.temporal-4d-event[data-time-state="stale"],
.temporal-4d-card[data-time-state="expired"],
.temporal-4d-card[data-time-state="stale"] {
    border-style: dashed;

    border-color:
        var(
            --bsm-color-warning-border,
            var(--bsm-t4d-border)
        );

    background-image: none;
}


/* ==========================================================================
   28. DELAYED / CANCELLED EVENTS
   ========================================================================== */

.temporal-4d-event[data-time-state="delayed"],
.temporal-4d-card[data-time-state="delayed"] {
    --bsm-t4d-phase-color:
        var(--bsm-t4d-warning);

    --bsm-t4d-phase-bg:
        var(
            --bsm-color-warning-soft,
            var(--bsm-t4d-bg-inset)
        );

    --bsm-t4d-phase-border:
        var(
            --bsm-color-warning-border,
            var(--bsm-t4d-border)
        );
}

.temporal-4d-event[data-time-state="cancelled"],
.temporal-4d-card[data-time-state="cancelled"] {
    --bsm-t4d-phase-color:
        var(--bsm-t4d-danger);

    --bsm-t4d-phase-bg:
        var(
            --bsm-color-danger-soft,
            var(--bsm-t4d-bg-inset)
        );

    --bsm-t4d-phase-border:
        var(
            --bsm-color-danger-border,
            var(--bsm-t4d-border)
        );
}


/* ==========================================================================
   29. EVENT STATUS LABEL
   ========================================================================== */

.temporal-4d-event-status {
    display: inline-flex;
    align-items: center;

    gap: var(--bsm-space-2, 8px);

    width: fit-content;

    min-height: 28px;

    padding:
        var(--bsm-space-1, 4px)
        var(--bsm-space-3, 12px);

    border:
        1px solid
        var(--bsm-t4d-phase-border);

    border-radius:
        var(--bsm-radius-pill, 999px);

    background-color:
        var(--bsm-t4d-phase-bg);

    color:
        var(--bsm-t4d-phase-color);

    font-size:
        var(--bsm-text-xs, 0.75rem);

    font-weight:
        var(--bsm-weight-semibold, 600);
}


/* ==========================================================================
   30. TEMPORAL INFORMATION BAND
   ==========================================================================

   This band can visually group historical, current,
   upcoming or resolved records.

   It must contain actual records provided by the app.
   ========================================================================== */

.temporal-4d-band {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: var(--bsm-space-3, 12px);

    min-width: 0;

    padding:
        var(--bsm-space-3, 12px)
        var(--bsm-space-4, 16px);

    border:
        1px solid
        var(--bsm-t4d-phase-border);

    border-inline-start:
        3px solid
        var(--bsm-t4d-phase-color);

    border-radius:
        var(--bsm-radius-md, 12px);

    background-color:
        var(--bsm-t4d-phase-bg);

    color: var(--bsm-t4d-text);
}


/* ==========================================================================
   31. CPI COUNTDOWN PRESENTATION
   ==========================================================================

   Compatible with existing:

   .cpi-countdown
   .economic-countdown
   .countdown-grid
   .countdown-cell
   .countdown-value
   .countdown-label

   Only explicit .temporal-4d-countdown elements receive
   these additional time-depth presentation rules.

   Actual countdown calculations remain in JavaScript.
   ========================================================================== */

.temporal-4d-countdown,
.cpi-countdown.temporal-4d-countdown,
.economic-countdown.temporal-4d-countdown {
    min-width: 0;

    padding: var(--bsm-space-4, 16px);

    border:
        1px solid
        var(
            --bsm-news-countdown-border,
            var(--bsm-t4d-present-border)
        );

    border-radius: var(--bsm-t4d-radius);

    background-color:
        var(
            --bsm-news-countdown-bg,
            var(--bsm-t4d-present-bg)
        );

    color: var(--bsm-t4d-text);
}


/* ==========================================================================
   32. COUNTDOWN UNIT CARDS
   ==========================================================================

   Supports:

   Days
   Hours
   Minutes
   Seconds

   Unit names must be actual HTML text.
   ========================================================================== */

.temporal-4d-countdown
    :is(
        .countdown-cell,
        .countdown-unit
    ) {
    min-width: 0;

    padding: var(--bsm-space-3, 12px);

    border:
        1px solid
        var(--bsm-t4d-border-soft);

    border-radius:
        var(--bsm-radius-md, 12px);

    background-color:
        var(--bsm-t4d-bg);
}


/* ==========================================================================
   33. COUNTDOWN DIGITS
   ==========================================================================

   Monospaced/tabular digits reduce visual layout jumps.

   CSS does not advance these digits.
   ========================================================================== */

.temporal-4d-countdown
    .countdown-value,
.temporal-4d-countdown-value {
    direction: ltr;

    color: var(--bsm-t4d-text);

    font-family:
        var(
            --bsm-font-financial,
            ui-monospace,
            monospace
        );

    font-variant-numeric:
        tabular-nums lining-nums;

    font-weight:
        var(--bsm-weight-bold, 700);

    line-height: 1.15;
}


/* ==========================================================================
   34. COUNTDOWN UNIT LABELS
   ========================================================================== */

.temporal-4d-countdown
    .countdown-label,
.temporal-4d-countdown-label {
    color: var(--bsm-t4d-muted);

    font-size:
        var(--bsm-text-xs, 0.75rem);

    line-height: 1.35;
}


/* ==========================================================================
   35. CPI EVENT TEMPORAL STATE
   ==========================================================================

   Integrates with #economic-events.

   Event state must originate from the economic calendar
   and verified time synchronization.

   A high-impact event is not a guaranteed price movement.
   ========================================================================== */

#economic-events
    .economic-event.temporal-4d-event,
#economic-events
    .cpi-event.temporal-4d-event {
    border-inline-start-width: 3px;
}

#economic-events
    .temporal-4d-event[data-time-state="scheduled"] {
    border-inline-start-color:
        var(--bsm-t4d-future);
}

#economic-events
    .temporal-4d-event[data-time-state="delayed"] {
    border-inline-start-color:
        var(--bsm-t4d-warning);
}

#economic-events
    .temporal-4d-event[data-time-state="completed"] {
    border-inline-start-color:
        var(--bsm-t4d-resolved);
}


/* ==========================================================================
   36. CPI RELEASE WARNING WINDOW
   ==========================================================================

   Risk decisions belong to private services.

   Styling cannot automatically block signals or decide
   an event risk window.

   The application must provide the data-time-state.
   ========================================================================== */

.temporal-4d-window {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-3, 12px);

    min-width: 0;

    padding: var(--bsm-space-4, 16px);

    border:
        1px solid
        var(--bsm-t4d-border);

    border-radius: var(--bsm-t4d-radius);

    background-color: var(--bsm-t4d-bg-inset);
}

.temporal-4d-window[data-time-state="active"] {
    border-color:
        var(
            --bsm-color-warning-border,
            var(--bsm-t4d-warning)
        );

    background-color:
        var(
            --bsm-color-warning-soft,
            var(--bsm-t4d-bg-inset)
        );
}

.temporal-4d-window[data-time-state="cancelled"] {
    border-color:
        var(
            --bsm-color-danger-border,
            var(--bsm-t4d-danger)
        );
}


/* ==========================================================================
   37. FOREX MARKET SESSION TIMELINE
   ==========================================================================

   Forex sessions may be represented visually after
   their times are calculated from real exchange schedules.

   DST changes must be handled by the application.

   A time segment does not automatically prove that a
   provider is connected or the market is currently open.
   ========================================================================== */

.temporal-4d-session {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-2, 8px);

    min-width: 0;

    padding: var(--bsm-space-3, 12px);

    border:
        1px solid
        var(--bsm-t4d-border);

    border-radius:
        var(--bsm-radius-md, 12px);

    background-color: var(--bsm-t4d-bg);
}


/* ==========================================================================
   38. SESSION STATUS COLORS
   ========================================================================== */

.temporal-4d-session[data-time-state="active"] {
    border-color: var(--bsm-t4d-present-border);
}

.temporal-4d-session[data-time-state="scheduled"] {
    border-color: var(--bsm-t4d-future-border);
}

.temporal-4d-session[data-time-state="completed"] {
    border-color: var(--bsm-t4d-border);
}

.temporal-4d-session[data-time-state="unverified"] {
    border-style: dashed;
}


/* ==========================================================================
   39. SIGNAL LIFECYCLE TIMELINE
   ==========================================================================

   Supports optional real milestones:

   - Candidate generated
   - Validation completed
   - Signal confirmed
   - Notification published
   - Signal expired
   - Outcome evaluated

   Only existing, recorded milestones may be displayed.

   CSS never creates these events.
   ========================================================================== */

.temporal-4d-signal-timeline {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-3, 12px);

    min-width: 0;

    padding: var(--bsm-space-3, 12px);

    border:
        1px solid
        var(--bsm-t4d-border-soft);

    border-radius:
        var(--bsm-radius-md, 12px);

    background-color: var(--bsm-t4d-bg-inset);
}


/* ==========================================================================
   40. BUY / SELL TEMPORAL DIRECTION
   ==========================================================================

   Applies only to actual confirmed signal records.

   The direction must exist in visible text as well.
   ========================================================================== */

.temporal-4d-event[data-direction="buy"],
.temporal-4d-card[data-direction="buy"] {
    border-inline-start:
        3px solid
        var(--bsm-signal-buy, #5CE4C7);
}

.temporal-4d-event[data-direction="sell"],
.temporal-4d-card[data-direction="sell"] {
    border-inline-start:
        3px solid
        var(--bsm-signal-sell, #FF697C);
}


/* ==========================================================================
   41. SIGNAL POPUP LIFECYCLE COMPATIBILITY
   ==========================================================================

   Existing:

   #signal-popup-stack
   .signal-popup
   .signal-popup-progress

   The real 30-second popup lifetime is controlled
   by JavaScript.

   This file must not replace that timer.

   Any time information added here is visual only.
   ========================================================================== */

#signal-popup-stack
    .signal-popup.temporal-4d-card {
    border-radius:
        var(--bsm-radius-lg, 16px);

    transform-style: flat;
}


/* ==========================================================================
   42. POPUP REMAINING-TIME LABEL
   ==========================================================================

   The frontend may provide a verified textual countdown
   to automatic dismissal.

   Do not use CSS-generated numbers or pseudo-text.

   This is separate from the existing progress animation.
   ========================================================================== */

.temporal-4d-popup-time {
    color: var(--bsm-t4d-muted);

    font-family:
        var(
            --bsm-font-financial,
            ui-monospace,
            monospace
        );

    font-size:
        var(--bsm-text-xs, 0.75rem);

    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   43. NOTIFICATION HISTORY CHRONOLOGY
   ==========================================================================

   Notifications remain server-owned.

   An unread notification is not necessarily a new
   confirmed trading signal.

   Chronological grouping must use real timestamps.
   ========================================================================== */

#notice-panel
    .notification-item.temporal-4d-card,
#notice-panel
    .notice-item.temporal-4d-card {
    box-shadow: none;

    border-color: var(--bsm-t4d-border-soft);
}


/* ==========================================================================
   44. RECEIPT TEMPORAL EVIDENCE
   ==========================================================================

   Signal receipts may show recorded:

   - Confirmation time
   - Expiry time
   - Publication time
   - Evaluation time
   - Outcome time

   Missing milestones must be omitted or explicitly
   identified as unavailable.

   Do not display fabricated evidence.
   ========================================================================== */

#receipt-modal
    .temporal-4d-timeline {
    margin-block: var(--bsm-space-3, 12px);
}

#receipt-modal
    .temporal-4d-time {
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   45. SUBSCRIPTION VALIDITY TIMELINE
   ==========================================================================

   Membership dates must come from SubscriptionService.

   Styling does not extend or reactivate subscriptions.
   ========================================================================== */

.temporal-4d-subscription {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-3, 12px);

    min-width: 0;

    padding: var(--bsm-space-4, 16px);

    border:
        1px solid
        var(--bsm-t4d-border);

    border-radius: var(--bsm-t4d-radius);

    background-color: var(--bsm-t4d-bg);
}

.temporal-4d-subscription[data-time-state="expired"] {
    border-color:
        var(
            --bsm-color-danger-border,
            var(--bsm-t4d-danger)
        );
}

.temporal-4d-subscription[data-time-state="active"] {
    border-color:
        var(
            --bsm-color-success-border,
            var(--bsm-t4d-resolved)
        );
}


/* ==========================================================================
   46. PAYMENT REVIEW CHRONOLOGY
   ==========================================================================

   Payment submission and review timestamps are actual
   database records.

   A visual milestone cannot approve a payment.
   ========================================================================== */

.temporal-4d-payment-history {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-3, 12px);

    min-width: 0;

    padding: var(--bsm-space-3, 12px);

    border-radius:
        var(--bsm-radius-md, 12px);

    background-color: var(--bsm-t4d-bg-inset);
}


/* ==========================================================================
   47. ADMINISTRATOR AUDIT CHRONOLOGY
   ==========================================================================

   Existing:

   .admin-audit-record
   .audit-record

   Each record must originate from durable audit storage.

   CSS neither creates nor removes audit entries.
   ========================================================================== */

.admin-app
    .admin-audit-record.temporal-4d-event,
.admin-app
    .audit-record.temporal-4d-event {
    border-color: var(--bsm-t4d-border-soft);

    background-color: var(--bsm-t4d-bg);
}

.admin-app
    .temporal-4d-event time {
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   48. OPTIONAL TIME SCRUBBER
   ==========================================================================

   For a future historical chart review interface.

   A scrubber is a frontend-controlled input.

   It does not automatically create missing historical
   candles or change the live market feed.

   Historical snapshots must come from verified data.
   ========================================================================== */

.temporal-4d-scrubber {
    display: flex;
    flex-direction: column;

    gap: var(--bsm-space-3, 12px);

    min-width: 0;

    padding: var(--bsm-space-3, 12px);

    border:
        1px solid
        var(--bsm-t4d-border);

    border-radius:
        var(--bsm-radius-md, 12px);

    background-color: var(--bsm-t4d-bg);
}

.temporal-4d-scrubber input[type="range"] {
    width: 100%;

    min-width: 0;

    accent-color: var(--bsm-t4d-present);

    cursor: pointer;
}

.temporal-4d-scrubber
    input[type="range"]:focus-visible {
    outline:
        3px solid
        var(
            --bsm-focus-color,
            var(--bsm-t4d-present)
        );

    outline-offset: 3px;
}


/* ==========================================================================
   49. SCRUBBER TIME LABELS
   ========================================================================== */

.temporal-4d-scrubber-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: var(--bsm-space-2, 8px);

    color: var(--bsm-t4d-muted);

    font-size:
        var(--bsm-text-xs, 0.75rem);

    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   50. DECORATIVE TEMPORAL AMBIENCE
   ==========================================================================

   Optional ambient effect for non-data presentation cards.

   Not recommended for:

   - Live candles
   - Price axes
   - CPI countdown digits
   - Payment forms
   - Receipt values
   - Admin audit tables

   The effect has no connection to real clock time.
   ========================================================================== */

.temporal-4d-ambient {
    position: relative;

    isolation: isolate;

    overflow: hidden;
}

.temporal-4d-ambient::before {
    content: "";

    position: absolute;

    inset: -25%;

    z-index: -1;

    background-image:
        radial-gradient(
            ellipse at 25% 35%,
            var(--bsm-t4d-present-bg),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 75% 65%,
            var(--bsm-t4d-future-bg),
            transparent 55%
        );

    pointer-events: none;
}


/* ==========================================================================
   51. OPTIONAL AMBIENT ANIMATION
   ==========================================================================

   Explicitly opt in using:

       data-temporal-effect="ambient"

   This is decorative movement only.

   It must not be interpreted as feed health or
   a signal confirmation animation.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    .temporal-4d-ambient
        [data-temporal-effect="ambient"] {
        animation:
            bsm-t4d-ambient
            8s
            ease-in-out
            infinite alternate;
    }

}

@keyframes bsm-t4d-ambient {

    from {
        opacity: 0.75;
    }

    to {
        opacity: 1;
    }

}


/* ==========================================================================
   52. STATIC TEMPORAL MODE
   ==========================================================================

   Disable optional animation and depth transformations
   for a chosen component.

   Useful for data-dense financial panels.
   ========================================================================== */

.temporal-4d-static,
.temporal-4d-static::before,
.temporal-4d-static::after {
    animation: none !important;

    transition: none !important;
}

.temporal-4d-static.temporal-4d-plane {
    transform: none;
}


/* ==========================================================================
   53. FINANCIAL CHART PROTECTION
   ==========================================================================

   CRITICAL:

   Never perspective-transform the price chart.

   Pixel accuracy of candles and axes matters more
   than decorative dimensional effects.

   Preserve renderer-owned canvas/SVG transformations.
   ========================================================================== */

#price-chart.temporal-4d,
#price-chart.temporal-4d-scene,
#price-chart.temporal-4d-plane {
    perspective: none;

    transform: none;

    transform-style: flat;
}


/* ==========================================================================
   54. DATA LAYOUT PROTECTION
   ==========================================================================

   Avoid temporal transforms on sensitive UI.

   These declarations apply only when a temporal class
   was explicitly added to such an element.
   ========================================================================== */

:is(
    .admin-table,
    .admin-table-scroll,
    .admin-form,
    .payment-form,
    .receipt-card,
    .receipt-content,
    .signal-receipt
).temporal-4d-plane {
    transform: none;

    transform-style: flat;
}


/* ==========================================================================
   55. TEMPORAL TEXT READABILITY
   ========================================================================== */

:where(
    .temporal-4d,
    .temporal-4d-card,
    .temporal-4d-event
) :where(
    p,
    small,
    time,
    strong,
    span
) {
    overflow-wrap: break-word;
}

.temporal-4d
    :where(
        .temporal-4d-time,
        .temporal-4d-timestamp,
        .temporal-4d-timezone
    ) {
    overflow-wrap: anywhere;
}


/* ==========================================================================
   56. TEMPORAL KEYBOARD ACCESSIBILITY
   ==========================================================================

   Timeline cards may be focusable only when they provide
   real navigation or a meaningful interactive action.

   Do not add tabindex to decorative nodes unnecessarily.
   ========================================================================== */

.temporal-4d
    :where(
        button,
        a[href],
        input,
        select,
        [role="button"]
    ):focus-visible {
    outline:
        3px solid
        var(
            --bsm-focus-color,
            var(--bsm-t4d-present)
        );

    outline-offset: 3px;
}


/* ==========================================================================
   57. TOUCHSCREEN ACCESSIBILITY
   ========================================================================== */

@media (pointer: coarse) {

    .temporal-4d
        :where(
            button,
            select,
            input[type="range"]
        ) {
        min-height:
            var(--bsm-touch-target-min, 44px);
    }

    .temporal-4d-plane {
        transform: none;
    }

}


/* ==========================================================================
   58. TABLET RESPONSIVENESS
   ========================================================================== */

@media (max-width: 1024px) {

    .temporal-4d-scene {
        perspective: 1800px;
    }

    .temporal-4d-card {
        gap: var(--bsm-space-3, 12px);
    }

    .temporal-4d-timeline {
        gap: var(--bsm-space-4, 16px);
    }

}


/* ==========================================================================
   59. MOBILE RESPONSIVENESS
   ========================================================================== */

@media (max-width: 767px) {

    .temporal-4d-card,
    .temporal-4d-countdown,
    .temporal-4d-window,
    .temporal-4d-subscription {
        padding: var(--bsm-space-3, 12px);
    }

    .temporal-4d-scene {
        perspective: none;
    }

    .temporal-4d-plane {
        transform: none;
    }

    .temporal-4d-timeline > .temporal-4d-event {
        padding: var(--bsm-space-3, 12px);
    }

    .temporal-4d-countdown
        :is(
            .countdown-cell,
            .countdown-unit
        ) {
        padding: var(--bsm-space-2, 8px);
    }

}


/* ==========================================================================
   60. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .temporal-4d-band {
        flex-direction: column;
        align-items: flex-start;
    }

    .temporal-4d-timeline {
        --bsm-t4d-marker-size: 11px;

        --bsm-t4d-event-gap:
            var(--bsm-space-3, 12px);
    }

    .temporal-4d-event-title {
        font-size:
            var(--bsm-text-sm, 0.875rem);
    }

    .temporal-4d-scrubber-labels {
        align-items: flex-start;
    }

}


/* ==========================================================================
   61. SHORT LANDSCAPE DISPLAYS
   ========================================================================== */

@media (
    max-width: 900px
) and (
    orientation: landscape
) and (
    max-height: 540px
) {

    .temporal-4d-countdown {
        padding: var(--bsm-space-2, 8px);
    }

    .temporal-4d-timeline {
        gap: var(--bsm-space-3, 12px);
    }

    .temporal-4d-card {
        gap: var(--bsm-space-2, 8px);
    }

}


/* ==========================================================================
   62. REDUCED MOTION
   ==========================================================================

   Reduced motion removes:

   - Optional temporal layer movement
   - Ambient animation
   - Progress transitions
   - Decorative perspective movement

   It does NOT stop:

   - Real-time market-data updates
   - CPI calculations
   - Notification delivery
   - The logical 30-second popup timer
   - Subscription expiry calculations
   - Audit-history updates
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .temporal-4d,
    .temporal-4d-scene,
    .temporal-4d-plane,
    .temporal-4d-card,
    .temporal-4d-event,
    .temporal-4d-band,
    .temporal-4d-progress-fill,
    .temporal-4d-ambient,
    .temporal-4d-ambient::before {
        animation: none !important;

        transition: none !important;
    }

    .temporal-4d-plane {
        transform: none !important;
    }

    .temporal-4d-scene {
        perspective: none;
    }

    .temporal-4d-progress-fill {
        transition: none !important;
    }

}


/* ==========================================================================
   63. MANUAL REDUCED-MOTION PREFERENCE
   ==========================================================================

   Works with existing reduced-motion.css conventions.
   ========================================================================== */

:is(
    html[data-motion="reduce"],
    html[data-motion="reduced"],
    html.motion-reduce
) :is(
    .temporal-4d,
    .temporal-4d-scene,
    .temporal-4d-plane,
    .temporal-4d-card,
    .temporal-4d-event,
    .temporal-4d-band,
    .temporal-4d-ambient
) {
    animation: none !important;

    transition: none !important;
}

:is(
    html[data-motion="reduce"],
    html[data-motion="reduced"],
    html.motion-reduce
) .temporal-4d-plane {
    transform: none !important;
}

:is(
    html[data-motion="reduce"],
    html[data-motion="reduced"],
    html.motion-reduce
) .temporal-4d-scene {
    perspective: none;
}


/* ==========================================================================
   64. HIGH CONTRAST
   ========================================================================== */

@media (prefers-contrast: more) {

    .temporal-4d-card,
    .temporal-4d-event,
    .temporal-4d-window,
    .temporal-4d-session,
    .temporal-4d-subscription,
    .temporal-4d-scrubber {
        border-width: 2px;
    }

    .temporal-4d-timeline::before {
        opacity: 1;
    }

    .temporal-4d-event-status,
    .temporal-4d-phase-badge {
        border-width: 2px;
    }

}


/* ==========================================================================
   65. FORCED COLORS
   ==========================================================================

   Windows and other system high-contrast modes retain
   control over text, surfaces, borders and focus.

   Time-phase descriptions must remain available as text.
   ========================================================================== */

@media (forced-colors: active) {

    .temporal-4d-card,
    .temporal-4d-event,
    .temporal-4d-band,
    .temporal-4d-countdown,
    .temporal-4d-session,
    .temporal-4d-window,
    .temporal-4d-subscription,
    .temporal-4d-scrubber {
        background-color: Canvas;

        background-image: none;

        border-color: CanvasText;

        color: CanvasText;

        box-shadow: none;
    }

    .temporal-4d-timeline::before {
        background-color: CanvasText;
    }

    .temporal-4d-timeline
        > .temporal-4d-event::before {
        border-color: Canvas;

        background-color: Highlight;

        box-shadow:
            0 0 0 2px CanvasText;
    }

    .temporal-4d-event-status,
    .temporal-4d-phase-badge {
        border-color: CanvasText;

        background-color: Canvas;

        color: CanvasText;
    }

    .temporal-4d-plane {
        transform: none;
    }

}


/* ==========================================================================
   66. REDUCED TRANSPARENCY
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {

    .temporal-4d-card,
    .temporal-4d-event {
        background-color: var(--bsm-t4d-bg);

        background-image: none;
    }

    .temporal-4d-ambient::before {
        display: none;
    }

}


/* ==========================================================================
   67. CSS 3D SUPPORT FALLBACK
   ========================================================================== */

@supports not (transform-style: preserve-3d) {

    .temporal-4d-scene {
        perspective: none;
    }

    .temporal-4d-plane {
        transform: none;

        transform-style: flat;
    }

}


/* ==========================================================================
   68. HIDDEN ELEMENT INTEGRITY
   ==========================================================================

   Hidden records or unavailable content must never be
   reintroduced by visual display styles.

   Authorization is still enforced by private PHP.
   ========================================================================== */

.temporal-4d[hidden],
.temporal-4d-card[hidden],
.temporal-4d-event[hidden],
.temporal-4d-countdown[hidden],
.temporal-4d-progress[hidden],
.temporal-4d-scrubber[hidden] {
    display: none !important;
}


/* ==========================================================================
   69. PRINT PRESENTATION
   ==========================================================================

   Print historical, current and scheduled events as
   ordinary readable records.

   Decorative depth and motion are unnecessary.

   Only already authorized content may be printed.
   ========================================================================== */

@media print {

    .temporal-4d,
    .temporal-4d-card,
    .temporal-4d-event,
    .temporal-4d-window,
    .temporal-4d-session,
    .temporal-4d-subscription {
        transform: none !important;

        perspective: none !important;

        animation: none !important;

        transition: none !important;

        background-image: none !important;

        box-shadow: none !important;
    }

    .temporal-4d-card,
    .temporal-4d-event {
        break-inside: avoid;
    }

    .temporal-4d-ambient::before {
        display: none !important;
    }

    .temporal-4d-scrubber {
        display: none !important;
    }

    [hidden] {
        display: none !important;
    }

}


/* ==========================================================================
   70. APPLICATION INTEGRATION REQUIREMENTS
   ==========================================================================

   EconomicController
   ------------------
   Supplies verified release times and event states.

   TimeSyncService
   ---------------
   Supplies server time and synchronization metadata.

   MarketController
   ----------------
   Supplies authorized market and session information.

   CandleController
   ----------------
   Supplies real OHLCV history for any historical review.

   SignalController
   ----------------
   Supplies confirmed signal milestones and timestamps.

   NotificationController
   ----------------------
   Maintains the selected-market signal notification
   lifecycle and inbox acknowledgements.

   ReceiptService
   --------------
   Supplies only authorized, recorded signal evidence.

   SubscriptionService
   -------------------
   Provides actual subscription validity and expiry.

   PaymentReviewService
   --------------------
   Provides recorded payment review milestones.

   AdminAuditService
   -----------------
   Supplies durable administrator audit chronology.

   Frontend TemporalManager
   ------------------------
   If implemented in a future JavaScript file, it must:

   1. Use actual server timestamps.

   2. Account for clock synchronization.

   3. Respect the configured display timezone.

   4. Handle daylight-saving transitions correctly.

   5. Reject invalid or unknown timestamps.

   6. Populate time labels with textContent, not
      untrusted innerHTML.

   7. Set temporal phase attributes only after
      validating the event state.

   8. Calculate progress using verified start/end times.

   9. Keep progress in the range 0 to 1.

   10. Avoid broadcasting countdown changes every second
       to an assertive screen-reader live region.

   11. Never render a "current" or "LIVE" phase solely
       because a decorative animation is active.

   12. Stop showing actionable signals when the backend
       considers them expired or invalidated.

   13. Preserve the actual 30-second notification lifetime.

   14. Never automatically change the chart pair.

   15. Respect the user's reduced-motion preference.

   ==========================================================================
   END OF BALOCH SM TEMPORAL 4D VISUAL SYSTEM
   ========================================================================== */