/* ============================================================
   ICBC Road Test Demerit Calculator (unofficial study tool)
   Dark premium tool page: hero with paper-sheet art, marking
   workbench with section tabs, sticky score ring, phone bar,
   print-only result report.
   ============================================================ */

.page-demerit-calc {
  --dc-cyan: #00d4ff;
  --dc-cyan-2: #4de3ff;
  --dc-ok: #34e3b0;
  --dc-ok-text: #8ff5d2;
  --dc-warn: #ffc24b;
  --dc-warn-text: #ffd98a;
  --dc-fail: #ff4d61;
  --dc-fail-text: #ff9aa6;
  --dc-line: rgba(255, 255, 255, 0.10);
  --dc-line-soft: rgba(255, 255, 255, 0.07);
  --dc-text: rgba(226, 232, 240, 0.88);
  --dc-muted: rgba(196, 204, 218, 0.66);
  /* Fully opaque: the fixed, animated road background must not flicker through the tool. */
  --dc-card: linear-gradient(180deg, #090e19, #060a12);
}

.dc-app [hidden],
.dc-hero [hidden],
.dc-bar [hidden] { display: none !important; }

.dc-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.dc-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- Hero ---------------- */
.dc-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 30px;
  align-items: center;
  padding: clamp(22px, 4vw, 42px);
  border-radius: 22px;
  border: 1px solid var(--dc-line);
  background:
    radial-gradient(circle at 88% 18%, rgba(0, 212, 255, 0.16), transparent 42%),
    radial-gradient(circle at 70% 100%, rgba(255, 77, 97, 0.08), transparent 40%),
    var(--dc-card);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.dc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
}
.dc-hero-copy { position: relative; z-index: 1; min-width: 0; }
.dc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 212, 255, 0.28);
  background: rgba(0, 212, 255, 0.07);
  color: var(--dc-cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.dc-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dc-cyan);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
}
.dc-hero h1 {
  margin: 0 0 12px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.95rem, 3.7vw, 2.95rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
}
/* Own line at every width: "ICBC Road Test" / "Demerit Calculator". */
.dc-hero h1 span { display: block; color: var(--dc-cyan); }
.dc-dek {
  margin: 0 0 18px;
  max-width: 54ch;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.86);
}
.dc-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.dc-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
  font-weight: 650;
  color: rgba(226, 232, 240, 0.86);
}
.dc-chips svg { flex: 0 0 auto; color: var(--dc-cyan); }

/* Hero art: a paper sheet with a digital gauge on top */
.dc-art {
  position: relative;
  z-index: 1;
  min-height: 270px;
  perspective: 1200px;
}
.dc-art-sheet {
  position: absolute;
  top: 6px;
  left: 4%;
  width: 84%;
  padding: 14px 14px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f5f7fa, #e8edf3);
  color: #1b2433;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  transform: rotate(-4deg) rotateY(-6deg);
  transform-origin: 30% 50%;
}
.dc-art-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5b6779;
}
.dc-art-top strong { font-size: 0.8rem; color: #1b2433; letter-spacing: 0; }
.dc-art-head,
.dc-art-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px 112px;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 0 6px;
  border-bottom: 1px solid #cdd5df;
  font-size: 0.74rem;
}
.dc-art-head {
  min-height: 22px;
  background: #dfe5ec;
  border: 1px solid #c3ccd8;
  font-weight: 800;
  font-size: 0.72rem;
}
.dc-art-row span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dc-art-row span:nth-child(2) { text-align: center; font-weight: 700; color: #3a4658; }
.dc-art-boxes { display: grid; grid-template-columns: repeat(5, 1fr); height: 100%; }
.dc-art-boxes i {
  position: relative;
  display: grid;
  place-items: center;
  border-left: 1px solid #cdd5df;
  font-style: normal;
  font-weight: 800;
  font-size: 0.66rem;
  color: #1b2433;
}
.dc-art-boxes i.on::after {
  content: "";
  width: 12px;
  height: 2.5px;
  border-radius: 2px;
  background: #0b7fc0;
  transform: rotate(-58deg);
  box-shadow: 0 0 0 0.4px #0b7fc0;
}
.dc-art-boxes i.f.on {
  background: #ff4d61;
  color: #fff;
}
.dc-art-boxes i.f.on::after { display: none; }
.dc-art-boxes i.void { background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(27, 36, 51, 0.08) 3px 4px); }
.dc-art-row.is-cut { background: rgba(255, 77, 97, 0.12); }

.dc-art-gauge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 77, 97, 0.42);
  background: rgba(8, 13, 24, 0.9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 77, 97, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.dc-art-ring { position: relative; width: 62px; height: 62px; }
.dc-art-ring svg { width: 100%; height: 100%; display: block; }
.dc-art-ring b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  color: #fff;
}
.dc-art-gauge-copy { display: grid; gap: 3px; }
.dc-art-gauge-copy small { color: var(--dc-muted); font-size: 0.72rem; font-weight: 600; }
.dc-art-gauge-copy strong { color: var(--dc-fail-text); font-size: 0.86rem; }
.dc-art-gauge-copy span { color: rgba(226, 232, 240, 0.7); font-size: 0.72rem; }

/* ---------------- Disclaimer ---------------- */
.dc-disclaimer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 194, 75, 0.28);
  /* Opaque base: the fixed road background must not show through the text. */
  background: linear-gradient(180deg, rgba(255, 194, 75, 0.075), rgba(255, 194, 75, 0.03)), #0a0f19;
}
.dc-disclaimer svg { flex: 0 0 auto; margin-top: 2px; color: var(--dc-warn); }
.dc-disclaimer p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(226, 232, 240, 0.84); }
.dc-disclaimer strong { color: var(--dc-warn-text); }
.dc-disclaimer a { color: var(--dc-cyan); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- App layout ---------------- */
.dc-app-wrap { container: dcapp / inline-size; margin: 0; padding: 0; }
.dc-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@container dcapp (min-width: 860px) {
  .dc-app { grid-template-columns: minmax(0, 1fr) 320px; }
  .dc-score { position: sticky; top: 92px; }
  .dc-score-card {
    max-height: calc(100vh - 108px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

.dc-work {
  container: dcwork / inline-size;
  min-width: 0;
  padding: clamp(16px, 2.4vw, 26px);
  border-radius: 20px;
  border: 1px solid var(--dc-line);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 212, 255, 0.07), transparent 30%),
    var(--dc-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.dc-work-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 14px;
  margin-bottom: 14px;
}
.dc-work-head-copy { display: contents; }
.dc-work-head h2 { grid-column: 1; grid-row: 1; align-self: center; }
.dc-work-head .dc-chip--reset { grid-column: 2; grid-row: 1; }
.dc-work-head p { grid-column: 1 / -1; grid-row: 2; }
.dc-work-head h2 {
  margin: 0 0 6px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
.dc-work-head p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--dc-muted); max-width: 64ch; }

/* Presets */
.dc-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.dc-presets-label {
  margin-right: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-muted);
}
.dc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.9);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dc-chip[aria-pressed="true"] {
  border-color: var(--dc-cyan);
  background: rgba(0, 212, 255, 0.13);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.10);
}
.dc-chip--reset { flex: 0 0 auto; border-style: dashed; }
.dc-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.dc-chip:focus-visible,
.dc-tab:focus-visible,
.dc-step:focus-visible,
.dc-vh-cell:focus-visible,
.dc-row-name:focus-visible,
.dc-bd-btn:focus-visible,
.dc-btn:focus-visible,
.dc-text-btn:focus-visible,
.dc-next-btn:focus-visible,
.dc-bar-btn:focus-visible {
  outline: 2px solid var(--dc-cyan);
  outline-offset: 2px;
}

.dc-preset-note {
  display: grid;
  gap: 3px;
  margin: 0 0 14px;
  padding: 12px 14px 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-left: 3px solid var(--dc-cyan);
  background: rgba(0, 212, 255, 0.06);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--dc-text);
}
.dc-preset-note strong { color: #fff; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }

.dc-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 8px 8px 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--dc-line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.86rem;
  color: var(--dc-text);
}

/* Tabs */
.dc-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}
.dc-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px 12px 8px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(226, 232, 240, 0.78);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dc-tab-num {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(196, 204, 218, 0.75);
}
.dc-tab-title { flex: 1 1 auto; min-width: 0; }
.dc-tab-sum {
  flex: 0 0 auto;
  min-width: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #03101a;
  background: var(--dc-cyan);
}
.dc-tab-sum:empty { display: none; }
.dc-tab.is-active {
  border-color: var(--dc-cyan);
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.16), rgba(0, 212, 255, 0.06));
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 212, 255, 0.12);
}
.dc-tab.is-active .dc-tab-num { border-color: transparent; background: linear-gradient(135deg, var(--dc-cyan), var(--dc-cyan-2)); color: #03101a; }
.dc-tab.has-cutoff .dc-tab-sum { background: var(--dc-fail); color: #fff; }
.dc-tab.has-cutoff::after {
  content: "F";
  position: absolute;
  top: -7px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dc-fail);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
  box-shadow: 0 0 0 3px #070c16, 0 0 14px rgba(255, 77, 97, 0.7);
}
/* Wider columns where the titles are longer, so "Vehicle Handling" and its total stay on one line. */
@container dcwork (min-width: 600px) {
  .dc-tabs { grid-template-columns: minmax(0, .85fr) minmax(0, .9fr) minmax(0, 1.05fr) minmax(0, 1.2fr); }
  .dc-tab { padding: 8px 10px 8px 12px; gap: 6px; }
}

/* Panel */
.dc-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.dc-panel-title {
  margin: 0 0 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  color: #fff;
}
.dc-panel-note { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--dc-muted); max-width: 58ch; }
.dc-panel-total {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 1px;
  text-align: right;
}
.dc-panel-total strong {
  font-family: 'Poppins', sans-serif;
  font-size: 1.55rem;
  line-height: 1;
  color: #fff;
}
.dc-panel-total > span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dc-muted); }
.dc-text-btn {
  margin-top: 4px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--dc-cyan);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.dc-text-btn:disabled { color: rgba(196, 204, 218, 0.35); cursor: default; }

.dc-panel-alert {
  display: grid;
  gap: 2px;
  margin: 0 0 12px;
  padding: 12px 14px 12px 44px;
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255, 77, 97, 0.5);
  background: linear-gradient(180deg, rgba(255, 77, 97, 0.16), rgba(255, 77, 97, 0.07));
  font-size: 0.88rem;
  line-height: 1.5;
  color: #ffd3d8;
}
.dc-panel-alert::before {
  content: "F";
  position: absolute;
  left: 13px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--dc-fail);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}
.dc-panel-alert strong { color: #fff; }

.dc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 10px;
  font-size: 0.74rem;
  color: var(--dc-muted);
}
.dc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dc-legend-box {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 900;
}
.dc-legend-box--on { border-color: transparent; background: linear-gradient(135deg, var(--dc-cyan), var(--dc-cyan-2)); }
.dc-legend-box--f { border: 1.5px dashed rgba(255, 77, 97, 0.7); color: var(--dc-fail-text); }

/* Rows */
.dc-rows { display: grid; gap: 7px; }
.dc-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 9px 10px 9px 9px;
  border-radius: 14px;
  border: 1px solid var(--dc-line-soft);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
@container dcwork (min-width: 600px) {
  .dc-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; }
  .dc-row-tip,
  .dc-row-flag { grid-column: 1 / -1; }
  /* A fixed 5-slot box column: boxes start at the same edge on every row and the
     F of a 10-point row sits in slot 4, as on the paper sheet. */
  .dc-boxes { min-width: calc(5 * 28px + 4 * 5px); }
}
.dc-row.is-marked { border-color: rgba(0, 212, 255, 0.32); background: rgba(0, 212, 255, 0.045); }
.dc-row.is-near { border-color: rgba(255, 194, 75, 0.5); background: rgba(255, 194, 75, 0.05); }
.dc-row.is-cutoff {
  border-color: rgba(255, 77, 97, 0.7);
  background: linear-gradient(90deg, rgba(255, 77, 97, 0.14), rgba(255, 77, 97, 0.05));
  box-shadow: 0 0 0 1px rgba(255, 77, 97, 0.18), 0 10px 30px rgba(255, 77, 97, 0.12);
}

.dc-row-name {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 40px;
  padding: 2px 4px 2px 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dc-pts {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  font-weight: 800;
}
.dc-row--ten .dc-pts { background: rgba(0, 212, 255, 0.13); color: var(--dc-cyan); }
.dc-row-text { display: grid; gap: 1px; min-width: 0; }
.dc-row-label {
  color: #fff;
  font-size: 0.93rem;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.dc-row-meta { color: var(--dc-muted); font-size: 0.75rem; font-weight: 550; line-height: 1.35; }
.dc-info {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  border-radius: 50%;
  border: 1.5px solid rgba(196, 204, 218, 0.35);
  color: rgba(196, 204, 218, 0.65);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dc-row-label .dc-nowrap { white-space: nowrap; }
.dc-row-label .dc-info { display: inline-grid; vertical-align: 1px; margin-left: 6px; }
.dc-row-name[aria-expanded="true"] .dc-info { background: var(--dc-cyan); border-color: var(--dc-cyan); color: #03101a; }

.dc-row-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dc-boxes { display: flex; gap: 5px; }
.dc-box {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.dc-box.is-on {
  border-color: transparent;
  background: linear-gradient(135deg, var(--dc-cyan), var(--dc-cyan-2));
  box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
}
.dc-box.is-on::after {
  content: "";
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303101a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dc-box--f { border: 1.5px dashed rgba(255, 77, 97, 0.65); }
.dc-box-f { color: var(--dc-fail-text); font-size: 0.74rem; font-weight: 900; line-height: 1; }
.dc-box--f.is-on {
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, #ff4d61, #ff7a59);
  box-shadow: 0 0 0 3px rgba(255, 77, 97, 0.2), 0 6px 18px rgba(255, 77, 97, 0.45);
}
.dc-box--f.is-on::after { display: none; }
.dc-box--f.is-on .dc-box-f { color: #fff; }
.dc-row.is-near .dc-box--f { border-color: var(--dc-warn); background: rgba(255, 194, 75, 0.1); }
.dc-row.is-near .dc-box--f .dc-box-f { color: var(--dc-warn-text); }

.dc-sum {
  min-width: 38px;
  margin-left: auto;
  text-align: right;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(196, 204, 218, 0.4);
}
.dc-row.is-marked .dc-sum { color: var(--dc-cyan); }
.dc-row.is-cutoff .dc-sum { color: var(--dc-fail-text); }

.dc-stepper { display: flex; gap: 6px; }
.dc-step {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.9);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.dc-step:active { transform: scale(0.94); }
/* A tinted + by default; solid cyan only on rows that already have a mark (and on hover),
   so marked rows stand out and an empty panel isn't a column of bright tiles. */
.dc-step--plus {
  border: 1px solid rgba(0, 212, 255, 0.45);
  background: rgba(0, 212, 255, 0.12);
  color: var(--dc-cyan);
  box-shadow: none;
}
.dc-row.is-marked .dc-step--plus:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(135deg, var(--dc-cyan), var(--dc-cyan-2));
  color: #03101a;
  box-shadow: 0 6px 16px rgba(0, 212, 255, 0.22);
}
/* Keyboard focus gets the same solid tile as a mouse hover, on top of the focus ring. */
.dc-step--plus:not(:disabled):focus-visible {
  border-color: transparent;
  background: linear-gradient(135deg, var(--dc-cyan), var(--dc-cyan-2));
  color: #03101a;
}
.dc-step:disabled { opacity: 0.28; cursor: not-allowed; box-shadow: none; transform: none; }
/* A full row: a neutral "unavailable" tile, not a dimmed cyan one that reads as pressed. */
.dc-step--plus:disabled {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(226, 232, 240, 0.6);
  opacity: 0.5;
  filter: none;
}

/* Mid-width work column (about 1366 px laptops): slimmer boxes give the row names room. */
@container dcwork (min-width: 600px) and (max-width: 700px) {
  .dc-box { width: 24px; height: 28px; border-radius: 7px; }
  .dc-boxes { gap: 4px; min-width: calc(5 * 24px + 4 * 4px); }
  .dc-row-controls { gap: 10px; }
  .dc-sum { min-width: 32px; }
}

.dc-row-tip {
  margin: 0 0 2px 43px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid rgba(0, 212, 255, 0.45);
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.78);
}
.dc-row-flag {
  margin: 0 0 1px 43px;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--dc-muted);
}
.dc-row.is-near .dc-row-flag { color: var(--dc-warn-text); }
.dc-row.is-cutoff .dc-row-flag { color: var(--dc-fail-text); }

.dc-row.dc-flash { animation: dc-flash 1.2s ease-out 1; }
.dc-row.dc-flash .dc-box--f.is-on { animation: dc-pop 0.6s cubic-bezier(.2, 1.6, .4, 1) 1; }
@keyframes dc-flash {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 97, 0.75); }
  60% { box-shadow: 0 0 0 10px rgba(255, 77, 97, 0); }
  100% { box-shadow: 0 0 0 1px rgba(255, 77, 97, 0.18), 0 10px 30px rgba(255, 77, 97, 0.12); }
}
@keyframes dc-pop {
  0% { transform: scale(0.6); }
  100% { transform: scale(1); }
}

/* Vehicle Handling grid */
.dc-vh { display: grid; gap: 7px; }
.dc-vh-head,
.dc-vh-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
}
.dc-vh-head { padding: 0 10px 0 9px; }
.dc-vh-corner,
.dc-vh-col {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dc-muted);
  line-height: 1.2;
}
.dc-vh-col { text-align: center; }
.dc-vh-col-short { display: none; }
.dc-vh-row {
  padding: 8px 10px 8px 9px;
  border-radius: 14px;
  border: 1px solid var(--dc-line-soft);
  background: rgba(255, 255, 255, 0.025);
}
.dc-vh-row.is-marked { border-color: rgba(0, 212, 255, 0.32); background: rgba(0, 212, 255, 0.045); }
.dc-vh-cell {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.025);
  color: transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.dc-vh-cell:active { transform: scale(0.95); }
.dc-vh-cell.is-on {
  border-color: transparent;
  background: linear-gradient(135deg, var(--dc-cyan), var(--dc-cyan-2));
  color: #03101a;
  box-shadow: 0 6px 16px rgba(0, 212, 255, 0.25);
}
.dc-vh-tip { margin: -2px 0 4px 10px; }

.dc-panel-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.dc-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.9);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

/* Instant fails */
.dc-instant {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--dc-line);
}
.dc-instant-head h3 {
  margin: 0 0 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.08rem;
  color: #fff;
}
.dc-instant-head p { margin: 0 0 12px; font-size: 0.86rem; color: var(--dc-muted); }
.dc-switches { display: grid; gap: 8px; }
@container dcwork (min-width: 760px) {
  .dc-switches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dc-switch {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--dc-line);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dc-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.dc-switch-ui {
  position: relative;
  margin-top: 1px;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease;
}
.dc-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s cubic-bezier(.3, 1.3, .5, 1);
}
.dc-switch input:checked + .dc-switch-ui { background: var(--dc-fail); }
.dc-switch input:checked + .dc-switch-ui::after { transform: translateX(18px); }
.dc-switch input:focus-visible + .dc-switch-ui { outline: 2px solid var(--dc-cyan); outline-offset: 3px; }
.dc-switch.is-on {
  border-color: rgba(255, 77, 97, 0.6);
  background: linear-gradient(180deg, rgba(255, 77, 97, 0.14), rgba(255, 77, 97, 0.05));
}
.dc-switch-copy { display: grid; gap: 3px; }
.dc-switch-copy strong { color: #fff; font-size: 0.92rem; }
.dc-switch-copy span { color: var(--dc-muted); font-size: 0.8rem; line-height: 1.5; }

.dc-noscript {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 194, 75, 0.3);
  color: var(--dc-warn-text);
  font-size: 0.9rem;
}

/* ---------------- Score ---------------- */
.dc-score { min-width: 0; }
.dc-score-card {
  padding: 16px 16px 16px;
  border-radius: 20px;
  border: 1px solid var(--dc-line);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.10), transparent 45%),
    var(--dc-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.dc-score[data-level="fail"] .dc-score-card {
  border-color: rgba(255, 77, 97, 0.45);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 77, 97, 0.14), transparent 48%),
    var(--dc-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3), 0 0 50px rgba(255, 77, 97, 0.08);
}
.dc-score-main,
.dc-score-side { display: contents; }
.dc-score-title {
  margin: 0 0 6px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dc-cyan);
}
.dc-score-title:focus { outline: none; }

.dc-ring {
  position: relative;
  width: min(198px, 100%);
  margin: 0 auto;
}
.dc-ring svg { display: block; width: 100%; height: auto; overflow: visible; }
.dc-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 12; }
.dc-ring-fill {
  fill: none;
  stroke: url(#dcRingOk);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.7s cubic-bezier(.2, .8, .2, 1), stroke 0.3s ease, opacity 0.3s ease;
}
.dc-ring-tick { stroke: rgba(255, 255, 255, 0.85); stroke-width: 2.5; stroke-linecap: round; }
.dc-ring-tick-label { fill: rgba(255, 255, 255, 0.75); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; }
[data-level="empty"] .dc-ring-fill { opacity: 0; }
[data-level="warn"] .dc-ring-fill { stroke: var(--dc-warn); }
[data-level="fail"] .dc-ring-fill { stroke: var(--dc-fail); }
.dc-ring::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.16), transparent 70%);
  transition: background 0.3s ease;
}
[data-level="warn"] .dc-ring::before { background: radial-gradient(circle, rgba(255, 194, 75, 0.16), transparent 70%); }
[data-level="fail"] .dc-ring::before { background: radial-gradient(circle, rgba(255, 77, 97, 0.22), transparent 70%); }
.dc-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dc-ring-center strong {
  font-family: 'Poppins', sans-serif;
  font-size: 2.6rem;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.dc-ring-unit {
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dc-muted);
}
.dc-ring-room { margin-top: 5px; font-size: 0.76rem; font-weight: 650; color: rgba(226, 232, 240, 0.78); }
[data-level="fail"] .dc-ring-room { color: var(--dc-fail-text); }

.dc-verdict {
  display: flex;
  justify-content: center;
  margin: 8px 0 6px;
}
.dc-verdict span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}
.dc-verdict span::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
[data-level="ok"] .dc-verdict span { border-color: rgba(52, 227, 176, 0.4); background: rgba(52, 227, 176, 0.1); color: var(--dc-ok-text); }
[data-level="warn"] .dc-verdict span { border-color: rgba(255, 194, 75, 0.45); background: rgba(255, 194, 75, 0.1); color: var(--dc-warn-text); }
[data-level="fail"] .dc-verdict span { border-color: rgba(255, 77, 97, 0.55); background: rgba(255, 77, 97, 0.14); color: #ffc2c9; }

.dc-meta-line {
  margin: 0 0 14px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--dc-muted);
  font-variant-numeric: tabular-nums;
}

.dc-bd-title,
.dc-result-label {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-muted);
}
.dc-breakdown { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 2px; }
.dc-bd-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 18px 34px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: rgba(226, 232, 240, 0.82);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.dc-bd-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dc-bd-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dc-cyan), var(--dc-cyan-2));
  transition: width 0.5s cubic-bezier(.2, .8, .2, 1);
}
.dc-bd-btn.has-cutoff .dc-bd-bar i { background: linear-gradient(90deg, #ff4d61, #ff7a59); }
.dc-bd-f {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 900;
  color: transparent;
}
.dc-bd-btn.has-cutoff .dc-bd-f { background: var(--dc-fail); color: #fff; }
.dc-bd-val { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(196, 204, 218, 0.5); }
.dc-bd-btn.has-marks .dc-bd-val { color: #fff; }
.dc-bd-btn.has-cutoff .dc-bd-val { color: var(--dc-fail-text); }

.dc-result {
  margin: 0 0 12px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--dc-line-soft);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}
[data-level="fail"] .dc-result { border-color: rgba(255, 77, 97, 0.35); background: rgba(255, 77, 97, 0.06); }
.dc-result-text { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--dc-text); }
.dc-reasons { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.dc-reasons li {
  position: relative;
  padding-left: 22px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #ffd3d8;
}
.dc-reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--dc-fail) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.dc-reasons li.is-warn { color: var(--dc-warn-text); }
.dc-reasons li.is-warn::before {
  background: var(--dc-warn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303101a' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.dc-score-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(226, 232, 240, 0.92);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}
.dc-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--dc-cyan), var(--dc-cyan-2));
  color: #03101a;
  box-shadow: 0 10px 24px rgba(0, 212, 255, 0.2);
}
.dc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Print waits for a first mark: no glow while it is off. */
.dc-btn--primary:disabled { box-shadow: none; }
.dc-score-note { margin: 0; font-size: 0.76rem; line-height: 1.55; color: rgba(196, 204, 218, 0.6); text-align: center; }
.dc-score-note a { color: var(--dc-cyan); }

/* Sticky card (two-column layout). When a long list of reasons makes the card too tall, only
   the middle part (sections, result, reasons) scrolls: the ring stays at the top, the
   "Unofficial ... No guarantee." note stays whole at the bottom, and Print and Reset stay
   pinned above the note with the reasons fading out under them (last mile, 2026-10-23: the
   note used to be cut mid-line at the card's bottom edge). */
@container dcapp (min-width: 860px) {
  .dc-result { margin-bottom: 0; }
  .dc-score-main { display: block; flex: none; }
  .dc-score-side {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    margin: 0 -16px;
    padding: 0 16px;
  }
  .dc-score-note { flex: none; padding-top: 8px; }
  .dc-score-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0 -16px;
    padding: 20px 16px 6px;
    background: linear-gradient(180deg, rgba(7, 11, 20, 0), #070b14 18px);
  }
  /* Short laptop screens: give back about 55 px. The ring stays wide enough for its
     centre text ("13 under the limit") to clear the stroke. */
  @media (max-height: 820px) {
    .dc-score-title { margin-bottom: 2px; }
    .dc-ring { width: min(184px, 100%); }
    .dc-ring-center strong { font-size: 2.4rem; }
    .dc-ring-unit { margin-top: 3px; font-size: 0.66rem; }
    .dc-ring-room { margin-top: 4px; font-size: 0.72rem; }
    .dc-verdict { margin: 4px 0; }
    .dc-meta-line { margin-bottom: 8px; }
    .dc-breakdown { margin-bottom: 10px; }
    .dc-bd-btn { min-height: 27px; padding-top: 2px; padding-bottom: 2px; }
  }
}

/* ---------------- Phone bottom bar ---------------- */
.dc-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  max-width: 560px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(140%);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), opacity 0.25s ease;
}
.dc-bar.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.dc-bar-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px 9px 9px;
  border-radius: 20px;
  border: 1px solid rgba(0, 212, 255, 0.32);
  background: rgba(7, 12, 22, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dc-bar[data-level="warn"] .dc-bar-btn { border-color: rgba(255, 194, 75, 0.5); }
.dc-bar[data-level="fail"] .dc-bar-btn { border-color: rgba(255, 77, 97, 0.6); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 77, 97, 0.18); }
.dc-bar-ring { position: relative; flex: 0 0 auto; width: 46px; height: 46px; }
.dc-bar-ring svg { display: block; width: 100%; height: 100%; }
.dc-bar-ring .dc-ring-track,
.dc-bar-ring .dc-ring-fill { stroke-width: 5; }
.dc-bar-ring b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.dc-bar-copy { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.dc-bar-copy strong { font-size: 0.92rem; line-height: 1.2; }
.dc-bar-copy small { font-size: 0.74rem; color: var(--dc-muted); }
.dc-bar[data-level="ok"] .dc-bar-copy strong { color: var(--dc-ok-text); }
.dc-bar[data-level="warn"] .dc-bar-copy strong { color: var(--dc-warn-text); }
.dc-bar[data-level="fail"] .dc-bar-copy strong { color: #ffc2c9; }
.dc-bar-cta {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--dc-cyan), var(--dc-cyan-2));
  color: #03101a;
  font-size: 0.8rem;
  font-weight: 800;
}

/* ---------------- Explainer extras ---------------- */
.page-demerit-calc .row-article-content .dc-points-grid .row-code { min-width: 46px; padding: 0 8px; }
.page-demerit-calc .row-article-content .dc-list li { margin-bottom: 8px; }
/* The shell's "ol { padding-left: 1.2rem }" outranks its own .row-step-list reset, so the
   step cards sat 19 px in from every other card. The number badge sits inside each card. */
.page-demerit-calc .row-article-content .row-step-list { padding-left: 0; }

.dc-print { display: none; }

/* ---------------- Hover (real pointers only) ----------------
   On touch screens :hover sticks after a tap, so a cell tapped on and off again kept a
   cyan border and X and looked marked. Hover styles apply only to a fine pointer that
   really hovers (a mouse or trackpad), never to a finger or a stylus. */
@media (hover: hover) and (pointer: fine) {
  .dc-chip:not(:disabled):not([aria-pressed="true"]):hover { border-color: rgba(0, 212, 255, 0.5); color: #fff; }
  .dc-tab:not(.is-active):hover { border-color: rgba(0, 212, 255, 0.4); color: #fff; }
  .dc-row-name:not([aria-expanded="true"]):hover .dc-info { border-color: var(--dc-cyan); color: var(--dc-cyan); }
  .dc-box:not(.is-on):hover { border-color: rgba(0, 212, 255, 0.6); }
  .dc-step:not(:disabled):hover { border-color: rgba(0, 212, 255, 0.55); color: #fff; }
  .dc-step--plus:not(:disabled):hover {
    border-color: transparent;
    background: linear-gradient(135deg, var(--dc-cyan), var(--dc-cyan-2));
    color: #03101a;
  }
  .dc-row.is-marked .dc-step--plus:not(:disabled):hover { filter: brightness(1.08); }
  .dc-vh-cell:not(.is-on):hover { border-color: rgba(0, 212, 255, 0.55); color: rgba(0, 212, 255, 0.45); }
  .dc-next-btn:hover { border-color: rgba(0, 212, 255, 0.55); color: #fff; }
  .dc-switch:not(.is-on):hover { border-color: rgba(255, 77, 97, 0.45); }
  .dc-bd-btn:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
  .dc-btn:not(:disabled):hover { border-color: rgba(0, 212, 255, 0.55); color: #fff; }
  .dc-btn--primary:not(:disabled):hover { filter: brightness(1.08); color: #03101a; }
}

/* ---------------- Header offsets ----------------
   The fixed site header is about 62 px tall above 1050 px and about 103 px (two rows) at
   1050 px and below. scroll-padding-top keeps anchor jumps, scrollIntoView() and keyboard
   focus (Tab and Shift+Tab) clear of it; the small scroll-margin replaces the site-wide
   [id] / section margins (90 or 118 px) so the two don't add up on this page. */
html { scroll-padding-top: 70px; }
.page-demerit-calc [id],
.page-demerit-calc section,
.dc-app-wrap,
.dc-score,
.dc-instant { scroll-margin-top: 14px; }
@media (max-width: 1050px) {
  html { scroll-padding-top: 112px; }
}
@container dcapp (min-width: 860px) {
  @media (max-width: 1050px) {
    .dc-score { top: 114px; }
    .dc-score-card { max-height: calc(100vh - 130px); }
  }
}

/* While the phone result bar is showing, keep focused controls scrolled clear of it
   (WCAG 2.4.11). The class is the fallback for browsers without :has(). */
html:has(.dc-bar.is-visible),
html.dc-bar-on { scroll-padding-bottom: 104px; }

/* Long lines end without a one-word orphan. */
.page-demerit-calc .row-cta-band h2 { text-wrap: balance; }
.dc-reasons li,
.dc-result-text,
.dc-preset-note span,
.dc-dek,
.dc-disclaimer p,
.dc-work-head p,
.dc-panel-note,
.dc-panel-alert span,
.dc-row-tip,
.dc-row-flag,
.dc-instant-head p,
.dc-switch-copy span,
.dc-score-note { text-wrap: pretty; }

/* ---------------- Narrow screens ---------------- */
@container dcapp (max-width: 859px) {
  /* Phone score card: section rows jump to their tab, so give them full tap height,
     and let the bar column grow instead of leaving a gap after each name. */
  .dc-bd-btn { min-height: 44px; grid-template-columns: minmax(0, 1fr) minmax(64px, 36%) 18px 34px; }
  .dc-chip { min-height: 44px; }
}
/* Tablets (score card below the tool, 600-859 px wide): ring and verdict on the left, the
   section breakdown, result and buttons on the right, instead of one long stretched column. */
@container dcapp (min-width: 600px) and (max-width: 859px) {
  .dc-score-card {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 30px;
    align-items: center;
    padding: 22px 24px 18px;
  }
  .dc-score-main,
  .dc-score-side { display: block; min-width: 0; }
  .dc-score-side { padding-left: 30px; border-left: 1px solid var(--dc-line-soft); }
  .dc-score-actions { margin-bottom: 0; }
  .dc-score-note { grid-column: 1 / -1; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dc-line-soft); }
  .dc-bd-btn { grid-template-columns: minmax(0, 1fr) minmax(64px, 42%) 18px 34px; }
}
@container dcwork (max-width: 599px) {
  .dc-row-controls { padding-left: 43px; }
  .dc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Last mile, 2026-10-23: row names that open the explainer get the 44 px tap height the
     other controls have, and the three example chips line up with the 2 x 2 section tabs
     below instead of wrapping 2 + 1 with the last one at half width. */
  .dc-row-name { min-height: 44px; }
  .dc-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .dc-presets-label { grid-column: 1 / -1; }
  .dc-presets .dc-chip { justify-content: center; }
  .dc-presets .dc-chip[data-dc-preset="habit"] { grid-column: 1 / -1; }
}
@container dcwork (max-width: 480px) {
  .dc-row-controls { padding-left: 0; gap: 8px; }
  .dc-row-tip,
  .dc-row-flag { margin-left: 0; }
  .dc-box { width: 30px; height: 30px; }
  .dc-boxes { gap: 5px; }
  .dc-panel-head { flex-direction: column; gap: 8px; }
  .dc-panel-total { grid-template-columns: auto auto 1fr; align-items: baseline; justify-items: start; gap: 8px; width: 100%; text-align: left; }
  .dc-panel-total .dc-text-btn { justify-self: end; margin: 0; min-height: 40px; padding: 10px 0 10px 12px; }
  .dc-presets-label { flex-basis: 100%; margin: 0 0 2px; }
  .dc-vh-col { font-size: 0.64rem; letter-spacing: 0.02em; }
  .dc-vh-head,
  .dc-vh-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .dc-vh-row { padding: 8px 9px 9px; row-gap: 8px; }
  .dc-vh-head { padding: 0 9px; }
  .dc-vh-name { grid-column: 1 / -1; }
  .dc-vh-col-long { display: none; }
  .dc-vh-col-short { display: inline; }
  .dc-vh-corner { display: none; }
  .dc-vh-cell { height: 44px; border-radius: 11px; }
  .dc-vh-tip { margin-left: 4px; }
}
/* 360 px phones (work area about 314 px): five 30 px boxes plus the stepper ran past the
   row's right edge, so the boxes get narrower before anything overflows. */
@container dcwork (max-width: 340px) {
  .dc-row-controls { gap: 6px; }
  .dc-box { width: 26px; height: 30px; border-radius: 8px; }
  .dc-boxes { gap: 4px; }
  .dc-sum { min-width: 32px; font-size: 0.9rem; }
}
/* 320 px phones. */
@container dcwork (max-width: 300px) {
  .dc-box { width: 22px; height: 28px; border-radius: 7px; }
  .dc-boxes { gap: 3px; }
  .dc-sum { min-width: 28px; }
  .dc-stepper { gap: 4px; }
  .dc-step { width: 40px; height: 40px; border-radius: 11px; }
}
/* Touch screens of any width: "Clear section" gets the same 44 px tap height as the other
   controls. Only the vertical padding changes, so the phone layout keeps its left padding. */
@media (pointer: coarse) {
  .dc-panel-total .dc-text-btn { min-height: 44px; padding-top: 12px; padding-bottom: 12px; margin-top: 0; }
}

/* Two-column hero on narrower desktops (sidebar hidden, art column about 330-390 px):
   a wider sheet and a slimmer box column so "Signal - none/timing/cancel" fits on one line. */
@media (min-width: 861px) and (max-width: 1180px) {
  .dc-art-sheet { left: 0; width: 94%; }
  .dc-art-head,
  .dc-art-row { grid-template-columns: minmax(0, 1fr) 24px 100px; font-size: 0.72rem; }
}
/* From 1181px the left rail takes width and the art column drops to about 317-399px until
   about 1400px: the sheet uses the full column and a slimmer box column, so the longest art
   label still fits on one line. */
@media (min-width: 1181px) and (max-width: 1399px) {
  .dc-art-sheet { left: 0; width: 100%; }
  .dc-art-head,
  .dc-art-row { grid-template-columns: minmax(0, 1fr) 20px 92px; gap: 4px; padding: 0 4px; font-size: 0.68rem; }
}
/* Just past 1180px the rail also narrows the copy column, and the cyan line would wrap into a
   third line ("Demerit" / "Calculator"). */
@media (min-width: 1181px) and (max-width: 1219px) {
  .dc-hero h1 { font-size: 2.6rem; }
}
/* Phone and tablet hero: title, dek, then the sheet art as the visual (a flatter, smaller copy
   of the desktop art with the gauge on its corner), then the facts as a short list.
   .dc-hero-copy steps aside (display: contents) so the art can sit between dek and chips. */
@media (max-width: 860px) {
  .dc-hero { grid-template-columns: 1fr; gap: 0; align-items: start; }
  .dc-hero-copy { display: contents; }
  .dc-hero-copy > * { position: relative; z-index: 1; }
  .dc-kicker { order: 1; justify-self: start; }
  .dc-hero h1 { order: 2; }
  .dc-dek { order: 3; }
  .dc-art { order: 4; }
  .dc-chips { order: 5; }
  .dc-art {
    display: block;
    width: min(100%, 440px);
    min-height: 0;
    margin: 2px 0 20px;
    padding-bottom: 50px;
    perspective: none;
  }
  .dc-art-sheet {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 8px);
    margin-left: 4px;
    transform: rotate(-2deg);
    transform-origin: 50% 50%;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  }
  .dc-art-gauge { right: -2px; bottom: 0; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 16px; }
  .dc-art-ring { width: 50px; height: 50px; }
  .dc-art-ring b { font-size: 0.98rem; }
}
/* Tablets and landscape phones: the art and the facts share a row under the dek. */
@media (min-width: 700px) and (max-width: 860px) {
  .dc-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); column-gap: 30px; }
  .dc-kicker,
  .dc-hero h1,
  .dc-dek { grid-column: 1 / -1; }
  .dc-art { grid-column: 1; width: 100%; margin-bottom: 0; }
  .dc-chips { grid-column: 2; align-self: center; display: grid; justify-items: start; gap: 9px; margin-bottom: 14px; }
  /* Lift the gauge so it covers the whole F box of the last art row (Rolling stop). */
  .dc-art-gauge { bottom: 10px; }
}
/* Phones: the three facts become a quiet list instead of three stacked pills. */
@media (max-width: 560px) {
  .dc-chips {
    display: grid;
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid var(--dc-line-soft);
  }
  .dc-chips li {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    gap: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.8);
  }
}
@media (max-width: 480px) {
  .dc-hero { padding: 20px 16px 18px; }
  .dc-hero h1 { font-size: clamp(1.75rem, 8.4vw, 2.2rem); }
  .dc-dek { font-size: 0.98rem; margin-bottom: 16px; }
  .dc-art-sheet { padding: 10px 10px 8px; }
  .dc-art-top { margin-bottom: 6px; }
  .dc-art-top span { font-size: 0.58rem; }
  .dc-art-row {
    grid-template-columns: minmax(0, 1fr) 20px 92px;
    gap: 4px;
    min-height: 23px;
    padding: 0 4px;
    font-size: 0.68rem;
  }
  .dc-art-boxes i { font-size: 0.6rem; }
  .dc-art-boxes i.on::after { width: 10px; height: 2.2px; }
  .dc-art-gauge { padding: 7px 12px 7px 7px; }
  .dc-art-ring { width: 46px; height: 46px; }
  .dc-art-gauge-copy small,
  .dc-art-gauge-copy span { font-size: 0.68rem; }
  .dc-art-gauge-copy strong { font-size: 0.82rem; }
  .dc-disclaimer { padding: 14px; gap: 10px; }
  .dc-disclaimer p { font-size: 0.88rem; }
  .dc-work { padding: 14px 12px; border-radius: 18px; }
  .dc-row { padding: 9px 9px 10px; }
  .dc-tab { min-height: 50px; padding: 7px 10px 7px 12px; font-size: 0.86rem; }
  .dc-score-card { padding: 18px 14px 16px; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .dc-ring-fill,
  .dc-bd-bar i,
  .dc-bar,
  .dc-box,
  .dc-switch-ui::after,
  .dc-row { transition: none !important; }
  .dc-row.dc-flash,
  .dc-row.dc-flash .dc-box--f.is-on { animation: none !important; }
}

/* ---------------- Print: the result report only ---------------- */
@media print {
  @page { margin: 16mm; }
  html, body { background: #fff !important; color: #111 !important; }
  body.page-demerit-calc { padding: 0 !important; margin: 0 !important; }
  body.page-demerit-calc * { box-shadow: none !important; text-shadow: none !important; }
  body.page-demerit-calc > *:not(main),
  body.page-demerit-calc .bh-sidebar,
  body.page-demerit-calc .dc-hero,
  body.page-demerit-calc .dc-disclaimer,
  body.page-demerit-calc .dc-app-wrap,
  body.page-demerit-calc .row-article-shell,
  body.page-demerit-calc .dc-bar,
  body.page-demerit-calc #road-bg-container { display: none !important; }
  body.page-demerit-calc main,
  body.page-demerit-calc .bh-wrap,
  body.page-demerit-calc .bh-grid,
  body.page-demerit-calc .bh-main-col { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; background: none !important; }
  /* The header offsets in blog-hub.css and mobile-header.css (96 / 112 px) outrank the reset
     above, which left a blank band at the top of the printed page. */
  body.page-demerit-calc .site-header ~ main,
  body.page-demerit-calc .site-header.hub-global-header ~ main { padding-top: 0 !important; }
  .dc-print { display: block !important; color: #111; font-family: 'Inter', Arial, sans-serif; font-size: 11pt; line-height: 1.45; }
  .dc-print h2 { margin: 2mm 0 2mm; color: #111; font-size: 18pt; }
  .dc-print h3 { margin: 6mm 0 2mm; color: #111; font-size: 12pt; }
  .dc-print p { color: #222; margin: 0 0 2mm; }
  .dc-print li { color: #222; }
  .dc-print-kicker { font-size: 9pt; color: #555 !important; }
  .dc-print-date { font-size: 9.5pt; color: #444 !important; }
  .dc-print-summary { margin: 4mm 0; padding: 4mm 5mm; border: 1.5pt solid #111; border-radius: 3mm; }
  .dc-print-total { font-size: 22pt; font-weight: 800; color: #111 !important; margin: 0 !important; }
  .dc-print-verdict { font-size: 13pt; font-weight: 700; color: #111 !important; }
  .dc-print-table { width: 100%; margin: 0 0 4mm; border-collapse: collapse; font-size: 10pt; }
  .dc-print-table th,
  .dc-print-table td { border: 0.75pt solid #999; padding: 1.6mm 2.2mm; text-align: left; color: #111; }
  .dc-print-table th { background: #eee; }
  .dc-print-note { margin-top: 6mm !important; font-size: 9pt; color: #444 !important; }
}