/*
 * THE REGISTER ROW. Four states that must not collide: hover is transient, open
 * and ticked are persistent, and press is the gesture. One neutral step apart —
 * the row ladder of §2.3. A brand tint here would make "which record is open"
 * mean "which record is highlighted by the theme".
 *
 * `marked` shares the open row's ground rather than keeping a blue of its own:
 * the ticked checkbox is what separates the two, and two grounds could never
 * both render on a row that is both.
 *
 * The wash BLEEDS outward — an equal negative margin and padding, net zero for
 * layout — so the row's content sits on the container's own edge, flush with the
 * headings around it, while the wash still gets its breathing room.
 *
 * THE TILE marks the same states on an EDGE instead, because it sits on the
 * page's own ground with no row to wash: SELECTION IS AN EDGE and hover / press /
 * focus are a RING. Both are drawn with `box-shadow` so neither moves the box.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-pressable-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* 12 — a rung and a half, the register's own column gutter. */
    gap: var(--lotics-space-12);
    flex-shrink: 0;
    min-width: 0;
    /* The positioning context and the stacking context a `RowFocusEntry` needs: the
       door is an absolutely-positioned sibling, and the content lifts above it. */
    position: relative;
    isolation: isolate;
    background-color: transparent;
    /* The ARROW: a register row is a button wrapped around DATA, and its text is
       selectable. */
    cursor: auto;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-pressable-row[data-variant="register"] {
    border-radius: var(--lotics-radius-control);
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
  }

  /* Square, full-bleed, for a grid that draws its own rules between rows. */
  .lotics-pressable-row[data-variant="bleed"] {
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
  }

  /* Half a rung tighter than the control corner — a row nested inside a padded
     container reads as a distinct object when its corners are softer. */
  .lotics-pressable-row[data-variant="inset"] {
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
  }

  .lotics-pressable-row:not([data-variant="card"]):hover {
    background-color: var(--lotics-wash-hover);
  }
  .lotics-pressable-row:not([data-variant="card"])[data-selected],
  .lotics-pressable-row:not([data-variant="card"])[data-marked] {
    background-color: var(--lotics-wash-selected);
  }
  .lotics-pressable-row:not([data-variant="card"]):active {
    background-color: var(--lotics-wash-press);
  }

  .lotics-pressable-row[data-variant="card"] {
    flex-direction: column;
    align-items: stretch;
    text-align: start;
    gap: 0;
    padding: var(--lotics-space-16);
    margin: 0;
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
    border-radius: var(--lotics-radius-control);
    background-color: var(--card);
    appearance: none;
    /* A `<button>`, so the UA face has to be stated: §5 rule 1. */
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-regular);
    color: var(--lotics-ink-default);
    /* A tile in a picker SETS A VALUE; the pointer is reserved for what acts. */
    cursor: default;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .lotics-pressable-row[data-variant="card"][data-selected] {
    border-color: var(--ring);
    box-shadow: 0 0 0 1px var(--ring);
  }

  .lotics-pressable-row[data-variant="card"]:hover,
  .lotics-pressable-row[data-variant="card"]:active {
    box-shadow: 0 0 0 var(--lotics-ring-width) var(--ring);
  }

  /* The keyboard ring is an outline rather than a second shadow — the same
     width and colour, flush against the border, so hover and focus draw one
     edge. */
  .lotics-pressable-row[data-variant="card"]:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }
}