/* ─── Root & body ────────────────────────────────── */
html {
  font-size: var(--text-base);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  scroll-behavior: smooth;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

/* ─── Skip navigation ────────────────────────────── */
.skip-nav {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-border-focus);
  color: var(--color-on-focus);
  font-weight: 700;
  font-size: var(--text-base);
  z-index: var(--z-toast);
  transform: translateY(-100%);
  transition: transform var(--transition-fast);
  border-radius: 0 0 var(--radius-md) 0;
}

.skip-nav:focus {
  transform: translateY(0);
}

/* ─── Visually hidden (but screen-reader accessible) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Main layout ────────────────────────────────── */
/* Mobile first: narrow gutters on phones, widened at the breakpoint below.
   max() keeps content clear of notches/rounded corners (viewport-fit=cover). */
main {
  padding: var(--space-3) max(var(--space-2), env(safe-area-inset-right)) var(--space-4) max(var(--space-2), env(safe-area-inset-left));
  max-width: 72rem;
  margin-inline: auto;
  width: 100%;
  container-type: inline-size;
}

@media (min-width: 48rem) {
  main {
    padding: var(--space-6) max(var(--space-4), env(safe-area-inset-right)) var(--space-6) max(var(--space-4), env(safe-area-inset-left));
  }
}

/* ─── Typography ─────────────────────────────────── */
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); font-weight: 700; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── Page header (site-wide) ────────────────────── */
.site-header {
  background: var(--color-chrome);
  color: var(--color-chrome-text);
  padding: max(var(--space-1), env(safe-area-inset-top)) max(var(--space-2), env(safe-area-inset-right)) var(--space-1) max(var(--space-2), env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  container-type: inline-size;
}

.site-header__logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-gold);
  white-space: nowrap;
}

/* ─── Hamburger button ───────────────────────────── */
.site-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: var(--space-1);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  background: none;
  border: none;
  color: var(--color-chrome-text);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.site-header__menu-btn:hover { background: var(--color-chrome-hover); }

.site-header__menu-icon {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background var(--transition-fast);
}

.site-header__menu-icon::before,
.site-header__menu-icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: currentColor;
  left: 0;
  transition: transform var(--transition-base), top var(--transition-base);
}

.site-header__menu-icon::before { top: -6px; }
.site-header__menu-icon::after  { top: 6px; }

.site-header__menu-btn.is-open .site-header__menu-icon { background: transparent; }
.site-header__menu-btn.is-open .site-header__menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.site-header__menu-btn.is-open .site-header__menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ─── Desktop nav ────────────────────────────────── */
.site-header__nav {
  display: none;
  gap: var(--space-1);
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}

.site-header__nav a:not(.btn),
.site-header__nav button:not(.btn) {
  color: var(--color-chrome-text);
  text-decoration: none;
  font-size: var(--text-sm);
  padding: var(--space-1) 0.75rem;
  border-radius: var(--radius-md);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  transition: background var(--transition-fast);
}

.site-header__nav a:not(.btn):hover,
.site-header__nav button:not(.btn):hover {
  background: var(--color-chrome-hover);
}

/* ─── Mobile menu panel ──────────────────────────── */
.site-header__mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-chrome);
  border-top: 1px solid var(--color-chrome-line);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  z-index: var(--z-overlay);
  box-shadow: var(--shadow-md);
}

.site-header__mobile-link {
  color: var(--color-chrome-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  transition: background var(--transition-fast);
}

.site-header__mobile-link:hover { background: var(--color-chrome-hover); }

/* ─── Breakpoint: show desktop nav, hide mobile ──── */
/* Signed-in nav (wordmark + 3 links + QR + theme toggle + sign out) fits on
   one row from ~50.5rem; below that it wrapped, so the menu button stays */
@container (min-width: 51rem) {
  .site-header__menu-btn    { display: none; }
  .site-header__nav         { display: flex; }
  .site-header__mobile-menu { display: none !important; }
}

/* ─── Footer ─────────────────────────────────────── */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  text-align: center;
  padding: var(--space-3) var(--space-2) max(var(--space-3), env(safe-area-inset-bottom));
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.site-footer__credit { margin-top: 0.25rem; }

.site-footer__credit a {
  color: var(--color-text);
  font-weight: 600;
  text-underline-offset: 0.2em;
  /* Inline links are short; pad the hit area toward a full tap target */
  display: inline-block;
  padding-block: 0.5rem;
}

/* ─── Flash messages ─────────────────────────────── */
.flash {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  border-left: 4px solid;
}

.flash--error   { background: var(--color-danger-bg); border-color: var(--color-danger);  color: var(--color-danger);  }
.flash--success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.flash--info    { background: var(--color-info-bg); border-color: var(--color-info);    color: var(--color-info);    }

/* ─── Page header section ────────────────────────── */
.page-header {
  margin-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}

.page-header__title {
  font-size: var(--text-xl);
  /* Takes the full row on phones, so actions drop below instead of squeezing it */
  flex: 1 1 12rem;
  min-width: 0;
}

/* ─── Section spacing ────────────────────────────── */
.section + .section { margin-top: var(--space-6); }

/* ─── Theme switch: soft reveal from click origin ── */
/* theme-toggle.js sets --theme-x/-y/-radius and the .theme-transition class,
   then swaps the theme inside document.startViewTransition(). */
@property --theme-reveal {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@keyframes theme-reveal {
  to { --theme-reveal: calc(var(--theme-radius) + var(--theme-feather)); }
}

html.theme-transition {
  --theme-feather: 12rem;
}

/* Suppress element transitions so the new snapshot is the final state */
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: none !important;
}

html.theme-transition::view-transition-old(root),
html.theme-transition::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html.theme-transition::view-transition-new(root) {
  mask-image: radial-gradient(
    circle at var(--theme-x) var(--theme-y),
    #000 calc(var(--theme-reveal) - var(--theme-feather)),
    transparent var(--theme-reveal)
  );
  animation: theme-reveal 750ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}