/* Chrome for kaleidorabble.com only (templates/kaleidorabble_site.html):
   the slim header and footer that replace the nerdymark.com navigation.
   Colors ride the shared tokens from site.css so light and dark both work. */
/* Full width with the same left edge as the app content (60px, 24px on phones),
   which is left-aligned rather than centred. */
.kr-site-header{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding:14px 60px; }
.kr-site-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-strong); font-weight:700; font-size:1.25rem; }
.kr-site-nav{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-left:auto; font-size:0.95rem; }
.kr-site-nav a{ color:var(--link); text-decoration:none; }
.kr-site-nav a:hover{ text-decoration:underline; text-underline-offset:3px; }
.kr-site-footer{ max-width:1170px; margin:40px auto 0; padding:18px 16px 28px; border-top:1px solid var(--border); text-align:center; font-size:0.9rem; color:var(--text-muted); }
.kr-site-footer a{ color:var(--link); }
.kr-site-noscript{ max-width:1170px; margin:0 auto; padding:20px 16px; }
.kr-site-404{ max-width:860px; margin:0 auto; padding:40px 16px; }
@media (max-width:600px){ .kr-site-header{ padding:14px 24px; } .kr-site-nav{ margin-left:0; width:100%; } }