/**
 * CodeRed Threat Intel.
 *
 * Deliberately not five identical cards. Each block is shaped by its job: the
 * hero is a rule-divided readout, the bars are a gauge, the sector check is
 * the only boxed panel because it is the only interactive one, and the global
 * context is small print. Uniform panels are what make a page look generated.
 *
 * Inherits the host theme's tokens where they exist and falls back to its own
 * light palette otherwise.
 */

/* The ticker, the title block and a bare card can all appear outside .cti,
   so the tokens are declared on each of them. Scoped only to .cti, --c-mono
   fell through to the ui-monospace fallback and the data columns quietly
   stopped matching the rest of the site. */
.cti,
.cti-ticker,
.cti-tb,
.cti-card {
  --c-ink: var(--ink, #1c2654);
  --c-dim: var(--ink-dim, #4d566e);
  --c-faint: var(--ink-faint, #5f6879);
  --c-line: var(--line, #d8e0ea);
  --c-rule: rgba(28, 38, 84, 0.28);
  --c-surface: var(--surface, #fff);
  --c-raised: var(--raised, #f4f7fb);
  --c-red: var(--red, #d81830);
  --c-blue: var(--blue, #1e73be);
  --c-mono: var(--font-mono, ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace);

  color: var(--c-ink);
  margin-block: clamp(28px, 4vw, 48px);
}

.cti *,
.cti *::before,
.cti *::after {
  box-sizing: border-box;
}

.cti-title {
  margin: 0 0 14px;
  font-family: var(--c-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.cti-lede {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-dim);
}

/* ==========================================================================
   1. Exposure — the lead
   ========================================================================== */

.cti--exposure {
  padding-left: clamp(16px, 3vw, 30px);
  border-left: 2px solid var(--c-red);
}

.cti-lead {
  margin: 0 0 28px;
  max-width: 24ch;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Rule-divided cells rather than boxes: this is a readout, not a set of
   cards, and the hairlines carry the grid instead of borders. */
.cti-figs {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--c-rule);
}

.cti-fig {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
}

@media (min-width: 720px) {
  .cti-figs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--c-line);
  }
  .cti-fig {
    padding: 20px clamp(14px, 2vw, 26px);
    border-bottom: 0;
    border-left: 1px solid var(--c-line);
  }
  .cti-fig:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

.cti-fig__n {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.cti-fig__t {
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-dim);
  text-wrap: pretty;
}

.cti-fig--alert .cti-fig__n {
  color: var(--c-red);
}

.cti-fig--quiet .cti-fig__n {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-family: var(--c-mono);
  font-weight: 500;
  color: var(--c-faint);
  letter-spacing: 0;
}

.cti-note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-faint);
}

/* ==========================================================================
   2. Attack types — a gauge, not a chart
   ========================================================================== */

.cti-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.cti-bars li {
  display: grid;
  grid-template-columns: minmax(0, 13rem) 1fr auto;
  align-items: center;
  gap: 16px;
}

.cti-bars__label {
  font-size: 14px;
  font-weight: 500;
}

/* Square ends and a hatched track: a gauge reading against a scale, rather
   than a rounded progress pill. */
.cti-bars__track {
  position: relative;
  height: 14px;
  background-image: repeating-linear-gradient(
    45deg,
    var(--c-raised) 0 4px,
    transparent 4px 8px
  );
  border-bottom: 1px solid var(--c-line);
}

.cti-bars__track i {
  display: block;
  height: 100%;
}

.cti-bars__n {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.cti-bars__n b {
  font-size: 17px;
  font-weight: 700;
}

.cti-bars__n em {
  font-family: var(--c-mono);
  font-size: 11px;
  font-style: normal;
  color: var(--c-faint);
}

.cti-claim {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-rule);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;
  color: var(--c-ink);
  text-wrap: pretty;
}

.cti-claim b {
  color: var(--c-red);
}

@media (max-width: 620px) {
  .cti-bars li {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
  }
  .cti-bars__track {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* ==========================================================================
   3. Sector check — the one boxed panel, because it is the interactive one
   ========================================================================== */

.cti--sector {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--c-line);
  border-top: 2px solid var(--c-blue);
  background: var(--c-surface);
  box-shadow: 0 2px 12px -4px rgba(28, 38, 84, 0.18);
}

.cti-sector__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.cti-sector__pick label {
  font-size: 14px;
  color: var(--c-dim);
}

.cti-sector__pick select {
  padding: 9px 12px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: 14px;
  max-width: 100%;
}

.cti-sector__pick select:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 1px;
}

.cti-sector__figure {
  margin: 0 0 14px;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.45;
}

.cti-sector__figure b {
  font-size: 1.5em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cti-sector__figure span {
  font-weight: 600;
}

.cti-sector__share {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--c-mono);
  font-size: 12px;
  color: var(--c-faint);
}

.cti-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cti-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--c-line);
  font-size: 12.5px;
  color: var(--c-dim);
}

.cti-chips i {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.cti-chips b {
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* Without scripting every panel stays visible, which still reads correctly. */
.cti-sector__panel + .cti-sector__panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
}

.cti-cta {
  display: inline-block;
  margin-top: 22px;
  padding: 13px 22px;
  background: var(--c-red);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.cti-cta:hover,
.cti-cta:focus-visible {
  background: #b8121f;
  color: #fff;
}

/* ==========================================================================
   4. Trend — small and secondary, it only proves the page is alive
   ========================================================================== */

.cti--trend .cti-lede {
  margin-bottom: 12px;
}

.cti-spark {
  margin: 0;
}

.cti-spark svg {
  display: block;
  width: 100%;
  height: clamp(80px, 12vw, 120px);
}

.cti-spark [data-day] rect:first-child {
  fill: var(--c-blue);
}

.cti-spark [data-day].is-peak rect:first-child {
  fill: var(--c-red);
}

.cti-spark__axis {
  stroke: var(--c-rule);
  stroke-width: 1;
}

/* ==========================================================================
   5. Global context — small print, and it looks like it
   ========================================================================== */

.cti--global {
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--c-faint);
}

.cti--global p {
  margin: 0 0 12px;
  max-width: 78ch;
}

.cti-region {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

.cti-region li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 0;
  font-family: var(--c-mono);
  font-size: 11.5px;
}

.cti-region b {
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.cti-region li.is-marked b {
  color: var(--c-red);
}

/* ==========================================================================
   Attribution and empty state
   ========================================================================== */

.cti-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-family: var(--c-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-faint);
}

/* A static square, not a pulsing dot. */
.cti-source__mark {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--c-red);
}

.cti--empty {
  padding: 22px;
  border: 1px dashed var(--c-line);
  color: var(--c-faint);
  font-size: 14px;
}

.cti--empty p {
  margin: 0;
}

/* ==========================================================================
   Ticker — a news crawl on the brand navy, full bleed
   ========================================================================== */

.cti-ticker {
  display: flex;
  align-items: stretch;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--navy, #001861);
  background-image: linear-gradient(348deg, rgba(7, 10, 44, 0.9) 0%, rgba(7, 10, 44, 0) 58%);
  border-block: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

/* Pinned, so the source of the crawl never scrolls out of view. */
.cti-ticker__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 13px clamp(14px, 2.5vw, 24px);
  background: var(--c-red, #d81830);
  color: #fff;
  font-family: var(--c-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.cti-ticker__mark {
  width: 7px;
  height: 7px;
  background: #fff;
  flex-shrink: 0;
}

.cti-ticker__window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* Fade the crawl out at the edges so lines enter and leave rather than
     being chopped off against the label. */
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.cti-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: cti-crawl 70s linear infinite;
}

.cti-ticker:hover .cti-ticker__track,
.cti-ticker:focus-within .cti-ticker__track {
  animation-play-state: paused;
}

.cti-ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px clamp(18px, 3vw, 34px);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  white-space: nowrap;
}

/* A hairline between lines, drawn rather than typed. */
.cti-ticker__item + .cti-ticker__item {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.cti-ticker__item b {
  font-family: var(--c-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
}

.cti-ticker__item.is-hot {
  color: #fff;
}

.cti-ticker__item.is-hot b {
  color: #ff8f9c;
}

@keyframes cti-crawl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .cti-ticker__track {
    animation: none;
  }
  .cti-ticker__window {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Detail restored: what sits behind each headline
   ========================================================================== */

.cti-bars__detail {
  grid-column: 1 / -1;
  font-family: var(--c-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--c-faint);
}

@media (min-width: 621px) {
  .cti-bars__detail {
    grid-column: 2 / -1;
    margin-top: -6px;
  }
}

/* Two ranked cards side by side in the global block. */
.cti-two {
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
  margin-bottom: clamp(16px, 2.2vw, 24px);
}

@media (min-width: 760px) {
  .cti-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Ranked table — the same construction as the dashboard panels above it, so
   the page carries one table pattern instead of two
   ========================================================================== */

.cti-card {
  padding: 20px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-surface);
  box-shadow: 0 2px 10px -3px rgba(28, 38, 84, 0.22);
}

.cti-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.cti-card__head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
}

.cti-card__head span {
  font-family: var(--c-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-faint);
  white-space: nowrap;
}

.cti-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cti-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 13.5px;
}

.cti-list li:last-child {
  border-bottom: 0;
}

.cti-list__i {
  font-family: var(--c-mono);
  font-size: 11px;
  color: var(--c-faint);
}

.cti-list__n {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-ink);
}

.cti-list__v {
  font-family: var(--c-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-dim);
}

.cti-list li.is-marked .cti-list__n,
.cti-list li.is-marked .cti-list__v {
  color: var(--c-red);
  font-weight: 600;
}

/* The full sector table, folded away until asked for. */
.cti-all {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
}

.cti-all > summary {
  cursor: pointer;
  font-family: var(--c-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-blue);
}

.cti-all > summary:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
}

.cti-all[open] > summary {
  margin-bottom: 14px;
}

/* ==========================================================================
   Title block — the section signs itself off like a drawing sheet
   ========================================================================== */

.cti-tb {
  display: grid;
  margin-top: clamp(26px, 4vw, 44px);
  border: 1px solid var(--c-rule);
  border-bottom-width: 2px;
  background: var(--c-surface);
  font-family: var(--c-mono);
}

@media (min-width: 760px) {
  .cti-tb {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.cti-tb__cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-line);
  min-width: 0;
}

@media (min-width: 760px) {
  .cti-tb__cell {
    border-bottom: 0;
    border-left: 1px solid var(--c-line);
  }
  .cti-tb__cell:first-child {
    border-left: 0;
  }
}

.cti-tb__cell:last-child {
  border-bottom: 0;
}

.cti-tb__k {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--c-faint);
}

.cti-tb__v {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

.cti-spark__tick {
  stroke: var(--c-rule);
  stroke-width: 1;
}

/* ==========================================================================
   Scale readout — three figures where a paragraph used to be
   ========================================================================== */

.cti-scale {
  display: grid;
  gap: 1px;
  margin-bottom: clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-line);
  overflow: hidden;
}

@media (min-width: 620px) {
  .cti-scale {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cti-scale__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 14px;
  background: var(--c-raised);
  text-align: center;
}

.cti-scale__k {
  order: 2;
  font-family: var(--c-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--c-faint);
}

.cti-scale__v {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

.cti-scale__u {
  order: 3;
  font-size: 10.5px;
  color: var(--c-faint);
}

/* Malaysia carries the accent in the regional strip. */

/* ==========================================================================
   Pulse — frequency as the headline
   ========================================================================== */

.cti--pulse .cti-lead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 22ch;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-dim);
}

.cti-lead__k {
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* The basis for a sampled percentage, kept next to the percentage. */
.cti-basis {
  margin: 12px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--c-line);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--c-faint);
}

/* ==========================================================================
   Merged check card — sector and country side by side
   ========================================================================== */

.cti-check__cols {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
}

@media (min-width: 860px) {
  .cti-check__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cti-check__one + .cti-check__one {
    padding-left: clamp(20px, 3vw, 34px);
    border-left: 1px solid var(--c-line);
  }
}

@media (max-width: 859px) {
  .cti-check__one + .cti-check__one {
    padding-top: 22px;
    border-top: 1px solid var(--c-line);
  }
}

.cti--check .cti-sector__figure {
  font-size: clamp(0.98rem, 1.6vw, 1.1rem);
}

/* ==========================================================================
   Dumbbell — the gap is the message
   ========================================================================== */

.cti-legend-row {
  display: flex;
  gap: 20px;
  margin: 0 0 16px;
  font-family: var(--c-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.cti-legend-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cti-legend-row i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.cti-legend-row i.is-global {
  background: var(--c-faint);
}

.cti-legend-row i.is-local {
  background: var(--c-red);
}

.cti-dumb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.cti-dumb li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr auto auto;
  align-items: center;
  gap: 14px;
}

.cti-dumb__label {
  font-size: 14px;
  font-weight: 500;
}

.cti-dumb__track {
  position: relative;
  height: 14px;
  border-bottom: 1px solid var(--c-line);
}

.cti-dumb__bar {
  position: absolute;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--c-red);
  opacity: 0.4;
}

.cti-dumb__dot {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
}

.cti-dumb__dot.is-global {
  background: var(--c-surface);
  border: 2px solid var(--c-faint);
}

.cti-dumb__dot.is-local {
  background: var(--c-red);
}

.cti-dumb__v {
  font-family: var(--c-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--c-faint);
  white-space: nowrap;
}

.cti-dumb__v b {
  color: var(--c-ink);
  font-size: 13px;
}

/* A chip that is absent when the guard fails, never a column that empties. */
.cti-dumb__x {
  padding: 3px 8px;
  background: var(--c-red);
  color: #fff;
  font-family: var(--c-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .cti-dumb li {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
  }
  .cti-dumb__track {
    grid-column: 1 / -1;
    order: 3;
  }
  .cti-dumb__v {
    order: 4;
  }
  .cti-dumb__x {
    justify-self: start;
  }
}

/* Regional mix bars carry Malaysia in the accent. */
.cti-bars--share li.is-marked .cti-bars__label,
.cti-bars--share li.is-marked .cti-bars__n b {
  color: var(--c-red);
  font-weight: 700;
}

.cti-bars--share li i {
  background: var(--c-blue);
}

.cti-bars--share li.is-marked i {
  background: var(--c-red);
}

/* ==========================================================================
   Pulse — two columns, so the headline is not stranded in white space
   ========================================================================== */

.cti-pulse__grid {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

@media (min-width: 880px) {
  .cti-pulse__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.cti--pulse .cti-lead {
  max-width: 18ch;
  margin-bottom: 18px;
}

/* Cells stack in the right column rather than running full width. */
.cti-pulse__cells {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-rule);
}

.cti-pulse__cells .cti-fig {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
  border-left: 0;
}

.cti-pulse__cells .cti-fig__n {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.cti-pulse__cells .cti-fig__t {
  font-size: 12.5px;
}

/* ==========================================================================
   Trend readout — the value for whichever day is under the pointer
   ========================================================================== */

.cti-spark__readout {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 10px;
}

.cti-spark__day {
  font-family: var(--c-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-dim);
}

.cti-spark__n {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

.cti-spark__hint {
  font-family: var(--c-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.cti-spark.is-probing .cti-spark__hint {
  visibility: hidden;
}

/* An invisible full-height target over each bar, so a one-incident day is as
   easy to point at as the peak. */
.cti-spark__hit {
  fill: transparent;
}

.cti-spark [data-day] {
  cursor: crosshair;
}

.cti-spark [data-day]:hover rect:first-child,
.cti-spark [data-day]:focus rect:first-child {
  fill: var(--c-ink);
}

.cti-spark [data-day]:focus {
  outline: none;
}

.cti-spark [data-day]:focus rect:first-child {
  stroke: var(--c-ink);
  stroke-width: 2;
}

/* Dates sit at the x position of their tick, so the axis is absolutely
   positioned. It needs an explicit block box: the flex rule this replaced
   collapsed the container to zero width and stacked every label at the
   left edge. */
.cti-spark__scale {
  position: relative;
  display: block;
  width: 100%;
  height: 14px;
  margin-top: 6px;
  font-family: var(--c-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.cti-spark__scale span {
  position: absolute;
  top: 0;
  white-space: nowrap;
}

/* Every day, with its count. */
.cti-days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px 18px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.cti-days li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--c-mono);
  font-size: 11.5px;
  color: var(--c-dim);
}

.cti-days b {
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.cti-days li.is-marked b {
  color: var(--c-red);
}

/* ==========================================================================
   Row marks — a flag for a country, a drawn glyph for a sector
   ========================================================================== */

.cti-list--iconed li {
  grid-template-columns: 18px 20px minmax(0, 1fr) auto;
}

/* Flags carry a hairline: several are white at the edge and would otherwise
   dissolve into the card. */
.cti-list__flag {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border: 1px solid var(--c-line);
  border-radius: 1px;
}

/* An unmapped country still gets a mark rather than a gap. */
.cti-list__flag--none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 15px;
  border: 1px solid var(--c-line);
  border-radius: 1px;
  font-family: var(--c-mono);
  font-size: 8px;
  letter-spacing: 0.02em;
  color: var(--c-faint);
}

.cti-list__ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--c-blue);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cti-list li.is-marked .cti-list__ico {
  stroke: var(--c-red);
}

/* ==========================================================================
   Pulse readout — values and keys, no sentences
   ========================================================================== */

.cti-fig__k {
  font-family: var(--c-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.cti-pulse__cells .cti-fig {
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
}

/* ==========================================================================
   Radar — the mix as a shape, beside the bars that rank it
   ========================================================================== */

.cti-radar {
  display: grid;
  gap: clamp(14px, 2.5vw, 28px);
  align-items: center;
}

@media (min-width: 620px) {
  .cti-radar {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  }
}

.cti-radar svg {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.cti-radar__grid polygon {
  fill: none;
  stroke: var(--c-line);
  stroke-width: 1;
}

.cti-radar__spokes line {
  stroke: var(--c-line);
  stroke-width: 1;
}

.cti-radar__shape {
  fill: color-mix(in srgb, var(--c-blue) 18%, transparent);
  stroke: var(--c-blue);
  stroke-width: 2;
  stroke-linejoin: round;
}

.cti-radar__marks circle {
  fill: var(--c-blue);
}

.cti-radar__key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.cti-radar__key li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 13px;
  color: var(--c-dim);
}

.cti-radar__key li:last-child {
  border-bottom: 0;
}

.cti-radar__key b {
  font-family: var(--c-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

/* ==========================================================================
   Shapes, not tables
   ========================================================================== */

.cti-viz {
  min-width: 0;
}

.cti-viz__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cti-viz__head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
}

.cti-viz__head span {
  font-family: var(--c-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--c-faint);
  white-space: nowrap;
}

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

/* No frame and no shadow: the ocean is the page colour now, so the map has
   no edge to draw and simply sits in the layout. */
.cti-map {
  position: relative;
  margin: 0;
  overflow: hidden;
}

/* ---- Counters, floating on the ocean ------------------------------------- */

.cti-map__stats {
  position: absolute;
  z-index: 2;
  top: clamp(6px, 1.5vw, 18px);
  left: clamp(6px, 1.5vw, 18px);
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  /* Lifted off the map: a tight contact shadow plus a soft cast, so it reads
     as a card lying on the surface rather than printed into it. */
  box-shadow:
    0 1px 2px rgba(11, 27, 58, 0.14),
    0 10px 24px -12px rgba(11, 27, 58, 0.42);
}

@media (min-width: 760px) {
  .cti-map__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cti-map__stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px clamp(10px, 1.2vw, 15px);
  /* Translucent, so the coastline behind still reads and the panel looks
     laid on the map rather than punched through it. */
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
}

.cti-map__k {
  font-family: var(--c-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--c-faint);
}

.cti-map__v {
  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

.cti-map__u {
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--c-faint);
}

/* Must clip. The viewBox is cropped to 20-420 to drop the empty poles, and
   with overflow visible the trimmed part still paints — Antarctica rendered
   straight over the blocks below the map. */
.cti-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* ---- The map -------------------------------------------
   Light, so it sits in the page rather than fighting it. The outlines are
   kept from the dark version: countries rather than one silhouette is what
   gives the map its detail. */

.cti-map__bg {
  fill: #ffffff;
}

.cti-map__grid line {
  stroke: rgba(30, 115, 190, 0.05);
  stroke-width: 0.7;
}

.cti-map__land {
  fill: #dceaf8;
  stroke: none;
}

/* The outlines carry the light, which is what separates this from a tinted
   drawing: a stroke with a bloom rather than a fill with a colour. */
.cti-map__borders {
  fill: none;
  stroke: rgba(30, 115, 190, 0.42);
  stroke-width: 0.7;
  stroke-linejoin: round;
}

.cti-map__ring {
  fill: none;
  stroke: var(--c-blue);
  stroke-width: 1.8;
}

.cti-map__pin.is-marked .cti-map__ring {
  stroke: var(--c-red);
  stroke-width: 2.6;
}

.cti-map__n {
  font-family: var(--c-mono);
  font-size: 10px;
  font-weight: 700;
  fill: var(--c-ink);
  /* Painted stroke-first. The halo is the ground colour. */
  stroke: #ffffff;
  stroke-width: 2.6;
  paint-order: stroke fill;
}

.cti-map__pin:hover .cti-map__ring {
  stroke-width: 3;
}

/* ---- Donut interaction --------------------------------------------------- */

.cti-donut__slice {
  cursor: pointer;
  transition: opacity 0.15s;
  outline: none;
}

/* Dim the others rather than brighten the one. The ramp already encodes
   order, and brightening a step would break the scale it carries. */
.cti-donut:hover .cti-donut__slice:not(.is-active),
.cti-donut:focus-within .cti-donut__slice:not(.is-active) {
  opacity: 0.32;
}

.cti-donut__slice:focus-visible {
  stroke: var(--c-ink);
  stroke-width: 3;
}

.cti-donut__key li {
  cursor: pointer;
  transition: background-color 0.15s;
}

.cti-donut__key li.is-active {
  background: var(--c-raised);
}


/* ==========================================================================
   Restored blocks
   ==========================================================================
   A splice anchored between two map rules removed these wholesale, because
   the closing anchor had been appended to the end of the file long after the
   opening one. The regional field fell back to a bare numbered list and the
   donut lost its sizing. */

.cti-bubbles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px 20px;
}

.cti-bubbles li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.cti-bubble {
  display: block;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--c-line), 0 8px 18px -10px rgba(11, 27, 58, 0.6);
}

.cti-bubble .cti-list__flag {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

.cti-bubbles li.is-marked .cti-bubble {
  box-shadow: 0 0 0 3px var(--c-red), 0 8px 20px -8px rgba(11, 27, 58, 0.6);
}

.cti-bubble__name {
  font-size: 12px;
  color: var(--c-dim);
}

.cti-bubbles b {
  font-family: var(--c-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

.cti-bubbles li.is-marked .cti-bubble__name,
.cti-bubbles li.is-marked b {
  color: var(--c-red);
  font-weight: 700;
}

/* ---- Donut layout -------------------------------------------------------- */

.cti-donut {
  display: grid;
  gap: clamp(16px, 3vw, 34px);
  align-items: center;
}

@media (min-width: 560px) {
  .cti-donut {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  }
}

.cti-donut__fig {
  margin: 0;
}

.cti-donut svg {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin-inline: auto;
}

/* A hairline between wedges: adjacent steps of one ramp are close enough
   that without it the ring reads as a smooth gradient. */
.cti-donut__ring path {
  stroke: var(--c-surface);
  stroke-width: 2;
}

.cti-donut__big {
  font-size: 30px;
  font-weight: 700;
  fill: var(--c-ink);
}

.cti-donut__sub {
  font-family: var(--c-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  fill: var(--c-faint);
}

.cti-donut__key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.cti-donut__key li {
  display: grid;
  grid-template-columns: 10px 18px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 13px;
  color: var(--c-dim);
}

.cti-donut__key li:last-child {
  border-bottom: 0;
}

.cti-donut__key i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.cti-donut__key .cti-list__ico {
  width: 18px;
  height: 18px;
  opacity: 0.75;
}

.cti-donut__key li > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 3;
}

.cti-donut__key b {
  font-family: var(--c-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

.cti-donut__key em {
  font-family: var(--c-mono);
  font-size: 11px;
  font-style: normal;
  color: var(--c-faint);
}

/* One row of actions in the check card, so the primary is not left with a
   band of dead space beside it. */
.cti-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

/* The plugin CTA and the theme buttons are sized by different rules; match
   them here so the row reads as one control group. */
.cti-actions .cti-cta,
.cti-actions .btn {
  margin-top: 0;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
}

/* A day drawn off the scale. The bar is capped, so its top is torn rather
   than flat, which stops it reading as an honest maximum. */
.cti-spark__b.is-over rect:first-child {
  fill: var(--c-red);
  clip-path: polygon(0 6px, 35% 0, 70% 6px, 100% 0, 100% 100%, 0 100%);
}

/* With the regional bubbles suppressed the row holds one figure, so it takes
   the full width instead of leaving half the row empty. */
@media (min-width: 760px) {
  .cti-two--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "More info" out of the exposure card. Right-aligned into the gap the shorter
   column leaves, and sized as body text rather than a button: the figures above
   it are what the card is for. */
.cti--check .cti-more {
  margin: 6px 0 0;
  text-align: right;
  font-size: 15px;
}

.cti--check .cti-more a {
  color: #1668ad;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(22, 104, 173, .35);
  padding-bottom: 1px;
}

.cti--check .cti-more a:hover,
.cti--check .cti-more a:focus-visible {
  border-bottom-color: currentColor;
}

/* "More info" in brand red, to match the accent across the top of the card.
   Here rather than in the theme: this sheet loads last, so the base rule above
   would otherwise win on equal specificity.

   #d81830 on white measures 5.1:1, clearing AA for body text without darkening
   it away from the accent it is matching. */
.exposure-block .cti-more a {
  color: #d81830;
  border-bottom-color: rgba(216, 24, 48, .35);
}

/* No rule under it. The link now names its own destination, so the underline
   was doing the work the wording already does. It still lifts on hover, which
   is what a pointer needs. */
.exposure-block .cti-more a {
  border-bottom-color: transparent;
}

.exposure-block .cti-more a:hover,
.exposure-block .cti-more a:focus-visible {
  border-bottom-color: rgba(216, 24, 48, .55);
}

/* "More info at" in the body ink, the destination in brand red. One link, two
   registers: the phrase introduces, the address is the thing being pointed at.
   The whole link still reacts on hover, so the split does not read as two
   controls. */
.exposure-block .cti-more a {
  color: #0b1b3a;
}

.exposure-block .cti-more__site {
  color: #d81830;
}

.exposure-block .cti-more a:hover .cti-more__site,
.exposure-block .cti-more a:focus-visible .cti-more__site {
  color: #b01226;
}

.exposure-block .cti-more a:hover,
.exposure-block .cti-more a:focus-visible {
  border-bottom-color: rgba(11, 27, 58, .35);
}

/* Dropped clear of the footnote above it. At 6px the link read as attached to
   that line rather than as the card's own way out. */
.exposure-block .cti-more {
  margin-top: 20px;
}

/* Centred across the card rather than tucked into its right corner. The card is
   two columns of equal weight, so a link hard against one side read as
   belonging to that column; on the centre line it belongs to both. */
.exposure-block .cti-more {
  text-align: center;
}

/* Further down still. Centred under two columns of unequal height, the link
   needs to clear the taller one before it reads as sitting below both. */
.exposure-block .cti-more {
  margin-top: 38px;
}

/* Sat 31px off the bottom edge because that is the card's own padding. Pulling
   into it drops the link close to the rule without letting it touch. */
.exposure-block .cti-more {
  margin-bottom: -20px;
}

/* Regular weight. The card ends on it, so the position already marks it out;
   bold on top of that made a footnote-sized link read louder than the figures
   above it. */
.exposure-block .cti-more a {
  font-weight: 400;
}