/* ==========================================================================
   Jyoti: free calculators (/calculators, docs/SEO_PROGRAM.md WP4)
   Plain CSS, no framework. Loaded after /static/seo.css (WP3), which
   already defines the shared --pc-* tokens, .pageWrap/.card/.lead/.faq/
   .btn-primary/.btn-secondary classes this file builds on rather than
   redefines.
   ========================================================================== */

.calcGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0 0 24px;
}

.calcCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  background: rgba(255, 255, 255, .05);
  border: 1.5px solid var(--pc-gold, #E0A63E);
  border-radius: 14px;
  padding: 20px 22px;
  color: var(--pc-cream, #EFEAE0);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.calcCard:hover {
  text-decoration: none;
  transform: translateY(-2px);
  background: rgba(240, 200, 120, .12);
  box-shadow: 0 8px 24px rgba(217, 156, 51, .25);
}

.calcCard h2 { margin: 0; color: var(--pc-gold-light, #F0C878); }

.calcCard p {
  margin: 0;
  font-size: 13.5px;
  color: var(--pc-text-muted, #C6C4D6);
}

.calcCard-cta {
  margin-top: auto;
  padding-top: 4px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--pc-gold-light, #F0C878);
}

.calcCtaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 28px;
}

.calcFormCard { max-width: 520px; }

.calcForm .field {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calcForm label {
  font-size: 13px;
  font-weight: 700;
  color: var(--pc-card-text, #2A2620);
}

.calcForm input {
  font: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--pc-input-border, #D9CFBB);
  background: #fff;
  color: var(--pc-card-text, #2A2620);
}

.calcForm input:focus-visible {
  outline: 2px solid var(--pc-gold, #E0A63E);
  outline-offset: 1px;
}

.fieldHint {
  margin: 0;
  font-size: 12px;
  color: var(--pc-card-muted, #6E6857);
}

.calcCandidates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.calcCandidates .pill {
  font: inherit;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--pc-gold, #E0A63E);
  background: transparent;
  color: #8A5D14;
  cursor: pointer;
}

.calcCandidates .pill:hover { background: rgba(224, 166, 62, .12); }

.calcStatus {
  margin: 0 0 14px;
  font-size: 13.5px;
  min-height: 1.2em;
  color: var(--pc-card-text, #2A2620);
}

.calcStatus.error { color: var(--pc-bad, #B23A3A); }

.calcNoscript {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--pc-card-muted, #6E6857);
}

.calcForm.pending .btn-primary { opacity: .7; cursor: progress; }

.calcResultPanel { max-width: 640px; }

.explainList {
  list-style: disc;
  margin: 0 0 16px;
  padding-left: 20px;
}

.explainList li {
  margin: 0 0 8px;
  line-height: 1.55;
}

.resultList {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}

.resultList dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pc-card-muted, #6E6857);
  margin: 0;
}

.resultList dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
}

.resultSubList {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 10px;
  margin: 2px 0;
  font-weight: 400;
}

.resultSubList dt {
  font-size: 11px;
  text-transform: none;
  color: var(--pc-card-muted, #6E6857);
}

.resultSubList dd {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
}

.anchorNote {
  color: var(--pc-text-muted, #C6C4D6);
  font-size: 12px;
  font-style: italic;
}