/* ===========================================================================
   Theme — Report 2026-35, "Human Exposure Across the Polycrisis Century"

   Aesthetic: strata. The report counts exposure as it accumulates, year on
   year, so the page reads like a geological section: the masthead's lower
   edge is built of sediment layers that thicken from left to right — air,
   heat, risk and their overlaps — over a dark slate field (inline SVG data
   URI); every h2 opens with a small three-band stratum. Each hazard keeps
   one colour: air slate-blue, heat orange, risk crimson, overlap plum; the
   avoided years of the levers are green. Cormorant Garamond for display,
   Hind for prose, B612 Mono for figures.

   Loaded after report.css; report.js reads these tokens for chart colours,
   and charts.js reads the --h-* tokens so no hex lives in the script.
   =========================================================================== */

:root {
  --bg: #f6f4f1;
  --bg-card: #ffffff;
  --bg-accent: #eceae5;
  --bg-dark: #1e2228;
  --bg-dark-2: #14171b;

  --text: #1c1f24;
  --text-secondary: #3e434b;
  --text-muted: #6a6f77;
  --text-inverse: #f6f4f1;

  --primary: #2b2f37;
  --primary-light: #4e6a88;
  --accent: #e08a3c;
  --accent-light: #f3b77d;

  --border: #dcd9d2;
  --border-light: #ebe8e2;
  --rule: #c9c5bc;

  /* hazards */
  --h-air: #5f86ad;
  --h-heat: #e07a2f;
  --h-hot29: #a8461a;
  --h-risk: #b8324a;
  --h-two: #6b2c49;
  --h-three: #2e1a24;
  --h-good: #3d8a6a;
  --h-muted: #a8a6a0;

  --chart-blue: #5f86ad;
  --chart-blue-light: #b4c8dc;
  --chart-gold: #d9a441;
  --chart-red: #b8324a;
  --chart-teal: #3d8a6a;
  --chart-gray: #8f8c86;
  --chart-orange: #e07a2f;
  --chart-purple: #6b2c49;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Hind", -apple-system, BlinkMacSystemFont, "system-ui", "Segoe UI", sans-serif;
  --mono: "B612 Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --strata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360'%3E%3Cpolygon points='0 342 8 341 16 339 24 338 32 337 40 336 48 335 56 333 64 332 72 331 80 331 88 330 96 329 104 328 112 328 120 328 128 327 136 327 144 327 152 327 160 327 168 328 176 328 184 329 192 329 200 330 208 331 216 332 224 332 232 333 240 335 248 336 256 337 264 338 272 339 280 340 288 342 296 343 304 344 312 345 320 346 328 347 336 348 344 349 352 350 360 351 368 351 376 352 384 353 392 353 400 353 408 353 416 353 424 353 432 353 440 353 448 352 456 352 464 351 472 351 480 350 488 349 496 348 504 347 512 346 520 345 528 343 536 342 544 341 552 340 560 338 568 337 576 336 584 334 592 333 600 332 608 331 616 330 624 329 632 328 640 327 640 360 632 360 624 360 616 360 608 360 600 360 592 360 584 360 576 360 568 360 560 360 552 360 544 360 536 360 528 360 520 360 512 360 504 360 496 360 488 360 480 360 472 360 464 360 456 360 448 360 440 360 432 360 424 360 416 360 408 360 400 360 392 360 384 360 376 360 368 360 360 360 352 360 344 360 336 360 328 360 320 360 312 360 304 360 296 360 288 360 280 360 272 360 264 360 256 360 248 360 240 360 232 360 224 360 216 360 208 360 200 360 192 360 184 360 176 360 168 360 160 360 152 360 144 360 136 360 128 360 120 360 112 360 104 360 96 360 88 360 80 360 72 360 64 360 56 360 48 360 40 360 32 360 24 360 16 360 8 360 0 360' fill='%238aa5c2' fill-opacity='0.82'/%3E%3Cpolygon points='0 312 8 310 16 308 24 306 32 305 40 303 48 302 56 301 64 300 72 299 80 298 88 298 96 298 104 298 112 298 120 298 128 299 136 299 144 300 152 301 160 303 168 304 176 306 184 307 192 309 200 311 208 313 216 315 224 317 232 319 240 321 248 323 256 325 264 327 272 329 280 331 288 332 296 334 304 336 312 337 320 338 328 339 336 340 344 341 352 341 360 341 368 342 376 342 384 341 392 341 400 340 408 339 416 338 424 337 432 335 440 334 448 332 456 330 464 328 472 326 480 324 488 322 496 320 504 317 512 315 520 313 528 310 536 308 544 306 552 303 560 301 568 299 576 297 584 296 592 294 600 293 608 291 616 290 624 289 632 288 640 288 640 327 632 328 624 329 616 330 608 331 600 332 592 333 584 334 576 336 568 337 560 338 552 340 544 341 536 342 528 343 520 345 512 346 504 347 496 348 488 349 480 350 472 351 464 351 456 352 448 352 440 353 432 353 424 353 416 353 408 353 400 353 392 353 384 353 376 352 368 351 360 351 352 350 344 349 336 348 328 347 320 346 312 345 304 344 296 343 288 342 280 340 272 339 264 338 256 337 248 336 240 335 232 333 224 332 216 332 208 331 200 330 192 329 184 329 176 328 168 328 160 327 152 327 144 327 136 327 128 327 120 328 112 328 104 328 96 329 88 330 80 331 72 331 64 332 56 333 48 335 40 336 32 337 24 338 16 339 8 341 0 342' fill='%23e08a3c' fill-opacity='0.82'/%3E%3Cpolygon points='0 281 8 280 16 278 24 277 32 276 40 276 48 275 56 275 64 275 72 275 80 275 88 276 96 277 104 278 112 279 120 281 128 282 136 284 144 286 152 288 160 290 168 292 176 295 184 297 192 299 200 302 208 304 216 306 224 308 232 310 240 312 248 314 256 316 264 318 272 319 280 320 288 321 296 322 304 322 312 323 320 323 328 323 336 322 344 322 352 321 360 320 368 319 376 317 384 316 392 314 400 312 408 309 416 307 424 304 432 302 440 299 448 296 456 293 464 290 472 288 480 285 488 282 496 279 504 276 512 273 520 271 528 268 536 266 544 264 552 262 560 260 568 259 576 257 584 256 592 255 600 255 608 254 616 254 624 254 632 254 640 255 640 288 632 288 624 289 616 290 608 291 600 293 592 294 584 296 576 297 568 299 560 301 552 303 544 306 536 308 528 310 520 313 512 315 504 317 496 320 488 322 480 324 472 326 464 328 456 330 448 332 440 334 432 335 424 337 416 338 408 339 400 340 392 341 384 341 376 342 368 342 360 341 352 341 344 341 336 340 328 339 320 338 312 337 304 336 296 334 288 332 280 331 272 329 264 327 256 325 248 323 240 321 232 319 224 317 216 315 208 313 200 311 192 309 184 307 176 306 168 304 160 303 152 301 144 300 136 299 128 299 120 298 112 298 104 298 96 298 88 298 80 298 72 299 64 300 56 301 48 302 40 303 32 305 24 306 16 308 8 310 0 312' fill='%23b8324a' fill-opacity='0.82'/%3E%3Cpolygon points='0 262 8 261 16 261 24 260 32 261 40 261 48 261 56 262 64 263 72 264 80 265 88 266 96 268 104 269 112 271 120 273 128 275 136 277 144 278 152 280 160 282 168 284 176 286 184 288 192 289 200 291 208 292 216 293 224 294 232 295 240 296 248 297 256 297 264 297 272 297 280 297 288 297 296 296 304 295 312 294 320 293 328 291 336 289 344 288 352 285 360 283 368 281 376 278 384 276 392 273 400 270 408 268 416 265 424 262 432 259 440 256 448 253 456 250 464 248 472 245 480 243 488 240 496 238 504 236 512 234 520 232 528 231 536 229 544 228 552 227 560 226 568 226 576 226 584 226 592 226 600 226 608 227 616 227 624 228 632 229 640 230 640 255 632 254 624 254 616 254 608 254 600 255 592 255 584 256 576 257 568 259 560 260 552 262 544 264 536 266 528 268 520 271 512 273 504 276 496 279 488 282 480 285 472 288 464 290 456 293 448 296 440 299 432 302 424 304 416 307 408 309 400 312 392 314 384 316 376 317 368 319 360 320 352 321 344 322 336 322 328 323 320 323 312 323 304 322 296 322 288 321 280 320 272 319 264 318 256 316 248 314 240 312 232 310 224 308 216 306 208 304 200 302 192 299 184 297 176 295 168 292 160 290 152 288 144 286 136 284 128 282 120 281 112 279 104 278 96 277 88 276 80 275 72 275 64 275 56 275 48 275 40 276 32 276 24 277 16 278 8 280 0 281' fill='%235a2a3f' fill-opacity='0.82'/%3E%3Cpolygon points='0 254 8 254 16 254 24 254 32 255 40 255 48 256 56 256 64 257 72 258 80 258 88 259 96 260 104 261 112 262 120 262 128 263 136 264 144 265 152 265 160 266 168 266 176 266 184 267 192 267 200 267 208 267 216 267 224 266 232 266 240 265 248 264 256 263 264 262 272 261 280 260 288 258 296 256 304 255 312 253 320 251 328 249 336 247 344 245 352 243 360 240 368 238 376 236 384 233 392 231 400 229 408 226 416 224 424 222 432 220 440 218 448 216 456 214 464 212 472 211 480 209 488 208 496 207 504 206 512 205 520 204 528 203 536 203 544 202 552 202 560 202 568 202 576 202 584 202 592 202 600 203 608 203 616 204 624 205 632 205 640 206 640 230 632 229 624 228 616 227 608 227 600 226 592 226 584 226 576 226 568 226 560 226 552 227 544 228 536 229 528 231 520 232 512 234 504 236 496 238 488 240 480 243 472 245 464 248 456 250 448 253 440 256 432 259 424 262 416 265 408 268 400 270 392 273 384 276 376 278 368 281 360 283 352 285 344 288 336 289 328 291 320 293 312 294 304 295 296 296 288 297 280 297 272 297 264 297 256 297 248 297 240 296 232 295 224 294 216 293 208 292 200 291 192 289 184 288 176 286 168 284 160 282 152 280 144 278 136 277 128 275 120 273 112 271 104 269 96 268 88 266 80 265 72 264 64 263 56 262 48 261 40 261 32 261 24 260 16 261 8 261 0 262' fill='%232e1a24' fill-opacity='0.82'/%3E%3Cpath d='M0 330 L0 330 L16 329 L32 327 L48 326 L64 325 L80 325 L96 324 L112 324 L128 324 L144 325 L160 325 L176 326 L192 328 L208 329 L224 330 L240 332 L256 333 L272 334 L288 335 L304 336 L320 336 L336 336 L352 336 L368 335 L384 334 L400 333 L416 332 L432 331 L448 329 L464 328 L480 327 L496 326 L512 325 L528 324 L544 324 L560 324 L576 324 L592 325 L608 326 L624 327 L640 328' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3Cpath d='M0 288 L0 283 L16 282 L32 282 L48 282 L64 282 L80 283 L96 284 L112 285 L128 286 L144 287 L160 289 L176 290 L192 291 L208 292 L224 293 L240 294 L256 294 L272 294 L288 294 L304 293 L320 292 L336 291 L352 290 L368 288 L384 287 L400 285 L416 284 L432 283 L448 283 L464 282 L480 282 L496 282 L512 283 L528 283 L544 284 L560 286 L576 287 L592 288 L608 290 L624 291 L640 292' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3Cpath d='M0 246 L0 241 L16 241 L32 242 L48 243 L64 245 L80 246 L96 247 L112 249 L128 250 L144 251 L160 251 L176 252 L192 252 L208 252 L224 251 L240 251 L256 250 L272 248 L288 247 L304 246 L320 244 L336 243 L352 242 L368 241 L384 240 L400 240 L416 240 L432 240 L448 241 L464 242 L480 243 L496 244 L512 245 L528 247 L544 248 L560 249 L576 250 L592 251 L608 252 L624 252 L640 252' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3Cpath d='M0 204 L0 203 L16 205 L32 206 L48 207 L64 208 L80 209 L96 210 L112 210 L128 210 L144 210 L160 209 L176 208 L192 207 L208 206 L224 204 L240 203 L256 202 L272 201 L288 200 L304 199 L320 198 L336 198 L352 198 L368 198 L384 199 L400 200 L416 201 L432 202 L448 204 L464 205 L480 207 L496 208 L512 209 L528 209 L544 210 L560 210 L576 210 L592 209 L608 209 L624 208 L640 206' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3Cpath d='M0 162 L0 167 L16 167 L32 168 L48 168 L64 168 L80 167 L96 167 L112 166 L128 165 L144 163 L160 162 L176 161 L192 159 L208 158 L224 157 L240 157 L256 156 L272 156 L288 156 L304 157 L320 157 L336 158 L352 160 L368 161 L384 162 L400 164 L416 165 L432 166 L448 167 L464 168 L480 168 L496 168 L512 168 L528 167 L544 166 L560 165 L576 164 L592 163 L608 161 L624 160 L640 159' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3Cpath d='M0 120 L0 126 L16 125 L32 124 L48 123 L64 122 L80 121 L96 119 L112 118 L128 117 L144 116 L160 115 L176 114 L192 114 L208 114 L224 114 L240 115 L256 116 L272 117 L288 118 L304 120 L320 121 L336 122 L352 123 L368 124 L384 125 L400 126 L416 126 L432 126 L448 126 L464 125 L480 124 L496 123 L512 121 L528 120 L544 119 L560 117 L576 116 L592 115 L608 115 L624 114 L640 114' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3C/svg%3E");
  --bands: linear-gradient(90deg, var(--h-air) 0 25%, var(--h-heat) 25% 50%, var(--h-risk) 50% 75%, var(--h-two) 75% 100%);

  --max-width: 1200px;
}

body { font-size: 1.04rem; line-height: 1.62; }

::selection { background: rgba(224, 138, 60, 0.22); }
:where(a, button, [tabindex], input, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

a { color: var(--primary-light); }
a:hover { color: var(--h-risk); }

.progress__bar { background: var(--bands); }
.skip-link { background: var(--primary); }

/* --- masthead: strata accumulating -------------------------------------------- */

.masthead {
  position: relative;
  color: var(--text-inverse);
  border-bottom: 0;
  padding: 3.3rem var(--gutter) 4.2rem;
  background:
    var(--strata) right bottom / 760px auto no-repeat,
    radial-gradient(ellipse at 20% 0%, rgba(95, 134, 173, 0.22), transparent 55%),
    linear-gradient(180deg, #262b33, #14171b);
}
.masthead .overline { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--accent-light); margin-bottom: 1rem; }
.masthead .overline::before { content: "≡ STRATA DASHBOARD · "; color: #fff; }
.masthead h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.5rem, 6vw, 4.3rem); line-height: 0.98; letter-spacing: -0.01em; max-width: 16ch; color: #fff; }
.masthead .subtitle { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.35rem; color: #d9d4cc; max-width: 54ch; }
.masthead .strapline { font-family: var(--sans); font-style: normal; font-size: 1.04rem; color: #e9e5de; border-left: 3px solid var(--accent); max-width: 66ch; background: rgba(20, 23, 27, 0.55); }
.masthead .meta-row { border-top: 1px solid rgba(255, 255, 255, 0.16); color: #c3bdb3; font-family: var(--mono); font-size: 0.72rem; position: relative; }
.masthead .meta-row strong { color: var(--accent-light); font-family: var(--mono); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.12em; }

/* --- nav --------------------------------------------------------------------- */

.sticky-nav { background: rgba(246, 244, 241, 0.96); border-bottom: 1px solid var(--border); }
.nav-inner a { color: var(--text-muted); font-family: var(--mono); font-size: 0.7rem; }
.nav-inner a:hover { color: var(--text); }
.nav-inner a.is-active { color: var(--primary); border-bottom-color: var(--accent); }

/* --- headings with a stratum ------------------------------------------------------ */

section > h2 {
  position: relative;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: var(--primary);
  border-bottom: 1px solid var(--rule);
  padding: 0 0 0.55rem 2.3rem;
}
section > h2::before {
  content: "";
  position: absolute; left: 0; top: 0.32em;
  width: 1.55rem; height: 0.85em;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--h-air) 0 30%, transparent 30% 36%, var(--h-heat) 36% 64%, transparent 64% 70%, var(--h-risk) 70% 100%);
}
#air > h2::before { background: linear-gradient(to bottom, var(--h-air) 0 100%); }
#heat > h2::before { background: linear-gradient(to bottom, var(--h-heat) 0 100%); }
#risk > h2::before { background: linear-gradient(to bottom, var(--h-risk) 0 100%); }
#overlap > h2::before { background: linear-gradient(to bottom, var(--h-two) 0 55%, transparent 55% 62%, var(--h-three) 62% 100%); }
#levers > h2::before { background: linear-gradient(to bottom, var(--h-good) 0 100%); }
.abstract h2, .endmatter h2 { padding-left: 0; border-bottom: 0; font-family: var(--mono); font-size: 0.8rem; }
.abstract h2::before, .endmatter h2::before { content: none; }
section > .section-dek { font-family: var(--serif); font-style: italic; font-weight: 600; color: var(--text-muted); font-size: 1.28rem; line-height: 1.35; max-width: none; }

.section-rule { border-top: 1px solid var(--border-light); margin: 2.6rem 0 2.8rem; }

/* --- generated blocks ------------------------------------------------------------ */

.abstract { background: var(--bg-card); border: 1px solid var(--border); border-left: 6px solid var(--h-two); border-radius: 4px; }
.abstract h2 { color: var(--primary); letter-spacing: 0.14em; }
.endmatter .kw { background: var(--bg-accent); border-color: var(--border); font-family: var(--mono); font-size: 0.66rem; }
.endmatter dt { font-family: var(--mono); font-size: 0.64rem; }

/* --- KPI board ------------------------------------------------------------------------ */

.kpi-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 1.6rem 0; }
.kpi { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.05rem 0.85rem; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.kpi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--k, var(--h-two)); }
.kpi--air { --k: var(--h-air); }
.kpi--heat { --k: var(--h-heat); }
.kpi--risk { --k: var(--h-risk); }
.kpi--two { --k: var(--h-two); }
.kpi--good { --k: var(--h-good); }
.kpi-value { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.kpi-label { font-size: 0.88rem; line-height: 1.42; color: var(--text-secondary); margin-top: 0.45rem; flex: 1; }
.kpi-source { font-family: var(--mono); font-size: 0.6rem; color: var(--text-muted); margin-top: 0.6rem; border-top: 1px solid var(--border-light); padding-top: 0.4rem; margin-bottom: 0.3rem; }

/* --- readout ------------------------------------------------------------------------- */

.readout { background: var(--bg-dark); border-radius: 4px; padding: 1.15rem 1.4rem 0.45rem; margin: 1.6rem 0; position: relative; overflow: hidden; border-bottom: 6px solid transparent; border-image: var(--bands) 1; }
.readout-title { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-light); margin: 0 0 0.4rem !important; }
.readout p { color: #e1ddd5; text-align: justify; hyphens: auto; -webkit-hyphens: auto; position: relative; }
.readout strong { color: #fff; }

/* --- panels ---------------------------------------------------------------------------- */

.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.2rem 0; }
.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 1.05rem 1.15rem 0.95rem; min-width: 0; }
.panel--wide { grid-column: 1 / -1; }
.panel--hero { margin: 1.2rem 0; padding: 1.15rem 1.25rem 1.05rem; border-top: 4px solid var(--h-two); }
.panel-head { border-bottom: 1px solid var(--border-light); margin-bottom: 0.75rem; padding-bottom: 0.55rem; }
.panel-title { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; line-height: 1.15; color: var(--text); margin: 0 !important; }
.panel-meta { font-family: var(--mono); font-size: 0.64rem; color: var(--text-muted); margin: 0.25rem 0 0.4rem !important; }
.panel-note { font-size: 0.87rem; line-height: 1.5; color: var(--text-muted); margin: 0.6rem 0 0 !important; text-align: left !important; }
.panel canvas { max-width: 100%; }
.panel .chart-frame { height: 310px; }
.panel .chart-frame--tall { height: 380px; }
.panel .chart-frame--short { height: 240px; }

.stat-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0.85rem 1rem; border-left: 6px solid var(--k, var(--h-two)); }
.stat-tile--air { --k: var(--h-air); }
.stat-tile--heat { --k: var(--h-heat); }
.stat-tile--risk { --k: var(--h-risk); }
.stat-tile--two { --k: var(--h-two); }
.stat-tile--three { --k: var(--h-three); }
.stat-tile--good { --k: var(--h-good); }
.stat-tile-value { font-family: var(--serif); font-weight: 700; font-size: 1.75rem; line-height: 1.05; color: var(--text); margin: 0 !important; font-variant-numeric: lining-nums tabular-nums; }
.stat-tile-label { font-size: 0.84rem; color: var(--text-muted); margin: 0.2rem 0 0 !important; text-align: left !important; line-height: 1.4; }
.tile-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 1rem 0; }
.tile-row--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* --- controls ---------------------------------------------------------------------------- */

.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 22px; margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border-light); }
.slider { display: grid; gap: 3px; }
.slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.slider label, .seg-wrap .seg-label { font-family: var(--sans); font-weight: 600; font-size: 0.92rem; color: var(--text); }
.slider output { font-family: var(--mono); font-size: 0.76rem; color: var(--accent); white-space: nowrap; }
.slider .hint { font-size: 0.8rem; line-height: 1.35; color: var(--text-muted); margin: 0 !important; text-align: left !important; }
.slider input[type="range"] { width: 100%; accent-color: var(--accent); margin: 2px 0; }
.seg-wrap { display: grid; gap: 5px; }
.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: var(--bg-card); width: fit-content; max-width: 100%; }
.segmented button { font: inherit; font-family: var(--mono); font-size: 0.7rem; padding: 0.42rem 0.72rem; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--rule); }
.segmented button.is-on { background: var(--primary); color: #fff; }
.calc-note { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); margin: 0.6rem 0 0 !important; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0.8rem; }
.preset-row button { font: inherit; font-family: var(--mono); font-size: 0.7rem; padding: 0.38rem 0.75rem; border: 1px solid var(--text); border-radius: 4px; background: var(--bg-card); color: var(--text); cursor: pointer; }
.preset-row button.is-on, .preset-row button:hover { background: var(--bg-dark); color: #fff; }

/* --- map -------------------------------------------------------------------------------- */

.atlas-layout { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.atlas-wrap { position: relative; border-radius: 4px; overflow: hidden; background: #e8e6e1; border: 1px solid var(--border); }
.atlas { display: block; width: 100%; height: auto; }
.atlas .atlas-sea { fill: #e8e6e1; }
.atlas .atlas-land path { fill: #d5d2cb; stroke: #fff; stroke-width: 0.45; stroke-linejoin: round; transition: fill 0.25s; }
.atlas .atlas-dots circle { fill: #d5d2cb; stroke: var(--text); stroke-width: 0.5; }
.atlas [data-iso].is-in { cursor: pointer; }
.atlas [data-iso].is-in:hover { stroke: var(--text); stroke-width: 1.3; }
.atlas [data-iso].is-pick { stroke: var(--accent); stroke-width: 2; }
.atlas-corner { position: absolute; left: 10px; bottom: 8px; font-family: var(--mono); font-size: 0.58rem; color: var(--text-muted); background: rgba(255, 255, 255, 0.85); padding: 1px 6px; border-radius: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0.6rem 0 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.66rem; color: var(--text-secondary); }
.legend i { width: 14px; height: 10px; border-radius: 2px; flex: none; }
.country-card { border: 1px solid var(--border); border-radius: 4px; background: var(--bg); padding: 0.85rem 0.95rem; min-height: 250px; border-top: 6px solid var(--cc, var(--rule)); }
.country-card .cc-kicker { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0 !important; }
.country-card h3 { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--primary); margin: 0.05rem 0 0.15rem; line-height: 1.1; }
.country-card .cc-class { font-family: var(--mono); font-size: 0.68rem; margin: 0 0 0.55rem !important; color: var(--text-secondary); text-align: left !important; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 0.88rem; margin: 0; }
.kv dt { color: var(--text-secondary); display: flex; align-items: center; gap: 7px; }
.kv dt i { width: 10px; height: 10px; border-radius: 2px; }
.kv dd { margin: 0; font-family: var(--mono); font-size: 0.74rem; color: var(--text); text-align: right; }
.country-card .cc-facts { font-family: var(--mono); font-size: 0.64rem; line-height: 1.5; color: var(--text-muted); margin: 0.6rem 0 0 !important; text-align: left !important; }
.strip { display: flex; height: 14px; margin-top: 0.7rem; border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
.strip span { flex: 1; }
.strip-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.6rem; color: var(--text-muted); margin-top: 3px; }

/* --- references, footer --------------------------------------------------------------------- */

.ref-list .ref-org { font-family: var(--mono); color: var(--primary-light); font-size: 0.64rem; }
.report-footer { border-top: 0; position: relative; padding-top: calc(3rem + 6px); }
.report-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--bands); }
.footer-inner h3 { color: #fff; font-family: var(--serif); font-weight: 700; font-size: 1.5rem; }
.footer-inner a { color: var(--accent-light); }
.cite-box { border-left-color: var(--accent); }

/* --- responsive ------------------------------------------------------------------------------ */

@media (max-width: 1000px) {
  .kpi-board, .tile-row, .tile-row--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atlas-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .masthead { padding-top: 2.2rem; background: var(--strata) right bottom / 520px auto no-repeat, linear-gradient(180deg, #262b33, #14171b); }
  .segmented button { padding: 0.36rem 0.5rem; font-size: 0.66rem; }
}
@media (max-width: 420px) {
  .kpi-board, .tile-row, .tile-row--five { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .controls, .preset-row { display: none; }
  .masthead, .readout, .report-footer::before, .atlas-wrap { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}