/* ═══════════════════════════════════════════
   AURORA CAMP — styles.css
   Full craft pass
═══════════════════════════════════════════ */

/* ── Inter variable font (offline) ─────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-var.woff2') format('woff2');
}

/* ── Variables ──────────────────────────────────────────────── */
:root {
  /* ── Brand surfaces (Aurora flag: #062B44 navy, #FFBB01 gold) */
  --bg:        #062B44;
  --bg-grad-1: #0A3858;
  --surface:   #082F4A;
  --surface-2: #0D3956;
  --surface-3: #134563;

  /* ── Hairlines & dividers ──────────────────────────────── */
  --hairline:   rgba(255,224,160,0.08);
  --hairline-2: rgba(255,224,160,0.16);

  /* ── Ink scale (text) ──────────────────────────────────── */
  --ink:   #F4ECDA;
  --ink-2: #B8C7D9;
  --ink-3: #7891A8;
  --ink-4: #486075;

  /* ── Brand accent ──────────────────────────────────────── */
  --gold:      #FFBB01;
  --gold-mute: rgba(255,187,1,0.16);
  --gold-soft: #4A3700;

  /* ── Semantic accents ───────────────────────────────────── */
  --ember:      #E56B3D;
  --ember-mute: rgba(229,107,61,0.14);
  --teal:       #5EB3D6;
  --teal-mute:  rgba(94,179,214,0.14);
  --good:       #5BBF8B;
  --red:        #EF4444;

  /* ── Radii ─────────────────────────────────────────────── */
  --r:    10px;
  --rs:   7px;

  /* ── Typography scale ──────────────────────────────────── */
  --t-section:         12px;
  --t-section-spacing: 0.20em;
  --t-label:           10.5px;
  --t-label-spacing:   0.18em;
  --t-meta:            10px;
  --t-meta-spacing:    0.14em;

  /* ── Derived structural ────────────────────────────────── */
  --overlay-hdr: rgba(6,43,68,.95);
  --tip-bg:      rgba(6,43,68,.92);
  --tip-bd:      rgba(255,224,160,.18);
  --skel-a:      #0D3956;
  --skel-b:      #134563;
}

/* ── Typography utilities ───────────────────────────────────── */
.t-section {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-section);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-section-spacing);
  color: var(--ink);
}
.t-label {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-label-spacing);
  color: var(--ink-2);
}
.t-meta {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-meta-spacing);
  color: var(--ink-3);
}

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

body {
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, var(--bg-grad-1) 0%, var(--bg) 70%),
    var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  min-height: 100dvh;
  padding-top: 90px; /* fixed header(46) + nav(44) */
  overscroll-behavior: none; /* prevent iOS elastic-scroll white flash */
}

/* ── Custom scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,187,1,.35); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Glass card mixin ───────────────────────────────────────── */
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 100%);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 32px rgba(0,0,0,.4);
}

/* ── Header ─────────────────────────────────────────────────── */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 46px;
  background: var(--bg);
  padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.hdr::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, #FFBB01 40%, #FFBB01 60%, transparent 100%);
  pointer-events: none;
}

/* Logo */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-sun {
  display: block; width: 36px; height: 17px; flex-shrink: 0;
  background-color: var(--gold);
  -webkit-mask-image: url('aurora-sunrise.png');
          mask-image: url('aurora-sunrise.png');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.logo-text {
  font-family: 'Montserrat', var(--font);
  font-size: 20px; font-weight: 500; letter-spacing: 0.13em;
  color: var(--gold);
}

/* Header right */
.hdr-r { display: flex; align-items: center; gap: 10px; }
.clock { font-size: 13px; color: var(--ink-2); letter-spacing: -0.01em; font-weight: 500; }

/* Pulse dot */
.pulse-wrap { position: relative; width: 10px; height: 10px; }
.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--good);
  position: relative; z-index: 1;
  transition: background .3s;
  animation: breathe 2.5s ease-in-out infinite;
}
.pulse-ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--good); opacity: 0.4;
  animation: ring 2.5s ease-out infinite;
}
.pulse-dot.err { background: var(--red); animation: none; }
.pulse-dot.err ~ .pulse-ring { background: var(--red); animation: none; }
@keyframes breathe {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}
@keyframes ring {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: 0.4; }
  100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0;   }
}

/* ── Nav ────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 46px; left: 0; right: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  display: flex;
}
.ntab {
  flex: 1; padding: 0 4px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
  transition: color .15s;
  user-select: none; -webkit-user-select: none;
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.ntab.on { color: var(--gold); }
/* Sliding indicator bar */
.nav-indicator {
  position: absolute; bottom: 0; height: 2px;
  background: var(--gold); border-radius: 1px;
  transition: transform 200ms ease, width 200ms ease;
  pointer-events: none;
}

/* ── Error bar ──────────────────────────────────────────────── */
.err-bar {
  display: none;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25);
  border-radius: var(--rs); padding: 8px 12px; margin: 8px 16px 0;
  font-size: 13px; color: #fca5a5;
}
.err-bar.on { display: block; }

/* ── Pages ──────────────────────────────────────────────────── */
.page { display: none; padding-bottom: 32px; }
.page.on { display: block; }

/* ── Hero stats (Overview Power) ────────────────────────────── */
.stat-hero { padding: 6px 16px 0; }
.hero-stat { padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.stat-pair   { display: grid; grid-template-columns: 1fr 1fr;    gap: 16px; padding-top: 14px; }
.stat-triple { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding-top: 14px; margin-bottom: 16px; }

.sl {
  font-size: var(--t-meta); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-meta-spacing);
  color: var(--ink-3); margin-bottom: 6px;
}
.sv-row { display: flex; align-items: baseline; gap: 4px; }
.sv {
  font-size: 42px; font-weight: 500; line-height: 1; letter-spacing: -0.035em;
  color: var(--ink); display: block; min-height: 40px;
}
.minor-stat .sv { font-size: 22px; font-weight: 500; color: var(--ink-2); min-height: 22px; }
.su { font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.minor-stat .su { font-size: 11px; }
.sctx { font-size: 11px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }

/* ── Ambient cards (Overview Temperature) ───────────────────── */
.amb-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; padding: 0 16px;
}
.amb-card {
  padding: 12px;
  background: var(--surface-2); border-radius: var(--r);
  min-width: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.amb-card:hover {
  background: var(--surface-3);
}
.al {
  font-size: var(--t-meta); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-meta-spacing);
  color: var(--ink-3);
  margin-bottom: 8px; line-height: 1.2; min-height: 22px;
}
.av-row { display: flex; align-items: baseline; gap: 1px; white-space: nowrap; }
.av { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.au { font-size: 11px; font-weight: 500; color: var(--ink-3); margin-left: 1px; }
.ad { margin-top: 5px; line-height: 1.2; }
.ad.neutral { color: var(--ink-3); }
.ad.cool    { color: var(--teal); }
.ad.hot     { color: var(--ember); }
.ad-num { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.ad-lbl { display: block; font-size: 10.5px; margin-top: 1px; }
.ah { font-size: 10px; color: var(--ink-3); margin-top: 8px; letter-spacing: 0.02em; }

/* ── Overview section headers ───────────────────────────────── */
.ov-hdr {
  display: flex; align-items: center;
  padding: 22px 16px 10px;
  font-size: var(--t-section); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-section-spacing);
  color: var(--ink);
}
.ov-hdr::after {
  content: ''; flex: 1; height: 1px;
  background: var(--hairline); margin-left: 10px;
}
.ov-hdr:first-child { padding-top: 14px; }

/* ── Map section ────────────────────────────────────────────── */
.map-wrap { padding: 0 16px; }
.map-stage {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 14px 12px 12px;
  margin-bottom: 16px;
}
.compass {
  position: absolute; top: 10px; right: 10px;
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--ink-2);
  z-index: 2;
}
.compass svg { width: 14px; height: 14px; display: block; }
.map-hdr {
  font-size: var(--t-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-label-spacing);
  color: var(--ink-2);
  padding: 2px 4px 12px;
  padding-right: 44px; /* clear the compass */
}

/* ── Pod grid ───────────────────────────────────────────────── */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }

/* ── Pod card ───────────────────────────────────────────────── */
.pod {
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: var(--rs);
  padding: 9px 10px 11px;
  position: relative;
  min-height: 80px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-width: 0;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: opacity .2s;
}
.pod.pod-empty { opacity: 0.35; }
.pod:active { filter: brightness(1.12); }
@media (hover:hover) { .pod:hover { filter: brightness(1.08); } }

/* Activity dot — replaces old left-stripe + bg-tint + colored W */
.pod .pulse {
  position: absolute; top: 11px; right: 11px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(255,187,1,0.55);
}
.pod.pod-empty .pulse,
.pod.pod-low   .pulse { background: var(--ink-4); box-shadow: none; }

/* Pod card content */
.pnum {
  font-size: var(--t-meta); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-meta-spacing);
  color: var(--ink-3);
}
.pnames { font-size: 13px; font-weight: 500; color: var(--ink); margin-top: 4px; line-height: 1.35; }
.pw-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-top: 10px;
}
.pw { font-size: 18px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); white-space: nowrap; }
.pw.w-zero { color: var(--ink-4); font-weight: 400; }
.pwu { font-size: 10.5px; font-weight: 500; color: var(--ink-3); margin-left: 1px; }

/* Temp badge — sits in pw-row, no longer absolutely positioned */
.tbadge {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 99px;
  white-space: nowrap;
  background: rgba(200,220,255,0.05); color: var(--ink-2);
}
.tbadge.cool { color: var(--teal);  background: var(--teal-mute); }
.tbadge.hot  { color: var(--ember); background: var(--ember-mute); }

/* Dashed spacer for empty grid slot (Pod 5's east neighbor) */
.pod-spacer {
  border-radius: var(--rs);
  border: 1px dashed var(--hairline-2);
  min-height: 80px;
}

/* ── Kitchen ────────────────────────────────────────────────── */
.kit-hdr {
  font-size: var(--t-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-label-spacing);
  color: var(--ink-2); margin-bottom: 8px;
}
.krow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.krow + .kit-hdr { margin-top: 16px; }
.srow { display: grid; grid-template-columns: 1fr; gap: 8px; }
.kcard {
  background: var(--surface-3);
  border-radius: var(--rs); padding: 12px 14px;
  cursor: pointer; transition: filter .12s;
}
.kcard:active { filter: brightness(1.15); }
.kn {
  font-size: var(--t-meta); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-meta-spacing);
  color: var(--ink-3);
}
.kw { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-top: 4px; }
.kw.w-zero { color: var(--ink-3); font-weight: 500; font-size: 18px; }
.kwu { font-size: 11px; color: var(--ink-3); font-weight: 400; }

/* ── Pod/Kitchen detail overlay ─────────────────────────────── */
.pod-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0);
  transition: background 320ms ease;
  z-index: 199; pointer-events: none;
}
.pod-backdrop.on { background: rgba(0,0,0,.55); pointer-events: auto; }

#pg-pod {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.34, 1.15, 0.64, 1);
  z-index: 200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#pg-pod.on { transform: translateX(0); }

.pod-hdr {
  position: sticky; top: 0;
  background: var(--overlay-hdr); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; z-index: 10;
}
.close-btn {
  background: rgba(255,255,255,.06); border: 1px solid var(--hairline);
  border-radius: var(--rs); padding: 0 16px;
  color: var(--ink); cursor: pointer; font-size: 18px;
  min-width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color .15s;
}
.close-btn:hover { color: var(--gold); }
.close-btn:active { background: rgba(255,255,255,.1); }
.pod-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pod-meta {
  font-size: var(--t-meta); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-meta-spacing);
  color: var(--ink-3);
}
.pod-occ {
  font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pod-body { padding: 16px; max-width: 540px; margin: 0 auto; padding-bottom: 40px; }

/* Section divider inside pod detail */
.section-div { height: 1px; background: var(--hairline); margin: 16px 0; }
.section-lbl {
  font-size: var(--t-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-label-spacing);
  color: var(--ink-2); margin-bottom: 12px;
}

/* ── Occupant section ───────────────────────────────────────── */
.occ-names-display { margin-bottom: 4px; }
.occ-name-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--hairline);
}
.occ-name-row:last-child { border-bottom: none; }
.occ-name-text { font-size: 18px; font-weight: 600; color: var(--ink); }
.edit-occ-btn {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); font-size: 13px; padding: 4px 0;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color .15s; margin-top: 4px;
}
.edit-occ-btn:hover { color: var(--gold); }

/* Dropdowns */
.occ-row { margin-bottom: 8px; }
select.sel {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--hairline);
  border-radius: var(--rs); color: var(--ink);
  padding: 11px 36px 11px 12px;
  font-size: 15px; appearance: none; -webkit-appearance: none;
  font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a7fa8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  min-height: 44px; cursor: pointer;
}
select.sel:focus { outline: none; border-color: var(--gold); }
.save-btn {
  width: 100%; padding: 13px; margin-top: 10px;
  background: var(--gold); color: #000;
  border: none; border-radius: var(--rs);
  font-size: 16px; font-weight: 700; cursor: pointer;
  min-height: 44px; font-family: inherit;
  transition: opacity .15s;
}
.save-btn:active { opacity: .8; }
.save-msg { text-align: center; margin-top: 8px; font-size: 13px; min-height: 18px; }


/* ── Power tab stat chips (4-chip camp-wide) ────────────────── */
.power-chips {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 8px; margin-bottom: 16px;
}
.pchip {
  background: linear-gradient(135deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--r); padding: 14px 12px; text-align: center;
}
.pchip .sl { margin-bottom: 6px; }
.pchip .sv { font-size: 33px; min-height: 30px; }

/* ── Toggle buttons ─────────────────────────────────────────── */
.toggle-row { display: flex; gap: 8px; margin-bottom: 16px; }
.toggle-btn {
  flex: 1; padding: 8px 0; border-radius: var(--rs);
  background: rgba(255,255,255,.04); border: 1px solid var(--hairline);
  color: var(--ink-2); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s; min-height: 36px;
  font-family: inherit;
}
.toggle-btn.active {
  background: var(--gold); color: #000; border-color: var(--gold);
  font-weight: 700;
}
.toggle-btn:not(.active):active { background: rgba(255,255,255,.08); }

/* ── Graph cards ────────────────────────────────────────────── */
.graph-card {
  background: var(--surface-2);
  border-radius: var(--r); padding: 16px; margin-bottom: 16px;
}
.graph-ttl {
  font-size: var(--t-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-label-spacing);
  color: var(--ink-2); margin-bottom: 12px;
}
.graph-svg { width: 100%; height: 90px; display: block; overflow: visible; }
.graph-loading { height: 90px; border-radius: var(--rs); }

/* SVG draw-on animation */
@keyframes drawPath {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
.draw-path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: drawPath 600ms ease-out forwards;
}

/* ── Daily bar chart ────────────────────────────────────────── */
.daily-chart { width: 100%; overflow: hidden; }
.daily-chart svg { width: 100%; display: block; overflow: visible; }

/* ── Rankings section ───────────────────────────────────────── */
.rank-section { padding: 0; }
.rank-ttl {
  font-size: var(--t-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-label-spacing);
  color: var(--ink-2); margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.rank-head {
  display: grid;
  grid-template-columns: 22px 1fr 64px 56px;
  align-items: end; gap: 12px;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--hairline);
  font-size: 9.5px; font-weight: 700;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em;
}
.rank-head .pwr-h { grid-column: 3 / 5; text-align: left; }

.rank-row {
  display: grid;
  grid-template-columns: 22px 1fr 64px 56px;
  align-items: center; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
}
.rank-num {
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  text-align: center;
}
.rank-row.first-row .rank-num { color: var(--gold); }

.rank-info {
  display: flex; align-items: baseline; gap: 6px;
  min-width: 0; white-space: nowrap;
}
.rank-name {
  font-size: 13px; font-weight: 600; color: var(--ink); flex-shrink: 0;
}
.rank-name-link {
  cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--hairline-2); text-underline-offset: 3px;
  transition: color .15s;
}
.rank-name-link:hover { color: var(--gold); }
.rank-occ {
  font-size: 12px; color: var(--ink-3); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis;
}

.rank-bar-wrap { width: 100%; }
.rank-bar-bg {
  height: 5px; background: var(--hairline);
  border-radius: 99px; overflow: hidden;
}
.rank-bar-fill {
  height: 100%; background: var(--gold); border-radius: 99px;
  opacity: 0.6; transition: width 400ms ease;
}
.rank-row.first-row .rank-bar-fill { opacity: 1; }

.rank-val {
  font-size: 13px; color: var(--ink); font-weight: 500;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.rank-unit { font-size: 10px; color: var(--ink-3); font-weight: 400; margin-left: 2px; }

/* Rankings nav link from pod detail */
.rank-link {
  display: inline-block; padding: 12px 0 4px;
  font-size: 13px; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--hairline-2);
  background: none; border: none; cursor: pointer;
  letter-spacing: 0; font-family: inherit; transition: color .15s;
}
.rank-link:hover { color: var(--gold); }

/* Power page outer padding */
#pg-power { padding: 0 0 32px; }
.power-section { padding: 16px 16px 0; }
.power-section-hdr {
  font-size: var(--t-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-label-spacing);
  color: var(--ink-2); margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}

/* ── Temps page ─────────────────────────────────────────────── */
#pg-temp { padding: 0 16px 0; }
#tlist, .tlist { display: flex; flex-direction: column; gap: 8px; }
#tlist-ambient { margin-bottom: 0; }
.tcard {
  background: var(--surface-2); border: none;
  border-radius: var(--r); padding: 13px 14px 12px;
  box-shadow: none; margin-bottom: 0;
}
.tc-hdr {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.tc-name {
  font-size: var(--t-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-label-spacing);
  color: var(--ink); margin-bottom: 0;
}
.tc-tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 2px 7px; border-radius: 99px;
  background: rgba(200,220,255,0.06); color: var(--ink-3); white-space: nowrap;
}
.tc-tag.ac-on  { background: var(--teal-mute);  color: var(--teal);  }
.tc-tag.ac-off { background: var(--ember-mute); color: var(--ember); }
.tc-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
}
.tc-val-block { min-width: 0; }
.tc-tf  { font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.tc-tfu { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 1px; }
.tc-delta { margin-top: 5px; color: var(--ink-3); }
.tc-delta.cool { color: var(--teal); }
.tc-delta.hot  { color: var(--ember); }
.tc-delta-num { display: block; font-size: 18px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.tc-delta-lbl { display: block; font-size: 11px; margin-top: 1px; }
.spark { width: 80px; height: 32px; flex-shrink: 0; display: block; overflow: visible; }
.tc-meta {
  font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.02em;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hairline);
}

/* Combined temp graph on Temps page */
.temp-page-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 12px;
}
.temp-page-hdr .graph-ttl { margin-bottom: 0; }

.combined-graph-card {
  border-radius: var(--r); padding: 16px; margin-bottom: 16px;
  background: var(--surface-2);
}
.combined-legend {
  display: flex; gap: 14px; margin-bottom: 10px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--ink-2); letter-spacing: 0.04em;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 2px; flex-shrink: 0; display: inline-block; }
.legend-val { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.legend-val .u { color: var(--ink-3); font-weight: 400; }
.combined-graph-ttl {
  font-size: var(--t-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-label-spacing);
  color: var(--ink-2); margin-bottom: 6px;
}
.combined-graph-svg { width: 100%; height: 120px; display: block; overflow: visible; }

/* ── Skeleton shimmer ───────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skel {
  background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 50%, var(--skel-a) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease infinite;
  border-radius: 4px; display: block;
}

/* ── Number count-up flash ──────────────────────────────────── */
@keyframes numflash {
  0%   { transform: scale(1);    color: var(--ink); }
  40%  { transform: scale(1.07); color: #fff; }
  100% { transform: scale(1);    color: var(--ink); }
}
.flash { animation: numflash 0.35s ease; }

/* ── Confetti ───────────────────────────────────────────────── */
@keyframes confettiFly {
  0%   { opacity: 1; transform: translate(0,0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--cx),var(--cy)) rotate(720deg); }
}
.confetti {
  position: fixed; width: 7px; height: 7px;
  pointer-events: none; z-index: 999;
  animation: confettiFly .75s ease-out forwards;
}

/* ── Section headers (inside padded pages) ──────────────────── */
.section-hdr {
  display: flex; align-items: center;
  padding: 22px 0 10px;
  font-size: var(--t-section); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--t-section-spacing);
  color: var(--ink);
}
.section-hdr::after {
  content: ''; flex: 1; height: 1px;
  background: var(--hairline); margin-left: 10px;
}

/* ── Hero power row with sparkline ──────────────────────────── */
.hero-now-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ── Power page padding ─────────────────────────────────────── */
#pg-pow { padding: 0 16px 0; }

/* ── Graph card header (title + toggle) ─────────────────────── */
.graph-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.graph-hdr .graph-ttl { margin-bottom: 0; }

/* ── Toggle group ───────────────────────────────────────────── */
.toggle-group { display: flex; gap: 4px; }
.toggle-group .toggle-btn {
  flex: unset; padding: 5px 12px;
  min-height: 28px; font-size: 12px;
}

/* ── Daily bar chart SVG ────────────────────────────────────── */
.daily-svg { width: 100%; height: 100px; display: block; overflow: visible; }

/* ── Pod card names / empty label ───────────────────────────── */
.p-occ-names { font-size: 13px; font-weight: 500; color: var(--ink); flex: 1; margin-top: 4px; line-height: 1.4; }
.p-avatars { display: flex; align-items: center; gap: 4px; flex: 1; margin-top: 4px; }
.p-empty-label { font-size: 12px; color: var(--ink-3); font-style: italic; flex: 1; margin-top: 4px; }

/* ── Avatar circles ─────────────────────────────────────────── */
.avatar-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.9);
  flex-shrink: 0;
}

/* ── Occupant section (two states) ─────────────────────────── */
.occ-empty { margin-bottom: 20px; }
.occ-label { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.occ-occupied { padding: 0 0 12px; margin-bottom: 0; }
.occ-avatars { display: flex; gap: 6px; flex-shrink: 0; }
.occ-names { font-size: 18px; font-weight: 600; color: var(--ink); flex: 1; }

.edit-link {
  display: inline-block;
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); font-size: 13px; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color .15s; font-family: inherit;
}
.edit-link:hover { color: var(--gold); }
.occ-form { margin-top: 4px; }

/* ── Fullscreen chart overlay ───────────────────────────────── */
.fs-chart {
  position: fixed; inset: 0; z-index: 400;
  background: var(--bg);
  display: none; flex-direction: column;
}
.fs-chart.on { display: flex; }
.fs-hdr {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 16px 12px; flex-shrink: 0;
  border-bottom: 1px solid var(--hairline);
}
.fs-hdr-left { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fs-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.fs-nav { display: flex; gap: 8px; }
.fs-nav-btn {
  background: rgba(255,255,255,.06); border: 1px solid var(--hairline);
  border-radius: 8px; color: var(--ink-2); font-size: 14px;
  padding: 5px 18px; cursor: pointer; transition: background .15s, color .15s;
}
.fs-nav-btn:active { background: rgba(255,255,255,.14); color: var(--ink); }
.fs-close {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid var(--hairline);
  color: var(--ink); font-size: 20px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-left: 12px; margin-top: -2px;
  transition: color .15s;
}
.fs-close:hover { color: var(--gold); }
.fs-body {
  flex: 1; display: flex; align-items: stretch;
  padding: 8px 4px 12px;
  min-height: 0;
}

/* ── uPlot resets ───────────────────────────────────────────── */
.u-wrap { background: transparent !important; }
.u-legend { display: none !important; }
.u-select { background: rgba(255,255,255,0.05) !important; }

/* ── uPlot tooltip ─────────────────────────────────────────── */
.uplot-tip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--tip-bg);
  border: 1px solid var(--tip-bd);
  border-radius: 8px; padding: 7px 13px;
  font-family: 'Inter', system-ui; font-size: 12px; font-weight: 600;
  white-space: nowrap; color: var(--ink); line-height: 1.7;
}
.uplot-tip-time { font-size: 11px; font-weight: 500; color: var(--ink-2); display: block; margin-bottom: 2px; }

/* ── FS uPlot container ─────────────────────────────────────── */
.fs-uplot-wrap { width: 100%; flex: 1; min-height: 0; overflow: hidden; }

/* ── Combined temp uPlot container ─────────────────────────── */
.combined-temp-wrap { width: 100%; overflow: hidden; }

/* ── Chart SVGs: pointer cursor for tap-to-expand ───────────── */
.graph-svg.tappable, .spark.tappable, .combined-graph-svg.tappable { cursor: pointer; }

/* ── Temp range toggle row ──────────────────────────────────── */
.temp-range-row { padding: 0 0 12px; display: flex; justify-content: flex-end; }

/* ── ALT toggle switch ───────────────────────────────────────── */
.alt-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  margin-left: 2px;
}
.alt-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.alt-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--surface-3);
  border: 1px solid var(--hairline);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 20px;
}
.alt-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: var(--ink-3);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
}
input:checked + .alt-slider {
  background-color: rgba(255, 187, 1, 0.15);
  border-color: var(--gold);
}
input:checked + .alt-slider:before {
  transform: translateX(18px);
  background-color: var(--gold);
  box-shadow: 0 0 8px rgba(255, 187, 1, 0.6);
}

/* ── Interactive SVG styles (ALT Mode) ──────────────────────── */
.svg-interactive-wrapper {
  position: relative;
  width: 100%;
}
.svg-hover-tooltip {
  position: absolute;
  background: var(--tip-bg);
  border: 1px solid var(--tip-bd);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  pointer-events: none;
  z-index: 100;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  display: none;
  transform: translate(-50%, -100%);
  margin-top: -8px;
  transition: opacity 0.15s ease;
}
.svg-hover-line {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2,3;
  opacity: 0.6;
}
.svg-hover-dot {
  stroke-width: 2;
  transition: r 0.1s ease;
}

/* ── ALT Fullscreen Chart Layout ────────────────────────────── */
.fs-main-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 12px;
  min-height: 0;
}
.fs-alt-controls {
  margin-top: 4px;
}
.fs-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fs-tool-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs-tool-btn:not(.text-btn) {
  width: 28px;
  font-size: 15px;
}
.fs-tool-btn.text-btn {
  padding: 0 10px;
}
.fs-tool-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--ink);
}
.fs-tool-btn:active {
  background: rgba(255,255,255,0.15);
}
.fs-tool-btn.active {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}
.fs-tool-sep {
  width: 1px;
  height: 16px;
  background: var(--hairline);
  margin: 0 4px;
}

/* Stats Panel Hierarchy */
.fs-stats-panel {
  display: flex;
  gap: 12px;
  width: 100%;
  flex-shrink: 0;
}
.fs-stats-main-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  min-width: 0;
}
.fs-stat-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.fs-stat-col:not(:last-child) {
  border-right: 1px solid var(--hairline);
  padding-right: 16px;
}
.fs-stat-col .stat-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.fs-stat-col .stat-val {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-stat-col .stat-val.hero {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
}
.fs-stat-col .stat-val .unit {
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 1px;
}
.fs-stat-col .stat-sub {
  font-size: 10px;
  color: var(--ink-2);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-energy-card {
  width: 140px;
  flex-shrink: 0;
  background: rgba(255, 187, 1, 0.03);
  border: 1px solid rgba(255, 187, 1, 0.2);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fs-energy-card .stat-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.fs-energy-card .stat-val.highlight {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.fs-energy-card .stat-val.highlight .unit {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
  margin-left: 1px;
}
.fs-energy-card .stat-sub {
  font-size: 9px;
  color: var(--ink-3);
  margin-top: 2px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .fs-stats-panel {
    flex-direction: column;
    gap: 8px;
  }
  .fs-stats-main-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }
  .fs-stat-col:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    padding-right: 0;
    padding-bottom: 8px;
  }
}

/* Legend Toggles */
.fs-legend-toggle-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  flex-shrink: 0;
}
.fs-legend-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.fs-legend-pill .swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.fs-legend-pill:hover {
  background: rgba(255,255,255,0.08);
  color: var(--ink);
}
.fs-legend-pill.inactive {
  opacity: 0.4;
  border-color: transparent;
  background: rgba(255,255,255,0.01);
}
.fs-legend-pill.inactive .swatch {
  transform: scale(0.5);
  background: var(--ink-4) !important;
}

/* Scrubber / Minimap */
.fs-minimap-wrap {
  width: 100%;
  height: 52px;
  flex-shrink: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 6px;
  position: relative;
  overflow: hidden;
}
/* Style uPlot select overlay on minimap */
.fs-minimap-wrap .u-select {
  background: rgba(255, 187, 1, 0.12) !important;
  border-left: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 540px) {
  .sv { font-size: 35px; min-height: 32px; }
  .ov-hdr, .section-hdr, .stat-hero, .amb-row, .map-wrap,
  #pg-temp, #pg-pow, .rank-section { max-width: 540px; margin-left: auto; margin-right: auto; }
  .err-bar { max-width: 508px; margin-left: auto; margin-right: auto; }
}