/* 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); }
}