/* V10.1 · three observation instruments in the existing Corvera glass. */
#app.now-mode #view-now.active{grid-template-rows:auto auto minmax(100px,1fr);gap:8px;align-content:start}
#view-now .instrument-hero{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 14px 12px;border-radius:24px}
.instrument-hero .hero-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;position:relative;z-index:1}
.instrument-hero .temperature{font-size:3.75rem;line-height:.95;font-weight:250;flex-shrink:0}
.instrument-hero .hero-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:0;white-space:normal;text-align:right;min-width:0}
.instrument-hero .hero-meta span:first-child{font-size:.875rem;line-height:1.25}
.instrument-hero .hero-meta span:last-child{font-size:.75rem;line-height:1.3}
.weather-instruments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:relative;z-index:1;min-width:0}
.weather-instrument{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums}
.instrument-face{width:min(100%,108px);aspect-ratio:1;position:relative;border-radius:50%;background:radial-gradient(ellipse at 26% 15%,rgba(255,255,255,.17),rgba(var(--instrument-rgb),.05) 50%,transparent 75%)}
.instrument-svg{display:block;width:100%;height:100%;overflow:visible;position:relative;z-index:1}
.dial-surface{fill:rgba(var(--instrument-rgb),.055);stroke:var(--line-soft);stroke-width:.7}
.compass-inner{fill:none;stroke:var(--instrument-color);stroke-width:1;opacity:.2}
.compass-tick{stroke-width:1.1;stroke-linecap:round;opacity:.65}
.compass-labels{fill:var(--muted);font-size:14px;font-weight:650;text-anchor:middle}
.compass-pointer{fill:var(--instrument-color);stroke:var(--instrument-color);stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
.dial-reading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;pointer-events:none}
.dial-reading strong{font-size:1.75rem;line-height:1.03;font-weight:620;letter-spacing:-.035em}
.dial-reading span{font-size:.75rem;line-height:1.25;color:var(--muted);font-weight:650;margin-top:3px}
.compass-reading strong{font-size:1.375rem;font-weight:630}
.compass-reading span{font-size:.75rem;margin-top:2px}
.gauge-track{fill:none;stroke:var(--line-soft);stroke-width:3.5}
.gauge-progress{fill:none;stroke:var(--instrument-color);stroke-width:3.5;stroke-linecap:round}
.gauge-end{fill:var(--instrument-color);stroke:var(--glass-strong);stroke-width:1}
.instrument-label{font-size:.875rem;line-height:1.3;font-weight:680;margin-top:3px}
.instrument-detail{font-size:.75rem;line-height:1.3;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.instrument-detail strong{font-weight:650;color:var(--ink)}
#view-now .compact-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
#view-now .compact-grid .metric{grid-column:span 2;height:auto;min-height:51px;padding:7px 9px}
#view-now .compact-grid .metric:nth-child(n+4){grid-column:span 3}
#view-now .compact-grid .metric-label{font-size:.75rem;line-height:1.2;letter-spacing:.035em;font-weight:700}
#view-now .compact-grid .metric-value{font-size:1.0625rem;line-height:1.15;margin-top:3px;white-space:normal;overflow-wrap:anywhere}
#trend-panel{padding:0;overflow:hidden;display:flex;min-height:100px}
#trend-panel::before{display:none}
#trend-panel .trend-head{position:relative;top:auto;flex-shrink:0;padding:9px 10px;margin:0;border-bottom:1px solid var(--line-soft);background:transparent;gap:6px;min-height:42px}
#trend-panel .trend-day-label{font-size:.8125rem;letter-spacing:0}
#trend-panel #trend-note{font-size:.75rem;text-align:right;line-height:1.2}
#trend-panel .trend-day-button{min-width:28px;width:28px;height:28px;font-size:23px}
#trend-panel .trend-grid{padding:8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1 1 auto;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(130px,auto);align-content:start;gap:7px;scroll-padding:8px;-webkit-overflow-scrolling:touch}
#trend-panel .trend-item{padding:8px;min-height:130px;gap:2px;overflow:hidden;backdrop-filter:none;-webkit-backdrop-filter:none}
#trend-panel .trend-label{font-size:.8125rem;line-height:1.3;align-items:baseline;gap:2px 6px}
#trend-panel .trend-label strong{font-size:.8125rem;line-height:1.3;font-variant-numeric:tabular-nums}
#trend-panel .trend-item svg{height:62px;min-height:62px;flex:1 0 62px;margin:3px 0}
#trend-panel .trend-extremes{font-size:.75rem;line-height:1.35;gap:2px 8px;flex:0 0 auto}
#trend-panel .trend-auxiliary{flex-basis:100%;color:var(--muted)}
#trend-panel .direction-empty{font-size:.75rem;min-height:62px;text-align:center;line-height:1.4}
#trend-panel .spark-empty{min-height:62px;font-size:.875rem;flex:1}
#trend-panel .spark-y{fill:var(--muted)}
.weather-instruments:empty{min-height:135px}
@media(min-width:620px){
  #view-now .instrument-hero{grid-template-columns:minmax(150px,1fr) minmax(0,2.1fr);gap:14px;padding:16px 20px;align-items:center}
  .instrument-hero .hero-copy{flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}
  .instrument-hero .temperature{font-size:4.5rem}
  .instrument-hero .hero-meta{align-items:flex-start;text-align:left}
  .instrument-face{width:108px}
  #view-now .compact-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  #view-now .compact-grid .metric,#view-now .compact-grid .metric:nth-child(n+4){grid-column:auto}
  #trend-panel .trend-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:360px){
  #view-now .instrument-hero{padding:11px 10px 10px;gap:8px}
  .instrument-hero .temperature{font-size:3.25rem}
  .weather-instruments{gap:4px}
  .instrument-label{font-size:.8125rem}
  .compass-reading strong{font-size:1.25rem}
  #trend-panel .trend-head{flex-wrap:wrap;gap:3px;padding:6px 8px}
  #trend-panel #trend-note{margin-left:auto}
}
/* Keep every observation reachable on short windows or large text settings. */
@media(max-height:700px), (orientation:landscape) and (max-height:550px){
  #app.now-mode main{overflow-y:auto!important}
  #app.now-mode #view-now.active{height:auto!important;min-height:100%!important;grid-template-rows:auto auto minmax(220px,1fr)}
  #trend-panel .trend-grid{max-height:58vh}
}
@media(prefers-contrast:more){.compass-tick{opacity:1}.gauge-track{stroke:var(--muted)}.instrument-detail{color:var(--ink)}}
@media(prefers-reduced-motion:reduce){#trend-panel .trend-grid{transition:none}}