/*
 * Public help centre styles.
 *
 * Article bodies are rendered from Markdown, so they carry NO Tailwind utility
 * classes and Tailwind does not scan content/help/*.md. Everything inside an
 * article body therefore has to be styled with element selectors under a
 * wrapper class. Do not try to inject utilities into the Markdown output.
 *
 * Colours come from the @theme block in app/assets/tailwind/application.css,
 * which Tailwind v4 emits as CSS custom properties on :root, so this file
 * stays in step with the rest of the app automatically.
 *
 * (No apostrophes in comments in this directory: tailwindcss 4.1.11 mis-parses
 * them and fails the build.)
 */

:root {
  --help-rule: #E4DFD5;
  --help-rule-hair: #EDE9E0;
  --help-paper: #F6F3EC;
}

/* ---------------------------------------------------------------
   Quick answers — the boldest object on the page, because the
   answer-first block is the point of the article, not a widget.
   --------------------------------------------------------------- */
.help-qa { counter-reset: help-q; }
.help-q { border-bottom: 1px solid var(--help-rule-hair); counter-increment: help-q; }
.help-q:last-child { border-bottom: 0; }

.help-q > summary::before {
  content: "Q" counter(help-q);
  position: absolute;
  left: 22px;
  top: 19px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--color-accent-hover);
}

.help-q > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 16px 52px 16px 62px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18.5px;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--color-primary);
}
.help-q > summary::-webkit-details-marker { display: none; }
.help-q > summary:hover { background: var(--help-paper); }

.help-q > summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 25px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-accent-hover);
  border-bottom: 2px solid var(--color-accent-hover);
  transform: rotate(45deg);
  transition: transform 180ms ease;
}
.help-q[open] > summary::after { transform: rotate(-135deg); top: 28px; }

.help-q-answer { padding: 0 52px 20px 62px; max-width: 66ch; }
.help-q-answer p { margin: 0; }

@media (max-width: 640px) {
  .help-q > summary { padding: 15px 42px 15px 22px; font-size: 17px; }
  .help-q > summary::before { position: static; display: block; margin-bottom: 4px; }
  .help-q-answer { padding: 0 22px 18px; }
}

/* ---------------------------------------------------------------
   Article prose — element selectors only.
   --------------------------------------------------------------- */
/* The wrapper takes the full content column; the reading measure is applied to
   the elements that are actually read. Capping the wrapper instead would trap
   tables and screenshots at 68ch, which is far too narrow for two columns of
   text and left the fault-finding tables looking squashed. */
.help-prose { max-width: 860px; font-size: 18px; line-height: 1.62; }

.help-prose > p,
.help-prose > ul,
.help-prose > ol:not(.steps),
.help-prose > h2,
.help-prose > h3,
.help-prose > blockquote { max-width: 68ch; }

.help-prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  font-size: 27px;
  line-height: 1.15;
  margin: 52px 0 14px;
}
.help-prose h2:first-child { margin-top: 0; }
.help-prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 20px;
  line-height: 1.2;
  margin: 30px 0 8px;
}
.help-prose p { margin: 0 0 18px; }
/* Tailwind preflight sets list-style: none on ul and ol, which silently strips
   the markers from Markdown lists. Put them back — a bulleted list that renders
   as unindented sentences reads as a formatting bug. */
.help-prose ul, .help-prose ol { margin: 0 0 18px; padding-left: 26px; }
.help-prose ul { list-style: disc; }
.help-prose ol { list-style: decimal; }
.help-prose ul ul { list-style: circle; }
.help-prose li::marker { color: var(--color-accent-hover); }
/* the walkthrough uses a counter and its own numerals, so no markers there */
.help-prose ol.steps, .help-prose ol.steps > li { list-style: none; }
.help-prose li { margin-bottom: 8px; }
.help-prose li > ul, .help-prose li > ol { margin-top: 8px; }
.help-prose strong { font-weight: 600; }

.help-prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.help-prose a:hover { text-decoration-color: var(--color-primary); }

.help-prose code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.84em;
  background: var(--help-paper);
  border: 1px solid var(--help-rule);
  border-radius: 4px;
  padding: 2px 6px;
}
.help-prose pre {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 22px;
  background: var(--color-primary);
  color: #E7EEF6;
  padding: 20px 22px;
  border-radius: 6px;
  border-left: 4px solid var(--color-accent);
  overflow-x: auto;
}
.help-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

.help-prose blockquote {
  margin: 0 0 22px;
  padding: 17px 20px;
  border-left: 4px solid var(--color-warning);
  border-radius: 0 5px 5px 0;
  background: #FDF6E9;
}
.help-prose blockquote p:last-child { margin-bottom: 0; }

.help-prose hr { border: 0; border-top: 1px solid var(--help-rule); margin: 40px 0; }

/* ---------------------------------------------------------------
   Walkthrough steps.

   Markdown gives us a plain <ol>, so the large step numerals are done
   with a counter rather than markup. One action per step.
   --------------------------------------------------------------- */
.help-prose ol.steps {
  list-style: none;
  counter-reset: help-step;
  padding: 0;
  margin: 0 0 20px;
  max-width: none;
}
.help-prose ol.steps > li {
  counter-increment: help-step;
  position: relative;
  border-top: 1px solid var(--help-rule);
  padding: 26px 0 26px 68px;
  margin: 0;
}
.help-prose ol.steps > li:first-child { border-top: 0; padding-top: 6px; }
.help-prose ol.steps > li::before {
  content: counter(help-step);
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--color-accent);
  opacity: 0.55;
}
.help-prose ol.steps > li:first-child::before { top: 2px; }
.help-prose ol.steps > li > h3 { margin-top: 0; }
.help-prose ol.steps > li > p { max-width: 62ch; }
.help-prose ol.steps > li > :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .help-prose ol.steps > li { padding-left: 46px; }
  .help-prose ol.steps > li::before { font-size: 34px; }
}

/* ---------------------------------------------------------------
   Fault finding — symptom in the left column, because a stuck user
   knows the symptom and not the cause.

   Tables break out of the prose measure. 68ch is right for reading a
   paragraph and much too narrow for two columns of text, which left
   these looking squashed with every cell wrapping three times.
   --------------------------------------------------------------- */
.help-prose table.faults {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  border: 2px solid var(--color-primary);
  background: #fff;
  margin: 0 0 22px;
}
.help-prose table.faults caption {
  caption-side: top;
  text-align: left;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
}
.help-prose table.faults th {
  text-align: left;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  padding: 10px 20px;
  border-bottom: 1px solid var(--help-rule);
}
.help-prose table.faults td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--help-rule-hair);
  vertical-align: top;
  font-size: 16.5px;
}
.help-prose table.faults tr:last-child td { border-bottom: 0; }
.help-prose table.faults td:first-child {
  width: 38%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--color-primary);
}

@media (max-width: 760px) {
  .help-prose table.faults thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .help-prose table.faults td, .help-prose table.faults td:first-child { display: block; width: auto; }
  .help-prose table.faults td:first-child { padding-bottom: 4px; border-bottom: 0; }
}

/* ---------------------------------------------------------------
   Screenshots — captured and not-yet-captured.

   Both reserve the same 16:10 the shots are taken at, so the page
   barely moves when a capture finally lands.
   --------------------------------------------------------------- */
/* Capped so a screenshot illustrates a step rather than dominating it. The cap
   applies to BOTH states, which keeps the property that matters: a pending slot
   reserves exactly the space its image will take, so the page does not reflow
   when a capture lands. */
.help-shot { margin: 18px 0 22px; max-width: 640px; }

/* Each shape gets its own cap. A phone capture is four times as tall as it is
   wide, and at the full column width it would be several screens long. */
.help-shot--portrait { max-width: 520px; }
.help-shot--phone { max-width: 300px; }

.help-shot img {
  display: block;
  width: 100%;
  /* No forced aspect ratio. The img carries its own width and height, so the
     browser reserves the right box and nothing is cropped — an earlier
     16 / 10 with object-fit: cover silently cut the bottom off every shot
     that was not that shape. */
  height: auto;
  border: 1px solid var(--help-rule);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 16px 34px -28px rgba(30, 58, 95, 0.9);
}
.help-shot figcaption {
  font-size: 15px;
  color: var(--color-text-muted);
  margin-top: 9px;
  line-height: 1.45;
}

.help-shot-frame {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border: 1px dashed var(--color-accent);
  border-radius: 5px;
  background-color: var(--help-paper);
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(196, 149, 106, 0.14) 9px 18px);
}
.help-shot-frame span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  padding: 4px 9px;
  background: var(--color-bg-warm);
}
.help-shot-pending figcaption {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.55;
}
.help-shot-pending figcaption b { color: var(--color-accent-hover); font-weight: 500; }

/* ---------------------------------------------------------------
   Category cards and rail links.
   --------------------------------------------------------------- */
.help-cat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--help-cat-bar, var(--color-accent));
  opacity: 0;
  transition: opacity 160ms ease;
}
.help-cat:hover::before, .help-cat:focus-visible::before { opacity: 1; }

.help-cat-mint     { --help-cat-bar: var(--color-mint-deep); }
.help-cat-lavender { --help-cat-bar: var(--color-lavender-deep); }
.help-cat-butter   { --help-cat-bar: var(--color-butter-deep); }
.help-cat-coral    { --help-cat-bar: var(--color-coral-deep); }
.help-cat-sky      { --help-cat-bar: var(--color-sky-deep); }
.help-cat-rose     { --help-cat-bar: var(--color-rose-deep); }

.help-cat-mint     .help-cat-badge, .help-cat-badge.help-cat-mint     { background: var(--color-mint);     color: var(--color-mint-deep); }
.help-cat-lavender .help-cat-badge, .help-cat-badge.help-cat-lavender { background: var(--color-lavender); color: var(--color-lavender-deep); }
.help-cat-butter   .help-cat-badge, .help-cat-badge.help-cat-butter   { background: var(--color-butter);   color: var(--color-butter-deep); }
.help-cat-coral    .help-cat-badge, .help-cat-badge.help-cat-coral    { background: var(--color-coral);    color: var(--color-coral-deep); }
.help-cat-sky      .help-cat-badge, .help-cat-badge.help-cat-sky      { background: var(--color-sky);      color: var(--color-sky-deep); }
.help-cat-rose     .help-cat-badge, .help-cat-badge.help-cat-rose     { background: var(--color-rose);     color: var(--color-rose-deep); }

.help-rail-link {
  display: block;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid var(--help-rule);
  padding: 5px 0 5px 13px;
}
.help-rail-link:hover { color: var(--color-primary); border-left-color: var(--color-accent-hover); }
.help-rail-link.is-current { color: var(--color-primary); font-weight: 600; border-left-color: var(--color-accent); }

.help-vote {
  border: 1px solid var(--help-rule);
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15.5px;
  padding: 9px 20px;
  color: var(--color-text);
}
.help-vote:hover { border-color: var(--color-primary); }

/* ---------------------------------------------------------------
   Search palette.
   --------------------------------------------------------------- */
.help-palette {
  max-width: 700px;
  margin: 0 auto;
  background: var(--color-bg-warm);
  border: 2px solid var(--color-primary);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 34px 70px -26px rgba(21, 42, 69, 0.7);
}

.help-palette-input {
  display: flex;
  align-items: center;
  gap: 13px;
  background: #fff;
  border-bottom: 1px solid var(--help-rule);
  padding: 17px 20px;
}
.help-palette-input svg {
  width: 21px; height: 21px; flex: none;
  stroke: var(--color-accent-hover); fill: none; stroke-width: 2.2;
}
.help-palette-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
}
.help-palette-input input::placeholder { color: var(--color-text-light); }
.help-palette-esc {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  border: 1px solid var(--help-rule);
  border-radius: 4px;
  padding: 3px 7px;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
}
.help-palette-esc:hover { border-color: var(--color-primary); color: var(--color-primary); }

.help-palette-results { max-height: 58vh; overflow-y: auto; }

.help-palette-group {
  display: flex;
  align-items: baseline;
  padding: 9px 20px;
  background: var(--help-paper);
  border-top: 1px solid var(--help-rule);
  border-bottom: 1px solid var(--help-rule-hair);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.help-palette-hit {
  display: flex;
  gap: 13px;
  align-items: baseline;
  padding: 13px 20px;
  text-decoration: none;
  border-bottom: 1px solid var(--help-rule-hair);
}
.help-palette-hit:hover, .help-palette-hit.is-selected { background: #fff; }
.help-palette-hit.is-selected { box-shadow: inset 3px 0 0 var(--color-accent); }

.help-palette-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-primary);
}
.help-palette-line mark {
  background: rgba(196, 149, 106, 0.34);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}
.help-palette-where {
  display: block;
  font-size: 14.5px;
  color: var(--color-text-muted);
  margin-top: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.help-palette-kind {
  margin-left: auto;
  flex: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--help-rule);
  border-radius: 3px;
  padding: 3px 7px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.help-palette-kind.is-answer { border-color: var(--color-accent); color: var(--color-accent-hover); }

.help-palette-state { padding: 36px 26px 30px; text-align: center; }
.help-palette-state h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  color: var(--color-primary);
}
.help-palette-state p {
  color: var(--color-text-muted);
  max-width: 42ch;
  margin: 9px auto 20px;
  font-size: 16.5px;
}
.help-palette-btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  padding: 11px 22px;
  border-radius: 5px;
  background: var(--color-accent);
  color: var(--color-text);
}
.help-palette-btn:hover { background: var(--color-accent-hover); color: #fff; }

.help-palette-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 11px 20px;
  background: var(--help-paper);
  border-top: 1px solid var(--help-rule);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--color-text-muted);
}
.help-palette-foot kbd { border: 1px solid var(--help-rule); border-radius: 3px; padding: 2px 6px; }

/* Keyboard focus has to stay visible everywhere in here. */
.help-prose a:focus-visible,
.help-q > summary:focus-visible,
.help-rail-link:focus-visible,
.help-vote:focus-visible,
.help-cat:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .help-q > summary::after,
  .help-cat,
  .help-cat::before { transition: none; }
}

/* The footer keeps its top margin on the pages that end in prose — the Liquid
   reference, the API page, the 404 — but the support bar is a filled band
   directly above it, and the gap between the two reads as a mistake. */
.help-support + footer { margin-top: 0; }

/* list-none does not remove the disclosure triangle in WebKit. */
.help-mobile-nav > summary::-webkit-details-marker { display: none; }
.help-mobile-nav > summary::marker { content: ""; }

/* The screenshot links must not pick up the underline every other prose link
   gets, and on a phone a desktop capture is small enough to want a hint that
   it opens full size. */
.help-prose .help-shot-link { display: block; text-decoration: none; }
@media (max-width: 640px) {
  .help-shot figcaption::after {
    content: " Tap to enlarge.";
    color: var(--color-accent-hover);
  }
}