/* ============================================================================
   KTM Voyage CRM — the handleiding (#/help) and the install page (#/pwa) [UPG]
   Owned by public/js/pages/help.js (.hlp-*) and public/js/pages/pwa.js (.pwx-*).
   Nothing else in the app emits either prefix, so the whole sheet is scoped by
   its class names alone.

   ONE SHEET FOR TWO SCREENS, ON PURPOSE. /help and /pwa are the app's only two
   documentation screens: no data, no API call, nothing that can fail. They share
   the same building blocks (a numbered step, a "why" line, an icon in front of a
   sentence) and it would be a lie to give the same block two different looks in
   two sheets. It is also the pair the reader walks through in one go — /help
   sends them to /pwa and /pwa links back.

   RULES THIS SHEET FOLLOWS (same as every other module sheet):
   - Not one hard-coded colour. Every value comes from css/tokens.css, which is
     what makes light and dark correct for free.
   - Nothing here re-draws a component. Cards, buttons, .kbd, .scroll-x and the
     empty states come from base.css and components.css; this sheet adds the
     LAYOUT of a manual plus the handful of pieces that have no component yet.
   - Breakpoints match the rest of the app: 1024px (the topic nav stops being a
     column beside the text), 768px and 560px (phone).
   - The manual is READ ON A PHONE and PRINTED ON PAPER. Both are first-class
     here, not an afterthought — see the @media print block at the bottom.
   ========================================================================== */

/* ============================================================================
   1. #/help — the handleiding
   ========================================================================== */

.hlp-page {
  /* A manual is prose. Beyond roughly 78 characters a line stops being
     comfortable to read, and the nav column + this cap together land the body
     text right in that band on a wide monitor. */
  max-width: 1180px;
}

.hlp-head-txt {
  min-width: 0;
}

.hlp-head-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ---------- the support card --------------------------------------------- */

/* Kept at the very top, above the search box: somebody who opens the manual
   because something is broken should not have to find the address first. */
.hlp-support {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background:
    linear-gradient(180deg, var(--surface-accent), transparent 62%),
    var(--surface);
}

.hlp-support .hs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}

.hlp-sup-txt {
  min-width: 0;
}

.hlp-sup-txt b {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text-head);
}

.hlp-sup-txt small {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.hlp-sup-add,
.hlp-sup-hours {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--sp-3) 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.hlp-sup-hours {
  margin-top: 6px;
  font-weight: 700;
  color: var(--accent-text);
}

.hlp-sup-ic {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 2px;
  color: var(--text-faint);
}

.hlp-sup-hours .hlp-sup-ic {
  color: var(--accent);
}

.hlp-sup-acts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
}

/* The address in plain text as well as behind the button: a mailto: link cannot
   be pasted into a WhatsApp message, and this is the one address in the app the
   client is ever asked to remember. */
.hlp-sup-mail {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  user-select: all;
}

/* ---------- the search box ----------------------------------------------- */

.hlp-searchwrap {
  margin-bottom: var(--sp-5);
}

.hlp-search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: min(560px, 100%);
  padding: 2px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.hlp-search:focus-within {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--ring);
}

.hlp-search-ic {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-faint);
}

.hlp-search:focus-within .hlp-search-ic {
  color: var(--accent);
}

/* 16px, not 14: below that iOS Safari zooms the whole page on focus and the
   reader lands on a manual that no longer fits the screen. */
.hlp-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 0;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
}

.hlp-search input::placeholder {
  color: var(--text-faint);
}

.hlp-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.hlp-search-x {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-muted);
  cursor: pointer;
}

.hlp-search-x:hover {
  background: var(--bad);
  color: var(--bad-ink);
}

.hlp-search-note {
  margin: 7px 0 0;
  font-size: 12px;
  color: var(--text-faint);
}

/* ---------- layout: topic nav beside the text ---------------------------- */

.hlp-wrap {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

/* top:var(--sp-4) is copied from .setnav in settings.css on purpose, not guessed.
   The topbar is sticky at top:0 and base.css gives it no height token, so any
   column that sticks inside .content slides its first few pixels underneath it.
   Both nav columns in this app therefore behave identically; the day base.css
   publishes a topbar height, both get corrected in the same commit. */
.hlp-nav {
  position: sticky;
  top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  /* 27 topics do not fit next to a short topic on a laptop screen, so the column
     scrolls inside itself and the page never grows a second scrollbar. */
  max-height: calc(100vh - var(--sp-7));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.hlp-nav-head {
  padding: 4px 10px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hlp-navgrp + .hlp-navgrp {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.hlp-navlbl {
  padding: 2px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hlp-navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

.hlp-navitem:hover {
  background: var(--hover);
  color: var(--text);
}

.hlp-navitem:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.hlp-navitem.is-on {
  background: var(--surface-accent);
  color: var(--accent-text-strong);
  font-weight: 700;
}

/* While a search is running the nav keeps its full list but fades everything the
   query did not touch. Removing the items instead would make the column jump on
   every keystroke, and the reader would lose the place they were looking at. */
.hlp-navitem.is-off {
  opacity: .32;
}

.hn-ic {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-faint);
}

.hlp-navitem.is-on .hn-ic {
  color: var(--accent);
}

.hn-tx {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hlp-nav-note {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) 10px 2px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-faint);
}

.hlp-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ---------- search results ----------------------------------------------- */

.hlp-results {
  min-width: 0;
  padding: var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.hlp-res-count {
  margin-bottom: var(--sp-4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hlp-res-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.hlp-res + .hlp-res {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.hlp-res-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  margin: -7px -9px 0;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-head);
}

.hlp-res-hit:hover {
  background: var(--surface-accent);
}

.hlp-res-hit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.hlp-res-ic {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--accent);
}

.hlp-res-t {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.hlp-res-go {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-faint);
}

.hlp-res-hit:hover .hlp-res-go {
  color: var(--accent);
}

.hlp-res-lines {
  list-style: none;
  margin: 7px 0 0;
  padding: 0 0 0 26px;
}

.hlp-res-lines li {
  position: relative;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.hlp-res-lines li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
}

.hlp-res-more {
  font-style: italic;
  color: var(--text-faint);
}

.hlp-res-more::before {
  background: transparent !important;
}

/* The highlight has to survive dark mode: the browser default is black text on
   bright yellow, which on a dark surface reads as a hole punched in the page. */
.hlp-page mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--text-head);
  font-weight: 700;
}

/* Nothing found. The way out is the support address, not a shrug. */
.hlp-nores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}

.hlp-nores-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.hlp-nores b {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  color: var(--text-head);
}

/* ---------- one topic ----------------------------------------------------- */

.hlp-topic {
  min-width: 0;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.hlp-tophead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.hlp-tophead .ht-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
}

.ht-txt {
  min-width: 0;
}

.ht-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hlp-topic h2 {
  font-size: 23px;
  overflow-wrap: anywhere;
}

.ht-intro {
  margin: 7px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 68ch;
}

/* ---------- numbered steps ------------------------------------------------ */

/* The reading measure is capped on the WRAPPER, not on the list, so the
   "Step by step" label sits in the same column as the steps it announces. */
.hlp-steps-wrap {
  max-width: 76ch;
}

.hlp-steps-lbl {
  margin-bottom: var(--sp-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* A counter instead of the browser's own list marker: the marker sits outside
   the text block and wraps badly at 390px, and it cannot be given the brand
   colour. This puts a real gold disc in front of every step. */
.hlp-steps {
  list-style: none;
  counter-reset: hlpstep;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.hlp-steps > li {
  counter-increment: hlpstep;
  position: relative;
  padding-left: 40px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text);
  overflow-wrap: anywhere;
}

.hlp-steps > li::before {
  content: counter(hlpstep);
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* The thread that ties the steps together, exactly like components.css .trail. */
.hlp-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 31px;
  bottom: calc(var(--sp-4) * -1);
  width: 2px;
  border-radius: 1px;
  background: var(--border);
}

/* ---------- the keyboard table -------------------------------------------- */

.hlp-kbd {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* min-width:0 is load-bearing, not decoration. .hlp-kbd is a flex column, and a
   flex item defaults to min-width:auto — without this the wide shortcut table
   inside .scroll-x refuses to shrink and pushes the whole page sideways at
   390px, which is the one thing this layout may never do. */
.hlp-kbd-grp {
  min-width: 0;
}

.hlp-kbd-glbl {
  margin-bottom: var(--sp-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hlp-kbd .scroll-x {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  --sx-bg: var(--surface);
}

.hlp-kbd-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.hlp-kbd-tbl th {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-olive);
  white-space: nowrap;
}

.hlp-kbd-tbl td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.hlp-kbd-tbl tbody tr:last-child td {
  border-bottom: none;
}

.hlp-kbd-tbl tbody tr:nth-child(even) {
  background: var(--surface-2);
}

.hlp-kbd-k {
  white-space: nowrap;
  width: 1%;
}

.hlp-kbd-plus {
  margin: 0 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
}

.hlp-kbd-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------- "what is new" ------------------------------------------------- */

.hlp-newlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: var(--sp-4);
}

.hlp-new {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.hlp-new-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.hlp-new b {
  display: block;
  font-size: 14px;
  color: var(--text-head);
  overflow-wrap: anywhere;
}

.hlp-new p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------- call to action, "why", related, pager ------------------------- */

.hlp-cta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}

/* The single most important paragraph of every topic: not WHAT the screen does
   but WHY it behaves that way. The gold wash is what makes a reader stop on it. */
.hlp-why {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-accent);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--accent-text-strong);
  max-width: 76ch;
}

.hlp-why b {
  color: var(--accent-text);
}

.hlp-why-ic {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 2px;
  color: var(--accent);
}

.hlp-rel {
  margin-top: var(--sp-5);
}

.hlp-rel-lbl {
  margin-bottom: var(--sp-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hlp-rel-list {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.hlp-relchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.hlp-relchip:hover {
  border-color: var(--accent);
  background: var(--surface-accent);
  color: var(--accent-text-strong);
}

.hlp-relchip svg {
  color: var(--text-faint);
}

.hlp-relchip:hover svg {
  color: var(--accent);
}

/* Previous / next, so the manual can also simply be read front to back. */
.hlp-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.hlp-pg {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.hlp-pg:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--surface-accent);
  box-shadow: var(--shadow-1);
}

/* The two cards point away from each other, so the pair reads as a direction
   even when only one of them exists (the JS emits an empty span for the other). */
.hlp-pg-prev {
  justify-content: flex-start;
  text-align: left;
}

.hlp-pg-next {
  justify-content: flex-end;
  text-align: right;
}

.hlp-pg-ic {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-faint);
}

.hlp-pg:hover .hlp-pg-ic {
  color: var(--accent);
}

.hlp-pg-tx {
  min-width: 0;
}

.hlp-pg-tx small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hlp-pg-tx b {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hlp-printnote {
  margin-top: var(--sp-5);
}

/* ============================================================================
   2. #/pwa — installing the CRM as an app
   ========================================================================== */

/* Read once, on a phone, standing up. Narrower than a working screen on purpose:
   one column of instructions and nothing to the side of it. */
.pwx-page {
  max-width: 780px;
}

/* Tighter than a normal page head: the lead sentence follows straight after it
   and belongs to it, so the standard 20px would read as a gap between two
   unrelated blocks. */
.pwx-head {
  margin-bottom: var(--sp-4);
}

.pwx-lead-line {
  max-width: 62ch;
  margin: 0 0 var(--sp-5);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- the card for THIS device -------------------------------------- */

.pwx-lead {
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background:
    linear-gradient(180deg, var(--surface-accent), transparent 45%),
    var(--surface);
}

.pwx-lead-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--accent-line);
}

.pwx-lead-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--accent-soft);
  color: var(--accent);
}

.pwx-lead-txt {
  min-width: 0;
}

.pwx-lead-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.pwx-lead h2 {
  font-size: 22px;
  overflow-wrap: anywhere;
}

.pwx-lead-sub {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* ---------- the numbered steps -------------------------------------------- */

.pwx-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.pwx-step {
  position: relative;
  display: grid;
  grid-template-columns: 26px 26px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
}

.pwx-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* The drawn icon repeats the step in a picture: the reader recognises the share
   button or the three dots before they have read the sentence. Never a
   screenshot — a screenshot is one browser version old the week after. */
.pwx-step-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
}

.pwx-step-tx {
  min-width: 0;
  padding-top: 3px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: anywhere;
}

.pwx-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 30px;
  bottom: calc(var(--sp-4) * -1);
  width: 2px;
  border-radius: 1px;
  background: var(--border);
}

/* ---------- the install button, or the honest sentence instead ------------ */

.pwx-cta {
  margin-top: var(--sp-6);
}

.pwx-install {
  width: 100%;
}

.pwx-cta-hint {
  margin: var(--sp-3) 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: center;
}

/* No button available: say so in one line with an info icon, left-aligned, so it
   reads as an explanation and not as a disabled control. */
.pwx-cta-manual {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  text-align: left;
}

.pwx-hint-ic {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 2px;
  color: var(--info);
}

/* ---------- already installed --------------------------------------------- */

.pwx-done {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ok) 10%, transparent), transparent 55%),
    var(--surface);
}

.pwx-done-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
}

.pwx-done-txt {
  min-width: 0;
}

.pwx-done h2 {
  font-size: 22px;
  overflow-wrap: anywhere;
}

.pwx-done-txt p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.pwx-done-where {
  font-weight: 700;
  color: var(--text) !important;
}

/* ---------- section headings shared by the lower blocks ------------------- */

.pwx-h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  color: var(--text-head);
}

.pwx-h2-ic {
  display: inline-flex;
  color: var(--accent);
}

.pwx-h2-sub {
  margin: 6px 0 var(--sp-4);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.pwx-others,
.pwx-benefits,
.pwx-trouble {
  margin-bottom: var(--sp-6);
}

/* .pwx-others puts its own explanatory line under the heading, so only the two
   blocks WITHOUT that line need the gap here. */
.pwx-benefits .pwx-h2,
.pwx-trouble .pwx-h2 {
  margin-bottom: var(--sp-4);
}

/* ---------- the other two platforms, folded away -------------------------- */

.pwx-other {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.pwx-other + .pwx-other {
  margin-top: var(--sp-3);
}

.pwx-other > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.pwx-other > summary::-webkit-details-marker {
  display: none;
}

.pwx-other > summary:hover {
  background: var(--surface-2);
}

.pwx-other > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.pwx-other-ic {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-faint);
}

.pwx-other-t {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pwx-other-chev {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-faint);
  transition: transform .18s ease;
}

.pwx-other[open] > summary {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--accent-text-strong);
  background: var(--surface-accent);
}

.pwx-other[open] .pwx-other-ic,
.pwx-other[open] .pwx-other-chev {
  color: var(--accent);
}

.pwx-other[open] .pwx-other-chev {
  transform: rotate(180deg);
}

.pwx-other-body {
  padding: var(--sp-5) var(--sp-4);
}

/* ---------- what installing gives you ------------------------------------- */

.pwx-bgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--sp-4);
}

.pwx-ben {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.pwx-ben-ic {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Only the icon badge carries the tone. A fully coloured tile turns four honest
   promises into four warnings. */
.pwx-ben[data-tone="info"] .pwx-ben-ic {
  background: color-mix(in srgb, var(--info) 15%, transparent);
  color: var(--info);
}

.pwx-ben b {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
  color: var(--text-head);
  overflow-wrap: anywhere;
}

.pwx-ben p {
  grid-column: 2;
  grid-row: 2;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------- offline, said plainly ----------------------------------------- */

.pwx-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  border: 1px solid color-mix(in srgb, var(--info) 34%, var(--border));
  border-left: 3px solid var(--info);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--info) 8%, var(--surface));
}

.pwx-note-ic {
  display: inline-flex;
  margin-top: 1px;
  color: var(--info);
}

.pwx-note b {
  display: block;
  font-size: 14.5px;
  color: var(--text-head);
}

.pwx-note p {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- it does not work — now what? ---------------------------------- */

.pwx-trlist {
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.pwx-tr {
  padding: var(--sp-4) var(--sp-5);
}

.pwx-tr + .pwx-tr {
  border-top: 1px solid var(--border);
}

.pwx-tr dt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-head);
  overflow-wrap: anywhere;
}

.pwx-tr-ic {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-faint);
}

.pwx-tr dd {
  margin: 6px 0 0 25px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.pwx-undo {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.pwx-undo b {
  display: block;
  font-size: 14px;
  color: var(--text-head);
}

.pwx-undo p {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ============================================================================
   3. RESPONSIVE
   ========================================================================== */

/* ---------- <= 1024px: the topic nav stops being a column ----------------- */

@media (max-width: 1024px) {
  .hlp-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  /* A table of contents at the front of the booklet: the same items, wrapped as
     chips instead of stacked. A 27-row column above the text would push the
     first topic off the screen, and a nested scroll area on a phone is the
     thing everybody's thumb fights with. */
  .hlp-nav {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .hlp-navgrp {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .hlp-navlbl {
    flex: 1 0 100%;
    padding: 2px 2px 2px;
  }

  .hlp-navitem {
    min-height: 34px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12.5px;
  }

  .hlp-navitem.is-on {
    border-color: var(--accent);
  }

  .hn-tx {
    flex: 0 1 auto;
    white-space: normal;
  }
}

/* ---------- <= 768px: phone ----------------------------------------------- */

@media (max-width: 768px) {
  .hlp-support {
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--sp-4);
  }

  .hlp-support .hs-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  /* The actions drop to their own full-width row instead of a third column. */
  .hlp-sup-acts {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .hlp-sup-acts .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .hlp-sup-mail {
    flex: 1 0 100%;
    text-align: left;
  }

  .hlp-head-acts {
    width: 100%;
  }

  .hlp-head-acts .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .hlp-topic,
  .hlp-results {
    padding: var(--sp-4);
  }

  .hlp-tophead {
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
  }

  .hlp-tophead .ht-ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .hlp-topic h2 {
    font-size: 20px;
  }

  .ht-intro,
  .hlp-steps > li,
  .pwx-step-tx {
    font-size: 14px;
  }

  .hlp-newlist {
    grid-template-columns: minmax(0, 1fr);
  }

  .hlp-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .pwx-lead,
  .pwx-done {
    padding: var(--sp-4);
  }

  .pwx-lead-ic,
  .pwx-done-ic {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .pwx-lead h2,
  .pwx-done h2 {
    font-size: 20px;
  }

  .pwx-h2 {
    font-size: 17px;
  }

  .pwx-bgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pwx-tr,
  .pwx-undo,
  .pwx-note {
    padding: var(--sp-4);
  }
}

/* ---------- <= 560px: 390px has to be perfect ----------------------------- */

@media (max-width: 560px) {
  /* components.css drops every .kbd at this width, and it is right to: a key cap
     next to a menu item is decoration nobody can press on a phone. In the manual
     it is the opposite — the key IS the content of the first column, and hiding
     it would leave the reader a table of empty cells next to the explanations.
     Somebody reads this on a phone about the computer on their desk. */
  .hlp-kbd .kbd {
    display: inline-flex;
  }

  .hlp-support {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }

  .hlp-support .hs-icon {
    width: 38px;
    height: 38px;
  }

  .hlp-res-lines {
    padding-left: 18px;
  }

  .hlp-res-lines li::before {
    left: -12px;
  }

  .hlp-why {
    padding: var(--sp-3);
  }

  /* The number and the picture sit on one line above the sentence; three columns
     leave under 200px for the text and every step becomes six lines. */
  .pwx-step {
    grid-template-columns: 26px 26px;
  }

  .pwx-step-tx {
    grid-column: 1 / -1;
    padding-top: 2px;
  }

  .pwx-step:not(:last-child)::before {
    display: none;
  }

  .pwx-tr dd {
    margin-left: 0;
  }

  .hlp-tophead {
    grid-template-columns: minmax(0, 1fr);
  }

  .pwx-lead-head,
  .pwx-done {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- touch: 44px tap targets --------------------------------------- */

@media (pointer: coarse) {
  .hlp-navitem {
    min-height: 44px;
  }

  .hlp-relchip {
    min-height: 40px;
  }

  .hlp-search-x {
    width: 40px;
    height: 40px;
  }

  .hlp-pg {
    min-height: 56px;
  }

  .pwx-other > summary {
    min-height: 56px;
  }
}

/* ---------- reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .hlp-navitem,
  .hlp-relchip,
  .hlp-pg,
  .hlp-search,
  .pwx-other-chev {
    transition: none !important;
  }
}

/* ============================================================================
   4. PRINT — the whole handleiding on paper
   ============================================================================
   The office asked for a copy on the desk. On screen exactly one topic is
   visible; here every one of them comes back, in registry order, because the JS
   renders them all and only marks the others [hidden]. base.css sets
   [hidden]{display:none!important}, so undoing that needs both a higher
   specificity AND !important — hence the selector below.

   What is dropped: everything that only works with a cursor (the search box, the
   topic nav, the results panel, the previous/next pager, the "related" chips and
   every button). What is kept: the support card without its buttons, so the
   printed manual still carries the address and the 48-hour promise.
   ========================================================================== */

@media print {
  .hlp-topic[hidden] {
    display: block !important;
  }

  .hlp-searchwrap,
  .hlp-nav,
  .hlp-results,
  .hlp-pager,
  .hlp-rel,
  .hlp-cta,
  .hlp-head-acts,
  .hlp-sup-acts .btn,
  .hlp-printnote {
    display: none !important;
  }

  .hlp-page,
  .pwx-page {
    max-width: none;
  }

  .hlp-wrap {
    display: block;
  }

  .hlp-main {
    display: block;
  }

  /* A topic is one unit of thought: never split its heading from its first step,
     and never start a new topic three lines before the bottom of the page. */
  .hlp-topic {
    padding: 0 0 14mm;
    margin: 0 0 10mm;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    background: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .hlp-tophead {
    break-after: avoid;
    page-break-after: avoid;
  }

  .hlp-support {
    padding: 6mm;
    background: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* The address is the point of the block on paper, so it moves out of the
     button column and onto its own readable line. */
  .hlp-sup-acts {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .hlp-sup-mail {
    text-align: left;
    font-size: 13px;
    color: var(--text);
  }

  /* The scroll container is a screen affordance; on paper the table simply fits. */
  .hlp-kbd .scroll-x,
  .scroll-x {
    overflow: visible !important;
    background: none !important;
  }

  .hlp-kbd-tbl tbody tr,
  .hlp-new,
  .pwx-ben,
  .pwx-tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .hlp-why,
  .pwx-note,
  .pwx-undo {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* /pwa printed. The install button and the chevron go — there is nothing to
     click on paper. The two folded-away platforms are opened where the browser
     lets CSS do it: ::details-content is the only selector that reaches inside a
     closed <details>, and it is recent (Chrome 131+). Older engines simply print
     the section the reader had open, which is the one they needed anyway — so
     this is an improvement where it lands and never a broken page where it does
     not. Deliberately NOT solved with a beforeprint listener: this page exists to
     be read on a phone, and a print hook is machinery for a case that is rare. */
  .pwx-other {
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .pwx-other > summary {
    background: none;
  }

  .pwx-other::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .pwx-other-chev,
  .pwx-install,
  .pwx-cta {
    display: none !important;
  }
}