/*
  The support section: sub-navigation, the documentation layout and prose, the FAQ, known issues, release
  notes, the articles, and the contact form's extra controls. Loaded only by the support and article
  pages (see _SupportHead and _ArticlesHead).

  Like site.css it names no colour, size scale or font: every value is a role token from the active theme.
*/

/* ---------- navigation across the section ---------- */

.support-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  max-width: 1100px;
  margin: var(--space-16) auto var(--space-24);
}

.support-nav a {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text-dim);
  font-size: 0.92rem;
  text-decoration: none;
}

.support-nav a:hover { color: var(--text-strong); border-color: var(--text-dim); }

.support-nav a[aria-current="page"] {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text-strong);
}

/* Said once, quietly, on the pages whose text is English whatever the chrome's language is. */
.support-notice {
  max-width: 1100px;
  margin: 0 auto var(--space-16);
  padding-left: var(--space-12);
  border-left: 3px solid var(--border);
  color: var(--text-dim);
  font-size: 0.9rem;
}

.support-cards h3 a { text-decoration: none; color: var(--text-strong); }
.support-cards h3 a:hover { color: var(--accent); }
.support-cards .meta { margin-top: var(--space-12); font-size: 0.85rem; }

/* ---------- documentation index ---------- */

.doc-index h2 { margin-top: 2rem; }
.doc-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.doc-list li { padding: var(--space-12) 0; border-bottom: 1px solid var(--border); }
.doc-list a { font-weight: 600; }
.doc-summary { display: block; margin-top: 0.15rem; color: var(--text-dim); font-size: 0.95rem; }

/* ---------- a documentation page: pages on the left, the page, its headings on the right ---------- */

.docs {
  display: grid;
  gap: var(--space-32);
  grid-template-columns: 15rem minmax(0, 1fr) 14rem;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: var(--space-48);
}

.docs-nav,
.doc-toc {
  position: sticky;
  top: 5rem; /* below the sticky site header */
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  font-size: 0.9rem;
}

.docs-nav h2,
.doc-toc h2 {
  margin: var(--space-20) 0 var(--space-8);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.docs-nav h2:first-of-type,
.doc-toc h2 { margin-top: 0; }

.docs-nav ul,
.doc-toc ul { list-style: none; margin: 0; padding: 0; }

.docs-nav a,
.doc-toc a {
  display: block;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-chip);
  color: var(--text-dim);
  text-decoration: none;
  line-height: 1.35;
}

.docs-nav a:hover,
.doc-toc a:hover { color: var(--text-strong); }

.docs-nav a[aria-current="page"] { background: var(--accent-dim); color: var(--text-strong); font-weight: 600; }
.docs-all { margin-bottom: var(--space-16); }

.doc-toc li.level-3 a { padding-left: 1.2rem; font-size: 0.85rem; }

@media (max-width: 1100px) {
  .docs { grid-template-columns: 14rem minmax(0, 1fr); }
  .doc-toc { display: none; }
}

@media (max-width: 760px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { position: static; max-height: none; }
}

.doc header h1 { margin-top: 0; }

/* ---------- Markdown prose: documentation, FAQ answers, issues and release notes ---------- */

.doc-body { max-width: 80ch; overflow-wrap: anywhere; }

.doc-body h2,
.doc-body h3,
.doc-body h4 { scroll-margin-top: 5rem; }

.doc-body h2 { margin-top: 3rem; padding-top: var(--space-24); border-top: 1px solid var(--border); }
.doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body h4 { font-size: 1rem; margin: 1.5rem 0 0.3rem; }

.doc-body :target { background: var(--accent-dim); border-radius: var(--radius-chip); }

.doc-body pre {
  background: var(--code-bg);
  border-radius: var(--radius-card);
  padding: var(--space-16);
  overflow-x: auto;
  line-height: 1.45;
}

.doc-body pre code { background: none; padding: 0; font-size: 0.88rem; line-height: inherit; }

.doc-body table { display: block; overflow-x: auto; border-collapse: collapse; max-width: 100%; margin: var(--space-16) 0; font-size: 0.95rem; }
.doc-body th,
.doc-body td { padding: 0.45rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.doc-body thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }

.doc-body blockquote {
  margin: var(--space-16) 0;
  padding: 0.1rem var(--space-16);
  border-left: 3px solid var(--accent);
  background: var(--bg-sunken);
  color: var(--text-dim);
}

.doc-body hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-32) 0; }
.doc-body img { max-width: 100%; height: auto; }
.doc-body ul,
.doc-body ol { padding-left: 1.4rem; }
.doc-body li { margin: 0.25rem 0; }

/* ---------- FAQ ---------- */

.support-faq { max-width: 1100px; margin: 0 auto; padding-bottom: var(--space-48); }
.support-faq h2 { margin-top: 2.5rem; }
.support-faq h3 { margin-top: 1.75rem; scroll-margin-top: 5rem; }
.support-faq h3 a { color: var(--text-strong); text-decoration: none; }
.support-faq h3 a:hover { color: var(--accent); }
.support-faq .answer { max-width: var(--measure); color: var(--text-dim); }
.support-faq .answer p:first-child { margin-top: 0; }

/* ---------- known issues ---------- */

.support-issues { max-width: 1100px; margin: 0 auto; padding-bottom: var(--space-48); }

.issue {
  max-width: 56rem;
  margin: var(--space-16) 0;
  padding: 1.25rem 1.35rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  scroll-margin-top: 5rem;
}

.issue header { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: baseline; justify-content: space-between; }
.issue h3 { margin: 0; }
.issue h3 a { color: var(--text-strong); text-decoration: none; }

.status {
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Not red: an open issue is often a deferred feature, and red is kept for things that are actually wrong. */
.status-open { border-color: var(--text-dim); color: var(--text-strong); }
.status-workaround { border-color: var(--accent); color: var(--accent); }
.status-fixed { background: var(--accent-dim); border-color: var(--accent); color: var(--text-strong); }
.status-wontfix { color: var(--text-dim); }

.issue-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1.5rem; margin: var(--space-8) 0 var(--space-12); color: var(--text-dim); font-size: 0.85rem; }
.issue-meta div { display: flex; gap: 0.4rem; }
.issue-meta dt { font-weight: 550; }
.issue-meta dd { margin: 0; }
.issue .doc-body p:first-child { margin-top: 0; }
.fixed-in { margin: var(--space-12) 0 0; font-weight: 550; }

/* ---------- release notes ---------- */

.support-releases { max-width: 1100px; margin: 0 auto; padding-bottom: var(--space-48); }
.release { max-width: 56rem; margin-bottom: var(--space-48); scroll-margin-top: 5rem; }
.release h2 { margin: 0; }
.release h2 a { color: var(--text-strong); text-decoration: none; }
.release-meta { margin: 0.2rem 0 var(--space-12); color: var(--text-dim); font-size: 0.9rem; }
.release .lede { margin: 0 0 var(--space-12); }

/* ---------- articles (the index and the page reuse the documentation layout above) ---------- */

.article-date { display: block; margin-top: 0.15rem; color: var(--text-dim); font-size: 0.85rem; }
.doc header .article-date { margin: 0 0 var(--space-16); }

.doc-body figure { margin: var(--space-24) 0; }
.doc-body img { border: 1px solid var(--border); border-radius: var(--radius-card); }

.article-cta {
  max-width: 80ch;
  margin-top: var(--space-48);
  padding: var(--space-24);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.article-cta h2 { margin: 0 0 var(--space-8); }
.article-cta p { margin: 0 0 var(--space-16); color: var(--text-dim); }
.article-cta .actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin: 0; }

/* A reader arriving from a search wants the article first; the list of the others can wait below it. */
@media (max-width: 760px) {
  .articles .docs-nav { order: 2; }
}

/* ---------- the contact form's controls (site.css styles the text inputs) ---------- */

textarea,
select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
}

textarea { min-height: 9rem; resize: vertical; }
textarea:focus-visible,
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }