/* ==========================================================================
   Astuce L-Bar — core components
   badge · quote-cell · watchlist-rail · clock-card · logo-lockup
   Conventions:
     - 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
   ========================================================================== */

/* --- badge ---------------------------------------------------------------- */

.badge {
  display: block;
  inline-size: var(--size-badge);
  block-size: var(--size-badge);
  border-radius: var(--radius-badge);
  color: #fff;
}
.badge.is-up   { background: var(--fill-badge-up); }
.badge.is-down { background: var(--fill-badge-down); }
.badge.is-flat { background: var(--fill-badge-flat); }
.badge__glyph { display: block; inline-size: 100%; block-size: 100%; }

/* --- quote-cell ----------------------------------------------------------- */

lbar-quote-cell {
  block-size: var(--size-rail-cell);
  border-block-end: var(--stroke-hairline) solid var(--border-hairline);
}
lbar-quote-cell:last-child,
lbar-quote-cell.qc--no-separator { border-block-end: 0; }

.qc {
  block-size: 100%;
  padding-block: 10px 0;
  padding-inline: 8px; /* the name needs the full 199px it had in the design */
  display: flex;
  flex-direction: column;
}

.qc__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* Text hugs the reading edge; the badge sits on the far side. `order` moves it
   along the inline axis, so it follows `dir` without a second stylesheet. */
.qc__badge { flex: 0 0 auto; order: 2; }

.qc__body {
  flex: 1;
  min-inline-size: 0;
  text-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.qc__name {
  font-size: var(--type-quote-name);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qc__value {
  font-size: var(--type-quote-value);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.qc__change {
  font-size: var(--type-quote-change);
  font-weight: var(--fw-bold);
}
.qc__change.is-up   { color: var(--data-up); }
.qc__change.is-down { color: var(--data-down); }
.qc__change.is-flat { color: var(--data-flat); }

/* Sparkline. The zig-zag is drawn with a conic-free gradient stack so the cell
   carries no SVG of its own; a real series can replace the mask later. Pinned
   to `direction: ltr` for the same reason as the chart — a time series reads
   left→right in every locale. */
.qc__spark {
  block-size: 26px;
  inline-size: 110px;
  margin-inline-end: 8px;
  margin-inline-start: auto;
  margin-block-end: 16px;
  direction: ltr; /* a series reads left→right in every locale */
  color: var(--data-flat);
}
.qc__spark svg { display: block; inline-size: 100%; block-size: 100%; }
.qc__spark.is-up   { color: var(--data-up); }
.qc__spark.is-down { color: var(--data-down); }

/* --- watchlist-rail ------------------------------------------------------- */

lbar-watchlist-rail {
  block-size: 100%;
  background: var(--bg-module);
  border: var(--stroke-hairline) solid var(--border-edge);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* --- clock-card ----------------------------------------------------------- */

lbar-clock-card {
  block-size: 100%;
  background: var(--bg-module);
  border: var(--stroke-hairline) solid var(--border-edge);
  box-shadow: var(--shadow-soft);
}
.clock {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.clock__time {
  font-size: var(--type-clock-time);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.clock__city {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

/* --- logo-lockup ---------------------------------------------------------- */

lbar-logo-lockup {
  block-size: 100%;
  color: var(--logo-color);
}
.logo {
  block-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Painted, not embedded: the vector is a mask and `currentColor` fills it, so
   one asset serves both styles. The viewBox is cropped to the ink, so the box
   can be the full region without a transparent margin eating into it. */
.logo__mark {
  inline-size: 100%;
  block-size: 100%;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--logo-src) center / contain no-repeat;
  mask: var(--logo-src) center / contain no-repeat;
}

/* --- chevrons -------------------------------------------------------------
   The dotted chevron from the reference art. Sized by the element, not by the
   glyph: the SVG viewBox is in pitch units, so one component serves the small
   pair in a rail cell and the large double pair in a full-frame table. */
.chevrons {
  /* block-level, not inline: an inline-level box picks up the line box's
     descender space and the marker measures ~6px taller than it is. */
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--chevrons-w, var(--size-chevrons-w));
  block-size: var(--chevrons-h, var(--size-chevrons-h));
}
.chevrons__glyph { inline-size: 100%; block-size: 100%; overflow: visible; }
.chevrons.is-up   { color: var(--data-up); }
.chevrons.is-down { color: var(--data-down); }
.chevrons.is-flat { color: var(--data-flat, var(--text-secondary)); }