/* Extra styles for the /guides reference pages (loads after pages.css) */
main.wide { max-width: 1080px; }
.guide-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.guide-chips a { color:var(--muted); text-decoration:none; font-size:13px; font-weight:700; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:#ffffff08; }
.guide-chips a:hover { color:var(--text); background:#ffffff14; }
.guide-chips a[aria-current="page"] { color:#fff; background:var(--accent-bg); border-color:var(--accent-bg); }

.table-wrap { overflow-x:auto; margin:12px 0 22px; border:1px solid var(--line); border-radius:14px; background:var(--panel); -webkit-overflow-scrolling:touch; }
table.data { width:100%; border-collapse:collapse; font-size:14px; line-height:1.45; }
table.data caption { text-align:left; padding:10px 14px; color:var(--muted); }
table.data th, table.data td { padding:9px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
table.data thead th { position:sticky; top:0; background:#1b2d3c; color:#cfe0ee; font-size:12px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; z-index:1; }
table.data tbody tr:last-child td { border-bottom:0; }
table.data tbody tr:hover td { background:#ffffff08; }
table.data tr:target td { background:#6c3baa33; }
table.data td { color:#d3dfe9; }
table.data td b { color:var(--text); }
table.data.sticky-first td:first-child, table.data.sticky-first th:first-child { position:sticky; left:0; background:var(--panel); z-index:2; }
table.data.sticky-first thead th:first-child { background:#1b2d3c; z-index:3; }
table.data.sticky-first tbody tr:hover td:first-child { background:#1a2a38; }
table.data.recipes td:nth-child(7) { min-width:170px; }
table.data.recipes td:nth-child(4) { white-space:nowrap; }
table.data.compact th, table.data.compact td { padding:7px 8px; text-align:center; font-size:13px; }
table.data.compact th:first-child, table.data.compact td:first-child { text-align:left; white-space:nowrap; }
.muted { color:#6f8497; }

.legend ul { margin:6px 0 4px; }
.legend h3 { margin-top:14px; }
.inline-list { display:flex; flex-wrap:wrap; gap:6px 14px; list-style:none; padding:0; margin:0 0 8px; }
.inline-list li { margin:0; }

.guide-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin:10px 0 28px; }
.guide-card { display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); text-decoration:none; color:var(--text); }
.guide-card:hover { border-color:var(--accent); background:#192a38; }
.guide-card b { font-size:16px; }
.guide-card span { color:var(--muted); font-size:14px; line-height:1.5; }

.guide-cta { margin:40px 0 0; padding:18px 20px; border:1px solid var(--line); border-left:4px solid var(--accent-bg); border-radius:14px; background:var(--panel); }
.guide-cta p { margin:0 0 8px; }

@media (max-width: 600px) {
  main.wide { padding-inline: 14px; }
  table.data { font-size:13px; }
  table.data th, table.data td { padding:8px 9px; }
}
table.data.costs td:nth-child(3) { min-width:230px; }
table.data.costs td:nth-child(1) { white-space:nowrap; }