:root {
    color-scheme: light;
    --page:        #f4f6f9;
    --surface:     #ffffff;
    --surface-2:   #f1f3f5;
    --accent-soft: rgba(42,120,214,0.08);
    --shadow-lift: 0 2px 4px rgba(20,24,29,0.06), 0 12px 28px rgba(20,24,29,0.10);
    --ink:         #14181d;
    --ink-2:       #4c5560;
    --ink-3:       #8a9098;
    --hairline:    rgba(20,24,29,0.10);
    --grid:        #e4e6e9;
    --accent:      #2a78d6;
    --accent-ink:  #1c5cab;
    --other:       #b9bcc0;
    --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
    --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
    --good: #006300;
    --bad:  #d03b3b;
    --shadow: 0 1px 2px rgba(20,24,29,0.05), 0 4px 16px rgba(20,24,29,0.05);
  }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
      color-scheme: dark;
      --page:        #0b0d11;
      --surface:     #161920;
      --surface-2:   #1e2126;
      --accent-soft: rgba(57,135,229,0.14);
      --shadow-lift: 0 2px 4px rgba(0,0,0,0.34), 0 12px 28px rgba(0,0,0,0.42);
      --ink:         #f2f4f6;
      --ink-2:       #b8bec6;
      --ink-3:       #7d848d;
      --hairline:    rgba(255,255,255,0.10);
      --grid:        #2a2d32;
      --accent:      #3987e5;
      --accent-ink:  #6da7ec;
      --other:       #4b4f55;
      --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
      --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
      --good: #0ca30c;
      --bad:  #e66767;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.3);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --page:        #0b0d11;
    --surface:     #161920;
    --surface-2:   #1e2126;
    --accent-soft: rgba(57,135,229,0.14);
    --shadow-lift: 0 2px 4px rgba(0,0,0,0.34), 0 12px 28px rgba(0,0,0,0.42);
    --ink:         #f2f4f6;
    --ink-2:       #b8bec6;
    --ink-3:       #7d848d;
    --hairline:    rgba(255,255,255,0.10);
    --grid:        #2a2d32;
    --accent:      #3987e5;
    --accent-ink:  #6da7ec;
    --other:       #4b4f55;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --good: #0ca30c;
    --bad:  #e66767;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.3);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--page);
    color: var(--ink);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 28px 24px 64px; }

  .serif { font-family: Charter, "Bitstream Charter", Cambria, Georgia, serif; }
  .mono  { font-family: "Cascadia Mono", Consolas, "SF Mono", monospace; }
  .num   { font-variant-numeric: tabular-nums; }

  /* ---------- masthead ---------- */
  header { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
  header h1 { font-size: 30px; font-weight: 700; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
  header .tagline { color: var(--ink-2); font-size: 15px; }
  .asof { margin: 4px 0 24px; font-size: 13px; color: var(--ink-3); }
  .asof b { color: var(--ink-2); font-weight: 600; }

  /* ---------- layout ---------- */
  .cols { display: grid; grid-template-columns: 384px minmax(0, 1fr); gap: 20px; align-items: start; }
  @media (max-width: 920px) { .cols { grid-template-columns: minmax(0, 1fr); } }
  .cols > * { min-width: 0; }

  .card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    box-shadow: var(--shadow);
  }
  .card h2 {
    font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3); margin: 0; padding: 14px 18px 0;
  }

  /* ---------- portfolio rail ---------- */
  .rail { padding-bottom: 8px; }
  .adders { display: flex; gap: 8px; padding: 12px 18px 0; }
  .adders.last { padding: 8px 18px 14px; border-bottom: 1px solid var(--hairline); }
  .adders select {
    flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid var(--hairline); border-radius: 7px;
    background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px;
  }
  .adders select { width: 0; }   /* flex-basis via width so long option text cannot set the rail's min width */
  .adders input[type="text"] {
    flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--hairline); border-radius: 7px;
    background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13.5px;
    text-transform: uppercase;
  }
  .adders input[type="text"]::placeholder { text-transform: none; }
  .adders input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
  .adders select:focus, .adders button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .adders button {
    flex: 0 0 auto; border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink);
    font: inherit; font-size: 13px; padding: 7px 12px; border-radius: 7px; cursor: pointer;
  }
  .adders button:hover { background: var(--grid); }

  .etf-row {
    display: grid; grid-template-columns: 1fr 78px 88px 20px; gap: 8px;
    padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--hairline); align-items: center;
  }
  .etf-row > * { min-width: 0; }
  .etf-id { min-width: 0; }
  .etf-id .tk { font-weight: 700; font-size: 15px; }
  .etf-id .exch { font-size: 11px; color: var(--ink-3); margin-left: 5px; letter-spacing: 0.04em; }
  .etf-id .nm { font-size: 12px; color: var(--ink-2); line-height: 1.3; margin-top: 1px; }
  .etf-id .val { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
  .etf-id .val b { color: var(--ink); font-weight: 600; }
  .field label { display: block; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
  .field input, .field select {
    width: 100%; padding: 6px 7px; border: 1px solid var(--hairline); border-radius: 6px;
    background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13.5px;
    font-variant-numeric: tabular-nums; text-align: right;
  }
  .field select { text-align: left; }
  .field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
  .rm {
    border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 15px;
    padding: 2px 4px; border-radius: 5px; line-height: 1;
  }
  .rm:hover { color: var(--bad); background: var(--surface-2); }
  .rm:focus-visible { outline: 2px solid var(--accent); }

  .rail-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 18px; border-top: 1px solid var(--hairline); flex-wrap: wrap;
  }
  .rail-foot .fx { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
  .rail-foot .fx input {
    width: 74px; padding: 5px 7px; border: 1px solid var(--hairline); border-radius: 6px;
    background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px;
    font-variant-numeric: tabular-nums; text-align: right;
  }
  button.ghost {
    border: 1px solid var(--hairline); background: transparent; color: var(--ink-2);
    font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  }
  button.ghost:hover { background: var(--surface-2); color: var(--ink); }
  button.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  button.primary {
    border: 1px solid transparent; background: var(--accent); color: #fff;
    font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  }
  button.primary:hover { background: var(--accent-ink); }
  button.primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  button.primary[disabled] { opacity: 0.55; cursor: default; }
  .live-line { padding: 0 18px 12px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
  .live-line .ok { color: var(--good); font-weight: 600; }
  .live-line .err { color: var(--bad); }
  .rail-note { padding: 10px 18px 14px; font-size: 12px; color: var(--ink-3); line-height: 1.5; border-top: 1px solid var(--hairline); }
  /* section header splitting the price-fetching controls from save/import.
     matches .card h2 (incl. its accent tick) so it reads as a real header,
     with a divider line above it for separation. */
  .rail-sep {
    margin-top: 6px; padding: 16px 18px 10px; border-top: 1px solid var(--hairline);
    font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  }
  .rail-sep::before {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px;
    background: var(--s1); margin-right: 7px; vertical-align: middle; position: relative; top: -1px;
  }

  /* ---------- KPI row ---------- */
  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
  @media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
  .kpi { padding: 14px 18px 16px; }
  .kpi .k-label { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
  .kpi .k-value { font-size: 26px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; }
  .kpi .k-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

  /* ---------- charts ---------- */
  .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
  @media (max-width: 880px) { .charts { grid-template-columns: 1fr; } }
  .chart-body { padding: 12px 18px 18px; }
  .donut-flex { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
  .donut-wrap { position: relative; flex: 0 0 auto; }
  .donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
  .donut-center .c-val { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
  .donut-center .c-lab { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
  .legend { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; min-width: 190px; font-size: 13px; }
  .legend li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
  .legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
  .legend .lt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
  .legend .lt b { color: var(--ink); font-weight: 600; }
  .legend .lv { color: var(--ink-2); font-weight: 600; }
  .donut-svg path { cursor: pointer; }
  .donut-svg path:hover { opacity: 0.85; }

  .mixbar { display: flex; height: 34px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--page); margin-top: 10px; }
  .mixbar .seg { min-width: 3px; }
  /* auto-fit, not 1fr 1fr: two columns squeeze "United States 45.44%" into about
     100px once the chart cards sit side by side on a mid-width screen */
  .mixlegend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 4px 16px; font-size: 13px; }
  .mixlegend li { display: flex; align-items: center; gap: 8px; }
  .mixlegend .sw { width: 10px; height: 10px; border-radius: 3px; }
  .mixlegend .lt { color: var(--ink-2); flex: 1; }
  .mixlegend .lv { font-weight: 600; }

  /* ---------- tooltip ---------- */
  #tip {
    position: fixed; z-index: 50; pointer-events: none; display: none;
    background: var(--ink); color: var(--page);
    font-size: 12px; line-height: 1.4; padding: 7px 10px; border-radius: 6px;
    box-shadow: var(--shadow); max-width: 260px;
  }
  #tip b { font-weight: 700; }

  /* ---------- answer card ---------- */
  .answer { border-left: 3px solid var(--accent); margin: 0 0 20px; padding: 14px 18px; }
  .answer .a-head { font-size: 16px; font-weight: 700; }
  .answer .a-main { font-size: 15px; margin-top: 4px; }
  .answer .a-main b { font-size: 18px; }
  .answer .a-via { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
  .answer .a-none { color: var(--ink-2); }
  .chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; padding: 2px 9px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--hairline); color: var(--ink-2);
    white-space: nowrap;
  }
  .chip b { color: var(--ink); font-weight: 600; }

  /* ---------- table ---------- */
  .table-tools { display: flex; gap: 12px; align-items: center; padding: 14px 18px 4px; flex-wrap: wrap; }
  .table-tools input[type="search"] {
    flex: 1 1 240px; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 7px;
    background: var(--surface-2); color: var(--ink); font: inherit; font-size: 14px;
  }
  .table-tools input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .table-tools .count { font-size: 12px; color: var(--ink-3); }
  .tscroll { overflow-x: auto; }
  table { border-collapse: collapse; width: 100%; font-size: 14px; }
  thead th {
    text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-3); padding: 10px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap;
  }
  thead th.r, td.r { text-align: right; }
  tbody td { padding: 8px 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
  tbody tr:hover { background: var(--surface-2); }
  tbody tr.other-row td { color: var(--ink-2); }
  td.rank { color: var(--ink-3); font-size: 12px; width: 34px; }
  td .tk { font-weight: 700; }
  td .co { color: var(--ink-2); font-size: 12.5px; }
  .mkt { font-size: 10.5px; letter-spacing: 0.05em; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink-2); white-space: nowrap; }
  td.val { font-weight: 600; white-space: nowrap; }
  td.pct { color: var(--ink-2); white-space: nowrap; }
  .wbar { width: 120px; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
  .wbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; min-width: 1px; }
  td.via { max-width: 280px; }
  td.via .chip { margin: 1px 3px 1px 0; }
  .showmore-row td { text-align: center; padding: 12px; background: var(--surface-2); }
  .showmore-row:hover td { background: var(--surface-2); }
  .showmore-btn { font-size: 12.5px; }

  footer { margin-top: 28px; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; max-width: 76ch; }
  footer b { color: var(--ink-2); }
  footer p { margin: 0 0 8px; }
  footer .fine { list-style: none; margin: 0; padding: 0; }
  footer .fine li { margin: 3px 0; padding-left: 14px; position: relative; }
  footer .fine li::before { content: "-"; position: absolute; left: 0; color: var(--ink-3); }
  footer .privacy {
    margin-top: 14px; padding: 11px 14px; font-size: 12.5px; line-height: 1.55;
    color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--hairline);
    border-radius: 8px; max-width: none;
  }
  footer .privacy b { color: var(--ink); }

  @media (prefers-reduced-motion: no-preference) {
    .wbar i { transition: width 0.25s ease; }
  }

  /* ---------- mobile ---------- */
  /* ---------- site footer ---------- */
  .site-footer {
    margin-top: 30px; display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-3);
  }
  .site-footer .footer-dot { user-select: none; }
  .site-footer .sunlabs-link { color: var(--ink-2); text-decoration: none; }
  .site-footer .sunlabs-link:hover { color: var(--ink); text-decoration: underline; }
  .bmc-link {
    display: inline-flex; align-items: center; gap: 6px;
    background: #ffdd00; color: #14181d; padding: 4px 12px; border-radius: 999px;
    font-weight: 600; font-size: 13px; text-decoration: none;
  }
  .bmc-link img { height: 14px; width: auto; display: block; }
  .bmc-link:hover { filter: brightness(1.06); }

  /* never let anything force sideways page scroll */
  html, body { overflow-x: clip; }

  /* ---------- beta badge + import modal ---------- */
  .beta {
    display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #fff; background: var(--s2);
    padding: 1px 5px; border-radius: 4px; vertical-align: middle; margin-left: 3px;
  }
  /* riding at the top of the big serif title, like a superscript tag */
  header h1 .beta { font-size: 11px; margin-left: 8px; vertical-align: middle; position: relative; top: -8px; }
  .modal-ov {
    position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(10, 12, 16, 0.5);
  }
  .modal {
    background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
    box-shadow: var(--shadow-lift); max-width: 440px; width: 100%; padding: 20px 22px;
  }
  .modal h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
  .modal p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
  .modal p b { color: var(--ink); font-weight: 600; }
  .modal .modal-warn {
    background: var(--surface-2); border-left: 3px solid var(--s4); border-radius: 0 6px 6px 0;
    padding: 9px 12px; font-size: 13px;
  }
  .modal .modal-q { color: var(--ink); font-weight: 600; margin-top: 14px; }
  .modal-status { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); min-height: 16px; }
  .modal-status:empty { display: none; }
  .spin {
    display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 6px;
    border: 2px solid var(--hairline); border-top-color: var(--accent); border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .modal-btns { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
  .modal-btns button[disabled] { opacity: 0.5; cursor: default; }
  .modal-btns button {
    border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink);
    font: inherit; font-size: 13.5px; padding: 8px 16px; border-radius: 7px; cursor: pointer;
  }
  .modal-btns button:hover { background: var(--grid); }
  .modal-btns button.primary { border-color: transparent; background: var(--accent); color: #fff; font-weight: 600; }
  .modal-btns button.primary:hover { background: var(--accent-ink); }
  .modal-btns button.ghost { background: transparent; color: var(--ink-2); }
  .modal-btns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    .modal { animation: riseIn 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  }

  /* ================= polish: identity, depth, motion ================= */

  /* masthead: a mark, a stacked title block, and a short colour rule to anchor it */
  header {
    align-items: center; gap: 14px; margin-bottom: 0;
    padding-bottom: 14px; border-bottom: 1px solid var(--hairline); position: relative;
  }
  header::after {
    content: ""; position: absolute; left: 0; bottom: -1px; width: 76px; height: 2px;
    border-radius: 2px; background: linear-gradient(90deg, var(--s1), var(--s2));
  }
  .mark { flex: 0 0 auto; width: 38px; height: 38px; display: block; }
  .masthead { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  header h1 { font-size: 32px; }

  /* theme toggle: segmented pill, pushed to the top-right of the masthead */
  .theme-toggle {
    margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: stretch;
    background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 8px; padding: 2px;
  }
  .theme-toggle button {
    border: none; background: none; color: var(--ink-3); cursor: pointer;
    font: inherit; font-size: 12.5px; line-height: 1; padding: 5px 9px; border-radius: 6px;
    display: inline-flex; align-items: center; transition: background 0.15s ease, color 0.15s ease;
  }
  .theme-toggle button:hover { color: var(--ink); }
  .theme-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
  .theme-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .asof { margin-top: 12px; }
  .asof b { color: var(--accent-ink); }

  /* cards lift slightly on hover so the page feels responsive rather than printed */
  .card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
  .kpi:hover, .charts .card:hover { box-shadow: var(--shadow-lift); }
  .kpi:hover { transform: translateY(-1px); }

  .card h2::before {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px;
    background: var(--s1); margin-right: 7px; vertical-align: middle; position: relative; top: -1px;
  }

  /* KPI row reads as a dashboard: a colour cap each, and the headline tile tinted */
  .kpi { position: relative; overflow: hidden; }
  .kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--kpi-accent, var(--s1)); }
  .kpis .kpi:nth-child(1) { --kpi-accent: var(--s1); background-image: linear-gradient(180deg, var(--accent-soft), transparent 62%); }
  .kpis .kpi:nth-child(2) { --kpi-accent: var(--s2); }
  .kpis .kpi:nth-child(3) { --kpi-accent: var(--s3); }
  .kpis .kpi:nth-child(4) { --kpi-accent: var(--s4); }
  /* .kpi clips (overflow:hidden keeps the colour cap inside the radius), so the
     value must never outgrow its tile. Size it off the tile, not the viewport:
     tile width does not track viewport width - dropping to two columns makes
     tiles wider - so a vw-based size shrinks exactly when it should grow. */
  .kpi { container-type: inline-size; }
  .kpi .k-value { font-size: clamp(18px, 19cqi, 28px); letter-spacing: -0.02em; }
  .kpis .kpi:nth-child(1) .k-value { color: var(--accent-ink); }

  /* Between 921 and 1180px the rail still sits beside the analysis column, which
     leaves four tiles about 118px wide - too narrow to read. Two rows of two. */
  @media (min-width: 921px) and (max-width: 1180px) {
    .kpis { grid-template-columns: repeat(2, 1fr); }
  }

  /* long fund and market names must ellipsis rather than push their value out */
  .mixlegend .lt, .legend .lt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mixlegend .lv, .legend .lv { flex: 0 0 auto; }

  /* charts */
  .donut-svg path { transition: transform 0.16s ease; transform-origin: 110px 110px; }
  .donut-svg path:hover { opacity: 1; transform: scale(1.04); }
  .mixbar { height: 38px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--hairline); }
  .mixbar .seg { cursor: pointer; transition: filter 0.15s ease; }
  .mixbar .seg:hover { filter: brightness(1.12) saturate(1.08); }

  /* table: market dots tie each row back to the mix bar */
  .mkt { display: inline-flex; align-items: center; gap: 5px; }
  .mkt::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
    background: var(--mkt-dot, var(--other));
  }
  .mkt-US { --mkt-dot: var(--s1); }
  .mkt-CA { --mkt-dot: var(--s2); }
  .mkt-INTL { --mkt-dot: var(--s3); }
  .mkt-EM { --mkt-dot: var(--s4); }
  .mkt-BOND { --mkt-dot: var(--s5); }
  tbody tr { transition: background 0.12s ease; }
  tbody td.rank { box-shadow: inset 2px 0 0 transparent; transition: box-shadow 0.12s ease; }
  tbody tr:hover td.rank { box-shadow: inset 2px 0 0 var(--accent); }
  .wbar i { background: linear-gradient(90deg, var(--accent), var(--s7)); }

  button.primary { transition: background 0.15s ease, transform 0.08s ease; }
  button.primary:active:not([disabled]) { transform: translateY(1px); }

  .site-footer { padding-top: 22px; border-top: 1px solid var(--hairline); }

  @media (prefers-reduced-motion: no-preference) {
    @keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    /* only the shells animate - their contents re-render constantly and must not restart it */
    .card { animation: riseIn 0.38s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
    .kpis .kpi:nth-child(2) { animation-delay: 0.05s; }
    .kpis .kpi:nth-child(3) { animation-delay: 0.10s; }
    .kpis .kpi:nth-child(4) { animation-delay: 0.15s; }
    .charts .card:nth-child(2) { animation-delay: 0.08s; }
    .tablecard { animation-delay: 0.12s; }
  }


  @media (max-width: 640px) {
    .wrap { padding: 16px 12px 48px; }
    header { gap: 10px; padding-bottom: 12px; }
    .mark { width: 30px; height: 30px; }
    header h1 { font-size: 23px; }
    header .tagline { font-size: 14px; }
    .asof { margin-top: 10px; margin-bottom: 16px; }
    .mixbar { height: 32px; }
    .cols, .charts { gap: 12px; }
    .kpis { gap: 10px; margin-bottom: 12px; }
    .kpi { padding: 10px 12px 12px; }
    .kpi .k-value { font-size: 19px; }
    .kpi .k-sub { font-size: 11.5px; }
    .charts { margin-bottom: 12px; }
    .answer { margin-bottom: 12px; }
    .etf-row { grid-template-columns: 1fr 70px 84px 18px; padding: 10px 8px 10px 12px; gap: 6px; }
    .donut-flex { justify-content: center; }
    .mixlegend { grid-template-columns: 1fr; }
    /* 16px inputs stop iOS from zooming the page on focus */
    .field input, .field select, .adders select, .adders button, .adders input[type="text"],
    .rail-foot .fx input, .table-tools input[type="search"] { font-size: 16px; }
    /* reflow the holdings table into stacked cards - no sideways scrolling on phones */
    .tscroll { overflow-x: visible; }
    .tscroll table, .tscroll tbody { display: block; width: 100%; }
    .tscroll thead { display: none; }
    .tscroll tbody tr {
      display: flex; flex-wrap: wrap; align-items: center;
      row-gap: 5px; column-gap: 10px; padding: 10px 2px;
      border-bottom: 1px solid var(--grid);
    }
    .tscroll tbody td { display: block; border: none; padding: 0; }
    .tscroll tbody td:nth-child(1), .tscroll tbody td:nth-child(6) { display: none; }
    .tscroll tbody td:nth-child(2) { order: 1; flex: 1 1 0; min-width: 55%; }
    .tscroll tbody td.val { order: 2; flex: 0 0 auto; margin-left: auto; font-size: 15px; }
    .tscroll tbody td:nth-child(3) { order: 3; }
    .tscroll tbody td.pct { order: 4; }
    .tscroll tbody td.via { order: 5; flex: 1 1 100%; max-width: none; }
    .tscroll tbody td[colspan] { flex: 1 1 100%; text-align: center; }
    .tscroll tbody tr:hover { background: none; }
  }