/* Range-bar marks — the single home for how a value is drawn against a target range.
   Values come from design-tokens.css; this file is the grammar that uses them.

   Every mark here encodes a fact about the data, so none of them may vary between screens:
   the faded zone edge says the bound is soft by MacroAcceptanceTolerance, the notch says
   where the bound is, the grey continuation distinguishes a fill that passed the ceiling
   from one that landed on it. What MAY vary is scale — set --rb-track-height per host.

   A second home for any of these values is how the last divergence happened: the compare
   bars kept a dashed-border zone for months after the canvas moved to a faded one. */

.rb-bar {
  --rb-track-height: 9px;
  /* A span with a height and no display is an inline box, and height does not apply to one.
     It has worked so far only because its host happens to be flex; the compare bars adopt this
     file next and their host may not be. */
  display: block;
  position: relative;
  height: var(--rb-track-height);
  border-radius: 999px;
  background: var(--fs-bg-tertiary, #f3f4f6);
}

/* The shaded band between the bounds. Fades at both ends; a one-sided range simply runs to
   the edge it has no bound on, and the modifiers below drop that side's fade with it. */
.rb-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rb-zone-color) var(--fs-range-zone-fade),
    var(--rb-zone-color) calc(100% - var(--fs-range-zone-fade)),
    transparent 100%
  );
}

/* Open at the start: no floor, so nothing to fade in from. */
.rb-zone--open-start {
  border-radius: 999px 0 0 999px;
  background: linear-gradient(
    90deg,
    var(--rb-zone-color) 0%,
    var(--rb-zone-color) calc(100% - var(--fs-range-zone-fade)),
    transparent 100%
  );
}

/* Open at the end: no ceiling, so the band runs to the track's end. */
.rb-zone--open-end {
  border-radius: 0 999px 999px 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rb-zone-color) var(--fs-range-zone-fade),
    var(--rb-zone-color) 100%
  );
}

/* The value. Full track height: a notch has to cut the whole fill to read as a bound, and an
   inset fill leaves the notch floating above it. */
.rb-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--rb-fill-color);
}

/* Logging a food is the core loop and this bar is the only feedback above the fold on mobile;
   without a transition it teleports on re-render and nothing signals that the tap landed. */
@media (prefers-reduced-motion: no-preference) {
  .rb-fill,
  .rb-overshoot,
  .rb-wash {
    transition:
      width 0.25s ease,
      left 0.25s ease;
  }
}

/* Squared off where the grey takes over, so the two read as one continuous bar. */
.rb-fill--continues {
  border-radius: 999px 0 0 999px;
}

/* Past the ceiling. Never red. */
.rb-overshoot {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Clear the ceiling notch. The notch is 2px plus a 1px ring each side and straddles the
     bound, so it covers the first 2px of any overshoot: 50 kcal over a 2200 ceiling is 3.6px
     on a 200px strip and simply vanished, making "just over" and "exactly on it" identical.
     This is the mark that replaced a bar that used to turn entirely red. */
  min-width: calc(var(--fs-range-notch-width) * 3);
  border-radius: 0 999px 999px 0;
  background: var(--fs-range-overshoot);
}

/* Ran off the end of the track. The arrowhead says "and beyond", which a flat end cannot.
   On a floor-only row this takes the macro colour instead — passing a floor is not going
   over range — which the markup does by pointing it at .rb-fill rather than .rb-overshoot. */
.rb-terminus {
  /* No radius of its own: the polygon removes the pointed end, and each host keeps the left
     end it should have — round on the fill, which starts at the track's own edge, square on
     the overshoot, which butts against the fill. */
  clip-path: polygon(
    0 0,
    calc(100% - var(--fs-range-terminus)) 0,
    100% 50%,
    calc(100% - var(--fs-range-terminus)) 100%,
    0 100%
  );
}

/* A bound. Sits ABOVE the fill: drawn underneath, a bar at or past its ceiling erases its
   own range exactly where the range matters most. White rather than the fill's colour, or
   it disappears into it. */
.rb-notch {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--fs-range-notch-width);
  /* Straddle the bound rather than starting at it. Offset to the right, the ceiling notch
     lands in the overshoot's first two pixels and never cuts the fill, so the two bounds get
     marked asymmetrically — the floor reads "here" and the ceiling reads "just past". */
  margin-left: calc(var(--fs-range-notch-width) / -2);
  background: #fff;
  box-shadow: var(--fs-range-notch-ring);
  z-index: 1;
}

/* The zone's second material. Same band, same edges, same extent — but where the fill is
   underneath, the tint has nothing to be pale against, so lightness carries it instead. White
   at low alpha is the one channel that survives all four macro colours AND the dark calories
   fill, where darkening would fail.

   Sits above the fill and below the notches. Without it the band appeared to be eaten from the
   left as the day filled, reading as "how much of my range is left" rather than "where my range
   is" — and it disappeared completely at on target and over, the two states the range exists
   for. In the over state the band is now at full width exactly where it matters most. */
.rb-wash {
  --rb-wash-color: rgba(255, 255, 255, 0.3);
  --rb-wash-fade: calc(
    var(--fs-range-zone-fade) * var(--rb-wash-fade-scale, 1)
  );
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--rb-wash-color);
}

/* Both edges are bounds — the fill has passed the ceiling, so the wash spans the whole zone. */
.rb-wash--fade-both {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rb-wash-color) var(--rb-wash-fade),
    var(--rb-wash-color) calc(100% - var(--rb-wash-fade)),
    transparent 100%
  );
}

/* Left edge is the floor and fades; the right is where the value stopped, and stops hard. */
.rb-wash--fade-start {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rb-wash-color) var(--rb-wash-fade),
    var(--rb-wash-color) 100%
  );
}

/* No floor to fade in from — a ceiling-only row is in range from the very start of the track,
   so it takes the fill's own left cap the way the flat case does. */
.rb-wash--fade-end {
  border-radius: 999px 0 0 999px;
  background: linear-gradient(
    90deg,
    var(--rb-wash-color) 0%,
    var(--rb-wash-color) calc(100% - var(--rb-wash-fade)),
    transparent 100%
  );
}

/* Where the wash ends on the fill's own end it takes the fill's cap, so it does not overhang
   the rounded terminus underneath. */
.rb-wash--cap-end {
  border-radius: 0 999px 999px 0;
}

.rb-wash--cap-both {
  border-radius: 999px;
}