/* ONE RECORD, WHOLE. The frame reads the box it is given, never the window (`record_frame.tsx` picks the
   form off its measured width): from 1056px a rail that navigates, the sections stacked at a reading
   measure, and the companion sticky beside them; from 768px the rail and the sections; under it one column
   under a pinned strip of the same names. Sections stand a section rung apart with a hairline between
   (`SectionStack`); inside one, its heading, its fields with its acts under them, and its blocks a group
   rung apart. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-record-frame {
    /* The rail's measure: the way back and a section's name beside its glyph. */
    --lotics-record-frame-rail: 192px;
    /* The sections' reading measure: a label column and a control a phone's width beside it. */
    --lotics-record-frame-measure: 720px;
    /* The companion's measure: a comment's line and its composer. */
    --lotics-record-frame-companion: 240px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-width: 0;
    column-gap: var(--lotics-space-32);
  }

  .lotics-record-frame[data-form="three"] {
    grid-template-columns: var(--lotics-record-frame-rail) minmax(0, var(--lotics-record-frame-measure)) var(--lotics-record-frame-companion);
  }

  .lotics-record-frame[data-form="rail"] {
    grid-template-columns: var(--lotics-record-frame-rail) minmax(0, var(--lotics-record-frame-measure));
  }

  /* Pinned while the sections scroll past, so every section is one press away. */
  .lotics-record-frame__rail {
    position: sticky;
    top: var(--lotics-space-24);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-record-frame__main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-24);
  }

  .lotics-record-frame__back {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }

  .lotics-record-frame__head,
  .lotics-record-frame__checks {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* Pinned at the column's top over the sections scrolling under it, never hiding one; a drawer's tabs pin
     the same way over the tab being read. */
  .lotics-record-frame__strip,
  .lotics-record-frame__tabs {
    position: sticky;
    top: 0;
    z-index: var(--lotics-z-pinned);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-record-frame__section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-24);
    outline-style: none;
  }

  /* Each field closes on its own trailing air (`FormField`), so the list states no gap. */
  .lotics-record-frame__fields {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-record-frame__blocks {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-32);
  }

  .lotics-record-frame__block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-12);
  }

  /* Under the section's fields, in their column: what its acts ask as more fields, what they lack, then their
     row, the primary at the right edge. The last field's own trailing air stands above it. */
  .lotics-record-frame__acts {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* Beside the sections, sticky, scrolling inside itself once the thread outgrows the screen. */
  .lotics-record-frame__companion {
    position: sticky;
    top: var(--lotics-space-24);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    max-height: calc(100dvh - var(--lotics-space-48));
    overflow-y: auto;
    gap: var(--lotics-space-16);
  }

  .lotics-record-frame__skeleton {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* A drawer is one column read top to bottom; its tabs pin at the scroll area's top, on the panel's own
     ground so the tab read under them does not show through. */
  .lotics-record-frame[data-door="drawer"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-24);
  }

  /* Pinned FLUSH with the drawer's scroll top — its inset taken back — so no line read under the strip shows
     above it. */
  .lotics-record-frame__tabs {
    top: calc(var(--lotics-drawer-inset) * -1);
    background: var(--card);
  }

  /* A page of its own where no rail lists it: one row that leads away, its name and a chevron. */
  .lotics-record-frame__link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }
}