/* ==========================================================================
   TranXwatch-Solar Console — base
   Reset, document, typography, forms, focus, landmarks.
   Component styling lives in components.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--ink);
  background:
    radial-gradient(1100px 560px at 80% -10%, rgba(21, 101, 192, .16), transparent 60%),
    linear-gradient(160deg, var(--navy-deep), var(--navy) 42%, var(--navy-sink));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Plex ships proper lining figures; keep them on everywhere so numbers never
     drop to old-style/proportional in a data cell. */
  font-variant-numeric: lining-nums;
  /* Never let the browser fake a weight or a slant. We ship 400/500/600/700
     only (fonts.css) — if a rule ever asks for 800, it should look wrong here
     rather than ship a smeared synthetic bold to an operator. */
  font-synthesis: none;
}

/* ---- typography --------------------------------------------------------- */
h1, h2, h3 { text-wrap: balance; line-height: var(--lh-tight); }

h1 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: #fff;
  letter-spacing: var(--ls-tight);
}

/* Headings are --ink, not --cyan.
   This rule alone painted 18 headings a saturated accent. On a console whose
   job is to show you what needs attention, colour that appears on every card
   title competes with the amber and red that actually mean something — and
   when everything is accented, nothing reads as urgent (EEMUA 191 / ISA-101:
   reserve saturated colour for abnormal state).
   Hierarchy now comes from size + weight + tracking, which is what type is for.
   --cyan is retained where it carries meaning rather than decorating: the
   active nav rail, links, focus rings, the login hero, service icons, and
   identifier values (.accent). */
h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}

h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}

a { color: var(--cyan); }
a:hover { text-decoration-thickness: 2px; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

.muted { color: var(--muted); }
.sub   { color: var(--muted); font-size: var(--fs-sm); }

/* Digits that stack in a column must line up, or the eye cannot scan them.
   Proportional figures make a table of voltages ragged and slow to read. */
.tnum, td, th, .kpi .n, time, .conn { font-variant-numeric: tabular-nums lining-nums; }

/* Identifiers a person transcribes against a physical label. Plex Mono's
   slashed zero disambiguates 0/O and 1/l — worth the switch for RFID tags,
   meter IDs and device IDs specifically, not for prose. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-normal);
  font-variant-numeric: slashed-zero tabular-nums;
}

/* ---- focus -------------------------------------------------------------- */
/* Every interactive element gets a visible ring. Never remove without replace. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- skip link ---------------------------------------------------------- */
.skip {
  position: absolute;
  left: var(--sp-2);
  top: -60px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--blue);
  color: var(--on-accent);
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top .12s ease-out;
}
.skip:focus { top: var(--sp-2); }

/* ---- forms -------------------------------------------------------------- */
button { cursor: pointer; font: inherit; }

input, select {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--field);
  /* --line-strong, not --line: an input is a UI component (WCAG 1.4.11). */
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}

input::placeholder { color: var(--muted); opacity: 1; }

input:focus-visible, select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
  border-color: var(--cyan);
}

input[type="checkbox"] {
  width: auto;
  accent-color: var(--cyan);
  min-width: 16px;
  min-height: 16px;
}

label {
  display: block;
  margin: var(--sp-3) 0 var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: var(--ls-normal);
}

/* ---- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* [hidden] must beat component display rules. Without this, a class such as
   .nav-link{display:flex} silently overrides the UA's [hidden]{display:none}
   and the element stays visible. */
[hidden] { display: none !important; }

/* ---- screen-reader only ------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}