/*
 * Severity down the LEFT edge, magnitude down the RIGHT — so a reader scanning
 * a stack gets rank and size in one pass, and the two lines between them carry
 * what is wrong and who said so.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-finding {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* A `View` shrinks at 0 and a CSS box at 1. */
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-8);
    /* The mark's own measure: small enough to be punctuation, large enough to
       read as a rank at a glance. Named so the dot's offset can be COMPUTED
       from it and the title's line box rather than eyeballed — a guess put it
       4.5px out, and a hand-set number goes stale the day the rung moves. */
    --lotics-finding-dot: 7px;
    /* How far the dot follows the title DOWN. Zero unless a delta is pushing it,
       and zero again once the headline stacks — one number, so the two places
       that answer the width question set a value instead of restating a rule. */
    --lotics-finding-dot-lift: 0px;
  }

  /* A delta shares the title's BASELINE at a taller rung, so the headline opens
     on the FIGURE's line box and the title's own starts below it — the
     difference between the two rungs' leadings. The dot follows the title, never
     the row. */
  .lotics-finding[data-delta] {
    --lotics-finding-dot-lift: calc(var(--lotics-leading-md) - var(--lotics-leading-sm));
  }

  .lotics-finding__dot {
    display: block;
    flex-shrink: 0;
    width: var(--lotics-finding-dot);
    height: var(--lotics-finding-dot);
    border-radius: var(--lotics-radius-full);
    /* Centred in the TITLE's line box, which is the thing it ranks. */
    margin-top: calc(
      (var(--lotics-leading-sm) - var(--lotics-finding-dot)) / 2 + var(--lotics-finding-dot-lift)
    );
    background-color: var(--lotics-finding-severity);
  }

  .lotics-finding__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 0%;
    min-width: 0;
    gap: var(--lotics-space-2);
  }

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

  .lotics-finding__title {
    flex: 1 1 0%;
    min-width: 0;
  }

  /*
   * THE NARROW FORK. Side by side, a title long enough to wrap breaks AROUND the
   * figure and the sentence reads as two fragments with a number interposed. It
   * never overflows — it only wraps mid-sentence — so every clipping probe
   * passes, and at desk width the title does not wrap at all, which is why the
   * defect is invisible at the width most reviews measure. Stacked, the title
   * owns its own lines and the figure sits under them on the dot's left edge.
   *
   * The BOUNDARY's width, not this row's: a finding inside a dialog stacks
   * because the dialog is narrow, whatever width its own row resolves to. Three
   * blocks, because a container query on a name nothing declares is FALSE and
   * not unknown — the `@media` one is the no-boundary answer (the window IS the
   * container then), and the two after it override it in both directions.
   * `flex: 1` in a COLUMN grows the box vertically, so the stacked title takes
   * its width the other way.
   */
  @media (width < 768px) {
    .lotics-finding[data-delta] {
      --lotics-finding-dot-lift: 0px;
    }

    .lotics-finding__headline {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--lotics-space-2);
    }

    .lotics-finding__title {
      flex: 0 0 auto;
      align-self: stretch;
    }
  }

  @container lotics-boundary (width >= 768px) {
    .lotics-finding[data-delta] {
      --lotics-finding-dot-lift: calc(var(--lotics-leading-md) - var(--lotics-leading-sm));
    }

    .lotics-finding__headline {
      flex-direction: row;
      align-items: baseline;
      gap: var(--lotics-space-12);
    }

    .lotics-finding__title {
      flex: 1 1 0%;
      align-self: auto;
    }
  }

  @container lotics-boundary (width < 768px) {
    .lotics-finding[data-delta] {
      --lotics-finding-dot-lift: 0px;
    }

    .lotics-finding__headline {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--lotics-space-2);
    }

    .lotics-finding__title {
      flex: 0 0 auto;
      align-self: stretch;
    }
  }

  /* Never shrinks: the figure is the point of the row, and a clipped delta is
     worse than a title that wraps. Its COLOUR is the severity's — the dot marks
     the left edge and the figure the right. */
  .lotics-finding__delta {
    flex-shrink: 0;
    color: var(--lotics-finding-severity);
  }

  /*
   * ONE READING PER LINE. They were joined inline by a ` · `, which fails twice:
   * a middot claims a relation while refusing to name it, and it is the one mark
   * a screen reader drops — so the separator carrying "these two disagree" never
   * survived being read aloud. It also wrapped: at phone width a line could
   * BEGIN with the separator. Stacking pairs each source with its own value at
   * every width and needs no separator at all.
   */
  .lotics-finding__readings {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

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

  /*
   * The same split as title/delta one row up, for the same reason: the SOURCE is
   * a label and gives way, the VALUE is the figure and never does. The FLOOR is
   * what the label needs — without it the row laid both children out at
   * intrinsic width and ran off the card: measured at x=790 in a 390px frame,
   * clipped, with no page scroll to reach it, so on a phone the evidence a
   * Finding exists to show was the part you could not read.
   */
  .lotics-finding__source {
    /* GROWS as well as gives way — the same split as title/delta one row up, and
       for the same reason: the label takes the slack so every value in the stack
       ends on ONE edge. Packed left, two readings of different source lengths put
       their figures at two x's and neither could be compared with the other. */
    flex: 1 1 auto;
    min-width: 0;
  }

  .lotics-finding__value {
    flex-shrink: 0;
  }

  /* The openable form is a real control, so it undoes what a `<button>` brings
     and states the ring the underline alone cannot. */
  .lotics-finding__source[data-openable] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0 solid var(--border);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-4));
    background-color: transparent;
    background-image: none;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    color: var(--lotics-ink-default);
    text-align: start;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
  }

  .lotics-finding__source:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }
}