/* Components. Single-class selectors, no nesting deeper than a modifier, so
 * any stack can consume them.
 *
 * Form controls are scoped to authentication only (sign in, sign out, reset
 * password). This is not a general form kit.
 *
 * Badges and alerts are OUTLINED rather than filled. The brand guide forbids
 * creating tints of the core colours, and a tinted background is exactly
 * that — so state is carried by border plus label instead.
 */

/* ---- Layout helpers ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.stack > * + * { margin-top: var(--space-4); }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* ---- Button -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.btn:hover { background: var(--color-surface-sunken); }
.btn:active { transform: translateY(0.5px); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Green as a fill with black on top — the guide's own recommendation, and
   the only accessible way to use it in the light theme (9.26:1). */
.btn--primary {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-action-primary-text);
}
.btn--primary:hover {
  background: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
}

/* Destructive user action — distinct from "alarm", which is a system state. */
.btn--danger {
  background: var(--color-alarm);
  border-color: var(--color-alarm);
  color: #fff;
}
.btn--danger:hover { filter: brightness(0.92); }

.btn--ghost { border-color: transparent; }
.btn--ghost:hover { background: var(--color-surface-sunken); }

.btn--sm { min-height: 1.75rem; padding: 0 var(--space-3); }
.btn--lg { min-height: 2.75rem; padding: 0 var(--space-5); font-size: var(--text-sm); }

/* ---- Field --------------------------------------------------------------- */
/* Scoped to authentication: sign in, sign out, reset password. Not a general
 * form kit — if a screen needs something beyond these, that's a conversation.
 *
 * Controls use --target-min (44px), not --control-height. These screens are
 * used on field iPads outdoors, sometimes with gloves, where a 36px target
 * is a genuine miss-tap risk.
 *
 * Error state keys off aria-invalid so the styling cannot drift from what
 * assistive technology is told.
 */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.field__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Paired with aria-describedby on the control. */
.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-alarm);
}
/* Never colour alone — the mark survives greyscale and colour-blindness. */
.field__error::before {
  content: "!";
  flex: none;
  width: 1rem;
  height: 1rem;
  display: inline-grid;
  place-items: center;
  border: var(--border-width) solid currentColor;
  border-radius: var(--radius-full);
  font-size: 0.7em;
  font-weight: 700;
}

.input,
.select {
  min-height: var(--target-min);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-md);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.input::placeholder { color: var(--color-text-subtle); }
.input:hover,
.select:hover { border-color: var(--color-text); }

.input[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--color-alarm);
  border-width: var(--border-width-thick);
}

.input[disabled],
.select[disabled] {
  background: var(--color-surface-sunken);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

/* Native select arrow is left alone deliberately: replacing it means
   re-implementing keyboard behaviour that already works. */
.select { appearance: auto; }

/* Checkbox — "keep me signed in". The control itself stays native so focus,
   keyboard and screen-reader behaviour are the platform's, not ours. */
.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  cursor: pointer;
}
.checkbox input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  accent-color: var(--color-action-primary);
  cursor: pointer;
}
.checkbox__label { font-size: var(--text-sm); }

/* Auth screens are narrow and centred; this keeps them from stretching. */
.form-narrow {
  width: 100%;
  max-width: 22rem;
}

/* ---- Card ---------------------------------------------------------------- */
.panel {
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.panel__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.panel__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---- Status -------------------------------------------------------------- */
/* Never colour alone: every status carries a dot AND a text label, so it
   survives colour-blindness, greyscale print, and a failing display. */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
}
.status::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background: currentColor;
  flex: none;
}
.status--normal  { color: var(--color-normal); }
.status--watch   { color: var(--color-watch); }
.status--warn    { color: var(--color-warn); }
.status--alarm   { color: var(--color-alarm); }
.status--offline { color: var(--color-offline); }

/* Hollow dot for offline: absence of signal shouldn't read as a live value. */
.status--offline::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* "Normal" is brand green, so the accent carries operational meaning rather
   than being decoration. In the light theme green on white is only 2.27:1, so
   the dot does the colour work and the label stays in body text colour. */
.status--normal { color: var(--color-text); }
.status--normal::before { background: var(--color-action-primary); }

/* ---- Badge --------------------------------------------------------------- */
/* Outlined, not filled — see the note at the top of this file. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem var(--space-2);
  border: var(--border-width) solid currentColor;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.badge--neutral { color: var(--color-text-muted); }
.badge--normal  { color: var(--color-text); border-color: var(--color-action-primary); }
.badge--watch   { color: var(--color-watch); }
.badge--warn    { color: var(--color-warn); }
.badge--alarm   { color: var(--color-alarm); }

/* The one filled badge: brand green behind black, for genuine emphasis. */
.badge--accent {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

/* ---- Alert --------------------------------------------------------------- */
/* Left rule carries the state colour; the body stays on the page background
   so no tint is invented. */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-left: 4px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.alert__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.alert__body { margin: 0; max-width: none; color: var(--color-text-muted); }

.alert--info   { border-left-color: var(--color-action-primary); }
.alert--normal { border-left-color: var(--color-action-primary); }
.alert--watch  { border-left-color: var(--color-watch); }
.alert--warn   { border-left-color: var(--color-warn); }
.alert--alarm  { border-left-color: var(--color-alarm); }

/* ---- Metric -------------------------------------------------------------- */
/* The core readout: big value, unit, label, optional delta. */
.tile { display: flex; flex-direction: column; gap: var(--space-1); }
.tile__label {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}
/* Roboto Thin at display size — the brand's contrast pairing, used where it
   is large enough to hold up. */
.tile__value {
  font-family: var(--font-body);
  font-weight: var(--weight-thin);
  font-size: var(--text-3xl);
  line-height: 1;
  font-variant-numeric: var(--numeric-tabular);
}
.tile__unit {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}
.tile__delta { font-size: var(--text-sm); font-variant-numeric: var(--numeric-tabular); }
.tile__delta--up { color: var(--color-text); }
.tile__delta--down { color: var(--color-alarm); }

/* ---- Table --------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--border-width) solid var(--color-border);
}
.table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface-sunken);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-surface-sunken); }
/* Numeric columns right-aligned and tabular so digits stack. */
.table .num { text-align: right; font-variant-numeric: var(--numeric-tabular); }

/* ---- Nav ----------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border-strong);
}
.nav__brand {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.nav__links { display: flex; gap: var(--space-1); margin-left: auto; }
.nav__link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}
.nav__link:hover { background: var(--color-surface-sunken); color: var(--color-text); }
/* Current page: the green rule is reinforcing, never the sole signal. On
   white, green reaches only 2.27:1 — below the 3.0 needed for a non-text
   indicator — so weight and text colour carry the state and the rule simply
   agrees with them. aria-current carries it for assistive tech. */
.nav__link[aria-current="page"] {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  box-shadow: inset 0 -2px 0 var(--color-action-primary);
}