/* =========================================================================
   EasyCalculatorSmart — India gold platform

   LOADED ONLY ON A GOLD ROUTE, and every selector in this file is scoped
   to `body.is-gold`. Those are two independent locks, for the same
   reason calc-system.css has them: nothing in here can reach a page whose
   design is already signed off, even by accident, and no other page
   downloads a byte of it.

   It reads main.css's tokens — --surface, --line, --text, --accent and
   the rest — so it inherits light and dark theme, the type scale and the
   brand automatically. It defines only what a rate platform needs that a
   calculator page does not: rate cards, a change card, a freshness
   badge, a data status banner, an SVG sparkline, and a selector tree.

   NO GOLD PHOTOGRAPHY, NO METALLIC GRADIENTS, NO SHINE. This is a page
   people check a price on, twice a day, often on a two-year-old phone on
   a bad connection. It should read like a utility, not like a jewellery
   advertisement.
   ========================================================================= */

body.is-gold {
  /* One extra token pair: the amber used for a stale-data state and for
     the rate figures themselves. Deliberately muted — a saturated gold
     on a white card at 40px is unreadable, and on a dark card it glows. */
  --gold-fg:        #8a6410;
  --gold-soft:      #fdf6e6;
  --gold-line:      #ecd9a8;
  --gold-rule:      var(--line);
}

:root[data-theme="dark"] body.is-gold {
  --gold-fg:   #e6be6a;
  --gold-soft: #2a2213;
  --gold-line: #4a3b1d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.is-gold {
    --gold-fg:   #e6be6a;
    --gold-soft: #2a2213;
    --gold-line: #4a3b1d;
  }
}

/* -------------------------------------------------------------------
   1. Page rhythm
   ----------------------------------------------------------------- */

body.is-gold .gold-section {
  padding-block: clamp(28px, 5vw, 52px);
}

body.is-gold .gold-section + .gold-section {
  border-top: 1px solid var(--gold-rule);
}

body.is-gold .gold-lede {
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.16rem);
  color: var(--text-soft);
  max-width: 68ch;
}

body.is-gold h2 {
  font-size: clamp(1.32rem, 1.2rem + 0.6vw, 1.7rem);
  margin-block: 0 0.6em;
}

body.is-gold h3 {
  font-size: clamp(1.08rem, 1.02rem + 0.3vw, 1.24rem);
  margin-block: 1.6em 0.5em;
}

body.is-gold p { max-width: 72ch; }

/* -------------------------------------------------------------------
   2. The status banner

   The most important component here. It is not a dismissible toast and
   it is not small print — it sits above the numbers at full width and
   says what they are.
   ----------------------------------------------------------------- */

body.is-gold .gold-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--info-line);
  background: var(--info-bg);
  color: var(--info-fg);
  margin-block: 0 24px;
}

body.is-gold .gold-banner--stale {
  border-color: var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn-fg);
}

body.is-gold .gold-banner--unavailable {
  border-color: var(--bad-line);
  background: var(--bad-bg);
  color: var(--bad-fg);
}

body.is-gold .gold-banner__icon {
  font-size: 1.3rem;
  line-height: 1.3;
  opacity: 0.8;
}

body.is-gold .gold-banner p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: 78ch;
}

body.is-gold .gold-banner p + p { margin-top: 8px; }

body.is-gold .gold-banner__lead {
  font-weight: 600;
  font-size: 1rem !important;
}

/* -------------------------------------------------------------------
   3. Rate cards
   ----------------------------------------------------------------- */

body.is-gold .gold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-block: 20px;
}

body.is-gold .gold-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.is-gold .gold-card--primary {
  border-color: var(--gold-line);
  background: var(--gold-soft);
}

body.is-gold .gold-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

body.is-gold .gold-card__karat {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

body.is-gold .gold-card__fineness {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}

body.is-gold .gold-card__rate {
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

body.is-gold .gold-card__value {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

body.is-gold .gold-card--primary .gold-card__value { color: var(--gold-fg); }

body.is-gold .gold-card__unit {
  font-size: 0.86rem;
  color: var(--text-faint);
}

body.is-gold .gold-card__alt {
  margin: 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}

body.is-gold .gold-card__alt span { color: var(--text-faint); font-size: 0.85rem; }

body.is-gold .gold-card__note {
  margin: 6px 0 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-faint);
}

/* -------------------------------------------------------------------
   4. Change card
   ----------------------------------------------------------------- */

body.is-gold .gold-change {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-alt);
  margin-block: 18px;
}

body.is-gold .gold-change__cell { display: flex; flex-direction: column; gap: 3px; }

body.is-gold .gold-change__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

body.is-gold .gold-change__num {
  font-size: 1.22rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

body.is-gold .gold-change__num--soft { color: var(--text-soft); font-weight: 500; }

body.is-gold .gold-change--up .gold-change__cell:last-of-type .gold-change__num { color: var(--ok-fg); }
body.is-gold .gold-change--down .gold-change__cell:last-of-type .gold-change__num { color: var(--bad-fg); }

body.is-gold .gold-change__pct { font-size: 0.85rem; font-weight: 500; }

body.is-gold .gold-change__foot {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-faint);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

/* -------------------------------------------------------------------
   5. Source badge
   ----------------------------------------------------------------- */

body.is-gold .gold-source {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-soft);
  background: var(--surface-sunk);
  border-radius: 10px;
  padding: 11px 14px;
  max-width: none;
}

body.is-gold .gold-source__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-top: 6px;
  flex: 0 0 auto;
  background: var(--ok-fg);
}

body.is-gold .gold-source__dot--stale { background: var(--warn-fg); }

body.is-gold .gold-source--none { color: var(--text-faint); }

/* -------------------------------------------------------------------
   6. Tables
   ----------------------------------------------------------------- */

body.is-gold .gold-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-block: 16px;
}

body.is-gold .gold-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 460px;
}

body.is-gold .gold-table caption {
  caption-side: bottom;
  text-align: left;
  padding: 10px 14px 12px;
  font-size: 0.82rem;
  color: var(--text-faint);
  line-height: 1.55;
}

body.is-gold .gold-table th,
body.is-gold .gold-table td {
  padding: 9px 14px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

body.is-gold .gold-table thead th {
  text-align: right;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  background: var(--surface-sunk);
  white-space: nowrap;
}

body.is-gold .gold-table th:first-child,
body.is-gold .gold-table td:first-child,
body.is-gold .gold-table thead th:first-child { text-align: left; }

body.is-gold .gold-table tbody th { font-weight: 650; }

body.is-gold .gold-table tbody tr:last-child th,
body.is-gold .gold-table tbody tr:last-child td { border-bottom: 0; }

body.is-gold .gold-table tr.is-local { background: var(--gold-soft); }

body.is-gold .gold-table__dim { color: var(--text-faint); font-size: 0.85em; }

body.is-gold .gold-units__tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--gold-fg);
  color: var(--surface);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

/* -------------------------------------------------------------------
   7. Empty states
   ----------------------------------------------------------------- */

body.is-gold .gold-empty {
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 20px;
  background: var(--surface-alt);
  margin-block: 18px;
}

body.is-gold .gold-empty p { margin: 0; font-size: 0.92rem; color: var(--text-soft); }
body.is-gold .gold-empty p + p { margin-top: 8px; }
body.is-gold .gold-empty__lead { font-weight: 600; color: var(--text) !important; }

/* -------------------------------------------------------------------
   8. Chart
   ----------------------------------------------------------------- */

body.is-gold .gold-chart {
  margin: 18px 0 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: var(--surface);
}

body.is-gold .gold-chart__cap {
  font-size: 0.86rem;
  color: var(--text-soft);
  margin-bottom: 12px;
}

body.is-gold .gold-chart__windows {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

body.is-gold .gold-chart__win {
  font: inherit;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
}

body.is-gold .gold-chart__win:hover { border-color: var(--accent); }

body.is-gold .gold-chart__win:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

body.is-gold .gold-chart__win.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

body.is-gold .gold-chart__svg {
  width: 100%;
  height: clamp(140px, 24vw, 220px);
  display: block;
  overflow: visible;
}

body.is-gold .gold-chart__line {
  fill: none;
  stroke: var(--gold-fg);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

body.is-gold .gold-chart__area {
  fill: var(--gold-fg);
  opacity: 0.1;
  stroke: none;
}

body.is-gold .gold-chart__axis {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

body.is-gold .gold-chart__data { margin-top: 14px; }
body.is-gold .gold-chart__data summary { cursor: pointer; font-size: 0.88rem; color: var(--accent); }
body.is-gold .gold-table--compact { font-size: 0.85rem; }

/* -------------------------------------------------------------------
   9. Location selector
   ----------------------------------------------------------------- */

body.is-gold .gold-select__note {
  font-size: 0.88rem;
  color: var(--text-faint);
  margin-bottom: 18px;
}

body.is-gold .gold-select__states {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

body.is-gold .gold-select__state {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  background: var(--surface);
}

body.is-gold .gold-select__state.is-current {
  border-color: var(--gold-line);
  background: var(--gold-soft);
}

body.is-gold .gold-select__state-name {
  font-weight: 650;
  font-size: 0.98rem;
  display: block;
  margin-bottom: 4px;
}

body.is-gold .gold-select__cities {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

body.is-gold .gold-select__cities li { font-size: 0.87rem; }
body.is-gold .gold-select__cities span[aria-current] { color: var(--text-faint); }

/* -------------------------------------------------------------------
   10. Calculator

   The workspace. It is built to the same design language as the site's
   individual-calculator system — the same card radius, the same mode
   cards, the same amplified result, the same preset chips — but it is
   written HERE, in this file, rather than by loading calc-system.css.

   Two reasons, and both of them are load-bearing:

     calc-system.css is scoped to body.is-calc and a gold page carries
     body.is-gold. Adding the second class to get the first file would
     put fifty-two signed-off calculator pages and this one inside the
     same cascade, which is exactly what that scoping exists to prevent.
     tests/goldcheck.php asserts on every gold URL that calc-system.css
     is NOT requested, and that assertion is the point rather than an
     obstacle.

   So the LANGUAGE is shared and the BYTES are not: same tokens, same
   geometry, same motion, and a gold page still downloads one stylesheet
   that only gold pages ever ask for.
   ----------------------------------------------------------------- */

body.is-gold {
  /* Geometry, so every component below rounds and spaces the same way
     without repeating the numbers. Matches the calculator family. */
  --gc-card-r: 14px;
  --gc-tile-r: 11px;
}

body.is-gold .gold-calc {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: clamp(16px, 3vw, 28px);
  margin-block: 22px;
}

body.is-gold .gold-calc__head { margin-bottom: 20px; }
body.is-gold .gold-calc__title { margin-top: 0; }

body.is-gold .gold-calc__lead {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ---- 10.1 Mode cards ------------------------------------------------

   The visual answer to "what can this calculator do?". Built on a
   native radio group: the input is the control, so checked state,
   arrow-key navigation and form semantics are all the browser's, and
   the card works on a page whose script failed to load.
   ------------------------------------------------------------------ */

body.is-gold .gold-modes {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
  min-inline-size: 0;   /* a fieldset will not shrink below its content without this */
}

body.is-gold .gold-modes__legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

body.is-gold .gold-modes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

body.is-gold .gold-modes input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.is-gold .gold-modes label {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 12px;
  min-block-size: 62px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--gc-card-r);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast),
              box-shadow var(--dur), transform var(--dur);
}

body.is-gold .gold-mode-ic {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--gc-tile-r);
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  color: var(--text-faint);
  transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
body.is-gold .gold-mode-ic svg { inline-size: 19px; block-size: 19px; }

body.is-gold .gold-mode-tx {
  grid-column: 2;
  align-self: end;
  font-size: 0.94rem;
  font-weight: 640;
  line-height: 1.3;
  color: var(--text);
}

body.is-gold .gold-mode-sub {
  grid-column: 2;
  align-self: start;
  font-size: 0.79rem;
  line-height: 1.4;
  color: var(--text-faint);
}

body.is-gold .gold-modes label:hover {
  border-color: var(--line-strong);
  background: var(--surface-alt);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
body.is-gold .gold-modes label:hover .gold-mode-ic {
  color: var(--gold-fg);
  border-color: var(--gold-line);
}

body.is-gold .gold-modes input:checked + label {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-sm);
}
body.is-gold .gold-modes input:checked + label .gold-mode-ic {
  background-image: var(--grad-calc);
  border-color: transparent;
  color: var(--on-tile);
}
body.is-gold .gold-modes input:checked + label .gold-mode-tx { color: var(--accent-strong); }

/* The live card carries a rule along its top edge, drawn from the
   centre out. One run, on selection, and nothing loops. */
body.is-gold .gold-modes label::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 12px;
  block-size: 3px;
  border-radius: 99px;
  background: var(--grad-calc);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}
body.is-gold .gold-modes input:checked + label::after { transform: scaleX(1); }

body.is-gold .gold-modes input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- 10.2 Layout --------------------------------------------------- */

body.is-gold .gold-calc__grid {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 980px) {
  body.is-gold .gold-calc__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  }
  /* The result follows the reader down a long form rather than scrolling
     off the top of it. Only where there is genuinely room. */
  body.is-gold .gold-calc__out {
    position: sticky;
    inset-block-start: 16px;
  }
}

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

body.is-gold .gold-field { margin-bottom: 16px; }
body.is-gold .gold-field:last-child { margin-bottom: 0; }

body.is-gold .gold-field > label,
body.is-gold .gold-field > div > label {
  display: block;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text-soft);
  margin-bottom: 6px;
}

body.is-gold .gold-field input[type="text"],
body.is-gold .gold-field select {
  inline-size: 100%;
  max-inline-size: 100%;
  padding: 11px 13px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}

body.is-gold .gold-field input[type="text"] { font-variant-numeric: tabular-nums; }

body.is-gold .gold-field input[type="text"]:hover,
body.is-gold .gold-field select:hover { border-color: var(--line-strong); }

body.is-gold .gold-field input[type="text"]:focus-visible,
body.is-gold .gold-field select:focus-visible,
body.is-gold .gold-mode:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--accent);
  background: var(--surface);
}

body.is-gold .gold-field--pair {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 12px;
}

body.is-gold .gold-field__hint {
  margin: 7px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-faint);
}

body.is-gold .gold-field__hint--lead {
  margin: -8px 0 16px;
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--gold-line);
}

body.is-gold .gold-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 9px;
  font-size: 0.85rem;
  color: var(--text-soft);
  cursor: pointer;
}

body.is-gold .gold-check input { margin-top: 3px; flex: 0 0 auto; }

/* ---- 10.4 The price-source cards ----------------------------------- */

body.is-gold .gold-field--modes {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  min-inline-size: 0;
}

body.is-gold .gold-field--modes legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text-soft);
}

body.is-gold .gold-mode {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-sunk);
  cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}

body.is-gold .gold-mode + .gold-mode { margin-top: 8px; }

body.is-gold .gold-mode:hover { border-color: var(--line-strong); }

body.is-gold .gold-mode:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

body.is-gold .gold-mode:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

body.is-gold .gold-mode input { margin-top: 4px; flex: 0 0 auto; }

body.is-gold .gold-mode__title {
  display: block;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text);
}

body.is-gold .gold-mode__desc {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-faint);
}

body.is-gold .gold-mode__tag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
  background: var(--ok-soft, var(--accent-soft));
  color: var(--ok-fg);
  border: 1px solid currentColor;
}

body.is-gold .gold-mode__tag--warn {
  background: var(--gold-soft);
  color: var(--gold-fg);
}

/* ---- 10.5 Purity cards ---------------------------------------------

   Five options is few enough that a menu hides four of them behind a
   tap for no reason. Each card carries the karat, what is stamped at
   that karat, and — only when a reading is usable — what the reference
   figure works out to per gram at it.
   ------------------------------------------------------------------ */

body.is-gold .gold-purity-pick {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  min-inline-size: 0;
}

body.is-gold .gold-purity-pick legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text-soft);
}

body.is-gold .gold-purity-pick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

body.is-gold .gold-purity-pick input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.is-gold .gold-purity-pick label {
  display: grid;
  gap: 1px;
  justify-items: center;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: var(--gc-tile-r);
  background: var(--surface-sunk);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-fast);
}

body.is-gold .gold-purity-pick label:hover {
  border-color: var(--gold-line);
  background: var(--surface);
  transform: translateY(-1px);
}

body.is-gold .gold-pk__k {
  font-size: 1.02rem;
  font-weight: 720;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.01em;
}

body.is-gold .gold-pk__h {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.03em;
}

body.is-gold .gold-pk__r {
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--gold-fg);
  line-height: 1.2;
}
body.is-gold .gold-pk__r span { font-weight: 500; color: var(--text-faint); }

body.is-gold .gold-purity-pick input:checked + label {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-sm);
}
body.is-gold .gold-purity-pick input:checked + label .gold-pk__k { color: var(--accent-strong); }

body.is-gold .gold-purity-pick input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- 10.6 Preset chips ---------------------------------------------- */

body.is-gold .gold-quick {
  display: grid;
  gap: 9px;
  margin-bottom: 16px;
}

body.is-gold .gold-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

body.is-gold .gold-chips--inline { margin-top: 8px; }

body.is-gold .gold-chips__k {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-inline-end: 2px;
}

body.is-gold .gold-chip {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface-sunk);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast),
              color var(--dur-fast), transform var(--dur-fast);
}

body.is-gold .gold-chip:hover {
  border-color: var(--gold-line);
  background: var(--gold-soft);
  color: var(--gold-fg);
  transform: translateY(-1px);
}

body.is-gold .gold-chip:active { transform: none; }

body.is-gold .gold-chip.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

body.is-gold .gold-chip:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- 10.7 Segmented control ----------------------------------------- */

body.is-gold .gold-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  margin-bottom: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-sunk);
}

body.is-gold .gold-seg input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.is-gold .gold-seg label {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 620;
  color: var(--text-faint);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast);
  /* The generic field label rule above would give these display:block
     and a bottom margin, which would stack the segments vertically. */
  display: inline-block;
  margin-bottom: 0;
}

body.is-gold .gold-seg label:hover { color: var(--text); }

body.is-gold .gold-seg input:checked + label {
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}

body.is-gold .gold-seg input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

/* ---- 10.8 Advanced -------------------------------------------------- */

body.is-gold .gold-advanced {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-sunk);
  margin-block: 16px;
}

body.is-gold .gold-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 15px;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--text-soft);
  cursor: pointer;
  border-radius: 12px;
}

body.is-gold .gold-advanced summary:hover { color: var(--text); }

body.is-gold .gold-advanced summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -2px;
}

/* The count of charges actually in play, so a 3% tax entered three
   scrolls ago is not silently still applied behind a closed summary. */
body.is-gold .gold-advanced__count {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-line);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.is-gold .gold-advanced[open] summary { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }

body.is-gold .gold-advanced > *:not(summary) { margin-inline: 15px; }
body.is-gold .gold-advanced > *:not(summary):first-of-type { margin-top: 14px; }
body.is-gold .gold-advanced > *:last-child { margin-bottom: 16px; }

body.is-gold .gold-advanced__note {
  font-size: 0.83rem !important;
  color: var(--text-faint);
  line-height: 1.55;
}

/* ---- 10.9 Actions --------------------------------------------------- */

body.is-gold .gold-calc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

/* ---- 10.10 The result ----------------------------------------------- */

body.is-gold .gold-calc__out {
  border: 1px solid var(--accent-line);
  border-radius: var(--gc-card-r);
  background:
    linear-gradient(180deg, var(--accent-soft) 0%, transparent 190px),
    var(--surface);
  box-shadow: var(--shadow-md);
  padding: clamp(15px, 2.4vw, 22px);
  min-block-size: 220px;
}

body.is-gold .gold-calc__placeholder,
body.is-gold .gold-calc__error {
  margin: 0;
  font-size: 0.93rem;
  color: var(--text-faint);
  line-height: 1.6;
}

body.is-gold .gold-calc__error { color: var(--bad-fg); font-weight: 550; }

body.is-gold .gold-result__head {
  text-align: center;
  padding-block: 8px 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

body.is-gold .gold-result__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
}

body.is-gold .gold-result__value {
  margin: 6px 0 0;
  font-size: clamp(2rem, 1.4rem + 3.1vw, 3rem);
  font-weight: 720;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: anywhere;
}

body.is-gold .gold-result__sub {
  max-inline-size: 46ch;
  margin: 10px auto 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* The entrance. One run per result, never a loop. */
@keyframes gold-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gold-value-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

body.is-gold .gold-calc__out.gold-in { animation: gold-in var(--dur-slow) var(--ease-out) both; }
body.is-gold .gold-calc__out.gold-in .gold-result__value {
  animation: gold-value-in var(--dur-reveal) var(--ease-out) both;
}

/* ---- 10.11 Supporting readings --------------------------------------- */

body.is-gold .gold-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
  margin-bottom: 18px;
}

body.is-gold .gold-stat {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 11px 12px 11px 15px;
  border: 1px solid var(--line);
  border-radius: var(--gc-tile-r);
  background: var(--surface-sunk);
  overflow: hidden;
  transition: border-color var(--dur), background-color var(--dur);
}

body.is-gold .gold-stat::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--grad-calc);
  opacity: .5;
}

body.is-gold .gold-stat:hover { border-color: var(--accent-line); background: var(--surface); }
body.is-gold .gold-stat:hover::before { opacity: 1; }

body.is-gold .gold-stat--lead {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
body.is-gold .gold-stat--lead::before { opacity: 1; }

body.is-gold .gold-stat__label {
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

body.is-gold .gold-stat__value {
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: anywhere;
}
body.is-gold .gold-stat--lead .gold-stat__value { color: var(--accent-strong); }

body.is-gold .gold-stat__sub {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-faint);
}

/* ---- 10.12 The bill --------------------------------------------------- */

body.is-gold .gold-result__warn {
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  background: var(--gold-soft);
  color: var(--text-soft);
  font-size: 0.83rem;
  line-height: 1.55;
}

body.is-gold .gold-result__note,
body.is-gold .gold-result__sell {
  margin: 14px 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-faint);
}

body.is-gold .gold-result__sell {
  padding: 10px 12px;
  border-inline-start: 3px solid var(--gold-line);
  background: var(--surface-sunk);
  border-radius: 0 8px 8px 0;
}

body.is-gold .gold-result__lines {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: 4px 0;
  font-size: 0.89rem;
}

body.is-gold .gold-result__lines caption {
  caption-side: top;
  text-align: start;
  font-size: 0.75rem;
  color: var(--text-faint);
  padding-bottom: 8px;
  line-height: 1.5;
}

body.is-gold .gold-result__lines th,
body.is-gold .gold-result__lines td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

body.is-gold .gold-result__lines tbody th { font-weight: 620; color: var(--text); }
body.is-gold .gold-result__lines tbody tr.is-absent { color: var(--text-faint); }
body.is-gold .gold-result__lines tbody tr.is-absent th { font-weight: 500; color: var(--text-faint); }

body.is-gold .gold-result__lines tr.is-subtotal th,
body.is-gold .gold-result__lines tr.is-subtotal td {
  color: var(--text-soft);
  font-style: normal;
  background: var(--surface-sunk);
}

body.is-gold .gold-result__detail {
  font-size: 0.79rem;
  color: var(--text-faint);
  line-height: 1.45;
}

body.is-gold .gold-result__amount {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  white-space: nowrap;
}

body.is-gold .gold-result__lines tfoot th,
body.is-gold .gold-result__lines tfoot td {
  padding-top: 11px;
  border-bottom: 0;
  border-top: 2px solid var(--line-strong);
  font-size: 1rem;
  font-weight: 720;
  color: var(--text);
}

/* ---- 10.13 Show your work --------------------------------------------- */

body.is-gold .gold-work {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-sunk);
}

body.is-gold .gold-work > summary {
  padding: 11px 14px;
  font-size: 0.85rem;
  font-weight: 620;
  color: var(--accent);
  cursor: pointer;
  border-radius: 11px;
}

body.is-gold .gold-work > summary:hover { color: var(--accent-strong); }
body.is-gold .gold-work > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
body.is-gold .gold-work[open] > summary { border-bottom: 1px solid var(--line); border-radius: 11px 11px 0 0; }

body.is-gold .gold-work__list {
  list-style: none;
  counter-reset: gold-step;
  margin: 12px 14px;
  padding: 0;
  display: grid;
  gap: 10px;
}

body.is-gold .gold-work__list li {
  counter-increment: gold-step;
  display: grid;
  gap: 2px;
  padding-inline-start: 26px;
  position: relative;
}

body.is-gold .gold-work__list li::before {
  content: counter(gold-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1px;
  inline-size: 18px;
  block-size: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 700;
}

body.is-gold .gold-work__k {
  font-size: 0.79rem;
  font-weight: 650;
  color: var(--text-soft);
}

body.is-gold .gold-work__f {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body.is-gold .gold-work__out {
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

body.is-gold .gold-work__note {
  margin: 0 14px 14px;
  font-size: 0.77rem;
  line-height: 1.55;
  color: var(--text-faint);
}

/* ---- 10.14 Equivalents and afford table --------------------------------- */

body.is-gold .gold-result__equiv,
body.is-gold .gold-result__afford { margin-top: 14px; }

body.is-gold .gold-result__equiv summary,
body.is-gold .gold-result__afford summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 620;
  color: var(--accent);
  padding: 4px 0;
}

body.is-gold .gold-result__equiv summary:focus-visible,
body.is-gold .gold-result__afford summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

body.is-gold .gold-result__equiv-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 6px 14px;
}

body.is-gold .gold-result__equiv-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.84rem;
  padding: 4px 0;
  border-bottom: 1px dotted var(--line);
}

body.is-gold .gold-result__equiv-unit { color: var(--text-faint); }
body.is-gold .gold-result__equiv-val { font-variant-numeric: tabular-nums; font-weight: 600; }

body.is-gold .gold-result__equiv-note {
  margin: 10px 0 0;
  font-size: 0.77rem;
  line-height: 1.55;
  color: var(--text-faint);
}

/* ---- 10.15 The visual ---------------------------------------------------

   Two drawings, both of quantities the engine computed: the ingot's
   fill is the pure-gold fraction of the piece, and the scale marker is
   where this weight sits among the weights people buy. Neither is
   decoration and neither is rendered until there is a result.
   ----------------------------------------------------------------------- */

body.is-gold .gold-visual {
  display: grid;
  gap: 18px;
  align-items: center;
  margin: 22px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--gc-card-r);
  background: var(--surface-sunk);
}

@media (min-width: 720px) {
  body.is-gold .gold-visual { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; }
}

body.is-gold .gold-visual__ingot { text-align: center; }

body.is-gold .gold-visual__ingot svg {
  inline-size: 100%;
  max-inline-size: 180px;
  block-size: auto;
}

body.is-gold .gold-visual__body { fill: var(--surface); stroke: none; }
body.is-gold .gold-visual__fill {
  fill: var(--gold-fg);
  opacity: .32;
  transition: y var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out);
}
body.is-gold .gold-visual__edge {
  fill: none;
  stroke: var(--gold-fg);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

body.is-gold .gold-visual__cap {
  margin: 10px 0 0;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--text-faint);
}

body.is-gold .gold-visual__track {
  position: relative;
  block-size: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--line) 0%, var(--gold-line) 100%);
}

body.is-gold .gold-visual__marker {
  position: absolute;
  inset-block-start: 50%;
  inline-size: 14px;
  block-size: 14px;
  margin-inline-start: -7px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--accent);
  transform: translateY(-50%);
  transition: inset-inline-start var(--dur-slow) var(--ease-out);
}

body.is-gold .gold-visual__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.71rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

body.is-gold .gold-visual__read {
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}

/* ---- 10.16 Narrow screens -----------------------------------------------

   Not the desktop layout shrunk. The mode cards lose their hint line and
   become a single column of compact rows, the purity grid tightens to
   what fits a 320px viewport, and the sticky result is switched off —
   a panel that follows you down a phone screen covers the form it is
   describing.
   ----------------------------------------------------------------------- */

@media (max-width: 719px) {
  body.is-gold .gold-calc { padding: 15px 13px; }

  body.is-gold .gold-modes__grid { grid-template-columns: minmax(0, 1fr); gap: 7px; }

  body.is-gold .gold-modes label {
    min-block-size: 0;
    padding: 10px 12px;
    gap: 0 11px;
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  body.is-gold .gold-mode-ic { inline-size: 32px; block-size: 32px; grid-row: 1; }
  body.is-gold .gold-mode-ic svg { inline-size: 17px; block-size: 17px; }
  body.is-gold .gold-mode-tx { align-self: center; }
  /* The hint is the first thing to go: on one line per card it doubles
     the height of the whole group for a sentence the card's own title
     already implies. */
  body.is-gold .gold-mode-sub { display: none; }

  body.is-gold .gold-purity-pick__grid { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
  body.is-gold .gold-purity-pick label { padding: 8px 4px; }
  body.is-gold .gold-pk__k { font-size: 0.95rem; }
  body.is-gold .gold-pk__r { font-size: 0.72rem; }

  body.is-gold .gold-field--pair { grid-template-columns: minmax(0, 1fr); gap: 11px; }

  body.is-gold .gold-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body.is-gold .gold-calc__actions > .btn { flex: 1 1 calc(50% - 5px); }

  /* The detail column is the first thing a 320px table cannot afford.
     The amount and the label are what a reader is actually checking. */
  body.is-gold .gold-result__detail { font-size: 0.74rem; }
  body.is-gold .gold-result__lines { font-size: 0.85rem; }
  body.is-gold .gold-result__lines th,
  body.is-gold .gold-result__lines td { padding: 7px 3px; }
}

@media (max-width: 400px) {
  body.is-gold .gold-stats { grid-template-columns: minmax(0, 1fr); }
  body.is-gold .gold-purity-pick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Three across at 320px leaves no room for a rate under the karat. */
  body.is-gold .gold-pk__r { font-size: 0.68rem; }
  body.is-gold .gold-result__equiv-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 10.17 Reduced motion and print -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.is-gold .gold-calc__out.gold-in,
  body.is-gold .gold-calc__out.gold-in .gold-result__value { animation: none; }
  body.is-gold .gold-visual__fill,
  body.is-gold .gold-visual__marker { transition: none; }
  body.is-gold .gold-modes label,
  body.is-gold .gold-chip,
  body.is-gold .gold-purity-pick label { transition: none; }
  body.is-gold .gold-modes label:hover,
  body.is-gold .gold-chip:hover,
  body.is-gold .gold-purity-pick label:hover { transform: none; }
}

@media print {
  /* On paper the form is noise — the reader has the result in their
     hand and cannot type into it. The result gets the full width. */
  body.is-gold .gold-modes,
  body.is-gold .gold-calc__inputs,
  body.is-gold .gold-calc__actions { display: none !important; }

  body.is-gold .gold-calc__grid { grid-template-columns: minmax(0, 1fr) !important; }
  body.is-gold .gold-calc__out {
    position: static !important;
    box-shadow: none;
    background: none;
    border-color: #999;
  }
  body.is-gold .gold-work,
  body.is-gold .gold-result__equiv,
  body.is-gold .gold-result__afford { break-inside: avoid; }
}

/* -------------------------------------------------------------------
   11. Purity primer, units, methodology
   ----------------------------------------------------------------- */

body.is-gold .gold-purity__list {
  list-style: none;
  padding: 0;
  margin: 14px 0;
  display: grid;
  gap: 8px;
}

body.is-gold .gold-purity__list li {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.89rem;
}

body.is-gold .gold-purity__math { font-variant-numeric: tabular-nums; color: var(--text-soft); }

body.is-gold .gold-purity__stamp {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
}

body.is-gold .gold-purity__note {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: var(--text-faint);
  line-height: 1.5;
}

body.is-gold .gold-purity__foot,
body.is-gold .gold-units__foot {
  font-size: 0.86rem;
  color: var(--text-faint);
}

body.is-gold .gold-method__sources {
  display: grid;
  gap: 14px;
  margin-block: 16px;
}

body.is-gold .gold-method__sources > div {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px 16px;
  background: var(--surface);
}

body.is-gold .gold-method__sources dt {
  font-weight: 650;
  font-size: 1rem;
  margin-bottom: 6px;
}

body.is-gold .gold-method__sources dd { margin: 0; }
body.is-gold .gold-method__sources dd p { margin: 0 0 6px; font-size: 0.89rem; }
body.is-gold .gold-method__meta { font-size: 0.8rem !important; color: var(--text-faint); }

body.is-gold .gold-method__formula {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  background: var(--surface-sunk);
  border-radius: 9px;
  padding: 12px 14px;
  overflow-x: auto;
  max-width: none;
}

/* -------------------------------------------------------------------
   12. Context and FAQ blocks
   ----------------------------------------------------------------- */

body.is-gold .gold-context {
  border-left: 3px solid var(--gold-line);
  padding-left: 16px;
  margin-block: 18px;
}

body.is-gold .gold-context p { font-size: 0.97rem; line-height: 1.7; }

body.is-gold .gold-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 16px;
  padding: 0;
  list-style: none;
}

body.is-gold .gold-evidence li {
  font-size: 0.82rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  background: var(--surface);
  color: var(--text-soft);
}

body.is-gold .gold-evidence strong { color: var(--text); font-variant-numeric: tabular-nums; }

body.is-gold .gold-faq { margin-block: 20px 0; }

body.is-gold .gold-faq details {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  margin-bottom: 8px;
}

body.is-gold .gold-faq summary {
  cursor: pointer;
  padding: 13px 16px;
  font-weight: 600;
  font-size: 0.95rem;
}

body.is-gold .gold-faq details[open] summary { border-bottom: 1px solid var(--line); }
body.is-gold .gold-faq details > p { margin: 13px 16px; font-size: 0.92rem; line-height: 1.65; }

/* -------------------------------------------------------------------
   14. The third-party price widget

   goldprice.dev's own card, framed.

   EVERY RULE HERE IS CONSTRAINED BY THEIR LICENCE, not by taste. The
   Official Widget License requires the iframe to be unmodified and its
   "Powered by goldprice.dev" link visible and unobscured, so this file
   may style the space AROUND the frame and must not touch the frame's
   contents or cover any part of it.

   In practice that rules out the things a designer would reach for
   first, and each is left out on purpose:

     no `overflow: hidden` on a box that could clip it
     no `height` smaller than their documented 190px
     no `transform: scale()` to make it "fit"
     no absolutely-positioned badge, gradient or overlay above it
     no `filter`, `mix-blend-mode` or `opacity` on the frame
     no negative margin pulling another element across it

   A border and a background behind it are fine: they frame the card
   without covering it, which is what "unobscured" allows.
   ----------------------------------------------------------------- */

body.is-gold .gold-widget {
  margin-block: 26px;
  padding: clamp(15px, 2.4vw, 22px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

body.is-gold .gold-widget h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

body.is-gold .gold-widget__lead {
  margin: 0 0 16px;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--text-soft);
}

/* The frame's own box. `display: flow-root` rather than a flex or grid
   centring trick, so the iframe keeps its intrinsic size and nothing
   stretches or squashes it. */
body.is-gold .gold-widget__frame {
  display: flow-root;
  margin-bottom: 16px;
}

body.is-gold .gold-widget__frame iframe {
  display: block;
  border: 0;
  /* Their documented responsive rule, verbatim: full width up to the
     card's maximum, never wider, never scaled. */
  inline-size: 100%;
  max-inline-size: 360px;
  /* A minimum, not a fixed height. If their card grows — a second line,
     a stale-data notice — it must have somewhere to grow into rather
     than being cut off, because the attribution sits at its foot. */
  min-block-size: 190px;
  border-radius: 12px;
  /* A colour behind the frame while it loads, so the space does not
     flash as a white or black rectangle against the page. */
  background: var(--surface-sunk);
}

body.is-gold .gold-widget__note {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 72ch;
}

body.is-gold .gold-widget__note:last-child { margin-bottom: 0; }
body.is-gold .gold-widget__note strong { color: var(--text-soft); }

@media (max-width: 400px) {
  body.is-gold .gold-widget { padding: 13px; }
  /* 320px viewport minus the container's gutters still clears their
     documented 320px minimum, so the card is never squeezed below it. */
  body.is-gold .gold-widget__frame iframe { min-inline-size: 0; }
}

@media print {
  /* An iframe does not print reliably and their card is not ours to
     reproduce on paper. The caption stays so the source is still
     credited on a printed page. */
  body.is-gold .gold-widget__frame { display: none; }
}

/* -------------------------------------------------------------------
   13. Related links
   ----------------------------------------------------------------- */

body.is-gold .gold-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-block: 16px;
  list-style: none;
  padding: 0;
}

body.is-gold .gold-related li {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  padding: 13px 15px;
}

body.is-gold .gold-related a { font-weight: 600; display: block; margin-bottom: 3px; }
body.is-gold .gold-related span { font-size: 0.84rem; color: var(--text-faint); line-height: 1.5; display: block; }

/* -------------------------------------------------------------------
   14. Narrow screens

   Tested at 320, 375, 768 and 1280. The two things that break a rate
   page on a small phone are a table that will not scroll and a headline
   figure that wraps mid-number; both are handled above with
   overflow-x on the wrapper and tabular-nums plus clamp() on the value.
   ----------------------------------------------------------------- */

@media (max-width: 420px) {
  body.is-gold .gold-field--pair { grid-template-columns: 1fr; }
  body.is-gold .gold-banner { grid-template-columns: 1fr; }
  body.is-gold .gold-banner__icon { display: none; }
  body.is-gold .gold-purity__list li { grid-template-columns: 1fr auto; }
  body.is-gold .gold-calc__actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-gold * { scroll-behavior: auto !important; }
}