/* =====================================================================
   devices.css — the tills screen and the pairing-code panel.

   Only what the shared stylesheets do not already give. `.btn`, `.tbl`,
   `.empty`, `.muted` and the design tokens come from the PWA's own
   components.css / tokens.css, linked read-only by the shell.
   ===================================================================== */

.view--devices .view__intro {
  max-width: 62ch;
  margin-block-start: var(--s-2);
  line-height: 1.6;
}

/* ---------------- the pairing code ---------------- */

.dev__codepanel {
  margin-block: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-3);
  background: var(--c-brand-soft);
  border: 1px solid var(--c-brand);
  text-align: center;
}

.dev__codetitle {
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  margin-block-end: var(--s-3);
}

/* The code is read off this screen and typed into a till on the same
   counter, sometimes across a metre of it. It is sized to be read at that
   distance and letter-spaced so O/0 and I/1 do not have to be guessed at.
   `tabular-nums` keeps it from reflowing as the digits change. */
.dev__code {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: var(--w-bold);
  letter-spacing: .18em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  /* The code is Latin/ASCII inside an RTL document: isolate it so the
     surrounding Persian cannot reorder its characters. */
  direction: ltr;
  unicode-bidi: isolate;
  margin-block: var(--s-2);
}

.dev__timer {
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.dev__codeactions {
  display: flex;
  gap: var(--s-2);
  justify-content: center;
  margin-block-start: var(--s-4);
}

/* ---------------- table ---------------- */

.dev__body { margin-block-start: var(--s-4); }

/* A device code is an identifier, not a number — left-to-right, monospaced,
   and never digit-shaped into Persian. */
.view--devices .mono {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-weight: var(--w-medium);
  letter-spacing: .06em;
}

@media (max-width: 720px) {
  .dev__codeactions { flex-direction: column; }
}

/* ---------------- fleet telemetry (CONTRACT §2.11) ---------------- */

/* The summary strip. `auto-fit` rather than a fixed column count because the
   tile count is fixed but the console is read on everything from a 1280px
   counter monitor to a phone held by whoever walked to the back office. */
.fleet__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--s-3);
  margin-block-end: var(--s-3);
}

.fleet__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-surface);
}

.fleet__tile--ok     { border-color: var(--c-ok); }
.fleet__tile--warn   { border-color: var(--c-warn); }
.fleet__tile--danger { border-color: var(--c-danger); }

.fleet__tilenum   { font-size: var(--t-xl); font-weight: var(--w-bold); }
.fleet__tilelabel { font-size: var(--t-sm); color: var(--c-dim); text-align: center; }

.fleet__note { margin-block-end: var(--s-3); font-size: var(--t-sm); }
.fleet__body { margin-block-start: var(--s-3); }
.fleet__detailhead { margin-block-end: var(--s-3); }

/* A wide table on a narrow screen scrolls inside itself; the page never
   scrolls sideways. */
.fleet__table { width: 100%; }

/* The whole row opens the history, so it must look and behave like one. It is
   focusable and answers Enter — a support engineer reading this screen is
   often doing it one-handed with a phone to their ear. */
.fleet__row { cursor: pointer; }
.fleet__row:hover  { background: var(--c-surface-2); }
.fleet__row:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
}

.fleet__name { font-weight: var(--w-medium); }

/* A bridge that is down is stated in the text colour, not only by the word:
   this column is scanned, not read. */
.fleet__off { color: var(--c-danger); }

@media (max-width: 720px) {
  .fleet__summary { grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); }
}