/* ============================================================================
 *  tele.css — the live plant readout
 * ============================================================================
 *  ADDITIVE ON PURPOSE. style.css is byte-shared with NXT-Cloud-HMI's console
 *  and is not edited here, so the two pages stay diffable and a future change
 *  to either can still be compared. Everything the telemetry view needs lives
 *  in this file, and it borrows style.css's variables rather than repeating
 *  hex values — a colour has to mean the same thing on this page as it does
 *  on the panel glass (src/logui.cpp) and in the activity log beside it.
 *
 *  COLOUR CARRIES MEANING AND IS NEVER THE ONLY CARRIER. Every state shown
 *  with colour is also shown as a word — "ON"/"off", the RO status text, the
 *  stale banner's sentence — because a plant alarm distinguishable only by
 *  hue is invisible to a colour-blind operator and to a photocopied handover
 *  sheet alike.
 * ========================================================================== */

#tele { margin: 0 0 18px; }

/* --- staleness banner ------------------------------------------------------
 * ABOVE the numbers, not beside them. The entire point is that it is read
 * BEFORE the values are, not noticed afterwards. A dashboard confidently
 * showing a twenty-minute-old reading is worse than one showing nothing.  */
.tele-stale {
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.tele-stale.warn {
  background: rgba(245, 158, 11, .12);
  color: var(--amber);
  border-color: rgba(245, 158, 11, .35);
}
.tele-stale.bad {
  background: rgba(239, 68, 68, .12);
  color: var(--red);
  border-color: rgba(239, 68, 68, .35);
}

/* --- number tiles --------------------------------------------------------- */
.tele-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.tile {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;      /* let a long value shrink instead of blowing the grid */
}
.tile.ok   { border-left: 3px solid var(--green); }
.tile.warn { border-left: 3px solid var(--amber); }
.tile.bad  { border-left: 3px solid var(--red); }

.tile-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dim);
}
.tile-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  /* Tabular figures so a value ticking between 9 and 10 does not shift the
   * whole tile sideways on every update.                                  */
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tile-unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--dim);
  margin-left: 3px;
}

/* --- discrete I/O --------------------------------------------------------- */
.tele-io { display: flex; flex-direction: column; gap: 6px; }

.io-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.io-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dim);
  width: 64px;
  flex: none;
}
.io-bit {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
/* "on" is the state worth spotting from across a room, so it carries the
 * weight. "off" stays legible rather than greyed into the background: an
 * operator confirming a pump is NOT running has to read that too.        */
.io-bit.on  {
  background: rgba(34, 197, 94, .15);
  border-color: rgba(34, 197, 94, .45);
  color: var(--green);
  font-weight: 600;
}
.io-bit.off { color: var(--dim); }

/* --- age line ------------------------------------------------------------- */
.tele-age {
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}