/* GST calculator — site-local additions on top of the shared base.
   AAA+++ STUDIO PREMIUM (Identity B) — _plans/AAA-PLUS-STUDIO-PREMIUM.md
   §3.2 elevation, §3.4 tabular figures, §4 calculator-card row.

   LOAD ORDER MATTERS: styles.css (shared, carries the AAA+++ mechanics layer)
   -> tool.css (this file) -> the inline <style>NET_CSS</style> in <head>.
   Anything here that fights the mechanics layer wins silently, so the rules
   below deliberately DEFER to it: the wells, the shadow and the result
   numerals are shared; only the site's own geometry is set here. */

/* ---- the one floating object ------------------------------------------ */
/* 20px was a pill radius on a card that is meant to read as an instrument.
   --radius-lg (14px) and the single shared --shadow come from the mechanics
   layer; only the measure and centring are local. */
.calc-card {
  max-width: 620px; margin: 26px auto 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
.calc-top { padding: 24px 24px 20px; }
.mode-row { display: flex; justify-content: center; margin-bottom: 20px; }

/* ---- input wells (§4) -------------------------------------------------- */
/* A sunken well with an inset hairline, not a pill on a floating card. */
.amount-field { position: relative; }
.amount-field .cur {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 700; color: var(--muted); pointer-events: none;
}
.calc-card .amount-input {
  width: 100%; min-height: 48px;
  border: 1px solid var(--line-2); background: var(--surface-sunken);
  border-radius: var(--radius-sm); padding: 14px 18px 14px 52px;
  font: inherit; font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 800;
  letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  box-shadow: inset 0 1px 0 rgba(10, 16, 32, .05);
  transition: border-color var(--t-fast) var(--ease-out);
}
.calc-card .amount-input:focus { outline: none; border-color: var(--accent); }
.calc-card .amount-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rate-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: .88rem; color: var(--muted); }
.rate-row .seg button { font-size: .8rem; padding: 6px 11px; }
.calc-card .rate-custom {
  width: 78px; min-height: 40px; text-align: center;
  padding: 7px 8px; font-size: .88rem;
}

/* ---- the result -------------------------------------------------------- */
/* .result-v / .result-u carry their size, weight and tabular figures from the
   mechanics layer. Tabular numerals matter more here than anywhere else in the
   portfolio: this card re-renders on every keystroke, and proportional figures
   would make the result column jiggle as the reader types. */
.out {
  background: var(--surface-sunken); border-top: 1px solid var(--line);
  padding: 22px 24px 24px;
}
.out-main { text-align: center; margin-bottom: 16px; }
.out-main .k { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.out-main .result-v { color: var(--accent); margin-top: 4px; }
.out-main .result-u { margin-top: 6px; }
.out-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 460px) { .out-grid { grid-template-columns: 1fr; } }
.out-cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.out-cell .k { font-size: .8rem; color: var(--muted); font-weight: 600; }
.out-cell .v { font-size: 1.06rem; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.out-cell button {
  border: 0; background: none; color: var(--muted); padding: 4px; border-radius: 6px; line-height: 0;
}
.out-cell button:hover { color: var(--accent); }
.out-cell svg { width: 15px; height: 15px; }

/* ---- the sticky loop, as furniture (§4) --------------------------------
   NET_CSS is inlined AFTER this file and still carries the pre-AAA+++ .handoff
   (a flex button row with a ::before "Next step" label), which fights the
   block anatomy handoffBlock() now emits. The element is an anchor, so a
   type-qualified selector out-specifies it without touching a shared file.
   Shared-layer request filed: retire the .handoff rules in NET_CSS. */
a.handoff { display: block; text-align: left; }
a.handoff::before { content: none; }

/* ---- breadcrumbs (§6.2) ------------------------------------------------ */
/* Mono voice comes from the mechanics layer; the trail geometry is local. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; padding: 14px 0 0; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.crumbs a:hover { color: var(--ink-2); border-bottom-color: var(--accent); }
.crumbs .sep { margin: 0 .5em; color: var(--line-2); }
.crumbs [aria-current="page"] { color: var(--ink-2); }

/* ---- the bridge card keeps its "different family" edge (§6.1.4) -------- */
.rel-card.bridge { border-style: dashed; border-top-style: solid; }

/* ---- the answer block -------------------------------------------------- */
.quick-answer {
  max-width: 620px; margin: 22px auto 0; padding: 18px 20px 14px;
  border-radius: var(--radius); background: var(--accent-soft);
  border: 1px solid var(--accent-line); text-align: left;
}
.quick-answer h2 { font-size: .96rem; font-weight: 700; margin-bottom: 8px; }
.quick-answer h2::before { display: none; }   /* the keel is for section heads */
.quick-answer ul { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: .93rem; }
.quick-answer li { margin-bottom: 5px; }
.quick-answer b { color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.quick-answer .srcline { border-top-color: var(--accent-line); }

/* ---- the three shortcuts ----------------------------------------------- */
.shortcut {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 18px;
}
.shortcut div { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.shortcut .eq { font-family: var(--mono); font-size: 1.06rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; }
.shortcut p { font-size: .87rem; color: var(--muted); margin-top: 6px; }

/* ---- the table vintage chip -------------------------------------------- */
.vintage { margin: 10px 0 0; color: var(--muted); text-transform: uppercase; }

/* ---- THE SET PIECE: the IRD split block --------------------------------
   GROUP-DESIGN-SYSTEM-2026-08 §3. The whole bar IS the inclusive total, so
   the GST cell's width is the answer to the question the site exists for.
   Identity B: no lift, no scale, hairline borders, tabular numerals. */
.split { margin: 16px 0 0; }
.split-bar {
  display: flex; width: 100%; height: 44px; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.split-net, .split-gst {
  display: flex; align-items: center; min-width: 0;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  /* Width is the datum — animate it so a rate change reads as the SAME
     quantity being re-divided rather than as a different picture. */
  transition: width var(--t-fast) var(--ease-out);
}
.split-net { background: var(--surface); color: var(--muted); padding-left: 12px; }
/* Carries white text, so it must be the measured accent, never a bright fill
   (the every-colour-exists-twice rule). --accent is the AA-safe token here. */
.split-gst { background: var(--accent); color: #fff; padding-left: 10px; justify-content: flex-start; }
.split-net span, .split-gst span { overflow: hidden; text-overflow: ellipsis; }
/* Hide the GST cell's label only when it genuinely cannot fit. MEASURED, not
   guessed: the word "GST" occupies 21px, and a container query measures the
   CONTENT box — so a 74px cell reports 64px here. A 68px threshold therefore
   blanked a label with 43px of room to spare. 34px leaves the word its 21px
   plus breathing room and hides it only when the cell is truly too narrow
   (roughly under a 5% share). The figure in the caption always states the
   number, so nothing is lost when it does hide. */
.split-gst { container-type: inline-size; }
@container (max-width: 34px) { .split-gst span { opacity: 0; } }

.split-cap {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: .86rem; color: var(--muted); line-height: 1.5;
}
.split-frac {
  font-family: var(--mono); font-size: 1.24rem; font-weight: 700;
  color: var(--accent); flex: none;
  font-variant-numeric: tabular-nums lining-nums;
}
.split-txt { flex: 1 1 220px; min-width: 0; }
.split-txt strong { color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.split-txt .num { color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.split-txt a { color: var(--muted); text-underline-offset: 2px; }
.split-txt a:hover { color: var(--accent); }

@media (max-width: 560px) {
  .split-bar { height: 40px; }
  .split-cap { font-size: .82rem; }
}