html { scroll-behavior: smooth; }
/* SYSTEM FONTS ONLY. Google Fonts is a CDN, and Zenner China work from
   mainland China where that is unreliable — the same reason the Tailwind CDN
   was removed. A webfont that fails leaves the portal in a fallback nobody
   designed; a system stack is always the font it was designed against.

   Inter was named here before and never actually loaded, so every browser was
   already falling through to its system font. This makes that deliberate. */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

/* Meter readings, serial numbers, versions and timestamps are compared by eye
   against each other far more often than they are read as prose. Tabular
   figures keep the columns aligned so a changed digit is visible by position,
   not just by shape. */
.font-mono, code, .metric-value, td, th { font-variant-numeric: tabular-nums; }
.nav-link { display: flex; align-items: center; gap: .75rem; border-radius: .75rem; padding: .7rem .8rem; color: rgb(203 213 225); font-size: .875rem; font-weight: 600; transition: .15s ease; }
.nav-link:hover { background: rgba(255,255,255,.08); color: white; }
.nav-link-active { background: rgba(255,255,255,.12); color: white; }
.nav-mark { display: grid; height: 1.75rem; width: 1.75rem; place-items: center; border-radius: .5rem; background: rgba(255,255,255,.08); font-size: .625rem; letter-spacing: .06em; }
/* One flat surface, not a floating card. The old 32px shadow made every tile
   look like it wanted attention, which meant none of them got any. Depth is
   reserved for things that are genuinely raised above the page. */
.metric-card { position: relative; overflow: hidden; border: 1px solid rgb(226 232 240); border-radius: .75rem; background: white; padding: 1.15rem 1.25rem; }
/* A rule down the left edge, coloured only when the tile means something. An
   ordinary count gets no colour at all, so the ones that do stand out at a
   glance rather than competing. */
.metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: rgb(226 232 240); }
.metric-card-alert::before { background: #be123c; }
.metric-card-warn::before  { background: #b45309; }
.metric-card-good::before  { background: #087f75; }
.metric-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(100 116 139); }
.metric-value { margin-top: .65rem; font-size: 2rem; line-height: 1; font-weight: 700; color: #17324d; }
.metric-note { margin-top: .65rem; font-size: .75rem; color: rgb(148 163 184); }
.status-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: .3rem .6rem; font-size: .68rem; font-weight: 700; box-shadow: inset 0 0 0 1px var(--tw-ring-color); }
.field-label { display: block; margin-bottom: .4rem; font-size: .75rem; font-weight: 700; color: rgb(71 85 105); }
.field-input { width: 100%; border: 1px solid rgb(203 213 225); border-radius: .75rem; background: white; padding: .65rem .8rem; font-size: .875rem; color: rgb(51 65 85); outline: none; transition: .15s ease; }
.field-input:focus { border-color: #087f75; box-shadow: 0 0 0 4px rgb(204 251 241); }
.pagination-link { border: 1px solid rgb(203 213 225); border-radius: .75rem; background: white; padding: .6rem 1rem; font-size: .8rem; font-weight: 700; color: rgb(71 85 105); }
.pagination-link:hover { background: rgb(248 250 252); }
.panel { border: 1px solid rgb(226 232 240); border-radius: 1rem; background: white; padding: 1.25rem; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.06); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.eyebrow { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: #087f75; }
.panel-title { margin-top: .25rem; font-size: 1rem; font-weight: 700; color: #17324d; }
.detail-grid { display: grid; gap: 1rem; }
.detail-grid > div { border-radius: .75rem; background: rgb(248 250 252); padding: .8rem; }
.detail-grid dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgb(148 163 184); }
.detail-grid dd { margin-top: .35rem; font-size: .82rem; font-weight: 600; color: rgb(51 65 85); }
.code-block { max-height: 30rem; overflow: auto; border-radius: .75rem; background: rgb(15 23 42); padding: 1rem; color: rgb(203 213 225); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .7rem; line-height: 1.6; }
.checkerboard { background-color: #0f172a; background-image: linear-gradient(45deg, #172033 25%, transparent 25%), linear-gradient(-45deg, #172033 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #172033 75%), linear-gradient(-45deg, transparent 75%, #172033 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.image-pixelated { image-rendering: pixelated; }
@media (min-width: 640px) { .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { aside, header, form, button { display: none !important; } main { margin-left: 0 !important; } }


/* --- Density -------------------------------------------------------------
   This is a monitoring portal. Its users are scanning for the row that is
   wrong, not reading. Rows are tightened and the hover target widened so a
   long table stays scannable without becoming a wall. */
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgb(248 250 252); }

/* Numbers align right; identifiers and prose align left. Mixing them is why
   a table of readings is hard to compare down a column. */
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Focus ---------------------------------------------------------------
   Every interactive element gets a visible focus ring. The portal is operated
   by keyboard more than anyone admits, and one of its forms starts a firmware
   campaign. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #087f75;
  outline-offset: 2px;
  border-radius: .35rem;
}

/* --- Motion ---------------------------------------------------------------
   Respect the system setting rather than assuming everyone wants transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}