:root {
  color-scheme: light;
  --orange-950: #552006;
  --orange-900: #702a08;
  --orange-800: #963b0c;
  --orange-700: #b9470d;
  --orange-600: #d76316;
  --orange-500: #eb7c22;
  --orange-300: #f7b267;
  --orange-100: #fff0df;
  --orange-50: #fff8ef;
  --green-800: #244e2a;
  --green-700: #326b35;
  --green-100: #e7f3e5;
  --ink: #251f1a;
  --muted: #6f6258;
  --surface: #ffffff;
  --surface-soft: #fbf8f4;
  --surface-raised: #ffffff;
  --border: #e8ded4;
  --focus: #1769aa;
  --success: #2f7839;
  --warning: #9a6100;
  --danger: #a1261f;
  --shadow-sm: 0 2px 10px rgb(62 36 17 / 8%);
  --shadow-md: 0 16px 42px rgb(62 36 17 / 12%);
  --radius-sm: .65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --page-width: 1180px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f6eee7;
  --muted: #c9b9ab;
  --surface: #211b17;
  --surface-soft: #2a211c;
  --surface-raised: #30251f;
  --border: #4d3b30;
  --orange-50: #302116;
  --orange-100: #462916;
  --green-100: #1c3420;
  --shadow-sm: 0 2px 12px rgb(0 0 0 / 24%);
  --shadow-md: 0 18px 46px rgb(0 0 0 / 32%);
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface-soft);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: var(--orange-800);
  text-underline-offset: .2em;
}

html[data-theme="dark"] a {
  color: var(--orange-300);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: .5rem;
  left: .5rem;
  transform: translateY(-150%);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--surface);
  padding: .75rem 1rem;
}

.skip-link:focus {
  transform: none;
}

.app-header {
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(18px);
}

.header-inner,
.app-footer,
main > section {
  width: min(calc(100% - 2rem), var(--page-width));
  margin-inline: auto;
}

.header-inner {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: inherit;
  text-decoration: none;
}

.brand img {
  border-radius: .8rem;
  box-shadow: var(--shadow-sm);
}

.brand span {
  display: grid;
  line-height: 1.1;
}

.brand strong {
  font-size: 1.18rem;
  letter-spacing: -.02em;
}

.brand small {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .72rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.connection-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 99rem;
  background: var(--surface-soft);
  color: var(--muted);
  padding: .42rem .72rem;
  font-size: .78rem;
}

.status-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent);
}

.connection-status.is-offline .status-dot {
  background: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 18%, transparent);
}

.icon-button,
.back-button {
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--surface);
  color: var(--ink);
  min-height: 2.7rem;
  padding: .55rem .8rem;
  font-weight: 700;
}

.icon-button:hover,
.back-button:hover {
  border-color: var(--orange-500);
  background: var(--orange-50);
}

main {
  min-width: 0;
  overflow: visible;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  min-height: 30rem;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6.25rem);
}

.hero::before {
  position: absolute;
  z-index: 0;
  top: 3.5rem;
  right: -12rem;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--orange-300) 34%, transparent), transparent 67%);
  content: "";
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: block;
  margin-bottom: .55rem;
  color: var(--orange-700);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero h1,
.section-heading h2,
.about-panel h2,
.crop-detail h1 {
  margin: 0;
  font-size: clamp(2.15rem, 6vw, 4.4rem);
  letter-spacing: -.055em;
  line-height: .98;
}

.hero p {
  max-width: 43rem;
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.search-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.search-panel label {
  display: block;
  margin-bottom: .7rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.culture-picker-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--surface-raised), var(--orange-50));
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.culture-picker-panel h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
  letter-spacing: -.035em;
  line-height: 1.05;
}

.culture-picker-panel > p {
  margin: .5rem 0 1rem;
  color: var(--muted);
  font-size: .9rem;
}

.culture-search-form {
  display: grid;
  gap: .45rem;
}

.culture-search-form > label {
  font-size: .8rem;
  font-weight: 800;
}

.culture-search-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  padding: .45rem;
}

.culture-search-control > span {
  padding-left: .45rem;
  color: var(--muted);
  font-size: 1.25rem;
}

.culture-search-control input {
  min-width: 0;
  min-height: 2.75rem;
  border: 0;
  outline: 0;
  background: transparent;
}

.culture-search-control input:focus-visible {
  outline: 0;
}

.culture-search-control:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent);
}

.culture-search-feedback {
  min-height: 1.2rem;
  margin: 0;
  color: var(--danger);
  font-size: .78rem;
}

.culture-quick-scroller {
  display: flex;
  gap: .7rem;
  width: 100%;
  overflow-x: auto;
  padding: .2rem .2rem .8rem;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--orange-500) transparent;
  scrollbar-width: thin;
}

.culture-quick-button {
  display: grid;
  flex: 0 0 min(12rem, 72vw);
  grid-template-columns: 2.7rem 1fr;
  gap: .7rem;
  align-items: center;
  min-height: 5rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  color: var(--ink);
  padding: .75rem;
  text-align: left;
  scroll-snap-align: start;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}

.culture-quick-button:hover {
  border-color: var(--orange-500);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.culture-quick-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: .85rem;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 1.35rem;
}

.culture-quick-button > span:last-child {
  display: grid;
  min-width: 0;
}

.culture-quick-button strong,
.culture-quick-button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.culture-quick-button small {
  margin-top: .2rem;
  color: var(--muted);
  font-size: .67rem;
}

.search-control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6rem;
  border: 2px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  min-height: 3.7rem;
  padding-inline: 1rem;
}

.search-control:focus-within {
  border-color: var(--orange-600);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange-500) 18%, transparent);
}

.search-control > span {
  color: var(--orange-600);
  font-size: 1.6rem;
}

.search-control input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1rem;
}

.search-control button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.45rem;
}

.field-hint,
.optional {
  color: var(--muted);
  font-size: .8rem;
}

.season-panel {
  position: relative;
  display: grid;
  gap: 1.4rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--orange-800), var(--orange-600));
  color: #fff;
  box-shadow: var(--shadow-md);
  padding: clamp(1.4rem, 4vw, 2.5rem);
}

.season-panel > div:first-child {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.panel-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / 16%);
  font-size: 1.65rem;
}

.season-panel h2 {
  margin: 0;
  font-size: clamp(1.45rem, 4vw, 2rem);
  letter-spacing: -.025em;
}

.season-panel p {
  margin: .3rem 0 0;
  color: rgb(255 255 255 / 83%);
}

.season-form {
  min-width: 0;
}

.season-form label {
  display: grid;
  gap: .32rem;
  font-size: .78rem;
  font-weight: 750;
}

.season-choice-block {
  display: grid;
  min-width: 0;
  gap: .32rem;
  font-size: .78rem;
  font-weight: 750;
}

.season-form input,
.season-form select,
.form-control,
.product-form input,
.product-form select {
  width: 100%;
  min-height: 3rem;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: .75rem;
  background: var(--surface);
  color: var(--ink);
  padding: .65rem .75rem;
}

.season-form .optional {
  color: rgb(255 255 255 / 70%);
  font-weight: 500;
}

.season-note {
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: var(--radius-md);
  background: rgb(0 0 0 / 13%);
  padding: 1rem;
  font-size: .9rem;
}

.season-kicker {
  display: block;
  margin-bottom: .25rem;
  color: rgb(255 255 255 / 72%);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.season-results {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: .9rem;
}

.season-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 10%);
  padding: .9rem;
}

.season-group-heading,
.season-group-heading > div {
  display: flex;
  align-items: center;
}

.season-group-heading {
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.season-group-heading > div {
  gap: .55rem;
}

.season-group-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.season-group-heading > span {
  color: rgb(255 255 255 / 74%);
  font-size: .72rem;
  font-weight: 800;
}

.season-status-dot {
  width: .68rem;
  height: .68rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
}

.season-group-conditional .season-status-dot {
  background: transparent;
}

.season-crop-scroller {
  display: flex;
  gap: .65rem;
  overflow-x: auto;
  padding: .1rem .1rem .5rem;
  scroll-snap-type: x proximity;
  scrollbar-color: rgb(255 255 255 / 60%) transparent;
  scrollbar-width: thin;
}

.season-crop-card {
  position: relative;
  display: grid;
  flex: 0 0 min(16rem, 80vw);
  grid-template-columns: 2.55rem minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  min-height: 6.5rem;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: .9rem;
  background: #fff;
  color: #1f2d24;
  padding: .75rem;
  text-align: left;
  scroll-snap-align: start;
  transition: transform .16s, box-shadow .16s;
}

.season-crop-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.season-crop-card.is-possible {
  background: color-mix(in srgb, #fff 91%, var(--orange-100));
}

.season-crop-icon {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: .78rem;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 1.2rem;
}

.season-crop-copy {
  display: grid;
  min-width: 0;
}

.season-crop-copy strong {
  font-size: .9rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.season-crop-copy small {
  margin-top: .18rem;
  color: #5c6b61;
  font-size: .67rem;
  line-height: 1.3;
}

.season-crop-badge {
  grid-column: 2;
  width: fit-content;
  border-radius: 99rem;
  background: var(--green-100);
  color: var(--green-800);
  padding: .2rem .45rem;
  font-size: .6rem;
  font-weight: 850;
}

.season-crop-card.is-possible .season-crop-badge {
  background: var(--orange-100);
  color: var(--orange-900);
}

.season-crop-arrow {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--orange-700);
  font-weight: 900;
}

.season-empty {
  margin: .25rem 0;
  color: rgb(255 255 255 / 80%);
  font-size: .85rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 3rem;
  border: 1px solid transparent;
  border-radius: .8rem;
  padding: .7rem 1rem;
  font-weight: 800;
  text-decoration: none;
}

.button-primary {
  background: var(--orange-700);
  color: #fff;
}

.season-panel .button-primary {
  background: #fff;
  color: var(--orange-900);
}

.button-primary:hover {
  background: var(--orange-800);
}

.season-panel .button-primary:hover {
  background: var(--orange-100);
}

.button-secondary {
  border-color: var(--border);
  background: var(--surface);
  color: var(--ink);
}

.button-secondary:hover {
  border-color: var(--orange-500);
  background: var(--orange-50);
}

.button-whatsapp {
  background: #197b43;
  color: #fff;
}

.button-whatsapp:hover {
  background: #105f32;
}

.catalog-section {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.section-heading h2,
.about-panel h2 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.04;
}

.section-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.category-scroll {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  margin-inline: -1rem;
  padding: .35rem 1rem 1rem;
  scrollbar-width: thin;
}

.category-chip {
  flex: 0 0 auto;
  min-height: 2.55rem;
  border: 1px solid var(--border);
  border-radius: 99rem;
  background: var(--surface);
  padding: .55rem .9rem;
  font-size: .85rem;
  font-weight: 750;
}

.category-chip:hover,
.category-chip[aria-pressed="true"] {
  border-color: var(--orange-600);
  background: var(--orange-100);
  color: var(--orange-900);
}

.choice-field {
  grid-column: 1 / -1;
  min-width: 0;
}

.choice-scroller {
  display: flex;
  gap: .55rem;
  width: 100%;
  overflow-x: auto;
  padding: .25rem .1rem .55rem;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--orange-400) transparent;
  scrollbar-width: thin;
}

.choice-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .55rem;
  min-height: 3rem;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: var(--surface);
  color: var(--ink);
  padding: .65rem .85rem;
  font-size: .82rem;
  font-weight: 780;
  text-align: left;
  scroll-snap-align: start;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}

.choice-button:hover {
  border-color: var(--orange-500);
  transform: translateY(-1px);
}

.choice-button[aria-pressed="true"] {
  border-color: var(--orange-600);
  background: var(--orange-100);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange-500) 18%, transparent);
  color: var(--orange-900);
}

.choice-indicator {
  flex: 0 0 auto;
  width: .72rem;
  height: .72rem;
  border: 2px solid var(--muted);
  border-radius: 50%;
  background: transparent;
}

.choice-button[aria-pressed="true"] .choice-indicator {
  border-color: var(--orange-700);
  background: var(--orange-600);
  box-shadow: inset 0 0 0 2px var(--surface);
}

.form-field.has-error .choice-scroller {
  border-radius: .9rem;
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.season-choice-scroller .choice-button {
  border-color: rgb(255 255 255 / 24%);
  background: rgb(255 255 255 / 10%);
  color: white;
}

.season-choice-scroller .choice-button[aria-pressed="true"] {
  border-color: white;
  background: white;
  box-shadow: none;
  color: var(--orange-900);
}

.season-choice-scroller .choice-indicator {
  border-color: rgb(255 255 255 / 60%);
}

.crop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.crop-card {
  min-width: 0;
}

.crop-card-button {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 15.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  padding: 1.15rem;
  text-align: left;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.crop-card-button:hover {
  border-color: var(--orange-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.crop-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
}

.crop-icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: .85rem;
  background: var(--orange-100);
  color: var(--orange-800);
  font-size: 1.35rem;
}

.status-badge,
.source-badge,
.review-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 99rem;
  padding: .28rem .55rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .025em;
}

.status-badge.is-ready,
.review-badge.is-ready {
  background: var(--green-100);
  color: var(--green-800);
}

.status-badge.is-review,
.review-badge.is-review {
  background: var(--orange-100);
  color: var(--orange-900);
}

.crop-name {
  margin-top: 1rem;
  font-size: 1.16rem;
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.crop-scientific {
  min-height: 2.4em;
  margin-top: .3rem;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: .84rem;
  font-style: italic;
}

.crop-meta {
  margin-top: .8rem;
  color: var(--muted);
  font-size: .78rem;
}

.crop-action {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--orange-800);
  font-size: .82rem;
  font-weight: 850;
}

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 3rem 1rem;
  text-align: center;
}

.empty-state > span {
  color: var(--orange-600);
  font-size: 2.4rem;
}

.empty-state h3 {
  margin: .5rem 0 .2rem;
}

.empty-state p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.crop-detail {
  padding-block: 2rem 6rem;
}

.crop-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 2rem;
  align-items: start;
  margin-top: 1.2rem;
}

.crop-detail-main,
.crop-detail-aside > div,
.calculator-shell,
.recommendation-shell,
.calendar-shell,
.result-panel,
.product-extension {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.crop-detail-main {
  overflow: hidden;
}

.crop-detail-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 5vw, 3rem);
}

.crop-detail-hero::after {
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--orange-300) 22%, transparent);
  content: "";
}

.crop-detail h1 {
  max-width: 44rem;
  font-size: clamp(2.2rem, 7vw, 4.3rem);
}

.scientific-name {
  margin: .6rem 0 0;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1rem;
}

.source-badge {
  background: var(--surface-soft);
  color: var(--muted);
}

.crop-introduction {
  border-top: 1px solid var(--border);
  padding: 1.35rem clamp(1.2rem, 5vw, 3rem);
  white-space: pre-line;
}

.crop-journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
  border-top: 1px solid var(--border);
  padding: 1rem clamp(1.2rem, 5vw, 3rem);
  background: linear-gradient(90deg, var(--green-100), var(--orange-50));
}

/* Planejador de plantas de cobertura */
.cover-crop-shell {
  margin-top: 1.35rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--green-600) 24%, var(--border));
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--green-100) 74%, transparent), transparent 32rem),
    var(--surface);
  box-shadow: var(--shadow-sm);
}

.cover-crop-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  color: #f7fff9;
  background: linear-gradient(125deg, #123c2b, #216343 58%, #33744d);
}

.cover-crop-header h2,
.cover-crop-header p {
  margin: 0;
}

.cover-crop-header h2 {
  margin-top: .2rem;
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  line-height: 1.12;
}

.cover-crop-header p {
  max-width: 64rem;
  margin-top: .7rem;
  color: rgba(255, 255, 255, .82);
}

.cover-crop-header .eyebrow {
  color: #bff1ca;
}

.cover-crop-symbol {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .1);
  font-size: 1.65rem;
}

.cover-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.cover-principles article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  padding: 1rem;
  background: color-mix(in srgb, var(--green-100) 55%, var(--surface));
}

.cover-principles article > span {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--green-700);
  font-size: .78rem;
  font-weight: 900;
}

.cover-principles article div,
.cover-principles article strong,
.cover-principles article small {
  min-width: 0;
  display: block;
}

.cover-principles article small {
  margin-top: .2rem;
  color: var(--muted);
  line-height: 1.35;
}

.cover-sequence-recommendation,
.cover-crop-form,
.cover-method-note {
  margin: clamp(1rem, 3vw, 1.6rem);
}

.cover-sequence-recommendation {
  padding: clamp(1rem, 3vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--green-600) 25%, var(--border));
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--green-100) 38%, var(--surface));
}

.cover-sequence-heading,
.cover-sequence-heading > div,
.cover-form-heading,
.cover-profile-title,
.cover-method-note,
.cover-oxide-note,
.cover-carbon-warning {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}

.cover-sequence-heading {
  justify-content: space-between;
}

.cover-sequence-heading > small {
  max-width: 14rem;
  color: var(--muted);
  text-align: right;
}

.cover-sequence-heading p,
.cover-form-heading p,
.cover-profile-title p {
  margin: .25rem 0 0;
  color: var(--muted);
}

.cover-sequence-heading > div > span,
.cover-form-heading > span {
  display: grid;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: .8rem;
  color: white;
  background: var(--green-700);
}

.cover-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.cover-recommendation-grid button {
  display: flex;
  min-width: 0;
  min-height: 9rem;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--green-600) 24%, var(--border));
  border-radius: .9rem;
  padding: .85rem;
  color: var(--text);
  background: var(--surface);
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.cover-recommendation-grid button:hover,
.cover-recommendation-grid button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--green-600);
  box-shadow: var(--shadow-sm);
}

.cover-recommendation-grid button > span {
  color: var(--green-700);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cover-recommendation-grid button strong {
  margin-top: .35rem;
  line-height: 1.25;
}

.cover-recommendation-grid button small {
  margin-top: .35rem;
  color: var(--muted);
  line-height: 1.35;
}

.cover-recommendation-grid button i {
  margin-top: auto;
  padding-top: .7rem;
  color: var(--green-700);
  font-size: .82rem;
  font-style: normal;
  font-weight: 850;
}

.cover-sequence-cautions {
  display: grid;
  gap: .45rem;
  margin-top: .9rem;
}

.cover-sequence-cautions p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem;
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
}

.cover-sequence-cautions span {
  color: #8b5e00;
  font-weight: 950;
}

.cover-crop-form {
  padding: clamp(1rem, 3vw, 1.55rem);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  background: var(--surface);
}

.cover-form-heading {
  margin-bottom: 1.15rem;
}

.cover-form-heading h3 {
  margin: 0;
}

.cover-core-inputs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cover-soil-check {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: .85rem 1rem;
  background: var(--surface-soft);
}

.cover-soil-check summary,
.cover-field-totals summary,
.cover-science-sources summary {
  cursor: pointer;
  font-weight: 850;
}

.cover-soil-check > p {
  margin: .6rem 0 1rem;
  color: var(--muted);
  font-size: .88rem;
}

.cover-profile-card,
.cover-profile-info {
  margin-top: 1rem;
  border: 1px solid color-mix(in srgb, var(--green-600) 18%, var(--border));
  border-radius: 1rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--green-100) 30%, var(--surface));
}

.cover-profile-title,
.cover-profile-headline {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  justify-content: space-between;
}

.cover-profile-title > span,
.cover-season-badge {
  flex: 0 0 auto;
  border-radius: 99rem;
  padding: .35rem .62rem;
  color: var(--green-800);
  background: var(--green-100);
  font-size: .75rem;
  font-weight: 900;
}

.cover-profile-headline > div {
  display: grid;
  gap: .18rem;
}

.cover-profile-headline > div > span {
  color: var(--green-700);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cover-profile-headline > div > small {
  color: var(--muted);
  font-style: italic;
}

.cover-profile-facts,
.cover-impact-grid,
.cover-field-total-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .8rem;
}

.cover-profile-facts span,
.cover-profile-facts > div,
.cover-field-total-grid span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-radius: .7rem;
  padding: .65rem;
  background: var(--surface);
  color: var(--muted);
  font-size: .8rem;
}

.cover-profile-facts strong,
.cover-profile-facts dd,
.cover-field-total-grid strong {
  margin-top: .2rem;
  color: var(--text);
}

.cover-profile-facts dt {
  color: var(--muted);
  font-size: .76rem;
}

.cover-profile-facts dd {
  margin: .2rem 0 0;
  font-size: .84rem;
  font-weight: 750;
}

.cover-profile-functions,
.cover-function-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
}

.cover-profile-functions span,
.cover-function-list span {
  border: 1px solid color-mix(in srgb, var(--green-600) 24%, var(--border));
  border-radius: 99rem;
  padding: .3rem .55rem;
  color: var(--green-800);
  background: var(--surface);
  font-size: .75rem;
  font-weight: 750;
}

.cover-profile-warning,
.cover-warning-list {
  margin: .75rem 0 0;
  color: #6f4c00;
  font-size: .84rem;
}

.cover-warning-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .45rem;
  margin: .35rem 0 0;
}

.cover-warning-list p span {
  font-weight: 950;
}

.cover-result,
.cover-result-card {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  scroll-margin-top: 1rem;
}

.cover-result-header,
.cover-result-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.cover-result-header h3,
.cover-result-header p,
.cover-result-heading h3,
.cover-result-heading p {
  margin: 0;
}

.cover-result-header p,
.cover-result-heading p {
  margin-top: .3rem;
  color: var(--muted);
}

.cover-result-heading > span {
  display: grid;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: .8rem;
  background: var(--green-100);
}

.cover-result-legend {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .75rem;
  color: var(--muted);
  font-size: .78rem;
}

.cover-result-legend span {
  display: flex;
  gap: .4rem;
  align-items: center;
}

.cover-result-legend i {
  display: inline-block;
  width: 1.7rem;
  height: .42rem;
  border-radius: 99rem;
  background: linear-gradient(90deg, #3a9d64, #9ccf63);
}

.cover-result-header > span {
  flex: 0 0 auto;
  align-self: start;
  border-radius: 99rem;
  padding: .38rem .65rem;
  color: var(--green-800);
  background: var(--green-100);
  font-size: .75rem;
  font-weight: 900;
}

.cover-nutrient-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .6rem;
  margin-top: 1rem;
}

.cover-nutrient-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: .85rem;
  padding: .75rem;
  background: var(--surface-soft);
}

.cover-nutrient-card > span,
.cover-nutrient-card small {
  display: block;
  color: var(--muted);
  font-size: .73rem;
}

.cover-nutrient-card strong {
  display: block;
  margin-top: .3rem;
  font-size: 1.12rem;
}

.cover-release-bar {
  height: .42rem;
  overflow: hidden;
  margin: .55rem 0 .35rem;
  border-radius: 99rem;
  background: var(--border);
}

.cover-release-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3a9d64, #9ccf63);
}

.cover-oxide-note,
.cover-carbon-warning,
.cover-method-note {
  margin-top: .9rem;
  border-radius: .85rem;
  padding: .85rem;
}

.cover-oxide-note {
  color: #31526f;
  background: #edf6fb;
}

.cover-carbon-warning {
  color: #594b2b;
  background: #fff7df;
}

.cover-oxide-note p,
.cover-carbon-warning p,
.cover-method-note p {
  margin: 0;
}

.cover-oxide-note > span,
.cover-carbon-warning > span,
.cover-method-note > span {
  flex: 0 0 auto;
  font-weight: 950;
}

.cover-impact-grid article {
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: .9rem;
  background: var(--surface-soft);
}

.cover-impact-grid article > span,
.cover-impact-grid article > small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}

.cover-impact-grid article > strong {
  display: block;
  margin: .3rem 0;
  color: var(--green-800);
  font-size: 1.25rem;
}

.cover-implantation-plan {
  margin-top: .9rem;
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: .9rem;
}

.cover-implantation-plan h4 {
  margin: 0 0 .55rem;
}

.cover-implantation-plan p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem;
  margin: .4rem 0 0;
  color: var(--muted);
}

.cover-implantation-plan p span {
  color: var(--green-700);
  font-weight: 950;
}

.cover-field-totals,
.cover-science-sources {
  margin-top: .8rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  padding: .8rem;
  background: var(--surface-soft);
}

.cover-field-totals ul {
  margin-bottom: 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: .82rem;
}

.cover-source-links {
  display: grid;
  gap: .45rem;
  margin-top: .7rem;
}

.cover-source-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  color: var(--green-800);
  font-size: .84rem;
  font-weight: 750;
}

.cover-source-links a small {
  color: var(--muted);
  font-weight: 500;
}

.cover-method-note {
  color: var(--muted);
  background: var(--surface-soft);
}

@media (max-width: 780px) {
  .cover-principles,
  .cover-recommendation-grid {
    grid-template-columns: 1fr;
  }

  .cover-principles {
    gap: 1px;
  }

  .cover-recommendation-grid button {
    min-height: auto;
  }

  .cover-nutrient-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .crop-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cover-crop-header,
  .cover-core-inputs,
  .cover-profile-facts,
  .cover-impact-grid,
  .cover-field-total-grid {
    grid-template-columns: 1fr;
  }

  .cover-crop-symbol {
    width: 2.7rem;
    height: 2.7rem;
  }

  .cover-sequence-heading,
  .cover-profile-title,
  .cover-profile-headline,
  .cover-result-header,
  .cover-result-heading {
    display: grid;
  }

  .cover-sequence-heading > small {
    max-width: none;
    text-align: left;
  }

  .cover-result-header > span {
    justify-self: start;
  }

  .cover-nutrient-grid {
    grid-template-columns: 1fr;
  }

  .cover-source-links a {
    grid-template-columns: 1fr;
  }
}

.crop-journey button {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: .55rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: .9rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  padding: .7rem;
  text-align: left;
}

.crop-journey button > span {
  grid-row: 1 / 3;
  font-size: 1.35rem;
}

.crop-journey button strong {
  line-height: 1.1;
}

.crop-journey button small {
  color: var(--muted);
}

.crop-sections {
  border-top: 1px solid var(--border);
  padding: .5rem clamp(1.2rem, 5vw, 3rem) 1.5rem;
}

.crop-section {
  border-bottom: 1px solid var(--border);
}

.crop-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}

.crop-section summary > span:nth-child(2) {
  display: grid;
  flex: 1;
}

.crop-section summary small {
  margin-top: .12rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
}

.section-summary-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .8rem;
  background: var(--orange-100);
  font-size: 1.15rem;
}

.crop-section summary::-webkit-details-marker {
  display: none;
}

.crop-section summary::after {
  color: var(--orange-700);
  content: "+";
  font-size: 1.3rem;
}

.crop-section[open] summary::after {
  content: "−";
}

.crop-section-content {
  min-width: 0;
  padding: 0 0 1.2rem;
  color: var(--muted);
  white-space: pre-line;
}

.spacing-guide {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface-soft);
  padding: 1rem;
  white-space: normal;
}

.spacing-guide-heading {
  display: grid;
  gap: .2rem;
  margin-bottom: .8rem;
}

.spacing-guide-heading strong {
  color: var(--ink);
}

.spacing-guide-heading span {
  font-size: .8rem;
}

.spacing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.spacing-grid article {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--surface);
  padding: .8rem;
}

.spacing-grid article > strong,
.spacing-grid article > span {
  display: block;
  overflow-wrap: anywhere;
}

.spacing-grid article > strong {
  color: var(--ink);
}

.spacing-grid article > span {
  margin: .15rem 0 .65rem;
  font-size: .75rem;
}

.spacing-grid dl {
  display: grid;
  gap: .35rem;
  margin: 0;
}

.spacing-grid dl > div {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  border-top: 1px solid var(--border);
  padding-top: .35rem;
}

.spacing-grid dt,
.spacing-grid dd {
  margin: 0;
  font-size: .75rem;
}

.spacing-grid dd {
  color: var(--ink);
  font-weight: 800;
  text-align: right;
}

.crop-detail-aside {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 1rem;
}

.crop-detail-aside > div {
  padding: 1.1rem;
}

.aside-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: .75rem;
  border-radius: 1rem;
  background: var(--green-100);
  font-size: 1.5rem;
}

.guided-prescription-note {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin: 0 clamp(1.2rem, 4vw, 2rem) 1rem;
  border: 1px solid color-mix(in srgb, var(--green-700) 28%, var(--border));
  border-radius: var(--radius-md);
  background: var(--green-100);
  padding: 1rem;
}

.guided-prescription-note > span {
  font-size: 1.4rem;
}

.guided-prescription-note p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}

.dose-confirmation-step {
  border-color: color-mix(in srgb, var(--green-700) 30%, var(--border));
  background: color-mix(in srgb, var(--green-100) 45%, var(--surface));
}

.crop-detail-aside h2 {
  margin: 0 0 .6rem;
  font-size: 1rem;
}

.crop-detail-aside p {
  margin: 0 0 .8rem;
  color: var(--muted);
  font-size: .83rem;
}

.crop-detail-aside .button {
  width: 100%;
}

.crop-detail-aside .button + .button {
  margin-top: .55rem;
}

.agronomic-facts {
  display: grid;
  gap: .65rem;
}

.agronomic-fact {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
}

.agronomic-fact > span {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green-700) 15%, var(--surface));
  color: var(--green-700);
  font-size: .72rem;
  font-weight: 900;
}

.agronomic-fact p {
  margin: 0;
  line-height: 1.55;
}

.cultivar-explorer {
  margin-top: 1.2rem;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.cultivar-scope-note {
  margin: 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--amber-500);
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--amber-500) 10%, var(--surface));
  color: var(--text-muted);
}

.cultivar-heading {
  display: flex;
  gap: .8rem;
  align-items: center;
}

.cultivar-heading > span {
  font-size: 1.8rem;
}

.cultivar-heading h2 {
  margin: .15rem 0 0;
}

.cultivar-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 1rem;
}

.cultivar-snapshot > div,
.cultivar-card {
  display: grid;
  gap: .25rem;
  padding: .9rem;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.cultivar-snapshot span,
.cultivar-card span,
.cultivar-card small {
  color: var(--muted);
  font-size: .78rem;
}

.cultivar-list {
  margin-top: 1rem;
}

.cultivar-list summary {
  cursor: pointer;
  font-weight: 800;
}

.cultivar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  max-height: 28rem;
  margin-top: .8rem;
  overflow: auto;
}

.calculation-ready-card {
  display: flex;
  gap: .8rem;
  align-items: start;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--green-700) 45%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--green-700) 8%, var(--surface));
}

.calculation-ready-card > span {
  font-size: 1.45rem;
}

.calculation-ready-card p {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}

.organic-credit-note,
.productivity-context {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--green-700) 8%, var(--surface));
  color: var(--text-muted);
}

.organic-credit-note span {
  font-size: 1.3rem;
}

.organic-credit-note p,
.productivity-context span {
  margin: 0;
}

.productivity-context {
  flex-direction: column;
  gap: 0.2rem;
}

.yield-choice-field .choice-button {
  min-width: 11rem;
}

.target-v-lock {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.8rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--green-700) 24%, transparent);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--green-700) 9%, var(--surface));
}

.target-v-lock > span:first-child {
  font-size: 1.45rem;
}

.target-v-lock div {
  display: grid;
  gap: 0.1rem;
}

.target-v-lock small {
  color: var(--text-muted);
}

.target-v-lock strong {
  color: var(--green-700);
  font-size: 1.45rem;
}

.target-lock-badge {
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  .target-v-lock {
    grid-template-columns: auto 1fr;
  }

  .target-lock-badge {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

.recommendation-shell,
.calendar-shell {
  margin-top: 1.2rem;
  overflow: hidden;
}

.compact-heading,
.calendar-header {
  padding: clamp(1.2rem, 4vw, 2rem);
}

.compact-heading h2,
.calendar-header h2 {
  margin: .2rem 0 0;
  font-size: clamp(1.45rem, 4vw, 2rem);
}

.calendar-header p {
  margin: .4rem 0 0;
  color: var(--muted);
}

.calendar-form {
  border-top: 1px solid var(--border);
  padding: clamp(1.2rem, 4vw, 2rem);
}

.calendar-context-card,
.cover-plan-heading {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}

.calendar-context-card {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--orange-500) 35%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--orange-500) 7%, var(--surface));
}

.calendar-context-card > div {
  width: 100%;
  min-width: 0;
}

.calendar-context-card > span,
.cover-plan-heading > span {
  font-size: 1.45rem;
}

.calendar-context-card p,
.cover-plan-heading p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}

.calendar-month-strip {
  display: grid;
  grid-template-columns: repeat(12, minmax(2.2rem, 1fr));
  gap: .25rem;
  overflow-x: auto;
  margin-top: .85rem;
  padding-bottom: .3rem;
}

.calendar-month {
  display: grid;
  place-items: center;
  min-width: 2.2rem;
  border: 1px solid var(--border);
  border-radius: .55rem;
  background: var(--surface);
  padding: .35rem .2rem;
  text-transform: uppercase;
}

.calendar-month strong {
  font-size: .6rem;
}

.calendar-month small {
  margin-top: .1rem;
  color: var(--muted);
  font-size: .65rem;
}

.calendar-month.is-preferred {
  border-color: var(--green-700);
  background: var(--green-100);
  color: var(--green-800);
}

.calendar-month.is-possible {
  border-color: var(--orange-500);
  background: var(--orange-50);
  color: var(--orange-900);
}

.calendar-month-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .4rem;
  color: var(--muted);
  font-size: .66rem;
}

.calendar-month-legend span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.calendar-month-legend i {
  width: .55rem;
  height: .55rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
}

.calendar-month-legend i.is-preferred {
  border-color: var(--green-700);
  background: var(--green-700);
}

.calendar-month-legend i.is-possible {
  border-color: var(--orange-600);
  background: var(--orange-400);
}

.calendar-condition {
  display: block;
  margin-top: .65rem;
  color: var(--muted);
  line-height: 1.45;
}

.calendar-profile-choice {
  margin-top: 1rem;
}

.calendar-adjustments {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.calendar-adjustments summary {
  padding: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.calendar-adjustments .form-grid {
  padding: 0 1rem 1rem;
}

.cover-plan {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.cover-plan-heading {
  margin-bottom: 1rem;
}

.cover-plan-heading h3 {
  margin: 0;
  font-size: 1.05rem;
}

.cover-timing-fields {
  margin-top: 1rem;
}

.cover-dose-preview {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.cover-dose-empty,
.cover-dose-summary {
  display: grid;
  gap: .2rem;
  border-radius: .85rem;
  background: var(--surface-soft);
  padding: .85rem;
}

.cover-dose-empty span,
.cover-dose-summary span {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}

.cover-dose-empty.is-zero {
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border));
}

.cover-dose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .55rem;
  margin-top: .65rem;
}

.cover-dose-grid article {
  display: grid;
  gap: .18rem;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border));
  border-radius: .8rem;
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
  padding: .75rem;
}

.cover-dose-grid article > span {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cover-dose-grid article > strong {
  color: var(--green-800);
  font-size: 1rem;
}

.cover-dose-grid article > small {
  overflow-wrap: anywhere;
  color: var(--muted);
  line-height: 1.35;
}

.calendar-missing {
  grid-column: 1 / -1;
  display: grid;
  gap: .2rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--muted);
}

.calendar-missing strong {
  color: var(--text);
}

.calculator-reference {
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.calculator-reference summary {
  display: flex;
  gap: .7rem;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
}

.calculator-reference summary strong,
.calculator-reference summary small {
  display: block;
}

.calculator-reference summary small {
  margin-top: .15rem;
  color: var(--muted);
}

.reference-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  padding: 0 1rem 1rem;
}

.reference-snapshot > div {
  padding: .75rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.reference-snapshot span,
.reference-snapshot strong {
  display: block;
}

.reference-snapshot span {
  color: var(--muted);
  font-size: .75rem;
}

.reference-sections {
  max-height: 26rem;
  overflow: auto;
  padding: 0 1rem 1rem;
}

.reference-sections article + article {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
}

.reference-sections h4 {
  margin: 0 0 .4rem;
}

.reference-sections div {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.55;
}

.calendar-result {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.calendar-result h3 {
  margin: 0 0 1rem;
}

.calendar-season-fit {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .7rem;
  align-items: start;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: var(--surface-soft);
  padding: .8rem;
}

.calendar-season-fit > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .65rem;
  background: var(--surface);
  font-weight: 900;
}

.calendar-season-fit.is-preferred {
  border-color: color-mix(in srgb, var(--green-700) 38%, var(--border));
  background: var(--green-100);
}

.calendar-season-fit.is-possible {
  border-color: color-mix(in srgb, var(--orange-600) 40%, var(--border));
  background: var(--orange-50);
}

.calendar-season-fit.is-outside {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
}

.calendar-season-fit p {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.activity-timeline {
  display: grid;
  gap: .75rem;
}

.activity-item {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  border-left: 3px solid var(--orange-500);
  padding: .75rem 1rem;
  background: var(--surface-soft);
}

.activity-item time {
  color: var(--orange-700);
  font-weight: 850;
}

.activity-item strong,
.activity-item span {
  display: block;
}

.activity-item span {
  margin-top: .15rem;
  color: var(--muted);
  font-size: .85rem;
}

.recommendation-excerpt {
  padding-top: 1rem;
}

.calculator-shell {
  margin-top: 1.2rem;
  padding: clamp(1.2rem, 4vw, 2rem);
}

.calculator-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.calculator-header h2 {
  margin: 0;
  font-size: clamp(1.45rem, 4vw, 2rem);
}

.calculator-header p {
  margin: .3rem 0 0;
  color: var(--muted);
}

.mode-switch {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--surface-soft);
  padding: .2rem;
}

.mode-switch button {
  border: 0;
  border-radius: .6rem;
  background: transparent;
  padding: .45rem .7rem;
  font-size: .78rem;
  font-weight: 800;
}

.mode-switch button[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--orange-800);
}

.calculator-form {
  display: grid;
  gap: 1rem;
}

.form-step {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  padding: 1rem;
}

.form-step legend,
.form-step h3 {
  margin: 0 0 .85rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 850;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.form-field {
  display: grid;
  min-width: 0;
  gap: .32rem;
}

.form-field .form-control {
  min-width: 0;
  max-width: 100%;
}

.select-field select {
  padding-right: 2.2rem;
  cursor: pointer;
}

.form-field.has-error .form-control {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 16%, transparent);
}

.form-field label,
.form-field > span:first-child {
  font-size: .8rem;
  font-weight: 750;
}

.field-unit {
  color: var(--muted);
  font-size: .73rem;
}

.field-error {
  color: var(--danger);
  font-size: .75rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.result-panel,
.product-extension {
  margin-top: 1rem;
  padding: clamp(1.1rem, 4vw, 1.7rem);
}

.result-panel h3,
.product-extension h3 {
  margin: 0 0 .9rem;
  font-size: 1.2rem;
}

.result-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.result-item {
  border-radius: .85rem;
  background: var(--surface-soft);
  padding: .9rem;
}

.result-item span {
  display: block;
  color: var(--muted);
  font-size: .73rem;
}

.result-item strong {
  display: block;
  margin-top: .25rem;
  font-size: 1.12rem;
  overflow-wrap: anywhere;
}

.result-notes {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: .88rem;
}

.continue-panel {
  display: grid;
  justify-items: center;
  gap: .6rem;
  margin-top: 1rem;
  border: 1px dashed var(--orange-500);
  border-radius: var(--radius-md);
  background: var(--orange-50);
  padding: 1.3rem;
  text-align: center;
}

.continue-panel p {
  max-width: 35rem;
  margin: 0;
  color: var(--muted);
}

.product-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.product-results {
  margin-top: 1rem;
}

.technical-note {
  border-left: 4px solid var(--warning);
  border-radius: .4rem;
  background: color-mix(in srgb, var(--orange-100) 65%, var(--surface));
  padding: .8rem 1rem;
  color: var(--muted);
  font-size: .82rem;
}

.about-panel {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 3rem;
  margin-bottom: 5rem;
  border-top: 1px solid var(--border);
  padding-top: 4rem;
}

.about-panel p {
  color: var(--muted);
}

.source-list {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.source-list li {
  display: grid;
  gap: .2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 1rem;
}

.source-list span {
  color: var(--muted);
  font-size: .84rem;
}

.source-list a {
  width: fit-content;
  margin-top: .25rem;
  font-size: .82rem;
  font-weight: 800;
}

.app-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--border);
  padding-block: 2rem max(2rem, env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: .82rem;
}

.app-footer p {
  margin: .25rem 0 0;
}

.toast {
  position: fixed;
  z-index: 80;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  max-width: min(24rem, calc(100% - 2rem));
  border-radius: .85rem;
  background: var(--ink);
  box-shadow: var(--shadow-md);
  color: var(--surface);
  padding: .8rem 1rem;
  font-size: .85rem;
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero-copy {
    max-width: 48rem;
  }

  .season-results {
    grid-template-columns: 1fr;
  }

  .crop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crop-detail-layout {
    grid-template-columns: 1fr;
  }

  .crop-detail-aside {
    position: static;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .header-inner,
  .app-footer,
  main > section {
    width: min(calc(100% - 1.25rem), var(--page-width));
  }

  .brand small,
  #connection-label {
    display: none;
  }

  .connection-status {
    min-width: 2rem;
    justify-content: center;
    padding: .45rem;
  }

  .hero {
    gap: 2rem;
    padding-block: 3rem;
  }

  .category-scroll {
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  .hero h1 {
    font-size: clamp(2.45rem, 13vw, 3.4rem);
  }

  .season-form,
  .about-panel,
  .form-grid,
  .product-form {
    grid-template-columns: 1fr;
  }

  .crop-detail-layout > div,
  .crop-detail-main,
  .calculator-shell,
  .calendar-shell,
  .calculator-form,
  .form-step,
  .result-panel,
  .calendar-result {
    min-width: 0;
    max-width: 100%;
  }

  .season-form .button {
    width: 100%;
  }

  .crop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  .crop-card-button {
    min-height: 14rem;
    padding: .9rem;
  }

  .section-heading {
    display: block;
  }

  .section-heading > p {
    margin-top: .55rem;
  }

  .crop-detail-aside,
  .result-summary,
  .reference-snapshot,
  .cultivar-snapshot,
  .cultivar-grid,
  .spacing-grid {
    grid-template-columns: 1fr;
  }

  .crop-journey {
    gap: .45rem;
    padding-inline: .75rem;
  }

  .crop-journey button {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: .6rem .3rem;
    text-align: center;
  }

  .crop-journey button > span {
    grid-row: auto;
  }

  .calculator-header {
    display: grid;
  }

  .activity-item {
    grid-template-columns: 1fr;
    gap: .35rem;
  }

  .app-footer {
    display: grid;
  }
}

@media (max-width: 390px) {
  .culture-search-control {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .culture-search-control .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .crop-detail h1 {
    font-size: clamp(2rem, 12vw, 2.8rem);
    overflow-wrap: anywhere;
  }

  .crop-section summary {
    gap: .6rem;
  }

  .crop-section summary::after {
    flex: 0 0 auto;
  }

  .crop-grid {
    grid-template-columns: 1fr;
  }

  .crop-card-button {
    min-height: 13rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media print {
  .app-header,
  .hero,
  .season-panel,
  .category-scroll,
  .back-button,
  .crop-detail-aside,
  .app-footer,
  .button,
  .about-panel {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .crop-detail,
  .crop-detail-layout {
    display: block !important;
    width: 100%;
  }

  .crop-detail-main,
  .calculator-shell,
.result-panel {
    border: 0;
    box-shadow: none;
  }
}

.soil-photo-reader {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  margin: 1rem 0;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    var(--surface);
}

.soil-photo-copy,
.soil-photo-workspace,
.phase-result-heading,
.calendar-dose-status {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.soil-photo-copy p,
.soil-photo-workspace p,
.calendar-dose-status p,
.phase-result-heading p {
  margin: 0.3rem 0 0;
}

.soil-photo-icon,
.calendar-dose-status > span,
.phase-result-heading > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  font-size: 1.25rem;
}

.soil-photo-button {
  width: fit-content;
  cursor: pointer;
}

.soil-photo-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.soil-photo-workspace {
  align-items: center;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.soil-photo-workspace img {
  width: 7rem;
  height: 7rem;
  flex: 0 0 auto;
  border-radius: 0.8rem;
  object-fit: cover;
  border: 1px solid var(--border);
}

.soil-photo-workspace > div {
  flex: 1;
}

.soil-photo-progress {
  height: 0.55rem;
  margin-top: 0.65rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

.soil-photo-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--success));
  transition: width 180ms ease;
}

.soil-photo-review {
  padding: 0.9rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--success) 32%, var(--border));
}

.soil-photo-review > p,
.soil-photo-review > ul {
  margin-bottom: 0;
}

.soil-photo-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.soil-photo-values span {
  display: inline-flex;
  gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
}

.form-field.is-ocr-filled .form-control {
  border-color: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}

.calendar-dose-status {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
}

.calendar-dose-status.is-pending {
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
}

.calendar-dose-status.is-ready {
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}

.calendar-dose-status p + p {
  margin-top: 0.25rem;
}

.phase-result {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.phase-result-heading h4 {
  margin: 0;
}

.phase-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.phase-result-grid article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.75rem;
  padding: 0.9rem;
  border-radius: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
}

.phase-result-grid article > strong,
.phase-result-grid article > small {
  grid-column: 1 / -1;
}

.calendar-quantity-summary {
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
}

.calendar-quantity-summary p {
  margin: 0.45rem 0 0;
}

.annual-activity-map {
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  background: var(--surface);
  overflow: hidden;
}

.annual-activity-map summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}

.annual-activity-map summary::-webkit-details-marker {
  display: none;
}

.annual-activity-map summary > span:first-child {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
}

.annual-activity-map summary > span:last-child {
  display: grid;
  gap: 0.15rem;
}

.annual-activity-map summary small {
  color: var(--muted);
  font-weight: 500;
}

.annual-activity-map > p,
.annual-activity-map > .activity-checklist,
.annual-activity-map > .annual-activity-table,
.annual-activity-map > .crop-stage-map,
.annual-activity-map > .activity-cover-bridge {
  margin-inline: 1rem;
}

.crop-stage-map {
  display: grid;
  gap: .8rem;
  padding: .4rem 0 1rem;
}

.crop-stage-group {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .75rem;
  min-width: 0;
}

.crop-stage-marker {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  padding-top: .7rem;
}

.crop-stage-marker span {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green-800);
  color: white;
  font-size: .75rem;
  font-weight: 900;
}

.crop-stage-marker strong {
  padding-top: .27rem;
  font-size: .78rem;
  line-height: 1.25;
}

.crop-stage-items {
  display: grid;
  gap: .45rem;
  min-width: 0;
}

.crop-stage-items article {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .7rem;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: var(--surface-soft);
  padding: .75rem;
}

.crop-stage-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .7rem;
  background: var(--surface);
  font-size: 1.1rem;
}

.crop-stage-title {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
}

.crop-stage-title strong {
  font-size: .88rem;
}

.crop-stage-title time {
  flex: 0 0 auto;
  color: var(--orange-700);
  font-size: .72rem;
  font-weight: 850;
  text-align: right;
}

.crop-stage-items p {
  margin: .22rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.activity-cover-bridge {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .7rem;
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--success) 34%, var(--border));
  border-radius: .9rem;
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
  padding: .85rem;
}

.activity-cover-bridge > span {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .75rem;
  background: var(--surface);
}

.activity-cover-bridge p,
.activity-map-note {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.activity-map-note {
  margin: 0 1rem 1rem !important;
  border-top: 1px dashed var(--border);
  padding-top: .8rem;
}

.activity-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 1rem;
}

.activity-checklist span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
  font-size: 0.88rem;
}

.activity-checklist i {
  color: var(--success);
  font-style: normal;
  font-weight: 800;
}

.annual-activity-table {
  overflow-x: auto;
  padding-bottom: 0.6rem;
}

.annual-activity-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1.7fr) repeat(12, minmax(2.7rem, 0.4fr));
  min-width: 52rem;
  border-bottom: 1px solid var(--border);
}

.annual-activity-row > * {
  padding: 0.55rem 0.35rem;
  text-align: center;
  font-size: 0.76rem;
}

.annual-activity-row > strong {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: var(--surface);
}

.annual-activity-row.is-header {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.annual-activity-row .intensity-1 {
  background: color-mix(in srgb, var(--warning) 11%, var(--surface));
}

.annual-activity-row .intensity-2 {
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
}

.annual-activity-row .intensity-3 {
  background: color-mix(in srgb, var(--accent) 19%, var(--surface));
  font-weight: 800;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(0.45);
}

@media (max-width: 640px) {
  .soil-photo-workspace {
    align-items: flex-start;
  }

  .soil-photo-workspace img {
    width: 5.5rem;
    height: 5.5rem;
  }

  .phase-result-grid {
    grid-template-columns: 1fr;
  }

  .crop-stage-group {
    grid-template-columns: 1fr;
    gap: .35rem;
  }

  .crop-stage-marker {
    padding-top: 0;
  }

  .crop-stage-title {
    display: grid;
    gap: .15rem;
  }

  .crop-stage-title time {
    text-align: left;
  }

  .cover-dose-grid {
    grid-template-columns: 1fr;
  }
}