/* soukoscope: one stylesheet, no framework. The palette is the souk's: sand,
   terracotta, saffron, with teal for links and chart marks so the charts do
   not melt into the orange. Light by default; dark follows
   prefers-color-scheme unless the theme button stored a choice. */

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/fonts/fraunces-700-latin.woff2") format("woff2");
}

:root {
	--bg: #faf6ee;
	--bg-raised: #ffffff;
	--fg: #2a2118;
	--muted: #7a6a58;
	--link: #1f7a8c;
	--border: #d9c9ad;
	--sand: #efe6d4;
	--terracotta: #c2552b;
	--saffron: #e5a62a;
	--teal: #1f7a8c;
	--bar: #1f7a8c;
	--bar-soft: #9cc5cf;
	--accent: #c2552b;
	--table-alt: #f4ecdc;
	--banner-bg: #ffe9a8;
	--banner-fg: #5a3d00;
	--chart-gap: #d9c9ad;
	--shadow: 0 1px 2px rgba(42, 33, 24, 0.08), 0 6px 18px rgba(42, 33, 24, 0.06);
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #1b1a22;
		--bg-raised: #25232d;
		--fg: #f0e6d3;
		--muted: #a8998a;
		--link: #6cc3d3;
		--border: #3d3846;
		--sand: #2c2934;
		--terracotta: #e8764a;
		--saffron: #f0b747;
		--teal: #6cc3d3;
		--bar: #6cc3d3;
		--bar-soft: #365c66;
		--accent: #e8764a;
		--table-alt: #23212b;
		--banner-bg: #4a3a12;
		--banner-fg: #ffe9a8;
		--chart-gap: #3d3846;
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #1b1a22;
	--bg-raised: #25232d;
	--fg: #f0e6d3;
	--muted: #a8998a;
	--link: #6cc3d3;
	--border: #3d3846;
	--sand: #2c2934;
	--terracotta: #e8764a;
	--saffron: #f0b747;
	--teal: #6cc3d3;
	--bar: #6cc3d3;
	--bar-soft: #365c66;
	--accent: #e8764a;
	--table-alt: #23212b;
	--banner-bg: #4a3a12;
	--banner-fg: #ffe9a8;
	--chart-gap: #3d3846;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
	color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
	background: var(--bg);
	color: var(--fg);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1.02rem;
	line-height: 1.55;
	margin: 0;
	padding: 0 1.25rem 3rem;
}

/* Display type: the wordmark, headings and the big numbers. */
h1, h2, h3, .wordmark b, .keyfigure b {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h1 { font-size: 2.2rem; line-height: 1.1; margin: 0 0 1.25rem; color: var(--terracotta); }
h2 { font-size: 1.45rem; margin: 2.25rem 0 0.75rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }

a { color: var(--link); }
code { font-size: 0.92em; background: var(--sand); padding: 0.05em 0.3em; border-radius: 3px; }

/* --- Masthead: wordmark, tagline, theme button, nav ----------------------- */

.masthead {
	max-width: 80rem;
	margin: 0 auto 2rem;
	padding: 1rem 0 0;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "brand theme" "nav nav";
	align-items: center;
	gap: 0.75rem 1rem;
	border-bottom: 3px solid var(--saffron);
}

.wordmark {
	grid-area: brand;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
}
.wordmark img { width: 104px; height: 104px; margin: -0.4rem 0; }
.wordmark span { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark b { font-size: 2rem; color: var(--terracotta); }
.wordmark small { color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }
.wordmark small code { background: transparent; padding: 0; color: var(--teal); }

button.theme {
	grid-area: theme;
	border: 1px solid var(--border);
	background: var(--bg-raised);
	color: var(--fg);
	border-radius: 999px;
	width: 2.4rem;
	height: 2.4rem;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--shadow);
}
button.theme .moon { display: none; }
:root[data-theme="dark"] button.theme .sun { display: none; }
:root[data-theme="dark"] button.theme .moon { display: inline; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) button.theme .sun { display: none; }
	:root:not([data-theme="light"]) button.theme .moon { display: inline; }
}

nav {
	grid-area: nav;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding-bottom: 0.75rem;
}
nav a {
	color: var(--fg);
	text-decoration: none;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	border: 1px solid transparent;
	white-space: nowrap;
}
nav a:hover { background: var(--sand); }
nav a[aria-current="page"] {
	background: var(--terracotta);
	color: #fff8ee;
	border-color: var(--terracotta);
}

p.banner {
	max-width: 80rem;
	margin: -1rem auto 1.5rem;
	background: var(--banner-bg);
	color: var(--banner-fg);
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	font-weight: 600;
}

/* --- Page body ----------------------------------------------------------- */

main { max-width: 80rem; margin: 0 auto; }

main > p, main > ul, main > ol { max-width: 60rem; }

footer {
	max-width: 80rem;
	margin: 3rem auto 0;
	border-top: 1px solid var(--border);
	padding-top: 0.75rem;
	color: var(--muted);
	font-size: 0.9rem;
}
footer p { margin: 0.35rem 0; }
footer .stamp { font-size: 0.8rem; }

/* Grids: tiles for key figures, two-up for charts that pair, cards. */

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1rem;
	margin: 1rem 0 2rem;
}
.keyfigure {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 0.9rem 1.1rem;
	box-shadow: var(--shadow);
}
.keyfigure b { display: block; font-size: 2rem; color: var(--terracotta); line-height: 1.1; }
.keyfigure span { color: var(--muted); font-size: 0.9rem; }

.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
	align-items: start;
}
.grid-2 > h2 { grid-column: 1 / -1; margin-bottom: 0; }

.cols {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 1.5rem 2.5rem;
	align-items: start;
}

.card {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1rem 1.25rem;
	box-shadow: var(--shadow);
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.note { color: var(--muted); font-size: 0.92rem; }
.current { color: var(--terracotta); font-weight: 600; }

/* Tables */

table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; background: var(--bg-raised); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 0.85rem; background: var(--sand); }
tbody tr:nth-child(even) { background: var(--table-alt); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.facts { max-width: 28rem; }

/* Charts: every chart function emits <figure class="chart"> around its svg */

.chart {
	margin: 0.5rem 0 1rem;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 0.75rem 0.75rem 0.5rem;
	box-shadow: var(--shadow);
}
.chart svg { max-width: 100%; height: auto; display: block; }
.chart.square svg { max-width: 760px; margin: 0 auto; }
.chart figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 0.4rem; }

.chart text { fill: var(--fg); font-size: 12px; }
.chart text.caption { fill: var(--muted); font-style: italic; font-size: 11px; }
.chart .axis { stroke: var(--muted); stroke-width: 1; }
.chart .bar { fill: var(--bar); }
.chart .bar-soft { fill: var(--bar-soft); }
.chart .line { fill: none; stroke: var(--terracotta); stroke-width: 1.8; }
.chart .gridline { stroke: var(--border); stroke-width: 0.5; }
.chart .gap { fill: var(--chart-gap); }
.chart .gap-line { stroke: var(--chart-gap); stroke-width: 2; }
.chart .annotation { fill: var(--terracotta); font-weight: 600; font-size: 11px; }
.chart .cell-low { fill: var(--bar-soft); }
.chart .cell-high { fill: var(--bar); }
.chart .cell-empty { fill: var(--sand); }
/* Four shading levels for heatmaps and the coverage calendar. */
.chart .cell-1 { fill: var(--bar); opacity: 0.25; }
.chart .cell-2 { fill: var(--bar); opacity: 0.5; }
.chart .cell-3 { fill: var(--bar); opacity: 0.75; }
.chart .cell-4 { fill: var(--bar); }

/* The four-part activity split (matin / après-midi / soir / nuit) */

.split { display: flex; width: 7rem; height: 0.6rem; border-radius: 3px; overflow: hidden; }
.split span { display: block; height: 100%; }
.split .matin { background: var(--saffron); }
.split .am { background: var(--teal); }
.split .soir { background: var(--terracotta); }
.split .nuit { background: var(--muted); }

/* Palmares and retro podiums (the cards themselves arrive in 3.12) */

section.award { margin: 1.5rem 0; }
.podium { padding-left: 1.5rem; }
.podium li { margin: 0.2rem 0; }
p.rule { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.5rem; }
p.nicks { color: var(--muted); }
blockquote.longest { border-left: 3px solid var(--saffron); margin: 0.5rem 0; padding: 0.25rem 0.75rem; color: var(--muted); }
.counter { margin: 0.5rem 0 1rem; }
.counter p { margin: 0 0 0.25rem; }

/* Phones: one column everywhere, the masthead stacks. */

@media (max-width: 48rem) {
	body { padding: 0 0.9rem 2rem; }
	h1 { font-size: 1.7rem; }
	.wordmark b { font-size: 1.6rem; }
	.wordmark img { width: 72px; height: 72px; }
	.grid-2, .cols { grid-template-columns: minmax(0, 1fr); }
	nav a { padding: 0.3rem 0.6rem; font-size: 0.95rem; }
	table { display: block; overflow-x: auto; }
	/* SVG text shrinks with the viewBox; give it back some size. */
	.chart text { font-size: 16px; }
	.chart text.caption { font-size: 14px; }
}

/* --- The silly layer: award cards, medals, quips, stickers -------------- */

.awards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 1.25rem;
	margin: 1rem 0 2rem;
}
.award {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-top: 6px solid var(--family);
	border-radius: 12px;
	padding: 1rem 1.2rem 0.9rem;
	box-shadow: var(--shadow);
	margin: 0;
	--family: var(--teal);
}
.award.horloge { --family: var(--saffron); background: color-mix(in srgb, var(--saffron) 9%, var(--bg-raised)); }
.award.verbe { --family: var(--teal); background: color-mix(in srgb, var(--teal) 7%, var(--bg-raised)); }
.award.presence { --family: var(--terracotta); background: color-mix(in srgb, var(--terracotta) 8%, var(--bg-raised)); }
.award .emoji { font-size: 2.6rem; line-height: 1; margin: 0 0 0.25rem; }
.award h2, .award h3 { margin: 0 0 0.6rem; font-size: 1.35rem; }
.award.teaser { margin-top: 0.5rem; }
.award.teaser h3 a { color: inherit; text-decoration: none; }
.award.teaser h3 a:hover { text-decoration: underline; }

.podium { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.podium li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; padding: 0.2rem 0; border-bottom: 1px dashed var(--border); }
.podium li:last-child { border-bottom: 0; }
.podium li:first-child { font-size: 1.2rem; }
.podium li:first-child .who { font-family: "Fraunces", Georgia, serif; font-weight: 700; }
.podium .medal { flex: 0 0 auto; }
.podium .who { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.podium .num { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.podium li:first-child .num { color: var(--terracotta); font-weight: 600; }

.quip { font-style: italic; color: var(--muted); margin: 0.6rem 0 0.4rem; }
details.rule { font-size: 0.85rem; color: var(--muted); }
details.rule summary { cursor: pointer; }
details.rule p { margin: 0.3rem 0 0; }

.sticker { float: right; width: 120px; height: auto; margin: 0 0 1rem 1.5rem; }
.sticker.big { float: none; display: block; width: 360px; max-width: 100%; margin: 1rem auto; }
.lost { max-width: 40rem; text-align: center; }

@media (max-width: 48rem) {
	.awards { grid-template-columns: minmax(0, 1fr); }
	.sticker { width: 80px; margin-left: 1rem; }
}