/* Data stories inside project pages (project-*.html).
 *
 * The four data projects were written with a shared set of colour tokens (--page,
 * --surface, --ink, --c1..c7, --s1/--s2 ...). Their charts read those tokens, so
 * redefining them here re-skins every chart without touching chart code. Dark is
 * the site default; light follows the site's [data-theme="light"] toggle.
 * The second half restyles the shared components (cards, legends, toggles, tables,
 * tiles, tooltip) in the site's language: glass cards, Space Mono labels, pills.
 */

/* ---------------------------------------------------------------- tokens */
:root {
	--page: var(--bg);
	--surface: #0d0a12;          /* = --bg-elevated: chart strokes that "cut" marks use it */
	--panel: #16121e;
	--ink: #f0f0f0;
	--ink-2: #bdb8c8;
	--muted: #8d8899;
	--grid: #1f1b28;
	--axis: #383243;
	--ring: rgba(255, 255, 255, .14);
	--c1: #9d7bf6;               /* site accent, lifted for marks on dark */
	--c2: #3fcfb2;
	--c3: #efb54a;
	--c4: #f07ba8;
	--c5: #6aa6f0;
	--c6: #7fd07a;
	--c7: #9a93ac;
	--s1: var(--c1);
	--s2: var(--c2);
	--bar: var(--c1);
	--bar-2: #4a3790;
	--other: #3d3849;
	--pos: #f2776b;
	--neg: #9d7bf6;
	--mid: #2a2534;
	--wash: hsl(258 90% 66% / .12);
	--band: hsl(258 90% 66% / .10);
	--seg-on: var(--accent-strong);
	--seg-on-text: #fff;
	--code-bg: #16121e;
	--note-bg: hsl(258 90% 66% / .10);
	--note-ink: var(--accent-text);
}
:root[data-theme="light"] {
	--surface: #f1edf9;
	--panel: #e7e1f3;
	--ink: #17131f;
	--ink-2: #4a4556;
	--muted: #6c6678;
	--grid: #e2ddeb;
	--axis: #c6bfd4;
	--ring: rgba(23, 19, 31, .12);
	--c1: #6d45d8;
	--c2: #13907c;
	--c3: #b47700;
	--c4: #c9407a;
	--c5: #2f6fc0;
	--c6: #3f8f3a;
	--c7: #7a7290;
	--bar-2: #c4b3f3;
	--other: #cbc4d8;
	--pos: #d2483c;
	--neg: #6d45d8;
	--mid: #e9e5f1;
	--wash: hsl(258 90% 58% / .08);
	--band: hsl(258 90% 58% / .08);
	--code-bg: #e7e1f3;
}

/* ---------------------------------------------------------------- base */
.ds { font-family: var(--font-body); font-weight: var(--w-light); color: var(--text); min-width: 0; }
.ds b, .ds strong { font-weight: var(--w-med); color: var(--text); }
.ds a { color: var(--accent-text); text-underline-offset: .2em; }
.ds svg text, .ds svg[font-family] { font-family: var(--font-body); }
.ds code { font-family: var(--font-mono); font-size: .85em; background: var(--code-bg); border-radius: 6px; padding: .1em .35em; }
.ds pre { font-family: var(--font-mono); background: var(--code-bg); border-radius: calc(var(--radius) * .5); }
.ds > section, .ds section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.ds .ds-h { font-size: var(--t-h3); }

/* story sections: let the site's numbered h2 lead, with the project's answer as the lede */
.ds section > h2 { margin-bottom: calc(var(--sp) * .9); }
.ds .prose { max-width: none; }
.ds .prose p, .ds .prose li { font-size: var(--t-body); line-height: 1.65; color: var(--text-2); max-width: 64ch; }
.ds .prose h3 { margin-top: 1.8rem; }

/* ---------------------------------------------------------------- cards */
.ds .card {
	background: linear-gradient(160deg, var(--glass-bg), transparent 70%), var(--bg-elevated);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: none;
	padding: clamp(18px, 2vw, 32px);
	transition: border-color var(--t-fast);
}
.ds .card:hover { border-color: var(--accent-dim); }
.ds .card h3 { font-size: var(--t-h3); font-weight: var(--w-med); line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
.ds .card .sub, .ds .sub { color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.ds .card p { color: var(--text-2); }

/* ---------------------------------------------------------------- labels in Space Mono */
.ds .legend, .ds .legend span, .ds label, .ds .meta, .ds .byline, .ds .mini,
.ds details summary, .ds th, .ds .tile .k, .ds .control-label, .ds .stack {
	font-family: var(--font-mono);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.ds .legend, .ds .legend span { font-size: .66rem; color: var(--text-2); }
.ds label { font-size: .66rem; color: var(--text-2); }
.ds .meta, .ds .byline { font-size: .7rem; color: var(--text-2); }
.ds .mini { font-size: .66rem; color: var(--text-2); }
.ds .stack { font-size: .68rem; color: var(--accent-text) !important; }
.ds details summary { font-size: .66rem; letter-spacing: .1em; color: var(--accent-text); cursor: pointer; }
.ds details summary:hover { color: var(--text); }

/* ---------------------------------------------------------------- controls */
.ds .seg {
	display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
	border: 1px solid var(--glass-border); border-radius: 22px; background: transparent; /* pill on one line, rounded box when it wraps */
}
.ds .seg button {
	font-family: var(--font-mono); font-size: .66rem; font-weight: 400; text-transform: uppercase; letter-spacing: .08em;
	border: 0; border-radius: 999px; background: transparent; color: var(--text-2);
	padding: .5rem .9rem; cursor: pointer; box-shadow: none;
	transition: background var(--t-fast), color var(--t-fast);
}
.ds .seg button:hover { color: var(--text); }
.ds .seg button[aria-pressed="true"], .ds .seg button[aria-checked="true"] { background: var(--accent-strong); color: var(--on-accent); }
.ds select {
	font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--text); background-color: var(--bg-elevated);
	border: 1px solid var(--glass-border); border-radius: 999px; padding: .5rem .9rem;
}
.ds select:hover, .ds select:focus-visible { border-color: var(--accent); }
.ds input[type="range"] { accent-color: var(--accent); }
.ds button:focus-visible, .ds select:focus-visible, .ds summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- tables */
.ds table { font-size: .85rem; font-variant-numeric: tabular-nums; }
.ds th { font-size: .62rem; color: var(--text-2); }
.ds th, .ds td { border-color: var(--border) !important; }
.ds td { color: var(--text-2); }

/* ---------------------------------------------------------------- headline tiles */
.ds .tiles { gap: var(--sp); }
.ds .tiles > *, .ds .tile {
	background: linear-gradient(160deg, var(--glass-bg), transparent 70%), var(--bg-elevated);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: none;
}
.ds .tile .k { font-size: .62rem; color: var(--text-2); }
.ds .tile .v, .ds .tiles .v, .ds .tiles b, .ds .figures b {
	font-family: var(--font-body); font-weight: var(--w-med); letter-spacing: -.03em; color: var(--text);
}
.ds .tile .s, .ds .tiles .s { color: var(--text-2); }

/* ---------------------------------------------------------------- callouts */
/* the site's tinted glass panel (full hairline border), not a one-sided stripe */
.ds .note, .ds .callout, .ds .verdict {
	border: 1px solid var(--accent-dim);
	background: linear-gradient(160deg, var(--accent-dim), transparent 75%), var(--bg-elevated);
	border-radius: calc(var(--radius) * .75);
	padding: 1rem 1.25rem;
	color: var(--text-2);
	box-shadow: none;
}
.ds .verdict { padding: clamp(18px, 2vw, 32px); border-radius: var(--radius); }
.ds .verdict .big { font-size: var(--t-lede); line-height: 1.4; font-weight: var(--w-light); color: var(--text); letter-spacing: -.01em; }

/* ---------------------------------------------------------------- tooltip */
#tip, .ds #tip {
	font-family: var(--font-body);
	background: var(--bg-elevated);
	color: var(--text);
	border: 1px solid var(--glass-border);
	border-radius: calc(var(--radius) * .6);
	box-shadow: 0 18px 48px var(--shadow);
}

/* ---------------------------------------------------------------- source footer */
.ds footer, .ds .foot {
	margin-top: calc(var(--sp) * 3); padding-top: var(--sp);
	border-top: 1px solid var(--border);
	font-size: .82rem; color: var(--text-2);
}

/* the Zameen map embed */
.ds .map-frame { border: 1px solid var(--glass-border); border-radius: var(--radius); overflow: hidden; background: var(--bg-elevated); }

/* ---------------------------------------------------------------- facts card links */
.ds-links a { color: var(--accent-text); text-decoration: none; }
.ds-links a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- screenshot stage (tools/build_projects.py --shots) */
.ds-stage {
	position: fixed; inset: 0; z-index: 100000;
	display: grid; place-items: center; overflow: hidden;
	background:
		radial-gradient(90% 80% at 15% 0%, hsl(258 90% 62% / .38), transparent 62%),
		radial-gradient(70% 70% at 100% 100%, hsl(258 90% 62% / .18), transparent 60%),
		var(--bg);
}
.ds-stage > .card { margin: 0; transform-origin: center; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }
.ds-shot-mode .mm-header, .ds-shot-mode .mm-cookie { visibility: hidden; }