/* v1.29.0 — Metric family reality owner.
 * Scope: Temperature / Rain / Wind / UV / AQI routes only.
 * Shared controls, weather modules, typography and tokens stay in Design System / Weather Components.
 * This file owns metric composition, hierarchy, density and responsive behavior. */

/* Page shell and semantic accents */
.metric-page{--metric-accent:var(--primary-dark);--metric-accent-soft:var(--primary-soft);--metric-accent-line:var(--primary-line);padding-block:var(--space-5) var(--space-11)}
.metric-page--nhiet-do{--metric-accent:#a6533f;--metric-accent-soft:#fff4f0;--metric-accent-line:#efd0c6}
.metric-page--chat-luong-khong-khi{--metric-accent:#665f78;--metric-accent-soft:#f5f3f8;--metric-accent-line:#d9d4e2}
.metric-page--chi-so-uv{--metric-accent:#936300;--metric-accent-soft:#fff8e9;--metric-accent-line:#ead59f}
.metric-page--mua{--metric-accent:var(--rain);--metric-accent-soft:#eef7fc;--metric-accent-line:#c9dfec}
.metric-page--gio{--metric-accent:var(--wind);--metric-accent-soft:#f2f5f7;--metric-accent-line:#d5dde2}
.metric-page>.container{min-width:0}
.metric-page .breadcrumbs{margin-bottom:var(--space-4)}
.metric-page :is(.metric-summary-section,.metric-workspace,.metric-explainer,.metric-faq-section,.metric-related-nav,.rain-outlook,.radar-section){scroll-margin-top:calc(var(--header-height) + var(--space-5))}

/* Hero: one strong weather surface with a dedicated data answer. */
.metric-page-hero{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(330px,.72fr);gap:clamp(24px,3.8vw,48px);align-items:stretch;overflow:hidden;margin:0 0 var(--space-4);padding:var(--space-7);border:1px solid var(--hero-deep);border-radius:var(--radius-xl);background:var(--hero);color:var(--hero-text);box-shadow:none}
.metric-page-hero-copy{display:grid;min-width:0;align-content:center}
.metric-page-kicker{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.metric-page-kicker .eyebrow{margin:0;color:var(--hero-muted)}
.metric-page-icon{display:grid;flex:0 0 auto;width:46px;height:46px;place-items:center;border:1px solid var(--hero-line);border-radius:var(--radius-md);background:rgba(255,255,255,.08);color:#fff}
.metric-page-icon svg,.metric-page-icon .metric-icon{width:34px;height:34px}
.metric-page-hero h1{max-width:790px;color:#fff;font-size:clamp(36px,4vw,50px);line-height:1.06;letter-spacing:-.035em}
.metric-page-intro{max-width:720px;margin-top:var(--space-3);color:var(--hero-muted);font-size:var(--font-ui-compact);line-height:1.6}
.metric-meta{display:flex;flex-wrap:wrap;gap:5px var(--space-4);margin-top:var(--space-4);color:var(--hero-muted);font-size:var(--font-xs);line-height:1.45}
.metric-meta a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.metric-meta-warning{color:#ffe6a6}
.metric-primary-answer{display:grid;min-width:0;align-content:start;gap:var(--space-3);padding:var(--space-5);border:1px solid var(--hero-line);border-left:4px solid var(--metric-state-color);border-radius:var(--radius-lg);background:rgba(18,52,38,.66);box-shadow:none}
.metric-primary-answer.is-unavailable{border-left-color:rgba(255,255,255,.45)}
.metric-primary-answer-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);color:var(--hero-muted);font-size:var(--font-xs);line-height:1.4}
.metric-primary-answer-kicker{color:#fff;font-weight:var(--weight-medium)}
.metric-primary-answer-location{max-width:58%;color:var(--hero-muted);text-align:right;overflow-wrap:anywhere}
.metric-primary-answer-value{display:grid;min-width:0;gap:5px}
.metric-primary-answer-value strong{max-width:100%;color:#fff;font-size:clamp(44px,4.8vw,64px);font-weight:var(--weight-bold);letter-spacing:-.045em;line-height:.96;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.metric-primary-answer-value span{color:#fff;font-size:var(--font-ui-compact);font-weight:var(--weight-medium);line-height:1.35}
.metric-primary-answer>p{max-width:430px;margin:0;padding-top:var(--space-2);border-top:1px solid var(--hero-line);color:var(--hero-muted);font-size:var(--font-xs);line-height:1.55}
.metric-primary-answer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:2px}
.metric-primary-answer-actions .button-primary{border-color:#fff;background:#fff;color:var(--hero-deep)}
.metric-primary-answer-actions .button-primary:hover{border-color:var(--hero-muted);background:var(--hero-muted);color:var(--hero-deep)}
.metric-primary-answer-actions .text-link{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Location/metric switcher: one surface; embedded search removes the inner card. */
.metric-page .weather-context-bar{margin:0 0 var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);box-shadow:none}
.metric-page .weather-context-main{gap:var(--space-3)}
.metric-page .weather-context-location{flex:0 0 auto;display:grid;gap:1px;padding-right:var(--space-3);border-right:1px solid var(--line)}
.metric-page .weather-context-location small{color:var(--muted);font-size:var(--font-xs);font-weight:var(--weight-regular)}
.metric-page .weather-context-location strong{font-size:var(--font-xs);line-height:1.35}
.metric-page .weather-context-links a{min-height:var(--touch);padding-inline:10px}
.metric-page .weather-context-links a.is-active{box-shadow:inset 0 -2px 0 var(--primary)}
.metric-page .weather-context-switch{min-width:150px}
.metric-page .weather-context-switch>summary{min-height:var(--touch)}
.metric-page .weather-context-switch[open]{grid-column:1/-1;width:100%}
.metric-page .weather-context-search{padding-top:var(--space-3);border-top:1px solid var(--line)}
.metric-page .weather-context-search .location-search-block--embedded{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.metric-page .weather-context-search .location-search-block--embedded .ui-search-form{grid-template-columns:minmax(0,1fr) auto auto}
.metric-page .weather-context-search .location-memory-actions{margin-top:var(--space-2)}
.metric-page .weather-context-search .geo-result:not([hidden]){margin-top:var(--space-2)}

/* In-page navigation stays secondary to the metric switcher. */
.metric-jump-nav{display:flex;align-items:center;gap:var(--space-3);min-width:0;margin:0;padding:0 var(--space-1) var(--space-3);border-bottom:1px solid var(--line)}
.metric-jump-label{flex:0 0 auto;color:var(--muted);font-size:var(--font-xs);font-weight:var(--weight-medium);letter-spacing:.05em;text-transform:uppercase}
.metric-jump-links{display:flex;min-width:0;gap:2px;overflow-x:auto;scrollbar-width:none}
.metric-jump-links::-webkit-scrollbar{display:none}
.metric-jump-links a{display:inline-flex;min-height:var(--touch);align-items:center;padding:0 10px;border-radius:var(--radius-md);color:var(--text-2);font-size:var(--font-xs);font-weight:var(--weight-medium);white-space:nowrap;text-decoration:none}
.metric-jump-links a:hover,.metric-jump-links a:focus-visible{background:var(--primary-soft);color:var(--primary-dark)}
.metric-unavailable-notice{margin-top:var(--space-4)}

/* Shared vertical rhythm */
.metric-summary-section,.metric-workspace,.metric-explainer,.metric-faq-section,.metric-related-nav,.metric-page--mua .rain-outlook,.metric-page--mua .radar-section{margin-top:var(--space-8)}
.metric-page :is(.metric-summary-section,.metric-workspace,.metric-faq-section,.metric-related-nav,.rain-outlook,.radar-section)>.section-heading{margin-bottom:var(--space-4)}
.metric-page :is(.metric-summary-section,.metric-workspace,.metric-related-nav,.rain-outlook,.radar-section)>.section-heading h2{font-size:clamp(24px,2.6vw,31px)}
.metric-page :is(.metric-summary-section,.metric-workspace,.rain-outlook)>.section-heading p{max-width:720px}

/* Shared summary board: one component for Temperature / UV / Rain / Wind. */
.metric-summary-component{min-width:0}
.metric-overview-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;overflow:hidden;padding:1px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--line)}
.metric-card{position:relative;display:grid;min-width:0;min-height:122px;align-content:start;gap:5px;padding:var(--space-5);border:0;border-radius:0;background:var(--surface);box-shadow:none}
.metric-card::before{position:absolute;top:0;right:0;left:0;height:3px;background:var(--metric-accent);content:""}
.metric-card>span:first-child{color:var(--muted);font-size:var(--font-xs);font-weight:var(--weight-medium);line-height:1.35}
.metric-card strong{max-width:100%;color:var(--heading);font-size:clamp(22px,2.4vw,28px);line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.metric-card strong.metric-card-condition{font-size:var(--font-ui-title);line-height:1.35}
.metric-card small{max-width:100%;color:var(--text-2);font-size:var(--font-xs);line-height:1.45;overflow-wrap:anywhere}
.metric-card.is-missing,.metric-card.is-partial,.metric-card.is-none{background:var(--surface-soft)}
.metric-card.is-missing strong,.metric-card.is-partial strong,.metric-card.is-none strong{color:var(--muted)}
.metric-summary-section>.component-note,.metric-summary-section>.source-note{max-width:780px;margin:var(--space-3) 0 0;color:var(--muted);font-size:var(--font-xs);line-height:1.5}

/* Hourly table: readable desktop workspace; deliberate horizontal scrolling on narrow screens. */
.metric-workspace{min-width:0}
.metric-hourly-section .scroll-hint{display:none;color:var(--muted);font-size:var(--font-xs);white-space:nowrap}
.metric-data-scroll{max-height:620px;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:none;overscroll-behavior:contain;scrollbar-width:thin}
.metric-data-scroll:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.metric-data-table{min-width:680px;background:var(--surface)}
.metric-data-row{display:grid;align-items:stretch;min-height:60px;border-bottom:1px solid var(--line);background:var(--surface)}
.metric-data-row:last-child{border-bottom:0}
.metric-data-row>span,.metric-data-row>strong{display:flex;min-width:0;align-items:center;padding:10px 14px;color:var(--text-2);font-size:var(--font-xs);line-height:1.35}
.metric-data-row>:first-child{position:sticky;left:0;z-index:2;background:inherit;box-shadow:1px 0 0 var(--line)}
.metric-data-head{position:sticky;top:0;z-index:3;min-height:46px;background:var(--surface-soft);color:var(--muted);font-weight:var(--weight-medium)}
.metric-data-head>span{color:var(--muted);font-size:var(--font-xs)}
.metric-data-head>:first-child{z-index:4;background:var(--surface-soft)}
.metric-data-row.is-current{background:var(--primary-soft)}
.metric-data-row:not(.metric-data-head):hover{background:var(--surface-hover)}
.metric-data-row.is-current:hover{background:var(--primary-soft)}
.metric-data-row.is-current>:first-child{box-shadow:inset 3px 0 0 var(--primary),1px 0 0 var(--line)}
.metric-data-table--nhiet-do .metric-data-row{grid-template-columns:96px minmax(160px,1.1fr) minmax(145px,1fr) minmax(110px,.75fr)}
.metric-data-table--chi-so-uv .metric-data-row{grid-template-columns:96px minmax(95px,.65fr) minmax(150px,1fr) minmax(110px,.75fr)}
.metric-data-table--mua .metric-data-row{grid-template-columns:96px minmax(200px,1.35fr) minmax(130px,.85fr) minmax(120px,.8fr)}
.metric-data-table--gio .metric-data-row{grid-template-columns:96px minmax(155px,1fr) minmax(190px,1.15fr) minmax(110px,.75fr)}
.metric-now-badge{display:inline-flex;min-height:24px;align-items:center;padding:0 7px;border-radius:var(--radius-round);background:var(--primary-dark);color:#fff;font-size:var(--font-xs);font-weight:var(--weight-medium)}
.metric-condition-cell{display:flex;align-items:center;gap:8px;color:var(--heading)}
.metric-condition-cell svg{flex:0 0 auto;width:28px;height:28px}
.metric-temperature-value,.metric-wind-speed,.metric-wind-direction{display:grid;min-width:0;align-content:center;gap:2px}
.metric-temperature-value strong,.metric-wind-speed strong{max-width:100%;color:var(--heading);font-size:var(--font-sm);overflow-wrap:anywhere}
.metric-temperature-value small,.metric-wind-speed small,.metric-wind-direction small{max-width:100%;color:var(--muted);font-size:var(--font-xs);line-height:1.35;overflow-wrap:anywhere}
.metric-feels-value.is-missing,.metric-temperature-value.is-missing strong,.metric-rain-value.is-missing,.metric-rain-amount.is-missing{color:var(--muted)}
.metric-wind-bearing{display:flex;min-width:0;align-items:center;gap:7px;color:var(--heading);overflow-wrap:anywhere}
.metric-wind-bearing i{display:inline-block;flex:0 0 auto;color:var(--metric-accent);font-style:normal;transform:rotate(var(--wind-angle))}
.metric-level-text{color:var(--text-2)}
.metric-uv-value,.metric-rain-value{color:var(--heading);font-size:var(--font-sm);font-variant-numeric:tabular-nums}
.metric-time-cell{white-space:nowrap}

/* AQI uses the same data hierarchy without pretending pollutant values are cards from another family. */
.metric-aqi-section .air-quality-panel{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:var(--space-6);padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:none}
.metric-aqi-section .aqi-main{align-self:start;padding:var(--space-1)}
.metric-aqi-section .aqi-score{margin-top:var(--space-2)}
.metric-aqi-section .aqi-score strong{font-size:clamp(42px,4.8vw,56px)}
.metric-aqi-section .aqi-scale{margin-top:var(--space-2)}
.metric-aqi-section .air-pollutants{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--line)}
.metric-aqi-section .air-pollutants>div{min-width:0;padding:var(--space-4);border:0;border-radius:0;background:var(--surface)}
.metric-aqi-section .air-pollutants span,.metric-aqi-section .air-pollutants small{color:var(--muted);font-size:var(--font-xs)}
.metric-aqi-section .air-pollutants strong{display:block;max-width:100%;margin:3px 0;color:var(--heading);font-size:clamp(16px,2vw,19px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.metric-aqi-section .component-note{grid-column:1/-1;margin:0;padding-top:var(--space-3);border-top:1px solid var(--line);color:var(--muted);font-size:var(--font-xs);line-height:1.5}
.metric-aqi-section .aqi-scale-labels{gap:5px}
.metric-aqi-section .aqi-scale-labels span{min-width:0;line-height:1.25}

/* Reading guidance: editorial, lighter than live data surfaces. */
.metric-explainer{display:grid;grid-template-columns:minmax(0,var(--reading-measure));gap:var(--space-3);align-items:start;padding:var(--space-5) var(--space-6);border:1px solid var(--border);border-left:3px solid var(--metric-accent-line);border-radius:var(--radius-lg);background:var(--surface-soft)}
.metric-explainer h2{font-size:clamp(22px,2.3vw,28px);line-height:1.22}
.metric-explainer p{max-width:760px;color:var(--text-2);line-height:1.65}
.metric-explainer .eyebrow{margin-bottom:5px;color:var(--metric-accent)}
.metric-explainer .source-note{max-width:760px;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line);color:var(--muted);font-size:var(--font-xs)}
.metric-explainer--reading{max-width:var(--reading-measure)}
.uv-level-guide{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-4)}
.uv-level-guide>span{display:grid;gap:2px;padding:10px 11px;border:1px solid var(--border);border-top-width:3px;border-radius:var(--radius-md);background:var(--surface)}
.uv-level-guide b{color:var(--heading);font-size:var(--font-xs)}.uv-level-guide small{color:var(--text-2);font-size:var(--font-xs)}
.uv-level-guide .uv-level-low{border-top-color:var(--success)}.uv-level-guide .uv-level-moderate{border-top-color:var(--warning)}.uv-level-guide .uv-level-high,.uv-level-guide .uv-level-very-high,.uv-level-guide .uv-level-extreme{border-top-color:var(--danger)}

/* Rain-specific modules remain shared modules but follow Metric spacing and surfaces. */
.metric-page--mua .rain-outlook,.metric-page--mua .radar-section{min-width:0}
.metric-page--mua .rain-scroll{padding-bottom:var(--space-2)}
.metric-page--mua .rain-strip{box-shadow:none}
.metric-page--mua .rain-hour{min-height:142px}
.metric-page--mua .radar-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:none}
.metric-page--mua .radar-map{min-height:360px}
.metric-page--mua .rain-coverage-note{margin-top:var(--space-2);color:var(--muted);font-size:var(--font-xs);line-height:1.5}

/* FAQ, related metrics and next step. */
.metric-faq-section{max-width:900px}
.metric-related-nav{min-width:0;padding-top:var(--space-6);border-top:1px solid var(--line)}
.metric-related-nav .section-heading{align-items:flex-end}
.metric-related-nav .section-subtle{max-width:420px;color:var(--muted);font-size:var(--font-xs);line-height:1.5}
.metric-related-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.metric-related-links>a.metric-related-link{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;min-height:78px;padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--text-2);box-shadow:none;text-decoration:none}
.metric-related-links>a.metric-related-link:hover{border-color:var(--primary-line);background:var(--surface-hover)}
.metric-related-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary-dark)}
.metric-related-icon svg{width:29px;height:29px}
.metric-related-copy{display:grid;min-width:0;gap:2px}
.metric-related-copy strong{max-width:100%;color:var(--heading);font-size:var(--font-sm);line-height:1.35;overflow-wrap:anywhere}
.metric-related-copy small{max-width:100%;color:var(--muted);font-size:var(--font-xs);line-height:1.4;overflow-wrap:anywhere}
.metric-related-arrow{color:var(--link);font-size:18px}
.metric-page-bridge{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5);align-items:center;margin-top:var(--space-7)}
.metric-page-bridge>a{justify-self:end}
.rain-metric-intent-step{margin-top:var(--space-7)}

@media(max-width:1024px){
  .metric-page-hero{grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr);padding:var(--space-6)}
  .metric-aqi-section .air-quality-panel{grid-template-columns:1fr}
  .metric-aqi-section .air-pollutants{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uv-level-guide{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:900px){
  .metric-page-hero{grid-template-columns:1fr;gap:var(--space-5)}
  .metric-primary-answer{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-6)}
  .metric-primary-answer-topline,.metric-primary-answer-value,.metric-primary-answer>p{grid-column:1/2}
  .metric-primary-answer-actions{grid-column:2/3;grid-row:1/4;align-content:center;align-items:stretch;flex-direction:column}
  .metric-page .weather-context-bar{grid-template-columns:1fr}
  .metric-page .weather-context-main{align-items:flex-start;flex-direction:column;width:100%}
  .metric-page .weather-context-location{padding:0 0 var(--space-2);border-right:0}
  .metric-page .weather-context-links{width:100%}
  .metric-page .weather-context-switch{min-width:0;width:100%}
  .metric-hourly-section .scroll-hint{display:inline}
}

@media(max-width:760px){
  .metric-page{padding-top:var(--space-3)}
  .metric-page-hero{padding:var(--space-5)}
  .metric-page-hero h1{font-size:clamp(31px,6vw,40px)}
  .metric-primary-answer{grid-template-columns:1fr}
  .metric-primary-answer-topline,.metric-primary-answer-value,.metric-primary-answer>p,.metric-primary-answer-actions{grid-column:1;grid-row:auto}
  .metric-primary-answer-actions{align-items:flex-start;flex-direction:row}
  .metric-jump-nav{align-items:flex-start;flex-direction:column;gap:4px;padding-bottom:var(--space-2)}
  .metric-jump-links{width:100%}
  .metric-summary-section,.metric-workspace,.metric-explainer,.metric-faq-section,.metric-related-nav,.metric-page--mua .rain-outlook,.metric-page--mua .radar-section{margin-top:var(--space-7)}
  .metric-overview-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-card:last-child{grid-column:1/-1;min-height:104px}
  .metric-data-scroll{max-height:none}
  .metric-related-links{grid-template-columns:1fr}
  .metric-page-bridge{grid-template-columns:1fr}
  .metric-page-bridge>a{justify-self:start}
  .uv-level-guide{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:700px){
  .metric-page-hero{padding:var(--space-4)}
  .metric-page-kicker{align-items:flex-start}
  .metric-page-icon{width:42px;height:42px}.metric-page-icon svg,.metric-page-icon .metric-icon{width:31px;height:31px}
  .metric-primary-answer{padding:var(--space-4)}
  .metric-explainer{padding:var(--space-4)}
  .metric-aqi-section .air-quality-panel{padding:var(--space-4)}
  .metric-page .weather-context-search .location-search-block--embedded .ui-search-form{grid-template-columns:minmax(0,1fr) auto}
  .metric-page .weather-context-search .location-near-button{grid-column:1/-1;width:100%}
  .metric-page--mua .radar-map{min-height:280px}
}

@media(max-width:430px){
  .metric-page-hero{border-radius:var(--radius-lg)}
  .metric-page-hero h1{font-size:29px;line-height:1.1}
  .metric-page-intro{font-size:var(--font-xs);line-height:1.55}
  .metric-meta{gap:4px 10px}
  .metric-primary-answer-location{max-width:54%}
  .metric-primary-answer-value strong{font-size:clamp(38px,13vw,46px)}
  .metric-primary-answer-actions{align-items:stretch;flex-direction:column}
  .metric-primary-answer-actions .button{width:100%}
  .metric-page .weather-context-bar{padding:var(--space-3)}
  .metric-page .weather-context-search .location-search-block--embedded .ui-search-form{grid-template-columns:1fr}
  .metric-page .weather-context-search .ui-submit,.metric-page .weather-context-search .location-near-button{grid-column:auto;width:100%}
  .metric-jump-links{margin-inline:-3px}
  .metric-jump-links a{min-height:var(--touch);padding-inline:9px}
  .metric-overview-panel{grid-template-columns:1fr}
  .metric-card,.metric-card:last-child{grid-column:auto;min-height:0;padding:var(--space-4)}
  .metric-card strong{font-size:23px}
  .metric-hourly-section .metric-data-scroll{margin-right:calc(var(--page-pad)*-1);border-right:0;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
  .metric-data-row>span,.metric-data-row>strong{padding-inline:10px}
  .metric-aqi-section .air-pollutants{grid-template-columns:1fr}
  .metric-aqi-section .aqi-scale-labels{display:none}
  .uv-level-guide{grid-template-columns:1fr}
  .metric-related-links>a.metric-related-link{grid-template-columns:34px minmax(0,1fr) auto;min-height:72px;padding:11px 12px}
  .metric-related-icon{width:32px;height:32px}.metric-related-icon svg{width:26px;height:26px}
}

@media(max-width:360px){
  .metric-page-hero{padding:14px}
  .metric-page-hero h1{font-size:27px}
  .metric-primary-answer{padding:14px}
  .metric-related-links>a.metric-related-link{grid-template-columns:30px minmax(0,1fr) auto;gap:9px}
  .metric-related-icon{width:30px;height:30px}.metric-related-icon svg{width:24px;height:24px}
}