/* Sheti Hishob — design system. No web fonts, no external requests. */
:root {
  --bg: #f2f7f0; --bg-2: #e3efe1; --card: #ffffff; --card-2: #f7faf6;
  --ink: #11231a; --muted: #44584b; --line: #d3e0d4; --line-2: #bcd0bf;
  --brand: #0f6b3a; --brand-2: #17924f; --brand-ink: #ffffff; --brand-soft: #dff1e6;
  --accent: #f2a40e; --accent-soft: #fff0cc; --accent-ink: #4a2f00;
  --cost: #ae2f17; --cost-soft: #fde9e3; --inc: #0e6b39; --inc-soft: #def3e6;
  --warn-soft: #fff2cf; --warn-ink: #5e3d00; --info-soft: #e1eefb; --info-ink: #0e3a66;
  --danger: #b0221a; --danger-soft: #fde8e6;
  --shadow: 0 1px 2px rgba(17, 35, 26, .06), 0 10px 28px rgba(17, 35, 26, .08);
  --r: 20px; --r-sm: 14px; --tap: 52px; --tabs-h: 68px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Nirmala UI", Mukta, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1611; --bg-2: #13211a; --card: #15221b; --card-2: #1a2a21;
    --ink: #e9f3ec; --muted: #a9bdb0; --line: #2a4235; --line-2: #3b5a49;
    --brand: #4cc47f; --brand-2: #6fd89b; --brand-ink: #06210f; --brand-soft: #1b3a28;
    --accent: #f5b53a; --accent-soft: #3a2c0b; --accent-ink: #ffe3a6;
    --cost: #ff8f72; --cost-soft: #3a1c15; --inc: #62d493; --inc-soft: #15321f;
    --warn-soft: #3a2c0b; --warn-ink: #ffe3a6; --info-soft: #12304d; --info-ink: #b9d8f5;
    --danger: #ff8a80; --danger-soft: #3d1a17;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  --bg: #0d1611; --bg-2: #13211a; --card: #15221b; --card-2: #1a2a21;
  --ink: #e9f3ec; --muted: #a9bdb0; --line: #2a4235; --line-2: #3b5a49;
  --brand: #4cc47f; --brand-2: #6fd89b; --brand-ink: #06210f; --brand-soft: #1b3a28;
  --accent: #f5b53a; --accent-soft: #3a2c0b; --accent-ink: #ffe3a6;
  --cost: #ff8f72; --cost-soft: #3a1c15; --inc: #62d493; --inc-soft: #15321f;
  --warn-soft: #3a2c0b; --warn-ink: #ffe3a6; --info-soft: #12304d; --info-ink: #b9d8f5;
  --danger: #ff8a80; --danger-soft: #3d1a17;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
/* a field that is scrolled to (error focus, keyboard Tab) never hides under the sticky top bar or the bottom tabs */
html { scroll-padding-top: 76px; scroll-padding-bottom: 150px; }
@media print { html { scroll-padding: 0; } .stat-v { white-space: normal; overflow-wrap: break-word; } }
body {
  margin: 0; font: 1rem/1.62 var(--font); color: var(--ink); background: var(--bg);
  background-image: radial-gradient(900px 420px at 100% -8%, var(--brand-soft), transparent 70%), radial-gradient(700px 360px at -10% 0%, var(--accent-soft), transparent 65%);
  background-repeat: no-repeat; min-height: 100vh; -webkit-font-smoothing: antialiased;
}
.lite body { background-image: none; }
img, svg { max-width: 100%; }
a { color: var(--brand); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 750; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; } h3 { font-size: 1.12rem; }
p { margin: 0 0 .75rem; }
small, .small { font-size: .86rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1; }
.mt { margin-top: 1rem; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--brand); color: var(--brand-ink); padding: .6rem 1rem; border-radius: 10px; z-index: 100; }
.skip:focus { left: 8px; }
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
.row { display: flex; align-items: center; }
.row.gap { gap: .6rem; flex-wrap: wrap; }
.row.between { justify-content: space-between; gap: .75rem; }
.wrap-s { flex-wrap: wrap; }
.stack > * + * { margin-top: 1rem; }
.inline { display: inline; margin: 0; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lite .top { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.top-in { display: flex; align-items: center; gap: .6rem; max-width: 1100px; margin: 0 auto; padding: .55rem 1rem; min-height: 60px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.12rem; }
.logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-ink); }
.top-title { font-size: 1.12rem; margin: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-r { display: flex; gap: .4rem; margin-left: auto; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 999px; border: 1.5px solid var(--line-2); color: var(--ink); text-decoration: none; font-weight: 650; font-size: .92rem; background: var(--card); min-height: 40px; }
/* Sign out: always visible in the top bar, in red so it is easy to find */
.pill-out { cursor: pointer; font: inherit; font-weight: 750; font-size: .92rem; color: var(--danger); border-color: var(--danger); background: var(--card); }
.pill-out:hover, .pill-out:focus-visible { background: var(--danger); color: #fff; }
.top-r .pill { white-space: nowrap; }
/* phones: language and low-data pills shrink to their icon so "Sign out" keeps its words on one line */
@media (max-width: 420px) { .top-r { gap: .3rem; } .top-r .pill { padding: .4rem .55rem; } .top-r .pill:not(.pill-out) > span { display: none; } }
@media (max-width: 360px) { .brand-t { display: none; } .pill-out { font-size: .85rem; } }
.me-out { display: flex; flex-direction: column; gap: .8rem; }
.me-who { display: flex; align-items: center; gap: .7rem; }
.me-who > div { display: flex; flex-direction: column; }
@media print { .pill-out { display: none; } }
.lite-badge { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.iconbtn { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; padding: 0; }
.iconbtn.sm { width: 40px; height: 40px; border-radius: 12px; }
.iconbtn.danger, .btn.danger.iconbtn { color: var(--danger); }
.iconbtn:hover, .pill:hover { border-color: var(--brand); }

/* ---------- layout ---------- */
.wrap { max-width: 860px; margin: 0 auto; padding: 1rem 1rem 2.5rem; outline: none; }
.wrap.wide { max-width: 1100px; }
.has-tabs .wrap { padding-bottom: calc(var(--tabs-h) + 5.2rem + env(safe-area-inset-bottom)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.1rem 1.2rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.lite .card { box-shadow: none; }
.h-sec { display: flex; align-items: center; gap: .55rem; font-size: 1.08rem; margin-bottom: .8rem; }
.h-sec .ic { color: var(--brand); }
.grid3 { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.two { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .two.keep-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .two { grid-template-columns: 1fr; } }
.ctx { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--ink); margin-bottom: 0; }
.ctx .ic { color: var(--brand); }
.big-name { font-size: 1.3rem; font-weight: 750; margin: 0 0 .6rem; }

/* ---------- navigation tabs ---------- */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(17, 35, 26, .08); }
.lite .tabs { box-shadow: none; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; height: var(--tabs-h); color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 650; padding: .2rem .1rem; min-width: 0; text-align: center; line-height: 1.15; }
.tab span { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 400px) { .tab { font-size: .7rem; } .tab .ic { width: 1.4rem; height: 1.4rem; } .tab-add .ic { width: 3rem; height: 3rem; padding: .75rem; } }
.tab .ic { width: 1.55rem; height: 1.55rem; }
.tab.on { color: var(--brand); }
.tab.on::after { content: ""; position: absolute; }
.tab-add { position: relative; color: var(--brand-ink); }
.tab-add .ic { width: 3.3rem; height: 3.3rem; padding: .85rem; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-ink); margin-top: -1.35rem; box-shadow: 0 6px 18px rgba(15, 107, 58, .4); border: 4px solid var(--card); }
.tab-add span { color: var(--muted); }
.lite .tab-add .ic { box-shadow: none; }
@media (min-width: 900px) {
  .tabs { top: 61px; bottom: 0; right: auto; width: 96px; height: auto; grid-template-columns: 1fr; grid-auto-rows: 82px; align-content: start; border-top: 0; border-right: 1px solid var(--line); padding: .8rem .3rem; box-shadow: none; gap: .2rem; }
  .tab { height: 82px; border-radius: 16px; font-size: .78rem; }
  .tab:hover { background: var(--brand-soft); }
  .tab.on { background: var(--brand-soft); }
  .tab-add .ic { margin-top: 0; width: 2.6rem; height: 2.6rem; padding: .6rem; border-width: 0; box-shadow: none; }
  .has-tabs .wrap { margin-left: max(112px, calc((100vw - 860px) / 2 + 40px)); margin-right: auto; padding-bottom: 3rem; }
  .has-tabs .wrap.wide { margin-left: 112px; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); padding: .6rem 1.2rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center; }
.btn:hover { border-color: var(--brand); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: var(--brand-ink); }
.lite .btn.primary { background: var(--brand); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; }
.btn.cost { background: var(--cost); border-color: transparent; color: #fff; }
.btn.sale { background: var(--inc); border-color: transparent; color: #fff; }
:root[data-theme="dark"] .btn.cost, :root[data-theme="dark"] .btn.sale { color: #06150c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.cost, :root:not([data-theme="light"]) .btn.sale { color: #06150c; } }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.big { min-height: 58px; font-size: 1.08rem; padding-inline: 1.5rem; }
.btn.sm { min-height: 44px; padding: .4rem .9rem; font-size: .92rem; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; }
.cta-row { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; margin-top: .9rem; }
.cta-row .ghost { grid-column: span 2; }
@media (min-width: 640px) { .cta-row { grid-template-columns: repeat(3, auto); justify-content: start; } .cta-row .ghost { grid-column: auto; } }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.actions .btn { flex: 1 1 200px; }
.sticky-actions { position: sticky; bottom: calc(var(--tabs-h) + .6rem + env(safe-area-inset-bottom)); z-index: 30; padding: .6rem; border-radius: 20px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: var(--shadow); }
body:not(.has-tabs) .sticky-actions { bottom: .6rem; }
.lite .sticky-actions { background: var(--bg); backdrop-filter: none; box-shadow: none; }
@media (min-width: 900px) { .sticky-actions { bottom: 1rem !important; } }

/* ---------- forms ---------- */
.fld { margin-bottom: 1rem; }
.fld label, legend { display: block; font-weight: 700; margin-bottom: .3rem; font-size: .98rem; }
.req { color: var(--danger); }
input[type=text], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea {
  width: 100%; min-height: var(--tap); padding: .6rem .9rem; font: inherit; color: var(--ink); background: var(--card-2);
  border: 2px solid var(--line-2); border-radius: var(--r-sm); appearance: none; -webkit-appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
input[readonly].auto { background: var(--brand-soft); border-style: dashed; font-weight: 700; }
.has-err input:not([type=hidden]), .has-err select { border-color: var(--danger); }
.hint { display: block; color: var(--muted); margin-top: .3rem; font-size: .86rem; }
.err { display: block; color: var(--danger); margin-top: .3rem; font-weight: 650; font-size: .92rem; }
.with-suffix { position: relative; }
.with-suffix input { padding-right: 2.6rem; }
.suffix { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; pointer-events: none; }
.num-echo { display: block; min-height: 1.1em; margin-top: .25rem; font-size: .86rem; font-weight: 650; color: var(--brand); }
.check { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem 0; font-weight: 600; cursor: pointer; }
.check input { width: 26px; height: 26px; margin-top: .1rem; accent-color: var(--brand); flex: none; }
.check small { display: block; font-weight: 500; color: var(--muted); }
.more { margin-top: .4rem; border-top: 1px dashed var(--line-2); padding-top: .6rem; }
.more summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: .4rem; min-height: 44px; list-style: none; color: var(--brand); }
.more summary::-webkit-details-marker { display: none; }
.more[open] summary .ic { transform: rotate(180deg); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-line { padding: .6rem .9rem; margin: -.4rem 0 1rem; border-radius: var(--r-sm); background: var(--brand-soft); font-weight: 700; }

/* chips (radio) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip label, .chip-a { display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; padding: .45rem 1rem; border-radius: 999px; border: 2px solid var(--line-2); background: var(--card-2); font-weight: 650; margin: 0; cursor: pointer; text-decoration: none; color: var(--ink); }
.chip input:checked + label, .chip-a.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.chip input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

/* category tiles */
.cats { display: grid; gap: .55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 560px) { .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* small phones (360 px): smaller words so "Machinery" or "Harvesting" are not cut in the middle */
@media (max-width: 400px) { .cat-tile label { font-size: .76rem; padding: .45rem .2rem; letter-spacing: -.01em; } }
.cat-tile { position: relative; }
.cat-tile input { position: absolute; opacity: 0; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.cat-tile label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 86px; padding: .5rem .3rem; text-align: center; font-size: .86rem; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; margin: 0; border-radius: 16px; border: 2px solid var(--line); background: var(--card-2); color: var(--ink); }
.cat-tile label .ic { width: 1.7rem; height: 1.7rem; color: var(--c, var(--brand)); }
.cat-tile input:checked + label { border-color: var(--c, var(--brand)); background: color-mix(in srgb, var(--c, var(--brand)) 14%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--brand)) 25%, transparent); }
.cat-tile input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

/* quick picks */
.quick-wrap { margin-bottom: 1rem; }
.quick-h { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--muted); font-size: .9rem; margin-bottom: .4rem; }
.quick { display: flex; gap: .5rem; flex-wrap: wrap; }
.qchip { min-height: 46px; padding: .35rem .95rem; border-radius: 999px; border: 2px solid var(--brand); background: var(--brand-soft); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.qchip:active { transform: scale(.97); }

/* autocomplete */
.ac-wrap { position: relative; }
.ac-wrap input.ac { padding-right: 2.9rem; }
.ac-clear { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--muted); border-radius: 12px; display: none; place-items: center; cursor: pointer; }
.ac-wrap.has-text .ac-clear { display: grid; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; margin: 0; padding: .3rem; list-style: none; background: var(--card); border: 2px solid var(--brand); border-radius: var(--r-sm); max-height: 300px; overflow-y: auto; box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
.ac-opt { display: flex; flex-direction: column; gap: 0; padding: .55rem .75rem; border-radius: 10px; cursor: pointer; min-height: 48px; justify-content: center; }
.ac-opt[aria-selected="true"], .ac-opt:hover { background: var(--brand-soft); }
.ac-opt b { font-weight: 700; }
.ac-opt small { color: var(--muted); }
.ac-opt mark { background: var(--accent-soft); color: inherit; border-radius: 3px; }
.ac-msg { padding: .7rem .8rem; color: var(--muted); }
.ac-free { border-top: 1px dashed var(--line-2); margin-top: .2rem; color: var(--brand); font-weight: 700; }

/* deductions */
.ded { background: var(--card-2); border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: .8rem; margin-bottom: 1rem; }
.ded legend { padding: 0 .3rem; }
.ded-row { display: grid; grid-template-columns: 1fr 140px; gap: .6rem; align-items: start; }
.ded-row .fld { margin-bottom: .6rem; }
@media (max-width: 420px) { .ded-row { grid-template-columns: 1fr; } }
.net-box { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--inc-soft); color: var(--ink); font-size: 1.05rem; }
.net-box strong { font-size: 1.35rem; color: var(--inc); }
.net-box.bad strong { color: var(--danger); }

/* ---------- flash / badges ---------- */
.flash { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r-sm); margin-bottom: 1rem; font-weight: 600; border: 1px solid transparent; }
.flash .ic { margin-top: .15rem; }
.flash-ok { background: var(--inc-soft); color: var(--ink); border-color: color-mix(in srgb, var(--inc) 35%, transparent); }
.flash-err { background: var(--danger-soft); color: var(--ink); border-color: var(--danger); }
.flash-warn { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--accent); }
.flash-info { background: var(--info-soft); color: var(--info-ink); }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 750; background: var(--brand-soft); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.b-inter { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.b-ok { background: var(--inc-soft); color: var(--inc); }
.b-bad { background: var(--danger-soft); color: var(--danger); }
.badge .ic { width: 1em; height: 1em; }

/* ---------- stats ---------- */
.stats { display: grid; gap: .7rem; grid-template-columns: repeat(3, 1fr); margin-bottom: 1rem; }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } .stats .stat:last-child { grid-column: span 2; } }
.stat { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1rem; box-shadow: var(--shadow); overflow: hidden; }
.lite .stat { box-shadow: none; }
.stat-ic { position: absolute; right: .7rem; top: .7rem; opacity: .22; }
.stat-ic .ic { width: 2.2rem; height: 2.2rem; }
.stat-l { color: var(--muted); font-weight: 700; font-size: .88rem; }
.stat-v { font-size: clamp(1.1rem, 5.4vw, 1.55rem); white-space: nowrap; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stat-s { color: var(--muted); font-size: .82rem; margin-top: .1rem; }
.stat.cost .stat-v { color: var(--cost); } .stat.income .stat-v { color: var(--inc); }
.stat.pos .stat-v { color: var(--inc); } .stat.neg .stat-v { color: var(--cost); }
.pos-c { color: var(--inc); } .neg-c { color: var(--cost); }
.amt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
.item { display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); }
.item-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--c, var(--brand)); background: color-mix(in srgb, var(--c, var(--brand)) 14%, var(--card)); }
.item-ic.inc, .item-ic.leaf { --c: var(--inc); }
.item-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-m strong { overflow-wrap: anywhere; }
.item-m small { color: var(--muted); overflow-wrap: anywhere; }
.item-m small.due { color: var(--warn-ink); background: var(--warn-soft); border-radius: 8px; padding: .05rem .5rem; align-self: flex-start; margin-top: .15rem; }
.item-r { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.item-act { display: flex; gap: .3rem; }
.item-act .btn.iconbtn { padding: 0; min-height: 40px; }
@media (max-width: 480px) { .item { flex-wrap: wrap; } .item-r { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; } }
.empty { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.empty h3 { color: var(--ink); margin-top: .6rem; }
.empty > svg { color: var(--brand); }
.share-note { padding: .5rem .2rem; }
.insights { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.insights li { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .9rem; border-radius: var(--r-sm); background: var(--info-soft); color: var(--info-ink); font-weight: 600; }
.insights .ic { margin-top: .15rem; }
.seg { display: flex; gap: .3rem; padding: .3rem; background: var(--bg-2); border-radius: 999px; margin-bottom: 1rem; overflow-x: auto; }
.seg a { flex: 1; text-align: center; padding: .55rem 1rem; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 700; white-space: nowrap; min-height: 44px; display: grid; place-items: center; }
.seg a.on { background: var(--card); color: var(--brand); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.seg.small { display: inline-flex; margin: .2rem 0 .8rem; }
.pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: .5rem 0 1rem; }
.pg-n { font-weight: 700; color: var(--muted); }
.danger-zone { margin: 1.5rem 0; }
.danger-card { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }

/* ---------- home ---------- */
.greet { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.greet h2 { margin: 0; font-size: 1.5rem; }
.season { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.lite .season { box-shadow: none; }
.season-h { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.season-h h3 { margin: 0; }
.season-r { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.season-f { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.crop-cards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.crop-card { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .7rem; background: var(--card-2); }
.crop-card.inter { border-style: dashed; margin-left: .6rem; }
.crop-card-h { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.crop-card-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.crop-card-t small { color: var(--muted); }
.crop-card-p { font-size: 1.05rem; }
.mini { display: flex; gap: 1rem; font-size: .86rem; color: var(--muted); margin: .45rem 0; flex-wrap: wrap; }
.mini b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.onboard { text-align: center; color: var(--brand); }
.onboard h2 { color: var(--ink); }
.steps { list-style: none; padding: 0; margin: 1rem auto 1.4rem; display: grid; gap: .6rem; max-width: 420px; text-align: left; color: var(--ink); }
.steps li { display: flex; gap: .7rem; align-items: center; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--card-2); border: 1px solid var(--line); font-weight: 650; }
.steps .ic { color: var(--brand); }
.tip { display: flex; gap: .8rem; align-items: flex-start; background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.tip p { margin: .2rem 0 0; }

/* ---------- crop head ---------- */
.crop-head .crop-name { font-size: 1.55rem; margin: .3rem 0 .2rem; }
.crop-head .muted .ic { vertical-align: -.2em; }

/* ---------- Break-even Compass ---------- */
.compass { width: 100%; height: auto; display: block; margin: .3rem 0; }
.cz-bad { fill: color-mix(in srgb, var(--cost) 28%, var(--card)); } .cz-good { fill: color-mix(in srgb, var(--inc) 28%, var(--card)); }
.c-line { stroke: var(--ink); stroke-width: 2; } .c-flag { fill: var(--accent); stroke: var(--ink); stroke-width: 1; }
.c-t { font: 700 12.5px var(--font); fill: var(--ink); } .c-axis { font: 600 10px var(--font); fill: var(--muted); }
.c-ok { fill: var(--inc); } .c-bad { fill: var(--cost); } .c-need-t { fill: var(--accent-ink); }
.c-dot-ok { fill: var(--inc); stroke: var(--card); stroke-width: 3; } .c-dot-bad { fill: var(--cost); stroke: var(--card); stroke-width: 3; }
.c-need { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 3 3; } .c-need-f { fill: var(--accent); }
:root[data-theme="dark"] .c-need-t { fill: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-need-t { fill: var(--accent); } }
.compass-txt { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; font-weight: 600; }
.compass-txt .ok { color: var(--inc); } .compass-txt .need { background: var(--accent-soft); color: var(--accent-ink); padding: .55rem .8rem; border-radius: var(--r-sm); }

/* ---------- bars ---------- */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.bars li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: .6rem; align-items: center; }
.bar-l { display: flex; align-items: center; gap: .4rem; font-weight: 650; font-size: .92rem; min-width: 0; }
.bar-t { height: 14px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.bar-f { display: block; height: 100%; border-radius: 999px; }
.bar-v { font-weight: 750; font-size: .92rem; text-align: right; font-variant-numeric: tabular-nums; }
.bar-v small { color: var(--muted); font-weight: 600; }
@media (max-width: 520px) { .bars li { grid-template-columns: 1fr auto; } .bar-t { grid-column: 1 / -1; order: 3; } }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl th, .tbl td { padding: .6rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tfoot th, .tbl tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 800; }
.tbl.simple th { overflow-wrap: anywhere; font-weight: 650; text-transform: none; font-size: .95rem; color: var(--ink); }
.tbl tr.total th, .tbl tr.total td { font-weight: 800; border-top: 2px solid var(--ink); }
@media (max-width: 640px) {
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl:not(.simple) tr { display: block; padding: .5rem 0; border-bottom: 2px solid var(--line); }
  .tbl:not(.simple) th, .tbl:not(.simple) td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .2rem .2rem; text-align: right; }
  .tbl:not(.simple) [data-l]::before { content: attr(data-l); color: var(--muted); font-weight: 650; text-align: left; }
  .tbl:not(.simple) th[scope=row] { font-size: 1.02rem; }
  .tbl:not(.simple) tfoot tr { border-top: 2px solid var(--ink); }
}

/* ---------- story / report ---------- */
.story .eyebrow { color: var(--brand); font-weight: 750; margin: 0; display: flex; gap: .4rem; align-items: center; }
.story-p { font-size: 1.1rem; line-height: 1.75; }
.verdict { display: flex; gap: .6rem; align-items: center; padding: .9rem 1rem; border-radius: var(--r-sm); font-size: 1.15rem; font-weight: 800; }
.v-ok { background: var(--inc-soft); color: var(--inc); } .v-bad { background: var(--danger-soft); color: var(--danger); }
.scroll-x { overflow-x: auto; margin: .4rem 0 1rem; }
.monthly { max-width: none; height: auto; display: block; }
.m-axis { stroke: var(--line-2); stroke-width: 1.5; } .m-cost { fill: var(--cost); } .m-inc { fill: var(--inc); }
.m-t { font: 600 11px var(--font); fill: var(--muted); } .m-y { font-size: 9.5px; }
.legend { display: flex; gap: .6rem; align-items: center; font-weight: 650; color: var(--muted); font-size: .88rem; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; } .lg-cost { background: var(--cost); } .lg-inc { background: var(--inc); margin-left: .6rem; }
.paper { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem; }
@media (max-width: 420px) { .paper { padding: .9rem .75rem; } .tbl.simple th, .tbl.simple td { padding: .5rem .35rem; } }
.paper-h { border-bottom: 2px solid var(--ink); margin-bottom: 1rem; }
.paper h3 { margin-top: 1.2rem; }
.sign { margin-top: 2.5rem; display: flex; justify-content: flex-end; }
.sign span { border-top: 1px solid var(--ink); padding-top: .3rem; min-width: 200px; text-align: center; }
.report-pick { margin-bottom: 1rem; }

/* ---------- public pages ---------- */
.pub .wrap { max-width: 980px; }
.hero { display: grid; gap: 1.5rem; align-items: center; padding: 1.2rem 0 1.6rem; }
@media (min-width: 820px) { .hero { grid-template-columns: 1.1fr 1fr; } }
.hero h2 { font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.2; letter-spacing: -.02em; }
.lead { font-size: 1.15rem; color: var(--muted); }
.hero-art { width: 100%; height: auto; border-radius: 28px; box-shadow: var(--shadow); }
.feat-i { margin: 0; }
.feat-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); margin-bottom: .6rem; }
.auth { max-width: 460px; margin: 1rem auto; }

/* ---------- misc ---------- */
.big-total { font-size: 2rem; font-weight: 800; }
.no-print { }
.pub .top-r .lite-badge { display: none; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.lite *, .lite *::before, .lite *::after { animation: none !important; transition: none !important; }

/* ---------- reports (screen) ---------- */
.rp-controls { margin-bottom: 1rem; }
.rp-filters { padding: .9rem 1rem; margin-bottom: .8rem; }
.rp-grid { display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .rp-grid { grid-template-columns: minmax(0, 1fr); } }
.rp-grid .field { margin: 0; }
.rp-grid select:disabled { opacity: .55; }
.rp-pill { display: inline-flex; align-items: center; gap: .4rem; margin: .7rem 0 0; padding: .25rem .4rem .25rem .8rem; background: var(--brand-soft); color: var(--brand); border-radius: 999px; font-weight: 700; }
.rp-pill a { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--card); color: var(--ink); text-decoration: none; font-size: 1.2rem; line-height: 1; }
.rp-actions { margin: .2rem 0 .4rem; }
.rp-head { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; align-items: center; padding: 1rem 1.1rem; margin: -.2rem -.2rem 1rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-ink); border-radius: calc(var(--r) - 6px); }
.rp-brand { display: flex; align-items: center; gap: .7rem; }
.rp-brand strong { display: block; font-size: 1.25rem; line-height: 1.2; }
.rp-brand small { display: block; opacity: .9; }
.rp-logo { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .2); }
.rp-logo .ic { width: 28px; height: 28px; }
.rp-who { text-align: right; display: grid; line-height: 1.4; font-size: .92rem; }
.rp-who strong { font-size: 1.05rem; }
@media (max-width: 520px) { .rp-who { text-align: left; } }
.rp-title { font-size: 1.5rem; margin: .3rem 0 .1rem; }
.rp-filt { color: var(--muted); font-weight: 650; margin-bottom: 1rem; }
.rp-kpis { margin-bottom: 1.1rem; }
.rp-none { padding: 1rem 0; }
.rp-tbl tbody tr:nth-child(even) td, .rp-tbl tbody tr:nth-child(even) th { background: var(--card-2); }
.rp-sub { color: var(--muted); font-weight: 600; }
.rp-other td { font-style: italic; }
.rp-bytype .rp-barcell { width: 38%; }
@media (max-width: 640px) { .rp-bytype .rp-barcell { display: none; } .rp-bytype th { width: auto; } }
.rp-bar { display: block; height: 10px; border-radius: 6px; background: var(--brand-2); }
td.pos { color: var(--inc); font-weight: 750; } td.neg { color: var(--cost); font-weight: 750; }
.print-only { display: none; }
.rp-foot { margin-top: 1.4rem; }
.tbl td.nowrap { white-space: nowrap; }

/* ---------- print: A4, letterhead, zebra tables ---------- */
@page { size: A4; margin: 13mm 12mm 16mm; @bottom-center { content: counter(page) " / " counter(pages); font: 9pt sans-serif; color: #5a6b60; } }
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --bg: #fff; --bg-2: #eef4ee; --card: #fff; --card-2: #f4f8f4; --ink: #10201a; --muted: #4b5d52; --line: #cfdcd1; --line-2: #b3c6b7;
    --brand: #0f6b3a; --brand-2: #17924f; --brand-ink: #fff; --brand-soft: #e3f2e9; --cost: #ae2f17; --inc: #0e6b39; --cost-soft: #fde9e3; --inc-soft: #def3e6;
  }
  html { font-size: 11.5px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff !important; background-image: none !important; color: var(--ink) !important; font-size: 10pt; line-height: 1.45; min-height: 0; }
  .top, .tabs, .no-print, .sticky-actions, .flash, .skip, .lite-badge, .install-bar { display: none !important; }
  .wrap, .has-tabs .wrap { margin: 0 !important; max-width: none; padding: 0 !important; }
  .card, .paper { box-shadow: none; border: 0; padding: 0; background: #fff; border-radius: 0; }
  a { color: inherit; text-decoration: none; }

  .print-only { display: flex !important; }
  .story { font-size: 11.5pt; line-height: 1.6; }
  .story .crop-name { font-size: 18pt; color: var(--brand); border-left: 1.6mm solid var(--accent); padding-left: 3mm; }
  .story .story-p { break-inside: avoid; }
  .story .eyebrow { display: none; }
  .verdict { break-inside: avoid; border: .3mm solid var(--line-2); border-radius: 2mm; padding: 3mm; }
  .rp-head { margin: 0 0 5mm; padding: 5mm 6mm; border-radius: 3mm; }
  .rp-brand strong { font-size: 15pt; } .rp-logo { width: 11mm; height: 11mm; border-radius: 3mm; }
  .rp-who { font-size: 9pt; }
  .rp-title { font-size: 15pt; margin: 0; color: var(--brand); border-left: 1.6mm solid var(--accent); padding-left: 3mm; }
  .rp-filt { margin: 1.5mm 0 5mm 4.6mm; font-size: 9.5pt; }

  .stats.rp-kpis { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 3mm; margin-bottom: 5mm; }
  .stats.rp-kpis .stat:last-child { grid-column: auto !important; }
  .stat { box-shadow: none; border: .3mm solid var(--line-2); border-top: 1.2mm solid var(--brand); border-radius: 2mm; padding: 2.5mm 3.5mm; break-inside: avoid; background: var(--card-2); }
  .stat.cost { border-top-color: var(--cost); } .stat.income { border-top-color: var(--inc); }
  .stat-ic { display: none; } .stat-l { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .04em; } .stat-v { font-size: 14pt; }

  h3 { font-size: 11pt; margin: 5mm 0 2mm; color: var(--brand); break-after: avoid; border-bottom: .3mm solid var(--line-2); padding-bottom: 1mm; }
  .tbl-wrap { overflow: visible; }
  .tbl { font-size: 9pt; }
  .tbl th, .tbl td { padding: 1.4mm 2mm; border-bottom: .2mm solid var(--line); }
  .tbl thead th { background: var(--brand) !important; color: #fff !important; font-size: 8pt; border: 0; }
  .tbl thead { display: table-header-group; }
  .tbl:not(.simple) tr { display: table-row !important; padding: 0; }
  .tbl:not(.simple) th, .tbl:not(.simple) td { display: table-cell !important; text-align: left; }
  .tbl:not(.simple) .num { text-align: right !important; }
  .tbl:not(.simple) [data-l]::before { content: none !important; }
  .tbl:not(.simple) thead { position: static !important; width: auto; height: auto; clip: auto; overflow: visible; }
  .rp-tbl tbody tr:nth-child(even) td, .rp-tbl tbody tr:nth-child(even) th { background: var(--card-2) !important; }
  .tbl tfoot th, .tbl tfoot td, .tbl tr.total th, .tbl tr.total td { background: var(--brand-soft) !important; border-top: .5mm solid var(--brand); font-weight: 800; }
  tr { break-inside: avoid; } tfoot { display: table-row-group; }
  .rp-bar { height: 3mm; }
  .rp-foot { margin-top: 8mm; break-inside: avoid; }
  .sign { margin-top: 10mm; } .sign span { min-width: 60mm; border-top: .3mm solid #000; }
}

/* ---------- older browsers without color-mix(): plain fallbacks ---------- */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .top { background: var(--bg); }
  .sticky-actions { background: var(--card); }
  input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--brand-soft); }
  input::placeholder { color: var(--muted); }
  .cat-tile input:checked + label { background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-soft); }
  .flash-ok { border-color: var(--inc); }
  .b-inter { border-color: var(--accent); }
  .item-ic { background: var(--brand-soft); }
  .danger-card { border-color: var(--danger); }
  .cz-bad { fill: var(--cost-soft); } .cz-good { fill: var(--inc-soft); }
}

/* ---------- admin area ---------- */
.admin .anav { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 1.2rem; padding: .4rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.admin .anav a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .3rem .9rem; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 650; }
.admin .anav a.on { background: var(--brand); color: var(--brand-ink); }
.admin .anav form { margin-left: auto; }
.pg-h { font-size: 1.6rem; margin: .2rem 0 1rem; }
.two-col { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
.kpi { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .kpi { grid-template-columns: repeat(3, 1fr); } }
.filters, .toolbar { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin-bottom: 1rem; }
.filters .fld { margin: 0; min-width: 160px; }
.toolbar { justify-content: space-between; }
.toolbar .filters { margin: 0; }
.tb-r { display: flex; gap: .5rem; flex-wrap: wrap; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.dl dt { color: var(--muted); } .dl dd { margin: 0; font-weight: 650; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline-form select { min-height: 44px; width: auto; }
.actions-col { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin-bottom: 1rem; }
.chk { display: flex; align-items: center; gap: .6rem; font-weight: 650; min-height: 44px; }
.chk input { width: 22px; height: 22px; }
.bigpin { font-size: 1.6rem; letter-spacing: .2em; }
.list.plain { margin: 0; gap: 0; }
.list.plain .row { justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.h3 { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }
textarea { width: 100%; font: inherit; }
.pin-eye { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 .8rem; border: 0; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-weight: 700; cursor: pointer; }
.with-suffix { position: relative; }
.with-suffix.has-eye input { padding-right: 5rem; }

/* ---------- Cost & Sale picker rows ---------- */
a.pick-row { color: var(--ink); text-decoration: none; min-height: 64px; flex-wrap: nowrap; }
a.pick-row .item-m strong { color: var(--ink); }
a.pick-row .item-r { width: auto; flex-direction: column; align-items: flex-end; justify-content: center; margin-left: auto; text-align: right; }
a.pick-row > .ic { color: var(--muted); }
a.pick-row:hover, a.pick-row:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
a.pick-shared { border-style: dashed; }
@media (max-width: 480px) { a.pick-row { flex-wrap: nowrap; } a.pick-row .item-r { width: auto; } }

/* ---------- free land note, finish-crop screens, finished list ---------- */
.free-note { margin: -.2rem 0 .8rem; font-weight: 650; color: var(--brand); }
.free-note span { display: flex; gap: .4rem; align-items: flex-start; overflow-wrap: anywhere; }
.free-note span.none { color: var(--warn-ink); }
.free-note .ic { margin-top: .15rem; }
.hint.kept { display: flex; gap: .4rem; align-items: flex-start; overflow-wrap: anywhere; }
.fin h2 { margin-top: 0; overflow-wrap: anywhere; }
.fin-mini { margin: .6rem 0; }
.fin-actions { display: grid; gap: .6rem; margin-top: 1rem; }
@media (min-width: 640px) { .fin-actions { grid-template-columns: repeat(2, auto); justify-content: start; } }
.fin-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .65rem; }
.fin-list li { display: flex; gap: .6rem; align-items: flex-start; overflow-wrap: anywhere; }
.fin-list .ic { margin-top: .15rem; color: var(--brand); }
.fin-list li.land { font-weight: 750; }
.fin-list li.warn .ic, .fin-list li.warn { color: var(--warn-ink); }
.fin-done { margin-top: .8rem; border-top: 1px dashed var(--line-2); padding-top: .6rem; }
.fin-done h4 { margin: 0 0 .3rem; font-size: .9rem; color: var(--muted); display: flex; gap: .4rem; align-items: center; }
.fin-row { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem .2rem; min-height: 44px; align-items: center; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.fin-row:last-child { border-bottom: 0; }
.fin-row:hover, .fin-row:focus-visible { background: var(--brand-soft); }
.me-out .btn.danger { background: var(--danger); color: var(--card); }
.pill-out:hover, .pill-out:focus-visible { color: var(--card); }

/* selling a crop in parts */
.stage-chips .chips { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.stage-chips .chip label { justify-content: center; text-align: center; min-height: 56px; width: 100%; font-size: 1rem; }
.warn-hint { color: var(--ink); background: var(--accent-soft); border-radius: 12px; padding: .5rem .7rem; }
.prog { height: 14px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); overflow: hidden; margin: .4rem 0 .6rem; }
.prog > span { display: block; height: 100%; border-radius: 999px; background: var(--inc); }
@media (max-width: 360px) { .stage-chips .chips { grid-template-columns: 1fr; } }

/* land still under the crop: big and highlighted */
.land-left { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; padding: .7rem .9rem; border-radius: 14px; background: var(--accent-soft); border: 2px solid var(--accent); color: var(--accent-ink); font-weight: 700; }
.land-left .ic { flex: none; color: var(--accent-ink); }
.land-left span { flex: 1; }
.land-left b { font-size: 1.25rem; font-weight: 850; white-space: nowrap; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .land-left { background: var(--accent-soft); } }
/* shared cost: four split choices in a 2 x 2 grid */
.scope-chips .chips { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.scope-chips .chip label { width: 100%; justify-content: center; text-align: center; border-radius: 16px; }
@media (max-width: 360px) { .scope-chips .chips { grid-template-columns: 1fr; } }
/* Break-even Compass: actual money spent vs actual money back */
.be-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-weight: 700; }
.be-top b { font-size: 1.6rem; font-weight: 850; color: var(--cost); }
.be-ok .be-top b { color: var(--inc); }
.be-bar > span { background: var(--cost); }
.be-ok .be-bar > span { background: var(--inc); }
.be-rows { margin: .4rem 0 .6rem; display: grid; gap: .25rem; }
.be-rows > div { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.be-rows dt { margin: 0; } .be-rows dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.be-rows .be-key { border-bottom: 0; font-size: 1.08rem; }