/*
 * Severity down the LEFT edge, magnitude down the RIGHT, so a stack gives rank and size in one
 * pass.
 */
@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;
    /* Held at its size. */
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-8);
    /* Named so the dot's offset is computed from it; a guess put it 4.5px out. */
    --lotics-finding-dot: 7px;
    /* Zero unless a delta pushes the title down, and zero once stacked. */
    --lotics-finding-dot-lift: 0px;
  }

  /*
   * A delta shares the title's baseline at a taller rung, so the title's line box starts lower and
   * the dot follows it.
   */
  .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. */
    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;
  }

  /*
   * Side by side, a wrapping title breaks around the figure, invisible at desk width. Stacked, the
   * figure sits under the title. Keyed to the boundary's width: a container query on an undeclared
   * name is false, so `@media` answers the no-boundary case and the two after override it.
   */
  @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;
    }
  }

  /* A clipped delta is worse than a wrapped title; it wears the severity's colour. */
  .lotics-finding__delta {
    flex-shrink: 0;
    color: var(--lotics-finding-severity);
  }

  /*
   * One reading per line: a joining ` · ` claims an unnamed relation, is dropped by screen readers,
   * and could begin a wrapped line.
   */
  .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 source gives way, the value never does. The floor keeps both from running off the card on a
   * phone.
   */
  .lotics-finding__source {
    /* Grows too, so every value ends on one edge. */
    flex: 1 1 auto;
    min-width: 0;
  }

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

  /* A real control, undoing `<button>` chrome and stating a ring. */
  .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;
  }
}