/* Shared shell for the standalone support/legal pages. These pages remain
   usable without JavaScript, while static-shell.js adds the same persisted
   light/dark choice as the SPA. */
:root {
  --static-page: #fff;
  --static-panel: #f7f7f7;
  --static-header: #fff;
  --static-header-ink: #17341d;
  --static-border: #dedede;
  --static-footer: #222;
  --static-footer-ink: #aaa;
  --static-muted: #666;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --ink: #f0f0f0;
  --muted: #b9dcbf;
  --paper: #10230f;
  --panel: #16321a;
  --border: rgba(255, 255, 255, .18);
  --link: #7fb389;
  --link-hover: #b9dcbf;
  --static-page: #0c230f;
  --static-panel: #102d15;
  --static-header: #091d0c;
  --static-header-ink: #e8f2e9;
  --static-border: rgba(190, 224, 196, .16);
  --static-footer: #071509;
  --static-footer-ink: #a9c3ad;
  --static-muted: #a9c3ad;
}

:root[data-theme='light'] {
  color-scheme: light;
  --ink: #1a1a1a;
  --muted: #5a5a5a;
  --paper: #fff;
  --panel: #f9f9f9;
  --border: #ddd;
  --link: #2c5c34;
  --link-hover: #1a3a20;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --static-page: #0c230f;
    --static-panel: #102d15;
    --static-header: #091d0c;
    --static-header-ink: #e8f2e9;
    --static-border: rgba(190, 224, 196, .16);
    --static-footer: #071509;
    --static-footer-ink: #a9c3ad;
    --static-muted: #a9c3ad;
  }
}

header.site {
  background: var(--static-header) !important;
  color: var(--static-header-ink) !important;
  border-bottom: 1px solid var(--static-border) !important;
}
header.site > a:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
header.site img { height: 34px !important; }
header.site nav a { color: inherit; }
header.site nav a:hover,
header.site nav a[aria-current='page'] { color: #62a66f; }

.theme-toggle {
  margin-left: auto;
  border: 1px solid var(--static-border);
  border-radius: 999px;
  padding: 10px 16px;
  background: transparent;
  color: inherit;
  font: 700 .9rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.theme-toggle:hover { border-color: #62a66f; color: #62a66f; }

.static-play-something {
  padding: 42px 20px;
  text-align: center;
  background: var(--static-panel);
  color: var(--static-header-ink);
  border-top: 1px solid var(--static-border);
}
.static-play-something button {
  border: 0;
  border-radius: 999px;
  padding: 13px 24px;
  background: #2c5c34;
  color: #fff;
  font: 700 1rem/1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(44,92,52,.24);
}
.static-play-something button:hover { background: #397343; }
.static-play-something p { margin: 12px 0 0; color: var(--static-muted); }

footer.site {
  margin: 0 !important;
  padding: 28px 20px 34px !important;
  border-top: 0 !important;
  background: var(--static-footer) !important;
  color: var(--static-footer-ink) !important;
}
footer.site a { color: var(--static-footer-ink) !important; }
footer.site a:hover { color: #fff !important; }
.site-footer__inner { max-width:1200px; margin:0 auto; display:grid; gap:16px; text-align:left; }
.site-footer__brand strong { color:#fff; font:800 1.15rem/1.2 system-ui,sans-serif; }
.site-footer__nav { display:flex; flex-wrap:wrap; gap:20px !important; justify-content:flex-start !important; margin:0 !important; }
.site-footer__nav a { text-decoration:none; }
.site-footer__copy { margin:0; font-size:.78rem; }
@media(min-width:760px){.site-footer__inner{grid-template-columns:1fr 2fr;grid-template-areas:'brand nav' 'copy copy'}.site-footer__brand{grid-area:brand}.site-footer__nav{grid-area:nav;justify-content:flex-end !important}.site-footer__copy{grid-area:copy}}

@media (max-width: 700px) {
  header.site { gap: .75rem !important; }
  header.site nav { order: 3; width: 100%; gap: .85rem !important; }
  .theme-toggle { padding: 9px 12px; }
}
