/* Shared reading sizes for the standard, mobile and PC pages. */
:root{font-size:16px;--muted:#647163}
body{font-size:16px;line-height:1.8}
.header-inner{gap:26px}
body .brand{font-size:27px}
body .brand small{font-size:11px}
body .site-header nav{font-size:16px;gap:22px;margin-left:18px}
body .header-note{font-size:14px}
body .pc-version-badge{font-size:14px}
body .eyebrow{font-size:14px}
body .hero h1{font-size:42px}
body .hero-description{font-size:16px;line-height:1.9}
body .hero-badges{font-size:14px;flex-wrap:wrap}
body .pilot-badge{font-size:13px}
body .art-note{font-size:14px}
body .stat-notice{font-size:16px}
body .stat-notice strong{font-size:26px}
body .stat-notice button{font-size:14px;min-height:40px}
body .trial-notice{margin-top:16px}
.plan-summary{list-style:none;padding:0;display:grid;gap:12px}
.plan-summary li{border:1px solid var(--line);border-radius:8px;padding:14px 16px;background:#f8faf4}
.plan-summary strong,.plan-summary span{display:block}
.plan-summary span{color:var(--muted)}
body .install-app{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-left:auto;padding:10px 13px;border:1px solid #cbd8c4;border-radius:8px;background:#edf2e7;color:#294e37;font-size:15px;line-height:1.5;white-space:nowrap;min-height:44px}
body .install-app[hidden]{display:none}
.install-environment{padding:12px 14px;background:#fbf3e2;border:1px solid #eedfbd;border-radius:8px}
#install-dialog ol{padding-left:1.6em}
#install-dialog li{margin:12px 0}
@media(display-mode:standalone),(display-mode:minimal-ui),(display-mode:fullscreen){body .install-app{display:none}}
@media(max-width:800px){body .header-inner{flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:10px 16px}body .install-app{margin-left:auto}body .site-header nav{align-self:auto;min-height:40px}body .site-header nav .active:after{bottom:-4px}}
@media(max-width:520px){body .install-app{font-size:14px;padding:8px 11px;min-height:40px}body .header-inner{justify-content:space-between}body .header-inner nav{order:3;width:100%;justify-content:flex-end;margin-left:0;min-height:30px}body .header-inner nav a{display:flex}body .header-inner nav .active:after{bottom:-6px}}
body .search-panel .section-eyebrow{font-size:18px}
body .step-number{font-size:22px}
body .field>span,body .field>label{font-size:16px;line-height:1.6}
body .field select{font-size:17px;height:52px;padding:10px 8px;min-width:0}
body .primary-button{font-size:17px;min-height:52px;gap:10px}
body .station-caption{font-size:14px;line-height:1.9}
body .results-header h2{font-size:20px;line-height:1.7;white-space:normal}
body .window-control{font-size:15px;line-height:1.7}
body .window-control select{font-size:16px;min-height:44px}
body .availability-note{font-size:15px;line-height:1.9}
body .small-label{font-size:14px}
body .calendar-top .small-label{font-size:15px}
body .month-navigation h3{font-size:27px;line-height:1.4;min-width:170px}
body .month-navigation h3 .month-number{font-size:38px}
body .icon-button{width:38px;height:38px}
body .period-toggle button{font-size:15px;padding:9px 12px}
body .period-toggle button span{font-size:12px}
body .metric-controls{flex-wrap:wrap;row-gap:10px}
body .metric-controls>span{font-size:15px}
body .metric-toggle button{font-size:15px;padding:9px 12px}
body .calendar-guide{font-size:14px;flex-wrap:wrap;line-height:1.7}
body .calendar-guide>span:first-child{white-space:normal;flex-wrap:wrap}
body .weekdays{font-size:16px}
body .calendar-day,body .calendar-empty{min-height:112px}
body .calendar-day{padding:9px 6px;gap:5px}
body .day-number{font-size:17px;width:28px;height:28px;margin:0}
body .day-percent{font-size:26px;line-height:1.2}
body .day-percent .sunny-label{display:block;font-size:12px;line-height:1.5;margin:0}
body .day-percent small{font-size:12px;margin-left:1px}
body .missing-day{font-size:14px}
body .mini-bar{height:5px}
body .legend{font-size:14px;gap:10px 16px}
body .calendar-bottom>p{font-size:14px;line-height:1.8}
body .detail-card{padding:24px 22px}
body .detail-eyebrow{font-size:12px}
body .detail-date-line{flex-wrap:wrap;gap:5px 10px}
body .detail-date-line h3{font-size:31px}
body .detail-date-line h3 span{font-size:16px}
body .date-bookmark{font-size:14px}
body .detail-place{font-size:15px;line-height:1.8}
body .detail-headline p{font-size:16px;line-height:1.7}
body .hero-percentage{font-size:50px;line-height:1.2}
body .hero-percentage small{font-size:22px}
body .hero-percentage em{display:block;font-size:16px;line-height:1.7;margin:3px 0 0}
body .distribution-row{font-size:16px;grid-template-columns:minmax(0,1fr) auto 64px;gap:8px;margin:15px 0}
body .distribution-row strong{font-size:20px}
body .distribution-row .row-count{font-size:15px}
body .distribution-row .icon{width:20px;height:20px}
body .stat-meta{font-size:15px;line-height:1.9;padding:16px}
body .stat-meta dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px 12px}
body .stat-meta p{font-size:14px;line-height:1.9}
body .compare-button{font-size:16px;min-height:48px}
body .detail-link{font-size:15px;line-height:1.8}
body .detail-smallprint{font-size:14px;line-height:1.9}
body .detail-empty h3{font-size:19px}
body .detail-empty p{font-size:16px}
body .section-heading h2{font-size:26px;line-height:1.6}
body .section-heading .section-eyebrow{font-size:13px;letter-spacing:.1em}
body .section-heading>.small-label{font-size:14px}
body .outline-button{font-size:15px;min-height:46px;white-space:normal}
body .muted{font-size:15px;line-height:1.9}
body .compare-empty h3{font-size:17px;line-height:1.8}
body .compare-empty p{font-size:15px}
body .section-footnote{font-size:14px}
body .comparison-table th,body .comparison-table td{font-size:16px;padding:15px 18px}
body .comparison-table th:first-child{font-size:15px}
body .comparison-table .comp-date{font-size:24px}
body .comparison-table .comp-date small{font-size:15px}
body .comparison-table tr.meta-row>*{font-size:14px}
body .history-tabs{flex-wrap:wrap;gap:8px 20px}
body .history-tabs button{font-size:15px;min-height:44px}
body .history-toolbar>.small-label{font-size:14px}
body .records-table{font-size:16px}
body .records-table th{font-size:15px;padding:15px 18px}
body .records-table td{font-size:16px;padding:16px 18px}
body .records-table td small{font-size:14px}
body .records-table a,body .context-button{font-size:15px}
body .category-pill{font-size:14px}
body .quality-note,body .missing-text{font-size:14px}
body .expand-button{font-size:16px;min-height:46px}
body .empty-message{font-size:16px}
body .context-header h3{font-size:19px}
body .context-header p{font-size:14px}
body .context-grid{grid-template-columns:repeat(auto-fit,minmax(125px,1fr))}
body .context-day{font-size:14px}
body .context-day strong{font-size:16px}
body .understanding-intro h2{font-size:28px}
body .understanding-intro .section-eyebrow{font-size:13px}
body .understanding-item h3{font-size:18px}
body .understanding-item p{font-size:16px;line-height:1.9}
body .text-button{font-size:15px;line-height:1.8}
body .footer-top p,body .footer-top>button{font-size:15px}
body .footer-bottom{font-size:14px;line-height:1.9}
body .footer-top .brand small{font-size:10px}
body dialog h2{font-size:29px}
body dialog h3{font-size:20px}
body dialog p,body dialog li{font-size:16px;line-height:1.9}
body .coverage-table,body .coverage-table .text-button{font-size:16px}
body .coverage-table th,body .coverage-summary>span{font-size:15px}
body .coverage-search input{font-size:17px;min-height:48px}
body .load-error,body .toast{font-size:16px;line-height:1.8}
body .recent-heading h3{font-size:23px;line-height:1.6}
body .recent-heading .section-eyebrow{font-size:13px}
body .recent-place,body .recent-alert-badge{font-size:15px;line-height:1.8}
body .recent-period-title strong{font-size:18px}
body .recent-period-title>span{font-size:14px}
body .recent-value{font-size:38px;flex-wrap:wrap;gap:3px}
body .recent-value>small{font-size:18px}
body .recent-value>span,body .recent-value>.recent-value-label{font-size:14px;white-space:normal}
body .recent-fair>span{font-size:16px}
body .recent-fair>strong{font-size:28px}
body .recent-fair>small,body .recent-period>p{font-size:14px;line-height:1.8}
body .recent-message{font-size:17px}
body .recent-footnote,body .recent-method{font-size:14px;line-height:1.9}
body .event-section .section-heading h2{font-size:27px}
body .event-intro{font-size:17px;line-height:1.9}
body .event-controls label{font-size:16px}
body .event-controls select,body .event-input{height:56px}
body .event-controls select{font-size:17px}
body .event-input input{font-size:25px}
body .event-input span{font-size:16px}
body .event-settings-note,body .event-source{font-size:15px;line-height:1.9}
body .event-stat>p:first-child,body .event-stat>p:not(:first-child){font-size:16px;line-height:1.8}
body .event-stat h3{font-size:28px}
body .event-stat h3 small{font-size:16px}
body .typhoon-stat h3{font-size:25px}
body .event-number{font-size:50px}
body .event-number small{font-size:16px}
body .event-periods h3{font-size:22px}
body .event-table{font-size:16px}
body .event-table small{font-size:14px}
body .event-history summary,body .event-method summary{font-size:16px;line-height:1.8}
body .event-method p,body .event-error,body .event-empty{font-size:15px}

@media(min-width:801px){
  body:not(.pc-view) .weather-layout{grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr)}
  body .event-stat>p:first-child{min-height:58px}
  body .event-stat h3{min-height:58px}
}
@media(min-width:960px){
  body.pc-view{font-size:18px}
  body.pc-view .hero-description{font-size:18px}
  body.pc-view .field select,body.pc-view .primary-button{font-size:18px;height:56px}
  body.pc-view .weather-layout{grid-template-columns:minmax(0,1fr) 430px}
  body.pc-view .day-percent{font-size:30px}
  body.pc-view .day-number{font-size:20px}
  body.pc-view .distribution-row{font-size:18px}
  body.pc-view .distribution-row strong{font-size:22px}
  body.pc-view .stat-meta{font-size:16px}
  body.pc-view .detail-place,body.pc-view .detail-headline p{font-size:17px}
  body.pc-view .hero-percentage{font-size:56px}
  body.pc-view .records-table td{font-size:18px}
  body.pc-view .event-intro,body.pc-view .understanding-item p{font-size:18px}
}
@media(min-width:960px) and (max-width:1199px){
  body.pc-view .weather-layout{grid-template-columns:minmax(0,1fr) 370px;gap:20px}
  body.pc-view .calendar-top{flex-wrap:wrap;row-gap:14px}
  body.pc-view .day-percent{font-size:27px}
}
@media(max-width:1200px){body .header-note{display:none}}
@media(max-width:800px){
  body .hero h1{font-size:34px}
  body .header-inner{gap:16px}
  body .site-header nav{font-size:15px;gap:18px;margin-left:auto}
  body .calendar-top{flex-wrap:wrap;gap:14px}
  body .detail-card-content{display:block}
  body .search-fields{gap:18px}
  body .understanding{grid-template-columns:1fr 1fr;gap:28px}
  body .recent-value>span{width:100%;margin-left:0}
}
@media(max-width:520px){
  body .header-inner{padding:0 14px;gap:10px}
  body .brand{font-size:23px;gap:7px;letter-spacing:.06em}
  body .brand-icon{width:34px;height:34px}
  body .brand small{font-size:9px}
  body .site-header nav{font-size:14px;gap:13px;margin-left:auto}
  body .page-shell{padding:0 12px}
  body .hero{min-height:320px;padding-top:30px;padding-bottom:28px}
  body .hero h1{font-size:clamp(26px,7.3vw,35px)}
  body .eyebrow{font-size:12px;letter-spacing:0;gap:5px}
  body .hero-description{font-size:15px;max-width:none}
  body .hero-description span{white-space:normal}
  body .hero-badges{font-size:13px;gap:9px}
  body .pilot-badge{font-size:12px}
  body .stat-notice{padding:18px 14px;gap:8px 10px}
  body .stat-notice strong{font-size:22px}
  body .stat-notice .notice-detail{font-size:15px}
  body .search-panel{padding:20px 14px 16px}
  body .search-panel .section-eyebrow{font-size:17px}
  body .search-fields{grid-template-columns:1fr;gap:18px}
  body .date-field,body .area-field,body .primary-button{grid-column:1/-1}
  body .field>span,body .field>label{font-size:16px}
  body .field select{font-size:17px;height:52px}
  body .primary-button{font-size:17px}
  body .station-caption{font-size:14px}
  body .results-header{flex-direction:column;align-items:stretch;gap:12px}
  body .results-header h2{font-size:18px}
  body .window-control{display:flex;align-items:center;justify-content:space-between;font-size:15px}
  body .window-control select{display:block;margin:0;max-width:none;font-size:16px}
  body .availability-note{font-size:14px;padding:14px}
  body .calendar-top{padding:18px 13px 14px;flex-wrap:wrap;gap:12px}
  body .calendar-top .small-label{font-size:14px}
  body .month-navigation{gap:8px;margin-left:0}
  body .month-navigation h3{font-size:23px;min-width:152px}
  body .month-navigation h3 .month-number{font-size:32px}
  body .icon-button{width:34px;height:34px}
  body .period-toggle{margin-left:auto}
  body .period-toggle button{font-size:15px;padding:9px 14px}
  body .period-toggle button span{font-size:12px}
  body .metric-controls{margin:0 13px;gap:9px;padding-bottom:10px}
  body .metric-controls>span{font-size:14px}
  body .metric-toggle{margin-left:auto}
  body .metric-toggle button{font-size:14px;padding:9px}
  body .calendar-guide{font-size:13px;margin:0 13px}
  body .weekdays{font-size:14px}
  body .calendar-day,body .calendar-empty{min-height:103px}
  body .calendar-day{padding:7px 1px;gap:5px}
  body .day-number{font-size:15px;width:25px;height:25px;margin:0}
  body .day-percent{font-size:clamp(16px,4.7vw,23px);letter-spacing:-.035em}
  body .day-percent .sunny-label{font-size:11px;line-height:1.6;letter-spacing:0}
  body .day-percent small{font-size:8px;margin:0;letter-spacing:0}
  body .compare-mark{width:12px;height:12px;font-size:9px;right:3px;top:12px}
  body .missing-day{font-size:12px;white-space:normal}
  body .calendar-bottom{padding:16px 13px}
  body .legend{font-size:13px;gap:9px 12px}
  body .calendar-bottom>p{font-size:13px}
  body .detail-card{padding:22px 16px}
  body .detail-date-line h3{font-size:32px}
  body .hero-percentage{font-size:48px}
  body .distribution-row{font-size:16px;grid-template-columns:minmax(0,1fr) auto 59px;gap:6px}
  body .distribution-row .row-count{font-size:14px}
  body .distribution-row strong{font-size:19px}
  body .stat-meta{font-size:14px;padding:14px}
  body .stat-meta dl{gap:7px 8px}
  body .section-heading{flex-wrap:wrap}
  body .section-heading h2,body .event-section .section-heading h2{font-size:23px}
  body .section-heading .section-eyebrow{font-size:12px}
  body .section-heading>.small-label{font-size:14px;padding-top:0}
  body .history-toolbar{flex-wrap:wrap;align-items:start}
  body .history-tabs{gap:6px 16px}
  body .history-tabs button{font-size:14px}
  body .context-grid{grid-template-columns:1fr 1fr}
  body .understanding{grid-template-columns:1fr;gap:28px}
  body .understanding-intro h2{font-size:26px}
  body .understanding-item h3{font-size:18px}
  body .understanding-item p{font-size:16px}
  body .footer-top{gap:16px;flex-wrap:wrap}
  body .footer-top>button{font-size:14px}
  body .footer-bottom{font-size:13px}
  body dialog{padding:24px 18px}
  body dialog h2{font-size:25px}
  body dialog h3{font-size:19px}
  body .recent-weather{padding:20px 14px}
  body .recent-heading h3{font-size:21px}
  body .recent-place{font-size:14px}
  body .recent-periods{grid-template-columns:1fr;gap:14px}
  body .recent-period{padding:16px}
  body .recent-period-title{display:flex;justify-content:space-between;flex-wrap:wrap}
  body .recent-period-title strong{font-size:18px}
  body .recent-period-title>span{font-size:14px}
  body .recent-value{font-size:36px}
  body .recent-value>span{font-size:15px;white-space:normal}
  body .recent-value>.recent-value-label{font-size:15px}
  body .recent-fair{grid-template-columns:1fr auto}
  body .recent-fair>small{font-size:14px;text-align:left;overflow-wrap:anywhere}
  body .recent-fair>span{font-size:16px}
  body .recent-fair>strong{font-size:29px}
  body .recent-period>p{font-size:14px}
  body .recent-message{font-size:16px}
  body .recent-footnote,body .recent-method{font-size:14px}
  body .event-section{padding:23px 14px}
  body .event-intro{font-size:16px}
  body .event-controls{grid-template-columns:1fr}
  body .event-controls label{font-size:16px;grid-column:auto}
  body .event-number{font-size:47px}
}
@media(max-width:360px){body .install-app{padding-inline:7px;gap:0}body .install-app .icon{display:none}}

/* Optional daily observations: each selected item appears once. */
body .calendar-observation-picker{margin:0 24px 16px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body .observation-picker-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
body .observation-picker-heading h4{font-size:16px;font-weight:650;margin:0}
body .observation-picker-heading>div{display:flex;gap:12px;flex-wrap:wrap}
body .observation-picker-heading button{font-size:14px;padding:4px 0;color:var(--green);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
body .calendar-observation-controls{display:flex;flex-wrap:wrap;gap:14px 20px}
body .calendar-observation-controls fieldset{min-width:0;border:0;padding:0;margin:0;flex:1 1 145px}
body .calendar-observation-controls legend{padding:0;margin-bottom:7px;font-size:15px;font-weight:650}
body .calendar-observation-controls legend small{font-size:12px;font-weight:400;color:var(--muted)}
body .calendar-observation-controls fieldset>div{display:flex;flex-wrap:wrap;gap:8px 14px}
body .calendar-observation-controls label{display:inline-flex;align-items:center;gap:6px;font-size:15px;white-space:nowrap;cursor:pointer;min-height:32px}
body .calendar-observation-controls input{accent-color:var(--green);width:17px;height:17px;margin:0;flex-shrink:0}
body #calendar-observation-note{font-size:13px;line-height:1.8;color:var(--muted);margin:12px 0 0}
body #retry-calendar-observations{font-size:14px;text-decoration:underline;padding:8px 0;color:#95632e}
body .day-observations{display:flex;flex-direction:column;width:100%;gap:9px;margin-top:7px;flex-shrink:0}
body .day-observation-group{display:flex;flex-direction:column;gap:4px;width:100%;border-top:1px solid #dfe6dc;padding-top:6px}
body .day-observation-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px;font-size:12px;font-weight:650;line-height:1.5}
body .day-observation-heading small{font-size:10px;font-weight:400;white-space:nowrap}
body .observation-temperature .day-observation-heading{color:#9a663d}
body .observation-rain .day-observation-heading{color:#527a96}
body .observation-wind .day-observation-heading{color:#4c796d}
body .day-observation-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 3px;font-size:12px;line-height:1.45;width:100%}
body .day-observation-row>span{white-space:nowrap;color:#78816f}
body .day-observation-row strong{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);letter-spacing:-.025em}
body .day-observation-row sup{font-size:8px;margin-left:1px;vertical-align:super}
@media(max-width:1200px){body .day-observation-row{flex-direction:column;align-items:flex-start}}
@media(max-width:520px){
 body .calendar-observation-picker{margin:0 13px 14px;padding:14px 0}
 body .observation-picker-heading{gap:8px;margin-bottom:12px}
 body .observation-picker-heading h4{font-size:15px}
 body .observation-picker-heading button{font-size:13px}
 body .calendar-observation-controls{gap:12px}
 body .calendar-observation-controls fieldset{flex-basis:100%}
 body .calendar-observation-controls fieldset>div{gap:8px 16px}
 body .calendar-observation-controls label{font-size:14px;min-height:34px}
 body .calendar-observation-controls legend{font-size:14px;margin-bottom:3px}
 body .day-observations{gap:7px;margin-top:5px}
 body .day-observation-heading{font-size:11px;gap:0 2px;line-height:1.5}
 body .day-observation-heading small{font-size:9px}
 body .day-observation-row{font-size:11px}
 body .day-observation-row strong{font-size:14px}
 body .day-observation-row sup{font-size:7px;margin-left:0}
}
@media(max-width:360px){body .day-observation-row strong{font-size:13px}body .day-observation-row{font-size:10px}}