/* 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");
  /* The row names the platform, so its mark should do the same. The QR remains
     inside the hover card where it is actionable; the dock and menu use a
     compact penguin silhouette with eyes and belly punched out via evenodd. */
  --icon-qq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath id='qq-penguin' fill-rule='evenodd' d='M12 2.2c-3.2 0-5.4 2.8-5.4 6.7 0 .9.1 1.8.4 2.6-1.6 1.5-2.6 3.8-2.6 6 0 1.2.8 1.9 1.9 1.5l2.1-.8c1 .8 2.2 1.3 3.6 1.3s2.6-.5 3.6-1.3l2.1.8c1.1.4 1.9-.3 1.9-1.5 0-2.2-1-4.5-2.6-6 .3-.8.4-1.7.4-2.6 0-3.9-2.2-6.7-5.4-6.7ZM9.7 7.8a.8.8 0 1 0 0-1.6.8.8 0 0 0 0 1.6Zm4.6 0a.8.8 0 1 0 0-1.6.8.8 0 0 0 0 1.6ZM12 10.7c-2.2 0-3.8 2-3.8 4.4 0 2.1 1.6 3.3 3.8 3.3s3.8-1.2 3.8-3.3c0-2.4-1.6-4.4-3.8-4.4Z'/%3E%3Cpath d='M8.5 18.6c-1.1.4-2 1.3-2.4 2.3-.2.5.2 1 .7 1h3.8l.4-2.7-2.5-.6Zm7 0c1.1.4 2 1.3 2.4 2.3.2.5-.2 1-.7 1h-3.8l-.4-2.7 2.5-.6Z'/%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);
}

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

.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-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);
}

@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="normal"] .bar {
  color: var(--p1);
  text-shadow: 0 0 10px rgba(65, 255, 139, 0.45);
}

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

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

.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="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);
}

.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);
}

.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;
  /* Always its own single ellipsized row: the live tweet length must never
     reflow the hero (2026-07-26 prod QA caught a 2-line wrap pushing the
     burn meter below the fold). */
  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"] {
  /* Near-zero vertical padding: active vs quiet must not move the fold. */
  padding: 2px 0;
  color: var(--p3);
  background: transparent;
}

.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;
}

.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;
}

/* Below ~480px the hero has to keep the /status terminal inside the first
   viewport; the note's guidance is repeated by the hint-line and the custom
   dialog help, so it yields. */
@media (max-width: 480px) {
  .tracker-note {
    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-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);
  }

  .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: 6px;
  }

  .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: 6px;
    gap: 6px;
  }

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

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

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

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

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

  .term {
    margin-top: 8px;
  }

  .term-bar {
    padding: 8px 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;
  }

  .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: 8px;
    /* At 320px the clamp floor (1.05rem) wrapped this heading onto a second
       line, which pushed the terminal frame 13px below the fold. One line here
       buys 36px and keeps the tracker's title bar visible on the narrowest
       supported width. */
    font-size: 15px;
    line-height: 1.3;
  }

  .term {
    margin-top: 6px;
  }
}

/* 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 (nav bell dropdown) ---------- */
/* Same material as the dock, anchored under the bell. Picking a channel is a
   one-gesture choice, so it must not take the page hostage the way the command
   palette's modal does. Visibility is driven by data-open, which alerts-hub.js
   owns for hover, focus, click and Escape alike — a CSS :hover rule on top of
   that would give two sources of truth and desync aria-expanded. */

.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%;
}

/* Per-channel colour, the same assignment the dock uses, so a channel reads the
   same in both places. All-neutral rows gave the menu no scan order; all-amber
   would have collapsed three choices back into one block. Browser push takes the
   primary green because it is the row we most want chosen — one tap, no account.

   Selected by destination rather than a modifier class: the markup lives in
   build-static.mjs, which another session has in flight. validate-static already
   pins these exact URLs, so a drifting selector cannot pass silently. */
.alerts-channel[href*="t.me"] {
  color: var(--p3);
}

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

.alerts-channel[href*="qm.qq.com"] {
  color: #12b7f5;
}

.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;
}

/* Below the nav's wrap breakpoint the bell sits mid-row, so pinning the menu's
   right edge to it pushes the left edge off screen — measured at -24px on a
   390px viewport. Handing the containing block to .nav-inner anchors the menu
   to the header's right gutter instead, and drops it below the wrapped nav
   rows rather than on top of them. */
@media (max-width: 620px) {
  .nav-alerts {
    position: static;
  }

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

  .nav-inner {
    position: relative;
  }

  .alerts-menu {
    /* An absolutely positioned box is laid out against the containing block's
       padding BOX, so .nav-inner's 20px padding does not inset it and right: 0
       lands flush on the screen edge. Restating it here aligns the menu with the
       content column the brand and nav links sit in. */
    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;
}

/* ---------- alerts dock (fixed bottom-right, ui pass 2026-07-29) ---------- */
/* One capsule, three rows: the two alert channels (Telegram amber, Discord
   neutral) over the community chat (green). Discord keeps the palette rather
   than its brand blurple — #5865F2 is the one hue in this CRT scheme that reads
   as a rendering fault. Icon-only at rest; all labels slide out together on
   hover/focus-within so the capsule keeps one silhouette. Touch devices never
   expand — tap goes straight to the channel. */

.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);
}

.dock-qq {
  color: #12b7f5;
}

.dock-qq:hover {
  background: rgba(18, 183, 245, 0.1);
  text-shadow: 0 0 14px rgba(18, 183, 245, 0.45);
}

/* Sits beside the capsule rather than inside it: .tg-dock clips to its own
   rounded corners, so a child card would be cut off. Fixed like the dock, and
   aligned to the same bottom edge. */
.dock-qq-card {
  position: fixed;
  right: 68px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.dock-qq-card svg {
  display: block;
  border-radius: 4px;
}

.dock-qq-scan,
.dock-qq-code {
  margin: 0;
  color: #111;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

.dock-qq-code {
  color: #555;
  font-variant-numeric: tabular-nums;
}

/* Only where a pointer can hover and only for the QQ row: a phone cannot scan
   its own screen, and hovering Discord should not throw a QR on the page. */
@media (hover: hover) {
  .dock-shell:has(.dock-qq:hover) .dock-qq-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

.dock-shell:has(.dock-qq:focus-visible) .dock-qq-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

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

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

/* ---------- push soft ask ---------- */
/* Bottom LEFT: the alerts dock owns bottom right, and on a 320px screen the two
   would sit on top of each other. Built by push.js only when it has something
   to offer, so there is no hidden-by-default state to maintain here. */

.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;
}

/* On narrow screens the three-row dock is taller than it is wide. Putting the
   invite above it preserves the full text width and guarantees the two fixed
   surfaces never cover each other. */
@media (max-width: 480px) {
  .push-invite {
    right: 14px;
    bottom: calc(160px + 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; }