/* Guides (Guides.dc.html): topic list + article card. Page wrapper (.lp) comes from learn.css. */
.guides{display:flex;flex-direction:column;gap:28px}
.guides h1{font-size:26px;font-weight:700}
.gd-body{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.gd-nav{flex:1 1 min(260px,100%);min-width:0;display:flex;flex-direction:column;gap:14px}
.gd-group{display:flex;flex-direction:column;gap:6px}
.gd-gt{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--text-2)}
.gd-row{display:flex;flex-wrap:wrap;gap:6px}
.gd-item{flex:1 1 min(200px,100%);min-height:52px;box-sizing:border-box;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;display:flex;flex-direction:column;justify-content:center}
.gd-item:hover{color:var(--ink);border-color:var(--muted)}
.gd-item.is-on{border-color:var(--red);background:var(--sel)}
.gd-item b{font-size:14px}.gd-sub{font-size:12px;color:var(--text-2)}
.gd-article{flex:999 1 560px;min-width:0;box-sizing:border-box;background:var(--card);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px}
.gd-article h2{font-size:22px;font-weight:700}
.gd-lead{font-size:15px;line-height:1.6;color:var(--text-2)}
.guide-body{font-size:15px;line-height:1.6;color:var(--text-2);overflow-wrap:anywhere}
.guide-body h2{font-size:18px;color:var(--ink);margin:1.2em 0 .4em}
.guide-body h3{font-size:16px;color:var(--ink);margin:1em 0 .3em}
.guide-body p{margin:.6em 0}
.guide-body table{display:block;overflow-x:auto;border-collapse:collapse}
.guide-body th,.guide-body td{padding:6px 10px;border:1px solid var(--line)}
.guide-examples{display:grid;gap:10px;margin:14px 0}
.guide-ex{padding:12px 14px;border-radius:12px;background:var(--paper)}
.guide-gloss{margin:2px 0 0;color:var(--text-2);font-size:13px}
@media (max-width:760px){
  .gd-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .gd-item{flex:0 0 auto;min-height:44px;white-space:nowrap}
  .gd-sub{display:none}
}