/*
 Theme Name:   My Child Theme
 Template:     bluehost-blueprint
 Description:  Child theme for Bluehost Blueprint
 Author:       Dan
 Version:      1.0.0
*/

:root{
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e6ebf5;
  --accent:#2563eb;
  --radius:16px;
  --shadow:0 10px 30px rgba(2,6,23,.08);
}

html, body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

/* Keep layout from shifting when the vertical scrollbar appears/disappears */
html { scrollbar-gutter: stable; }

@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}


/* ===== Global tokens end ===== */

/* ===== Calculator (.tax-calc) ===== */
.tax-calc{
  --panel:#f5f8fc; --card:#fff; --muted:#6b7280; --line:#e6edf6; --radius:18px; --accent:#2349a6;
}

  .tax-calc{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;margin:0}
  .tax-calc .shell{background:var(--panel);border: 1px solid #e6edf7;border-radius:20px;padding:24px;box-shadow:var(--shadow)}
  .tax-calc .title{margin:0 0 18px;font-size:clamp(1.4rem,2.2vw,2rem);font-weight:800;color:var(--ink)}

  .tax-calc .grid{display:grid;gap:20px;grid-template-columns:1fr;align-items:start}
  @media (min-width:900px){.tax-calc .grid{grid-template-columns:1fr 1fr}}

  .tax-calc .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
  .tax-calc .inputs{padding-bottom:8px}
  .tax-calc .card-title{margin:4px 0 12px;font-size:1.05rem;color:var(--ink)}

  .tax-calc .field{margin-bottom:12px}
  .tax-calc label{display:block;color:var(--ink);font-weight:600;margin-bottom:6px}
  .tax-calc label em{font-style:normal;color:var(--muted);font-weight:500}
  .tax-calc .hint{color:var(--muted);font-size:.85rem}

  .tax-calc .control{position:relative;display:block;width:100%}
  .tax-calc .pill{
    width:100%; box-sizing:border-box;
    border-radius:999px; border:1px solid var(--line); background:#fff;
    padding:12px 14px; padding-left:44px;
    text-align:left; font-weight:600; color:var(--ink); outline:none;
  }
  .tax-calc .pill:focus{box-shadow:inset 0 0 0 2px var(--accent)}
  .tax-calc .prefix{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:999px; background:var(--panel);
    color:var(--ink); font-weight:700; pointer-events:none;
  }
  .tax-calc .divider{height:1px;background:var(--line);margin:12px 0}
  .tax-calc .error{color:#b30000;min-height:0;font-weight:700;margin-top:6px}

  .tax-calc .rows{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .tax-calc .rows li{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;color:var(--ink);background:#fff}
  .tax-calc .rows li.rule{padding:0;height:1px;background:var(--line)}
  .tax-calc .rows strong{font-weight:800}
  .tax-calc .rows .emph strong{color:var(--ink)}
  .tax-calc .rows .total{background:#f7faff;border-top:1px solid var(--line)}
  .tax-calc .rows .retained{background:#eef4ff;border-top:1px solid var(--line)}
  .tax-calc .taa{margin:10px 4px 0;color:var(--muted);font-size:.95rem}

  .tax-calc .visually-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* --- Added only for optimiser card --- */
  .optim { margin-top:20px; }
  .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin:6px 0 10px}
  .chk{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
  .chk input{width:18px;height:18px}
  .btn{background:var(--ink);color:#fff;border:0;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer}
  .btn:hover{filter:brightness(1.05)}
  .btn.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
  .grid-opt{display:grid;gap:20px;grid-template-columns:1fr;align-items:start;margin-top:6px}
  @media (min-width:900px){ .grid-opt{grid-template-columns:1fr 1fr} }

 /* Optimiser buttons: outlined by default; fill on hover/active */
 .optim .btn{
   background: #fff;
   color: var(--ink);
   border: 1px solid var(--line);
   box-shadow: none;
   transition: background .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
 }
 .optim .btn:hover,
 .optim .btn:active,
 .optim .btn:focus-visible{
   background: var(--ink);
   color: #fff;
   border-color: var(--ink);
 }

 /* Equal-height top cards (desktop only) */
 @media (min-width:900px){
   .tax-calc .grid{
     display: flex;          /* override grid only at desktop */
     gap: 20px;
     align-items: stretch;   /* both columns same height */
   }
   .tax-calc .grid > .card{
     flex: 1 1 0;
     display: flex;          /* keep inner layout stable */
     flex-direction: column;
     height: auto;           /* ensure it grows with content */
   }
 }

/* ===== Stay Invested (#stay-invested-tool.si-wrap) ===== */
/* -----------------------------------------
   Stay Invested — Light Skin (v3.4.0)
   Layout unchanged. HYBRID date fields (text+calendar).
------------------------------------------ */
#stay-invested-tool.si-wrap{
  /* Palette */
  --page-bg: #f3f6fb;
  --card:    #ffffff;
  --text:    #0f172a;
  --border:  #e2e8f0;
  --ring:    #93c5fd;
  --accent2: #ef476f;
  --input-bg:#f8fafc;
  --chip-bg: #eef2ff;
  --shadow:  0 10px 24px rgba(15,23,42,.08);
  --shadow-card: 0 6px 22px rgba(15,23,42,.06);

  /* Unified control height + target width */
  --control-h: 46px;
  --field-max: 320px;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  color: var(--text);
  background: var(--page-bg);
  padding: 1.25rem;
  border-radius: 1.25rem;
  border: 1px solid #e6edf7;
  box-shadow: var(--shadow);}

/* Headings */
.si-header h2{ margin:0 0 .25rem 0; font-weight:800; letter-spacing:-.01em; color:var(--text) }
.si-sub{ margin:.25rem 0 1rem; color:var(--muted) }

/* Grid containers */
.si-grid{ display:grid; gap:1rem; grid-template-columns:repeat(12,1fr) }
.si-results{ display:grid; gap:1rem; grid-template-columns:repeat(12,1fr); margin-top:1rem }

/* Cards */
.si-card{
  grid-column:span 12;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  padding: 1rem;
}
.si-card h3{ margin:.25rem 0 1rem; color:var(--text) }

/* Rows/cols */
.si-row{ display:flex; gap:.75rem; flex-wrap:wrap }
.si-col{ flex:0 1 var(--field-max); }
.si-label{ display:block; font-size:.92rem; color:var(--muted); margin:.5rem 0 .35rem }

/* Prefix/suffix wrappers for money fields */
.si-input-prefix,
.si-input-suffix{
  display:flex; align-items:center; gap:.5rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: .4rem .7rem;
  height: var(--control-h);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
  box-sizing: border-box;
  max-width: var(--field-max);
}

/* Inner input reset inside wrappers */
.si-input-prefix input,
.si-input-suffix input{
  border: none !important;
  background: transparent !important;
  height: calc(var(--control-h) - .8rem);
  padding: 0 .25rem;
  box-shadow: none !important;
  outline: none;
  border-radius: 0;
  min-width: 0;
}

.si-input-prefix>span,
.si-input-suffix>span{
  background: var(--chip-bg);
  color: var(--accent);
  padding:.25rem .5rem;
  border-radius: 9999px;
  font-weight:700;
  font-size:.95rem;
}

/* Base inputs/selects (standalone) */
.si-card input,
.si-card select{
  width:100%;
  background:transparent;
  color:var(--text);
  border:none;
  outline:none;
  font-size:1rem;
  box-sizing: border-box;
}

.si-card select,
.si-card input[type="date"],
.si-card input[type="text"],
.si-card input[type="number"]{
  border: 1px solid var(--border);
  background: var(--input-bg);
  border-radius: 9999px;
  padding: .4rem .7rem;
  height: var(--control-h);
}

/* Limit widths */
#modeData{ max-width: var(--field-max); }

/* Focus ring (standalone controls) */
.si-input-prefix:focus-within,
.si-input-suffix:focus-within,
.si-card select:focus,
.si-card input[type="date"]:focus,
.si-card input[type="text"]:focus,
.si-card input[type="number"]:focus{
  border-color: var(--ring);
  box-shadow: 0 0 0 4px rgba(147,197,253,.35);
  background: #fff;
}

/* Details/Upload text */
.si-details{ margin-top:.5rem }
.si-details summary{ cursor:pointer; color:var(--muted) }
.si-hint{ color:var(--muted); font-size:.9rem }

/* Buttons (pill) */
.si-actions{ grid-column:span 12; display:flex; gap:.6rem; align-items:center }
.si-btn{
  padding:.65rem 1.1rem;
  background: var(--accent);
  color:#fff; border:none; border-radius: 9999px; font-weight:700; cursor:pointer;
  box-shadow: 0 6px 18px rgba(37,99,235,.25);
  transition: filter .15s ease, transform .03s ease;
}
.si-btn:hover{ filter:brightness(1.05) }
.si-btn:active{ transform:translateY(1px) }
.si-btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none }
.si-btn-ghost{
  background:#fff; color:var(--text); border:1px solid var(--border); box-shadow:none
}

/* Results blocks */
.si-cards-row{ display:flex; gap:.75rem; flex-wrap:wrap }
.si-pill{
  flex:1 1 220px;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding:.9rem 1rem;
  box-shadow: var(--shadow-card);
}
.si-pill-title{ color:var(--muted); margin-bottom:.25rem; font-weight:600 }
.si-pill-value{ font-size:1.25rem; font-weight:800; color:var(--text) }
.si-pill-sub{ color:var(--muted); font-size:.9rem; margin-top:.15rem }
.si-pill-diff{ background:#f1f5ff }

/* Notes */
.si-note{ margin-top:.6rem; color:var(--muted) }
.si-footer{ margin-top:.75rem; color:var(--muted); font-size:.9rem }

/* Desktop grid spans */
@media(min-width:960px){
  .si-grid .si-card:nth-child(1){ grid-column:span 4 }
  .si-grid .si-card:nth-child(2){ grid-column:span 4 }
  .si-grid .si-card:nth-child(3){ grid-column:span 4 }
  .si-results .si-card:nth-child(1){ grid-column:span 5 }
  .si-results .si-card:nth-child(2){ grid-column:span 7 }
}

/* Outline pill buttons with invert-on-hover (Run + Reset) */
#stay-invested-tool.si-wrap{
  --btn-outline: #dbeafe;
}
#stay-invested-tool .si-btn,
#stay-invested-tool .si-btn-ghost{
  background:#fff;
  color: var(--text);
  border: 1px solid var(--btn-outline, #dbeafe);
  border-radius: 9999px;
  padding: .65rem 1.1rem;
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .03s ease, box-shadow .15s ease;
}
#stay-invested-tool .si-btn:hover,
#stay-invested-tool .si-btn-ghost:hover{
  background: var(--btn-hover-bg, #000);
  color: var(--btn-hover-text, #fff);
  border-color: var(--btn-hover-bg, #000);
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}
#stay-invested-tool .si-btn:focus-visible,
#stay-invested-tool .si-btn-ghost:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(147,197,253,.35);
}
#stay-invested-tool .si-btn:active,
#stay-invested-tool .si-btn-ghost:active{ transform: translateY(1px); }
#stay-invested-tool .si-btn[disabled],
#stay-invested-tool .si-btn-ghost[disabled]{
  opacity:.6; cursor:not-allowed; box-shadow:none;
  background:#fff; color: var(--muted); border-color: var(--border);
}

/* ====== HYBRID DATE FIELD (text + calendar) ====== */
.si-date-hybrid{
  display:flex; align-items:center; gap:.5rem;
  border: 1px solid var(--border);
  background: var(--input-bg);
  border-radius: 9999px;
  padding: .4rem .6rem;
  height: var(--control-h);
  max-width: var(--field-max);
  box-sizing: border-box;
}
.si-date-hybrid input[type="text"]{
  border:none !important;
  background:transparent !important;
  height: calc(var(--control-h) - .8rem);
  padding: 0 .25rem;
  outline:none; box-shadow:none !important;
  flex:1 1 auto; min-width:0;
}
.si-date-native{
  position:absolute !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
  pointer-events:none !important;
  /* keep it in the DOM and not display:none so showPicker() works where supported */
}
.si-cal-btn{
  border: 1px solid var(--border);
  background:#fff;
  border-radius: 9999px;
  padding:.35rem .6rem;
  height: calc(var(--control-h) - .9rem);
  line-height:1;
  cursor:pointer;
  box-shadow:none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.si-cal-btn:hover{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(37,99,235,.20);
}

/* Keep Start/End/Data source widths capped */
#startDateText, #endDateText, #modeData{ max-width: var(--field-max); }

/* ===== Volatility Visualiser (.mm-vol-vis) ===== */
/* =========================================================
       Stay-Invested visual skin (layout-safe, updated)
       — White default buttons, invert on hover
       — Chart canvas background forced white
       ========================================================= */

    /* ====== Core Theme ====== */
    .mm-vol-vis {
      --bg:#f6f8ff;
      --line:#e5e7eb;
      --text:#0f172a;
      --brand:#2563eb;
      --client:#e1576a;
      --legend-bg:#ffffff;
      --legend-border:#d1d5db;

      font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
      background:var(--bg);
      color:var(--ink);
      border:1px solid var(--line);
      border-radius:16px;
      padding:16px;
    }
    .mm-vol-vis[data-theme="dark"]{
      --bg:#0b0b0f; --ink:#f3f6ff; --muted:#a7a7b3; --line:#22242a;
      --brand:#7aa2ff; --client:#ff7a8c; --legend-bg:#0f1117; --legend-border:#1f2430;
      background:var(--bg);
    }

    /* ====== Header & Config ====== */
    .mmvv-header{ display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:12px; }
    .mmvv-title h2{ margin:0; font-size:1.5rem; font-weight:800; letter-spacing:-.01em; color:var(--text);}
    .mmvv-sub{ margin:4px 0 0; color:var(--muted); }

    .mmvv-config{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); align-items:end; }
    .mmvv-field{ display:flex; flex-direction:column; gap:6px; font-size:.95rem; }
    .mmvv-field legend, .mmvv-field > span{ font-weight:600; margin-bottom:4px; color:var(--muted); }

    .mmvv-field input, .mmvv-select{
      box-sizing:border-box;
      width:100%; border:1px solid var(--line); border-radius:999px;
      padding:8px 12px; background:#ffffff; color:inherit;
      transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .mmvv-field input::placeholder{ color:#9ca3af; }
    .mmvv-field input:hover, .mmvv-select:hover{ border-color:#d1d5db; }
    .mmvv-field input:focus, .mmvv-select:focus{
      outline:2px solid var(--brand); outline-offset:2px;
      border-color:var(--brand); box-shadow:0 0 0 4px rgba(37,99,235,.15);
    }

    /* ====== Toolbar & Buttons ====== */
    .mmvv-stage{ display:flex; flex-direction:column; gap:12px; }
    .mmvv-toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

    .mmvv-btn{
      border:1px solid var(--line);
      background:#ffffff;
      color:#111111;
      border-radius:999px;
      padding:8px 12px;
      cursor:pointer;
      font-weight:600;
      transition:background .15s ease, color .15s ease, border-color .15s ease;
    }
    .mmvv-btn:hover{
      background:#000000;
      color:#ffffff;
      border-color:#000000;
    }
    .mmvv-btn:active{ transform:translateY(1px); }
    .mmvv-btn[disabled]{ opacity:.55; cursor:not-allowed; }
    .mmvv-btn[aria-pressed="true"]{ outline:2px solid var(--brand); outline-offset:2px; }

    /* Ghost button stays visually light */
    .mmvv-btn.mmvv-btn--ghost{ background:transparent; color:inherit; border:1px solid var(--line); }

    .mmvv-timeline{ display:flex; align-items:center; gap:10px; margin-left:auto; }
    .mmvv-timeline input[type="range"]{ width:260px; accent-color:var(--brand); }
    .mmvv-date{ min-width:140px; text-align:right; color:var(--muted); }

    /* ====== Chart & Legend ====== */
    .mmvv-content{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

    .mmvv-chart-wrap{
      position:relative; background:#ffffff;
      border:1px solid var(--line); border-radius:14px;
      padding:6px; min-height:320px; box-shadow:0 4px 14px rgba(2,6,23,.06);
    }
    .mmvv-canvas{
      display:block; width:100%; height:auto;
      background:#ffffff; /* ensure chart bg is white */
    }
    .mmvv-legend{
      position:absolute; top:10px; left:12px;
      display:flex; gap:12px; font-size:.9rem; color:var(--ink);
      background:var(--legend-bg); border:1px solid var(--legend-border);
      border-radius:999px; padding:6px 10px;
      box-shadow:0 2px 10px rgba(2,6,23,.06);
    }
    .mmvv-key{ display:flex; align-items:center; gap:6px; }
    .mmvv-swatch{ width:20px; height:3px; border-radius:2px; background:var(--brand); }
    .mmvv-key--client .mmvv-swatch{ background:var(--client); }

    /* ====== Overlay ====== */
    .mmvv-overlay[hidden]{ display:none; }
    .mmvv-overlay{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.35); backdrop-filter:blur(1.5px); }
    .mmvv-overlay-card{
      background:#ffffff; color:var(--ink); border:1px solid var(--line);
      border-radius:16px; padding:16px; max-width:520px; box-shadow:0 12px 34px rgba(2,6,23,.25);
    }
    .mmvv-overlay-card h4{ margin:0 0 6px; color:var(--text);}
    .mmvv-overlay-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }

    /* ====== Right Panels ====== */
    .mmvv-right{ display:grid; grid-template-rows:auto 1fr; gap:12px; }
    .mmvv-panel{
      border:1px solid var(--line); border-radius:12px; padding:12px;
      background:#ffffff; box-shadow:0 4px 14px rgba(2,6,23,.06);
    }
    .mmvv-panel h4{ margin:0 0 8px; color:var(--text);}
    .mmvv-stats li{ margin:.25rem 0; }

    .mmvv-emotion{ display:flex; align-items:center; gap:10px; }
    .mmvv-therm{
      width:120px; height:10px; border-radius:999px;
      background:linear-gradient(90deg, #77d18b, #ffd76a, #ff8a8a);
      position:relative; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
    }
    .mmvv-therm::after{
      content:""; position:absolute; top:-4px; width:2px; height:18px; left:var(--marker-left, 0);
      background:var(--ink); border-radius:1px; transition:left .25s ease;
    }
    .mmvv-emotion-label{ color:var(--muted); }

    .mmvv-callout-stream{ min-height:66px; display:flex; flex-direction:column; gap:6px; }
    .mmvv-call{ border:1px dashed var(--line); border-radius:10px; padding:8px; background:rgba(255,255,255,.7); }
    .mmvv-call small{ color:var(--muted); display:block; }

    .mmvv-loading{ font-size:.95rem; color:var(--muted); padding:8px 0; }

    @media (max-width: 980px) {
      .mmvv-config{ grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); }
      .mmvv-content{ grid-template-columns:1fr; }
      .mmvv-timeline input[type="range"]{ width:160px; }
    }

/* ===== Would You Sell? (#wys-app) ===== */
#wys-app{
  --holder-bg:#f6f8fb; --panel:#ffffff; --panel-border:#e6ebf5; --text:#0f172a; --muted:#6b7280; --muted-2:#94a3b8; --accent-600:#1e40af; --good:#16a34a; --bad:#ef4444; --warn:#f59e0b; --round:16px; --holder-round:22px; --shadow:0 10px 30px rgba(21,46,108,.08);
}

    *{box-sizing:border-box}

    #wys-app{max-width:1200px;margin:32px auto;padding:0 16px;color:var(--text);
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    #wys-app .holder{background:var(--holder-bg);border-radius:var(--holder-round);
      padding:28px 26px;box-shadow:var(--shadow)}

    #wys-app h1{font-size:clamp(26px,3vw,36px);margin:0 0 10px;font-weight:800;color:var(--text);letter-spacing:-.02em}
    #wys-app .sub{color:var(--muted-2);margin:0 0 16px}

    /* Desktop: left 2/3, right 1/3. Mobile: right on top */
    #wys-app .grid{
      display:grid;
      grid-template-columns:minmax(0,2fr) minmax(0,1fr);
      grid-template-areas:"left right";
      gap:20px; align-items:start;
    }
    #wys-app .panel-left{grid-area:left}
    #wys-app .panel-right{grid-area:right}
    @media (max-width:980px){
      #wys-app .grid{
        grid-template-columns:1fr;
        grid-template-areas:"right" "left";
      }
    }

    .panel{background:var(--panel);border:1px solid var(--panel-border);
      border-radius:var(--round);box-shadow:var(--shadow);padding:16px;width:100%}

    /* Inputs row: 6 columns (Months, ExpRet, Vol, Cash, Starting capital spans 2) */
    #wys-app .controls{
      display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-items:start;
      --labelMin:auto; /* JS will set to tallest label height in px */
    }
    @media (max-width:1200px){ #wys-app .controls{ grid-template-columns:repeat(4,1fr);} }
    @media (max-width:680px){  #wys-app .controls{ grid-template-columns:1fr 1fr; } }

    #wys-app .span-1{grid-column:span 1}
    #wys-app .span-2{grid-column:span 2}

    #wys-app .field{display:flex;flex-direction:column;position:relative}
    #wys-app .field>label{
      font-size:12px;color:var(--muted);margin-bottom:6px;line-height:1.2;
      min-height:var(--labelMin); /* equalized dynamically */
    }

    #wys-app input[type="number"], #wys-app input[type="text"]{
      width:100%;padding:12px 14px;border-radius:999px;border:1px solid var(--panel-border);
      background:#fbfdff;color:var(--text);outline:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)
    }
    #wys-app input:focus{border-color:#c9d6f2;box-shadow:0 0 0 3px rgba(37,99,235,.15)}

    /* Currency badge uses the unified label height for vertical alignment */
    #wys-app .field[data-currency]::before{
      content:'£';position:absolute;left:12px;top:calc(var(--labelMin, 0px) + 12px);
      width:28px;height:28px;border-radius:999px;background:#eef2ff;color:#1e3a8a;
      display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;border:1px solid var(--panel-border)
    }
    #wys-app .field[data-currency] input{padding-left:48px}

    /* Centered crash row */
    #wys-app .row-center{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px}
    #wys-app .crash-row{margin-top:8px;margin-bottom:6px}
    #wys-app .simple-check{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text)}
    #wys-app .simple-check input{width:18px;height:18px}

    /* Buttons, chart, stats */
    #wys-app .btn{cursor:pointer;border:none;border-radius:999px;padding:10px 16px;font-weight:700;letter-spacing:.01em}
    #wys-app .btn:disabled{opacity:.6;cursor:not-allowed}
    #wys-app .btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 14px rgba(37,99,235,.18)}
    #wys-app .btn-primary:hover{background:var(--accent-600)}
    #wys-app .btn-ghost{background:#f8fafc;border:1px solid var(--panel-border);color:var(--text)}
    #wys-app .space{height:10px}

    #wys-app .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 12px}
    #wys-app .pill{padding:6px 10px;border-radius:999px;background:#f1f5f9;border:1px solid var(--panel-border);font-size:12px;color:var(--muted)}
    #wys-app canvas{max-height:520px}

    #wys-app .stat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:#f8fafc;border:1px solid var(--panel-border)}
    #wys-app .stat small{color:var(--muted)}
    #wys-app .callout{border-left:4px solid var(--warn);background:#fff7ed;padding:10px 12px;border-radius:8px;color:#7c4a03;border:1px solid #fde68a}
    #wys-app .callout .x{position:absolute;right:8px;top:8px;border:none;background:transparent;cursor:pointer;color:#7c4a03;font-weight:700}

    #wys-app .legend{display:flex;gap:10px;flex-wrap:wrap}
    #wys-app .legend .item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
    #wys-app .legend .swatch{width:12px;height:12px;border-radius:3px}


/* ===== Efficient Frontier Tool (#ef-tool.ef-wrap) ===== */
#ef-tool.ef-wrap{
  --page-bg:#f5f8fc;
  --card:#ffffff;
  --text:var(--ink);
  --border:var(--line);
  --ring:#93c5fd;
  --input-bg:#f8fafc;
  --shadow-card:0 6px 22px rgba(15,23,42,.06);

  color:var(--text);
  background:var(--page-bg);
  padding:1.25rem;
  border-radius:1.25rem;
  border:1px solid #e6edf7;
  box-shadow:var(--shadow);
}

/* two columns; equal height via stretch; no overflow */
#ef-tool .ef-grid{
  display:grid;
  grid-template-columns:minmax(260px,320px) minmax(0,1fr);
  gap:1rem;
  align-items:stretch;      /* <- makes both panels the same height */
}

/* panels fill the grid track height and allow internal flex */
#ef-tool .ef-panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:var(--shadow-card);
  padding:1rem;

  display:flex;
  flex-direction:column;
  min-width:0;             /* critical to prevent overflow in grid */
  max-width:100%;
  overflow:hidden;         /* hide sub-pixel overflow while resizing */
}

/* left panel can scroll internally if content exceeds height */
#ef-tool .ef-ctrl{ overflow:auto; }

/* headings & labels */
#ef-tool h2{ margin:0 0 .5rem; font-weight:800; letter-spacing:-.01em; }
#ef-tool .ef-sub{ margin:.25rem 0 1rem; color:var(--muted); }
#ef-tool .ef-ctrl label{ display:block; margin:.35rem 0; color:var(--muted); font-weight:600; }

/* weights grid */
#ef-tool .weights-grid{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:8px 12px;
  align-items:center;
  margin-top:.25rem;
}
#ef-tool .weights-grid .hdr{ font-weight:700; color:#334155; margin-top:4px; }

/* inputs */
#ef-tool input[type="number"]{
  width:100%;
  border:1px solid var(--border);
  background:var(--input-bg);
  border-radius:9999px;
  padding:.5rem .7rem;
  height:42px;
  color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-sizing:border-box;
}
#ef-tool input[type="number"]:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px rgba(147,197,253,.35);
  background:#fff;
  outline:none;
}

#ef-tool .actions{ display:flex; gap:.6rem; align-items:center; margin-top:.6rem; }
#ef-tool .sum{ margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
#ef-tool .status{ color:var(--muted); font-size:.95rem; margin-top:.5rem; }

/* chart area fills the right panel; height is bounded so the page never grows too tall */
#ef-tool .chart-wrap{
  position:relative;
  flex:1 1 auto;                      /* make the chart drive panel height */
  min-height:520px;                   /* working min height */
  height:clamp(520px, 55vh, 560px);   /* responsive but capped */
  border-radius:14px;
  padding:6px;
  background:#fff;
  width:100%;
  min-width:0;
}
#ef-tool canvas{
  display:block;
  width:100% !important;
  height:100% !important;
  background:#fff;
}

/* stack to a single column on smaller screens */
@media (max-width:980px){
  #ef-tool .ef-grid{
    grid-template-columns:1fr;
    align-items:start;                /* natural heights when stacked */
  }
  #ef-tool .chart-wrap{
    height:clamp(360px, 50vh, 520px);
  }
}

/* === Behavioural Toolkit — visual unifier === */

/* 1) Make all three tool wrappers the same width/position (full width, no extra margins) */
#stay-invested-tool.si-wrap,
.mm-vol-vis,
#wys-app {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0; /* wrapper-level; inner cards handle spacing */
}

/* 2) Normalise wrapper “card” padding + rounding */
#stay-invested-tool.si-wrap { padding: 20px; border-radius: 20px; }   /* SI ≈ already 20px */
.mm-vol-vis { padding: 20px; border-radius: 20px; }                   /* VV was 16px/16px */
#wys-app .holder { padding: 20px; border-radius: 20px; }              /* WYS was 28px/26px */

/* 3) Unify top heading sizing + spacing across tools */
#stay-invested-tool .si-header h2,
.mm-vol-vis .mmvv-title h2,
#wys-app h1 {
  font-size: clamp(26px, 2.2vw, 32px);    /* consistent hero size */
  margin: 0 0 10px 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* 4) Remove stray top margins inside panels so content sits in the same spot */
#stay-invested-tool.si-wrap > *:first-child,
.mm-vol-vis > *:first-child,
#wys-app .holder > *:first-child {
  margin-top: 0;
}

/* 5) Make internal “panel/cards” padding consistent (20px everywhere) */
#stay-invested-tool .si-card,
.mmvv-panel,
#wys-app .panel {
  padding: 20px !important; /* VV/WYS were 12–16px; SI was 16px */
}

/* Keep VV in light theme consistent with SI (don’t touch its dark theme) */
.mm-vol-vis:not([data-theme="dark"]),
/* WYS outer container */
#wys-app .holder {
  background: #f3f6fb;                          /* SI's --page-bg */
  border: 1px solid #e6edf7;                     /* SI's light border */
  box-shadow: 0 10px 24px rgba(15,23,42,.08);    /* SI's outer shadow */
  border-radius: 20px;                            /* match SI rounding */
  padding: 20px;                                  /* match SI padding */
}

/* (Optional, defensive) ensure SI keeps the same shell even if earlier rules change */
#stay-invested-tool.si-wrap {
  background: #f3f6fb;
  border: 1px solid #e6edf7;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  border-radius: 20px;
  padding: 20px;
}

/* ===== Patchwork — full styling + opaque shutter ===== */
/*:root { scrollbar-gutter: stable both-edges; }*/
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

.patchwork {
  --bg: #f3f6fb; --card:#fff; --border:#e6edf7; --ink:#0f172a; --muted:#64748b; --ring:#93c5fd;
  --shadow: 0 10px 24px rgba(15,23,42,.08);
  --tile-fs: .63rem; --legend-min:168px; --legend-max:200px; --gutter-w:46px; --year-min:78px;
  --tile-gap: 6px; --pad-x:12px; --pad-r:14px;
  color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:20px; box-shadow:var(--shadow);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

.pw-header h2{ margin:0 0 6px; font-weight:800; letter-spacing:-.01em; font-size:clamp(26px,2.2vw,32px); }
.pw-sub{ margin:0 0 12px; color:var(--muted); }

.pw-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.pw-status{ margin-left:auto; color:#64748b; }

/* Buttons */
.pw-btn{
  border: 1px solid #dbeafe; background:#fff; color:var(--ink);
  border-radius:999px; padding:.55rem 1rem; font-weight:700; cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .03s ease, box-shadow .15s ease;
  display:inline-flex; align-items:center; gap:.5rem;
}
.pw-btn:hover{ background:#000; color:#fff; border-color:#000; box-shadow:0 6px 18px rgba(0,0,0,.20); }
.pw-btn[aria-pressed="true"]{ outline:2px solid var(--ring); outline-offset:2px; }

/* Layout (legend + grid) */
.pw-wrap{ display:grid; grid-template-columns:minmax(var(--legend-min), var(--legend-max)) minmax(0,1fr); gap:16px; align-items:stretch; }

/* Legend */
.pw-legend{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; position:sticky; top:12px; max-height:80vh; overflow:auto; box-shadow:0 6px 22px rgba(15,23,42,.06); }
.pw-legend h4{ margin:0 0 8px; }
.pw-legend-controls{ display:flex; gap:8px; margin-bottom:8px; }

/* IMPORTANT: support either class or id for bullets removal */
.pw-legend-list, #legendList{
  list-style:none; padding:0; margin:0;
  display:grid; gap:6px;
}
.pw-legend-item{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:6px 8px; border-radius:10px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; font-weight:600;
}
.pw-legend-item:hover{ background:#000; color:#fff; border-color:#000; }
.pw-legend-item[aria-pressed="true"]{ outline:2px solid var(--ring); outline-offset:2px; }
.pw-swatch{ width:14px; height:14px; border-radius:4px; flex:0 0 14px; }

/* Grid card (white container) */
.pw-grid-card{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px var(--pad-r) 12px var(--pad-x); box-shadow:0 6px 22px rgba(15,23,42,.06); min-height:200px; max-width:100%; overflow:hidden; box-sizing:border-box; }

/* Years row & tiles use the SAME tracks (gutter + one per year) */
.pw-years{
  display:grid; grid-template-columns:var(--gutter-w) repeat(var(--cols), minmax(var(--year-min), 1fr));
  column-gap:var(--tile-gap); row-gap:0; margin-bottom:6px; color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums;
}
.pw-years::before{ content:""; } /* occupy gutter track */
.pw-years > *{ text-align:center; }

/* Tiles grid (anchor for overlay + shutter) */
.pw-tiles{
  position:relative;
  display:grid; grid-template-columns:var(--gutter-w) repeat(var(--cols), minmax(var(--year-min), 1fr));
  column-gap:var(--tile-gap); row-gap:var(--tile-gap);
}

/* Rank gutter in-flow so year 1 starts at column 2 */
.pw-rank-gutter{ display:grid; gap:var(--tile-gap); align-content:start; color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; pointer-events:none; }
.pw-rank-gutter div{ display:flex; align-items:center; justify-content:center; }

/* Tiles */
.pw-col{ display:grid; gap:var(--tile-gap); grid-auto-rows:var(--tile-h, 40px); }
.pw-tile{
  border:1px solid #e5e7eb; border-radius:10px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:var(--tile-fs); font-weight:700; padding:6px; cursor:pointer; line-height:1.1;
  transition: transform .03s ease, box-shadow .15s ease, opacity .15s ease;
  white-space:normal; word-break:break-word;
}
.pw-tile:hover{ box-shadow:0 6px 16px rgba(2,6,23,.12); }
.pw-tile:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.pw-tile.dim{ opacity:.28; }
.pw-label{ display:inline-block; transition:opacity .15s ease, transform .15s ease; }
.pw-label.hidden{ opacity:0; transform:translateY(4px); position:absolute; }

/* SVG guideline overlay */
.pw-overlay{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:10; }

/* Opaque shutter — JS sets --shutter-left (px) */
.pw-shutter{
  position:absolute; top:0; right:0; bottom:0;
  left: var(--shutter-left, 100%);     /* parked at right edge (no cover) */
  background:#fff;                     /* opaque */
  border-left:2px solid rgba(0,0,0,.28);
  z-index:20;
  pointer-events:auto;

  /* make drag render smoothly */
  will-change:left;
  user-select:none; -webkit-user-select:none;
}
.pw-shutter.animate{ transition:left .14s ease-out; }

/* Handle: larger hitbox; take over touch gesture immediately */
.pw-handle{
  position:absolute; left:-2px; top:0; bottom:0;
  width:18px;                             /* was 10px; easier to grab on mobile */
  cursor:ew-resize;
  display:flex; align-items:center; justify-content:center;

  /* CRITICAL: prevent the browser from treating this as a scroll gesture */
  touch-action:none;
  user-select:none; -webkit-user-select:none;
}
.pw-handle::before{
  content:""; width:4px; height:34px; border-radius:3px;
  background:linear-gradient(#cbd5e1,#94a3b8);
  box-shadow:0 0 0 1px rgba(0,0,0,.10) inset, 0 2px 8px rgba(0,0,0,.18);
}
.pw-dragging, .pw-dragging *{ cursor:ew-resize !important; }

/* Tooltip */
.pw-tip{ position:fixed; z-index:50; background:#111; color:#fff; padding:6px 8px; border-radius:8px; font-size:12px; box-shadow:0 6px 18px rgba(0,0,0,.25); transform:translate(-50%,-120%); white-space:nowrap; display:none; }

/* ---------- Responsive scroll model ---------- */
@media (max-width: 1200px){
  .patchwork{ --legend-min:160px; --legend-max:190px; --gutter-w:40px; --year-min:90px; }
  .pw-grid-card{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
  .pw-years, .pw-tiles{ width:max-content; column-gap:var(--tile-gap); row-gap:0; }
  .pw-years{ grid-template-columns:var(--gutter-w) repeat(var(--cols), var(--year-min)); }
  .pw-years > *{ inline-size:var(--year-min); }
  .pw-tiles{ grid-template-columns:var(--gutter-w) repeat(var(--cols), var(--year-min)); }
}

@media (max-width: 980px){
  .patchwork{ --legend-min:100%; --legend-max:100%; --gutter-w:36px; --year-min:110px; }
  .pw-wrap{ grid-template-columns:1fr; }
  .pw-legend{ position:static; max-height:none; }
  .pw-grid-card{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
  .pw-years, .pw-tiles{ width:max-content; column-gap:var(--tile-gap); row-gap:0; }
  .pw-years{ grid-template-columns:var(--gutter-w) repeat(var(--cols), var(--year-min)); }
  .pw-years > *{ inline-size:var(--year-min); }
  .pw-tiles{ grid-template-columns:var(--gutter-w) repeat(var(--cols), var(--year-min)); }
}

/* Defensive */
.pw-grid-card, .pw-tiles, .pw-years, .pw-years > *{ box-sizing:border-box; }


/* ===== Tax Alpha (scoped to #tax-alpha) ===== */
#tax-alpha .two-col { display:grid; gap:12px; grid-template-columns:1fr 1fr; align-items:stretch; }

/* allow the chart canvas to fill its container */
#tax-alpha #taxChart {
  display: block;
  width: 100%;
  height: auto; /* JS will set the container height */
  min-height: 220px;
}

/* KPI layout */
#tax-alpha .kpi { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* Keep KPI cards looking like rounded rectangles (not global capsule pills) */
#tax-alpha .kpi .pill{
  border:1px solid var(--line);
  border-radius:14px;            /* defeat global super-rounded pill */
  padding:12px;
  background:#fff;
  box-shadow:var(--shadow);
}
#tax-alpha .kpi .pill h4{
  margin:0 0 4px;
  color:var(--ink);
  font-weight:700;
  font-size:.95rem;
  line-height:1.15;
}
#tax-alpha .kpi .pill .big{
  font-size:1.35rem;
  font-weight:800;
  color:var(--ink);
}
#tax-alpha .kpi .pill small,
#tax-alpha .kpi .pill .note{
  color:var(--muted);
  font-size:.9rem;
}

/* Grids */
#tax-alpha .grid-2 { display:grid; gap:12px; grid-template-columns:1fr 1fr; align-items:start; }
#tax-alpha .grid-3 { display:grid; gap:10px; grid-template-columns:repeat(3, 1fr); align-items:start; }

/* --- DYNAMIC input alignment (LEFT inputs only, no fixed extra rows) --- */
@supports (grid-template-rows: subgrid) {
  /* Define 3 shared rows per grid: label / control / hint */
  #tax-alpha .inputs .grid-2,
  #tax-alpha .inputs .grid-3 {
    grid-template-rows: auto auto auto;
    row-gap: 8px; /* visible gap between label and input */
  }
  /* Fields adopt those exact row heights per row via subgrid */
  #tax-alpha .inputs .grid-2 .field,
  #tax-alpha .inputs .grid-3 .field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 3;
  }
  /* Label sits at bottom of its row so the gap is consistent */
  #tax-alpha .inputs .field label { margin:0; line-height:1.2; align-self:end; }
  #tax-alpha .inputs .field .hint { margin:0; } /* spacing handled by row-gap */
}

/* Standalone fields (not inside .grid-2/.grid-3): add label↔input gap */
#tax-alpha .inputs > .field{
  display: grid;
  grid-template-rows: auto auto auto; /* label / control / (optional) hint */
  row-gap: 8px;                       /* the visible space between label and input */
}
#tax-alpha .inputs > .field label{ margin: 0; }   /* avoid extra margin stacking */
#tax-alpha .inputs > .field .hint{ margin: 0; }   /* spacing handled by row-gap */


/* Utilities and tables (do NOT override .rows – keep your global .tax-calc .rows styles) */
#tax-alpha .mt-8{ margin-top:8px } 
#tax-alpha .mt-12{ margin-top:12px } 
#tax-alpha .mt-16{ margin-top:16px }
#tax-alpha .flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
#tax-alpha .right{ margin-left:auto }

#tax-alpha table { width:100%; border-collapse:separate; border-spacing:0; }
#tax-alpha th, #tax-alpha td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
#tax-alpha thead th { color:var(--muted); font-weight:700; background:#f8fafc; position:sticky; top:0; }

#tax-alpha canvas { background:#fff; border-radius:14px; }

/* Prefix bubble for currency/% controls */
#tax-alpha .control{ position:relative; }
#tax-alpha .control .prefix{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  min-width:1.8em; text-align:center; pointer-events:none;
}
/* Base padding for inputs without an icon/prefix */
#tax-alpha .control > .pill { padding-left:14px; }

/* Only add the larger left padding when a prefix bubble is present */
#tax-alpha .control > .prefix + .pill { padding-left:58px; }


/* Inputs WITHOUT a prefix icon (direct child of .field): use small left padding */
#tax-alpha .inputs .field > .pill { padding-left:14px !important; }

/* Inputs WITH a prefix icon (inside .control next to .prefix): keep wide padding */
#tax-alpha .inputs .field .control > .prefix + .pill { padding-left:58px !important; }

#tax-alpha select.pill { padding-left:14px !important; }


/* Action rows (centered) */
#tax-alpha .results-actions { display:flex; justify-content:center; margin:12px 0 0; }

/* Reset button: white default, invert to black on hover (scoped) */
#tax-alpha .btn.btn--ghost{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
}
#tax-alpha .btn.btn--ghost:hover{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  filter:none;
}

/* Center the 3rd KPI card (“Adviser Fee (Annual)”) on its own row */
#tax-alpha .kpi {
  /* expose the gap so we can reuse it in the calc below */
  --kpi-gap: 12px; /* keep in sync with your .kpi gap */
  gap: var(--kpi-gap);
  grid-template-columns: repeat(2, minmax(220px, 1fr)); /* keep a 2-col KPI layout */
}

#tax-alpha .kpi .pill:nth-child(3) {
  grid-column: 1 / -1;                                   /* span both columns */
  width: calc((100% - var(--kpi-gap)) / 2);              /* same width as one column */
  justify-self: center;                                   /* center across the row */
}

/* Mobile: stack KPIs; let the 3rd card behave like the others */
@media (max-width: 700px){
  #tax-alpha .kpi { grid-template-columns: 1fr; }
  #tax-alpha .kpi .pill:nth-child(3){
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
}

/* Responsive */
@media (max-width: 900px){
  #tax-alpha .two-col { grid-template-columns:1fr; }
  /* Subgrid stacks cleanly; no change needed */
}

/* --- Tiny-screen ergonomics for inputs with £/% icons --- */

/* 1) Narrow phones: make the icon smaller + reduce padding */
@media (max-width: 480px){
  #tax-alpha .inputs .control .prefix{
    transform: translateY(-50%) scale(0.85);
    opacity: .9;
  }
  /* slightly smaller left padding when an icon exists */
  #tax-alpha .inputs .control > .prefix + .pill{ padding-left:44px !important; }
}

/* Smallest phones: hide icon and force minimal padding even if a .prefix exists */
@media (max-width: 360px){
  /* hide the bubble */
  #tax-alpha .inputs .control .prefix{ display:none !important; }

  /* override the wide-padding selector when a (hidden) prefix is still adjacent */
  #tax-alpha .inputs .field .control > .prefix + .pill,
  #tax-alpha .inputs .control > .prefix + .pill,
  #tax-alpha .control > .prefix + .pill,
  #tax-alpha .inputs .field .control > .prefix + select.pill,
  #tax-alpha .inputs .control > .prefix + select.pill{
    padding-left:12px !important;
  }

  /* also keep minimal padding for plain fields/selects */
  #tax-alpha .inputs .control > .pill,
  #tax-alpha .inputs .field > .pill,
  #tax-alpha select.pill{
    padding-left:12px !important;
  }
}

/* ================= Adviser Alpha (scoped) ================= */
#adviser-alpha{
  /* Design tokens (scoped) */
  --ink:#0f172a; 
  --muted:#64748b; 
  --line:#e6ebf5; 
  --accent:#2563eb;
  --card:#ffffff; 
  --panel:#f5f8fc; 
  --ring:#93c5fd; 
  --shadow:0 10px 24px rgba(15,23,42,.08);
  --radius:16px; 
  --chip:#eef2ff;

  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  color: var(--ink);
  background: var(--panel);
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #e6edf7;
  box-shadow: var(--shadow);
  max-width: 1200px;
  margin: 0 auto 24px;
}

#adviser-alpha h1{
  margin:0 0 6px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}
#adviser-alpha .sub{ color: var(--muted); margin: 0 0 14px; }

/* Grid: two cards on desktop */
#adviser-alpha .aa-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12,1fr);
}
#adviser-alpha .aa-card{
  grid-column: span 12;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
}
@media(min-width: 980px){
  #adviser-alpha .aa-card--levers{ grid-column: span 6; }
  #adviser-alpha .aa-card--right{ grid-column: span 6; }
}

#adviser-alpha .aa-card h3{
  margin:.25rem 0 12px;
  color: var(--ink);
  font-size: 1.05rem;
}

/* Spacing between sections inside the combined right card */
#adviser-alpha .aa-right-section + .aa-right-section{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* Fields */
#adviser-alpha .aa-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
#adviser-alpha .aa-label{ font-weight:600; color:var(--ink); }
#adviser-alpha .aa-hint{ color:var(--muted); font-size:.9rem; }
#adviser-alpha .aa-inline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* Pill input with £ prefix */
#adviser-alpha .aa-pill-wrap{
  position:relative; display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; background:#fbfdff;
  padding:8px 12px; height:44px; max-width: 340px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#adviser-alpha .aa-pill-wrap:focus-within{
  border-color: var(--ring);
  box-shadow: 0 0 0 4px rgba(147,197,253,.35);
  background: #fff;
}
#adviser-alpha .aa-pill-wrap > input{
  width:100%; border:none; background:transparent; outline:none; font-size:1rem;
}
#adviser-alpha .aa-prefix{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px; background:var(--chip); color:#1e3a8a; font-weight:800;
}

/* Lever sliders */
#adviser-alpha .aa-row{ display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; margin:8px 0; }
#adviser-alpha .aa-row .aa-slider{ width:100%; accent-color: var(--accent); }
#adviser-alpha .aa-row .aa-val{ min-width: 88px; text-align:right; font-weight:700; }
#adviser-alpha .aa-badge{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
  background:#f1f5ff; border:1px solid var(--line); font-weight:700; color:#1e3a8a;
}

/* Market model mini-table */
#adviser-alpha .aa-table{
  width:100%; border-collapse: collapse; font-size:.98rem;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
#adviser-alpha .aa-table th, 
#adviser-alpha .aa-table td{
  border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; background:#fff;
}
#adviser-alpha .aa-table thead th{ background:#f8fafc; font-weight:700; color:#334155; }
#adviser-alpha .aa-table tfoot td{ background:#f6faff; font-weight:700; }
#adviser-alpha .aa-table input[type="number"]{
  width:100%; border:1px solid var(--line); border-radius:999px; padding:8px 10px; height:40px;
  outline:none; background:#fbfdff; box-sizing:border-box;
}
#adviser-alpha .aa-table input[type="number"]:focus{
  border-color: var(--ring); box-shadow: 0 0 0 4px rgba(147,197,253,.35); background:#fff;
}

#adviser-alpha .aa-remaining{ margin-top:8px; font-weight:700; }
#adviser-alpha .aa-remaining.bad{ color:#b30000; }
#adviser-alpha .aa-remaining.good{ color:#065f46; }

/* Chart block */
#adviser-alpha .aa-chart-card{ margin-top:14px; }
#adviser-alpha .aa-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
#adviser-alpha .aa-toolbar .aa-range{ width: 280px; accent-color: var(--accent); }
#adviser-alpha .aa-spacer{ flex:1 1 auto; }

#adviser-alpha .aa-btn{
  border:1px solid var(--line); background:#ffffff; color:#111;
  border-radius:999px; padding:8px 12px; font-weight:700; cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#adviser-alpha .aa-btn:hover{ background:#000; color:#fff; border-color:#000; }
#adviser-alpha .aa-btn:active{ transform: translateY(1px); }
#adviser-alpha .aa-btn[disabled]{ opacity:.55; cursor:not-allowed; }

#adviser-alpha .aa-canvas-wrap{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:6px; box-shadow:0 4px 14px rgba(2,6,23,.06);
}

/* Alpha breakdown (stacked bar) — flex-grow to prevent overflow */
#adviser-alpha .aa-stack{
  display:flex; align-items:stretch; gap:6px; margin-top:10px;
  border:1px solid var(--line); border-radius:10px; padding:8px; background:#fff;
}
#adviser-alpha .aa-stack .aa-seg{
  height:14px; border-radius:6px;
  flex: 0 1 0;      /* basis 0, flex-grow set via JS */
  min-width: 0;     /* prevent rounding overflow */
}
#adviser-alpha .aa-stack-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; color:var(--muted); font-size:.9rem; }
#adviser-alpha .aa-dot{ width:12px; height:12px; border-radius:3px; display:inline-block; }

/* Results table under chart */
#adviser-alpha .aa-results{ margin-top:12px; }
#adviser-alpha .aa-note{ color:var(--muted); margin-top:8px; font-size:.92rem; }

/* Badge layout improvements */
#adviser-alpha .aa-badge{
  display: flex;
  align-items: center;
  gap: 8px;
  /* existing visual styles (background/border/radius/shadow) already set elsewhere */
}
#adviser-alpha .aa-badge-label{ 
  font-weight: 700;
}
#adviser-alpha .aa-badge-values{
  font-weight: 700;
  white-space: nowrap;  /* keep “375 bps (3.75%)” together */
}

/* Desktop & tablet (standard screens): center the badge row and add a bit more top space */
@media (min-width: 641px){
  #adviser-alpha .aa-card--levers .aa-inline{
    justify-content: center;      /* center the badge in its row */
    margin-top: 24px;
  }
  #adviser-alpha .aa-badge{
    padding-top: 10px;
    padding-bottom: 10px;
  }
}


/* Mobile: make the pill full-width and space contents cleanly */
@media (max-width: 640px){
  #adviser-alpha .aa-badge{
    width: 100%;
    justify-content: space-between;   /* label left, values right */
  }
}

/* Very small devices: stack label above values and slightly reduce size */
@media (max-width: 400px){
  #adviser-alpha .aa-badge{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.95rem;
  }
  #adviser-alpha .aa-badge-values{
    white-space: normal;              /* allow wrap if absolutely needed */
  }
}


/* ================= Adviser Alpha — Responsive tweaks ================= */
@media (max-width: 640px){
  /* Lighter padding on small screens */
  #adviser-alpha .aa-card{
    padding: 12px;
  }

  #adviser-alpha .aa-canvas-wrap canvas{
    height: 220px !important;
  }

  /* Make the toolbar stack cleanly and let the slider span full width */
  #adviser-alpha .aa-toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #adviser-alpha .aa-toolbar .aa-range{
    width: 100%;   /* was 280px */
  }
  /* Buttons: full-width, one per row for easy tapping */
  #adviser-alpha .aa-toolbar .aa-btn{
    width: 100%;
  }

  /* Market Model table: fixed layout + sane column widths */
  #adviser-alpha .aa-table{
    table-layout: fixed;
  }
  #adviser-alpha .aa-table th:nth-child(1),
  #adviser-alpha .aa-table td:nth-child(1){ width: 42%; }
  #adviser-alpha .aa-table th:nth-child(2),
  #adviser-alpha .aa-table td:nth-child(2),
  #adviser-alpha .aa-table th:nth-child(3),
  #adviser-alpha .aa-table td:nth-child(3){
    width: 29%;
    text-align: center;  /* center numbers to reduce cramp */
  }

  /* Number inputs in the table: slightly smaller + centered */
  #adviser-alpha .aa-table input[type="number"]{
    height: 36px;           /* was 40px */
    padding: 6px 8px;       /* was 8px 10px */
    font-size: 0.95rem;
    text-align: center;
  }

  /* Legend: tone down size on narrow screens */
  #adviser-alpha .aa-stack-legend{
    font-size: 0.85rem;
  }
}

@media (max-width: 640px){
  /* Scroll wrapper for the results table */
  #adviser-alpha .aa-table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -8px;          /* bleed a touch to align with card edges */
    padding: 0 8px 8px;      /* bottom padding so the scrollbar isn't flush */
  }
  /* Give the table a minimum width so a scrollbar appears instead of squishing */
  #adviser-alpha .aa-table--results{
    min-width: 640px;        /* tweak to taste: 600–720 works well */
  }
  /* Keep headers readable and avoid wrapping */
  #adviser-alpha .aa-table--results th,
  #adviser-alpha .aa-table--results td{
    white-space: nowrap;
  }
}

/* Market Model table ONLY */
@media (max-width: 640px){
  #adviser-alpha .aa-table--model{ table-layout: fixed; }
  #adviser-alpha .aa-table--model th:nth-child(1),
  #adviser-alpha .aa-table--model td:nth-child(1){ width: 42%; }
  #adviser-alpha .aa-table--model th:nth-child(2),
  #adviser-alpha .aa-table--model td:nth-child(2),
  #adviser-alpha .aa-table--model th:nth-child(3),
  #adviser-alpha .aa-table--model td:nth-child(3){
    width: 29%;
    text-align: center;
  }
  #adviser-alpha .aa-table--model input[type="number"]{
    height: 36px; padding: 6px 8px; font-size:.95rem; text-align:center;
  }
}

/* Results table: horizontal scroll only on small screens */
@media (max-width: 640px){
  #adviser-alpha .aa-table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  #adviser-alpha .aa-table--results{
    min-width: 640px;           /* ensures scrollbar appears, not squish */
  }
  #adviser-alpha .aa-table--results th,
  #adviser-alpha .aa-table--results td{
    white-space: nowrap;
  }
}

/* --- Mobile: scope widths to the Market Model table only --- */
@media (max-width: 640px){
  /* Only the model table gets fixed layout + widths */
  #adviser-alpha .aa-table--model { table-layout: fixed; }
  #adviser-alpha .aa-table--model th:nth-child(1),
  #adviser-alpha .aa-table--model td:nth-child(1){ width: 42%; }
  #adviser-alpha .aa-table--model th:nth-child(2),
  #adviser-alpha .aa-table--model td:nth-child(2),
  #adviser-alpha .aa-table--model th:nth-child(3),
  #adviser-alpha .aa-table--model td:nth-child(3){
    width: 29%;
    text-align: center;
  }
  #adviser-alpha .aa-table--model input[type="number"]{
    height: 36px; padding: 6px 8px; font-size: .95rem; text-align: center;
  }
}

/* --- Mobile: results table gets horizontal scroll (only its container scrolls) --- */
@media (max-width: 640px){
  #adviser-alpha .aa-table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Ensure the table is wider than the viewport so scrolling is possible */
  #adviser-alpha .aa-table.aa-table--results{
    width: max-content;      /* intrinsic width based on contents */
    min-width: 720px;        /* guardrail so at least 6 cols show via scroll */
  }
  #adviser-alpha .aa-table--results th,
  #adviser-alpha .aa-table--results td{
    white-space: nowrap;
  }
}

/* ===== Cash Advantages (scoped to #cash-adv) ===== */
#cash-adv{
  --ink:#0f172a; --muted:#64748b; --line:#e6ebf5; --accent:#2563eb;
  --card:#ffffff; --panel:#f3f6fb; --ring:#93c5fd; --shadow:0 10px 24px rgba(15,23,42,.08);
  --radius:20px;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--panel);
  padding:20px;
  border-radius:var(--radius);
  border:1px solid #e6edf7;
  box-shadow:var(--shadow);
  max-width:1200px;
  margin: 0 auto 24px;
}

#cash-adv h1{
  margin:0 0 6px;
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight:800; letter-spacing:-.01em;
}
#cash-adv .sub{ color:var(--muted); margin:0 0 14px; }

/* Grid & cards */
#cash-adv .grid{ display:grid; gap:14px; grid-template-columns:repeat(12,1fr); }
#cash-adv .card{ grid-column:span 12; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:16px; }
@media(min-width:980px){
  #cash-adv .card.inputs { grid-column: span 12; }
  #cash-adv .card.p1 { grid-column: span 6; }
  #cash-adv .card.p2 { grid-column: span 6; }
  #cash-adv .card.table { grid-column: span 12; }
}

/* Fields */
#cash-adv .fields{ display:grid; gap:12px; grid-template-columns:repeat(12,1fr); align-items:start; }
#cash-adv .field{ grid-column: span 12; display:flex; flex-direction:column; gap:6px; }
#cash-adv .field.half{ grid-column: span 6; }
#cash-adv label{ font-weight:700; color:var(--ink); }
#cash-adv .hint{ color:var(--muted); font-size:.9rem; }
#cash-adv .control{ position:relative; display:block; }
#cash-adv .pill{
  width:100%; box-sizing:border-box; border-radius:999px; border:1px solid var(--line);
  background:#fbfdff; padding:10px 14px; padding-left:48px; height:44px; outline:none; font-weight:600; color:var(--ink);
}
#cash-adv .pill:focus{ border-color:var(--ring); box-shadow:0 0 0 4px rgba(147,197,253,.35); background:#fff; }
#cash-adv .prefix{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; border-radius:999px; background:#eef2ff;
  color:#1e3a8a; font-weight:800; pointer-events:none;
}

/* Ranges */
#cash-adv input[type="range"]{ width:100%; accent-color:var(--accent); }

/* KPI cards */
#cash-adv .kpis{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
#cash-adv .kpi{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; box-shadow:var(--shadow); }
#cash-adv .kpi h4{ margin:0 0 4px; color:#64748b; font-weight:700; }
#cash-adv .kpi .big{ font-size:1.35rem; font-weight:800; color:var(--ink); }
#cash-adv .kpi small{ color:#64748b; }

/* Recovery bars */
#cash-adv .bars{ display:grid; gap:10px; }
#cash-adv .bar{ background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:10px; }
#cash-adv .bar .label{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#64748b; font-weight:700; }
#cash-adv .bar .track{ position:relative; height:14px; background:#eef2ff; border-radius:999px; overflow:hidden; }
#cash-adv .bar .fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:#2563eb; }

/* Table */
#cash-adv .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
#cash-adv table{ width:100%; border-collapse:separate; border-spacing:0; }
#cash-adv th, #cash-adv td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
#cash-adv thead th{ background:#f8fafc; color:#334155; position:sticky; top:0; }

/* Actions / buttons (scoped) */
#cash-adv .actions{ display:flex; gap:8px; flex-wrap:wrap; }
#cash-adv .btn{
  border:1px solid var(--line); background:#ffffff; color:#111; border-radius:999px; padding:10px 14px; font-weight:700; cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .03s ease;
}
#cash-adv .btn:hover{ background:#000; color:#fff; border-color:#000; }
#cash-adv .btn:active{ transform:translateY(1px); }

/* Responsive */
@media (max-width: 900px){
  #cash-adv .field.half{ grid-column: span 12; }
}