/* Livestock breeding planner (livestock.html + js/page-livestock.js): your animals on the left, each drawn like Rust's
   animal panel (two rows of gene circles, the herd number in a blue circle at the end); the best pairs on the right.
   Phones stack them. Colours sampled from the game's panel: brighter than the plant genes. */
.page-livestock, .as-scanner {
  --lg-good: #9fcf2b; --lg-ok: #8c8c8c; --lg-bad: #cf4630; --lg-herd: #2f8fe0; --lg-text: #fff;
}

.ls-hero { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .25rem 0 1rem; }
.ls-hero h1 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
.ls-lead { margin: 0; flex: 1 1 22rem; color: var(--muted); }
.ls-species > button { min-height: 40px; padding-inline: 1rem; font-size: .9rem; }

@media (min-width: 1000px) {
  .ls-cols { grid-template-columns: minmax(420px, 5fr) minmax(0, 6fr); }
  .ls-pairs { position: sticky; top: 76px; max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---- the herd ---- */
.ls-how { margin: 0 0 .6rem; }
.ls-animals { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ls-none { padding: .8rem 0; }
.ls-animal {
  display: grid; gap: .5rem; padding: .6rem .7rem .7rem; border-radius: var(--radius);
  background: var(--field); border: 1px solid var(--line);
}
.ls-animal-head { display: flex; align-items: center; gap: .5rem; }
.ls-sex {
  flex: none; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: #fff; background: #b04a8a;
}
.ls-sex.is-m { background: #2f6fb5; }
.ls-name { flex: 1 1 auto; min-width: 0; height: 34px; }
.ls-del { flex: none; }
.ls-genetics { display: flex; align-items: center; gap: .9rem; }
.ls-glabel {
  flex: none; width: 5.2rem; font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text);
}
.ls-rows { display: grid; gap: .3rem; justify-items: start; }
.ls-row { display: flex; align-items: center; gap: 6px; }
.ls-row.is-small { gap: 19px; padding-left: 6.5px; }   /* centred under the big circles (38 + 6 apart), like the game */

/* a gene circle: big (top row) or small; a button on the herd cards, a mark on the pairs */
.lg {
  --s: 38px; flex: none; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%;
  display: inline-grid; place-items: center; cursor: pointer;
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 800; font-size: calc(var(--s) * .55); line-height: 1;
  color: var(--lg-text); text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .4);
  transition: transform .1s;
}
.lg:hover { transform: scale(1.08); }
.lg-sm { --s: 25px; }
.lg-good { background: var(--lg-good); }
.lg-ok { background: var(--lg-ok); }
.lg-bad { background: var(--lg-bad); }
/* the herd number: a blue circle you type in */
.lh {
  --s: 38px; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%; text-align: center;
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 800; font-size: calc(var(--s) * .5);
  color: #fff; background: var(--lg-herd); box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.lh.lh-sm { --s: 25px; }
.lh::placeholder { color: rgba(255, 255, 255, .7); }
.lh:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ls-herd-btns { margin-top: .7rem; }
.ls-text { margin-top: .8rem; }
.ls-text-body { display: grid; gap: .4rem; padding: 0 .7rem .7rem; }
.ls-text-body code { font-size: .85em; }
.ls-textarea { min-height: 7rem; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.ls-text-msg { margin: 0; min-height: 1em; }
.ls-text-msg.bad { color: var(--bad); }

/* ---- the pairs ---- */
.ls-goal { margin-bottom: .7rem; }
.ls-goal > button { min-height: 38px; }
.ls-pair-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ls-pair { display: grid; gap: .5rem; padding: .6rem .75rem .7rem; border-radius: var(--radius); background: var(--field); border: 1px solid var(--line); }
.ls-pair.is-best { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ls-pair-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.ls-rank {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--head-font); font-weight: 800; font-size: .8rem; background: var(--head); border: 1px solid var(--line-strong);
}
.ls-pair.is-best .ls-rank { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ls-who { min-width: 0; }
.ls-warn {
  padding: .1rem .4rem; border-radius: 3px; font-size: .74rem; font-weight: 700; cursor: help;
  color: #fff; background: var(--lg-bad);
}
.ls-warn.is-unknown { background: var(--head); color: var(--muted); border: 1px solid var(--line-strong); }
.ls-main {
  margin-left: auto; font-family: var(--head-font); font-stretch: 87.5%; font-weight: 800; font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.ls-main small { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ls-main.is-good { color: var(--good); }
.ls-main.is-mid { color: #f0b23a; }
.ls-main.is-low { color: #f0913a; }
:root[data-theme="light"] .ls-main.is-mid { color: #8a5a00; }
:root[data-theme="light"] .ls-main.is-low { color: #b45309; }
.ls-odds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.lo { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: .15rem .35rem; cursor: help; }
.lg-mini { --s: 22px; cursor: help; grid-row: span 2; }
.lg-mini:hover { transform: none; }
.lo-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line); }
.lo-bar > i { display: block; width: var(--w, 0%); }
.lo-good { background: var(--lg-good); }
.lo-ok { background: var(--lg-ok); }
.lo-bad { background: var(--lg-bad); }
.lo-pct { font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--muted); line-height: 1; }
.ls-empty { margin: .4rem 0 0; }

.ls-facts { margin-top: 1rem; }
.ls-fact-list { margin: 0 0 .6rem; padding-left: 1.2rem; line-height: 1.5; }
.ls-fact-list li + li { margin-top: .35rem; }
.ls-source { margin: 0; }

@media (max-width: 520px) {
  .ls-genetics { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .ls-glabel { width: auto; }
  .lg { --s: 34px; }
  .lh { --s: 34px; }
  .lg.lg-sm, .lh.lh-sm { --s: 23px; }
  .ls-row.is-small { gap: 17px; padding-left: 5.5px; }
  .ls-odds { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
  .lo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .lg-mini { grid-row: auto; }
  .lo-bar { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lg { transition: none; } }

/* Scan Rust (js/scan-animal-ui.js): the button, and each animal found in the dialog */
.ls-herd-btns .scan-btn .tag { font-size: .62rem; padding: .05rem .38rem; }
.as-intro { margin: 0; }
.as-live { align-items: center; }
.as-found { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.as-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; padding: .6rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2);
}
.as-crop canvas { display: block; max-width: min(320px, 100%); height: auto; border-radius: 4px; }
.as-read { display: grid; gap: .45rem; min-width: 0; }
.as-note { margin: 0; }
.as-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.as-item .lg.unsure, .as-item .lh.unsure { outline: 2px dashed var(--warn); outline-offset: 2px; }
.as-item .lg:disabled { cursor: default; }