/* ============================================================================
   help.css — the Help Center: /help (hub), /help/{category},
   /help/{category}/{article} and /help/diagnostyka (wizard).
   Built from the kit (page-header + toolbar, section-header, card (+ --lift,
   --pad, --sheen, --raised), spotlight, chip, icon-tile, callout, notice,
   empty-state, facts, frame-corners, toc (Shared/Toc, panel and --sticky),
   video (Shared/VideoFacade), dialog
   (Shared/Modal), forms, cta-band, horizon; layout.css .page-top; prose.css
   for the article text); this file lays the pages out. Tokens only; media
   queries only the device ranges (tokens.css); hovers of cards and rows
   mouse only; motion without transform in Firefox.

   Contents
     0. Page top        .help-top (article title size)
     1. Article cards   (kit: components.css 42)
     2. Hub             .help-wizard-entry, .help-cats, .help-cat
     3. Category        .help-others
     4. Article         .help-doc-layout, .help-sheet, .help-step, .help-aside,
                        .help-cta, .help-figure, .help-more
     5. Zoom dialog     .help-zoom
     6. Wizard          .help-wizard, .help-option, .help-wizard__*
     7. Firefox
   ========================================================================== */


/* ── 0. Page top ─────────────────────────────────────────────────────────── */
/* .page-top.help-top: beats layout.css's two-column title size (watermark header).
   Article titles are questions and run long, so they step down like legal's. */
.page-top.help-top .page-header__title { max-width: 26ch; font-size: clamp(2rem, 4.2vw, 3.25rem); }


/* ── 1. Article cards: HelpPage/ArticleCard is styled in the kit
   (components.css 42 — the cards are also on /download). */


/* ── 2. Hub ──────────────────────────────────────────────────────────────── */
.help-wizard-entry { padding-bottom: 0; }

.help-cats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}
@media (min-width: 768px) {
  .help-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .help-cats { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }
}
.help-cat { gap: var(--space-4); }
.help-cat__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.help-cat__titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.help-cat__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.help-cat__title a { color: var(--text-strong); text-decoration: none; }
.help-cat__title a:hover { color: var(--accent-300); }
.help-cat__desc { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; }
.help-cat__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-subtle);
}
.help-cat__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-1);
  color: var(--text-1);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-decoration: none;
  border-bottom: 1px solid var(--line-subtle);
  transition: color var(--dur-fast) var(--ease-standard);
}
.help-cat__link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.help-cat__chev { flex-shrink: 0; color: var(--text-3); font-size: 0.75rem; transition: color var(--dur-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) {
  .help-cat__link:hover { color: var(--text-strong); }
  .help-cat__link:hover .help-cat__chev { color: var(--accent-text); }
}
.help-cat__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.help-cat__more:hover { color: var(--accent-300); }

.help-results .empty-state { margin-inline: auto; }


/* ── 3. Category ─────────────────────────────────────────────────────────── */
.help-others { margin-top: var(--space-12); }
.help-others__title { margin: 0 0 var(--space-4); }
.help-others__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ── 4. Article ──────────────────────────────────────────────────────────────
   The news post layout (news.css section 4/5): one column on phones and
   tablets (the sidebar follows the text); from 1024px the reading sheet on
   the left and the sidebar (≤ 20rem) on the right. The table of contents:
   below 1024px the kit sticky "Spis treści" toggle above the sheet
   (.help-toc--top), from 1024px a panel in the sidebar's sticky block
   (.help-toc--side) — each only in its own range. */
.help-body { padding-top: clamp(var(--space-8), 4vw, var(--space-12)); }
.help-doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .help-doc-layout {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    column-gap: clamp(var(--space-6), 2.5vw, var(--space-10));   /* columns stretch: the sticky block needs the full height */
  }
  .help-toc--top { display: none; }
}
@media (max-width: 1023px) {
  .help-toc--side { display: none; }
}

/* The sheet: from tablet up the text reads on its own surface, a soft
   violet light in the top corner. */
.help-sheet { position: relative; min-width: 0; }
@media (min-width: 768px) {
  .help-sheet {
    padding: clamp(var(--space-8), 3.5vw, var(--space-12));
    background-color: var(--surface-sheet);
    background-image: radial-gradient(60% 18rem at 0% 0%, var(--ambient-violet-soft, var(--accent-soft)), transparent 70%);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-xl);
  }
}
/* The article text: prose.css with a help-center reading rhythm on top —
   a calmer size, sections separated by space and a hairline, lists indented
   with room between items, steps (ordered lists) as numbered discs, blocks
   (tables, notes, media) set apart. Words break only when a single one is
   longer than the line (break-word, not anywhere: `anywhere` lets a table
   squeeze a column below its longest word and split "Wydajność"). The text
   fills the sheet: a 72ch measure left half of a wide sheet empty beside
   short steps and screenshots. */
.help-doc__content {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}
.help-doc__content > * + * { margin-top: 1em; }
/* As in the news post: the text a step quieter, so what is bright — the
   headings, bold UI names — reads at a glance. Italics keep the text's
   colour: they differ by style only, never brightness. */
.help-doc__content > :is(h2, h3, h4) { color: var(--text-strong); }

/* Sections: generous space above and the accent bar beside the heading
   (the news post's section mark); "## 1. …" steps carry their number as a
   kit icon tile instead (HelpContentRenderer), the text beside it. */
/* Every heading level carries the bar (### too), so a heading never reads
   as a bold line of text; it thins with the level. */
.help-doc__content > :is(h2, h3, h4) {
  position: relative;
  padding-left: 0.95rem;
}
.help-doc__content > h2 {
  font-size: clamp(1.3125rem, 2.2vw, 1.5rem);
  line-height: 1.3;
}
.help-doc__content > :is(h2:not(.help-step), h3, h4)::before {
  content: '';
  position: absolute;
  top: 0.18em;
  bottom: 0.18em;
  left: 0;
  width: 3px;
  background-color: var(--accent-500);
  border-radius: var(--radius-full);
}
.help-doc__content > h4 { padding-left: 0.85rem; }
.help-doc__content > h4::before { width: 2px; background-color: var(--accent-400); }
.help-doc__content > h2.help-step { padding-left: 0; }
.help-doc__content > * + h2 { margin-top: var(--space-12); }
.help-doc__content > h3 { font-size: 1.125rem; line-height: 1.35; }
.help-doc__content > h4 { font-size: 1rem; line-height: 1.4; }
.help-doc__content > * + h3 { margin-top: var(--space-8); }
.help-doc__content > * + h4 { margin-top: var(--space-6); }
.help-doc__content > :is(h2, h3, h4) + * { margin-top: var(--space-3); }

/* Lists: indented, a little air between items; bold leads stay bright. */
.help-doc__content :is(ul, ol) { padding-left: 1.5em; }
.help-doc__content > :is(p, h2, h3, h4) + :is(ul, ol) { margin-top: var(--space-3); }
.help-doc__content li { padding-left: 0.35em; }
.help-doc__content li + li { margin-top: 0.6em; }
.help-doc__content li > :is(ul, ol) { margin-top: 0.5em; }
.help-doc__content li > p { margin: 0; }
.help-doc__content li > p + p { margin-top: 0.5em; }
.help-doc__content ul > li::marker { color: var(--accent-400); font-size: 1.1em; }

/* Top-level lists, numbered or bulleted, share one geometry: they are the
   points of the section above, so they sit in from the heading — the marker
   gutter starts where the heading's text does (after the bar, the headings'
   0.95rem) — and their text starts in one column, so a bulleted list and a
   numbered one line up. Every further line of an item — wrapped or a
   continuation line of its own — starts under its text.
   Numbered: plain numerals ("1.") right-aligned in the gutter, so 9. and
   10. end in the same place. Bulleted: a small accent dot in the same spot. */
.help-doc__content > :is(ol, ul) {
  padding-left: 0.95rem;
  list-style: none;
}
.help-doc__content > ol { counter-reset: help-step; }
.help-doc__content > :is(ol, ul) > li {
  position: relative;
  padding-left: 2rem;
}
.help-doc__content > ol > li { counter-increment: help-step; }
.help-doc__content > :is(ol, ul) > li + li { margin-top: var(--space-2); }
.help-doc__content > ul > li::before {
  content: '';
  position: absolute;
  top: calc(0.875em - 0.1875rem);   /* centred on the first line (1.75em) */
  left: 0.875rem;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--accent-400);
  border-radius: 50%;
}
/* A blank line before an item in the text (li.md-gap): clearly more room. */
.help-doc__content li.md-gap { margin-top: var(--space-6); }
.help-doc__content > ol > li::before {
  content: counter(help-step) '.';
  position: absolute;
  top: 0;
  left: 0;
  width: 1.375rem;
  color: var(--text-2);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* A list resumed after a screenshot (<ol start="4">) gets its counter-reset
   inline from HelpContentRenderer::continueLists(). */

/* Blocks set apart from the running text. */
.help-doc__content > :is(.md-table-wrap, .admonition, blockquote, pre, .help-code) { margin-block: var(--space-6); }
.help-doc__content > :is(.md-table-wrap, .admonition, blockquote, pre, .help-code):first-child { margin-top: 0; }

/* Code blocks (```…```, usually a command to paste): the prose.css block in
   a frame with a "Kopiuj" button in its corner (help.js). Inside a step it
   sits between the step's lines. */
.help-code { position: relative; }
.help-code > pre { margin: 0; padding-right: 3.5rem; font-size: 0.875rem; line-height: 1.7; }
.help-doc__content li .help-code,
.help-doc__content li > pre { margin: 0.75em 0; }
.help-code__copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: var(--text-2);
}
.help-code__copy.is-copied { color: var(--success); }
.help-doc__content .admonition__body { font-size: 0.9375rem; }

/* Tables: cells wrap between words only (a column is never narrower than
   its longest word); the first column — the thing being described — bright. */
.help-doc__content .md-table { font-size: 0.875rem; line-height: 1.6; }
.help-doc__content .md-table :is(th, td) { padding: 0.8125rem 1rem; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.help-doc__content .md-table td:first-child { color: var(--text-strong); font-weight: 600; }
.help-doc__content > h2.help-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.help-step__text { min-width: 0; }
.help-step__num {
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.help-step__dot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sheet foot: the update stamp and the share buttons, after a hairline. */
.help-sheet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.help-sheet__stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.help-sheet__stamp svg { color: var(--text-3); }
.help-sheet__ver::before { content: '·'; margin-right: var(--space-2); }
.help-sheet__share { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Sidebar: kit cards with a muted eyebrow title; the table of contents and
   the help card stay in view from 1024px (a long contents list scrolls
   inside its card, so the block always fits the screen). */
.help-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
@media (max-width: 1023px) {
  .help-aside { max-width: 44rem; }
}
.help-aside__title { display: flex; margin: 0 0 var(--space-4); }
.help-aside__sticky {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .help-aside__sticky {
    position: sticky;
    top: calc(var(--head-h) + 1.5rem);
  }
  .help-toc--side .toc__panel {
    max-height: max(11rem, calc(100vh - var(--head-h) - 22rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.help-facts__link {
  color: var(--accent-text);
  text-decoration: none;
}
.help-facts__link:hover { color: var(--accent-300); text-decoration: underline; text-underline-offset: 3px; }
/* "Dotyczy": each system with its mark (the download page's icons). */
.help-platforms {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.help-platforms__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.help-platforms__item svg { flex-shrink: 0; color: var(--accent-text); font-size: 0.9375rem; }

/* "Nadal nie działa?": the raised kit card with a soft violet light (the
   news post's download card). */
.help-cta {
  gap: var(--space-2);
  background-image:
    radial-gradient(90% 80% at 0% 0%, var(--ambient-violet), transparent 70%),
    var(--sheen);
  border-color: var(--line-strong);
}
.help-cta__icon { margin-bottom: var(--space-2); }
.help-cta__title {
  margin: 0;
  color: var(--text-strong);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.help-cta__text {
  margin: 0 0 var(--space-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.help-cta__actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* Screenshots (Help/MediaImage) and videos (Help/MediaVideo) in the text:
   never wider than the file, so a small dialog keeps its size. A
   screenshot sits in the kit capture frame (.frame-corners, the OCR box)
   just outside its edge, violet; a magnifier badge in its corner. */
/* Size (a line ending in 75% / 50%): that share of the normal width — the
   file's own, up to the column (or the list item's text under a step). A
   phone column is too narrow to shrink into, so there every size is normal. */
.help-figure {
  --help-figure-scale: 1;
  width: calc(min(100%, var(--help-figure-w, 100%)) * var(--help-figure-scale));
  margin: 2em 0;
}
.help-figure--video { width: calc(min(100%, 52rem) * var(--help-figure-scale)); }
.help-figure--medium { --help-figure-scale: 0.75; }
.help-figure--small { --help-figure-scale: 0.5; }
@media (max-width: 767px) {
  .help-figure { --help-figure-scale: 1; }
}
/* Under a step: in the item, lined up with its text, a little closer to it. */
/* The frame corners sit just outside the picture (--frame-inset): in the
   column they hang in the margin, in an item they would reach back under the
   numbers. There the figure moves in by that much (and is that much
   narrower on each side), so the corners start where the item's text does. */
.help-doc__content li > .help-figure {
  --help-figure-gutter: var(--space-2);
  width: calc(min(100% - 2 * var(--help-figure-gutter), var(--help-figure-w, 100%)) * var(--help-figure-scale));
  margin: 1.25em var(--help-figure-gutter);
}
/* a video has no frame corners: flush with the text, at its own cap */
.help-doc__content li > .help-figure--video {
  --help-figure-gutter: 0px;
  width: calc(min(100%, 52rem) * var(--help-figure-scale));
}
@media (max-width: 767px) {
  .help-doc__content li > .help-figure:not(.help-figure--video) { --help-figure-gutter: var(--space-1); }
}
.help-figure__zoom {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  cursor: zoom-in;
}
.help-figure__frame {
  --frame-inset: calc(var(--space-2) * -1);
  --frame-len: 1.125rem;
  --frame-color: var(--accent-line);
}
.help-figure__zoom:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.help-figure__zoom img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  background-color: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.help-figure__hint {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--text-1);
  background-color: var(--surface-overlay);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  box-shadow: var(--shadow-md);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.help-figure__caption {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.help-figure__caption::before {
  content: '';
  flex-shrink: 0;
  width: 2px;
  margin-block: 0.2em;
  background-color: var(--accent-500);
  border-radius: var(--radius-full);
}
@media (hover: hover) and (pointer: fine) {
  .help-figure__zoom:hover img { border-color: var(--line-hover); }
  .help-figure__zoom:hover .help-figure__frame { --frame-color: var(--accent-400); }
  .help-figure__zoom:hover .help-figure__hint { color: var(--accent-300); border-color: var(--accent-line); }
}
@media (max-width: 767px) {
  .help-figure__frame { --frame-inset: calc(var(--space-1) * -1); --frame-len: 0.75rem; }
}

/* More articles: the alternate band after the article. */
.help-more .section-header { margin-bottom: var(--space-8); }


/* ── 5. Zoom dialog (Shared/Modal #helpZoom, dialogClass .help-zoom) ──────
   The kit dialog as a lightbox: no header, the picture edge to edge and a
   thin bar under it (description, new tab, close). The box is as wide as the
   picture can be — its own width (help.js sets --help-zoom-w and
   --help-zoom-ratio from the figure), the viewport's width, or what the
   viewport's height allows for its proportions, whichever is least — so a
   small dialog stays small and a full-screen capture fills the screen.
   Never narrower than the bar needs; a smaller picture sits centred. */
.dlg__dialog.help-zoom {
  --help-zoom-bar: 3rem;
  --help-zoom-max-h: calc(100vh - 2rem - var(--help-zoom-bar) - 2px);
  --help-zoom-max-h: calc(100dvh - 2rem - var(--help-zoom-bar) - 2px);
  width: min(100%, calc(var(--help-zoom-w, 90rem) + 2px), calc(var(--help-zoom-max-h) * var(--help-zoom-ratio, 1.7778) + 2px));
  min-width: min(20rem, 100%);
  max-width: none;
}
.help-zoom .dlg__body { padding: 0; overflow: hidden; }
.help-zoom__figure { margin: 0; }
.help-zoom__stage {
  display: flex;
  justify-content: center;
  background-color: var(--surface-2);
}
.help-zoom__img {
  display: block;
  width: 100%;
  max-width: var(--help-zoom-w, 100%);
  height: auto;
  max-height: var(--help-zoom-max-h);
  object-fit: contain;
}
.help-zoom__bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--help-zoom-bar);
  padding: 0 var(--space-2) 0 var(--space-4);
  border-top: 1px solid var(--line);
}
/* contain: the description never widens the box; a long one ends in "…" */
.help-zoom__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  contain: inline-size;
}


/* ── 6. Wizard ───────────────────────────────────────────────────────────────
   The question card, and from 1024px "Twoje odpowiedzi" in a 20rem column
   on the right (under the card below that). */
.help-wizard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
@media (min-width: 1024px) {
  .help-wizard { grid-template-columns: minmax(0, 1fr) 20rem; }
}
/* The card: the article sheet's soft violet light in its top corner. */
.help-wizard__card {
  gap: var(--space-6);
  background-image: radial-gradient(55% 16rem at 0% 0%, var(--ambient-violet-soft, var(--accent-soft)), transparent 70%);
}
.help-wizard__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.help-wizard__progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.help-wizard__step {
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--dur-base) var(--ease-standard);
}
.help-wizard__step[data-state="end"] { color: var(--success-text); }

/* Progress dots: the questions answered (dim accent), the current one (a
   longer live pill with a soft pulse), the ending (green: solved, accent:
   report). The newest dot pops in. */
.help-wizard__dots { display: inline-flex; align-items: center; gap: 0.375rem; }
.help-wizard__dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  background-color: var(--surface-3);
  border-radius: var(--radius-full);
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-standard);
}
.help-wizard__dot.is-done { background-color: var(--accent-line); }
.help-wizard__dot.is-current,
.help-wizard__dot.is-report { width: 1.375rem; background-color: var(--accent-500); }
.help-wizard__dot.is-solved { width: 1.375rem; background-color: var(--success); }
.help-wizard__dot.is-current::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: hw-pulse 2.2s var(--ease-out) infinite;
}
@keyframes hw-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-line); }
  70%  { box-shadow: 0 0 0 0.375rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.help-wizard__dot.is-new { animation: hw-dot-in 380ms var(--ease-pop) both; }
@keyframes hw-dot-in {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: none; }
}
.help-wizard__nav { display: flex; gap: var(--space-2); }
.help-wizard__screen { display: flex; flex-direction: column; gap: var(--space-5); outline: none; }
.help-wizard__q {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.help-wizard__hint,
.help-wizard__context,
.help-wizard__ask { margin: 0; color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; }
.help-wizard__context strong { color: var(--text-strong); }
.help-wizard__ask { color: var(--text-1); font-weight: 500; }

/* Answers: a row with its number as a keycap (also the 1–9 shortcut), the
   label and a chevron. Hover (mouse): the accent edge, the keycap lights,
   the chevron nudges. Picked: the row fills with the accent for a moment
   while the others step back, then the next screen comes in. */
.help-wizard__options { display: flex; flex-direction: column; gap: var(--space-2); }
.help-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  color: var(--text-strong);
  background-color: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}
.help-option__key {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background-color: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 -1px 0 var(--line);
  transition: color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.help-option__key:empty { visibility: hidden; }
.help-option__label { flex: 1 1 auto; min-width: 0; }
.help-option__go {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-3);
  font-size: 0.8125rem;
  transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out);
}
.help-option:focus-visible { outline: none; border-color: var(--accent-line); box-shadow: var(--focus-ring); }
.help-option:focus-visible .help-option__key { color: var(--accent-text); border-color: var(--accent-line); }
@media (hover: hover) and (pointer: fine) {
  .help-option:hover { background-color: var(--surface-2); border-color: var(--accent-line); }
  .help-option:hover .help-option__key { color: var(--accent-text); background-color: var(--accent-soft); border-color: var(--accent-line); }
  .help-option:hover .help-option__go { color: var(--accent-text); transform: translateX(3px); }
}
.help-option.is-picked { background-color: var(--accent-soft); border-color: var(--accent-500); }
.help-option.is-picked .help-option__key { color: var(--on-accent); background-color: var(--accent-500); border-color: var(--accent-500); box-shadow: none; }
.help-option.is-picked .help-option__go { color: var(--accent-text); }
.help-option.is-dimmed { opacity: 0.45; }

/* The keyboard hint under the answers — mouse and keyboard screens only. */
.help-wizard__keys { margin: 0; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.5; }
.help-wizard__keys kbd {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 0.3rem;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.25rem;
  text-align: center;
  background-color: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 -1px 0 var(--line);
}
@media not ((hover: hover) and (pointer: fine)) {
  .help-wizard__keys { display: none; }
}

.help-wizard__try p { margin: 0; }
.help-wizard__try p + p { margin-top: var(--space-2); }
.help-wizard__articles {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.help-wizard__article {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--accent-text);
  font-weight: 500;
  text-decoration: none;
}
.help-wizard__article svg { flex-shrink: 0; margin-top: 0.2em; }
.help-wizard__article:hover span { text-decoration: underline; text-underline-offset: 3px; }
.help-wizard__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.help-wizard__done,
.help-wizard__report { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.help-wizard__done-icon { position: relative; color: var(--success-text); background-color: var(--success-soft); border-color: var(--success-line); }
/* The ending's tile pops in (a small overshoot) and, when solved, sends out
   one soft ring. */
:is(.help-wizard__done, .help-wizard__report) > .icon-tile.is-entering {
  animation-name: hw-pop;
  animation-duration: 460ms;
  animation-timing-function: var(--ease-pop);
}
@keyframes hw-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: none; }
}
.help-wizard__done-icon.is-entering::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--success-line);
  border-radius: inherit;
  opacity: 0;
  animation: hw-ring 900ms var(--ease-out) 260ms both;
}
@keyframes hw-ring {
  from { opacity: 0.9; transform: scale(1); }
  to   { opacity: 0;   transform: scale(1.7); }
}
.help-wizard__report .field { width: 100%; }
.help-wizard__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  width: 100%;
}
@media (min-width: 768px) {
  .help-wizard__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.help-wizard__text { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; }

/* "Twoje odpowiedzi": a timeline — numbered nodes on a hairline rail, each
   answer a row that rewinds to its question; a new answer slides in. */
.help-wizard__path { gap: var(--space-3); }
.help-wizard__path-title { margin: 0; }
.help-wizard__path-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.help-wizard__path-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: start;
}
.help-wizard__path-row:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 2.25rem;
  bottom: -0.5rem;
  left: calc(0.75rem - 0.5px);
  width: 1px;
  background-color: var(--line-strong);
}
.help-wizard__path-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.5rem;
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background-color: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
}
.help-wizard__path-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  padding: var(--space-2);
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.help-wizard__path-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (hover: hover) and (pointer: fine) {
  .help-wizard__path-item:hover { background-color: var(--surface-hover); }
}
.help-wizard__path-q { color: var(--text-2); font-size: var(--fs-xs); line-height: 1.45; }
.help-wizard__path-a { color: var(--text-strong); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; }
.help-wizard__path-note {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.125rem;
  letter-spacing: 0.04em;
  vertical-align: 0.1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
}
.help-wizard__path-note--ok { color: var(--success-text); background-color: var(--success-soft); border-color: var(--success-line); }
.help-wizard__path-note--no { color: var(--text-2); background-color: var(--surface-2); }
.help-wizard__path-row.is-entering { --enter-y: 6px; }

/* Firefox: the motions above fade only — a transform ending re-snaps the
   text next to it (tokens.css); reduced motion: no pulse, no pop. */
@supports (-moz-appearance: none) {
  .help-wizard__dot.is-new,
  :is(.help-wizard__done, .help-wizard__report) > .icon-tile.is-entering { animation-name: ls-fade-in; }
  .help-option:hover .help-option__go { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .help-wizard__dot.is-current::after,
  .help-wizard__dot.is-new,
  .help-wizard__done-icon.is-entering::after { animation: none; }
}


/* ── 7. Firefox: the article card's arrow — see components.css 42. */