/* ==========================================================================
   Dentist commission calculator — loaded only by /resources/commission-ng-dentist/.
   Reuses .form-card, .field, .btn and the site tokens from site.css; this file
   adds only what those do not cover, plus the print stylesheet for the
   statement. Nothing here stores or sends what a visitor types.
   ========================================================================== */
.cc-intro { max-width: 62ch; }
.cc-form { margin-top: 1.5rem; }

.cc-form fieldset { border: 0; margin: 0 0 1.05rem; padding: 0; min-width: 0; }
.cc-form legend { font-size: var(--fs-sm); font-weight: 600; padding: 0; margin-bottom: .4rem; }
.cc-radios { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.cc-radios .field--check { margin: 0; }
.cc-radios input[type="radio"] {
  width: 1.25rem; height: 1.25rem; margin-top: .15rem;
  flex: none; accent-color: var(--primary); cursor: pointer;
}
@media (pointer: coarse) { .cc-radios input[type="radio"] { width: 1.4rem; height: 1.4rem; } }
.cc-radios label {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  font-size: .95rem; font-weight: 400; margin: 0; min-height: 44px; align-items: center;
}

.cc-hint { font-size: var(--fs-xs); color: var(--muted); margin: .35rem 0 0; }
.cc-form .field--check { margin-bottom: 1.05rem; }
.cc-form .field--check label { min-height: 44px; align-items: center; }

.cc-money { position: relative; }
.cc-money input { padding-left: 2rem; }
.cc-money::before {
  content: "\20B1"; position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .95rem; pointer-events: none;
}
.cc-pct { position: relative; }
.cc-pct input { padding-right: 2rem; }
.cc-pct::after {
  content: "%"; position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .95rem; pointer-events: none;
}

/* Extra-rate rows: one bordered block each, stacked on a phone. */
.cc-extra-title { font-size: var(--fs-sm); font-weight: 600; margin: 1.4rem 0 .2rem; }
.cc-rows { display: grid; gap: .9rem; margin-top: .9rem; }
.cc-row {
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--card-hover); padding: 1rem 1rem .2rem;
}
.cc-row-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.cc-row-head strong { font-size: var(--fs-sm); }
.cc-remove {
  min-height: 44px; padding: 0 .9rem; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--danger);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
}
.cc-remove:hover { border-color: var(--danger); background: rgb(181 48 26 / .06); }
.cc-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.1rem; }
.cc-actions .btn { min-height: 44px; }

.cc-warn { font-size: var(--fs-sm); color: var(--danger); margin: .9rem 0 0; }
.cc-warn:empty { display: none; }

/* Results */
.cc-results { margin-top: 1.5rem; }
.cc-results h3 { margin-bottom: 1rem; }
.cc-big { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.cc-big > div { border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 1rem 1.1rem; background: var(--bg); }
.cc-big dt { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 .15rem; }
.cc-big dd { margin: 0; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cc-big .is-dentist dd { color: var(--primary-600); }
.cc-lines { margin: 1.1rem 0 0; display: grid; gap: .1rem; }
.cc-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--border-soft); font-size: .95rem; }
.cc-lines dt { color: var(--muted); }
.cc-lines dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }

.cc-cta { margin-top: 1.5rem; text-align: center; }
.cc-cta h3 { margin-bottom: .5rem; }
.cc-cta p { max-width: 52ch; margin-inline: auto; }
.cc-cta .btn-row { justify-content: center; margin-top: 1rem; }
.cc-disclaimer { font-size: var(--fs-sm); color: var(--muted); margin-top: 1.1rem; text-align: center; }

/* The statement exists only on paper. */
.cc-statement { display: none; }

@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; }
  .announce, .site-header, .site-footer, .skip-link, .msgr-fab, .glow,
  main > section:not(#calculator),
  #calculator .cc-screen { display: none !important; }
  #calculator { padding: 0 !important; background: #fff !important; border: 0 !important; }
  #calculator .container { max-width: none; padding: 0; }
  .cc-statement { display: block; color: #000; font-size: 11pt; line-height: 1.45; }
  .cc-statement h2 { font-size: 18pt; margin: 0 0 2pt; }
  .cc-statement .cc-st-meta { margin: 0 0 10pt; color: #333; }
  .cc-statement table { width: 100%; border-collapse: collapse; margin: 10pt 0; }
  .cc-statement th, .cc-statement td { border: 1px solid #555; padding: 4pt 6pt; text-align: right; }
  .cc-statement th:first-child, .cc-statement td:first-child { text-align: left; }
  .cc-statement tr { break-inside: avoid; }
  .cc-statement tfoot td { font-weight: 700; }
  .cc-statement dl { margin: 10pt 0; }
  .cc-statement dl div { display: flex; justify-content: space-between; border-bottom: 1px solid #aaa; padding: 3pt 0; }
  .cc-statement dd { margin: 0; font-weight: 700; }
  .cc-sign { display: flex; gap: 24pt; margin-top: 36pt; break-inside: avoid; }
  .cc-sign div { flex: 1; border-top: 1px solid #000; padding-top: 3pt; font-size: 10pt; }
  .cc-st-note { margin-top: 16pt; font-size: 9pt; color: #333; }
}