/* LonWorks XIF -> QuickServer converter
   ----------------------------------------
   Chipkin design system, application tier. Colour, type, spacing, radius and
   shadow all come from chipkin-tokens.css. The only local values are the
   --tool-* aliases below (things the token set does not name yet) and
   hairline/offset pixels.

   Surface rules applied here (chipkin-design-guides/applications.md):
     - The user is working, not evaluating: no hero, no persuasion copy.
       The page opens on the work surface.
     - Density over airiness: body steps down to --ck-fs-sm, controls sit at
       the 4/8/12px end of the grid. Whitespace separates groups, not rows.
     - Persistent dark-navy app bar; the work area stays light.
     - Orange is the single conversion action on the screen (Contact Chipkin).
       Free-tool downloads are structural blue -- the free-tool exception in
       library/base/primitives/button/spec.md.
     - Status is icon + text + color, never color alone. Alerts are a calm
       block with a leading-edge rule, not a heavy tinted band.
     - Identifiers (Neuron IDs, SNVT names, register addresses, CSV output)
       render in --ck-font-mono and stay selectable.
     - Lucide icons only. No emoji, no gradients, no decorative animation.
*/

/* Local aliases for values the shared token set does not name. Kept here,
   named, and used everywhere rather than scattered as literals -- if these
   ever land upstream, delete the alias and swap in the --ck-* token. */
:root {
  /* Label colour on a filled blue / orange / navy surface. --ck-on-dark is the
     softer body-text-on-dark colour and is too low-contrast for button text. */
  --tool-on-fill: #FFFFFF;
  /* Hairline and chip fill on the dark app bar: --ck-on-dark and
     --ck-blue-300 at low alpha. */
  --tool-dark-rule: rgba(232, 238, 245, .22);
  --tool-dark-chip: rgba(170, 202, 220, .14);
  --tool-dark-chip-edge: rgba(170, 202, 220, .30);
  /* Focus halo: --ck-focus at low alpha. */
  --tool-focus-halo: rgba(30, 129, 206, .18);
}

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

/* The alert blocks below set `display: flex`, which outranks the `hidden`
   attribute's UA `display: none`. Without this they render as empty coloured
   boxes when they have nothing to say. */
[hidden] { display: none !important; }

html {
  /* Application density: step the root down so the token type scale lands at
     the compact end without redefining the scale itself. */
  font-size: 15px;
}

body {
  margin: 0;
  font-family: var(--ck-font-sans);
  font-size: var(--ck-fs-sm);
  line-height: var(--ck-lh-body);
  color: var(--ck-ink);
  background: var(--ck-bg-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

h1, h2, h3 {
  font-family: var(--ck-font-head);
  font-weight: var(--ck-fw-bold);
  line-height: var(--ck-lh-tight);
  letter-spacing: var(--ck-ls-tight);
  margin: 0;
}

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

a { color: var(--ck-blue-700); text-decoration: none; transition: color var(--ck-transition); }
a:hover { color: var(--ck-blue-500); text-decoration: underline; }

code, kbd, pre { font-family: var(--ck-font-mono); }

/* Inline identifiers and literals. */
code {
  font-size: 0.9em;
  background: var(--ck-blue-100);
  color: var(--ck-blue-900);
  padding: 0 var(--ck-space-1);
  border-radius: var(--ck-radius-sm);
}

/* Visible focus on every interactive control -- hard requirement
   (standards/accessibility). */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ck-focus);
  outline-offset: 2px;
  border-radius: var(--ck-radius-sm);
}

/* ── Lucide icons ─────────────────────────────────────────────
   Stroke-based, sized to the text they accompany, color inherited. */

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -0.17em;
}

/* ── App bar ─────────────────────────────────────────────────
   The site's dark header pattern reduced to a slim app bar:
   logo mark + tool name + version. No nav, no marketing CTA. */

.appbar {
  background: var(--ck-bg-dark);
  color: var(--ck-on-dark);
  border-bottom: 3px solid var(--ck-blue-700);
}
.appbar-inner {
  max-width: var(--ck-container);
  margin-inline: auto;
  padding: var(--ck-space-3) var(--ck-gutter);
  display: flex;
  align-items: center;
  gap: var(--ck-space-4);
  flex-wrap: wrap;
}
.appbar-logo { height: 28px; width: auto; }
.appbar-divider {
  width: 1px;
  align-self: stretch;
  background: var(--tool-dark-rule);
}
.appbar h1 {
  font-size: var(--ck-fs-base);
  color: var(--tool-on-fill);
  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);
  font-weight: var(--ck-fw-normal);
  letter-spacing: 0;
  color: var(--ck-blue-300);
  background: var(--tool-dark-chip);
  border: 1px solid var(--tool-dark-chip-edge);
  border-radius: var(--ck-radius-full);
  padding: 0 var(--ck-space-2);
}

/* ── Work area ───────────────────────────────────────────────
   Steps, not marketing sections: adjacent cards, padding-only rhythm. */

main {
  max-width: var(--ck-container);
  margin-inline: auto;
  padding: var(--ck-space-6) var(--ck-gutter) var(--ck-space-12);
  display: flex;
  flex-direction: column;
  gap: var(--ck-space-4);
}

@media (min-width: 1024px) {
  .appbar-inner, main { padding-inline: var(--ck-gutter-lg); }
}

section.card {
  background: var(--ck-bg);
  border: var(--ck-border);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow-sm);
  padding: var(--ck-space-4) var(--ck-space-6) var(--ck-space-6);
}

/* Step heading: a quiet numeric kicker rather than a "1." inside the title,
   so the heading text alone reads as the object of work. */
section.card > h2 {
  font-size: var(--ck-fs-h3);
  display: flex;
  align-items: baseline;
  gap: var(--ck-space-3);
  padding-bottom: var(--ck-space-3);
  margin-bottom: var(--ck-space-4);
  border-bottom: var(--ck-border);
}
.step-number {
  font-family: var(--ck-font-mono);
  font-size: var(--ck-fs-xs);
  font-weight: var(--ck-fw-normal);
  letter-spacing: var(--ck-ls-kicker);
  text-transform: uppercase;
  color: var(--ck-blue-700);
  border: 1px solid var(--ck-blue-200);
  background: var(--ck-blue-50);
  border-radius: var(--ck-radius-sm);
  padding: 0 var(--ck-space-2);
  align-self: center;
}

.subhead {
  font-size: var(--ck-fs-base);
  margin: var(--ck-space-6) 0 var(--ck-space-2);
}

/* ── Buttons ─────────────────────────────────────────────────
   Three sanctioned appearances on this surface: structural blue,
   secondary outline, and the one orange conversion CTA in the footer. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-space-2);
  padding: var(--ck-space-2) var(--ck-space-4);
  border-radius: var(--ck-radius);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--ck-fs-sm);
  font-weight: var(--ck-fw-bold);
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ck-transition), border-color var(--ck-transition), color var(--ck-transition);
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--ck-blue-700);
  border-color: var(--ck-blue-700);
  color: var(--tool-on-fill);
}
.btn--primary:hover {
  background: var(--ck-blue-500);
  border-color: var(--ck-blue-500);
  color: var(--tool-on-fill);
}

.btn--secondary {
  background: var(--ck-bg);
  border-color: var(--ck-blue-700);
  color: var(--ck-blue-700);
}
.btn--secondary:hover {
  background: var(--ck-blue-50);
  color: var(--ck-blue-700);
}

/* The single conversion action on the page. */
.btn--conversion {
  background: var(--ck-accent);
  border-color: var(--ck-accent);
  color: var(--tool-on-fill);
}
.btn--conversion:hover {
  background: var(--ck-accent-700);
  border-color: var(--ck-accent-700);
  color: var(--tool-on-fill);
}

/* Outline button on a dark surface (the footer's contact link). The page's
   one orange action lives in the app bar, so this one steps down. */
.btn--on-dark {
  background: transparent;
  border-color: var(--ck-blue-300);
  color: var(--ck-blue-300);
}
.btn--on-dark:hover {
  background: var(--tool-dark-chip);
  border-color: var(--tool-on-fill);
  color: var(--tool-on-fill);
}

.button-row,
.example-row {
  display: flex;
  gap: var(--ck-space-2);
  flex-wrap: wrap;
}
.button-row { margin-top: var(--ck-space-3); }
.example-row { margin-top: var(--ck-space-3); }

/* ── Intro ───────────────────────────────────────────────── */

.lead {
  font-size: var(--ck-fs-base);
  line-height: var(--ck-lh-snug);
  color: var(--ck-ink);
}

.feature-list {
  margin: 0;
  padding-left: var(--ck-space-4);
  color: var(--ck-muted);
}
.feature-list li { margin-bottom: var(--ck-space-1); }
.feature-list strong { color: var(--ck-ink); }

/* ── Product cards ───────────────────────────────────────────
   The catalog card pattern at tool density: real product photo, name, SKU,
   protocol chips, short description, and a "View product" text link.
   No price (website rule), and the CTA is a link -- never a filled button. */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--ck-space-4);
  margin-top: var(--ck-space-3);
}

.product-card {
  display: flex;
  flex-direction: column;
  border: var(--ck-border-thick);
  border-radius: var(--ck-radius);
  background: var(--ck-bg);
  overflow: hidden;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition);
}
.product-card:hover {
  border-color: var(--ck-blue-300);
  box-shadow: var(--ck-shadow);
}

.product-media {
  display: block;
  background: var(--ck-blue-50);
  border-bottom: var(--ck-border);
  padding: var(--ck-space-3);
}
.product-media img {
  display: block;
  margin-inline: auto;
  width: auto;
  height: 7rem;
  object-fit: contain;
}

.product-body {
  display: flex;
  flex-direction: column;
  gap: var(--ck-space-2);
  padding: var(--ck-space-3) var(--ck-space-4) var(--ck-space-4);
  flex: 1;
}

.product-name {
  font-family: var(--ck-font-head);
  font-size: var(--ck-fs-sm);
  font-weight: var(--ck-fw-bold);
  line-height: var(--ck-lh-snug);
  letter-spacing: var(--ck-ls-tight);
  margin: 0;
}
.product-name a { color: var(--ck-blue-900); }
.product-name a:hover { color: var(--ck-blue-700); }

.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);
  list-style: none;
  margin: 0;
  padding: 0;
}
.chip {
  font-size: var(--ck-fs-xs);
  color: var(--ck-blue-700);
  background: var(--ck-blue-100);
  border: 1px solid var(--ck-blue-200);
  border-radius: var(--ck-radius-full);
  padding: 0 var(--ck-space-2);
  white-space: nowrap;
}

.product-desc {
  margin: 0;
  font-size: var(--ck-fs-xs);
  line-height: var(--ck-lh-snug);
  color: var(--ck-muted);
}
.product-desc strong { color: var(--ck-ink); }

.product-link {
  margin-top: auto;
  font-weight: var(--ck-fw-bold);
  font-size: var(--ck-fs-xs);
  color: var(--ck-blue-700);
}

/* ── Drop zone ───────────────────────────────────────────── */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ck-space-2);
  border: 2px dashed var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-blue-50);
  padding: var(--ck-space-8) var(--ck-space-4);
  text-align: center;
  color: var(--ck-muted);
  cursor: pointer;
  transition: background var(--ck-transition), border-color var(--ck-transition), color var(--ck-transition);
}
.dropzone .icon { width: 1.8rem; height: 1.8rem; color: var(--ck-blue-700); }
.dropzone strong { color: var(--ck-ink); }
.dropzone:hover, .dropzone.hover {
  background: var(--ck-blue-100);
  border-color: var(--ck-blue-500);
  border-style: solid;
  color: var(--ck-ink);
}

/* ── Help text ───────────────────────────────────────────── */

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

/* ── Parsed summary ──────────────────────────────────────── */

dl.summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ck-space-1) var(--ck-space-4);
  margin: 0;
}
dl.summary dt {
  color: var(--ck-muted);
  font-weight: var(--ck-fw-bold);
}
dl.summary dd {
  margin: 0;
  font-family: var(--ck-font-mono);
  color: var(--ck-ink);
  word-break: break-word;
}
dl.summary dd.dt-desc {
  grid-column: 1 / -1;
  font-family: var(--ck-font-sans);
  font-size: var(--ck-fs-xs);
  color: var(--ck-muted);
  line-height: var(--ck-lh-snug);
  margin-bottom: var(--ck-space-3);
  padding-bottom: var(--ck-space-3);
  border-bottom: var(--ck-border);
}
dl.summary dd.dt-desc:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

/* ── Data grid (network variable table) ──────────────────── */

.scrollbox,
#nv-table-wrap {
  max-height: 22rem;
  overflow: auto;
  border: var(--ck-border);
  border-radius: var(--ck-radius);
  margin-top: var(--ck-space-2);
}

table.nv {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ck-fs-xs);
}
table.nv th, table.nv td {
  padding: var(--ck-space-1) var(--ck-space-3);
  border-bottom: 1px solid var(--ck-line);
  text-align: left;
  white-space: nowrap;
}
table.nv th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ck-blue-50);
  color: var(--ck-blue-900);
  font-weight: var(--ck-fw-bold);
  border-bottom: 2px solid var(--ck-blue-200);
}
/* Identifiers are mono; the direction column is prose. Column 1 is the
   include checkbox, so name/SNVT-name sit at 2 and 6. */
table.nv td:nth-child(2),
table.nv td:nth-child(6) { font-family: var(--ck-font-mono); }
table.nv tbody tr:hover { background: var(--ck-blue-50); }

/* Include/exclude column. Excluded rows dim but stay legible -- the state is
   carried by the unticked checkbox, not the dimming alone. */
table.nv .col-include { width: 2rem; text-align: center; }
table.nv .col-include input { accent-color: var(--ck-blue-700); }
table.nv tr.nv-excluded td:not(.col-include) { opacity: 0.45; }
table.nv td code {
  font-size: var(--ck-fs-xs);
  background: var(--ck-blue-100);
}

/* ── Point-count stat strip ──────────────────────────────────
   The number the customer licenses against, visible where the selection is
   made and where the output lands. */

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-space-2) var(--ck-space-4);
  background: var(--ck-blue-50);
  border: 1px solid var(--ck-blue-200);
  border-radius: var(--ck-radius-sm);
  padding: var(--ck-space-2) var(--ck-space-3);
  margin: var(--ck-space-3) 0;
  font-size: var(--ck-fs-xs);
  color: var(--ck-muted);
}
.stat-strip .stat strong {
  font-family: var(--ck-font-mono);
  color: var(--ck-blue-900);
}

/* ── Configuration form ──────────────────────────────────── */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ck-space-4) var(--ck-space-6);
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: var(--ck-space-1);
  font-size: var(--ck-fs-sm);
  font-weight: var(--ck-fw-bold);
  color: var(--ck-ink);
}
.form-grid input {
  padding: var(--ck-space-2) var(--ck-space-3);
  border: var(--ck-border);
  border-radius: var(--ck-radius-sm);
  font-family: var(--ck-font-mono);
  font-size: var(--ck-fs-sm);
  font-weight: var(--ck-fw-normal);
  color: var(--ck-ink);
  background: var(--ck-bg);
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition);
}
.form-grid input::placeholder { color: var(--ck-grey); }
.form-grid input:focus {
  outline: none;
  border-color: var(--ck-focus);
  box-shadow: 0 0 0 3px var(--tool-focus-halo);
}

/* Required-with-no-safe-default field (Neuron ID). Marked by the pill and
   the border weight, not by color alone. */
.form-grid label.required-field {
  border: var(--ck-border-thick);
  border-color: var(--ck-warning);
  border-radius: var(--ck-radius);
  background: var(--ck-blue-50);
  padding: var(--ck-space-3);
}
.required-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-space-2);
}
.required-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-space-1);
  font-family: var(--ck-font-sans);
  font-size: var(--ck-fs-xs);
  font-weight: var(--ck-fw-bold);
  letter-spacing: var(--ck-ls-kicker);
  text-transform: uppercase;
  color: var(--ck-bg-dark);
  background: var(--ck-warning);
  border-radius: var(--ck-radius-full);
  padding: 0 var(--ck-space-2);
}

/* Satisfied: a valid 12-hex Neuron ID has been entered. The field returns to
   the ordinary form border and the pill flips to a success state -- shown by
   the check icon and the label change, not by colour alone. */
.form-grid label.required-field.is-satisfied {
  border: var(--ck-border);
  background: var(--ck-bg);
  padding: var(--ck-space-3);
}
.required-field.is-satisfied .required-pill {
  color: var(--tool-on-fill);
  background: var(--ck-success);
}
.required-pill .icon { width: 1em; height: 1em; }
.required-pill .pill-icon-ok { display: none; }
.is-satisfied .required-pill .pill-icon-ok { display: inline; }
.is-satisfied .required-pill .pill-icon-todo { display: none; }

/* ── Alerts ──────────────────────────────────────────────────
   Calm block with a leading-edge rule in the semantic token, icon + text on
   the light surface. Never a heavy tinted band (library/base/primitives/alert). */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-space-3);
  background: var(--ck-bg);
  border: var(--ck-border);
  border-left: 4px solid var(--ck-muted);
  border-radius: var(--ck-radius-sm);
  box-shadow: var(--ck-shadow-sm);
  padding: var(--ck-space-3) var(--ck-space-4);
  font-size: var(--ck-fs-sm);
}
.alert .icon { margin-top: 0.2em; }
.alert--error   { border-left-color: var(--ck-error); }
.alert--error .icon { color: var(--ck-error); }
.alert--warning { border-left-color: var(--ck-warning); }
.alert--warning .icon { color: var(--ck-warning); }
.alert strong { font-weight: var(--ck-fw-bold); }

#neuron-warning { margin-top: var(--ck-space-4); }

/* ── Output preview ──────────────────────────────────────── */

.tablist {
  display: flex;
  gap: var(--ck-space-1);
  border-bottom: 1px solid var(--ck-line);
  margin-bottom: var(--ck-space-3);
}
.tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--ck-radius-sm) var(--ck-radius-sm) 0 0;
  padding: var(--ck-space-2) var(--ck-space-4);
  font-family: inherit;
  font-size: var(--ck-fs-sm);
  font-weight: var(--ck-fw-bold);
  color: var(--ck-muted);
  cursor: pointer;
  position: relative;
  top: 1px;
  transition: color var(--ck-transition), background var(--ck-transition);
}
.tab:hover { color: var(--ck-blue-700); background: var(--ck-blue-50); }
.tab[aria-selected="true"] {
  color: var(--ck-blue-900);
  background: var(--ck-bg);
  border-color: var(--ck-line);
  border-bottom: 1px solid var(--ck-bg);
}

pre#preview {
  font-family: var(--ck-font-mono);
  font-size: var(--ck-fs-xs);
  line-height: 1.55;
  background: var(--ck-bg-dark);
  color: var(--ck-on-dark);
  border-radius: var(--ck-radius);
  padding: var(--ck-space-4);
  margin: 0;
  overflow: auto;
  max-height: 30rem;
  white-space: pre;
  tab-size: 4;
}

/* ── Footer ──────────────────────────────────────────────────
   The dark navy bookend, matching the app bar. Carries the page's single
   orange conversion CTA. */

footer.page {
  background: var(--ck-bg-dark);
  color: var(--ck-on-dark);
  padding: var(--ck-space-12) var(--ck-gutter) var(--ck-space-8);
}
@media (min-width: 1024px) {
  footer.page { padding-inline: var(--ck-gutter-lg); }
}
.footer-grid {
  max-width: var(--ck-container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--ck-space-12);
}
.footer-block h3 {
  font-size: var(--ck-fs-xs);
  letter-spacing: var(--ck-ls-kicker);
  text-transform: uppercase;
  color: var(--ck-blue-300);
  margin-bottom: var(--ck-space-3);
}
.footer-block p { color: var(--ck-on-dark); }
.footer-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: var(--ck-space-6);
}
.footer-block li {
  margin-bottom: var(--ck-space-2);
  break-inside: avoid;
  font-size: var(--ck-fs-xs);
}
footer.page a { color: var(--ck-blue-300); }
footer.page a:hover { color: var(--tool-on-fill); }
footer.page .btn--conversion { color: var(--tool-on-fill); }

.footer-meta {
  margin-top: var(--ck-space-6);
  font-size: var(--ck-fs-xs);
  color: var(--ck-blue-300);
}
.footer-meta #footer-version { font-family: var(--ck-font-mono); }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 767px) {
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--ck-space-8); }
  .footer-block ul { columns: 1; }
  section.card { padding: var(--ck-space-4); }
  .btn { flex: 1 1 auto; justify-content: center; }
  /* App bar in two rows, not three: logo + CTA first, tool name beneath. */
  .appbar-inner { gap: var(--ck-space-2); }
  .appbar-divider { display: none; }
  .appbar-cta { flex: 0 0 auto; }
  .appbar h1 { order: 3; flex: 1 1 100%; font-size: var(--ck-fs-sm); }
}

/* ── Motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── SBT-FSI-specific form pieces ────────────────────────────
   Checkbox labels and the inline request-list check row, matching the
   token-based form styling above. */

.cfg-check-label { font-weight: var(--ck-fw-bold); }
.cfg-check-label > span:first-child {
  display: flex;
  align-items: center;
  gap: var(--ck-space-2);
}
.check-row {
  display: flex;
  gap: var(--ck-space-4);
  flex-wrap: wrap;
  margin-top: var(--ck-space-1);
}
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-space-1);
  font-weight: var(--ck-fw-normal);
  font-size: var(--ck-fs-sm);
  color: var(--ck-ink);
}
.cfg-check-label input[type="checkbox"],
.inline-check input[type="checkbox"] { accent-color: var(--ck-blue-700); }

/* Planner warnings carry a list inside the alert body. */
.alert ul {
  margin: var(--ck-space-1) 0 0;
  padding-left: var(--ck-space-4);
}
.alert li { margin-bottom: var(--ck-space-1); }

#plan-warnings { margin-top: var(--ck-space-4); }

/* Selection-matrix category columns: checkbox + device count. */
table.nv .col-cat { text-align: center; white-space: nowrap; }
table.nv .col-cat .inline-check { font-size: var(--ck-fs-xs); }
table.nv .col-cat input { accent-color: var(--ck-blue-700); }
table.nv .col-cat span { color: var(--ck-muted); }