/* H0M3 — the menu-hub page. Minimal portal styling: a banner
   + a responsive grid of link tiles. Colours come from theme.css (the
   shared palette); base typography from common.css. When the shared
   page-chrome component lands (a later refactor step) the banner + tile
   styling can fold into it. */

body.home-shell {
  /* Full-bleed body; the 1.5em side gutter lives on the inner
     `.page-content` wrapper (common.css) so the server-warnings banner
     spans full width. `padding-bottom` keeps breathing room at the foot. */
  margin: 0;
  padding-bottom: 2em;
  min-height: 100vh;
}

/* Matrix-rain backdrop (driven by home.js). Fixed, full-viewport, dimmed,
   and behind every other element (z-index below the auto-stacked content).
   Decorative only — pointer-events off so it never intercepts clicks. The
   low opacity keeps the menu tiles legible over it; glyph + fade colours
   are themed from the stylix palette in JS. */
#matrix-rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.16;
  pointer-events: none;
}

.home-header {
  text-align: center;
  padding: 1.5em 0 0.5em;
}
.home-header .banner {
  font-size: 1.05em;
}

.home-main {
  max-width: 60em;
  margin: 1.5em auto 0;
}

.home-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  gap: 1em;
}

.home-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 1.1em 1.2em;
  border: 1px solid var(--purple-dim);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-elev) 55%, transparent);
  text-decoration: none;
  color: var(--fg);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.home-tile:hover {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 6%, transparent);
  box-shadow: 0 -2px 14px -6px color-mix(in srgb, var(--purple) 50%, transparent);
}

/* Icon + label share the top row of each tile; the description sits
   below. The icon is decorative (aria-hidden) — the label carries the
   accessible name. */
.home-tile-head {
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.home-tile-icon {
  font-size: 1.25em;
  line-height: 1;
  flex: none;
}
.home-tile-label {
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--purple);
}
.home-tile-desc {
  font-size: 0.85em;
  color: var(--muted);
}