/* ============================================================
   CalculateMeasure.com — Calculator Page Styles
   Used on all full calculator pages (not embeds)
   ============================================================ */

/* --- Calculator Page Layout --- */
.calc-page {
  padding: var(--space-6) 0 var(--space-12);
}

.calc-page__header {
  margin-bottom: var(--space-6);
}

.calc-page__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.calc-page__intro {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  line-height: var(--leading-relaxed);
  max-width: 680px;
}

/* --- Calculator Widget --- */
.calc-widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.calc-widget__body {
  padding: var(--space-5);
}

/* Form inputs */
.calc-field {
  margin-bottom: var(--space-4);
}

.calc-field:last-of-type { margin-bottom: var(--space-5); }

.calc-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.calc-label__hint {
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
}

.calc-input-group {
  display: flex;
  gap: var(--space-2);
}

.calc-input {
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 44px;
}

.calc-input::placeholder { color: var(--cm-slate-400); }

.calc-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.calc-input--error {
  border-color: var(--color-error);
}

.calc-input--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.calc-select {
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 44px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 80px;
}

.calc-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.calc-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
  display: none;
}

.calc-error.is-visible { display: block; }

/* Actions */
.calc-actions {
  display: flex;
  gap: var(--space-3);
}

.calc-actions .btn { flex: 1; }

/* --- Result Panel --- */
.calc-result {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-result-bg);
}

.calc-result.is-visible { display: block; }

.calc-result__body {
  padding: var(--space-5);
}

.calc-result__primary {
  text-align: center;
  margin-bottom: var(--space-4);
}

.calc-result__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.calc-result__value {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-result);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.calc-result__unit {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  margin-left: var(--space-1);
}

.calc-result__explanation {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

/* Secondary results */
.calc-result__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(5, 150, 105, 0.15);
}

.calc-result__detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-sm);
}

.calc-result__detail-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.calc-result__detail-value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* --- Content Sections (below calculator) --- */
.calc-content {
  margin-top: var(--space-8);
}

.calc-section {
  margin-bottom: var(--space-8);
}

.calc-section__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border-light);
}

.calc-section p,
.calc-section li {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.calc-section ul, .calc-section ol {
  padding-left: var(--space-5);
}

.calc-section li { margin-bottom: var(--space-2); }

/* Formula display */
.formula-box {
  background: var(--cm-slate-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: center;
  overflow-x: auto;
}

/* Your calculation (substituted values) */
.your-calc-box {
  background: var(--cm-blue-50);
  border: 1px solid var(--cm-blue-100);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: center;
  display: none;
}

.your-calc-box.is-visible { display: block; }

/* Worked example */
.example-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.example-box__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-4) 0;
}

.faq-item:last-child { border-bottom: none; }

.faq-question {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  padding: 0;
  font-family: var(--font-sans);
}

.faq-question__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
}

.faq-item.is-open .faq-question__icon { transform: rotate(180deg); }

.faq-answer {
  display: none;
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.faq-item.is-open .faq-answer { display: block; }

/* --- Related Calculators --- */
.related-calcs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* --- Embed Button / Modal --- */
.embed-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.embed-trigger:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.embed-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.embed-modal-overlay.is-open { display: flex; }

.embed-modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-6);
}

.embed-modal__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.embed-modal__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.embed-modal__code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--cm-slate-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.embed-modal__actions {
  display: flex;
  gap: var(--space-3);
}

/* Sources / disclaimer */
.calc-sources {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.calc-sources a {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.calc-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  background: var(--cm-slate-50);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border);
}

/* --- Responsive: Calculator Page --- */

@media (min-width: 640px) {
  .calc-input-group--side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .calc-input-group--side .calc-field { margin-bottom: 0; }

  .calc-result__details { grid-template-columns: 1fr 1fr; }
  .related-calcs { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .calc-page__title { font-size: var(--text-3xl); }

  .calc-widget__body { padding: var(--space-6); }
  .calc-result__body { padding: var(--space-6); }
}

@media (min-width: 1024px) {
  .related-calcs { grid-template-columns: repeat(3, 1fr); }
  
  .calc-page--with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
    align-items: start;
  }
}

/* --- Multi-mode calculator controls --- */
.calc-mode-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-1);
  background: var(--cm-slate-50);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}
.calc-mode-tab {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  text-align: left;
}
.calc-mode-tab:hover { color: var(--color-primary); }
.calc-mode-tab[aria-selected="true"] {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.calc-mode-panel[hidden] { display: none !important; }

.calc-swap-row {
  display: flex;
  justify-content: center;
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
}
.calc-swap-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
}
.calc-swap-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

@media (min-width: 640px) {
  .calc-mode-tabs { grid-template-columns: repeat(2, 1fr); }
}


/* Stage 4C calculator discovery */
.calculator-trust-strip {
  display:flex; flex-wrap:wrap; gap:.55rem; margin:1rem 0 0; padding:0; list-style:none;
}
.calculator-trust-strip li {
  padding:.35rem .58rem; border:1px solid var(--color-border); border-radius:999px;
  background:#fff; color:var(--color-text-secondary); font-size:.74rem; font-weight:650;
}
.related-tools-section { padding:2.5rem 0 3.5rem; background:var(--cm-slate-50,#f8fafc); }
.related-tools-section[hidden] { display:none; }
.related-tools-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1rem; }
.related-tools-heading h2 { margin:.15rem 0; }
.related-tools-heading p { margin:0; color:var(--color-text-secondary); }
.related-tools-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; }
.related-tool-card {
  display:flex; min-height:190px; flex-direction:column; padding:1rem;
  border:1px solid var(--color-border); border-radius:14px; background:#fff; color:inherit;
}
.related-tool-card:hover { text-decoration:none; border-color:var(--cm-blue-200); box-shadow:var(--shadow-sm); }
.related-tool-card__category { color:var(--cm-brand-blue,#1264E8); font-size:.68rem; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.related-tool-card strong { margin:.45rem 0; font-size:.96rem; line-height:1.3; }
.related-tool-card > span:not(.related-tool-card__category) { color:var(--color-text-secondary); font-size:.8rem; line-height:1.5; }
.related-tool-card em { margin-top:auto; padding-top:.8rem; color:var(--cm-brand-blue,#1264E8); font-size:.78rem; font-style:normal; font-weight:700; }
@media(max-width:900px){.related-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.related-tools-grid{grid-template-columns:1fr;}.related-tools-heading{display:block;}}


/* Stage 4D content depth */
.calculator-guide { padding:3rem 0; border-top:1px solid var(--color-border); }
.calculator-guide > .container > h2 { margin:.2rem 0 .75rem; font-size:clamp(1.45rem,3vw,2rem); }
.calculator-guide > .container > p:not(.eyebrow) { max-width:760px; color:var(--color-text-secondary); line-height:1.7; }
.calculator-guide__grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0 2.25rem; }
.calculator-guide__grid > div { padding:1.15rem; border:1px solid var(--color-border); border-radius:14px; background:#fff; }
.calculator-guide__grid h3 { margin:0 0 .65rem; font-size:1rem; }
.calculator-guide__grid p,.calculator-guide__grid li { color:var(--color-text-secondary); font-size:.88rem; line-height:1.6; }
.calculator-guide__grid ul { margin:0; padding-left:1.2rem; }
.calculator-guide__grid li + li { margin-top:.4rem; }
.calculator-faq { max-width:820px; }
.calculator-faq h2 { margin:0 0 .8rem; font-size:1.35rem; }
.calculator-faq details { border-top:1px solid var(--color-border); padding:.8rem 0; }
.calculator-faq details:last-child { border-bottom:1px solid var(--color-border); }
.calculator-faq summary { cursor:pointer; font-weight:700; }
.calculator-faq details p { color:var(--color-text-secondary); font-size:.88rem; line-height:1.6; margin:.6rem 0 .2rem; }
@media(max-width:700px){.calculator-guide__grid{grid-template-columns:1fr;}}


/* Stage 4J unified calculator experience */

/* Newer calculator page shell */
.calculator-hero {
  padding:var(--space-5) 0 var(--space-3);
}
.calculator-hero h1 {
  margin:.2rem 0 .55rem;
  font-size:clamp(1.8rem,4vw,2.55rem);
  line-height:1.12;
}
.calculator-hero > .container > p:not(.eyebrow) {
  max-width:720px;
  margin:0;
  color:var(--color-text-secondary);
  line-height:1.65;
}

.calculator-section {
  padding:var(--space-4) 0 var(--space-10);
}
.calculator-layout {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(250px,.75fr);
  gap:1.25rem;
  align-items:start;
}
.calculator-widget,
.calculator-sidebar {
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
}
.calculator-widget {
  padding:var(--space-5);
}
.calculator-widget .calc-fields {
  display:grid;
  gap:var(--space-4);
}
.calculator-widget .calc-field {
  margin:0;
}
.calculator-widget .calc-field label {
  display:block;
  margin-bottom:var(--space-2);
  color:var(--color-text);
  font-size:var(--text-sm);
  font-weight:var(--font-semibold);
}
.calculator-widget .calc-actions {
  margin-top:var(--space-5);
}
.calculator-widget > .calc-result {
  margin-top:var(--space-5);
  padding:var(--space-5);
  border:1px solid rgba(5,150,105,.2);
  border-radius:var(--radius-lg);
  background:var(--color-result-bg);
  text-align:center;
}
.calculator-widget > .calc-result .calc-result__value {
  margin:.3rem 0 .55rem;
}
.calculator-widget > .calc-result #s4-detail {
  color:var(--color-text-secondary);
  font-size:var(--text-sm);
  line-height:1.55;
}
.calculator-widget > .calc-error {
  min-height:1.2em;
  margin:.7rem 0 0;
}
.calculator-sidebar {
  position:sticky;
  top:84px;
  padding:var(--space-5);
}
.calculator-sidebar h2 {
  margin:0 0 .7rem;
  font-size:1rem;
}
.calculator-sidebar p {
  color:var(--color-text-secondary);
  font-size:.84rem;
  line-height:1.6;
}
.calculator-sidebar .btn {
  width:100%;
  margin-top:.5rem;
}

/* Shared page header/actions for the ten original calculators */
.calc-page__header {
  padding-top:.25rem;
}
.calc-page__header .mt-4 {
  margin-top:1rem;
}
.embed-trigger {
  min-height:40px;
}

/* Make result transitions and keyboard focus more obvious */
.calc-input:hover,
.calc-select:hover {
  border-color:var(--cm-slate-400);
}
.calc-input:focus-visible,
.calc-select:focus-visible,
.calc-actions .btn:focus-visible,
.embed-trigger:focus-visible {
  outline:3px solid rgba(18,100,232,.18);
  outline-offset:2px;
}
.calc-result.is-visible {
  animation:cm-result-in .18s ease-out;
}
@keyframes cm-result-in {
  from { opacity:0; transform:translateY(4px); }
  to { opacity:1; transform:translateY(0); }
}

@media(max-width:800px) {
  .calculator-layout { grid-template-columns:1fr; }
  .calculator-sidebar { position:static; }
}
@media(max-width:560px) {
  .calculator-hero { padding-top:var(--space-4); }
  .calculator-widget,
  .calculator-sidebar { padding:var(--space-4); border-radius:var(--radius-lg); }
  .calculator-widget .calc-actions,
  .calc-widget .calc-actions { flex-direction:column; }
  .calculator-widget .calc-actions .btn,
  .calc-widget .calc-actions .btn { width:100%; }
  .calc-input-group { flex-direction:column; }
  .calc-select { width:100%; }
  .calculator-trust-strip { gap:.4rem; }
  .calculator-trust-strip li { font-size:.68rem; }
}

.calculator-hero__actions {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1rem;
}
.calculator-hero__actions .embed-trigger {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}


/* Stage 4O result polish */
.calc-result__detail-row {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.45rem 0;
  border-top:1px solid rgba(5,150,105,.12);
  text-align:left;
}
.calc-result__detail-row:first-child { margin-top:.65rem; }
.calc-result__detail-row span { color:var(--color-text-secondary); }
.calc-result__detail-row strong { color:var(--color-text); text-align:right; }
.related-tool-card {
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.related-tool-card:hover {
  transform:translateY(-2px);
  border-color:var(--cm-blue-200);
  box-shadow:var(--shadow-md);
}
@media(max-width:560px){
  .calc-result__detail-row { align-items:flex-start; }
}

/* Stage 4P trust layer */
.calculator-trust-strip a {
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(18,100,232,.28);
  text-underline-offset:3px;
}
.calculator-trust-strip a:hover { color:var(--cm-brand-blue,#1264E8); }
.calculator-guide a { text-underline-offset:3px; }

/* Stage 4Q authoritative sources */
.calculator-sources {
  margin:1.5rem 0;
  padding:1.1rem 1.2rem;
  border:1px solid var(--cm-blue-200,#bfdbfe);
  border-radius:var(--radius-lg,14px);
  background:var(--cm-blue-50,#eff6ff);
}
.calculator-sources h3 { margin-top:0; }
.calculator-sources p:last-child { margin-bottom:0; }
.calculator-source-note { font-size:.85rem; color:var(--color-text-secondary); }