:root { color-scheme: light; font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif; color: #18232b; background: #eef3f5; }
body { margin: 0; }
main { max-width: 1500px; margin: 0 auto; padding: 28px 20px 60px; }
header { background: #fff; border-top: 5px solid #087f8c; padding: 24px; box-shadow: 0 4px 18px #16313b18; }
.eyebrow { color: #087f8c; font-size: .75rem; font-weight: 800; letter-spacing: .15em; margin: 0; }
h1 { margin: 5px 0 20px; font-size: 1.8rem; }
form { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
label { display: grid; gap: 5px; font-size: .8rem; font-weight: 700; }
select, input, button { font: inherit; padding: 8px 10px; border: 1px solid #aab9bf; border-radius: 5px; background: #fff; }
select, input[type="number"], form > button, .segmented { height: 40px; box-sizing: border-box; }
button { cursor: pointer; background: #087f8c; border-color: #087f8c; color: white; font-weight: 700; }
.profile-toggle { margin: 0; padding: 0; border: 0; }
.profile-toggle legend { margin-bottom: 5px; font-size: .8rem; font-weight: 700; }
.segmented { display: flex; overflow: hidden; border: 1px solid #087f8c; border-radius: 6px; }
.segment { display: block; position: relative; cursor: pointer; font-size: .9rem; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: flex; align-items: center; height: 100%; box-sizing: border-box; padding: 0 12px; color: #075e68; background: #fff; }
.segment + .segment span { border-left: 1px solid #087f8c; }
.segment input:checked + span { color: #fff; background: #087f8c; font-weight: 800; }
.segment input:focus-visible + span { outline: 3px solid #f4b942; outline-offset: -3px; }
#summary { margin-top: 18px; font-weight: 700; }
.units, #message { color: #53646c; }
.table-wrap { margin-top: 18px; overflow-x: auto; background: white; box-shadow: 0 4px 18px #16313b18; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: .86rem; }
th { position: sticky; top: 0; background: #183b45; color: white; text-align: left; }
th, td { padding: 9px 10px; border-bottom: 1px solid #dce4e7; }
tbody tr[data-available="true"] { cursor: pointer; }
tbody tr[data-available="true"]:hover { background: #edf8f8; }
.missing { color: #8b5a20; background: #fff9ef; }
.warn { color: #9b2c2c; font-weight: 800; }
.ok { color: #237a45; font-weight: 800; }
.partial { color: #9b5f00; font-weight: 700; }
.legend { margin-top: 16px; padding: 12px 16px; color: #455860; background: #fff; border-left: 4px solid #87a9b0; font-size: .84rem; line-height: 1.6; }
.legend p { margin: 4px 0; }
dialog { width: min(900px, calc(100vw - 40px)); max-height: 85vh; border: 0; border-radius: 8px; padding: 0; box-shadow: 0 18px 70px #0006; }
dialog::backdrop { background: #12272e99; }
.dialog-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #183b45; color: white; }
.dialog-head h2 { margin: 0; }
#detail-body { padding: 20px; }
.timeseries-chart { display: block; width: 100%; height: auto; margin: 10px 0 20px; background: #f7f9fb; }
.chart-status { color: #53646c; font-weight: 700; }
.telegram-section { margin: 0 0 24px; }
.telegram-section h3 { margin: 0 0 10px; color: #087f8c; }
.telegram-status { color: #53646c; }
.telegram-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.telegram-actions button { padding: 6px 10px; font-size: .82rem; }
.telegram-order { color: #075e68; background: #fff; }
.telegram-copy:disabled { cursor: wait; opacity: .65; }
.telegram-feedback { min-height: 1.4em; color: #455860; font-size: .8rem; }
.telegram-list { margin: 0; padding: 0; list-style: none; border: 1px solid #dce4e7; border-radius: 6px; }
.telegram-item { padding: 10px 12px; background: #f8fafb; }
.telegram-item + .telegram-item { border-top: 1px solid #dce4e7; }
.telegram-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: #53646c; font-size: .78rem; }
.telegram-type, .telegram-correction { padding: 1px 6px; border-radius: 999px; background: #dcecef; color: #075e68; font-weight: 800; }
.telegram-correction { background: #fff0cc; color: #8a5700; }
.telegram-raw { display: block; color: #18232b; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.clipboard-fallback { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; opacity: 0; }
.detail-section { margin-bottom: 20px; }
.detail-section h3 { margin-bottom: 7px; color: #087f8c; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f1f5f6; padding: 12px; border-radius: 5px; font-size: .8rem; }
.statistics { margin-top: 20px; padding: 20px; background: white; }
.statistics h2 { margin-top: 0; font-size: 1.2rem; }
.statistics p, .statistics details { font-size: .86rem; line-height: 1.6; }
.statistics table { white-space: normal; min-width: 850px; table-layout: fixed; }
.statistics th:first-child { width: 210px; }
.statistics th:nth-child(n+2):nth-child(-n+4) { width: 70px; }
.statistics th:nth-child(5) { width: 150px; }
.statistics th, .statistics td:nth-child(n+2):nth-child(-n+5) { white-space: nowrap; }
.statistics td:first-child { min-width: 180px; }
.statistics td:nth-child(6) { min-width: 160px; }
.statistics small { display: block; color: #53646c; margin-top: 4px; }
.statistics-date { margin: 2px; padding: 4px 7px; background: white; color: #075e68; font-size: .8rem; }
.statistics details { margin-top: 10px; }
.statistics summary { cursor: pointer; font-weight: 700; }
.statistics details details { margin-left: 12px; }
@media (max-width: 640px) { main { padding: 12px 8px 40px; } header { padding: 16px; } }

/* AMeDAS wind statistics */
.wind-statistics { margin: 2rem 0; padding: 1rem; border: 1px solid #cbd5df; border-radius: 8px; }
.wind-rose-layout { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.wind-rose-layout svg { width: min(100%, 420px); height: auto; }
.wind-rose-layout > div { flex: 1; min-width: 180px; }
.wind-table { min-width: 660px; table-layout: auto; }
.wind-table th, .wind-table td { white-space: normal; overflow-wrap: anywhere; }
.wind-statistics pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; }
.wind-statistics details { margin: 1rem 0; }

.wind-threshold-table { min-width: 950px; table-layout: fixed; }
.wind-threshold-table th:first-child { width: 180px; }
.wind-threshold-table th:nth-child(2) { width: 105px; }
.wind-threshold-table th:nth-child(3), .wind-threshold-table th:nth-child(5) { width: 85px; }
.wind-threshold-table th:nth-child(4) { width: 125px; }
.wind-threshold-table td:nth-child(n+2):nth-child(-n+5) { white-space: nowrap; }
.wind-statistics #wind-unit { max-width: 180px; }

.direction-frequency-table { min-width: 1500px; table-layout: fixed; }
.direction-frequency-table td { padding: 2px; }
.direction-frequency-table button { width: 100%; padding: 8px 2px; color: #17313d; background: #eee; border: 1px solid #cad3dc; font-size: .8rem; }
#direction-select { max-width: 180px; }
.direction-frequency-table th:first-child { position: sticky; left: 0; z-index: 1; background: #193d49; color: white; }

.wind-boxplot { width: 100%; min-width: 1000px; display: block; }

.weather-boxplot { width:100%; min-width:850px; display:block; }
#climate-content td button { color:#173e56; background:#f5f8fa; white-space:nowrap; }
#climate-content pre { white-space:pre-wrap; overflow-wrap:anywhere; }

/* Equal month columns, scoped to the weather year-by-month table. */
#climate-content .weather-year-month { table-layout:fixed; width:780px; min-width:780px; font-size:12px; }
#climate-content .weather-year-month th,
#climate-content .weather-year-month td { text-align:center; padding:3px 2px; white-space:nowrap; }
#climate-content .weather-year-month th:first-child,
#climate-content .weather-year-month td:first-child { width:48px; position:sticky; left:0; z-index:1; }
#climate-content .weather-year-month td:first-child { background:#f2f6f8; font-weight:600; }
#climate-content .weather-year-month th:not(:first-child) { width:auto; }
#climate-content .weather-year-month td button { width:auto; min-width:28px; max-width:100%; min-height:24px; padding:2px 4px; line-height:1.2; font-variant-numeric:tabular-nums; }
#climate-axis { max-width:260px; margin:8px 0 16px; }

#climate-content .weather-year-month-wrap { width:fit-content; max-width:100%; }

.wind-period { font-size:clamp(1.5rem, 3vw, 2rem); font-weight:800; margin:0 0 16px; line-height:1.35; }
.climate-downloads { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:12px; }

.flight-vfr { background:#e5f4e8; color:#165c2d; }
.flight-mvfr { background:#dfedff; color:#184b8d; }
.flight-ifr { background:#ffe3e3; color:#961f24; }
.flight-lifr { background:#f4dffa; color:#762489; }

/* Hour-presence and conditional weather frequencies. */
.weather-frequency-table { width:max-content; min-width:100%; table-layout:auto; }
.weather-frequency-table th, .weather-frequency-table td { padding:3px; text-align:center; }
.weather-frequency-table td button { min-width:46px; width:100%; padding:4px; border:0; background:transparent; color:#17313d; font-size:12px; font-variant-numeric:tabular-nums; }
.weather-frequency-table th:first-child { position:sticky; left:0; background:#193d49; color:white; }
#wf-controls label { display:inline-block; margin:6px 12px 6px 0; }