/* ==========================================================================
   Astuce L-Bar — canvas, grid and shared primitives
   Everything is authored at 1920×1080. The canvas scales with a transform,
   so the preview never changes the numbers the design was measured at.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0b0d0f;
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Canvas
   -------------------------------------------------------------------------- */

.lbar-canvas {
  position: relative;
  width: var(--canvas-w);
  height: var(--canvas-h);
  overflow: hidden;
  background: var(--backdrop-base);
  color: var(--text-primary);
  font-family: var(--font-display);
  /* on-air is opaque; the preview harness may set this to `transparent` */
}

/* Scale wrapper for previewing at less than 1:1. Set --scale on the wrapper. */
.lbar-stage {
  width: calc(var(--canvas-w) * var(--scale, 1));
  height: calc(var(--canvas-h) * var(--scale, 1));
  overflow: hidden;
}
.lbar-stage > .lbar-canvas {
  transform: scale(var(--scale, 1));
  transform-origin: top left;
}

/* The backdrop lives on its own layer rather than on the canvas background,
   because it animates in under a blur and `filter` would take every region
   with it. As the canvas's ::before it is the first child box, so it paints
   under the regions without needing a z-index.

   It overhangs by twice the blur radius: a blurred layer samples past its own
   edge, and flush with the canvas that shows up as a soft vignette all round.
   The canvas clips the overhang.

   The streak gradient it replaced is still here as a background layer, off by
   default — the artwork carries its own streaks and the two cross-hatch. It is
   the image-free fallback: set --backdrop-streaks to --backdrop-streaks-layer
   and --bg-backdrop to --bg-backdrop-css. */
.lbar-canvas::before {
  content: "";
  position: absolute;
  inset: calc(var(--backdrop-blur) * -2);
  pointer-events: none;
  background: var(--backdrop-streaks, none), var(--backdrop-tint, none), var(--bg-backdrop);
  /* The tint multiplies into the artwork rather than filtering it: `filter` on
     this layer is already spoken for by the entrance blur, and a static filter
     would be overwritten by the keyframe. Blending is independent of both. */
  background-blend-mode: normal, var(--backdrop-blend, normal), normal;
}

/* --------------------------------------------------------------------------
   Regions — the measured grid.
   Offsets are measured from the READING edge — the right in RTL, the left in
   LTR — so they are `inset-inline-end` and carry the exact x from the Penpot
   grid. One rule serves both directions; `dir` on the root does the mirroring.
   -------------------------------------------------------------------------- */

.lbar-region { position: absolute; }

.lbar-region--logo   { inset-block-start: 37px;  inset-inline-end: 65px;  width: 182px; height: 105px; }
.lbar-region--rail   { inset-block-start: 150px; inset-inline-end: var(--margin-x); width: var(--col-rail);  height: 790px; }
.lbar-region--clock  { inset-block-start: 950px; inset-inline-end: var(--margin-x); width: var(--col-rail);  height: var(--size-card-clock); }
.lbar-region--panel  { inset-block-start: var(--margin-y); inset-inline-end: 275px; width: var(--col-panel); height: 801px; }
.lbar-region--program{ inset-block-start: 836px; inset-inline-end: 275px; width: var(--col-panel); height: var(--size-card-program); }
.lbar-region--stage  { inset-block-start: var(--margin-y); inset-inline-end: 769px; width: var(--col-stage); height: 622px; }
.lbar-region--news   { inset-block-start: 657px; inset-inline-end: 769px; width: var(--col-stage); height: 398px; }

/* --------------------------------------------------------------------------
   Shared surface treatment — the 2.5D recipe, in one place.
   -------------------------------------------------------------------------- */

.lbar-surface {
  border: var(--stroke-hairline) solid var(--border-edge);
  box-shadow: var(--shadow-lift);
}
.lbar-surface--lifted { box-shadow: var(--shadow-soft); }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */

.lbar-t {
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;      /* broadcast copy must never reflow unpredictably */
}
.lbar-t--wrap { white-space: normal; }

/* Numerals share a width so values do not jitter when data updates.
   `direction: ltr` + isolation is not cosmetic: a figure like "+67.83" mixes a
   neutral sign with Latin digits, and inside an Arabic paragraph the bidi
   algorithm reorders it to "67.83+". Same for "6:00 PM". Isolating each numeric
   run pins it to its own direction while the surrounding line stays RTL. */
.lbar-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  direction: ltr;
  unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   Custom elements need a box before they are upgraded, otherwise the first
   paint collapses to zero height.
   -------------------------------------------------------------------------- */

lbar-quote-cell, lbar-watchlist-rail, lbar-clock-card, lbar-panel-header,
lbar-index-summary, lbar-mover-row, lbar-movers-section, lbar-active-section,
lbar-mini-chart, lbar-program-card, lbar-news-headline, lbar-news-row,
lbar-news-block, lbar-video-window, lbar-market-panel, lbar-logo-lockup,
lbar-badge, lbar-chevrons, lbar-live-tag, lbar-root {
  display: block;
}
lbar-badge, lbar-chevrons { display: inline-block; }