/*
 * LANES DOWN THE SIDE, A SHARED AXIS ACROSS. Every box is placed by two caller-computed shares, so
 * nothing measures itself. An opening is the ground and a block the ink over it: what is free is what a
 * dispatcher reads for. A block is its state's wash with the state's ink, as a calendar's chip is — never a
 * saturated bar with words on it. On a phone (`data-compact`) each lane is a heading over a list of its
 * work and openings, as the calendar's agenda lists its days.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-lane-board {
    /* A lane with two readings under its name. */
    --lotics-lane-board-lane: 56px;
    /* One stripe of a lane: a block's two lines, its words and its detail. */
    --lotics-lane-board-stripe: var(--lotics-control-height);
    /* Narrower is an unpressable hairline; the one place a duration rounds, and it rounds up. The board states a
       name's run once it measures its track. */
    --lotics-lane-board-block: 10px;
    /* A block's move: the `sm` icon button at its end. */
    --lotics-lane-board-move: 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-12);
  }

  /* The board's own horizontal scroll, where its marks need more room than its box: never the page's. */
  .lotics-lane-board__port {
    min-width: 0;
    overflow-x: auto;
  }

  .lotics-lane-board__sheet {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: var(--lotics-lane-board-sheet);
    gap: var(--lotics-space-12);
  }

  /* A lane's name stays in view while its track scrolls under it. */
  .lotics-lane-board__sheet .lotics-lane-board__head {
    position: sticky;
    left: 0;
    z-index: var(--lotics-z-row-content);
    background-color: var(--background);
  }

  /* Starts where the tracks do, so a mark stands over its minute. */
  .lotics-lane-board__ruler {
    position: relative;
    flex-shrink: 0;
    height: var(--lotics-space-24);
    margin-left: var(--lotics-lane-board-head);
    margin-bottom: calc(var(--lotics-space-12) * -1);
  }

  /* A day's number under its weekday stands two lines. */
  .lotics-lane-board__ruler[data-captioned] {
    height: var(--lotics-space-48);
  }

  .lotics-lane-board__tick {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--lotics-space-2);
    padding-left: var(--lotics-space-4);
    padding-bottom: var(--lotics-space-4);
    border-left: 1px solid var(--border);
  }

  .lotics-lane-board__day {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: var(--lotics-mark-sm);
    height: var(--lotics-mark-sm);
    border-radius: var(--lotics-radius-full);
  }

  /* TODAY IS A RING, NOT A FILL, as the calendar and the matrix draw it. */
  .lotics-lane-board__day[data-current] {
    box-shadow: inset 0 0 0 1px var(--lotics-accent);
  }

  .lotics-lane-board__lane {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
    /* Its stripes, each a block's two lines, inset off its rules — at least a lane's own measure — and what the page
       left under a board of few lanes (`--lotics-lane-board-grow`). */
    min-height: calc(
      max(var(--lotics-lane-board-lane), calc(var(--lotics-lane-board-tiers) * var(--lotics-lane-board-stripe) + var(--lotics-space-16))) +
        var(--lotics-lane-board-grow, 0px)
    );
    border-top: 1px solid var(--border);
  }

  .lotics-lane-board__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    width: var(--lotics-lane-board-head);
    gap: var(--lotics-space-8);
    padding-right: var(--lotics-space-12);
  }

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

  .lotics-lane-board__label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--lotics-space-2);
    padding-block: var(--lotics-space-8);
  }

  .lotics-lane-board__loads {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-2);
    min-width: 0;
  }

  /* Reading and overflow each whole; the overflow wraps under. */
  .lotics-lane-board__load {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--lotics-space-8);
    row-gap: var(--lotics-space-2);
    min-width: 0;
  }

  .lotics-lane-board__overflow {
    flex-shrink: 0;
  }

  .lotics-lane-board__track {
    position: relative;
    flex: 1;
    min-width: 0;
  }

  /* The axis's own rule carried through the lane, under everything on it. */
  .lotics-lane-board__rule {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--border);
    opacity: 0.5;
  }

  /* Dashed: a shape nobody has filled yet. */
  .lotics-lane-board__opening {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-4);
    /* The lane's own height, inset off its rules, so a second reading needs no re-centring. */
    inset-block: var(--lotics-space-8);
    left: var(--lotics-lane-board-left);
    width: var(--lotics-lane-board-width);
    margin: 0;
    padding-inline: var(--lotics-space-6);
    overflow: hidden;
    /* The ground under the work, quieter than any block on it: a faint edge, its words in the quiet ink. */
    border: 1px dashed color-mix(in srgb, var(--border) 55%, transparent);
    border-radius: var(--lotics-radius-control);
    background-color: transparent;
    font: inherit;
    appearance: none;
    text-align: left;
  }

  .lotics-lane-board__opening[data-pressable] {
    cursor: pointer;
    touch-action: manipulation;
  }

  .lotics-lane-board__opening[data-pressable]:hover {
    border-color: var(--border);
    background-color: var(--lotics-wash-hover);
  }

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

  /* An opening's add: its + waits for the pointer or the keyboard. */
  .lotics-lane-board__add {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-lane-board__opening:hover > .lotics-lane-board__add,
  .lotics-lane-board__opening:focus-visible > .lotics-lane-board__add {
    opacity: 1;
  }

  /* One stripe of the lane per tier, so overlapping work stacks rather than hides. */
  .lotics-lane-board__block {
    /* A stripe's share of the lane inside its rules' inset. */
    --lotics-lane-board-band: calc((100% - var(--lotics-space-16)) / var(--lotics-lane-board-tiers));
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    top: calc(var(--lotics-space-8) + var(--lotics-lane-board-band) * var(--lotics-lane-board-tier));
    height: calc(var(--lotics-lane-board-band) - var(--lotics-space-2));
    /* Drawn at least wide enough to name (the board's `--lotics-lane-board-block`), and kept inside the axis. */
    --lotics-lane-board-at: min(var(--lotics-lane-board-left), calc(100% - var(--lotics-lane-board-block)));
    left: var(--lotics-lane-board-at);
    width: var(--lotics-lane-board-width);
    min-width: var(--lotics-lane-board-block);
    margin: 0;
    padding-inline: var(--lotics-space-6);
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--lotics-radius-control);
    background-color: var(--lotics-lane-board-tone);
    font: inherit;
    appearance: none;
    text-align: left;
    /* The state's ink on the state's wash. */
    --lotics-ink-default: var(--lotics-lane-board-ink);
  }

  .lotics-lane-board__block[data-pressable] {
    cursor: pointer;
    touch-action: manipulation;
  }

  .lotics-lane-board__block[data-pressable]:hover {
    background-image: linear-gradient(0deg, var(--lotics-wash-hover), var(--lotics-wash-hover));
  }

  /* The kit's selected wash, matching the register beneath. */
  .lotics-lane-board__block[data-selected] {
    border-color: var(--ring);
  }

  /* Hatched in the state's strong tone over its wash, so late and cancelled never share one ink. */
  .lotics-lane-board__block[data-late] {
    background-image: repeating-linear-gradient(
      135deg,
      var(--lotics-lane-board-edge) 0,
      var(--lotics-lane-board-edge) 2px,
      transparent 2px,
      transparent 6px
    );
  }

  /* The block's words and, where the stripe has room, its detail under them. */
  .lotics-lane-board__plate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  /* The words sit on a plate of the block's tone, where an unhatched block's would. */
  .lotics-lane-board__plate[data-late] {
    margin-inline-start: calc(var(--lotics-space-4) * -1);
    padding-inline: var(--lotics-space-4);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    background-color: var(--lotics-lane-board-tone);
  }

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

  /* A block's move stands at its end, in its stripe: the block's words end before it. */
  .lotics-lane-board__block[data-movable] {
    padding-inline-end: calc(var(--lotics-lane-board-move) + var(--lotics-space-8));
  }

  .lotics-lane-board__track > .lotics-lane-board__move {
    --lotics-lane-board-band: calc((100% - var(--lotics-space-16)) / var(--lotics-lane-board-tiers));
    position: absolute;
    top: calc(
      var(--lotics-space-8) + var(--lotics-lane-board-band) * var(--lotics-lane-board-tier) +
        (var(--lotics-lane-board-band) - var(--lotics-space-2) - var(--lotics-icon-button-size)) / 2
    );
    --lotics-lane-board-at: min(var(--lotics-lane-board-left), calc(100% - var(--lotics-lane-board-block)));
    left: calc(
      var(--lotics-lane-board-at) + max(var(--lotics-lane-board-width), var(--lotics-lane-board-block)) - var(--lotics-icon-button-size) -
        var(--lotics-space-4)
    );
  }

  /* A lane offered to a move: its face and name, and what it would carry, as its head reads them. */
  .lotics-lane-board__choice {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  /* The menu's row holds its own air: the head's inset is the lane's. */
  .lotics-lane-board__choice > .lotics-lane-board__label {
    padding-block: 0;
  }

  /* ── A PHONE: each lane its heading over its entries, as the agenda lists its days ── */

  .lotics-lane-board[data-compact] {
    gap: var(--lotics-space-16);
  }

  .lotics-lane-board__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  .lotics-lane-board[data-compact] .lotics-lane-board__head {
    width: auto;
    padding-right: 0;
  }

  /* Its rows stand inside its padding, so a row's dot never straddles the card's edge. */
  .lotics-lane-board__entries {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    padding-inline: var(--lotics-space-12);
    border-radius: var(--lotics-radius-card);
    background-color: var(--muted);
  }

  /* Centred in an icon's box, so a block's words and an opening's (led by its +) start at one x. */
  .lotics-lane-board__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-inline: var(--lotics-space-4);
    border-radius: var(--lotics-radius-full);
    background-color: var(--lotics-lane-board-dot);
  }

  /* An opening nobody adds to here: the ground's dashed edge, where work would stand. */
  .lotics-lane-board__dot[data-open] {
    border: 1px dashed var(--lotics-ink-muted);
    background-color: transparent;
  }
}