/* ═══════════════════════════════════════════════════════════
   AGRIVISION FPO™ — Mobile Device & CDR Analytics console
   © 2026 Agrivision FPO. Created by Agrivision FPO.
   Tokens and component geometry taken from the main app so this port is the same
   product, not a lookalike:
     tokens          → frontend/src/tokens.css
     PANEL/STAT_CARD → frontend/src/views/Cdr.jsx
     section headers → frontend/src/components/ui/PanelHead.jsx
   ═══════════════════════════════════════════════════════════ */
@import url('/fonts/fonts.css');

:root {
  color-scheme: dark;
  --bg-0:#0b1220; --bg-1:#101a2b; --bg-2:#16233a; --bg-3:#1f3150;
  --panel:#111a2b; --panel-hi:#18263c; --line:#23344f; --line-hi:#365272;
  /* --cyan / --gold are the ACCENT slots the components already reference; the rebrand changes
     their values, not their names, so no component had to be rewired. */
  --cyan:#34d399; --cyan-dim:#1c7a5a; --amber:#fbbf24; --amber-dim:#b45309;
  --green:#4ade80; --green-dim:#065f46; --red:#fb7185; --red-dim:#9f1239;
  --violet:#a78bfa; --blue:#38bdf8;
  --saffron:#ff9933; --gold:#34d399; --khaki:#9fb8ad; --india-green:#1f9d57; --navy:#0f2a4a;
  --txt-0:#f2f8f5; --txt-1:#cddcd6; --txt-2:#9fb4ae; --txt-3:#7a928c;
  --shadow-1:0 2px 10px -3px rgba(0,0,0,.45);
  --gold-soft:rgba(52,211,153,.14);
  --tricolor:linear-gradient(90deg,#ff9933 0 33.33%,#f5f3ec 33.33% 66.66%,#1f9d57 66.66% 100%);
  --halo-a:rgba(52,211,153,.08);
  /* Chart mark: brand emerald. Single-series charts only, so the categorical CVD gates do not
     apply — what matters is contrast against the panel, which passes on both surfaces
     (--panel #111a2b dark / #ffffff light). A SECOND series must take the validated dataviz
     slots, not an invented second brand hue. */
  --series-1: var(--gold);
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --sans:'Inter','Segoe UI',system-ui,sans-serif;
  --r:10px; --r-lg:16px;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg-0:#f4f7f4; --bg-1:#eef3ef; --bg-2:#f9fbf9; --bg-3:#e3eae5;
  --panel:#ffffff; --panel-hi:#ffffff; --line:#d7e2db; --line-hi:#b5c8bd;
  --cyan:#0f766e; --cyan-dim:#0b5852; --amber:#a16207; --amber-dim:#854d0e;
  --green:#15803d; --green-dim:#dcfce7; --red:#be123c; --red-dim:#ffe4e6;
  --violet:#6d28d9; --blue:#0369a1;
  --saffron:#e07b00; --gold:#0f766e; --khaki:#6b7f72; --india-green:#15803d; --navy:#0f2a4a;
  --txt-0:#0f1e18; --txt-1:#27403a; --txt-2:#4a625b; --txt-3:#6b8078;
  --shadow-1:0 2px 8px -2px rgba(15,60,45,.10);
  --gold-soft:rgba(15,118,110,.12);
  --halo-a:rgba(15,118,110,.06);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg-0); color: var(--txt-0);
  font: 15px/1.55 var(--sans);
  background-image: radial-gradient(circle at 12% -8%, var(--halo-a), transparent 42%);
  background-attachment: fixed;
}
h1, h2, h3 { margin: 0; font-weight: 600; }
a { color: var(--gold); }
[hidden] { display: none !important; }

/* ── shell ── */
.tricolor { height: 3px; background: var(--tricolor); }
header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 20px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow-1);
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand b { font-size: 15px; letter-spacing: .04em; font-family: var(--mono); }
.brand .sub { color: var(--txt-3); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; font-family: var(--mono); }
main { padding: 20px; max-width: 1400px; margin: 0 auto; }
/* The bar now carries a case picker, Load, Import, Analyse-a-file and the Live toggle, so it
   needs room to lay them out on one line — and no control may wrap mid-label. */
#caseBar { display: flex; gap: 8px; align-items: center; flex: 1 1 460px; min-width: 0; max-width: 840px; }
#caseBar input, #caseBar select { flex: 1 1 auto; min-width: 0; }
#caseBar button { white-space: nowrap; flex: none; }
@media (max-width: 560px) {
  header { padding: 10px 12px; } main { padding: 12px; } .brand { flex: 1 1 100%; }
}

input, button, select, textarea {
  font: inherit; color: var(--txt-0); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r); padding: 7px 11px;
}
input, textarea { font-family: var(--mono); font-size: 13px; }
input::placeholder, textarea::placeholder { color: var(--txt-3); }
input:focus-visible, button:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
button {
  cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .3px; transition: border-color .15s, background .15s, transform .15s;
}
button:hover:not([disabled]) { border-color: var(--line-hi); }
button.primary { background: var(--gold); color: #06231a; border-color: transparent; }
html[data-theme="light"] button.primary { color: #fdfbf4; }
button.ghost { background: transparent; }
button[disabled] { opacity: .45; cursor: not-allowed; }

/* ── PANEL — the app's panel: gradient, 16px radius, 18px pad, hairline, shadow ── */
.card, .tile, .login .box {
  background: linear-gradient(180deg, var(--panel), var(--bg-1));
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px;
  position: relative; overflow: hidden; box-shadow: var(--shadow-1);
}
.card { margin-bottom: 16px; }
/* PanelHead: mono eyebrow, 2px tracking, uppercase, 14px accent tick, hairline rule */
.card > h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 2px; text-transform: uppercase; color: var(--txt-2);
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.card > h3::before { content: ''; width: 14px; height: 1px; background: var(--gold); opacity: .7; flex: none; }
.card > h3 .count {
  font-size: 10px; letter-spacing: 1px; color: var(--txt-3); margin-left: auto; font-weight: 400;
}
.card > h3 button { margin-left: auto; }
.card > h3 .count + button { margin-left: 10px; }

.grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } }
/* A grid item defaults to min-width:auto, so a wide table inside a card stretches its whole
   column past the viewport and the BODY scrolls sideways. min-width:0 hands the overflow
   back to .tbl-wrap, where it belongs. */
.grid, .grid > *, .card { min-width: 0; }

/* STAT_CARD = PANEL + hover lift; mono 28px value, 11px uppercase label */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.tile { padding: 12px 14px; transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--line-hi); transform: translateY(-1px); }
.tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--txt-2); }
.tile .v {
  font-family: var(--mono); font-size: 28px; font-weight: 700;
  letter-spacing: -1px; color: var(--txt-0); margin: 4px 0 2px;
}
.tile .s { font-size: 11px; color: var(--txt-3); font-family: var(--mono); }

/* ── login ── */
.login-wrap { display: grid; place-items: center; min-height: 76vh; padding: 20px; }
.login { width: 100%; max-width: 760px; display: grid; gap: 16px; }
@media (min-width: 800px) { .login.with-demo { grid-template-columns: 340px 1fr; align-items: start; } }
.login h2 { font-family: var(--mono); font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--txt-2); font-weight: 400; }
.login p.sub { color: var(--txt-2); margin: 8px 0 16px; font-size: 13px; }
.login label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--txt-3); margin: 12px 0 5px; }
.login input { width: 100%; }
.login form > button { width: 100%; margin-top: 18px; padding: 9px; }
/* Tall enough for the full demo roster — a scroll-clipped last row reads as a rendering
   fault, and the account you need may be the one cut off. */
.demo-list { display: grid; gap: 6px; max-height: 440px; overflow-y: auto; padding-right: 2px; }
.demo .code {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 20px; background: var(--gold-soft); color: var(--cyan); flex: none;
}
.demo {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 11px;
}
.demo:hover { border-color: var(--gold); }
.demo .who { flex: 1; min-width: 0; }
.demo .who b { display: block; font-size: 13px; font-weight: 600; font-family: var(--sans); color: var(--txt-0); }
.demo .who span { display: block; font-size: 11px; color: var(--txt-3); font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── charts ── */
.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; }
.bar { fill: var(--series-1); }
.bar:hover { fill: var(--saffron); }
.axis { fill: var(--txt-3); font-size: 10px; font-family: var(--mono); }
.gridline { stroke: var(--line); stroke-width: 1; }

/* ── tables ── */
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--txt-3); font-weight: 400; }
td { color: var(--txt-1); font-size: 13px; }
td:first-child { color: var(--txt-0); font-family: var(--mono); }
td.num, th.num { text-align: right; font-family: var(--mono); }
tbody tr:hover { background: var(--bg-2); }
.minibar { display: inline-block; height: 8px; border-radius: 4px; background: var(--series-1); vertical-align: middle; }

/* ── pills — the app's PILL_CLS: tinted fill, mono, 11px, 20px radius ── */
.chip {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 20px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .3px;
  padding: 3px 9px; border: 0;
}
.chip.good { background: rgba(52,211,153,.14); color: var(--green); }
.chip.warn { background: rgba(251,191,36,.14); color: var(--amber); }
.chip.bad  { background: rgba(248,113,113,.14); color: var(--red); }
.chip.mute { background: var(--bg-3); color: var(--txt-2); }
html[data-theme="light"] .chip.good { background: rgba(21,128,61,.12); }
html[data-theme="light"] .chip.warn { background: rgba(161,98,7,.12); }
html[data-theme="light"] .chip.bad  { background: rgba(192,57,43,.12); }

.flags li { margin-bottom: 6px; color: var(--txt-2); font-size: 13px; }
/* 80+ flags, each a full sentence, otherwise push every panel below them off-screen —
   cap the region and let it scroll in place. */
.flags-box { max-height: 300px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 6px; background: var(--bg-1); }
.empty { color: var(--txt-3); font-style: italic; padding: 8px 0; }
.err { color: var(--red); font-weight: 600; }
.muted { color: var(--txt-3); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── AI ── */
.ai-out {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; margin-top: 12px; white-space: pre-wrap; line-height: 1.65;
  max-height: 460px; overflow-y: auto; color: var(--txt-1); font-size: 13.5px;
}
.ai-out:empty { display: none; }
.qa { border-left: 2px solid var(--gold); padding-left: 10px; margin-bottom: 14px; }
.qa .q { font-weight: 600; margin-bottom: 4px; color: var(--txt-0); }
.ask-row { display: flex; gap: 8px; margin-top: 16px; }
.ask-row input { flex: 1; min-width: 0; }

/* ── import ── */
.field { display: grid; gap: 4px; margin-bottom: 10px; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--txt-3); }
.fields { display: grid; gap: 10px; }
@media (min-width: 700px) { .fields { grid-template-columns: 1fr 1fr; } }
.note {
  border: 1px solid var(--line); background: var(--bg-2); border-radius: var(--r);
  padding: 10px 12px; font-size: 12.5px; color: var(--txt-2); margin-bottom: 12px;
}

#tip {
  position: fixed; pointer-events: none; z-index: 99; opacity: 0; transition: opacity .1s;
  background: var(--panel-hi); border: 1px solid var(--line-hi); border-radius: 8px;
  padding: 6px 9px; font-size: 11px; box-shadow: 0 6px 20px rgba(0,0,0,.45);
  white-space: nowrap; font-family: var(--mono); color: var(--txt-0);
}
.spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--line);
  border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* ── Deep-analysis panels: advanced, predictive, unified timeline ──
   Sub-blocks inside one card, separated by a hairline, so an officer reads a panel top-to-
   bottom instead of hunting across a wall of equal-weight cards. Same rule and spacing the
   SPA uses between sections of CdrAdvanced. */
.sub-block { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.card > .sub-block:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.kv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--txt-0); margin-bottom: 6px; }
.kv .muted { font-weight: 400; }
.score { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.score.good { color: var(--green); }
.score.warn { color: var(--amber); }
.score.bad  { color: var(--red); }
.issues { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--txt-2); }
.issues .sev-high { color: var(--red); }
.footnote { font-size: 11px; color: var(--txt-3); margin: 12px 0 0; }

/* Every anomaly / meeting is kept — none are dropped — but they scroll in a fixed box so the
   panels below stay reachable. Same treatment as the analyst-flags list. */
.scroll-box { max-height: 190px; overflow-y: auto; padding-right: 6px;
  display: flex; flex-direction: column; gap: 4px; }
.scroll-box.tall { max-height: 340px; }
.anomaly { font-size: 12px; color: var(--txt-2); line-height: 1.45; }
.anomaly.near { color: var(--red); }
.anomaly.near::before { content: '● '; }
.anomaly:not(.near)::before { content: '· '; color: var(--txt-3); }
.mono { font-family: var(--mono); }

.callout { font-size: 12px; color: var(--txt-1); background: var(--bg-2);
  border: 1px solid var(--gold-soft); border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; }
.callout b { color: var(--txt-0); }

/* Lead priority: score gutter left, number + factors right — scannable down the score column. */
.lead { display: flex; align-items: flex-start; gap: 10px; font-size: 12px;
  padding: 5px 0; border-bottom: 1px solid var(--bg-3); }
.lead-score { flex: none; width: 42px; text-align: center;
  font-family: var(--mono); font-weight: 700; font-size: 14px; }
.lead-score.bad { color: var(--red); }
.lead-score.warn { color: var(--amber); }
.lead-score.mute { color: var(--txt-2); }
.lead-body { flex: 1; min-width: 0; }
.lead-body .muted { font-size: 11px; }

.tl-item { border: 1px solid var(--line); background: var(--bg-2);
  border-radius: 10px; padding: 7px 11px; }
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tl-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tl-title { font-size: 12px; font-weight: 500; color: var(--txt-0); }

/* ── Drill-downs ──
   A table cell that acts as a control still has to look like the data it labels, so .linky is
   the row's own text with an underline affordance — not a button pretending to be a link. */
.linky { background: none; border: 0; padding: 0; font: inherit; color: var(--gold);
  cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; }
.linky:hover { text-decoration-style: solid; }
.drill-row > td { padding: 0 !important; border: 0 !important; }
.drill { background: var(--bg-2); border-left: 2px solid var(--gold);
  padding: 12px 14px; margin: 0 0 6px; }
.drill .tbl-wrap { margin-top: 8px; }

/* Annexure link — a button in every way except that it is an <a>, so the browser opens it in a
   tab with the session cookie attached. */
a.btn { display: inline-block; margin-top: 10px; padding: 7px 13px;
  border: 1px solid var(--line-hi); border-radius: 10px; background: var(--bg-2);
  color: var(--txt-1); font-family: var(--mono); font-size: 12px; font-weight: 600;
  text-decoration: none; }
a.btn:hover { border-color: var(--gold); color: var(--txt-0); }

tr.hl > td { background: var(--gold-soft); }

/* A trace can return 60+ sites. Every row is kept, but the drill scrolls within itself so
   opening one does not push the rest of the analysis a screen and a half down the page. */
.drill .tbl-wrap { max-height: 260px; overflow: auto; }
.drill table td:nth-child(2) { max-width: 460px; }

/* Flag severity — the SPA colours by flagsRich.sev; high-severity flags read first. */
.flags .sev-high { color: var(--red); font-weight: 600; }
.flags .sev-amber { color: var(--amber); }
.callout.warn-callout { border-color: var(--red); color: var(--txt-0); }
.tiles + .sub-block { margin-top: 16px; }
tr.bad-row > td { background: rgba(248,113,113,.06); }
.kv-inline { font-size: 13px; font-weight: 600; color: var(--txt-0); margin-right: 4px; }

/* ── Dynamic controls: case picker, filter bar, live toggle ── */
#caseSel {
  font-family: var(--mono); font-size: 12px; max-width: 340px;
  padding: 7px 9px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--bg-2); color: var(--txt-1);
}
.auto { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--txt-2); padding: 0 4px; }
.auto input { accent-color: var(--gold); margin: 0; }

.filter-card { position: sticky; top: 0; z-index: 20; }
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ff { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ff > label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--txt-3); white-space: nowrap; min-height: 12px;
}
.ff select, .ff input[type=date], .ff input[type=text], .ff input:not([type]) {
  padding: 6px 8px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--bg-2); color: var(--txt-1); font: inherit; font-size: 13px;
}
.ff select { font-family: var(--mono); font-size: 12px; }
.cbx { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; color: var(--txt-1); padding: 6px 0; }
.cbx input { accent-color: var(--gold); }

@media (max-width: 720px) {
  .filter-card { position: static; }
  .filter-row { gap: 10px; }
  .ff { flex: 1 1 46%; }
  #caseSel { max-width: 100%; }
}

/* ── Footer ──────────────────────────────────────────────────────────────
   Ownership and the product's standing caveat, on every page. The caveat lives here rather
   than only inside a panel so it survives scrolling past the analysis. */
.site-foot {
  margin-top: 34px; padding: 20px 20px 30px;
  border-top: 1px solid var(--line); background: var(--panel);
}
.foot-in {
  max-width: 1400px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  align-items: baseline; justify-content: space-between;
}
.foot-brand { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--txt-1); }
.foot-brand b { color: var(--txt-0); }
.foot-sub { color: var(--txt-2); }
.foot-ver {
  margin-left: 8px; padding: 2px 8px; border-radius: 20px;
  background: var(--gold-soft); color: var(--cyan);
  font-size: 10px; font-weight: 600;
}
.foot-legal { font-family: var(--mono); font-size: 11px; color: var(--txt-2); }
.foot-legal b { color: var(--gold); }
.foot-dot { margin: 0 6px; color: var(--txt-3); }
.foot-note {
  max-width: 1400px; margin: 12px auto 0;
  font-size: 11px; line-height: 1.6; color: var(--txt-3);
}

/* ── Section jump-nav ──
   These pages run to two dozen panels. Without an index an officer scrolls past what they came
   for; this lists the panels actually rendered and jumps to them. Built from the DOM after each
   render, so it can never list a panel that is not there. */
/* One scrollable row, never a wrapping block. With 24 panels a wrapping nav grew to three
   rows and — being sticky — held ~110px of every screen for the whole session. A single row
   costs 40px and scrolls sideways to reach the rest. */
.jump {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: 6px; flex-wrap: nowrap; align-items: center;
  padding: 8px 12px; margin: 0 0 14px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
.jump::-webkit-scrollbar { height: 6px; }
.jump::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 3px; }
.jump > * { flex: none; }
.jump-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--txt-3); margin-right: 2px;
}
.jump button {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  padding: 3px 9px; border-radius: 20px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-2);
}
.jump button:hover { border-color: var(--gold); color: var(--txt-0); }
.jump button.on { background: var(--gold-soft); border-color: var(--gold); color: var(--txt-0); }
.card[id] { scroll-margin-top: 132px; }

/* Back to top — appears only once there is enough page to justify it. */
.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-hi); background: var(--panel); color: var(--txt-1);
  font-size: 16px; cursor: pointer; box-shadow: var(--shadow-1);
  display: none; align-items: center; justify-content: center;
}
.totop.show { display: flex; }
.totop:hover { border-color: var(--gold); color: var(--txt-0); }

@media (max-width: 720px) {
  .jump { position: static; }
  .foot-in { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }

/* ══════════════════════════════════════════════════════════════════════
   UI polish — AGRIVISION FPO
   © 2026 Agrivision FPO. Created by Agrivision FPO.
   ══════════════════════════════════════════════════════════════════════ */

/* Wordmark: the product name carries the weight, the module rides behind it in a lighter
   tone so "which tool am I in" is answerable at a glance without reading the whole string. */
.brand b { font-size: 14px; }
.brand-mod { color: var(--txt-3); font-weight: 400; letter-spacing: .12em; }
.brand svg { width: 30px; height: 30px; border-radius: 9px; }

/* Long tables were hard to read once they passed a screen: the header scrolled away and every
   row looked alike. Sticky header + zebra + row hover fixes all three without changing density. */
.tbl-wrap { max-height: 620px; overflow: auto; }
.tbl-wrap table { border-collapse: separate; border-spacing: 0; }
.tbl-wrap thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel); backdrop-filter: blur(4px);
  box-shadow: inset 0 -1px 0 var(--line);
}
tbody tr:nth-child(even of :not(.drill-row)) > td { background: rgba(127, 152, 190, .045); }
html[data-theme="light"] tbody tr:nth-child(even of :not(.drill-row)) > td { background: rgba(120, 100, 40, .04); }
tbody tr:hover > td { background: var(--gold-soft); }
tbody tr.drill-row:hover > td { background: none; }

/* Skeletons — a shaped placeholder tells you what is coming; a bare "Loading…" does not. */
.skel { display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 37%, var(--bg-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.skel + .skel { margin-top: 9px; }
.skel-line { height: 12px; }
.skel-tile { height: 74px; border-radius: var(--r-lg); }
.skel-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@keyframes shimmer { to { background-position: -135% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Empty states: say what is missing AND what to do about it, instead of a lone dash. */
.empty {
  color: var(--txt-3); font-style: normal; padding: 14px 0;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.empty .empty-hint { font-size: 11px; color: var(--txt-3); font-family: var(--mono); }

/* The header is denser now that it carries a longer wordmark. */
header { padding: 10px 20px; }

/* ── Module switcher ── */
.modswitch {
  display: flex; align-items: center; gap: 4px;
  padding: 3px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
  margin-right: 10px; flex: none;
}
.modswitch .mod {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  color: var(--txt-3); transition: color .15s, background .15s;
}
a.mod:hover { color: var(--txt-0); background: var(--bg-3); }
.modswitch .mod.on {
  background: var(--gold); color: #06231a;
  box-shadow: 0 1px 4px -1px rgba(0,0,0,.35);
}
html[data-theme="light"] .modswitch .mod.on { color: #ffffff; }
a.mod:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

@media (max-width: 720px) {
  .modswitch { order: 3; margin: 6px 0 0; width: 100%; justify-content: space-between; }
  .modswitch .mod { flex: 1; text-align: center; }
}

/* Saved-run affordances */
.save-tag {
  margin-top: 10px; padding: 6px 10px; border-radius: 8px;
  font-family: var(--mono); font-size: 11px;
  background: var(--gold-soft); color: var(--cyan); border: 1px solid var(--gold-soft);
}
.save-tag.warn { background: rgba(251,191,36,.12); color: var(--amber); border-color: rgba(251,191,36,.3); }
#savedCard .row { margin-bottom: 8px; }
#savedCard input.grow { flex: 1 1 auto; min-width: 0; }