/* ============================================================
   TheAgriGrid — tools.css  (INTELLIGENCE-TOOL COMPONENTS)
   Shared styles for calculator, schemes, mandi, crop-compare.
   Depends on styles.css + components.css (load those first).
   NOTE: existing tool pages still carry their own <style> blocks;
   those migrate here incrementally as components are standardized.
   ============================================================ */

/* ============================================================
   CROP COMPARE — Module 1 components
   Reusable: Score Card, Comparison Table, Metric Badge,
   Insight Card, Chart Placeholder, Sticky Compare Bar.
   ============================================================ */

/* --- page shell --- */
.cc-wrap { max-width: var(--max-width, 1180px); margin: 0 auto; padding: 0 24px 80px; }
.cc-hero { text-align: center; padding: 48px 24px 28px; max-width: 820px; margin: 0 auto; }
.cc-hero .eyebrow { font-family: var(--sans-ui); font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--terracotta); margin-bottom: 14px; }
.cc-hero h1 { font-family: var(--serif-headline); font-size: clamp(34px,5vw,52px); font-weight: 500; color: var(--green-dark); letter-spacing: -1.5px; line-height: 1.04; margin-bottom: 16px; }
.cc-hero .subtitle { font-family: var(--serif-headline); font-style: italic; font-size: 18px; color: var(--muted); font-weight: 400; line-height: 1.45; }

/* --- UI-only banner --- */
.cc-uinote { max-width: 1180px; margin: 0 auto 28px; background: var(--cream-warm); border-left: 3px solid var(--terracotta); padding: 14px 20px; font-family: var(--serif-body); font-size: 14px; line-height: 1.55; color: var(--text-body); }
.cc-uinote strong { color: var(--green-dark); }

/* --- crop selector --- */
.cc-selectors { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: end; max-width: 720px; margin: 0 auto 36px; }
@media (max-width: 640px){ .cc-selectors { grid-template-columns: 1fr; } .cc-vs { display: none; } }
.cc-selectors .field label { display:block; font-family: var(--sans-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.4px; color: var(--green-dark); margin-bottom: 8px; text-transform: uppercase; }
.cc-selectors select { width: 100%; padding: 13px 16px; font-family: var(--sans-ui); font-size: 15px; border: 1px solid var(--green-dark); background: var(--cream); color: var(--green-dark); cursor: pointer; }
.cc-vs { font-family: var(--serif-headline); font-style: italic; font-size: 22px; color: var(--muted); padding-bottom: 10px; }

/* --- sticky compare bar --- */
.cc-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: var(--green-dark); color: var(--cream); padding: 12px 24px; display: flex; align-items: center; justify-content: center; gap: 18px; font-family: var(--sans-ui); font-size: 14px; font-weight: 500; box-shadow: 0 2px 12px rgba(0,0,0,0.12); transform: translateY(-100%); transition: transform 0.25s; pointer-events: none; }
.cc-sticky.show { transform: translateY(0); pointer-events: auto; }
.cc-sticky b { color: #E8C39E; font-weight: 700; }
.cc-sticky .cc-vs-mini { opacity: 0.6; }

/* --- section header (compare) --- */
.cc-sec { display: flex; align-items: baseline; gap: 14px; margin: 44px 0 8px; padding-bottom: 12px; border-bottom: 2px solid var(--green-dark); }
.cc-sec h2 { font-family: var(--serif-headline); font-size: 26px; font-weight: 500; color: var(--green-dark); letter-spacing: -0.6px; }
.cc-sec .hint { font-family: var(--sans-ui); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

/* --- executive summary --- */
.cc-exec { background: var(--green-dark); color: var(--cream); padding: 32px 30px; margin: 20px 0 8px; }
.cc-exec .rec-label { font-family: var(--sans-ui); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #E8C39E; margin-bottom: 12px; }
.cc-exec .rec { font-family: var(--serif-headline); font-size: clamp(22px,3vw,30px); font-weight: 500; letter-spacing: -0.5px; line-height: 1.25; margin-bottom: 14px; }
.cc-exec .rec-sub { font-family: var(--serif-body); font-size: 15.5px; line-height: 1.6; color: var(--cream-warm); opacity: 0.92; max-width: 720px; }

/* --- SCORE CARD (canonical) --- */
.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0 8px; }
@media (max-width: 700px){ .score-grid { grid-template-columns: 1fr; } }
.score-card { background: var(--cream-warm); border: 1px solid var(--hair-line); border-top: 3px solid var(--green-dark); padding: 24px 24px 20px; }
.score-card .sc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.score-card .sc-crop { font-family: var(--serif-headline); font-size: 22px; font-weight: 600; color: var(--green-dark); letter-spacing: -0.5px; }
.score-card .sc-confidence { font-family: var(--sans-ui); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; }
.sc-confidence[data-level="high"] { background: rgba(45,90,71,0.14); color: var(--green-mid); }
.sc-confidence[data-level="medium"] { background: rgba(232,195,158,0.3); color: #8a6a3a; }
.sc-confidence[data-level="low"] { background: rgba(196,69,54,0.12); color: var(--terracotta-dark); }
.score-card .sc-value { font-family: var(--serif-headline); font-size: 52px; font-weight: 500; color: var(--green-dark); letter-spacing: -2px; line-height: 1; }
.score-card .sc-value .sc-max { font-size: 22px; color: var(--muted); font-weight: 400; }
.score-card .sc-caption { font-family: var(--serif-body); font-size: 14px; line-height: 1.5; color: var(--text-body); margin: 10px 0 14px; }
.score-card .sc-method { font-family: var(--sans-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--terracotta); }
.score-card .sc-bars { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.sc-bar-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; font-family: var(--sans-ui); font-size: 11px; color: var(--muted); }
.sc-bar-track { height: 6px; background: var(--cream-dark); border-radius: 3px; overflow: hidden; }
.sc-bar-fill { height: 100%; background: var(--green-mid); border-radius: 3px; }

/* --- METRIC BADGE --- */
.metric-badge { display: inline-block; font-family: var(--sans-ui); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; }
.metric-badge.vlow { background:#6BA368; color:#0E2B1F; }
.metric-badge.low { background:#A9C47F; color:#0E2B1F; }
.metric-badge.med { background:#E8C39E; color:#4A2A1A; }
.metric-badge.high { background:#C44536; color:#fff; }
.metric-badge.neutral { background: var(--cream-dark); color: var(--text-body); }

/* --- COMPARISON TABLE --- */
.compare-table { width: 100%; border-collapse: collapse; margin: 16px 0 8px; font-family: var(--serif-body); }
.compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--hair-line); font-size: 14.5px; }
.compare-table thead th { font-family: var(--serif-headline); font-size: 17px; font-weight: 600; color: var(--green-dark); border-bottom: 2px solid var(--green-dark); }
.compare-table thead th:first-child { font-family: var(--sans-ui); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.compare-table .ct-metric { font-family: var(--sans-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: var(--green-dark); text-transform: uppercase; }
.compare-table .ct-best { position: relative; font-weight: 600; color: var(--green-dark); background: rgba(45,90,71,0.06); }
.compare-table .ct-best::after { content: '✓'; margin-left: 8px; color: var(--green-mid); font-weight: 700; }
.compare-table tbody tr:hover { background: var(--cream-warm); }

/* --- INSIGHT CARD (AI, UI only) --- */
.cc-insight { background: var(--cream-warm); border: 1px solid var(--hair-line); border-left: 3px solid #E8C39E; padding: 24px 26px; margin: 20px 0 8px; }
.cc-insight .ai-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans-ui); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #8a6a3a; margin-bottom: 12px; }
.cc-insight .ai-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: #E8C39E; }
.cc-insight p { font-family: var(--serif-body); font-size: 15.5px; line-height: 1.62; color: var(--text-body); margin-bottom: 10px; }
.cc-insight .ai-foot { font-family: var(--sans-ui); font-size: 11px; color: var(--muted); font-style: normal; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair-line); }

/* --- CHART PLACEHOLDER --- */
.cc-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0 8px; }
@media (max-width: 700px){ .cc-charts { grid-template-columns: 1fr; } }
.chart-ph { background: var(--cream-warm); border: 1px dashed var(--cream-dark); padding: 28px 24px; min-height: 200px; display: flex; flex-direction: column; }
.chart-ph .ph-title { font-family: var(--sans-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--green-dark); margin-bottom: 6px; }
.chart-ph .ph-body { flex-grow: 1; display: flex; align-items: center; justify-content: center; font-family: var(--serif-headline); font-style: italic; font-size: 15px; color: var(--muted); text-align: center; }

/* --- related crops --- */
.cc-related { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
.cc-related a { font-family: var(--sans-ui); font-size: 13px; font-weight: 500; color: var(--green-dark); background: var(--cream-warm); border: 1px solid var(--hair-line); padding: 10px 16px; transition: all 0.15s; }
.cc-related a:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* --- methodology --- */
.cc-method-block { background: var(--cream); border: 1px solid var(--hair-line); padding: 24px 26px; margin: 20px 0 8px; }
.cc-method-block h3 { font-family: var(--sans-ui); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--green-dark); margin-bottom: 12px; }
.cc-method-block p { font-family: var(--serif-body); font-size: 13.5px; line-height: 1.65; color: var(--muted); max-width: 820px; }

/* Crop Compare — table note + chart tweaks */
.cc-tablenote { font-family: var(--sans-ui); font-size: 12px; color: var(--muted); margin-top: 10px; font-style: italic; }
#chartMoney, #chartWater { padding-top: 8px; }

/* Crop Compare — clean HTML bar charts */
.bc-chart { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.bc-row { display: flex; flex-direction: column; gap: 5px; }
.bc-label { font-family: var(--sans-ui); font-size: 12.5px; font-weight: 500; color: var(--text-body); }
.bc-track { display: flex; align-items: center; gap: 8px; }
.bc-fill { height: 15px; border-radius: 2px; min-width: 2px; transition: width 0.3s; }
.bc-val { font-family: var(--sans-ui); font-size: 12px; font-weight: 600; color: var(--green-dark); white-space: nowrap; }
.bc-na { font-family: var(--sans-ui); font-size: 12px; font-style: italic; color: var(--muted); }