/* C-Bus Help | diagnoser tool. Scoped .dx-* only, so cbus.css and the 11 pre-existing
   pages are untouched. Uses the existing design tokens from cbus.css (:root). */

/* ---------- shell ---------- */
.dx{ max-width:70ch; }
.dx .dx-lede{ font-size:clamp(1.16rem,1.04rem + .55vw,1.42rem); line-height:1.5;
  color:var(--muted); margin-bottom:1.6rem; text-wrap:pretty; }

/* ---------- the question ---------- */
.dx-q{ margin:2.4rem 0 1.1rem; }
.dx-q h2{ font-family:var(--serif); font-weight:400; line-height:1.15;
  font-size:clamp(1.5rem,1.25rem + 1vw,2rem); color:var(--ink); margin:0 0 .5rem; }
.dx-q p{ color:var(--ink-soft); font-size:1.03rem; margin:0; }

/* ---------- choice cards ---------- */
.dx-choices{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.dx-choices li{ margin:0; }
/* Uniform border + shadow, matching the house .aside/.toc/.feat pattern.
   The "this goes somewhere" affordance is the chevron and the hover lift, not a
   coloured side tab. */
.dx-choice{ display:block; position:relative; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.05rem 2.5rem 1.05rem 1.25rem; text-decoration:none; box-shadow:var(--shadow-sm);
  transition:border-color .25s, transform .4s var(--ease), box-shadow .4s; }
.dx-choice::after{ content:""; position:absolute; right:1.15rem; top:50%;
  width:8px; height:8px; margin-top:-4px;
  border-right:2px solid var(--brass-ink); border-top:2px solid var(--brass-ink);
  transform:rotate(45deg); opacity:.55; transition:opacity .25s, transform .4s var(--ease); }
.dx-choice:hover,.dx-choice:focus-visible{ border-color:var(--brass);
  transform:translateY(-2px); box-shadow:var(--shadow); }
.dx-choice:hover::after,.dx-choice:focus-visible::after{ opacity:1; }
.dx-choice b{ display:block; font-family:var(--sans); font-weight:600; font-size:1.04rem;
  color:var(--ink); line-height:1.35; margin-bottom:.2rem; }
.dx-choice span{ display:block; color:var(--ink-soft); font-size:.95rem; line-height:1.5; }

/* ---------- verdict banner ---------- */
.dx-verdict{ border-radius:var(--radius-lg); padding:1.35rem 1.5rem; margin:0 0 1.6rem;
  background:var(--brass-soft); border:1px solid oklch(0.74 0.115 78 / .45); }
.dx-verdict .dx-vlabel{ font-family:var(--mono); font-weight:500; font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--brass-deep);
  display:block; margin-bottom:.45rem; }
.dx-verdict p{ margin:0; color:var(--ink); font-size:1.06rem; line-height:1.55; }
.dx-verdict--stop{ background:oklch(0.60 0.16 32 / .09); border-color:oklch(0.60 0.16 32 / .4); }
.dx-verdict--stop .dx-vlabel{ color:oklch(0.44 0.16 32); }
.dx-verdict--ok{ background:var(--restored-soft); border-color:oklch(0.62 0.105 152 / .42); }
.dx-verdict--ok .dx-vlabel{ color:var(--restored-ink); }

/* ---------- safety notice (mains) ---------- */
.dx-safety{ background:oklch(0.60 0.16 32 / .07); border:1px solid oklch(0.60 0.16 32 / .35);
  border-radius:var(--radius); padding:1.1rem 1.3rem; margin:1.8rem 0; }
.dx-safety p{ margin:0; color:var(--ink); font-size:.99rem; line-height:1.55; }
.dx-safety p + p{ margin-top:.6rem; }
.dx-safety strong{ color:oklch(0.42 0.16 32); font-weight:600; }

/* ---------- LED legend / observation list ---------- */
.dx-led{ list-style:none; margin:1.2rem 0; padding:0; display:grid; gap:.55rem; }
.dx-led li{ display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:start;
  background:var(--bg-2); border-radius:var(--radius-sm); padding:.8rem 1rem;
  color:var(--ink-soft); font-size:.97rem; line-height:1.5; }
.dx-led .dx-dot{ width:11px; height:11px; border-radius:50%; margin-top:.42rem;
  background:var(--muted); flex:none; }
.dx-led .dx-dot--on{ background:var(--brass); box-shadow:0 0 0 3px oklch(0.74 0.115 78 / .22); }
.dx-led .dx-dot--off{ background:oklch(0.80 0.010 80); }
.dx-led .dx-dot--fault{ background:var(--fault); box-shadow:0 0 0 3px oklch(0.60 0.16 32 / .18); }
.dx-led .dx-dot--ok{ background:var(--restored); box-shadow:0 0 0 3px oklch(0.62 0.105 152 / .2); }
.dx-led b{ color:var(--ink); font-weight:600; }

/* ---------- cost / fact rows ---------- */
.dx-facts{ margin:1.4rem 0; display:grid; gap:0; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.dx-facts div{ display:grid; grid-template-columns:minmax(9rem,32%) 1fr; gap:1rem;
  padding:.85rem 1.15rem; border-top:1px solid var(--line); }
.dx-facts div:first-child{ border-top:0; }
.dx-facts dt{ font-family:var(--sans); font-weight:600; font-size:.94rem; color:var(--ink); margin:0; }
.dx-facts dd{ margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.5; }
@media (max-width:33rem){ .dx-facts div{ grid-template-columns:1fr; gap:.2rem; } }

/* ---------- next step / CTA ---------- */
.dx-next{ background:var(--night); color:var(--on-dark); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2rem); margin:2.2rem 0 0; }
.dx-next h2{ font-family:var(--serif); font-weight:400; font-size:1.5rem; line-height:1.2;
  color:var(--on-dark); margin:0 0 .6rem; }
.dx-next p{ color:var(--on-dark-soft); font-size:1.01rem; line-height:1.6; margin:0 0 1.2rem; }
.dx-next .dx-actions{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* ---------- back / restart trail ---------- */
.dx-back{ margin:2rem 0 0; font-size:.94rem; color:var(--muted);
  display:flex; align-items:center; min-height:44px; }
.dx-back a{ color:var(--brass-ink); font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px; margin-left:.35rem;
  border-bottom:1px solid oklch(0.74 0.115 78 / .45); }
.dx-back a:hover{ border-color:var(--brass-ink); }

/* ---------- related links ---------- */
.dx-related{ margin:2rem 0 0; padding:1.3rem 1.5rem; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.dx-related p{ font-family:var(--mono); font-size:.7rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); margin:0 0 .8rem; }
.dx-related ul{ list-style:none; margin:0; padding:0; display:grid; }
/* 44px touch floor on the related list: these are the only secondary links the
   tool itself owns, so they meet the target even though the shared .toc does not. */
.dx-related a{ color:var(--ink-soft); text-decoration:none; font-size:.98rem;
  display:flex; align-items:center; min-height:44px; line-height:1.35;
  border-bottom:1px solid var(--line); }
.dx-related li:last-child a{ border-bottom:0; }
.dx-related a:hover{ color:var(--brass-ink); border-color:var(--brass); }