/* Climate Nerd public page. Charts keep the NWS look on white whatever the theme. */
.cn-page { --cn-ink: #1d2327; --cn-muted: #5f6368; --cn-line: #c9ccd1; --cn-accent: #2d5016; max-width: 1200px; margin: 0 auto; color: var(--cn-ink); }
.cn-page *, .cn-page *::before, .cn-page *::after { box-sizing: border-box; }
.cn-page [hidden] { display: none !important; }

/* Controls */
.cn-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 10px 12px; margin: 0 0 12px; background: #f6f7f7; border: 1px solid var(--cn-line); border-radius: 6px; font-size: 14px; }
.cn-ctl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cn-ctl > span:first-child { font-weight: 600; }
.cn-controls select, .cn-controls input[type="date"] { font: inherit; padding: 3px 6px; border: 1px solid #8c8f94; border-radius: 4px; background: #fff; color: var(--cn-ink); min-height: 32px; }
.cn-controls button, .cn-chart .cn-opts button, .cn-report button { font: inherit; font-size: 13px; padding: 4px 10px; min-height: 32px; border: 1px solid #8c8f94; border-radius: 4px; background: #fff; color: var(--cn-ink); cursor: pointer; }
.cn-controls button:hover, .cn-chart .cn-opts button:hover, .cn-report button:hover { border-color: var(--cn-accent); }
.cn-controls button:disabled { opacity: .45; cursor: default; }
.cn-page button:focus-visible, .cn-page select:focus-visible, .cn-page input:focus-visible, .cn-plot:focus-visible, .cn-cli:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.cn-seg { gap: 0; }
.cn-seg button { border-radius: 0; margin-left: -1px; }
.cn-seg button:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.cn-seg button:last-child { border-radius: 0 4px 4px 0; }
.cn-seg button[aria-pressed="true"] { background: var(--cn-accent); border-color: var(--cn-accent); color: #fff; }
.cn-cmp { display: inline-flex; align-items: center; gap: 4px; }
.cn-swatch { display: inline-block; width: 18px; height: 0; border-top-width: 3px; }
.cn-x { min-height: 28px !important; padding: 0 7px !important; line-height: 1; }

/* Messages */
.cn-msg { margin: 0 0 12px; padding: 8px 12px; border-left: 4px solid #dba617; background: #fcf9e8; font-size: 14px; }
.cn-err { border-left-color: #b32d2e; background: #fcf0f1; }
.cn-loading { color: var(--cn-muted); font-style: italic; padding: 24px 12px; margin: 0; }
.cn-busy .cn-svg, .cn-busy .cn-cli { opacity: .55; transition: opacity .15s; }

/* Charts */
.cn-chart { margin: 0 0 18px; }
.cn-opts { display: flex; justify-content: flex-end; gap: 10px; min-height: 0; font-size: 13px; margin-bottom: 4px; }
.cn-opts label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cn-plot { position: relative; background: #fff; border: 1px solid var(--cn-line); border-radius: 4px; overflow: hidden; touch-action: pan-y; cursor: crosshair; }
.cn-svg { line-height: 0; }
.cn-svgel { display: block; width: 100%; height: auto; font: 11px/1 "DejaVu Sans", Verdana, Arial, sans-serif; fill: #000; }
.cn-svgel .cn-title { font-size: 13px; }
.cn-svgel .cn-leg { font-size: 12px; }
.cn-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; margin-top: 4px; }
.cn-key { display: inline-flex; align-items: center; gap: 6px; }
.cn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tooltip */
.cn-tip { position: absolute; z-index: 5; max-width: 300px; padding: 8px 10px; background: rgba(255, 255, 255, .97); border: 1px solid #8c8f94; border-radius: 6px; box-shadow: 0 3px 10px rgba(0, 0, 0, .15); font: 12px/1.35 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--cn-ink); cursor: default; }
.cn-tip strong { display: block; margin-bottom: 4px; font-size: 13px; }
.cn-tip table { border-collapse: collapse; margin: 0; width: auto; border: 0; }
.cn-tip th, .cn-tip td { padding: 1px 8px 1px 0; text-align: left; vertical-align: top; border: 0; background: none; font-size: 12px; }
.cn-tip th { font-weight: 600; color: var(--cn-muted); white-space: nowrap; }
.cn-tip td { font-variant-numeric: tabular-nums; }
.cn-tip .cn-muted { color: var(--cn-muted); font-style: italic; padding-top: 3px; }
.cn-tip .cn-rh { color: #b00000; }
.cn-tip .cn-rl { color: #0000b0; }
.cn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.cn-linkbtn { margin-top: 6px; padding: 0; border: 0; background: none; color: #2271b1; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; min-height: 0; }

/* Report */
.cn-report { margin: 8px 0 12px; }
.cn-report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cn-report-head h3 { margin: 0; font-size: 1.1em; }
.cn-cli { margin: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--cn-line); border-radius: 4px; font: 13px/1.35 "DejaVu Sans Mono", Menlo, Consolas, "Courier New", monospace; color: #000; white-space: pre; overflow-x: auto; tab-size: 8; }
.cn-help { font-size: 12px; color: var(--cn-muted); margin: 4px 0 0; }
.cn-locked { padding: 12px; border: 1px solid var(--cn-line); border-radius: 6px; }

@media (max-width: 600px) {
	.cn-controls { gap: 8px 12px; padding: 8px; }
	.cn-ctl { width: 100%; }
	.cn-ctl > span:first-child { min-width: 92px; }
	.cn-cli { font-size: 11px; padding: 8px; }
	.cn-tip { max-width: 240px; }
}
@media print {
	.cn-controls, .cn-opts, .cn-help, .cn-report-head button, .cn-tip { display: none !important; }
	.cn-plot, .cn-cli { border-color: #999; }
	.cn-chart { break-inside: avoid; }
}

/* ---- Phase 3: sections ---- */
.cn-sec { margin: 22px 0 12px; }
.cn-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.cn-sec-head h3 { margin: 0; font-size: 1.1em; }
.cn-sec-ctl { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; }
.cn-sec-ctl select { font: inherit; padding: 3px 6px; border: 1px solid #8c8f94; border-radius: 4px; background: #fff; min-height: 32px; margin-left: 4px; }
.cn-rec-level { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-bottom: 14px; }
.cn-rec-table h4, .cn-sec h4 { margin: 0 0 4px; font-size: 14px; }
.cn-rec-table table, .cn-fs-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border: 1px solid var(--cn-line); margin: 0; }
.cn-rec-table th, .cn-rec-table td, .cn-fs-table th, .cn-fs-table td { padding: 4px 8px; border-bottom: 1px solid #eceef0; text-align: left; vertical-align: top; }
.cn-rec-table thead th, .cn-fs-table thead th { background: #f6f7f7; font-weight: 600; color: var(--cn-muted); font-size: 12px; position: sticky; top: 0; }
.cn-rec-table td:first-child { width: 3em; color: var(--cn-muted); }
.cn-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-page .cn-linkbtn { display: inline; padding: 0; margin: 0; border: 0; background: none; color: #2271b1; font: inherit; line-height: inherit; vertical-align: baseline; text-decoration: underline; cursor: pointer; min-height: 0; height: auto; box-shadow: none; }
.cn-muted { color: var(--cn-muted); }
.cn-small { font-size: 12px; }
.cn-fs-summary { margin: 0 0 8px; font-size: 14px; }
.cn-fs-scroll { max-height: 460px; overflow: auto; border: 1px solid var(--cn-line); }
.cn-fs-scroll .cn-fs-table { border: 0; }
.cn-badge { display: inline-block; padding: 0 6px; border-radius: 3px; background: #f0f0f1; color: var(--cn-muted); margin: 1px 0; }
.cn-badge-earliest { background: #e6f0fb; color: #0b4f9c; }
.cn-badge-latest { background: #fbeee2; color: #8a4a00; }

/* ---- Explore this day ---- */
html.cn-modal-open { overflow: hidden; }
.cn-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.cn-modal-box { width: 100%; max-width: 900px; background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); padding: 14px 16px 18px; color: var(--cn-ink); }
.cn-x-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cn-x-head h3 { margin: 0; font-size: 1.1em; }
.cn-x-nav { display: inline-flex; gap: 4px; flex: none; }
.cn-modal button { font: inherit; font-size: 13px; padding: 4px 10px; min-height: 32px; border: 1px solid #8c8f94; border-radius: 4px; background: #fff; color: var(--cn-ink); cursor: pointer; }
.cn-modal button:disabled { opacity: .45; cursor: default; }
.cn-modal .cn-linkbtn { border: 0; padding: 0; min-height: 0; color: #2271b1; font-size: inherit; }
.cn-modal .cn-seg button[aria-pressed="true"], .cn-x-tabs button[aria-selected="true"] { background: var(--cn-accent); border-color: var(--cn-accent); color: #fff; }
.cn-x-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0; }
.cn-x-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--cn-line); padding-bottom: 8px; margin-bottom: 10px; }
.cn-x-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cn-x-charts figure { margin: 0; }
.cn-x-charts figcaption { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.cn-x-svg { display: block; width: 100%; height: auto; font: 11px/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; fill: #333; }
.cn-x-key { font-size: 12px; color: var(--cn-muted); margin: 2px 0 0; }
.cn-key-line { display: inline-block; width: 16px; border-top: 2px solid #1d2327; vertical-align: middle; margin-right: 4px; }
.cn-x-stats { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin-top: 12px; font-size: 13px; }
.cn-x-stats table { border-collapse: collapse; width: 100%; margin: 0; border: 0; }
.cn-x-stats th, .cn-x-stats td { padding: 3px 8px 3px 0; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid #eceef0; }
.cn-x-stats th { color: var(--cn-muted); font-weight: 600; width: 42%; }
.cn-x-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-content: start; }
.cn-x-list h4 { margin: 0 0 2px; font-size: 13px; }
.cn-x-list ol { margin: 0; padding-left: 20px; }
.cn-x-list li { margin: 1px 0; }
.cn-modal.cn-busy .cn-x-body { opacity: .55; }

@media (max-width: 700px) {
	.cn-rec-level, .cn-x-charts, .cn-x-stats { grid-template-columns: minmax(0, 1fr); }
	.cn-modal { padding: 0; }
	.cn-modal-box { min-height: 100%; border-radius: 0; }
}
@media print {
	.cn-modal, .cn-sec-ctl, .cn-report-head button, .cn-more + .cn-linkbtn { display: none !important; }
	.cn-page .cn-linkbtn { color: inherit; text-decoration: none; }
	.cn-fs-scroll { max-height: none; overflow: visible; border: 0; }
	.cn-rec-level { break-inside: avoid; }
	.cn-sec { break-before: auto; }
}