/*
 * THE RECORD'S IDENTITY BAND. One row: who this is on the left, the one figure
 * worth pinning on the right.
 *
 * THE NAME STARTS ON THE BAND'S OWN EDGE. Neither the record's mark nor its
 * picture is in here — both are the page's (`record_page.css`) — because a mark
 * INSIDE the band indents the identity's every line by itself.
 *
 * The row WRAPS, and the identity's FLOOR is what makes that real: a growing
 * item with a zero floor never forces a wrap, it shrinks to its longest word
 * first, so the metric would keep its width while the name broke over two lines.
 *
 * The floor sits on the identity alone, never on the title inside it: a
 * `min-width` is the used width when the content is narrower, so a floor there
 * would push the status chip away from every short name.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-record-summary {
    /* The width under which the band breaks: the name at the value READ floor
       with a status chip seated beside it on the same line. The identity grows
       to fill whatever is left, so this number decides only WHEN the metric
       leaves the row — never how wide anything is. */
    --lotics-record-summary-identity: 320px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    min-width: 0;
    gap: var(--lotics-space-16);
  }

  /* THE WAYS TO REACH THE SUBJECT, under its qualifiers — one wrapping ROW, not
   *  a column: they are one object. The column gap is the region rung a run of
   *  separate links needs to read as separate; the row gap is the identity's own. */
  .lotics-record-summary__contacts {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    list-style: none;
    /* Off the identity's own two-pixel gap, which is the distance between a
       name and its qualifiers and not between a name and how to ring it. */
    margin-block-start: var(--lotics-space-4);
    column-gap: var(--lotics-space-12);
    row-gap: var(--lotics-space-4);
  }

  /* Half a rung between a glyph and the words it marks: they are one contact,
     and the gap between two CONTACTS is what has to read as larger. */
  .lotics-record-summary__contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  /* The glyph is the one part of the contact that may not give: squeezed it
     stops being the envelope that says this row is an address. */
  .lotics-record-summary__contact-glyph {
    flex-shrink: 0;
  }

  /* Half a rung between the title and its qualifiers: they are one identity.

     IT IS THE GROWING HALF OF THE BAND AND IT CARRIES THE FLOOR, so the metric
     leaves the row rather than the name breaking across two lines; `min()` so
     the floor never exceeds the band itself — under it the row has already
     wrapped and the identity is the whole width.

     `align-self: baseline` is what makes the band's OWN baseline the title's. A
     flex container reports the baseline of the first item that takes part in
     baseline alignment, and falls back to the first item when none does — so
     with nothing baseline-aligned the band's baseline was its first box's bottom
     edge and everything the page aligns to it sat that far too low: measured at
     1280 with a mark still leading this row, the header's acts landed 34px under
     the title they name. The identity is the anchor, so the identity is what
     declares it. */
  .lotics-record-summary__identity {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: baseline;
    flex: 1;
    min-width: min(100%, var(--lotics-record-summary-identity));
    gap: var(--lotics-space-2);
  }

  .lotics-record-summary__title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    column-gap: var(--lotics-space-10);
    row-gap: var(--lotics-space-4);
  }

  /* The caption, the figure and its note are ONE object — a quarter rung apart,
     which is the closest the ladder gets to no gap at all.

     `margin-inline-start: auto` is what makes the figure's edge REAL once the
     row has wrapped. Beside the identity there is no free space to absorb (the
     identity grows into all of it), so on a desk this changes nothing; alone on
     its own line the block is shrink-to-fit and sat at the LEFT while its own
     `flex-end` right-aligned the caption inside it — the headline figure ending
     251px short of the band it belongs to, with its label floating 70px to the
     right of the number it names. The auto margin pushes the block to the band's
     right edge, which is the edge `flex-end` was always claiming. */
  .lotics-record-summary__metric {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    min-width: 0;
    margin-inline-start: auto;
    gap: var(--lotics-space-2);
  }

  /* THE FIGURE'S LINE BOX, held open for a placeholder so the band is the same
     height whether it holds the number or a `Skeleton` standing in for it. The
     height is the `lg` rung's own leading, so it follows the ramp across the
     768px step instead of freezing at the desktop value. */
  .lotics-record-summary__metric-value[data-placeholder] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: var(--lotics-leading-lg);
  }
}