/* Chart v1 is scoped; the established homepage and native navigation stay intact. */
.ct-app,.ct-chart-feature,.ct-share,.ct-story-actions{--ct-ink:#182f35;--ct-accent:#18766a;--ct-border:#d9e3e2;--ct-surface:#fff;--ct-muted:#617279;color:var(--ct-ink);font-family:inherit}
.ct-app{max-width:1120px;margin:0 auto;padding:36px 20px 64px}.ct-chart-feature{max-width:1120px;margin:40px auto;padding:0 20px}.ct-app a,.ct-chart-feature a{color:var(--ct-accent)}
.ct-page-header{max-width:780px;margin:24px 0 32px}.ct-page-header h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.14;font-weight:750}.ct-page-header p{font-size:1.1rem;line-height:1.6}
.ct-eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--ct-accent);margin:0 0 12px}.ct-eyebrow span,.ct-muted{color:var(--ct-muted)}.ct-muted{font-size:.85rem}
.ct-section-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:24px 0 18px}.ct-section-heading h2{font-size:1.45rem;margin:0}.ct-section-heading>a{font-size:.9rem;flex-shrink:0}
.ct-panel,.ct-chart-card{border:1px solid var(--ct-border);border-radius:16px;padding:24px;background:#fff}
/* Every card is the same shape: eyebrow, two lines of title, one hero line, a figure in a fixed
   box, two lines of finding, one source line, the actions. Nothing here grows with its data. */
.ct-chart-card{display:flex;flex-direction:column;min-width:0}.ct-chart-card h3{font-size:1.2rem;line-height:1.35;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}.ct-chart-card h3 a{text-decoration:none;color:var(--ct-ink)}.ct-chart-card .ct-hero{flex-wrap:nowrap;white-space:nowrap;min-height:1.34em;overflow:hidden}.ct-chart-card .ct-hero__chip{overflow:hidden;text-overflow:ellipsis;min-width:0}.ct-chart-card .ct-card-takeaway{min-height:3.1em}.ct-chart-card>.ct-muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:10px 0 0}.ct-chart-card .ct-actions{margin-top:auto;padding-top:14px}
/* Today's chart: the reading column and the drawing side by side from 900px, one column below. */
.ct-today{border:1px solid var(--ct-border);border-top:4px solid var(--ct-accent);border-radius:18px;background:#fff;padding:28px;min-width:0}.ct-today>*{max-width:760px}.ct-today__title{font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.18;margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ct-today__title a{color:var(--ct-ink);text-decoration:none}.ct-today .ct-takeaway{font-size:1.05rem;margin:18px 0 6px}.ct-takeaway{line-height:1.6;margin:20px 0}.ct-actions .ct-button{max-width:100%;white-space:normal;text-align:center}
/* The card's headline number: what the chart says, before the drawing says it.
   The arrow wears the accent, the words never do. */
.ct-hero{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 16px}
.ct-hero__value{font-size:clamp(1.6rem,4.4vw,2.2rem);font-weight:750;line-height:1.1;letter-spacing:-.01em;color:var(--ct-ink)}
.ct-hero__unit{font-size:.42em;font-weight:600;margin-left:.34em;color:var(--ct-muted)}
.ct-hero__chip{font-size:.85rem;line-height:1.4;color:var(--ct-muted)}.ct-hero__arrow{color:var(--ct-accent)}
/* The finding, on the card itself; two lines, because a card is not the detail page. */
.ct-card-takeaway{font-size:.92rem;line-height:1.55;margin:14px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Announced, never drawn: on a pointer the tooltip already carries the value. */
.ct-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ct-figure{position:relative;margin:0}.ct-figure figcaption{margin-bottom:18px}
/* The line form: one drawing, scaled by its container, in the same ink and accent as the bars. */
.ct-line{display:block;width:100%;height:auto;overflow:visible;margin-bottom:4px;font-family:inherit}.ct-line-wash-top{stop-color:var(--ct-accent);stop-opacity:.16}.ct-line-wash-base{stop-color:var(--ct-accent);stop-opacity:0}.ct-line-area{stroke:none}.ct-line-path{fill:none;stroke:var(--ct-accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.ct-line-halo{fill:var(--ct-accent);opacity:.18;pointer-events:none}
/* Every point is a hit target for click-to-inspect; only the called-out ones are drawn. */
.ct-line-dot{fill:transparent;cursor:pointer;pointer-events:all}.ct-line-dot--callout,.ct-line-dot[aria-pressed=true]{fill:var(--ct-accent);stroke:var(--ct-surface);stroke-width:2}.ct-line-dot:not(.ct-line-dot--callout)[aria-pressed=true]{r:5}.ct-line-grid,.ct-line-xtick{stroke:var(--ct-border);stroke-width:1}.ct-line-base{stroke-width:1.75}.ct-line-tick,.ct-line-x,.ct-line-unit{fill:currentColor;opacity:.6;font-size:18px}.ct-line-x{font-size:16px}.ct-line-unit{font-size:15px}.ct-line-callout{fill:currentColor;font-size:21px;font-weight:600}.ct-line-callout:not(.ct-line-callout--latest){paint-order:stroke;stroke:var(--ct-surface);stroke-width:2;stroke-linejoin:round}.ct-line-pill{fill:var(--ct-accent)}.ct-line-callout--latest{fill:var(--ct-surface);font-size:26px;font-weight:700}
/* The drawing is scaled down on a phone, so its type is scaled up in viewBox units. The latest
   value keeps one size everywhere, because its pill is measured in charts/services.py. */
@media(max-width:760px){.ct-line-tick{font-size:24px}.ct-line-unit{font-size:20px}.ct-line-x{font-size:21px}.ct-line-callout{font-size:27px}.ct-line-callout--latest{font-size:26px}}
/* Every compact figure is one box: the 800×360 viewBox, nothing above or below it. A drawing
   that once grew a row at a time now scales inside it, so a card's height is its layout. */
.ct-figure--compact{display:block;aspect-ratio:800/360;overflow:hidden}
.ct-figure--compact>svg{display:block;width:100%;height:100%;margin:0}
.ct-figure--compact figcaption,.ct-figure--compact details{display:none}
/* A card figure is about 300 px wide, where an axis in full is unreadable noise rather than
   information. The compact figure is a sparkline: a faint grid on its baseline, the first and
   last labels, and the called-out values. The card's hero row carries the unit, and its footer
   line says what the axis spans, so nothing is lost by not drawing them here. */
.ct-figure--compact .ct-line-tick,.ct-figure--compact .ct-line-unit,.ct-figure--compact .ct-line-xtick{display:none}
.ct-figure--compact .ct-line-grid:not(.ct-line-base){opacity:.5}
.ct-figure--compact .ct-line-x:not(.ct-line-x--edge){display:none}
/* At a third of its width the sparkline needs a heavier stroke and a deeper wash, or it is a
   faint scratch in an empty box rather than a shape. */
.ct-figure--compact .ct-line-path{stroke-width:4}.ct-figure--compact .ct-line-wash-top{stop-opacity:.22}
.ct-figure--compact .ct-line-x{font-size:24px}.ct-figure--compact .ct-line-callout{font-size:30px}.ct-figure--compact .ct-line-callout--latest{font-size:26px}
/* The hover layer: a crosshair that snaps to an observation, a marker on the line and one
   tooltip per figure. Every number it shows was formatted in charts/services.py. */
.ct-line{touch-action:pan-y}.ct-line:focus-visible{outline:3px solid #c48a30;outline-offset:2px}
.ct-line-hit{fill:none;pointer-events:all}
.ct-line-cursor{stroke:var(--ct-ink);stroke-width:1;opacity:0;pointer-events:none}
.ct-line-hover{fill:var(--ct-accent);stroke:var(--ct-surface);stroke-width:2;opacity:0;pointer-events:none}
.ct-line.is-hovering .ct-line-cursor{opacity:.35}.ct-line.is-hovering .ct-line-hover{opacity:1}
.ct-line-cursor,.ct-line-hover{transition:opacity 90ms ease,x1 90ms ease,x2 90ms ease,cx 90ms ease,cy 90ms ease}
.ct-tip{position:absolute;z-index:3;left:0;top:0;display:grid;gap:2px;padding:8px 12px;border:1px solid var(--ct-border);border-radius:10px;background:var(--ct-surface);box-shadow:0 6px 18px rgba(24,47,53,.14);pointer-events:none;font-size:.85rem;line-height:1.35;white-space:nowrap}
.ct-tip[hidden]{display:none}.ct-tip__value{font-size:1rem}.ct-tip__label,.ct-tip__delta{opacity:.72}.ct-tip__arrow{color:var(--ct-accent)}
/* Draw-in on first view. The classes come from app.js, so without it nothing is hidden. */
/* The transition is declared on the drawn state alone: were it on is-drawing, hiding the
   line at setup would itself animate, and the chart would undraw before it drew. */
.ct-line.is-drawn .ct-line-path{transition:stroke-dashoffset 900ms ease-out}
.ct-line.is-drawing .ct-line-area,.ct-line.is-drawing .ct-line-dot--callout,.ct-line.is-drawing .ct-line-pill,.ct-line.is-drawing .ct-line-callout,.ct-line.is-drawing .ct-line-halo{opacity:0}
.ct-line.is-drawn .ct-line-area,.ct-line.is-drawn .ct-line-dot--callout,.ct-line.is-drawn .ct-line-pill,.ct-line.is-drawn .ct-line-callout{opacity:1;transition:opacity 200ms ease 900ms}
.ct-line.is-drawn .ct-line-halo{opacity:.18;transition:opacity 200ms ease 900ms}
/* The columns form shares the line's chrome. The highest column wears the full accent and
   the rest step back, so the shape of the fortnight reads before any single day does. */
.ct-col{fill:var(--ct-accent);opacity:.7;transform-box:fill-box;transform-origin:50% 100%}.ct-col--top{opacity:1}
.ct-col-dot{fill:transparent;cursor:pointer;pointer-events:all}.ct-col-dot[aria-pressed=true]{fill:var(--ct-accent);stroke:var(--ct-surface);stroke-width:2;r:6}
/* Columns grow from the baseline in turn; the values wait for the last one to land. --ct-grown is set in app.js. */
.ct-columns.is-growing .ct-col{transform:scaleY(0)}
.ct-columns.is-growing .ct-col-value,.ct-columns.is-growing .ct-line-pill,.ct-columns.is-growing .ct-line-callout--latest{opacity:0}
.ct-columns.is-grown .ct-col{transform:scaleY(1);transition:transform 600ms cubic-bezier(.2,.7,.3,1)}
.ct-columns.is-grown .ct-col-value,.ct-columns.is-grown .ct-line-pill,.ct-columns.is-grown .ct-line-callout--latest{opacity:1;transition:opacity 200ms ease var(--ct-grown,700ms)}
@media(max-width:760px){.ct-tip{padding:6px 10px;font-size:.78rem}.ct-tip__value{font-size:.92rem}}
@media(prefers-reduced-motion:reduce){.ct-line-cursor,.ct-line-hover{transition:none}}
.ct-point-status{font-size:.8rem;color:var(--ct-muted)}.ct-source{font-size:.8rem;margin-top:14px;line-height:1.6;color:var(--ct-muted)}
.ct-table{width:100%;font-size:.9rem;margin-top:12px}.ct-table td,.ct-table th{padding:8px;border-bottom:1px solid var(--ct-border);text-align:left}.ct-table td{text-align:right}.ct-figure summary{min-height:44px;padding-top:12px;cursor:pointer}
.ct-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:18px 0 0}.ct-actions--wrap{justify-content:flex-start;flex-wrap:wrap}.ct-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid var(--ct-accent);border-radius:8px;background:var(--ct-accent);color:white!important;font:inherit;font-size:.9rem;text-decoration:none;cursor:pointer;white-space:nowrap}.ct-button--quiet{color:var(--ct-accent)!important;background:transparent}.ct-button:focus-visible,.ct-app a:focus-visible,.ct-chart-feature a:focus-visible{outline:3px solid #c48a30;outline-offset:3px}
.ct-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.ct-method{max-width:760px;margin:38px 0;line-height:1.7;overflow-wrap:anywhere}.ct-method h2{font-size:1.4rem}.ct-search{margin-bottom:28px}.ct-search>label{display:block;margin-bottom:8px}.ct-search>div{display:flex;gap:8px}.ct-search input,.ct-search select{min-height:44px;border:1px solid var(--ct-border);border-radius:8px;padding:10px;min-width:0}.ct-search input{flex:1}.ct-notice{padding:12px;background:#f3f6f3}
.ct-share-dialog{width:min(440px,calc(100% - 24px));border:1px solid #d9e3e2;border-radius:16px;padding:24px;color:#182f35;background:#fff;max-height:80dvh;overflow:auto}.ct-share-dialog::backdrop{background:#122a35aa}.ct-share-dialog h2{font-size:1.4rem}.ct-share-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.ct-share-methods a,.ct-share-methods button{display:flex;align-items:center;min-height:44px;padding:10px;color:#176f63;border:1px solid #d9e3e2;background:transparent;border-radius:8px;text-decoration:none;font:inherit}.ct-share-dialog textarea{width:100%;height:110px}.ct-native-image-label{display:none}html.is-native .ct-web-download{display:none}html.is-native .ct-native-image-label{display:inline}
@media(max-width:760px){.ct-today{padding:18px}.ct-chart-feature{padding:0 16px}.ct-chart-grid{grid-template-columns:1fr}.ct-app{padding:24px 16px 48px}.ct-panel{padding:18px}.ct-section-heading{align-items:flex-start;flex-wrap:wrap}.ct-search>div{flex-wrap:wrap}.ct-search input{flex-basis:100%}.ct-share-dialog{margin:auto auto 16px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}.ct-share-methods{grid-template-columns:1fr 1fr}}
@media(prefers-color-scheme:dark){html[data-bs-theme=dark] .ct-app,html[data-bs-theme=dark] .ct-chart-feature{--ct-ink:#e6efeb;--ct-accent:#73bdab;--ct-border:#405953;--ct-surface:#1d302b;--ct-muted:#a3bab2}html[data-bs-theme=dark] .ct-panel,html[data-bs-theme=dark] .ct-chart-card,html[data-bs-theme=dark] .ct-today{background:#1d302b}}
/* Blog charts lifted into the rail: the post's own SVG, sized to the card. */
/* Share beside a page title: the chart pages, an article, the People and Data Stories headers. */
.ct-actions--head{margin:14px 0 18px}.ct-share{display:inline-flex;flex:0 0 auto;max-width:100%}.pp-header .ct-share{margin:.1rem 0 .9rem}.ct-story-actions{z-index:2;margin-top:14px}
/* Chart cards in the shared rail (static/css/rail.css): borderless story-style cards with a topic pill. The rail
   bleeds by half of --bs-gutter-x, so the section's side padding is defined from the same variable. */
.ct-chart-feature{--bs-gutter-x:40px;padding-left:calc(var(--bs-gutter-x)*.5);padding-right:calc(var(--bs-gutter-x)*.5)}
.ct-pill{display:inline-block;padding:3px 10px;border-radius:999px;background:#e3f1ee;color:#135e55;letter-spacing:.08em}.ct-eyebrow .ct-pill{color:#135e55}
.rail .ct-chart-card{display:flex;flex-direction:column;padding:22px}.rail .ct-chart-card h3{min-height:0;margin:0 0 12px}.rail .ct-chart-card .ct-actions{margin-top:auto;padding-top:14px}
@media(max-width:760px){.ct-chart-feature{--bs-gutter-x:32px}.rail .ct-chart-card{padding:18px}}
@media(prefers-color-scheme:dark){html[data-bs-theme=dark] .ct-pill,html[data-bs-theme=dark] .ct-eyebrow .ct-pill{background:#27443d;color:#bfe3d9}html[data-bs-theme=dark] .rail .ct-chart-card{--rail-card-bg:#1d302b}}
.ct-chart-card--story .ct-story-plot{aspect-ratio:16/9;overflow:hidden;margin:4px 0}.ct-chart-card--story .ct-story-plot svg{display:block;width:100%;height:100%}.ct-chart-card--story .ct-eyebrow{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* The story a chart comes from, as one tappable card under the chart's actions. */
.ct-story-cta{display:flex;align-items:center;gap:18px;max-width:760px;margin:28px 0 0;padding:14px;border:1px solid var(--ct-border);border-left:4px solid var(--ct-accent);border-radius:16px;background:#fff;color:var(--ct-ink)!important;text-decoration:none;box-shadow:0 6px 18px rgba(24,47,53,.06);transition:box-shadow .2s,transform .2s}.ct-story-cta:hover{box-shadow:0 10px 26px rgba(24,47,53,.12);transform:translateY(-1px)}.ct-story-cta img{flex:0 0 112px;width:112px;height:112px;object-fit:cover;border-radius:12px}.ct-story-cta__body{display:flex;flex-direction:column;gap:6px;min-width:0}.ct-story-cta .ct-eyebrow{margin:0}.ct-story-cta strong{font-size:1.15rem;line-height:1.3;overflow-wrap:anywhere}.ct-story-cta__go{color:var(--ct-accent);font-weight:600;font-size:.95rem}
@media(max-width:760px){.ct-story-cta{gap:14px;padding:12px}.ct-story-cta img{flex-basis:80px;width:80px;height:80px}.ct-story-cta strong{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.ct-story-cta{transition:none}.ct-story-cta:hover{transform:none}}
@media(prefers-color-scheme:dark){html[data-bs-theme=dark] .ct-story-cta{background:#1d302b}}

/* ── The ranked form ───────────────────────────────────────────────────────────
   One bar per observation, measured from a shared zero, with the label read down
   the left and the value at the bar's end. The top observation wears the topic
   accent in full and the rest step back to 45 %, so the ranking reads before any
   single row does. */
.ct-ranked{display:block;width:100%;height:auto;font-family:inherit;touch-action:pan-y}
.ct-rbar-hit{fill:none;pointer-events:all}
.ct-rbar{cursor:pointer}
.ct-rbar-fill{fill:var(--ct-accent);opacity:.45;transform-box:fill-box;transform-origin:0 50%}
.ct-rbar--top .ct-rbar-fill{opacity:1}
.ct-rbar-track{fill:var(--ct-ink);opacity:.07}
.ct-rbar-label{fill:currentColor;opacity:.72;font-size:18px}
.ct-rbar--top .ct-rbar-label{opacity:1;font-weight:700}
.ct-rbar-value{fill:currentColor;font-size:20px;font-weight:600}
/* A value printed inside a bar sits on whatever that bar is filled with. On a quiet
   45 % tint that is ink; on a bar in the full topic accent, or in a capacity band, it
   is white carried on a dark outline, which stays legible on every hue in both themes. */
.ct-rbar--top .ct-rbar-value--inside,.ct-rbar--high .ct-rbar-value--inside,
.ct-rbar--mid .ct-rbar-value--inside,.ct-rbar--low .ct-rbar-value--inside{fill:#fff;paint-order:stroke;stroke:rgba(12,26,22,.55);stroke-width:3;stroke-linejoin:round}
.ct-rbar-more{fill:currentColor;opacity:.6;font-size:18px}
.ct-figure--compact .ct-rbar-label{font-size:22px}.ct-figure--compact .ct-rbar-value{font-size:26px}
.ct-figure--compact .ct-rbar-more{font-size:22px}
.ct-rbar:hover .ct-rbar-fill{opacity:1}
.ct-rbar:focus-visible{outline:3px solid #c48a30;outline-offset:2px}
.ct-rbar[aria-pressed=true] .ct-rbar-fill{opacity:1}
.ct-rbar[aria-pressed=true] .ct-rbar-label{opacity:1;text-decoration:underline}
/* A capacity chart keeps the dam-levels bands: the bar says how full, not how it ranks. */
.ct-rbar--high .ct-rbar-fill{fill:#22c55e;opacity:1}.ct-rbar--mid .ct-rbar-fill{fill:#f59e0b;opacity:1}
.ct-rbar--low .ct-rbar-fill{fill:#ef4444;opacity:1}
/* Bars grow from zero in turn, like the columns grow from the baseline. --ct-grown is set in app.js. */
.ct-ranked.is-growing .ct-rbar-fill{transform:scaleX(0)}
.ct-ranked.is-growing .ct-rbar-value,.ct-ranked.is-growing .ct-rbar-more{opacity:0}
.ct-ranked.is-grown .ct-rbar-fill{transform:scaleX(1);transition:transform 520ms cubic-bezier(.2,.7,.3,1)}
.ct-ranked.is-grown .ct-rbar-value{opacity:1;transition:opacity 200ms ease var(--ct-grown,620ms)}
.ct-ranked.is-grown .ct-rbar-more{opacity:.6;transition:opacity 200ms ease var(--ct-grown,620ms)}
/* ── Colour by topic ───────────────────────────────────────────────────────────
   One accent per subject, set on the card and on the figure, so the line stroke,
   the wash, the latest-value pill, the columns, the ranked bars, the hero arrow
   and the topic pill all follow from one declaration. */
[data-topic=crime]{--ct-accent:#8f2f2f}[data-topic=water]{--ct-accent:#1d6fa5}
[data-topic=weather]{--ct-accent:#9c6309}[data-topic=property]{--ct-accent:#7a5a2f}
[data-topic=economy]{--ct-accent:#18766a}[data-topic=energy]{--ct-accent:#c2410c}
[data-topic=population]{--ct-accent:#a5443a}[data-topic=transport]{--ct-accent:#5b4bb5}
[data-topic=tourism]{--ct-accent:#b0561a}[data-topic=environment]{--ct-accent:#3f7d2a}
[data-topic=politics]{--ct-accent:#7a3a6a}
/* The pill: a 12 % tint of the accent behind a darkened step of it, so every topic
   clears 4.5:1 even where the accent itself is a mid-tone yellow or orange. */
.ct-pill{background:color-mix(in srgb,var(--ct-accent) 12%,transparent);color:color-mix(in srgb,var(--ct-accent) 76%,#000)}
.ct-eyebrow .ct-pill{color:color-mix(in srgb,var(--ct-accent) 76%,#000)}
/* ── The topic strip ───────────────────────────────────────────────────────────
   Every subject that has charts, with its count, so the rail is not the whole map. */
.ct-topics{margin:22px 0 6px;min-width:0}
.ct-topics h3{font-size:.95rem;font-weight:700;margin:0 0 10px}
.ct-topics__list{display:flex;gap:8px;margin:0;padding:0 0 6px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.ct-topics__list::-webkit-scrollbar{display:none}
.ct-topics__list>li{flex:0 0 auto}
.ct-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid transparent;background:color-mix(in srgb,var(--ct-accent) 12%,transparent);color:color-mix(in srgb,var(--ct-accent) 76%,#000)!important;font-size:.88rem;font-weight:600;text-decoration:none;white-space:nowrap}
.ct-chip span{opacity:.75;font-weight:500}
.ct-chip:hover{border-color:var(--ct-accent)}
/* The homepage subline under "Today's chart": how much there is, and that it is all sourced. */
.ct-section-sub{margin:-8px 0 16px}
/* ── The feature panel ─────────────────────────────────────────────────────────
   From 900px the reading column sits beside the drawing, which is centred against
   it, so the panel is about the height of a paragraph rather than a page. */
@media(min-width:900px){
  .ct-today{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"title fig" "hero fig" "take fig" "src fig" "act fig";column-gap:34px;align-items:start}
  .ct-today>*{max-width:none}
  .ct-today__title{grid-area:title}
  .ct-today>.ct-hero{grid-area:hero}
  .ct-today>.ct-figure{grid-area:fig;align-self:center}
  .ct-today .ct-takeaway{grid-area:take;margin:0 0 6px}
  .ct-today .ct-source{grid-area:src}
  .ct-today .ct-actions{grid-area:act;align-self:end}
}
/* A ranking of twenty rows is taller than it is wide; it is fitted into the panel
   rather than allowed to set the panel's height. */
.ct-today .ct-ranked{max-height:380px}
/* ── Dark mode ─────────────────────────────────────────────────────────────────
   Not an automatic flip: a lighter step of each topic hue, every one measured at
   4.5:1 or better against the dark panel (#1d302b). */
@media(prefers-color-scheme:dark){
  html[data-bs-theme=dark] [data-topic=crime]{--ct-accent:#d47c7c}
  html[data-bs-theme=dark] [data-topic=water]{--ct-accent:#3a9cdc}
  html[data-bs-theme=dark] [data-topic=weather]{--ct-accent:#d08511}
  html[data-bs-theme=dark] [data-topic=property]{--ct-accent:#ba8c4d}
  html[data-bs-theme=dark] [data-topic=economy]{--ct-accent:#22a695}
  html[data-bs-theme=dark] [data-topic=energy]{--ct-accent:#f26c35}
  html[data-bs-theme=dark] [data-topic=population]{--ct-accent:#d98a74}
  html[data-bs-theme=dark] [data-topic=transport]{--ct-accent:#968cd0}
  html[data-bs-theme=dark] [data-topic=tourism]{--ct-accent:#e07a2d}
  html[data-bs-theme=dark] [data-topic=environment]{--ct-accent:#54a738}
  html[data-bs-theme=dark] [data-topic=politics]{--ct-accent:#c27fb2}
  /* On a dark panel the accent is already the light end of its ramp, so the tint
     lifts the background and the text keeps the accent itself. */
  html[data-bs-theme=dark] .ct-pill,html[data-bs-theme=dark] .ct-eyebrow .ct-pill,html[data-bs-theme=dark] .ct-chip{background:color-mix(in srgb,var(--ct-accent) 18%,transparent);color:var(--ct-accent)!important}
  html[data-bs-theme=dark] .ct-rbar-track{fill:#e6efeb}
}

/* ── The radar form ────────────────────────────────────────────────────────────
   The drawing on the left says what the mix is; the ranked list on the right says
   how much, because a radar on its own is a shape with no readable numbers. */
.ct-radar,.ct-radars,.ct-bubble,.ct-heat{display:block;width:100%;height:auto;font-family:inherit;touch-action:pan-y}
.ct-radar-ring,.ct-radars-ring{fill:none;stroke:var(--ct-border);stroke-width:1}
.ct-radar-spoke{stroke:var(--ct-border);stroke-width:1}
.ct-radar-shape{fill:var(--ct-accent);fill-opacity:.22;stroke:var(--ct-accent);stroke-width:3;stroke-linejoin:round}
.ct-radar-dot{fill:var(--ct-accent);stroke:var(--ct-surface);stroke-width:2}
.ct-radar-axis{fill:currentColor;opacity:.72;font-size:calc(17px * var(--ct-axis-scale, 1))}
.ct-radar-name{fill:currentColor;opacity:.78;font-size:18px}
.ct-radar-value{fill:currentColor;font-size:20px;font-weight:600}
.ct-radar-track{fill:var(--ct-ink);opacity:.08}
.ct-radar-bar{fill:var(--ct-accent);opacity:.45;transform-box:fill-box;transform-origin:0 50%}
.ct-radar-point{cursor:pointer}
.ct-radar-point--top .ct-radar-bar{opacity:1}
.ct-radar-point--top .ct-radar-name,.ct-radar-point--top .ct-radar-axis{opacity:1;font-weight:700}
.ct-radar-point:hover .ct-radar-bar,.ct-radar-point[aria-pressed=true] .ct-radar-bar{opacity:1}
.ct-radar-point[aria-pressed=true] .ct-radar-name{opacity:1;text-decoration:underline}
.ct-radar-point:focus-visible{outline:3px solid #c48a30;outline-offset:2px}
/* ── The radar small multiples ─────────────────────────────────────────────────
   Each mini is drawn against its own maximum, so the shapes compare and the sizes
   do not; the axes are named once under the grid rather than around every one. */
.ct-radars-shape{fill:var(--ct-accent);fill-opacity:.3;stroke:var(--ct-accent);stroke-width:2.5;stroke-linejoin:round}
.ct-radars-name{fill:currentColor;opacity:.82;font-size:16px}
.ct-radars-legend{fill:currentColor;opacity:.62;font-size:15px}
.ct-radars-mini{cursor:pointer}
.ct-radars-mini:hover .ct-radars-shape,.ct-radars-mini[aria-pressed=true] .ct-radars-shape{fill-opacity:.55}
.ct-radars-mini[aria-pressed=true] .ct-radars-name{opacity:1;font-weight:700}
.ct-radars-mini:focus-visible{outline:3px solid #c48a30;outline-offset:2px}
.ct-radars-link-hit{fill:none;pointer-events:all}.ct-radars-link .ct-radars-name{fill:var(--ct-accent);opacity:1;text-decoration:underline;text-decoration-thickness:1px}.ct-radars-link:hover .ct-radars-name{text-decoration-thickness:2px}.ct-radars-mini[aria-pressed=true]+.ct-radars-link .ct-radars-name{font-weight:700}.ct-radars-link:focus-visible{outline:3px solid #c48a30;outline-offset:2px}
/* ── The bubble field ──────────────────────────────────────────────────────────
   Two measures at once, the third in each bubble's area rather than its radius. */
.ct-bubble-mark{fill:var(--ct-accent);fill-opacity:.45;stroke:var(--ct-accent);stroke-width:1.5;transform-box:fill-box;transform-origin:50% 50%}
/* Names are placed so that they overlap nothing, so the halo is not hiding a collision;
   it only keeps a name off the gridline it happens to cross. */
.ct-bubble-name{fill:currentColor;opacity:.82;font-size:18px;paint-order:stroke;stroke:var(--ct-surface);stroke-width:3;stroke-linejoin:round}
.ct-bubble-axis{fill:currentColor;opacity:.62;font-size:17px}
/* A name that had nowhere to sit beside its mark stands off it on a hairline. */
.ct-bubble-leader{stroke:currentColor;stroke-width:1;opacity:.4}
.ct-bubble-point{cursor:pointer}
.ct-bubble-point:hover .ct-bubble-mark,.ct-bubble-point[aria-pressed=true] .ct-bubble-mark{fill-opacity:.75}
.ct-bubble-point[aria-pressed=true] .ct-bubble-name{opacity:1;font-weight:700}
.ct-bubble-point:focus-visible{outline:3px solid #c48a30;outline-offset:2px}
/* ── The heatmap ───────────────────────────────────────────────────────────────
   A single-hue ramp, computed as hex in charts/services.py so the page and the
   share image agree. A cell nothing was measured in is an outline, never a zero. */
.ct-heat-blank{fill:none;stroke:var(--ct-border);stroke-width:1;opacity:.7}
.ct-heat-row,.ct-heat-col{fill:currentColor;opacity:.68;font-size:17px}
.ct-heat-legend-text{fill:currentColor;opacity:.62;font-size:15px}
.ct-heat-ring{fill:none;stroke:var(--ct-ink);stroke-width:2.5}
.ct-heat-worst{fill:#fff;font-size:19px;font-weight:700;paint-order:stroke;stroke:rgba(12,26,22,.55);stroke-width:3;stroke-linejoin:round}
.ct-heat-point{cursor:pointer}
.ct-heat-point:hover .ct-heat-cell{stroke:var(--ct-ink);stroke-width:2}
.ct-heat-point[aria-pressed=true] .ct-heat-cell{stroke:var(--ct-ink);stroke-width:2.5}
.ct-heat-point:focus-visible{outline:3px solid #c48a30;outline-offset:2px}
/* At card size the drawing is about a third of its width, so its type is scaled up in
   viewBox units exactly as the line form's is, and the legend numbers step aside. */
/* The axis names go, rather than grow: a card's type is scaled up by a third, which is
   more than the ring has room for beside it in a language of long words, and the list
   next to the ring names every axis anyway. */
.ct-figure--compact .ct-radar-axis{display:none}.ct-figure--compact .ct-radar-name{font-size:24px}
.ct-figure--compact .ct-radar-value{font-size:26px}
.ct-figure--compact .ct-radars-name{font-size:21px}
.ct-figure--compact .ct-bubble-name{font-size:26px}.ct-figure--compact .ct-bubble-axis{font-size:22px}
.ct-figure--compact .ct-bubble-xtick{display:none}
.ct-figure--compact .ct-heat-row,.ct-figure--compact .ct-heat-col{font-size:21px}
.ct-figure--compact .ct-heat-worst{font-size:22px}
.ct-figure--compact .ct-heat-legend-text{display:none}
/* Draw-in on first view, in the same grammar as the line, the columns and the bars:
   every class comes from app.js, so a figure without it is simply there, fully drawn. */
.ct-radar.is-growing .ct-radar-shape,.ct-radar.is-growing .ct-radar-dot{opacity:0}
.ct-radar.is-growing .ct-radar-bar{transform:scaleX(0)}
.ct-radar.is-growing .ct-radar-value{opacity:0}
.ct-radar.is-grown .ct-radar-shape{opacity:1;transition:opacity 360ms ease}
.ct-radar.is-grown .ct-radar-dot{opacity:1;transition:opacity 240ms ease 300ms}
.ct-radar.is-grown .ct-radar-bar{transform:scaleX(1);transition:transform 520ms cubic-bezier(.2,.7,.3,1)}
.ct-radar.is-grown .ct-radar-value{opacity:1;transition:opacity 200ms ease var(--ct-grown,620ms)}
.ct-radars.is-growing .ct-radars-shape,.ct-bubble.is-growing .ct-bubble-name,.ct-bubble.is-growing .ct-bubble-leader{opacity:0}
.ct-radars.is-grown .ct-radars-shape{opacity:1;transition:opacity 340ms ease}
.ct-bubble.is-growing .ct-bubble-mark{transform:scale(0);opacity:0}
.ct-bubble.is-grown .ct-bubble-mark{transform:scale(1);opacity:1;transition:transform 480ms cubic-bezier(.2,.7,.3,1),opacity 240ms ease}
.ct-bubble.is-grown .ct-bubble-name{opacity:.82;transition:opacity 220ms ease var(--ct-grown,600ms)}
.ct-bubble.is-grown .ct-bubble-leader{opacity:.4;transition:opacity 220ms ease var(--ct-grown,600ms)}
.ct-heat.is-growing .ct-heat-cell,.ct-heat.is-growing .ct-heat-ring,.ct-heat.is-growing .ct-heat-worst{opacity:0}
.ct-heat.is-grown .ct-heat-cell{opacity:1;transition:opacity 300ms ease}
.ct-heat.is-grown .ct-heat-ring,.ct-heat.is-grown .ct-heat-worst{opacity:1;transition:opacity 240ms ease var(--ct-grown,600ms)}
/* A radar's own shape is the topic accent at a low fill; on the dark panel the accent is
   already the light end of its ramp, so the ring and the spokes lift instead of the fill. */
@media(prefers-color-scheme:dark){html[data-bs-theme=dark] .ct-radar-track{fill:#e6efeb}
  /* The heatmap's own dark steps, computed in charts/services.py against the dark panel. */
  html[data-bs-theme=dark] .ct-heat-cell,html[data-bs-theme=dark] .ct-heat-legend{fill:var(--ct-heat-dark)}
  html[data-bs-theme=dark] .ct-heat-worst{fill:#101d1a;stroke:rgba(230,239,235,.6)}}