/* Pocket Cards on PocketPlay kit v2: shared blocks (lobby rail, banner, blog + community, guide pages).
 *
 * Loaded after /_kit/v2/pp.css on every page that carries kit chrome (the SPA shell and the generated guides). Uses kit
 * tokens only (--bg, --ink, --line ...), so light and dark mode follow the kit. The SPA overlay is css/kit-app.css.
 */

/* Use Board's language slot in the shared header, with a direct switch on phones. */
.pp-langlink { flex-shrink: 0; font-weight: 600; }
@media (max-width: 640px) {
  body.pp-v2 .pp-header__end .pp-apps { display: none; }
}
@media (max-width: 360px) {
  body.pp-v2 .pp-brand__sep, body.pp-v2 .pp-brand__site { display: none; }
  body.pp-v2 .pp-header__end { gap: 2px; }
}

.ba-railcard { display: grid; gap: 10px; justify-items: start; }
.ba-railcard h3 { font-size: 17px; }
.ba-railcard p { font-size: 14px; color: var(--ink-2); }
.ba-banner { display: none; margin-top: 28px; }
.ba-more { margin-top: 0; }
.ba-more .pp-section__head { margin-bottom: 16px; }
.ba-after { margin-top: 56px; }

/* ───────────────────────── Guide pages ───────────────────────── */
body.ba-guide .ba-guide__wrap { margin-top: 40px; }
.ba-guide__col { min-width: 0; display: grid; gap: 22px; align-content: start; }
.ba-guide .pp-layout-rail { gap: 48px; }
.ba-article { display: grid; gap: 20px; }
.ba-article h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; }
.ba-article .pp-lede { font-size: clamp(17px, 1.6vw, 19px); color: var(--ink); max-width: none; }
.ba-article .pp-prose { max-width: 680px; }
.ba-article .pp-prose h2 { font-size: 22px; margin-top: 1.8em; }
.ba-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ba-cta .pp-btn { height: 46px; padding: 0 22px; }
.ba-related { display: grid; gap: 12px; margin-top: 12px; }
.ba-related h2 { font-size: 20px; }
.ba-playcard { display: grid; gap: 12px; justify-items: start; }
.ba-playcard h3 { font-size: 17px; }
.ba-playcard p { font-size: 14px; color: var(--ink-2); }
.ba-index-group { display: grid; gap: 14px; }
.ba-index-group h2 { font-size: 20px; }
.ba-guide .pp-pagehead { padding-top: 0; }

@media (max-width: 1080px) {
  body.ba-guide .ba-rail { display: none; }
  .ba-banner { display: block; }
  .ba-guide .ba-banner { margin-top: 32px; }
}
@media (max-width: 640px) {
  body.ba-guide .ba-guide__wrap { margin-top: 24px; }
}