/*
 * My Daily News — a personal morning briefing.
 * One idea carries the design: a story's relevance score sets how loud its headline is.
 * Everything else stays quiet: cool morning page, slate ink, one cobalt accent.
 */

:root {
	--page: #eef2f6;
	--surface: #ffffff;
	--ink: #1b2430;
	--muted: #556070;
	--line: #d6dde7;
	--accent: #2a44d4;
	--accent-strong: #1e2f9e;
	--accent-wash: #e8edfc;
	--new-flash: #fff1bf;

	--score-high-bg: #1e2f9e;
	--score-high-fg: #ffffff;
	--score-good-bg: #3150d8;
	--score-good-fg: #ffffff;
	--score-mid-bg: #dce3fb;
	--score-mid-fg: #1e2f9e;
	--score-low-bg: transparent;
	--score-low-fg: #4a5568;
	--score-low-line: #b3bccc;

	--ok-bg: #e6f4ec;
	--ok-line: #9fd2b4;
	--error-bg: #fdecec;
	--error-line: #efb1b1;

	--font-ui: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
	--font-read: 'Source Serif 4', Georgia, 'Times New Roman', serif;

	--radius-small: 6px;
	--radius: 10px;
	--radius-large: 16px;
	--focus: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}

@media (prefers-color-scheme: dark) {
	:root {
		--page: #0f1420;
		--surface: #171e2d;
		--ink: #e6eaf2;
		--muted: #a3adbf;
		--line: #2a3447;
		--accent: #8ea2ff;
		--accent-strong: #b3c0ff;
		--accent-wash: #1c2542;
		--new-flash: #4a3f12;

		--score-high-bg: #8ea2ff;
		--score-high-fg: #0f1420;
		--score-good-bg: #4d68e6;
		--score-good-fg: #ffffff;
		--score-mid-bg: #26325a;
		--score-mid-fg: #dce3fb;
		--score-low-fg: #c2cad8;
		--score-low-line: #46526a;

		--ok-bg: #12291c;
		--ok-line: #2b6a45;
		--error-bg: #331717;
		--error-line: #7a3030;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.5;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
summary:focus-visible {
	outline: none;
	box-shadow: var(--focus);
	border-radius: var(--radius-small);
}

.container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Masthead */

.masthead-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px 48px;
	align-items: end;
	padding-top: 40px;
	padding-bottom: 28px;
}

.masthead h1 {
	margin: 0;
	font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.035em;
}

.briefing {
	max-width: 62ch;
	margin: 16px 0 0;
	font-family: var(--font-read);
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--muted);
}

.briefing a {
	color: var(--ink);
	font-weight: 600;
	text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
	text-underline-offset: 3px;
}

.briefing a:hover {
	text-decoration-color: var(--accent);
}

.masthead-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
}

.today {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 650;
}

.refresh-area {
	display: flex;
	align-items: center;
	gap: 14px;
}

.last-refreshed {
	margin: 0;
	color: var(--muted);
	font-size: 0.92rem;
}

/* Buttons */

.button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 650;
	cursor: pointer;
}

.button-primary {
	background: var(--accent);
	color: #fff;
}

@media (prefers-color-scheme: dark) {
	.button-primary {
		color: #0f1420;
	}
}

.button-primary:hover:not(:disabled) {
	background: var(--accent-strong);
}

.button-secondary {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}

.button-secondary:hover {
	border-color: var(--muted);
}

.button:disabled {
	cursor: progress;
	opacity: 0.85;
}

.spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.button.is-loading .spinner {
	display: inline-block;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.link-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

.link-button:hover {
	text-decoration: underline;
}

/* Status banner */

.status {
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--accent-wash);
	font-size: 0.95rem;
}

.status.is-ok {
	border-color: var(--ok-line);
	background: var(--ok-bg);
}

.status.is-error {
	border-color: var(--error-line);
	background: var(--error-bg);
}

/* Filters read as one sentence */

.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 18px 0 14px;
	border-top: 2px solid var(--ink);
}

.filter-sentence {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 0;
	font-size: 1.2rem;
	font-weight: 500;
}

.inline-field select {
	appearance: none;
	/* Size to the chosen option, not the longest one, so the sentence reads naturally. */
	field-sizing: content;
	max-width: 100%;
	padding: 0 22px 2px 2px;
	border: 0;
	border-bottom: 2px solid var(--accent);
	border-radius: 0;
	background: transparent
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232a44d4' stroke-width='2'/%3E%3C/svg%3E")
		no-repeat right 4px center;
	color: var(--accent);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

@media (prefers-color-scheme: dark) {
	.inline-field select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238ea2ff' stroke-width='2'/%3E%3C/svg%3E");
	}
}

.inline-field select option {
	color: var(--ink);
	background: var(--surface);
	font-weight: 500;
}

.result-count {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

.legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 0.88rem;
}

.legend-label {
	margin-right: 4px;
}

.legend-note {
	margin-left: 8px;
}

/* Relevance badge: colour deepens with the score */

.score {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	padding: 2px 8px;
	border: 1.5px solid transparent;
	border-radius: var(--radius-small);
	font-size: 0.85rem;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.score-high {
	background: var(--score-high-bg);
	color: var(--score-high-fg);
}

.score-good {
	background: var(--score-good-bg);
	color: var(--score-good-fg);
}

.score-mid {
	background: var(--score-mid-bg);
	color: var(--score-mid-fg);
}

.score-low {
	background: var(--score-low-bg);
	border-color: var(--score-low-line);
	color: var(--score-low-fg);
}

/* Topic groups */

.topic-group {
	margin-top: 44px;
}

.topic-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 16px;
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
	font-weight: 750;
	letter-spacing: -0.02em;
}

.topic-count {
	flex-shrink: 0;
	white-space: nowrap;
	color: var(--muted);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	/* Let smaller stories fill the gaps beside two-column lead stories. */
	grid-auto-flow: row dense;
	gap: 14px;
}

/* Article cards: the headline's size and weight follow the relevance score */

.card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
}

.card.is-lead {
	grid-column: span 2;
	padding: 24px 26px 26px;
	background: var(--accent-wash);
	border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
	border-radius: var(--radius-large);
}

.card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.card-title {
	margin: 0;
	line-height: 1.22;
	text-wrap: balance;
}

.card-title a {
	text-decoration: none;
}

.card-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: var(--accent);
}

.tier-high .card-title {
	font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
	font-weight: 780;
	letter-spacing: -0.02em;
}

.tier-good .card-title {
	font-size: 1.2rem;
	font-weight: 640;
	letter-spacing: -0.01em;
}

.tier-mid .card-title {
	font-size: 1.07rem;
	font-weight: 520;
}

.tier-low .card-title {
	font-size: 1rem;
	font-weight: 400;
	color: var(--muted);
}

.card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0;
	font-size: 0.86rem;
	color: var(--muted);
}

.card-source {
	color: var(--ink);
	font-weight: 600;
}

.card-new {
	padding: 0 8px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
}

@media (prefers-color-scheme: dark) {
	.card-new {
		color: #0f1420;
	}
}

.card-summary {
	max-width: 68ch;
	margin: 2px 0 0;
	font-family: var(--font-read);
	font-size: 1rem;
	line-height: 1.6;
}

.is-lead .card-summary {
	font-size: 1.08rem;
}

/* The one animated moment: stories a Refresh just added glow briefly. */
.card.is-new {
	animation: arrived 2.6s ease-out 1;
	border-color: var(--accent);
}

@keyframes arrived {
	from {
		background-color: var(--new-flash);
	}
}

@media (prefers-reduced-motion: reduce) {
	.card.is-new {
		animation: none;
	}
	.spinner {
		animation-duration: 2s;
	}
}

.placeholder {
	margin: 48px 0;
	color: var(--muted);
	font-family: var(--font-read);
	font-size: 1.1rem;
}

.site-footer {
	margin-top: 64px;
	padding: 22px 0 104px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.88rem;
}

/* Password dialog */

.password-dialog {
	width: min(420px, calc(100vw - 32px));
	padding: 26px;
	border: 1px solid var(--line);
	border-radius: var(--radius-large);
	background: var(--surface);
	color: var(--ink);
}

.password-dialog::backdrop {
	background: color-mix(in srgb, var(--ink) 45%, transparent);
}

.password-dialog form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.password-dialog h2 {
	margin: 0;
	font-size: 1.3rem;
	letter-spacing: -0.01em;
}

.dialog-text {
	margin: 0;
	color: var(--muted);
	font-size: 0.92rem;
}

.dialog-error {
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--error-line);
	border-radius: var(--radius-small);
	background: var(--error-bg);
	font-size: 0.9rem;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field-label {
	font-size: 0.9rem;
	font-weight: 650;
}

.password-dialog input[type='password'] {
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	background: var(--page);
	color: var(--ink);
	font: inherit;
}

.checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92rem;
}

.dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

/* Floating chat */

.chat-launcher {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: var(--page);
	font: inherit;
	font-weight: 650;
	box-shadow: 0 10px 28px rgba(15, 20, 32, 0.28);
	cursor: pointer;
}

.chat-launcher:hover {
	background: var(--accent-strong);
	color: #fff;
}

.chat-launcher.is-open .chat-launcher-label {
	display: none;
}

.chat-panel {
	position: fixed;
	right: 24px;
	bottom: 92px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: min(410px, calc(100vw - 32px));
	height: min(680px, calc(100vh - 120px));
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-large);
	box-shadow: 0 18px 50px rgba(15, 20, 32, 0.25);
}

.chat-panel[hidden] {
	display: none;
}

.chat-header,
.chat-model,
.chat-form {
	flex-shrink: 0;
}

.chat-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px 12px;
	border-bottom: 1px solid var(--line);
}

.chat-header h2 {
	margin: 0;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
}

.chat-subtitle {
	margin: 2px 0 0;
	color: var(--muted);
	font-size: 0.85rem;
}

.chat-close {
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.chat-close:hover {
	color: var(--ink);
}

.chat-model {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border-bottom: 1px solid var(--line);
	font-size: 0.88rem;
	color: var(--muted);
}

.chat-model select {
	flex: 1;
	padding: 6px 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	background: var(--page);
	color: var(--ink);
	font: inherit;
	font-size: 0.92rem;
}

/* "Under the hood": scrolls on short screens so the conversation keeps its space */

.chat-hood {
	flex: 0 1 auto;
	min-height: 37px;
	overflow-y: auto;
	border-bottom: 1px solid var(--line);
	font-size: 0.86rem;
}

.chat-hood summary {
	padding: 9px 18px;
	color: var(--muted);
	font-weight: 650;
	cursor: pointer;
}

.chat-hood summary:hover {
	color: var(--ink);
}

.chat-hood-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 18px 14px;
}

.chat-hood-help,
.chat-hood-empty {
	margin: 0;
	color: var(--muted);
	font-size: 0.82rem;
}

.chat-hood-stats {
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	background: var(--page);
}

.chat-hood-title {
	margin: 0 0 6px;
	font-weight: 700;
}

.chat-hood-stats dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 3px 14px;
	margin: 0;
}

.chat-hood-stats dt {
	color: var(--muted);
}

.chat-hood-stats dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.chat-hood-queries {
	margin: 2px 0 0;
	padding-left: 16px;
	color: var(--muted);
}

.switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 650;
	cursor: pointer;
}

.switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.switch-track {
	position: relative;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: var(--score-low-line);
	transition: background 0.15s;
}

.switch-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s;
}

.switch input:checked + .switch-track {
	background: var(--accent);
}

.switch input:checked + .switch-track .switch-thumb {
	transform: translateX(16px);
}

.switch input:focus-visible + .switch-track {
	box-shadow: var(--focus);
}

/* Conversation */

.chat-log {
	flex: 1;
	min-height: 200px;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px;
	background: var(--page);
}

.chat-welcome p {
	margin: 0 0 12px;
	color: var(--muted);
	font-family: var(--font-read);
	font-size: 0.98rem;
}

.chat-suggestions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.chat-suggestion {
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 0.9rem;
	text-align: left;
	cursor: pointer;
}

.chat-suggestion:hover {
	border-color: var(--accent);
}

.chat-message {
	max-width: 92%;
	padding: 11px 14px;
	border-radius: 14px;
	font-size: 0.95rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.chat-message p {
	margin: 0 0 8px;
}

.chat-message p:last-child {
	margin-bottom: 0;
}

.chat-message ul,
.chat-message ol {
	margin: 0 0 8px;
	padding-left: 20px;
}

.chat-user {
	align-self: flex-end;
	background: var(--accent);
	color: #fff;
	border-bottom-right-radius: 4px;
}

@media (prefers-color-scheme: dark) {
	.chat-user {
		color: #0f1420;
	}
}

.chat-assistant {
	align-self: flex-start;
	background: var(--surface);
	border: 1px solid var(--line);
	border-bottom-left-radius: 4px;
	font-family: var(--font-read);
	font-size: 0.98rem;
	line-height: 1.55;
}

.chat-notice,
.chat-error {
	align-self: stretch;
	max-width: none;
	font-size: 0.9rem;
}

.chat-notice {
	background: var(--accent-wash);
	border: 1px solid var(--line);
}

.chat-error {
	background: var(--error-bg);
	border: 1px solid var(--error-line);
}

.chat-heading {
	font-family: var(--font-ui);
	font-weight: 700;
}

.chat-typing {
	color: var(--muted);
	font-style: italic;
}

.chat-cite {
	font-family: var(--font-ui);
	font-size: 0.78em;
	font-weight: 700;
	color: var(--accent);
	text-decoration: none;
	vertical-align: 1px;
}

.chat-cite:hover {
	text-decoration: underline;
}

/* Web citations get a dotted underline so they read differently from feed citations. */
.chat-cite-web {
	text-decoration: underline dotted;
}

.chat-sources {
	margin-top: 10px;
	font-family: var(--font-ui);
	font-size: 0.84rem;
}

.chat-sources summary {
	color: var(--muted);
	font-weight: 650;
	cursor: pointer;
}

.chat-sources ol {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.chat-sources li {
	margin-bottom: 6px;
}

.chat-sources a {
	color: var(--accent);
}

.chat-source-meta {
	display: block;
	color: var(--muted);
}

.chat-usage {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--line);
	font-family: var(--font-ui);
	font-variant-numeric: tabular-nums;
}

.chat-message .chat-usage p {
	margin: 0;
}

.chat-usage-tokens {
	font-size: 0.88rem;
}

.chat-message .chat-usage .chat-usage-details {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	margin-top: 3px;
	color: var(--muted);
	font-size: 0.8rem;
}

.chat-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--line);
	background: var(--surface);
}

.chat-form textarea {
	flex: 1;
	min-height: 42px;
	max-height: 120px;
	padding: 10px 12px;
	resize: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--page);
	color: var(--ink);
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
}

/* Small screens */

@media (max-width: 760px) {
	.masthead-inner {
		grid-template-columns: 1fr;
		padding-top: 28px;
	}
	.masthead-side {
		align-items: flex-start;
		text-align: left;
	}
	.card.is-lead {
		grid-column: auto;
	}
	.legend-note {
		flex-basis: 100%;
		margin-left: 0;
	}
}

@media (max-width: 640px) {
	.container {
		padding: 0 16px;
	}
	.filter-sentence {
		font-size: 1.05rem;
	}
	.cards {
		grid-template-columns: 1fr;
	}
	.chat-launcher {
		right: 16px;
		bottom: 16px;
	}
	.chat-panel {
		right: 8px;
		left: 8px;
		bottom: 80px;
		width: auto;
		height: calc(100vh - 100px);
	}
}