:root{color-scheme:light dark;--bg1:#d7e7f4;--bg2:#edf5f9;--ink:#10202d;--muted:#5d7486;--glass:rgba(255,255,255,.42);--glass-strong:rgba(255,255,255,.66);--line:rgba(255,255,255,.62);--line-soft:rgba(122,173,207,.18);--shadow:0 18px 46px rgba(31,67,93,.12),inset 0 1px 0 rgba(255,255,255,.5);--accent:#61b7e7;--accent2:#8ea8ff;--compare-a:#68c9f5;--compare-b:#989cff;--good:#2ebd7a;--warn:#d69c2d;--bad:#cf5a61}
@media(prefers-color-scheme:dark){:root{--bg1:#06111b;--bg2:#0c2232;--ink:#f4f8fb;--muted:#9fb2c2;--glass:rgba(15,37,54,.46);--glass-strong:rgba(22,49,69,.72);--line:rgba(255,255,255,.11);--line-soft:rgba(116,185,230,.13);--shadow:0 18px 52px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);--accent:#71c4f1;--accent2:#9baeff;--compare-a:#74cef7;--compare-b:#a3a6ff}}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;background:linear-gradient(155deg,var(--bg1),var(--bg2));color:var(--ink);overscroll-behavior-y:none}body:before{content:"";position:fixed;inset:-25%;background:radial-gradient(circle at 28% 17%,rgba(255,255,255,.28),transparent 24%),radial-gradient(circle at 86% 16%,rgba(75,155,205,.18),transparent 20%),radial-gradient(circle at 54% 70%,rgba(55,119,163,.08),transparent 26%);pointer-events:none;filter:blur(22px)}button,select,input{font:inherit}.app-shell{min-height:100dvh;padding:calc(env(safe-area-inset-top) + 6px) 11px calc(76px + env(safe-area-inset-bottom));max-width:760px;margin:0 auto;position:relative}.app-shell.now-mode{height:100dvh;min-height:100dvh;overflow:hidden;padding-bottom:calc(68px + env(safe-area-inset-bottom))}.app-shell.now-mode main{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 48px - 74px);min-height:0}.app-shell.now-mode #view-now.active{height:100%;min-height:0;display:grid;grid-template-rows:96px auto minmax(0,1fr);gap:7px}.topbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:1px 2px 5px}.eyebrow{font-size:9px;letter-spacing:.16em;font-weight:850;color:var(--muted)}.location{font-size:14px;font-weight:680;margin-top:2px}.status-pill{display:flex;gap:6px;align-items:center;padding:6px 9px;border-radius:999px;background:var(--glass);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);font-size:10px;font-weight:760}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--muted)}.status-online .status-dot{background:var(--good)}.status-delayed .status-dot{background:var(--warn)}.status-offline .status-dot{background:var(--bad)}.glass{background:linear-gradient(150deg,rgba(255,255,255,.08),transparent 35%),var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(28px) saturate(155%);-webkit-backdrop-filter:blur(28px) saturate(155%)}
.hero{border-radius:24px;padding:12px 17px;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-60px;top:-85px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%);filter:blur(4px)}.compact-hero{height:96px;min-height:96px}.temperature{font-size:57px;line-height:.86;font-weight:240;letter-spacing:-.065em}.hero-meta{display:flex;gap:9px;align-items:center;margin-top:7px;white-space:nowrap}.hero-meta span:first-child{font-size:13px;font-weight:680}.hero-meta span:last-child{font-size:9.5px;color:var(--muted)}.weather-orb{width:50px;height:50px;border-radius:50%;background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(114,183,226,.34));display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 22px rgba(60,118,158,.16)}.weather-orb span{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.72)}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:0}.metric{border-radius:16px;padding:7px 9px;height:50px;min-height:50px;background:linear-gradient(160deg,rgba(255,255,255,.05),transparent 60%),var(--glass);border:1px solid var(--line);backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.metric-label{font-size:7.5px;letter-spacing:.10em;font-weight:850;color:var(--muted);text-transform:uppercase}.metric-value{font-size:15.5px;font-weight:680;letter-spacing:-.03em;margin-top:3px;white-space:nowrap}.metric-sub{font-size:7.4px;color:var(--muted);margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-panel{margin-top:0;border-radius:24px;padding:8px;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}.trend-panel:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 22%,transparent 78%,rgba(255,255,255,.02))}.trend-head{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.11em;font-weight:850;color:var(--muted);margin:0 3px 6px;flex:0 0 auto}.trend-head span:last-child{font-weight:650;letter-spacing:0;text-transform:none}.trend-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px;min-height:0;flex:1}.trend-item{border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:5px 8px 4px;min-height:0;height:auto;background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.018) 48%,rgba(4,17,27,.06));overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(18px) saturate(155%);-webkit-backdrop-filter:blur(18px) saturate(155%)}.trend-label{display:flex;justify-content:space-between;gap:5px;align-items:baseline;font-size:8.5px;color:var(--muted)}.trend-label strong{font-size:9.5px;color:var(--ink);white-space:nowrap}.trend-item svg{width:100%;height:calc(100% - 15px);min-height:32px;display:block;margin-top:1px;overflow:visible}.trend-item .spark-line{fill:none;stroke-width:2.15;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.trend-item .spark-fill{opacity:.11}.spark-time{fill:var(--muted);font-size:4.6px;font-weight:650}.spark-tick{fill:var(--muted);opacity:.42}.spark-empty{height:100%;display:grid;place-items:center;color:var(--muted)}
.view{display:none}.view.active{display:block;animation:fade .18s ease}@keyframes fade{from{opacity:.35;transform:translateY(2px)}to{opacity:1;transform:none}}.section-heading{padding:7px 3px 9px;display:flex;justify-content:space-between;align-items:flex-end}.section-heading h1{font-size:28px;line-height:1;margin:5px 0 0;letter-spacing:-.045em}.icon-button{width:42px;height:42px;border-radius:15px;border:1px solid var(--line);color:var(--ink);font-size:22px}.export-button{width:auto;min-width:72px;padding:5px 10px;display:flex;align-items:center;justify-content:center;gap:5px}.export-button span{font-size:20px;line-height:1}.export-button small{font-size:8px;font-weight:760;color:var(--muted)}.controls{border-radius:23px;padding:12px;display:grid;gap:9px}.controls label{font-size:10.5px;color:var(--muted);font-weight:740;display:grid;gap:5px}.controls select,.controls input{width:100%;appearance:none;border:1px solid var(--line);background:var(--glass-strong);color:var(--ink);border-radius:13px;padding:9px 11px;outline:none;min-width:0}.date-row,.compare-years,.compare-custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.compare-grid-4{display:grid;grid-template-columns:1fr 1fr;gap:7px}.summary-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:8px 0}.summary-item{padding:9px;border-radius:15px;background:var(--glass);border:1px solid var(--line)}.summary-item strong{display:block;font-size:16px;white-space:nowrap}.summary-item span{font-size:7.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}.summary-item small{display:block;margin-top:2px;font-size:8px;color:var(--muted)}.compare-legend{display:flex;gap:13px;align-items:center;padding:0 5px 7px;color:var(--muted);font-size:9px}.legend-line{display:inline-block;width:28px;height:2px;vertical-align:middle;margin-right:5px;border-radius:999px;background:var(--compare-a)}.legend-line.b{background:var(--compare-b);background-image:linear-gradient(90deg,var(--compare-b) 0 55%,transparent 55% 100%);background-size:8px 2px}.compare-legend-note{opacity:.72;font-size:8px;margin-left:auto}.chart-card{border-radius:23px;padding:9px 7px;position:relative;min-height:250px}.chart{width:100%;height:236px;overflow:hidden}.chart svg{width:100%;height:100%;display:block;touch-action:none}.axis-label{fill:var(--muted);font-size:10px}.grid-line{stroke:var(--line-soft);stroke-width:1}.series-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.series-line.compare-a{stroke:var(--compare-a)}.series-line.secondary{stroke:var(--compare-b);stroke-dasharray:6 5}.mean-line{stroke-width:1.05;opacity:.38;vector-effect:non-scaling-stroke}.mean-line.a{stroke:var(--compare-a)}.mean-line.b{stroke:var(--compare-b);stroke-dasharray:4 4}.mean-label{fill:var(--muted);font-size:8px;font-weight:650}.point-guide{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4}.precip-bar{fill:var(--accent);opacity:.78}.chart-tooltip{position:absolute;left:50%;top:12px;transform:translateX(-50%);padding:7px 9px;border-radius:12px;background:var(--glass-strong);border:1px solid var(--line);font-size:10.5px;white-space:nowrap;max-width:calc(100% - 18px);overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.notice{margin-top:8px;padding:10px 12px;border-radius:14px;background:rgba(194,85,85,.11);border:1px solid rgba(194,85,85,.25);font-size:11px}.hidden{display:none!important}.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(7px + env(safe-area-inset-bottom));width:min(calc(100% - 22px),720px);height:60px;border-radius:999px;padding:5px;display:grid;grid-template-columns:repeat(3,1fr);z-index:20;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055) 38%,rgba(8,24,36,.48)),rgba(15,37,54,.56);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(34px) saturate(190%);-webkit-backdrop-filter:blur(34px) saturate(190%);box-shadow:0 14px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.035);overflow:hidden}.tabbar:before{content:"";position:absolute;left:7%;right:7%;top:2px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);pointer-events:none}.tab{position:relative;z-index:1;border:0;background:transparent;color:var(--muted);border-radius:999px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:9.5px;font-weight:760}.tab.active{background:linear-gradient(165deg,rgba(255,255,255,.23),rgba(255,255,255,.075) 42%,rgba(6,17,26,.18));color:var(--ink);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px rgba(0,0,0,.13)}.tab-icon{font-size:14px;line-height:1}.loading{opacity:.55}.empty-chart{height:100%;display:grid;place-items:center;color:var(--muted);font-size:12px;text-align:center;padding:24px}#view-history,#view-compare{padding-bottom:118px}#view-history .chart-card{min-height:326px}#view-history .chart{height:312px}#view-compare .chart-card{margin-bottom:34px;scroll-margin-bottom:110px}.metric-sub{line-height:1.08}
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:0 8px calc(env(safe-area-inset-bottom) + 8px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.sheet{width:min(100%,720px);border-radius:26px;padding:9px 13px 14px}.sheet-handle{width:38px;height:4px;border-radius:999px;background:var(--muted);opacity:.45;margin:1px auto 9px}.sheet-head{display:flex;justify-content:space-between;align-items:center}.sheet-head h2{margin:3px 0 0;font-size:22px}.sheet-close{width:34px;height:34px;border:0;border-radius:50%;background:var(--glass-strong);color:var(--ink);font-size:22px}.sheet-copy{font-size:11px;color:var(--muted);margin:9px 0 10px}.export-option{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);border-radius:16px;padding:11px;display:flex;gap:10px;align-items:center;text-align:left;margin-top:7px}.export-option>span{width:34px;height:34px;border-radius:11px;background:var(--glass-strong);display:grid;place-items:center;font-size:18px}.export-option strong{display:block;font-size:13px}.export-option small{display:block;color:var(--muted);font-size:9.5px;margin-top:2px}.sheet-status{min-height:16px;margin-top:8px;font-size:10px;color:var(--muted)}
@media(max-height:780px){.topbar{height:43px}.compact-hero{height:87px;min-height:87px}.temperature{font-size:52px}.metric{height:46px;min-height:46px}.trend-item{height:39px;min-height:39px}.trend-item svg{height:17px}.tabbar{height:51px}.app-shell.now-mode main,.app-shell.now-mode #view-now{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 68px)}}
@media(max-width:370px){.temperature{font-size:51px}.metric-value{font-size:14px}.trend-item{padding:4px 6px}.trend-label strong{font-size:9px}}@media(min-width:620px){.metric-grid{grid-template-columns:repeat(5,1fr)}.trend-grid{grid-template-columns:repeat(4,1fr)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

@media (max-height:760px){.app-shell.now-mode #view-now.active{grid-template-rows:88px auto minmax(0,1fr)}.compact-hero{height:88px;min-height:88px}.temperature{font-size:52px}.metric{height:47px;min-height:47px;padding:6px 8px}.metric-value{font-size:14.5px}.trend-grid{gap:5px}.trend-item{padding:4px 7px 3px}.tabbar{height:56px}.app-shell.now-mode main{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 48px - 70px)}}


/* ===== v5.2 · viewport lock, readable charts & animated Liquid Glass ===== */
html,body{height:100%;overflow:hidden}
body{position:fixed;inset:0;width:100%;overscroll-behavior:none;-webkit-text-size-adjust:100%}
.app-shell{height:100dvh;min-height:100dvh;overflow:hidden;padding-bottom:0}
.app-shell main{height:calc(100dvh - env(safe-area-inset-top) - 48px);min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:calc(72px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.app-shell main::-webkit-scrollbar{display:none}
.app-shell.now-mode{padding-bottom:0}
.app-shell.now-mode main{overflow:hidden;padding-bottom:calc(67px + env(safe-area-inset-bottom));height:calc(100dvh - env(safe-area-inset-top) - 48px)}
#view-history,#view-compare{padding-bottom:8px;min-height:calc(100% - 4px)}
#view-history .chart-card{min-height:344px;margin-bottom:5px}
#view-history .chart{height:330px}
#view-compare .chart-card{margin-bottom:5px;scroll-margin-bottom:76px;min-height:292px}
#view-compare .chart{height:278px}

/* rounder, more legible chart typography */
.chart svg text,.axis-label,.mean-label{font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Rounded","SF Pro Display","Helvetica Neue",Arial,sans-serif;font-stretch:normal}
.axis-label{font-size:13.5px;font-weight:650;letter-spacing:-.02em;fill:rgba(222,232,240,.78)}
.mean-label{font-size:10.5px;font-weight:720;letter-spacing:-.015em;fill:rgba(222,232,240,.72)}
.chart-tooltip{font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:650;border-radius:999px;padding:8px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 28px rgba(0,0,0,.18)}
.grid-line{stroke:rgba(174,204,224,.13)}
.series-line{stroke-width:2.65}
.point-guide{stroke:rgba(220,235,245,.52);stroke-width:1.15}

/* animated liquid selection capsule */
.tabbar{height:62px;padding:5px;isolation:isolate;overflow:hidden}
.tab-liquid-indicator{position:absolute;z-index:0;left:5px;top:5px;bottom:5px;width:calc((100% - 10px)/3);border-radius:999px;transform:translate3d(0,0,0);transition:transform .52s cubic-bezier(.22,1.18,.28,1),filter .35s ease;background:linear-gradient(155deg,rgba(255,255,255,.27),rgba(255,255,255,.095) 42%,rgba(14,37,54,.26));border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.045),0 7px 21px rgba(0,0,0,.15);backdrop-filter:blur(28px) saturate(190%);-webkit-backdrop-filter:blur(28px) saturate(190%)}
.tab-liquid-indicator:before{content:"";position:absolute;left:13%;right:13%;top:3px;height:1px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.tab-liquid-indicator span{position:absolute;width:42%;height:64%;right:8%;top:7%;border-radius:50%;background:radial-gradient(circle at 42% 40%,rgba(255,255,255,.20),rgba(255,255,255,.035) 46%,transparent 68%);filter:blur(.2px)}
.tabbar[data-active="history"] .tab-liquid-indicator{transform:translate3d(100%,0,0)}
.tabbar[data-active="compare"] .tab-liquid-indicator{transform:translate3d(200%,0,0)}
.tabbar.liquid-moving .tab-liquid-indicator{filter:saturate(1.18) brightness(1.07);animation:liquidWobble .52s cubic-bezier(.2,.9,.3,1)}
@keyframes liquidWobble{0%{scale:1 1}38%{scale:1.08 .93}72%{scale:.985 1.025}100%{scale:1 1}}
.tab{background:transparent!important;border-color:transparent!important;box-shadow:none!important;transition:color .28s ease,transform .28s ease}
.tab.active{color:var(--ink);transform:translateY(-.5px)}
.tab.active .tab-icon{animation:tabIconSettle .42s cubic-bezier(.2,1.3,.3,1)}
@keyframes tabIconSettle{0%{transform:scale(.88);opacity:.65}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* reduce accidental visual drag/bounce while keeping genuine overflow usable */
.view{overscroll-behavior:contain}
.section-heading,.controls,.summary-strip,.compare-legend,.chart-card{scroll-margin-top:4px}

@media(max-height:820px){
  .axis-label{font-size:12.8px}
  #view-history .chart-card{min-height:326px}
  #view-history .chart{height:312px}
  #view-compare .chart-card{min-height:276px}
  #view-compare .chart{height:262px}
}
@media(max-height:740px){
  .axis-label{font-size:12.2px}
  .tabbar{height:56px}
  .app-shell main{padding-bottom:calc(65px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(68px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.tab-liquid-indicator,.tab,.tab-icon{transition:none!important;animation:none!important}}

/* ===== v5.3 · viewport-fit charts, real readable axes, no dead-space ===== */
html{min-height:100%;min-height:100dvh;background:linear-gradient(155deg,var(--bg1),var(--bg2));overflow:hidden}
body{position:static!important;inset:auto!important;width:auto!important;height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;background:linear-gradient(155deg,var(--bg1),var(--bg2));overscroll-behavior:none}
.app-shell{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;padding-bottom:0!important;background:transparent}
.app-shell main{height:calc(100dvh - env(safe-area-inset-top) - 54px)!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:calc(82px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))!important;overscroll-behavior-y:none!important;-webkit-overflow-scrolling:touch}
.app-shell.now-mode main{overflow:hidden!important;padding-bottom:calc(70px + env(safe-area-inset-bottom))!important}

/* History and compare are fitted to available viewport first; scrolling only appears when controls truly exceed it. */
#view-history.active,#view-compare.active{display:flex!important;flex-direction:column;min-height:100%;padding-bottom:0!important}
#view-history .section-heading,#view-compare .section-heading,
#view-history .controls,#view-compare .controls,
#view-history .summary-strip,#view-compare .summary-strip,
#view-compare .compare-legend{flex:0 0 auto}
#view-history .chart-card{flex:1 1 360px;min-height:360px!important;height:auto!important;margin:8px 0 0!important;padding:12px 10px 14px!important}
#view-history .chart{height:100%!important;min-height:336px!important}
#view-compare .chart-card{flex:1 1 330px;min-height:330px!important;height:auto!important;margin:0 0 0!important;padding:12px 10px 16px!important;scroll-margin-bottom:0!important}
#view-compare .chart{height:100%!important;min-height:306px!important}

/* Chart text is now authored in CSS pixels because the SVG viewBox matches the rendered card width. */
.chart svg text,.axis-label,.mean-label{font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Rounded","SF Pro Display","Helvetica Neue",Arial,sans-serif!important;font-stretch:normal!important}
.axis-label{font-size:14px!important;font-weight:720!important;letter-spacing:-.025em!important;fill:rgba(231,239,246,.84)!important}
.mean-label{font-size:11.5px!important;font-weight:720!important;letter-spacing:-.02em!important;fill:rgba(224,235,243,.76)!important}
.grid-line{stroke:rgba(180,210,229,.15)!important}
.series-line{stroke-width:2.75!important;vector-effect:non-scaling-stroke}
.point-guide{stroke-width:1.1!important;vector-effect:non-scaling-stroke}
.chart-tooltip{font-size:13px!important;font-weight:720!important;padding:9px 13px!important;max-width:calc(100% - 22px)!important}

/* Give labels breathing room rather than empty chart margins. */
.chart-card{overflow:hidden}
.compare-legend{font-size:10.5px!important;padding-bottom:8px!important}
.compare-legend-note{font-size:9.5px!important}
.summary-item strong{font-size:17px}
.summary-item span{font-size:8.3px}

/* The tab bar stays fully outside graph plotting area. */
.tabbar{bottom:calc(8px + env(safe-area-inset-bottom))!important;z-index:50!important}

/* Smaller iPhones: preserve legibility, trim chrome instead of shrinking axes. */
@media(max-height:820px){
  #view-history .chart-card{flex-basis:330px;min-height:330px!important}
  #view-history .chart{min-height:306px!important}
  #view-compare .chart-card{flex-basis:305px;min-height:305px!important}
  #view-compare .chart{min-height:281px!important}
  .axis-label{font-size:13.5px!important}
}
@media(max-height:740px){
  .section-heading h1{font-size:26px}
  .controls{padding:10px;gap:7px}
  .controls select,.controls input{padding:8px 10px}
  .summary-strip{margin:6px 0}
  #view-history .chart-card{min-height:292px!important}
  #view-history .chart{min-height:270px!important}
  #view-compare .chart-card{min-height:280px!important}
  #view-compare .chart{min-height:258px!important}
  .axis-label{font-size:13px!important}
}

/* ===== v5.4 · final fit pass: history clearance + clean comparison means ===== */
/* Keep the current Now screen untouched. History gets a slightly shorter chart so
   the Liquid Glass navigation always has a clean visual gap on iPhone. */
#view-history .chart-card{
  flex:0 0 clamp(292px,38dvh,326px)!important;
  min-height:292px!important;
  max-height:326px!important;
  margin:8px 0 12px!important;
  padding:12px 10px 14px!important;
}
#view-history .chart{
  height:100%!important;
  min-height:0!important;
}

/* Compare keeps a generous chart, but reserves a small clean gap above navigation. */
#view-compare .chart-card{
  margin-bottom:12px!important;
}

/* Mean values already live in the three summary cards. Repeating two labels on
   nearly identical horizontal lines creates collisions, so line labels are hidden. */
#view-compare .mean-label{display:none!important}
#view-compare .mean-line{opacity:.28!important;stroke-width:1.15!important}

/* Tooltips may contain two long period names. Let them become a compact two-line
   glass pill instead of truncating the second series. */
.chart-tooltip{
  white-space:normal!important;
  text-align:center!important;
  line-height:1.24!important;
  max-width:calc(100% - 34px)!important;
  text-overflow:clip!important;
  overflow:visible!important;
}
.chart-tooltip .tooltip-series{display:inline-block;margin-top:2px}

/* Preserve the larger, rounded axis typography introduced in v5.3. */
.axis-label{font-size:14px!important;font-weight:730!important}

@media(max-height:820px){
  #view-history .chart-card{flex-basis:300px!important;min-height:286px!important;max-height:306px!important}
}
@media(max-height:740px){
  #view-history .chart-card{flex-basis:276px!important;min-height:264px!important;max-height:282px!important}
}

/* ===== v6 · daily pager + collision-proof chart/navigation geometry ===== */
.daily-trend-head{gap:8px;min-height:22px}
.trend-day-nav{display:flex;align-items:center;gap:5px;min-width:0}
.trend-day-label{font-size:9px;letter-spacing:.035em;color:var(--ink);font-weight:800;white-space:nowrap}
.trend-day-button{width:24px;height:22px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.025));color:var(--ink);display:grid;place-items:center;padding:0;font-size:18px;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.10);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.trend-day-button:disabled{opacity:.22}
#trend-panel{touch-action:pan-y}
#trend-panel .trend-grid{transition:opacity .16s ease,transform .20s cubic-bezier(.2,.8,.2,1)}

/* Fixed glass navigation owns its own lane. History/Compare content can scroll,
   but the graph plotting rectangle never enters that lane. */
.app-shell main{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom))!important}
#view-history.active,#view-compare.active{padding-bottom:0!important;min-height:auto!important}
#view-history .chart-card{margin-bottom:14px!important}
#view-compare .chart-card{margin-bottom:78px!important;max-height:330px!important;min-height:270px!important;flex:0 0 clamp(270px,34dvh,330px)!important}
#view-compare .chart{height:100%!important;min-height:0!important}

/* Keep all graph labels readable while allowing the compare card to shrink before
   it can collide with navigation. */
#view-compare .axis-label{font-size:14px!important}
@media(max-height:820px){#view-compare .chart-card{flex-basis:286px!important;max-height:296px!important;margin-bottom:76px!important}}
@media(max-height:740px){#view-compare .chart-card{flex-basis:252px!important;min-height:244px!important;max-height:264px!important;margin-bottom:72px!important}.axis-label{font-size:13.5px!important}}

/* ===== v6.1 · exact daily observations + readable Y axes + no-scroll Compare ===== */
.spark-grid{stroke:rgba(174,207,228,.10);stroke-width:.45;vector-effect:non-scaling-stroke}
.spark-y{fill:rgba(218,231,240,.72);font-size:4.7px;font-weight:760;letter-spacing:-.02em;font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Helvetica Neue",Arial,sans-serif}
.spark-time{font-size:4.7px;font-weight:720}

/* Compare is a true one-screen workspace. The controls are compacted before the
   graph is allowed to shrink, and the fixed Liquid Glass bar owns a separate lane. */
.app-shell.compare-mode{height:100dvh;min-height:100dvh;overflow:hidden;padding-bottom:calc(68px + env(safe-area-inset-bottom))}
.app-shell.compare-mode main{height:calc(100dvh - env(safe-area-inset-top) - 48px)!important;min-height:0!important;overflow:hidden!important;padding-bottom:calc(70px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:0!important}
.app-shell.compare-mode #view-compare.active{height:100%;min-height:0;display:flex!important;flex-direction:column;overflow:hidden!important;padding-bottom:0!important}
.app-shell.compare-mode #view-compare .section-heading{padding:2px 3px 6px;flex:0 0 auto}
.app-shell.compare-mode #view-compare .section-heading h1{font-size:26px;margin-top:4px}
.app-shell.compare-mode #view-compare .controls{padding:8px 10px;gap:6px;border-radius:21px;flex:0 0 auto}
.app-shell.compare-mode #view-compare .controls label{font-size:9.5px;gap:3px}
.app-shell.compare-mode #view-compare .controls select,
.app-shell.compare-mode #view-compare .controls input{padding:7px 10px;border-radius:12px;min-height:34px}
.app-shell.compare-mode #view-compare .date-row,
.app-shell.compare-mode #view-compare .compare-years,
.app-shell.compare-mode #view-compare .compare-custom-grid,
.app-shell.compare-mode #view-compare .compare-grid-4{gap:6px}
.app-shell.compare-mode #view-compare .summary-strip{margin:6px 0;gap:6px;flex:0 0 auto}
.app-shell.compare-mode #view-compare .summary-item{padding:7px 8px;border-radius:14px}
.app-shell.compare-mode #view-compare .summary-item strong{font-size:15.5px}
.app-shell.compare-mode #view-compare .summary-item span{font-size:7.8px}
.app-shell.compare-mode #view-compare .compare-legend{padding:0 5px 5px;font-size:10px;flex:0 0 auto}
.app-shell.compare-mode #view-compare .chart-card{flex:1 1 0!important;min-height:0!important;max-height:none!important;height:auto!important;margin:4px 0 0!important;padding:8px 8px 10px!important;overflow:hidden!important}
.app-shell.compare-mode #view-compare .chart{height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
.app-shell.compare-mode #view-compare .chart svg{height:100%!important}

@media(max-height:780px){
  .app-shell.compare-mode #view-compare .section-heading h1{font-size:24px}
  .app-shell.compare-mode #view-compare .controls{padding:7px 9px;gap:5px}
  .app-shell.compare-mode #view-compare .controls select,
  .app-shell.compare-mode #view-compare .controls input{padding:6px 9px;min-height:32px}
  .app-shell.compare-mode #view-compare .summary-item{padding:6px 7px}
  .app-shell.compare-mode #view-compare .summary-item strong{font-size:14.5px}
  .app-shell.compare-mode #view-compare .compare-legend{padding-bottom:4px}
}

/* Daily cards retain readable extrema; the panel scrolls on smaller screens. */
#trend-panel .trend-grid{grid-template-rows:none;grid-auto-rows:minmax(116px,auto);flex:0 0 auto}
#trend-panel{overflow-y:auto;overscroll-behavior:contain}
#trend-panel .trend-head{position:sticky;top:0;z-index:2;background:#112635;padding:5px 0}
#trend-panel .trend-item{height:auto;min-height:116px;display:flex;flex-direction:column;padding:8px}
#trend-panel .trend-label{font-size:12px;flex-wrap:wrap;gap:2px}
#trend-panel .trend-label strong{font-size:12px;white-space:normal}
#trend-panel .trend-item svg{height:48px;min-height:48px;flex:1;margin:4px 0}
.trend-extremes{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;font-size:12px;line-height:1.4;color:var(--ink)}