/* AgriIQ layout. Colours come from the tokens in weatheriq.css; no literal colours here. */
body { display: block; min-height: 0; }
#panel-farm, #panel-region { padding: 0 var(--margin) var(--g3); }
.agri-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--phi-fr)); gap: var(--g3); align-items: start; padding-top: var(--g2); }
#farmmap { height: 280px; border: 1px solid var(--line); background: var(--app); }
#regionmap { height: 360px; border: 1px solid var(--line); background: var(--app); margin-bottom: var(--g2); }
.agri-form { display: grid; gap: var(--g2); margin-top: var(--g2); }
.agri-form .field { display: grid; gap: 4px; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); font-weight: 700; }
.agri-form .input { min-height: var(--tap); padding: 0 12px; border: 1px solid var(--line-strong); background: var(--app); color: var(--ink); font: inherit; font-weight: 400; border-radius: 0; }
.agri-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g2); }
.btn { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--g2); border: 1px solid var(--line-strong); background: var(--tile); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700; }
.coords { margin: 0; color: var(--ink-2); font-family: var(--ff-mono); font-size: var(--t-small); }
#searchhits { display: grid; gap: 4px; }
.lede { margin: 0; max-width: var(--measure); }
.headline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g2); align-items: center; padding: var(--g2); border: 1px solid var(--line-strong); background: var(--tile); }
.cri { width: 88px; height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid var(--line-strong); font-family: var(--ff-mono); }
.cri b { font-size: var(--t-headline); line-height: var(--lh-headline); }
.cri small { font-size: var(--t-small); color: var(--ink-2); }
.headline h2 { margin: 0; font-size: var(--t-title); line-height: var(--lh-title); }
.headline p { margin: 4px 0 0; }
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); font-size: var(--t-small); line-height: 20px; font-weight: 700; }
.chip.green { border-color: var(--green); color: var(--green-ink, var(--ink)); }
.chip.yellow { border-color: var(--gold); color: var(--ink); }
.chip.orange { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.chip.red { background: var(--red); border-color: var(--red); color: var(--on-red); }
.chip.grey { color: var(--ink-2); }
.cri.green { border-color: var(--green); } .cri.yellow { border-color: var(--gold); } .cri.orange { border-color: var(--gold); background: var(--gold-dim); } .cri.red { border-color: var(--red); background: var(--red-dim); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g3); margin-top: var(--g2); }
.matrix { display: grid; grid-template-columns: 24px repeat(5, minmax(0, 1fr)); grid-auto-rows: 44px; gap: 2px; }
.matrix .cell { position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); font-size: var(--t-small); border: 1px solid var(--line); }
.matrix .cell.green { background: var(--green-dim); } .matrix .cell.yellow { background: var(--tile-raised); } .matrix .cell.orange { background: var(--gold-dim); } .matrix .cell.red { background: var(--red-dim); }
.matrix .axis { display: flex; align-items: center; justify-content: center; font-size: var(--t-small); color: var(--ink-2); }
.matrix .dot { min-width: 24px; height: 24px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--app); font-weight: 700; }
.axisnote { margin: 8px 0 0; font-size: var(--t-small); color: var(--ink-2); }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: var(--lh-small); }
.table th, .table td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.table td.num, .table th.num { text-align: right; font-family: var(--ff-mono); }
.scrollx { overflow-x: auto; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(8px, 1fr); gap: 2px; align-items: end; height: 120px; margin-top: var(--g1); border-bottom: 1px solid var(--line-strong); }
.strip i { display: block; background: var(--green); }
.strip i.c-mediocre { background: var(--gold); } .strip i.c-poor, .strip i.c-failure { background: var(--red); }
.strip i[data-analog] { outline: 2px solid var(--cyan); outline-offset: 1px; }
.stripaxis { display: flex; justify-content: space-between; font-family: var(--ff-mono); font-size: var(--t-small); color: var(--ink-2); }
.warn { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--g2); align-items: center; padding: var(--g1) 0; border-bottom: 1px solid var(--line); }
.warn img { width: 44px; height: 44px; }
.warn b { display: block; }
.warn small { color: var(--ink-2); font-size: var(--t-small); }
.note { padding: var(--g2); border: 1px solid var(--line-strong); background: var(--tile); margin-top: var(--g2); }
.note .who { color: var(--cyan); font-size: var(--t-small); letter-spacing: .12em; text-transform: uppercase; }
.sources { color: var(--ink-2); font-size: var(--t-small); line-height: var(--lh-small); margin-top: var(--g2); }
.loading { color: var(--ink-2); }
.coverpicks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g1); margin: var(--g1) 0; }
.coverpicks .btn { min-height: var(--tap); }
.limitrow { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); gap: var(--g1); align-items: end; margin-bottom: var(--g1); }
.limitrow .btn { min-width: var(--tap); padding: 0; }
@media (max-width: 859px) {
  .agri-grid, .two { grid-template-columns: minmax(0, 1fr); }
}
.product a { min-width: 0; padding: 0 var(--g1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 559px) {
  .headline { grid-template-columns: minmax(0, 1fr); }
  .coverpicks { grid-template-columns: 1fr 1fr; }
  .cri { width: 100%; height: auto; flex-direction: row; gap: var(--g1); justify-content: flex-start; padding: var(--g1) var(--g2); }
}
.cri small { color: var(--ink); }
.table tbody th { text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; }
.table tbody th small { display: block; font-weight: 400; color: var(--ink-2); }