/* codex-reset.com — "a CRT on a desk at night"
   P1 phosphor green + P3 amber on green-black; JetBrains Mono everywhere. */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("jetbrains-mono-latin.woff2") format("woff2");
}

:root {
  --ink: #0b100e;
  --crt: #060a09;
  --panel: #0e1512;
  --p1: #41ff8b;
  --p1-dim: #2ecc70;
  --p3: #ffb454;
  --red: #ff5f56;
  --fg: #d6e2da;
  --dim: #8fa39a;
  /* 5.4:1 on --ink. The previous #5c6e66 read nicer but sat at 3.5:1, failing
     WCAG AA for the 11–12px text that uses it (terminal title, feed times,
     freshness lines) — verified failing in a Lighthouse mobile audit. */
  --faint: #798c84;
  --line: #1d2a24;
  --mono: "JetBrains Mono", "PingFang SC", "Hiragino Sans GB", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Microsoft YaHei", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --glow-green: 0 0 18px rgba(65, 255, 139, 0.35);
  --maxw: 1080px;
  --icon-activity: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-7 4 14 2.5-7h5'/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 12h14M14 7l5 5-5 5'/%3E%3C/svg%3E");
  --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M18 13v5a1 1 0 01-1 1H6a1 1 0 01-1-1V7a1 1 0 011-1h5'/%3E%3C/svg%3E");
  --icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 8.8c0 5.5-8.8 10.4-8.8 10.4S3.2 14.3 3.2 8.8A4.6 4.6 0 0112 6.9a4.6 4.6 0 018.8 1.9Z'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --icon-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 17-5-5 5-5M20 18c0-4.4-3.6-8-8-8H4'/%3E%3C/svg%3E");
  --icon-repost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 3 4 4-4 4M3 7h18M7 21l-4-4 4-4M21 17H3'/%3E%3C/svg%3E");
  --icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l2-2a5 5 0 0 0-7-7l-1.2 1.2M14 11a5 5 0 0 0-7.5-.5l-2 2a5 5 0 0 0 7 7l1.2-1.2'/%3E%3C/svg%3E");
  --icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7v5h-5M4 17v-5h5M6.1 8A7 7 0 0 1 18.6 6L20 8M4 16l1.4 2A7 7 0 0 0 17.9 16'/%3E%3C/svg%3E");
  --icon-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='6' rx='1'/%3E%3Crect x='4' y='14' width='16' height='6' rx='1'/%3E%3Cpath d='M8 7h.01M8 17h.01M12 7h5M12 17h5'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.6 2.8 8 7 10 4.2-2 7-5.4 7-10V6l-7-3ZM9 12h6'/%3E%3C/svg%3E");
  --icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-1.5A3.5 3.5 0 0 0 12.5 15h-5A3.5 3.5 0 0 0 4 18.5V20M10 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM17 11a3 3 0 0 0 0-6M20 20v-1.5a3.5 3.5 0 0 0-2.5-3.4'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 4h4.1l3.8 5.1L16.8 4h2.7l-5.8 6.8L20 20h-4.1l-4.2-5.7L6.8 20H4.1l6.3-7.4L4.5 4Zm3 1.8 9.3 12.4H17L7.7 5.8h-.2Z'/%3E%3C/svg%3E");
  --icon-telegram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z'/%3E%3C/svg%3E");
  --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
  /* Brand marks ship filled, the way --icon-x does; the stroked lucide set above
     is for UI affordances. The eyes are cut out with evenodd rather than drawn
     as a second colour, because every icon here renders as a mask. */
  --icon-discord: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill-rule='evenodd'%3E%3Cpath d='M8.9 4.7C7.2 5 5.6 5.5 4.1 6.2 2 9.6 1.2 13.2 1.6 16.7 3.2 18 5.1 18.9 7.1 19.4L8.1 17.9C7.4 17.6 6.8 17.3 6.2 16.9L6.6 16.5C10 18.1 14 18.1 17.4 16.5L17.8 16.9C17.2 17.3 16.6 17.6 15.9 17.9L16.9 19.4C18.9 18.9 20.8 18 22.4 16.7 22.8 13.2 22 9.6 19.9 6.2 18.4 5.5 16.8 5 15.1 4.7L14.8 5.4C13 5.1 11 5.1 9.2 5.4ZM8.6 14.7C7.6 14.7 6.8 13.8 6.8 12.7 6.8 11.6 7.6 10.7 8.6 10.7 9.6 10.7 10.4 11.6 10.4 12.7 10.4 13.8 9.6 14.7 8.6 14.7ZM15.4 14.7C14.4 14.7 13.6 13.8 13.6 12.7 13.6 11.6 14.4 10.7 15.4 10.7 16.4 10.7 17.2 11.6 17.2 12.7 17.2 13.8 16.4 14.7 15.4 14.7Z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--mono);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(65, 255, 139, 0.05), transparent 60%),
    var(--ink);
  color: var(--fg);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}

html[lang^="zh"] body,
html[lang^="ja"] body {
  line-height: 1.75;
}

#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

a {
  color: var(--p1);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ui-icon,
.icon-link::before,
.event-link::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  vertical-align: -0.12em;
}

.ui-icon[data-icon="activity"] {
  --icon: var(--icon-activity);
}

.ui-icon[data-icon="clock"] {
  --icon: var(--icon-clock);
}

.ui-icon[data-icon="heart"] {
  --icon: var(--icon-heart);
}

.ui-icon[data-icon="info"] {
  --icon: var(--icon-info);
}

.ui-icon[data-icon="reply"] {
  --icon: var(--icon-reply);
}

.ui-icon[data-icon="repost"] {
  --icon: var(--icon-repost);
}

.ui-icon[data-icon="link"] {
  --icon: var(--icon-link);
}

.ui-icon[data-icon="refresh"] {
  --icon: var(--icon-refresh);
}

.ui-icon[data-icon="server"] {
  --icon: var(--icon-server);
}

.ui-icon[data-icon="shield"] {
  --icon: var(--icon-shield);
}

.ui-icon[data-icon="users"] {
  --icon: var(--icon-users);
}

.ui-icon[data-icon="x"] {
  --icon: var(--icon-x);
}

.ui-icon[data-icon="telegram"] {
  --icon: var(--icon-telegram);
}

.ui-icon[data-icon="bell"] {
  --icon: var(--icon-bell);
}

.ui-icon[data-icon="discord"] {
  --icon: var(--icon-discord);
}

.icon-link::before,
.event-link::before {
  content: "";
  --icon: var(--icon-external);
}

.icon-link[href^="/"]::before {
  --icon: var(--icon-arrow-right);
}

.icon-link[href*="x.com/"]::before,
.event-link[href*="x.com/"]::before {
  --icon: var(--icon-x);
}

:focus-visible {
  outline: 2px solid var(--p1);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: rgba(65, 255, 139, 0.25);
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(11, 16, 14, 0.82);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
}

.nav .brand {
  gap: 9px;
  font-size: 16px;
}

.brand .brand-initial {
  color: var(--p1);
}

.brand .tilde {
  color: var(--p1);
}

.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
}

.nav-links {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.nav-links a {
  color: var(--dim);
  font-size: 13px;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--p1);
  text-decoration: none;
}

.nav-spacer {
  flex: 1;
}

.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

/* status pill — footer-only since the launch entry */
.pill {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px 3px 22px;
  color: var(--dim);
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}

.pill::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  translate: 0 -50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
}

.pill[data-level="ok"]::before {
  background: var(--p1);
  box-shadow: 0 0 8px rgba(65, 255, 139, 0.8);
}

.pill[data-level="warn"]::before {
  background: var(--p3);
  box-shadow: 0 0 8px rgba(255, 180, 84, 0.8);
}

.pill[data-level="bad"]::before {
  background: var(--red);
  box-shadow: 0 0 8px rgba(255, 95, 86, 0.8);
}

.palette-trigger {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.palette-trigger:hover {
  color: var(--p1);
  border-color: var(--p1-dim);
}

/* ---------- hero ---------- */

.hero {
  padding: 28px 0 30px;
  text-align: center;
}

h1 {
  font-size: clamp(1.65rem, 4.6vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}

h1 .accent {
  color: var(--p1);
  text-shadow: var(--glow-green);
}

.tagline {
  margin: 10px auto 0;
  max-width: 62ch;
  color: var(--dim);
  text-wrap: pretty;
}

.meta-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--faint);
  letter-spacing: 0.08em;
}

/* Long explainer copy folds behind a small ⓘ disclosure; the panel expands
   in flow (FAQ precedent) — the global details/summary chrome is stripped. */
.info-tip {
  border: 0;
  background: transparent;
  overflow: visible;
  margin: 8px auto 0;
  max-width: 62ch;
}

.info-tip summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--faint);
}

.info-tip summary::before {
  content: none;
}

.info-tip p {
  padding: 6px 0 0;
}

.reset-since {
  margin: 12px auto 0;
}

.reset-since-label {
  font-size: 12px;
  color: var(--faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reset-since-relative {
  margin-top: 2px;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--p1);
  text-shadow: var(--glow-green);
}

.reset-since-abs-line {
  margin-top: 2px;
  font-size: 12px;
  color: var(--dim);
}

.stat-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.stat-chip {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  color: var(--dim);
}

.reset-since-history {
  margin-top: 8px;
  font-size: 12px;
}

/* ---------- terminal card (signature) ---------- */

.term {
  margin: 12px auto 0;
  max-width: 720px;
  text-align: left;
  background: var(--crt);
  border: 1px solid rgba(65, 255, 139, 0.2);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 46px rgba(65, 255, 139, 0.1);
  overflow: hidden;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(14, 21, 18, 0.8);
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.dot.red {
  background: var(--red);
}

.dot.amber {
  background: var(--p3);
}

.dot.green {
  background: var(--p1);
}

.term-title {
  margin-left: 8px;
  font-size: 12px;
  color: var(--faint);
}

.term-screen {
  position: relative;
  padding: 20px 22px 18px;
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(65, 255, 139, 0.045), transparent 55%),
    var(--crt);
}

.term-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.022) 0 1px,
    transparent 1px 3px
  );
}

.term-line {
  color: var(--dim);
  font-size: 14px;
}

.term-line .ps1 {
  color: var(--p1);
  font-weight: 700;
}

.caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  translate: 0 3px;
  background: var(--p1);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.gauges {
  display: grid;
  gap: 18px;
  padding: 18px 0 14px;
  transition: opacity 0.5s ease, translate 0.5s ease;
}

[data-intro="typing"] .gauges {
  opacity: 0;
  translate: 0 8px;
}

.gauge {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.06em;
}

.gauge-head b {
  color: var(--fg);
  font-weight: 700;
}

.gauge-head b a {
  color: inherit;
  text-decoration-color: rgba(255, 180, 84, 0.55);
  text-underline-offset: 3px;
}

.gauge-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 0;
  font-size: 16px;
  white-space: nowrap;
}

.bar {
  flex: none;
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  letter-spacing: 1px;
  color: var(--p1);
  text-shadow: 0 0 10px rgba(65, 255, 139, 0.45);
  font-size: 15px;
}

.gauge[data-state="idle"] .bar {
  color: var(--faint);
  text-shadow: none;
}

.gauge[data-state="soon"] .bar {
  color: var(--p3);
  text-shadow: 0 0 10px rgba(255, 180, 84, 0.4);
}

.gauge[data-state="clear"] .bar {
  color: var(--p1);
  animation: settle 1.2s ease;
}

@keyframes settle {
  0% {
    text-shadow: 0 0 26px rgba(65, 255, 139, 0.95);
  }
  100% {
    text-shadow: 0 0 10px rgba(65, 255, 139, 0.45);
  }
}

.pct {
  color: var(--dim);
  font-size: 13px;
  min-width: 4ch;
}

.gauge-sub {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  color: var(--dim);
  font-size: 13px;
}

.count {
  font-size: clamp(1.35rem, 3.4vw, 1.8rem);
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.gauge[data-state="clear"] .count {
  color: var(--p1);
  text-shadow: var(--glow-green);
}

.gauge[data-state="idle"] .count {
  color: var(--faint);
  font-size: 14px;
  font-weight: 400;
}

.clockline {
  font-variant-numeric: tabular-nums;
}

.gauge-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* bracket buttons */
.btn {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--p1);
  background: transparent;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease, text-shadow 0.15s ease;
}

.btn:hover {
  background: rgba(65, 255, 139, 0.09);
  text-shadow: var(--glow-green);
}

.btn[data-on="true"] {
  color: var(--ink);
  background: var(--p1);
  font-weight: 700;
  text-shadow: none;
}

.btn:disabled {
  color: var(--faint);
  cursor: not-allowed;
  text-shadow: none;
  background: none;
}

.btn.amber {
  color: var(--p3);
}

.btn.amber:hover {
  background: rgba(255, 180, 84, 0.09);
  text-shadow: 0 0 14px rgba(255, 180, 84, 0.5);
}

.btn.dim {
  color: var(--dim);
}

.tools {
  margin-top: 16px;
  display: flex;
  gap: 6px 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.hint-line {
  margin-top: 10px;
  text-align: center;
  color: var(--faint);
  font-size: 12px;
}

.hint-line kbd {
  font-family: var(--mono);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  color: var(--dim);
}

/* ---------- sections ---------- */

section {
  padding: 58px 0 8px;
  scroll-margin-top: 64px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--p3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 0 0 34px;
}

.eyebrow::after {
  flex: 1;
}

h2 {
  margin-top: 10px;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.005em;
}

.section-intro {
  margin-top: 10px;
  max-width: 74ch;
  color: var(--dim);
}

/* ---------- radar ---------- */

.signal {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 13.5px;
  color: var(--dim);
  background: var(--panel);
}

.signal[data-state="active"] {
  border-color: rgba(65, 255, 139, 0.5);
  background: rgba(65, 255, 139, 0.07);
  color: var(--fg);
  box-shadow: 0 0 30px rgba(65, 255, 139, 0.12);
  animation: pulse 2.4s ease-in-out infinite;
}

.signal[data-state="active"] strong {
  color: var(--p1);
}

.signal-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -9px;
  margin-right: 9px;
  border: 1px solid rgba(255, 180, 84, 0.45);
}

/* A live commitment is a warning, not a steady-state reading: the banner leaves
   the console's green and takes the same amber the headline figure uses. */
.signal[data-signal-kind="preview"] {
  border-color: rgba(255, 180, 84, 0.55);
  background: rgba(255, 180, 84, 0.08);
  box-shadow: 0 0 30px rgba(255, 180, 84, 0.14);
}

.signal[data-signal-kind="preview"] strong {
  color: var(--p3);
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 44px rgba(65, 255, 139, 0.2);
  }
}

.radar-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 26px;
  align-items: start;
}

.radar-grid > * {
  min-width: 0;
}

.feed-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.feed-title {
  font-size: 13px;
  color: var(--dim);
}

.filters {
  display: flex;
  gap: 6px;
  margin-left: auto;
  max-width: 100%;
  overflow-x: auto;
}

.filter {
  font-family: var(--mono);
  font-size: 12px;
  background: none;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
}

.filter[aria-pressed="true"] {
  color: var(--ink);
  background: var(--p1);
  border-color: var(--p1);
  font-weight: 700;
}

.feed-list,
.timeline {
  list-style: none;
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.feed-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--panel);
  transition: border-color 0.15s ease;
}

.feed-item:hover {
  border-color: var(--faint);
}

.feed-item[data-kind="signal"] {
  border-color: rgba(65, 255, 139, 0.45);
  background: rgba(65, 255, 139, 0.05);
}

.feed-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  border-radius: 4px;
  padding: 1px 7px;
  color: var(--dim);
  border: 1px solid var(--line);
}

.chip[data-kind="signal"] {
  color: var(--ink);
  background: var(--p1);
  border-color: var(--p1);
}

.chip[data-kind="limits"] {
  color: var(--p3);
  border-color: rgba(255, 180, 84, 0.5);
}

.chip[data-kind="codex"] {
  color: var(--fg);
}

.feed-time {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--faint);
}

.feed-text {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.feed-text a {
  color: var(--p1-dim);
}

.feed-stats {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11.5px;
  color: var(--faint);
}

.feed-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.feed-empty {
  color: var(--faint);
  font-size: 13px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.feed-meta {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.05em;
}

.feed-meta[data-stale="true"] {
  color: var(--p3);
}

.timeline-box h3 {
  font-size: 13px;
  color: var(--dim);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.event {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 12px;
  font-size: 12.5px;
}

.event[data-type="reset"] {
  border-left-color: var(--p1);
}

.event[data-type="boost"],
.event[data-type="promo"],
.event[data-type="credits"] {
  border-left-color: var(--p3);
}

.event-date {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.event-type {
  color: var(--p3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event[data-type="reset"] .event-type {
  color: var(--p1);
}

.event-summary {
  min-width: 0;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.event > .translation-meta {
  grid-column: 1 / -1;
  min-width: 0;
}

.timeline-stat {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--faint);
}

/* ---------- limits ---------- */

.cards {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 16px;
}

.card h3 {
  font-size: 13.5px;
  color: var(--p1);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.card p {
  font-size: 13.5px;
  color: var(--dim);
}

.table-wrap {
  margin-top: 22px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 560px;
}

th,
td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--p3);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(255, 180, 84, 0.04);
}

tr:last-child td {
  border-bottom: none;
}

td:first-child {
  color: var(--fg);
  font-weight: 700;
  white-space: nowrap;
}

td {
  color: var(--dim);
}

.table-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--faint);
  max-width: 78ch;
}

.table-note a {
  color: var(--p1-dim);
}

/* ---------- faq ---------- */

.faq-list {
  margin-top: 18px;
  display: grid;
  gap: 8px;
  max-width: 820px;
}

.faq-list .icon-link {
  display: inline;
  overflow-wrap: anywhere;
}

details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  display: flex;
  gap: 10px;
  align-items: baseline;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: ">";
  color: var(--p1);
  font-weight: 700;
  transition: rotate 0.16s ease;
}

details[open] summary::before {
  rotate: 90deg;
}

details p {
  padding: 0 16px 14px 34px;
  color: var(--dim);
  font-size: 13.5px;
}

/* ---------- footer ---------- */

footer {
  margin-top: 70px;
  border-top: 1px solid var(--line);
  padding: 26px 0 40px;
  font-size: 12.5px;
  color: var(--faint);
}

footer .comment {
  display: block;
  margin-top: 4px;
}

footer .comment::before {
  content: "# ";
  color: var(--p1-dim);
}

.footer-links {
  margin-top: 14px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--dim);
}

/* Second row: how to reach the project (contact address, official accounts),
   kept apart from this site's own pages above it. */
.footer-links + .footer-links {
  margin-top: 8px;
}

/* ---------- dialogs ---------- */

dialog {
  font-family: var(--mono);
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  max-width: min(92vw, 560px);
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

dialog::backdrop {
  background: rgba(4, 7, 6, 0.72);
  backdrop-filter: blur(3px);
}

.dlg-inner {
  padding: 20px 22px;
}

dialog h2,
dialog h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.field {
  display: grid;
  gap: 6px;
  margin: 14px 0;
}

.field label {
  font-size: 12.5px;
  color: var(--dim);
}

input[type="datetime-local"],
.palette-input {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg);
  background: var(--crt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  width: 100%;
}

input[type="datetime-local"]:focus,
.palette-input:focus {
  outline: 2px solid var(--p1);
  outline-offset: 1px;
}

.dlg-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 6px;
}

.error {
  color: var(--red);
  font-size: 12.5px;
  min-height: 1.2em;
}

.legal-body {
  max-height: min(64vh, 560px);
  overflow-y: auto;
  padding-right: 6px;
}

.legal-body p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--dim);
}

.legal-body p:first-of-type {
  color: var(--fg);
}

.dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* palette */
#dlg-palette {
  max-width: min(92vw, 480px);
}

.palette-list {
  list-style: none;
  margin-top: 10px;
  max-height: 300px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}

.palette-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  min-width: 0;
}

.palette-list li[aria-selected="true"] {
  background: rgba(65, 255, 139, 0.1);
}

.palette-name {
  color: var(--fg);
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

.palette-hint {
  color: var(--faint);
  font-size: 12px;
  margin-left: auto;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

.palette-empty {
  color: var(--faint);
  cursor: default;
}

.translation-meta {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start;
  margin-top: 8px; color: var(--faint); font-size: 11.5px; line-height: 1.5;
}

.translation-badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px;
  border: 1px solid rgba(255, 180, 84, 0.45); border-radius: 999px;
  background: rgba(255, 180, 84, 0.08); color: var(--p3);
  letter-spacing: 0.04em; text-transform: uppercase;
}

.translation-original { min-width: 0; }

.translation-original summary {
  cursor: pointer; color: var(--fg); list-style: none;
}

.translation-original summary::-webkit-details-marker { display: none; }

.translation-original p {
  margin-top: 6px; max-width: 72ch; color: var(--dim); overflow-wrap: anywhere;
}

.translation-source { color: var(--p1-dim); }

.locale-suggestion {
  max-width: var(--maxw); margin: 10px auto 0; padding: 0 20px;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
}

.locale-suggestion-copy {
  min-width: 0; color: var(--dim); font-size: 12.5px; overflow-wrap: anywhere;
}

.locale-suggestion-actions {
  display: inline-flex; gap: 8px; align-items: center;
}

.locale-suggestion-dismiss {
  border: 1px solid var(--line); border-radius: 6px; background: transparent;
  color: var(--faint); cursor: pointer; padding: 2px 8px; font: inherit;
}

.locale-suggestion-dismiss:hover {
  color: var(--fg); border-color: var(--faint);
}

[data-locale-switcher] {
  display: flex; flex-wrap: wrap; gap: 8px; min-width: 0;
}

[data-locale-link] { white-space: nowrap; }

/* ---------- integration additions ---------- */

.hero-stats {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--p1-dim);
  letter-spacing: 0.06em;
}

.gauge[data-state="banked"] .bar {
  color: var(--p3);
  text-shadow: 0 0 10px rgba(255, 180, 84, 0.4);
}

.gauge[data-state="banked"] .count {
  color: var(--p3);
}

.gauge[data-state="banked"][data-urgency="warning"] .bar,
.gauge[data-state="banked"][data-urgency="urgent"] .bar {
  color: var(--red);
  text-shadow: 0 0 10px rgba(255, 95, 86, 0.45);
}

.gauge[data-state="banked"][data-urgency="warning"] .count,
.gauge[data-state="banked"][data-urgency="urgent"] .count {
  color: var(--red);
}

.gauge[data-state="expired"] .bar {
  color: var(--faint);
  text-shadow: none;
}

.gauge[data-state="expired"] .count {
  color: var(--red);
  font-size: 1rem;
}

.chip[data-kind="banked"] {
  color: var(--ink);
  background: var(--p3);
  border-color: var(--p3);
}

.banked-state,
.event-banked-state {
  color: var(--faint);
  font-weight: 600;
}

.event-banked-state {
  display: block;
  margin-top: 1px;
  font-size: 9.5px;
  letter-spacing: 0;
}

.chip[data-kind="boost"] {
  color: var(--p3);
  border-color: rgba(255, 180, 84, 0.6);
}

.feed-item[data-kind="banked"],
.feed-item[data-kind="boost"] {
  border-color: rgba(255, 180, 84, 0.35);
}

.callout {
  margin-top: 22px;
  border: 1px solid rgba(255, 180, 84, 0.4);
  border-left-width: 3px;
  border-radius: 10px;
  background: rgba(255, 180, 84, 0.05);
  padding: 13px 16px;
  font-size: 13px;
  color: var(--dim);
  max-width: 86ch;
}

.callout b {
  color: var(--p3);
}

.table-title {
  margin-top: 26px;
  font-size: 13px;
  color: var(--dim);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.hist-box {
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 16px 18px;
}

.hist-box h3 {
  font-size: 14px;
  color: var(--fg);
  letter-spacing: 0.02em;
}

.hist-box .section-intro {
  font-size: 12.5px;
  margin-top: 6px;
}

.hist {
  margin-top: 14px;
}

.hist svg {
  width: 100%;
  height: 120px;
  display: block;
}

.dlg-help {
  font-size: 12.5px;
  color: var(--dim);
  margin: 6px 0 2px;
}

/* ---------- a11y helpers ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 50;
  background: var(--p1);
  color: var(--ink);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 0 0 8px 8px;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .radar-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .filters {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 14px;
  }

  .hero {
    padding-top: 38px;
  }

  .term-screen {
    padding: 16px 14px 14px;
  }

  .gauge-row {
    gap: 8px;
  }

  .bar {
    font-size: 13px;
  }

  .count {
    font-size: 1.25rem;
  }

  .nav-links {
    display: none;
  }

  .event {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .event-type {
    display: none;
  }
}

/* ---------- forecast bridge ---------- */

.forecast-console {
  max-width: 720px;
  margin: 16px auto -12px;
  border: 1px solid rgba(65, 255, 139, 0.22);
  border-radius: 9px;
  background: rgba(6, 10, 9, 0.86);
  padding: 10px 14px;
  text-align: left;
  box-shadow: 0 0 24px rgba(65, 255, 139, 0.06);
}

/* A live signal (quote+avatar) pushed the weekly gauge past the fold:
   spend padding, not content; desktop-active only. */
@media (min-width: 481px) {
  #forecast[data-signal-state="active"],
  #forecast[data-signal-state="active"] ~ .term {
    margin-top: 6px;
  }

  #forecast[data-signal-state="active"] ~ .term .term-screen {
    padding-top: 10px;
  }
}

.hero h1 {
  max-width: none;
  margin-inline: auto;
  font-family: var(--mono);
}

.forecast-console-head,
.forecast-inline {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.forecast-console-head {
  justify-content: space-between;
  color: var(--p1);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.forecast-console .signal {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 1 1 100%;
  min-width: 0;
}

.forecast-console .signal > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forecast-console .signal > strong,
.forecast-console .signal > a {
  flex: none;
  white-space: nowrap;
}

.forecast-console .signal[data-state="active"] {
  display: grid;
  grid-template-columns: 36px 22px minmax(0, 1fr) auto;
  grid-template-areas: "avatar mark quote quote" "avatar meta meta source";
  gap: 4px 9px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(255, 180, 84, 0.46);
  border-radius: 8px;
  color: var(--fg);
  background: rgba(255, 180, 84, 0.08);
  box-shadow: 0 0 28px rgba(255, 180, 84, 0.12);
  animation: none;
}

.forecast-console[data-signal-state="active"] #forecast-mode {
  display: none;
}

.forecast-console .signal-avatar {
  grid-area: avatar;
  width: 34px;
  height: 34px;
  margin: 0;
  vertical-align: 0;
}

.signal-alert-mark {
  grid-area: mark;
}

.signal-alert-mark {
  font-size: 16px;
  line-height: 1.25;
}

.forecast-console .signal > .signal-evidence-quote {
  grid-area: quote;
  display: block;
  min-width: 0;
  overflow: visible;
  -webkit-line-clamp: unset;
  color: var(--fg);
  /* Tibo's own words are the evidence the whole console argues from, so they
     read at body size rather than as a caption under the verdict. */
  font-size: 15px;
  line-height: 1.5;
  white-space: normal;
}

.signal-evidence-meta {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  color: var(--dim);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-evidence-source {
  grid-area: source;
  align-self: center;
  white-space: nowrap;
}

.forecast-inline {
  margin-top: 9px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 0;
  border-top: 1px solid rgba(65, 255, 139, 0.14);
  color: var(--dim);
  font-size: 13px;
}

/* The vote entry rides the spare right half of the RESET CHANCE label row:
   the 320px first-viewport budget has no room for a new line in this card. */
.forecast-vote-link {
  margin-left: auto;
  letter-spacing: 0.04em;
}

.forecast-stat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 13px 16px 8px;
  border-right: 1px solid rgba(65, 255, 139, 0.12);
}

.forecast-stat:first-child {
  padding-left: 0;
}

.forecast-stat:last-child {
  padding-right: 0;
  border-right: 0;
}

.forecast-label,
.forecast-sub {
  display: flex;
  align-items: center;
}

.forecast-label {
  gap: 6px;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.forecast-label .ui-icon {
  color: var(--p1-dim);
  font-size: 13px;
}

.forecast-sub {
  color: var(--faint);
  font-size: 11px;
  line-height: 1.35;
}

.forecast-window-stat > strong,
.forecast-confidence-stat > strong {
  color: var(--fg);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.2;
}

.forecast-confidence-stat > strong {
  color: var(--p3);
  text-transform: capitalize;
}

.forecast-confidence-stat > strong[data-state="high"],
.forecast-confidence-stat > strong[data-state="official"] {
  color: var(--p1);
}

.forecast-chance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* A live commitment leads with the same figure #alerts publishes. The cadence
   pair stays visible but stops competing for the eye: it is the model's answer
   to a question Tibo has already answered himself. */
.forecast-commitment-lead {
  display: none;
}

[data-lead="commitment"] .forecast-commitment-lead {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.forecast-commitment-lead strong {
  color: var(--p3);
  font-size: clamp(34px, 5vw, 46px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.07em;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 180, 84, 0.35);
}

[data-lead="commitment"] .forecast-chance-grid {
  gap: 10px;
  opacity: 0.72;
}

[data-lead="commitment"] .forecast-chance strong {
  font-size: clamp(18px, 2.4vw, 22px);
  text-shadow: none;
}

.forecast-chance {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 8px;
}

.forecast-chance strong {
  color: var(--p1);
  font-size: clamp(28px, 4vw, 38px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.07em;
  line-height: 1;
  text-shadow: var(--glow-green);
}

.forecast-horizon {
  color: var(--faint);
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
}

.forecast-chance progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 99px;
  overflow: hidden;
  appearance: none;
  background: rgba(214, 226, 218, 0.14);
}

.forecast-chance progress::-webkit-progress-bar {
  border-radius: 99px;
  background: rgba(214, 226, 218, 0.14);
}

.forecast-chance progress::-webkit-progress-value {
  border-radius: 99px;
  background: var(--p1);
  box-shadow: 0 0 10px rgba(65, 255, 139, 0.32);
}

.forecast-chance progress::-moz-progress-bar {
  border-radius: 99px;
  background: var(--p1);
  box-shadow: 0 0 10px rgba(65, 255, 139, 0.32);
}

.forecast-chance + .forecast-chance progress::-webkit-progress-value {
  background: var(--p1-dim);
  box-shadow: 0 0 8px rgba(46, 204, 112, 0.24);
}

.forecast-chance + .forecast-chance progress::-moz-progress-bar {
  background: var(--p1-dim);
  box-shadow: 0 0 8px rgba(46, 204, 112, 0.24);
}

.forecast-detail {
  padding-top: 54px;
}

.forecast-detail-grid,
.meta-list {
  display: grid;
  gap: 12px;
}

.forecast-detail-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 18px;
}

.meta-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meta-list div,
.note-box {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  padding: 12px 14px;
}

.meta-list dt {
  color: var(--faint);
  font-size: 11px;
  text-transform: uppercase;
}

.meta-list dd {
  margin-top: 4px;
  color: var(--fg);
}

.evidence-list {
  margin: 16px 0 14px;
  padding-left: 20px;
  color: var(--dim);
}

.evidence-list li {
  margin-top: 7px;
  overflow-wrap: anywhere;
}

.section-jump {
  margin-top: 12px;
}

.feed-text,
.event-summary,
.mini-post p {
  overflow-wrap: anywhere;
}

/* ---------- hero console prompt + verdict ---------- */

.console-prompt {
  font-size: 14px;
  color: var(--dim);
  margin-bottom: 7px;
}

.console-prompt .ps1 {
  color: var(--p1);
  font-weight: 700;
}

.verdict {
  margin-left: 6px;
  color: var(--p3);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.verdict[data-state="active"] {
  color: var(--p1);
  text-shadow: var(--glow-green);
}

h2.tracker-heading {
  margin-top: 24px;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
}

.tracker-note {
  margin: 8px auto 0;
  max-width: 68ch;
  color: var(--faint);
  font-size: 12.5px;
}

/* Keep the first-view terminal visible; this guidance is repeated elsewhere. */
@media (max-width: 480px) {
  .tracker-heading + .info-tip {
    display: none;
  }

  h2.tracker-heading {
    margin-top: 26px;
  }

  .hero .tagline {
    font-size: 13px;
  }
}

/* ---------- shared shell bits used on every page ---------- */

.site-footer {
  max-width: var(--maxw);
  margin: 70px auto 0;
  padding: 26px 20px 40px;
}

.footer-brand {
  width: max-content;
  margin-bottom: 14px;
  font-size: 15px;
  gap: 0;
}

.term-meta {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.chip[data-kind="unlock"] {
  color: #ff9b54;
  border-color: rgba(255, 155, 84, 0.55);
}

.event-link {
  justify-self: end;
}

@media (max-width: 620px) {
  .nav-inner {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .brand {
    flex: 0 1 auto;
  }

  .nav-spacer {
    display: none;
  }

  .nav-links {
    display: flex;
    order: 3;
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
  }

  .locale-suggestion {
    flex-wrap: wrap;
  }

  .forecast-console {
    margin-top: 18px;
  }

  .forecast-console[data-signal-state="active"] {
    margin-top: 12px;
  }

  .forecast-console .signal[data-state="active"] {
    grid-template-columns: 28px 22px minmax(0, 1fr) auto;
    grid-template-areas: "avatar mark . source" "quote quote quote quote" "meta meta meta meta";
    gap: 3px 8px;
    padding: 5px 8px;
  }

  .forecast-console .signal-avatar {
    width: 28px;
    height: 28px;
  }

  .forecast-console .signal > .signal-evidence-quote {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    font-size: 12.5px;
    line-height: 1.4;
  }

  .signal-evidence-source {
    justify-self: end;
  }

  .forecast-console-head,
  .forecast-inline {
    gap: 5px 12px;
  }

  .forecast-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .forecast-chance-stat {
    grid-column: 1 / -1;
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(65, 255, 139, 0.12);
  }

  /* Keep the commitment probability dominant without spending another row of
     the mobile fold: the smaller cadence pair sits beside it, not below it. */
  .forecast-chance-stat[data-lead="commitment"] {
    display: grid;
    grid-template-columns: minmax(76px, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: end;
  }

  [data-lead="commitment"] .forecast-label {
    grid-column: 1 / -1;
  }

  [data-lead="commitment"] .forecast-commitment-lead {
    grid-area: 2 / 1;
    margin: 0;
  }

  [data-lead="commitment"] .forecast-chance-grid {
    grid-area: 2 / 2;
  }

  [data-lead="commitment"] .forecast-commitment-lead .forecast-sub {
    font-size: 9px;
    line-height: 1.2;
  }

  .forecast-window-stat {
    padding: 12px 12px 8px 0;
  }

  .forecast-confidence-stat {
    padding: 12px 0 8px 12px;
  }

  .forecast-detail-grid,
  .meta-list {
    grid-template-columns: 1fr;
  }

  .bar {
    min-width: 0;
    font-size: clamp(9px, 3.2vw, 13px);
    letter-spacing: 0;
  }
}

@media (max-width: 480px) {
  .hero {
    padding-top: 12px;
  }

  .hero > .tagline {
    margin-top: 6px;
  }

  .meta-note {
    display: none;
  }

  .hero-stats {
    margin-top: 8px;
  }

  .info-tip {
    margin-top: 0;
  }

  .reset-since {
    margin-top: 3px;
  }

  .reset-since-label {
    font-size: 10px;
  }

  .reset-since-relative {
    font-size: 1.35rem;
  }

  .reset-since-abs-line,
  .reset-since-history {
    display: inline-block;
    margin: 2px 5px 0;
    font-size: 11px;
  }

  .stat-chips {
    margin-top: 3px;
    gap: 6px;
  }

  .stat-chip {
    padding: 2px 8px;
    font-size: 11px;
  }

  /* Quote+avatar pushed .term-bar past 844: pay from padding, not content. */
  .forecast-console {
    margin-top: 3px;
    padding: 5px 10px;
  }

  .forecast-console[data-signal-state="active"] {
    margin-top: 3px;
  }

  /* The warning mark, Tibo quote and commitment probability already carry
     this state. On phones, spend the duplicate status column's height on the
     source evidence instead. */
  .forecast-console[data-signal-state="active"] .forecast-confidence-stat {
    display: none;
  }

  .forecast-console[data-signal-state="active"] .forecast-window-stat {
    grid-column: 1 / -1;
    padding-right: 0;
    border-right: 0;
  }

  .forecast-chance-stat {
    padding: 9px 0;
  }

  .forecast-window-stat,
  .forecast-confidence-stat {
    padding-top: 9px;
  }

  h2.tracker-heading {
    margin-top: 3px;
  }

  .term {
    margin-top: 8px;
  }

  .term-bar {
    padding: 3px 12px;
  }
}

@media (max-width: 340px) {
  .hero {
    padding-top: 8px;
  }

  .hero .tagline {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
  }

  .hero-stats {
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.4;
  }

  .reset-since-relative {
    font-size: 1.15rem;
  }

  .stat-chip {
    font-size: 10px;
  }

  .forecast-console {
    margin-top: 6px;
  }

  .console-prompt {
    margin-bottom: 4px;
    font-size: 13px;
  }

  .forecast-chance-stat {
    padding-block: 7px;
  }

  /* A real quote wraps to six lines at 320px; a five-line clamp cut it. */
  .forecast-console .signal > .signal-evidence-quote {
    -webkit-line-clamp: 6;
  }

  .forecast-console[data-signal-state="active"] .forecast-window-stat {
    display: none;
  }

  .forecast-window-stat,
  .forecast-confidence-stat {
    padding-top: 7px;
  }

  .forecast-label {
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  .forecast-window-stat > strong,
  .forecast-confidence-stat > strong {
    font-size: 16px;
  }

  h2.tracker-heading {
    margin-top: 3px;
    /* Keep the tracker title on one line inside the 320px fold. */
    font-size: 15px;
    line-height: 1.3;
  }

  .term {
    margin-top: 6px;
  }

  /* Keep the signature title inside the 844px production fold. */
  .term-bar {
    gap: 5px;
    padding-inline: 8px;
  }

  .term-title {
    margin-left: 2px;
    font-size: 11px;
    white-space: nowrap;
  }
}

/* burn meter (hero rework 2026-07-26) */
.gauge[data-state="hot"] .bar {
  color: var(--p3);
  text-shadow: 0 0 10px rgba(255, 180, 84, 0.4);
}

.gauge[data-state="hot"] .count {
  color: var(--p3);
}

.gauge[data-state="over"] .bar {
  color: var(--red);
  text-shadow: 0 0 10px rgba(255, 95, 86, 0.45);
}

.gauge[data-state="over"] .count {
  color: var(--red);
}

.gauge-anchor {
  font-size: 12px;
  color: var(--faint);
}

.usage-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.usage-row label {
  font-size: 12px;
  color: var(--dim);
  white-space: nowrap;
}

.usage-row input {
  flex: 1;
  max-width: 300px;
  accent-color: var(--p1);
}

.btn.red {
  color: var(--red);
}

.btn.red:hover {
  background: rgba(255, 95, 86, 0.09);
  text-shadow: 0 0 14px rgba(255, 95, 86, 0.5);
}

a.btn {
  text-decoration: none;
}

/* nav alerts entry + pace mark + focusable disabled (ui pass 2026-07-26) */
/* Trigger for the alerts hub. It is a <button> because it opens a dialog rather
   than navigating, so the anchor defaults have to be restated by hand. */
.nav-tg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--p3);
  font-size: 13px;
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nav-tg:hover {
  text-decoration: none;
  text-shadow: 0 0 14px rgba(255, 180, 84, 0.5);
}

/* Alerts menu visibility belongs to alerts-hub.js. */

.nav-alerts {
  position: relative;
  display: inline-flex;
}

.alerts-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 420px;
  min-width: 360px;
  max-width: calc(100vw - 40px);
  padding: 6px;
  background: rgba(14, 21, 18, 0.97);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.nav-alerts[data-open="true"] .alerts-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.alerts-note {
  margin: 4px 2px 2px;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.45;
}

.alerts-channel,
.alerts-menu .push-button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font-size: 13px;
  text-decoration: none;
  text-align: left;
  width: 100%;
}

/* Match the dock palette; browser push remains the primary action. */
.alerts-channel[href*="t.me"] {
  color: var(--p3);
}

.alerts-channel[href*="discord.gg"] {
  color: var(--fg);
}

.alerts-menu .push-button {
  color: var(--p1);
  white-space: nowrap;
}

.alerts-channel:hover,
.alerts-menu .push-button:hover {
  background: rgba(65, 255, 139, 0.06);
  text-decoration: none;
}

/* Tint the hover with the row's own colour. Layered after the flat fallback
   above so a browser without color-mix still gets a visible hover. */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .alerts-channel:hover,
  .alerts-menu .push-button:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
    border-color: color-mix(in srgb, currentColor 40%, var(--line));
  }
}

/* The push button's label is replaced wholesale by push.js, so its icon cannot
   be a child element — it has to come from CSS. */
.alerts-menu .push-button::before {
  content: "";
  --icon: var(--icon-bell);
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.alerts-menu .push-cta {
  display: block;
}

.alerts-menu .push-note {
  display: block;
  max-width: none;
  padding: 5px 10px 3px;
  font-size: 11px;
  line-height: 1.45;
}

/* Anchor the wrapped menu to the mobile header gutter. */
@media (max-width: 620px) {
  .nav-alerts {
    position: static;
  }

  .nav-actions {
    gap: 12px;
    margin-left: auto;
  }

  .nav-inner {
    position: relative;
  }

  .alerts-menu {
    /* Match the 20px content gutter. */
    right: 20px;
    width: min(420px, calc(100vw - 40px));
    min-width: 0;
    max-width: calc(100vw - 40px);
  }

  .alerts-menu .push-button {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alerts-menu {
    transition: none;
  }
}

.bar .pace-mark {
  color: var(--p3);
  text-shadow: 0 0 8px rgba(255, 180, 84, 0.6);
}

.btn[aria-disabled="true"] {
  color: var(--faint);
  cursor: not-allowed;
  text-shadow: none;
  background: none;
}

/* Fixed alert/community channel capsule. */

.tg-dock {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: rgba(14, 21, 18, 0.92);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.dock-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
  font-size: 12px;
  text-decoration: none;
}

.dock-link + .dock-link {
  border-top: 1px solid var(--line);
}

.dock-link .ui-icon {
  width: 16px;
  height: 16px;
}

.dock-alerts {
  color: var(--p3);
}

.dock-discord {
  color: var(--fg);
}

.dock-chat {
  color: var(--p1);
}

.dock-label {
  max-width: 0;
  margin-right: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.25s ease, opacity 0.2s ease, margin-right 0.25s ease;
}

@media (hover: hover) {
  .tg-dock:hover .dock-label {
    max-width: 8em;
    margin-right: 7px;
    opacity: 1;
  }
}

.tg-dock:focus-within .dock-label {
  max-width: 8em;
  margin-right: 7px;
  opacity: 1;
}

.dock-alerts:hover {
  background: rgba(255, 180, 84, 0.08);
  text-shadow: 0 0 14px rgba(255, 180, 84, 0.5);
}

.dock-discord:hover {
  background: rgba(214, 226, 218, 0.08);
  text-shadow: 0 0 14px rgba(214, 226, 218, 0.4);
}

.dock-chat:hover {
  background: rgba(65, 255, 139, 0.08);
  text-shadow: 0 0 14px rgba(65, 255, 139, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .dock-label {
    transition: none;
  }
}

@media (max-width: 480px) {
  .dock-shell {
    display: none;
  }
}

/* Push prompt stays bottom-left; the channel dock owns bottom-right. */

.push-invite {
  position: fixed;
  left: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  max-width: min(92vw, 320px);
  padding: 13px 14px;
  background: rgba(14, 21, 18, 0.97);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

@media (max-width: 480px) {
  .push-invite {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }
}

.push-invite[data-open="true"] {
  opacity: 1;
  transform: none;
}

.push-invite-body {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
}

.push-invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .push-invite {
    transition: none;
  }
}

/* Push subscribe control. Hidden until push.js confirms the feature is live,
   so it occupies no space while shipping inert. */
.push-cta[hidden] { display: none; }
.push-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.push-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.push-button:disabled { opacity: 0.6; cursor: progress; }
.push-note {
  opacity: 0.75;
  max-width: 34ch;
}
.push-note[hidden] { display: none; }