/* ==========================================================================
   Astuce L-Bar — block components
   panel-header · index-summary · mover-row · movers/active-section ·
   mini-chart · program-card · news-headline · news-row · news-block ·
   video-window · live-tag · market-panel
   Conventions (same as components.core.css):
     - block class = component name, elements use `__`, states use `is-`
     - logical properties only (inline-start/end), never left/right
     - no fixed text boxes; flex decides width so copy cannot wrap unexpectedly
   Reading order that runs from the END side inward is authored with
   `flex-direction: row-reverse`, which follows the inline axis and therefore
   mirrors correctly under dir="rtl".
   ========================================================================== */

/* --- panel-header --------------------------------------------------------- */

.ph {
  block-size: var(--size-panel-header);
  overflow: hidden;
  padding-inline: 18px; /* TODO: no token */
  background: var(--bg-panel-header);
  display: flex;
  align-items: center;
  justify-content: flex-start; /* the reading edge: right in RTL, left in LTR */
}
.ph__exchange {
  font-size: var(--type-panel-header);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.ix {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding-inline: 18px; /* TODO: no token — matched to panel-header */
}
.ix__row {
  display: flex;
  flex-direction: row; /* DOM is in reading order, so plain `row` is correct */
  align-items: center;
  gap: var(--gutter);
}
.ix__row--head { justify-content: space-between; align-items: baseline; }
.ix__row--data { justify-content: flex-start; }

.ix__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  text-align: start;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ix__symbol {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: end;
}
.ix__value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.ix__abs,
.ix__pct {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.ix__chevron {
  /* Sized to the row, not to the token: the reference art runs one marker at
     one size throughout, but its rows are taller than this one. */
  --chevrons-w: 40px;
  --chevrons-h: 34.4px;
  flex: 0 0 auto;
}
.ix.is-up   .ix__chevron, .ix.is-up   .ix__abs, .ix.is-up   .ix__pct { color: var(--data-up); }
.ix.is-down .ix__chevron, .ix.is-down .ix__abs, .ix.is-down .ix__pct { color: var(--data-down); }
.ix.is-flat .ix__chevron, .ix.is-flat .ix__abs, .ix.is-flat .ix__pct { color: var(--data-flat); }

/* --- mover-row ------------------------------------------------------------ */

.mr {
  block-size: var(--size-row-mover);
  display: flex;
  flex-direction: row; /* company → price → delta, from the reading edge */
  align-items: center;
  gap: var(--gutter);
}
.mr__company {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
  font-size: var(--type-mover-row);
  color: var(--text-secondary);
}
.mr__price {
  font-size: var(--type-mover-row);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.mr__delta {
  font-size: var(--type-mover-row);
  font-weight: var(--fw-bold);
}
.mr__delta.is-up   { color: var(--data-up); }
.mr__delta.is-down { color: var(--data-down); }
.mr__delta.is-flat { color: var(--data-flat); }

/* --- movers-section / active-section -------------------------------------- */
/* Shared anatomy: an accent bar pinned full-height on the END side, a title,
   then the rows. active-section adds `sec--active` for the neutral colouring. */

.sec {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding-inline-start: calc(var(--stroke-accent) + var(--gutter));
  padding-inline-end: var(--gutter);
}
.sec__accent {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--stroke-accent);
}
.sec.is-up   .sec__accent { background: var(--fill-accent-up); }
.sec.is-down .sec__accent { background: var(--fill-accent-down); }
.sec.is-flat .sec__accent { background: var(--data-flat); }

.sec__title {
  font-size: var(--type-section-title);
  font-weight: var(--fw-bold);
  text-align: start;
}
.sec.is-up   .sec__title { color: var(--data-up); }
.sec.is-down .sec__title { color: var(--data-down); }
.sec.is-flat .sec__title { color: var(--data-flat); }

.sec__rows {
  display: flex;
  flex-direction: column;
}

/* Neutral variant — declared after the is-* rules so it reads as the final
   word, though an active section never carries a direction class anyway. */
.sec--active .sec__accent { background: var(--text-primary); }
.sec--active .sec__title  { color: var(--text-primary); }

/* --- mini-chart ----------------------------------------------------------- */

.mc {
  block-size: 100%;
  display: flex;
  flex-direction: column; /* label sits above the plot, as in the reference */
  gap: var(--gutter);
}
.mc__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  flex: 0 0 auto;
}

/* CRITICAL: the plot must NOT mirror. A time axis reads left→right in every
   locale, so the whole chart assembly is pinned to `direction: ltr` here
   (and dir="ltr" in the markup). Only .mc__label, outside this wrapper,
   follows the document direction. Inside the wrapper, logical properties
   still resolve — they just always resolve the LTR way. */
.mc__chart {
  direction: ltr;
  flex: 1;
  min-inline-size: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  column-gap: var(--gutter);
  row-gap: 4px; /* TODO: no token */
}
.mc__yaxis {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mc__ytick {
  font-size: var(--type-axis);
  color: var(--text-axis);
  text-align: end; /* hugs the plot edge */
}
.mc__plot {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  background: var(--chart-plot);
  overflow: hidden;
}
.mc__gridlines {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.mc__gridline {
  border-block-start: var(--stroke-hairline) solid var(--border-grid);
}
.mc__baseline {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%; /* TODO: previous close carries no data attribute yet */
  border-block-start: var(--stroke-hairline) solid var(--chart-baseline);
}
.mc__svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
}
.mc__line          { color: var(--data-flat); }
.mc.is-up .mc__line   { color: var(--data-up); }
.mc.is-down .mc__line { color: var(--data-down); }

.mc__marker {
  position: absolute; /* inline/block insets are set from the data in JS */
  inline-size: 14px; /* TODO: no token — spec'd end marker */
  block-size: 14px;
  border-radius: 50%;
  background: var(--chart-baseline);
  transform: translate(-50%, -50%); /* wrapper is LTR, so this cannot flip */
}
.mc__xaxis {
  grid-column: 2;
  grid-row: 2;
  display: flex;
}
.mc__xtick {
  flex: 1;
  text-align: center;
  font-size: var(--type-axis);
  color: var(--text-axis);
}

/* --- program-card --------------------------------------------------------- */

lbar-program-card {
  block-size: var(--size-card-program);
  background: var(--bg-module);
  border: var(--stroke-hairline) solid var(--border-edge);
  box-shadow: var(--shadow-soft);
}
.pcard {
  block-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--gutter); /* TODO: no token — 18 left the programme name 7px short */
  flex-direction: row-reverse; /* thumb sits opposite the reading edge */
  padding-inline: 7px; /* centres the 204px thumb in the 219px card. TODO: no token */
}
.pcard__thumb {
  flex: 0 0 auto;
  inline-size: var(--size-thumb);
  block-size: var(--size-thumb);
  background: var(--bg-thumb);
  border: var(--stroke-hairline) solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pcard__thumb-line {
  font-size: var(--fs-xs);
  color: var(--text-muted); /* placeholder until real programme art lands */
}
.pcard__body {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}
.pcard__name {
  font-size: var(--type-program-name);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* LABEL then TIME in reading order — "KSA 6:00 PM". Flex with a gap, never
   pinned widths: "10:00 AM" is the string that must not wrap. */
.pcard__time-row {
  display: flex;
  align-items: baseline;
  gap: var(--gutter);
}
.pcard__time-label {
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.pcard__time {
  font-size: var(--type-clock-time);
  font-weight: var(--fw-bold);
  color: var(--accent-time);
}

/* --- news-headline -------------------------------------------------------- */

lbar-news-headline { block-size: var(--size-news-headline); }
.nh {
  block-size: 100%;
  background: var(--bg-news-headline);
  display: flex;
  align-items: center;
  justify-content: flex-start; /* END side */
  padding-inline: 20px; /* TODO: no token */
}
.nh__title {
  font-size: var(--type-news-headline);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- news-row ------------------------------------------------------------- */

lbar-news-row { block-size: var(--size-row-news); }
.nr {
  position: relative;
  block-size: 100%;
  background: var(--bg-row);
  display: flex;
  align-items: center;
  /* clear the tick on the reading edge: inset + tick + breathing room */
  padding-inline-start: calc(20px + var(--stroke-tick) + var(--gutter)); /* TODO: no token */
  padding-inline-end: 14px; /* TODO: no token */
}
.nr__tick {
  position: absolute;
  inset-inline-start: 20px; /* TODO: no token */
  inset-block: 0;
  margin-block: auto;
  inline-size: var(--stroke-tick);
  block-size: 40px; /* TODO: no token */
  background: var(--fill-tick);
}
.nr__text {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
  font-size: var(--type-news-row);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

/* --- news-block ----------------------------------------------------------- */

.nb {
  display: flex;
  flex-direction: column;
  /* pitch minus row height = 5px of --bg-row-gap showing between rows */
  gap: calc(var(--size-row-news-pitch) - var(--size-row-news));
  background: var(--bg-row-gap);
}
.nb__headline,
.nb__row { flex: 0 0 auto; }

/* --- video-window --------------------------------------------------------- */

/* Stays dark in BOTH themes — --bg-stage carries picture, not surface.
   The token handles it; no theme override here. */
lbar-video-window { block-size: 100%; }
.vw {
  position: relative;
  block-size: 100%;
  background: var(--bg-stage);
  border: var(--stroke-hairline) solid var(--border-edge);
  box-shadow: var(--shadow-soft);
}
.vw__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px; /* TODO: no token */
}
.vw__ph-line {
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.vw__tag {
  position: absolute;
  inset-block-start: 24px; /* TODO: no token */
  inset-inline-start: 24px;  /* TODO: no token — tag rides the reading edge */
}
.vw__bug {
  position: absolute;
  inset-block-start: 448px;   /* TODO: no token — measured position */
  inset-inline-end: 51px;   /* TODO: no token — bug sits opposite the tag */
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-on-video);
}

/* --- live-tag ------------------------------------------------------------- */

.lt {
  display: flex;
  align-items: center;
  gap: var(--gutter);
}
.lt__label {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-on-video);
}
/* Dot leads on the reading edge; `order` moves it along the inline axis. */
.lt__dot {
  order: -1;
  flex: 0 0 auto;
  inline-size: 12px; /* TODO: no token */
  block-size: 12px;
  border-radius: 50%;
  background: #E8A020; /* TODO: no token for the standby amber */
}
.lt.is-live .lt__dot { background: var(--brand-primary); }

/* --- market-panel --------------------------------------------------------- */

lbar-market-panel {
  block-size: 100%; /* the .lbar-region--panel rule owns the height */
  background: var(--bg-panel);
  border: var(--stroke-hairline) solid var(--border-edge);
  box-shadow: var(--shadow-soft);
}
.mp {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mp__header { flex: 0 0 auto; }
.mp__body {
  flex: 1;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gutter) * 2);
  padding-block: calc(var(--gutter) * 2);
}
.mp__summary,
.mp__active,
.mp__section { flex: 0 0 auto; }
.mp__chart {
  flex: 1;
  min-block-size: 0;
  padding-inline: var(--gutter);
}

/* --- news-headline · breaking --------------------------------------------
   The same strip in the brand red, for a bulletin that interrupts. It is a
   colour state and nothing else: the label still comes from `title`, so the
   Arabic layout reads عاجل and the Latin one BREAKING NEWS without the
   component knowing either language, and the type does not move — a breaking
   bar that also reflows is a breaking bar that jumps on air.

   White copy in both styles: this strip is red under the dark package and the
   bright one alike, so it is the one place where the text colour does not
   follow the theme.

   The red is sampled from the reference art, not from --brand-primary. Those
   are not the same red: the brand is #E4033C, whose blue channel runs 57 above
   its green, and at bar size that reads pink. The reference art's news red
   holds blue only 4-7 above green — a true, slightly warm red — and that is
   what is used here. If the brand must win, this is the one line to change. */
.nh--breaking {
  background: var(--bg-news-breaking);
}
.nh--breaking .nh__title {
  color: #FFFFFF;
}