/*
 * ONE READING, drawn straight or round. The labelled-meter anatomy is a title
 * overline left, the derived caption right, the track below; `compact` folds the
 * same parts into ONE row for a cell or a heading, and the ring puts its header
 * BELOW the drawing with the figure inside it.
 *
 * The bar's fill is ABSOLUTE inside the track, so its width is its own box
 * alone and animating it moves nothing else on the row. `width: 0` is the
 * resting state an INDETERMINATE meter falls to — an auto width would paint a
 * full bar for a meter with no bound to be full of.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-progress {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-8);
    min-width: 0;
    /* The resting fills, on the root: a colour only the tone rules below set
       INHERITS into a nested meter that carries no tone of its own. */
    --lotics-progress-color: var(--lotics-accent);
    --lotics-progress-complete-color: var(--lotics-tone-green-solid);
    /* ONE PAINT CHANNEL FOR EVERY SHAPE. Which of the colours above the reading
       is in is decided ONCE, here, and each shape's rule only says which
       PROPERTY carries it — `background` on a bar, `stroke` on a ring. */
    --lotics-progress-paint: var(--lotics-progress-color);
  }

  /* AT THE BOUND, whichever shape draws it — Base UI states the reading's status
     on the root, so both indicators swap with one rule. */
  .lotics-progress[data-complete] {
    --lotics-progress-paint: var(--lotics-progress-complete-color);
  }

  .lotics-progress[data-compact] {
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
    /* A BAR IS A LENGTH, so it takes the width it is GIVEN rather than the width
       of its own parts: an auto cross size resolves at min-content in a
       right-aligned cell and at max-content with a floor under the track. */
    align-self: stretch;
    width: 100%;
  }

  .lotics-progress__header {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--lotics-space-16);
    min-width: 0;
  }

  /* FLEX, so the box is the run's line box and nothing else: a block wrapper
     around an inline `Text` carries a STRUT of its own. */
  .lotics-progress__label {
    display: flex;
    min-width: 0;
  }

  /* Pushed to the far edge by its own margin rather than by a spacer element:
     the caption is the only thing on the right of that row. */
  .lotics-progress__value {
    display: flex;
    margin-inline-start: auto;
  }

  /* A LENGTH ONLY MEANS ANYTHING AGAINST THE LENGTHS BESIDE IT, and a count one
     digit longer takes that pixel off its own track. The slot is CONSTANT, so
     every track in the column starts and ends at one x. It is a floor, not a
     clamp: a longer count spends its own track rather than being cut off. */
  .lotics-progress[data-compact] .lotics-progress__value {
    min-width: 9ch;
    /* AND THE FIGURE RIDES THE TRACK IT READS: the bar and its count are one
       reading, so they sit a rung apart whatever the reading is long enough to
       fill. The figures then start at one x rather than ending at one — the edge
       a run of them is compared on is the TRACK's. */
    justify-content: flex-start;
  }

  /* 10px — substantial enough to read as a meter, not a hairline. The pill
     radius is the full rung, which on a 10px box IS the half-height cap. */
  .lotics-progress__track {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: var(--lotics-progress-thickness);
    border-radius: var(--lotics-radius-full);
    background: var(--lotics-progress-track, var(--muted));
    overflow: hidden;
    /* Hairline inner edge — the track reads as a groove, not a grey strip. */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lotics-shadow-color) 4%, transparent);
  }

  .lotics-progress[data-compact] .lotics-progress__track {
    /* 64 IS A BASIS, NOT A FLOOR. A shrink-to-fit parent gives `flex: 1` nothing
       to divide, so a track with no basis measures 0; as a MINIMUM the same 64
       could not give way, and a meter in a narrower column would lay out past it.
       The figure's slot below is what may not shrink — a cut number is a wrong
       number — so the squeeze lands here. */
    flex: 1 1 64px;
    min-width: 0;
  }

  .lotics-progress__indicator {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    border-radius: var(--lotics-radius-full);
    background: var(--lotics-progress-paint);
    /* Progress that snaps is dead; progress that moves is alive. */
    transition-property: width, background-color;
    transition-duration: var(--lotics-duration-base);
    transition-timing-function: var(--lotics-ease-standard);
  }

  /* A VERDICT IS STATED EVEN AT ZERO: the fill IS the verdict, so a toned meter
     with nothing in it would be indistinguishable from a row with no reading.
     The floor is the track's own thickness, so the mark is the round cap the
     fill would start with. */
  .lotics-progress[data-tone][data-shape="bar"] .lotics-progress__indicator {
    min-width: var(--lotics-progress-thickness);
  }

  /* THE VERDICT ON THE READING, so the two fills live here rather than at each
     call site. They move the component's own properties, so both shapes follow
     and a series colour written inline by the `color` prop still wins. */
  .lotics-progress[data-tone="warning"] {
    --lotics-progress-color: var(--lotics-tone-amber-solid);
    --lotics-progress-complete-color: var(--lotics-tone-amber-solid);
  }
  .lotics-progress[data-tone="danger"] {
    --lotics-progress-color: var(--lotics-tone-red-solid);
    --lotics-progress-complete-color: var(--lotics-tone-red-solid);
  }

  /* THE VERDICT IS THE FILL. An allocation is entered rather than watched, so
     there is no transition: a red that fades in is a verdict arriving late. */
  .lotics-progress[data-verdict] .lotics-progress__indicator {
    transition: none;
  }

  .lotics-progress[data-verdict="exact"] {
    --lotics-progress-paint: var(--lotics-tone-emerald-solid);
  }

  .lotics-progress[data-verdict="over"] {
    --lotics-progress-paint: var(--lotics-tone-red-solid);
  }

  /* A whole split into shares: each one's share is data, so it arrives as a
     property the sheet turns into `flex-grow`. The shortfall takes its own share
     and paints nothing, so the track's ground shows through as the unfilled
     tail. */
  .lotics-progress__segment,
  .lotics-progress__remainder {
    flex-grow: var(--lotics-progress-weight);
    flex-basis: 0;
  }

  .lotics-progress__segment {
    background-color: var(--lotics-progress-color);
  }

  /* THE RING. The header sits below the drawing and the figure inside it: the
     track is the one box that owns the size. */
  .lotics-progress[data-shape="ring"] {
    align-items: center;
    gap: var(--lotics-space-12);
  }

  .lotics-progress[data-shape="ring"] .lotics-progress__track {
    order: 1;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lotics-progress-size);
    height: var(--lotics-progress-size);
    border-radius: var(--lotics-radius-full);
    background: none;
    box-shadow: none;
  }

  .lotics-progress[data-shape="ring"] .lotics-progress__header {
    order: 2;
    flex-direction: column;
    align-items: center;
    gap: var(--lotics-space-2);
  }

  .lotics-progress[data-shape="ring"] .lotics-progress__value {
    margin-inline-start: 0;
  }

  .lotics-progress__ring {
    fill: none;
    stroke: var(--lotics-progress-track, var(--muted));
  }

  .lotics-progress[data-shape="ring"] .lotics-progress__indicator {
    position: static;
    width: auto;
    height: auto;
    fill: none;
    stroke: var(--lotics-progress-paint);
    stroke-linecap: round;
  }

  /* The figure sits ON the drawing rather than beside it, so it stays put
     whatever the arc does. */
  .lotics-progress__figure {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}