/* Guide pages. Layered on portal.css (.pf-*). Mobile-first: 320px baseline,
   no fixed widths, touch targets >= 44px, content clears the header via
   .pf-main padding-top:5rem. Tokens: portal.css --pf-* with literal fallbacks. */

.gd-body { margin: 0; overflow-wrap: anywhere; }
.gd-brand { color: inherit; text-decoration: none; min-height: 44px; display: block; }
.gd-main { padding-top: 5rem; padding-bottom: var(--pf-space-6, 2rem); }

.gd-h1 { margin: 0 0 var(--pf-space-3, 0.75rem); font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.2; }
.gd-h2 { margin: 0 0 var(--pf-space-3, 0.75rem); font-size: 1.25rem; line-height: 1.3; }
.gd-lead { margin: 0 0 var(--pf-space-4, 1rem); color: var(--pf-fg-muted, #55585F); }
.gd-wide { width: 100%; box-sizing: border-box; }

.gd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pf-space-3, 0.75rem); }
.gd-item { margin: 0; }
.gd-link {
  display: flex; flex-direction: column; gap: var(--pf-space-2, 0.5rem);
  min-height: 44px; box-sizing: border-box;
  padding: var(--pf-space-3, 0.75rem) var(--pf-space-4, 1rem);
  border: 1px solid var(--pf-border, #DBDCE0);
  border-radius: var(--pf-radius-md, 0.875rem);
  color: var(--pf-fg, #16171A); text-decoration: none;
  background: var(--pf-bg-elevated, #FFFFFF);
}
.gd-link:hover { border-color: var(--pf-accent, #B8862B); }
.gd-link:active { transform: scale(0.99); }
.gd-link:focus-visible, .gd-crumb__a:focus-visible { outline: 3px solid var(--pf-focus-ring, #2E6BE6); outline-offset: 2px; }
.gd-item--locked .gd-link { opacity: 0.85; }
.gd-title { font-weight: 700; }
.gd-summary { color: var(--pf-fg-muted, #55585F); font-size: 0.9375rem; }
.gd-badges { display: flex; flex-wrap: wrap; gap: var(--pf-space-2, 0.5rem); }
.gd-badge {
  display: inline-block; padding: 0.125rem 0.625rem; font-size: 0.8125rem; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--pf-border, #DBDCE0); color: var(--pf-fg, #16171A);
}
.gd-badge--done { background: var(--pf-success-bg, #E4F3E9); color: var(--pf-success, #1E7B45); border-color: var(--pf-success, #1E7B45); }
.gd-badge--lock { background: var(--pf-accent-soft, #F1E4C6); color: var(--pf-accent-fg, #1A1400); border-color: var(--pf-accent, #B8862B); }

.gd-crumb { margin-bottom: var(--pf-space-3, 0.75rem); font-size: 0.9375rem; color: var(--pf-fg-muted, #55585F); }
.gd-crumb__a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }

.gd-lock { padding: var(--pf-space-4, 1rem); border-radius: var(--pf-radius-md, 0.875rem); background: var(--pf-bg, #F7F7F8); border: 1px solid var(--pf-accent, #B8862B); color: var(--pf-fg, #16171A); }

.gd-prose { line-height: 1.65; }
.gd-prose h1, .gd-prose h2, .gd-prose h3 { line-height: 1.3; margin: var(--pf-space-5, 1.5rem) 0 var(--pf-space-2, 0.5rem); }
.gd-prose p, .gd-prose ul, .gd-prose ol { margin: 0 0 var(--pf-space-4, 1rem); }
.gd-prose ul, .gd-prose ol { padding-left: 1.25rem; }
.gd-prose a { color: var(--pf-focus-ring, #2E6BE6); display: inline-block; padding: 0.7em 0; }
.gd-prose code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--pf-bg, #F7F7F8); padding: 0.1em 0.35em; border-radius: var(--pf-radius-sm, 0.5rem); }
.gd-prose pre {
  margin: 0 0 var(--pf-space-4, 1rem); padding: var(--pf-space-3, 0.75rem);
  overflow-x: auto; max-width: 100%; box-sizing: border-box;
  background: var(--pf-bg, #F7F7F8); border: 1px solid var(--pf-border, #DBDCE0); border-radius: var(--pf-radius-md, 0.875rem);
}
.gd-prose pre code { background: none; padding: 0; overflow-wrap: normal; white-space: pre; }