/* ─────────────────────────────────────────────────────────────────────────
   Compost Atlas — Day 9 frontend styles
   Single-page calculator: three input cards → results grid + strips.
   Palette tuned to match the project-description page (compost-atlas.html).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --green-deep:   #1b4332;
  --green-mid:    #2d6a4f;
  --green-soft:   #52b788;
  --green-pale:   #d8f3dc;
  --green-tint:   #f0f9f1;
  --ink:          #1a1a1a;
  --ink-soft:     #4a4a4a;
  --ink-mute:     #6f6f6f;
  --line:         #d9e3d8;
  --line-soft:    #ecf2eb;
  --bg:           #fafdfa;
  --warn:         #b95000;
  --warn-bg:      #fdf4ec;
  --ok:           #2d6a4f;
  --partial:      #b95000;
  --exceeds:      #98443a;
  --na:           #6f6f6f;
  --radius:       6px;
  --shadow:       0 1px 2px rgba(27,67,50,0.06), 0 4px 12px rgba(27,67,50,0.05);
  --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "SF Mono", "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── header ─────────────────────────────────────────────────────────── */

.site-header {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%);
  color: var(--green-pale);
  padding: 24px 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.site-header h1 span { color: var(--green-soft); }
.site-header .tagline {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: rgba(216,243,220,0.78);
  max-width: 700px;
}
.header-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.85rem;
}
.header-meta .rev {
  background: rgba(216,243,220,0.12);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
}
.header-meta .docs-link {
  color: var(--green-pale);
  text-decoration: none;
  border-bottom: 1px dashed rgba(216,243,220,0.5);
  padding-bottom: 1px;
}
.header-meta .docs-link:hover { color: white; border-bottom-color: white; }

/* ── main + cards ───────────────────────────────────────────────────── */

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 48px;
  width: 100%;
  flex: 1;
}

.input-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 1000px) {
  .input-grid {
    grid-template-columns: 320px 1fr 320px;
  }
  .input-grid .compost { grid-row: span 2; }
  .input-grid .actions { grid-column: 1 / -1; }
}

.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card > header {
  padding: 16px 20px 10px;
  background: var(--green-tint);
  border-bottom: 1px solid var(--line);
}
.card > header h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--green-deep);
}
.card > header .card-sub {
  margin: 4px 0 0;
  font-size: 0.83rem;
  color: var(--ink-soft);
}
.card .muted { color: var(--ink-mute); font-weight: 400; }

.card fieldset {
  border: none;
  border-top: 1px solid var(--line-soft);
  padding: 14px 20px;
  margin: 0;
}
.card fieldset:first-of-type { border-top: none; }
.card fieldset legend {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-mid);
  font-weight: 600;
  padding: 0;
  margin-bottom: 8px;
}
.card fieldset legend .muted {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  font-weight: 400;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 12px;
}
.card.location .field-grid,
.card.application .field-grid {
  grid-template-columns: 1fr;
  padding: 14px 20px;
}
.card.location > header + .field-grid,
.card.application > header + .field-grid {
  /* fieldset replacement — pad like a fieldset */
}

label {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  color: var(--ink-soft);
  gap: 3px;
}
label small {
  color: var(--ink-mute);
  font-size: 0.74rem;
}
input[type="text"],
input[type="number"],
select {
  font: inherit;
  font-size: 0.92rem;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: white;
  color: var(--ink);
  width: 100%;
}
input[type="number"] { font-family: var(--font-mono); }
input:focus, select:focus {
  outline: 2px solid var(--green-soft);
  outline-offset: -1px;
  border-color: var(--green-soft);
}
input:invalid { border-color: var(--warn); }

.guardrail {
  margin: 14px 20px 0;
  padding: 10px 12px;
  background: var(--green-tint);
  border-left: 3px solid var(--green-soft);
  border-radius: 4px;
  font-size: 0.83rem;
  color: var(--ink-soft);
}
.guardrail strong { color: var(--green-deep); }

/* ── submit + status ─────────────────────────────────────────────────── */

.actions {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 4px;
  flex-wrap: wrap;
}
button[type="submit"] {
  background: var(--green-deep);
  color: white;
  border: none;
  padding: 11px 28px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms ease;
}
button[type="submit"]:hover  { background: var(--green-mid); }
button[type="submit"]:active { background: var(--green-soft); color: var(--green-deep); }
button[type="submit"][disabled] { background: var(--ink-mute); cursor: not-allowed; }

.status {
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}
.status.ok    { color: var(--ok);    }
.status.warn  { color: var(--warn);  }
.status.error { color: var(--exceeds); }

.action-note {
  font-size: 0.78rem;
  color: var(--ink-mute);
  font-style: italic;
  margin-left: auto;
}

/* ── results ─────────────────────────────────────────────────────────── */

#results {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 2px solid var(--green-soft);
}

.results-summary {
  font-size: 1rem;
  color: var(--green-deep);
  background: var(--green-tint);
  padding: 12px 18px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  border-left: 4px solid var(--green-soft);
}

#warnings-region:not(:empty) {
  margin-bottom: 18px;
}
.warning {
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.88rem;
  color: var(--warn);
  margin-bottom: 6px;
}

.results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 1000px) {
  .results-grid { grid-template-columns: 1fr 1.4fr 1fr; }
}

.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
}
.panel h3 {
  margin: 0;
  font-size: 1.02rem;
  color: var(--green-deep);
  font-weight: 600;
}
.panel h4 {
  margin: 18px 0 6px;
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green-mid);
}
.panel-sub {
  margin: 2px 0 12px;
  font-size: 0.82rem;
  color: var(--ink-mute);
}

/* description lists for pre-treatment + blended */
dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  font-size: 0.9rem;
}
dt { color: var(--ink-soft); }
dd { margin: 0; color: var(--ink); font-family: var(--font-mono); text-align: right; }

/* nutrient tables (delivery, ledger, residual) */
.nutrient-table,
.demand-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.nutrient-table th, .demand-table th {
  text-align: left;
  font-weight: 600;
  color: var(--green-mid);
  border-bottom: 1px solid var(--line);
  padding: 5px 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nutrient-table th.num, .demand-table th.num { text-align: right; }
.nutrient-table td, .demand-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.nutrient-table td:nth-child(2),
.demand-table td.num { text-align: right; font-family: var(--font-mono); }
.nutrient-table tr:last-child td { border-bottom: none; }

/* status pills in crop demand table */
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-pill.met       { background: #d4edda; color: #1e6b3a; }
.status-pill.partial   { background: #ffe8d1; color: var(--partial); }
.status-pill.exceeds   { background: #f8d4cf; color: var(--exceeds); }
.status-pill.not_applicable { background: #ecf2eb; color: var(--na); }

/* below-the-grid strips: ledger + residual */
.strip {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  margin-top: 16px;
}
.strip h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--green-deep);
}

/* method notes */
.method-notes {
  margin-top: 22px;
  background: var(--green-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.method-notes summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--green-deep);
}
.method-notes ol {
  margin: 10px 0 4px 20px;
  padding: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.method-notes li { margin-bottom: 5px; }

/* ── footer ─────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: auto;
  padding: 22px 32px;
  background: var(--green-deep);
  color: rgba(216,243,220,0.78);
  font-size: 0.83rem;
  text-align: center;
}
.site-footer a { color: var(--green-pale); }
.site-footer .legal-mini {
  margin: 4px 0 0;
  font-size: 0.76rem;
  color: rgba(216,243,220,0.62);
}
.site-footer .legal-mini a {
  color: rgba(216,243,220,0.85);
  border-bottom: 1px dashed rgba(216,243,220,0.4);
}
.site-footer.compact {
  padding: 14px 24px;
  font-size: 0.82rem;
}
.site-footer .footer-dev {
  opacity: 0.55;
  font-size: 0.78rem;
}

/* Multi-year residual card */
.card-sub {
  font-size: 0.83rem;
  color: var(--ink-soft);
  margin: -2px 0 10px;
  line-height: 1.45;
}
.decay-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: help;
}
.decay-om_bound {
  background: #d8f3dc;
  color: #1b4332;
  border: 1px solid #95d5b2;
}
.decay-moderate {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fbbf24;
}
.decay-fast {
  background: #dbeafe;
  color: #1e3a8a;
  border: 1px solid #93c5fd;
}

/* ─────────────────────────────────────────────────────────────────────
   pH-FIT strip — soil-pH vs. crop preference panel (Day 11)
   ───────────────────────────────────────────────────────────────────── */
.strip.ph-fit .ph-fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.ph-fit-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f4f9f5;
  border: 1px solid #d8e7da;
}
.ph-fit-cell .ph-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.ph-fit-cell .ph-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.ph-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  align-self: flex-start;
}
.ph-status-badge.ph-within_range {
  background: #d4edda;
  color: #1e6b3a;
  border: 1px solid #8fd6a3;
}
.ph-status-badge.ph-approaching_upper,
.ph-status-badge.ph-approaching_lower {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fbbf24;
}
.ph-status-badge.ph-above_range,
.ph-status-badge.ph-below_range {
  background: #f8d4cf;
  color: #8a1c12;
  border: 1px solid #f0a39d;
}
.ph-status-badge.ph-unavailable {
  background: #ecf2eb;
  color: #555;
  border: 1px solid #d4d9d3;
}
.site-footer .footer-dev a {
  border-bottom: 1px dotted rgba(216,243,220,0.35);
}

/* ─────────────────────────────────────────────────────────────────────
   LOGIN PAGE
   Independent layout — does not share the calculator's three-card grid.
   ───────────────────────────────────────────────────────────────────── */

body.login-body {
  background:
    radial-gradient(at top left,  rgba(82,183,136,0.12) 0%, transparent 60%),
    radial-gradient(at bottom right, rgba(45,106,79,0.10) 0%, transparent 50%),
    var(--bg);
}

.login-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px 24px;
  width: 100%;
  flex: 1;
}

.login-hero {
  text-align: center;
  padding: 18px 12px 28px;
}
.login-hero h1 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--green-deep);
  letter-spacing: -0.025em;
}
.login-hero h1 span { color: var(--green-soft); }
.login-hero .tagline {
  margin: 8px auto 0;
  max-width: 720px;
  color: var(--ink-soft);
  font-size: 1rem;
}

.login-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.login-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 820px) {
  .login-grid { grid-template-columns: 1.55fr 1fr; }
}

.login-explain {
  padding: 30px 32px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) {
  .login-explain {
    border-bottom: none;
    border-right: 1px solid var(--line);
  }
}

.login-explain h2 {
  font-size: 1.02rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-mid);
  margin: 0 0 10px;
}
.login-explain h2:not(:first-child) { margin-top: 22px; }
.login-explain p {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 0.93rem;
}
.login-explain ul {
  margin: 4px 0 10px 22px;
  padding: 0;
  color: var(--ink);
  font-size: 0.92rem;
}
.login-explain ul li { margin-bottom: 5px; }
.login-explain ul.sources li { margin-bottom: 6px; }

.login-explain .muted { color: var(--ink-mute); font-size: 0.85rem; }

.simple-list {
  margin: 4px 0 12px 22px;
  padding: 0;
  font-size: 0.93rem;
  color: var(--ink);
}
.simple-list li { margin-bottom: 6px; }

.login-explain .muted.small { font-size: 0.82rem; }

.terms-acceptance {
  margin: 14px 0 0;
  font-size: 0.83rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.terms-acceptance a {
  color: var(--green-deep);
  text-decoration: underline;
  text-decoration-color: var(--green-soft);
  text-underline-offset: 2px;
}
.terms-acceptance a:hover { color: var(--green-mid); }

.login-form {
  padding: 30px 32px;
  background: var(--green-tint);
}
.login-form h2 {
  margin: 0 0 4px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--green-deep);
}
.login-form .form-sub {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.login-form form label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--green-deep);
  gap: 6px;
  margin-bottom: 14px;
}
.login-form input[type="password"] {
  font-size: 1rem;
  padding: 9px 11px;
  border-width: 1.5px;
}

.login-form button[type="submit"] {
  width: 100%;
  padding: 10px 18px;
  font-size: 0.98rem;
  margin-top: 4px;
}

.form-status {
  margin-top: 10px;
  min-height: 1.2em;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  color: var(--ink-soft);
}
.form-status.ok    { color: var(--ok); }
.form-status.error { color: var(--exceeds); }

.login-form hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 20px 0 16px;
}

.request-access {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}
.request-access a {
  color: var(--green-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--green-soft);
  text-underline-offset: 2px;
}
.request-access a:hover { color: var(--green-mid); }

.login-footer {
  text-align: center;
  margin-top: 24px;
  padding: 12px 8px;
  font-size: 0.85rem;
  color: var(--ink-mute);
}
.login-footer a {
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--line);
}
.login-footer a:hover { color: var(--green-deep); }

/* ─────────────────────────────────────────────────────────────────────
   DOC PAGES (Terms, Sources) — long-form, single-column reading layout
   ───────────────────────────────────────────────────────────────────── */

.doc-shell {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 24px 56px;
  width: 100%;
  flex: 1;
}
.doc-shell .updated {
  font-size: 0.85rem;
  color: var(--ink-mute);
  font-style: italic;
  margin-bottom: 20px;
}
.doc-shell h2 {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--green-deep);
  margin: 26px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.doc-shell p { margin: 0 0 12px; line-height: 1.6; }
.doc-shell a {
  color: var(--green-deep);
  text-decoration: underline;
  text-decoration-color: var(--green-soft);
  text-underline-offset: 2px;
}
.doc-shell a:hover { color: var(--green-mid); }

.doc-shell .source-block { margin-bottom: 8px; }
.doc-shell .source-block dl {
  display: block;
  margin: 6px 0 0;
}
.doc-shell .source-block dt {
  font-weight: 600;
  color: var(--ink);
  margin-top: 12px;
  font-size: 0.96rem;
}
.doc-shell .source-block dd {
  margin: 4px 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: left;
  font-family: inherit;
}
.doc-shell .footnote {
  margin-top: 28px;
  font-size: 0.85rem;
  color: var(--ink-mute);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* ─── Mobile / narrow-viewport polish ───────────────────────────────── */
@media (max-width: 640px) {
  /* Multi-year residual grew to 7 columns in v1.3 — let it scroll
     horizontally on narrow phones rather than crushing every cell. */
  .strip .nutrient-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .strip .nutrient-table th,
  .strip .nutrient-table td {
    padding: 6px 8px;
    font-size: 0.85rem;
  }
  /* Soil-test panel grid is already auto-fit responsive; just tighten
     padding so two columns fit on a 360 px phone. */
  .soil-test-panel fieldset { padding: 10px 12px; }
  .soil-test-panel .grid { gap: 8px 10px; }
  .soil-test-panel > summary { padding: 12px 14px; }
  .soil-test-panel > .card-sub { padding: 0 14px 6px; font-size: 0.82rem; }
  .soil-test-actions { padding: 0 14px 8px; }

  /* pH-fit four-cell grid → two cells per row on phones. */
  .ph-fit-grid { grid-template-columns: 1fr 1fr; }

  /* Crop-demand table — let it scroll on narrow viewports too. */
  .panel .demand-table { display: block; overflow-x: auto; }
}

/* ─── Ghost button (secondary action) ────────────────────────────────── */
.ghost-btn {
  background: transparent;
  border: 1px solid var(--green-mid);
  color: var(--green-deep);
  padding: 6px 12px;
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.ghost-btn:hover { background: rgba(56, 142, 60, 0.08); }
.ghost-btn:active { background: rgba(56, 142, 60, 0.15); }

.soil-test-actions {
  padding: 0 20px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.soil-test-actions .muted {
  font-size: 0.8rem;
  flex: 1;
  min-width: 200px;
}

/* ─── Soil-test (optional) panel ─────────────────────────────────────── */
.soil-test-panel {
  margin: 18px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 0;
}
.soil-test-panel > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 20px;
  display: block;
}
.soil-test-panel > summary::-webkit-details-marker { display: none; }
.soil-test-panel > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  color: var(--green-mid);
  transition: transform 0.2s;
}
.soil-test-panel[open] > summary::before { transform: rotate(90deg); }
.soil-test-panel > summary h2.inline {
  display: inline;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--green-deep);
  margin: 0 8px 0 4px;
}
.soil-test-panel > summary .muted {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.soil-test-panel > .card-sub {
  padding: 0 20px 8px;
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.soil-test-panel fieldset {
  border: none;
  border-top: 1px solid var(--line-soft);
  padding: 14px 20px;
  margin: 0;
}
.soil-test-panel fieldset legend {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-mid);
  font-weight: 600;
  padding: 0 6px 0 0;
}
.soil-test-panel .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
.soil-test-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.soil-test-panel input {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  background: var(--bg);
}

/* combined (soil-baseline + delivery) row in the demand table */
.demand-table tr.combined-row td {
  background: linear-gradient(
    to right,
    rgba(56, 142, 60, 0.07) 0%,
    rgba(56, 142, 60, 0.04) 100%
  );
  border-left: 3px solid var(--green-mid);
  font-size: 0.88rem;
  padding-top: 6px;
  padding-bottom: 6px;
}
.demand-table tr.combined-row td:first-child { padding-left: 18px; }
.demand-table tr.combined-row td.indent {
  color: var(--green-deep);
  font-weight: 500;
}
.demand-table tr.combined-row td .muted {
  font-size: 0.76rem;
  font-style: italic;
}
/* visually separate the combined sub-row from the row below */
.demand-table tr.combined-row + tr td { border-top: 1px solid var(--line); }
/* soft horizontal divider above each delivered row when a combined row is in play */
.demand-table tbody:has(tr.combined-row) tr:not(.combined-row) td {
  border-top: 1px solid var(--line-soft);
}

/* ─── Compare-compost panel (input) ──────────────────────────────────── */
.compare-panel {
  margin: 18px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 0;
}
.compare-panel > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 20px;
  display: block;
}
.compare-panel > summary::-webkit-details-marker { display: none; }
.compare-panel > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  color: var(--green-mid);
  transition: transform 0.2s;
}
.compare-panel[open] > summary::before { transform: rotate(90deg); }
.compare-panel > summary h2.inline {
  display: inline;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--green-deep);
  margin: 0 8px 0 4px;
}
.compare-panel > summary .muted {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.compare-panel > .card-sub {
  padding: 0 20px 8px;
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.compare-panel fieldset {
  border: none;
  border-top: 1px solid var(--line-soft);
  padding: 14px 20px;
  margin: 0;
}
.compare-panel fieldset legend {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-mid);
  font-weight: 600;
  padding: 0 6px 0 0;
}
.compare-panel .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
.compare-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.compare-panel input {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  background: var(--bg);
}

/* ─── Compare-compost results panel ──────────────────────────────────── */
.compare-results .compare-sub-h {
  margin: 16px 0 6px;
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green-deep);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
}
.compare-table th,
.compare-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.compare-table th {
  background: var(--green-tint);
  text-align: left;
  font-weight: 600;
  color: var(--green-deep);
}
.compare-table th.num,
.compare-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.winner-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.winner-badge.winner-a {
  background: rgba(56, 142, 60, 0.12);
  color: var(--green-deep);
  border-color: rgba(56, 142, 60, 0.4);
}
.winner-badge.winner-b {
  background: rgba(33, 150, 243, 0.12);
  color: #0d47a1;
  border-color: rgba(33, 150, 243, 0.4);
}
.winner-badge.winner-tie {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink-soft);
  border-color: var(--line);
}

/* ─── Print / PDF export ─────────────────────────────────────────────── */

/* Default (screen) — hide the print-only blocks so they don't render. */
.print-header,
.print-footer { display: none; }

/* Results header row — "summary text on the left, Print button on the right" */
.results-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.results-header-row .results-summary {
  flex: 1;
  min-width: 0;
}
.results-header-row .ghost-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media print {
  /* Page setup — US-letter, half-inch margins. */
  @page {
    size: letter;
    margin: 0.5in;
  }

  /* Black ink on white, tighter line-height, leaner type for paper. */
  html, body {
    background: white !important;
    color: #000 !important;
    font-size: 10pt;
    line-height: 1.35;
  }

  /* Hide everything that isn't the results section + its print frame. */
  .site-header,
  .site-footer,
  #calc-form,
  .actions,
  .no-print,
  #signout-link,
  .docs-link {
    display: none !important;
  }

  /* Promote the results section to the only visible content. */
  main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  #results { display: block !important; }
  #results[hidden] { display: block !important; }
  section, article, .panel, .strip { break-inside: avoid; page-break-inside: avoid; }

  /* Print-only header + footer reveal */
  .print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid #000;
    padding-bottom: 6pt;
    margin-bottom: 10pt;
  }
  .print-header .print-brand {
    font-size: 14pt;
    font-weight: 700;
    color: #1b3a26;
  }
  .print-header .print-meta {
    font-size: 9pt;
    color: #444;
  }
  .print-footer {
    display: block !important;
    margin-top: 18pt;
    padding-top: 8pt;
    border-top: 1px solid #888;
    font-size: 8.5pt;
    color: #444;
  }

  /* The summary line on top of results — emphasize on paper. */
  .results-summary {
    font-size: 11pt;
    font-weight: 500;
    margin-bottom: 10pt;
    padding: 6pt 0;
    border-bottom: 1px solid #ccc;
  }

  /* Force the three-column results-grid into a single column on paper
     so each panel gets its full width and nothing wraps awkwardly. */
  .results-grid {
    display: block !important;
    grid-template-columns: none !important;
  }
  .results-grid > .panel {
    box-shadow: none !important;
    border: 1px solid #888;
    margin-bottom: 8pt;
    padding: 8pt 10pt;
  }
  .strip {
    box-shadow: none !important;
    border: 1px solid #888;
    margin-bottom: 8pt;
    padding: 8pt 10pt;
  }

  /* Tables — keep them compact, lined for readability on paper. */
  .nutrient-table,
  .demand-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 9pt;
  }
  .nutrient-table th,
  .nutrient-table td,
  .demand-table th,
  .demand-table td {
    border: 1px solid #bbb !important;
    padding: 3pt 5pt !important;
    background: white !important;
    color: #000 !important;
  }
  .nutrient-table th,
  .demand-table th {
    background: #eef3ee !important;
    font-weight: 600;
  }

  /* Status pills / decay badges — strip backgrounds for printer ink,
     keep them outlined so meaning is preserved on B/W output. */
  .status-pill,
  .decay-badge,
  .ph-status-badge {
    background: white !important;
    color: #000 !important;
    border: 1px solid #666 !important;
    padding: 1pt 4pt !important;
    border-radius: 3pt !important;
    font-size: 8.5pt !important;
  }

  /* Method-notes details — auto-expand on print so reviewers see them. */
  details.method-notes,
  details.method-notes > summary {
    display: block !important;
  }
  details.method-notes[open],
  details.method-notes {
    display: block !important;
  }
  details.method-notes ol {
    display: block !important;
    font-size: 8.5pt;
    color: #333;
    margin-top: 4pt;
  }
  details.method-notes summary {
    font-weight: 600;
    margin-bottom: 4pt;
    cursor: default;
    list-style: none;
  }
  details.method-notes summary::-webkit-details-marker { display: none; }

  /* Soft links — printed pages don't need underlined hyperlinks. */
  a { color: #000 !important; text-decoration: none !important; }

  /* Warnings — keep visible but with a clear border. */
  #warnings-region .warning {
    border: 1px solid #b58900;
    background: white !important;
    color: #000 !important;
    padding: 4pt 6pt;
    margin-bottom: 6pt;
  }

  /* Compare-results: keep winner badges on paper with outline-only styling. */
  .compare-results { break-inside: avoid; }
  .winner-badge {
    background: white !important;
    color: #000 !important;
    border: 1px solid #666 !important;
    padding: 1pt 4pt !important;
    font-size: 8.5pt !important;
  }
  .winner-badge.winner-a { border-color: #1b5e20 !important; }
  .winner-badge.winner-b { border-color: #0d47a1 !important; }
}

/* loading + transitions */
.loading {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--green-soft);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }