/* Shared by the unlisted architecture pages (/architecture/lumen, /architecture/tally).
   Theme colors arrive as CSS variables set on .arch-root by the viewer. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Modak';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/modak-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body.arch-lumen { --gate-accent: #6E63FF; --gate-button: #5A4FE6; --gate-card: #161D26; --gate-line: #27314A; --gate-muted: #8593AC; background: #0A0E17; color: #EAF1F8; }
body.arch-tally { --arch-tab: #3444C4; --gate-accent: #6975DB; --gate-button: #3444C4; --gate-card: #121826; --gate-line: #253047; --gate-muted: #98A6A9; background: #080E1E; color: #F3F6F7; font-family: Manrope, Inter, system-ui, sans-serif; }
:focus-visible { outline: 2px solid var(--arch-accent, #8f86ff); outline-offset: 2px; border-radius: 4px; }
/* The marks and the date are toggled with the hidden attribute; class display rules mustn't win. */
[hidden] { display: none !important; }

/* Top bar: back to Data for Good, the product mark, and a switch between the two pages. */
.arch-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 16px;
  background: #0C1118; border-bottom: 1px solid #27314A;
  font-size: 12.5px;
}
.arch-home { margin-right: 10px; color: #8593AC; font-weight: 600; text-decoration: none; }
.arch-home:hover { color: #EAF1F8; }
.arch-mark { display: inline-flex; align-items: center; margin-right: 8px; color: #EAF1F8; }
.arch-mark-tally { gap: 7px; font-family: Manrope, Inter, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.arch-mark-tally img { display: block; border-radius: 5px; }
.arch-tab {
  padding: 5px 13px; border-radius: 999px; border: 1px solid #27314A;
  color: #8593AC; font-weight: 600; text-decoration: none;
}
.arch-tab:hover { color: #EAF1F8; }
.arch-tab[aria-current="page"] { background: var(--arch-tab, #6E63FF); border-color: var(--arch-tab, #6E63FF); color: #fff; font-weight: 700; }
.arch-updated { margin-left: auto; color: #8593AC; font-size: 11.5px; font-family: ui-monospace, Menlo, monospace; }

.arch-main { max-width: 1320px; margin: 0 auto; padding: 18px 16px 40px; }

/* The password gate (entry.jsx). Nothing is stored: a reload asks again. */
.arch-gate {
  max-width: 440px; margin: 12vh auto 0; padding: 28px 26px 22px;
  background: var(--gate-card); border: 1px solid var(--gate-line); border-radius: 14px;
}
.arch-gate-title { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.arch-gate-lead { margin: 0 0 20px; color: var(--gate-muted); font-size: 14px; line-height: 1.5; }
.arch-gate-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
.arch-gate-row { display: flex; gap: 8px; }
.arch-gate-input {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--gate-line); background: rgba(0, 0, 0, 0.25); color: inherit; font: inherit; font-size: 15px;
}
.arch-gate-input:focus-visible { outline-offset: 1px; border-color: var(--gate-accent); }
.arch-gate-input[aria-invalid="true"] { border-color: #F2777A; }
.arch-gate-button {
  flex: 0 0 auto; padding: 10px 18px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--gate-button); color: #fff; font: inherit; font-size: 14px; font-weight: 700;
}
.arch-gate-button:disabled { opacity: 0.7; cursor: progress; }
.arch-gate-message { min-height: 1.4em; margin: 8px 0 12px; color: #F2777A; font-size: 13px; }
.arch-gate-help { margin: 0; color: var(--gate-muted); font-size: 12.5px; }
.arch-gate-help a { color: inherit; }
@media (max-width: 480px) {
  .arch-gate { margin-top: 6vh; padding: 22px 18px 18px; }
  .arch-updated { margin-left: 0; flex-basis: 100%; }
}

/* Behaviour the viewer used to put in an inline <style>. */
@keyframes archflow { to { stroke-dashoffset: -24; } }
.arch-btn { transition: all .15s ease; }
.arch-btn:hover { border-color: var(--arch-accent); color: var(--arch-text); }
.arch-node { transition: opacity .2s ease; }
.arch-node:hover .arch-card { stroke: var(--arch-accent); }
.arch-root text { user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .arch-hot { animation: none !important; }
  .arch-btn, .arch-node { transition: none; }
}

/* The Lumen wordmark (see lumen-logo.js): keyframes and styles moved out of the component. */
@keyframes lumen-beam {
  0% { transform: rotateY(0deg); opacity: .62; }
  25% { transform: rotateY(90deg); opacity: .95; }
  50% { transform: rotateY(180deg); opacity: .62; }
  75% { transform: rotateY(270deg); opacity: .24; }
  100% { transform: rotateY(360deg); opacity: .62; }
}
.lumen-word { font-family: Modak, cursive; line-height: 1; letter-spacing: -0.03em; color: inherit; white-space: nowrap; display: inline-block; }
.lumen-l { position: relative; display: inline-block; }
.lumen-svg { position: absolute; left: -0.126em; top: -0.255em; width: 1em; height: 0.74em; overflow: visible; pointer-events: none; }
.lumen-beam-group { transform-origin: 36.5px 43px; transform-box: view-box; transform: scaleX(2.8) scaleY(5.7); }
.lumen-beam { transform-origin: 36.5px 43px; transform-box: view-box; opacity: .62; animation: lumen-beam 1.7s linear 1 both; }
.lumen-beam.is-replay { animation: none; }
@media (prefers-reduced-motion: reduce) { .lumen-beam { animation: none !important; } }