/* ============================================================
   site.css — the shared design system.

   Was copied across index.html, about.html, portal.css and the portal app. Now it lives
   here once: tokens, base, buttons, the brand, the header shell, the footer. Page-specific
   styling (the landing hero, the portal app shell, the ambient motes) stays with its page.
   ============================================================ */

/* Display face, served from wwwroot rather than embedded so every page can share it. */
@font-face {
  font-family: "Nightmare Codehack";
  src: url("/font.otf") format("opentype");
  font-display: swap;
}

:root {
  --ink:        #17123a;
  --ink-soft:   #4a4370;
  --paper:      #fff6ec;
  --paper-2:    #ffffff;
  --line:       #17123a;
  --shadow:     #17123a;

  /* Never changes with theme — borders/shadows that sit ON a bright colour want dark ink
     in both modes. */
  --ink-fixed:  #17123a;

  --glow-text: 0 0 14px rgba(101, 68, 224, .40), 0 0 36px rgba(255, 92, 168, .24);
  --glow-chip: 0 0 26px rgba(255, 210, 63, .75), 0 0 58px rgba(255, 210, 63, .42);

  /* Ambient motes (landing only, but kept here so the tokens live in one place). */
  --p-core: rgba(101, 68, 224, .90);
  --p-halo: rgba(101, 68, 224, .34);
  --p-haze: rgba(150, 110, 255, .20);
  --p-peak: .55;

  --c-grape:    #6544e0;
  --c-bubble:   #ff5ca8;
  --c-tangerine:#ff9f1c;
  --c-mint:     #16c79a;
  --c-sky:      #3d8bfd;
  --c-lemon:    #ffd23f;

  --radius:     18px;
  --radius-sm:  12px;
  --border:     3px;
  --pop:        7px;

  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Nightmare Codehack", var(--font);

  /* Header glow used in place of a bottom border, once the page scrolls under it. */
  --glow-head: 0 3px 22px rgba(101, 68, 224, .34), 0 8px 40px rgba(255, 92, 168, .20);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:      #f6f1ff;
    --ink-soft: #b9b0dd;
    --paper:    #14102b;
    --paper-2:  #221c47;
    --line:     #efe9ff;
    --shadow:   rgba(239, 233, 255, .26);
    --glow-text: 0 0 10px rgba(239, 233, 255, .45), 0 0 28px rgba(123, 92, 255, .90),
                 0 0 58px rgba(255, 92, 168, .50);
    --glow-chip: 0 0 30px rgba(255, 210, 63, .85), 0 0 72px rgba(255, 210, 63, .50);
    --p-core: rgba(219, 203, 255, .95);
    --p-halo: rgba(123, 92, 255, .70);
    --p-haze: rgba(178, 140, 255, .42);
    --p-peak: .95;
    --glow-head: 0 3px 26px rgba(123, 92, 255, .58), 0 8px 44px rgba(255, 92, 168, .32);
  }
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.08; margin: 0; letter-spacing: -0.02em; font-weight: 900; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--c-grape); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1120px, 92vw); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -100px;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; border-radius: 0 0 12px 12px;
  font-weight: 800; z-index: 999; transition: top .15s;
}
.skip:focus { top: 0; }

/* ── Chunky shared bits ── */
.pop {
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--pop) var(--pop) 0 var(--shadow);
  background: var(--paper-2);
}

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font: inherit; font-weight: 800; font-size: 1rem;
  padding: .8rem 1.35rem;
  border: var(--border) solid var(--ink-fixed);
  border-radius: 999px;
  background: var(--c-lemon);
  color: #17123a;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink-fixed);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn:hover  { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink-fixed); }
.btn:active { transform: translate(2px, 2px);   box-shadow: 1px 1px 0 var(--ink-fixed); }
.btn--grape  { background: var(--c-grape);  color: #fff; }
.btn--bubble { background: var(--c-bubble); color: #17123a; }
.btn--ghost  { background: var(--paper-2); color: var(--ink); border-color: var(--line); box-shadow: 4px 4px 0 var(--shadow); }
.btn--ghost:hover  { box-shadow: 6px 6px 0 var(--shadow); }
.btn--ghost:active { box-shadow: 1px 1px 0 var(--shadow); }

.tag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem .85rem;
  border: 2px solid var(--line); border-radius: 999px;
  background: var(--paper-2);
}

/* ── Header (shell shared; each page fills the middle) ── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  transition: box-shadow .25s ease;
}
/* No border — a soft glow (the same palette as the headline) separates it on scroll. */
.site-head.scrolled { box-shadow: var(--glow-head); }

.head-in { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; }

.brand {
  display: flex; align-items: center; gap: .65rem;
  font-weight: 900; font-size: 1.05rem; text-decoration: none;
  letter-spacing: -0.02em; color: var(--ink);
}
.brand-mark {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; font-size: 1.2rem;
  border: var(--border) solid var(--ink-fixed); border-radius: 12px;
  background: var(--c-lemon); box-shadow: 3px 3px 0 var(--ink-fixed);
  transform: rotate(-4deg);
}
.brand-text { font-family: var(--font-display); font-weight: 400; font-size: 1.18rem; letter-spacing: .015em; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav a {
  padding: .5rem .8rem; border-radius: 999px;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  border: 2px solid transparent; color: var(--ink);
}
.nav a:hover { border-color: var(--line); background: var(--paper-2); }
.nav .btn { padding: .55rem 1rem; font-size: .9rem; }
.nav-auth { display: inline-flex; align-items: center; gap: .35rem; }
.nav .greet, .greet { color: var(--ink-soft); font-weight: 700; font-size: .9rem; padding: 0 .4rem; }

@media (max-width: 720px) {
  .nav a:not(.btn) { display: none; }
  .brand span.brand-text { font-size: 1.02rem; }
  .nav .greet { display: none; }
}
@media (max-width: 430px) { .brand span.brand-text { display: none; } }

/* ── Footer ── */
.site-foot {
  border-top: var(--border) solid var(--line);
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  padding: 2.2rem 0 2.5rem;
  color: var(--ink-soft);
  font-size: .92rem; font-weight: 500;
}
/* Stacked and centred on phones; brand column plus link columns once there's room. The grid
   always reserves four tracks, so when the contact column isn't configured the rest simply
   don't stretch to fill its space. */
.foot-grid { display: grid; gap: 1.5rem 2.5rem; text-align: center; }
@media (min-width: 720px) {
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; text-align: left; }
  .foot-blurb { max-width: 30ch; }
}
.foot-name { font-weight: 800; font-size: 1.02rem; color: var(--ink); }
.foot-blurb { margin-top: .3rem; }
.foot-head {
  margin: 0 0 .5rem;
  font-size: .76rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.foot-col a { display: block; margin-top: .35rem; font-weight: 600; text-decoration: none; }
.foot-col a:hover { text-decoration: underline; }
.foot-base {
  margin-top: 2rem; padding-top: 1.1rem;
  border-top: 2px solid var(--line);
  text-align: center;
}
.site-foot .whoami { opacity: .75; }
.site-foot a { color: var(--c-grape); }

/* The non-affiliation notice the Minecraft Usage Guidelines require, on every page. Quiet, but
   never hidden: "prominently" means present and legible, so this must not become display:none, a
   disclosure, or aria-hidden, however much it wants to be tucked away. */
.legal-note {
  max-width: 62ch;
  margin: 1.4rem auto 0;
  font-size: .74rem; line-height: 1.5;
  /* Muted by colour alone, never by opacity. At .72 this measured 4.06:1 against the light
     background, under the 4.5:1 floor, and a notice that is required to be prominent is the last
     place to be clever about contrast. The token on its own gives 8.4:1 light and 9.1:1 dark while
     still reading as small print. */
  color: var(--ink-soft);
  text-wrap: pretty;
}
.legal-shout { display: block; letter-spacing: .02em; }
.legal-note a { color: inherit; text-decoration: underline; }

/* Down the sidebar, where the column is 240-odd pixels wide and the note is the last thing in it. */
.sidebar .legal-note {
  max-width: none;
  margin: 14px 0 0; padding-top: 12px;
  border-top: 2px solid var(--line);
  font-size: .66rem;
}

/* On the auth pages the body is a centred card, so the note sits under it rather than inside it. */
.auth-legal, body > .legal-note { text-align: center; margin-bottom: 1.5rem; }
@media (prefers-color-scheme: dark) { .site-foot a { color: var(--c-lemon); } }