/* 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: #0066cc;  /* 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: #0058b0;

  /* 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: #fbfbfd;  /* 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-line: rgba(255, 59, 48, 0.38); /* fee erosion line: softer than the main lines */
  --etf-drag-fill: rgba(255, 59, 48, 0.18); /* chart area only */

  /* 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: 2rem;                  /* pill knob (2 x 1.25rem); the input itself stays 44 px high, a tap anywhere on it moves the value */
  --etf-thumb-h: 1.25rem;
  --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;
  position: relative; /* anchors the share menu */
  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;
}

/* ---- Share menu: a small solid sheet under the action (never translucent) ---- */
.etf-sim .etf-sim__menu {
  position: absolute;
  z-index: 10;
  top: calc(100% - 0.5rem);
  right: var(--etf-pad);
  display: grid;
  gap: 0.125rem;
  min-width: 12.5rem;
  padding: 0.375rem;
  border-radius: var(--etf-radius-inner);
  background: var(--etf-tile);
  box-shadow: var(--etf-tile-edge), 0 12px 32px -8px rgba(0, 0, 0, 0.2);
  animation: etf-menu-in 0.15s var(--etf-ease);
}

.etf-sim .etf-sim__menu[hidden],
.etf-sim .etf-sim__menu-item[hidden] {
  display: none;
}

@keyframes etf-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
}

.etf-sim .etf-sim__menu-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: var(--etf-hit);
  padding: 0 0.75rem;
  border-radius: var(--etf-radius-field);
  color: var(--etf-text);
  font: 400 var(--etf-fs-callout)/1.3 var(--etf-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--etf-dur-press) var(--etf-ease);
}

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

.etf-sim .etf-sim__menu-item:active {
  background-color: var(--etf-fill-press);
}

.etf-sim .etf-sim__menu-item: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);
}

/* ---- Advanced: a native disclosure for the optional inputs (works without JS) ---- */
.etf-sim .etf-sim__advanced {
  margin-top: 0.5rem;
}

.etf-sim .etf-sim__advanced-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--etf-hit);
  color: var(--etf-text-2);
  font: 600 var(--etf-fs-body)/1.2 var(--etf-font);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.etf-sim .etf-sim__advanced-summary::-webkit-details-marker {
  display: none;
}

.etf-sim .etf-sim__advanced-summary::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  transition: transform var(--etf-dur) var(--etf-ease);
}

.etf-sim .etf-sim__advanced[open] > .etf-sim__advanced-summary::before {
  transform: rotate(45deg);
}

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

/* ---- How it works disclosure & link tap targets and focus rings ---- */
.etf-sim .etf-sim__how summary {
  display: flex;
  align-items: center;
  min-height: var(--etf-hit);
  cursor: pointer;
}

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

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

/* ---- Saved plans (opt-in notice & My plans panel under results) ---- */
.etf-sim .etf-sim__tile-head { flex-wrap: wrap; }
.etf-sim .etf-sim__pill--primary,
.etf-sim .etf-sim__pill--primary:hover { background-color: var(--etf-accent); color: #fff; }
.etf-sim .etf-sim__pill--primary:active { background-color: var(--etf-accent-press); }
.etf-sim .etf-sim__save-confirm,
.etf-sim .etf-sim__plans { padding: 0.875rem var(--etf-pad); border-top: var(--etf-hairline); }
.etf-sim .etf-sim__save-notice { margin: 0 0 0.75rem; color: var(--etf-text-2); font-size: var(--etf-fs-sub); line-height: 1.45; }
.etf-sim .etf-sim__save-row,
.etf-sim .etf-sim__save-actions,
.etf-sim .etf-sim__plans-head,
.etf-sim .etf-sim__plan,
.etf-sim .etf-sim__plan-actions,
.etf-sim .etf-sim__plan-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.etf-sim .etf-sim__plans-head,
.etf-sim .etf-sim__plan { justify-content: space-between; }
.etf-sim .etf-sim__plan-input {
  all: unset; box-sizing: border-box; flex: 1 1 10rem; min-height: var(--etf-hit);
  padding: 0 0.75rem; border: var(--etf-hairline); border-radius: var(--etf-radius-field);
  background: var(--etf-fill); color: var(--etf-text); font: 500 var(--etf-fs-callout)/1.2 var(--etf-font);
}
.etf-sim .etf-sim__plan-input:focus-visible { outline: 3px solid var(--etf-blue); outline-offset: 2px; }
.etf-sim .etf-sim__plans-title { margin: 0; color: var(--etf-text); font: 600 var(--etf-fs-callout)/1.3 var(--etf-font); }
.etf-sim .etf-sim__plans-list { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.etf-sim .etf-sim__plan { padding: 0.625rem 0; border-top: var(--etf-hairline); }
.etf-sim .etf-sim__plan-info { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.etf-sim .etf-sim__plan-name { color: var(--etf-text); font-size: var(--etf-fs-callout); font-weight: 600; }
.etf-sim .etf-sim__plan-meta { color: var(--etf-text-2); font-size: var(--etf-fs-footnote); font-variant-numeric: tabular-nums; }

.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). White pill knob (2 x 1.25rem); the input stays 44 px
   high so the whole strip is the touch target. The knob sits flush with the track ends, so a value of 0 reads as
   zero (no blue sliver left of it). It tracks the pointer 1:1 (native input) and the blue fill follows live via
   --etf-p, written by controls.js. Grabbed, the knob 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-thumb-h);
  margin-top: calc((8px - var(--etf-thumb-h)) / 2);
  border: 0;
  border-radius: var(--etf-radius-pill);
  background: linear-gradient(180deg, #fff, #eef0f5);
  filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.4)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.26));
  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-thumb-h);
  border: 0;
  border-radius: var(--etf-radius-pill);
  background: linear-gradient(180deg, #fff, #eef0f5);
  filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.4)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.26));
  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);
}

/* 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). */

/* Increased contrast: a defined 1px border instead of the soft shadow, darker secondary text */
@media (prefers-contrast: more) {
  .etf-sim {
    --etf-text-2: #424245;
    --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__menu {
    outline: 1px solid CanvasText;
  }

  .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;
  }
}

/* tools.css */
/* ETF Simulator: extra tools (Phase 14 / Brief Update 1, src/js/tools-ui.js).
   Uses widget tokens, tiles and field styles. Two solid tiles side by side from 48em.
   Responsive table scroll, range sliders, crash comparison cards, and goal trajectory SVG. */
.etf-sim.etf-tool {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--etf-gap);
  align-items: start;
}

@media (min-width: 48em) {
  .etf-sim.etf-tool { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.etf-sim .etf-tool__tile { padding: var(--etf-pad); gap: 1rem; }

.etf-sim .etf-tool__title {
  margin: 0;
  color: var(--etf-text);
  font: 600 var(--etf-fs-title3)/1.2 var(--etf-font);
  letter-spacing: var(--etf-track-snug);
}

.etf-sim .etf-tool__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}

@media (width < 30em) {
  .etf-sim.etf-tool .etf-tool__tile { padding: 1rem; }
  .etf-sim .etf-tool__row { grid-template-columns: 1fr; }
  .etf-sim .etf-tool__row > .etf-sim__num { grid-column: 1; grid-row: auto; justify-self: end; }
  .etf-sim .etf-tool__row > .etf-sim__select { grid-column: 1; grid-row: auto; }
}

.etf-sim .etf-tool__label {
  grid-column: 1;
  color: var(--etf-text);
  font: 500 var(--etf-fs-callout)/1.3 var(--etf-font);
}

.etf-sim .etf-tool__row > .etf-sim__num,
.etf-sim .etf-tool__row > .etf-sim__select { grid-column: 2; grid-row: 1; }
.etf-sim .etf-tool__row > .etf-sim__select { grid-column: 1 / -1; grid-row: 2; }

.etf-sim .etf-tool__hint {
  grid-column: 1 / -1;
  color: var(--etf-text-2);
  font: 400 var(--etf-fs-caption)/1.3 var(--etf-font);
}

.etf-sim.etf-tool .etf-tool__row .etf-sim__numinput:not([data-num="_"]) { width: 8ch; }

/* Range slider row */
.etf-sim .etf-tool__row--range { grid-template-columns: 1fr auto; }
.etf-sim .etf-tool__range-wrap { grid-column: 1 / -1; width: 100%; margin: 0.25rem 0 0; }

/* Toggle row */
.etf-sim .etf-tool__row--toggle { display: block; }
.etf-sim .etf-tool__toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--etf-hit);
  cursor: pointer;
  color: var(--etf-text);
  font: 500 var(--etf-fs-callout)/1.3 var(--etf-font);
}
.etf-sim .etf-tool__toggle { width: 1.25rem; height: 1.25rem; accent-color: var(--etf-accent); cursor: pointer; }

/* Results: headline */
.etf-sim .etf-tool__headline {
  padding: 1rem;
  border-radius: var(--etf-radius-inner);
  background: var(--etf-pill);
}
.etf-sim .etf-tool__headline p { margin: 0; }
.etf-sim .etf-tool__headline-label { color: var(--etf-text-2); font: 500 var(--etf-fs-sub)/1.3 var(--etf-font); }
.etf-sim .etf-tool__headline-value {
  color: var(--etf-text);
  font: 700 var(--etf-fs-title)/1.2 var(--etf-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--etf-track-title);
}

.etf-sim .etf-tool__rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  margin: 1rem 0 0;
  font-size: var(--etf-fs-callout);
}
.etf-sim .etf-tool__rows dt { color: var(--etf-text-2); }
.etf-sim .etf-tool__rows dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

/* Crash scenario cards */
.etf-sim .etf-tool__card {
  padding: 1rem;
  border-radius: var(--etf-radius-inner);
  background: var(--etf-pill);
  margin-top: 0.75rem;
}
.etf-sim .etf-tool__card-title {
  margin: 0 0 0.5rem;
  color: var(--etf-text);
  font: 600 var(--etf-fs-callout)/1.2 var(--etf-font);
}
.etf-sim .etf-tool__pending { margin: 0; color: var(--etf-text-2); font-size: var(--etf-fs-sub); font-style: italic; }
.etf-sim .etf-tool__cols { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }

@media (min-width: 30em) {
  .etf-sim .etf-tool__cols { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

.etf-sim .etf-tool__col {
  padding: 0.5rem 0.625rem;
  border-radius: calc(var(--etf-radius-inner) - 4px);
  background: var(--etf-fill);
}
.etf-sim .etf-tool__col-title { margin: 0 0 0.375rem; color: var(--etf-accent); font: 600 var(--etf-fs-caption)/1.2 var(--etf-font); }
.etf-sim .etf-tool__card-rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.5rem;
  margin: 0;
  font-size: var(--etf-fs-caption);
}
.etf-sim .etf-tool__card-rows dt { color: var(--etf-text-2); }
.etf-sim .etf-tool__card-rows dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Goal timeline SVG chart */
.etf-sim .etf-tool__chart {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  margin-top: 1rem;
  border-radius: var(--etf-radius-inner);
  background: var(--etf-pill);
  display: block;
}
.etf-sim .etf-tool__chart-target { stroke: var(--etf-text-2); stroke-dasharray: 4 4; stroke-width: 1.5; }
.etf-sim .etf-tool__chart-label { fill: var(--etf-text-2); font-size: 11px; font-family: var(--etf-font); font-weight: 500; }
.etf-sim .etf-tool__chart-path { fill: none; stroke: var(--etf-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Table and details */
.etf-sim .etf-tool__details { margin-top: 1rem; }
.etf-sim .etf-tool__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--etf-hit);
  color: var(--etf-accent);
  font: 600 var(--etf-fs-callout)/var(--etf-hit) var(--etf-font);
  cursor: pointer;
  list-style: none;
}
.etf-sim .etf-tool__summary::-webkit-details-marker { display: none; }
.etf-sim .etf-tool__summary::before {
  content: "";
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  transition: transform var(--etf-dur) var(--etf-ease);
}
.etf-sim .etf-tool__details[open] > .etf-tool__summary::before { transform: rotate(45deg); }

.etf-sim .etf-tool__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 0.5rem; }
.etf-sim .etf-tool__table {
  width: 100%;
  min-width: 260px;
  border-collapse: collapse;
  font-size: var(--etf-fs-sub);
  font-variant-numeric: tabular-nums;
}
.etf-sim .etf-tool__table th,
.etf-sim .etf-tool__table td {
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: var(--etf-hairline);
  font-weight: 400;
  text-align: right;
}
.etf-sim .etf-tool__table th:first-child { text-align: left; }
.etf-sim .etf-tool__table thead th { color: var(--etf-text-2); font-weight: 500; }

.etf-sim .etf-tool__message,
.etf-sim .etf-tool__note { margin: 1rem 0 0; color: var(--etf-text-2); font-size: var(--etf-fs-sub); }
.etf-sim .etf-tool__source { margin: 0.75rem 0 0; color: var(--etf-text-2); font-size: var(--etf-fs-caption); line-height: 1.4; }
.etf-sim .etf-tool__links { margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: var(--etf-fs-caption); line-height: 1.6; }
.etf-sim .etf-tool__links a { color: var(--etf-accent); }
.etf-sim .etf-tool__disc {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: var(--etf-hairline);
  color: var(--etf-text-2);
  font-size: var(--etf-fs-footnote);
  line-height: 1.4;
}

.etf-sim .etf-tool__summary:active { color: var(--etf-accent-press); }
.etf-sim .etf-tool__summary:focus-visible {
  outline: 3px solid var(--etf-blue);
  outline-offset: 2px;
  border-radius: var(--etf-radius-icon);
}

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

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

.etf-sim .etf-tool__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.etf-sim .etf-tool__action {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.12s ease, transform 0.08s ease;
}

.etf-sim .etf-tool__action:hover {
  background-color: var(--etf-fill-hover);
}

.etf-sim .etf-tool__action:active {
  background-color: var(--etf-fill-press);
  transform: scale(0.97);
}

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

.etf-sim .etf-tool__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.etf-sim .etf-tool__status {
  margin-left: 0.25rem;
  color: var(--etf-green-text);
  font: 500 var(--etf-fs-sub)/1.2 var(--etf-font);
}

.etf-sim .etf-tool__chart-wrap {
  position: relative;
  margin: 1rem 0;
}

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

/* print.css */
/* ETF Simulator: print and PDF export stylesheet (Phase 14 / Task A-019 & A-020).
   Clean white background, black text, no shadows or tints. Sliders and interactive controls
   are hidden; input labels and values are printed cleanly as text; details tables and
   milestone progression are fully revealed; result figures and statutory disclaimers are kept together. */
.etf-sim__print-val,
.etf-tool__print-val {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 1.5cm;
  }

  /* Reset all backgrounds, shadows, and tints */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body,
  .etf-sim,
  .etf-sim * {
    background: transparent !important;
    color: #000 !important;
  }

  .etf-sim {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10pt !important;
    line-height: 1.35 !important;
  }

  /* Hide interactive controls, chrome, and third-party overlays */
  .etf-sim input[type="range"],
  .etf-sim .etf-sim__range,
  .etf-sim .etf-tool__range-wrap,
  .etf-sim .etf-sim__range-wrap,
  .etf-sim .etf-sim__stepper,
  .etf-sim .etf-sim__btn--icon,
  .etf-sim .etf-sim__share,
  .etf-sim .etf-sim__share-menu,
  .etf-sim .etf-sim__save-btn,
  .etf-sim .etf-sim__save-confirm,
  .etf-sim .etf-sim__plans,
  .etf-sim .etf-sim__foot,
  .etf-sim .etf-tool__actions,
  .etf-sim .etf-tool__action,
  .etf-sim .etf-tool__status,
  .etf-sim .etf-sim__currency-picker,
  .etf-sim .etf-sim__currency-menu,
  .etf-sim .etf-sim__pills,
  .etf-sim select.etf-sim__select,
  .etf-sim .etf-tool__toggle,
  .etf-sim .etf-sim__num > :not(.etf-sim__print-val):not(.etf-tool__print-val),
  .etf-sim .etf-sim__tile-head,
  .etf-sim .etf-sim__icon,
  .etf-sim .etf-sim__tile--brokers,
  .etf-sim .etf-sim__brokers,
  header.etf-site-header,
  nav.etf-site-menu,
  footer.etf-site-footer,
  .etf-site-breadcrumbs,
  .etf-site-ad,
  .cmplz-cookiebanner {
    display: none !important;
  }

  /* Containers & structure: linear flow with clean borders */
  .etf-sim .etf-sim__grid,
  .etf-sim.etf-tool {
    display: block !important;
    width: 100% !important;
  }

  .etf-sim .etf-sim__tile,
  .etf-sim .etf-tool__tile {
    display: block !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Inputs printed cleanly as text */
  .etf-sim__print-val,
  .etf-tool__print-val {
    display: inline-block !important;
    font-weight: 600 !important;
    font-size: 10pt !important;
    color: #000 !important;
    text-align: right !important;
  }

  .etf-sim .etf-sim__field > .etf-sim__print-val {
    display: block !important;
    text-align: left !important;
    margin-top: 2px !important;
  }

  .etf-sim input[type="number"],
  .etf-sim .etf-sim__numinput,
  .etf-sim select,
  .etf-sim .etf-sim__select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #000 !important;
    font-weight: 600 !important;
    padding: 0 !important;
    font-size: 10pt !important;
    width: auto !important;
  }

  .etf-sim .etf-tool__row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 4px 0 !important;
    border-bottom: 1px dotted #e0e0e0 !important;
  }

  .etf-sim .etf-tool__label {
    font-weight: 500 !important;
    color: #111 !important;
  }

  .etf-sim .etf-tool__hint {
    font-size: 8pt !important;
    color: #555 !important;
    font-style: italic !important;
  }

  /* Results presentation: keep headline, breakdown, and disclaimers together */
  .etf-sim__tile--result,
  .etf-tool__headline,
  .etf-tool__card,
  .etf-tool__box {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .etf-sim .etf-tool__headline {
    border: 1px solid #bbb !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin-bottom: 10px !important;
  }

  .etf-sim .etf-tool__headline-value {
    font-size: 16pt !important;
    font-weight: 700 !important;
    color: #000 !important;
  }

  .etf-sim__stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .etf-sim__stat {
    border: 1px solid #ddd !important;
    padding: 6px 8px !important;
    border-radius: 4px !important;
  }

  /* Table expansion: always show details table content */
  .etf-tool__details,
  details.etf-tool__details {
    display: block !important;
    margin-top: 12px !important;
  }

  .etf-tool__details > summary {
    display: none !important;
  }

  .etf-tool__table-wrap,
  .etf-tool__details > .etf-tool__table-wrap {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .etf-tool__table,
  .etf-sim__sr-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 8.5pt !important;
    margin-top: 6px !important;
  }

  .etf-tool__table th,
  .etf-tool__table td,
  .etf-sim__sr-table th,
  .etf-sim__sr-table td {
    border-bottom: 1px solid #ccc !important;
    padding: 4px 6px !important;
    text-align: right !important;
    color: #000 !important;
  }

  .etf-tool__table th:first-child,
  .etf-tool__table td:first-child,
  .etf-sim__sr-table th:first-child,
  .etf-sim__sr-table td:first-child {
    text-align: left !important;
  }

  /* Accessible progression table for calculator */
  .etf-sim__sr-table {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    clip: auto !important;
    overflow: visible !important;
    margin-top: 10px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .etf-sim__sr-table caption {
    font-weight: 600 !important;
    text-align: left !important;
    font-size: 9.5pt !important;
    margin-bottom: 4px !important;
  }

  /* Chart canvas & SVG scaling */
  .etf-sim__tile--chart canvas {
    max-width: 100% !important;
    max-height: 220px !important;
  }

  .etf-tool__chart-wrap svg {
    max-width: 100% !important;
    max-height: 120px !important;
  }

  /* Statutory AFM / Wft educational disclaimer: must print directly under figures */
  .etf-sim__disc,
  .etf-tool__disc {
    display: block !important;
    margin-top: 10px !important;
    font-size: 8pt !important;
    line-height: 1.3 !important;
    color: #333 !important;
    border-top: 1px solid #ccc !important;
    padding-top: 6px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .etf-sim .etf-tool__note,
  .etf-sim .etf-tool__source {
    font-size: 8pt !important;
    line-height: 1.3 !important;
    color: #444 !important;
    margin: 4px 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}