/* Everything the keyboard path needs to be visible. The editor had no
   :focus-visible rule of any kind before this — the icon buttons fell back to
   the UA ring, which is close to invisible on the dark theme.

   All of it keys off --highlight-color, so it follows the accent like the rest
   of the design system. */

/* The roving highlight. :focus-visible rather than :focus so a pointer user
   clicking a row doesn't get a ring they never asked for. */
.start-page-grid .item-row:focus-visible,
.start-page-grid .group-header:focus-visible,
.start-page-grid .add-trigger:focus-visible,
.start-page-grid .edit-button:focus-visible,
.start-page-grid .remove-button:focus-visible {
  outline: 0.125rem solid var(--highlight-color);
  outline-offset: 0.125rem;
  border-radius: var(--control-radius);
}

/* Picked up and waiting to be moved. This has to read as distinct from the
   focus ring above — the row is still focused while it is grabbed — so it
   fills rather than outlines, and borrows .dragging's dashed language without
   the rotate, which would only make a keyboard move harder to follow. */
.start-page-item.grabbed > .item-row,
.start-page-group.grabbed > .group-heading > .group-header {
  background-color: oklch(from var(--highlight-color) l c h / 0.15);
  outline: 0.125rem dashed var(--highlight-color);
  outline-offset: 0.125rem;
  border-radius: var(--control-radius);
}

/* A grab is a move in progress, so the row it came from should not also look
   like the settled one. */
.start-page-grid:has(.grabbed) .drag-handle {
  cursor: default;
}

/* How to drive the grid on the left, how wide it is on the right. The row's
   height is set by the --control-size select, not by the legend, which is what
   guarantees the grid below cannot shift when the legend swaps halves. */
.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}

/* The one control on this page outside the grid, so it borrows the grid's
   sizing rather than the settings forms'. forms.css gives a bare select 0.75em
   padding, which is more than twice this row's line height. */
.column-count {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
  margin: 0;
  /* forms.css gives every form width: 100%, which would take the whole row and
     push the legend onto a second line. This one is as wide as its select. */
  width: auto;
  max-width: none;
  color: var(--mid-color);
  font-size: 0.75em;

  label {
    margin: 0;
  }

  select {
    height: var(--control-size);
    padding: 0 0.5em;
    border-radius: var(--control-radius);
    font-size: 1em;
  }
}

/* Only one of the two halves is ever shown; both are a single line, so the
   grid below does not move when they swap. How a <kbd> looks is shortcuts.css's
   job — the legend and the ? dialog have to agree on that. */
.keyboard-legend {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--mid-color);
  font-size: 0.75em;
  line-height: 1;

  p {
    margin: 0;
  }
}

/* Which half of the legend shows, and whether the drag handles do. The state
   lives as one class on the grid; :has lets the legend above it read that
   without the controller having to reach outside its own element. */
.start-page:has(.start-page-grid.keyboard-mode) .keyboard-legend-enter,
.start-page:not(:has(.start-page-grid.keyboard-mode)) .keyboard-legend-keys {
  display: none;
}

/* Out of keyboard mode a handle is the only way to reorder with a pointer. In
   it, it is a second way to move a row that may already be carried, and one no
   keyboard can reach — so it withdraws.

   visibility rather than display: the handle is --control-size wide, and
   collapsing it would shift every row on the page sideways on each Tab in and
   out. Hidden this way it is also untouchable, so the drag cannot start. */
.start-page-grid.keyboard-mode .drag-handle {
  visibility: hidden;
}

/* The region itself is unstyled on purpose: it is on the page from the start
   and empty until a move fails, so all of its box has to come from the message
   inside it. Anything here would leave a gap above the grid at rest. */
.start-page-notice-error {
  margin: 0 0 1em;
  padding: 0.75em 1em;
  border: 0.0625rem solid var(--danger-color);
  border-radius: var(--control-radius);
  background-color: oklch(from var(--danger-color) l c h / 0.1);
  color: var(--danger-color);
  font-size: 0.875em;
}

/* The drag transforms exist to make a move readable; for anyone who has asked
   for less motion they do the opposite. */
@media (prefers-reduced-motion: reduce) {
  .start-page-item,
  .start-page-group {
    transition: none;

    &.dragging {
      transform: none;
    }
  }
}