/*
 * A CROSS-TAB A READER FILLS. ONE scroll container, and both edges stick to it —
 * the axis at the top, the subject's name and its figure at the left — so the
 * reader always knows which row and which position they are standing in.
 *
 * `data-kind` says what a cell holds: an `absent` pair draws the kit's absence
 * mark on a quiet ground, a `reading` is text, and an `editor` gives its whole
 * box to the control the caller seated in it.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-entry-grid {
    /* The pinned figure's column, read in more than one place. */
    --lotics-entry-grid-total-width: 64px;
    /* A NAME, NOT TWO CHARACTERS — the same floor `StateMatrix` states, for the
       same reason: the block caps at half the grid and the figure sits inside
       that cap, so a narrow pane must not cut the subject to an initial. */
    --lotics-entry-grid-name-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    gap: var(--lotics-space-12);
  }

  /* The ONE scroll port. A month of positions beside a pinned name block cannot
     fit a pane, and the block sits INSIDE the scroller so it can stick to it. */
  .lotics-entry-grid__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    overflow: auto;
  }

  .lotics-entry-grid__head,
  .lotics-entry-grid__row,
  .lotics-entry-grid__foot {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-register-cell-gap);
  }

  .lotics-entry-grid__row,
  .lotics-entry-grid__foot {
    min-height: var(--lotics-register-row);
  }

  /* THE FOOT IS THE LAST ROW OF THE GRID, not a band under it: what a position
     comes to stands under the figures it sums, on the same columns, behind one
     rule. */
  .lotics-entry-grid__foot {
    border-top: 1px solid var(--border);
  }

  /* STICKY LEFT, and it paints the register's ground — a transparent block would
     let the cells it is pinned over draw straight through it. */
  .lotics-entry-grid__lead {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* END-justified for the HEAD's and the FOOT's sake: their only content is
       the figure, which has to land over the column it heads. A row's label
       takes the slack, so nothing there has any to justify. */
    justify-content: flex-end;
    flex: none;
    width: var(--lotics-entry-grid-label-width);
    /* HALF THE GRID AT MOST. Pinned to the left edge the block is the one thing
       that cannot give way, and a desk-sized measurement on a phone would leave
       nothing for the cells the grid exists to show. */
    max-width: 50%;
    gap: var(--lotics-lead-gap);
    padding-right: var(--lotics-space-8);
    position: sticky;
    left: 0;
    z-index: var(--lotics-z-sticky-column);
    background-color: var(--lotics-register-ground);
  }

  /* The pinned figure is a SECOND column inside the block, added to the caller's
     label width rather than taken out of it — the names are what they measured,
     and the cap is raised by the same column so the figure is not taken out of
     the NAME's half either. */
  .lotics-entry-grid__lead[data-total] {
    width: calc(var(--lotics-entry-grid-label-width) + var(--lotics-entry-grid-total-width));
    max-width: calc(50% + var(--lotics-entry-grid-total-width));
  }

  .lotics-entry-grid__label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* The name ASKS for its own width and gives way only when the cap above
       leaves nothing else to give. */
    flex: 1 1 var(--lotics-entry-grid-name-width);
    min-width: 0;
  }

  .lotics-entry-grid__total {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lotics-entry-grid-total-width);
  }

  /* THE COLUMNS SHARE THE SLACK. The register band is the FLOOR — a cell's whole
     box is the press target, and the seat a control fills — and grow takes
     whatever the pane has left, so a fortnight across a wide pane fills it. */
  .lotics-entry-grid__axis-cell,
  .lotics-entry-grid__cell {
    flex: 1 0 var(--lotics-register-row);
    min-width: var(--lotics-register-row);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-4));
  }

  .lotics-entry-grid__axis-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .lotics-entry-grid__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    appearance: none;
    cursor: auto;
  }

  /* A CELL THAT MAY BE FILLED IS WIDER THAN ONE THAT IS READ: a control has to
     hold a figure and its own affordance, and at the band's own floor a select
     inside it draws nothing but a chevron. */
  .lotics-entry-grid__cell[data-kind="editor"] {
    flex-basis: var(--lotics-entry-grid-total-width);
    min-width: var(--lotics-entry-grid-total-width);
  }

  /* THE SEAT — the control gives up its own margin and takes the cell's box, so
     a column of editors keeps the rhythm a column of readings has. */
  .lotics-entry-grid__seat {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding-inline: var(--lotics-space-2);
  }

  /* NOTHING WAS DUE — the box stays, so the column keeps its rhythm and the mark
     reads as an answer rather than as a hole. Quieter than a reading, because it
     is the one cell the eye should pass over. */
  .lotics-entry-grid__cell[data-kind="absent"] {
    background: var(--lotics-wash-selected);
  }

  /* The position the reader is standing in, tinted down its whole height so the
     eye can run a finger along it. */
  .lotics-entry-grid__axis-cell[data-current],
  .lotics-entry-grid__cell[data-current] {
    background: var(--lotics-wash-selected);
  }

  .lotics-entry-grid__cell[data-pressable] {
    cursor: pointer;
  }

  .lotics-entry-grid__cell[data-pressable]:hover {
    background: var(--lotics-wash-hover);
  }

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

  /* The pair the reader has OPEN. It outranks hover, because "this is the one in
     the drawer" survives the pointer moving on. */
  .lotics-entry-grid__cell[data-selected],
  .lotics-entry-grid__cell[data-selected]:hover {
    background: var(--lotics-wash-press);
  }
}