/* Zygous — dark "field tool" theme. Mobile-first. */
:root {
  --bg: #0f1512;
  --bg2: #151d19;
  --card: #18221d;
  --edge: #24322b;
  --text: #e8efe9;
  --muted: #93a69b;
  --accent: #58c68d;
  --accent2: #2f7d57;
  --warn: #d9a13c;
  --bad: #d96a5f;
  --good: #58c68d;
  --info: #6fa8dc;
  --radius: 12px;
  --navh: 3.5rem;          /* sticky top nav height — keep scroll offsets in sync */
  --bulkh: 4rem;           /* sticky bulk-action bar that sits under the nav on list pages */
}
* { box-sizing: border-box; }
/* Anything scrolled into view (tab focus, find-in-page, anchor jumps, scroll restore)
   must land below the sticky chrome, or the header hit-tests the click instead.
   scroll-padding on the viewport covers every scrollIntoView target at once. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--navh); }
/* List pages carry a second sticky bar (bulk actions) directly under the nav; clear it too. */
html:has(.bulkbar) { scroll-padding-top: calc(var(--navh) + var(--bulkh)); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: .4rem 0 .8rem; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; color: #cfe4d6; }
h3 { font-size: .98rem; margin: .8rem 0 .4rem; }
small, .small { font-size: .82rem; }
.muted { color: var(--muted); }
.strong { font-weight: 600; }

/* nav */
.topnav {
  display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem;
  background: var(--bg2); border-bottom: 1px solid var(--edge);
  position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 700; font-size: 1.05rem; color: var(--accent); letter-spacing: .5px; display: inline-flex; align-items: center; gap: .45rem; }
.brand-icon { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; display: block; }
.navlinks { display: flex; gap: .25rem; flex: 1; }
.navlinks a {
  color: var(--muted); padding: .4rem .7rem; border-radius: 8px; font-weight: 500; font-size: .92rem;
}
.navlinks a.on, .navlinks a:hover { color: var(--text); background: var(--card); text-decoration: none; }
.navright { display: flex; align-items: center; gap: .6rem; }
.ops-select { background: var(--card); color: var(--text); border: 1px solid var(--edge); border-radius: 8px; padding: .3rem .5rem; }
.who { color: var(--muted); font-size: .88rem; }
.bottomnav { display: none; }
.foot { padding: 1.2rem 1rem 5rem; color: var(--muted); font-size: .8rem; text-align: center; }
.foot a { color: var(--muted); }

.shell { max-width: 1080px; margin: 0 auto; padding: 1rem; }
.shell.wide { max-width: 1280px; }

/* flash */
.flash { padding: .6rem .9rem; border-radius: 10px; margin: .6rem 0; border: 1px solid; font-size: .92rem; }
.flash-ok { border-color: var(--accent2); background: #163526; color: #bfe8d2; }
.flash-error { border-color: #7d3b33; background: #331a17; color: #f0c4bd; }

/* cards */
.card { background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius); padding: .9rem 1rem; margin: .8rem 0; }
.pagehead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.split { display: grid; grid-template-columns: 2fr 1fr; gap: .9rem; align-items: start; }
.split-main, .split-side { min-width: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* buttons */
.btn {
  display: inline-block; background: var(--card); color: var(--text);
  border: 1px solid var(--edge); border-radius: 10px; padding: .5rem .9rem;
  font-size: .92rem; cursor: pointer;
}
.btn:hover { border-color: var(--accent2); text-decoration: none; }
.btn.primary { background: var(--accent2); border-color: var(--accent2); color: #eafff3; font-weight: 600; }
.btn.primary:hover { background: var(--accent); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: #7d3b33; color: #f0c4bd; background: #2a1714; }
.linkish { background: none; border: none; color: var(--accent); cursor: pointer; font-size: .9rem; padding: 0; }
.inline { display: inline; }
.inline-form { display: flex; gap: .6rem; align-items: end; }
.rowbtns { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }

/* forms */
.vform label.field, label.field { display: block; margin: .5rem 0; }
label.field > span { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search],
input[type=date], input[type=datetime-local], input[type=file], select, textarea {
  width: 100%; background: var(--bg2); color: var(--text);
  border: 1px solid var(--edge); border-radius: 9px; padding: .5rem .6rem; font: inherit;
}
textarea { resize: vertical; }
fieldset { border: 1px solid var(--edge); border-radius: 10px; margin: .6rem 0; padding: .6rem .8rem; }
legend { color: var(--muted); font-size: .85rem; padding: 0 .3rem; }
.check { display: block; margin: .3rem 0; font-size: .9rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.filters input, .filters select { width: auto; max-width: 200px; }
.filters button { white-space: nowrap; }
.bulkbar { position: sticky; top: var(--navh); background: var(--bg2); border: 1px solid var(--edge); border-radius: 10px; padding: .5rem .6rem; z-index: 10; margin: .5rem 0; }
.bulkbar-inner { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.bulkbar select, .bulkbar input { width: auto; max-width: 150px; }

/* tables */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: .8rem; padding: .3rem .5rem; border-bottom: 1px solid var(--edge); }
td { padding: .45rem .5rem; border-bottom: 1px solid #1d2823; vertical-align: top; }
tr:hover td { background: #1a251f; }

/* badges & chips */
.badge, .chip, .pill {
  display: inline-block; padding: .12rem .5rem; border-radius: 20px; font-size: .78rem; border: 1px solid;
}
.badge.ok, .chip.good, .pill.good { color: #bfe8d2; border-color: #2f7d57; background: #14301f; }
.badge.good { color: #bfe8d2; border-color: #2f7d57; background: #14301f; }
.badge.warn, .chip.warn, .pill.warn { color: #f0d9a8; border-color: #8a6a24; background: #2e2410; }
.badge.bad, .chip.bad, .pill.bad { color: #f0c4bd; border-color: #7d3b33; background: #2a1714; }
.badge.info, .chip.info, .pill.info { color: #c9e2f7; border-color: #3f6d96; background: #14263a; }
.badge.muted, .chip.muted, .pill.muted { color: var(--muted); border-color: var(--edge); background: var(--bg2); }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.chipbtn { display: inline-flex; align-items: center; gap: .3rem; background: var(--bg2); border: 1px solid var(--edge); border-radius: 20px; padding: .25rem .6rem; font-size: .85rem; cursor: pointer; }
.chipbtn input { display: none; }
.chipbtn:has(input:checked) { border-color: var(--accent2); background: #163526; }

/* stats */
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: .8rem 0; }
.stat { background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius); padding: .7rem .9rem; }
.stat .n { display: block; font-size: 1.5rem; font-weight: 700; }
.stat .l { color: var(--muted); font-size: .82rem; }
@media (max-width: 640px) { .statrow { grid-template-columns: repeat(2, 1fr); } }

/* animal detail */
.kv { display: grid; grid-template-columns: 130px 1fr; gap: .25rem .8rem; margin: 0; }
.kv dt { color: var(--muted); font-size: .85rem; }
.kv dd { margin: 0; }
.tabs { display: flex; gap: .2rem; flex-wrap: wrap; border-bottom: 1px solid var(--edge); margin: .6rem 0; }
.tabs a { padding: .45rem .7rem; color: var(--muted); border-radius: 8px 8px 0 0; font-size: .9rem; }
.tabs a.on { color: var(--text); background: var(--card); border: 1px solid var(--edge); border-bottom-color: var(--card); }
.hero-photo { width: 100%; max-height: 340px; object-fit: cover; border-radius: 10px; border: 1px solid var(--edge); }
.hero-photo.placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted); height: 160px; background: var(--bg2); }
.photogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; }
.photo { margin: 0; background: var(--bg2); border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; }
.photo img { width: 100%; height: 130px; object-fit: cover; display: block; }
.photo figcaption { padding: .35rem .5rem; font-size: .8rem; color: var(--muted); }

/* pick list (quick logger) */
.picklist { border: 1px solid var(--edge); border-radius: 10px; padding: .5rem; }
.pick-tools { display: flex; gap: .4rem; margin-bottom: .4rem; align-items: center; }
.pick-scroll { max-height: 220px; overflow-y: auto; }
.pick-scroll label.check { padding: .25rem .3rem; border-radius: 6px; }
.pick-scroll label.check:hover { background: var(--bg2); }

/* task check */
.taskcheck { font-size: 1.2rem; color: var(--accent); }

/* calculator */
.calc-block { border-top: 1px solid var(--edge); padding: .6rem 0; }
.outcome { display: grid; grid-template-columns: 180px 1fr 60px; gap: .6rem; align-items: center; margin: .3rem 0; }
.oc-bar { height: 12px; background: var(--bg2); border-radius: 6px; overflow: hidden; border: 1px solid var(--edge); }
.oc-bar i { display: block; height: 100%; background: var(--accent2); }
.oc-pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
details summary { color: var(--muted); cursor: pointer; }

/* pedigree */
.pedigree { overflow-x: auto; }
.ped-node { display: inline-block; background: var(--bg2); border: 1px solid var(--edge); border-radius: 8px; padding: .3rem .6rem; margin: .2rem; }
.ped-kids { margin-left: 1rem; border-left: 2px solid var(--edge); padding-left: 1rem; }
.ped-branch { margin: .3rem 0; }
.ped-role { color: var(--muted); font-size: .78rem; margin-right: .4rem; }

/* list hub */
.list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.list-item { background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius); padding: .8rem; display: block; }
.list-item:hover { border-color: var(--accent2); text-decoration: none; }
.list-item strong { display: block; }
.list-item span { color: var(--muted); font-size: .85rem; }

/* hero/landing */
.hero { max-width: 640px; margin: 8vh auto 0; text-align: center; }
.hero-splash { width: 100%; max-width: 640px; height: auto; border-radius: var(--radius); margin: 0 auto 1.2rem; display: block; }
.logo { font-size: 3rem; letter-spacing: 2px; margin: 0; color: var(--accent); }
@media (max-width: 640px) { .hero-splash { max-width: 480px; margin-bottom: 1rem; } }
.tag { color: var(--muted); font-size: 1.05rem; }
.cta-row { display: flex; gap: .7rem; justify-content: center; margin: 1.2rem 0; }
.tick { text-align: left; color: var(--muted); margin: 1.4rem auto 0; max-width: 420px; }
.tick li { margin: .35rem 0; }
.narrow { max-width: 460px; margin: 2rem auto; }

/* buyer packet */
.packet { max-width: 760px; margin: 0 auto; }
.pkt-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--edge); padding-bottom: .6rem; margin-bottom: .6rem; }
.pkt { border-bottom: 1px solid var(--edge); padding: .6rem 0; }
.pkt-foot { padding: 1rem 0; }

/* empty state */
.empty { text-align: center; color: var(--muted); padding: 1.4rem; border: 1px dashed var(--edge); border-radius: var(--radius); }
.plain { list-style: none; padding: 0; margin: .3rem 0; }
.plain li { padding: .2rem 0; }

/* mobile bottom nav */
@media (max-width: 760px) {
  .navlinks, .ops-select, .who { display: none; }
  .topnav { padding: .5rem .8rem; }
  :root { --navh: 2.9rem; }
  .bottomnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg2); border-top: 1px solid var(--edge); z-index: 30;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottomnav a {
    flex: 1; text-align: center; padding: .45rem 0 .5rem; color: var(--muted);
    font-size: .72rem; display: flex; flex-direction: column; gap: .1rem;
  }
  .bottomnav a.on { color: var(--accent); }
  .bottomnav .ic { font-size: 1.2rem; }
  .bottomnav a[href="/log"] .ic { font-size: 1.5rem; }
  .shell { padding: .8rem .8rem 5.2rem; }
  .foot { padding-bottom: 5.5rem; }
  .bulkbar { top: .2rem; }
}