/*
 * THE COLUMN BOARD. Records as cards, columns as the values of ONE field, and
 * the act the shape exists for: moving a card between them.
 *
 * THE BOARD OWNS ITS HORIZONTAL SCROLL: columns overflow sideways inside it and
 * the page body never does. COLUMNS GROW; THE PAGE SCROLLS — a board with
 * independently scrolling columns needs a bounded height, and a height nobody can
 * derive gets hand-picked.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-board {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    overflow-x: auto;
  }

  /* The columns sit on AIR — no rules, no per-column ground. `flex-start` keeps
     each column as tall as its own cards.

     The track is padded on EVERY side: a column paints a ring when it is the drop
     target, and a ring drawn at the scroller's own edge is clipped by it. */
  .lotics-board__track {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--lotics-space-16);
    padding: var(--lotics-space-4);
    padding-bottom: var(--lotics-space-16);
  }

  .lotics-board__column {
    /* The narrowest a card stays READABLE, and it leaves the next column visibly
       peeking at 375 — the only thing telling a phone reader the board continues
       sideways. */
    --lotics-board-column-width: 280px;
    /* The ring's own width, named because the margin has to cancel exactly it. */
    --lotics-board-column-edge: 1px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    width: var(--lotics-board-column-width);
    gap: var(--lotics-space-8);
    padding: var(--lotics-space-8);
    /* The ring is drawn INSIDE the column's own footprint — a transparent border
       at rest, cancelled by a negative margin — so a column does not move a pixel
       when it becomes the drop target. */
    margin: calc(var(--lotics-board-column-edge) * -1);
    border: var(--lotics-board-column-edge) solid transparent;
    border-radius: var(--lotics-radius-control);
  }

  /* The drop target, in the kit's own attention language — the tint a file drop
     target paints, not a colour picked here. */
  .lotics-board__column[data-over] {
    background-color: var(--lotics-accent-wash);
    border-color: var(--lotics-accent);
  }

  .lotics-board__heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-8);
    min-height: 28px;
  }

  .lotics-board__identity {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 1;
    min-width: 0;
  }

  .lotics-board__count {
    display: block;
    flex-shrink: 0;
  }

  /* The column's act rides the right edge and holds its slot whether or not there
     is one, so headings across the board keep one baseline. A COLUMN of stretched
     children: a row would lay two acts side by side where the board stacks them. */
  .lotics-board__action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* The gap INSIDE the column (between its cards) is half the gap BETWEEN them. */
  .lotics-board__pile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /*
   * THE CARD's own surface. The wash gives it a body: a transparent card on a
   * white canvas is a border rather than an object. It takes the CONTAINER rung of
   * the radius ladder — a whole card being pressable does not make it a control.
   *
   * `isolation` plus `position` are what the `RowFocusEntry` inside needs: the door
   * is an absolutely-positioned first child, and the content after it lifts above
   * by paint order alone.
   */
  .lotics-board__card {
    /* Half the difference between an `sm` IconButton's box and its glyph — what
       the control cluster is pulled out by so its INK lands on the title's edge. */
    --lotics-board-ink-inset: 5px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    position: relative;
    isolation: isolate;
    margin: 0;
    padding: var(--lotics-space-16);
    border: 0 solid var(--border);
    border-radius: var(--lotics-radius-card);
    background-color: var(--lotics-wash-selected);
    /* The ARROW: a pointing hand over a card invites a click where a drag is what
       the reader wants. The keyboard door inside carries the affordance. */
    cursor: auto;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  /* One neutral step darker, and one more for the record that is open — the same
     three-rung ladder a register row has, on the card's own ground. */
  .lotics-board__card:hover {
    background-color: var(--lotics-wash-press);
  }

  .lotics-board__card[data-selected] {
    background-color: var(--lotics-wash-control-press);
  }

  .lotics-board__card[data-dragging] {
    opacity: 0.9;
    z-index: var(--lotics-z-drag);
    box-shadow: var(--lotics-shadow-raised);
    transform: translate(var(--lotics-board-drag-x), var(--lotics-board-drag-y));
  }

  /* Positioned, so it paints and hit-tests above the door that precedes it — paint
     order does it, and no rung on the z ladder is spent.

     The title, the owner and the date are three separate FACTS, not one block of
     text, and the step stays below the gap BETWEEN cards so within-card is still
     tighter than between-card. */
  .lotics-board__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    position: relative;
    gap: var(--lotics-space-8);
  }

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

  .lotics-board__title {
    display: block;
    flex: 1;
    min-width: 0;
    /* The room the pinned controls occupy: absolute positioning takes an element
       out of the flow, so the flow has to be told it is still there. */
    padding-right: var(--lotics-space-48);
  }

  /* Pinned to the card's own corner, not carried by the title row: a title that
     wraps to two lines would otherwise push the controls down.

     Measured from the card's CONTENT box, which already begins one padding in — so
     the top offset is zero. The right offset pulls the cluster out by a control's
     ink inset, so its glyph shares the title's edge. */
  .lotics-board__controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    right: calc(var(--lotics-board-ink-inset) * -1);
    gap: var(--lotics-space-2);
  }

  /* The SAME box as the sm IconButton beside it: two control sizes in one cluster
     leave their glyphs on two different edges. */
  .lotics-board__grip {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    cursor: grab;
    /* Without this a touch drag scrolls the board instead of moving the card. */
    touch-action: none;
  }

}