/* ==========================================================================
   Global Conflict - the Player's Guide (#983, #984)
   Served from /guide.css and linked by the hub (/guide) and every guide page
   (/guide/<slug>), after /site.css, whose interior chrome (.page-hero, main)
   they reuse. Only what the guide adds lives here, so the rest of the site
   does not download it.

   NO EM DASHES anywhere on this site, in CSS content strings included.
   ========================================================================== */

/* Breadcrumb, under the hero: Home / Guide / Page. */
.guide-crumbs { font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.guide-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; color: var(--muted); }
.guide-crumbs li { margin: 0; }
.guide-crumbs li + li::before { content: "/"; color: var(--dim); margin-right: 6px; }
.guide-crumbs a { color: var(--muted); font-weight: 600; }
.guide-crumbs a:hover { color: var(--txt); }
.guide-crumbs [aria-current] { color: var(--txt); }

/* "Last updated", in the hero. The <time class="guide-updated"> inside it is what the sitemap reads. */
.guide-meta { color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: 1px; margin-top: 16px; }

/* In-page contents. */
.guide-toc {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 18px 22px; margin-bottom: 34px;
}
.guide-toc h2 { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
main .guide-toc ol { margin: 0; padding-left: 20px; }
main .guide-toc li { margin-bottom: 4px; }
.guide-toc a { color: var(--txt); }
.guide-toc a:hover { color: var(--red-hi); }

/* Every in-content link on a guide page reads as a link without a per-link class. The breadcrumb, the
   contents list, the A to Z list and the hub's cards are navigation and keep their own look. */
.guide-body a { color: var(--red-hi); text-decoration: underline; text-underline-offset: 2px; }
.guide-body .guide-crumbs a, .guide-body .guide-toc a, .guide-body .guide-az a, .guide-body .guide-card {
  text-decoration: none;
}
.guide-body .guide-crumbs a { color: var(--muted); }
.guide-body .guide-toc a, .guide-body .guide-card { color: var(--txt); }
.guide-body .guide-crumbs a:hover, .guide-body .guide-toc a:hover { color: var(--red-hi); }
.guide-body h2 { scroll-margin-top: 80px; }

/* Data tables (generated from the game's catalogs, #985). Scroll inside their own box at phone
   width so the page itself never scrolls sideways. */
.guide-table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 10px; }
.guide-table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.guide-table-wrap th, .guide-table-wrap td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.guide-table-wrap th { background: var(--panel-2); color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.guide-table-wrap tr:last-child td { border-bottom: 0; }
.guide-table-wrap td { color: #c9ccd3; }
.guide-table-wrap .num { text-align: right; font-variant-numeric: tabular-nums; }
.guide-table-wrap caption { caption-side: top; text-align: left; padding: 10px 12px; color: var(--muted); font-size: 13px; }

/* A guide tool (#995): a small calculator beside the table it extends, shown by /guide-tools.js. It
   ships with the hidden attribute, so without the script the page is just the table. */
.guide-tool { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin: 0 0 24px; }
.guide-tool[hidden] { display: none; }
.guide-tool h3 { margin: 0 0 12px; font-size: 17px; }
.guide-tool-fields { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.guide-tool label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); flex: 1 1 140px; }
.guide-tool input {
  font: inherit; font-size: 16px; color: var(--txt); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; width: 100%; box-sizing: border-box; font-variant-numeric: tabular-nums;
}
.guide-tool input:focus { outline: 2px solid var(--red-hi); outline-offset: 1px; }
main .guide-tool output { display: block; margin-top: 14px; color: var(--txt); font-weight: 700; }
main .guide-tool .guide-tool-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; }

/* "Related guides" at the foot of a page. */
.guide-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.guide-related h2 { margin-top: 0; }

/* The hub's generated index: one section per group, a card per page. */
.guide-group { margin-bottom: 40px; }
.guide-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 700px) { .guide-cards { grid-template-columns: 1fr; } }
.guide-card {
  display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; transition: border-color .15s, transform .15s;
}
.guide-card:hover { border-color: #3a3d46; transform: translateY(-2px); }
.guide-card h3 { margin: 0 0 6px; font-size: 18px; }
main .guide-card p { margin: 0; color: var(--muted); font-size: 15px; }

/* The glossary (/guide/glossary): an A to Z jump list, then a definition list with an anchor per term
   so any guide page can link straight to one (/guide/glossary#bank). */
.guide-az { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; padding: 0; list-style: none; }
main .guide-az li { margin: 0; }
.guide-az a {
  display: inline-block; min-width: 32px; text-align: center; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 6px; color: var(--txt); text-decoration: none; font-weight: 700;
}
.guide-az a:hover { border-color: var(--red-hi); color: var(--red-hi); }
.guide-glossary { margin: 0; }
.guide-glossary dt { font-weight: 800; color: var(--txt); font-size: 17px; margin-top: 22px; scroll-margin-top: 80px; }
.guide-glossary dd { margin: 6px 0 0; color: #c9ccd3; }
.guide-glossary-letter { font-family: var(--display); color: var(--red-hi); font-size: 26px; margin: 34px 0 0; scroll-margin-top: 80px; }