/* ============================================================
   Paddle Jackson Hole — shared styles
   Loaded by index.html (hub) + rivers/*.html.
   Page layout/components use verbatim inline styles from the
   design handoff; this file carries only what must be shared
   or can't be expressed inline (reset, tokens, keyframes,
   striped placeholder, :hover states).
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #0c1619;
  color: #c2cac6;
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; }
::selection { background: #d99a4e; color: #0c1619; }

/* Design tokens (reference; page styles inline the literals to match the handoff) */
:root {
  --ink: #0c1619; --ink-panel: #0f1d21; --ink-deep: #07100f; --ink-fire: #120f0c;
  --cream: #f1ebde; --cream-2: #e8e0d2; --body: #c2cac6; --muted: #aab4b0; --faint: #6b7a78;
  --teal: #6fb4ad; --amber: #d99a4e; --danger: #d4683a; --aqi-mod: #d9b14e; --aqi-good: #5fb98a;
  --hair: rgba(232,224,210,.12);
}

/* Striped placeholder fill — scheduled 360°, photos, webcams */
.pjh-str-ph {
  background-image: repeating-linear-gradient(135deg,
    rgba(232,224,210,.05) 0 10px, rgba(232,224,210,.018) 10px 20px);
}

/* Keyframes */
@keyframes pjh-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(111,180,173,0); } 50% { box-shadow: 0 0 0 6px rgba(111,180,173,.12); } }
@keyframes pjh-hint  { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(7px); opacity: .9; } }

/* Live gauge "updated" dot pulse (teal) */
.pjh-livedot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6fb4ad; animation: pjh-pulse 2.4s ease-in-out infinite; }

/* ---- Hover states (replace the prototype's style-hover; base style + transition stay inline) ----
   !important is required only where the same property is set by an inline style. */
.hov-cream:hover      { color: #f1ebde !important; }
.hov-maplink:hover    { color: #e8e0d2 !important; border-color: rgba(232,224,210,.5) !important; }
.hov-btn-cream:hover  { background: #fff !important; transform: translateY(-2px); }
.hov-btn-amber:hover  { background: #e6ad66 !important; transform: translateY(-2px); }
.hov-card:hover       { border-color: rgba(217,154,78,.4) !important; transform: translateY(-3px); }
.hov-row:hover        { background: rgba(232,224,210,.02); }
.hov-scale:hover      { transform: scale(1.05); }