/* TXKtoday weather page ([txk_weather], inc/weather.php). 2026-11-14.
   Colors are local custom properties on .txk-wxp; the two dark blocks at the bottom flip them
   (explicit dark toggle, and the OS-aware "os-default" mode). Keep those two blocks in sync. */

.txk-wxp {
	--wx-text: #1d2328; --wx-muted: #5f6b76; --wx-line: #e3e7eb; --wx-card: #fff; --wx-soft: #f5f7f9;
	--wx-link: #1d70a2; --wx-accent: #ff9000; --wx-bar: #d9dfe5;
	--wx-sun: #f59e0b; --wx-moon: #8a9bb0; --wx-cloud: #a9b4bf; --wx-rain: #2f97d4; --wx-snow: #7fb6dd; --wx-bolt: #f2a900; --wx-fog: #a9b4bf;
	--wx-pop: #1d70a2;
	max-width: 920px; margin: 0 auto; color: var(--wx-text);
	font-family: var(--txk-font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
.txk-wxp *, .txk-wxp *::before, .txk-wxp *::after { box-sizing: border-box; }
.txk-wxp p { margin: 0; }

.txk-wxp-card {
	background: var(--wx-card); border: 1px solid var(--wx-line); border-radius: 12px;
	padding: 18px 16px; margin: 0 0 16px;
}
.txk-wxp .txk-wxp-h {
	font-family: var(--txk-font-ui, sans-serif); font-size: .78rem; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--wx-muted); margin: 0 0 12px; line-height: 1.2;
}
.txk-wxp-note { font-size: .8rem; line-height: 1.45; color: var(--wx-muted); margin-top: 12px !important; }
.txk-wxp-credit { font-size: .78rem; line-height: 1.5; color: var(--wx-muted); margin: 4px 2px 0 !important; }

/* icons */
.txk-wxp-ico { width: 32px; height: 32px; flex: none; display: block; }
.txk-wxp-ico--xl { width: 84px; height: 84px; }

/* alerts */
.txk-wxp-alerts { margin: 0 0 16px; display: grid; gap: 8px; scroll-margin-top: 90px; }
.txk-wxp-alert { border-radius: 10px; border: 1px solid #e6c36a; border-left-width: 6px; background: #fff8e1; color: #3d2f00; }
.txk-wxp-alert--watch { border-color: #f0a05a; background: #fff1e3; color: #4a2500; }
.txk-wxp-alert--warning { border-color: #b3261e; background: #b3261e; color: #fff; }
.txk-wxp-alert--tornado { border-color: #8e0b1f; background: #8e0b1f; color: #fff; }
.txk-wxp-alert summary {
	display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
	padding: 12px 14px; cursor: pointer; list-style: none;
}
.txk-wxp-alert summary::-webkit-details-marker { display: none; }
.txk-wxp-alert__event { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.txk-wxp-alert__meta { grid-column: 1; font-size: .88rem; line-height: 1.35; opacity: .92; }
.txk-wxp-alert__more { grid-column: 2; grid-row: 1 / span 2; font-size: .8rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.txk-wxp-alert[open] .txk-wxp-alert__more { visibility: hidden; }
.txk-wxp-alert__body { padding: 0 14px 14px; font-size: .95rem; line-height: 1.55; }
.txk-wxp-alert__body p + p { margin-top: .7em; }
.txk-wxp-alert__head { font-weight: 700; }
.txk-wxp-alert__src { font-size: .8rem; opacity: .85; }

/* right now */
.txk-wxp-now__main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.txk-wxp-now__temp {
	font-family: var(--txk-font-head, Georgia, serif); font-size: 4.4rem; font-weight: 700; line-height: 1;
	letter-spacing: -.02em; display: flex; align-items: flex-start;
}
.txk-wxp-now__temp sup { font-family: var(--txk-font-ui, sans-serif); font-size: 1.15rem; font-weight: 600; color: var(--wx-muted); margin: .55rem 0 0 2px; letter-spacing: 0; top: 0; }
.txk-wxp-now__meta { flex: 1 1 150px; min-width: 150px; }
.txk-wxp-now__text { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.txk-wxp-now__feels, .txk-wxp-now__hl { font-size: .95rem; line-height: 1.5; color: var(--wx-muted); }
.txk-wxp-now__hl strong { color: var(--wx-text); }
.txk-wxp-stats {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 16px 0 0;
	background: var(--wx-line); border: 1px solid var(--wx-line); border-radius: 10px; overflow: hidden;
}
.txk-wxp-stats > div { background: var(--wx-card); padding: 9px 12px; }
.txk-wxp-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.txk-wxp-stats dt { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wx-muted); margin: 0; }
.txk-wxp-stats dd { font-size: 1rem; font-weight: 600; margin: 1px 0 0; }
.txk-wxp-now__fc { font-size: 1rem; line-height: 1.55; margin-top: 14px !important; }

/* sponsor */
.txk-wxp-sponsor { margin: 0 0 16px; text-align: center; }
.txk-wxp-sponsor__label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-muted); margin-bottom: 6px; }
.txk-wxp-sponsor:has(broadstreet-zone:empty) { display: none; }

/* next 24 hours */
.txk-wxp-hourly { padding-right: 0; }
.txk-wxp-hours {
	display: flex; gap: 0; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto;
	scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.txk-wxp-hours:focus-visible { outline: 2px solid var(--wx-link); outline-offset: 2px; }
.txk-wxp-hour {
	flex: 0 0 62px; display: flex; flex-direction: column; align-items: center; gap: 5px;
	padding: 2px 0; scroll-snap-align: start; text-align: center;
}
.txk-wxp-hour--newday { border-left: 1px solid var(--wx-line); }
.txk-wxp-hour__t { font-size: .74rem; color: var(--wx-muted); white-space: nowrap; }
.txk-wxp-hour__t b { color: var(--wx-text); }
.txk-wxp-hour__temp { font-size: 1.1rem; font-weight: 700; }
.txk-wxp-hour__pop { font-size: .78rem; font-weight: 700; color: var(--wx-pop); }
.txk-wxp-hour__pop.is-low, .txk-wxp-day__pop.is-low { color: var(--wx-muted); font-weight: 400; opacity: .7; }
.txk-wxp-hour__wind { font-size: .72rem; color: var(--wx-muted); white-space: nowrap; }

/* 7-day */
.txk-wxp-day { border-top: 1px solid var(--wx-line); }
.txk-wxp-daily .txk-wxp-h + .txk-wxp-day { border-top: 0; }
.txk-wxp-day summary {
	display: grid; grid-template-columns: 4.1rem 32px 2.6rem 2.1rem minmax(40px, 1fr) 2.1rem;
	align-items: center; gap: 8px; padding: 9px 0; cursor: pointer; list-style: none;
}
.txk-wxp-day summary::-webkit-details-marker { display: none; }
.txk-wxp-day summary:focus-visible { outline: 2px solid var(--wx-link); outline-offset: 2px; border-radius: 4px; }
.txk-wxp-day__name { font-weight: 700; font-size: .98rem; line-height: 1.15; }
.txk-wxp-day__name small { display: block; font-weight: 400; font-size: .72rem; color: var(--wx-muted); }
.txk-wxp-day__short { display: none; font-size: .92rem; color: var(--wx-muted); }
.txk-wxp-day__pop { font-size: .82rem; font-weight: 700; color: var(--wx-pop); text-align: right; }
.txk-wxp-day__lo { color: var(--wx-muted); text-align: right; font-weight: 600; }
.txk-wxp-day__hi { font-weight: 700; }
.txk-wxp-day__bar { position: relative; height: 6px; border-radius: 3px; background: var(--wx-bar); }
.txk-wxp-day__bar i { position: absolute; top: 0; bottom: 0; min-width: 6px; border-radius: 3px; background: linear-gradient(90deg, #4db2ec, #ff9000); }
.txk-wxp-day__detail { padding: 0 0 12px; font-size: .95rem; line-height: 1.55; }
.txk-wxp-day__detail p + p { margin-top: .5em; }
.txk-wxp-day[open] summary { padding-bottom: 6px; }

/* radar */
.txk-wxp-radar { padding-left: 0; padding-right: 0; padding-bottom: 14px; overflow: hidden; }
.txk-wxp-radar > .txk-wxp-h, .txk-wxp-radar > .txk-wxp-note, .txk-wxp-radar__bar, .txk-wxp-legend { margin-left: 16px; margin-right: 16px; }
.txk-wxp-map { position: relative; height: min(62vh, 520px); min-height: 340px; background: var(--wx-soft); z-index: 0; }
.txk-wxp-map__wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--wx-muted); font-size: .9rem; }
.txk-wxp-map .leaflet-container { font-family: inherit; }
.txk-wxp-map .wxp-base { filter: grayscale(1) contrast(.92) brightness(1.04); }
.txk-wxp-map__hint {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; pointer-events: none;
	background: rgba(20, 24, 28, .86); color: #fff; font-size: .9rem; font-weight: 600; padding: 10px 14px; border-radius: 8px;
	opacity: 0; transition: opacity .2s; text-align: center; max-width: 80%;
}
.txk-wxp-map__hint.is-on { opacity: 1; }
.txk-wxp-here { width: 12px; height: 12px; border-radius: 50%; background: #1d70a2; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(29, 112, 162, .4); }
.txk-wxp-radar__bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.txk-wxp-btn {
	font: 700 .85rem/1 var(--txk-font-ui, sans-serif); padding: 10px 14px; min-width: 68px; min-height: 40px; border-radius: 8px; cursor: pointer;
	background: var(--wx-text); color: var(--wx-card); border: 1px solid var(--wx-text);
}
.txk-wxp-btn--ghost { background: transparent; color: var(--wx-text); border-color: var(--wx-bar); margin-left: auto; }
.txk-wxp-btn:disabled { opacity: .45; cursor: default; }
.txk-wxp-radar__range { flex: 1 1 120px; min-width: 100px; accent-color: #1d70a2; height: 28px; }
.txk-wxp-radar__time { font-size: .88rem; font-weight: 700; min-width: 5.2em; font-variant-numeric: tabular-nums; }
.txk-wxp-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; font-size: .74rem; color: var(--wx-muted); }
.txk-wxp-legend i { width: 110px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #04e9e7, #019ff4, #02fd02, #01c501, #fdf802, #fd9500, #fd0000, #bc0000, #f800fd); }
.txk-wxp-legend .p { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; margin-left: 6px; }
.txk-wxp-legend .k { width: 14px; height: 10px; border: 2px solid; border-radius: 2px; }
.txk-wxp-legend .k--tor { border-color: #e10000; } .txk-wxp-legend .k--svr { border-color: #f0a000; } .txk-wxp-legend .k--ffw { border-color: #17a339; }

/* forecasters + stories */
.txk-wxp-afd__key { margin: 0; padding-left: 1.15em; font-size: 1rem; line-height: 1.55; }
.txk-wxp-afd__key li + li { margin-top: .45em; }
.txk-wxp-afd__full { margin-top: 14px; border-top: 1px solid var(--wx-line); padding-top: 12px; }
.txk-wxp-afd__full summary { cursor: pointer; font-weight: 700; font-size: .92rem; color: var(--wx-link); }
.txk-wxp-afd__full h3 { font-family: var(--txk-font-ui, sans-serif); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wx-muted); margin: 16px 0 6px; }
.txk-wxp-afd__full p { font-size: .97rem; line-height: 1.6; }
.txk-wxp-afd__full p + p { margin-top: .8em; }
.txk-wxp-stories ul { list-style: none; margin: 0; padding: 0; }
.txk-wxp-stories li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wx-line); }
.txk-wxp-stories li:first-child { border-top: 0; padding-top: 0; }
.txk-wxp-stories a { font-family: var(--txk-font-head, Georgia, serif); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--wx-text); text-decoration: none; }
.txk-wxp-stories a:hover { color: var(--wx-link); text-decoration: underline; }
.txk-wxp-stories time { flex: none; font-size: .78rem; color: var(--wx-muted); }

@media (min-width: 700px) {
	.txk-wxp-card { padding: 22px 24px; }
	.txk-wxp-hourly { padding-right: 0; }
	.txk-wxp-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: center; }
	.txk-wxp-now > .txk-wxp-h, .txk-wxp-now > .txk-wxp-now__fc, .txk-wxp-now > .txk-wxp-note { grid-column: 1 / -1; }
	.txk-wxp-stats { margin-top: 0; }
	.txk-wxp-now__temp { font-size: 5.4rem; }
	.txk-wxp-ico--xl { width: 104px; height: 104px; }
	.txk-wxp-hour { flex-basis: 70px; }
	.txk-wxp-day summary { grid-template-columns: 5.2rem 32px minmax(0, 1.3fr) 2.8rem 2.2rem minmax(80px, 1fr) 2.2rem; gap: 12px; }
	.txk-wxp-day__short { display: block; }
	.txk-wxp-radar { padding-left: 0; padding-right: 0; }
	.txk-wxp-radar > .txk-wxp-h, .txk-wxp-radar > .txk-wxp-note, .txk-wxp-radar__bar, .txk-wxp-legend { margin-left: 24px; margin-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { .txk-wxp-map__hint { transition: none; } }

/* ===== dark: explicit toggle ===== */
:root[data-color-mode*="dark"] .txk-wxp {
	--wx-text: #e6eaee; --wx-muted: #9aa6b2; --wx-line: #2c333b; --wx-card: #1e2329; --wx-soft: #232a31;
	--wx-link: #5cb8f0; --wx-bar: #39424c; --wx-cloud: #7f8b97; --wx-fog: #7f8b97; --wx-moon: #b9c6d6; --wx-pop: #5cb8f0;
}
:root[data-color-mode*="dark"] .txk-wxp-alert--advisory { background: #3a3110; border-color: #8a7420; color: #f6e9b8; }
:root[data-color-mode*="dark"] .txk-wxp-alert--watch { background: #40280f; border-color: #a8622a; color: #ffdcbd; }
:root[data-color-mode*="dark"] .txk-wxp-map .wxp-base { filter: invert(1) hue-rotate(180deg) grayscale(.75) brightness(.92) contrast(.9); }
/* ===== dark: OS-aware mirror (keep in sync with the block above) ===== */
@media (prefers-color-scheme: dark) {
	:root[data-color-mode*="os-default"] .txk-wxp {
		--wx-text: #e6eaee; --wx-muted: #9aa6b2; --wx-line: #2c333b; --wx-card: #1e2329; --wx-soft: #232a31;
		--wx-link: #5cb8f0; --wx-bar: #39424c; --wx-cloud: #7f8b97; --wx-fog: #7f8b97; --wx-moon: #b9c6d6; --wx-pop: #5cb8f0;
	}
	:root[data-color-mode*="os-default"] .txk-wxp-alert--advisory { background: #3a3110; border-color: #8a7420; color: #f6e9b8; }
	:root[data-color-mode*="os-default"] .txk-wxp-alert--watch { background: #40280f; border-color: #a8622a; color: #ffdcbd; }
	:root[data-color-mode*="os-default"] .txk-wxp-map .wxp-base { filter: invert(1) hue-rotate(180deg) grayscale(.75) brightness(.92) contrast(.9); }
}

/* map lines: colors here (not inline) so dark mode can flip them */
.txk-wxp-map path.wxp-line { stroke: #55606b; }
.txk-wxp-map path.wxp-line--state { stroke: #2b3238; }
:root[data-color-mode*="dark"] .txk-wxp-map path.wxp-line { stroke: #b4bec8; }
:root[data-color-mode*="dark"] .txk-wxp-map path.wxp-line--state { stroke: #e6eaee; }
@media (prefers-color-scheme: dark) {
	:root[data-color-mode*="os-default"] .txk-wxp-map path.wxp-line { stroke: #b4bec8; }
	:root[data-color-mode*="os-default"] .txk-wxp-map path.wxp-line--state { stroke: #e6eaee; }
}

/* page title lines up with the 920px weather column */
.txk-weather-page .hero-section .entry-header { max-width: 920px; margin-left: auto; margin-right: auto; }