/* ==========================================================================
   DGF-Bench website: page styles for sitemap.html only (generated by tools/build_pages.py).
   Loaded after site.css. Uses the tokens of site.css; no hard-coded colours.
    1. Pages and their sections   2. Attack pages by family   3. Elsewhere
   ========================================================================== */

/* 1. Pages and their sections ------------------------------------------------------ */
.smap-page { display: flex; flex-direction: column; gap: var(--sp-2); }
.smap-page .card__title a { color: var(--c-ink); }
.smap-sections {
  list-style: none; margin: var(--sp-2) 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--c-line);
  display: grid; gap: 4px var(--sp-4); grid-template-columns: minmax(0, 1fr); font-size: 0.9375rem; line-height: 1.4;
}
@media (min-width: 560px) { .smap-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.smap-sections a { color: var(--c-text-2); text-decoration: none; }
.smap-sections a:hover { color: var(--c-ink); text-decoration: underline; }

/* 2. Attack pages by family: the in-text injections (15) span the full width in two or three columns,
      numbered down each column (1-5, 6-10, 11-15); the three smaller families share a row below. */
.smap-families { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) {
  .smap-families { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .smap-family--injection { grid-column: 1 / -1; }
  .smap-family--injection .smap-attacks { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; }
}
@media (min-width: 560px) and (max-width: 879px) {
  .smap-family--injection .smap-attacks { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); grid-auto-flow: column; }
}
.smap-family .card__title a { color: var(--c-ink); }
.smap-attacks { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 6px var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.smap-attacks a { display: flex; align-items: baseline; gap: 10px; color: var(--c-text); font-size: 0.9375rem; line-height: 1.4; text-decoration: none; }
.smap-attacks a:hover { color: var(--c-ink); text-decoration: underline; }
.smap-num { flex: none; min-width: 1.5rem; color: var(--c-muted); font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* 3. Elsewhere ---------------------------------------------------------------------- */
.smap-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3) var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .smap-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.smap-links li { display: flex; flex-direction: column; gap: 2px; }
.smap-links a { font-weight: 650; overflow-wrap: anywhere; }
.smap-note { color: var(--c-muted); font-size: 0.875rem; }