/* Stations overview — the card grid from the approved design reference,
   public/kit/design/station.html §4 ("Stations overview").

   WHY A FILE: one module = one folder (CLAUDE.md structure rules), and the kit's
   own qc-ui.css is GENERATED — never hand-edited.

   EVERY COLOUR IS A TOKEN. brand-doctor fails the build on a hex, and
   contrast-doctor fails a rule that sets colour without background (or the
   reverse). The state colours are the FIXED status tokens, not --brand: a
   station being in use means the same thing for every tenant, so it must not
   move when a company's accent does. */

.sta-grid {
  display: grid;
  /* The design shows two columns on a laptop and one on a phone. auto-fill with
     a min gives that without a media query, and keeps working on the 4K board
     the station design is also built for. */
  grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 30vw, 340px), 1fr));
  gap: 12px;
  align-content: start;
}

.sta-card {
  border: 1px solid var(--neutral-tint);
  border-radius: 14px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;                 /* or a long station name blows the grid out */
  background: var(--brand-contrast);
  color: inherit;
}
.sta-card--off { opacity: .72; }

.sta-top { display: flex; align-items: center; gap: 10px; }

/* The dot follows the STATE only. It is the fastest thing to read on a wall of
   tiles, so it carries one meaning and never doubles as a brand accent. */
.sta-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sta-dot--running  { background: var(--ok); }
.sta-dot--idle     { background: var(--neutral); }
.sta-dot--inactive { background: var(--warn); }

.sta-id { min-width: 0; flex: 1; }
.sta-name {
  display: block; font-size: .9rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sta-where {
  display: block; font-size: .72rem; color: var(--neutral);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* What is waiting. Colour carries urgency, and only these three exist — an
   overdue check is red for every tenant. */
.sta-wait { font-size: .8rem; font-weight: 600; }
.sta-wait--ok   { color: var(--ok-darker); }
.sta-wait--warn { color: var(--warn); }
.sta-wait--bad  { color: var(--danger-dark); }

.sta-who {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; color: var(--neutral); min-width: 0;
}
.sta-who span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sta-acts { display: flex; gap: 8px; align-items: stretch; }
/* 44px is the touch minimum for a screen somebody may use on a tablet while
   walking the floor. It is NOT the station's 60px gloved size — this screen is
   read at a desk, and the two are deliberately different numbers. */
.sta-acts .btn-secondary { flex: 1; min-height: 44px; justify-content: center; }
.sta-acts .btn-icon { min-height: 44px; min-width: 44px; }

@media (max-width: 520px) {
  .sta-grid { grid-template-columns: 1fr; }
}

/* "Waiting at this station" — the read-only list behind the tile's own button.
   It is a POPUP on the overview, never a trip into the kiosk: entering a station
   locks the whole browser and there is no unlock, so a supervisor reading from a
   desk must not be able to trip it by tapping a button labelled "see". */
.sta-wrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--neutral-tint);
}
.sta-wrow:last-of-type { border-bottom: 0; }
.sta-wname { font-size: .9rem; font-weight: 650; min-width: 0; }
.sta-wsub  { grid-column: 1; font-size: .76rem; color: var(--neutral); }
/* THE STATUS PILL IS A PILL, NOT A BAR (user, 19 Sep 2026: "that background fill
   should be proportionate ... not a long colour background fill").
   It carried `grid-row` but no `grid-column`, and CSS Grid places definite-ROW
   items BEFORE fully auto-placed ones — so the badge was placed first, landed in
   column 1 (the `1fr` one), stretched to the full width of it, and pushed the
   procedure name into column 2. Naming its column puts it back on the right, and
   justify-self keeps it the width of its own text. */
.sta-wrow > span:last-child {
  grid-row: 1 / span 2;
  grid-column: 2;
  justify-self: end;
  align-self: center;
}