/* guides.css: the /guides hub and guide pages (lane GUIDES). Tokens and atoms from theme.css and base.css
   only (.card, .btn, .tool-grid, .refs, .toc, table.data, .table-wrap, .note, .kicker); no colour literals. */
.gd-how { margin: 0 0 var(--sp-3); }
.gd-sec h3 { margin: var(--sp-3) 0 var(--sp-2); }
.gd-picks td { vertical-align: top; }

.gd-picks .gd-sub { display: block; color: var(--c-ink-soft); font-size: var(--fs-s); }
.gd-watch-h { margin: var(--sp-3) 0 var(--sp-1); color: var(--c-ink-soft); font-size: var(--fs-s); }
.gd-watch { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.gd-watch a { display: inline-flex; align-items: center; min-height: var(--tap); }
.gd-items { margin: var(--sp-2) 0; }
.gd-videos { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-4); }
.gd-video { min-width: 0; }
.gd-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--c-tip-bg); }
.gd-frame iframe, .gd-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gd-play { padding: 0; margin: 0; background: none; cursor: pointer; }
.gd-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-play .btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gd-meta { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); overflow-wrap: anywhere; }
.gd-meta span { font-size: var(--fs-s); }
.gd-title { font-weight: bold; }
.gd-note { color: var(--c-ink-soft); }
.gd-grid .tool a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); align-items: center; }
.gd-grid .tool img { grid-row: span 2; }
.gd-creator-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.gd-creator-list a { display: inline-flex; align-items: center; min-height: var(--tap); }
.gd-picks { table-layout: fixed; width: 100%; min-width: 36em; }
.gd-picks th:nth-child(1) { width: 30%; }
.gd-picks th:nth-child(2) { width: 12%; }
.gd-picks th:nth-child(3) { width: 33%; }
.gd-picks th:nth-child(4) { width: 25%; }
/* phone: each pick is a small block (name and count on top, effect and source under it) instead of a
   sideways-scrolling table */
@media (max-width: 600px) {
  .gd-picks { min-width: 0; table-layout: auto; }
  .gd-picks thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gd-picks tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); padding: var(--sp-2) 0; }
  table.data.gd-picks td { display: block; padding: 0; border: 0; }
  table.data.gd-picks tr { border-bottom: 2px solid var(--c-line); }
  .gd-picks td:nth-child(3), .gd-picks td:nth-child(4) { grid-column: 1 / -1; font-size: var(--fs-s); }
  .gd-picks td:nth-child(4):empty { display: none; }
}
.gd-zones td { vertical-align: top; }
.gd-npcs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.gd-lab { display: none; }
@media (max-width: 600px) {
  .gd-zones thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gd-zones tr { display: block; padding: var(--sp-2) 0; }
  table.data.gd-zones td { display: block; padding: var(--sp-1) 0; border: 0; }
  table.data.gd-zones tr { border-bottom: 2px solid var(--c-line); }
  .gd-lab { display: block; color: var(--c-ink-soft); font-size: var(--fs-s); }
}
/* build pages (2026-09-27): loadout rows, item source, creator links, boss icons */
.gd-src { color: var(--c-ink-soft); font-size: var(--fs-s); }
.gd-load { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.gd-load > li { padding: var(--sp-2) 0; border-bottom: 2px solid var(--c-line); min-width: 0; }
.gd-it { overflow-wrap: anywhere; }
.gd-stat { font-size: var(--fs-s); margin-top: var(--sp-1); }
.gd-by { display: block; font-size: var(--fs-s); margin-top: var(--sp-1); color: var(--c-ink-soft); }
.gd-h1, .gd-h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.gd-bosses { display: inline-flex; gap: var(--sp-1); align-items: center; }
.gd-boss { image-rendering: pixelated; object-fit: contain; }
.gd-builds .tool a { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.gd-weps { display: flex; align-items: center; gap: var(--sp-1); }
.gd-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-4) 0; }
.gd-nav a { display: inline-flex; align-items: center; min-height: var(--tap); }
.gd-builder { display: inline-flex; align-items: center; min-height: var(--tap); }
.gd-vlist { margin: 0; padding-left: var(--sp-4); } .gd-vlist li { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
/* one build per class and stage (2026-09-27): the stage row, credit line, slot labels */
.gd-stages h2 { margin: 0 0 var(--sp-2); }
.gd-stages ol { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.gd-stages li a { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-height: var(--tap);
  width: 7em; padding: var(--sp-2); text-align: center; font-size: var(--fs-s); border-bottom: 2px solid transparent; }
.gd-stages li a[aria-current="page"] { border-bottom-color: var(--c-accent); }
.gd-kicker { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.gd-credit { margin: var(--sp-1) 0 var(--sp-3); }
.gd-slot { display: inline-block; min-width: 3.5em; color: var(--c-ink-soft); font-size: var(--fs-s); }
.gd-load > li:has(.gd-slot) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.gd-load > li:has(.gd-slot) .gd-stat { flex-basis: 100%; }
/* on a build page the stage row is one line that scrolls inside its own box on a phone */
@media (max-width: 600px) {
  .gd-compact ol { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-1); }
  .gd-compact li { flex: 0 0 auto; }
  .gd-compact h2 { font-size: var(--fs-s); }
}
/* stage row: every icon group sits on the same baseline, so the names line up */
.gd-stages .gd-bosses { height: 44px; align-items: flex-end; }
.gd-stages li a { justify-content: flex-start; }
/* wide screens: panel left, slot list right, top-aligned, so a build reads in one screen (lead 2026-09-27) */
.gd-build { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.gd-build > .gd-sec { margin-top: 0; }
@media (min-width: 1100px) {
  .gd-build { grid-template-columns: auto minmax(0, 1fr); }
  .gd-build .gd-load > li { max-width: none; }
}