/* ============================================================================
   Late Reg¹ — DAYTIME (default) + Night theme
   Light silver/blue/ivory by day, deep felt at night.
   Auto-applies based on Pacific hour via .app[data-mode="day"] / [data-mode="night"]
   ============================================================================ */

:root {
  /* DAYTIME (default) — silver/blue/ivory */
  --felt:        #eef1f5;       /* page bg, cool ivory */
  --felt-2:      #f7f8fa;       /* surface */
  --felt-3:      #ffffff;       /* elevated */
  --felt-4:      #e3e7ed;       /* hover */
  --line-d:      rgba(20,30,50,0.10);
  --line-d-2:    rgba(20,30,50,0.20);
  --line-gold:   rgba(180,140,40,0.40);

  --ivory-d:     #0e1422;       /* primary fg (dark on light) */
  --paper-d:     #475065;       /* secondary fg */
  --muted-d:     #7a8295;       /* tertiary fg */
  --faint-d:     #c4cbd6;

  /* Silver gradient values reused */
  --silver-1:    #f4f6f9;
  --silver-2:    #d8dde5;
  --silver-3:    #b0b8c6;
  --silver-4:    #8b94a5;

  /* Blue accent (replaces gold as primary on light) */
  --blue:        #2a5fb8;
  --blue-bright: #3b7adf;
  --blue-soft:   #c9d8f0;
  --blue-deep:   #1a3e7a;
  --blue-tint:   rgba(42,95,184,0.10);

  /* Gold kept for chips/highlights — slightly deeper for readability on light */
  --gold:        #b8901c;
  --gold-soft:   #e0bb55;
  --gold-deep:   #8a6a14;
  --gold-tint:   rgba(184,144,28,0.12);

  --red:         #c8312b;
  --red-bright:  #d63b32;
  --red-tint:    rgba(200,49,43,0.10);

  --green:       #2d7a4e;
  --green-bright:#3aa168;
  --green-tint:  rgba(45,122,78,0.10);

  --amber-c:     #c98a1a;
  --amber-tint:  rgba(201,138,26,0.12);

  --font-serif:  'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-system: -apple-system, ui-sans-serif, system-ui, 'SF Pro Text', sans-serif;

  --t-eyebrow:   11px;
  --t-micro:     12px;
  --t-meta:      13px;
  --t-body:      15px;
  --t-lead:      17px;
  --t-h6:        20px;
  --t-h5:        24px;
  --t-h4:        32px;
  --t-h3:        40px;
  --t-h2:        56px;
  --t-h1:        72px;

  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* NIGHT MODE override */
.app[data-mode="night"] {
  --felt:        #0a0a0b;
  --felt-2:      #131316;
  --felt-3:      #1c1c20;
  --felt-4:      #26262b;
  --line-d:      rgba(255,255,255,0.08);
  --line-d-2:    rgba(255,255,255,0.16);
  --line-gold:   rgba(212,175,55,0.32);

  --ivory-d:     #f4f1ea;
  --paper-d:     #c8c4b8;
  --muted-d:     #6b6862;
  --faint-d:     #3a3934;

  --silver-1:    #2a2a2e;
  --silver-2:    #1a1a1d;
  --silver-3:    #16161a;
  --silver-4:    #6b7080;

  --blue:        #6ba0e8;
  --blue-bright: #8ab8f5;
  --blue-soft:   rgba(107,160,232,0.18);
  --blue-deep:   #4a7bc4;
  --blue-tint:   rgba(107,160,232,0.14);

  --gold:        #d4af37;
  --gold-soft:   #f0d97a;
  --gold-deep:   #a58726;
  --gold-tint:   rgba(212,175,55,0.12);

  --red-bright:  #e74c3c;
  --green-bright:#4caf6e;
  --amber-c:     #e0a83a;
}

/* App canvas */
.app {
  width: 100%;
  height: 100%;
  background: var(--felt);
  color: var(--ivory-d);
  font-family: var(--font-system);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

.app * { box-sizing: border-box; }

.app .serif { font-family: var(--font-serif); letter-spacing: -0.015em; }
.app .mono  { font-family: var(--font-mono); }

.app .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-d);
  font-weight: 500;
}

.app h1, .app h2, .app h3, .app h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
  color: var(--ivory-d);
}
.app h1 { font-size: var(--t-h2); }
.app h2 { font-size: var(--t-h3); }
.app h3 { font-size: var(--t-h4); }
.app h4 { font-size: var(--t-h5); }

.app p { margin: 0; }

.app .num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

.sup-one {
  font-family: var(--font-mono);
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 0.04em;
  color: var(--gold);
}

.app .rule { border: 0; border-top: 1px solid var(--line-d); margin: 0; }
.app .rule-gold { border: 0; border-top: 1px solid var(--line-gold); margin: 0; }

/* Buttons */
.app .btn {
  font-family: var(--font-system);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--line-d-2);
  background: var(--felt-3);
  color: var(--ivory-d);
  padding: 12px 16px;
  border-radius: 0;
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), transform 80ms ease-in;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.app .btn:hover { background: var(--felt-4); border-color: var(--ivory-d); }
.app .btn:active { transform: scale(0.98); }
.app .btn-primary { background: var(--ivory-d); color: var(--felt); border-color: var(--ivory-d); }
.app .btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); font-weight: 600; }
.app .btn-gold:hover { background: var(--gold-soft); }
.app .btn-blue { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 600; }
.app .btn-blue:hover { background: var(--blue-bright); }
.app .btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.app .btn-ghost { background: transparent; border-color: var(--line-d-2); }

/* Tags */
.app .tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 7px;
  border: 1px solid var(--line-d-2);
  color: var(--paper-d);
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 0;
  white-space: nowrap;
}
.app .tag-gold { color: var(--gold-deep); border-color: var(--line-gold); background: var(--gold-tint); }
.app .tag-red  { color: var(--red); border-color: rgba(200,49,43,0.4); background: var(--red-tint); }
.app .tag-green { color: var(--green); border-color: rgba(45,122,78,0.4); background: var(--green-tint); }
.app .tag-amber { color: var(--amber-c); border-color: rgba(201,138,26,0.4); background: var(--amber-tint); }
.app .tag-blue { color: var(--blue); border-color: rgba(42,95,184,0.4); background: var(--blue-tint); }
.app .tag-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red-bright);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Card */
.app .card { background: var(--felt-2); border: 1px solid var(--line-d); padding: 16px; }
.app .card:hover { border-color: var(--line-d-2); }
.app .card-gold { border-color: var(--line-gold); }
.app .card-blue { border-color: rgba(42,95,184,0.35); background: linear-gradient(180deg, var(--felt-2), var(--blue-tint)); }

.app ::-webkit-scrollbar { display: none; }
.app * { scrollbar-width: none; }

.felt-bg {
  background:
    radial-gradient(circle at 20% 0%, var(--blue-tint), transparent 50%),
    radial-gradient(circle at 100% 100%, var(--gold-tint), transparent 50%),
    var(--felt);
}

.app .section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 24px 20px 8px;
}
.app .section-num {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--blue); text-transform: uppercase;
}

@keyframes mapPulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%  { transform: scale(2.4); opacity: 0;   }
  100% { transform: scale(2.4); opacity: 0;   }
}
@keyframes wave {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-2px); }
}
@keyframes flashRed {
  0%, 100% { color: var(--red-bright); }
  50%      { color: var(--ivory-d); }
}

.app .scroll-x { overflow-x: auto; overflow-y: hidden; }
.app .scroll-y { overflow-y: auto; overflow-x: hidden; }

.app a { color: var(--blue); text-decoration: none; }
.app a:hover { text-decoration: underline; text-underline-offset: 3px; }