/* The guides: the third tab next to the points map and the cube, with the
   app's bar, stage and drawer. The stage holds the board or a guide, the
   drawer lists every guide. */
.guides { position: absolute; inset: 0; overflow-y: auto; padding: 24px 16px 48px; }
.guides > * { max-width: 980px; margin-left: auto; margin-right: auto; }
.guides h1 { font-size: 28px; margin: 8px auto 4px; }
.guides section { margin-top: 28px; }
.guides h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 6px; }
.guides section > p { margin: 0 0 12px; color: var(--muted); max-width: 680px; }
.guides .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.guides .grid.cantons { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gcard {
  display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none;
}
.gcard:hover { border-color: var(--accent); }
.gcard b { font-weight: 650; }
.gcard span { font-size: 13px; color: var(--muted); }
.gcard.small { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; }
.gcard .chip { width: 14px; height: 14px; border-radius: 4px; background: var(--c); }
/* the switcher sits over the top right; keep the title clear of it */
@media (max-width: 720px) { .guides { padding-top: 72px; } }
.bar a.brand { color: var(--text); text-decoration: none; }
.guides { scrollbar-color: var(--line) transparent; }

.bar #menuBtn { margin-left: auto; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 8px; color: var(--text); text-decoration: none;
}
.toc a:hover { background: var(--field); }
.toc a[aria-current="page"] { background: var(--field); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.toc small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.toc .chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); margin-right: 8px; vertical-align: -1px; }