/* Page-specific styles for compound-interest-calculator-app.html.
   Shared layout, colours and components live in brand-shared.css (the
   whole site) and calculator-shared.css (every calculator) — this file
   only holds what's unique to this calculator. Structurally this is
   the same .calc-shell system as mortgage-calculator.css, with the
   equity/debt token pair renamed to growth/base for a savings context. */

  /* ---------- compound-interest-calculator (scoped) ---------- */

  /* Colours this calculator adds to the shared set in calculator-shared.css
     (a name that appears in both takes this file's value). */
  .calc-shell {
    --surface: #ffffff;
    --growth: #0b6b4f;
    --growth-soft: #e6f4ee;
    --base: #5a6b85;
    --base-soft: #eef1f7;
    --flat: #6b7280;
    --flat-soft: #eef0f2;
  }
  @media (prefers-color-scheme: dark) {
    .calc-shell {
      --surface: #17212f;
      --growth: #2dd4a0;
      --growth-soft: #123227;
      --base: #8b9bb4;
      --base-soft: #1d2635;
      --flat: #9399a6;
      --flat-soft: #232a35;
    }
  }

  .calc-shell .layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
  }
  @media (max-width: 900px) {
    .calc-shell .layout { grid-template-columns: 1fr; }
    .calc-shell aside.rail { order: 3; }
  }
  .calc-shell .input-money, .calc-shell .input-plain {

    overflow: hidden; /* keeps the sign-toggle button's own corner square against the box's rounded one */
    
  }
  /* The "Regular contribution" £ prefix doubles as a withdrawal/contribution
     toggle - a real button rather than a static span, styled to still read
     as part of the field until it's interacted with. */
  .calc-shell .sign-toggle {
    align-self: stretch;
    flex: none;
    /* No padding top and bottom, so the box is the same height as every
       other field; it stretches to fill it instead. */
    padding-block: 0;
    border: 0;
    border-inline-end: 1px solid var(--line);
    background: transparent;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    transition: color .15s, background-color .15s, border-color .15s;
  }
  .calc-shell .sign-toggle:hover { background: var(--surface); }
  .calc-shell .sign-toggle[aria-pressed="true"] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-inline-end-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  }
  /* The up/down arrow reads as "direction of money" rather than doubling
     the £ as a plus/minus sign - sized down slightly so it sits quietly
     ahead of the currency symbol instead of competing with it. */
  .calc-shell .sign-toggle .arrow-ico {
    font-size: 0.75em;
    margin-inline-end: 1px;
  }

  .calc-shell .row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Growth spotlight */
  .calc-shell .growth-card {
    background: linear-gradient(160deg, var(--growth-soft), var(--surface));
    border-color: color-mix(in srgb, var(--growth) 30%, var(--line));
  }
  .calc-shell .growth-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .calc-shell .growth-figure { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; color: var(--growth); letter-spacing: -0.02em; }
  .calc-shell .growth-pct {
    font-size: 0.85rem; font-weight: 700; color: var(--growth);
    background: color-mix(in srgb, var(--growth) 16%, transparent);
    padding: 4px 10px; border-radius: 999px;
  }
  .calc-shell .bar {
    background: var(--base-soft);
  }
  /* Default split before calc() runs on load (it runs immediately, then
     JS takes over via el.style.width on every recalculation). */
  .calc-shell .bar .seg-contrib { width: 62%; background: repeating-linear-gradient(45deg, var(--base), var(--base) 8px, color-mix(in srgb, var(--base) 78%, #000) 8px, color-mix(in srgb, var(--base) 78%, #000) 16px); }
  .calc-shell .bar .seg-interest { width: 38%; background: linear-gradient(180deg, var(--brand-2), var(--growth)); }
  .calc-shell .dot.ct { background: var(--base); }
  .calc-shell .dot.in { background: var(--growth); }
  /* When there's no interest to show off - a 0% rate, or a drawdown that's
     shrinking the balance faster than it grows - the spotlight shouldn't
     read as a win. Redefining --growth/--growth-soft here, rather than
     overriding every rule that uses them, lets the whole card (figure,
     badge, bar, legend dot) fall back to a neutral tone in one place. */
  .calc-shell .growth-card.no-growth {
    --growth: var(--flat);
    --growth-soft: var(--flat-soft);
  }
  /* "See what overpaying a mortgage instead would do" only makes sense for
     money you're choosing where to put - once the contribution field is
     flipped to a withdrawal it's not spare money any more, so the handoff
     is disabled rather than removed (the id and label stay put for
     refreshHandoffs()/rContributedLbl - see compound-interest-calculator.js). */
  .calc-shell .xtip.no-handoff .xlink { pointer-events: none; cursor: default; }
  .calc-shell .xtip.no-handoff .xfrag { display: none; }
  .calc-shell .xtip.no-handoff .xbub { display: none; }
  .calc-shell table.proj td.gw { color: var(--growth); font-weight: 700; }

  .calc-shell .chart-legend .dot.gr { background: var(--growth); }