/* The free tools' own styles (3 Oct 2026): the CIS refund checker and the MTD
   checker, on the website and in the checkers practices embed on their own
   sites. Only brand/tokens.css underneath, so an embedded checker needs
   nothing else of the website; on the website, site.css is there too. */

.crc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-6, 24px); align-items: start; }
.crc-form { display: grid; gap: var(--space-5, 20px); min-width: 0; }
.crc-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.crc-field > label, .crc-field > legend {
  display: block; padding: 0; margin-bottom: 4px;
  font-size: 16px; font-weight: 650; color: var(--color-text-primary); line-height: 1.4;
}
.crc-hint { margin: 2px 0 10px; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); }
.crc-amount {
  display: flex; align-items: center; gap: 8px; max-width: 280px;
  border: 1px solid var(--color-border); border-radius: var(--radius-control, 10px);
  padding: 0 14px; background: var(--color-surface);
}
.crc-amount span { font-size: 18px; color: var(--color-text-secondary); }
.crc-amount input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: 0;
  font: 650 20px/1 var(--font-body); color: var(--color-text-primary);
  padding: 11px 0; font-variant-numeric: tabular-nums;
}
.crc-amount:focus-within { outline: 2px solid var(--color-focus, var(--color-text-primary)); outline-offset: 2px; }
.crc select {
  font: 500 15px/1.3 var(--font-body); color: var(--color-text-primary);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-control, 10px); padding: 10px 12px; max-width: 100%;
}
.crc-choice { display: flex; gap: var(--space-3, 12px); flex-wrap: wrap; }
.crc-choice label { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 15px; color: var(--color-text-primary); }
.crc-choice input { width: 18px; height: 18px; accent-color: var(--color-accent, currentColor); }
.crc-more { border: 1px solid var(--color-border); border-radius: var(--radius-card, 14px); padding: 12px 16px; }
.crc-more summary { cursor: pointer; font-size: 15px; font-weight: 650; color: var(--color-text-primary); }
.crc-more summary span { font-weight: 400; color: var(--color-text-muted); }
.crc-more-body { display: grid; gap: var(--space-4, 16px); margin-top: var(--space-4, 16px); }

.crc-out { min-width: 0; }
.crc-answer {
  border: 1px solid var(--color-border); border-left-width: 4px; border-radius: var(--radius-card, 14px);
  padding: var(--space-5, 20px); background: var(--color-surface);
}
.crc-answer p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-text-secondary); }
.crc-answer .crc-big { margin-bottom: 6px; font-size: 22px; color: var(--color-text-primary); }
.crc-answer .crc-big b { font-size: 30px; font-weight: 750; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.crc-answer.is-back { border-left-color: var(--color-success, #1c6b3f); }
.crc-answer.is-owed { border-left-color: var(--color-warning, #95531b); }
.crc-warn { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--color-text-primary); line-height: 1.5; }
.crc-cta:empty { display: none; }
.crc-cta { margin-top: var(--space-4, 16px); display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; font-size: 15px; color: var(--color-text-secondary); }
.crc-cta p { margin: 0; flex-basis: 100%; }
.crc-work { margin-top: var(--space-5, 20px); }
.crc-work-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.crc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.crc-table th, .crc-table td { padding: 8px 6px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.crc-table th { text-align: left; font-weight: 500; color: var(--color-text-secondary); }
.crc-table th small { display: block; font-size: 12.5px; color: var(--color-text-muted); font-weight: 400; margin-top: 2px; }
.crc-table td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.crc-table tr.is-sub th, .crc-table tr.is-sub td { font-weight: 650; color: var(--color-text-primary); }
.crc-table tr.is-total th, .crc-table tr.is-total td { font-weight: 750; font-size: 16px; color: var(--color-text-primary); border-bottom: 0; border-top: 2px solid var(--color-text-primary); }
.crc-small { margin: var(--space-4, 16px) 0 0; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }
.crc-engine { white-space: nowrap; opacity: .8; }
.crc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crc-error { padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-card, 14px); }
@media (max-width: 900px) { .crc { grid-template-columns: minmax(0, 1fr); } }

/* ---- the checker a practice embeds: their name, their colour, our engine ---- */
.emb-body { margin: 0; padding: 18px; font-family: var(--font-body); background: var(--color-page, var(--color-surface)); color: var(--color-text-primary); }
.emb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.emb-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.emb-by { font-size: 13px; color: var(--color-text-muted); }
.emb-logo { max-height: 40px; max-width: 180px; display: block; }
.emb-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 10px; border: 0;
  font: 650 15px/1 var(--font-body); cursor: pointer; text-decoration: none;
  background: var(--emb-brand, var(--color-text-primary)); color: var(--emb-brand-ink, var(--color-surface));
}
.emb-lead { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; }
.emb-lead label { font-size: 14px; font-weight: 600; display: grid; gap: 4px; }
.emb-lead input, .emb-lead textarea { font: 15px/1.4 var(--font-body); padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text-primary); }
.emb-lead .emb-consent { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.emb-note { font-size: 12.5px; color: var(--color-text-muted); margin: 0; }
.emb-foot { margin-top: 18px; font-size: 12.5px; color: var(--color-text-muted); }
.emb-foot a { color: inherit; }
.emb-hp { position: absolute; left: -9999px; }

/* ---- the MTD checker, as a widget ---- */
.mtw { display: grid; gap: var(--space-5, 20px); }
.mtw-kinds { display: flex; gap: 12px; flex-wrap: wrap; }
.mtw-kinds label { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; cursor: pointer; }
.mtw-answer { border: 1px solid var(--color-border); border-left-width: 4px; border-radius: var(--radius-card, 14px); padding: 18px; background: var(--color-surface); }
.mtw-answer p { margin: 0; font-size: 16px; line-height: 1.6; }
.mtw-answer.is-now, .mtw-answer.is-soon { border-left-color: var(--emb-brand, var(--color-accent)); }
.mtw-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.mtw-table th, .mtw-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--color-border); }
.mtw-table td:last-child { text-align: right; font-weight: 600; }
.mtw-table tr.is-you { background: color-mix(in srgb, var(--color-text-primary) 5%, transparent); }