/* Site chrome: the reset, the backdrop layers, the header bar and its nav, and
   the footer. Every page loads this, so the furniture is identical everywhere
   and only the page-specific component sheet differs. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: radial-gradient(120% 60% at 50% -10%, rgb(94 240 163 / 0.12), transparent 70%), var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--amber); }
h1, h2, h3 { margin: 0; }
#field, #grid, #scan { position: fixed; inset: 0; pointer-events: none; }
#field { z-index: 0; opacity: 0.72; }
#grid {
  z-index: 0;
  background-image: linear-gradient(rgb(246 241 232 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(246 241 232 / 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
#scan { z-index: 9; background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 3px); }

.shell { position: relative; z-index: 1; max-width: 1120px; margin-inline: auto; padding: 0 var(--pad); }

header.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-top, 0px));
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid rgb(94 240 163 / 0.18);
  background: rgb(8 11 10 / 0.86);
  backdrop-filter: blur(12px);
}
.mark { display: flex; align-items: baseline; gap: 8px; color: var(--text); font-size: 0.98rem; font-weight: 600; }
.mark span { color: var(--green); text-shadow: 0 0 12px rgb(94 240 163 / 0.7); }
#burger {
  display: grid; gap: 5px; place-content: center;
  width: 52px; height: 44px; padding: 0;
  border: 1px solid rgb(94 240 163 / 0.28); border-radius: 8px;
  background: rgb(94 240 163 / 0.07); cursor: pointer;
}
#burger i { display: block; width: 18px; height: 2px; background: var(--green); }
nav#menu { display: none; }
nav#menu[data-open="true"] {
  display: grid; gap: 8px;
  position: absolute; inset: 100% 0 auto 0; z-index: 8;
  padding: 16px var(--pad) calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: rgb(10 15 13 / 0.97);
  backdrop-filter: blur(14px);
}
nav#menu a {
  display: flex; align-items: center; min-height: 52px; padding: 0 16px;
  border: 1px solid rgb(94 240 163 / 0.16); border-radius: 8px;
  color: var(--muted); font-size: 0.95rem; letter-spacing: 0.02em;
}
nav#menu a[aria-current="page"] { border-color: rgb(94 240 163 / 0.4); background: rgb(94 240 163 / 0.1); color: var(--green); }
.hero { padding: 26px 0 18px; }

footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 16px var(--pad) calc(24px + env(safe-area-inset-bottom, 0px));
  color: var(--ghost); font-size: 0.72rem;
}

@media (min-width: 900px) {
  #burger { display: none; }
  nav#menu, nav#menu[data-open="true"] {
    display: flex; position: static; inset: auto; gap: 6px;
    padding: 0; border: 0; background: none; backdrop-filter: none;
  }
  nav#menu a { min-height: 40px; padding: 0 14px; font-size: 0.8rem; }
}

a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }