/* ==========================================================================
   Gyanteilen calculators — core design system (v2)

   Shared by all three calculators. Loaded by every calculator shortcode
   alongside calculator-extras.css. Everything is scoped under .gtc.

   DESIGN NOTE — why the result panel is dark

   The answer is the reason anyone opens a calculator, but v1 gave it the
   same white card as every input group, so nothing led. Here the result is
   a near-black spotlight panel and the inputs are light: one clear focal
   point instead of eleven equal ones. It works because of a quirk of the
   engines — the hero sparkline draws no axes and reads no tokens, so unlike
   the detail charts it is free of the surface it sits on.

   FOUR THINGS THAT ARE LOAD-BEARING — do not "clean them up":

   1. --gtc-ink-2, --gtc-line and --gtc-card are read out of the DOM by the
      engines (getComputedStyle(root)) to colour the Chart.js axes, grid and
      doughnut borders. They must stay defined on .gtc itself and stay real
      colour values. Overriding them on a DESCENDANT is safe and is how the
      dark result panel re-tints its children — getComputedStyle(root) never
      sees a descendant's override.

   2. --gtc-brand is #4338ca because the engines hard-code that exact indigo
      for every chart line, and --gtc-ok is #059669 because they hard-code it
      for the principal segment and the FD engine paints a matching
      rgba(5,150,105,.09) inline. The UI matches the charts, not the reverse.

   3. .gtc__disc keeps a solid var(--gtc-card) background. The doughnut is
      drawn with borderColor: card to punch gaps between segments, so if the
      panel behind it stops matching --gtc-card the gaps show as slivers.
      This is why the panels are not glass.

   4. .gtc__disc-body is a display toggle driven by .is-open, not a height
      animation: the engines only draw charts once a panel opens, and
      animating height hands Chart.js a zero-sized canvas to measure.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.gtc {
  /* read by the engines — see note 1 */
  --gtc-brand: #4338ca;
  --gtc-ok: #059669;
  --gtc-bad: #dc2626;
  --gtc-card: #ffffff;
  --gtc-ink-2: #52607a;
  --gtc-line: #e6e9f2;

  /* palette */
  --gtc-brand-2: #7c3aed;
  --gtc-brand-3: #06b6d4;
  --gtc-grad: linear-gradient(115deg, var(--gtc-brand), var(--gtc-brand-2) 55%, var(--gtc-brand-3));
  /* Text-safe pair: white clears 7:1 on both stops, in both themes. The
     3-stop --gtc-grad above ends in cyan, where white is only 2.4:1, so it
     is for decorative rails and fills that carry no text. */
  --gtc-grad-txt: linear-gradient(115deg, #4338ca, #6d28d9);
  --gtc-on-brand: #ffffff;
  --gtc-ok-txt: #047857;
  --gtc-ink: #0b1020;
  --gtc-muted: #5c6780;
  --gtc-bg: #f6f7fc;
  --gtc-sunken: #eef1f9;
  --gtc-warn: #b45309;

  --gtc-brand-soft: rgba(67, 56, 202, 0.09);
  --gtc-brand-ring: rgba(67, 56, 202, 0.3);
  --gtc-ok-soft: rgba(5, 150, 105, 0.1);
  --gtc-bad-soft: rgba(220, 38, 38, 0.09);
  --gtc-warn-soft: rgba(180, 83, 9, 0.1);

  /* the spotlight panel — same in both themes, it is the constant */
  --gtc-spot: radial-gradient(125% 125% at 18% 0%, #1d2740 0%, #141c2e 48%, #0b111c 100%);

  --gtc-r-sm: 10px;
  --gtc-r: 14px;
  --gtc-r-lg: 20px;
  --gtc-r-xl: 26px;
  --gtc-r-pill: 999px;

  /* shadows carry brand colour rather than grey — the single biggest
     difference between "admin panel" and "product" */
  --gtc-sh-sm: 0 1px 2px rgba(11, 16, 32, 0.05);
  --gtc-sh: 0 2px 6px rgba(31, 35, 88, 0.06), 0 12px 28px -14px rgba(67, 56, 202, 0.22);
  --gtc-sh-lg: 0 4px 12px rgba(31, 35, 88, 0.07), 0 28px 56px -28px rgba(67, 56, 202, 0.42);
  --gtc-sh-spot: 0 32px 64px -28px rgba(31, 27, 90, 0.55);
  --gtc-glow: 0 0 0 1px rgba(67, 56, 202, 0.35), 0 10px 26px -10px rgba(67, 56, 202, 0.45);

  --gtc-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --gtc-ease: cubic-bezier(0.32, 0.72, 0, 1);

  --gtc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
}

/* Dark — system preference. Guard matches the theme's own so a manual
   choice in theme-toggle.js always wins over the OS setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .gtc {
    --gtc-brand: #818cf8;
    --gtc-ok: #34d399;
    --gtc-ok-txt: #34d399;
    --gtc-bad: #fb7185;
    --gtc-card: #0e1426;
    --gtc-ink-2: #97a3bd;
    --gtc-line: rgba(148, 176, 255, 0.16);

    --gtc-brand-2: #a78bfa;
    --gtc-brand-3: #22d3ee;
    --gtc-ink: #eaf0fb;
    --gtc-muted: #7c8aa6;
    --gtc-bg: #070b17;
    --gtc-sunken: rgba(148, 176, 255, 0.07);
    --gtc-warn: #fbbf24;

    --gtc-brand-soft: rgba(129, 140, 248, 0.15);
    --gtc-brand-ring: rgba(129, 140, 248, 0.4);
    --gtc-ok-soft: rgba(52, 211, 153, 0.14);
    --gtc-bad-soft: rgba(251, 113, 133, 0.14);
    --gtc-warn-soft: rgba(251, 191, 36, 0.14);

    --gtc-spot: radial-gradient(125% 125% at 18% 0%, #1b2540 0%, #121a2c 48%, #090e19 100%);

    --gtc-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --gtc-sh: 0 2px 6px rgba(0, 0, 0, 0.5), 0 12px 28px -14px rgba(0, 0, 0, 0.7);
    --gtc-sh-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 28px 56px -28px rgba(0, 0, 0, 0.8);
    --gtc-sh-spot: 0 32px 64px -28px rgba(0, 0, 0, 0.85);
    --gtc-glow: 0 0 0 1px rgba(129, 140, 248, 0.4), 0 10px 26px -10px rgba(129, 140, 248, 0.4);
  }
}

/* Dark — explicit choice. Same values; separate block so the toggle wins in
   both directions regardless of the OS setting. */
[data-theme="dark"] .gtc {
  --gtc-brand: #818cf8;
  --gtc-ok: #34d399;
  --gtc-ok-txt: #34d399;
  --gtc-bad: #fb7185;
  --gtc-card: #0e1426;
  --gtc-ink-2: #97a3bd;
  --gtc-line: rgba(148, 176, 255, 0.16);

  --gtc-brand-2: #a78bfa;
  --gtc-brand-3: #22d3ee;
  --gtc-ink: #eaf0fb;
  --gtc-muted: #7c8aa6;
  --gtc-bg: #070b17;
  --gtc-sunken: rgba(148, 176, 255, 0.07);
  --gtc-warn: #fbbf24;

  --gtc-brand-soft: rgba(129, 140, 248, 0.15);
  --gtc-brand-ring: rgba(129, 140, 248, 0.4);
  --gtc-ok-soft: rgba(52, 211, 153, 0.14);
  --gtc-bad-soft: rgba(251, 113, 133, 0.14);
  --gtc-warn-soft: rgba(251, 191, 36, 0.14);

  --gtc-spot: radial-gradient(125% 125% at 18% 0%, #1b2540 0%, #121a2c 48%, #090e19 100%);

  --gtc-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --gtc-sh: 0 2px 6px rgba(0, 0, 0, 0.5), 0 12px 28px -14px rgba(0, 0, 0, 0.7);
  --gtc-sh-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 28px 56px -28px rgba(0, 0, 0, 0.8);
  --gtc-sh-spot: 0 32px 64px -28px rgba(0, 0, 0, 0.85);
  --gtc-glow: 0 0 0 1px rgba(129, 140, 248, 0.4), 0 10px 26px -10px rgba(129, 140, 248, 0.4);
}

/* ==========================================================================
   2. SHELL
   ========================================================================== */

.gtc {
  margin: 36px 0 44px;
  padding: 0;
  color: var(--gtc-ink);
  font-family: var(--gtc-font);
  font-size: 14.5px;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gtc *,
.gtc *::before,
.gtc *::after {
  box-sizing: border-box;
}

/* Figures line up column-wise wherever they are compared. */
.gtc__hero-val,
.gtc__v,
.gtc__vs-big,
.gtc__saved-val,
.gtc__band-val,
.gtc__item-amt,
.gtc__tblwrap td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The post column is too tight for a two-pane planner, so above 1280px the
   widget steps outside it.

   The offset is a constant because every input is fixed at this breakpoint.
   Measured from the built HTML rather than assumed — the content column is

     <div class="col-lg-8 col-lg-offset-1 ... post-container">

   and Bootstrap pins .container to 1170px above 1200px:

     row spans the container edge to edge      1170px
     col-lg-offset-1 = 1/12 x 1170               97.5px
     column padding-left                         15px
     -> containing block starts at            +112.5px from the container edge
     centring a 1140px box needs (1170-1140)/2 = 15px from that edge
     offset = 15 - 112.5                        = -97.5px

   Do not use a percentage here: percentages resolve against the containing
   block, and .post-container's padding-right:5% has already narrowed it.

   The viewport cap keeps browser zoom and narrow desktop windows from
   clipping the box — vw includes the scrollbar, so 32px covers that too. */
@media (min-width: 1280px) {
  .gtc {
    width: min(1140px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    margin-left: -97.5px;
  }
}

.gtc__hero {
  margin-bottom: 22px;
}

.gtc__hero h2 {
  margin: 0 0 5px;
  color: var(--gtc-ink);
  font-family: var(--gtc-font);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.gtc__hero p {
  margin: 0;
  color: var(--gtc-ink-2);
  font-size: 15px;
}

.gtc__hero p:empty {
  display: none;
}

.gtc__planner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (min-width: 900px) {
  .gtc__planner {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
    gap: 24px;
  }

  /* Inputs left, result right. The markup puts the result first so it leads
     on a phone, where it stacks on top. */
  .gtc__col-in { grid-column: 1; grid-row: 1; }

  .gtc__col-res {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 76px; /* clears the fixed navbar */
  }
}

.gtc__foot {
  margin-top: 22px;
  color: var(--gtc-muted);
  font-size: 12.5px;
  text-align: center;
}

.gtc__sub {
  color: var(--gtc-ink-2);
  font-size: 13.2px;
}

/* ==========================================================================
   3. THE SPOTLIGHT RESULT PANEL

   Dark in both themes. Re-tints its own children by overriding the ink and
   line tokens locally — safe, because the engines read those from .gtc, not
   from here (see note 1).
   ========================================================================== */

.gtc__hero-res {
  --gtc-ink: #ffffff;
  --gtc-ink-2: rgba(214, 222, 245, 0.74);
  --gtc-muted: rgba(190, 200, 228, 0.72);
  --gtc-line: rgba(255, 255, 255, 0.14);
  --gtc-card: rgba(255, 255, 255, 0.06);
  --gtc-sunken: rgba(255, 255, 255, 0.07);
  --gtc-brand: #a5b4fc;
  --gtc-brand-soft: rgba(165, 180, 252, 0.16);
  --gtc-ok: #34d399;
  --gtc-ok-txt: #34d399;
  --gtc-bad: #fb7185;

  position: relative;
  isolation: isolate;
  padding: 26px 24px 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--gtc-r-xl);
  background: var(--gtc-spot);
  box-shadow: var(--gtc-sh-spot);
  color: #fff;
}

/* Aurora wash — two soft colour fields drifting behind the content. */
.gtc__hero-res::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -2;
  background:
    radial-gradient(42% 48% at 80% 8%, rgba(79, 110, 200, 0.34), transparent 72%),
    radial-gradient(36% 42% at 10% 92%, rgba(45, 158, 178, 0.2), transparent 72%);
  opacity: 0.7;
  animation: gtc-drift 22s ease-in-out infinite alternate;
}

/* Fine grain, so the large flat gradient does not band on wide screens. */
.gtc__hero-res::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

@keyframes gtc-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

.gtc__hero-lbl {
  color: rgba(214, 222, 245, 0.72);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gtc__hero-val {
  margin-top: 6px;
  color: #fff;
  font-size: clamp(42px, 5.4vw, 58px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

.gtc__hero-val--ok { color: #6ee7b7; }
.gtc__hero-val--bad { color: #fda4af; }
.gtc__hero-val--warn { color: #fcd34d; }

.gtc__hero-sub {
  margin-top: 9px;
  color: rgba(214, 222, 245, 0.78);
  font-size: 13.8px;
}

.gtc__hero-real {
  margin-top: 3px;
  color: rgba(190, 200, 228, 0.72);
  font-size: 12.7px;
}

.gtc__hero-sub:empty,
.gtc__hero-real:empty {
  display: none;
}

/* Contribution / growth bar */
.gtc__bar {
  display: flex;
  height: 10px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: var(--gtc-r-pill);
  background: rgba(255, 255, 255, 0.1);
}

.gtc__bar-in,
.gtc__bar-gro {
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: width 0.6s var(--gtc-ease);
}

.gtc__bar-in { background: linear-gradient(90deg, #059669, #34d399); }
.gtc__bar-gro { background: linear-gradient(90deg, #6366f1, #a78bfa); }

/* A slow sheen so the bar reads as live rather than printed. */
.gtc__bar-gro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
  animation: gtc-sheen 3.4s ease-in-out infinite;
}

@keyframes gtc-sheen {
  0%, 62% { transform: translateX(-110%); }
  100% { transform: translateX(210%); }
}

.gtc__bar-key {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  margin-top: 12px;
}

.gtc__bar-key-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(214, 222, 245, 0.74);
  font-size: 12.6px;
}

.gtc__bar-key-item b {
  color: #fff;
  font-weight: 680;
}

.gtc__bar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.09);
}

/* The trend chart used to sit inside the result card, where it was ~330px
   wide — a sparkline you could see the shape of but never read a value off.
   It now spans the full width below the planner, with real axes, a legend
   and hover readout. */
.gtc__trend {
  margin-top: 16px;
  padding: 20px 22px 18px;
  border: 1px solid var(--gtc-line);
  border-radius: var(--gtc-r-lg);
  background: var(--gtc-card);
  box-shadow: var(--gtc-sh);
}

.gtc__trend-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 14px;
}

.gtc__trend-nm {
  margin: 0;
  color: var(--gtc-ink);
  font-family: var(--gtc-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gtc__trend-sub {
  margin: 0;
  color: var(--gtc-ink-2);
  font-size: 12.6px;
}

.gtc__trend-chart {
  position: relative;
  height: 300px;
}

@media (min-width: 900px) {
  .gtc__trend-chart { height: 340px; }
}


.gtc__insight {
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--gtc-r);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(232, 238, 252, 0.94);
  font-size: 12.9px;
  line-height: 1.6;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gtc__insight:empty {
  display: none;
}

.gtc__hero-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.gtc__hero-warn {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(190, 200, 228, 0.72);
  font-size: 11.6px;
  line-height: 1.55;
}

.gtc__hero-warn b {
  color: rgba(214, 222, 245, 0.78);
  font-weight: 650;
}

/* Buttons sitting on the dark panel */
.gtc .gtc__hero-acts .gtc__btn--s {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gtc .gtc__hero-acts .gtc__btn--s:hover {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Copying a link to a plan, or opening its breakdown, needs a plan. Dimmed
   rather than hidden so the reader can see what arrives once they fill the
   form in — a control that appears out of nowhere is harder to trust than
   one that was waiting. Contrast is not the point here: these are
   deliberately not readable as available. */
.gtc .gtc__hero-acts .gtc__btn--s:disabled,
.gtc .gtc__hero-acts .gtc__btn--s:disabled:hover {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(214, 222, 245, 0.42);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* ==========================================================================
   3b. WAITING STATE

   The planner opens empty and computes nothing until asked. That has to read
   as an invitation rather than as a failure — the error state next door is
   red for a reason, and this must not borrow any of it.
   ========================================================================== */

.gtc__hero-val--waiting {
  color: rgba(214, 222, 245, 0.42);
  font-weight: 600;
}

/* Nothing to chart yet, and an empty axis frame looks broken. */
.gtc.is-waiting .gtc__trend,
.gtc.is-waiting .gtc__bar,
.gtc.is-waiting .gtc__bar-key {
  display: none;
}

.gtc__go {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--gtc-line);
}

/* Full width, because it is the one thing to do on this card and a button
   the size of a chip does not read as the next step. */
.gtc .gtc__go-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 14.5px;
}

/* Muted until the plan can actually be computed, so the change to solid is
   the signal that it is ready. */
.gtc .gtc__go-btn:not(.is-ready) {
  background: var(--gtc-sunken);
  color: var(--gtc-muted);
  box-shadow: none;
}

.gtc .gtc__go-btn:not(.is-ready):hover {
  background: var(--gtc-sunken);
  transform: none;
  box-shadow: none;
  filter: none;
}

.gtc__go-hint {
  display: block;
  margin-top: 9px;
  color: var(--gtc-muted);
  font-size: 12.4px;
  text-align: center;
}

.gtc__go-hint.is-missing { color: var(--gtc-warn); }

/* Once it is running the button stops competing with the result — but it
   still has a job (getting the reader down to the chart), so it keeps a real
   edge and its own ink rather than fading into the card. A hairline border in
   the widget's own line colour reads as an empty strip, which is exactly how
   this was reported. */
.gtc .gtc__go-btn.is-update {
  background: var(--gtc-card);
  border-color: var(--gtc-brand-ring);
  color: var(--gtc-brand);
  box-shadow: none;
}

.gtc .gtc__go-btn.is-update:hover {
  background: var(--gtc-brand-soft);
  border-color: var(--gtc-brand);
  color: var(--gtc-brand);
  transform: none;
  box-shadow: none;
  filter: none;
}

/* ==========================================================================
   4. PANELS
   ========================================================================== */

.gtc__lvl1 {
  position: relative;
  margin-bottom: 14px;
  padding: 22px;
  border: 1px solid var(--gtc-line);
  border-radius: var(--gtc-r-lg);
  background: var(--gtc-card);
  box-shadow: var(--gtc-sh);
}

.gtc__lvl1-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--gtc-ink);
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

/* Gradient tick marking the primary input group. */
.gtc__lvl1-hd::before {
  content: "";
  flex: none;
  width: 4px;
  height: 17px;
  border-radius: var(--gtc-r-pill);
  background: var(--gtc-grad);
}

/* Accordion — note 3: solid --gtc-card, never glass. */
.gtc__disc {
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--gtc-line);
  border-radius: var(--gtc-r-lg);
  background: var(--gtc-card);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--gtc-spring);
}

.gtc__disc:hover {
  border-color: var(--gtc-brand-ring);
}

.gtc__disc.is-open {
  border-color: transparent;
  box-shadow: var(--gtc-glow);
}

.gtc__disc-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  margin: 0;
  padding: 17px 18px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}

.gtc__disc-head:hover {
  background: var(--gtc-sunken);
}

.gtc__disc-plus {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--gtc-brand-soft);
  color: var(--gtc-brand);
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
  transition: transform 0.35s var(--gtc-spring), background 0.2s, color 0.2s;
}

.gtc__disc.is-open .gtc__disc-plus {
  background: var(--gtc-grad-txt);
  color: var(--gtc-on-brand);
  transform: rotate(135deg); /* + becomes × */
}

.gtc__disc-txt {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.gtc__disc-nm {
  display: block;
  color: var(--gtc-ink);
  font-size: 14.6px;
  font-weight: 680;
  letter-spacing: -0.012em;
}

.gtc__disc-sub {
  display: block;
  margin-top: 3px;
  color: var(--gtc-ink-2);
  font-size: 12.6px;
  line-height: 1.5;
}

.gtc__disc-tag {
  flex: none;
  align-self: center;
  padding: 4px 11px;
  border-radius: var(--gtc-r-pill);
  background: var(--gtc-grad-txt);
  color: var(--gtc-on-brand);
  font-size: 11.4px;
  font-weight: 650;
  white-space: nowrap;
}

/* Note 4: a display toggle, not a height animation. */
.gtc__disc-body {
  display: none;
  padding: 6px 18px 20px;
  border-top: 1px solid var(--gtc-line);
}

.gtc__disc.is-open > .gtc__disc-body {
  display: block;
  animation: gtc-reveal 0.32s var(--gtc-ease);
}

@keyframes gtc-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.gtc__disc-body > *:first-child {
  margin-top: 16px;
}

/* ==========================================================================
   4b. MODE PICKER  (investment planner)

   Three shapes of the same plan. Full width and above the fields, because it
   decides what the fields are — a control that changes the form beneath it
   cannot sit inside that form looking like one more input.
   ========================================================================== */

.gtc__modes {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 3px;
  width: 100%;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: var(--gtc-r);
  background: var(--gtc-sunken);
}

.gtc .gtc__modes button {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gtc-ink-2);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s var(--gtc-ease), color 0.2s, box-shadow 0.2s;
}

.gtc .gtc__modes button:hover { color: var(--gtc-ink); }

.gtc .gtc__modes button.is-on {
  background: var(--gtc-card);
  color: var(--gtc-brand);
  box-shadow: var(--gtc-sh-sm), 0 2px 8px -3px rgba(67, 56, 202, 0.4);
}

.gtc .gtc__modes button {
  padding: 10px 8px;
  font-size: 13.2px;
  font-weight: 650;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .gtc__modes {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}

/* A field hidden by the mode takes its spacing with it. */
.gtc [data-mf][hidden] { display: none !important; }

/* With the annual increase gone, the return should not sit in half a row. */
.gtc__row--one { grid-template-columns: minmax(0, 1fr) !important; }

/* ==========================================================================
   5. FIELDS
   ========================================================================== */

.gtc__field {
  margin-bottom: 17px;
}

.gtc__field:last-child {
  margin-bottom: 0;
}

.gtc__field > label {
  display: block;
  margin-bottom: 7px;
  color: var(--gtc-ink-2);
  font-size: 12.6px;
  font-weight: 620;
  letter-spacing: 0.01em;
}

.gtc__field.has-error > label {
  color: var(--gtc-bad);
}

.gtc__field.has-error .gtc__ip,
.gtc__field.has-error > select,
.gtc__field.has-error > input[type="text"],
.gtc__field.has-error > input[type="number"],
.gtc__field.has-error > textarea {
  border-color: var(--gtc-bad) !important;
  box-shadow: 0 0 0 3px var(--gtc-bad-soft);
}

.gtc__field-error {
  margin-top: 7px;
  color: var(--gtc-bad);
  font-size: 12.1px;
  font-weight: 600;
  line-height: 1.45;
}

.gtc__validation-summary {
  margin: 0 0 16px;
  padding: 12px 15px;
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-left: 3px solid var(--gtc-bad);
  border-radius: var(--gtc-r);
  background: var(--gtc-bad-soft);
  color: var(--gtc-bad);
  font-size: 13px;
  font-weight: 650;
}

.gtc__validation-summary[hidden] {
  display: none;
}

/* The tax rate fields. Two to a row like .gtc__row, but this block runs to
   several rows and loses fields as the fund category changes, so it is one
   grid that reflows rather than fixed pairs. Fields keep their own bottom
   margin, which is why there is no row gap. */
.gtc__rates {
  display: grid;
  column-gap: 13px;
}

@media (min-width: 560px) {
  .gtc__rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gtc__row,
.gtc__row3 {
  display: grid;
  gap: 13px;
}

@media (min-width: 560px) {
  .gtc__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gtc__row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gtc__ip {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1.5px solid var(--gtc-line);
  border-radius: var(--gtc-r);
  background: var(--gtc-card);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.gtc__ip:focus-within {
  border-color: var(--gtc-brand);
  box-shadow: 0 0 0 4px var(--gtc-brand-ring);
}

.gtc__pre,
.gtc__suf {
  display: flex;
  flex: none;
  align-items: center;
  padding: 0 13px;
  background: var(--gtc-sunken);
  color: var(--gtc-ink-2);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

/* ==========================================================================
   CHART VIEW SWITCH AND RANGE CONTROLS

   Two views, because the chart answers two different questions and one
   picture cannot carry both: Breakdown is what the corpus is made of,
   Range is how far apart a bad run and a good one end up. The rate boxes
   belong to the Range view, so they live in the chart card and appear with
   it — the main form stays short for everyone who never opens this.
   ========================================================================== */

.gtc__viewsw {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: var(--gtc-r);
  background: var(--gtc-sunken);
}

.gtc .gtc__viewsw button {
  padding: 8px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gtc-ink-2);
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 640;
  cursor: pointer;
  transition: background 0.2s var(--gtc-ease), color 0.2s, box-shadow 0.2s;
}

.gtc .gtc__viewsw button:hover { color: var(--gtc-ink); }

.gtc .gtc__viewsw button.is-on {
  background: var(--gtc-card);
  color: var(--gtc-brand);
  box-shadow: var(--gtc-sh-sm), 0 2px 8px -3px rgba(67, 56, 202, 0.4);
}

.gtc__rangebar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 18px;
}

.gtc__rangebar[hidden] { display: none !important; }

/* Each box carries the colour of the line it drives, so the number you type
   and the line it moves are tied together without a legend lookup. */
.gtc__rangebar [data-range="bad"] .gtc__ip { border-color: #b45309; }
.gtc__rangebar [data-range="mid"] .gtc__ip { border-color: #4338ca; }
.gtc__rangebar [data-range="good"] .gtc__ip { border-color: #047857; }

/* Mirrored from Expected return above; editing it there is the single
   source, so it reads rather than invites typing. */
.gtc .gtc__rangebar input[readonly] {
  color: var(--gtc-ink-2) !important;
  cursor: default;
}

@media (max-width: 620px) {
  .gtc__rangebar { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   FIELD HELP  (calculator-help.js)

   A quiet (i) beside a label that cannot carry its own meaning. It sits
   inside the label so it moves with it, and it is a real button — hover
   opens it for pointer users, but the button is what keyboard and touch
   reach for.
   ========================================================================== */

.gtc .gtc__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gtc-muted);
  cursor: help;
  vertical-align: -3px;
  transition: color 0.15s, background 0.15s;
}

.gtc .gtc__info:hover,
.gtc .gtc__info[aria-expanded="true"] {
  background: var(--gtc-brand-soft);
  color: var(--gtc-brand);
}

.gtc__help {
  margin: 0 0 9px;
  padding: 10px 12px;
  border-left: 2px solid var(--gtc-brand);
  border-radius: 0 var(--gtc-r-sm) var(--gtc-r-sm) 0;
  background: var(--gtc-brand-soft);
  color: var(--gtc-ink);
  font-size: 12.3px;
  font-weight: 450;
  line-height: 1.55;
}

.gtc__help[hidden] { display: none !important; }

/* A toggle row is a flex line, so its panel sits after the row rather than
   inside it, and needs the margin the row above has already spent. */
.gtc__help--row { margin: -8px 0 16px; }

/* The calendar year beside a plan-year number is a derived reading, not a
   unit, so it stays quieter than a "years" or "%" affix. */
.gtc__suf--year {
  color: var(--gtc-muted) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

.gtc__pre { border-right: 1px solid var(--gtc-line); }
.gtc__suf { border-left: 1px solid var(--gtc-line); }

/* theme-variables.css sets input/select background and colour site-wide with
   !important, so these must match it to keep control of the field. */
.gtc .gtc__ip input,
.gtc .gtc__field > select,
.gtc .gtc__field > input[type="text"],
.gtc .gtc__field > input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 13px;
  border: 0 !important;
  border-radius: 0;
  background: var(--gtc-card) !important;
  color: var(--gtc-ink) !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.015em;
  outline: none;
  box-shadow: none;
}

.gtc .gtc__field > textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 13px;
  border: 1.5px solid var(--gtc-line) !important;
  border-radius: var(--gtc-r);
  background: var(--gtc-card) !important;
  color: var(--gtc-ink) !important;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.gtc .gtc__field > textarea:focus {
  border-color: var(--gtc-brand) !important;
  box-shadow: 0 0 0 4px var(--gtc-brand-ring);
  outline: none;
}

.gtc .gtc__field > select,
.gtc .gtc__field > input[type="text"],
.gtc .gtc__field > input[type="number"] {
  border: 1.5px solid var(--gtc-line) !important;
  border-radius: var(--gtc-r);
  font-size: 14.5px;
  font-weight: 550;
}

.gtc .gtc__field > select:focus,
.gtc .gtc__field > input:focus {
  border-color: var(--gtc-brand) !important;
  box-shadow: 0 0 0 4px var(--gtc-brand-ring);
}

.gtc .gtc__field > select {
  height: 46px;
  padding: 0 38px 0 13px;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  cursor: pointer;
}

.gtc .gtc__ip input[type="number"]::-webkit-outer-spin-button,
.gtc .gtc__ip input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.gtc .gtc__ip input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.gtc__hint {
  margin-top: 7px;
  color: var(--gtc-muted);
  font-size: 12.1px;
  line-height: 1.5;
}

.gtc__hint:empty {
  display: none;
}

/* ==========================================================================
   6. CONTROLS
   ========================================================================== */

.gtc__chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.gtc__chips-row:empty {
  display: none;
}

.gtc .gtc__chip-btn {
  padding: 7px 14px;
  border: 1.5px solid var(--gtc-line);
  border-radius: var(--gtc-r-pill);
  background: var(--gtc-card);
  color: var(--gtc-ink-2);
  font-family: inherit;
  font-size: 12.6px;
  font-weight: 640;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.18s var(--gtc-spring), background-color 0.18s var(--gtc-spring), box-shadow 0.18s var(--gtc-spring), transform 0.18s var(--gtc-spring);
}

.gtc .gtc__chip-btn:hover {
  border-color: var(--gtc-brand);
  color: var(--gtc-brand);
  transform: translateY(-2px);
}

.gtc .gtc__chip-btn.is-on {
  border-color: transparent;
  background: var(--gtc-grad-txt);
  color: var(--gtc-on-brand);
  box-shadow: 0 6px 16px -6px rgba(67, 56, 202, 0.7);
}

/* Segmented control */
.gtc__seg {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border-radius: var(--gtc-r);
  background: var(--gtc-sunken);
}

.gtc .gtc__seg button {
  padding: 9px 17px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gtc-ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 640;
  cursor: pointer;
  transition: background-color 0.2s var(--gtc-ease), color 0.2s, box-shadow 0.2s;
}

.gtc .gtc__seg button:hover { color: var(--gtc-ink); }

.gtc .gtc__seg button.is-on {
  background: var(--gtc-card);
  color: var(--gtc-brand);
  box-shadow: var(--gtc-sh-sm), 0 2px 8px -3px rgba(67, 56, 202, 0.4);
}

/* Toggle switch */
.gtc__swrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 17px;
}

.gtc__swtxt {
  flex: 1 1 auto;
  color: var(--gtc-ink);
  font-size: 13.6px;
  font-weight: 620;
}

.gtc__swtxt small {
  display: block;
  margin-top: 3px;
  color: var(--gtc-ink-2);
  font-size: 12.1px;
  font-weight: 400;
  line-height: 1.5;
}

.gtc .gtc__sw {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--gtc-r-pill);
  background: var(--gtc-sunken);
  box-shadow: inset 0 0 0 1.5px var(--gtc-line);
  cursor: pointer;
  transition: background 0.25s var(--gtc-ease), box-shadow 0.25s;
}

.gtc .gtc__sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
  transition: transform 0.28s var(--gtc-spring);
}

.gtc .gtc__sw.is-on {
  background: var(--gtc-grad);
  box-shadow: 0 4px 14px -4px rgba(67, 56, 202, 0.7);
}

.gtc .gtc__sw.is-on::after {
  transform: translateX(20px);
}

/* Preset / residency / scenario pickers — one row of buttons acting as a
   radio group. */
.gtc__presets,
.gtc__resid,
.gtc__scen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

/* The loan presets sit directly above a labelled field, so they take the
   same space below them that one field leaves for the next. */
.gtc__presets { margin-bottom: 17px; }

@media (min-width: 560px) {
  .gtc__presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gtc__resid,
  .gtc__scen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gtc .gtc__preset,
.gtc .gtc__resid button,
.gtc .gtc__scen button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 74px;
  padding: 13px 9px;
  border: 1.5px solid var(--gtc-line);
  border-radius: var(--gtc-r);
  background: var(--gtc-card);
  color: var(--gtc-ink-2);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s var(--gtc-spring), background-color 0.2s var(--gtc-spring), box-shadow 0.2s var(--gtc-spring), transform 0.2s var(--gtc-spring);
}

.gtc .gtc__preset:hover,
.gtc .gtc__resid button:hover,
.gtc .gtc__scen button:hover {
  border-color: var(--gtc-brand);
  transform: translateY(-3px);
  box-shadow: var(--gtc-sh);
}

.gtc .gtc__preset.is-on,
.gtc .gtc__resid button.is-on,
.gtc .gtc__scen button.is-on {
  border-color: transparent;
  background: var(--gtc-brand-soft);
  box-shadow: var(--gtc-glow);
}

.gtc__preset-ico {
  font-size: 23px;
  line-height: 1;
  transition: transform 0.25s var(--gtc-spring);
}

.gtc .gtc__preset:hover .gtc__preset-ico {
  transform: scale(1.16) rotate(-4deg);
}

.gtc__preset-nm,
.gtc__resid-nm,
.gtc__scen-nm {
  color: var(--gtc-ink);
  font-size: 13px;
  font-weight: 660;
}

.gtc__resid-sub,
.gtc__scen-sub {
  color: var(--gtc-ink-2);
  font-size: 11.4px;
  font-weight: 400;
  line-height: 1.4;
}

.gtc .gtc__preset.is-on .gtc__preset-nm,
.gtc .gtc__resid button.is-on .gtc__resid-nm,
.gtc .gtc__scen button.is-on .gtc__scen-nm {
  color: var(--gtc-brand);
}

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.gtc .gtc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 19px;
  border: 1.5px solid transparent;
  border-radius: var(--gtc-r);
  background: var(--gtc-grad-txt);
  color: var(--gtc-on-brand);
  font-family: inherit;
  font-size: 13.4px;
  font-weight: 660;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--gtc-spring), box-shadow 0.2s, filter 0.2s;
}

.gtc .gtc__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(67, 56, 202, 0.65);
  filter: saturate(1.15);
}

.gtc .gtc__btn:active {
  transform: translateY(0) scale(0.98);
}

.gtc .gtc__btn--s {
  border-color: var(--gtc-line);
  background: var(--gtc-card);
  color: var(--gtc-ink);
}

.gtc .gtc__btn--s:hover {
  border-color: var(--gtc-brand);
  color: var(--gtc-brand);
  box-shadow: var(--gtc-sh);
  filter: none;
}

.gtc .gtc__btn--sm {
  padding: 8px 14px;
  font-size: 12.5px;
}

.gtc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

/* One visible focus treatment for every control in the widget. */
.gtc button:focus-visible,
.gtc a:focus-visible,
.gtc select:focus-visible,
.gtc input:focus-visible {
  outline: 2.5px solid var(--gtc-brand);
  outline-offset: 3px;
}

/* ==========================================================================
   8. KEY / VALUE READOUTS
   ========================================================================== */

.gtc__split,
.gtc__tds {
  margin-top: 16px;
  padding: 17px 18px;
  border: 1px solid var(--gtc-line);
  border-radius: var(--gtc-r-lg);
  background: var(--gtc-bg);
}

.gtc__tds {
  position: relative;
  overflow: hidden;
  border-left: 0;
}

/* Gradient rail rather than a flat 3px border. */
.gtc__tds::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--gtc-grad);
}

.gtc__tds-hd {
  margin-bottom: 12px;
  color: var(--gtc-ink);
  font-size: 13.6px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gtc__split-row,
.gtc__tds-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 0;
}

.gtc__split-row + .gtc__split-row,
.gtc__tds-row + .gtc__tds-row {
  border-top: 1px solid var(--gtc-line);
}

.gtc__split-row--total,
.gtc__tds-row--total {
  margin-top: 4px;
  border-top: 2px solid var(--gtc-line) !important;
  font-weight: 700;
}

.gtc__k {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--gtc-ink-2);
  font-size: 13px;
}

.gtc__v {
  flex: none;
  color: var(--gtc-ink);
  font-size: 14px;
  font-weight: 680;
  letter-spacing: -0.015em;
  text-align: right;
}

.gtc__v-ok { color: var(--gtc-ok-txt); }
.gtc__v-bad { color: var(--gtc-bad); }
.gtc__v-brand { color: var(--gtc-brand); }

.gtc__split-row--total .gtc__k,
.gtc__tds-row--total .gtc__k {
  color: var(--gtc-ink);
  font-weight: 680;
}

.gtc__split-row--total .gtc__v,
.gtc__tds-row--total .gtc__v {
  font-size: 17px;
}

/* ==========================================================================
   9. NOTICES
   ========================================================================== */

.gtc__notice {
  margin-top: 13px;
  padding: 14px 16px;
  border: 1px solid var(--gtc-line);
  border-left: 3px solid var(--gtc-ink-2);
  border-radius: var(--gtc-r);
  background: var(--gtc-sunken);
  color: var(--gtc-ink);
  font-size: 12.9px;
  line-height: 1.6;
}

.gtc__notice:first-child { margin-top: 0; }

.gtc__notice b { font-weight: 690; }

.gtc__notice--info {
  border-color: var(--gtc-brand-ring);
  border-left-color: var(--gtc-brand);
  background: var(--gtc-brand-soft);
}

.gtc__notice--warn {
  border-color: rgba(180, 83, 9, 0.25);
  border-left-color: var(--gtc-warn);
  background: var(--gtc-warn-soft);
}

.gtc__notice--bad {
  border-color: rgba(220, 38, 38, 0.25);
  border-left-color: var(--gtc-bad);
  background: var(--gtc-bad-soft);
}

.gtc__notice--mute {
  border-left-color: var(--gtc-line);
  background: var(--gtc-bg);
  color: var(--gtc-ink-2);
}

/* Chart.js owns the canvas box. With responsive:true and
   maintainAspectRatio:false it measures the position:relative parent and
   writes the canvas width/height itself, so any CSS on the canvas — and
   especially !important — fights it and can leave the plot unrendered.
   Size the wrapper, never the canvas. */

/* ==========================================================================
   10. CHARTS
   ========================================================================== */

.gtc__charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 18px;
}

@media (min-width: 720px) {
  .gtc__charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gtc__chart h4 {
  margin: 0 0 12px;
  color: var(--gtc-ink);
  font-family: var(--gtc-font);
  font-size: 13.4px;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.gtc__canvas {
  position: relative;
  height: 236px;
}


/* ==========================================================================
   11. TABLES

   A 30-year amortisation schedule is 30 rows of six figures. Ruled boxes
   make that read as a printout; the weight goes into the numbers instead —
   hairline row separation, a tinted band every other row, and the period
   column frozen so it stays readable while the figures scroll sideways.
   ========================================================================== */

.gtc__tblwrap {
  position: relative;
  max-height: 460px;
  margin-top: 12px;
  overflow: auto;
  border: 1px solid var(--gtc-line);
  border-radius: var(--gtc-r-lg);
  background: var(--gtc-card);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.gtc__tblwrap table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

/* bootstrap.css:2962 sets `th { text-align: left }` globally; figures need to
   sit right so they line up with their values. */
.gtc__tblwrap th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--gtc-line);
  background: var(--gtc-card);
  color: var(--gtc-ink-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.gtc__tblwrap th:first-child {
  left: 0;
  z-index: 3;
  text-align: left;
}

.gtc__tblwrap td {
  padding: 11px 14px;
  border: 0;
  color: var(--gtc-ink);
  font-weight: 550;
  text-align: right;
  white-space: nowrap;
}

/* The period column stays put while the figures scroll under it. */
.gtc__tblwrap td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
  color: var(--gtc-ink-2);
  font-weight: 660;
  text-align: left;
}

.gtc__tblwrap tbody tr {
  background: var(--gtc-card);
  transition: background 0.12s;
}

.gtc__tblwrap tbody tr:nth-child(even) {
  background: var(--gtc-bg);
}

.gtc__tblwrap tbody tr:hover {
  background: var(--gtc-brand-soft);
}

/* Row states set by the engines. Kept as backgrounds on the row rather than
   the cells, so the frozen first column inherits them too. */
.gtc__tblwrap tbody tr.gtc__row-draw,
.gtc__tblwrap tbody tr.gtc__row-draw:nth-child(even) {
  background: rgba(99, 102, 241, 0.1);
}

.gtc__tblwrap tbody tr.gtc__row-prepay,
.gtc__tblwrap tbody tr.gtc__row-prepay:nth-child(even) {
  background: var(--gtc-ok-soft);
}

.gtc__tblwrap tbody tr.gtc__row-dead,
.gtc__tblwrap tbody tr.gtc__row-dead:nth-child(even) {
  background: var(--gtc-bad-soft);
}

.gtc__tblwrap tbody tr.gtc__row-dead td {
  color: var(--gtc-bad);
}

/* ==========================================================================
   12. REPEATING ITEMS (goals, top-ups, prepayments)
   ========================================================================== */

.gtc__item {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 1px solid var(--gtc-line);
  border-radius: var(--gtc-r);
  background: var(--gtc-bg);
  transition: border-color 0.15s, transform 0.15s var(--gtc-spring);
}

.gtc__item:hover {
  border-color: var(--gtc-brand-ring);
  transform: translateX(2px);
}

.gtc__item-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--gtc-ink);
  font-size: 13.4px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gtc__item-tag {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--gtc-r-pill);
  background: var(--gtc-brand-soft);
  color: var(--gtc-brand);
  font-size: 11.2px;
  font-weight: 660;
}

.gtc__item-amt {
  flex: none;
  color: var(--gtc-ink);
  font-size: 13.6px;
  font-weight: 700;
}

.gtc .gtc__item-x {
  flex: none;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gtc-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s var(--gtc-spring), color 0.18s, transform 0.18s var(--gtc-spring);
}

.gtc .gtc__item-x:hover {
  background: var(--gtc-bad);
  color: #fff;
  transform: rotate(90deg);
}

.gtc__empty {
  padding: 22px;
  border: 1.5px dashed var(--gtc-line);
  border-radius: var(--gtc-r);
  color: var(--gtc-muted);
  font-size: 12.8px;
  text-align: center;
}

/* ==========================================================================
   11b. CHART LEGEND AND THE OPTIONS BLOCK

   Chart.js draws its legend inside the canvas, where it reads as part of the
   plot and cannot be styled with the page. calculator-charts.js renders it
   here instead, as chips carrying the series colour, name and latest value,
   each clickable to isolate a series.
   ========================================================================== */

.gtc__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.gtc__legend:empty { display: none; }

.gtc .gtc__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 11px;
  border: 1.5px solid var(--gtc-line);
  border-radius: var(--gtc-r-pill);
  background: var(--gtc-card);
  color: var(--gtc-ink-2);
  font-family: inherit;
  font-size: 12.6px;
  font-weight: 620;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.18s var(--gtc-spring), background-color 0.18s var(--gtc-spring), box-shadow 0.18s var(--gtc-spring), transform 0.18s var(--gtc-spring);
}

.gtc .gtc__legend-item:hover {
  border-color: var(--gtc-brand-ring);
  transform: translateY(-1px);
  box-shadow: var(--gtc-sh);
}

/* Clicking a chip hides that series; the chip goes quiet to match. */
.gtc .gtc__legend-item.is-off {
  opacity: 0.45;
  background: var(--gtc-sunken);
}

.gtc .gtc__legend-item.is-off .gtc__legend-val { text-decoration: line-through; }

.gtc__legend-dot {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  background: var(--dot, var(--gtc-brand));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, #4338ca) 18%, transparent);
}

/* The dashed series is a reference line, so its key reads as one. */
.gtc__legend-dot.is-dashed {
  border-radius: 2px;
  height: 4px;
  width: 14px;
  background: repeating-linear-gradient(90deg,
    var(--dot, var(--gtc-brand)) 0 4px, transparent 4px 7px);
  box-shadow: none;
}

.gtc__legend-nm { color: var(--gtc-ink-2); }

.gtc__legend-val {
  color: var(--gtc-ink);
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* The options block sits below the chart: basics, then result, then refine. */
.gtc__options-hd {
  margin: 26px 0 4px;
}

.gtc__options-nm {
  margin: 0;
  color: var(--gtc-ink);
  font-family: var(--gtc-font);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.gtc__options-sub {
  margin: 3px 0 0;
  color: var(--gtc-ink-2);
  font-size: 13px;
}

/* The withdrawal outcome, stated inside the withdrawals section. It carries
   the weight the result card carries for the accumulation figure, because it
   is the answer to this section's question — but it is a panel, not the
   headline, so it stays inside the card rather than becoming a second one. */
.gtc__swout {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--gtc-line);
  border-radius: var(--gtc-r);
  background: var(--gtc-sunken);
}

.gtc__swout[hidden] { display: none !important; }

.gtc__swout-hd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  justify-content: space-between;
}

.gtc__swout-lbl {
  color: var(--gtc-ink-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gtc__swout-val {
  font-family: var(--gtc-font);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.03em;
}

.gtc__swout-val--ok { color: var(--gtc-ok); }
.gtc__swout-val--warn { color: var(--gtc-warn); }
.gtc__swout-val--bad { color: var(--gtc-bad); }

.gtc__swout-sub {
  margin: 8px 0 0;
  color: var(--gtc-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

.gtc__swout-sub b { color: var(--gtc-ink); }

/* The result card's own note that it is not counting withdrawals. Quiet, but
   not so quiet it reads as a footnote — it changes what the number above it
   means. */
.gtc__hero-swp {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--gtc-r-sm);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(214, 222, 245, 0.86);
  font-size: 12.4px;
  line-height: 1.5;
}

.gtc__hero-swp[hidden] { display: none !important; }
.gtc__hero-swp b { color: #fff; }

/* ==========================================================================
   12b. OPTION SECTIONS  (investment planner only — see calculator-sections.js)

   Seven equal accordions became three named groups. They were tabs first,
   which hid two thirds of the options behind a category label and made
   "what else can this do?" a three-click question; now they stack, and each
   carries a sentence saying what it is for.
   ========================================================================== */

.gtc__optsec {
  margin: 18px 0 0;
  padding: 20px 20px 6px;
  border: 1px solid var(--gtc-line);
  border-radius: var(--gtc-r-lg);
  background: var(--gtc-card);
}

.gtc__optsec-hd {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 16px;
}

/* The number is the only thing carrying the sense of a sequence to work
   through, which is what the tab bar failed to give. */
.gtc__optsec-no {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gtc-sunken);
  color: var(--gtc-ink-2);
  font-size: 12.5px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

/* line-height matches the number's 26px circle so the two sit on the same
   line — the theme gives h4 its own margin and leading, which pushed the
   heading a full row below the number it belongs to. */
.gtc .gtc__optsec-nm {
  margin: 0;
  color: var(--gtc-ink);
  font-family: var(--gtc-font);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.02em;
}

.gtc__optsec-blurb {
  max-width: 68ch;
  margin: 5px 0 0;
  color: var(--gtc-ink-2);
  font-size: 13px;
  line-height: 1.55;
}

/* The panels are already inside a card, so they drop their own outer edge
   and read as rows of this one rather than cards within a card. */
.gtc__optsec-body > .gtc__disc {
  border-radius: var(--gtc-r);
}

.gtc__optsec-body > .gtc__disc:last-child { margin-bottom: 14px; }

@media (max-width: 460px) {
  .gtc__optsec { padding: 16px 14px 4px; }
  .gtc__optsec-hd { gap: 10px; }
}

/* ==========================================================================
   13. MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .gtc *,
  .gtc *::before,
  .gtc *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .gtc__hero-res::before,
  .gtc__bar-gro::after {
    animation: none !important;
  }

  .gtc .gtc__preset:hover,
  .gtc .gtc__btn:hover,
  .gtc .gtc__chip-btn:hover,
  .gtc .gtc__item:hover,
  .gtc .gtc__resid button:hover,
  .gtc .gtc__scen button:hover {
    transform: none;
  }

  .gtc .gtc__item-x:hover { transform: none; }
}


/* ==========================================================================
   19. PER-SECTION CHARTS

   Every option section draws its own chart, inside itself, answering its own
   question. The styling has one job beyond looking tidy: make it unmistakable
   that the picture belongs to the section it sits in, and not to the big
   chart further up the page. Hence the rule above it and the inset ground —
   it reads as this section's answer, not as another floating panel.
   ========================================================================== */

.gtc__pchart {
  margin: 20px -4px 0;
  padding: 16px 14px 14px;
  border-top: 1px solid var(--gtc-line);
  border-radius: 0 0 12px 12px;
  background: var(--gtc-sunken);
}

.gtc__pchart[hidden] { display: none; }

.gtc__pchart-nm {
  margin: 0 0 4px;
  color: var(--gtc-ink);
  font-family: var(--gtc-font);
  font-size: 13.4px;
  font-weight: 680;
  letter-spacing: -0.01em;
}

/* Shown instead of the canvas when the section has nothing to draw yet —
   no goals added, tax switched off. Two identical lines would be worse than
   a sentence saying what to do to make the chart mean something. */
.gtc__pchart-note {
  margin: 8px 0 0;
  color: var(--gtc-ink-2);
  font-size: 12.6px;
  line-height: 1.55;
}

.gtc__pcanvas {
  position: relative;
  height: 250px;
  margin-top: 10px;
}

/* Ring on the left, its figures on the right, stacked on a narrow panel.
   The ring is given a fixed basis rather than a share of the row so it stays
   circular while the list takes whatever is left. */
.gtc__pwrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
}

.gtc__pwrap > .gtc__pcanvas {
  flex: 0 1 250px;
  min-width: 190px;
}

.gtc__pstats {
  flex: 1 1 240px;
  min-width: 210px;
}

.gtc__pstats[hidden] { display: none !important; }

.gtc__pstat {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--gtc-line);
  font-size: 13px;
}

.gtc__pstat:last-child { border-bottom: 0; }

/* The row that is not a slice of the ring but the sum of the ones that are. */
.gtc__pstat.is-total {
  margin-top: 4px;
  padding-top: 11px;
  border-top: 1.5px solid var(--gtc-line);
  border-bottom: 0;
}

.gtc__pstat-nm {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--gtc-ink-2);
}

.gtc__pstat.is-total .gtc__pstat-nm {
  color: var(--gtc-ink);
  font-weight: 680;
}

.gtc__pstat-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateY(-1px);
}

.gtc__pstat-v {
  color: var(--gtc-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  text-align: right;
  white-space: nowrap;
}

.gtc__pstat.is-total .gtc__pstat-v { font-size: 15px; }

/* The share is a second reading of the same row, so it sits under the money
   rather than competing with it. */
.gtc__pstat-v small {
  display: block;
  margin-top: 1px;
  color: var(--gtc-muted);
  font-size: 11px;
  font-weight: 600;
}

/* The figure the chart is there to deliver, written out. A reader who does
   not want to trace a line still gets the answer. */
.gtc__pchart-cap {
  margin: 10px 0 0;
  color: var(--gtc-ink-2);
  font-size: 12.6px;
  line-height: 1.55;
}

.gtc__pchart-cap:empty { display: none; }
.gtc__pchart-cap b { color: var(--gtc-ink); font-weight: 680; }

@media (max-width: 560px) {
  .gtc__pcanvas { height: 210px; }
}