/* McQuay MicroTech Explorer.
 * Layout only -- every colour, font, space and radius comes from
 * ../_shared/chipkin-tokens.css. Do not hard-code brand values here. */

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

/* The browser hides [hidden] elements with `display: none` from its own
 * stylesheet, and ANY author `display` rule beats that -- regardless of
 * specificity, because author styles outrank user-agent styles. Several
 * elements here are laid out with `display: flex` from a class (.sim-banner,
 * .alert, .btn, .button-row) and are toggled with the hidden attribute, so
 * without this rule they stay on screen while every script check that asks
 * `el.hidden` still answers true. That combination is very hard to spot: the
 * simulated-network banner sat on the page at load, insisting nothing was
 * connected, and the code looked correct. Restore the intent, once, globally. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--ck-font-sans);
  font-size: var(--ck-fs-base);
  line-height: var(--ck-lh-body);
  color: var(--ck-ink);
  background: var(--ck-bg-alt);
}

h1, h2, h3, h4 { font-family: var(--ck-font-head); line-height: var(--ck-lh-snug); }
code, pre, .mono { font-family: var(--ck-font-mono); }
a { color: var(--ck-blue-700); }

:focus-visible {
  outline: 2px solid var(--ck-focus);
  outline-offset: 2px;
}

.icon {
  width: 1.05em; height: 1.05em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── App bar ─────────────────────────────────────────────── */
.appbar { background: var(--ck-bg-dark); color: var(--ck-on-dark); }
.appbar-inner {
  max-width: var(--ck-container); margin: 0 auto;
  padding: var(--ck-space-3) var(--ck-gutter);
  display: flex; align-items: center; gap: var(--ck-space-3); flex-wrap: wrap;
}
.appbar-logo { height: 28px; width: auto; }
.appbar-divider {
  width: 1px; height: 26px; background: rgba(255, 255, 255, .28);
}
.appbar h1 {
  margin: 0; font-size: var(--ck-fs-lg); font-weight: var(--ck-fw-bold);
  display: flex; align-items: center; gap: var(--ck-space-2);
}
.appbar-cta { margin-left: auto; }
.version-badge {
  font-family: var(--ck-font-mono); font-size: var(--ck-fs-xs);
  padding: 2px var(--ck-space-2); border-radius: var(--ck-radius-full);
  background: rgba(255, 255, 255, .14); font-weight: var(--ck-fw-normal);
}

/* ── Simulated-network banner ───────────────────────────────
 * Shown only while a simulated network is connected, and then stuck to the top
 * of the viewport for as long as it is: a screenshot of demo data must never be
 * mistaken for a reading of real equipment, and the warning is worthless if it
 * scrolls away above the results it applies to. */
.sim-banner {
  position: sticky; top: 0; z-index: 20;
  background: var(--ck-warning); color: var(--ck-black);
  padding: var(--ck-space-3) var(--ck-gutter);
  display: flex; align-items: center; gap: var(--ck-space-3);
  flex-wrap: wrap; font-size: var(--ck-fs-sm);
  box-shadow: var(--ck-shadow);
}
.sim-banner strong { letter-spacing: var(--ck-ls-kicker); }
.sim-banner span { flex: 1 1 24rem; }
.sim-banner code { background: rgba(0, 0, 0, .12); padding: 0 4px; border-radius: 3px; }

/* ── Layout ──────────────────────────────────────────────── */
main {
  max-width: var(--ck-container); margin: 0 auto;
  padding: var(--ck-space-8) var(--ck-gutter) var(--ck-space-16);
  display: flex; flex-direction: column; gap: var(--ck-space-6);
}

.card {
  background: var(--ck-bg); border: var(--ck-border);
  border-radius: var(--ck-radius); padding: var(--ck-space-6);
  box-shadow: var(--ck-shadow-sm);
}
.card > h2:first-child { margin-top: 0; }
.card h2 { font-size: var(--ck-fs-h3); margin: 0 0 var(--ck-space-3); }
.subhead { font-size: var(--ck-fs-lg); margin: var(--ck-space-6) 0 var(--ck-space-2); }
.lead { font-size: var(--ck-fs-lg); color: var(--ck-ink); }
.feature-list { padding-left: var(--ck-space-6); }
.feature-list li { margin-bottom: var(--ck-space-2); }

/* ── Product cards ───────────────────────────────────────── */
.product-grid {
  display: grid; gap: var(--ck-space-4); margin-top: var(--ck-space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.product-card {
  border: var(--ck-border); border-radius: var(--ck-radius-sm);
  background: var(--ck-bg); overflow: hidden;
  display: flex; flex-direction: column;
}
.product-media {
  display: block; background: var(--ck-bg-alt); text-align: center;
  padding: var(--ck-space-3);
}
.product-media img { width: auto; height: 150px; max-width: 100%; object-fit: contain; }
.product-body {
  padding: var(--ck-space-4); display: flex; flex-direction: column;
  gap: var(--ck-space-2); flex: 1 1 auto;
}
.product-name { margin: 0; font-size: var(--ck-fs-base); line-height: var(--ck-lh-snug); }
.product-name a { text-decoration: none; }
.product-name a:hover { text-decoration: underline; }
.product-sku {
  margin: 0; font-family: var(--ck-font-mono); font-size: var(--ck-fs-xs);
  color: var(--ck-muted);
}
.chip-row { display: flex; flex-wrap: wrap; gap: var(--ck-space-1); margin: 0; padding: 0; list-style: none; }
.chip {
  font-size: var(--ck-fs-xs); padding: 1px var(--ck-space-2);
  border-radius: var(--ck-radius-full); background: var(--ck-blue-100);
  color: var(--ck-blue-700);
}
.product-desc {
  margin: 0; font-size: var(--ck-fs-sm); color: var(--ck-muted);
  line-height: var(--ck-lh-snug); flex: 1 1 auto;
}
.product-link { font-size: var(--ck-fs-sm); font-weight: var(--ck-fw-bold); text-decoration: none; }
.product-link:hover { text-decoration: underline; }

/* ── Step headers and progressive unlock ────────────────────
 * A step the user cannot act on yet is dimmed and inert, so the page reads as
 * a sequence rather than a wall of controls. */
.step .hd {
  display: flex; align-items: center; gap: var(--ck-space-3);
  margin-bottom: var(--ck-space-4);
}
.step .hd h2 { margin: 0; flex: 1 1 auto; }
.step-number {
  flex: none; width: 2rem; height: 2rem; border-radius: var(--ck-radius-full);
  background: var(--ck-blue-700); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--ck-fw-bold); font-size: var(--ck-fs-sm);
}
.step-number--alt { background: var(--ck-success); }
.step-status {
  font-size: var(--ck-fs-sm); color: var(--ck-muted); text-align: right;
}
.step-status.ok { color: var(--ck-success); font-weight: var(--ck-fw-bold); }
.step-status.warn { color: var(--ck-warning); font-weight: var(--ck-fw-bold); }
.step-status.err { color: var(--ck-error); font-weight: var(--ck-fw-bold); }

.card.locked { opacity: .45; }
.card.locked .bd { pointer-events: none; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ck-space-2);
  padding: var(--ck-space-2) var(--ck-space-4);
  border-radius: var(--ck-radius-sm); border: 1px solid transparent;
  font-family: inherit; font-size: var(--ck-fs-sm); font-weight: var(--ck-fw-bold);
  cursor: pointer; text-decoration: none;
  transition: background var(--ck-transition), border-color var(--ck-transition);
}
.btn--sm { padding: var(--ck-space-1) var(--ck-space-3); font-size: var(--ck-fs-xs); }
.btn--primary { background: var(--ck-blue-700); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--ck-blue-900); }
.btn--secondary {
  background: var(--ck-bg); color: var(--ck-blue-700); border-color: var(--ck-line);
}
.btn--secondary:hover:not(:disabled) { border-color: var(--ck-blue-500); }
.btn--conversion { background: var(--ck-accent); color: #fff; }
.btn--conversion:hover:not(:disabled) { background: var(--ck-accent-700); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.file-btn { cursor: pointer; }

.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ck-blue-700); font: inherit; text-decoration: underline;
}

.button-row {
  display: flex; flex-wrap: wrap; gap: var(--ck-space-2);
  margin-top: var(--ck-space-4); align-items: center;
}

/* ── Forms ───────────────────────────────────────────────── */
.form-grid {
  display: grid; gap: var(--ck-space-4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: var(--ck-space-4);
}
.form-grid--tight { gap: var(--ck-space-3); }
/* An explicit two-up row, so related fields stay on the same line instead of
   reflowing into whatever the auto-fit grid decides. */
.form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
.form-grid label { display: flex; flex-direction: column; font-size: var(--ck-fs-sm); font-weight: var(--ck-fw-bold); gap: var(--ck-space-1); }
.form-grid input[type=text], .form-grid input[type=number],
.form-grid input[type=search], .form-grid select {
  font: inherit; font-size: var(--ck-fs-sm);
  padding: var(--ck-space-2); border: var(--ck-border);
  border-radius: var(--ck-radius-sm); background: var(--ck-bg);
  color: var(--ck-ink); font-weight: var(--ck-fw-normal);
}
.form-grid input[readonly] { background: var(--ck-bg-alt); color: var(--ck-muted); }
.checkbox-label {
  flex-direction: row !important; align-items: flex-start;
  gap: var(--ck-space-2) !important; flex-wrap: wrap;
}
.checkbox-label input { margin-top: .3rem; }
.checkbox-label .field-help { flex-basis: 100%; }
.checkbox-label.inline { align-items: center; }
.checkbox-label.readall {
  grid-column: 1 / -1; margin-top: var(--ck-space-4);
  border: var(--ck-border); border-radius: var(--ck-radius-sm);
  padding: var(--ck-space-3); background: var(--ck-bg-alt);
  display: flex; align-items: flex-start; gap: var(--ck-space-2);
  font-size: var(--ck-fs-sm);
}
.checkbox-label.readall .field-help { margin-top: var(--ck-space-1); }
input[type=search] {
  font: inherit; font-size: var(--ck-fs-sm); padding: var(--ck-space-2);
  border: var(--ck-border); border-radius: var(--ck-radius-sm); min-width: 14rem;
}

.help-text, .cfg-help, .field-help {
  color: var(--ck-muted); font-size: var(--ck-fs-sm); font-weight: var(--ck-fw-normal);
}
.help-text { margin: var(--ck-space-3) 0 0; }
.cfg-help { margin: 0 0 var(--ck-space-4); }
.field-help { display: block; line-height: var(--ck-lh-snug); }

details.settings {
  margin-top: var(--ck-space-4); border-top: var(--ck-border);
  padding-top: var(--ck-space-3);
}
details summary {
  cursor: pointer; font-weight: var(--ck-fw-bold); font-size: var(--ck-fs-sm);
  padding: var(--ck-space-2) 0;
}
.card > details { border-top: var(--ck-border); }
.card > details > p { color: var(--ck-muted); font-size: var(--ck-fs-sm); margin: 0 0 var(--ck-space-3); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
  display: flex; gap: var(--ck-space-3); align-items: flex-start;
  padding: var(--ck-space-3) var(--ck-space-4);
  border-radius: var(--ck-radius-sm); border-left: 4px solid var(--ck-line);
  background: var(--ck-bg); font-size: var(--ck-fs-sm);
  margin-top: var(--ck-space-4);
}
.alert--error { border-left-color: var(--ck-error); background: #FDF3F2; }
.alert--warning { border-left-color: var(--ck-warning); background: #FDF8E9; }
.alert--ok { border-left-color: var(--ck-success); background: #F1F9F4; }
/* Neutral, for stating a decision the tool made rather than raising an alarm. */
.alert--note { border-left-color: var(--ck-accent, var(--ck-line)); background: var(--ck-bg-alt, #F4F6F8); }
.alert .icon { margin-top: .2rem; }

/* A controller left out because most gateways refuse its equipment type. It is
   still fully operable -- dimmed, never disabled -- because the point of the
   change is that including it is a decision, not an impossibility. */
.dev-pick--risky { opacity: .82; }
.dev-pick--risky:focus-within, .dev-pick--risky:hover { opacity: 1; }
.dev-warn {
  display: block; flex-basis: 100%;
  margin: var(--ck-space-1) 0 0 1.7rem;
  padding-left: var(--ck-space-3);
  border-left: 3px solid var(--ck-warning);
  font-size: var(--ck-fs-xs, .8125rem); line-height: 1.45;
  color: var(--ck-fg-muted, #5A6672);
}

/* ── Environment check ───────────────────────────────────── */
.env-check { display: flex; flex-direction: column; gap: var(--ck-space-2); }
.env-row {
  display: flex; gap: var(--ck-space-2); align-items: baseline;
  font-size: var(--ck-fs-sm);
}
.env-row .env-mark { font-weight: var(--ck-fw-bold); flex: none; width: 1.5rem; }
.env-row.ok .env-mark { color: var(--ck-success); }
.env-row.bad .env-mark { color: var(--ck-error); }
.env-row .env-detail { color: var(--ck-muted); }

/* ── Status badges ───────────────────────────────────────── */
.badge {
  display: inline-block; padding: 1px var(--ck-space-2);
  border-radius: var(--ck-radius-full); font-size: var(--ck-fs-xs);
  font-weight: var(--ck-fw-bold); letter-spacing: var(--ck-ls-kicker);
  text-transform: uppercase; white-space: nowrap;
}
.badge--present { background: #E3F4EA; color: #14683B; }
/* Locked is a RESULT, not a failure: an accurate inventory without the site
 * password. Styled as information, never as an error. */
.badge--locked { background: var(--ck-blue-100); color: var(--ck-blue-700); }
.badge--absent { background: var(--ck-bg-alt); color: var(--ck-muted); }
.badge--nomap { background: #FDF8E9; color: #8A6100; }

.legend {
  display: flex; flex-wrap: wrap; gap: var(--ck-space-4);
  font-size: var(--ck-fs-sm); color: var(--ck-muted);
  margin-top: var(--ck-space-4);
}
.legend > span { display: flex; align-items: center; gap: var(--ck-space-2); }

/* ── Progress ────────────────────────────────────────────── */
.progress { margin-top: var(--ck-space-4); }
.progress-bar {
  height: 8px; background: var(--ck-bg-alt); border-radius: var(--ck-radius-full);
  overflow: hidden;
}
.progress-bar span {
  display: block; height: 100%; width: 0;
  background: var(--ck-blue-500); transition: width .12s linear;
}
.progress-text {
  margin: var(--ck-space-2) 0 0; font-size: var(--ck-fs-sm);
  color: var(--ck-muted); font-family: var(--ck-font-mono);
}

.estimate {
  margin-top: var(--ck-space-3); font-size: var(--ck-fs-sm);
  color: var(--ck-muted);
}
.estimate strong { color: var(--ck-ink); }
.estimate.costly strong { color: var(--ck-warning); }

/* ── Tables ──────────────────────────────────────────────── */
.scrollbox {
  margin-top: var(--ck-space-4); max-height: 26rem; overflow: auto;
  border: var(--ck-border); border-radius: var(--ck-radius-sm);
}
.data-table { width: 100%; border-collapse: collapse; font-size: var(--ck-fs-sm); }
.data-table th, .data-table td {
  text-align: left; padding: var(--ck-space-2) var(--ck-space-3);
  border-bottom: 1px solid var(--ck-line); white-space: nowrap;
}
.data-table thead th {
  position: sticky; top: 0; background: var(--ck-bg-alt); z-index: 1;
  font-size: var(--ck-fs-xs); text-transform: uppercase;
  letter-spacing: var(--ck-ls-kicker); color: var(--ck-muted);
}
.data-table thead th[data-sort] { cursor: pointer; }
.data-table thead th[data-sort]:hover { color: var(--ck-blue-700); }
.data-table tbody tr:hover { background: var(--ck-blue-50); }
.data-table td.num, .data-table td.mono { font-family: var(--ck-font-mono); }
.data-table td.num { text-align: right; }
.data-table td.wrap { white-space: normal; min-width: 16rem; }
.data-table td.dim { color: var(--ck-muted); }

/* ── Device cards ────────────────────────────────────────── */
.device-list {
  display: grid; gap: var(--ck-space-3);
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.device {
  border: var(--ck-border); border-radius: var(--ck-radius-sm);
  padding: var(--ck-space-4); background: var(--ck-bg);
  display: flex; flex-direction: column; gap: var(--ck-space-2);
}
.device.selected { border-color: var(--ck-blue-500); box-shadow: 0 0 0 2px var(--ck-blue-200); }
.device-head { display: flex; align-items: center; gap: var(--ck-space-2); }
.device-addr { font-family: var(--ck-font-mono); font-weight: var(--ck-fw-bold); font-size: var(--ck-fs-lg); }
.device-meta { font-size: var(--ck-fs-sm); color: var(--ck-muted); margin: 0; }
.device-meta strong { color: var(--ck-ink); }
.device .inline-form { display: flex; gap: var(--ck-space-2); flex-wrap: wrap; align-items: center; }
.device .inline-form input {
  font: inherit; font-size: var(--ck-fs-sm); padding: var(--ck-space-1) var(--ck-space-2);
  border: var(--ck-border); border-radius: var(--ck-radius-sm); width: 9rem;
}

.gen-devices {
  display: flex; flex-direction: column; gap: var(--ck-space-2);
  margin-bottom: var(--ck-space-4);
}
.gen-devices label {
  display: flex; align-items: center; gap: var(--ck-space-2); font-size: var(--ck-fs-sm);
}
.gen-devices .dim { color: var(--ck-muted); }

/* ── Preview ─────────────────────────────────────────────── */
.preview {
  margin-top: var(--ck-space-4); max-height: 28rem; overflow: auto;
  background: var(--ck-blue-900); color: var(--ck-on-dark);
  padding: var(--ck-space-4); border-radius: var(--ck-radius-sm);
  font-size: var(--ck-fs-xs); line-height: 1.5; white-space: pre;
}

/* ── Validate findings ───────────────────────────────────── */
.finding-note { margin: var(--ck-space-3) 0 0; font-size: var(--ck-fs-sm); }
.finding-arrow { color: var(--ck-error); font-weight: var(--ck-fw-bold); }
.finding-owner { color: var(--ck-muted); }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--ck-bg-dark); color: var(--ck-on-dark);
  padding: var(--ck-space-8) var(--ck-gutter);
}
.footer-grid {
  max-width: var(--ck-container); margin: 0 auto;
  display: flex; justify-content: space-between; gap: var(--ck-space-6); flex-wrap: wrap;
}
.footer-meta { font-size: var(--ck-fs-sm); margin: 0; opacity: .85; }
.footer a { color: var(--ck-on-dark); }

@media (max-width: 640px) {
  .appbar h1 { font-size: var(--ck-fs-base); }
  .appbar-cta { margin-left: 0; }
  .card { padding: var(--ck-space-4); }
}

/* ── Rotary-address help and per-device HI/LO entry ──────────
 * The two switches on the controller are labelled HI and LO and read 0-F.
 * Discovery fills them in; these inputs exist because a support call often
 * starts with the customer reading the switches out loud. */
.addr-help { border-top: none; margin-top: 0; }
.addr-help-body {
  display: flex; gap: var(--ck-space-4); align-items: flex-start; flex-wrap: wrap;
  padding-bottom: var(--ck-space-3);
}
.addr-help-body > div { flex: 1 1 20rem; }
.addr-help-body p { margin: 0 0 var(--ck-space-2); font-size: var(--ck-fs-sm); }
.addr-switches { width: 260px; max-width: 100%; height: auto; flex: none; }
.addr-cap {
  font-family: var(--ck-font-sans); font-size: 17px; font-weight: var(--ck-fw-bold);
  fill: var(--ck-ink); text-anchor: middle;
}
.addr-note {
  font-family: var(--ck-font-mono); font-size: 13px;
  fill: var(--ck-muted); text-anchor: middle;
}

.gen-devices label { flex-wrap: wrap; }
.dev-addr {
  margin-left: auto; display: flex; align-items: center; gap: var(--ck-space-1);
  font-size: var(--ck-fs-xs); color: var(--ck-muted);
}
.dev-addr input {
  width: 2.4rem; text-align: center; text-transform: uppercase;
  font-family: var(--ck-font-mono); font-size: var(--ck-fs-sm);
  padding: 2px; border: var(--ck-border); border-radius: var(--ck-radius-sm);
}
.dev-addr input:invalid { border-color: var(--ck-error); background: #FDF3F2; }
.dev-addr .dim { font-size: var(--ck-fs-xs); }

/* ── Address entry: photo + drawing side by side with the ranges ──
 * The photo is optional. Without assets/address-switches.jpg the drawing shows
 * instead, so a missing file degrades to a diagram rather than a broken image. */
.addr-search {
  display: flex; gap: var(--ck-space-4); align-items: flex-start;
  flex-wrap: wrap; margin-top: var(--ck-space-4);
}
.addr-figure {
  margin: 0; flex: 0 0 260px; max-width: 100%;
  border: var(--ck-border); border-radius: var(--ck-radius-sm);
  background: var(--ck-bg-alt); padding: var(--ck-space-3);
}
.addr-figure img { display: none; width: 100%; height: auto; border-radius: var(--ck-radius-sm); }
.addr-figure.has-photo img { display: block; }
.addr-figure.has-photo .addr-switches { display: none; }
.addr-figure figcaption {
  margin-top: var(--ck-space-2); font-size: var(--ck-fs-xs);
  color: var(--ck-muted); line-height: var(--ck-lh-snug);
}
.addr-ranges { flex: 1 1 22rem; margin-top: 0; }

/* ── Results: a controller opens to reveal its readings ── */
.point-details { margin-top: var(--ck-space-2); }
.point-details > summary {
  cursor: pointer; font-size: var(--ck-fs-sm); font-weight: var(--ck-fw-bold);
  color: var(--ck-blue-700); padding: var(--ck-space-1) 0;
}
.point-scroll { max-height: 22rem; margin-top: var(--ck-space-2); }
.device-list { grid-template-columns: 1fr; }

/* ── Generate: per-point selection, collapsed by default ── */
.point-picker {
  margin: 0 0 var(--ck-space-2) var(--ck-space-6);
  border-left: 2px solid var(--ck-line); padding-left: var(--ck-space-3);
}
.point-picker > summary {
  cursor: pointer; font-size: var(--ck-fs-xs); color: var(--ck-muted);
  padding: var(--ck-space-1) 0;
}
.point-pick-body {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 2px var(--ck-space-3); max-height: 18rem; overflow: auto;
  padding: var(--ck-space-2) 0;
}
.point-pick {
  display: flex; align-items: center; gap: var(--ck-space-2);
  font-size: var(--ck-fs-xs); font-weight: var(--ck-fw-normal);
}