/* tokens.css */
/* ETF Simulator: design tokens. Scoped to .etf-sim so nothing leaks into the theme or other plugins.
   One fixed light palette (Phase 6c): no dark variant, and the OS dark setting changes nothing (the root says
   color-scheme: only light in tiles.css). Units: type and spacing in rem, so the widget scales with the visitor's
   text size (assumes the host page keeps the browser's root size); hairlines, radii and shadows stay in px. */
.etf-sim {
  /* Data colours (Apple system palette). Chart lines and swatches need 3:1 on a white tile, text 4.5:1. */
  --etf-blue: #007aff;       /* net line, slider fill: 4.0:1 on white */
  --etf-green: #248a3d;      /* gross line and swatch: 4.4:1 on white (system green #34c759 is 2.2:1) */
  --etf-red: #ff3b30;        /* fee erosion, and nothing else */
  --etf-blue-text: #0062cc;  /* 5.8:1 on white */
  --etf-green-text: #1f7a3a; /* 5.4:1 on white */
  --etf-red-text: #d70015;   /* 4.7:1 on the fee tint */
  --etf-accent: #0071e3;     /* action blue: selected pill and share glyph; white text on it 4.70:1 */
  --etf-accent-press: #0062c4;

  /* Surfaces: solid white tiles that carry their own depth, so they read on off-white and white pages alike */
  --etf-text: #1d1d1f;
  --etf-text-2: #6e6e73;     /* 5.1:1 on white, 4.9:1 on the header band */
  --etf-tile: #ffffff;
  --etf-tile-head: #fafafc;  /* header band: a solid tint, never translucent */
  --etf-tile-edge: 0 0 0 1px rgba(0, 0, 0, 0.04);
  --etf-tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
  --etf-hairline: 1px solid rgba(60, 60, 67, 0.14);
  --etf-ring: inset 0 0 0 1px rgba(60, 60, 67, 0.14); /* the same hairline for borderless controls */
  --etf-lift: 0 1px 2px rgba(31, 41, 80, 0.08);
  --etf-fill: #ffffff;       /* number fields and the select */
  --etf-pill: #f2f2f7;       /* resting capsule on a white tile */
  --etf-fill-hover: #e8e8ed;
  --etf-fill-press: #dcdce1;
  --etf-drag-tile: #ffebea;  /* solid red tint behind fee erosion: keeps --etf-red-text at 4.7:1 */
  --etf-track: rgba(120, 120, 128, 0.26);
  --etf-grid: rgba(60, 60, 67, 0.12);
  --etf-drag-fill: rgba(255, 59, 48, 0.18); /* chart area only */
  --etf-band: rgba(0, 122, 255, 0.14);

  /* Tile icons: one solid tint per tile, white glyph (decorative, aria-hidden) */
  --etf-icon-params: #0071e3;
  --etf-icon-result: #248a3d;
  --etf-icon-chart: #5856d6;
  --etf-icon-brokers: #6e6e73;

  /* Geometry: continuous corners, 44 px targets */
  --etf-radius-tile: 22px;
  --etf-radius-inner: 16px;
  --etf-radius-field: 12px;
  --etf-radius-icon: 8px;
  --etf-radius-pill: 9999px;
  --etf-hit: max(44px, 2.75rem);      /* never below 44 px, grows with the text */
  --etf-thumb-w: max(58px, 3.625rem);
  --etf-gap: 1.25rem;                 /* between tiles */
  --etf-pad: 1.25rem;                 /* inside tiles */

  /* Type ramp (Apple text styles) and size-specific tracking: tighter as text grows */
  --etf-fs-caption: 0.75rem;    /* 12 */
  --etf-fs-footnote: 0.8125rem; /* 13 */
  --etf-fs-sub: 0.875rem;       /* 14 */
  --etf-fs-callout: 0.9375rem;  /* 15 */
  --etf-fs-body: 1rem;          /* 16 */
  --etf-fs-headline: 1.0625rem; /* 17 */
  --etf-fs-title3: 1.1875rem;   /* 19 */
  --etf-fs-title2: 1.25rem;     /* 20 */
  --etf-fs-title: 1.625rem;     /* 26 */
  --etf-track-title: -0.018em;
  --etf-track-snug: -0.01em;
  --etf-track-body: -0.005em;
  --etf-track-caption: 0.01em;
  --etf-track-caps: 0.04em;

  /* Motion: critically damped spring (damping 1.0, response 0.35 s) sampled from 1-(1+wt)e^(-wt),
     w = 2*pi/0.35, over 0.5 s (99.9% settled). No overshoot: nothing here carries momentum.
     Press feedback is immediate: 100 ms ease-out on pointer-down. */
  --etf-ease: ease-out;
  --etf-dur: 0.5s;
  --etf-ease-press: ease-out;
  --etf-dur-press: 0.1s;

  --etf-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
}

@supports (transition-timing-function: linear(0, 1)) {
  .etf-sim {
    --etf-ease: linear(0, 0.075, 0.227, 0.39, 0.536, 0.656, 0.75, 0.821, 0.873, 0.911, 0.938, 0.957, 0.971,
      0.98, 0.986, 0.991, 0.994, 0.996, 0.997, 0.998, 1);
  }
}

/* tiles.css */
/* ETF Simulator: the root and its tiles (Phase 6c, icloud.com-style functional tiles).
   No canvas: the root has no background, padding, radius or shadow, so the headline and the tiles sit loose on
   whatever page background they are on. Each tile is a solid white surface with its own hairline and soft shadow,
   so it lifts off off-white and white pages alike. Nothing here is translucent.
   Anatomy: header band (icon, title, live subtitle, an action only where a real one exists), body, optional foot. */
.etf-sim,
.etf-sim *,
.etf-sim *::before,
.etf-sim *::after {
  box-sizing: border-box;
}

.etf-sim {
  display: block;
  max-width: 68.75rem;
  width: min(100%, 68.75rem); /* block-theme layouts override max-width (same specificity, printed later); width keeps the cap */
  margin: 0 auto;
  padding: 0;
  color: var(--etf-text);
  color-scheme: only light; /* the OS dark setting and Android auto-dark change nothing */
  font-family: var(--etf-font);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: var(--etf-track-body);
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

.etf-sim .etf-sim__tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  border-radius: var(--etf-radius-tile);
  background: var(--etf-tile);
  box-shadow: var(--etf-tile-edge), var(--etf-tile-shadow);
}

/* ---- Header band: a slightly different solid tint with a hairline under it ---- */
.etf-sim .etf-sim__tile-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: calc(var(--etf-hit) + 1.5rem + 1px);
  padding: 0.75rem var(--etf-pad);
  border-bottom: var(--etf-hairline);
  border-radius: var(--etf-radius-tile) var(--etf-radius-tile) 0 0;
  background: var(--etf-tile-head);
}

.etf-sim .etf-sim__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--etf-radius-icon);
  background: var(--etf-icon, var(--etf-accent));
  color: #fff;
}

.etf-sim .etf-sim__icon svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.etf-sim .etf-sim__tile--params { --etf-icon: var(--etf-icon-params); }
.etf-sim .etf-sim__tile--result { --etf-icon: var(--etf-icon-result); }
.etf-sim .etf-sim__tile--chart { --etf-icon: var(--etf-icon-chart); }
.etf-sim .etf-sim__tile--brokers { --etf-icon: var(--etf-icon-brokers); }

.etf-sim .etf-sim__tile-text {
  flex: 1 1 auto;
  min-width: 0;
}

.etf-sim .etf-sim__tile-title {
  margin: 0;
  color: var(--etf-text);
  font: 600 var(--etf-fs-headline)/1.3 var(--etf-font);
  letter-spacing: -0.008em;
}

.etf-sim .etf-sim__tile-sub,
.etf-sim .etf-sim__share-status {
  margin: 0.125rem 0 0;
  color: var(--etf-text-2);
  font-size: var(--etf-fs-footnote);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  letter-spacing: 0;
}

/* Share status: under the subtitle, next to its cause; takes no room until it has something to say */
.etf-sim .etf-sim__share-status {
  color: var(--etf-blue-text);
  overflow-wrap: anywhere;
}

.etf-sim .etf-sim__share-status:empty {
  margin: 0;
}

/* ---- Tile action (top right, only where a real action exists: share) ---- */
.etf-sim .etf-sim__action {
  all: unset;
  box-sizing: border-box;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--etf-hit);
  height: var(--etf-hit);
  margin-right: -0.625rem; /* optical: the glyph lines up with the tile's content edge */
  border-radius: var(--etf-radius-pill);
  color: var(--etf-accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--etf-dur) var(--etf-ease), background-color var(--etf-dur) var(--etf-ease);
}

.etf-sim .etf-sim__action svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

@media (hover: hover) and (pointer: fine) {
  .etf-sim .etf-sim__action:hover {
    background-color: var(--etf-fill-hover);
  }
}

.etf-sim .etf-sim__action:active {
  background-color: var(--etf-fill-press);
  transform: scale(0.97);
  transition-duration: var(--etf-dur-press);
  transition-timing-function: var(--etf-ease-press);
}

.etf-sim .etf-sim__action:focus-visible {
  outline: 3px solid var(--etf-blue);
  outline-offset: 2px;
}

/* ---- Body and foot ---- */
.etf-sim .etf-sim__tile-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--etf-pad);
}

/* Fine print at the bottom of a tile, behind an inset hairline */
.etf-sim .etf-sim__tile-foot {
  margin: 0 var(--etf-pad);
  padding: 1rem 0 var(--etf-pad);
  border-top: var(--etf-hairline);
}

/* Continuous (superellipse) corners where the browser supports them */
@supports (corner-shape: squircle) {
  .etf-sim .etf-sim__tile,
  .etf-sim .etf-sim__tile-head,
  .etf-sim .etf-sim__icon,
  .etf-sim .etf-sim__kpi--drag,
  .etf-sim .etf-sim__num,
  .etf-sim .etf-sim__select {
    corner-shape: squircle;
  }
}

/* Phone-width widget (30em = 480 px at default text size). A container query styles descendants only, so the
   tighter padding is set on the tiles, not on the root. */
@container etf-sim (max-width: 30em) {
  .etf-sim .etf-sim__tile {
    --etf-pad: 1rem;
  }
}

/* controls.css */
/* ETF Simulator: inputs (fields, number inputs, pills, select; the range slider is in range.css).
   Every interactive element is >= 44x44 and immune to theme button/select resets. Controls sit on solid white
   tiles: fields are white with a hairline, pills are light-grey capsules. Feedback starts on pointer-down
   (:active, 100 ms ease-out) and returns on the critically damped curve; hover only for precise pointers,
   so touch screens get no stuck hover. */
.etf-sim .etf-sim__field {
  margin: 0 0 1.25rem;
}

.etf-sim .etf-sim__field:last-child {
  margin-bottom: 0;
}

.etf-sim .etf-sim__row {
  display: flex;
  flex-wrap: wrap; /* with larger text the field drops under its label instead of overflowing */
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--etf-hit);
  margin-bottom: 0.125rem;
}

.etf-sim .etf-sim__label {
  flex: 1 1 0; /* basis 0: the row only wraps when the longest word and the field no longer fit */
  color: var(--etf-text);
  font-size: var(--etf-fs-callout);
  font-weight: 500;
  line-height: 1.3;
}

.etf-sim .etf-sim__hint {
  color: var(--etf-text-2);
  font-size: var(--etf-fs-sub);
  font-variant-numeric: tabular-nums;
  line-height: 1.5rem;
  text-align: right;
}

/* ---- Number field: unit + typed value ---- */
.etf-sim .etf-sim__num {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--etf-hit);
  padding: 0 0.875rem;
  border: var(--etf-hairline);
  border-radius: var(--etf-radius-field);
  background: var(--etf-fill);
  box-shadow: var(--etf-lift);
  color: var(--etf-text-2);
  font: 500 var(--etf-fs-callout)/1 var(--etf-font);
}

.etf-sim .etf-sim__num:focus-within {
  outline: 3px solid var(--etf-blue);
  outline-offset: 2px;
}

.etf-sim .etf-sim__numinput {
  all: unset;
  box-sizing: border-box;
  width: 7ch;
  min-height: var(--etf-hit);
  color: var(--etf-text);
  font: 600 var(--etf-fs-headline)/1 var(--etf-font);
  font-variant-numeric: tabular-nums;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
  cursor: text;
}

/* Field width follows its content: only the start amount needs six digits (100000); the others take at most four */
.etf-sim .etf-sim__numinput:not([data-num="principal"]) {
  width: 5ch;
}

.etf-sim .etf-sim__numinput::-webkit-outer-spin-button,
.etf-sim .etf-sim__numinput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- Pills (quick-tap amounts, broker links): solid light-grey capsules on the white tile ---- */
.etf-sim .etf-sim__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.etf-sim .etf-sim__pill {
  all: unset;
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--etf-hit);
  min-height: var(--etf-hit);
  padding: 0 0.875rem;
  border-radius: var(--etf-radius-pill);
  background-color: var(--etf-pill);
  color: var(--etf-text);
  font: 600 var(--etf-fs-callout)/1 var(--etf-font);
  letter-spacing: var(--etf-track-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--etf-dur) var(--etf-ease), background-color var(--etf-dur) var(--etf-ease);
}

@media (hover: hover) and (pointer: fine) {
  .etf-sim .etf-sim__pill:hover {
    background-color: var(--etf-fill-hover);
  }
}

.etf-sim .etf-sim__pill:active {
  background-color: var(--etf-fill-press);
  transform: scale(0.97);
  transition-duration: var(--etf-dur-press);
  transition-timing-function: var(--etf-ease-press);
}

/* Selected: colour on a solid layer (after :active so a pressed selected pill stays blue) */
.etf-sim .etf-sim__pill[aria-pressed="true"],
.etf-sim .etf-sim__pill[aria-pressed="true"]:hover {
  background-color: var(--etf-accent);
  color: #fff;
}

.etf-sim .etf-sim__pill[aria-pressed="true"]:active {
  background-color: var(--etf-accent-press);
}

.etf-sim .etf-sim__pill:focus-visible {
  outline: 3px solid var(--etf-blue);
  outline-offset: 2px;
}

/* ---- Select ---- */
.etf-sim .etf-sim__select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: var(--etf-hit);
  margin: 0;
  padding: 0 2.5rem 0 1rem;
  border: var(--etf-hairline);
  border-radius: var(--etf-radius-field);
  background-color: var(--etf-fill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  box-shadow: var(--etf-lift);
  color: var(--etf-text);
  font: 500 var(--etf-fs-body)/1.2 var(--etf-font);
  letter-spacing: var(--etf-track-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--etf-dur) var(--etf-ease);
}

.etf-sim .etf-sim__select:focus-visible {
  outline: 3px solid var(--etf-blue);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .etf-sim .etf-sim__select:hover {
    border-color: var(--etf-text-2);
    background-color: var(--etf-fill);
    color: var(--etf-text);
  }
}

.etf-sim .etf-sim__select:active {
  background-color: var(--etf-pill);
  transition-duration: var(--etf-dur-press);
  transition-timing-function: var(--etf-ease-press);
}

.etf-sim [hidden] {
  display: none !important;
}

/* range.css */
/* ETF Simulator: range slider, its own responsibility (moved out of controls.css in Phase 6c; the grabbed thumb
   no longer turns translucent). Capsule thumb with a 58x44 hit box and a 42x26 visible capsule. The thumb tracks
   the pointer 1:1 (native input) and the blue fill follows live via --etf-p, written by controls.js. Grabbed,
   the thumb grows 1.15 at once (pointer-down, no overshoot) and settles back on release. */
.etf-sim .etf-sim__range {
  --etf-p: 0; /* 0..1, written by controls.js */
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--etf-hit);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.etf-sim .etf-sim__range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--etf-radius-pill);
  background: linear-gradient(
    to right,
    var(--etf-blue) calc(var(--etf-p) * (100% - var(--etf-thumb-w)) + var(--etf-thumb-w) / 2),
    var(--etf-track) 0
  );
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.etf-sim .etf-sim__range::-moz-range-track {
  height: 8px;
  border-radius: var(--etf-radius-pill);
  background: var(--etf-track);
}

.etf-sim .etf-sim__range::-moz-range-progress {
  height: 8px;
  border-radius: var(--etf-radius-pill);
  background: var(--etf-blue);
}

.etf-sim .etf-sim__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--etf-thumb-w);
  height: var(--etf-hit);
  margin-top: calc((8px - var(--etf-hit)) / 2);
  border: solid transparent;
  border-width: 9px 8px;
  border-radius: var(--etf-radius-pill);
  background: linear-gradient(180deg, #fff, #eef0f5);
  background-clip: padding-box;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
  transition: transform var(--etf-dur) var(--etf-ease);
}

.etf-sim .etf-sim__range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--etf-thumb-w);
  height: var(--etf-hit);
  border: solid transparent;
  border-width: 9px 8px;
  border-radius: var(--etf-radius-pill);
  background: linear-gradient(180deg, #fff, #eef0f5);
  background-clip: padding-box;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
  transition: transform var(--etf-dur) var(--etf-ease);
}

/* Grabbed: the thumb grows at once (pointer-down), no overshoot; it settles back on release */
.etf-sim .etf-sim__range:active::-webkit-slider-thumb {
  transform: scale(1.15);
  transition-duration: var(--etf-dur-press);
  transition-timing-function: var(--etf-ease-press);
}

.etf-sim .etf-sim__range:active::-moz-range-thumb {
  transform: scale(1.15);
  transition-duration: var(--etf-dur-press);
  transition-timing-function: var(--etf-ease-press);
}

.etf-sim .etf-sim__range:focus-visible {
  outline: 3px solid var(--etf-blue);
  outline-offset: 2px;
  border-radius: var(--etf-radius-pill);
}

/* layout.css */
/* ETF Simulator: layout. Intro headline, the tile grid, result figures and rows, chart box (CLS 0), legend,
   band note, disclaimer. Layout follows the widget's own width (container queries), not the viewport: in a block
   theme the widget may sit in a narrow content column on a wide screen. Container-query em units resolve against
   the widget's own 1rem, so larger text switches layouts earlier. */
.etf-sim {
  container: etf-sim / inline-size;
}

/* ---- Intro: the widget's title and subtitle as a plain section headline (no tile around a heading) ---- */
.etf-sim .etf-sim__intro {
  max-width: 44rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.etf-sim .etf-sim__title {
  margin: 0;
  color: var(--etf-text);
  font: 600 1.75rem/1.1 var(--etf-font);
  font-size: clamp(1.375rem, 0.95rem + 2.3cqi, 2.5rem); /* 22 px in a phone-wide widget, 40 px at 1100 px */
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.etf-sim .etf-sim__subtitle {
  margin: 0.625rem 0 0;
  color: var(--etf-text-2);
  font-size: var(--etf-fs-headline);
  font-size: clamp(1rem, 0.85rem + 0.7cqi, 1.1875rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* ---- Tile grid: one column, then Parameters left over two rows, Result and Chart right, Brokers across ---- */
.etf-sim .etf-sim__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--etf-gap);
}

/* ---- Result: three primary figures, then three rows. The Result tile is its own container, so the figures
   stand in three columns only where each column has room for an eight-digit amount (a 40em = 640 px tile);
   narrower, they are rows like the others. ---- */
.etf-sim .etf-sim__tile--result {
  container: etf-sim-result / inline-size;
}

.etf-sim .etf-sim__kpis {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  margin: -0.25rem -0.75rem 0.75rem; /* text lines up with the rows; the fee tint reaches into the tile padding */
}

.etf-sim .etf-sim__kpi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.125rem 1rem;
}

.etf-sim .etf-sim__kpis .etf-sim__kpi {
  padding: 0.5rem 0.75rem;
  border-radius: var(--etf-radius-inner);
}

.etf-sim .etf-sim__kpi-label {
  color: var(--etf-text-2);
  font-size: var(--etf-fs-caption);
  font-weight: 600;
  letter-spacing: var(--etf-track-caps);
  text-transform: uppercase;
}

.etf-sim .etf-sim__kpi-value {
  font-size: var(--etf-fs-title2);
  font-weight: 700;
  letter-spacing: var(--etf-track-snug);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Rows: label left, value right, hairline separators (iCloud list rows) */
.etf-sim .etf-sim__rows .etf-sim__kpi {
  min-height: var(--etf-hit);
  padding: 0.6875rem 0;
  border-top: var(--etf-hairline);
}

.etf-sim .etf-sim__rows .etf-sim__kpi-label {
  color: var(--etf-text);
  font-size: var(--etf-fs-callout);
  font-weight: 400;
  letter-spacing: var(--etf-track-body);
  text-transform: none;
}

.etf-sim .etf-sim__rows .etf-sim__kpi-value {
  font-size: var(--etf-fs-callout);
  font-weight: 600;
  letter-spacing: var(--etf-track-body);
}

.etf-sim .etf-sim__kpi--gross .etf-sim__kpi-value { color: var(--etf-green-text); }
.etf-sim .etf-sim__kpi--net .etf-sim__kpi-value { color: var(--etf-blue-text); }
.etf-sim .etf-sim__kpi--share .etf-sim__kpi-value { color: var(--etf-red-text); }

.etf-sim .etf-sim__kpi--drag {
  background: var(--etf-drag-tile); /* solid tint, never a translucent layer */
}

.etf-sim .etf-sim__kpi--drag .etf-sim__kpi-label,
.etf-sim .etf-sim__kpi--drag .etf-sim__kpi-value {
  color: var(--etf-red-text);
}

@container etf-sim-result (min-width: 40em) {
  .etf-sim .etf-sim__kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .etf-sim .etf-sim__kpis .etf-sim__kpi {
    display: block;
    padding: 0.75rem;
  }

  .etf-sim .etf-sim__kpis .etf-sim__kpi-label,
  .etf-sim .etf-sim__kpis .etf-sim__kpi-value {
    display: block;
  }

  .etf-sim .etf-sim__kpis .etf-sim__kpi-value {
    margin-top: 0.25rem;
  }
}

/* ---- Chart: fixed box reserves space before Chart.js paints, so CLS stays 0 ---- */
.etf-sim .etf-sim__chart {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 16.25rem;
}

.etf-sim .etf-sim__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.etf-sim .etf-sim__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--etf-text-2);
  font-size: var(--etf-fs-footnote);
}

.etf-sim .etf-sim__legend li::before {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: var(--etf-swatch);
}

.etf-sim .etf-sim__legend-gross { --etf-swatch: var(--etf-green); }
.etf-sim .etf-sim__legend-net { --etf-swatch: var(--etf-blue); }
.etf-sim .etf-sim__legend-drag { --etf-swatch: var(--etf-red); }
.etf-sim .etf-sim__legend-paid { --etf-swatch: var(--etf-text-2); }
.etf-sim .etf-sim__legend-band { --etf-swatch: var(--etf-band); }

.etf-sim .etf-sim__note {
  min-height: 2.8em; /* two lines reserved: no layout shift when the text is filled in */
  margin: 0.5rem 0 0;
  color: var(--etf-text-2);
  font-size: var(--etf-fs-footnote);
  line-height: 1.4;
  letter-spacing: 0;
}

/* AFM / Wft disclaimer: the Result tile's foot, directly under the figures */
.etf-sim .etf-sim__disclaimer {
  margin: 0;
  color: var(--etf-text-2);
  font-size: var(--etf-fs-footnote);
  line-height: 1.5;
  letter-spacing: 0;
}

.etf-sim .etf-sim__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Two columns from a 48.75em (780 px) widget. The chart row takes any spare height (1fr), so the Result tile
   stays tight and its disclaimer stays directly under the figures. */
@container etf-sim (min-width: 48.75em) {
  .etf-sim .etf-sim__grid {
    grid-template-columns: minmax(20rem, 2fr) minmax(0, 3fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "params result"
      "params chart"
      "brokers brokers";
  }

  .etf-sim .etf-sim__tile--params { grid-area: params; }
  .etf-sim .etf-sim__tile--result { grid-area: result; }
  .etf-sim .etf-sim__tile--chart { grid-area: chart; }
  .etf-sim .etf-sim__tile--brokers { grid-area: brokers; }
}

/* Phone-width widget (30em = 480 px at default text size) */
@container etf-sim (max-width: 30em) {
  .etf-sim .etf-sim__intro {
    margin-bottom: 1.5rem;
  }

  /* Quick-pick amounts: three equal columns so "€ 10.000" never wraps to its own row */
  .etf-sim .etf-sim__pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .etf-sim .etf-sim__pills .etf-sim__pill {
    padding: 0 0.375rem;
    white-space: nowrap;
  }

  .etf-sim .etf-sim__chart {
    aspect-ratio: 4 / 3;
  }
}

/* brokers.css */
/* ETF Simulator: neutral broker list, Mail-like rows in one tile (Phase 6c). Every row is styled the same: no
   ranking, highlight, hover or selected state per row. DOM and reading order stay alphabetical (brokers.js);
   from 48.75em the rows flow down two columns with a vertical hairline between them. Scoped to .etf-sim. */
.etf-sim .etf-sim__brokers-intro {
  margin: 0 0 0.5rem;
  color: var(--etf-text-2);
  font-size: var(--etf-fs-sub);
  line-height: 1.5;
}

.etf-sim .etf-sim__brokers-list {
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 13.125rem; /* reserves space before the rows are built: no layout shift */
}

/* One row: name as the row title, facts as secondary lines, the link as the row's value on the right */
.etf-sim .etf-sim__broker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head link"
    "facts link";
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.875rem 0;
  border-top: var(--etf-hairline);
  break-inside: avoid;
}

.etf-sim .etf-sim__broker-head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.etf-sim .etf-sim__broker-name {
  margin: 0;
  color: var(--etf-text);
  font: 600 var(--etf-fs-headline)/1.3 var(--etf-font);
  letter-spacing: -0.008em;
}

/* Paid placements only (none at ladder step 0): the AFM/ACM label "Advertentie" / "Ad" */
.etf-sim .etf-sim__broker-ad {
  padding: 0.125rem 0.5rem;
  border-radius: var(--etf-radius-pill);
  background: var(--etf-pill);
  color: var(--etf-text);
  font-size: var(--etf-fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--etf-track-caps);
}

.etf-sim .etf-sim__broker-facts {
  grid-area: facts;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--etf-text-2);
  font-size: var(--etf-fs-sub);
  line-height: 1.45;
}

.etf-sim .etf-sim__broker-facts li + li {
  margin-top: 0.125rem;
}

.etf-sim .etf-sim__broker-link {
  grid-area: link;
  justify-self: end;
  color: var(--etf-blue-text);
  text-decoration: none;
  white-space: nowrap;
}

.etf-sim .etf-sim__brokers-foot {
  margin: 0;
  color: var(--etf-text-2);
  font-size: var(--etf-fs-footnote);
  line-height: 1.5;
  letter-spacing: 0;
}

@container etf-sim (min-width: 48.75em) {
  .etf-sim .etf-sim__brokers-list {
    columns: 2;
    column-gap: 2.5rem;
    column-rule: var(--etf-hairline);
  }
}

/* Phone width: the link moves under the facts, left-aligned */
@container etf-sim (max-width: 30em) {
  .etf-sim .etf-sim__broker {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "facts"
      "link";
  }

  .etf-sim .etf-sim__broker-link {
    justify-self: start;
    margin-top: 0.5rem;
  }
}

/* preferences.css */
/* ETF Simulator: visitor preferences. Loaded last, so these rules win over the tile and control rules.
   Reduced motion keeps feedback, but as a tint instead of movement; increased contrast draws defined borders and
   darkens secondary text; forced colours keep tiles and controls outlined. Nothing in the widget is translucent,
   so reduced transparency needs no rule here.
   Note: ::-webkit- and ::-moz- pseudo-elements sit in separate rules (one unknown selector drops a whole list). */

@media (prefers-reduced-motion: reduce) {
  .etf-sim .etf-sim__pill,
  .etf-sim .etf-sim__action,
  .etf-sim .etf-sim__select {
    transition: none;
  }

  .etf-sim .etf-sim__range::-webkit-slider-thumb {
    transition: none;
  }

  .etf-sim .etf-sim__range::-moz-range-thumb {
    transition: none;
  }

  /* Pressed = darker fill (controls.css, tiles.css), no scaling */
  .etf-sim .etf-sim__pill:active,
  .etf-sim .etf-sim__action:active {
    transform: none;
  }

  .etf-sim .etf-sim__range:active::-webkit-slider-thumb {
    transform: none;
  }

  .etf-sim .etf-sim__range:active::-moz-range-thumb {
    transform: none;
  }
}

/* Increased contrast: a defined 1px border instead of the soft shadow, darker secondary text */
@media (prefers-contrast: more) {
  .etf-sim {
    --etf-text-2: #3a3a3c;
    --etf-hairline: 1px solid #8e8e93;
    --etf-ring: inset 0 0 0 1px #8e8e93;
    --etf-track: #8e8e93;
    --etf-tile-edge: 0 0 0 1px #8e8e93;
    --etf-tile-shadow: 0 0 0 0 transparent;
  }

  .etf-sim .etf-sim__pill {
    box-shadow: var(--etf-ring);
  }

  /* Selected pill: white text on the darker text-safe blue (5.8:1) */
  .etf-sim .etf-sim__pill[aria-pressed="true"],
  .etf-sim .etf-sim__pill[aria-pressed="true"]:hover {
    background-color: var(--etf-blue-text);
    box-shadow: none;
  }

  .etf-sim .etf-sim__broker-link {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

/* Windows High Contrast and other forced palettes: shadows and backgrounds are dropped, so give tiles and
   borderless controls a real outline and mark the selected pill */
@media (forced-colors: active) {
  .etf-sim .etf-sim__tile {
    outline: 1px solid CanvasText;
  }

  .etf-sim .etf-sim__kpi--drag {
    outline: 1px solid CanvasText;
  }

  .etf-sim .etf-sim__pill,
  .etf-sim .etf-sim__action {
    border: 1px solid ButtonText;
  }

  .etf-sim .etf-sim__pill[aria-pressed="true"] {
    border: 2px solid Highlight;
  }

  .etf-sim .etf-sim__range::-webkit-slider-thumb {
    background: ButtonText;
  }

  .etf-sim .etf-sim__range::-moz-range-thumb {
    background: ButtonText;
  }
}