/* ==========================================================================
   DoCalc — Calculator widget styles
   Shared layout for every calculator page: input panel + live result panel.
   ========================================================================== */

/* padding-top/-bottom only (not the `padding` shorthand) — .calc-page-head
   is combined with .container on the same element (class="container
   calc-page-head"), and a shorthand here would zero out .container's own
   horizontal padding since this rule loads after it in the cascade. */
.calc-page-head { padding-top: 28px; padding-bottom: 8px; }
.calc-page-head .badge-row { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.calc-page-head h1 { max-width: 720px; }
.calc-page-head .lede { max-width: 620px; font-size: 16px; margin-top: 12px; }
.calc-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--color-faint);
  margin-top: 16px;
}

.calc-shell {
  display: grid;
  grid-template-columns: 1fr 1fr 300px;
  gap: 24px;
  align-items: stretch;
  /* padding-top/-bottom only — same reason as .calc-page-head above:
     .calc-shell is also combined with .container on the same element. */
  padding-top: 28px;
  padding-bottom: 8px;
}

.calc-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 32px;
}
.calc-panel h2 { font-size: 16px; margin-bottom: 20px; }

.field-group { margin-bottom: 20px; }
.field-group:last-child { margin-bottom: 0; }
.field-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13.5px; font-weight: 600; color: var(--color-ink);
  margin-bottom: 8px;
}
.field-label .hint {
  font-weight: 400; color: var(--color-faint); font-size: 12px;
}
.field-help { font-size: 12.5px; color: var(--color-muted); margin-top: 6px; }

.input-wrap { position: relative; display: flex; align-items: stretch; }
.input-prefix, .input-suffix {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 0 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted); font-size: 14px; font-weight: 600;
}
.input-prefix { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: none; }
.input-suffix { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }

.calc-input, .calc-select {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 15px; font-family: var(--font-mono);
  color: var(--color-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-wrap .calc-input { border-radius: 0; }
.input-wrap .input-prefix + .calc-input { border-radius: 0; }
.input-wrap .calc-input:only-of-type { border-radius: var(--radius-sm); }
.input-wrap .input-prefix + .calc-input:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-wrap .calc-input:first-child:not(:only-of-type) { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

.calc-input:focus, .calc-select:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.calc-select { appearance: none; cursor: pointer; font-family: var(--font-sans); font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}

.calc-input::-webkit-outer-spin-button, .calc-input::-webkit-inner-spin-button { opacity: 0.6; }

.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type="range"] {
  flex: 1; accent-color: var(--color-accent); height: 4px;
}
.range-value {
  min-width: 64px; text-align: right; font-family: var(--font-mono);
  font-weight: 700; font-size: 14px; color: var(--color-ink);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.toggle-group { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle-btn {
  padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 100px;
  font-size: 13px; font-weight: 600; color: var(--color-muted);
  transition: all 0.15s ease;
}
.toggle-btn[aria-pressed="true"] {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}

.calc-actions { display: flex; gap: 10px; margin-top: 24px; }

/* ---- Result panel ---- */
.result-panel {
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: #fff;
  padding: 32px;
}
.result-panel .result-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: 10px;
}
.result-primary {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 6px;
  word-break: break-word;
}
.result-sub { font-size: 13.5px; color: #94a3b8; margin-bottom: 22px; }

.result-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 100px;
  margin-bottom: 22px;
}
.result-status.good { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
.result-status.warn { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.result-status.bad { background: rgba(248, 113, 113, 0.14); color: #f87171; }

.result-breakdown { border-top: 1px solid #1e293b; padding-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.result-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; }
.result-row span:first-child { color: #94a3b8; }
.result-row span:last-child { font-family: var(--font-mono); font-weight: 600; color: #fff; }
.result-delta {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 100px; margin-left: 4px;
  vertical-align: middle;
}
.result-delta.up { color: #4ade80; background: rgba(74, 222, 128, 0.14); }
.result-delta.down { color: #f87171; background: rgba(248, 113, 113, 0.14); }

.result-benchmark {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid #1e293b;
}
.result-benchmark p { font-size: 12.5px; color: #94a3b8; margin: 0 0 10px; }
.benchmark-bar { height: 8px; border-radius: 4px; background: #1e293b; overflow: hidden; position: relative; }
.benchmark-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease, background-color 0.3s ease; }
.benchmark-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: #64748b; margin-top: 6px; }

.result-copy {
  width: 100%; margin-top: 26px;
  height: 44px; border-radius: var(--radius-sm);
  border: 1px solid #334155; color: #fff; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.result-copy:hover { border-color: var(--color-primary); background: rgba(37,99,235,0.12); }

.result-actions { display: flex; gap: 10px; margin-top: 26px; }
.result-actions .result-copy, .result-actions .print-result-btn { margin-top: 0; flex: 1; width: auto; }
.print-result-btn {
  flex: 1; width: 100%; margin-top: 26px;
  height: 44px; border-radius: var(--radius-sm);
  border: 1px solid #334155; color: #fff; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.print-result-btn:hover { border-color: var(--color-primary); background: rgba(37,99,235,0.12); }

/* Calculator + Result stay side by side down to tablet width; the ad/
   related-calculators column drops below (full width) before that, since
   three equal-ish columns get too narrow for comfortable slider/input use. */
@media (max-width: 1180px) {
  .calc-shell { grid-template-columns: 1fr 1fr; }
  .calc-ads-col { grid-column: 1 / -1; position: static; flex-direction: row; align-items: stretch; }
  .calc-ads-col .ad-slot--square { flex: 0 0 300px; }
  .related-calcs { flex: 1; }
}
@media (max-width: 760px) {
  .calc-shell { grid-template-columns: 1fr; }
  .calc-ads-col { flex-direction: column; }
  .calc-ads-col .ad-slot--square { flex: none; }
}
@media (max-width: 560px) {
  .calc-panel, .result-panel { padding: 20px; }
  .field-row { grid-template-columns: 1fr; }
  .result-actions { flex-direction: column; }
}

/* ---- Ad + related-calculators sidebar (third column) ---- */
.calc-ads-col {
  position: sticky; top: 88px;
  align-self: start;
  display: flex; flex-direction: column; gap: 20px;
}
/* .ad-slot--incontent's own `margin` is meant for a full-width banner sitting
   between page sections — inside the sidebar it's stacked via the column's
   own `gap` instead, so the rule's margin would just double up the spacing. */
.calc-ads-col .ad-slot--incontent { margin: 0; }

.related-calcs {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  background: var(--color-bg);
}
.related-calcs h3 {
  font-size: 16px; font-family: var(--font-mono); font-weight: 700;
  margin-bottom: 18px;
}
/* Name-only rows (no description/arrow) — deliberately compact so more
   related calculators fit in the same sidebar space. */
.related-calc-item {
  display: block;
  padding: 8px 0;
  font-size: 13.5px; font-weight: 400; line-height: 1.2;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  transition: color 0.15s ease;
}
.related-calc-item:first-of-type { padding-top: 0; }
.related-calc-item:last-child { border-bottom: none; padding-bottom: 0; }
.related-calc-item:hover { color: var(--color-accent); }

/* ---- Ad slots ----
   Placeholder units, clearly labeled, sized to standard IAB dimensions.
   Swap the inner content for your ad network's real embed code (AdSense,
   Ezoic, Mediavine, etc.) — the wrapper markup and sizing can stay as-is. */
.ad-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.ad-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-faint);
}
.ad-slot-dim { font-size: 11px; font-family: var(--font-mono); color: var(--color-faint); }

/* Text-ad "SPONSORED" caption sits above the box as its own line, not a
   badge inside it — .ad-slot-textad-wrap groups the two so the sidebar's
   flex `gap` treats them as one unit, with a tighter gap between the
   caption and the box itself than between sidebar sections. */
.ad-slot-textad-wrap { display: flex; flex-direction: column; gap: 8px; }
.ad-slot-sponsored-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-faint);
}

/* In-content ad placeholder: previews the same headline + arrow +
   description shape a real native/text ad renders in once js/ads.js fills
   the slot (compare .ad-slot-headline/.ad-slot-body below) — left-aligned
   and compact, not the centered dimension-label look every other empty
   .ad-slot uses. This slot is text-ads-only; it can hold several stacked
   text ads at once (see .ad-slot-textad-item below), each separated by a
   divider line, rather than a single ad per slot. */
.ad-slot:has(.ad-slot-textad) {
  align-items: stretch; justify-content: flex-start;
  padding: 16px 18px; gap: 6px;
}
.ad-slot-textad-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ad-slot-textad-title {
  font-size: 14.5px; font-weight: 700; color: var(--color-muted);
}
.ad-slot-textad-arrow { flex-shrink: 0; width: 14px; height: 14px; color: var(--color-faint); }
.ad-slot-textad-desc { font-size: 13px; line-height: 1.45; color: var(--color-faint); }

/* Filled state, multiple stacked text ads: each entry gets its own padding
   and a divider line against the previous one — see js/ads.js renderTextAds.
   The arrow picks up the accent color only once a real ad fills it (the
   placeholder's stays neutral gray, since it's a shape preview, not a link). */
.ad-slot--incontent.ad-slot--filled {
  flex-direction: column; align-items: stretch; padding: 0;
  box-shadow: var(--shadow-sm);
}
.ad-slot-textad-item { padding: 16px 18px; }
.ad-slot-textad-item + .ad-slot-textad-item { border-top: 1px solid var(--color-border); }
.ad-slot-textad-item .ad-slot-textad-arrow { color: var(--color-accent); }

.ad-slot--square { width: 100%; min-height: 300px; }

.ad-slot--incontent { width: 100%; min-height: 64px; margin: 36px 0; }

.ad-slot--leaderboard { width: 100%; min-height: 90px; margin: 20px 0; }

/* ---- Filled ad state (js/ads.js swaps the placeholder for a real ad
   fetched from the admin-managed ad store) ---- */
.ad-slot--filled {
  border-style: solid;
  background: var(--color-bg);
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  position: relative;
}
.ad-slot-tag {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-faint);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px; padding: 2px 6px;
}
.ad-slot-link {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  color: inherit;
  transition: opacity 0.15s ease;
}
.ad-slot-link:hover { opacity: 0.88; }
.ad-slot--square .ad-slot-link img {
  width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block;
}
.ad-slot--square .ad-slot-link { padding: 18px 16px 16px; justify-content: center; gap: 8px; }
.ad-slot-headline { font-size: 15px; font-weight: 700; color: var(--color-ink); line-height: 1.3; }
.ad-slot-body { font-size: 13px; color: var(--color-muted); line-height: 1.45; margin-top: 4px; }

/* ---- Formula / reference tables inside prose ---- */
.formula-box {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 20px 24px; margin: 18px 0;
  font-family: var(--font-mono); font-size: 14.5px; color: var(--color-ink);
  overflow-x: auto;
}
.ref-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 18px 0; }
.ref-table th {
  text-align: left; padding: 10px 12px; color: var(--color-muted); font-weight: 600;
  border-bottom: 2px solid var(--color-border);
}
.ref-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); color: var(--color-ink); }
.ref-table tr:nth-child(even) td { background: var(--color-surface); }

/* ---- Feedback widget: helpful/unhelpful vote, feedback, share, embed, cite ---- */
.feedback-widget {
  margin: 28px 0 0;
  padding: 24px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.feedback-prompt {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.feedback-prompt svg { width: 22px; height: 22px; color: var(--color-muted); flex-shrink: 0; }
.feedback-prompt.is-helpful svg { color: var(--color-success); }
.feedback-prompt.is-unhelpful svg { color: var(--color-danger); transform: scaleY(-1); }
.feedback-prompt-text { font-size: 15px; color: var(--color-ink); font-weight: 500; }

.feedback-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.feedback-vote {
  display: flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--color-bg);
}
.feedback-vote button {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  color: var(--color-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.feedback-vote button:first-child { border-right: 1px solid var(--color-border); }
.feedback-vote button svg { width: 19px; height: 19px; }
.feedback-vote button.vote-up[aria-pressed="true"] { color: var(--color-success); background: var(--color-success-light); }
.feedback-vote button.vote-down[aria-pressed="true"] { color: var(--color-danger); background: var(--color-danger-light); }
.feedback-vote button:hover { color: var(--color-ink); }

.feedback-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-muted);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.feedback-icon-btn svg { width: 19px; height: 19px; }
.feedback-icon-btn:hover, .feedback-icon-btn[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-accent); }

.feedback-panel {
  display: none;
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg);
}
.feedback-panel.show { display: block; }
.feedback-panel-label { font-size: 13px; font-weight: 600; color: var(--color-ink); margin-bottom: 10px; display: block; }
.feedback-panel textarea {
  width: 100%; min-height: 84px; padding: 12px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 14px; color: var(--color-ink);
  resize: vertical; margin-bottom: 12px; display: block;
}
.feedback-code {
  display: block; width: 100%; padding: 12px 14px; box-sizing: border-box;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ink);
  white-space: pre-wrap; word-break: break-all; margin-bottom: 12px;
}
.feedback-panel-success { font-size: 13px; color: var(--color-success); margin: 10px 0 0; display: none; }
.feedback-panel-success.show { display: block; }

/* .google-preferred-btn carries a visible label now (an icon-only "G" glyph
   didn't communicate what the button does), so unlike the other square
   .feedback-icon-btn buttons it needs auto width + inner spacing. */
.google-preferred-btn {
  width: auto; padding: 0 14px; gap: 8px;
}
.google-preferred-btn span { font-size: 12.5px; font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.google-preferred-btn[disabled] { opacity: 0.55; cursor: default; }

@media (max-width: 480px) {
  .feedback-widget { padding: 18px 16px; }
  /* Targets the individual thumb buttons, not the .feedback-vote wrapper
     around both of them — sizing the wrapper itself to 42px squeezed both
     46px buttons down to roughly half that to fit inside it. */
  .feedback-vote button, .feedback-icon-btn { width: 42px; height: 42px; }
  .google-preferred-btn { width: auto; }
}

/* ---- Save / History panels (js/calc-tools.js) ---- */
.calc-log-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.calc-log-empty { font-size: 13px; color: var(--color-faint); margin: 12px 0 0; }
.calc-log-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.calc-log-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calc-log-value { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; color: var(--color-ink); }
.calc-log-meta { font-size: 11.5px; color: var(--color-faint); }
.calc-log-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.calc-log-restore {
  font-size: 12px; font-weight: 600; color: var(--color-accent);
  padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 100px;
  transition: border-color 0.15s ease;
}
.calc-log-restore:hover { border-color: var(--color-accent); }
.calc-log-delete {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: var(--color-faint);
  font-size: 16px; line-height: 1; flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.calc-log-delete:hover { background: var(--color-danger-light); color: var(--color-danger); }

/* ---- Keyboard shortcuts panel ---- */
.shortcut-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.shortcut-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--color-ink); }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 6px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--color-ink);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 5px;
  box-shadow: 0 1.5px 0 var(--color-border);
}

/* ---- Quick-share links, injected into the share panel by calc-tools.js ---- */
.quick-share-links { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.quick-share-links a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--color-border); color: var(--color-muted);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.quick-share-links a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.quick-share-links svg { width: 16px; height: 16px; }

/* ---- Result toolbar: Copy / Print / PDF / Email / Save / History /
   Shortcuts (js/calc-tools.js, js/main.js, js/pdf-export.js) ----
   One row of icon-only buttons inside .result-panel — the label is a
   native title/aria-label tooltip rather than always-visible text, which
   is what keeps 7 actions on one line instead of wrapping across several.
   .result-panel is always a fixed dark card regardless of site theme (see
   its own rule above), so these reuse the same hardcoded dark palette as
   its other children (#1e293b / #334155 / #94a3b8) instead of the
   light-card var(--color-*) tokens used elsewhere on the page. */
.result-toolbar {
  display: flex; gap: 8px; margin-top: 26px;
}
.result-icon-btn {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 0; min-width: 0;
  height: 44px;
  border: 1px solid #334155; border-radius: var(--radius-sm);
  color: #fff; font-size: 18px; line-height: 1;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.result-icon-btn svg { width: 18px; height: 18px; }
.result-icon-btn:hover, .result-icon-btn[aria-expanded="true"] {
  border-color: var(--color-primary); color: #fff; background: rgba(37, 99, 235, 0.16);
}

/* ---- Custom hover tooltips for icon-only buttons ----
   Native `title` tooltips are slow (~1s delay) and OS-styled, inconsistent
   with the rest of the UI. This reads each button's own aria-label via
   CSS attr() — already present on every icon button for accessibility —
   so no HTML/JS duplication is needed to add a fast, on-brand tooltip. */
.result-icon-btn, .feedback-icon-btn, .feedback-vote button {
  position: relative;
}
.result-icon-btn::after, .result-icon-btn::before,
.feedback-icon-btn::after, .feedback-icon-btn::before,
.feedback-vote button::after, .feedback-vote button::before {
  opacity: 0; visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}
.result-icon-btn::after, .feedback-icon-btn::after, .feedback-vote button::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  padding: 5px 9px;
  border-radius: 6px;
  background: #0f172a; color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  white-space: nowrap;
  z-index: 30;
}
.result-icon-btn::before, .feedback-icon-btn::before, .feedback-vote button::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #0f172a;
  z-index: 30;
}
.result-icon-btn:hover::after, .result-icon-btn:hover::before,
.result-icon-btn:focus-visible::after, .result-icon-btn:focus-visible::before,
.feedback-icon-btn:hover::after, .feedback-icon-btn:hover::before,
.feedback-icon-btn:focus-visible::after, .feedback-icon-btn:focus-visible::before,
.feedback-vote button:hover::after, .feedback-vote button:hover::before,
.feedback-vote button:focus-visible::after, .feedback-vote button:focus-visible::before {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* .result-icon-btn sits on the always-dark .result-panel, so the shared
   dark tooltip chip above (#0f172a) would blend straight into it — flip
   to a light chip here so it still reads as a distinct popover. */
.result-icon-btn::after { background: #fff; color: #0f172a; }
.result-icon-btn::before { border-top-color: #fff; }

.result-tools-panel {
  display: none;
  margin-top: 14px; padding: 16px 18px;
  background: #0f172a; border: 1px solid #1e293b; border-radius: var(--radius-md);
}
.result-tools-panel.show { display: block; }
.result-tools-hint { font-size: 11.5px; color: #94a3b8; margin: 10px 0 0; }

.result-tools-action {
  display: block; width: 100%; height: 40px; margin-bottom: 12px;
  border: 1px solid #334155; border-radius: var(--radius-sm);
  color: #fff; font-size: 13px; font-weight: 600;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.result-tools-action:hover { border-color: var(--color-primary); background: rgba(37, 99, 235, 0.14); }

/* calc-log-* is shared with nothing else on the page, so it's safe to give
   it one fixed dark styling here rather than theme-token overrides. */
.result-tools-panel .calc-log-list { margin-top: 0; }
.result-tools-panel .calc-log-empty { color: #94a3b8; }
.result-tools-panel .calc-log-item { background: #1e293b; border-color: #334155; }
.result-tools-panel .calc-log-value { color: #fff; }
.result-tools-panel .calc-log-meta { color: #94a3b8; }
.result-tools-panel .calc-log-restore { color: #93c5fd; border-color: #334155; }
.result-tools-panel .calc-log-restore:hover { border-color: #93c5fd; }
.result-tools-panel .calc-log-delete { color: #94a3b8; }
.result-tools-panel .calc-log-delete:hover { background: rgba(248, 113, 113, 0.16); color: #f87171; }
.result-tools-panel .shortcut-list li { color: #e2e8f0; }
.result-tools-panel kbd { background: #1e293b; border-color: #334155; color: #fff; box-shadow: 0 1.5px 0 #334155; }

/* ---- Number to Words: long text results need a smaller, wrapping style
   than the short numeric/percentage results other calculators show ---- */
.result-primary--text {
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.55;
  font-weight: 600;
}
.result-cheque-box {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid #1e293b;
}
.result-cheque-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #94a3b8; margin: 0 0 10px;
}
.result-cheque-text {
  font-size: 13.5px; line-height: 1.6; color: #fff;
  background: #0f172a; border: 1px solid #1e293b; border-radius: 6px;
  padding: 16px 18px; margin-bottom: 14px;
}

/* ---- Toggle group used by the numbering-system switch ---- */
.toggle-group .toggle-btn { flex: 1; text-align: center; }

/* ---- Compare-mode: "Scenario B" embed (js/compare-mode.js) ----
   Applied via the .compare-embed body class when a calculator page loads
   itself inside an iframe with ?__embed=1 — strips everything down to
   just the calculator's two working columns. */
body.compare-embed .site-header,
body.compare-embed .site-footer,
body.compare-embed .breadcrumb,
body.compare-embed .calc-page-head,
body.compare-embed .feedback-widget,
body.compare-embed .ad-slot,
body.compare-embed .calc-ads-col,
body.compare-embed .skip-link,
body.compare-embed .section {
  display: none !important;
}
body.compare-embed .calc-shell { grid-template-columns: 1fr 1fr !important; padding: 0 !important; }
body.compare-embed .container { padding: 0 !important; }
/* The iframe embedding Scenario B has its own independent viewport for
   media-query purposes — on a mobile-width host page it's typically well
   under 300px wide, and the unconditional 2-column rule above squeezed
   the result panel into an unusably thin sliver. Collapse to 1 column
   once the iframe itself is narrow, same as the non-embedded .calc-shell
   already does at 760px. */
@media (max-width: 600px) {
  body.compare-embed .calc-shell { grid-template-columns: 1fr !important; }
}

/* ---- Compare-mode toggle + panel (on the primary, non-embedded page) ----
   .compare-toggle-wrap and .compare-panel both carry the "container" class
   directly (matching .calc-shell's own class="container calc-shell"
   pattern) so they line up with the rest of the page. Because .container
   already sets margin: 0 auto for horizontal centering, every rule below
   that also touches `margin` must keep left/right as `auto` — a plain `0`
   would silently break that centering above the site's max-width. */
/* Centered on the full row (not grid-matched to just the input+result
   columns) — a previous version aligned it under those two columns only,
   which visually read as off-center relative to the page/ad column beside
   it. A plain flex row centers it on the whole width instead. */
.compare-toggle-wrap {
  display: flex; justify-content: center;
  margin: 28px auto 14px; padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.compare-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 100px;
  font-size: 13.5px; font-weight: 700; color: var(--color-accent);
  background: var(--color-accent-light);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.compare-toggle:hover { box-shadow: var(--shadow-sm); }
.compare-toggle[aria-pressed="true"] { background: var(--color-accent); color: #fff; }
.compare-toggle svg { width: 17px; height: 17px; }

/* .compare-panel only ever holds the single .compare-panel-card, so it's
   a 1-column row rather than matching .calc-shell's 3-column grid — the
   card previously spanned just 2 of those 3 columns, leaving a dead
   300px gap on the right that made the whole section read as off-center. */
.compare-panel {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  margin: 0 auto 28px;
}
.compare-panel-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.compare-panel-head { padding: 20px 24px 14px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.compare-panel-head h3 { font-size: 15px; margin-bottom: 4px; }
.compare-panel-head p { font-size: 13px; margin: 0; color: var(--color-muted); }
.compare-iframe-wrap { padding: 18px 24px 0; }
.compare-iframe {
  display: block;
  width: 100%; height: 400px; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg);
  transition: height 0.2s ease;
}
.compare-delta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 18px 24px 24px; padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
}
.compare-delta-label { font-size: 12.5px; font-weight: 600; color: var(--color-muted); }
.compare-delta-value { font-family: var(--font-mono); font-size: 16px; font-weight: 700; }
.compare-delta-value.up { color: var(--color-success); }
.compare-delta-value.down { color: var(--color-danger); }