/* ==========================================================================
   Curodont Impact Simulator
   Prototype stylesheet. All selectors namespaced .cis- to avoid theme and
   Elementor collisions. Custom properties are scoped to .cis so the widget
   cannot leak styles into the surrounding page.
   ========================================================================== */

.cis {
  /* Brand palette */
  /* Palette
     The teal family is built on a single hue (~174deg), taken from the
     client's reference swatches #D1E9E7 and #CBF0EC, so the panel tints,
     the patient icons and the accent all read as one system. The earlier
     panel greens sat near hue 155, which is why they looked like a
     different colour from the rest. */

  --cis-dark:        #0d3b33;  /* dark green panel                        */
  --cis-darker:      #072620;  /* deep green, headings                    */
  --cis-black:       #000000;  /* footer strip                            */

  --cis-mint:        #e7f3f2;  /* input panel        h174 s35 l93         */
  --cis-mint-alt:    #f1f8f7;  /* alternating row    h174 s33 l96         */
  --cis-border:      #dceae9;  /* h174, client #D1E9E7 lightness          */

  --cis-eligible:    #77cdc3;  /* eligible patients  h173 s46 l64         */
  --cis-icon-idle:   #cad6dd;  /* patients without a lesion               */

  /* Interactive accent. #2ec4b6 sits at 2.17:1 on white, below the 4.5:1
     WCAG AA threshold for body text, so links and the info badge use a
     deeper tone on the same hue. The lighter tone is kept for focus rings,
     where the requirement is 3:1 against the adjacent colour. */
  --cis-accent:      #17847a;  /* links, info badge   4.55:1 on white     */
  --cis-accent-soft: #2ec4b6;  /* focus rings, hover states               */

  --cis-text:        #0d3b33;
  --cis-text-muted:  #5c7a72;
  --cis-white:       #ffffff;

  /* Scale */
  --cis-radius:      18px;
  --cis-radius-sm:   10px;
  --cis-gap:         28px;
  --cis-thumb:       19px;   /* keep in sync with the range thumb rules */

  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  color: var(--cis-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  container-type: inline-size;
  container-name: cis;
}

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

/* ==========================================================================
   Theme isolation

   The widget is dropped into pages whose theme and page builder style bare
   element selectors — on the vVARDIS site the Elementor global kit sets
   `.elementor-kit-8 h2 { font-family: Italiana }` and uppercases every
   `button`. Those rules carry specificity (0,1,1) and, because Elementor's
   per-page CSS is enqueued after plugin CSS, they also win on source order.

   The block below re-asserts our own typography for the elements we own.
   `.cis` on both sides gives specificity (0,2,0), which beats the kit without
   resorting to !important, and the doubled class is scoped so nothing here
   escapes into the surrounding page.
   ========================================================================== */

.cis .cis__title,
.cis .cis__panel-title,
.cis .cis__viz-title,
.cis .cis__totals-title {
	font-family: inherit;
}

.cis .cis__title {
	font-size: clamp(1.35rem, 0.95rem + 1.9vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-transform: none;
}

.cis .cis__panel-title,
.cis .cis__viz-title {
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	font-style: normal;
}

.cis .cis__totals-title {
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.45rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	font-style: italic;
}

/* Buttons: themes commonly set text-transform, letter-spacing and their own
   font stack on every button on the page. */
.cis .cis__reset,
.cis .cis__moreinfo {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	line-height: inherit;
	box-shadow: none;
	min-height: 0;
	width: auto;
	text-shadow: none;
}

/* Form controls: reset theme-level borders, shadows and heights that would
   otherwise reshape the number inputs and range tracks. */
.cis .cis-field__number {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	height: auto;
	line-height: normal;
}

.cis .cis-range {
	padding: 0;
	border: none;
	box-shadow: none;
	min-height: 0;
	height: 22px;
	background: transparent;
}

/* Lists inside the citation panels. */
.cis .cis__disclosure ul {
	list-style: disc;
	margin: 0 0 0.7em;
	padding-left: 1.1em;
}

.cis .cis__disclosure li {
	margin-bottom: 0.35em;
	list-style: disc;
}

/* Weight. The Elementor kit sets `font-weight: 200` on the body, which every
   unweighted element in the widget would inherit, so the widget sets its own
   base. The vVARDIS theme's style.css also has
   `strong, b { font-weight: 400 !important; }`, which only another !important
   can beat; it is scoped to .cis so the rest of the page is unaffected. */
.cis { font-weight: 400; }

.cis b,
.cis strong { font-weight: 700 !important; }

.cis .cis__note b { font-weight: 600 !important; }

/* Paragraph margins are set by themes at the element level. */
.cis p {
	margin-top: 0;
}


/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

/* Title
   The bottom margin is in rem, not em: an em value is relative to the title's
   own font size, so it grew to ~66px at the largest clamp step. */
.cis__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: clamp(1.35rem, 0.95rem + 1.9vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1.75rem;
  color: var(--cis-black);
}

/* Logo sits at the head of the title, scaled to the cap height of the text
   so it stays proportional across the clamp range. */
.cis__title-logo {
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
}

@media (max-width: 460px) {
  .cis__title { gap: 0.4em; }
  .cis__title-logo { width: 1.3em; height: 1.3em; }
}

.cis__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cis-gap);
  align-items: start;
}

@container cis (min-width: 900px) {
  .cis__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .cis__panel { display: flex; flex-direction: column; }
  .cis-field { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  .cis__reset-row { margin-top: auto; }
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
  @media (min-width: 960px) {
    .cis__grid {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
      align-items: stretch;
    }
    .cis__panel { display: flex; flex-direction: column; }
    .cis-field { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
    .cis__reset-row { margin-top: auto; }
  }
}

/* --------------------------------------------------------------------------
   Left column - inputs
   -------------------------------------------------------------------------- */

.cis__panel {
  background: var(--cis-mint);
  border: 1px solid var(--cis-border);
  border-radius: var(--cis-radius);
  overflow: hidden;
}

/* Header takes the lighter tint so it reads as a heading rather than merging
   with the first slider row, which shares the panel's base colour. It matches
   the reset row at the foot of the panel, framing the fields between them. */
.cis__panel-title {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  padding: 24px 26px 18px;
  background: var(--cis-mint-alt);
  border-bottom: 1px solid rgba(13, 59, 51, 0.07);
}

.cis-field {
  padding: 20px 26px 24px;
  border-top: 1px solid rgba(13, 59, 51, 0.07);
}
.cis-field:nth-of-type(even) { background: var(--cis-mint-alt); }

.cis-field__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.cis-field__label {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.cis-field__ref {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--cis-text-muted);
  margin-top: 2px;
}

/* Numeric entry */
.cis-field__entry {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.cis-field__number {
  width: 84px;
  padding: 10px 12px;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  color: var(--cis-text);
  background: var(--cis-white);
  border: 1px solid var(--cis-border);
  border-radius: var(--cis-radius-sm);
  box-shadow: 0 1px 2px rgba(13, 59, 51, 0.06);
  -moz-appearance: textfield;
}
.cis-field__number::-webkit-outer-spin-button,
.cis-field__number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cis-field__number:focus-visible {
  outline: 2px solid var(--cis-accent-soft);
  outline-offset: 2px;
}

.cis-field__unit {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--cis-text);
}

/* Slider */
.cis-field__slider-wrap { position: relative; }

.cis-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;              /* generous hit area */
  background: transparent;
  cursor: pointer;
  display: block;
  margin: 0;
}
.cis-range:focus { outline: none; }

/* Track - the filled portion is painted via a gradient driven by --cis-pct,
   which JS updates on input. Avoids a second element in the DOM. */
.cis-range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--cis-dark) 0%,
    var(--cis-dark) var(--cis-pct, 50%),
    #ffffff var(--cis-pct, 50%),
    #ffffff 100%
  );
  border: 1px solid var(--cis-border);
}
.cis-range::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--cis-border);
}
.cis-range::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--cis-dark);
}

.cis-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--cis-thumb);
  height: var(--cis-thumb);
  margin-top: -8px;
  border-radius: 50%;
  background: var(--cis-dark);
  border: none;
  box-shadow: 0 1px 4px rgba(7, 38, 32, 0.35);
  transition: transform 0.15s ease;
}
.cis-range::-moz-range-thumb {
  width: var(--cis-thumb);
  height: var(--cis-thumb);
  border-radius: 50%;
  background: var(--cis-dark);
  border: none;
  box-shadow: 0 1px 4px rgba(7, 38, 32, 0.35);
  transition: transform 0.15s ease;
}
.cis-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.cis-range:active::-moz-range-thumb     { transform: scale(1.15); }

.cis-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--cis-white), 0 0 0 5px var(--cis-accent-soft);
}
.cis-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--cis-white), 0 0 0 5px var(--cis-accent-soft);
}

/* Reference tick mark showing the default position */
/* Reference tick.
   A range thumb's centre travels between half a thumb-width from each end,
   never the full track width. Positioning by a flat percentage therefore
   drifts outward towards the extremes (about +1.2% at 80%, which read as 81%).
   --cis-tick-pct is set by JS; the calc maps it onto the real travel. */
.cis-field__tick {
  position: absolute;
  top: 1px;
  left: calc(
    (var(--cis-thumb) / 2) +
    ((100% - var(--cis-thumb)) * var(--cis-tick-pct, 0.5))
  );
  width: 1px;
  height: 9px;
  background: var(--cis-darker);
  opacity: 0.55;
  transform: translateX(-50%);
  pointer-events: none;
}

.cis-field__scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--cis-text-muted);
  margin-top: 4px;
}

/* Reset */
.cis__reset-row {
  padding: 16px 26px 22px;
  text-align: right;
  background: var(--cis-mint-alt);
  border-top: 1px solid rgba(13, 59, 51, 0.07);
}
.cis__reset {
  font: inherit;
  font-size: 0.95rem;
  color: var(--cis-accent);
  background: none;
  border: none;
  padding: 6px 2px;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s ease;
}
.cis__reset:hover { color: var(--cis-dark); text-decoration: underline; }
.cis__reset:focus-visible {
  outline: 2px solid var(--cis-accent-soft);
  outline-offset: 2px;
}
.cis__reset[disabled] {
  opacity: 0.4;
  cursor: default;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Right column - results
   -------------------------------------------------------------------------- */

.cis__results {
  border: 1px solid var(--cis-border);
  border-radius: var(--cis-radius);
  overflow: hidden;
  background: var(--cis-white);
}

.cis__viz { padding: 26px 26px 22px; }

/* Results column is a flex column so the black strip always sits flush at the
   bottom regardless of content height. */
.cis__results { display: flex; flex-direction: column; }
.cis__viz    { flex: 1 1 auto; }

.cis__viz-title {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
  font-weight: 500;
  text-align: center;
  margin: 0 0 22px;
}

/* Patient icon grid */
.cis__people {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(4px, 1.2cqw, 12px);
  margin: 0 auto 22px;
  max-width: 560px;
  list-style: none;
  padding: 0;
}

.cis__person-slot {
  transition: opacity 0.28s ease;
  transition-delay: calc(var(--i, 0) * 9ms);
  line-height: 0;
}

/* Slots beyond the entered patient count: outline variant, recessive. */
.cis__person-slot.is-outside { opacity: 0.5; }

.cis__person {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.12;
  color: var(--cis-icon-idle);
  transition: color 0.28s ease;
  transition-delay: calc(var(--i, 0) * 9ms);
}
.cis__person.is-eligible {
  color: var(--cis-eligible);
}

/* Caption
   Held at a fixed minimum height so the panel does not jump as the sentence
   rewraps while a slider is dragged. Two short lines at the widest wrap. */
.cis__caption {
  text-align: center;
  font-size: clamp(0.8rem, 0.75rem + 0.22vw, 0.92rem);
  line-height: 1.45;
  margin: 0 auto;
  max-width: 62ch;          /* wide enough that each sentence stays on one line */
  color: var(--cis-text);
  min-height: 4.6em;        /* reserves room for 2 lines + gap */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.cis__caption-line { margin: 0; }
.cis__caption b { font-weight: 700; }

/* Dark totals panel */
.cis__totals {
  background: var(--cis-dark);
  color: var(--cis-white);
  padding: 26px 26px 30px;
}

.cis__totals-title {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.45rem);
  font-style: italic;
  font-weight: 500;
  margin: 0 0 18px;
  text-align: center;
}

.cis__figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: center;
}

.cis__figure-value {
  display: block;
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cis__figure-label {
  display: block;
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.98rem);
  font-weight: 400;
  margin-top: 4px;
  opacity: 0.92;
}

.cis__strip {
  margin: 0;
  background: var(--cis-black);
  color: var(--cis-white);
  text-align: center;
  font-style: italic;
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.2rem);
  padding: 16px 20px;
}

/* --------------------------------------------------------------------------
   Health band - ribbon + mortality figures
   -------------------------------------------------------------------------- */

.cis .cis__health-title,
.cis .cis__util-title {
  font-family: inherit;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
}

.cis__health {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4cqw, 44px);
  margin-top: var(--cis-gap);
  padding: 30px clamp(22px, 4cqw, 44px);
  background: var(--cis-mint);
  border: 1px solid var(--cis-border);
  border-radius: var(--cis-radius);
}

.cis__ribbon {
  display: block;
  width: clamp(96px, 12cqw, 150px);
  max-width: none;
  height: auto;
}

.cis .cis__health-title {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--cis-darker);
}

.cis__health-lead {
  margin: 0 0 20px;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  max-width: 58ch;
}

.cis__health-kicker {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cis-accent);
}

.cis__health-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
  max-width: 620px;
}

.cis__stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--cis-white);
  border: 1px solid var(--cis-border);
  border-radius: var(--cis-radius-sm);
}
.cis__stat-value {
  flex: 0 0 auto;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cis-dark);
  font-variant-numeric: tabular-nums;
}
.cis__stat-value::before { content: "+"; font-weight: 500; opacity: 0.6; margin-right: 1px; }
.cis__stat-label {
  font-size: 0.88rem;
  line-height: 1.35;
}
.cis__stat-label sup { font-size: 0.7em; line-height: 0; }

.cis__health-tagline {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  font-style: italic;
  color: var(--cis-accent);
}

/* --------------------------------------------------------------------------
   Clinical resource utilization
   -------------------------------------------------------------------------- */

.cis__util {
  margin-top: var(--cis-gap);
  padding: 30px clamp(22px, 4cqw, 44px) 32px;
  background: var(--cis-white);
  border: 1px solid var(--cis-border);
  border-radius: var(--cis-radius);
}

.cis__util-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.cis__util-intro { flex: 1 1 380px; max-width: 640px; }
.cis__util-intro p { margin: 0; }

.cis .cis__util-title {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--cis-darker);
}

/* Ratio sits in the same dark panel treatment as the totals, so the two
   headline numbers on the page read as a pair. */
.cis__util-ratio {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--cis-dark);
  color: var(--cis-white);
  border-radius: var(--cis-radius-sm);
}
.cis__util-ratio-value {
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.cis__util-ratio-label { font-size: 0.9rem; line-height: 1.3; }

/* Subtitle bar over the comparison, in the same mint-and-teal pairing as the
   "Hygienist" tag. The text is a shade deeper than --cis-accent: the accent
   on mint is 4.0:1, this tone is 4.6:1 and reads as the same colour. */
.cis__util-sub {
  margin: 0 0 26px;
  padding: 9px 16px;
  background: var(--cis-mint);
  color: #157a70;
  border-radius: var(--cis-radius-sm);
  text-align: center;
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem);
  font-weight: 500;
  line-height: 1.35;
}
.cis__util-sub sup {
  font-size: 0.65em;
  line-height: 0;
  vertical-align: super;
}

.cis__lanes { display: grid; gap: 22px; }

.cis__lane {
  display: grid;
  grid-template-columns: 150px 100px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.cis__lane-id { display: flex; flex-direction: column; align-items: flex-start; }
.cis__lane-name {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cis__lane-who {
  margin-top: 6px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 999px;
  background: var(--cis-mint);
  color: var(--cis-accent);
}
.cis__lane--filling .cis__lane-who {
  background: #eef2f4;
  color: var(--cis-text-muted);
}

/* Patients-per-hour figure on a clock face, label beneath. */
.cis__lane-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cis__clock {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
}
.cis__clock svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cis__clock b {
  position: relative;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cis__lane--filling .cis__clock b { font-size: 1.45rem; }
.cis__lane--curodont .cis__clock { color: var(--cis-accent); }
.cis__lane--filling  .cis__clock { color: #7d9099; }
.cis__lane-rate-label {
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.25;
}

/* The icon row. Fixed 12 columns in both lanes so an icon is the same width
   in each, and the rows compare by length. */
.cis__lane-icons {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(3px, 0.9cqw, 10px);
  max-width: 620px;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  border-bottom: 2px solid var(--cis-border);
}
.cis__lane-icons li { position: relative; line-height: 0; margin: 0; }
.cis__lane-icons svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 32 / 40;
}
.cis__lane--curodont .cis__lane-icons { color: var(--cis-eligible); }
.cis__lane--filling  .cis__lane-icons { color: #9fb0b8; }

/* Fractional patient: a faint full figure with a clipped solid on top. */
.cis__part-ghost { opacity: 0.22; }
.cis__part-fill {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc((1 - var(--cis-part, 0.25)) * 100%) 0 0);
}

@container cis (max-width: 700px) {
  .cis__health {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .cis__health-lead { margin-left: auto; margin-right: auto; }
  .cis__health-stats { grid-template-columns: 1fr; width: 100%; }
  .cis__stat { text-align: left; }

  .cis__lane {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
  }
  .cis__lane-icons { grid-column: 1 / -1; }
}

@container cis (max-width: 460px) {
  .cis__util-ratio { width: 100%; }
}

/* --------------------------------------------------------------------------
   Footnotes
   -------------------------------------------------------------------------- */

/* Set well apart from the cards above and kept quiet: small muted type,
   tight spacing, a hairline to mark the start of the sources. */
.cis__notes {
  margin-top: clamp(72px, 9cqw, 112px);
  padding-top: 18px;
  border-top: 1px solid var(--cis-border);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--cis-text-muted);
}
.cis__note { max-width: 135ch; }
.cis__note + .cis__note { margin-top: 6px; }
.cis__note:last-child { margin-top: 12px; }
.cis__note p { margin: 0; }
.cis__note b { font-weight: 600; color: var(--cis-text); }

/* Sits inline at the end of its note so the link reads as part of the
   sentence. white-space:nowrap keeps the label and its badge together if the
   note wraps; the whole button then moves to the next line as a unit. */
.cis__moreinfo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  vertical-align: baseline;
  white-space: nowrap;
  font: inherit;
  font-size: 1em;
  line-height: inherit;
  color: var(--cis-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
}
.cis__moreinfo:hover { text-decoration: underline; }

/* Variant whose label carries the note text, so it needs the note's own
   weight rather than sitting as a trailing link. */
.cis__moreinfo--plain {
  margin-left: 0;
  font-weight: 600;
}
.cis__moreinfo:focus-visible {
  outline: 2px solid var(--cis-accent-soft);
  outline-offset: 3px;
}
.cis__moreinfo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cis-accent);
  color: var(--cis-white);
  font-size: 0.62rem;
  font-weight: 700;
  font-style: italic;
  flex: 0 0 auto;
}

/* Disclosure panel */
.cis__disclosure {
  margin: 8px 0 12px;
  padding: 16px 18px;
  background: var(--cis-mint);
  border: 1px solid var(--cis-border);
  border-radius: var(--cis-radius-sm);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--cis-text);
}
.cis__disclosure[hidden] { display: none; }
.cis__disclosure p { margin: 0 0 0.7em; }
.cis__disclosure p:last-child { margin-bottom: 0; }
.cis__disclosure ul { margin: 0 0 0.7em; padding-left: 1.1em; }
.cis__disclosure li { margin-bottom: 0.35em; }

/* --------------------------------------------------------------------------
   Mobile
   Order: sliders, numbers, graphic + caption, notes.
   The dark totals panel is pulled above the visualisation on small screens so
   the figures stay in view while a slider is being dragged.
   -------------------------------------------------------------------------- */

/* Stacked layout: results above inputs is handled by grid order; within the
   results card the totals are pulled above the visualisation so the figures
   stay in view while a slider is dragged. */
@container cis (max-width: 899px) {
  .cis__results { display: flex; flex-direction: column; }
  .cis__totals  { order: 1; }
  .cis__viz     { order: 2; }
  .cis__strip   { order: 3; }

  .cis__caption { min-height: 5.8em; }
}

/* Tablet: keep the 10-across arrangement, shrink the icons to suit.
   A 5-across grid at this width leaves too much dead space either side. */
@container cis (min-width: 520px) and (max-width: 899px) {
  .cis__people {
    grid-template-columns: repeat(10, 1fr);
    max-width: 460px;
    gap: clamp(5px, 1.1cqw, 9px);
  }
}

/* Phone: 10 across is retained so the sample stays 50 and the caption keeps
   reading "of every 50". Icons shrink rather than the grid reflowing. */
@container cis (max-width: 519px) {
  .cis__people {
    grid-template-columns: repeat(10, 1fr);
    max-width: 340px;
    gap: 4px;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 959px) {
    .cis__results { display: flex; flex-direction: column; }
    .cis__totals  { order: 1; }
    .cis__viz     { order: 2; }
    .cis__strip   { order: 3; }
    .cis__caption { min-height: 5.8em; }
  }
  @media (min-width: 560px) and (max-width: 959px) {
    .cis__people {
      grid-template-columns: repeat(10, 1fr);
      max-width: 460px;
      gap: 7px;
    }
  }
  @media (max-width: 559px) {
    .cis__people {
      grid-template-columns: repeat(10, 1fr);
      max-width: 340px;
      gap: 4px;
    }
  }
}

@media (max-width: 460px) {
  .cis-field { padding: 16px 18px 20px; }
  .cis__panel-title { padding: 20px 18px 14px; }
  .cis__reset-row { padding: 14px 18px 18px; }
  .cis__viz { padding: 22px 16px 18px; }
  .cis__totals { padding: 22px 16px 24px; }
  .cis-field__head { gap: 10px; }
  .cis-field__number { width: 72px; font-size: 1.05rem; padding: 8px 10px; }
  .cis__figures { gap: 6px; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cis__person,
  .cis__person-slot {
    transition: none;
    transition-delay: 0ms !important;
  }
  .cis-range::-webkit-slider-thumb,
  .cis-range::-moz-range-thumb { transition: none; }
}

/* Screen-reader only */
.cis__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}