/* ==========================================================================
   Barari Gold — live rate strip
   FE-05 · partials/_rate-strip.blade.php · public/assets/barari/rate.js
   --------------------------------------------------------------------------
   Design source: `.rail` in _handoff/barari-gold-website.html:47-52.

   Loaded after shell.css, which owns the header this strip sits under. The
   strip is a band across the full width, not a card, so it has no radius and
   no shadow: the deck runs it edge to edge directly beneath the nav.

   RTL: logical properties throughout, per the convention at the head of
   barari.css. Two things here cannot be expressed that way and are paired
   explicitly at the foot of this file — the note's auto margin is logical and
   needs no pair, but the pulse's keyframe and the flag's tracking do.
   ========================================================================== */

.barari-rate {
  background:var(--barari-surface-deep);
  color:var(--barari-ink-on-dark);
  font-family:var(--barari-font-body);
  font-size:var(--barari-text-meta);
  line-height:1.4;
}

.barari-rate__inner {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--barari-space-6);
  padding-block:11px;
  padding-inline:var(--barari-gutter);
  max-width:var(--barari-measure);
  margin-inline:auto;
}

/* The two text weights of the strip: a muted label and the value it labels.
   The deck uses no other treatment on this bar. */
.barari-rate__k {
  color:var(--barari-ink-on-dark-50);
}

.barari-rate__v {
  font-weight:500;
}

/* The gaps in .barari-rate__inner are uniform, but the deck sets a label
   tight against the value it introduces. These pairs close that gap without
   a second flex container per group. */
.barari-rate__k + .barari-rate__v,
.barari-rate__v + .barari-rate__k,
.barari-rate__dot + .barari-rate__k {
  margin-inline-start:calc(var(--barari-space-6) * -1 + var(--barari-space-2));
}

.barari-rate__dot {
  color:var(--barari-ink-on-dark-50);
  margin-inline-start:calc(var(--barari-space-6) * -1 + var(--barari-space-2));
}

/* The live indicator. Opacity only — no movement, nothing positional, so it
   needs no direction pair. */
.barari-rate__pulse {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--barari-glacier);
  flex:none;
  animation:barari-rate-beat 2.4s ease-in-out infinite;
}

@keyframes barari-rate-beat {
  0%, 100% { opacity:1; }
  50% { opacity:.25; }
}

/* A reader who has asked the operating system for less motion still needs to
   see that the strip is live, so the dot stays — it simply stops beating. */
@media (prefers-reduced-motion:reduce) {
  .barari-rate__pulse { animation:none; }
}

.barari-rate__sep {
  width:1px;
  height:13px;
  background:var(--barari-rule-dark);
  flex:none;
}

/* Pushed to the trailing edge. margin-inline-start:auto is the logical form
   of the deck's margin-left:auto and flips on its own in Arabic. */
.barari-rate__note {
  margin-inline-start:auto;
  color:var(--barari-ink-on-dark-50);
}

/* Staleness. Empty while the rate is current, so it occupies no space and
   contributes no flex gap until the backend says the rate has aged out. */
.barari-rate__flag {
  display:none;
  align-items:center;
  gap:var(--barari-space-2);
  background:var(--barari-gold-wash);
  color:#E3B98D;
  font-size:var(--barari-text-fine);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding-block:3px;
  padding-inline:var(--barari-space-3);
  border-radius:var(--barari-radius-pill);
}

.barari-rate.is-stale .barari-rate__flag {
  display:inline-flex;
}

.barari-rate.is-stale .barari-rate__pulse {
  background:var(--barari-gold);
  animation:none;
}

/* A poll that has been failing long enough to matter dims the strip rather
   than hiding it: the last good rate is still the best information available,
   and a blank bar would read as "no gold price" rather than "not just now". */
.barari-rate.is-offline .barari-rate__pulse {
  background:var(--barari-ink-on-dark-50);
  animation:none;
}

/* Narrow viewports ---------------------------------------------------------
   The deck has no mobile screen. The bar already wraps, so nothing is
   invented: the gutter narrows and the note drops its auto margin so it wraps
   onto a line of its own rather than being stranded against the edge. */

@media (max-width:900px) {
  .barari-rate__inner {
    gap:var(--barari-space-4);
    padding-inline:var(--barari-space-5);
  }

  .barari-rate__k + .barari-rate__v,
  .barari-rate__v + .barari-rate__k,
  .barari-rate__dot + .barari-rate__k,
  .barari-rate__dot {
    margin-inline-start:calc(var(--barari-space-4) * -1 + var(--barari-space-2));
  }

  .barari-rate__note {
    margin-inline-start:0;
    flex-basis:100%;
  }
}

/* --------------------------------------------------------------------------
   RTL — the paired rules this file needs
   --------------------------------------------------------------------------
   Arabic is a joined script: letter-spacing pushes the glyphs apart and the
   connecting strokes break, so a tracked label reads as a row of isolated
   letters rather than a word. Same reason error.css:227 pairs its eyebrow.

   The figures themselves need no rule here — they carry dir="ltr" in the
   markup, which is the only thing that stops the bidi algorithm reordering a
   currency code and its number.
   -------------------------------------------------------------------------- */

[dir="rtl"] .barari-rate__flag {
  letter-spacing:0;
}