/* Torr.se playground — runda 2 (förslag 4–6): delade stilar */
/* Montserrat loaded via <link rel="preload"> in index.html */

/* ---------- Ink profiles (grafen, brickor) — följer sajtens tema ---------- */
:root {
  --pg2-ink: #0f172a; --pg2-muted: #5b6b82; --pg2-grid: rgba(15, 23, 42, 0.12);
  --pg2-r1: #4f46e5; --pg2-r2: #0284c7; --pg2-tfill: #fb923c; --pg2-bar: rgba(2, 132, 199, 0.42);
  --pg2-tg-bg: rgba(15, 23, 42, 0.07); --pg2-tg-fg: #475569; --pg2-on-bg: #0f172a; --pg2-on-fg: #ffffff;
  --pg2-glass: rgba(255, 255, 255, 0.8); --pg2-glass-bd: rgba(255, 255, 255, 0.95); --pg2-glass-sh: 0 8px 24px -12px rgba(15, 23, 42, 0.35);
  --pg2-wind: #0284c7; --pg2-sun: #f59e0b;
}
[data-theme="dark"] {
  --pg2-ink: #f1f5f9; --pg2-muted: #94a3b8; --pg2-grid: rgba(148, 163, 184, 0.2);
  --pg2-r1: #a78bfa; --pg2-r2: #38bdf8; --pg2-tfill: #fbbf24; --pg2-bar: rgba(56, 189, 248, 0.45);
  --pg2-tg-bg: rgba(148, 163, 184, 0.16); --pg2-tg-fg: #cbd5e1; --pg2-on-bg: #f8fafc; --pg2-on-fg: #0f172a;
  --pg2-glass: rgba(10, 17, 33, 0.58); --pg2-glass-bd: rgba(148, 163, 184, 0.18); --pg2-glass-sh: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --pg2-wind: #38bdf8; --pg2-sun: #fbbf24;
}
.pg2-ink-light {
  --pg2-ink: #ffffff; --pg2-muted: rgba(255, 255, 255, 0.78); --pg2-grid: rgba(255, 255, 255, 0.22);
  --pg2-r1: #c4b5fd; --pg2-r2: #7dd3fc; --pg2-tfill: #fde68a; --pg2-bar: rgba(186, 230, 253, 0.55);
  --pg2-tg-bg: rgba(255, 255, 255, 0.18); --pg2-tg-fg: rgba(255, 255, 255, 0.85); --pg2-on-bg: #ffffff; --pg2-on-fg: #0f172a;
  --pg2-wind: #bae6fd; --pg2-sun: #fde68a;
}
.pg2-ink-dark {
  --pg2-ink: #0f172a; --pg2-muted: #3f4f66; --pg2-grid: rgba(15, 23, 42, 0.14);
  --pg2-r1: #4338ca; --pg2-r2: #0369a1; --pg2-tfill: #f97316; --pg2-bar: rgba(3, 105, 161, 0.42);
  --pg2-tg-bg: rgba(15, 23, 42, 0.08); --pg2-tg-fg: #334155; --pg2-on-bg: #0f172a; --pg2-on-fg: #ffffff;
  --pg2-wind: #0369a1; --pg2-sun: #d97706;
}
/* Midnattsmarkör och temperatursiffror (separat från linjekurvan och ej svarta) */
:root {
  --pg2-mid: rgba(15, 23, 42, 0.28); --pg2-mid-bg: rgba(255, 255, 255, 0.9);
  --pg2-lbl-max-fg: #c2410c; --pg2-lbl-max-bg: rgba(255, 247, 237, 0.95); --pg2-lbl-max-bd: rgba(251, 146, 60, 0.55);
  --pg2-lbl-min-fg: #0369a1; --pg2-lbl-min-bg: rgba(240, 249, 255, 0.95); --pg2-lbl-min-bd: rgba(56, 189, 248, 0.55);
}
[data-theme="dark"] {
  --pg2-mid: rgba(226, 232, 240, 0.32); --pg2-mid-bg: rgba(15, 23, 42, 0.85);
  --pg2-lbl-max-fg: #fdba74; --pg2-lbl-max-bg: rgba(67, 20, 7, 0.7); --pg2-lbl-max-bd: rgba(251, 146, 60, 0.6);
  --pg2-lbl-min-fg: #7dd3fc; --pg2-lbl-min-bg: rgba(8, 47, 73, 0.7); --pg2-lbl-min-bd: rgba(56, 189, 248, 0.6);
}
.pg2-ink-light {
  --pg2-mid: rgba(255, 255, 255, 0.5); --pg2-mid-bg: rgba(15, 23, 42, 0.4);
  --pg2-lbl-max-fg: #ffedd5; --pg2-lbl-max-bg: rgba(154, 52, 18, 0.65); --pg2-lbl-max-bd: rgba(253, 186, 116, 0.55);
  --pg2-lbl-min-fg: #e0f2fe; --pg2-lbl-min-bg: rgba(3, 105, 161, 0.65); --pg2-lbl-min-bd: rgba(125, 211, 252, 0.55);
}
.pg2-ink-dark {
  --pg2-mid: rgba(15, 23, 42, 0.28); --pg2-mid-bg: rgba(255, 255, 255, 0.9);
  --pg2-lbl-max-fg: #c2410c; --pg2-lbl-max-bg: rgba(255, 247, 237, 0.95); --pg2-lbl-max-bd: rgba(251, 146, 60, 0.55);
  --pg2-lbl-min-fg: #0369a1; --pg2-lbl-min-bg: rgba(240, 249, 255, 0.95); --pg2-lbl-min-bd: rgba(56, 189, 248, 0.55);
}

/* ---------- Sky palettes (ljusare regn än runda 1) ---------- */
[data-sky="clear-day"]    { --sa: #3b8ee0; --sb: #6cb3f0; --sc: #a9d7f7; }
[data-sky="partly-day"]   { --sa: #4f8dcb; --sb: #7eaddb; --sc: #b5d0ea; }
[data-sky="cloudy-day"]   { --sa: #7a8ca1; --sb: #9cabbc; --sc: #c2cbd6; }
[data-sky="rain-day"]     { --sa: #667c94; --sb: #889bb0; --sc: #aebdcc; }
[data-sky="snow-day"]     { --sa: #8aa0b8; --sb: #afc0d2; --sc: #d7e0ea; }
[data-sky="storm-day"]    { --sa: #4b5070; --sb: #686d8f; --sc: #8e93ad; }
[data-sky="clear-night"]  { --sa: #0d1b3d; --sb: #1d3366; --sc: #37528f; }
[data-sky="partly-night"] { --sa: #13213f; --sb: #283c66; --sc: #475d88; }
[data-sky="cloudy-night"] { --sa: #252e3c; --sb: #394555; --sc: #556273; }
[data-sky="rain-night"]   { --sa: #2a394c; --sb: #3f5066; --sc: #5b6d84; }
[data-sky="snow-night"]   { --sa: #31415a; --sb: #4a5c78; --sc: #6c7e99; }
[data-sky="storm-night"]  { --sa: #1e1c33; --sb: #332f4f; --sc: #4f496e; }

.pg2-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.pg2-sky-bg {
  position: absolute; inset: 0;
  background: linear-gradient(172deg, var(--sa, #3b8ee0) 0%, var(--sb, #6cb3f0) 55%, var(--sc, #a9d7f7) 100%);
  transition: filter 0.4s;
}
[data-theme="dark"] .pg2-sky-bg { filter: brightness(0.8) saturate(1.05); }
.pg2-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.pg2-orb {
  position: absolute; top: -70px; right: -30px; width: 240px; height: 240px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.85) 0%, rgba(255, 214, 120, 0.25) 38%, transparent 68%);
  animation: pg2-orb 7s ease-in-out infinite alternate;
}
[data-sky="clear-day"] .pg2-orb, [data-sky="partly-day"] .pg2-orb { opacity: 1; }
[data-sky="cloudy-day"] .pg2-orb, [data-sky="rain-day"] .pg2-orb, [data-sky="snow-day"] .pg2-orb { opacity: 0.35; filter: blur(10px); }
[data-sky$="-night"] .pg2-orb {
  opacity: 0.9; width: 130px; height: 130px; top: -36px; right: 24px;
  background: radial-gradient(circle, rgba(230, 236, 255, 0.4) 0%, rgba(180, 196, 255, 0.1) 45%, transparent 70%);
}
@keyframes pg2-orb { to { transform: scale(1.08) translate(-8px, 8px); } }

.pg2-stars { position: absolute; inset: 0; opacity: 0; }
[data-sky="clear-night"] .pg2-stars, [data-sky="partly-night"] .pg2-stars {
  opacity: 1;
  background-image:
    radial-gradient(1px 1px at 8% 18%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 22% 64%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 37% 12%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 51% 46%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 66% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 79% 58%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 92% 30%, rgba(255,255,255,.8), transparent);
  animation: pg2-twinkle 4s ease-in-out infinite alternate;
}
@keyframes pg2-twinkle { from { opacity: 0.55; } to { opacity: 1; } }

.pg2-cloud { position: absolute; border-radius: 50%; opacity: 0; filter: blur(22px); background: rgba(255, 255, 255, 0.4); animation: pg2-drift 46s linear infinite; }
.pg2-cloud.k1 { width: 340px; height: 90px; top: 4%; left: -35%; }
.pg2-cloud.k2 { width: 260px; height: 70px; top: 42%; left: -45%; animation-duration: 62s; animation-delay: -20s; }
.pg2-cloud.k3 { width: 420px; height: 110px; top: 68%; left: -50%; animation-duration: 80s; animation-delay: -45s; }
[data-sky^="partly"] .pg2-cloud { opacity: 0.7; }
[data-sky^="cloudy"] .pg2-cloud, [data-sky^="rain"] .pg2-cloud, [data-sky^="snow"] .pg2-cloud, [data-sky^="storm"] .pg2-cloud { opacity: 1; }
[data-sky^="rain"] .pg2-cloud, [data-sky^="storm"] .pg2-cloud { background: rgba(225, 232, 242, 0.32); }
[data-sky$="-night"] .pg2-cloud { background: rgba(160, 175, 210, 0.16); }
@keyframes pg2-drift { to { transform: translateX(260%); } }

.pg2-haze { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; opacity: 0; background: linear-gradient(to top, rgba(255, 255, 255, 0.16), transparent); }
[data-sky^="rain"] .pg2-haze, [data-sky^="storm"] .pg2-haze, [data-sky^="snow"] .pg2-haze { opacity: 1; }

/* ---------- Top row ---------- */
.pg2-top { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; min-height: 28px; }
.pg2-loc { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }
.pg2-loc #location-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg2-meta { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; flex: none; }
.pg2-clock { opacity: 0.9; }
.pg2-radar {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pg2-radar i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; position: relative; }
.pg2-radar i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #4ade80; animation: pg-pulse-ring 1.6s ease-out infinite; }
.pg2-radar.down i { background: #f87171; } .pg2-radar.down i::after { border-color: #f87171; }
.pg2-menu-btn {
  display: none; flex: none; width: 30px; height: 30px; border-radius: 10px; border: 0; padding: 0; cursor: pointer;
  place-items: center; color: inherit; background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.2s, transform 0.15s;
}
.pg2-menu-btn:active { transform: scale(0.92); }

/* ---------- Story text ---------- */
.pg2-story { display: flex; align-items: flex-start; gap: 8px; margin: 0; min-width: 0; }
.pg2-story-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.pg2-story.wet .pg2-story-ic { background: linear-gradient(135deg, #38bdf8, #6366f1); color: #fff; animation: pg2-drop 2.2s ease-out infinite; }
.pg2-story.dry .pg2-story-ic { background: rgba(74, 222, 128, 0.22); color: #16a34a; }
.pg2-story.info .pg2-story-ic { background: rgba(251, 191, 36, 0.22); color: #d97706; }
.pg2-story-txt { min-width: 0; }
.pg2-story-txt b { display: block; font-size: 0.92rem; font-weight: 700; line-height: 1.28; letter-spacing: -0.005em; }
.pg2-story-txt small { display: block; font-size: 0.74rem; font-weight: 500; opacity: 0.82; margin-top: 2px; line-height: 1.3; }
@keyframes pg2-drop { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); } }

/* ---------- Chart ---------- */
.pg2-chart { position: relative; color: var(--pg2-ink); --pg2-lane: 24px; --pg2-edge: 10px; }
.pg2-plot { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pg2-plot-body { position: relative; }
/* Rader: markeringsrader (sol upp/ned, veckodag) → grafen. Inget delar yta med något annat. */
.pg2-lanes { height: var(--pg2-lane); }
.pg2-graph { position: relative; height: var(--pg2-graph-h, 96px); }
.pg2-marks { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pg2-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: pg2-reveal 1s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes pg2-reveal { from { clip-path: inset(-40% 100% -40% 0); } to { clip-path: inset(-40% -2% -40% 0); } }
.pg2-area { animation: pg2-fade 0.9s ease both; }
@keyframes pg2-fade { from { opacity: 0; } }
.pg2-line { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12)); }
.pg2-base { stroke: var(--pg2-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pg2-band { stroke: var(--pg2-grid); stroke-dasharray: 3 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pg2-bar { fill: var(--pg2-bar); }
.pg2-bar0 { fill: var(--pg2-grid); }
.pg2-rbar { transform-origin: bottom; transform-box: fill-box; animation: pg-grow-y 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }

.pg2-chart-head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; margin-bottom: 2px; }
.pg2-chart-title { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--pg2-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pg2-chart[data-mode="rain"] .pg2-chart-title { cursor: pointer; user-select: none; }
.pg2-switch-pill { display: inline-block; font-size: 0.55rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--pg2-tg-bg); color: var(--pg2-tg-fg); margin-left: 6px; letter-spacing: normal; text-transform: none; vertical-align: middle; transition: all 0.15s ease; }
.pg2-chart-title:hover .pg2-switch-pill { background: var(--pg2-r2); color: #ffffff; }
.pg2-tgs { flex: none; display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--pg2-tg-bg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pg2-tg {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--pg2-tg-fg);
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.pg2-tg:hover { color: var(--pg2-ink); transform: scale(1.08); }
.pg2-tg.active { background: var(--pg2-on-bg); color: var(--pg2-on-fg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.pg2-tg:focus-visible { outline: 2px solid var(--pg2-r2); outline-offset: 1px; }

.pg2-ov { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pg2-lbl {
  position: absolute;
  top: var(--y, 40%);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  transform: translate(-50%, -145%);
  animation: pg2-lbl-in 0.35s 0.5s ease both;
  pointer-events: none;
  z-index: 3;
}
.pg2-lbl.min { transform: translate(-50%, 45%); }
.pg2-lbl.small {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--pg2-r2);
  transform: translate(-50%, -125%);
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--pg2-mid-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.pg2-lbl.el { transform: translate(0, -145%); }
.pg2-lbl.er { transform: translate(-100%, -145%); }
.pg2-lbl.min.el { transform: translate(0, 45%); }
.pg2-lbl.min.er { transform: translate(-100%, 45%); }
.pg2-lbl.small.el { transform: translate(0, -125%); }
.pg2-lbl.small.er { transform: translate(-100%, -125%); }
/* Placerad av JS (left i px, centrerad över punkten men inom grafen) */
.pg2-lbl.pos { transform: translate(0, calc(-145% + var(--dy, 0px))); }
.pg2-lbl.min.pos { transform: translate(0, calc(45% + var(--dy, 0px))); }
.pg2-chart.scrubbing .pg2-lbl { opacity: 0.25; transition: opacity 0.15s; }

/* Tydlig separation från linjekurvan + färgkodad (ej svart) */
.pg2-lbl-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pg2-lbl.max .pg2-lbl-val {
  color: var(--pg2-lbl-max-fg);
  background: var(--pg2-lbl-max-bg);
  border: 1px solid var(--pg2-lbl-max-bd);
  box-shadow: 0 2px 8px -2px rgba(194, 65, 12, 0.3);
}
.pg2-lbl.min .pg2-lbl-val {
  color: var(--pg2-lbl-min-fg);
  background: var(--pg2-lbl-min-bg);
  border: 1px solid var(--pg2-lbl-min-bd);
  box-shadow: 0 2px 8px -2px rgba(3, 105, 161, 0.3);
}
@keyframes pg2-lbl-in { from { opacity: 0; } to { opacity: 1; } }

.pg2-bandlbl { position: absolute; right: 0; transform: translateY(-115%); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pg2-muted); }
.pg2-peak {
  position: absolute; transform: translate(-50%, -170%); white-space: nowrap; font-size: 0.64rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; color: var(--pg2-on-fg); background: var(--pg2-on-bg);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35); animation: pg2-lbl-in 0.4s 0.6s ease both;
}
.pg2-peak.el { transform: translate(0, -170%); } .pg2-peak.er { transform: translate(-100%, -170%); }
.pg2-peak.pos { transform: translate(0, -170%); }
.pg2-nowdot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--pg2-ink); border: 2px solid var(--pg2-on-fg); box-sizing: border-box; }
.pg2-nowdot.rain { background: var(--pg2-r2); animation: pg2-ping 1.8s ease-out infinite; }
@keyframes pg2-ping { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6); } 100% { box-shadow: 0 0 0 11px rgba(56, 189, 248, 0); } }

/* Markeringar (sol upp/ned + veckodag vid midnatt): brickan ligger ALLTID centrerad ovanför sin linje.
   Raden (--lane-top) sätts av layoutMarks() så att brickor som skulle krocka staplas i stället för att flyttas i sidled. */
.pg2-mk { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.pg2-mk-badge {
  position: absolute; top: var(--lane-top, 0px); left: 0; transform: translateX(-50%);
  box-sizing: border-box; height: 20px; display: inline-flex; align-items: center; gap: 3px;
  white-space: nowrap; border-radius: 999px; background: var(--pg2-mid-bg);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2);
  animation: pg2-lbl-in 0.4s 0.6s ease both; pointer-events: auto; z-index: 1;
}
.pg2-mk-line { position: absolute; top: calc(var(--lane-top, 0px) + 20px); bottom: 0; left: 0; border-left: 1px dashed var(--pg2-mid); }

/* Soluppgång och solnedgång — samma ikoner som i tabellen (med blå horisont/pil) */
.pg2-sunmark-badge { padding: 0 6px 0 4px; border: 1px solid rgba(0, 185, 241, 0.38); }
.pg2-sunmark.set .pg2-sunmark-badge { border-color: rgba(242, 155, 28, 0.42); }
.pg2-sunmark-img { width: 15px; height: 15px; display: block; flex: none; }
.pg2-sunmark-badge em {
  font-style: normal; font-size: 0.58rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--pg2-ink); line-height: 1;
}
.pg2-sunmark.compact .pg2-sunmark-badge { padding: 0 2px; width: 22px; justify-content: center; }
.pg2-sunmark.compact .pg2-sunmark-badge em { display: none; }
.pg2-sunmark-line { border-left-color: rgba(0, 185, 241, 0.5); }
.pg2-sunmark.set .pg2-sunmark-line { border-left-color: rgba(242, 155, 28, 0.5); }

.pg2-msg { position: absolute; left: 0; right: 0; top: 34%; bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.74rem; font-weight: 600; color: var(--pg2-muted); }
.pg2-msg svg { color: #22c55e; }

/* Midnattsstreck och veckodag (ingen nattmörkning) */
.pg2-midnight em {
  font-style: normal; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.03em; line-height: 1;
  padding: 0 7px; color: var(--pg2-ink); border: 1px solid var(--pg2-grid);
}

.pg2-axis { display: flex; justify-content: space-between; align-items: flex-end; min-height: 32px; margin-top: 3px; font-size: 0.62rem; font-weight: 700; color: var(--pg2-muted); font-variant-numeric: tabular-nums; }
.pg2-axis span { flex: 0 0 0; display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; }
.pg2-axis span:first-child { align-items: flex-start; }
.pg2-axis span:last-child { align-items: flex-end; }
.pg2-axis em { font-style: normal; }
.pg2-axis img { width: 18px; height: 18px; }

.pg2-scrub { position: absolute; top: 0; bottom: 0; width: 0; z-index: 2; pointer-events: none; }
.pg2-scrub::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid var(--pg2-muted); opacity: 0.7; }
.pg2-scrub i { position: absolute; left: -5px; top: var(--y); width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--pg2-ink); border: 2px solid var(--pg2-on-fg); box-sizing: border-box; }
.pg2-scrub span { position: absolute; top: calc(1px - var(--sc-off, 0px)); left: 6px; white-space: nowrap; font-size: 0.64rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--pg2-on-bg); color: var(--pg2-on-fg); }
.pg2-chart.scrubbing .pg2-marks { opacity: 0.2; transition: opacity 0.15s; }
.pg2-scrub.flip span { left: auto; right: 6px; }

/* ---------- Tiles: wind & sun ---------- */
.pg2-tile { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pg2-tile-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.22; }
.pg2-tile-txt b { display: flex; align-items: baseline; gap: 2px; font-size: 0.9rem; font-weight: 800; white-space: nowrap; }
.pg2-tile-txt b small { font-size: 0.7em; font-weight: 600; opacity: 0.8; }
.pg2-tile-txt b em { font-style: normal; font-size: 0.72em; font-weight: 600; opacity: 0.75; }
.pg2-tile-txt > span { font-size: 0.72rem; font-weight: 500; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg2-sun b { gap: 10px; }
.pg2-sun b > span { display: inline-flex; align-items: center; gap: 3px; }
.pg2-sun b svg { color: var(--pg2-sun); }
.pg2-sun b .pg2-dn svg { color: #f97316; }
.pg2-compass { flex: none; }
.pg2-c-ring { fill: none; stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1.5; }
.pg2-c-tick { stroke: currentColor; stroke-opacity: 0.45; stroke-width: 1.6; stroke-linecap: round; }
.pg2-c-tick.n { stroke: #ef4444; stroke-opacity: 1; stroke-width: 2.2; }
.pg2-c-arrow { transform-box: view-box; transform-origin: 20px 20px; animation: pg2-sway 2.8s ease-in-out infinite alternate; }
.pg2-c-arrow path { fill: var(--pg2-wind); }
.pg2-c-arrow line { stroke: var(--pg2-wind); stroke-width: 2.2; stroke-linecap: round; }
@keyframes pg2-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.pg2-arc { flex: none; overflow: visible; }
.pg2-uv-ic, .pg2-hum-ic { flex: none; overflow: visible; }
.pg2-arc-track { fill: none; stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1.5; stroke-dasharray: 2 3; }
.pg2-arc-done { fill: none; stroke: var(--pg2-sun); stroke-width: 2; stroke-linecap: round; }
.pg2-arc-hz { stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1; }
.pg2-arc-sun { fill: var(--pg2-sun); filter: drop-shadow(0 0 4px var(--pg2-sun)); }
.pg2-arc-moon { fill: currentColor; fill-opacity: 0.55; }

/* ---------- Search field to match ---------- */
body.pg2 #search-container { margin-top: 6px; }

/* ---------- Mobile: hidden navbar + room for map & table ---------- */
@media (max-width: 680px) {
  body.pg2 .main-navbar {
    position: fixed; left: 0; right: 0; top: 0;
    transform: translateY(-110%); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s;
  }
  body.pg2.pg2-nav-show .main-navbar { transform: none; box-shadow: 0 10px 30px -10px rgba(2, 6, 23, 0.5); }
  body.pg2 #header-container { top: 0 !important; padding: 6px 6px 0 !important; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
  body.pg2.pg2-nav-show #header-container { transform: translateY(var(--pg2-nav-h, 52px)); }
  body.pg2 .pg2-menu-btn { display: grid; }
  body.pg2 #map-container { height: 30vh; }
  body.pg2 #search-container { margin-top: 5px; }
  body.pg2 #search-input { padding-top: 9px; padding-bottom: 9px; }

  .pg2-top { font-size: 0.74rem; min-height: 30px; }
  .pg2-radar { padding: 2px 7px; font-size: 0.66rem; }
  .pg2-story-ic { width: 18px; height: 18px; }
  .pg2-story-ic svg { width: 11px; height: 11px; }
  .pg2-story-txt b { font-size: 0.8rem; }
  .pg2-story-txt small { font-size: 0.68rem; }
  .pg2-chart { --pg2-lane: 22px; --pg2-edge: 8px; }
  .pg2-graph { height: var(--pg2-graph-h-m, 76px); }
  .pg2-chart-head { min-height: 26px; margin-bottom: 0; }
  .pg2-mk-badge { height: 18px; }
  .pg2-mk-line { top: calc(var(--lane-top, 0px) + 18px); }
  .pg2-sunmark-img { width: 13px; height: 13px; }
  .pg2-sunmark-badge em { font-size: 0.54rem; }
  .pg2-sunmark.compact .pg2-sunmark-badge { width: 20px; }
  .pg2-chart-title { font-size: 0.54rem; }
  .pg2-tg { width: 24px; height: 24px; }
  .pg2-tg svg { width: 13px; height: 13px; }
  .pg2-axis { min-height: 26px; font-size: 0.58rem; }
  .pg2-axis img { width: 15px; height: 15px; }
  .pg2-bandlbl { display: none; }
  .pg2-midnight em { font-size: 0.52rem; padding: 0 5px; }
  .pg2-tile { gap: 7px; }
  .pg2-tile-txt b { font-size: 0.8rem; }
  .pg2-tile-txt > span { font-size: 0.64rem; }
}