/* Soil report: nutrient gauge cards, small micronutrient tiles, the "In detail" view, and the plan section.
   Loaded by soil-doctor.html only. Bright zone colours, chosen to stand out on the light theme. */

body[data-page='soil'] {
  --z-low: #ff9d00;
  --z-ok: #2f9e44;
  --z-high: #f43f3f;
  --z-low-ink: #d97706;
  --z-ok-ink: #237a35;
  --z-high-ink: #e11d1d;
  --z-low-rgb: 255 157 0;
  --z-ok-rgb: 47 158 68;
  --z-high-rgb: 244 63 63;
}
.nz .low, .nz-modal .low, .nz-detail.low { --zc: var(--z-low); --zi: var(--z-low-ink); --zr: var(--z-low-rgb); }
.nz .ok, .nz-modal .ok, .nz-detail.ok { --zc: var(--z-ok); --zi: var(--z-ok-ink); --zr: var(--z-ok-rgb); }
.nz .high, .nz-modal .high, .nz-detail.high { --zc: var(--z-high); --zi: var(--z-high-ink); --zr: var(--z-high-rgb); }

.nz { display: grid; gap: var(--s-7); }
.nz-group { display: grid; gap: var(--s-5); }
.nz-group-head h4 { font-family: var(--font-ui); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.nz-group-head p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 6px; }

/* ---------- Cards: plain white, one thin gauge ---------- */
.nz-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.nz-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px 16px 12px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  box-shadow: 0 10px 24px -18px rgb(13 60 52 / 0.35);
  animation: fade-up 480ms var(--ease) both;
}
.nz-head { display: flex; align-items: center; gap: 10px; }
.nz-head h4 { flex: 1; font-family: var(--font-ui); font-size: 1.05rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.nz-sym {
  width: 36px; height: 36px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
}
.nz-sym.lg { width: 52px; height: 52px; border-radius: 14px; font-size: 1rem; background: var(--zc); border-color: transparent; color: #fff; }

.nz-gauge { width: 100%; max-width: 250px; margin-inline: auto; }
.nz-gauge-svg { width: 100%; height: auto; overflow: visible; }
.nz-arc { opacity: 0.4; transition: opacity var(--dur); }
.nz-arc.low { stroke: var(--z-low); }
.nz-arc.ok { stroke: var(--z-ok); }
.nz-arc.high { stroke: var(--z-high); }
.nz-arc.is-on { opacity: 1; }
.nz-needle { transform-box: view-box; transform-origin: 100px 94px; transform: rotate(var(--rot, 90deg)); animation: nz-swing 1.1s cubic-bezier(0.34, 1.3, 0.64, 1) both; }
.nz-wait .nz-needle { animation: none; transform: rotate(0deg); }
.nz-needle line { stroke: #12302b; stroke-width: 2.5; stroke-linecap: round; }
.nz-needle circle { fill: #12302b; }
@keyframes nz-swing { from { transform: rotate(0deg); } }

.nz-lbl { font-family: var(--font-ui); font-size: 8.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--muted); }
.nz-lbl.is-on { font-weight: 600; }
.nz-lbl.low.is-on { fill: var(--z-low-ink); }
.nz-lbl.ok.is-on { fill: var(--z-ok-ink); }
.nz-lbl.high.is-on { fill: var(--z-high-ink); }
html[lang='hi'] .nz-lbl { text-transform: none; letter-spacing: 0; font-size: 9.5px; }

.nz-status { font-size: 1.05rem; font-weight: 600; color: var(--zi); }

.nz-more {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--teal);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.nz-more .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.nz-more:hover { color: var(--text); }
.nz-more:hover .icon { transform: translateX(3px); }

/* ---------- Micronutrients: small plain cards ---------- */
.nz-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.nz-tile {
  display: grid;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  animation: fade-up 420ms var(--ease) both;
  transition: border-color var(--dur), transform 220ms var(--ease);
}
.nz-tile:hover { border-color: var(--teal); transform: translateY(-2px); }
.nz-tile-top { display: flex; align-items: center; gap: 10px; }
.nz-tile .nz-sym { width: 32px; height: 32px; border-radius: 9px; font-size: 0.72rem; }
.nz-tile-name { font-weight: 600; color: var(--text); line-height: 1.25; }
.nz-line1 { position: relative; display: block; height: 4px; margin-inline: 6px; border-radius: 4px; background: var(--line-strong); }
.nz-line1 b {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--zc);
  box-shadow: 0 0 0 3px var(--surface-1);
  animation: nz-dot 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nz-wait .nz-line1 b { animation: none; left: 0 !important; }
@keyframes nz-dot { from { left: 0; } }
.nz-tile-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nz-tile-bottom strong { color: var(--zi); font-size: var(--fs-sm); font-weight: 600; }
.nz-tile-more { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--teal); }
.nz-tile-more .icon { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.nz-tile:hover .nz-tile-more .icon { transform: translateX(3px); }

/* ---------- "In detail" ---------- */
.nz-modal { width: min(680px, calc(100vw - 24px)); }
.nz-detail { display: grid; gap: 22px; }
.nz-detail-head { display: flex; align-items: center; gap: 16px; padding-right: 36px; }
.nz-detail-head h2 { font-size: 2rem; margin-bottom: 8px; }
.nz-detail-gauge { display: grid; gap: 6px; max-width: 240px; width: 100%; margin-inline: auto; }
.nz-detail-gauge .nz-gauge { max-width: none; }
.nz-story {
  padding: 16px 20px;
  border-radius: 16px;
  border-left: 5px solid var(--zc);
  background: rgb(var(--zr) / 0.12);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.65;
}
.nz-facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 560px) { .nz-facts { grid-template-columns: 1fr; } }
.nz-fact { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line-bold); background: var(--surface-1); }
.nz-fact span { font-size: var(--fs-xs); color: var(--text-2); }
.nz-fact strong { font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.nz-fact.low strong, .nz-fact.high strong { color: var(--zi); }
.nz-fact.ok strong { color: var(--z-ok-ink); }
.nz-block { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface-2); }
.nz-block h5 { font-family: var(--font-ui); font-size: var(--fs-md); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.nz-block p { color: var(--text-2); line-height: 1.6; }
.nz-block-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-1); color: var(--teal); border: 1px solid var(--line-strong); }
.nz-block.low { background: rgb(var(--z-low-rgb) / 0.12); border-color: rgb(var(--z-low-rgb) / 0.45); }
.nz-block.low .nz-block-ic { color: var(--z-low-ink); border-color: rgb(var(--z-low-rgb) / 0.5); }
.nz-block.high { background: rgb(var(--z-high-rgb) / 0.09); border-color: rgb(var(--z-high-rgb) / 0.4); }
.nz-block.high .nz-block-ic { color: var(--z-high-ink); border-color: rgb(var(--z-high-rgb) / 0.45); }
.nz-block.ok { background: rgb(var(--z-ok-rgb) / 0.12); border-color: rgb(var(--z-ok-rgb) / 0.5); }
.nz-block.ok .nz-block-ic { color: var(--z-ok-ink); border-color: rgb(var(--z-ok-rgb) / 0.5); }
.nz-block.do { background: rgb(var(--blue-rgb) / 0.08); border-color: rgb(var(--blue-rgb) / 0.4); }
.nz-block.do .nz-block-ic { color: var(--blue); border-color: rgb(var(--blue-rgb) / 0.4); }
.nz-note { font-size: var(--fs-sm); color: var(--text-2); }
.nz-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding-top: 4px; }

/* ---------- Next step: part of the report, not a separate box ---------- */
.plan-next .report-section-head > div { display: grid; gap: 8px; }
.plan-cta {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-6);
  border-radius: var(--r-xl);
  border: 1.5px solid transparent;
  background:
    linear-gradient(135deg, rgb(var(--blue-rgb) / 0.09), rgb(var(--green-rgb) / 0.14)) padding-box,
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    var(--grad) border-box;
  box-shadow: 0 22px 40px -28px rgb(var(--teal-rgb) / 0.8);
}
@media (min-width: 820px) { .plan-cta { grid-template-columns: auto 1fr auto; gap: var(--s-6); padding: var(--s-6) var(--s-7); } }
.plan-cta-copy { display: grid; gap: 10px; }
.plan-cta-copy h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.01em; }
html[lang='hi'] .plan-cta-copy h4 { font-size: 1.5rem; line-height: 1.35; }
.plan-cta-copy p { color: var(--text); max-width: 60ch; }
.plan-cta-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.plan-cta-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; background: var(--surface-1); border: 1.5px solid var(--zc); color: var(--zi); }
.plan-cta-chips li.low { --zc: var(--z-low); --zi: var(--z-low-ink); }
.plan-cta-chips li.high { --zc: var(--z-high); --zi: var(--z-high-ink); }
.plan-cta-chips b { min-width: 30px; padding: 2px 6px; border-radius: 8px; background: var(--zc); color: #fff; text-align: center; font-size: 0.74rem; }
.head-jump { margin-top: 2px; }

/* ---------- Crops that suit your soil: one list, best first ---------- */
.cm { display: grid; gap: 18px; }
.cm-key { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text-2); font-size: var(--fs-sm); }
.cm-key li { display: inline-flex; align-items: center; gap: 8px; }
.cm-key .cm-stars svg { width: 14px; height: 14px; }
.cm-key b { width: 10px; height: 10px; border-radius: 50%; background: var(--line-bold); }
.cm-key .best b { background: var(--z-ok); }
.cm-key .moderate b, .cm-key .low b { background: var(--z-ok); }
.cm-grid { list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cm-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px 12px 16px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  box-shadow: 0 10px 24px -18px rgb(13 60 52 / 0.35);
  animation: fade-up 420ms var(--ease) both;
  transition: transform 220ms var(--ease), border-color var(--dur);
}
.cm-card:hover { transform: translateY(-3px); border-color: var(--teal); }
.cm-card strong { font-size: var(--fs-md); font-weight: 600; color: var(--text); line-height: 1.2; }
.cm-plate { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); }
.cm-meter { display: grid; justify-items: center; gap: 6px; }
.cm-stars { display: inline-flex; gap: 3px; }
.cm-stars svg { width: 18px; height: 18px; fill: var(--z-ok); }
/* The stars pop in one after another, then every few seconds give a small move (on phones and on the website alike).
   Pointing at a card makes its stars shine in turn instead. */
.cm-stars .st { display: inline-flex; transform-origin: 50% 55%; }
.cm-card .cm-stars svg { transform-origin: 50% 55%; animation: star-pop 600ms cubic-bezier(0.34, 1.6, 0.64, 1) both; }
.cm-card .cm-stars .st:nth-child(1) svg { animation-delay: 380ms; }
.cm-card .cm-stars .st:nth-child(2) svg { animation-delay: 540ms; }
.cm-card .cm-stars .st:nth-child(3) svg { animation-delay: 700ms; }
.cm-card .cm-stars .st { animation: star-drift 6s ease-in-out infinite; }
.cm-card .cm-stars .st:nth-child(1) { animation-delay: 1.4s; }
.cm-card .cm-stars .st:nth-child(2) { animation-delay: 1.65s; }
.cm-card .cm-stars .st:nth-child(3) { animation-delay: 1.9s; }
@media (hover: hover) {
  .cm-card:hover .cm-stars .st { animation: star-shine 800ms ease-in-out both; }
  .cm-card:hover .cm-stars .st:nth-child(1) { animation-delay: 0s; }
  .cm-card:hover .cm-stars .st:nth-child(2) { animation-delay: 140ms; }
  .cm-card:hover .cm-stars .st:nth-child(3) { animation-delay: 280ms; }
}
@keyframes star-pop { from { opacity: 0; transform: scale(0) rotate(-140deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes star-shine {
  0%, 100% { transform: scale(1) rotate(0); filter: brightness(1); }
  45% { transform: scale(1.35) rotate(20deg); filter: brightness(1.12); }
}
@keyframes star-drift {
  0%, 72%, 100% { transform: translateY(0) rotate(0) scale(1); }
  80% { transform: translateY(-3px) rotate(-10deg) scale(1.15); }
  90% { transform: translateY(0) rotate(7deg) scale(1.05); }
}
.cm-meter > span:last-child { font-size: var(--fs-xs); font-weight: 600; color: var(--z-ok-ink); }
.cm-card.low .cm-meter > span:last-child { color: var(--text-2); }
.cm-card.is-mine { border: 2px solid var(--teal); box-shadow: 0 14px 30px -18px rgb(var(--teal-rgb) / 0.7); }
.cm-mine { position: absolute; top: -11px; padding: 2px 12px; border-radius: var(--r-pill); background: var(--grad); color: var(--on-brand); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
html[lang='hi'] .cm-mine { text-transform: none; letter-spacing: 0; font-size: 0.75rem; }

/* ---------- Fertilizer options: all side by side ---------- */
.po { display: grid; gap: 18px; }
.po-note { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-sm); }
.po-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; }
.po-grid.one { grid-template-columns: minmax(300px, 460px); }
.po-card {
  display: flex;
  flex-direction: column;
  padding: 24px 26px 8px;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  box-shadow: 0 12px 28px -22px rgb(13 60 52 / 0.4);
  animation: fade-up 460ms var(--ease) both;
}
/* Quiet header: a small numbered circle and the label */
.po-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; }
.po-head h4 { font-family: var(--font-ui); font-size: 0.88rem; font-weight: 500; color: var(--text-2); letter-spacing: 0.01em; }
.po-head p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.po-num { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--teal-rgb) / 0.12); color: var(--teal); font-size: 0.85rem; font-weight: 600; }
.po-list { list-style: none; display: flex; flex-direction: column; }

/* One fertilizer: the name first, then the amount, right on the card. No boxes inside the card. */
.po-item { display: grid; gap: 6px; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.po-name { font-size: 0.98rem; font-weight: 500; line-height: 1.3; color: var(--text); letter-spacing: -0.005em; }
.po-amount { display: grid; gap: 2px; }
.po-amount b { font-size: 1.45rem; font-weight: 500; line-height: 1.05; color: var(--z-ok-ink); letter-spacing: -0.02em; }
.po-amount em { font-style: normal; font-size: 0.82rem; font-weight: 400; color: var(--text-2); }
.po-dose { font-size: 0.8rem; color: var(--muted); }
.po-farm { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.86rem; font-weight: 600; color: var(--teal); }
.po-farm .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.po-farm:hover { text-decoration: underline; text-underline-offset: 4px; }
.po-farm:hover .icon { transform: translateX(3px); }
.po-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: rgb(var(--green-rgb) / 0.14); color: var(--green); }
.po-ic .icon { width: 24px; height: 24px; }
.po-ic.lg { width: 56px; height: 56px; border-radius: 16px; }
.po-sub { color: var(--text-2); font-size: var(--fs-sm); margin-top: 4px; }

.plan-cta-chips li.ok { --zc: var(--z-ok); --zi: var(--z-ok-ink); }

/* ---- Check the values: compact, calmer cards (Soil Doctor only) ---- */
body[data-page='soil'] .value-group { gap: 10px; }
body[data-page='soil'] .value-group legend { gap: 12px; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
body[data-page='soil'] .value-group legend .icon { width: 16px; height: 16px; padding: 8px; border-radius: 11px; }
body[data-page='soil'] .value-group > .hint { font-size: 0.84rem; font-weight: 400; color: var(--muted); margin: -4px 0 0 52px; }
body[data-page='soil'] .value-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); margin-top: 6px; }
body[data-page='soil'] .value-field {
  gap: 10px;
  padding: 12px 14px 12px;
  border-width: 1px;
  border-color: var(--line-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  box-shadow: 0 8px 18px -16px rgb(13 60 52 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.9);
}
body[data-page='soil'] .value-field:hover { border-color: rgb(var(--teal-rgb) / 0.4); }
body[data-page='soil'] .value-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgb(var(--teal-rgb) / 0.16); }
body[data-page='soil'] .value-field.is-ai { border-color: rgb(74 185 77 / 0.55); background: linear-gradient(180deg, rgb(74 185 77 / 0.08), var(--surface-1) 75%); }
body[data-page='soil'] .value-field label { gap: 9px; font-size: 0.86rem; font-weight: 600; letter-spacing: -0.005em; }
body[data-page='soil'] .value-field .nc-sym { width: 28px; height: 28px; border-radius: 9px; font-size: 0.68rem; font-weight: 600; border-width: 1px; border-color: rgb(var(--teal-rgb) / 0.3); background: rgb(var(--teal-rgb) / 0.1); }
body[data-page='soil'] .value-field .req { font-weight: 600; }
body[data-page='soil'] .value-field .ai-tag .icon { width: 14px; height: 14px; }
body[data-page='soil'] .value-field .input { min-height: 42px; font-size: 1rem; font-weight: 500; border-width: 1px; border-radius: 10px; background: rgb(var(--teal-rgb) / 0.05); }
body[data-page='soil'] .value-field .input-group .suffix { border-width: 1px; font-size: 0.78rem; font-weight: 600; background: rgb(var(--teal-rgb) / 0.12); }
body[data-page='soil'] .value-field .hint { font-size: 0.76rem; font-weight: 400; color: var(--muted); line-height: 1.4; }
body[data-page='soil'] .value-group + .value-group { margin-top: 6px; }
@media (max-width: 560px) {
  body[data-page='soil'] .value-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  body[data-page='soil'] .value-group > .hint { margin-left: 0; }
}

/* ---------- Locked results: blurred placeholder shapes, with the way into the app ---------- */
.nz-locked { cursor: pointer; position: relative; }
.nz-locked:hover { border-color: var(--teal); }
.nz-blur { filter: blur(7px); opacity: 0.75; pointer-events: none; user-select: none; }
.nz-lockmark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--teal); }
.nz-more-lock .icon { width: 15px; height: 15px; }
.nz-more-lock:hover .icon { transform: none; }
.nz-locked .nz-line1 b { background: var(--muted); animation: none; }
.nz-ph { display: block; width: 46px; height: 12px; border-radius: 6px; background: var(--text-2); }
.nz-tile.nz-locked .nz-tile-more .icon { transform: none; }

/* Crops left out of the report: empty shapes with the way into the app */
.cm-locked { cursor: pointer; align-content: center; }
.cm-locked .cm-plate { background: var(--line-strong); }
.cm-ph { display: block; width: 70px; height: 12px; border-radius: 6px; background: var(--text-2); }
.cm-see { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--teal); }

/* Fertilizer recommendations left out of the plan: empty shapes with the way into the app */
.po-locked { cursor: pointer; align-content: start; }
.po-locked:hover { border-color: var(--teal); }
.po-lockbody { display: grid; gap: 12px; padding-block: 8px 14px; }
.po-ph { display: block; width: 90px; height: 12px; border-radius: 6px; background: var(--text-2); }
.po-ph.wide { width: 80%; height: 14px; }
.po-ph.big { width: 45%; height: 26px; }
.po-locked .po-num { background: var(--line-strong); }
.po-see { padding-bottom: 18px; display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: var(--fs-sm); font-weight: 600; color: var(--teal); }