/* British Council – One Calendar concept
   English Insights Index (insights.html).

   Page chrome uses the site tokens from css/styles.css. Chart colours are a
   separate, validated set (dataviz validator, light surface #ffffff):
     categorical  blue #2a78d6 · orange #eb6834 · aqua #1baf7a · yellow #eda100
                  adjacent CVD ΔE ≥ 9.1, normal-vision ΔE ≥ 22.9. Aqua and
                  yellow sit below 3:1 on white, so every stacked segment
                  carries a printed value or a tooltip and every chart has a
                  data table.
     ordinal      CEFR A1→C2 on one blue hue, #86b6ef → #0a2a55, monotone,
                  every adjacent step ΔL ≥ 0.06.
     diverging    red (weaker) ↔ grey #f0efec ↔ blue (stronger).
   Brand violet and red stay in the chrome and never stand in for a series. */

.ins-page {
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100;
  --o1: #86b6ef; --o2: #5598e7; --o3: #2a78d6; --o4: #1c5cab; --o5: #104281; --o6: #0a2a55;
  --neg: #e34948; --pos: #2a78d6; --mid: #f0efec;
  --grid: #e1e0d9; --muted-mark: #c9c6d6;
  padding-block: 24px 64px;
}

.ins-head { margin-block-end: 18px; }
.ins-head h1 { font-size: 32px; letter-spacing: -0.02em; color: var(--ink); }
.ins-head .lead { color: var(--grey-600); max-width: 80ch; margin-block-start: 8px; font-size: 16px; line-height: 1.55; }
.ins-badge {
  display: inline-block; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; margin-block-end: 10px;
}

/* ---- filters ---- */
.ins-filters {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius);
  padding: 12px 16px; margin-block-end: 16px; box-shadow: var(--shadow);
}
.ins-filter-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-600); margin-inline-end: 4px; }
.ins-chip {
  border: 1.5px solid var(--grey-200); background: var(--white); color: var(--text);
  padding: 7px 14px; border-radius: 18px; font-size: 14px; font-weight: 600;
}
.ins-chip:hover { border-color: var(--ink-3); }
.ins-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.ins-period { margin-inline-start: auto; font-size: 13px; color: var(--grey-600); font-weight: 600; }

.ins-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(224, 115, 0, 0.08); border: 1px solid rgba(224, 115, 0, 0.3);
  border-radius: var(--radius-sm); padding: 12px 16px; margin-block-end: 18px;
}
.ins-banner p { font-size: 13.5px; line-height: 1.55; color: var(--grey-800); }
.ins-prov {
  flex: none; background: rgba(224, 115, 0, 0.16); color: #a35300;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 6px; margin-block-start: 1px;
}
.ins-page code { font-size: 0.92em; background: var(--grey-100); padding: 1px 5px; border-radius: 4px; }

/* ---- KPI tiles ---- */
.ins-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-block-end: 14px; }
.ins-kpi {
  background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.ins-kpi-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-600); }
.ins-kpi-value { font-size: 32px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.ins-kpi-note { font-size: 12.5px; color: var(--grey-600); line-height: 1.4; }

.ins-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-block: 6px 18px; font-size: 13.5px; font-weight: 700; }
.ins-toc a { color: var(--ink-3); }
.ins-toc a:hover { text-decoration: underline; }

/* ---- cards ---- */
.ins-card {
  background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius);
  padding: 22px 24px; margin-block-end: 16px; scroll-margin-top: 80px; min-width: 0;
}
.ins-card-head { margin-block-end: 16px; }
.ins-eyebrow { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--red); }
.ins-card-head h2 { font-size: 21px; font-weight: 800; color: var(--ink); margin-block-start: 4px; }
.ins-card-head p { font-size: 14.5px; line-height: 1.55; color: var(--grey-600); margin-block-start: 6px; max-width: 80ch; }
.ins-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ins-grid-2 > .ins-card { margin-block-end: 16px; }
.ins-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ins-h3 { font-size: 13px; font-weight: 800; color: var(--grey-800); margin-block-end: 10px; }
.ins-note { font-size: 12.5px; line-height: 1.5; color: var(--grey-600); margin-block-start: 12px; }

/* ---- legend and swatches ---- */
.ins-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-block-end: 10px; font-size: 13px; color: var(--grey-800); }
.ins-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ins-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ins-swatch.is-dot { border-radius: 50%; }
.ins-swatch.is-band { background: var(--grey-200); width: 22px; height: 10px; }
.ins-cat-1 { background: var(--c1); } .ins-cat-2 { background: var(--c2); }
.ins-cat-3 { background: var(--c3); } .ins-cat-4 { background: var(--c4); }
.ins-ord-1 { background: var(--o1); } .ins-ord-2 { background: var(--o2); } .ins-ord-3 { background: var(--o3); }
.ins-ord-4 { background: var(--o4); } .ins-ord-5 { background: var(--o5); } .ins-ord-6 { background: var(--o6); }

/* ---- index rows (bars, dumbbells, dot plots share one grid) ---- */
.ins-index { display: flex; flex-direction: column; gap: 4px; }
.ins-index-head, .ins-index-row {
  display: grid; grid-template-columns: 170px minmax(0, 1fr) 118px; gap: 14px; align-items: center;
}
.ins-index-row { min-height: 44px; }
.ins-index-trend { font-size: 11.5px; color: var(--grey-600); font-weight: 700; }
.ins-row-label { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.ins-row-label b { display: inline-block; min-width: 18px; color: var(--grey-600); }
.ins-row-label small { display: block; font-size: 11.5px; font-weight: 600; color: var(--grey-600); }
.ins-axis { display: grid; grid-template-columns: repeat(6, 1fr); font-size: 11.5px; font-weight: 700; color: var(--grey-600); }
.ins-axis span { border-inline-start: 1px solid var(--grid); padding-inline-start: 5px; }
/* Hour ticks sit at their value, so the first and last labels are pulled
   inside the track rather than hanging over its ends. */
.ins-axis-hours { display: block; position: relative; height: 18px; }
.ins-axis-hours span { position: absolute; top: 0; transform: translateX(-50%); border: 0; padding: 0; white-space: nowrap; }
.ins-axis-hours span:first-child { transform: none; }
.ins-axis-hours span:last-child { transform: translateX(-100%); }
html[dir="rtl"] .ins-axis-hours span { transform: translateX(50%); }

.ins-track {
  position: relative; height: 26px;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
}
.ins-bar {
  position: absolute; inset-block: 5px; inset-inline-start: 0;
  background: var(--c1); border-radius: 0 4px 4px 0;
}
.ins-bar-label {
  position: absolute; top: 50%; transform: translateY(-50%); margin-inline-start: 8px;
  font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap;
}
.is-muted .ins-bar, .is-muted .ins-dot, .is-muted .ins-seg { background: var(--muted-mark) !important; color: var(--grey-800) !important; }
.is-muted .ins-row-label, .is-muted .ins-bar-label { color: var(--grey-400); }
.is-muted .ins-spark { color: var(--grey-400); }

.ins-spark { display: inline-flex; align-items: center; gap: 6px; color: var(--c1); }
.ins-spark em { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--grey-800); }

.ins-track-dumbbell { height: 34px; }
/* 100–300 hours in 50-hour steps: four intervals, not the six CEFR bands. */
.ins-track-hours { background-size: 25% 100%; }
.ins-index-hours .ins-index-head, .ins-index-hours .ins-index-row { grid-template-columns: 90px minmax(0, 1fr) 24px; }
.ins-dumbbell-line { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--grey-400); }
.ins-dot {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white);
}
html[dir="rtl"] .ins-dot { margin: -7px -7px 0 0; }
.ins-dot-label { position: absolute; top: -6px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--grey-800); white-space: nowrap; }
.ins-dot-label.is-below { top: auto; bottom: -8px; }
.ins-guided { position: absolute; top: 50%; height: 12px; margin-top: -6px; background: var(--grey-200); border-radius: 6px; }
.ins-gap { font-size: 14px; font-weight: 800; }
.ins-gap.is-neg { color: #b3261e; }
.ins-gap.is-pos { color: #1c5cab; }

/* ---- stacked bars ---- */
.ins-stacks { display: flex; flex-direction: column; gap: 8px; }
.ins-stack-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; }
.ins-stack { display: flex; height: 28px; gap: 2px; }
.ins-seg {
  display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
  font-size: 12px; font-weight: 800; color: #fff; white-space: nowrap;
}
.ins-seg:first-child { border-radius: 4px 0 0 4px; }
.ins-seg:last-child { border-radius: 0 4px 4px 0; }
.ins-seg.ins-cat-3, .ins-seg.ins-cat-4, .ins-seg.ins-ord-1, .ins-seg.ins-ord-2 { color: var(--ink); }

/* ---- heatmaps ---- */
.ins-heat-wrap { overflow-x: auto; }
.ins-heat { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 560px; }
.ins-heat th { font-size: 12px; font-weight: 700; color: var(--grey-600); text-align: center; padding: 6px; }
.ins-heat tbody th { text-align: start; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.ins-heat tbody th small { display: block; font-size: 11px; font-weight: 600; color: var(--grey-600); }
.ins-heat-cell { text-align: center; padding: 10px 6px; border-radius: 4px; color: var(--ink); font-size: 13px; font-weight: 700; }
.ins-heat-cell b { display: block; font-size: 15px; }
.ins-heat-cell small { font-size: 11px; font-weight: 600; opacity: 0.85; }
.ins-heat-cell.is-dark { color: #fff; }
.ins-heat-cell.is-suppressed {
  background: repeating-linear-gradient(45deg, var(--grey-50), var(--grey-50) 5px, var(--grey-100) 5px, var(--grey-100) 10px);
  color: var(--grey-600); font-size: 11.5px;
}
.ins-heat-total th, .ins-heat-total td { border-block-start: 2px solid var(--grey-200); }
.ins-heat tr.is-muted td:not(.is-suppressed) { filter: grayscale(1); opacity: 0.45; }
.ins-matrix { table-layout: fixed; }
.ins-matrix thead th:first-child { width: 30%; }
.ins-matrix .ins-heat-cell { font-size: 12.5px; }
.ins-scale { display: flex; align-items: center; gap: 8px; margin-block-start: 10px; font-size: 11.5px; color: var(--grey-600); }
.ins-scale i { display: block; width: 160px; height: 8px; border-radius: 4px; background: linear-gradient(to right, #cde2fb, #2a78d6, #0d366b); }

/* ---- diverging bars ---- */
.ins-div { display: flex; flex-direction: column; gap: 6px; }
.ins-div-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 64px; gap: 10px; align-items: center; }
.ins-div-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ins-div-track { position: relative; height: 22px; background: var(--mid); border-radius: 4px; }
.ins-div-mid { position: absolute; inset-block: 0; inset-inline-start: 50%; width: 1px; background: var(--grey-400); }
.ins-div-bar { position: absolute; inset-block: 4px; }
.ins-div-bar.is-neg { background: var(--neg); border-radius: 4px 0 0 4px; }
.ins-div-bar.is-pos { background: var(--pos); border-radius: 0 4px 4px 0; }
.ins-div-value { font-size: 13px; font-weight: 800; text-align: end; }
.ins-div-value.is-neg { color: #b3261e; }
.ins-div-value.is-pos { color: #1c5cab; }
.ins-div-legend { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-block-end: 8px; }
.ins-div-legend .is-neg { color: #b3261e; }
.ins-div-legend .is-pos { color: #1c5cab; }

/* ---- single-series bars ---- */
.ins-bars { display: flex; flex-direction: column; gap: 8px; }
.ins-bars-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 48px; gap: 10px; align-items: center; }
.ins-bars-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ins-bars-track { height: 20px; }
.ins-bars-fill { display: block; height: 100%; background: var(--o2); border-radius: 0 4px 4px 0; }
.ins-bars-fill.is-top { background: var(--c1); }
.ins-bars-value { font-size: 13px; font-weight: 800; color: var(--ink); text-align: end; }

.ins-toplist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ins-toplist li { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: baseline; padding-block-end: 8px; border-block-end: 1px solid var(--grey-100); }
.ins-toplist span { font-size: 13px; font-weight: 700; color: var(--grey-600); }
.ins-toplist strong { font-size: 15px; color: var(--ink); }
.ins-toplist em { font-style: normal; font-weight: 800; color: var(--ink); }

/* ---- stories ---- */
.ins-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.ins-story {
  border: 1px solid var(--grey-200); border-top: 4px solid var(--violet-block, #5b16b5); border-radius: var(--radius-sm);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; background: var(--grey-50);
}
.ins-story-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--red); }
.ins-story h3 { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.ins-story p { font-size: 14px; line-height: 1.5; color: var(--grey-800); }
.ins-story dl { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--grey-600); }
.ins-story dl div { display: grid; grid-template-columns: 56px 1fr; gap: 6px; }
.ins-story dt { font-weight: 800; }
.ins-story dd { margin: 0; }
.ins-copy {
  margin-block-start: auto; align-self: flex-start;
  border: 1.5px solid var(--ink-3); background: var(--white); color: var(--ink-3);
  font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 16px;
}
.ins-copy:hover { background: var(--ink-3); color: #fff; }

/* ---- tables ---- */
.ins-table { margin-block-start: 14px; }
.ins-table summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.ins-table-wrap { overflow-x: auto; margin-block-start: 10px; }
.ins-table-wrap table, .ins-card > .ins-table-wrap table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.ins-table-wrap th, .ins-table-wrap td { padding: 8px 10px; border-block-end: 1px solid var(--grey-100); text-align: start; vertical-align: top; }
.ins-table-wrap thead th { background: var(--grey-50); color: var(--grey-600); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.ins-table-wrap tbody th { color: var(--ink); }

/* ---- method ---- */
.ins-method { background: var(--ink); border-color: var(--ink); color: rgba(255, 255, 255, 0.86); }
.ins-method h2, .ins-method h3 { color: #fff; }
.ins-method .ins-eyebrow { color: var(--cyan-bright); }
.ins-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.ins-method h3 { font-size: 15px; margin-block-end: 6px; }
.ins-method p { font-size: 13.5px; line-height: 1.6; }
.ins-method code { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ---- tooltip ---- */
.ins-tip {
  position: fixed; z-index: 100; pointer-events: none; max-width: 280px;
  background: var(--ink-2); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.4;
  padding: 7px 10px; border-radius: 6px; box-shadow: var(--shadow);
}
[data-tip] { cursor: default; }
.ins-seg:hover, .ins-bar:hover, .ins-bars-fill:hover, .ins-div-bar:hover { filter: brightness(1.08); }
.ins-dot:hover { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink-3); }

@media (max-width: 1100px) {
  .ins-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ins-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ins-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-two, .ins-method-grid { grid-template-columns: minmax(0, 1fr); }
  .ins-index-head, .ins-index-row { grid-template-columns: 96px minmax(0, 1fr); }
  .ins-index-head > :last-child, .ins-index-row > :last-child { grid-column: 2; }
  .ins-stack-row, .ins-div-row, .ins-bars-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ins-div-row { grid-template-columns: minmax(0, 1fr) 56px; }
  .ins-div-label { grid-column: 1 / -1; }
  .ins-bars-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .ins-bars-label { grid-column: 1 / -1; }
  .ins-period { margin-inline-start: 0; width: 100%; }
  .ins-head h1 { font-size: 26px; }
  .ins-card { padding: 18px 16px; }
}