/* THE RECORD'S HEAD: the picture, the title alone on its line, the status and its qualifiers under it,
   and at the right the one figure and the ✎ ⋯. The head reads its own width: under a phone's measure the
   ✎ ⋯ keep the title's line and the figure takes a line of its own under the status, from the left — so
   a narrow head is three lines, never controls scattered over five. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-record-header {
    /* A meter read at a sentence's measure, never the width of the page. */
    --lotics-record-header-band: 560px;
    container: lotics-record-header / inline-size;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-record-header__frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "title figure tools"
      "line figure tools"
      "about about about"
      "band band band"
      "edit edit edit";
    align-items: start;
    min-width: 0;
    column-gap: var(--lotics-space-16);
    row-gap: var(--lotics-space-4);
  }

  .lotics-record-header__frame[data-lead] {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "lead title figure tools"
      "lead line figure tools"
      "about about about about"
      "band band band band"
      "edit edit edit edit";
  }

  .lotics-record-header__lead {
    grid-area: lead;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }

  /* The mark as the picture's place: the mark itself is the press, its badge at the corner saying so at rest. */
  .lotics-record-header__pick {
    position: relative;
    display: flex;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-radius: var(--lotics-radius-control);
    background: transparent;
    appearance: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .lotics-record-header__pick:disabled {
    cursor: default;
  }

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

  .lotics-record-header__pick-badge {
    position: absolute;
    inset-block-end: calc(var(--lotics-space-4) * -1);
    inset-inline-end: calc(var(--lotics-space-4) * -1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--lotics-radius-full);
    background: var(--card);
    box-shadow: var(--lotics-shadow-raised);
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-record-header__pick:hover .lotics-record-header__pick-badge {
    background: var(--muted);
  }

  /* The picture held stays under the spinner until the one picked lands. */
  .lotics-record-header__uploading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lotics-radius-control);
    background: color-mix(in srgb, var(--lotics-black) 40%, transparent);
  }

  .lotics-record-header__title {
    grid-area: title;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  /* The status first, then each qualifier. Each hangs its `·` in the gap before it, and the line clips at
     its start edge, so a value that wraps never opens its line on the separator. */
  .lotics-record-header__line {
    grid-area: line;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    column-gap: var(--lotics-space-16);
    row-gap: var(--lotics-space-4);
    clip-path: inset(-100% -100% -100% 0);
  }

  /* Never wider than the line: a run too long for what is left wraps whole to the next line, and one too long
     for a line of its own gives way inside itself — its tracks, never its words' own boxes, set its floor. */
  .lotics-record-header__said {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, max-content);
    align-items: center;
    min-width: 0;
    max-width: 100%;
    column-gap: var(--lotics-space-8);
  }



  .lotics-record-header__said:empty {
    display: none;
  }

  .lotics-record-header__said:not(:empty) ~ .lotics-record-header__said::before {
    content: "·";
    position: absolute;
    inset-inline-start: calc(var(--lotics-space-16) * -1);
    width: var(--lotics-space-16);
    text-align: center;
    color: var(--lotics-ink-muted);
  }

  /* At the right, its readings stacked on the right edge. */
  .lotics-record-header__figure {
    grid-area: figure;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  /* Where the title would wrap beside it, the figure rides the status line: its readings side by side. */
  .lotics-record-header__figure[data-line] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--lotics-space-12);
  }

  .lotics-record-header__tools {
    grid-area: tools;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--lotics-space-8);
  }

  .lotics-record-header__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }

  /* What the record is about, read under its line: its first two lines at rest, a disclosure under them only
     where the words run longer. */
  .lotics-record-header__about {
    grid-area: about;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lotics-space-4);
    min-width: 0;
    max-width: var(--lotics-record-header-band);
    margin-block-start: var(--lotics-space-8);
    color: var(--lotics-ink-muted);
  }

  .lotics-record-header__about-words {
    min-width: 0;
    max-width: 100%;
  }

  .lotics-record-header__about-words[data-clamped] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  /* The lead measure: a line of its own under the title, read at the measure a meter is read at. */
  .lotics-record-header__band {
    grid-area: band;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    max-width: var(--lotics-record-header-band);
    margin-block-start: var(--lotics-space-8);
    gap: var(--lotics-space-4);
  }

  /* The head's controls, opened by the ✎: a line of their own under the whole head. */
  .lotics-record-header__edit {
    grid-area: edit;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    margin-block-start: var(--lotics-space-8);
    gap: var(--lotics-space-12);
  }

  .lotics-record-header__edit-done {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  /* A phone's head: the ✎ ⋯ on the title's line, the status line under it, then the figure and the
     deadline side by side from the left. */
  @container lotics-record-header (width < 480px) {
    .lotics-record-header__frame {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "title tools"
        "line line"
        "about about"
        "figure figure"
        "band band"
        "edit edit";
    }

    .lotics-record-header__frame[data-lead] {
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas:
        "lead title tools"
        "lead line line"
        "about about about"
        "figure figure figure"
        "band band band"
        "edit edit edit";
    }

    .lotics-record-header__figure {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      column-gap: var(--lotics-space-12);
      margin-block-start: var(--lotics-space-4);
    }
  }
}