@import url("common.css");

/* Page-specific styles for delta analysis pages */

@layer components {
	.main {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
		padding: 1em;

		& .chart {
			display: none;
		}

		& footer {
			margin-block-start: auto;
			padding-block-start: var(--spacing-200);
		}
	}

	/* ============================================
	   RESULTS CONTAINER
	   ============================================ */
	.results-container {
		container: results / inline-size;
		display: block;
		inline-size: 100%;
		margin-inline: auto;
	}

	/* ============================================
	   DELTA TABS
	   ============================================ */
	input[name="delta-tab"] {
		display: none;
	}

	.delta-tabs {
		display: flex;
		gap: 0;
		border-block-end: var(--border-width-base) solid var(--border-color-base);
		margin-block-end: var(--spacing-150);

		& label {
			padding: var(--spacing-75) var(--spacing-150);
			font-size: var(--font-size-medium);
			font-weight: var(--font-weight-semi-bold);
			color: var(--color-subtle);
			cursor: pointer;
			border-block-end: var(--border-width-thick) solid transparent;
			margin-block-end: calc(-1 * var(--border-width-base));
			transition:
				color 0.15s ease,
				border-color 0.15s ease;
			user-select: none;

			&:hover {
				color: var(--color-base);
			}

			&[hidden] {
				display: none;
			}
		}
	}

	#tab-top:checked ~ .delta-tabs label[for="tab-top"],
	#tab-up:checked ~ .delta-tabs label[for="tab-up"],
	#tab-down:checked ~ .delta-tabs label[for="tab-down"] {
		color: var(--color-progressive);
		border-block-end-color: var(--color-progressive);
	}

	.delta-tab-panel {
		display: none;
	}

	#tab-top:checked ~ #panel-top,
	#tab-up:checked ~ #panel-up,
	#tab-down:checked ~ #panel-down {
		display: block;
	}

	/* ============================================
	   ARTICLE TABS (inside each accordion)
	   ============================================ */
	input[name^="art-tab"] {
		display: none;
	}

	.articles-tabs {
		display: flex;
		gap: 0;
		border-block-end: var(--border-width-base) solid var(--border-color-subtle);
		margin-block-end: var(--spacing-100);

		& label {
			padding: var(--spacing-50) var(--spacing-100);
			font-size: var(--font-size-small);
			font-weight: var(--font-weight-semi-bold);
			color: var(--color-subtle);
			cursor: pointer;
			border-block-end: var(--border-width-thick) solid transparent;
			margin-block-end: calc(-1 * var(--border-width-base));
			transition:
				color 0.15s ease,
				border-color 0.15s ease;
			user-select: none;

			&:hover {
				color: var(--color-base);
			}

			&[hidden] {
				display: none;
			}

			&.active {
				color: var(--color-progressive);
				border-block-end-color: var(--color-progressive);
			}
		}
	}

	.articles-tab-panel {
		display: none;

		&.active {
			display: contents;
		}
	}

	/* ============================================
	   CATEGORY LIST
	   ============================================ */
	.category-list {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-75);
	}

	/* ============================================
	   CATEGORY ACCORDION (details element)
	   ============================================ */
	.category-accordion {
		container: accordion / inline-size;
		border: var(--border-width-base) solid var(--border-color-base);
		border-radius: var(--border-radius-base);
		background-color: var(--background-color-base);
		overflow: hidden;
		transition:
			border-color 0.2s ease,
			box-shadow 0.2s ease;

		&:hover {
			border-color: var(--border-color-progressive);
			box-shadow:
				var(--box-shadow-color-progressive) 0 0 0 var(--border-width-base),
				0 var(--spacing-25) var(--spacing-100) rgba(0, 0, 0, 0.05);
		}

		&[open] {
			border-color: var(--border-color-progressive);

			& .category-summary {
				background-color: var(--background-color-progressive-subtle);
				border-block-end: var(--border-width-base) solid
					var(--border-color-subtle);

				&::before {
					rotate: 90deg;
				}
			}
		}
	}

	/* ============================================
	   CATEGORY SUMMARY (clickable header)
	   ============================================ */
	.category-summary {
		cursor: pointer;
		list-style: none;
		padding: var(--spacing-50);
		display: grid;
		grid-template-columns: auto 4fr 1fr 2fr 1fr;
		gap: var(--spacing-100);
		align-items: center;
		background-color: var(--background-color-interactive-subtle);
		transition: background-color 0.2s ease;
		user-select: none;

		&::-webkit-details-marker {
			display: none;
		}

		&::before {
			content: "▶";
			display: block;
			font-size: var(--font-size-small);
			color: var(--color-subtle);
			transition: rotate 0.3s ease-out;
			rotate: 0deg;
		}

		&:hover {
			background-color: var(--background-color-interactive);
		}

		@container accordion (inline-size < 40rem) {
			grid-template-columns: auto 1fr;
			gap: var(--spacing-75);

			& .category-delta {
				grid-column: 1 / -1;
				justify-self: flex-start;
				order: 1;
			}

			& .category-views {
				grid-column: 1 / -1;
				justify-self: flex-start;
				order: 2;
			}

			& .plot-button {
				grid-column: 1 / -1;
				justify-self: flex-start;
				order: 3;
			}
		}
	}

	.category-name {
		font-weight: var(--font-weight-semi-bold);
		font-size: var(--font-size-medium);
		color: var(--color-base);
		text-wrap: balance;
	}

	.category-delta {
		font-weight: var(--font-weight-bold);
		font-size: var(--font-size-large);
		font-variant-numeric: tabular-nums;
		min-inline-size: 8rem;
		text-align: end;

		&.positive {
			color: var(--color-success);
		}

		&.negative {
			color: var(--color-error);
		}
	}

	.category-views {
		display: flex;
		flex-direction: row;
		gap: var(--spacing-12);
		font-size: var(--font-size-small);
		color: var(--color-subtle);
		text-align: end;
		font-variant-numeric: tabular-nums;

		& .views-label {
			font-size: var(--font-size-x-small);
			text-transform: uppercase;
			letter-spacing: 0.05em;
			opacity: var(--opacity-medium);
		}
	}

	.plot-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--spacing-50) var(--spacing-75);
		font-size: var(--font-size-large);
		text-decoration: none;
		cursor: pointer;
		min-inline-size: 2.5rem;
	}

	/* ============================================
	   ARTICLES CONTAINER (inside accordion)
	   ============================================ */
	.articles-container {
		container: articles / inline-size;
		padding: var(--spacing-150);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-75);
		background-color: var(--background-color-neutral-subtle);
		max-height: 60vh;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.articles-summary {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-50);
		padding: var(--spacing-75) var(--spacing-100);
		background-color: var(--background-color-base);
		border: var(--border-width-base) solid var(--border-color-base);
		border-radius: var(--border-radius-base);
		font-size: var(--font-size-small);
		color: var(--color-subtle);
		font-variant-numeric: tabular-nums;
	}

	.articles-summary-row {
		line-height: 1.4;
	}

	.gs-delta-articles-table {
		width: 100%;
		border-collapse: collapse;
		background-color: var(--background-color-base);
		border: var(--border-width-base) solid var(--border-color-base);
		border-radius: var(--border-radius-base);
		overflow: hidden;
	}

	.gs-delta-articles-table th,
	.gs-delta-articles-table td {
		padding: var(--spacing-75);
		border-bottom: var(--border-width-base) solid var(--border-color-subtle);
		text-align: left;
		font-size: var(--font-size-small);
		font-variant-numeric: tabular-nums;
	}

	.gs-delta-articles-table th {
		font-weight: var(--font-weight-semi-bold);
		color: var(--color-subtle);
	}

	.gs-delta-articles-table tr:last-child td {
		border-bottom: none;
	}

	/* ============================================
	   ARTICLE ITEM
	   ============================================ */
	.article-item {
		display: grid;
		grid-template-columns: 1fr auto auto auto auto;
		gap: var(--spacing-100);
		align-items: center;
		padding: var(--spacing-100) var(--spacing-125);
		border-radius: var(--border-radius-base);
		border-inline-start: var(--border-width-thick) solid transparent;
		background-color: var(--background-color-base);
		transition:
			background-color 0.15s ease,
			border-color 0.15s ease,
			translate 0.15s ease;

		&:hover {
			background-color: var(--background-color-interactive-subtle);
		}

		&.positive {
			border-inline-start-color: var(--color-success);
		}

		&.negative {
			border-inline-start-color: var(--color-error);
		}

		@container articles (inline-size < 35rem) {
			grid-template-columns: 1fr;
			gap: var(--spacing-50);

			& .article-views {
				order: 2;
			}

			& .article-delta {
				order: 1;
				justify-self: flex-start;
			}

			& .plot-button {
				order: 3;
				justify-self: flex-start;
			}
		}
	}

	.article-title {
		font-weight: var(--font-weight-normal);
		font-size: var(--font-size-medium);
		color: var(--color-progressive);
		text-decoration: none;
		text-wrap: balance;

		&:hover {
			color: var(--color-progressive--hover);
			text-decoration: underline;
		}

		&:visited {
			color: var(--color-visited);
		}
	}

	.article-delta {
		font-weight: var(--font-weight-bold);
		font-size: var(--font-size-medium);
		font-variant-numeric: tabular-nums;
		min-inline-size: 6rem;
		text-align: end;

		&.positive {
			color: var(--color-success);
		}

		&.negative {
			color: var(--color-error);
		}
	}

	.article-views {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-12);
		font-size: var(--font-size-small);
		color: var(--color-subtle);
		min-inline-size: 12rem;
		text-align: end;
		font-variant-numeric: tabular-nums;

		& .views-label {
			font-size: var(--font-size-x-small);
			text-transform: uppercase;
			letter-spacing: 0.05em;
			opacity: var(--opacity-medium);
		}
	}

	/* ============================================
	   LOADING & EMPTY STATES
	   ============================================ */
	.loading-indicator {
		padding: var(--spacing-200);
		text-align: center;
		color: var(--color-subtle);
		font-style: italic;

		&::after {
			content: "...";
			animation: loading-dots 1.5s infinite;
		}
	}

	@keyframes loading-dots {
		0%,
		20% {
			content: ".";
		}
		40% {
			content: "..";
		}
		60%,
		100% {
			content: "...";
		}
	}

	.no-data,
	.empty-state {
		padding: var(--spacing-300);
		text-align: center;
		color: var(--color-subtle);
		font-size: var(--font-size-medium);
	}

	/* ============================================
	   RESPONSIVE ADJUSTMENTS
	   ============================================ */
	@container results (inline-size < 50rem) {
		.delta-tabs label {
			padding: var(--spacing-50) var(--spacing-100);
			font-size: var(--font-size-small);
		}
	}

	/* ============================================
	   ACCESSIBILITY & MOTION
	   ============================================ */
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}

	@media (prefers-contrast: more) {
		.category-accordion {
			border-width: var(--border-width-thick);
		}

		.article-item {
			border-inline-start-width: calc(var(--border-width-thick) * 2);
		}
	}

	/* ============================================
	   DARK MODE SPECIFICS
	   ============================================ */
	@media (prefers-color-scheme: dark) {
		.category-accordion:hover {
			box-shadow:
				var(--box-shadow-color-progressive) 0 0 0 var(--border-width-base),
				0 var(--spacing-25) var(--spacing-100) rgba(0, 0, 0, 0.3);
		}
	}
}