/*
 * Forra Help Center — /en/help/**. Loaded after tokens.css + pages.css.
 * Token-only, like pages.css: no hex literals in this file.
 *
 * Layout: phones get a back link and a collapsed topic menu; from 900px a
 * sticky sidebar lists every article instead (owner-chosen, 2026-09-25).
 * Direction-dependent rules use logical properties so the Arabic pages
 * (dir="rtl") mirror themselves.
 */

/* ── Shell ─────────────────────────────────────────────────────────────── */

.help-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
}

.help-main {
  max-width: 720px;
  padding: var(--space-6) 0 var(--space-7);
}

.help-side { display: none; }

@media (min-width: 900px) {
  .help-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-7);
  }
  .help-side {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    padding-block: var(--space-6);
    padding-inline: 0 var(--space-3);
    border-inline-end: 1px solid var(--color-hairline);
    scrollbar-width: thin;
  }
  .help-main { padding-top: var(--space-7); }
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */

.help-side ul,
.help-topics ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.help-side-home {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--color-ink);
  text-decoration: none;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-4);
}
.help-side-group {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin: var(--space-5) 0 var(--space-2);
  padding: 0 var(--space-2);
}
.help-side a,
.help-topics a {
  display: block;
  padding: 6px var(--space-2);
  border-radius: var(--radius-input);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-ink-2);
  text-decoration: none;
}
.help-side a:hover,
.help-topics a:hover { background: var(--color-paper); color: var(--color-ink); }
.help-side a[aria-current="page"],
.help-topics a[aria-current="page"] {
  background: var(--color-rust-50);
  color: var(--color-rust-600);
  font-weight: 600;
  border-inline-start: 3px solid var(--color-rust-400);
  padding-inline-start: 5px;
}

/* ── Article header (phone navigation) ─────────────────────────────────── */

.help-back {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-base);
  text-decoration: none;
  padding: var(--space-1) 0;
  margin-bottom: var(--space-4);
}

.help-topics {
  border: 1px solid var(--color-hairline-2);
  border-radius: var(--radius-input);
  background: var(--color-canvas-2);
  margin-bottom: var(--space-5);
}
.help-topics summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.help-topics summary::-webkit-details-marker { display: none; }
.help-topics summary::after { content: "▾"; color: var(--color-rust-500); }
.help-topics[open] summary::after { content: "▴"; }
.help-topics ul { padding: 0 var(--space-2) var(--space-2); }

.help-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-rust-500);
  margin: 0 0 var(--space-2);
}

.help-main h1 {
  font-size: var(--fs-3xl);
  text-wrap: balance;
  margin-bottom: var(--space-2);
}

/* ── Article body ──────────────────────────────────────────────────────── */

.help-article { margin-top: var(--space-5); }
.help-article h2 {
  font-size: var(--fs-xl);
  margin: var(--space-6) 0 var(--space-3);
  scroll-margin-top: var(--space-5);
}
.help-article p,
.help-article li { font-size: var(--fs-md); line-height: 1.6; color: var(--color-ink-2); }
.help-article ul { padding-inline-start: var(--space-5); margin: 0 0 var(--space-4); }
.help-article ul li { margin-bottom: var(--space-2); }
.help-article strong { color: var(--color-ink); }

.help-answer {
  font-size: var(--fs-lg) !important;
  color: var(--color-ink) !important;
  line-height: 1.55;
  margin-bottom: var(--space-5);
}

.help-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-3);
}
/* Not a grid: a step mixes text and inline UI chips, and grid would turn each
 * of them into its own cell. The number is positioned instead. */
.help-steps li {
  counter-increment: step;
  position: relative;
  min-height: 26px;
  padding-inline-start: 40px;
  margin: 0;
}
.help-steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-rust-50);
  color: var(--color-rust-500);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  display: grid;
  place-items: center;
}

/* An app label, written exactly as the app shows it. Not a button. */
.ui {
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1px solid var(--color-hairline);
  border-radius: 6px;
  padding: 0 6px;
  font-size: 0.92em;
  white-space: nowrap;
}

.help-note {
  margin: var(--space-5) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-canvas-2);
  border: 1px solid var(--color-hairline);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--color-ink-2);
}
.help-note strong { color: var(--color-ink); }

.help-article table { width: 100%; margin: var(--space-3) 0 var(--space-5); font-size: var(--fs-sm); }
.help-article th,
.help-article td { vertical-align: top; }

.help-article code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-paper-2);
  border-radius: 4px;
  padding: 0 4px;
  overflow-wrap: anywhere;
}

/* Tables stay inside the column on a phone. */
@media (max-width: 599px) {
  .help-article table { display: block; overflow-x: auto; }
}

/* ── On this page / related / contact ──────────────────────────────────── */

.help-toc {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}
.help-toc-title,
.help-related h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin: 0 0 var(--space-2);
}
.help-toc ul { margin: 0; padding-inline-start: var(--space-5); }
.help-toc li { font-size: var(--fs-sm); margin-bottom: var(--space-1); }

.help-related {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
}
.help-related ul { list-style: none; margin: 0; padding: 0; }
.help-related a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--fs-md);
}
.help-related a::after { content: "›"; color: var(--color-rust-500); }
/* Alone in its own flex item the chevron is not bidi-mirrored, so RTL names the
   left-pointing one. Inside running text ("الإعدادات › الحساب") the browser
   mirrors "›" itself, which is why content-ar.mjs keeps the English arrows. */
[dir="rtl"] .help-related a::after { content: "‹"; }
.help-related a:hover { color: var(--color-rust-500); }

.help-contact { margin-top: var(--space-5); font-size: var(--fs-base); }

/* ── Changelog ─────────────────────────────────────────────────────────── */

.help-release { margin-top: var(--space-6); }
.help-release h2 { margin-bottom: var(--space-1) !important; }
.help-article .help-release .meta-line { font-size: var(--fs-sm); color: var(--color-ink-3); }
.help-release ul { list-style: none; padding: 0; }
.help-tag {
  display: inline-block;
  min-width: 72px;
  margin-inline-end: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ontrack-500);
}
.help-tag--improved { color: var(--color-rust-500); }
.help-tag--fix { color: var(--color-ink-3); }

/* ── Hub ───────────────────────────────────────────────────────────────── */

.help-hub {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-7) var(--page-padding-x);
}
.help-hub h1 { font-size: var(--fs-4xl); margin-bottom: var(--space-2); }
.help-hub-lede { font-size: var(--fs-lg); margin-bottom: var(--space-5); }

.help-search { margin-bottom: var(--space-4); }
.help-search label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}
.help-search input {
  width: 100%;
  font: inherit;
  font-size: var(--fs-md);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-hairline-2);
  border-radius: var(--radius-pill);
  background: var(--color-canvas-2);
  color: var(--color-ink);
}
.help-search input:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 1px;
  border-color: var(--color-rust-400);
}
.help-search-empty { margin-top: var(--space-3); }

.help-contact-card {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-rust-wash);
  border: 1px solid var(--color-rust-100);
  margin-bottom: var(--space-6);
}
.help-contact-card p { margin: 0; color: var(--color-ink); max-width: none; }

.help-guides {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-7);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.help-guides a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-canvas-2);
  border: 1px solid var(--color-hairline);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.help-guides a:hover { border-color: var(--color-rust-200); }
.help-guides strong { font-family: var(--font-display); font-size: var(--fs-md); color: var(--color-ink); }
.help-guides span { font-size: var(--fs-sm); color: var(--color-ink-2); line-height: var(--lh-snug); }

.help-groups {
  display: grid;
  gap: var(--space-6) var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.help-group { margin-bottom: 0; }
/* pages.css rules every <section> h2 for the legal pages; not wanted here. */
.help-group h2 {
  border-top: none;
  padding-top: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin: 0 0 var(--space-2);
}
.help-group ul { list-style: none; margin: 0; padding: 0; }
.help-group a {
  display: block;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--fs-md);
}
.help-group a:hover { color: var(--color-rust-500); }

/* Search hides non-matching entries and groups that end up empty. */
.help-page [data-search][hidden],
.help-group[hidden],
.help-guides[hidden] { display: none; }

/* The sidebar replaces the phone navigation. Kept last so it wins over the
 * base .help-back / .help-topics rules above. */
@media (min-width: 900px) {
  .help-back,
  .help-topics { display: none; }
}

/* The mono face has no Arabic glyphs, so the date line falls back letter by
 * letter. Arabic help pages set it in the body face instead. */
html[lang="ar"] .help-page .meta-line { font-family: var(--font-body); letter-spacing: normal; }