/* Site header for the app pages (st, ms, paint).
   Same look as the header on index.html, but fully namespaced with "gh-"
   so it can't clash with the styles those pages already have.
   Colours follow the site's saved light/dark choice, or the system setting. */

:root { --gh-h: 56px; }                       /* header height, including its bottom border */
@media (max-height: 32rem) { :root { --gh-h: 44px; } }   /* phones on their side */

.gh {
  --gh-surface: #ffffff;
  --gh-border: #c9d5de;
  --gh-text: #13212b;
  --gh-muted: #44566a;
  --gh-accent: #0a5c8f;
  --gh-yellow: #f5b323;

  position: relative;
  z-index: 1000;
  flex: none;
  align-self: stretch;
  box-sizing: border-box;
  margin: 0;
  padding: var(--gh-safe, env(safe-area-inset-top, 0px)) var(--gh-safe-x, env(safe-area-inset-right, 0px)) 0 var(--gh-safe-x, env(safe-area-inset-left, 0px));
  background: var(--gh-surface);
  color: var(--gh-text);
  border-bottom: 1px solid var(--gh-border);
  font: 400 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}
.gh *, .gh *::before, .gh *::after { box-sizing: border-box; }

/* Use on pages that already pad for the notch (paint) */
.gh--inset { --gh-safe: 0px; --gh-safe-x: 0px; }

@media (prefers-color-scheme: dark) {
  html:not([data-gh="light"]) .gh {
    --gh-surface: #162129;
    --gh-border: #26343f;
    --gh-text: #e9eff3;
    --gh-muted: #a6b4bf;
    --gh-accent: #73c5f2;
  }
}
html[data-gh="dark"] .gh {
  --gh-surface: #162129;
  --gh-border: #26343f;
  --gh-text: #e9eff3;
  --gh-muted: #a6b4bf;
  --gh-accent: #73c5f2;
}

.gh :focus-visible { outline: 3px solid var(--gh-accent); outline-offset: 3px; border-radius: 2px; }
.gh-target:focus { outline: none; }

.gh-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  max-width: 72rem;
  min-height: calc(var(--gh-h) - 1px);
  margin: 0 auto;
  padding: 0 20px;
}

.gh .gh-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gh-text);
  text-decoration: none;
}
.gh .gh-brand::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--gh-yellow);
  border: 2px solid var(--gh-text);
  border-radius: 5px;
}

.gh .gh-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gh .gh-nav li { margin: 0; padding: 0; }
.gh .gh-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gh-text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.gh .gh-nav a:hover { border-bottom-color: var(--gh-muted); }
.gh .gh-nav a[aria-current] { border-bottom-color: var(--gh-yellow); }

.gh .gh-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  font: 700 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--gh-text);
  background: transparent;
  border: 2px solid var(--gh-muted);
  border-radius: 12px;
  box-shadow: none;
  opacity: 1;
  cursor: pointer;
}
.gh .gh-toggle:hover { border-color: var(--gh-accent); }

/* Skip link */
.gh-skip {
  position: absolute;
  left: 16px;
  top: -5rem;
  z-index: 1001;
  padding: 12px 16px;
  font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #13212b;
  background: #ffffff;
  border: 2px solid #0a5c8f;
  border-radius: 12px;
}
.gh-skip:focus { top: 8px; }

/* Short screens: slimmer header so the app keeps its room */
@media (max-height: 32rem) {
  .gh .gh-brand { min-height: 40px; font-size: 18px; }
  .gh .gh-nav a { min-height: 40px; }
  .gh .gh-toggle { min-height: 36px; }
}

/* The menu only collapses when JavaScript can reopen it.
   It opens as a drop-down over the page, so the app never jumps. */
@media (max-width: 48rem) {
  .gh-js .gh .gh-toggle { display: inline-flex; }
  .gh-js .gh .gh-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 8px 20px 12px;
    background: var(--gh-surface);
    border-bottom: 1px solid var(--gh-border);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
  .gh-js .gh .gh-nav.is-open { display: block; }
  .gh .gh-nav ul { flex-direction: column; align-items: flex-start; }
}