/*
 * The handful of things the fleet page needs that the console does not.
 *
 * Loaded AFTER styles.css, which carries everything else — the palette, the cards, the
 * tables, the pills, both themes. Duplicating any of that here is how the two pages
 * would start to look like different products; this file exists only for what is
 * genuinely specific to a list whose whole job is to make silence visible.
 */

/* `.stale`, `.row-stale` and `.vaad-note` now live in styles.css. The console's own
   Vaad tab renders the same rows and needs the same marking, and one definition both
   pages load beats two that drift apart. What remains here is the id-entry panel, which
   exists only on this page. */

/* --- Choosing which cars ------------------------------------------------- */

#idInput {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Ids are read off a screen and typed one-handed; the default textarea size makes a
     list of twenty look like a wall. */
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  resize: vertical;
}

.lookup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 18px 0 4px;
}

/* button.primary carries its own margin-top for the forms it usually ends. Here it sits
   in a row beside another control, where that margin only pushes it 9px below its
   neighbour; the row provides the spacing instead. */
.lookup-actions .primary {
  margin-top: 0;
}

/* The native file input cannot be styled to match the buttons beside it, so it is
   hidden inside its own label and the label is what gets drawn. Kept focusable — the
   input is still in the tab order and still announces itself to a screen reader.

   The base button rules in styles.css are scoped to `button`, so a <label> picks up the
   .ghost background and nothing else — it rendered 100x23 against a 140x45 button next
   to it. These repeat the box so the two controls match and the tap target is a real
   one; they are copied deliberately rather than by widening the selector in styles.css,
   which would restyle every label on both pages. */
.file-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: .65rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
}

.file-button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.file-button input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-button:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.vaad-hint {
  margin: 2px 2px 12px;
  font-size: 0.82rem;
}

.vaad-footnote {
  margin-top: 18px;
  font-size: 0.86rem;
  text-align: center;
}

.vaad-footnote a {
  color: inherit;
}

/* On a narrow screen "Show these cars" and "Upload a sheet" no longer fit side by side
   and wrap — at their natural widths, which leaves them sitting ragged and short against
   a full-width text box above. Letting them grow means they share the row while it holds
   them and each fill it once it does not, so the panel reads as one column either way.
   Only below the breakpoint: on the 720px card they would stretch to ~350px each, which
   is a button the size of a paragraph. */
@media (max-width: 760px) {
  .lookup-actions > * {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}