/* Stat guides (site/blog/stats/): one page per stat, the group pages and the hub.
   Loaded after core.css and page.css; uses their tokens only. Pages are built by
   scripts/site-stat-guides.mjs from content/stat-guides/. */

/* Group label above the h1 */
.page-head .kicker { margin-bottom: 14px; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.page-head .kicker a { color: var(--gold); text-decoration: none; }
.page-head .kicker a:hover { color: var(--focus); text-decoration: underline; }

/* HUD labels, as small bone chips (the same look as .stat-entry .abbr) */
.chip { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ink); background: var(--bone); border-radius: 5px; padding: 0 7px; letter-spacing: 0.01em; white-space: nowrap; }
.keyfacts .sep { margin: 0 10px; color: var(--faint); }
.keyfacts dd { min-width: 0; }
.keyfacts dd code { white-space: normal; }
.keyfacts .range { margin-top: 8px; }
.keyfacts .ranges { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.keyfacts .ranges .v { display: inline-block; min-width: 6.5em; color: var(--bone); }
.keyfacts .read .hot { color: var(--hot); font-weight: 600; }
.keyfacts .read .cool { color: var(--cool); font-weight: 600; }
.keyfacts .ref { margin-top: 14px; font-size: 16px; }

/* Each h2 opens a section with a rule above it */
.guide .prose > h2:not(#related-title) { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--rule); }
.guide .prose > .keyfacts + h2 { margin-top: 56px; }

/* Too low / about right / too high: three cards with the HUD’s colors on the left edge */
.levels { display: grid; gap: 18px; margin-top: 24px; }
.level { border-radius: 12px; padding: 22px 24px 24px; background: rgba(19, 43, 53, 0.55); box-shadow: inset 4px 0 0 var(--bone), inset 0 0 0 1px var(--rule); }
.level.low { box-shadow: inset 4px 0 0 var(--cool), inset 0 0 0 1px var(--rule); }
.level.high { box-shadow: inset 4px 0 0 var(--hot), inset 0 0 0 1px var(--rule); }
.prose .level h3 { margin: 0; font-size: 24px; }
.prose .level.low h3 { color: var(--cool); }
.prose .level.high h3 { color: var(--hot); }
.prose .level h4 { margin-top: 18px; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.level > * + * { margin-top: 12px; }
.level h4 + * { margin-top: 6px; }
.level ul, .level ol { padding-left: 1.3em; display: grid; gap: 8px; }

/* Street sections: the street’s HUD label and typical range under its h3 */
.prose .street-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-family: var(--display); font-weight: 500; font-size: 16px; color: var(--dim); }

/* Previous and next guide */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.pager a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rule); text-decoration: none; color: var(--bone); }
.pager a[rel='next'] { text-align: right; }
.pager a:hover { box-shadow: inset 0 0 0 1px var(--rule-2); background: rgba(237, 230, 214, 0.04); color: var(--focus); }
.pager .dir { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.pager .t { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.2; }

/* Hub and group pages: the list of guides */
.guide-hub .prose > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.guide-hub .prose > h2 a { color: var(--bone); text-decoration: none; }
.guide-hub .prose > h2 a:hover { color: var(--focus); }
.guide-hub .prose > h2 .count { font-size: 18px; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.guide-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--rule); max-width: 720px; }
.prose > .guide-list { max-width: 720px; }
.prose .guide-list { padding-left: 0; gap: 0; }
.guide-list li { border-bottom: 1px solid var(--rule); }
.guide-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 18px 0; text-decoration: none; color: var(--soft); }
.guide-list .n { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--bone); }
.guide-list .chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; align-self: center; }
.guide-list .d { grid-column: 1 / -1; font-size: 16px; line-height: 1.5; color: var(--dim); }
.guide-list a:hover .n { color: var(--focus); }
@media (max-width: 559px) { .guide-list a { grid-template-columns: 1fr; } .guide-list .chips { justify-content: flex-start; } }

.group-links { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.prose .group-links { padding-left: 0; }
.group-links a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rule); text-decoration: none; color: var(--bone); font-family: var(--display); font-weight: 600; font-size: 19px; }
.group-links a span { font-family: var(--body); font-weight: 400; font-size: 15px; color: var(--dim); }
.group-links a:hover { color: var(--focus); background: rgba(237, 230, 214, 0.04); }