/* Shared base: reset, fonts, demo banner, feedback, utilities. */
@font-face {
  font-family: "Fraunces Hunt";
  src: url("/static/fonts/fraunces-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; line-height: 1.5; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0 0 0.6em; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px;
  background: #111; color: #fff; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 8px; }

:focus-visible { outline: 3px solid #1f3cff; outline-offset: 3px; }

/* ---- Demo banner + "Suggest a change" ---- */
.demo-banner {
  position: relative; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 12px; background: #111; color: #fff; font-size: 0.8rem; line-height: 1.3;
}
.demo-text { margin: 0; }
.fb { position: static; flex: none; }
.fb-toggle {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  min-height: 36px; padding: 4px 12px; border-radius: 999px;
  background: #ffe45c; color: #111; font-weight: 700; border: 2px solid #fff; white-space: nowrap;
}
.fb-toggle::-webkit-details-marker { display: none; }
.fb[open] .fb-toggle { background: #fff; }
.fb-panel {
  position: absolute; right: 8px; top: calc(100% + 6px); width: min(360px, calc(100vw - 16px));
  display: grid; gap: 8px; padding: 14px; background: #fff; color: #111;
  border: 3px solid #111; border-radius: 16px; box-shadow: 4px 4px 0 #111; font-size: 0.95rem;
}
.fb-panel label { font-weight: 700; }
.fb-panel textarea {
  width: 100%; padding: 10px; border: 2px solid #111; border-radius: 10px; background: #fffdf8; resize: vertical;
}
.fb-meta { margin: 0; font-size: 0.8rem; color: #444; }
.fb-send {
  min-height: 48px; padding: 8px 16px; border: 3px solid #111; border-radius: 12px;
  background: #ffe45c; color: #111; font-weight: 700; cursor: pointer; box-shadow: 3px 3px 0 #111;
}
.fb-send:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #111; }

/* ---- Flash messages ---- */
.flashes { display: grid; gap: 8px; margin-bottom: 14px; }
.flash { margin: 0; padding: 10px 14px; border-radius: 12px; border: 2px solid #111; background: #fff; font-weight: 600; }
.flash-success { background: #d9f7dc; }
.flash-error { background: #ffe0e0; }
.flash-info { background: #e5f0ff; }

.prewrap { white-space: pre-wrap; }
.center { text-align: center; }