main {
	display: grid;
	grid-template-columns: 1fr;
}

@media (width > 80em) {
	main {
		grid-template-columns: 34em 1fr;
	}
}

.weather-tiles {
	--tile-border: 0.2em;

	gap: var(--tile-border);
	padding: var(--tile-border);

	background: var(--secondary-background-color);
}

.weather-tiles > div {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;

	background: var(--background-color);
}

.weather-tiles dd {
	display: flex;
	align-items: center;
	gap: 0.2em;
}

.weather-tiles dt {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	border-bottom-left-radius: 0.5em;
	background: var(--secondary-background-color);
	color: var(--secondary-text-color);
}

.weather-tiles .wind dd {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
}

.weather-tiles .wind-direction x-icon {
	transform: rotate(calc(1deg * var(--direction)));
}

x-current-place {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

x-current-place a {
	--input-color: transparent;
	--input-text-color: inherit;

	padding: 0.5em;
}

x-current-place a:is(:hover, :focus-visible) {
	--input-color: var(--control-color);
	--input-text-color: var(--control-text-color);
}

x-weather-summary .weather-tiles {
	--columns: 5;
	--rows: 2;
	--template-areas:
		"m0 m0 w1 w2 w3"
		"m0 m0 w4 w5 w6";

	display: grid;
	grid-template-columns: repeat(var(--columns), 1fr);
	grid-template-areas: var(--template-areas);
	aspect-ratio: var(--columns)/var(--rows);
}

@media (width < 50em) {
	x-weather-summary .weather-tiles {
		--columns: 10;
		--rows: 6;
		--template-areas:
			"m0 m0 m0 m0 w3 w3 w3 w4 w4 w4"
			"m0 m0 m0 m0 w3 w3 w3 w4 w4 w4"
			"m0 m0 m0 m0 w3 w3 w3 w4 w4 w4"
			"m0 m0 m0 m0 w5 w5 w5 w6 w6 w6"
			"w1 w1 w2 w2 w5 w5 w5 w6 w6 w6"
			"w1 w1 w2 w2 w5 w5 w5 w6 w6 w6";
	}
}

@media (width < 36em), (width > 80em) {
	x-weather-summary .weather-tiles {
		--columns: 4;
		--rows: 4;
		--template-areas:
			"m0 m0 m0 w3"
			"m0 m0 m0 w4"
			"m0 m0 m0 w5"
			"xx w1 w2 w6";
	}
}

@media (width < 26em) {
	x-weather-summary .weather-tiles {
		--columns: 2;
		--rows: 5;
		--template-areas:
			"m0 m0"
			"m0 m0"
			"w1 w2"
			"w3 w4"
			"w5 w6";

	}
}

x-weather-summary .current-temperature {
	grid-area: m0;
}

x-weather-summary .min-temperature {
	grid-area: w1;
}

x-weather-summary .max-temperature {
	grid-area: w2;
}

x-weather-summary .precipitation {
	grid-area: w3;
}

x-weather-summary .pressure {
	grid-area: w4;
}

x-weather-summary .humidity {
	grid-area: w5;
}

x-weather-summary .wind {
	grid-area: w6;
}

x-weather-summary .current-temperature {
	font-size: 300%;
}

x-weather-summary .current-temperature x-icon[name=disconnected] {
	--icon-stroke-width: 0.5px;
}

x-weather-summary .current-temperature dt {
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

x-weather-summary :is(.current-temperature dd > span, .wind-direction) {
	display: flex;
	align-items: center;
	gap: 0.2em;
}

x-weather-summary .no-value {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1em;
	height: 1em;
}

x-weather-summary .no-value::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 0.1em;
	background: currentcolor;
}

x-weather-forecast .tabs:not([hidden]) {
	display: flex;
	justify-content: flex-end;
	padding: 0 0.5em;
	gap: 0.5em;
	border-bottom: 0.1em solid var(--control-color);
}

x-weather-forecast .tab {
	--input-color: transparent;
	--input-text-color: inherit;

	display: flex;
	align-items: center;
	gap: 0.5em;
	position: relative;
	top: 0.1em;
	padding: 0.5em;
	border-radius: 0.2em 0.2em 0 0;
}

x-weather-forecast .tab x-icon {
	font-size: 120%;
}

x-weather-forecast .tab span {
	font-size: 87.5%;
}

x-weather-forecast input:checked + .tab {
	--input-color: var(--control-color);
	--input-text-color: inherit;

	background-color: var(--background-color);
	border: 0.1em solid var(--input-color);
	border-bottom-color: var(--background-color);
}

x-weather-forecast input:focus-visible + .tab {
	--input-color: var(--control-highlight-color);
}

x-weather-forecast table:not([hidden]) {
	display: grid;
	grid-template-columns: 1fr repeat(5, auto) 1fr;
}

x-weather-forecast tbody {
	display: contents;
}

x-weather-forecast[data-active-tab=data] > section:not(#forecast-data) {
	display: none;
}

x-weather-forecast[data-active-tab=charts] > section:not(#forecast-charts) {
	display: none;
}

x-weather-forecast tr {
	grid-column: 1/8;
	display: grid;
	grid-template-columns: subgrid;
	grid-template-areas: "fl w1 w2 w3 w4 w5 fr";
	padding: 1em 0.5em;
	border-bottom: 0.1em solid var(--control-color);
}

x-weather-forecast :is(th, td) {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0.5em;
	gap: 0.2em;
}

x-weather-forecast .date {
	grid-area: w1;
	justify-content: flex-start;
}

x-weather-forecast .weather {
	grid-area: w2;
}

x-weather-forecast .min-temperature {
	grid-area: w3;
}

x-weather-forecast .precipitation {
	grid-area: w4;
}

x-weather-forecast .wind {
	grid-area: w5;
}

x-weather-forecast .wind .direction-graphic {
	transform: rotate(calc(1deg * var(--direction)));
}

x-weather-forecast .additional-information button:not(:hover):not(:focus-visible) {
	color: inherit;
	border-color: transparent;
	background: transparent;
}

x-weather-forecast .dialog-header {
	justify-content: flex-end;
}

x-weather-forecast .weather-tiles {
	display: flex;
}

x-weather-forecast .weather-tiles > div {
	width: 8em;
	height: 8em;
}

@media (width < 36em) {
	x-weather-forecast table {
		grid-template-columns: 1fr repeat(3, auto) 1fr;
	}

	x-weather-forecast tr {
		grid-template-areas:
			"fl w1 w2 w4 fr"
			"fl fc w3 w5 fr";
	}

	x-weather-forecast .weather {
		justify-content: flex-start;
	}

	x-weather-forecast .min-temperature {
		justify-content: flex-start;
	}
}

@media (width < 26em) {
	x-weather-forecast table {
		grid-template-columns: 1fr auto auto 1fr;
	}

	x-weather-forecast tr {
		grid-template-areas:
			"fl w1 w1 fr"
			"fl w2 w4 fr"
			"fl w3 w5 fr";
	}
}

x-weather-forecast .no-data:not([hidden]) {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1em;
	padding: 2em;
}

x-weather-forecast .no-data x-icon {
	--icon-stroke-width: 0.5px;
	font-size: 300%;
}

x-weather-forecast figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	padding: 1em;

	border-bottom: 0.1em solid var(--control-color);
}

@property --chart-temperature-min-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --chart-temperature-max-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --chart-precipitation-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --chart-wind-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --chart-grid-line-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

x-weather-forecast .chart {
	--chart-stroke-width: 1px;
	--chart-temperature-min-color: rgb(119, 163, 245);
	--chart-temperature-max-color: rgb(229, 30, 30);
	--chart-precipitation-color: rgb(4, 156, 173);
	--chart-wind-color: rgb(36, 188, 74);
	--chart-aux-line-color: var(--control-color);
	--chart-grid-line-color: #555;

	transition-property: 
		--chart-temperature-min-color,
		--chart-temperature-max-color,
		--chart-precipitation-color,
		--chart-wind-color,
		--chart-grid-line-color;
	transition-duration: 0.3s;

	aspect-ratio: 2;
}

@media (prefers-color-scheme: light) {
	x-weather-forecast .chart {
		--chart-temperature-min-color: rgb(18, 64, 149);
		--chart-temperature-max-color: rgb(138, 5, 5);
		--chart-precipitation-color: rgb(4, 89, 99);
		--chart-wind-color: rgb(10, 89, 30);
		--chart-grid-line-color: #999;
	}
}

x-weather-forecast .chart path {
	fill: none;
	stroke-linecap: round;
	stroke-width: var(--cart-stroke-width);
}

x-weather-forecast .chart :is(.axes, .tick path) {
	stroke: var(--chart-aux-line-color);
}

x-weather-forecast .chart .tick.vertical text {
	text-anchor: end;
	dominant-baseline: middle;
	fill: currentColor;
}

x-weather-forecast .chart .tick.horizontal text {
	text-anchor: middle;
	dominant-baseline: hanging;
	fill: currentColor;
}

x-weather-forecast .chart .grid-line {
	stroke: var(--chart-grid-line-color);
	stroke-dasharray: 2 5;
}