/* ===== FriendlyCalc.com Global Styles ===== */
/* Inspired by thaibudget.org — optimized for visual balance & clarity */

:root {
  --cream: #FDF8F0;
  --navy: #0D1B2A;
  --navy-light: #162638;
  --accent: #2ECDA7;
  --accent-light: #38BDF8;
  --highlight: #2ECDA7;
  --highlight-light: rgba(46,205,167,0.1);
  --red: #C00000;
  --text-dark: #2C2C2C;
  --text-medium: #5A5A5A;
  --text-light: #6E6E6E;  /* WCAG AA on cream: 4.82:1 (was #8A8A8A at 3.27:1) */
  --white: #FFFFFF;
  --border: #e2e8f0;
  --shadow: 0 4px 24px rgba(0,0,0,0.07);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.12);
  --radius: 16px;
  --radius-sm: 8px;
  --transition: 0.3s ease;
  --gradient: linear-gradient(135deg, #0D1B2A 0%, #132B3E 100%);
  --gradient-accent: linear-gradient(90deg, #2ECDA7, #38BDF8);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ===== Navigation ===== */
.nav {
  background: var(--navy);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.nav-logo {
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

body.home .nav-logo {
  max-width: 1000px;
}

.nav-logo span span {
  color: var(--accent);
}

.nav-logo svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 0.25rem;
}

.nav-links a {
  color: rgba(255,255,255,0.7);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  transition: var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
  background: rgba(255,255,255,0.1);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
}

/* ===== Homepage Search Section ===== */
.search-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 2rem 2rem;
}

.search-section h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.5px;
  margin-bottom: 1.8rem;
}

.search-section h1 em {
  font-style: normal;
  color: var(--accent);
}

.search-section p {
  color: var(--text-medium);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.search-box {
  position: relative;
  width: 100%;
  max-width: 540px;
}

.search-box input {
  width: 100%;
  padding: 0.95rem 1.2rem;
  font-size: 1.02rem;
  border: 2px solid rgba(46,205,167,0.25);
  border-radius: 60px;
  background: var(--white);
  box-shadow: 0 6px 30px rgba(46,205,167,0.1);
  outline: none;
  transition: var(--transition);
  font-family: inherit;
  color: var(--text-dark);
  text-align: center;
}

.search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 8px 40px rgba(46,205,167,0.22);
}

.search-box input::placeholder {
  color: var(--text-light);
  text-align: center;
}

.search-box .search-icon {
  display: none;
}

/* ===== Calculator Listings (Homepage) ===== */
.calc-listings {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.5rem 2rem 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem 2rem;
}

.calc-category {
  margin-bottom: 0;
}

.calc-category-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--accent);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid rgba(46,205,167,0.15);
  max-width: 230px;
}

.calc-grid {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.calc-link {
  font-size: 0.88rem;
  color: var(--navy);
  padding: 0.28rem 0;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.calc-link:hover {
  color: var(--accent);
  padding-left: 0.25rem;
}

.calc-link .link-icon {
  font-size: 0.75rem;
  opacity: 0.4;
  transition: var(--transition);
}

.calc-link:hover .link-icon {
  opacity: 0.8;
}

.calc-link.hidden,
.calc-link.collapsed {
  display: none;
}

/* Surprise Me */
.surprise-me {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 0.7rem;
  padding: 0.3rem 0.6rem;
  border-radius: 50px;
  letter-spacing: 0.02em;
  transition: var(--transition);
}

.surprise-me:hover {
  color: var(--accent);
  background: rgba(46,205,167,0.08);
}

/* Empty state (no search results) */
.empty-state {
  display: none;
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  max-width: 480px;
  margin: 0 auto;
}

.empty-state-msg {
  color: var(--text-medium);
  font-size: 0.95rem;
  margin: 0 0 0.4rem;
  line-height: 1.5;
}

.empty-state-msg span {
  color: var(--navy);
  font-weight: 600;
}

.empty-state-msg button {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
  margin-left: 0.25rem;
  transition: var(--transition);
}

.empty-state-msg button:hover {
  color: var(--accent-light);
}

.empty-state-hint {
  color: var(--text-light);
  font-size: 0.85rem;
  margin: 0 0 1rem;
  white-space: nowrap;
}

.empty-state-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  max-width: 420px;
  margin: 0 auto;
}

.empty-state-suggestions a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  background: rgba(46,205,167,0.12);
  border: 1px solid rgba(46,205,167,0.25);
  text-decoration: none;
  transition: var(--transition);
}

.empty-state-suggestions a:hover {
  background: rgba(46,205,167,0.22);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ===== Calculator Page Layout ===== */
.calc-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem;
}

.calc-header {
  margin-bottom: 1.5rem;
}

.calc-breadcrumb {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}

.calc-breadcrumb a {
  color: var(--accent);
}

.calc-breadcrumb a:hover {
  text-decoration: underline;
}

.calc-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
}

.calc-header p {
  color: var(--text-medium);
  font-size: 0.88rem;
  margin-top: 0.3rem;
  line-height: 1.5;
}

/* ===== Calculator Card ===== */
.calc-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.2rem;
}

.calc-card h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(46,205,167,0.12);
}

/* ===== Form Elements ===== */
.form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.form-row label {
  flex: 0 0 170px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-medium);
  text-align: right;
}

.form-row .input-wrap {
  flex: 1;
  position: relative;
}

.form-row input[type="number"],
.form-row input[type="text"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  border: 2px solid #e0d8cc;
  border-radius: var(--radius-sm);
  background: var(--cream);
  outline: none;
  transition: var(--transition);
  font-family: inherit;
  color: var(--text-dark);
}

.form-row input:focus,
.form-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,205,167,0.08);
  background: var(--white);
}

/* Hide number input spinner buttons */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Input prefix/suffix — fixed overlap issue with proper padding */
.input-prefix,
.input-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.82rem;
  color: var(--text-light);
  pointer-events: none;
  user-select: none;
}

.input-prefix {
  left: 0.75rem;
  font-weight: 600;
}

.input-suffix {
  right: 0.7rem;
}

.form-row .has-prefix input {
  padding-left: 1.6rem;
}

.form-row .has-suffix input {
  padding-right: 3rem;
}

/* Radio groups */
.form-row .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.form-row .radio-group label {
  flex: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  font-weight: 400;
}

.form-row .radio-group input[type="radio"] {
  accent-color: var(--accent);
}

/* ===== Results — Blue-to-Green Gradient ===== */
.results {
  background: var(--gradient);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 1rem;
  color: var(--white);
  box-shadow: 0 6px 30px rgba(27,42,74,0.2);
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.result-row:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.result-label {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.7);
}

.result-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-light);
}

.result-value.big {
  font-size: 1.5rem;
}

/* ===== Amortization / Schedule Tables ===== */
.schedule-wrap {
  margin-top: 0.5rem;
  overflow-x: auto;
}

.schedule-toggle {
  background: none;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  padding: 0.45rem 1.2rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.schedule-toggle:hover {
  background: var(--accent);
  color: var(--white);
}

/* Yearly summary rows */
.schedule-year-header td {
  background: var(--navy) !important;
  color: var(--white) !important;
  font-weight: 700 !important;
  font-size: 0.82rem;
  padding: 0.55rem 0.8rem !important;
  border-bottom: none !important;
}

table.schedule {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

table.schedule thead {
  position: sticky;
  top: 0;
}

table.schedule th {
  background: var(--navy);
  color: var(--white);
  padding: 0.6rem 0.8rem;
  text-align: right;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

table.schedule th:first-child {
  text-align: left;
  border-radius: 8px 0 0 0;
}

table.schedule th:last-child {
  border-radius: 0 8px 0 0;
}

table.schedule td {
  padding: 0.5rem 0.8rem;
  text-align: right;
  border-bottom: 1px solid #f0ebe3;
  color: var(--text-medium);
  font-variant-numeric: tabular-nums;
}

table.schedule td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--text-dark);
}

table.schedule tbody tr:hover td {
  background: rgba(46,205,167,0.04);
}

table.schedule tbody tr.active-row td {
  background: var(--highlight-light);
}

table.schedule tbody tr.active-row td:first-child {
  border-left: 3px solid var(--highlight);
}

/* Hidden schedule by default */
table.schedule {
  display: none;
}

table.schedule.open {
  display: table;
}

/* ===== Scientific Calculator ===== */
.sci-display {
  background: var(--navy);
  color: var(--accent-light);
  font-size: 1.6rem;
  font-family: 'Courier New', monospace;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  text-align: right;
  min-height: 3.2rem;
  word-break: break-all;
  margin-bottom: 0.8rem;
  overflow: hidden;
}

.sci-display .expression {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  display: block;
  min-height: 1.2rem;
}

.sci-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}

.sci-btn {
  padding: 0.65rem 0.3rem;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
  color: var(--text-dark);
  border: 1.5px solid #e0d8cc;
}

.sci-btn:hover {
  background: var(--cream);
  border-color: var(--accent);
}

.sci-btn:active {
  transform: scale(0.96);
}

.sci-btn.op {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.sci-btn.op:hover {
  background: var(--navy-light);
}

.sci-btn.fn {
  background: rgba(46,205,167,0.08);
  color: var(--navy);
  border-color: rgba(46,205,167,0.25);
}

.sci-btn.fn:hover {
  background: rgba(46,205,167,0.18);
}

.sci-btn.eq {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.sci-btn.eq:hover {
  background: var(--accent-light);
  color: var(--navy);
}

.sci-btn.danger {
  background: rgba(192,0,0,0.06);
  color: var(--red);
  border-color: rgba(192,0,0,0.15);
}

.sci-btn.danger:hover {
  background: rgba(192,0,0,0.12);
}

/* ===== GPA / Grade Dynamic Rows ===== */
.dynamic-rows {
  margin-top: 0.5rem;
}

.dynamic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.dynamic-row input,
.dynamic-row select {
  padding: 0.45rem 0.6rem;
  font-size: 0.84rem;
  border: 2px solid #e0d8cc;
  border-radius: var(--radius-sm);
  outline: none;
  font-family: inherit;
  background: var(--cream);
  transition: var(--transition);
  color: var(--text-dark);
}

.dynamic-row input:focus,
.dynamic-row select:focus {
  border-color: var(--accent);
  background: var(--white);
}

.dynamic-row .remove-btn {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.2rem;
  opacity: 0.4;
  transition: var(--transition);
}

.dynamic-row .remove-btn:hover {
  opacity: 1;
}

.add-row-btn {
  background: none;
  border: 1.5px dashed rgba(46,205,167,0.4);
  color: var(--accent);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  margin-top: 0.4rem;
}

.add-row-btn:hover {
  background: rgba(46,205,167,0.06);
  border-color: var(--accent);
}

/* ===== Clear All Link ===== */
.clear-all {
  display: block;
  margin-left: auto;
  width: fit-content;
  font-size: 0.76rem;
  color: var(--text-light);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0.3rem 0 0;
  transition: var(--transition);
}

.clear-all:hover {
  color: var(--accent);
}

/* ===== Two-Column Layout (Inputs + Results Side by Side) ===== */
.calc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: stretch;
}

.calc-layout .calc-card {
  margin-bottom: 0;
}

.calc-layout .results {
  margin-top: 0;
}

@media (max-width: 700px) {
  .calc-layout {
    grid-template-columns: 1fr;
  }
  .calc-layout .results {
    margin-top: 0;
  }
}

/* ===== Resistor Calculator ===== */
.resistor-inputs .form-row label { flex: 0 0 90px; font-size: 0.8rem; }
.resistor-inputs { padding: 1.8rem; }
.resistor-right {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.resistor-right .results {
  padding: 1.2rem 1.5rem;
  margin-top: 0;
}
.resistor-right .result-row { padding: 0.35rem 0; }
.resistor-right .result-value.big { font-size: 1.3rem; }
.resistor-preview {
  text-align: center;
  padding: 1rem 1.5rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resistor-preview svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* Color-select custom dropdown */
.color-select { position: relative; width: 100%; }
.cs-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--cream);
  border: 2px solid #e0d8cc;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}
.cs-trigger:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,205,167,0.08);
  background: var(--white);
  outline: none;
}
.cs-trigger:hover { border-color: var(--accent); }
.cs-text { flex: 1; }
.cs-arrow {
  font-size: 0.7rem;
  color: var(--text-light);
  margin-left: auto;
}
.cs-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #e0d8cc;
  flex-shrink: 0;
  display: inline-block;
}
.cs-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 2px solid #e0d8cc;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 50;
  padding: 0.25rem 0;
}
.color-select.open .cs-menu { display: block; }
.color-select.open .cs-trigger {
  border-color: var(--accent);
  background: var(--white);
}
.cs-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--text-dark);
}
.cs-opt:hover { background: rgba(46,205,167,0.08); }
.cs-opt .cs-dot { width: 11px; height: 11px; }

/* ===== Field width classes ===== */
/* Use .compact for %, rate, age, years, months, short-count fields */
.input-wrap.compact {
  max-width: 130px;
}

/* Use .medium for mid-range fields (term selects, moderate numbers) */
.input-wrap.medium {
  max-width: 200px;
}

/* Use .wide for large currency fields (home price, loan amount, balances) */
.input-wrap.wide {
  max-width: 320px;
}

/* Suffix padding for longer unit labels like "years", "months", "people" */
.form-row .has-suffix.suffix-long input {
  padding-right: 4.2rem;
}
.form-row .has-suffix.suffix-long .input-suffix {
  right: 0.7rem;
}

/* ===== Footer ===== */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,0.65);  /* WCAG AA on navy: 7.87:1 (was 0.5 / 5.18:1) */
  text-align: center;
  padding: 1.5rem 2rem;
  font-size: 0.78rem;
  margin-top: auto;
}

.footer a {
  color: var(--accent-light);
}

.footer-links {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.footer-links a {
  color: rgba(255,255,255,0.65);  /* WCAG AA on navy: 7.87:1 (was 0.4 / 3.78:1 — failed) */
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--accent-light);
}

.footer-links .sep {
  color: rgba(255,255,255,0.35);  /* decorative separator, brought up so it's visible */
  margin: 0 0.5rem;
}

/* ===== Legal / Content Pages ===== */
.content-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
}

.content-page h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.3rem;
}

.content-page .page-meta {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 2rem;
}

.content-page .page-intro {
  font-size: 0.92rem;
  color: var(--text-medium);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.content-page h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.content-page h3 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-top: 1.2rem;
  margin-bottom: 0.4rem;
}

.content-page p {
  font-size: 0.88rem;
  color: var(--text-medium);
  line-height: 1.75;
  margin-bottom: 0.8rem;
}

.content-page ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
}

.content-page ul li {
  font-size: 0.86rem;
  color: var(--text-medium);
  line-height: 1.7;
  padding-left: 1.2rem;
  position: relative;
  margin-bottom: 0.2rem;
}

.content-page ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.content-page a {
  color: var(--accent);
  transition: var(--transition);
}

.content-page a:hover {
  text-decoration: underline;
}

.content-page .contact-email {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  padding: 0.6rem 1.4rem;
  background: rgba(46,205,167,0.08);
  border: 1.5px solid rgba(46,205,167,0.2);
  border-radius: var(--radius-sm);
  margin: 1rem 0;
  transition: var(--transition);
}

.content-page .contact-email:hover {
  background: rgba(46,205,167,0.15);
  text-decoration: none;
}

/* ===== Prominent calculator warning (above card) ===== */
.calc-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--navy);
  border-radius: var(--radius);
  color: rgba(255,255,255,0.88);
  font-size: 0.88rem;
  line-height: 1.6;
}

.calc-warning strong {
  display: block;
  color: var(--white);
  font-weight: 700;
  margin-bottom: 0.15rem;
  font-size: 0.92rem;
}

.calc-warning-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--navy);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

/* ===== In-card notice (prominent but on-brand) ===== */
.calc-notice {
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  background: rgba(46,205,167,0.1);
  border: 1px solid rgba(46,205,167,0.25);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.calc-notice strong {
  color: var(--navy);
  font-weight: 700;
}

/* ===== Calculator Disclaimer ===== */
.calc-disclaimer {
  font-size: 0.76rem;
  color: var(--text-light);
  line-height: 1.6;
  text-align: center;
  max-width: 760px;
  margin: 1rem auto 0;
  padding: 1.5rem 2rem 0;
}

/* ===== Show More Toggle (Homepage) ===== */
.show-more-btn {
  display: none;
  background: none;
  border: none;
  color: var(--accent-light);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
  margin-top: 0.2rem;
  font-family: inherit;
  transition: var(--transition);
}

.show-more-btn:hover {
  color: var(--accent);
}

@media (max-width: 480px) {
  .content-page {
    padding: 1.5rem 1.2rem 3rem;
  }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .calc-listings {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
  }
}

@media (max-width: 700px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--navy);
    flex-direction: column;
    padding: 0.5rem 1rem 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }

  .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
  }

  .form-row label {
    text-align: left;
    flex: none;
  }

  .search-section {
    padding: 3rem 1.5rem 2rem;
  }

  .calc-listings {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1.5rem 3rem;
  }

  .sci-buttons {
    grid-template-columns: repeat(4, 1fr);
  }

  .result-value.big {
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .nav-logo {
    padding: 0 1rem;
  }

  .calc-page {
    padding: 1.2rem;
  }

  .calc-card {
    padding: 1.2rem;
  }
}

/* Related Calculators Section */
.related-section { margin-top: 1.5rem; }
.related-section h3 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.6rem;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.related-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: white;
  text-decoration: none;
  transition: var(--transition);
  border: 1.5px solid #c8ced6;
}
.related-link:hover {
  border-color: transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, var(--accent), var(--accent-light)) border-box;
}
.related-link svg {
  color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.related-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.related-name {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--navy);
  line-height: 1.2;
}
.related-desc {
  font-size: 0.7rem;
  color: var(--text-light);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .related-grid { grid-template-columns: 1fr; }
}


/* ===== v2.3 About this calculator (AI Overview extraction block) ===== */
.about-calc {
  margin: 1.2rem 0 0.8rem;
  padding: 0.9rem 1.15rem;
  background: #fafaf6;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-medium);
  line-height: 1.55;
}
.about-calc h3 {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.4rem;
  padding: 0;
  border: none;
}
.about-calc p { margin: 0; }

/* Breathing room between the Related grid and the trust block below it */
.related-section { margin-bottom: 2rem; }

/* Small gap between the About card and the disclaimer that follows */
.about-calc + .calc-disclaimer { margin-top: 1rem; }

/* Review stamp becomes a proper micro-footer: block level, separated by a hairline */
.review-stamp {
  display: block;
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid #e4e7ef;
  color: var(--text-light);
  font-size: 0.78rem;
  line-height: 1.55;
}
.review-stamp strong { color: var(--text-medium); font-weight: 600; }

/* ===== v3.2 Split-Card Layout ===== */
.v32-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.25rem;
  align-items: stretch;
}
.v32-split .calc-card {
  margin: 0; padding: 1.6rem 1.7rem 1.4rem;
  display: flex; flex-direction: column;
  position: relative; min-width: 0;
  border: 0 solid transparent;
  border-top-width: 3px;
  background-image:
    linear-gradient(var(--white), var(--white)),
    linear-gradient(90deg, #2ECDA7, #38BDF8);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.v32-split .form-row { margin-bottom: 0.6rem; }
.v32-split .form-row > label { flex: 0 0 120px; min-width: 120px; font-size: 0.82rem; text-align: left; }
.v32-split .form-row .input-wrap,
.v32-split .form-row .input-wrap.compact,
.v32-split .form-row .input-wrap.medium,
.v32-split .form-row .input-wrap.has-prefix,
.v32-split .form-row .input-wrap.wide { max-width: none; flex: 1; }
.v32-split .clear-all-row {
  display: flex; justify-content: flex-end; margin-top: auto; padding-top: 0.4rem;
}
.v32-split .clear-all {
  background: transparent; border: none; padding: 0.25rem 0;
  color: var(--text-light); font-size: 0.78rem; cursor: pointer; font-family: inherit;
}
.v32-split .clear-all:hover { color: var(--accent); text-decoration: underline; }

/* v3.2 Dark gradient results card */
.v32-split .calc-card.results-card {
  color: var(--white);
  box-shadow: 0 6px 30px rgba(27,42,74,0.22);
  justify-content: center;
  border-radius: var(--radius);
  background-image:
    linear-gradient(135deg, #0D1B2A 0%, #132B3E 100%),
    linear-gradient(90deg, #2ECDA7, #38BDF8);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
/* Neutralize nested .results when inside v3.2 results-card */
.v32-split .results-card .results {
  background: transparent; box-shadow: none; border-radius: 0;
  margin-top: 0; padding: 0; width: 100%;
}
.v32-split .results-card .result-row {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.v32-split .results-card .result-row:last-of-type { border-bottom: none; }
.v32-split .results-card .result-label { color: rgba(255,255,255,0.7); }
.v32-split .results-card .result-value { color: var(--accent-light); }
.v32-split .results-card .result-value.big {
  font-size: 1.75rem;
  background: var(--gradient-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (max-width: 820px) {
  .v32-split { grid-template-columns: 1fr; }
  .v32-split .form-row > label { flex: 0 0 110px; }
}

/* ===== v3.2 Live Updates Badge ===== */
.calc-header .live-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 0.75rem 0 0; padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; font-family: inherit; transition: border-color 0.2s;
}
.calc-header .live-badge:hover { border-color: var(--accent); }
.calc-header .live-badge .live-dot { box-shadow: 0 0 6px rgba(46,205,167,0.5); }
.calc-header .live-badge .live-text {
  background: linear-gradient(90deg, #2ECDA7, #38BDF8);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 700; transition: none;
}
.calc-header .live-badge.off .live-dot {
  background: #E879F9;
  box-shadow: 0 0 6px rgba(232,121,249,0.5);
}
.calc-header .live-badge.off .live-text {
  background: linear-gradient(90deg, #E879F9, #93C5FD);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.calc-header .live-badge.off:hover { border-color: #E879F9; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2ECDA7; display: inline-block;
  animation: livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 0.35; transform: scale(0.9); }
  50%     { opacity: 1;    transform: scale(1.1); }
}

/* ===== v3.2 Dark-Card Overrides ===== */
.v32-split .results-card .result-actions button {
  background: var(--gradient-accent); color: var(--navy);
  border: none; font-weight: 700;
}
.v32-split .results-card .result-actions button:hover { filter: brightness(1.05); }
.v32-split .results-card details.show-math {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
.v32-split .results-card details.show-math summary { color: var(--white); }
.v32-split .results-card details.show-math .math-body { color: rgba(255,255,255,0.8); }
.v32-split .results-card details.show-math .math-body b { color: var(--accent-light); }
.v32-split .results-card .scenario-chips { border-top-color: rgba(255,255,255,0.12); }
.v32-split .results-card .scenario-chips .chip-label { color: rgba(255,255,255,0.5); }
.v32-split .results-card .scenario-chips button {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
}
.v32-split .results-card .scenario-chips button:hover { border-color: var(--accent); color: var(--accent); }

/* ===== v3.2 Result Actions ===== */
.result-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.result-actions button {
  background: var(--cream); border: 1.5px solid var(--border);
  color: var(--text-medium); padding: 0.5rem 0.9rem;
  font-size: 0.78rem; font-weight: 600; border-radius: 50px;
  cursor: pointer; font-family: inherit; transition: var(--transition);
  min-height: 32px;
}
.result-actions button:hover { border-color: #2ECDA7; color: var(--navy); }
.result-actions button.primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.result-actions button.primary:hover { background: #2ECDA7; border-color: #2ECDA7; color: var(--navy); }
.share-toast {
  font-size: 0.72rem; color: #2ECDA7; font-weight: 600;
  align-self: center; opacity: 0; transition: opacity .3s;
}
.share-toast.visible { opacity: 1; }

/* ===== v3.2 Scenario Chips ===== */
.scenario-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem;
  padding-top: 0.8rem; border-top: 1px dashed var(--border);
}
.scenario-chips .chip-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-light); font-weight: 600; align-self: center;
}
.scenario-chips button {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 50px; padding: 0.32rem 0.7rem;
  font-size: 0.72rem; font-weight: 600; color: var(--text-medium);
  cursor: pointer; font-family: inherit; min-height: 28px;
}
.scenario-chips button:hover { border-color: #2ECDA7; color: var(--navy); }

/* ===== v3.2 Show the Math ===== */
details.show-math {
  margin-top: 0.9rem; background: var(--cream);
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 0.7rem 1rem;
}
details.show-math summary {
  cursor: pointer; font-size: 0.8rem; font-weight: 600;
  color: var(--navy); list-style: none;
}
details.show-math summary::-webkit-details-marker { display: none; }
details.show-math summary::before {
  content: "\25B8"; display: inline-block; margin-right: 0.4rem;
  transition: transform .2s;
}
details.show-math[open] summary::before { transform: rotate(90deg); }
.math-body {
  margin-top: 0.7rem; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem; color: var(--text-medium); line-height: 1.7;
}
.math-body .step { display: block; }
.math-body b { color: var(--navy); }

/* ===== v3.2 Trust Block ===== */
.trust-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 0.35rem 0 1.25rem; padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  background: var(--highlight-light);
  border: 1px solid rgba(46, 205, 167, 0.35);
  border-radius: 999px;
  font-size: 0.72rem; color: var(--text-medium); line-height: 1.2;
  text-decoration: none; transition: all 0.15s;
}
.trust-badge:hover { background: rgba(46, 205, 167, 0.18); border-color: var(--accent); }
.trust-badge svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); }
.trust-badge strong { color: var(--navy); font-weight: 600; }
.trust-badge .dot-sep {
  display: inline-block; width: 3px; height: 3px;
  background: var(--text-light); border-radius: 50%; margin: 0 0.15rem;
}
.trust-block {
  margin: 2rem 0 0; padding: 1.25rem 1.4rem 1.1rem;
  background: #fafaf6;
  border: 1px solid #eceadd; border-left: 3px solid var(--accent);
  border-radius: 8px;
  color: var(--text-medium); font-size: 0.85rem; line-height: 1.6;
}
.trust-block .trust-header {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
}
.trust-block .trust-header svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.trust-block h3 {
  margin: 0; font-size: 0.72rem; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: 0.07em; border: none; padding: 0;
}
.trust-block .trust-meta {
  margin: 0 0 0.75rem; padding: 0.7rem 0;
  border-top: 1px solid rgba(13, 27, 42, 0.08);
  border-bottom: 1px solid rgba(13, 27, 42, 0.08);
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem;
  font-size: 0.75rem; color: var(--text-light);
}
.trust-block .trust-meta .meta-item {
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
}
.trust-block .trust-meta .meta-label {
  font-weight: 600; color: var(--text-medium);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem;
}
.trust-block .trust-meta a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.trust-block .trust-meta a:hover { color: var(--navy); border-color: var(--navy); }
.trust-block .trust-disclaimer {
  margin: 0; font-size: 0.74rem; color: var(--text-light);
  font-style: italic; line-height: 1.5;
}

/* ===== v3.2 Support Content ===== */
.support-section { margin: 1.5rem 0; }
.support-section h2 {
  font-size: 1.05rem; margin: 0 0 0.55rem; color: var(--navy);
}
.support-section p,
.support-section li { font-size: 0.88rem; line-height: 1.6; color: var(--text-medium); }
.support-section ul { margin: 0; padding-left: 1.2rem; }
.support-section li { margin-bottom: 0.35rem; }
.support-section li strong { color: var(--navy); }
.worked-example {
  background: var(--cream); border-radius: 10px;
  padding: 0.8rem 1rem; font-size: 0.85rem; line-height: 1.6;
  color: var(--text-medium);
}
.faq details { border-bottom: 1px solid var(--border); padding: 0.6rem 0; }
.faq details summary {
  cursor: pointer; font-weight: 600; color: var(--navy);
  font-size: 0.9rem; list-style: none;
}
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary::before {
  content: "+"; display: inline-block; width: 1rem;
  color: #2ECDA7; font-weight: 700;
}
.faq details[open] summary::before { content: "\2212"; }
.faq details p { margin: 0.4rem 0 0.2rem 1rem; font-size: 0.85rem; }
.sources-list {
  font-size: 0.8rem; color: var(--text-light);
  padding-left: 1.1rem; margin: 0.4rem 0 0;
}
.sources-list li { margin-bottom: 0.3rem; }
.sources-list a { color: var(--text-medium); text-decoration: underline; }

/* ===== v3.2 Visually Hidden (SR) ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== v3.2 Viewport Hide (short screens) ===== */
@media (max-height: 900px) {
  .calc-header p { display: none; }
  .calc-header h1 { margin-bottom: 0.2rem; }
}

/* ===== v3.2 Trust-Block Scroll Flash ===== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.trust-block { scroll-margin-top: 1.5rem; outline: none; }
.trust-block.fc-flash { animation: fc-trust-flash 1.4s ease-out; }
@keyframes fc-trust-flash {
  0%   { background-color: rgba(46, 205, 167, 0.18); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .trust-block.fc-flash { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ===== v3.3 Universal Overflow Protection =====
   Prevents long values, large numbers, dates, radio groups, and custom
   widgets from spilling outside their containing card. Applies site-wide. */

/* Cards must clip children to the rounded edge */
.calc-card,
.v32-split .calc-card,
.v32-split .results-card {
  min-width: 0;
  overflow: hidden;
}

/* Allow text in result values to wrap and avoid horizontal overflow */
.results,
.result-row,
.result-label,
.result-value,
.sqrt-results,
.sqrt-results .result-row,
.sqrt-results .result-value,
.sqrt-results .result-label {
  min-width: 0;
}

.result-row {
  flex-wrap: wrap;
  gap: 0.4rem;
}

.result-value,
.sqrt-results .result-value,
.result-label,
.sqrt-results .result-label {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

/* Math body steps shouldn't push the card wider */
.math-body,
.math-body .step {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Form-row internals shrink properly inside narrow grid columns */
.form-row,
.form-row .input-wrap,
.form-row label {
  min-width: 0;
}

.form-row input[type="number"],
.form-row input[type="text"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row select {
  max-width: 100%;
  min-width: 0;
}

/* Fallback styling for legacy .input-group blocks
   (older calculators that pre-date the .form-row pattern). Keeps them
   from looking like raw, unstyled inputs in v32-split cards. */
.calc-card .input-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  position: relative;
  min-width: 0;
}

.calc-card .input-group > label {
  flex: 0 0 170px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-medium);
  text-align: right;
}

.calc-card .input-group > input,
.calc-card .input-group > select,
.calc-card .input-group > textarea {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  border: 2px solid #e0d8cc;
  border-radius: var(--radius-sm);
  background: var(--cream);
  outline: none;
  transition: var(--transition);
  font-family: inherit;
  color: var(--text-dark);
}

.calc-card .input-group > input:focus,
.calc-card .input-group > select:focus,
.calc-card .input-group > textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,205,167,0.08);
  background: var(--white);
}

.calc-card .input-group > .input-suffix,
.calc-card .input-group > .input-prefix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.82rem;
  color: var(--text-light);
  pointer-events: none;
  user-select: none;
}

.calc-card .input-group > .input-suffix { right: 0.7rem; }
.calc-card .input-group > .input-prefix { left: 0.75rem; font-weight: 600; }

.v32-split .calc-card .input-group > label {
  flex: 0 0 120px;
  min-width: 120px;
  font-size: 0.82rem;
  text-align: left;
}

@media (max-width: 700px) {
  .calc-card .input-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
  }
  .calc-card .input-group > label {
    text-align: left;
    flex: none;
  }
}

/* Radio-tab groups (used on pregnancy.html and others). Without this they
   shrink to intrinsic content width and can overflow narrow card columns. */
.radio-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.radio-tabs label {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border: 1.5px solid #e0d8cc;
  border-radius: var(--radius-sm);
  background: var(--cream);
  font-size: 0.82rem;
  color: var(--text-medium);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  min-width: 0;
  text-align: center;
  justify-content: center;
  transition: var(--transition);
}

.radio-tabs label:has(input:checked) {
  background: rgba(46,205,167,0.1);
  border-color: var(--accent);
  color: var(--navy);
  font-weight: 600;
}

.radio-tabs input[type="radio"] {
  accent-color: var(--accent);
}

/* Long "A + B → C" mode selectors overflow the narrow two-column form cell
   (labels are white-space:nowrap and can't shrink). .mode-row gives the tabs
   the full card width and stacks each option on its own row so nothing clips. */
.form-row.mode-row { flex-direction: column; align-items: stretch; gap: 0.4rem; }
.form-row.mode-row > label { flex: 0 0 auto; text-align: left; }
.form-row.mode-row .radio-tabs { flex-direction: column; }
.form-row.mode-row .radio-tabs label { flex: 1 1 auto; white-space: normal; }

/* Schedule tables and any wide content always scroll inside the card */
.schedule-wrap,
.results-card .schedule-wrap,
.calc-card .schedule-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* Pre/code blocks inside cards */
.calc-card pre,
.results-card pre,
.calc-card code,
.results-card code {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Long URLs/links inside cards */
.calc-card a,
.results-card a {
  overflow-wrap: anywhere;
}

/* Make sure native date inputs don't overflow */
.calc-card input[type="date"],
.calc-card input[type="datetime-local"],
.calc-card input[type="time"] {
  max-width: 100%;
}

/* Grid columns must allow shrink (some pages override grid-template-columns
   without minmax(0, ...) which creates implicit min-content overflow) */
.v32-split { min-width: 0; }
.v32-split > * { min-width: 0; }

/* =====================================================================
   Share button + share popup — used by js/share.js across every calc.
   Theme: cream card with teal→sky gradient stripe (matches inputs-card).
   ===================================================================== */

/* Icon on the primary Share button */
.result-actions button .btn-icon {
  width: 14px; height: 14px;
  vertical-align: -2px; margin-right: 0.4rem;
  display: inline-block;
}

/* Popup overlay + modal card */
.share-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13, 27, 42, 0.55);
  display: flex;
  align-items: center; justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease-out;
}
.share-overlay[hidden] { display: none; }
.share-overlay.open { opacity: 1; pointer-events: auto; }

.share-modal {
  border: 0 solid transparent;
  border-top-width: 3px;
  background-image:
    linear-gradient(var(--cream), var(--cream)),
    linear-gradient(90deg, #2ECDA7, #38BDF8);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  color: var(--navy);
  border-radius: 14px;
  width: 100%; max-width: 380px;
  box-shadow: 0 18px 60px rgba(13,27,42,0.2);
  padding: 1.4rem 1.4rem 1.55rem;
  position: relative;
  transform: translateY(8px); transition: transform .18s ease-out;
}
.share-overlay.open .share-modal { transform: translateY(0); }
.share-modal h2 {
  margin: 0 0 0.2rem; font-size: 1.05rem;
  font-weight: 700; color: var(--navy);
}
.share-modal .sm-sub {
  margin: 0 0 1.15rem; font-size: 0.78rem; color: var(--text-light);
}
.share-modal .sm-close {
  position: absolute; top: 0.8rem; right: 0.85rem;
  background: none; border: none; cursor: pointer;
  color: var(--text-light); padding: 0.25rem;
  line-height: 1; border-radius: 6px;
  font-family: inherit; transition: var(--transition);
}
.share-modal .sm-close:hover { background: var(--white); color: var(--navy); }
.share-modal .sm-close svg { width: 18px; height: 18px; display: block; }

/* Target grid + icon bubbles */
.share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem 0.4rem;
}
.share-grid button {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.4rem; padding: 0.6rem 0.25rem;
  border-radius: 10px; transition: background .14s;
  font-family: inherit;
}
.share-grid button:hover { background: var(--white); }
.share-grid .sg-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.share-grid .sg-icon svg { width: 22px; height: 22px; }
.share-grid .sg-label {
  font-size: 0.7rem; font-weight: 600; color: var(--text-medium);
  text-align: center; line-height: 1.15;
}

/* Utility icons use the FriendlyCalc gradient; social icons keep brand colors */
.sg-icon.bg-link    { background: var(--gradient-accent); color: var(--navy); }
.sg-icon.bg-wa      { background: #25D366; color: #fff; }
.sg-icon.bg-email   { background: var(--gradient-accent); color: var(--navy); }
.sg-icon.bg-sms     { background: #34C759; color: #fff; }
.sg-icon.bg-x       { background: #000; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.08); }
.sg-icon.bg-fb      { background: #1877F2; color: #fff; }
.sg-icon.bg-reddit  { background: #FF4500; color: #fff; }
.sg-icon.bg-linkedin{ background: #0A66C2; color: #fff; }

@media (max-width: 420px) {
  .share-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   ===== FC Component System v1 — Cream Studio refinement =====
   Added 2026-05-19. Shared classes that replace per-page inline
   style blocks. Naming: .fc-* prefix to avoid colliding with
   legacy class names. Migrate calculators to these gradually.
   ============================================================ */

/* --- Dynamic row (replaces inline .cat-row in grade/gpa/tournament/hours/etc.)
   Uses flexible fr-based columns with minmax(N, 1fr) so the layout never
   overflows the input card at narrow widths (~316px content area in the
   dual-panel v32-split). Labels can nowrap and overflow into the gap if
   the column is too narrow — that's fine, the input value still fits. --- */
.fc-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px 0 12px;
  border-bottom: 1px solid rgba(13, 27, 42, 0.06);
}
.fc-row:last-child { border-bottom: none; }

.fc-row label {
  font-size: 11px;
  color: var(--text-medium);
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.fc-row input,
.fc-row select {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #e0d8cc;
  background: #FDFBF7;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-dark);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  outline: none;
}

.fc-row input:hover,
.fc-row select:hover {
  border-color: #d0c4b0;
}

.fc-row input:focus,
.fc-row select:focus {
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(46, 205, 167, 0.15);
}

/* --- Lighter, less-aggressive remove control (replaces boxed × button) --- */
.fc-remove {
  background: transparent;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 36px;
  font-family: inherit;
  transition: color 0.15s, background 0.15s;
}
.fc-remove:hover,
.fc-remove:focus-visible {
  color: var(--red);
  background: rgba(192, 0, 0, 0.06);
  outline: none;
}

/* --- Add / Clear footer row (replaces stacked clear-all-row) --- */
.fc-row-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  gap: 12px;
}

.fc-add-btn {
  background: transparent;
  border: 1px dashed rgba(46, 205, 167, 0.55);
  color: var(--accent);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.fc-add-btn:hover {
  border-color: var(--accent);
  border-style: solid;
  background: rgba(46, 205, 167, 0.06);
}

.fc-clear-btn {
  background: transparent;
  border: none;
  color: var(--text-light);
  padding: 8px 4px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
}
.fc-clear-btn:hover { color: var(--red); text-decoration: underline; }

/* --- Mobile: collapse the 4-column row to a 2-row layout --- */
@media (max-width: 540px) {
  .fc-row {
    grid-template-columns: 1fr 1fr 1fr 32px;
    grid-template-areas:
      "cat cat cat remove"
      "wt  sc  out out";
    gap: 8px;
    padding: 10px 0 14px;
  }
  .fc-row > div:nth-child(1) { grid-area: cat; }
  .fc-row > div:nth-child(2) { grid-area: wt; }
  .fc-row > div:nth-child(3) { grid-area: sc; }
  .fc-row > div:nth-child(4) { grid-area: out; }
  .fc-remove { grid-area: remove; align-self: end; }
}

/* --- Radio-tabs fix: hide native radios so labels-as-tabs work --- */
/* The .radio-tabs system styles labels like buttons and reacts to
   :has(input:checked). The native radio bullets must be visually hidden
   for that pattern to work. Without this rule the bullets leak through
   and break the layout (seen on calorie-deficit.html). */
.radio-tabs input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* --- Fraction layout: stacked vertically so multi-digit numbers fit ---
   First Fraction → centered Operator → Second Fraction. Each fraction
   gets full panel width, so 3-4 digit numerators/denominators render
   without truncation. This replaces the cramped 3-column horizontal grid. */
.fc-frac-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
}

.fc-frac-row > div { min-width: 0; }

.fc-frac-row label {
  display: block;
  color: var(--text-medium);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.fc-frac-pair {
  display: flex;
  gap: 12px;
  align-items: center;
}
.fc-frac-pair input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e0d8cc;
  background: #FDFBF7;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.fc-frac-pair input:hover { border-color: #d0c4b0; }
.fc-frac-pair input:focus {
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(46,205,167,0.15);
}
.fc-frac-slash {
  color: var(--text-medium);
  font-size: 28px;
  font-weight: 300;
  user-select: none;
  line-height: 1;
}

/* Operator sits centered between the two fractions, label hidden visually */
.fc-op-select {
  display: flex;
  justify-content: center;
  padding: 2px 0;
}
.fc-op-select label {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  margin: 0;
}
.fc-op-select select {
  padding: 8px 18px 8px 16px;
  border: 1.5px solid #e0d8cc;
  background: var(--white);
  border-radius: var(--radius-sm);
  font-size: 20px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-dark);
  min-width: 88px;
  text-align: center;
  text-align-last: center;
}
.fc-op-select select:hover { border-color: var(--accent); }
.fc-op-select select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,205,167,0.15);
}

/* ---- Global keyboard focus visibility (a11y, added 2026-06) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent, #2ECDA7);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Skip link (a11y, 2026-06) ---- */
.skip-link{position:absolute;left:-9999px;top:auto;z-index:1000;background:var(--navy,#0D1B2A);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0;top:0}

/* Compound time inputs (h/min/sec) and any segmented row: stack the label
   directly on top of its inputs (tight gap, NOT the row's 1rem gap) so the
   label always sits right next to what it's labeling, and the segment boxes
   get the full card width. */
.calc-card .form-row:has(.time-inputs),
.calc-card .form-row:has(.time-row),
.calc-card .form-row:has(.hms-row),
.calc-card .form-row:has(input[id="hours"]),
.calc-card .form-row:has(input[id="minutes"]),
.calc-card .form-row:has(input[id="seconds"]),
.calc-card .form-row:has(input[id$="Min"]),
.calc-card .form-row:has(input[id$="Sec"]) {
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.3rem;
}
.calc-card .form-row:has(.time-inputs) > label,
.calc-card .form-row:has(.time-row) > label,
.calc-card .form-row:has(.hms-row) > label,
.calc-card .form-row:has(input[id="hours"]) > label,
.calc-card .form-row:has(input[id="minutes"]) > label,
.calc-card .form-row:has(input[id="seconds"]) > label,
.calc-card .form-row:has(input[id$="Min"]) > label,
.calc-card .form-row:has(input[id$="Sec"]) > label {
  flex: 0 0 100%;
  text-align: left;
  margin: 0;
}
.calc-card .time-inputs,
.calc-card .time-row,
.calc-card .hms-row { width: 100%; }

/* .dims-grid: pair short number inputs into 2 columns (label tight on top,
   unit stays in the box). Used to shorten tall input cards (e.g. btu). */
.calc-card .dims-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.9rem; margin-bottom: 0.7rem; }
.calc-card .dims-grid .form-row { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin: 0; }
.calc-card .dims-grid .form-row > label { flex: none; min-width: 0; text-align: left; }
.calc-card .dims-grid .input-wrap { width: 100%; position: relative; }

/* ===== Standardized input preset buttons (Option 1 — soft tint chip) ===== */
.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 1rem;
}
.preset-btn {
  padding: 0.5rem 0.95rem;
  min-height: 38px;
  border: 1.5px solid rgba(46, 205, 167, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(46, 205, 167, 0.08);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: var(--transition);
}
.preset-btn:hover {
  background: rgba(46, 205, 167, 0.16);
  border-color: var(--accent);
}
.preset-btn.active,
.preset-btn.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy);
}
.preset-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== v3.4 Compact stat results (inside the dark .results-card) =====
   Replaces the old per-page .stats-grid / .stat-box pattern, which put white
   cards on the navy gradient and collapsed to one very tall column inside the
   narrow results half of .v32-split. Structure: one hero stat, a tile grid of
   supporting stats, and an optional strip of labelled rows or meters.
   Reference implementation: calculators/word-counter.html */
.fc-stats {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* --- Hero: the single headline number --- */
.fc-stat-hero {
  text-align: center;
  padding: 0 0 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.fc-stat-hero-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.fc-stat-hero-value {
  display: block;
  margin: 0.1rem 0 0.15rem;
  font-size: 3.4rem;
  line-height: 1.05;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fc-stat-hero-value.compact { font-size: 2.4rem; }
.fc-stat-hero-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
}
.fc-stat-hero-note b {
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Tile grid: supporting stats --- */
.fc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 0.6rem;
}
.fc-stat-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-stat-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fc-stat-grid.cols-3 .fc-stat-tile-label { font-size: 0.62rem; letter-spacing: 0.04em; }
.fc-stat-grid.cols-3 .fc-stat-tile { padding: 0.5rem 0.55rem 0.55rem; }
.fc-stat-grid.cols-3 .fc-stat-tile-value { font-size: 1.2rem; }
.fc-stat-tile {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 0.55rem 0.7rem 0.6rem;
  min-width: 0;
}
.fc-stat-tile-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-stat-tile-value {
  display: block;
  margin-top: 0.1rem;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--accent-light);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.fc-stat-tile-note {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.45);
}

/* --- Strip: grouped label/value rows and meters --- */
.fc-stat-strip {
  background: rgba(56,189,248,0.07);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 0.1rem 0.8rem;
}
.fc-stat-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
}
.fc-stat-row + .fc-stat-row {
  border-top: 1px solid rgba(255,255,255,0.08);
}
.fc-stat-row > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--accent);
}
.fc-stat-row-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-stat-row-note {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  margin-left: 0.35rem;
}
.fc-stat-row-value {
  margin-left: auto;
  padding-left: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Meter rows (e.g. platform character limits) --- */
.fc-meter { padding: 0.5rem 0; }
.fc-meter + .fc-meter { border-top: 1px solid rgba(255,255,255,0.08); }
.fc-meter-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.32rem;
}
.fc-meter-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-meter-cap {
  font-size: 0.68rem;
  font-weight: 400;
  color: rgba(255,255,255,0.42);
}
.fc-meter-left {
  margin-left: auto;
  padding-left: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fc-meter-track {
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.13);
  overflow: hidden;
}
.fc-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--gradient-accent);
  transition: width 0.2s ease;
}
.fc-meter.over .fc-meter-left { color: #FF8A8A; }
.fc-meter.over .fc-meter-fill { background: linear-gradient(90deg, #FF8A8A, #FF6B6B); }

/* --- Inset sub-panel (a titled block inside the dark results card) --- */
.fc-subpanel {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 0.85rem 0.9rem 0.75rem;
}
.fc-subpanel-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.6rem;
}
/* Input rows that live inside the dark results card need a light label */
.v32-split .results-card .form-row > label { color: rgba(255,255,255,0.75); text-align: left; }

/* --- Chips (recent picks, tags) inside the dark card --- */
.fc-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.fc-chip {
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(46,205,167,0.14);
  border: 1px solid rgba(46,205,167,0.28);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}
.fc-stat-empty {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
}

@media (prefers-reduced-motion: reduce) {
  .fc-meter-fill { transition: none; }
}
@media (max-width: 520px) {
  .fc-stat-hero-value { font-size: 2.7rem; }
  .fc-stat-hero-value.compact { font-size: 2rem; }
}

/* ===== Mobile fix: stacked form rows must not keep a horizontal flex-basis =====
   At <=700px `.form-row` switches to flex-direction: column, so any
   `flex: 0 0 <length>` on its label is applied to HEIGHT, not width. The v3.2
   rules (.v32-split .form-row > label: 120px, and 110px under 820px) and the
   resistor override were therefore reserving ~110px of empty vertical space
   above every input on phones. Reset them once the row is stacked. */
@media (max-width: 700px) {
  .v32-split .form-row > label,
  .calc-layout .form-row > label,
  .resistor-inputs .form-row label {
    flex: 0 0 auto;
    min-width: 0;
    text-align: left;
  }
}

/* ===== v3.5 — Field hints, inline field errors, formula footnote =====
   `.formula-note` was used on 31 calculator pages but had NO rule in this
   stylesheet, so it rendered as full-size body copy (worst on the light
   inputs card, where it dominated the form). Styled here as a quiet
   footnote, with a variant for the dark v3.2 results card. */
.form-hint {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-light);
  margin: 0 0 0.9rem;
}

.field-error {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid #cc3d3d;
  border-radius: var(--radius-sm);
  background: rgba(204,61,61,0.07);
  color: #9e2a2a;
  font-size: 0.78rem;
  line-height: 1.45;
}
.field-error[hidden] { display: none; }

.formula-note {
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--text-light);
}
.formula-note a {
  color: var(--text-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.formula-note a:hover { color: var(--accent); }

/* Dark-card variant — scoped to the v3.2 results card only. A bare
   `.results .formula-note` selector would also hit the light `.results`
   blocks on area/plate-calculator and paint white-on-white. */
.v32-split .results-card .formula-note {
  border-top-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.62);
}
.v32-split .results-card .formula-note a { color: rgba(255,255,255,0.85); }
.v32-split .results-card .formula-note a:hover { color: var(--accent-light); }

/* ===== v3.5 — .input-wrap must stand on its own =====
   The prefix/suffix `position: absolute` was only anchored by
   `.form-row .input-wrap { position: relative }`, and the field styling only
   by `.form-row input[...]`. Any `.input-wrap` built outside a `.form-row`
   (dynamic rows, custom grids) therefore rendered as a bare browser input
   with its unit label escaping to the nearest positioned ancestor — e.g.
   workout-volume stacked nine "sets/reps/lbs" labels on top of each other
   outside the card. Anchor and style `.input-wrap` directly. */
.input-wrap { position: relative; }

.input-wrap > input[type="number"],
.input-wrap > input[type="text"],
.input-wrap > input[type="date"],
.input-wrap > input[type="time"],
.input-wrap > select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  border: 2px solid #e0d8cc;
  border-radius: var(--radius-sm);
  background: var(--cream);
  outline: none;
  transition: var(--transition);
  font-family: inherit;
  color: var(--text-dark);
}
.input-wrap > input:focus,
.input-wrap > select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,205,167,0.08);
  background: var(--white);
}
.input-wrap.has-prefix > input { padding-left: 1.6rem; }
.input-wrap.has-suffix > input { padding-right: 3rem; }
.input-wrap.has-suffix.suffix-long > input { padding-right: 4.2rem; }