/* ─────────────────────────────────────────────────────────────────────────
   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;
  /* Label column gets a sensible minimum so long values (especially the
     provenance line) can't squeeze the labels down to single characters
     per line. Value column takes the rest, right-aligned. */
  grid-template-columns: minmax(130px, max-content) minmax(0, 1fr);
  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; }

/* "Calculated with: 5 wet t/ac · 30 % moisture · 6 in depth" — surfaces
   the inputs that produced the current result so a stale form doesn't
   silently mislead the user. Smaller and lighter than the data rows;
   allow soft wrapping so it doesn't blow out the value column. */
.provenance-line {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-soft);
  white-space: normal;
  text-align: right;
  line-height: 1.35;
  max-width: 100%;
}

/* 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; }

/* Residual table — center the "Total applied" column (col 2) so the
   total-applied number reads as a separate "stamp" from the Y1 / Y2 /
   Y3 release-pattern numbers to its right. Overrides the generic
   .nutrient-table right-align above. */
#residual-table th:nth-child(2),
#residual-table td:nth-child(2) {
  text-align: center;
  font-family: var(--font-mono);
}

/* 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);
}

/* ─── /compare page-specific styles ───────────────────────────────── */

/* Top-level layout for the /compare page. The default ``main`` is built
   around the calculator's 3-column results grid; the compare page is
   single-column stacked cards. */
.compare-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 22px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.compare-main .card { padding: 18px 22px; }
.compare-main .card header h2 {
  font-size: 1.12rem;
  margin: 0 0 4px;
  color: var(--green-deep);
}

/* "Compare composts" link in the global header gets a small pulsing
   green dot when a fresh handoff is cached, so users know the page is
   primed and ready to go. */
.compare-link { position: relative; }
.compare-link .badge-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-mid);
  margin-left: 4px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(56, 142, 60, 0.6);
  animation: handoff-pulse 1.8s ease-out infinite;
}
@keyframes handoff-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(56, 142, 60, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(56, 142, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 142, 60, 0); }
}

/* Compost A summary — two side-by-side dl blocks (site context + lab panel) */
.compost-a-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  margin: 8px 0;
}
@media (max-width: 720px) {
  .compost-a-grid { grid-template-columns: 1fr; }
}

#compost-a-stamp { margin-top: 12px; font-size: 0.82rem; }
#compost-a-when { font-weight: 600; color: var(--green-deep); }

.empty-state {
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--green-tint);
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Required-field marker on Compost B */
.required-field { font-weight: 600; }
.req-asterisk {
  color: #c62828;
  font-weight: 700;
  margin-left: 2px;
  cursor: help;
}

/* Nutrient price grid — 3 columns of $/lb override inputs */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  margin-top: 8px;
}
.price-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: 0.84rem;
}
.price-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--green-deep);
}
.price-input-wrap {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.price-dollar { color: var(--ink-soft); }
.price-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  background: white;
  text-align: right;
}
.price-unit { color: var(--ink-soft); font-size: 0.78rem; }
.price-source {
  font-size: 0.74rem;
  font-style: italic;
  line-height: 1.3;
}

/* Run-comparison button row */
.action-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.action-row button {
  background: var(--green-mid);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.action-row button:hover { background: var(--green-deep); }
.action-row button:disabled {
  background: var(--ink-soft);
  cursor: not-allowed;
}

/* Year-1 value cards (the headline $-per-acre and $-per-ton blocks) */
.value-grid {
  display: grid;
  /* Always exactly two equal columns at desktop so the cards span the
     full strip width. ``auto-fit`` would leave room for a phantom third
     column at wider viewports. The callout row uses ``grid-column: 1/-1``
     to span both. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 10px;
}
@media (max-width: 640px) {
  .value-grid { grid-template-columns: 1fr; }
}
.value-card {
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--green-tint);
}
.value-card-title {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-deep);
  font-weight: 700;
  margin-bottom: 8px;
}
/* Inline suffix on the card title (e.g. "at 5.0 wet t/ac"). Kept on the
   same line as the title — and lower-case / non-letterspaced — so both
   value cards have identical row counts and the section labels below
   (Year-1 / Total) stay horizontally aligned across cards. */
.value-card-title-suffix {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.78rem;
  margin-left: 4px;
}
.value-card-sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: -4px 0 8px;
  font-style: italic;
}

/* Each card now holds two side-by-side sections (Year-1 vs Total nutrient
   content). A thin top border between sections makes the split obvious
   without adding visual heaviness. */
.value-section + .value-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.value-section-title {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green-mid);
  font-weight: 600;
  margin-bottom: 4px;
}

.value-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: 0.92rem;
}
.value-row-label { color: var(--ink-soft); }
.value-row-amount {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}
.value-row.value-delta {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 6px;
}
.value-delta .value-row-label { font-weight: 600; color: var(--ink); }

/* Year-1 realization callout — spans the full strip width below the
   two value cards. Same number applies per-acre and per-ton (rate
   cancels in the ratio), so we render it once in its own strip. */
.value-callout {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(63, 121, 79, 0.06), rgba(63, 121, 79, 0.02));
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-mid);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 4px;
}
.value-callout-title {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-deep);
  font-weight: 700;
  margin-bottom: 8px;
}
.value-callout-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
.value-callout-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.value-callout-cell.value-callout-delta {
  border-left: 1px solid var(--line);
  padding-left: 12px;
}
.value-callout-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.value-callout-num {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}
.value-callout-foot {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 4px 0 0;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .value-callout-body { grid-template-columns: 1fr; }
  .value-callout-cell.value-callout-delta {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 8px;
  }
}

/* Compare-strips (delivery / residual / params on /compare) — same look
   as the .strip pattern used elsewhere but with a tighter footprint. */
.compare-main .strip {
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.compare-main .strip h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  color: var(--green-deep);
}

/* Small descriptor column on the params table — keeps each note short. */
.small-note { font-size: 0.78rem; line-height: 1.35; max-width: 280px; }

/* Mobile responsiveness for the wider compare tables (7 columns on the
   delivery table). Let them scroll horizontally rather than crushing. */
@media (max-width: 820px) {
  .compare-main .nutrient-table { display: block; overflow-x: auto; white-space: nowrap; }
  .compare-main .small-note { white-space: normal; }
}

/* ─── 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; }
  .compare-main { padding: 0 !important; gap: 0 !important; }
  #results,
  #compare-results { display: block !important; }
  #results[hidden],
  #compare-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 / winner badges — strip backgrounds for
     printer ink, keep them outlined so meaning is preserved on B/W. */
  .status-pill,
  .decay-badge,
  .ph-status-badge,
  .winner-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;
  }

  /* /compare page — value cards print as full-width stacked panels with
     a small grey border so they read as discrete result blocks. */
  .value-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6pt !important;
    margin-bottom: 8pt !important;
  }
  .value-card {
    background: white !important;
    border: 1px solid #888 !important;
    padding: 6pt 8pt !important;
    box-shadow: none !important;
  }
  .value-card-title {
    color: #000 !important;
    font-size: 8.5pt !important;
  }
  .value-row-amount { color: #000 !important; }

  /* Year-1 realization callout — strip the screen gradient so it prints
     clean on B&W laser printers. Keep the left rule as a visual anchor. */
  .value-callout {
    background: white !important;
    border: 1px solid #888 !important;
    border-left: 3pt solid #555 !important;
    padding: 6pt 8pt !important;
    margin-top: 6pt !important;
  }
  .value-callout-title { color: #000 !important; font-size: 8.5pt !important; }
  .value-callout-num   { color: #000 !important; font-size: 10pt !important; }
  .value-callout-foot  { color: #333 !important; font-size: 7.5pt !important; }

  /* /compare wide tables — allow horizontal squash rather than scroll,
     since paper can't scroll. The 7-column delivery table fits letter
     width at 8pt with tight padding. */
  .compare-table { font-size: 8.5pt !important; }
  .compare-table th,
  .compare-table td {
    padding: 2pt 4pt !important;
  }
  .small-note {
    font-size: 7.5pt !important;
    max-width: none !important;
  }

  /* Method-notes details — auto-expand on print so reviewers see them
     on the main calculator PDF (full audit trail). On the /compare page
     they're intentionally suppressed: the comparison PDF is a decision
     artifact, not an audit trail. */
  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;
  }
  /* Override (more specific than the unconditional rules above): hide
     method notes when they're tagged ``.no-print`` — currently only the
     /compare page does this. */
  details.method-notes.no-print,
  details.method-notes.no-print > summary,
  details.method-notes.no-print ol {
    display: none !important;
  }
  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); } }