/* OAT Widget — Shared Styles
 * Plant-first, biology-respecting, professional.
 * Mobile-first responsive. Dark mode via prefers-color-scheme.
 * No external dependencies. Self-contained.
 */

:root {
  /* Calculator tokens mapped onto the site theme (assets/css/theme.css).
     Edit the site :root, not these — the calculators follow the site theme.
     Each falls back to its original value so the widget still works embedded
     standalone (without the site stylesheet loaded). */
  --oat-ink:        var(--text-heading, #1a1f1b);
  --oat-ink-soft:   var(--text-body, #495b4d);
  --oat-ink-faint:  var(--text-muted, #7d8b81);
  --oat-cream:      var(--surface, #fbfaf6);
  --oat-paper:      var(--surface-raised, #ffffff);
  --oat-paper-soft: var(--surface-alt, #f4f2eb);
  --oat-rule:       var(--border-strong, #e3e0d6);
  --oat-rule-soft:  var(--border, #efece2);

  --oat-primary:      var(--brand-green-deep, #2f5a3f);
  --oat-primary-soft: var(--green-300, #d6e3d9);
  --oat-primary-tint: var(--green-50, #e8f0eb);

  --oat-amber:      var(--warning, #b35d00);
  --oat-amber-soft: var(--warning-light, #f4d9be);
  --oat-amber-tint: var(--warning-light, #fbeed8);

  --oat-blue:      var(--brand-blue-deep, #2c5e7e);
  --oat-blue-soft: var(--blue-200, #cfdde6);
  --oat-blue-tint: var(--blue-50, #e6eef3);

  --oat-warn:      var(--danger, #b34a26);
  --oat-warn-soft: var(--danger-light, #f4d4c5);
  --oat-warn-tint: var(--danger-light, #fae3d7);

  --oat-alert:      var(--danger-dark, #9b2c2c);
  --oat-alert-soft: var(--danger-light, #ecbcbc);

  --oat-good:      var(--brand-green-deep, #2f5a3f);
  --oat-good-soft: var(--green-300, #d6e3d9);

  --oat-shadow:      var(--shadow-base, 0 1px 2px rgba(26,31,27,.04), 0 2px 8px rgba(26,31,27,.06));
  --oat-shadow-soft: var(--shadow-sm, 0 1px 1px rgba(26,31,27,.03));

  --oat-radius:    var(--radius-base, 6px);
  --oat-radius-lg: var(--radius-lg, 10px);

  --oat-font-sans: var(--font-reading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --oat-font-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  --oat-font-num:  var(--font-mono, "SF Mono", ui-monospace, Menlo, monospace);

  --oat-content-width: 100%;
  --oat-page-width: var(--site-width, 980px);
}

/* dark theme removed — calculators follow the site (light) theme via mapped tokens */


* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--oat-font-sans);
  color: var(--oat-ink);
  background: var(--oat-cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout */

.oat-page {
  max-width: var(--oat-page-width);
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.oat-content {
  max-width: var(--oat-content-width);
  margin: 0 auto;
}

.oat-header {
  border-bottom: 1px solid var(--oat-rule);
  margin-bottom: 32px;
  padding-bottom: 16px;
}

.oat-header__brand {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--oat-primary);
  text-decoration: none;
  text-transform: uppercase;
}

.oat-header__brand-tag {
  font-size: 0.75rem;
  color: var(--oat-ink-faint);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 8px;
}

.oat-footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--oat-rule);
  font-size: 0.875rem;
  color: var(--oat-ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

.oat-footer__attr {
  font-size: 0.8125rem;
  color: var(--oat-ink-faint);
}

/* Typography */

.oat-h1 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--oat-ink);
  letter-spacing: -0.01em;
}

.oat-h1__sub {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--oat-ink-soft);
  margin: 0 0 24px;
  line-height: 1.4;
}

.oat-h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 32px 0 12px;
  color: var(--oat-ink);
  letter-spacing: -0.005em;
}

.oat-h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 24px 0 8px;
  color: var(--oat-ink);
}

.oat-p {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.6;
}

.oat-content p {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.6;
}

.oat-content ul, .oat-content ol {
  padding-left: 1.4em;
  margin: 0 0 16px;
}

.oat-content li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.oat-content a {
  color: var(--oat-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.oat-content a:hover {
  color: var(--oat-ink);
}

.oat-content code {
  font-family: var(--oat-font-mono);
  font-size: 0.875em;
  background: var(--oat-paper-soft);
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid var(--oat-rule-soft);
}

.oat-content pre {
  background: var(--oat-paper-soft);
  padding: 12px 14px;
  border-radius: var(--oat-radius);
  border: 1px solid var(--oat-rule-soft);
  overflow-x: auto;
  font-family: var(--oat-font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
}

.oat-content blockquote {
  border-left: 3px solid var(--oat-primary-soft);
  padding: 4px 16px;
  margin: 16px 0;
  color: var(--oat-ink-soft);
  font-style: italic;
}

.oat-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.9375rem;
}

.oat-content th, .oat-content td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--oat-rule);
}

.oat-content th {
  font-weight: 600;
  color: var(--oat-ink);
  background: var(--oat-paper-soft);
}

/* Widget card */

.oat-widget {
  background: var(--oat-paper);
  border: 1px solid var(--oat-rule);
  border-radius: var(--oat-radius-lg);
  padding: 24px;
  box-shadow: var(--oat-shadow);
  margin: 0 0 32px;
}

.oat-widget__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--oat-ink);
}

.oat-widget__lead {
  font-size: 0.9375rem;
  color: var(--oat-ink-soft);
  margin: 0 0 20px;
}

/* Form fields */

.oat-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.oat-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oat-field__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--oat-ink-soft);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.oat-field__hint {
  font-size: 0.75rem;
  color: var(--oat-ink-faint);
  margin-top: 2px;
  font-style: italic;
}

.oat-input,
.oat-select {
  font-family: var(--oat-font-sans);
  font-size: 1rem;
  padding: 8px 10px;
  border: 1px solid var(--oat-rule);
  border-radius: var(--oat-radius);
  background: var(--oat-paper);
  color: var(--oat-ink);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.oat-input:focus,
.oat-select:focus {
  outline: none;
  border-color: var(--oat-primary);
  box-shadow: 0 0 0 3px var(--oat-primary-tint);
}

.oat-input--num {
  font-family: var(--oat-font-num);
  font-variant-numeric: tabular-nums;
}

.oat-toggle {
  display: inline-flex;
  background: var(--oat-paper-soft);
  border: 1px solid var(--oat-rule);
  border-radius: var(--oat-radius);
  padding: 2px;
}

.oat-toggle__btn {
  font-family: var(--oat-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--oat-ink-soft);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.oat-toggle__btn:hover {
  color: var(--oat-ink);
}

.oat-toggle__btn--active {
  background: var(--oat-paper);
  color: var(--oat-ink);
  box-shadow: var(--oat-shadow-soft);
}

.oat-button {
  font-family: var(--oat-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid var(--oat-primary);
  border-radius: var(--oat-radius);
  background: var(--oat-primary);
  color: var(--oat-paper);
  cursor: pointer;
  transition: opacity 0.15s;
}

.oat-button:hover {
  opacity: 0.9;
}

.oat-button--ghost {
  background: transparent;
  color: var(--oat-primary);
}

/* Output */

.oat-output {
  background: var(--oat-paper-soft);
  border: 1px solid var(--oat-rule);
  border-radius: var(--oat-radius);
  padding: 16px 20px;
  margin-top: 16px;
}

.oat-output--primary {
  background: var(--oat-primary-tint);
  border-color: var(--oat-primary-soft);
}

.oat-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

.oat-stat__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--oat-ink-soft);
}

.oat-stat__value {
  font-family: var(--oat-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--oat-ink);
  line-height: 1.1;
}

.oat-stat__unit {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--oat-ink-soft);
  margin-left: 4px;
}

.oat-stat__hint {
  font-size: 0.8125rem;
  color: var(--oat-ink-faint);
  margin-top: 2px;
}

.oat-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

/* Status indicators */

.oat-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.oat-status--good {
  background: var(--oat-good-soft);
  color: var(--oat-good);
}

.oat-status--warn {
  background: var(--oat-warn-soft);
  color: var(--oat-warn);
}

.oat-status--alert {
  background: var(--oat-alert-soft);
  color: var(--oat-alert);
}

.oat-status--neutral {
  background: var(--oat-paper-soft);
  color: var(--oat-ink-soft);
}

.oat-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Range visualization (for VPD-style band charts) */

.oat-range {
  position: relative;
  height: 36px;
  background: var(--oat-paper-soft);
  border-radius: var(--oat-radius);
  border: 1px solid var(--oat-rule);
  overflow: hidden;
  margin: 8px 0;
}

.oat-range__band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--oat-primary-soft);
}

.oat-range__band--alert-low {
  background: var(--oat-alert-soft);
}

.oat-range__band--warn-low {
  background: var(--oat-warn-soft);
}

.oat-range__band--target {
  background: var(--oat-good-soft);
}

.oat-range__band--warn-high {
  background: var(--oat-warn-soft);
}

.oat-range__band--alert-high {
  background: var(--oat-alert-soft);
}

.oat-range__marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  background: var(--oat-ink);
  border-left: 1px solid var(--oat-paper);
  border-right: 1px solid var(--oat-paper);
}

.oat-range__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--oat-ink-faint);
  font-family: var(--oat-font-num);
  margin-top: 2px;
}

/* Tables for reference data */

.oat-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 12px 0;
}

.oat-data-table th,
.oat-data-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--oat-rule);
}

.oat-data-table th {
  font-weight: 600;
  color: var(--oat-ink);
  background: var(--oat-paper-soft);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.oat-data-table td.is-num {
  font-family: var(--oat-font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Cross-link box */

.oat-related {
  background: var(--oat-paper-soft);
  border-left: 3px solid var(--oat-primary);
  padding: 16px 20px;
  border-radius: 0 var(--oat-radius) var(--oat-radius) 0;
  margin: 24px 0;
}

.oat-related__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--oat-ink-soft);
  margin: 0 0 8px;
}

.oat-related ul {
  margin: 0;
  padding-left: 18px;
}

/* Embed mode — minimal chrome for iframe usage */

body.oat-embed {
  background: transparent;
}

body.oat-embed .oat-page {
  padding: 16px;
}

body.oat-embed .oat-header,
body.oat-embed .oat-footer,
body.oat-embed .oat-content {
  display: none;
}

body.oat-embed .oat-widget {
  margin: 0;
}

/* Responsive */

@media (max-width: 600px) {
  .oat-page {
    padding: 16px 12px 32px;
  }
  .oat-h1 {
    font-size: 1.625rem;
  }
  .oat-h1__sub {
    font-size: 1rem;
  }
  .oat-widget {
    padding: 18px;
  }
}

/* Print styles */

@media print {
  body {
    background: white;
    color: black;
  }
  .oat-widget {
    border: 1px solid #ccc;
    box-shadow: none;
    page-break-inside: avoid;
  }
  .oat-related, .oat-footer, .oat-header {
    display: none;
  }
}