/* Guide-specific styles. Everything in rem so the shell's 125% root — and the
   reader's own browser setting — still decide the actual size. No px sizes on
   anything that carries a sentence. */

/* ── A line to say out loud ──────────────────────────────────────────────
   The core artifact of this guide: verbatim script. It has to be findable at
   a glance while standing at a counter, so it gets a left bar and a tinted
   surface rather than italics. --blue-text is the token that belongs to
   --blue-bg; pairing it with anything else is untested contrast. */
.say {
  background: var(--blue-bg);
  color: var(--blue-text);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  font-weight: 500;
}

.say--lg { font-size: 1.1rem; }

/* ── The verify beat under each step ─────────────────────────────────── */
.verify {
  border-top: 1px dashed var(--grey-200);
  padding-top: 0.6rem;
  margin-top: 0.9rem;
  color: var(--grey-700);
}

/* ── Objection → answer ───────────────────────────────────────────────── */
.obj {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md, 10px);
  padding: 1rem 1.15rem;
  margin: 0.9rem 0;
  background: var(--surface);
}

.obj-q {
  font-weight: 500;
  color: var(--grey-900);
  margin: 0 0 0.5rem;
}

.obj-q::before {
  content: "Er sagt";
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-700);
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.obj-a {
  margin: 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--accent);
}

.obj-a::before {
  content: "Du";
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.obj .caption { margin-top: 0.6rem; }

/* ── Tick-off checklist ───────────────────────────────────────────────── */
.checklist { list-style: none; padding: 0; margin: 1rem 0; }

.checklist li {
  border-bottom: 1px solid var(--grey-200);
  padding: 0.7rem 0;
}

.checklist li:last-child { border-bottom: none; }

.checklist label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
}

/* 1.4rem ≈ 28px at the shell's root — a real touch target, not a hairline. */
.checklist input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  accent-color: var(--accent);
}

.checklist input[type="checkbox"]:checked + strong,
.checklist input[type="checkbox"]:checked ~ * { opacity: 0.55; }

/* ── Price line in a tariff card ──────────────────────────────────────── */
.price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--grey-900);
  margin: 0.2rem 0 0.8rem;
  line-height: 1.3;
}

.price .muted { font-size: 0.85rem; font-weight: 400; }

/* A criterion this option fails. The ✗ carries the meaning for anyone who
   cannot see the colour. */
.fail { color: var(--grey-700); }
.fail::before { content: "✗ "; color: var(--text-warn, #b3261e); font-weight: 700; }

/* ── Self-check ───────────────────────────────────────────────────────── */
.selfcheck {
  background: var(--surface-alt);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md, 10px);
  padding: 0.9rem 1.15rem;
  margin: 1.5rem 0;
}

.selfcheck > summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--grey-900);
}

.selfcheck > p { margin-bottom: 0; }

/* ── Cost breakdown table ─────────────────────────────────────────────── */
.content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }

.content th,
.content td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--grey-200);
  vertical-align: top;
}

.content th {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-700);
}

.content tr.total td {
  border-top: 2px solid var(--grey-900);
  border-bottom: none;
  font-weight: 500;
}

/* ── Mobile ───────────────────────────────────────────────────────────────
   The shell has no table-to-card pass, so this guide brings its own: the
   header text is copied onto each cell as data-label by the snippet at the
   foot of index.html, then the header row is hidden and every row becomes a
   card. Without this a 4-column table is a horizontal scroller on a phone,
   which is the one device this guide is actually read on. */
@media (max-width: 720px) {
  .content table { border: 0; }
  .content thead { display: none; }

  .content tbody tr {
    display: block;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-md, 10px);
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.8rem;
  }

  .content tbody td {
    display: block;
    border-bottom: none;
    padding: 0.35rem 0;
  }

  .content td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--grey-700);
    font-weight: 500;
  }

  .content tr.total td { border-top: none; }

  .say { padding: 0.65rem 0.85rem; }
  .say--lg { font-size: 1rem; }
}

/* The shell's .def-grid is a fixed 190px label column with no mobile rule of
   its own. At 390px that leaves the value column 182px, which is enough only
   until one long word appears. Stack it instead of betting on the content. */
@media (max-width: 600px) {
  .content .def-grid { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .content .def-grid .def-label { margin-top: 0.7rem; color: var(--grey-700); }
  .content .def-grid .def-label:first-child { margin-top: 0; }
}