/* The thin navigation strip and footer links that tools/build.mjs adds to a tool's page (e.g. /geometry/).
   Uses the tool's own colour tokens (--panel, --ink ...), so it follows the tool's light/dark theme. */
.site-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px max(24px, env(safe-area-inset-right, 0px)) 7px max(24px, env(safe-area-inset-left, 0px));
  background: var(--bg2, #e8ecf2); border-bottom: 1px solid var(--line, #dde3ec); font-size: 14px; line-height: 1.3;
}
.site-strip a { color: var(--ink2, #45526b); text-decoration: none; border-radius: 6px; }
.site-strip a:hover { color: var(--accent, #4b45d6); text-decoration: underline; text-underline-offset: 3px; }
.site-strip .ss-home { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink, #162033); }
.site-strip .mark { width: 22px; height: 22px; flex: none; }
.site-strip .ss-sep { color: var(--ink3, #75809a); }
.site-strip .ss-games { margin-inline-start: auto; }
.site-strip .ss-games span { font-size: .85em; margin-inline-start: 3px; }
.site-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #dde3ec); font-size: 14px; }
.site-foot a { color: var(--ink2, #45526b); text-underline-offset: 3px; }
.site-foot a:hover { color: var(--accent, #4b45d6); }
@media (max-width: 960px) {
  .site-strip { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
@media print { .site-strip, .site-foot { display: none !important; } }