/* ==========================================================================
   Gyanteilen calculators — comparison blocks, theme reconciliation, print (v2)

   Loaded after investment-calculator.css by every calculator shortcode.
   Three jobs:

     1. The comparison components the engines build at runtime (NRO vs NRE,
        prepay vs invest, the scenario bands, the tax rule card).
     2. Winning back control from theme-variables.css, which styles bare
        button, input, select, p, a and h1-h6 site-wide with !important.
        Specificity alone loses to !important, so the rules in §2 are
        !important too — deliberately, not by habit.
     3. Print, which has to undo the dark result panel.
   ========================================================================== */

/* ==========================================================================
   1a. SIDE-BY-SIDE COMPARISON CARDS
   ========================================================================== */

.gtc__vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}

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

.gtc .gtc__vs-card {
  position: relative;
  overflow: hidden;
  padding: 19px;
  border: 1.5px solid var(--gtc-line);
  border-radius: var(--gtc-r-lg);
  background: var(--gtc-card);
  text-align: left;
  transition: border-color 0.22s var(--gtc-spring), background-color 0.22s var(--gtc-spring), box-shadow 0.22s var(--gtc-spring), transform 0.22s var(--gtc-spring);
}

/* Some of these are buttons (loan strategy), some plain divs (NRO vs NRE). */
.gtc button.gtc__vs-card {
  width: 100%;
  font-family: inherit;
  cursor: pointer;
}

.gtc button.gtc__vs-card:hover {
  border-color: var(--gtc-brand);
  transform: translateY(-3px);
  box-shadow: var(--gtc-sh-lg);
}

.gtc .gtc__vs-card.is-on {
  border-color: transparent;
  background: var(--gtc-brand-soft);
  box-shadow: var(--gtc-glow);
}

/* A gradient rail on the selected card, so selection reads instantly at a
   glance rather than as a slightly different border. */
.gtc .gtc__vs-card.is-on::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--gtc-grad);
}

.gtc__vs-hd {
  color: var(--gtc-ink-2);
  font-size: 11.6px;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gtc__vs-big {
  margin-top: 7px;
  color: var(--gtc-ink);
  font-size: 27px;
  font-weight: 780;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.gtc__vs-sub {
  margin-top: 7px;
  color: var(--gtc-ink-2);
  font-size: 12.4px;
  line-height: 1.55;
}

.gtc__vs-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 11px;
  border-radius: var(--gtc-r-pill);
  background: var(--gtc-grad-txt);
  color: var(--gtc-on-brand);
  font-size: 11.2px;
  font-weight: 660;
}

/* ==========================================================================
   1b. VERDICT
   ========================================================================== */

.gtc__verdict {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 19px 20px;
  border: 1px solid var(--gtc-line);
  border-radius: var(--gtc-r-lg);
  background: var(--gtc-bg);
  font-size: 13.2px;
  line-height: 1.62;
}

.gtc__verdict::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--gtc-ink-2);
}

.gtc__verdict-hd {
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -0.025em;
}

.gtc__verdict--invest {
  border-color: var(--gtc-brand-ring);
  background: var(--gtc-brand-soft);
}

.gtc__verdict--invest::before { background: var(--gtc-grad); }
.gtc__verdict--invest .gtc__verdict-hd { color: var(--gtc-brand); }

.gtc__verdict--prepay {
  border-color: rgba(5, 150, 105, 0.3);
  background: var(--gtc-ok-soft);
}

.gtc__verdict--prepay::before { background: linear-gradient(180deg, #059669, #34d399); }
.gtc__verdict--prepay .gtc__verdict-hd { color: var(--gtc-ok-txt); }

.gtc__verdict--close {
  border-color: rgba(180, 83, 9, 0.3);
  background: var(--gtc-warn-soft);
}

.gtc__verdict--close::before { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
.gtc__verdict--close .gtc__verdict-hd { color: var(--gtc-warn); }

/* ==========================================================================
   1c. SAVINGS STRIP
   ========================================================================== */

.gtc__saved {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid rgba(5, 150, 105, 0.3);
  border-radius: var(--gtc-r-lg);
  background: var(--gtc-ok-soft);
}

.gtc__saved::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -14%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5, 150, 105, 0.22), transparent 68%);
  pointer-events: none;
}

.gtc__saved-lbl {
  color: var(--gtc-ink-2);
  font-size: 11.6px;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gtc__saved-val {
  margin-top: 5px;
  color: var(--gtc-ok-txt);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.gtc__saved-note {
  margin-top: 6px;
  color: var(--gtc-ink-2);
  font-size: 12.4px;
  line-height: 1.55;
}

/* ==========================================================================
   1d. SCENARIO BANDS
   ========================================================================== */

.gtc__band-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1.5px solid transparent;
  border-radius: var(--gtc-r);
  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__band-row + .gtc__band-row { margin-top: 5px; }

.gtc__band-row:hover { background: var(--gtc-sunken); }

.gtc__band-row.is-active {
  border-color: transparent;
  background: var(--gtc-brand-soft);
  box-shadow: var(--gtc-glow);
}

.gtc__band-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gtc-ink-2);
  transition: background-color 0.18s, color 0.18s, transform 0.18s;
}

.gtc__band-row.is-active .gtc__band-dot {
  background: var(--gtc-grad);
  box-shadow: 0 0 0 4px var(--gtc-brand-soft);
}

.gtc__band-nm {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--gtc-ink);
  font-size: 13.2px;
  font-weight: 620;
}

.gtc__band-val {
  flex: none;
  color: var(--gtc-ink);
  font-size: 13.8px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ==========================================================================
   1e. TAX RULE CARD
   ========================================================================== */

.gtc__rules {
  margin-top: 16px;
  padding: 17px 18px;
  border: 1.5px dashed var(--gtc-line);
  border-radius: var(--gtc-r-lg);
  background: var(--gtc-bg);
}

.gtc__rules-hd {
  margin-bottom: 10px;
  color: var(--gtc-ink);
  font-size: 13.2px;
  font-weight: 700;
}

.gtc__rules-ln {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  padding: 7px 0;
  border-top: 1px solid var(--gtc-line);
  font-size: 12.8px;
}

.gtc__rules-ln:first-of-type { border-top: 0; }

.gtc__rules-ln span { color: var(--gtc-ink-2); }

.gtc__rules-ln b {
  color: var(--gtc-ink);
  font-weight: 680;
  white-space: nowrap;
}

.gtc__rules-src {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--gtc-line);
  color: var(--gtc-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ==========================================================================
   2. THEME RECONCILIATION

   theme-variables.css styles bare elements site-wide with !important:

     input, textarea, select      { background-color / color }
     [data-theme="dark"] button   { background / border-color / color }
     [data-theme="dark"] a        { color }
     [data-theme="dark"] p        { color }
     [data-theme="dark"] h1-h6    { color }
     [data-theme="dark"] ul,ol,li { color }

   Sensible for post content; inside the widget it flattens every chip,
   toggle and preset into one solid blue. These take the widget back, scoped
   under .gtc so no post content is affected.
   ========================================================================== */

/* :not([class]) matters. This has to beat theme-variables.css, which sets a
   post-content colour on every p/li/ul/ol under [data-theme="dark"], so it
   carries !important — and without the guard that !important also beat the
   widget's OWN paragraph rules. Every muted caption in the planner went black
   on a near-black panel in dark mode: the per-section blurbs, the caption
   under each panel chart, and the "nothing to draw yet" note. The blanket
   rule is only needed for bare elements; anything the widget has classed
   already states its own colour and should keep it. */
[data-theme="dark"] .gtc p:not([class]),
[data-theme="dark"] .gtc li:not([class]),
[data-theme="dark"] .gtc ul:not([class]),
[data-theme="dark"] .gtc ol:not([class]) {
  color: inherit !important;
}

[data-theme="dark"] .gtc__hero p { color: var(--gtc-ink-2) !important; }

[data-theme="dark"] .gtc h2,
[data-theme="dark"] .gtc h3,
[data-theme="dark"] .gtc h4 {
  color: var(--gtc-ink) !important;
}

[data-theme="dark"] .gtc a { color: var(--gtc-brand) !important; }

/* Buttons — neutral base, then each variant re-asserted. */
[data-theme="dark"] .gtc button {
  background: transparent !important;
  border-color: var(--gtc-line) !important;
  color: var(--gtc-ink) !important;
}

[data-theme="dark"] .gtc .gtc__btn {
  background: var(--gtc-grad-txt) !important;
  border-color: transparent !important;
  color: var(--gtc-on-brand) !important;
}

[data-theme="dark"] .gtc .gtc__btn--s {
  background: var(--gtc-card) !important;
  border-color: var(--gtc-line) !important;
  color: var(--gtc-ink) !important;
}

[data-theme="dark"] .gtc .gtc__btn--s:hover {
  border-color: var(--gtc-brand) !important;
  color: var(--gtc-brand) !important;
}

/* The result panel is dark in both themes, so its buttons keep the
   translucent treatment rather than the light-card one above. */
[data-theme="dark"] .gtc .gtc__hero-acts .gtc__btn--s {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

[data-theme="dark"] .gtc .gtc__hero-acts .gtc__btn--s:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  color: #fff !important;
}

[data-theme="dark"] .gtc .gtc__chip-btn {
  background: var(--gtc-card) !important;
  border-color: var(--gtc-line) !important;
  color: var(--gtc-ink-2) !important;
}

[data-theme="dark"] .gtc .gtc__chip-btn.is-on {
  background: var(--gtc-grad-txt) !important;
  border-color: transparent !important;
  color: var(--gtc-on-brand) !important;
}

[data-theme="dark"] .gtc .gtc__seg button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gtc-ink-2) !important;
}

/* SELECTION IN DARK MODE NEEDS AN EDGE, NOT A FILL.
   
   In light mode a selected segment is a white pill on a grey track: 1.3:1
   of surface difference, but the eye reads it instantly because white
   against grey is a familiar figure/ground. Dark mode has no equivalent —
   the pill was --gtc-card (#0e1426) on a track that composites to
   rgb(23,31,53), which measures 1.12:1. Invisible, and no amount of tint
   fixes it: even a heavy 26% brand wash only reaches 1.35:1.
   
   So the contrast comes from a ring in the brand colour, which clears 5:1
   against the track on its own. The tint and the brighter label are
   supporting; the ring is what makes the selection findable. */
[data-theme="dark"] .gtc .gtc__modes button,
[data-theme="dark"] .gtc .gtc__seg button,
[data-theme="dark"] .gtc .gtc__viewsw button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gtc-ink-2) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .gtc .gtc__modes button.is-on,
[data-theme="dark"] .gtc .gtc__seg button.is-on,
[data-theme="dark"] .gtc .gtc__viewsw button.is-on {
  background: rgba(129, 140, 248, 0.18) !important;
  color: #a5b4fc !important;
  box-shadow: inset 0 0 0 1.5px var(--gtc-brand) !important;
}

[data-theme="dark"] .gtc .gtc__sw {
  background: var(--gtc-sunken) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .gtc .gtc__sw.is-on {
  background: var(--gtc-grad) !important;
}

[data-theme="dark"] .gtc .gtc__preset,
[data-theme="dark"] .gtc .gtc__resid button,
[data-theme="dark"] .gtc .gtc__scen button,
[data-theme="dark"] .gtc button.gtc__vs-card {
  background: var(--gtc-card) !important;
  border-color: var(--gtc-line) !important;
}

[data-theme="dark"] .gtc .gtc__preset.is-on,
[data-theme="dark"] .gtc .gtc__resid button.is-on,
[data-theme="dark"] .gtc .gtc__scen button.is-on,
[data-theme="dark"] .gtc button.gtc__vs-card.is-on {
  background: var(--gtc-brand-soft) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .gtc .gtc__disc-head {
  background: transparent !important;
  border-color: transparent !important;
}

[data-theme="dark"] .gtc .gtc__disc-head:hover {
  background: var(--gtc-sunken) !important;
}

/* The not-ready state must survive the blanket button override above.
   is-update is excluded: that is the running state, which is a live control
   and must not be painted in the same muted grey as "you cannot press this
   yet". #818cf8 on the dark card is 6.1:1, so the brand ink clears AA. */
[data-theme="dark"] .gtc .gtc__go-btn:not(.is-ready):not(.is-update) {
  background: var(--gtc-sunken) !important;
  color: var(--gtc-muted) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .gtc .gtc__go-btn.is-update {
  background: transparent !important;
  color: var(--gtc-brand) !important;
  border-color: var(--gtc-brand-ring) !important;
}

[data-theme="dark"] .gtc .gtc__go-btn.is-update:hover {
  background: var(--gtc-brand-soft) !important;
  border-color: var(--gtc-brand) !important;
}

[data-theme="dark"] .gtc .gtc__go-btn.is-ready {
  background: var(--gtc-grad-txt) !important;
  color: var(--gtc-on-brand) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .gtc .gtc__info {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gtc-muted) !important;
}

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

[data-theme="dark"] .gtc .gtc__item-x {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gtc-muted) !important;
}

[data-theme="dark"] .gtc .gtc__item-x:hover {
  background: var(--gtc-bad) !important;
  color: #fff !important;
}

/* Sit on coloured ground in both themes, so they keep a fixed pairing. */
[data-theme="dark"] .gtc .gtc__sw::after { background: #fff; }
[data-theme="dark"] .gtc .gtc__disc.is-open .gtc__disc-plus,
[data-theme="dark"] .gtc .gtc__disc-tag {
  background: var(--gtc-grad-txt) !important;
  color: var(--gtc-on-brand) !important;
}

/* ==========================================================================
   2b. LOAN — THE YEARLY SPLIT CARD

   Both live in the loan calculator's left column, stacked with .gtc__lvl1
   (the input card) and the .gtc__disc accordions. Those two disagreed about
   spacing — 22px padding and 14px margin on one, 10px margin on the other —
   so anything added between them read as misaligned. Everything here is
   pinned to .gtc__lvl1's geometry: same 22px padding, same border, same
   radius, same 16px/720 heading with the gradient tick, and a single 14px
   rhythm down the column.
   ========================================================================== */

/* Amount, month, year, Add — four controls that belong on one line. Stacks
   on a phone like the other row helpers, and the Add button keeps its own
   narrow column so it does not stretch to a quarter of the row. */
.gtc__row4 {
  display: grid;
  gap: 13px;
}

@media (min-width: 620px) {
  .gtc__row4 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) auto; }
}

/* ---- Where each year's payment goes ---- */

/* Full width, outside .gtc__planner — same bracket as .gtc__trend below it,
   so the two charts line up with each other and with the planner's edges. */
.gtc__split {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid var(--gtc-line);
  border-radius: var(--gtc-r-lg);
  background: var(--gtc-card);
  box-shadow: var(--gtc-sh);
}

.gtc__split-hd { margin-bottom: 16px; }

/* Matches .gtc__lvl1-hd exactly, tick included: this card is a peer of the
   input card above it, not a caption hanging off it. */
.gtc__split-nm {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--gtc-ink);
  font-family: var(--gtc-font);
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.gtc__split-nm::before {
  content: "";
  flex: none;
  width: 4px;
  height: 17px;
  border-radius: var(--gtc-r-pill);
  background: var(--gtc-grad);
}

/* Indented to clear the tick, so the sub-line starts on the heading's text
   rather than on the tick itself. */
.gtc__split-sub {
  margin: 5px 0 0 13px;
  color: var(--gtc-ink-2);
  font-size: 12.6px;
  line-height: 1.45;
}

/* Taller than the in-panel .gtc__canvas (236px): these are stacked bars
   across up to 30 years, and the shorter box squashed the early-year
   interest block to where the split stopped being legible. */
.gtc__canvas--split { height: 300px; }

@media (min-width: 900px) {
  /* Matches .gtc__trend-chart, the other full-width chart on this page. Both
     are read the same way — scan across the years — so they get the same
     box rather than each being tuned on its own. */
  .gtc__canvas--split { height: 360px; }
}

/* One chart left in the breakdown now that the split moved out, so the
   two-column grid would otherwise strand it at half width. */
.gtc__charts--one { grid-template-columns: minmax(0, 1fr) !important; }


/* ==========================================================================
   3. PRINT

   The "Print / save as PDF" button was removed (18 Oct 2026) — the share
   link and the Excel download cover sharing and keeping a record — but a reader can
   still press Ctrl+P, so the page should not print as a mess.
   One column, every panel forced open, no interactive chrome — and the
   result panel converted back to ink on white, since a full-bleed dark
   gradient is unusable on paper.
   ========================================================================== */

@media print {
  .gtc {
    width: auto !important;
    margin: 0 !important;
    color: #000;
    font-size: 11pt;
  }

  .gtc__no-print,
  .gtc__hero-acts,
  .gtc__actions,
  .gtc__chips-row {
    display: none !important;
  }

  .gtc__planner { display: block !important; }

  .gtc__col-res {
    position: static !important;
    margin-bottom: 18px;
  }

  /* Undo the spotlight panel for paper. */
  .gtc__hero-res {
    padding: 16px !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #000 !important;
  }

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

  .gtc__hero-lbl,
  .gtc__hero-sub,
  .gtc__hero-real,
  .gtc__hero-warn,
  .gtc__bar-key-item {
    color: #444 !important;
  }

  .gtc__hero-val,
  .gtc__bar-key-item b {
    color: #000 !important;
  }

  .gtc__insight {
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #000 !important;
  }

  /* Print the whole thing, including panels left closed. */
  .gtc__disc-body {
    display: block !important;
    animation: none !important;
  }

  .gtc__disc-plus { display: none !important; }

  .gtc__lvl1,
  .gtc__disc,
  .gtc__trend,
  .gtc__vs-card,
  .gtc__verdict,
  .gtc__saved,
  .gtc__tds,
  .gtc__split,
  .gtc__rules,
  .gtc__chart,
  .gtc__tblwrap {
    border-color: #ccc !important;
    background: #fff !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .gtc__charts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ...except where only one chart is left, which would otherwise print at
     half width with an empty column beside it. */
  .gtc__charts--one {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gtc__split {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* A long amortisation table is the one thing that must be allowed to
     break, or a 30-year loan prints as one overflowing block. */
  .gtc__tblwrap {
    max-height: none !important;
    overflow: visible !important;
    break-inside: auto;
    page-break-inside: auto;
  }

  .gtc__tblwrap thead { display: table-header-group; }

  /* The sticky header and frozen first column are for scrolling on screen;
     on paper they would just pin to the wrong place. */
  .gtc__tblwrap th,
  .gtc__tblwrap td:first-child {
    position: static !important;
  }

  .gtc__tblwrap th { background: #f2f2f2 !important; }

  .gtc__tblwrap tbody tr,
  .gtc__tblwrap tbody tr:nth-child(even) {
    background: #fff !important;
  }
}