/* X Made — tools.css
   Styles for the /tools/ calculator pages. Loaded only by those pages, after
   styles.css, so nothing here can affect the rest of the site.

   The page itself follows the normal site rhythm: light ground, .product-hero
   and .product-section as everywhere else. Only the calculator is graphite,
   so it reads as the product moment on the page rather than a separate
   microsite. Everything below is either .tool-* (page furniture) or .calc-*
   (the calculator card), and both are generic enough to carry the VAT,
   discount, margin, unit and currency pages without change. */

/* ---- Page furniture ---- */

/* The tool hero has no device column, so the text should not run to a
   1200px measure. */
.tool-hero .product-hero-inner {
  max-width: var(--container-narrow);
}

.tool-hero .product-lead {
  margin-bottom: var(--space-4);
}

/* ---- Calculator card ---- */

/* The intro paragraph above carries no bottom margin — .product-section
   spaces paragraphs with p + p — so without a margin here the card sits flush
   against the last line of text. Matched to the gap before a prose heading,
   since the card is the larger block of the two. */
.calc {
  margin-top: var(--space-4);
  background: var(--ink);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-card);
  color: var(--offwhite);
  overflow: hidden;
}

/* ---- Mode tabs ----
   Hidden until main.js confirms scripting: without JS every panel stays open
   and visible, so a tab strip that could not switch them would be a lie. */
.calc-tabs {
  display: none;
}

html.js .calc-tabs {
  /* Grid, not flex: a wrapped flex row leaves the last tab stretched across
     its own line. Two equal columns on phones, so four tabs make a tidy 2x2
     and two make a single row — never a 3 + 1 orphan at the widths between. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  padding: var(--space-2);
  border-bottom: 1px solid var(--ink-border);
  background: rgba(247, 247, 245, 0.02);
}

/* One row from here up, with the columns following however many tabs the tool
   has. A fixed repeat(4) would leave the two-mode pages — VAT, and the ones
   after it — sitting in the first half of the row with the rest empty. */
@media (min-width: 700px) {
  html.js .calc-tabs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

/* An odd last tab would otherwise sit in the left column with a gap beside
   it. Spanning the row keeps the strip looking deliberate at three tabs, and
   does nothing at two or four. */
html.js .calc-tab:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  html.js .calc-tab:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

.calc-tab {
  padding: 0.6rem 0.6rem;
  line-height: 1.25;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  color: var(--grey-on-dark);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.calc-tab:hover {
  color: var(--offwhite);
  background: rgba(247, 247, 245, 0.06);
}

.calc-tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--teal-on-dark);
  border-color: var(--teal-on-dark);
}

/* ---- Panels ---- */

.calc-panel {
  padding: var(--space-3);
}

@media (min-width: 700px) {
  .calc-panel {
    padding: var(--space-4);
  }
}

/* Without JS the panels stack, so each needs its own heading and a rule
   between them. With JS only one is ever open and both are redundant. */
.calc-panel + .calc-panel {
  border-top: 1px solid var(--ink-border);
}

html.js .calc-panel + .calc-panel {
  border-top: 0;
}

.calc .calc-panel-title {
  font-size: 1.05rem;
  color: var(--offwhite);
  margin-bottom: var(--space-3);
}

html.js .calc .calc-panel-title {
  /* The selected tab already names the mode. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Fields ---- */

.calc-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 560px) {
  .calc-fields {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
}

.calc-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grey-on-dark);
  margin-bottom: 0.45rem;
}

/* type="text" with inputmode="decimal" rather than type="number": it raises
   the same numeric keypad on mobile, but drops the spinners, the scroll-wheel
   surprise, and the empty-value-on-any-stray-character behaviour. The parser
   in tools.js accepts grouped input like 1,500 as a result. */
.calc-field input[type="text"] {
  width: 100%;
  font: inherit;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  color: var(--offwhite);
  background: var(--ink-card);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s var(--ease);
}

.calc-field input[type="text"]::placeholder {
  color: #5f636b;
}

.calc-field input[type="text"]:focus-visible {
  outline: 2px solid var(--teal-on-dark);
  outline-offset: 2px;
  border-color: var(--teal-on-dark);
}

.calc-suffix {
  font-weight: 400;
  color: var(--grey-mid);
}

/* ---- Unit selects ----
   Native select chrome is drawn by the OS and ignores the card's palette, so
   the arrow is replaced with one of our own. The SVG is inlined rather than
   fetched: it is two strokes, and an extra request for it would be silly. */
.calc-field select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--offwhite);
  background-color: var(--ink-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a7aab0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  border: 1px solid var(--ink-border);
  border-radius: var(--radius);
  padding: 0.75rem 2.4rem 0.75rem 0.9rem;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.calc-field select:focus-visible {
  outline: 2px solid var(--teal-on-dark);
  outline-offset: 2px;
  border-color: var(--teal-on-dark);
}

/* The list itself is still OS-drawn, so its own colours have to be set or it
   inherits white-on-white in some browsers. */
.calc-field select option {
  color: var(--ink);
  background: var(--white);
}

/* ---- From / to row ----
   Two unit pickers with the swap between them. Stacked on a phone, with the
   swap sitting between the two rather than beside one of them. */
.calc-convert {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  align-items: end;
  margin-top: var(--space-3);
}

/* Later than the 560px the field grid uses. Two unit or currency pickers
   side by side leave roughly 146px of text each on a tablet, and the longest
   labels — "NZD — New Zealand Dollar", "Square millimetres (mm²)" — need over
   200px. Stacking until there is real room beats truncating them to
   "British Pour". */
@media (min-width: 760px) {
  .calc-convert {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-2);
  }
}

/* Hidden without scripting, like the tabs and chips: swapping is something
   only the script can do, and a dead control is worse than none. */
.calc-swap {
  display: none;
}

html.js .calc-swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  color: var(--grey-on-dark);
  background: var(--ink-card);
  border: 1px solid var(--ink-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.calc-swap:hover {
  color: var(--offwhite);
  border-color: rgba(247, 247, 245, 0.28);
}

.calc-swap:focus-visible {
  outline: 2px solid var(--teal-on-dark);
  outline-offset: 2px;
}

.calc-swap svg {
  width: 18px;
  height: 18px;
}

/* Stands alone rather than sitting in the .calc-fields grid, so it needs its
   own spacing and a width that does not stretch across the whole card for a
   two-digit figure. Revealed by the tool script only when Custom is chosen. */
.calc-field--custom {
  margin-top: var(--space-3);
  max-width: 16rem;
}

/* ---- Quick chips ----
   Shortcuts that fill a field with a common value. Hidden without scripting,
   like the tabs: a button that cannot do anything is worse than no button.
   The field stays editable, so these only ever save typing. */
.calc-chips {
  display: none;
}

html.js .calc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--space-2);
}

.calc-chip {
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--grey-on-dark);
  background: var(--ink-card);
  border: 1px solid var(--ink-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.calc-chip:hover {
  color: var(--offwhite);
  border-color: rgba(247, 247, 245, 0.28);
}

.calc-chip:focus-visible {
  outline: 2px solid var(--teal-on-dark);
  outline-offset: 2px;
}

/* ---- Segmented control ----
   Real radios, so it works with the keyboard and without JS. */
.calc-seg {
  border: 0;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.calc-seg legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grey-on-dark);
  margin-bottom: 0.45rem;
  padding: 0;
}

/* Wraps because the VAT rate selector carries four options rather than the
   two the discount-style controls use. A pill row that wraps keeps its shape;
   one that overflows does not. */
.calc-seg-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--ink-card);
  border: 1px solid var(--ink-border);
  border-radius: 999px;
}

.calc-seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.calc-seg label {
  display: block;
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--grey-on-dark);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.calc-seg input:checked + label {
  color: var(--ink);
  background: var(--teal-on-dark);
}

.calc-seg input:focus-visible + label {
  outline: 2px solid var(--teal-on-dark);
  outline-offset: 2px;
}

/* ---- Result ---- */

.calc-out {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-border);
}

.calc-out-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-mid);
  margin-bottom: 0.5rem;
}

/* ---- Numerals ----
   Inter with tabular figures rather than the mono face. JetBrains Mono puts a
   dot through its zero, which is useful in code and distracting in an answer,
   and the app sets its own numbers in a clean sans. Tabular keeps digits on a
   fixed advance so columns and updating results stay aligned, without the
   typewriter look — the self-hosted subset carries the feature, checked by
   measuring 111, 000 and 888 at the same width.

   The large result also takes the tracking the site gives its headings: at
   this size the default spacing reads loose. */
.calc .calc-result {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 8vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--teal-on-dark);
  overflow-wrap: anywhere;
}

/* Empty or impossible input: the figure slot carries a dash instead of a
   number, and the sentence below explains what is missing. */
.calc .calc-result.is-empty {
  color: var(--grey-mid);
}

.calc .calc-explain {
  margin-top: 0.6rem;
  font-size: 0.98rem;
  color: var(--offwhite);
}

.calc .calc-formula {
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--grey-mid);
  overflow-wrap: anywhere;
}

/* ---- Fetched-result notes ----
   The source and freshness lines under a rate that came from somewhere else.
   Quieter than the explanation, and not mono: these are sentences, not sums. */
.calc .calc-note {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--grey-mid);
}

/* Shown only when a fetch has failed, so the reader has something to press
   other than the browser's reload button. */
.calc-retry {
  margin-top: var(--space-2);
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--offwhite);
  background: transparent;
  border: 1px solid rgba(247, 247, 245, 0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.calc-retry:hover {
  color: var(--teal-on-dark);
  border-color: var(--teal-on-dark);
}

.calc-retry:focus-visible {
  outline: 2px solid var(--teal-on-dark);
  outline-offset: 2px;
}

/* The currency converter is the one tool with no honest offline answer: it
   cannot know a rate without asking for one. This says so, and disappears the
   moment scripting is confirmed. */
html.js .calc-nojs {
  display: none;
}

/* ---- Breakdown ----
   A named list of the figures behind the headline result — net, VAT and gross
   on the VAT pages. Generic on purpose: the discount and margin tools want
   the same shape. Hidden by the engine while an input is missing, so it never
   sits there as a column of labels with nothing beside them. */
.calc-breakdown {
  margin-top: var(--space-3);
  border-top: 1px solid var(--ink-border);
}

.calc-breakdown div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ink-border);
}

.calc-breakdown div:last-child {
  border-bottom: 0;
}

.calc-breakdown dt {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grey-on-dark);
}

.calc-breakdown dd {
  margin: 0;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  color: var(--offwhite);
  text-align: right;
  overflow-wrap: anywhere;
}


/* ---- Examples table ---- */

.tool-examples {
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tool-examples th,
.tool-examples td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--grey-soft);
}

.tool-examples th {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-text);
}

/* Mono for the answer column, but no nowrap: these tables also carry prose in
   the last column — "Reduced rate for some goods and services" — and a cell
   that cannot wrap pushes the whole table past the viewport on a phone,
   taking the page into horizontal scroll with it. */
.tool-examples td:last-child {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* ---- Worked examples inline ---- */

.product-section .tool-working {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--offwhite);
  border-left: 2px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  color: var(--ink);
  overflow-x: auto;
}

/* ---- Prose headings ----
   Site headings carry no margins of their own: spacing normally comes from
   the component wrapping them (.tool-card, .feature-list, and so on). These
   sit loose in the flow between a worked-example block and the paragraph
   they introduce, so without this they are flush against both neighbours.
   More room above than below binds each heading to the text it belongs to.
   Scoped to .tool-prose so it cannot reach .calc-panel-title, which is also
   an h3 inside a .container.narrow. */
.tool-prose h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

/* Matches the heading-to-paragraph gap above, so the table sits with its
   heading rather than drifting between the two. */
.tool-prose .tool-examples {
  margin-top: var(--space-2);
}

/* ---- Wide table ----
   For a table that genuinely cannot fit a phone — the markup-versus-margin
   comparison needs five columns — the table scrolls inside this rather than
   taking the whole page into horizontal scroll. Wrap only the tables that
   need it: the wrapper is focusable so it can be scrolled from the keyboard,
   and a focus stop on a region that never scrolls is just noise. */
.tool-prose .tool-table-wrap {
  margin-top: var(--space-2);
  overflow-x: auto;
}

.tool-prose .tool-table-wrap .tool-examples {
  margin-top: 0;
}

/* A quieter sibling of .tool-working, for the caveats that have to sit next
   to a figure without competing with it. Grey rather than teal: this is a
   caution, not a worked example.

   Scoped to .product-section rather than .tool-prose: the rate disclaimer on
   the currency page sits under the card, outside the prose block, and a rule
   that only reached .tool-prose left it unstyled and flush against the
   calculator. .product-section p would otherwise win on specificity. */
.product-section .tool-caution {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--offwhite);
  border-left: 2px solid var(--grey-mid);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.92rem;
  color: var(--grey-text);
}

/* ---- Placeholder store button ----
   The dark-ground appearance of .btn-secondary now lives in styles.css with
   the rest of the .product-section--dark family, since every dark section
   needs it rather than just this page. What stays here is the disabled
   affordance, deliberately not made global: the contact form's submit button
   already has its own .form-submit[disabled] treatment and should keep it. */
.btn[disabled] {
  cursor: not-allowed;
}

.btn[disabled]:hover {
  transform: none;
}