/* ==========================================================================
   GameHelpBase — guide article (template for every guide page)
   Loaded after style.css. Depends on it for tokens and shared components
   (.container .section .section-head .btn .chip .cover .guide-card
   .grid-2 .grid-3 .grid-4 .faq-*).

   No colour literals belong in this file. Everything comes from :root in
   style.css — if you need a new colour, add a token there first.

   To reuse this template for another guide: copy the page, change the copy
   and the section ids. You should not need to edit this file. If you do,
   the component isn't general enough — fix it here rather than in the page.
   ========================================================================== */

/* ==========================================================================
   PROSE ISOLATION — the one rule that keeps this template reusable

   Every .prose rule uses the direct-child combinator (>). Components nested
   inside the article (callouts, tables, checklists, figures) are therefore
   never touched by the body-copy rules, so component styles and prose styles
   can't fight and nothing needs specificity hacks to win.

   Keep it this way. A bare `.prose p` would immediately start leaking into
   callout paragraphs and table cells.
   ========================================================================== */

/* ---------------------------------------------------------------- prose -- */

.prose {
  font-size: 17px;
  line-height: 1.75;
}

.prose > p,
.prose > ul,
.prose > ol,
.prose > figure,
.prose > .table-scroll,
.prose > .callout,
.prose > .checklist { margin: 0 0 20px; }

.prose > h2 {
  margin: 52px 0 16px;
  font-size: 26px;
  letter-spacing: -0.015em;
  /* TOC anchors must clear the sticky header. */
  scroll-margin-top: 84px;
}
.prose > h3 {
  margin: 34px 0 12px;
  font-size: 19px;
  letter-spacing: -0.005em;
}

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose > ul,
.prose > ol { padding-left: 24px; }
.prose > ul { list-style: disc; }
.prose > ol { list-style: decimal; }
.prose > ul li,
.prose > ol li { margin-bottom: 8px; }
.prose > ul li:last-child,
.prose > ol li:last-child { margin-bottom: 0; }

.prose > p > a,
.prose > ul a,
.prose > ol a {
  color: var(--accent);
  text-underline-offset: 3px;
}

.prose > p > strong { font-weight: 600; }

/* ------------------------------------------------------------ breadcrumb -- */

.breadcrumb {
  padding-top: 28px;
  font-size: 14px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Chevron drawn in CSS — no icon font, no character that could render
   differently per platform. */
.breadcrumb li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--text-muted);
  border-right: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
}
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

/* -------------------------------------------------------- article header -- */

.article-header {
  padding: 28px 0 0;
  max-width: 760px;
}
.article-header h1 {
  margin: 14px 0 14px;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.022em;
}

.chip-tag {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-sub {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-muted);
}

/* Share button + its result message. The wrapper takes the auto margin rather
   than the button, so the message sits beside the button instead of being
   pushed off the end of the row by it. min-width:0 lets a long failure message
   wrap instead of stretching the row past the viewport. */
.article-meta .share-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
  margin-left: auto;
}

.share-status {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------- article layout -- */

.article-layout {
  display: grid;
  /* Fixed measure, not a percentage: 70% of the 1120px container lands near
     750px, which is ~88 characters at 17px — past the comfortable range.
     minmax(0, ...) lets the column shrink instead of overflowing. */
  grid-template-columns: minmax(0, 720px) 260px;
  gap: 48px;
  justify-content: center;
  align-items: start;
  padding: 36px 0 80px;
}

/* min-width:0 stops a wide table from forcing its grid column wider than
   the track — without it, overflow-x on .table-scroll never kicks in. */
.article-main { min-width: 0; }

.article-aside {
  position: sticky;
  top: 84px;   /* clears the sticky header */
}

/* --------------------------------------------------------------- the toc -- */

.toc-title,
.toc-mobile > summary {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.toc-title { margin: 0 0 12px; }

.toc ol {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
  list-style: none;
}
.toc li a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
}
.toc li a:hover {
  border-left-color: var(--border-strong);
  color: var(--text);
}

/* Mobile TOC: a <details> above the body. The desktop sidebar is
   display:none'd at this width, which also removes it from the
   accessibility tree, so the outline isn't announced twice. */
.toc-mobile {
  display: none;
  margin: 28px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--page-bg);
}
.toc-mobile > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile > summary::marker { content: ""; }
/* Self-contained chevron — deliberately not reusing .faq-chevron, so the
   table of contents doesn't depend on the FAQ component. */
.toc-mobile > summary svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
.toc-mobile[open] > summary svg { transform: rotate(180deg); }

.toc-mobile .toc {
  padding: 0 20px 12px;
}
.toc-mobile .toc ol { border-left: 0; }

/* ---------------------------------------------------------- quick answer -- */

/* Sits outside .prose, so its h2 never competes with .prose > h2. */
.quick-answer {
  margin: 32px 0 40px;
  padding: 22px 24px;
  background: var(--section-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.quick-answer h2 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.quick-answer p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}
.quick-answer p + p { margin-top: 10px; }

/* -------------------------------------------------------------- callouts -- */

.callout {
  padding: 16px 20px;
  border: 1px solid;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.65;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }

.callout-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px !important;   /* beats .callout p + p ordering */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.callout-title svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* Tip reuses the accent hue — no third colour enters the palette. */
.callout-tip {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
.callout-tip .callout-title { color: var(--accent); }

.callout-warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
}
.callout-warn .callout-title { color: var(--warn-fg); }

/* Neutral third variant, for notices that are neither advice (Tip) nor risk
   (Warning). Stays inside the existing palette so the accent hue keeps
   meaning "advice" and amber keeps meaning "risk". */
.callout-note {
  background: var(--section-bg);
  border-color: var(--border-strong);
}
.callout-note .callout-title { color: var(--text); }

/* A page-level notice sits above the article body and applies to the whole
   page, so it carries more weight than an inline callout. It supplies its
   own top margin, so keep it outside .prose — inside, the `.prose > .callout`
   margin rule would outrank this one. */
.callout-lead {
  margin: 28px 0 0;
  padding: 20px 22px;
  font-size: 16px;
}
.callout-lead .callout-title { font-size: 13px; }

/* ----------------------------------------------------------------- table -- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.prose > .table-scroll > table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.prose > .table-scroll th,
.prose > .table-scroll td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.prose > .table-scroll thead th {
  background: var(--section-bg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.prose > .table-scroll tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- checklist -- */

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 20px;
  font-size: 16px;
}
.checklist li + li { border-top: 1px solid var(--border); }
.checklist svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--accent);
}

/* ---------------------------------------------------------------- figure -- */

.figure { margin: 0; }
.figure figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- pager -- */

.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.pager-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.pager-link:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
}
.pager-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.pager-label svg { width: 15px; height: 15px; }
.pager-title { font-size: 16px; font-weight: 600; }

.pager-next {
  grid-column: 2;
  text-align: right;
  align-items: flex-end;
}
.pager-next .pager-label { flex-direction: row-reverse; }

/* -------------------------------------------------------- review status -- */

/* Closing line of the page, under the last section: a standing statement of
   how current the article is, rather than part of the guide itself. */
.article-reviewed {
  margin: 0 0 64px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ============================================================ responsive == */

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 28px 0 64px;
  }
  .article-aside { display: none; }
  .toc-mobile { display: block; }

  .article-header { padding-top: 24px; }
  .article-sub { font-size: 17px; }

  .prose { font-size: 16px; line-height: 1.7; }
  .prose > h2 { margin-top: 44px; font-size: 23px; }
  .prose > h3 { margin-top: 30px; font-size: 18px; }
}

@media (max-width: 640px) {
  .breadcrumb { padding-top: 20px; }
  .article-meta .share-actions {
    width: 100%;
    margin-left: 0;
  }
  .article-meta .share-actions .btn { width: 100%; }
  .share-status { width: 100%; }

  .prose > h2 { margin-top: 38px; }

  .quick-answer { padding: 18px 18px 20px; }
  .callout { padding: 14px 16px; }
  .checklist li { padding: 12px 16px; font-size: 15px; }
  .prose > .table-scroll th,
  .prose > .table-scroll td { padding: 10px 14px; }

  /* Stack instead of squeezing two narrow cards side by side. */
  .pager { grid-template-columns: 1fr; }
  .pager-next { grid-column: 1; text-align: left; align-items: flex-start; }
  .pager-next .pager-label { flex-direction: row; }
}