/* ============================================================
   styles.css — HotCold USA
   All layout, typography, and component rules.

   Colours and fonts are expressed exclusively as CSS custom
   properties.  The default values below reproduce the original
   "Patriot" look exactly.  themes.css overrides these same
   properties on [data-theme="x"] so every component responds
   to a theme swap automatically — no rule duplication needed.

   Property naming convention
   ──────────────────────────
   --c-bg          base page / header / nav background
   --c-bg-mid      card surface
   --c-bg-raised   card header / list-header tint
   --c-border      standard border colour
   --c-accent      primary accent (header border, nav border, copy btn)
   --c-accent-dim  muted accent (spread banner bg, copy btn bg)
   --c-gold        section labels, active nav, rec labels, rank nums
   --c-gold-dim    section-label rule line, rank number colour
   --c-text        primary text
   --c-text-dim    secondary / italic text
   --c-text-faint  placeholder / footnote / diag-key text
   --c-hot         hot temperature colour (badge, temp reading, rank)
   --c-hot-mid     hot extreme-card top stripe
   --c-cold        cold temperature colour (badge, temp reading, rank)
   --c-cold-dim    cold ext-temp large number
   --c-star        decorative star row
   --c-map-bg      SVG map fill behind states
   --c-map-state   individual state fill
   --c-map-stroke  state border stroke
   --f-head        heading / label / nav font stack
   --f-body        body / italic serif font stack
   --f-mono        monospace font stack
   ============================================================ */


/* ── 1. DEFAULT CUSTOM PROPERTIES (Patriot theme fallback) ── */

:root {
  /* Palette */
  --c-bg:         #0a1628;
  --c-bg-mid:     #122040;
  --c-bg-raised:  #1e3560;
  --c-border:     #1e3560;
  --c-accent:     #bf0a30;
  --c-accent-dim: #7a0620;
  --c-gold:       #f5a623;
  --c-gold-dim:   #c07d10;
  --c-text:       #ffffff;
  --c-text-dim:   rgba(255, 255, 255, 0.70);
  --c-text-faint: rgba(255, 255, 255, 0.30);
  --c-hot:        #ff8a8a;
  --c-hot-mid:    #e8102e;
  --c-cold:       #8ad4ff;
  --c-cold-dim:   #b8e0ff;
  --c-star:       #e8d48a;
  --c-map-bg:     #0d1f3c;
  --c-map-state:  #152844;
  --c-map-stroke: #253d62;

  /* Typography */
  --f-head: 'Oswald', sans-serif;
  --f-body: 'Source Serif 4', Georgia, serif;
  --f-mono: 'Share Tech Mono', monospace;

  /* Device safe-areas */
  --safe-top: env(safe-area-inset-top,    0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}


/* ── 2. RESET ─────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}


/* ── 3. BASE ──────────────────────────────────────────────── */

html,
body {
  height: 100%;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}


/* ── 4. CHROME: STATUS BAR / HEADER / NAV ─────────────────── */

.status-bar {
  height: var(--safe-top);
  background: var(--c-bg);
  flex-shrink: 0;
}

.app-header {
  background: var(--c-bg);
  border-bottom: 3px solid var(--c-accent);
  padding: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Wraps the eyebrow + title lines in the header */
.app-title-group {
  display: flex;
  flex-direction: column;
}

/* Flag emoji in the header — sized via class, not inline style */
.header-flag {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
}

.app-eyebrow {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--c-gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 1px;
}

.app-title {
  font-family: var(--f-head);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--c-text);
  text-transform: uppercase;
}

.app-title span {
  color: var(--c-hot-mid);
}

.header-date {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-text-dim);
  text-align: right;
  line-height: 1.5;
  flex-shrink: 0;
}

/* Bottom nav */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: var(--safe-bot);
  background: var(--c-bg);
  border-top: 2px solid var(--c-accent);
  display: flex;
  z-index: 100;
}

.nav-btn {
  flex: 1;
  background: none;
  border: none;
  border-right: 1px solid var(--c-border);
  padding: 8px 4px 6px;
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: color 0.15s, background 0.15s;
  min-height: 48px;
  justify-content: center;
}

.nav-btn:last-child {
  border-right: none;
}

.nav-btn.active {
  color: var(--c-gold);
}

.nav-btn:active {
  background: var(--c-bg-mid);
}

.nav-icon {
  font-size: 17px;
  line-height: 1;
}


/* ── 5. SCROLL BODY ───────────────────────────────────────── */

.scroll-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--safe-bot) + 76px);
}


/* ── 6. THEME SWITCHER BAR ────────────────────────────────── */
/* New component — not in the original file.
   Sits at the top of the scroll body.                        */

.theme-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 0;
  flex-wrap: wrap;
}

.theme-bar-label {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  flex-shrink: 0;
}

.theme-btn-group {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.theme-btn {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  color: var(--c-text-dim);
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.theme-btn:hover {
  background: var(--c-bg-raised);
  color: var(--c-text);
}

.theme-btn.active {
  background: var(--c-accent-dim);
  border-color: var(--c-accent);
  color: var(--c-text);
}


/* ── 7. SECTION LABELS ────────────────────────────────────── */

.section-label {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--c-gold);
  text-transform: uppercase;
  padding: 18px 16px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-label::before,
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-gold-dim);
  opacity: 0.4;
}


/* ── 8. EXTREMES ──────────────────────────────────────────── */

.hero-extremes {
  margin: 0 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.extreme-card {
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 14px 12px 12px;
  position: relative;
  overflow: hidden;
}

/* Colour stripe across the top of each card */
.extreme-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.extreme-card.hot::before {
  background: var(--c-hot-mid);
}

.extreme-card.cold::before {
  background: var(--c-cold);
}

.ext-badge {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.extreme-card.hot .ext-badge {
  color: var(--c-hot);
}

.extreme-card.cold .ext-badge {
  color: var(--c-cold);
}

.ext-temp {
  font-family: var(--f-head);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  display: block;
}

.extreme-card.cold .ext-temp {
  color: var(--c-cold-dim);
}

.ext-place {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 13px;
  color: var(--c-text-dim);
  margin-top: 5px;
  display: block;
  line-height: 1.3;
}

.ext-detail {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-text-faint);
  margin-top: 6px;
  line-height: 1.6;
}


/* ── 9. SPREAD BANNER ─────────────────────────────────────── */

.spread-banner {
  margin: 8px 12px 0;
  background: var(--c-accent-dim);
  border: 1px solid var(--c-accent);
  border-radius: 6px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spread-label {
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.spread-val {
  font-family: var(--f-head);
  font-size: 26px;
  font-weight: 700;
}

.spread-desc {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 12px;
  color: var(--c-text-dim);
  text-align: right;
  max-width: 100px;
  line-height: 1.3;
}


/* ── 10. RECORDS ──────────────────────────────────────────── */

.records-grid {
  margin: 0 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rec-card {
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 12px 14px;
  text-align: center;
}

.rec-label {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
  display: block;
  margin-bottom: 4px;
}

.rec-temp {
  font-family: var(--f-head);
  font-size: 32px;
  font-weight: 700;
  display: block;
  line-height: 1;
}

.rec-card.rec-high .rec-temp {
  color: var(--c-hot);
}

.rec-card.rec-low .rec-temp {
  color: var(--c-cold);
}

.rec-place {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 12px;
  color: var(--c-text-dim);
  display: block;
  margin-top: 4px;
  line-height: 1.35;
}


/* ── 11. RANKING LISTS ────────────────────────────────────── */

.list-card {
  margin: 0 12px;
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}

.list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 8px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-raised);
}

/* Icon emoji in list-card headers — sized via class, not inline style */
.list-header-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.list-header-title {
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.rank-list {
  list-style: none;
}

.rank-list li {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-border);
  gap: 10px;
}

.rank-list li:last-child {
  border-bottom: none;
}

.rank-num {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-gold-dim);
  width: 16px;
  text-align: right;
  flex-shrink: 0;
}

.rank-place {
  font-family: var(--f-body);
  font-size: 15px;
  flex: 1;
}

.rank-temp {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 600;
  flex-shrink: 0;
}

.hot-list .rank-temp {
  color: var(--c-hot);
}

.cold-list .rank-temp {
  color: var(--c-cold);
}


/* ── 12. DAILY REPORT / SHARE ─────────────────────────────── */

.abstract-card {
  margin: 0 12px;
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}

.abstract-text {
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.85;
  color: var(--c-text-dim);
  padding: 14px;
  white-space: pre-wrap;
  border-bottom: 1px solid var(--c-border);
  min-height: 80px;
}

.abstract-foot {
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.abstract-footnote {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 12px;
  color: var(--c-text-faint);
  flex: 1;
}

.btn-copy {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--c-accent-dim);
  border: 1px solid var(--c-accent);
  color: var(--c-text);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  min-height: 36px;
  transition: all 0.15s;
}

.btn-copy:active {
  background: var(--c-accent);
}

.btn-copy.copied {
  background: #1a5c2a;
  border-color: #2a8c42;
}


/* ── 13. MAP ──────────────────────────────────────────────── */

/* Smooth colour transitions when switching themes */
body {
  transition: background 0.2s, color 0.2s;
}

.map-wrap {
  margin: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-map-bg);
  overflow: hidden;
}

.map-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* SVG background rect — filled via CSS so theme changes take effect */
.map-bg-rect {
  fill: var(--c-map-bg);
}

.state-path {
  stroke: var(--c-map-stroke);
  stroke-width: 0.5;
  fill: var(--c-map-state);
  transition: fill 0.3s;
}

.map-legend {
  padding: 8px 12px;
  display: flex;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-text-dim);
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot.hot {
  background: var(--c-hot-mid);
}

.legend-dot.cold {
  background: var(--c-cold);
}


/* ── 14. DIAGNOSTICS ──────────────────────────────────────── */

.diag-card {
  margin: 0 12px;
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}

.diag-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  min-height: 44px;
}

.diag-arrow {
  transition: transform 0.2s;
}

.diag-toggle[aria-expanded=true] .diag-arrow {
  transform: rotate(180deg);
}

.diag-body {
  display: none;
  border-top: 1px solid var(--c-border);
}

.diag-body.open {
  display: block;
}

.diag-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 14px;
  border-bottom: 1px solid var(--c-border);
}

.diag-row:last-child {
  border-bottom: none;
}

.diag-key {
  font-family: var(--f-head);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.diag-val {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-text-dim);
}


/* ── 15. FOOTER ───────────────────────────────────────────── */

.stars-row {
  text-align: center;
  font-size: 11px;
  color: var(--c-star);
  letter-spacing: 0.4em;
  padding: 8px 0 0;
  opacity: 0.5;
}

.page-footer {
  margin: 16px 12px 0;
  padding: 12px 0;
  border-top: 1px solid var(--c-border);
  font-family: var(--f-body);
  font-style: italic;
  font-size: 12px;
  color: var(--c-text-faint);
  text-align: center;
  line-height: 1.6;
}


/* ── 16. UTILITY ──────────────────────────────────────────── */

.loading-dim {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--c-text-faint);
}


/* ── 17. SVG MAP ANIMATIONS ───────────────────────────────── */

@keyframes pulse-hot {
  0%, 100% { r: 14; opacity: 0.45; }
  50%       { r: 22; opacity: 0.10; }
}

@keyframes pulse-cold {
  0%, 100% { r: 14; opacity: 0.35; }
  50%       { r: 22; opacity: 0.08; }
}

.map-pulse-hot  { animation: pulse-hot  2.0s ease-in-out infinite; }
.map-pulse-cold { animation: pulse-cold 2.6s ease-in-out infinite; }


/* 18. CUSTOM LOCATIONS */

.custom-card {
  margin: 0 12px;
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 14px;
}

.custom-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.custom-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.custom-field-label {
  font-family: var(--f-head);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.custom-field input {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-bg);
  color: var(--c-text);
  padding: 10px 12px;
  font-family: var(--f-mono);
  font-size: 12px;
}

.custom-field input::placeholder {
  color: var(--c-text-faint);
}

.custom-form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.custom-footnote {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--c-text-faint);
}

.custom-submit {
  flex-shrink: 0;
}

.custom-status {
  min-height: 18px;
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-text-dim);
}

.custom-status.error {
  color: var(--c-hot);
}

.custom-list {
  list-style: none;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.custom-item,
.custom-empty {
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-bg-raised);
  padding: 10px 12px;
}

.custom-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.custom-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custom-item-name {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--c-text);
}

.custom-item-coords,
.custom-empty {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-text-dim);
}

.custom-remove {
  border: 1px solid var(--c-accent);
  background: var(--c-accent-dim);
  color: var(--c-text);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--f-head);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 640px) {
  .custom-field-grid {
    grid-template-columns: 1fr;
  }

  .custom-form-foot,
  .custom-item {
    flex-direction: column;
    align-items: stretch;
  }
}

.diag-select {
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
}