/* LNM setup generator — loaded only on its own page.
 *
 * Every selector is prefixed `lnm-` and every colour is a site token, as in
 * finder.css, panel-heat.css and ihc-calculator.css: nothing here can reach
 * into a guide. The printed guide is a deliverable — the electrician takes it
 * to the job — so the print block at the foot keeps the device cards and
 * drops the form.
 */

/* ---- Beta banner: on screen and in print ----------------------------------- */
.lnm-beta {
  margin: 0 0 18px; padding: 14px 18px; border: 1.5px solid var(--sg-amber-line); border-left-width: 6px;
  border-radius: var(--sg-r-sm); background: var(--sg-amber-bg); color: var(--sg-midnight);
}
.lnm-beta p { margin: 0; line-height: 1.55; }
.lnm-beta strong { font-weight: 800; }
.lnm-beta a { color: var(--sg-navy); font-weight: 700; overflow-wrap: anywhere; }

/* ---- Form ----------------------------------------------------------------- */
.lnm-form { display: grid; gap: 22px; }
.lnm-block { border: 0; margin: 0; padding: 0; min-width: 0; }
.lnm-block legend { font-size: 1.15rem; font-weight: 800; color: var(--sg-midnight); margin-bottom: 10px; padding: 0; }
.lnm-block h3 { font-size: 1rem; margin: 18px 0 8px; color: var(--sg-midnight); }
.lnm-hint { margin: 0 0 12px; color: var(--sg-muted); font-size: .92rem; line-height: 1.5; max-width: 72ch; }

.lnm-choice { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lnm-card {
  display: grid; gap: 4px; padding: 14px 16px; cursor: pointer;
  border: 1.5px solid var(--sg-line); border-radius: var(--sg-r-sm); background: var(--sg-paper);
}
.lnm-card.is-on, .lnm-card:has(input:checked) { border-color: var(--sg-blue); background: var(--sg-tint); }
.lnm-card input { position: absolute; opacity: 0; pointer-events: none; }
.lnm-card:focus-within { outline: 2px solid var(--sg-blue); outline-offset: 2px; }
.lnm-card strong { color: var(--sg-midnight); }
.lnm-card span { color: var(--sg-muted); font-size: .9rem; line-height: 1.45; }

.lnm-circuit, .lnm-sender {
  border: 1px solid var(--sg-line); border-radius: var(--sg-r-sm); padding: 12px 14px; margin-bottom: 10px; background: var(--sg-paper);
}
/* Top-aligned: a field with a hint under it is taller than one without. */
.lnm-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.lnm-row > * { min-width: 0; }
.lnm-inputs { display: flex; flex-wrap: wrap; gap: 10px; }
.lnm-field { display: grid; gap: 4px; flex: 1 1 110px; font-size: .85rem; color: var(--sg-muted); }
.lnm-field--s { flex: 0 1 150px; }
/* Product names and the IP hint are the long ones; they get the room. */
.lnm-field--dev { flex: 2 1 180px; }
.lnm-field--pro { flex: 1 1 150px; }
.lnm-field--ip { flex: 2 1 190px; }
.lnm-field span { font-weight: 700; }
.lnm-help { font-size: .8rem; line-height: 1.4; color: var(--sg-muted); }
.lnm-field input, .lnm-field select {
  font: inherit; font-size: .95rem; color: var(--sg-midnight); width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid var(--sg-line); border-radius: 8px; background: #fff;
}
.lnm-field input:focus, .lnm-field select:focus { outline: 2px solid var(--sg-blue); outline-offset: 1px; }

.lnm-x {
  flex: 0 0 auto; width: 36px; height: 36px; margin-top: 21px; /* level with the inputs, under their labels */ border: 1px solid var(--sg-line); border-radius: 8px;
  background: #fff; color: var(--sg-muted); font-size: 1.2rem; cursor: pointer;
}
.lnm-x:hover { color: var(--sg-navy); border-color: var(--sg-blue); }
.lnm-add {
  border: 1px dashed var(--sg-blue); background: none; color: var(--sg-navy); font: inherit; font-weight: 700;
  font-size: .9rem; padding: 7px 12px; border-radius: 8px; cursor: pointer; margin: 2px 0 8px;
}
.lnm-add:hover { background: var(--sg-tint); }

.lnm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lnm-btn {
  font: inherit; font-weight: 800; padding: 11px 18px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--sg-navy); background: var(--sg-navy); color: #fff;
}
.lnm-btn:hover { background: var(--sg-midnight); }
.lnm-btn--ghost { background: #fff; color: var(--sg-navy); border-color: var(--sg-line); }
.lnm-btn--ghost:hover { background: var(--sg-tint); border-color: var(--sg-blue); }

/* ---- Guide ---------------------------------------------------------------- */
.lnm-out { display: grid; gap: 18px; margin-top: 18px; outline: none; }
.lnm-out > .sg-card { margin: 0; }
.lnm-alert {
  border: 1px solid var(--sg-amber-line); background: var(--sg-amber-bg); border-radius: var(--sg-r-sm);
  padding: 12px 16px; font-size: .95rem;
}
.lnm-alert ul { margin: 6px 0 0; padding-left: 20px; }
.lnm-alert--bad { border-color: #cf9f96; background: #fbece9; color: #7d2414; }
/* A device that does not work yet: in the form and on its card. */
.lnm-broken { margin: 8px 0 4px; font-weight: 700; }

.lnm-kicker { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-blue); }
.lnm-device h3 { margin: 4px 0 2px; font-size: 1.3rem; color: var(--sg-midnight); }
.lnm-product { margin: 0 0 12px; color: var(--sg-muted); font-size: .9rem; overflow-wrap: anywhere; }

.lnm-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: lnm-step; display: grid; gap: 14px; }
.lnm-steps > li { counter-increment: lnm-step; position: relative; padding-left: 40px; min-width: 0; }
.lnm-steps > li::before {
  content: counter(lnm-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #fff; background: var(--sg-navy);
}
.lnm-steps h4 { margin: 3px 0 6px; font-size: 1rem; color: var(--sg-midnight); }
.lnm-steps p { margin: 0 0 8px; line-height: 1.55; }

.lnm-values { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 10px; font-size: .93rem; }
.lnm-values dt { color: var(--sg-muted); }
.lnm-values dd { margin: 0; font-family: var(--sg-mono); font-weight: 700; color: var(--sg-midnight); overflow-wrap: anywhere; }

.lnm-code { position: relative; margin: 0 0 10px; min-width: 0; }
.lnm-code pre {
  margin: 0; padding: 12px 88px 12px 14px; background: var(--sg-midnight); color: #e7eef5; border-radius: 10px;
  font-family: var(--sg-mono); font-size: .82rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 420px; overflow: auto;
}
.lnm-copy {
  position: absolute; top: 8px; right: 8px; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
  padding: 5px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff;
}
.lnm-copy:hover { background: rgba(255, 255, 255, .25); }
.lnm-copy:disabled { opacity: .6; cursor: not-allowed; background: none; }

/* The number a device answered with, typed into the guide. */
.lnm-num { max-width: 200px; margin: 0 0 10px; }
.lnm-num input { font-family: var(--sg-mono); font-weight: 700; }

.lnm-config { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: .9rem; }
.lnm-config caption { text-align: left; font-weight: 800; margin-bottom: 6px; color: var(--sg-midnight); }
.lnm-config th, .lnm-config td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--sg-line); vertical-align: top; }
.lnm-config code { font-family: var(--sg-mono); white-space: nowrap; }
.lnm-map { margin: 0 0 10px; padding-left: 20px; font-size: .9rem; color: var(--sg-muted); overflow-wrap: anywhere; }

.lnm-before ul, .lnm-trouble dl { margin: 0; }
.lnm-before li { margin-bottom: 6px; line-height: 1.5; }
.lnm-trouble dt { font-weight: 800; color: var(--sg-midnight); margin-top: 10px; }
.lnm-trouble dd { margin: 2px 0 0; line-height: 1.55; }
.lnm-print { margin-top: 4px; }

@media (max-width: 560px) {
  .lnm-field, .lnm-field--s, .lnm-field--dev, .lnm-field--pro, .lnm-field--ip { flex: 1 1 100%; }
  .lnm-steps > li { padding-left: 34px; }
  .lnm-values { grid-template-columns: 1fr; }
  .lnm-values dd { margin-bottom: 6px; }
}

/* ---- Print: the guide, not the form ---------------------------------------- */
@media print {
  .lnm-intro, #generator, .lnm-print, .lnm-copy, #related, .sg-pager { display: none !important; }
  .lnm-out { display: block !important; margin: 0; }
  .lnm-out > * { margin: 0 0 10pt; }
  .lnm-steps > li { break-inside: avoid; }
  .lnm-steps > li::before { background: none; color: #000; border: 1px solid #000; }
  .lnm-code pre { background: #fff; color: #000; border: 1px solid #999; max-height: none; overflow: visible; padding-right: 12px; }
  .lnm-alert { break-inside: avoid; }
  /* Not hidden: a printed card keeps the "not yet working" warning. */
  .lnm-broken { display: block !important; border: 1.5pt solid #000; background: none; }
  /* The beta banner is NOT hidden: a printed guide keeps the reservation. */
  .lnm-beta { display: block !important; break-inside: avoid; border: 1.5pt solid #000; border-left-width: 5pt; background: none; margin: 0 0 10pt; }
  /* An empty number field prints as a box to write the number in. */
  .lnm-num input { border: 1px solid #000; min-height: 22pt; }
}