/* CSS file v5 */
body {
	color: black;
	background-color: #041004;
	font-family: system-ui, sans-serif;
}
#background {
	background-color: #041004;
	min-height: 1000px;
}
#page {
	margin: 0px auto;
	max-width: 1440px;
}

/******************Header***************************/
#header {
	color: #EFEFFB;
	width: 100%;
	background-color:#0B6121;
}
#banner {
	width: 100%;
	height: 150px;
	display: flex;
	justify-content: space-between;
}
#banner-main {
	background-image: url('/static-images/banner_site.jpg');
	background-repeat: no-repeat;
	color: #d3f4d0;
	width: 70%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	padding-bottom: 2rem;
}
#banner-left {
	background-image: url('/static-images/box_site.jpg');
	background-repeat: no-repeat;
	width: 16%;
}
#banner-right {
	background-image: url('/static-images/anem_site.jpg');
	width: 15%;
}
#banner-nw3 {
	font-size: 5rem;
	margin-left: 3rem;
	margin-right: 1rem;
	display: flex;
}

#banner-location {
	font-size: 2rem;
	margin-right: 3rem;
	line-height: 2.5rem;
}
#banner-location-comma {
	display: none;
}
#banner-nw3 .nw3 {
	font-weight: 600;
	color: #a9ffa3;
}

#sub-header {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: #0a2801;
	font-size: 1.2rem;
	color: white;
}
#sub-header > div {
	margin: 0;
	padding: 6px;
	display: inline-block;
}

@media only screen and (max-width: 1024px) {
	#banner-nw3 {
		font-size: 4rem;
		margin-left: 1rem;
		margin-right: 0.5rem;
	}
	#banner-location {
		font-size: 2rem;
		margin-right: 0.5rem;
		line-height: 2rem;
	}
	#banner-main {
	}
	#banner-left {
		width: 18%;
	}
	#banner-right {
		width: 12%;
	}
}
@media only screen and (max-width: 834px) {
	#banner-nw3 {
		font-size: 3.5rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}
	#banner-location {
		font-size: 1.8rem;
		margin-right: 0.5rem;
		line-height: 2rem;
		margin-top: 1.4rem;
	}
	#banner-location > div {
		display: inline-block;
	}
	#banner-main {
		flex-wrap: wrap;
		width: 75%;
	}
	#banner-left {
		width: 25%;
	}
	#banner-right {
		width: 0%;
	}
}
@media only screen and (max-width: 486px) {
	#banner-left {
		width: 0%;
	}
	#banner-main {
		width: 100%;
	}
	#banner-location {
		font-size: 1.6rem;
	}
}

/****************** Nav bar ***************************/
#nav-wrapper {
	display: flex;
}
#nav {
	width: 175px;
	background-color: #E3F7E1;
	font-size: 1.1rem;
	flex-shrink: 0;
}
#main {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	padding: 0.5rem 1rem;
	background-color:#F2FAFD;
}
.detail-page #main {
	overflow-x: hidden;
}

/* Compact menu toggle: shown inside the sub-header on phones/tablets only. */
#nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	flex: 0 0 auto;
	width: auto;
	min-width: 2.1rem;
	height: 2rem;
	padding: 0.35rem 0.45rem;
	border: 1px solid rgba(211, 244, 208, 0.45);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.18);
	color: #d3f4d0;
	font: inherit;
	cursor: pointer;
	margin: 2px 6px 2px 0;
}
.updated-short {
	display: none;
}
#nav-toggle:hover,
#nav-toggle:focus-visible {
	background: rgba(0, 0, 0, 0.28);
	outline: 2px solid #a9ffa3;
	outline-offset: 2px;
}
.nav-toggle-icon {
	display: block;
	width: 1.15rem;
	height: 0.85rem;
	background:
		linear-gradient(#d3f4d0, #d3f4d0) 0 0 / 100% 2px no-repeat,
		linear-gradient(#d3f4d0, #d3f4d0) 0 50% / 100% 2px no-repeat,
		linear-gradient(#d3f4d0, #d3f4d0) 0 100% / 100% 2px no-repeat;
}
.nav-open .nav-toggle-icon {
	height: 1rem;
	background:
		linear-gradient(#d3f4d0, #d3f4d0) 50% 50% / 100% 2px no-repeat,
		linear-gradient(#d3f4d0, #d3f4d0) 50% 50% / 100% 2px no-repeat;
	transform: rotate(45deg);
}
.nav-open .nav-toggle-icon::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(#d3f4d0, #d3f4d0) 50% 50% / 100% 2px no-repeat;
	transform: rotate(90deg);
}
#nav-backdrop {
	display: none;
}

#nav a {
	color: rgb(64,64,64);
	background-color: transparent;
	text-decoration: none;
	display: block;
	padding: 0.5rem 0 0.5rem 0.6rem;
}
#nav .nav-section-body > p.subhead {
	padding: 0.5rem 0 0 0.6rem;
	margin: 0;
	font-weight: 600;
}
#nav a.subhead-item {
	padding: 0.5rem 0 0.5rem 1.2rem;
}

#nav a:hover {
	color: #357C23;
	background-color: rgba(169,197,204,0.5);
}

#nav .nav-heading {
	display: block;
	width: 100%;
	margin: 1rem 0 0.2rem 0;
	padding: 0.35rem 0.7rem;
	border: 0;
	background: transparent;
	text-align: left;
	font: inherit;
	font-weight: bold;
	font-size: 1.2rem;
	color: #0B614B;
	cursor: default;
}
#nav .nav-section:first-child .nav-heading {
	margin-top: 0.4rem;
}

#nav .curr {
	background-color: rgba(19,197,10,0.11);
	font-weight: bold;
	padding: 0.6rem;
}

#nav-settings {
	margin: 1rem 0.65rem 0;
	padding: 0.45rem 0 0;
	border-top: 1px solid #c5d9c8;
}
#nav-settings > p {
	font-weight: bold;
	font-size: 0.7rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #60776a;
	margin: 0 0 0.3rem;
	padding: 0;
}
#nav-settings form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.2rem;
}
#nav-settings label.unit-option {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 1.8rem;
	padding: 0.2rem 0.35rem;
	box-sizing: border-box;
	border: 1px solid #c8d8cb;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.55);
	color: #315f50;
	font-size: 0.76rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
#nav-settings label.unit-option:hover {
	background: #e5f0e7;
	border-color: #9ebba5;
}
#nav-settings label.unit-option.active {
	background: #d3e8d8;
	border-color: #89ad92;
	color: #164b3b;
	box-shadow: none;
}
#nav-settings label.unit-option:focus-within {
	outline: 2px solid #15866A;
	outline-offset: 2px;
}
#nav-settings .unit-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/******************Info boxes***************************/
.statusBox {
	font-size: 105%;
	width: 90%;
	margin: 2px 4px 3px 4px;
	padding: 0.4em;
	text-align: center;
}

.warning {
	color: #310;
	background-color:#f4afb1;
	border: 2px solid #d58;
}

.info {
	color: #031;
	background-color:#aff4b1;
	border: 1px solid #7ca;
}

/******************Main***************************/
#main a {
	color: #0B610B;
	background-color: transparent;
	text-decoration: underline;
}

#main form {
	display: inline;
}

#main h1 {
	color: #15866A;
	font-size: 1.8rem;
	font-weight: 600;
	margin: 0.5em 0.3em 0.3em 0.3em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	border-top: 1px solid rgb(60,210,40);
}

#main h2 {
	color: #168843;
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0.8rem 0 0.4rem 0.6rem;
}

#main h3 {
	color: #05664A;
	background-color: transparent;
	font-size: 1.2rem;
	font-weight: 600;
	margin-left: 0.5em;
}

#main a:hover {
	text-decoration: none;
}
#main a.arrow {
	text-decoration: none;
	color: #b87;
	font-size: 130%;
}
#main a.arrow:hover {
	color: #f33;
}
#main a.hidden-link {
	text-decoration: none;
	color: inherit;
	padding: 0.3em;
}

img, video {
	max-width: 100%;
	height: auto;
}
.center {
	display: flex;
	align-items: center;
	flex-direction: column;
}
abbr {
	border-bottom: 1px dotted;
}
p {
	margin: 1rem 0;
	padding: 0;
}

/* Blog archive: legacy markup uses one post per single-cell table row. */
.news-posts {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
.news-posts td {
	min-width: 0;
	padding: 0;
	overflow-wrap: anywhere;
}
.news-posts img,
.news-posts video {
	height: auto;
}
dt {
	font-size: 110%;
}
dl {
	margin: 0.7em;
}
li {
	margin: 0.2em 0;
}
button {
	margin: 0.6em;
	display: block;
	padding: 0.3em;
}
select {
	 padding: 0.3rem;
}


/************* KV table ************/
.kv-table {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	margin: 0.5rem 0 2rem 0;
	max-width: 650px;
}
.kv-table > div {
	display: contents;
}
.kv-table > div > div {
	padding: 0.6rem 0.5rem;
}
.kv-table > div > div:nth-of-type(1) {
	font-weight: 600;
}
.rowdark > div {
	background: #e8f0ea
}
.empty > div {
	padding: 0.3rem;
}

@media screen and (max-width: 900px) {
    table .hide-small {
        display: none;
    }
}

/****************** Charts ***************************/
div.charts {
	display: flex;
	flex-wrap: wrap;
	margin: 0.5em;
}
div.charts-with-title {
	display: flex;
	flex-wrap: wrap;
	margin: 0.5em;
}
div.charts > img {
	margin: 0.5em;
}
div.charts-with-title > img {
	margin: 0.5em;
}

/* wx3 live dashboard: variable + range toggles, main + multi-var charts */
.wx3-live-bar {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0.3rem 0.3rem 0.5rem;
	padding: 0.45rem;
	background: #f4f7f5;
	border: 1px solid #d6e2d8;
	border-radius: 6px;
}
.wx3-live-control {
	min-width: 0;
}
.wx3-live-control-vars {
	flex: 1 1 auto;
}
.wx3-live-control-range {
	flex: 0 0 auto;
}
.wx3-live-label {
	margin: 0 0.1rem 0.25rem;
	color: #5a7268;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.wx3-live-vars {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.2rem;
	flex: 1 1 auto;
	overflow-x: auto;
}
.wx3-live-vars button {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	cursor: pointer;
	margin: 0;
	padding: 0.2rem 0.45rem;
	white-space: nowrap;
	background: #eef5ef;
	color: #15604c;
	border: 1px solid #d6e2d8;
	border-radius: 8px;
	font: inherit;
	font-size: 0.85rem;
}
.wx3-live-vars button img {
	display: block;
	width: 22px;
	height: 22px;
}
.wx3-live-vars button:hover { background: #e0eee3; }
.wx3-live-vars button.active {
	background: #052e24;
	color: #fff;
	border-color: #15866A;
}
.wx3-live-range {
	display: flex;
	gap: 0.1rem;
	flex: 0 0 auto;
}
.wx3-live-range button {
	font: inherit;
	cursor: pointer;
	margin: 0;
	padding: 0.2rem 0.5rem;
	background: #fff;
	color: #15604c;
	border: 1px solid #d6e2d8;
	border-radius: 5px;
}
.wx3-live-range button:hover { background: #eef5ef; }
.wx3-live-range button.active {
	background: #052e24;
	color: #fff;
	border-color: #15866A;
}
@media only screen and (max-width: 1100px) {
	.wx3-live-bar {
		flex-direction: column;
		gap: 0.65rem;
	}
	.wx3-live-control {
		width: 100%;
	}
	.wx3-live-vars {
		flex-wrap: wrap;
		overflow: visible;
	}
}
@media only screen and (max-width: 700px) {
	.wx3-live-bar {
		margin-right: 0;
		margin-left: 0;
		padding: 0.55rem;
	}
	.wx3-live-vars {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.3rem;
		overflow: visible;
	}
	.wx3-live-vars button {
		justify-content: flex-start;
		width: 100%;
		min-height: 2.75rem;
		padding: 0.35rem 0.5rem;
		white-space: normal;
		text-align: left;
	}
	.wx3-live-range {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.3rem;
		width: 100%;
	}
	.wx3-live-range button {
		min-height: 2.5rem;
		padding: 0.35rem 0.25rem;
	}
}
.wx3-chart {
	background: #fff;
	border: 1px solid #d6e2d8;
	border-radius: 6px;
	margin: 0.3rem 0.3rem 0.6rem;
	min-width: 0;
}
.wxchart-loading,
.wx3-chart.wxchart-loading {
	opacity: 0.4;
	filter: grayscale(0.4);
	pointer-events: none;
	background: #eceff0;
	transition: opacity 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.wx3-multi {
	display: flex;
	flex-direction: row;
	gap: 0.6rem;
	margin: 0.4rem 0 0.8rem;
}
.wx3-multi > .wx3-chart,
.wx3-multi > .wx3-chart-wrap {
	flex: 1 1 0;
	width: 50%;
	min-width: 0;
}
.wx3-multi > .wx3-chart-wrap > h3 {
	margin: 0.4rem 0 0.25rem;
	font-size: 1.05rem;
	font-weight: normal;
}
@media only screen and (max-width: 1100px) {
	.wx3-multi { flex-direction: column; }
	.wx3-multi > .wx3-chart,
	.wx3-multi > .wx3-chart-wrap { width: auto; }
}

/* Trend charts: pair as 2-up so 4 fixed charts form a tidy 2×2 */
div.charts > .wxchart {
	flex: 1 1 calc(50% - 0.8rem);
	min-width: min(300px, 100%);
	box-sizing: border-box;
}

/* Selectable trend chart: LHS selector (~1/3) + chart (~2/3) */
div.charts > .wxsel-chart,
div.charts > .wxsel-wrap {
	flex: 1 1 100%;
	width: 100%;
}
.wxsel-wrap {
	margin: 0.5em 0.3rem;
}
.wxsel-wrap .wxsel-chart {
	margin: 0;
}
.wxsel-heading {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #222;
}
.wxsel-chart {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0.45rem;
	margin: 0.5em 0.3rem;
}
.wxsel-chart .wxchart {
	flex: 2 1 0;
	min-width: 0;
	width: auto;
	margin: 0;
}
.wxsel-chart.wxsel-chart-selector-below {
	flex-direction: column;
}
.wxsel-chart.wxsel-chart-selector-below .wxchart {
	width: 100%;
}
.wxsel-chart.wxsel-chart-selector-below .wxsel-panel {
	width: 100%;
	max-width: none;
}
.wxsel-panel {
	flex: 1 1 0;
	min-width: 9rem;
	max-width: 15rem;
	order: 0;
	background: #f4f7f5;
	border: 1px solid #d6e2d8;
	border-radius: 6px;
	padding: 0.35rem 0.35rem 0.4rem;
	box-sizing: border-box;
}
.wxsel-label {
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #5a7268;
	margin: 0.35rem 0.1rem 0.15rem;
}
.wxsel-label:first-child { margin-top: 0; }
.wxsel-groups,
.wxsel-subtypes,
.wxsel-agg,
.wxsel-normals {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
}
.wxsel-groups button,
.wxsel-subtypes button,
.wxsel-agg button,
.wxsel-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.15;
	padding: 0.2rem 0.3rem;
	color: #15604c;
	background: #fff;
	border: 1px solid #c5d6cb;
	border-radius: 4px;
	cursor: pointer;
	margin: 0.2em;
}
.wxsel-groups button img {
	width: 19px;
	height: 19px;
	object-fit: contain;
	flex: 0 0 auto;
}
.wxsel-groups button:hover,
.wxsel-subtypes button:hover,
.wxsel-agg button:hover,
.wxsel-toggle:hover:not(:disabled) {
	background: #e8f2eb;
}
.wxsel-groups button.active,
.wxsel-subtypes button.active,
.wxsel-agg button.active,
.wxsel-toggle.active {
	background: #052e24;
	border-color: #15866A;
	color: #fff;
}
.wxsel-toggle:disabled,
.wxsel-toggle.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
@media only screen and (max-width: 800px) {
	.wxsel-chart { flex-direction: column; }
	.wxsel-panel { max-width: none; }
}

/* Full Chart Viewer (charts.php): slightly wider panel + period selects */
.wxsel-viewer {
	margin: 0.6rem 0 1rem;
	min-height: 28rem;
}
.wxsel-viewer .wxsel-panel {
	max-width: 17.5rem;
	min-width: 11rem;
}
.wxsel-scale {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
}
.wxsel-scale button {
	display: inline-flex;
	align-items: center;
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.15;
	padding: 0.2rem 0.3rem;
	margin: 0.2em;
	color: #15604c;
	background: #fff;
	border: 1px solid #c5d6cb;
	border-radius: 4px;
	cursor: pointer;
}
.wxsel-scale button:hover { background: #e8f2eb; }
.wxsel-scale button.active {
	background: #052e24;
	border-color: #15866A;
	color: #fff;
}
.wxsel-period {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.wxsel-field {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	font-size: 0.72rem;
	color: #5a7268;
}
.wxsel-field span {
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.65rem;
}
.wxsel-panel select.wxsel {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 0.82rem;
	padding: 0.22rem 0.3rem;
	color: #15604c;
	background: #fff;
	border: 1px solid #c5d6cb;
	border-radius: 4px;
}
.wxsel-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
}
/* Our display:flex rules otherwise override the UA [hidden] stylesheet. */
.wxsel-field[hidden],
.wxsel-agg-wrap[hidden],
.wxsel-toggle[hidden],
.wxsel-options [hidden],
#gv-var-wrap[hidden] {
	display: none !important;
}
.wxsel-panel .gv-vars {
	flex-wrap: wrap;
	overflow: visible;
}
.wxsel-panel .gv-vars button {
	font-size: 0.78rem;
	padding: 0.15rem 0.35rem;
}
.wxsel-panel .gv-vars button img {
	width: 18px;
	height: 18px;
}
.wxsel-panel .gv-num button {
	min-width: 1.8rem;
	padding: 0.15rem 0.3rem;
}
.wxsel-viewer .wxchart {
	min-height: 28rem;
}
@media only screen and (max-width: 1100px) {
	.wxsel-graphviewer {
		flex-direction: column;
	}
	.wxsel-graphviewer .wxsel-panel {
		width: 100%;
		max-width: none;
	}
	.wxsel-graphviewer .wxchart {
		width: 100%;
	}
}
#cv-disclaimer.note {
	margin: 0.4rem 0.3rem 1rem;
	font-size: 0.85rem;
	color: #555;
}

/* Wind roses: equal-sized, wrap cleanly on narrow */
div.charts-with-title > div {
	flex: 1 1 280px;
	min-width: min(280px, 100%);
}
div.charts-with-title .wxchart {
	width: 100%;
}

/* Annual report (repyear) two-up charts */
.ry-chart {
	display: inline-block;
	vertical-align: top;
	width: 48%;
	min-width: min(340px, 100%);
	min-height: 240px;
	box-sizing: border-box;
}
.ry-chart-tall {
	min-height: 450px;
}
@media only screen and (max-width: 720px) {
	.ry-chart {
		width: 100%;
		min-width: 0;
	}
}

/* Legacy wide HTML tables: scroll rather than crush the page */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
.report-nav-table {
	width: 100%;
	table-layout: auto;
}
.report-nav-table td:first-child,
.report-nav-table td:last-child {
	white-space: nowrap;
}
.report-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	max-width: 100%;
	margin: 0.4rem 0 1rem;
	border: 1px solid #d5dbe0;
	background: #fff;
	box-sizing: border-box;
}
.report-table-scroll > table {
	width: 100% !important;
	min-width: 46rem;
	margin: 0;
}
.report-table-scroll-wide > table {
	min-width: 52rem;
}
@media only screen and (max-width: 700px) {
	.report-nav-table {
		font-size: 0.9rem;
	}
	.report-nav-table form {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.2rem;
	}
}

/* LEGACY */

.table-top {
	color: black;
	background-color: #DBEBEE;
	text-align: left;
	font-weight: bold;
	font-size: 110%;
}

.table-head {
	background-color: #BDCDF7;
	font-weight: bold;
	font-size: 123%;
}

.table-mainFoot {
	margin: 20px 1px;
	text-align: left;
	background-color: #E4FDE7;
	border: 1px solid #2D851B;
}

.table-mainFoot td {
	border: 1px solid #2D851B;

}


.tblfoot {
	font-weight: bold;
	background-color: #BDB;
}

.rightPad {
	margin-right: 19px;
}

.temp {
	color: #DF7401;
}
.rain {
	color: #3567EF;
}
.sun {
	color: #99910A;
}
.snow {
	color: #68acbd;
}
.wind {
	color: #ff3322;
}

.table-main {
	text-align: left;
}

.tdmain {
	padding: 10px;
}

.rowdark {
	color: black;
	background-color: rgb(233,232,225);
}
.rowdarkmain {
	color: black;
	background-color: rgba(233,233,233,0.4);
}
.rowlight {
	color: black;
	background-color: white;
}
.rowhlite {
	color: black;
	background-color: #CCF5B1;
}
.rowcurrent {
	color: black;
	background-color: #dce8f5;
}

.td12 {
	border: solid 1px rgb(157,172,238);
	text-align: center;
}

.td6 {
	border: solid 1px #9A83B0;
}

.table2 {
    border: solid 1px #2E9D30;
    text-align: left;
    padding: 2px 9px;
}

.table1 {
	border: 2px solid rgb(175,175,175);
	border-spacing: 0px;
	margin: 2px;
}

.td14 {
	border: solid 1px #D8CEF6;
	border-spacing: 1px;
	text-align: center;
}

.td10 {
	border: solid 1px rgb(157,231,157);
	border-spacing: 1px;
	text-align: center;
}

.td13 {
	border: solid 1px rgb(255,151,151);
	border-spacing: 1px;
	text-align: center;
}

.td4 {
	border: solid 1px #CAB99D;
	border-spacing: 2px;
	text-align: center;
}

.td16 {
	border: solid 1px #9F81F7;
	border-spacing: 1px;
	text-align: center;
}

.td18 {
	border: solid 1px #F2F5A9;
	border-spacing: 1px;
	text-align: center;
}

.td19 {
	border: solid 1px #CEF6F5;
	border-spacing: 1px;
	text-align: center;
}

.td20 {
	border: solid 1px #868A08;
	border-spacing: 1px;
	text-align: center;
}

.td4e {
	border-left: solid 2px rgb(143,208,246);
	border-spacing: 4px;
}

.td4C {
	color: #2E0A10;
	text-align: center;
	border: solid 1px #CAB99D;
}

.td10C {
	color: #2D851B;
	text-align: center;
	border: solid 1px #CAB99D;
}

.td14C {
	color: #DF7401;
	text-align: center;
	border: solid 1px #CAB99D;
}

.td12C {
	color: #3567EF;
	text-align: center;
	border: solid 1px #CAB99D;
}

.td13C {
	color: #DA1313;
	text-align: center;
	border: solid 1px #CAB99D;
}

.td16C {
	border: solid 1px #CAB99D;
	color: #7055BF;
	text-align: center;
}

.td18C {
	border: solid 1px #CAB99D;
	color: #69611A;
	text-align: center;
}
.td19C {
	border: solid 1px #CAB99D;
	color: #1B6A75;
	text-align: center;
}
.td20C {
	border: solid 1px #CAB99D;
	color: #626412;
	text-align: center;
}

.td-center {
	text-align: center;
}


.aboutTbl {
	margin: 0.8em;
}

.aboutTbl td {
	text-align: center;
	padding: 0.3em 0.8em;
	border: solid 1px #CAB99D;
	border-spacing: 1px;
}

.aboutTbl tfoot {
	background-color: #A5DF40;
	font-weight: bold;
}

.aboutTbl tbody tr:nth-child(2n) {
	background-color: white;
}
.aboutTbl td:first-child {
	font-weight: bold;
}

/******************Footer***************************/
#footer {
	background-color:#1D4825;
	color: white;
	padding: 1em 0 1em 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: flex-end;
}

#footer > div {
	margin: 0 1rem;
}

#footer a {
	text-decoration: none;
	color: white;
}

#footer a:hover {
	color: #c0f0b2;
}

/***************** Tabs **************/
.rank-tab-buttons {
    display: flex;
    justify-content: center;
}

.rank-tab-button {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    padding: 5px 10px;
    cursor: pointer;
}

.rank-tab-button:hover {
    background-color: #ddd;
}

.rank-tab {
    padding: 2px;
}

.sticky-head {
	position: sticky;
	top: 0;
	background-color: #c4e3ff;
}
.rank-tab.scroll {
	max-height: 75vh;
	overflow-y: auto
}


/****************** Page specific ***************************/
/* wx2: live cam resolution toggle */
.live-skycam {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	border: 1px solid #d6e2d8;
	border-radius: 4px;
}
.cam-res-toggle {
	font-size: 0.95rem;
}
.cam-bw-warn {
	color: #8a4b00;
	font-size: 0.9rem;
}
.cam-bw-warn[hidden] {
	display: none !important;
}

/* wx2 */
#skycam-selector {
	margin: 0.6em;
	display: flex;
	flex-wrap: wrap;
}

#skycam-selector span {
	background-color: #bbb;
	padding: 0.3em 0.6em;
	margin: 0.2em 0.5em;
	border: solid 1px #CAB99D;
	cursor: pointer;
}
#skycam-selector span:hover {
	background-color: #bbf;
}

#skycam-selector span.selected {
	font-weight: bold;
	color: white;
	background-color: #77f;
}

select.timelapse {
	margin-right: 1.5em;
	margin-left: 0.5em;
}

/* wx6 */
#sun-moon {
	background-color: #010401;
	color:#fefdf4;
	margin:1rem 0.6rem;
}
#sun-moon h3 {
	color: #AEDFD1;
	margin: 0.2rem 0 0 0;
}
#sun-moon > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 1rem;
	margin-bottom: 2rem;
}
#sun-moon > div > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
}
#earthviewer {
	margin: 1rem 0;
	max-width: 1000px;
}

/* wx5 */
#widgets {
	display: flex;
	flex-wrap: wrap;
	margin: 0.5rem 0;
}
#widgets > div {
	margin: 0.3rem;
	flex: 1 1 90%;
}
#wx-map {
	width: 100%;
	max-width: 1200px;
	height: 600px;
	margin-top: 1rem;
}
@media only screen and (max-width: 830px) {
	#wx-map {
		height: 420px;
	}
}
@media only screen and (max-width: 630px) {
	#wx-map {
		height: 360px;
	}
}


/* wx7 */
.galleries {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1.5rem;
}
@media only screen and (max-width: 834px) {
	.galleries {
		gap: 0.6rem;
	}
}
.galleries a {
	display: block;
	text-decoration: none;
}
.galleries span {
	display: block;
}
.galleries img {
	max-width: 100%;
	height: auto;
}

/* album viewers (albgen / wx_albgen) */
.album-viewer {
	text-align: center;
}
.album-overview-note {
	margin: 0.6rem 0 1rem;
}
.album-thumbs {
	justify-content: center;
	margin-bottom: 1rem;
}
.album-thumbs img {
	width: 200px;
	max-width: 100%;
	height: auto;
}
.album-img-full {
	max-width: 100%;
	width: auto;
	height: auto;
}
.album-main-link {
	display: inline-block;
	max-width: 100%;
	margin: 0.75rem 0;
}
.album-full-item {
	margin: 1.25rem 0 2rem;
}
.album-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.4rem 0.75rem;
	max-width: 40rem;
	margin: 0.75rem auto;
	padding: 0 0.25rem;
	font-size: 0.95rem;
}
.album-nav-mid {
	flex: 1 1 auto;
	text-align: center;
}
.album-strip-thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: 0.4rem;
	max-width: 40rem;
	margin: 0.75rem auto 1rem;
}
.album-strip-thumb {
	flex: 1 1 4.5rem;
	max-width: 7rem;
	min-width: 3.5rem;
}
.album-strip-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid transparent;
	box-sizing: border-box;
}
.album-strip-thumb.current {
	flex: 1.2 1 5.5rem;
}
.album-strip-thumb.current img {
	border-color: #0B610B;
	border-width: 4px;
}
.album-view-switch {
	margin: 1.25rem 0 0.5rem;
}
.album-view-switch form {
	display: inline-block;
	margin-top: 0.35rem;
}
.beaufort-noaa {
	text-align: center;
	margin: 0.75rem 0 1rem;
}
.beaufort-noaa img,
.clim365-graphs img {
	max-width: 100%;
	height: auto;
}
.clim365-graphs {
	text-align: center;
}

/* detailed data */
.detail-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: space-between;
}
.detail-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}
.detail-grid > * {
	min-width: 0;
}
.detail-chart-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 100%;
}
.current-latest-grid {
	grid-template-columns: minmax(17rem, 0.75fr) minmax(0, 1.25fr);
}
.current-latest-grid > .kv-table {
	align-self: start;
	width: 100%;
	max-width: none;
	min-width: 0;
}
.detail-graph,
.detail-graph .wxchart,
.detail-graph .wxsel-wrap,
.detail-graph .wxsel-chart {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
.detail-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	max-width: 100%;
	margin: 0.3rem 0 1rem;
	border: 1px solid #d5dbe0;
	background: #fff;
	box-sizing: border-box;
}
.detail-table-scroll > table {
	width: 100% !important;
	min-width: 28rem;
	margin: 0 !important;
}
.detail-table-scroll.detail-table-wide > table {
	min-width: 50rem;
}
/* Date labels under values in detail tables */
.wx-date {
	font-style: italic;
	font-weight: normal;
	color: #555;
	font-size: 0.92em;
}
@media only screen and (max-width: 1230px) {
	.detail-grid {
		grid-template-columns: 1fr;
	}
	.detail-chart-pair {
		grid-template-columns: minmax(0, 1fr);
	}
	.current-latest-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/****************** Home dashboard ***************************/
.home-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}
.home-head h1 {
	margin-bottom: 0;
}
.home-summary {
	order: -1; /* wide screens: live box on the left, title on the right */
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	background: #eef5ef;
	border: 1px solid #cfe3d2;
	border-radius: 6px;
	padding: 0.6rem 1rem;
	margin: 0.5rem 0.3rem;
	text-align: left;
}
.home-summary .home-report {
	line-height: 1.5;
}
.live-status {
	margin-top: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.4rem;
}
.live-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #999;
	flex: 0 0 auto;
}
.live-dot-ok {
	background: #2ecc40;
	box-shadow: 0 0 5px rgba(46, 204, 64, 0.8);
}
.live-dot-stale {
	background: #e0242b;
	box-shadow: 0 0 5px rgba(224, 36, 43, 0.8);
}
.live-meta {
	font-size: 0.85rem;
	color: #555;
}
.live-spinner {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 2px solid #cfe3d2;
	border-top-color: #2e8b57;
	flex: 0 0 auto;
	box-sizing: border-box;
	animation: live-spin 0.7s linear infinite;
}
@keyframes live-spin {
	to { transform: rotate(360deg); }
}
#main a.live-refresh {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s;
}
#main a.live-refresh:hover {
	color: #2e8b57;
	text-decoration: underline dotted;
}
#main a.live-refresh.live-refresh-busy {
	opacity: 0.6;
	cursor: default;
}
.home-forecast {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-wrap: wrap;
	flex: 0 0 auto;
}
.fcast-day {
	text-align: center;
	min-width: 96px;
}
.fcast-day img {
	width: 60px;
	height: auto;
	background-color: #CCCEEC;
	border-radius: 6px;
}
.fcast-label {
	font-weight: 600;
}
.fcast-desc {
	font-size: 0.85rem;
	color: #444;
}
.fcast-temps {
	margin-top: 0.1rem;
}
.fcast-pop {
	font-size: 0.85rem;
	color: #3567EF;
}
.fcast-more {
	margin-left: 0.4rem;
	font-size: 0.9rem;
}
.fcast-src {
	color: #666;
	font-weight: 400;
}
.fcast-src a {
	color: #666;
}

/****************** Forecast page (wx5) ***************************/
.fc-table-wrap {
	margin: 0.4rem 0 1rem;
	overflow-x: auto;
}
.fc-table img {
	width: 40px;
	height: auto;
	background-color: #CCCEEC;
	border-radius: 4px;
	vertical-align: middle;
}
.fc-table .fc-icon {
	width: 3.2rem;
	text-align: center;
}
.fc-credit {
	margin: 0.2rem 0 1rem;
	font-size: 0.85rem;
	color: #666;
}
.fc-meteogram {
	margin: 0.3rem 0 1.2rem;
}

.wx-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin: 0.5rem 0.3rem 1.5rem;
}
@media only screen and (max-width: 1150px) {
	.wx-cards { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 820px) {
	.wx-cards { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 520px) {
	.wx-cards { grid-template-columns: 1fr; }
}
/* Live cards live in their own AJAX-refreshed wrapper but join the parent grid */
.wx-live-cards {
	display: contents;
}
.wx-card {
	background: #fff;
	border: 1px solid #d6e2d8;
	border-top: 4px solid #15866A;
	border-radius: 6px;
	padding: 0.7rem 0.9rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.wx-card-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 1.1rem;
	color: #15866A;
	margin-bottom: 0.4rem;
}
.wx-card-icon {
	flex: 0 0 auto;
}
.wx-card-moon {
	border-radius: 50%;
	margin-left: -0.25rem;
}
.wx-card-head a.hidden-link {
	color: inherit;
	padding: 0;
}
.wx-card-now {
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1.1;
}
.wx-card-now .wx-rate {
	font-size: 0.85rem;
	font-weight: 400;
	color: #555;
	white-space: nowrap;
}

/* Live trend arrows */
.wx-arrow {
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: 0.08em;
}
.wx-arrow-up { color: #1f9d3b; }
.wx-arrow-down { color: #d23030; }
.wx-arrow-steady { color: #999; font-weight: 400; }

/* Flash a live value green (rose) or red (fell) when it changes on refresh */
.wx-card-now span[id^="var"] {
	border-radius: 4px;
	padding: 0 0.1em;
}
@keyframes wxFlashUp {
	from { background-color: rgba(31, 157, 59, 0.45); }
	to { background-color: transparent; }
}
@keyframes wxFlashDown {
	from { background-color: rgba(210, 48, 48, 0.40); }
	to { background-color: transparent; }
}
.wx-flash-up { animation: wxFlashUp 1.6s ease-out; }
.wx-flash-down { animation: wxFlashDown 1.6s ease-out; }
.wx-card-sub {
	color: #444;
	margin: 0.2rem 0 0.5rem;
}
.wx-card-rows {
	margin-top: 0.4rem;
	border-top: 1px dashed #dde8df;
}
.wx-card-rows > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.35rem 0.5rem;
	padding: 0.28rem 0;
	border-bottom: 1px dashed #eef3ef;
	white-space: normal;
}
.wx-card-rows > div:last-child {
	border-bottom: none;
}
.wx-card-rows .k {
	color: #567;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wx-card-rows .v {
	text-align: right;
	flex: 0 0 auto;
}
.wx-card-rows .wx-when {
	color: #889;
	font-weight: 400;
	font-size: 0.85em;
}
.wx-card-foot {
	margin-top: 0.5rem;
	font-size: 0.9rem;
}

/* Per-variable accent colours */
.wx-card-temp { border-top-color: #DF7401; }
.wx-card-temp .wx-card-head { color: #DF7401; }
.wx-card-humi { border-top-color: #2E9D30; }
.wx-card-humi .wx-card-head { color: #2E9D30; }
.wx-card-pres { border-top-color: #7055BF; }
.wx-card-pres .wx-card-head { color: #7055BF; }
.wx-card-wind { border-top-color: #DA1313; }
.wx-card-wind .wx-card-head { color: #DA1313; }
.wx-card-rain { border-top-color: #3567EF; }
.wx-card-rain .wx-card-head { color: #3567EF; }
.wx-card-sun { border-top-color: #B8860B; }
.wx-card-sun .wx-card-head { color: #B8860B; }
.wx-card-pm25 { border-top-color: #5B8A72; }
.wx-card-pm25 .wx-card-head { color: #5B8A72; }
.wx-card-pm25 .wx-card-now { font-size: 1.5rem; }
.wx-card-head .wx-card-label { color: inherit; }

/* Air-pollution DAQI status: small green/yellow/red indicator dot + label */
.daqi-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 1.4rem;
	line-height: 1.25;
	color: #1a1a1a;
}
.daqi-dot {
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	border-radius: 50%;
	background: #d9d9d9;
	flex: 0 0 auto;
}
.daqi-low .daqi-dot { background: #33a532; }
.daqi-mod .daqi-dot { background: #f2c500; }
.daqi-high .daqi-dot { background: #e02b1d; }
.daqi-vhigh .daqi-dot { background: #e02b1d; }
.daqi-unknown { color: #555; font-size: 1.1rem; }
/* Graduated per-band dot colours (DAQI 1-10): greens -> ambers -> reds -> maroon */
.daqi-b1 .daqi-dot { background: #7ac74f; }
.daqi-b2 .daqi-dot { background: #4caf2f; }
.daqi-b3 .daqi-dot { background: #2f8f1f; }
.daqi-b4 .daqi-dot { background: #f2d500; }
.daqi-b5 .daqi-dot { background: #f2a900; }
.daqi-b6 .daqi-dot { background: #f27900; }
.daqi-b7 .daqi-dot { background: #ef5350; }
.daqi-b8 .daqi-dot { background: #e02b1d; }
.daqi-b9 .daqi-dot { background: #a31515; }
.daqi-b10 .daqi-dot { background: #7d0023; }

/* Lower home row: interactive chart panel beside the webcam, half each */
.home-lower {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.8rem;
	align-items: start;
	margin: 0.3rem 0.3rem 1.5rem;
}
@media only screen and (max-width: 900px) {
	.home-lower { grid-template-columns: 1fr; }
}
.home-chart-panel { min-width: 0; }
.home-31d {
	margin: 0.5rem 0 1rem;
}
.home-31d .home-chart-more {
	margin-top: 0.25rem;
}

/* Webcam: fills the right half, capped at natural size */
.home-cam { min-width: 0; }
.home-cam-link {
	display: block;
}
.home-cam-link img {
	width: 100%;
	max-width: 700px;
	height: auto;
	display: block;
	border: 1px solid #d6e2d8;
	border-radius: 6px;
}

/* wx2: responsive 24hr thumbnail grid (max 6 per row) */
.cam-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
	margin: 0.5rem 0 0.8rem;
}
.cam-grid figure {
	margin: 0;
	text-align: center;
	font-size: 0.8rem;
}
.cam-grid-thumb {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	cursor: pointer;
}
.cam-grid-thumb:focus {
	outline: 2px solid #4a7c59;
	outline-offset: 2px;
}
.cam-grid img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	border: 1px solid #d6e2d8;
}
.cam-grid-thumb:hover img {
	border-color: #4a7c59;
}
.cam-grid figcaption {
	color: #444;
	padding-top: 2px;
}
.cam-grid-missing {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	background: #eef3ee;
	border: 1px dashed #cdd8ce;
	border-radius: 4px;
	color: #888;
	font-size: 0.75rem;
}
@media only screen and (max-width: 900px) {
	.cam-grid { grid-template-columns: repeat(4, 1fr); }
}
@media only screen and (max-width: 560px) {
	.cam-grid { grid-template-columns: repeat(3, 1fr); }
}

/* highreswebcam: fluid archive grid */
.hrw-form {
	margin: 0.4rem 0 0.8rem;
	line-height: 2;
}
.hrw-form-group {
	padding-left: 0.8em;
}
.hrw-form-group label {
	margin-right: 0.5em;
}
.hrw-nav {
	padding-left: 1.2em;
}
.hrw-heading {
	margin: 0.8rem 0 0.4rem;
	text-align: center;
}
.hrw-grid {
	display: grid;
	grid-template-columns: repeat(var(--hrw-cols, 4), minmax(0, 1fr));
	gap: 6px;
	margin: 0 0 1rem;
	width: 100%;
}
.hrw-grid figure {
	margin: 0;
	text-align: center;
	font-size: 0.85rem;
}
.hrw-thumb {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	cursor: pointer;
}
.hrw-thumb:focus {
	outline: 2px solid #4a7c59;
	outline-offset: 2px;
}
.hrw-grid img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	border: 1px solid #d6e2d8;
}
.hrw-thumb:hover img {
	border-color: #4a7c59;
}
.hrw-grid figcaption {
	color: #444;
	padding-top: 2px;
}
.hrw-summary {
	margin: 0.6rem 0 1rem;
	text-align: center;
}
.hrw-summary-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0.4rem auto;
	border: 1px solid #d6e2d8;
	border-radius: 4px;
}
.hrw-summary-note {
	color: #555;
	font-size: 0.9rem;
}
@media only screen and (max-width: 700px) {
	.hrw-grid { --hrw-cols: 2 !important; }
}

/* wx2 / highreswebcam: high-res frame modal */
body.cam-modal-open {
	overflow: hidden;
}
.cam-modal[hidden] {
	display: none !important;
}
.cam-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cam-modal-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(10, 20, 14, 0.78);
}
.cam-modal-dialog {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	max-width: min(96vw, 1400px);
	max-height: 94vh;
	padding: 0.5rem;
}
.cam-modal-figure {
	margin: 0;
	background: #0f1a12;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.cam-modal-figure img {
	display: block;
	max-width: min(90vw, 1280px);
	max-height: 85vh;
	width: auto;
	height: auto;
}
.cam-modal-figure figcaption {
	color: #e8f0ea;
	text-align: center;
	padding: 0.45rem 0.8rem 0.6rem;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}
.cam-modal-close {
	position: absolute;
	top: -0.2rem;
	right: 2.4rem;
	z-index: 2;
	border: none;
	background: transparent;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.2rem 0.4rem;
}
.cam-modal-nav {
	border: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.6rem;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 4px;
	cursor: pointer;
	flex-shrink: 0;
}
.cam-modal-nav:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.28);
}
.cam-modal-nav:disabled {
	opacity: 0.3;
	cursor: default;
}
@media only screen and (max-width: 700px) {
	.cam-modal-dialog {
		flex-wrap: wrap;
		justify-content: center;
	}
	.cam-modal-close {
		right: 0.4rem;
		top: -0.4rem;
	}
	.cam-modal-nav {
		order: 2;
	}
}

/* wx2: timelapse placeholder before a video is chosen */
#timelapse {
	min-height: 120px;
}
.timelapse-placeholder {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
.timelapse-placeholder img {
	display: block;
	width: 100%;
	max-width: 864px;
	height: auto;
	border: 1px solid #d6e2d8;
	border-radius: 4px;
}
.timelapse-placeholder-caption {
	position: absolute;
	left: 0;
	right: 0;
	/* Sit above the burned-in weather/timestamp strip on cam frames */
	bottom: 7%;
	padding: 0.45rem 0.8rem;
	background: rgba(12, 22, 16, 0.72);
	color: #f3f7f3;
	font-size: 0.9rem;
}

/* Interactive home-page chart */
.home-chart {
	background: #fff;
	border: 1px solid #d6e2d8;
	border-radius: 6px;
	margin: 0.3rem 0.3rem 0.6rem;
	height: 340px;
	min-width: 0;
}
@media only screen and (max-width: 600px) {
	.home-chart { height: 280px; }
}

/* Controls bar: variable tabs on the left, range toggle pushed right */
.home-chart-bar {
	display: flex;
	align-items: flex-start;
	gap: 0.3rem;
	margin: 0.3rem 0.3rem 0.5rem;
}

/* Variable tabs (icon-only) */
.home-chart-vars {
	display: flex;
	flex-wrap: wrap;
	gap: 0.05rem;
	flex: 1 1 auto;
}
.home-chart-vars button {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	margin: 0;
	padding: 0.1rem;
	background: #eef5ef;
	color: #15604c;
	border: 1px solid #d6e2d8;
	border-radius: 8px;
	line-height: 0;
}
.home-chart-vars button img {
	display: block;
	width: 30px;
	height: 30px;
}
.home-chart-vars button:hover { background: #e0eee3; }
.home-chart-vars button.active {
	background: #052e24;
	border-color: #15866A;
}

/* Time-range toggle */
.home-graph-controls {
	display: flex;
	gap: 0.1rem;
	flex: 0 0 auto;
}
.home-graph-controls button {
	font: inherit;
	cursor: pointer;
	margin: 0.2rem;
	padding: 0.2rem 0.45rem;
	background: #fff;
	color: #15604c;
	border: 1px solid #d6e2d8;
	border-radius: 5px;
}
.home-graph-controls button:hover { background: #eef5ef; }
.home-graph-controls button.active {
	background: #052e24;
	color: #fff;
	border-color: #15866A;
}

/* About-the-station info box */
.home-about {
	margin: 1rem 0.3rem;
	padding: 0.2rem 1rem;
	background: #eef5ef;
	border-left: 4px solid #15866A;
	border-radius: 4px;
}

.home-links {
	margin: 0.5rem 0.3rem 1rem;
	padding: 0.6rem 0.9rem;
	background: #eef5ef;
	border-radius: 6px;
	line-height: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.35rem;
}
.home-links a {
	margin: 0 0.25rem;
	white-space: nowrap;
}

/****************** Report button selectors (wxdataday) ***************************/
.report-sel {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0.4rem 0 0.9rem;
	padding: 0.45rem 0.55rem 0.55rem;
	background: #f4f7f5;
	border: 1px solid #d6e2d8;
	border-radius: 6px;
	box-sizing: border-box;
}
.report-sel-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.35rem;
}
.report-sel-row.report-sel-labelled {
	flex-direction: column;
	align-items: stretch;
	gap: 0.12rem;
}
.report-sel-row .wxsel-label {
	margin: 0.15rem 0.1rem 0;
}
.report-sel .wxsel-groups,
.report-sel .wxsel-subtypes,
.report-sel .wxsel-scale {
	flex: 1 1 auto;
	min-width: 0;
}
/* Chips share the same look as wxsel buttons (used for <a> / <span> / summary).
   #main a underlines links by default — beat that with higher specificity. */
#main .report-sel a.wxsel-chip,
#main .report-sel a.wxsel-chip:hover,
#main .report-sel a.wxsel-chip:focus,
#main .report-sel a.wxsel-chip:active,
#main .report-sel a.wxsel-chip.active,
.report-sel .wxsel-chip,
.report-sel .wxsel-overflow > summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 500;
	line-height: 1.15;
	padding: 0.28rem 0.55rem;
	margin: 0.15em;
	color: #15604c;
	background: #fff;
	border: 1px solid #c5d6cb;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none !important;
	list-style: none;
	box-sizing: border-box;
}
.report-sel .wxsel-overflow > summary::-webkit-details-marker { display: none; }
#main .report-sel a.wxsel-chip:hover,
.report-sel .wxsel-chip:hover,
.report-sel .wxsel-overflow > summary:hover {
	background: #e8f2eb;
	border-color: #9fc4b0;
	color: #0f4a3a;
	text-decoration: none !important;
}
#main .report-sel a.wxsel-chip.active,
#main .report-sel a.wxsel-chip.active:hover,
.report-sel .wxsel-chip.active,
.report-sel .wxsel-overflow > summary.active,
.report-sel span.wxsel-chip.active {
	background: #0f6b54;
	border-color: #0a4f3e;
	color: #fff;
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1px 2px rgba(10, 50, 40, 0.22);
	cursor: default;
	text-decoration: none !important;
}
.report-sel .wxsel-overflow {
	position: relative;
	display: inline-block;
	margin: 0.15em;
}
.report-sel .wxsel-overflow > summary {
	margin: 0;
}
.report-sel .wxsel-overflow > summary::after {
	content: " ▾";
	font-size: 0.75em;
	opacity: 0.75;
}
.report-sel .wxsel-overflow-menu {
	position: absolute;
	top: calc(100% + 3px);
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.15rem;
	min-width: 5.5rem;
	max-height: 16rem;
	overflow-y: auto;
	padding: 0.3rem;
	background: #fff;
	border: 1px solid #c5d6cb;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(20, 40, 30, 0.12);
}
.report-sel .wxsel-overflow-menu .wxsel-chip {
	margin: 0;
	justify-content: center;
}
.report-year-warn {
	margin: 0.35rem 0 0.5rem;
	padding: 0.45rem 0.65rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: #5c4b00;
	background: #fff6d6;
	border: 1px solid #e0c96a;
	border-radius: 4px;
}
.report-year-warn[hidden] {
	display: none !important;
}
#report-sel-start-year[hidden] {
	display: none !important;
}
#report-sel-threshold[hidden] {
	display: none !important;
}

#dd-ajax.dd-ajax-loading,
#dm-ajax.dd-ajax-loading,
#rd-ajax.dd-ajax-loading,
#rm-ajax.dd-ajax-loading,
#ry-ajax.dd-ajax-loading,
#rs-ajax.dd-ajax-loading,
#vd-avg-ajax.wxsel-loading,
#vd-rank-ajax.wxsel-loading,
.wxsel-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.vd-avg-sel.wxsel-busy,
.vd-rank-sel.wxsel-busy {
	opacity: 0.7;
	pointer-events: none;
}
.vd-avg-sel.wxsel-busy .wxsel-chip,
.vd-rank-sel.wxsel-busy .wxsel-chip {
	cursor: wait;
}

/****************** Daily data grid (wxdataday) ***************************/
.dd-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0.4rem 0 1.2rem;
	border: 1px solid #d5dbe0;
	background: #fff;
}
.dd-grid {
	width: 100%;
	min-width: 44rem;
	margin: 0;
	font-size: 0.84rem;
	line-height: 1.35;
}
.dd-row {
	display: grid;
	grid-template-columns: minmax(3.2rem, 0.8fr) repeat(12, minmax(0, 1fr));
	/* Tight rows + wider month gutters so future months read as solid blocks */
	column-gap: 0.55rem;
	row-gap: 0;
	margin: 0;
}
@media only screen and (max-width: 1100px) {
	.dd-row {
		column-gap: 0.2rem;
	}
}
.dd-lab,
.dd-day,
.dd-cell {
	text-align: center;
	/* No vertical padding; more horizontal (matrix-style) */
	padding: 0.15em 0;
	min-height: 1.45em;
	line-height: 1.45em;
	/* Transparent border reserves space so hover outline doesn't shift layout */
	border: 1px solid transparent;
	box-sizing: border-box;
	min-width: 0;
}
.dd-lab {
	font-weight: 600;
	color: #333;
	padding: 0.15em 0.45em;
	min-height: 1.6em;
	line-height: 1.3;
}
.dd-head .dd-lab {
	font-size: 0.95em;
	letter-spacing: 0.01em;
}
.dd-day {
	font-weight: 600;
	color: #333;
	position: sticky;
	left: 0;
	z-index: 2;
	background: #f4f6f7;
	box-shadow: 1px 0 0 #cfd6db;
}
.dd-row > .dd-lab:first-child,
.dd-row > .dd-sum-lab:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background: #f4f6f7;
	box-shadow: 1px 0 0 #cfd6db;
}
.dd-head .dd-lab:first-child {
	background: #e8ecef;
}
.dd-sum .dd-sum-lab {
	background: #dbebee;
}
.dd-sep {
	margin-top: 0.65rem;
}
.dd-sum-lab {
	background: #dbebee;
	font-weight: 700;
	font-size: 0.95em;
	padding: 0.45em 0.45em;
	min-height: 2em;
	line-height: 1.3;
}
.dd-sum-cell {
	font-weight: 700;
	padding: 0.45em 0.45em;
	min-height: 2em;
	line-height: 1.3;
}
.dd-row.dd-sum {
	margin: 0.4rem 0;
}
/* Drop legacy table borders from valcol / report cell classes */
.dd-grid .dd-cell,
.dd-grid .dd-day,
.dd-grid .dd-lab,
.dd-grid .reportday,
.dd-grid .noday,
.dd-grid .invalid,
.dd-grid .dd-future,
.dd-grid .reportttl,
.dd-grid [class^="level"] {
	border: 1px solid transparent;
}
.dd-grid .reportday {
	background-color: #e4e4e4;
}
/* Non-existent calendar days: empty (not part of the gray block) */
.dd-grid .noday {
	background-color: transparent;
	color: transparent;
	pointer-events: none;
}
/* Future days / months: solid slate block, no interaction */
.dd-grid .dd-future {
	background-color: #e2e8f0;
	color: transparent;
	pointer-events: none;
}
.dd-grid .dd-future-lab {
	color: #a0aec0;
}
.dd-grid .invalid {
	background-color: #ececec;
}

/****************** Monthly report day breakdown ***************************/
.hm-break-note {
	margin: 0.2rem 0 0.5rem;
	color: #555;
	font-size: 0.9rem;
}
.hm-break-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0.4rem 0 1.2rem;
	border: 1px solid #d5dbe0;
	background: #fff;
}
.hm-break {
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.78rem;
	line-height: 1.25;
	white-space: nowrap;
	width: max-content;
	min-width: 100%;
}
.hm-break th,
.hm-break td {
	padding: 0.22rem 0.4rem;
	text-align: center;
	border-right: 1px solid rgba(0, 0, 0, 0.04);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hm-break thead th {
	background: #e8ecef;
	color: #333;
	font-weight: 600;
	position: sticky;
	top: 0;
	z-index: 2;
}
.hm-break .hm-day {
	position: sticky;
	left: 0;
	z-index: 3;
	background: #f4f6f7;
	font-weight: 700;
	text-align: center;
	min-width: 2.4rem;
	border-right: 1px solid #cfd6db;
}
.hm-break thead .hm-day {
	z-index: 4;
	background: #dfe5e9;
}
.hm-break tbody tr:nth-child(even) .hm-day {
	background: #eef1f3;
}
.hm-break tbody tr:hover .hm-day {
	background: #e2e8ee;
}
.hm-break td.reportday {
	background-color: #e4e4e4;
	color: #666;
}
.hm-break [class^="level"] {
	border-right-color: rgba(0, 0, 0, 0.06);
}
/* Row hover: light up the day label */
.dd-row:hover .dd-day {
	background-color: #d7e8ff;
	color: #123;
	box-shadow: inset 0 0 0 1px #9bb8e0;
}
.dd-row:hover > .dd-lab:first-child {
	background-color: #d7e8ff;
}
/* Cell hover: light border (skip future / non-days) */
.dd-cell:not(.dd-future):not(.noday):hover {
	border-color: rgba(30, 50, 80, 0.45);
	position: relative;
	z-index: 1;
}
.dd-lab:not(.dd-future-lab):hover {
	border-color: rgba(30, 50, 80, 0.28);
}

/****************** Monthly data grid (TablesDataMonth) ***************************/
.dm-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0.4rem 0 1.2rem;
	border: 1px solid #d5dbe0;
	background: #fff;
}
.dm-grid {
	width: 100%;
	min-width: 48rem;
	margin: 0;
	padding: 0.35rem;
	font-size: 0.86rem;
	line-height: 1.35;
	box-sizing: border-box;
}
.dm-caption {
	font-weight: 700;
	font-size: 1.05em;
	margin: 0 0 0.35rem;
	color: #333;
}
.dm-row {
	display: grid;
	grid-template-columns: minmax(3.4rem, 0.85fr) repeat(12, minmax(0, 1fr)) minmax(3.6rem, 1fr);
	column-gap: 0;
	row-gap: 0;
	margin: 0;
}
.dm-lab,
.dm-year,
.dm-cell {
	text-align: center;
	padding: 0.2rem 0;
	min-height: 1.45em;
	line-height: 1.45em;
	border: 1px solid transparent;
	box-sizing: border-box;
	min-width: 0;
}
.dm-lab {
	font-weight: 600;
	color: #333;
	padding: 0.15em 0.35em;
	min-height: 1.6em;
	line-height: 1.3;
}
.dm-head .dm-lab {
	font-size: 0.95em;
	letter-spacing: 0.01em;
}
.dm-year {
	font-weight: 700;
	color: #333;
	position: sticky;
	left: 0;
	z-index: 2;
	background: #f4f6f7;
	box-shadow: 1px 0 0 #cfd6db;
}
.dm-row > .dm-lab:first-child,
.dm-row > .dm-sum-lab:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background: #f4f6f7;
	box-shadow: 1px 0 0 #cfd6db;
}
.dm-head .dm-lab:first-child {
	background: #e8ecef;
}
.dm-sum .dm-sum-lab {
	background: #dbebee;
}
.dm-year a {
	text-decoration: none;
	color: inherit;
}
.dm-year a:hover {
	text-decoration: underline;
}
.dm-sep {
	margin-top: 0.65rem;
}
.dm-sum-lab {
	background: #dbebee;
	font-weight: 700;
	font-size: 0.95em;
	padding: 0.45em 0.35em;
	min-height: 2em;
	line-height: 1.3;
}
.dm-sum-cell {
	font-weight: 700;
	padding: 0.45em 0.35em;
	min-height: 2em;
	line-height: 1.3;
}
.dm-row.dm-sum {
	margin: 0.25rem 0;
}
.dm-yr {
	border-left: 4px solid #565 !important;
}
.dm-grid .dm-cell,
.dm-grid .dm-year,
.dm-grid .dm-lab,
.dm-grid .reportday,
.dm-grid .invalid,
.dm-grid .dm-future,
.dm-grid [class^="level"] {
	border: 1px solid transparent;
}
.dm-grid .reportday {
	background-color: #e4e4e4;
}
.dm-grid .dm-future {
	background-color: #e2e8f0;
	color: transparent;
	pointer-events: none;
}
.dm-grid .invalid {
	background-color: #ececec;
}
/* Crosshair highlight (row + column) on value-cell hover */
.dm-row.dm-hl-row > .dm-cell,
.dm-row.dm-hl-row > .dm-year,
.dm-row.dm-hl-row > .dm-lab {
	border-top-color: rgba(30, 50, 80, 0.4);
	border-bottom-color: rgba(30, 50, 80, 0.4);
}
.dm-grid .dm-hl-col {
	border-left-color: rgba(30, 50, 80, 0.4) !important;
	border-right-color: rgba(30, 50, 80, 0.4) !important;
}
.dm-grid .dm-hl-cell {
	border-color: rgba(30, 50, 80, 0.65) !important;
	position: relative;
	z-index: 1;
}
.dm-row.dm-hl-row > .dm-year {
	background-color: #d7e8ff;
	color: #123;
}

/****************** Ranking tables (RankDay / RankMonth) ***************************/
.rk-pair {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem 1.5rem;
	align-items: flex-start;
	margin: 0.4rem 0 0.8rem;
}
.rk-grid {
	flex: 1 1 18rem;
	min-width: 0;
	max-width: 32rem;
	font-size: 0.86rem;
	line-height: 1.35;
}
.rk-caption {
	font-weight: 700;
	font-size: 1.05em;
	margin: 0 0 0.35rem;
	color: #333;
}
.rk-row {
	display: grid;
	grid-template-columns: 2.4rem minmax(4rem, 1fr) minmax(6rem, 1.6fr);
	column-gap: 0.35rem;
	align-items: stretch;
}
.rk-lab,
.rk-rank,
.rk-val,
.rk-date {
	text-align: center;
	padding: 0.2rem 0.35em;
	min-height: 1.45em;
	line-height: 1.45em;
	border: 1px solid transparent;
	box-sizing: border-box;
}
.rk-lab {
	font-weight: 600;
	color: #333;
}
.rk-rank {
	font-weight: 600;
	color: #444;
}
.rk-date {
	text-align: left;
	padding-left: 0.5em;
}
.rk-grid .rk-val,
.rk-grid .reportday,
.rk-grid [class^="level"] {
	border: 1px solid transparent;
}
.rk-row:hover .rk-rank {
	background-color: #d7e8ff;
	color: #123;
	box-shadow: inset 0 0 0 1px #9bb8e0;
}
.rk-row:hover .rk-val {
	border-color: rgba(30, 50, 80, 0.45);
	position: relative;
	z-index: 1;
}
/* Universal day-count scale: more days use progressively deeper green. */
.spell-length {
	font-weight: 600;
	color: #173b24;
}
.spell-length-0 { background-color: #f0f8f2; }
.spell-length-1 { background-color: #ddf0e2; }
.spell-length-2 { background-color: #c7e6cf; }
.spell-length-3 { background-color: #a9d8b7; }
.spell-length-4 { background-color: #87c79d; }
.spell-length-5 { background-color: #63b382; }
.spell-length-6 { background-color: #469a68; }
.spell-length-7 { background-color: #327e52; color: #fff; }
.spell-length-8 { background-color: #20643e; color: #fff; }
.spell-length-9 { background-color: #104b2d; color: #fff; }
.rk-foot {
	margin-top: 0.35rem;
	font-weight: 600;
}
.rk-foot-today {
	border-top: 3px solid #6a9;
	padding-top: 0.15rem;
}
.rk-blurb {
	clear: both;
	margin: 0.6rem 0 1rem;
}
.report-var-about {
	margin: 0.85rem 0 1rem;
	max-width: 52rem;
	color: #444;
	font-size: 0.95rem;
	line-height: 1.45;
}
.hist-note {
	clear: both;
	margin: 0.75rem 0 1rem;
	font-size: 0.92em;
	color: #444;
}
.vd-longer-hist {
	margin: 0.35rem 0 0.75rem;
	font-size: 0.92em;
	color: #444;
}

/****************** Responsive layout ***************************/
@media only screen and (max-width: 1020px) {
	#nav-toggle {
		display: inline-flex;
		margin: 2px 0 2px 6px;
	}
	#nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 45;
		background: rgba(4, 16, 4, 0.45);
	}
	#nav-backdrop[hidden] {
		display: none;
	}
	#nav-wrapper {
		/* Keep main full-width; do not stack the full menu above content */
		flex-direction: row;
	}
	#nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 50;
		width: min(20rem, 88vw);
		height: 100%;
		max-height: 100dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-105%);
		transition: transform 0.2s ease;
		box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
		padding: 0.6rem 0 1.5rem;
		box-sizing: border-box;
	}
	.nav-open #nav {
		transform: translateX(0);
	}
	body.nav-open {
		overflow: hidden;
	}
	#main {
		padding: 0.5rem 0.6rem;
		width: 100%;
	}
	#main h1 {
		font-size: 1.5rem;
	}
	#nav .nav-heading {
		cursor: default;
		display: flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0.45rem 0.75rem;
		margin: 0.15rem 0;
		border-radius: 0;
	}
	#nav a {
		min-height: 2.75rem;
		display: flex;
		align-items: center;
		padding: 0.45rem 0.75rem;
		box-sizing: border-box;
	}
	#nav a.subhead-item {
		padding-left: 1.35rem;
	}
	#nav .curr {
		padding: 0.45rem 0.75rem;
	}
	.detail-flex {
		gap: 0.8rem;
	}
	.home-head {
		flex-direction: column;
		align-items: stretch;
	}
	.home-summary {
		order: 0; /* stacked: title stays on top, live box drops below it */
		flex-direction: column;
		align-items: flex-start;
	}
	/* Phase 2: slimmer banner chrome */
	#banner {
		/* Source panorama is 1000×150; preserve that ratio down to phone size. */
		height: clamp(78px, 15vw, 135px);
	}
	#banner-main {
		padding-bottom: 0.4rem;
		width: 100%;
		background-size: cover;
		background-position: center center;
	}
	#banner-nw3 {
		font-size: 2.4rem;
		margin-left: 0.75rem;
		margin-right: 0.4rem;
	}
	#banner-location {
		font-size: 1.15rem;
		line-height: 1.35rem;
		margin-right: 0.75rem;
		margin-top: 0;
	}
	#banner-left,
	#banner-right {
		width: 0;
		display: none;
	}
	#sub-header {
		font-size: 0.95rem;
		flex-wrap: nowrap;
		align-items: center;
	}
	#sub-header > div {
		padding: 4px 8px;
	}
	#live-wx {
		flex: 1 1 auto;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#last-updated {
		flex: 0 0 auto;
		margin-left: auto;
		white-space: nowrap;
	}
	.updated-full {
		display: none;
	}
	.updated-short {
		display: inline;
	}
}

@media only screen and (max-width: 760px) {
	#main {
		padding: 0.5rem 0.6rem;
	}
}

@media only screen and (max-width: 486px) {
	.rk-pair {
		flex-direction: column;
	}
	.rk-grid {
		width: 100%;
		max-width: none;
	}
	#banner-nw3 {
		font-size: 1.9rem;
		margin-left: 0.5rem;
	}
	#banner-location {
		font-size: 1rem;
		line-height: 1.2rem;
		margin-right: 0.5rem;
	}
	.nav-toggle-label {
		display: none;
	}
}