/* ---- The command palette ----
   Cmd-K. Every screen, every setting and every recent submission a keystroke
   and a few letters away, instead of a rail, a sub-list and a table between
   somebody and the thing they were already thinking about.

   It goes places and it does not do things. There is no path from a row here to
   anything that writes, which is what makes a forgiving matcher safe: the worst
   a wrong guess can cost is a screen you did not want.

   Its own stylesheet because the palette grew a mark on every row, a state dot,
   marked-up matched letters and a narrow-screen layout, and console-forms.css
   is a stylesheet about forms. */
.cb-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--cbc-z-scrim);
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: var(--cb-space-10xl);
  padding-inline: var(--cb-space-xl);
  background: var(--cbc-veil);
  backdrop-filter: var(--cbc-veil-blur);
}
/* NO FADE ON THE DIM, and it is the same measured reason console-forms.css
   gives for the dialog veil: this element carries a backdrop-filter, so fading
   it re-composites a filtered copy of the whole viewport on every frame of the
   fade. The panel above it still arrives on its own animation, which is the
   part anybody was watching. */
.cb-palette {
  width: min(100%, var(--cb-width-lg));
  border-radius: var(--cb-radius-3xl);
  background: var(--cbc-surface);
  border: 1px solid var(--cbc-line-strong);
  box-shadow: var(--cbc-shadow);
  overflow: hidden;
  animation: cbc-rise var(--cb-motion-base) var(--cbc-spring) backwards;
}
.cb-palette-head {
  display: flex;
  align-items: center;
  gap: var(--cb-space-lg);
  padding: var(--cb-space-xl) var(--cb-space-2xl);
  border-bottom: 1px solid var(--cbc-line);
}
.cb-palette-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font-size: var(--cb-type-md-size);
  outline: none;
}
/* Sized to the screen it is on rather than to a width token standing in for a
   height, which is what this was: a 480px cap on a monitor with room for three
   times that, and too tall on a phone with the keyboard up. */
.cb-palette-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--cb-space-md);
}
.cb-palette-group {
  padding: var(--cb-space-lg) var(--cb-space-lg) var(--cb-space-sm);
  font-size: var(--cb-type-xs-size);
  font-weight: var(--cb-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-xxs);
  color: var(--cbc-ink-faint);
}

/* A grid rather than a flex row, so the icon column lines up down the whole
   list and the label does not shift sideways when a favicon resolves late. */
.cb-palette-row {
  display: grid;
  grid-template-columns: var(--cb-space-3xl) minmax(0, auto) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--cb-space-lg);
  width: 100%;
  padding: var(--cb-space-md) var(--cb-space-lg);
  border-radius: var(--cb-radius-lg);
  text-align: start;
  cursor: pointer;
  /* Answers immediately and never moves anything. */
  transition: background var(--cb-motion-fast) var(--cb-motion-ease);
}
.cb-palette-row[aria-selected="true"] {
  background: var(--cbc-accent-wash);
}
.cb-palette-row:hover {
  background: var(--cbc-hover);
}
.cb-palette-label {
  font-size: var(--cb-type-sm-size);
  font-weight: var(--cb-font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The letters the typing actually hit. Colour and weight, never a highlighter:
   browsers paint `mark` yellow by default, and a block of background behind
   four scattered characters reads as a ransom note. */
.cb-palette-row mark {
  background: none;
  /* The readable step of the accent, not the button one. See --cbc-accent-text
     in console-theme.css: the brand accent as 14px text is 4.11:1 on this
     ground, and the marked letters are the part of the row that has to be read
     most carefully. */
  color: var(--cbc-accent-text);
  font-weight: var(--cb-font-weight-semibold);
}
/* The matched letters stay marked on the selected row too. They were switched
   to plain ink here to avoid clashing with the wash behind them, which took the
   working out away from the one row somebody is actually reading. */

.cb-palette-mark {
  color: var(--cbc-ink-faint);
}
.cb-palette-row[aria-selected="true"] .cb-palette-mark {
  color: var(--cbc-ink);
}
.cb-palette-row .cb-site-icon {
  justify-self: center;
}

/* One dot for a scan's state. It carries a tooltip naming the state in words,
   because colour on its own is not a label. */
.cb-palette-state {
  inline-size: var(--cb-space-md);
  block-size: var(--cb-space-md);
  border-radius: var(--cb-radius-full);
  background: var(--cbc-ink-faint);
}
.cb-palette-state[data-status="queued"] {
  background: var(--cbc-run-queued);
}
.cb-palette-state[data-status="running"] {
  background: var(--cbc-run-running);
}
.cb-palette-state[data-status="complete"] {
  background: var(--cbc-run-complete);
}
.cb-palette-state[data-status="manual_review"] {
  background: var(--cbc-run-review);
}
.cb-palette-state[data-status="blocked"] {
  background: var(--cbc-run-blocked);
}

.cb-palette-hint {
  grid-column: -2;
  justify-self: end;
  font-size: var(--cb-type-xs-size);
  color: var(--cbc-ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-palette-empty {
  padding: var(--cb-space-3xl);
  text-align: center;
  color: var(--cbc-ink-faint);
  font-size: var(--cb-type-sm-size);
}

/* The server is still answering. Under the results, never instead of them: the
   screens and settings are already correct and stay usable while the websites
   are still on their way. */
.cb-palette-waiting {
  display: flex;
  align-items: center;
  gap: var(--cb-space-lg);
  padding: var(--cb-space-md) var(--cb-space-lg);
  font-size: var(--cb-type-xs-size);
  color: var(--cbc-ink-faint);
}
/* The wave is .cb-live-bars, shared with the rail's live card and the
   assistant, so the console has one idea of what working looks like rather than
   three. Only its size is set here: at the rail's height it would tower over a
   line of small print. */
.cb-palette-wave {
  block-size: var(--cb-space-lg);
}

/* What a screen reader is told, and nobody sees. Not `hidden`, which would
   take it out of the accessibility tree along with everything else. */
.cb-palette-say {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cb-palette-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-xl);
  padding: var(--cb-space-lg) var(--cb-space-2xl);
  border-top: 1px solid var(--cbc-line);
  font-size: var(--cb-type-xs-size);
  color: var(--cbc-ink-faint);
}
.cb-palette-keys > span {
  display: inline-flex;
  align-items: center;
  gap: var(--cb-space-md);
}

/* Mirrors tokens.breakpoint.md (768px): CSS cannot read var() in a prelude.
   On a phone the panel sits nearer the top, and the shortcut legend goes: a row
   teaching keyboard shortcuts to a touch screen is pure furniture. */
@media (max-width: 768px) {
  .cb-scrim {
    padding-top: var(--cb-space-4xl);
  }
  .cb-palette-list {
    max-height: 50vh;
  }
  .cb-palette-keys {
    display: none;
  }
  /* The hint is the first thing to go when there is no room for both it and
     the name of the thing you are trying to reach. */
  .cb-palette-hint {
    display: none;
  }
  .cb-palette-row {
    grid-template-columns: var(--cb-space-3xl) minmax(0, 1fr) auto;
  }
}

/* ---- Landing on a setting ----
   The palette can address one control ("#/settings/scan?at=pages-per-scan") and
   settings-anchor.ts scrolls it into view and stamps `data-found` on it. That
   attribute had no rule anywhere, so the scroll happened and nothing was ever
   lit: the reader arrived somewhere in the middle of a long screen with no
   indication of which row they had asked for. The e2e test asserted the
   attribute, which passes whether or not anything is drawn.

   A wash and a hairline, both of which fade out on their own. Not a flash: a
   thing that blinks reads as an error, and this is an answer. The transition is
   on the resting state rather than the lit one, so the arrival is instant and
   only the LEAVING is eased, which is what makes it feel like the highlight
   settling rather than a pulse. */
.cb-set,
.cb-route-row {
  transition:
    background var(--cb-motion-slow) var(--cbc-spring),
    box-shadow var(--cb-motion-slow) var(--cbc-spring);
}
.cb-set[data-found],
.cb-route-row[data-found],
.cb-expand[data-found] > summary,
.cb-team-row[data-found] {
  background: var(--cbc-accent-quiet);
  box-shadow: inset 0 0 0 1px var(--cbc-accent-wash);
  transition: none;
}

/* ---- A named tool wears its lockup in the list ----
   The same mark the rail draws, so the thing you searched for looks like the
   thing you arrive at (src/palette/rows.ts).

   IT IS BOXED TO THE MARK COLUMN AND NOT TO ITS OWN WIDTH. Every other row here
   leads with a 20px glyph or a favicon, and a lockup is a wordmark several
   times as wide: left to size itself the shelf rows would step their labels
   right and the list would stop having a column. The lockup shrinks to fit that
   box, which is what --cbc-mark-span is overridden to do here. */
.cb-palette-lockup {
  position: relative;
  /* ACROSS THE MARK COLUMN AND THE NAME COLUMN, because it is both. The row is
     a grid whose first track is a 24px glyph (see .cb-palette-row), and a
     wordmark put in that track simply overflowed it and lay across the text.
     Spanning the two leaves the lockup flush left with every other row's icon
     and its descriptor out at the far end with every other row's hint. */
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  /* Wide enough to READ, because this is the row's name and not its mark: a
     wordmark at glyph size is a smudge. It is still one fixed width for every
     tool, so the descriptors beside them line up into a column. */
  inline-size: var(--cb-space-9xl);
  block-size: var(--cb-space-2xl);
  overflow: hidden;
}
.cb-palette-lockup .cb-lockup {
  --cbc-mark-span: 100%;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  display: flex;
  align-items: center;
}
/* THE LOCKUP'S TYPED NAME IS OFF HERE, and only here. It exists so a tool with
   no artwork still says what it is, which is right in the rail where the row
   has no other words on it. This row prints the label an inch to the right, so
   the fallback made every shelf row say its own name twice. */
.cb-palette-lockup .cb-lockup-word {
  display: none;
}
/* The glyph underneath, which is what a row falls back to instead: it is drawn
   until the artwork answers, and for good if there is none. */
.cb-palette-lockup > .cb-palette-mark {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
}
.cb-palette-lockup:has(.cb-lockup[data-has-light]) > .cb-palette-mark,
.cb-palette-lockup:has(.cb-lockup[data-has-dark]) > .cb-palette-mark {
  visibility: hidden;
}