/* ──────────────────────────────────────────────────────────────────────
   Shared styles for /tools calculators (gold/charcoal brand)
   ────────────────────────────────────────────────────────────────────── */
.calc {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
}
.calc-header { margin-bottom: 1.75rem; }
.calc-header h1 { margin: 0 0 0.6rem; }
.calc-subtitle { color: var(--text-secondary); line-height: 1.6; max-width: 65ch; }

.calc-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 1.6rem;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
}
@media (max-width: 560px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-field { display: flex; flex-direction: column; gap: 0.4rem; }
.calc-field.calc-field-full { grid-column: 1 / -1; }
.calc-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.calc-input-wrap { position: relative; display: flex; align-items: center; }
.calc-input-wrap .calc-affix {
  position: absolute;
  right: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  pointer-events: none;
}
.calc-input-wrap .calc-affix-left {
  left: 0.9rem;
  right: auto;
}
.calc-input-wrap--prefix input { padding-left: 1.95rem; }
.calc-input-wrap--suffix input { padding-right: 2.4rem; }

.calc input[type="number"],
.calc select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: 9px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.98rem;
  transition: border-color 140ms ease;
  -moz-appearance: textfield;
}
.calc input[type="number"]::-webkit-outer-spin-button,
.calc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc input:focus, .calc select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.calc .calc-seg { display: inline-flex; gap: 0.4rem; }
.calc .calc-seg button {
  flex: 1;
  padding: 0.6rem 0.5rem;
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: 9px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 140ms ease;
}
.calc .calc-seg button[aria-pressed="true"] {
  background: var(--accent-glow);
  border-color: var(--accent-line);
  color: var(--accent-bright);
}

.calc-result {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface);
  padding: 1.5rem 1.6rem;
}
.calc-result-primary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.calc-result-primary .calc-result-label { color: var(--text-secondary); font-size: 0.9rem; }
.calc-result-primary .calc-result-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent-bright);
  line-height: 1.1;
}
.calc-result-value.is-pos { color: var(--green); }
.calc-result-value.is-neg { color: var(--red); }
.calc-result-rows {
  margin-top: 1.2rem;
  display: grid;
  gap: 0.65rem;
}
.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.calc-result-row:last-child { border-bottom: none; padding-bottom: 0; }
.calc-result-row .calc-rk { color: var(--text-secondary); }
.calc-result-row .calc-rv { font-family: var(--font-mono); color: var(--text-primary); }

.calc-note {
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
  max-width: 70ch;
}
.calc-explainer { margin-top: 2.5rem; }
.calc-explainer h2 { margin-bottom: 0.6rem; }
.calc-explainer p { color: var(--text-secondary); line-height: 1.65; max-width: 72ch; }
.calc-explainer h3 { margin: 1.4rem 0 0.4rem; font-size: 1.05rem; }

.tools-index { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 560px) { .tools-index { grid-template-columns: 1fr; } }
.tools-index a {
  display: block; padding: 1.2rem 1.3rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-card); text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}
.tools-index a:hover { border-color: var(--accent-line); background: var(--bg-hover); }
.tools-index .ti-title { display: block; font-family: var(--font-serif); font-size: 1.15rem; color: var(--text-primary); margin-bottom: 0.25rem; }
.tools-index .ti-desc { display: block; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; }