/* Mama Flora Dairy Book — app styles (design system v3, from design/system.css).
 * Identity: warm paper, navy ink, farm green; the logo's peaks as a hill motif.
 * Operations mode for the owner and staff, Field mode for recorders on a phone. */

@font-face{font-family:"Jakarta";src:url(../fonts/plus-jakarta-sans-var.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  color-scheme:light;
  --paper:#F6F4EF; --paper-2:#EFECE4; --card:#FFFFFF; --card-2:#FBFAF7; --line:#E6E1D6; --line-2:#D6CFC1; --edge:#8A8676;
  --ink:#0B1220; --ink-2:#3B4453; --ink-3:#5E6574;
  --navy:#0B1220; --navy-2:#121C30; --navy-3:#1B2740; --navy-ink:#E7ECF3; --navy-dim:#8C98AC;
  --green:#13773A; --green-2:#0E5E2D; --green-3:#E3F1E7; --green-4:#4ADE80; --mint:#86EFAC; --on-green:#FFFFFF;
  --ok:#13773A; --ok-bg:#E3F1E7; --warn:#9A4A0B; --warn-bg:#FBEEDB; --bad:#B42318; --bad-bg:#FBE8E6; --info:#1D4E89; --info-bg:#E6EEF8; --vio:#5B21B6; --vio-bg:#EFE8FD;
  --am:#B45309; --md:#0E7490; --pm:#4338CA;
  --r-s:8px; --r:14px; --r-l:20px; --r-xl:28px;
  --sh-1:0 1px 1px rgba(40,32,16,.04),0 1px 3px rgba(40,32,16,.05);
  --sh-2:0 2px 4px rgba(40,32,16,.04),0 8px 24px rgba(40,32,16,.07);
  --sh-3:0 24px 64px rgba(11,18,32,.22);
  --font:"Jakarta",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rail:252px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0A101B; --paper-2:#0F1726; --card:#111A2B; --card-2:#142033; --line:#1F2C44; --line-2:#2B3B58; --edge:#6E7C94;
  --ink:#EAF0F7; --ink-2:#B9C3D2; --ink-3:#8F9BAE;
  --green:#4ADE80; --green-2:#86EFAC; --green-3:#123421; --on-green:#07130C;
  --ok:#4ADE80; --ok-bg:#123421; --warn:#FBBF24; --warn-bg:#35270C; --bad:#F97066; --bad-bg:#3A1714; --info:#8DB4FF; --info-bg:#14264B; --vio:#C4B5FD; --vio-bg:#261D46;
  --am:#FBBF24; --md:#22D3EE; --pm:#A5B4FC;
  --sh-1:none; --sh-2:0 8px 24px rgba(0,0,0,.35); --sh-3:0 24px 64px rgba(0,0,0,.6);
}

/* Sunlight: for reading outdoors in direct sun — black on white, strong edges, text one step bigger (WCAG AAA contrast). */
:root[data-theme="sun"]{
  color-scheme:light;
  --paper:#FFFFFF; --paper-2:#EDEDED; --card:#FFFFFF; --card-2:#F7F7F7; --line:#8C9199; --line-2:#5C626B; --edge:#2B313A;
  --ink:#000000; --ink-2:#14181F; --ink-3:#2B313A;
  --green:#0A5A28; --green-2:#07421D; --green-3:#DCEFE1; --on-green:#FFFFFF;
  --ok:#0A5A28; --ok-bg:#DCEFE1; --warn:#6E3204; --warn-bg:#F9E6CC; --bad:#8E1A12; --bad-bg:#F8DEDA; --info:#0F3563; --info-bg:#DDE8F6;
  --am:#7A3A06; --md:#075364; --pm:#2E2690;
  --sh-1:0 0 0 1px #8C9199; --sh-2:0 0 0 1px #5C626B;
}
:root[data-theme="sun"] body{font-size:16px;font-weight:500}
:root[data-theme="sun"] :focus-visible{outline-width:4px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;font-feature-settings:"tnum" 1}
@media (pointer:coarse){body{font-size:15px}}
h1,h2,h3,h4{margin:0;font-weight:750;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--green)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.dim{color:var(--ink-3)}
.fig{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ============ shell ============ */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;overflow:auto;background:var(--navy);color:var(--navy-ink);display:flex;flex-direction:column;padding:20px 14px 16px;scrollbar-width:none}
.brand{display:flex;align-items:center;gap:11px;padding:0 6px 24px}
.brand .mark{width:42px;height:42px;border-radius:11px}
.brand .words{display:flex;flex-direction:column;gap:5px}
.brand .words img{width:146px;display:block}
.brand .tl{display:flex;justify-content:space-between;width:146px;font-weight:600;font-size:9.5px;color:var(--mint);line-height:1}
.brand .tl i{font-style:normal}
.farm-switch{display:flex;align-items:center;gap:10px;margin:0 2px 18px;padding:10px 12px;border-radius:12px;background:var(--navy-2);border:1px solid var(--navy-3)}
.farm-switch b{display:block;font-size:13px}
.farm-switch span{font-size:12px;color:var(--navy-dim)}
.navgrp{margin-top:10px}
.navlbl{padding:10px 10px 6px;font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-dim)}
.navi{position:relative;display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--navy-dim);font-weight:600;font-size:14px;cursor:pointer;text-align:left}
.navi:hover{background:var(--navy-2);color:var(--navy-ink)}
.navi[aria-current="page"]{background:linear-gradient(90deg,rgba(74,222,128,.14),rgba(74,222,128,.02));color:#fff}
.navi[aria-current="page"] .ic{color:var(--green-4)}
.navi[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--green-4)}
.navi .n{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:12px;font-weight:750;display:grid;place-items:center;background:#B42318;color:#fff}
.navi .n.soft{background:var(--navy-3);color:var(--navy-ink)}
.rail-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--navy-3);display:flex;align-items:center;gap:10px;font-size:13px}
.me{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:750;font-size:12px;background:#1E3A2A;color:var(--mint)}

.main{min-width:0}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;height:68px;padding:0 32px;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--line)}
.find{position:relative;flex:1;max-width:520px}
.find input{width:100%;height:42px;padding:0 70px 0 42px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);box-shadow:var(--sh-1)}
.find>.ic{position:absolute;left:14px;top:12px;color:var(--ink-3)}
.find kbd{position:absolute;right:12px;top:10px;padding:1px 7px;border-radius:6px;border:1px solid var(--line-2);font:700 11px var(--font);color:var(--ink-3)}
.results{position:absolute;left:0;right:0;top:48px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);padding:6px;z-index:40}
.results button{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer}
.results button:hover,.results button:focus{background:var(--paper-2);outline:none}
.results b{display:block}
.results span{font-size:12px;color:var(--ink-3)}
.tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font-size:12.5px;font-weight:650;color:var(--ink-2);white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.pill.warn{border-color:transparent;background:var(--warn-bg);color:var(--warn)}
.iconbtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
.seg button{height:28px;min-width:38px;padding:0 10px;border:0;border-radius:999px;background:none;font-size:12.5px;font-weight:750;color:var(--ink-3);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}

.page{max-width:1360px;margin:0 auto;padding:28px 32px 64px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;align-content:start;align-items:start}
.page>*{grid-column:1/-1}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.head h2{font-size:30px}
.head p{margin-top:4px;color:var(--ink-3);font-size:15px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:12px;border:1px solid transparent;background:var(--green);color:var(--on-green);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 2px rgba(19,119,58,.3)}
.btn:hover{filter:brightness(.95)}
.btn.alt{background:var(--card);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-1)}
.btn.quiet{background:transparent;color:var(--ink-2);box-shadow:none}
.btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:10px}
.btn .ic{width:17px;height:17px}

/* ============ surfaces ============ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);min-width:0}
.card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 0}
.card>header h3{font-size:16px;display:flex;align-items:center;gap:9px}
.card>header h3 .ic{color:var(--ink-3)}
.body{padding:16px 20px 20px}
.more{border:0;background:none;padding:0;color:var(--green);font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}

/* hero band with the logo's hills */
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--navy);color:var(--navy-ink);padding:28px 30px 30px;min-height:228px;isolation:isolate}
.hero .hills{position:absolute;right:-20px;bottom:-2px;width:62%;height:auto;z-index:-1;opacity:.95}
.hero .greet{font-size:13px;font-weight:650;color:var(--navy-dim)}
.hero h2{font-size:34px;margin-top:6px;max-width:640px;line-height:1.15;color:#fff}
.hero h2 em{font-style:normal;color:var(--green-4)}
.hero .nums{display:flex;gap:34px;margin-top:22px;flex-wrap:wrap}
.hero .nums div{display:flex;flex-direction:column;gap:2px}
.hero .nums b{font-size:30px;font-weight:750;letter-spacing:-.03em;color:#fff}
.hero .nums b small{font-size:14px;color:var(--navy-dim);margin-left:3px;font-weight:600}
.hero .nums span{font-size:12.5px;color:var(--navy-dim);font-weight:600}
.hero .up{color:var(--green-4)}

/* metric */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.metric{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.metric .l{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:650;color:var(--ink-2)}
.metric .v{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.metric .v b{font-size:32px;font-weight:750;letter-spacing:-.03em;line-height:1}
.metric .v b small{font-size:14px;color:var(--ink-3);font-weight:600;margin-left:3px;letter-spacing:0}
.metric .t{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.metric svg.sp{width:92px;height:34px;flex:none}
/* target gauge: where the herd sits against the target band */
.gauge{position:relative;height:8px;border-radius:4px;background:var(--paper-2);margin-top:4px}
.gauge .band{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--ok-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent)}
.gauge .me{position:absolute;top:-4px;width:4px;height:16px;border-radius:2px;background:var(--ink);transform:translateX(-50%)}

.st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--paper-2);color:var(--ink-2)}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.ok{background:var(--ok-bg);color:var(--ok)}.st.warn{background:var(--warn-bg);color:var(--warn)}.st.bad{background:var(--bad-bg);color:var(--bad)}.st.info{background:var(--info-bg);color:var(--info)}.st.vio{background:var(--vio-bg);color:var(--vio)}
.chipx{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:var(--paper-2);color:var(--ink-2);font-size:12px;font-weight:650;white-space:nowrap}

/* animal portrait (coat pattern by breed) */
.coat{display:block;flex:none;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* "needs you" feed */
.need{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.need:first-child{border-top:0}
.need .who{flex:1;min-width:0}
.need .who b{display:block;font-size:14.5px}
.need .who span{display:block;font-size:13px;color:var(--ink-3)}
.need .when{font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.card.setup{grid-column:1/-1}
.setup-steps{list-style:none;margin:0;padding:0}
.setup-steps .done .item-ic{color:var(--ok)}
.need.done{opacity:1}.need.done .who b,.need.done .who span{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line-2)}
.need.done .who b{text-decoration:line-through}
.prio{font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:14px 0 2px}
.prio:first-child{padding-top:0}

/* donut + funnel */
.pulse{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center}
.funnel{display:flex;flex-direction:column;gap:8px}
.funnel div{display:grid;grid-template-columns:120px 1fr 28px;gap:10px;align-items:center;font-size:13px}
.funnel i{display:block;height:10px;border-radius:5px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px}

/* charts */
.chartbox{position:relative}
.chartbox svg{width:100%;height:auto;display:block;overflow:visible}
.chartbox .gl{stroke:var(--line);stroke-width:1}
.chartbox .ax{fill:var(--ink-3);font:600 11px var(--font)}
.chartbox .cross{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.tip{position:absolute;pointer-events:none;background:var(--navy);color:#fff;border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.45;box-shadow:var(--sh-3);white-space:nowrap;transform:translate(-50%,-110%);z-index:5}
.tip b{font-size:13px}
.tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.marker text{font:700 10.5px var(--font);fill:var(--ink-2)}

/* season runway */
.season{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;margin-top:14px}
.season div{height:30px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:700}
.season .wet{background:var(--info-bg);color:var(--info)} .season .dry{background:var(--warn-bg);color:var(--warn)} .season .mid{background:var(--paper-2);color:var(--ink-3)}
.runway{position:relative;height:18px;border-radius:9px;background:var(--paper-2);margin:34px 0 8px}
.runway>i{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:linear-gradient(90deg,var(--green),#7CCB8F)}
.runway .flag{position:absolute;top:-30px;transform:translateX(-50%);font-size:12px;font-weight:750;white-space:nowrap}
.runway .flag::after{content:"";position:absolute;left:50%;top:22px;width:2px;height:26px;background:currentColor}

/* tables */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
table.t th{text-align:left;font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card-2)}
table.t td{padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr.go{cursor:pointer}
table.t tbody tr.go:hover td{background:var(--card-2)}
table.t .r{text-align:right}
.who2{display:flex;align-items:center;gap:12px}
.who2 b{display:block}
.who2 span{font-size:12px;color:var(--ink-3)}

/* herd cards */
.herdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.cowcard{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);box-shadow:var(--sh-1);cursor:pointer;text-align:left;transition:transform .12s,box-shadow .12s}
.cowcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.cowcard .top2{display:flex;gap:12px;align-items:center}
.cowcard h4{font-size:17px}
.cowcard .sub{font-size:12.5px;color:var(--ink-3)}
.cowcard .stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.cowcard .stats3 span{display:block;font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.cowcard .stats3 b{font-size:15px}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font-weight:650;font-size:13px;color:var(--ink-2);cursor:pointer}
.filters button b{margin-left:4px;color:var(--ink-3)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters button[aria-pressed="true"] b{color:var(--paper)}

/* animal profile */
.profile{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:24px}
.profile h2{font-size:34px}
.profile .id{font-size:15px;color:var(--ink-3);font-weight:650;margin-left:8px}
.pedigree{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ped{padding:12px 14px;border-radius:12px;background:var(--card-2);border:1px solid var(--line)}
.ped span{display:block;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ped b{display:block;margin-top:2px}
.ped small{color:var(--ink-3)}
.facts{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line)}
.facts div{padding:14px 24px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0}
.facts dt{font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.facts dd{margin:3px 0 0;font-weight:700}
.tabs{display:flex;gap:2px;padding:0 16px;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{position:relative;height:48px;padding:0 14px;border:0;background:none;font-weight:700;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--green)}
.tline{list-style:none;margin:0;padding:0;position:relative}
.tline::before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tline li{position:relative;display:flex;gap:14px;padding:9px 0}
.tline .pin{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--card);border:2px solid var(--line-2)}
.tline .pin .ic{width:16px;height:16px}
.tline .pin.ok{border-color:var(--ok);color:var(--ok)} .tline .pin.info{border-color:var(--info);color:var(--info)} .tline .pin.bad{border-color:var(--bad);color:var(--bad)} .tline .pin.vio{border-color:var(--vio);color:var(--vio)}
.tline b{display:block}
.tline span{font-size:12.5px;color:var(--ink-3)}

/* callouts */
.note{display:flex;gap:12px;padding:14px 16px;border-radius:14px;background:var(--info-bg)}
.note .ic{color:var(--info);margin-top:2px}
.note.warn{background:var(--warn-bg)} .note.warn .ic{color:var(--warn)}
.note.bad{background:var(--bad-bg)} .note.bad .ic{color:var(--bad)}
.note b{display:block}
.note span{color:var(--ink-2);font-size:13px}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(11,18,32,.45);z-index:60;animation:fade .15s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--card);z-index:61;box-shadow:var(--sh-3);display:flex;flex-direction:column;animation:slide .2s ease-out}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer .inner{padding:20px 22px;overflow:auto;display:grid;gap:16px}
.drawer footer{margin-top:auto;padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.fld{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--edge);background:var(--card);font-weight:500;color:var(--ink)}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.types button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.types button[aria-pressed="true"]{border-color:var(--green);background:var(--green-3);color:var(--green)}
@keyframes fade{from{opacity:0}} @keyframes slide{from{transform:translateX(24px);opacity:.4}}

/* report catalogue */
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.docc{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);box-shadow:var(--sh-1)}
.docc .thumb{height:118px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);position:relative;overflow:hidden}
.docc .thumb::before{content:"";position:absolute;left:18%;right:18%;top:14px;bottom:0;background:var(--card);border-radius:4px 4px 0 0;box-shadow:var(--sh-2)}
.docc .thumb i{position:absolute;left:24%;height:5px;border-radius:3px;background:var(--line-2)}
.docc b{font-size:15px}
.docc p{font-size:13px;color:var(--ink-3)}

/* ============ passport (A4 print) ============ */
.sheet-wrap{background:#E9E6DF;padding:32px;display:flex;justify-content:center;border-radius:var(--r-xl)}
.a4{width:210mm;min-height:297mm;background:#fff;color:#0B1220;padding:16mm 16mm 14mm;box-shadow:0 30px 80px rgba(0,0,0,.18);font-size:10pt;line-height:1.45;display:flex;flex-direction:column;gap:6mm}
.a4 .lh{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:5mm;border-bottom:2px solid #0B1220}
.a4 .lh img{height:14mm}
.a4 .lh .doc{text-align:right}
.a4 .lh .doc b{display:block;font-size:14pt;letter-spacing:-.01em}
.a4 .lh .doc span{font-size:8.5pt;color:#555}
.a4 h5{margin:0 0 2.5mm;font-size:8.5pt;letter-spacing:.14em;text-transform:uppercase;color:#13773A}
.a4 .idrow{display:grid;grid-template-columns:34mm 1fr;gap:6mm;align-items:start}
.a4 .kv{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5mm 6mm}
.a4 .kv div span{display:block;font-size:7.5pt;color:#666;text-transform:uppercase;letter-spacing:.06em}
.a4 .kv div b{font-size:10pt}
.a4 table{width:100%;border-collapse:collapse;font-size:9pt}
.a4 th{text-align:left;font-size:7.5pt;text-transform:uppercase;letter-spacing:.06em;color:#666;border-bottom:1px solid #0B1220;padding:1.6mm 2mm}
.a4 td{padding:1.8mm 2mm;border-bottom:1px solid #E3E0D8}
.a4 .r{text-align:right}
.a4 .two{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
.a4 .status-box{border:1.5px solid #13773A;border-radius:3mm;padding:3mm 4mm;background:#F2F9F4}
.a4 .foot{margin-top:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8mm;padding-top:5mm;border-top:1px solid #0B1220;font-size:8pt;color:#555}
.a4 .sig{height:12mm;border-bottom:1px solid #999;margin-bottom:1.5mm}

/* ============ field mode ============ */
.field{min-height:100vh;display:flex;justify-content:center;background:#E9E6DF}
.phone{width:100%;max-width:430px;min-height:100vh;background:#fff;color:#0B1220;display:flex;flex-direction:column}
.ph-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#0B1220;color:#fff}
.ph-top b{display:block;font-size:16px}
.ph-top span{font-size:12.5px;color:#9AA7BA}
.ph-sess{padding:18px 18px 4px;display:flex;justify-content:space-between;align-items:flex-end}
.ph-sess h2{font-size:30px;letter-spacing:-.03em}
.ph-open{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:6px 12px;border-radius:999px;background:#E3F1E7;color:#0E5E2D;font-weight:800;font-size:13.5px}
.ph-open::before{content:"";width:9px;height:9px;border-radius:50%;background:#13773A;box-shadow:0 0 0 4px rgba(19,119,58,.18)}
.ph-total{text-align:right}
.ph-total b{display:block;font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1}
.ph-total span{font-size:12px;font-weight:800;color:#5E6574;text-transform:uppercase;letter-spacing:.08em}
.ph-alert{margin:12px 18px 4px;padding:12px 14px;border-radius:14px;background:#FBE8E6;color:#7A1A12;font-weight:750;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.ph-cows{padding:10px 18px;display:flex;flex-direction:column;gap:8px}
.ph-cow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border:2px solid #E6E1D6;background:#fff;cursor:pointer;text-align:left;width:100%}
.ph-cow.sel{border-color:#0B1220;box-shadow:0 0 0 3px rgba(11,18,32,.12)}
.ph-cow.done{border-color:#13773A;background:#F3FAF5}
.ph-cow.stop{border-color:#B42318;background:#FDF1F0}
.ph-cow .who{flex:1;min-width:0}
.ph-cow .who b{display:block;font-size:18px}
.ph-cow .who span{font-size:13px;font-weight:700;color:#5E6574}
.ph-cow .who .red{color:#B42318}
.ph-cow .val{font-size:28px;font-weight:800;letter-spacing:-.03em;min-width:80px;text-align:right}
.ph-cow .val small{font-size:14px;color:#5E6574;margin-left:2px}
.pad{position:sticky;bottom:0;background:#F6F4EF;border-top:1px solid #E6E1D6;padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
.pad-read{display:flex;justify-content:space-between;align-items:center;padding:0 4px 10px;font-weight:800}
.pad-read b{font-size:24px}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.keys button{height:58px;border:0;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08);font-size:24px;font-weight:800;color:#0B1220;cursor:pointer}
.keys button.go{grid-row:span 2;height:auto;background:#13773A;color:#fff;font-size:16px}
.keys button.fn{font-size:15px;color:#3B4453}

/* ============ responsive ============ */
@media (max-width:1240px){.s3{grid-column:span 6}.s4,.s5{grid-column:span 6}.s7,.s8{grid-column:1/-1}.facts{grid-template-columns:repeat(3,1fr)}.facts div:nth-child(4){border-left:0}}
@media (max-width:920px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;inset:auto 0 0 0;height:auto;flex-direction:row;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:50;overflow-x:auto}
  .brand,.farm-switch,.navlbl,.rail-foot{display:none}
  .navgrp{margin:0;display:contents}
  .navi{flex-direction:column;justify-content:center;gap:3px;height:54px;min-width:64px;padding:0 6px;font-size:12px;flex:1}
  .navi.x{display:none}
  .navi[aria-current="page"]::before{left:22%;right:22%;top:-6px;width:auto;height:3px;border-radius:0 0 3px 3px}
  .navi .n{position:absolute;top:3px;right:8px;margin:0;min-width:16px;height:16px;font-size:12px}
  .top{padding:0 16px;height:60px}.tools .pill.x{display:none}.find kbd{display:none}
  .page{padding:18px 16px 100px;gap:16px}
  .s3,.s4,.s5,.s6,.s7,.s8{grid-column:1/-1}
  .hero h2{font-size:26px}.hero .hills{width:90%;opacity:.5}
  .profile{grid-template-columns:auto 1fr}.profile .acts{grid-column:1/-1}
  .facts{grid-template-columns:repeat(2,1fr)}.facts div{border-left:0;border-top:1px solid var(--line)}
  .pulse{grid-template-columns:1fr}
  .sheet-wrap{padding:0;background:none}.a4{width:100%;min-height:auto;padding:18px;box-shadow:var(--sh-2)}
}
@media (max-width:560px){.head h2{font-size:24px}.metric .v b{font-size:26px}.metric svg.sp{display:none}.find{max-width:none}}

@media print{
  body{background:#fff}
  .rail,.top,.no-print{display:none!important}
  .app{display:block}.page{padding:0;display:block;max-width:none}
  .sheet-wrap{padding:0;background:none}
  .a4{box-shadow:none;width:auto;min-height:auto;padding:0}
  @page{size:A4;margin:14mm}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ motion ============
   Only when a screen is entered (html[data-enter]), never on every redraw; and never at
   all when the device asks for reduced motion (the rule above switches it off). */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes grow{from{transform:scaleY(0)}}
html[data-enter] .page>*{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
html[data-enter] .page>*:nth-child(2){animation-delay:.04s} html[data-enter] .page>*:nth-child(3){animation-delay:.08s}
html[data-enter] .page>*:nth-child(4){animation-delay:.12s} html[data-enter] .page>*:nth-child(5){animation-delay:.16s}
html[data-enter] .page>*:nth-child(6){animation-delay:.2s} html[data-enter] .page>*:nth-child(n+7){animation-delay:.24s}
html[data-enter] .chartbox rect[rx="2.5"]{transform-box:fill-box;transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.7,.2,1) both .15s}
html[data-enter] .herdgrid .cowcard{animation:rise .45s both}
html[data-enter] .herdgrid .cowcard:nth-child(2n){animation-delay:.05s} html[data-enter] .herdgrid .cowcard:nth-child(3n){animation-delay:.1s}

/* ============ phone refinements (checked in devices.html) ============ */
.card>header{flex-wrap:wrap}
@media (max-width:560px){
  .top{gap:8px}
  .top .iconbtn[data-theme-toggle]{display:none}            /* lives in Settings on a phone */
  .find input{padding-right:12px}
  .hero{padding:22px 20px 24px;min-height:0}
  .hero h2{font-size:23px}
  .hero .nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
  .hero .nums b{font-size:21px}
  .hero .nums b small{font-size:12px}
  .hero .nums span{font-size:12px;line-height:1.35}
  .profile h2{font-size:28px}
  .page{padding:16px 12px 100px}
  .body{padding:14px 16px 18px}
  .card>header{padding:16px 16px 0}
  .need{gap:12px}
  .need .when{display:none}
}

/* =====================================================================
   The app: everything the prototype showed only as a picture — forms, sheets,
   sign-in, the recorder's keypad on real records, banners, dark mode that follows the
   phone, and touch sizes. Tokens only; every text pair is 4.5:1 and every control
   edge 3:1 in both themes (checked with the contrast script).
   ===================================================================== */

/* Dark follows the phone unless the person chose a theme in Settings. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="sun"]){
    color-scheme:dark;
    --paper:#0A101B; --paper-2:#0F1726; --card:#111A2B; --card-2:#142033; --line:#1F2C44; --line-2:#2B3B58; --edge:#6E7C94;
    --ink:#EAF0F7; --ink-2:#B9C3D2; --ink-3:#8F9BAE;
    --green:#4ADE80; --green-2:#86EFAC; --green-3:#123421; --on-green:#07130C;
    --ok:#4ADE80; --ok-bg:#123421; --warn:#FBBF24; --warn-bg:#35270C; --bad:#F97066; --bad-bg:#3A1714; --info:#8DB4FF; --info-bg:#14264B; --vio:#C4B5FD; --vio-bg:#261D46;
    --am:#FBBF24; --md:#22D3EE; --pm:#A5B4FC;
    --sh-1:none; --sh-2:0 8px 24px rgba(0,0,0,.35); --sh-3:0 24px 64px rgba(0,0,0,.6);
  }
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:95;background:var(--green);color:var(--on-green);padding:12px 16px;border-radius:12px;font-weight:750;text-decoration:none}
.skip:focus{top:12px}
main:focus,.page:focus,h2[tabindex]:focus{outline:none}
.up{color:var(--ok);font-weight:750}.down{color:var(--bad);font-weight:750}
.hint{font-size:13px;color:var(--ink-3)}
.stack{display:flex;flex-direction:column;gap:12px}
.between{justify-content:space-between}
.btn:disabled,.iconbtn:disabled{opacity:.45;cursor:default;filter:none}
.btn.danger{background:var(--card);color:var(--bad);border-color:var(--edge);box-shadow:none}
.btn.block{width:100%}
.btn.big{height:52px;font-size:16px;border-radius:14px}
.linkbtn{border:0;background:none;padding:0;color:var(--green);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.iconbtn{border-color:var(--edge)}
.seg{border-color:var(--edge)}
.filters button{border-color:var(--edge)}
.fig.bad{color:var(--bad)} .fig.warn{color:var(--warn)} .fig.ok{color:var(--ok)}

/* Touch: every control 44px on a finger-driven screen (WCAG 2.5.5); the desktop keeps
   its density for a mouse. */
@media (pointer:coarse){
  .btn,.btn.sm{height:auto;min-height:44px}
  .iconbtn{width:44px;height:44px}
  .seg button{height:38px;min-width:44px}
  .filters button{height:44px}
  .tabs button{height:48px}
  .more{min-height:44px}
  .linkbtn{min-height:44px}
}

/* ---------- shell pieces the real app adds ---------- */
.rail .navi .ic{width:19px;height:19px}
.rail-foot .who{flex:1;min-width:0}
.rail-foot b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-foot .role{color:var(--navy-dim);font-size:12px}
.rail-foot .iconbtn{background:var(--navy-2);border-color:var(--navy-3);color:var(--navy-ink)}
.navi.menu{display:none}
.topmark{display:none;width:34px;height:34px;border-radius:9px;flex:none}
.head h1{font-size:30px}
.navwrap{display:block}
.sync{cursor:pointer}
.sync[data-s="local"] .dot{background:var(--warn)}
.sync[data-s="wait"] .dot{background:var(--info)}
.sync[data-s="err"]{color:var(--bad)} .sync[data-s="err"] .dot{background:var(--bad)}
.devpill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--warn-bg);color:var(--warn);font-size:12px;font-weight:750;letter-spacing:.06em;white-space:nowrap}
.banners{max-width:1360px;margin:0 auto;padding:16px 32px 0;display:flex;flex-direction:column;gap:10px}
.banners:not(:has(>:not([hidden]))){display:none}
.banners .note{align-items:center;flex-wrap:wrap}
.banners .note>div{flex:1 1 240px}
.note.ok{background:var(--ok-bg)} .note.ok .ic{color:var(--ok)}
.note.vio{background:var(--vio-bg)} .note.vio .ic{color:var(--vio)}

/* Mobile menu: the whole navigation, as a sheet, from the bar's Menu button. */
dialog.navsheet{border:0;padding:0;margin:auto 0 0;width:100%;max-width:none;max-height:86dvh;border-radius:24px 24px 0 0;background:var(--navy);color:var(--navy-ink);box-shadow:var(--sh-3)}
dialog.navsheet[open]{animation:up .22s ease-out}
dialog.navsheet::backdrop{background:rgba(11,18,32,.55)}
.navsheet .in{padding:12px 14px calc(18px + env(safe-area-inset-bottom));overflow:auto;max-height:86dvh}
.navsheet .grab{width:44px;height:4px;border-radius:2px;background:var(--navy-3);margin:0 auto 6px}
.navsheet .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.navsheet .navlbl{grid-column:1/-1;padding:12px 4px 2px}
.navsheet .navi{flex-direction:column;justify-content:center;height:76px;gap:6px;text-align:center;font-size:12.5px;background:var(--navy-2);border-radius:14px}
.navsheet .navi[aria-current="page"]::before{display:none}
.navsheet .navi .n{position:absolute;top:6px;right:8px;margin:0}
.navsheet .foot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--navy-3)}
.navsheet .foot .who{flex:1;min-width:0}
.navsheet .foot .seg{background:var(--navy-2);border-color:var(--navy-3)}
.navsheet .foot .seg button{color:var(--navy-dim)}
.navsheet .foot .seg button[aria-pressed="true"]{background:var(--navy-ink);color:var(--navy)}

/* ---------- forms ---------- */
.fld{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--ink-2);min-width:0;border:0;margin:0;padding:0}
.fld>legend{padding:0;margin-bottom:6px}
.fld input,.fld select,.fld textarea,.inp{width:100%;min-height:44px;height:auto;padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:var(--card);font-size:16px;font-weight:500;color:var(--ink)}
.fld textarea{resize:vertical;min-height:72px}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible,.inp:focus-visible{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
.fld input[readonly]{background:var(--paper-2);border-style:dashed;color:var(--ink-3)}
.fld input[aria-invalid="true"]{border-color:var(--bad);border-width:2px}
.fld small{font-weight:500;color:var(--ink-3);font-size:12.5px}
.fld .suf{position:relative}
.fld .suf input{padding-right:52px}
.fld .suf span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-weight:700;pointer-events:none}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fgrid>.full{grid-column:1/-1}
@media (max-width:420px){.fgrid{grid-template-columns:1fr}}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts label{position:relative;flex:1 1 auto}
.opts input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.opts span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--edge);background:var(--card);font-weight:700;font-size:14px;color:var(--ink-2);text-align:center}
.opts input:checked+span{background:var(--green-3);border-color:var(--green);color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.opts input:focus-visible+span{outline:3px solid var(--green);outline-offset:2px}
.th-sort{all:unset;display:inline-flex;align-items:center;gap:4px;min-height:24px;cursor:pointer;font:inherit;color:inherit}
.th-sort::after{content:"\2195";font-size:12px;opacity:.45}
th[aria-sort="ascending"] .th-sort::after{content:"\25B2";opacity:1}
th[aria-sort="descending"] .th-sort::after{content:"\25BC";opacity:1}
.th-sort:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}
@media print{.th-sort::after{content:none}.sortbar{display:none}}
.sortbar{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-3)}
.sortbar select{min-height:36px;padding:4px 8px;border-radius:8px;border:1px solid var(--edge);background:var(--card);color:var(--ink);font:inherit;font-weight:600}
.sortrow{display:flex;justify-content:flex-end;margin:0 0 10px}
.vqr{background:#fff;padding:8px;border-radius:12px;line-height:0;min-width:220px;min-height:220px;display:flex;align-items:center;justify-content:center;color:#000}
.scanner .scan-box{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:1;max-width:420px;margin:0 auto}
.scanner video{width:100%;height:100%;object-fit:cover}
.scanner .scan-frame{position:absolute;inset:18%;border:3px solid var(--green);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.cowcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.cowcard-print{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:2px solid #000;border-radius:12px;background:#fff;color:#000;break-inside:avoid;page-break-inside:avoid}
.cowcard-print .cc-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cowcard-print b{font-size:26px;line-height:1.1;overflow-wrap:anywhere}
.cowcard-print .cc-tag{font-size:20px;font-weight:800}
.cowcard-print .cc-farm,.cowcard-print .cc-hint{font-size:12px}
@media print{.no-print{display:none!important}.cowcards{grid-template-columns:repeat(2,1fr);gap:6mm}.cowcard-print{border-width:1.5px}}
.picks{display:flex;flex-direction:column;gap:6px}
.pick{position:relative}
.pick input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pick span{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:var(--card)}
.pick span b{font-size:14.5px;color:var(--ink)}
.pick span small{color:var(--ink-3);font-size:12.5px}
.pick.bad span{border-left:4px solid var(--bad)}
.pick.warn span{border-left:4px solid var(--warn)}
.pick input:checked+span{background:var(--green-3);border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.pick input:focus-visible+span{outline:3px solid var(--green);outline-offset:2px}
.round .need{padding:8px 0}
.rd-pick{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:44px;cursor:pointer}
.rd-pick input{width:22px;height:22px;accent-color:var(--green)}
.err-msg{color:var(--bad);font-size:13.5px;font-weight:700;min-height:20px}
.types{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.types label{position:relative}
.types input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.types span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:72px;padding:10px 6px;border-radius:12px;border:1px solid var(--edge);background:var(--card);font-size:12.5px;font-weight:700;color:var(--ink-2);text-align:center;line-height:1.25}
.types span .ic{width:20px;height:20px}
.types input:checked+span{border-color:var(--green);background:var(--green-3);color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.types input:focus-visible+span{outline:3px solid var(--green);outline-offset:2px}
.drop{position:relative;display:flex;align-items:center;gap:12px;border:1.5px dashed var(--edge);border-radius:12px;padding:12px;cursor:pointer;background:var(--card-2);font-weight:600}
.drop:focus-within{outline:3px solid var(--green);outline-offset:2px}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.thumbs{display:flex;gap:14px;flex-wrap:wrap;padding:10px 10px 0 0}
.thumb{position:relative;width:64px;height:64px}
.thumb-open{width:100%;height:100%;border-radius:10px;overflow:hidden;border:1px solid var(--edge);background:var(--paper-2);display:grid;place-items:center;font-size:12px;font-weight:750;color:var(--ink-3);cursor:pointer;padding:0}
.thumb-open img{width:100%;height:100%;object-fit:cover}
.thumb .x{position:absolute;top:-10px;right:-10px;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.thumb .x::before{content:"×";width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font-size:16px;line-height:24px;text-align:center}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:90;display:grid;place-items:center;padding:16px}
.lightbox img{max-width:100%;max-height:82vh;border-radius:8px}
.lightbox>.btn{position:absolute;top:14px;right:14px}

/* ---------- the sheet: every add/edit form. A drawer from the right on a wide screen,
   a sheet from the bottom on a phone. A real <dialog> and a real <form>. ---------- */
dialog.sheet{border:0;padding:0;background:var(--card);color:var(--ink);box-shadow:var(--sh-3);margin:0 0 0 auto;width:min(500px,100%);max-width:500px;height:100dvh;max-height:100dvh}
dialog.sheet[open]{animation:slide .2s ease-out}
dialog.sheet.wide{width:min(620px,100%);max-width:620px}
dialog.sheet::backdrop{background:rgba(11,18,32,.45)}
.sheet form{display:flex;flex-direction:column;height:100%;max-height:100dvh}
.sheet-h{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.sheet-h h2{flex:1;font-size:19px}
.sheet-b{flex:1;padding:18px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.sheet-f{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
#sheet-danger{margin-right:auto}
.sheet-grab{display:none}
@media (max-width:640px){
  dialog.sheet,dialog.sheet.wide{margin:auto 0 0;width:100%;max-width:none;height:auto;max-height:92dvh;border-radius:24px 24px 0 0}
  dialog.sheet[open]{animation:up .22s ease-out}
  .sheet form{height:auto;max-height:92dvh}
  .sheet-grab{display:block;width:44px;height:4px;border-radius:2px;background:var(--line-2);margin:8px auto 0}
  .sheet-h{padding:10px 18px 12px}
  .sheet-b{padding:16px 18px}
  .sheet-f{padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
  .sheet-f .btn:last-child{flex:1}
}
@keyframes up{from{transform:translateY(40px);opacity:.5}}

/* ---------- sign-in and PIN ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:var(--paper);display:grid;place-items:center;padding:16px;overflow:auto}
.ov-card{position:relative;width:100%;max-width:410px;display:flex;flex-direction:column;gap:14px;padding:30px 26px 24px;border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.login-top{text-align:center;margin-bottom:4px}
.login-logo{width:min(270px,80%);height:auto;display:block;margin:0 auto 16px}
.login-top h1{font-size:13px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:74px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--green);font-size:14px;font-weight:750;cursor:pointer;min-height:44px;min-width:62px;border-radius:8px}
.login-foot{padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.pin-in{font-size:28px!important;text-align:center;letter-spacing:.5em;font-weight:750}
.hills-foot{position:fixed;left:0;right:0;bottom:0;width:100%;height:auto;max-height:34vh;pointer-events:none;opacity:.9}

/* ---------- toast, save bar ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;font-size:14.5px;opacity:0;transition:.2s;pointer-events:none;z-index:95;max-width:calc(100% - 32px);box-shadow:var(--sh-3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.savebar{position:fixed;left:var(--rail);right:0;bottom:0;z-index:45;padding:12px 32px;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(11,18,32,.08)}
.savebar-in{max-width:1296px;margin:0 auto;display:flex;align-items:center;gap:12px}
.savebar-in span{flex:1;font-weight:750}
body.has-savebar .page{padding-bottom:120px}

/* ---------- lists (Settings, payments, history) ---------- */
.list{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:12px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;color:inherit;font:inherit}
.list>.item:first-child{border-top:0}
button.item{cursor:pointer}
button.item:hover{background:var(--card-2)}
.item-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--paper-2);color:var(--ink-2)}
.item-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item-t{font-weight:700;overflow-wrap:anywhere}
.item-s{font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:2px 10px}
.item-v{text-align:right;font-weight:750;white-space:nowrap}
.item-v small{display:block;font-size:12px;color:var(--ink-3);font-weight:600}
.item>.ic:last-child{color:var(--ink-3)}
.menu-list .item{padding:12px 20px}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:28px 16px;color:var(--ink-3)}
.empty .ic{width:26px;height:26px}
.skel{height:52px;border-radius:12px;background:linear-gradient(90deg,var(--paper-2),var(--line),var(--paper-2));background-size:200% 100%;animation:sk 1.2s infinite}
.skel+.skel{margin-top:8px}
@keyframes sk{to{background-position:-200% 0}}
details.item summary::-webkit-details-marker{display:none}

/* ---------- milking (owner): a day strip and the cow-by-cow sheet ---------- */
.daystrip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;flex:1}
.daystrip::-webkit-scrollbar{display:none}
.day{flex:1 0 52px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:62px;padding:7px 4px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);cursor:pointer;color:var(--ink);font:inherit}
.day small{font-size:12px;color:var(--ink-3);font-weight:750;text-transform:uppercase;letter-spacing:.04em}
.day b{font-size:17px}
.day i{width:6px;height:6px;border-radius:50%;background:transparent}
.day.has i{background:var(--ok)} .day.miss i{background:var(--bad)}
.day[aria-current="date"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.day[aria-current="date"] small{color:var(--paper)}
.sessm .l .sw{display:inline-flex;align-items:center;gap:8px}
.sessm .l .sw i{width:10px;height:10px;border-radius:3px}
.sessm .bigin{width:100%;max-width:170px;min-height:52px;padding:6px 12px;font:750 30px var(--font);letter-spacing:-.03em;border:1px solid var(--edge);border-radius:12px;background:var(--card);color:var(--ink)}
.sessm .bigin[readonly]{border-style:dashed;background:var(--paper-2)}
.sessm .bigin:focus-visible,.sessm input[type=time]:focus-visible{outline:3px solid var(--green);outline-offset:1px}
.sessm .tm{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sessm input[type=time]{width:118px;min-height:40px;padding:4px 8px;border-radius:10px;border:1px solid var(--edge);background:var(--card);font-size:14px;color:var(--ink)}
table.t td.in{padding:6px 10px}
table.t input.cell{width:84px;min-height:40px;padding:6px 8px;border-radius:9px;border:1px solid var(--edge);background:var(--card);text-align:right;font:650 15px var(--font);color:var(--ink)}
table.t input.cell:focus-visible{outline:3px solid var(--green);outline-offset:1px}
table.t input.cell:disabled{opacity:.5}
table.t tfoot td{font-weight:750;background:var(--card-2);border-top:1px solid var(--line-2)}
.outrow{display:grid;grid-template-columns:minmax(0,1fr) 120px 44px;gap:10px;align-items:end}
.outrow+.outrow{margin-top:12px}
.rm{width:44px;height:44px;border:1px solid var(--edge);border-radius:10px;background:var(--card);color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
.ledger{display:grid;gap:9px}
.ledger>div{display:grid;grid-template-columns:minmax(110px,160px) 1fr 76px;gap:12px;align-items:center;font-size:13.5px}
.ledger .bar,.hbar .bar{height:10px;border-radius:5px;background:var(--paper-2);overflow:hidden}
.ledger .bar i,.hbar .bar i{display:block;height:100%;border-radius:5px}
.ledger b,.hbar b{text-align:right}
.hbar{display:grid;grid-template-columns:minmax(100px,160px) 1fr 96px;gap:12px;align-items:center;margin:10px 0;font-size:13.5px}
.hbar small{display:block;color:var(--ink-3);font-weight:600}

/* ---------- field mode: the recorder's phone, on real records ---------- */
.fieldmode{display:flex;flex-direction:column;gap:12px;max-width:560px;width:100%;margin:0 auto}
.ph-sess{padding:4px 2px 0;gap:12px}
.ph-sess h2{font-size:32px}
.ph-open{background:var(--ok-bg);color:var(--ok)}
.ph-open::before{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent)}
.ph-open.shut{background:var(--paper-2);color:var(--ink-2)}
.ph-open.shut::before{background:var(--ink-3);box-shadow:none}
.ph-total span{color:var(--ink-3)}
.ph-alert{margin:0;background:var(--bad-bg);color:var(--bad)}
.ph-alert.info{background:var(--info-bg);color:var(--info)}
.ph-cows{padding:0}
.ph-cow{border-color:var(--line-2);background:var(--card);color:var(--ink);font:inherit}
.ph-cow.sel{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 14%,transparent)}
.ph-cow.done{border-color:var(--ok);background:var(--ok-bg)}
.ph-cow.stop{border-color:var(--bad);background:var(--bad-bg)}
.ph-cow .who span{color:var(--ink-3)}
.ph-cow .who .red{color:var(--bad)}
.ph-cow .val small{color:var(--ink-3)}
.pad{position:sticky;bottom:0;z-index:5;margin:0 -12px;background:var(--paper-2);border-top:1px solid var(--line-2);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(11,18,32,.1)}
.keys button{background:var(--card);color:var(--ink);font-family:var(--font)}
.keys button.go{background:var(--green);color:var(--on-green)}
.keys button.fn{color:var(--ink-2)}
.keys button.save{background:var(--ink);color:var(--paper);font-size:15px}
.keys button:active{transform:scale(.97)}
.keys button:disabled{opacity:.4}
.ph-rest{display:grid;gap:8px}
.ph-rest>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.bigtotal{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bigtotal b{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1}
.bigtotal b small{font-size:16px;color:var(--ink-3);margin-left:4px}

/* ---------- herd and animal ---------- */
.cowcard{color:inherit;font:inherit;width:100%}
.cowcard .stats3 b{white-space:nowrap}
.acts{justify-content:flex-end}
.tabs[role="tablist"] button:focus-visible{outline-offset:-3px}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calgrid .dh{padding:6px 8px}
.calgrid .dc{min-height:88px;padding:6px 8px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:4px;min-width:0}
.calgrid .dc.today{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.calgrid .dc.pad0{background:var(--paper-2);border-color:transparent}
.calgrid .dc b{font-size:12px}
.calgrid .st{height:auto;padding:3px 7px;white-space:normal;font-size:12px;line-height:1.25}
@media (max-width:640px){.calgrid{gap:3px}.calgrid .dc{min-height:58px;padding:4px}.calgrid .st{font-size:0;gap:0;padding:0;width:10px;height:10px;justify-content:center}.calgrid .st::before{width:8px;height:8px}}

/* ---------- a4 extras ---------- */
.a4 .kv4{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5mm 6mm}
.a4 .kv4 div span{display:block;font-size:7.5pt;color:#666;text-transform:uppercase;letter-spacing:.06em}
.a4 .muted{font-size:8pt;color:#666}

/* ---------- phone layout of the app shell ---------- */
@media (max-width:920px){
  .navi.menu{display:flex}
  .topmark{display:block}
  .navwrap{display:contents}
  .top .find{display:none;flex:none}
  .top.searching .find{display:block;position:absolute;left:12px;right:12px;top:9px;max-width:none}
  .top.searching .topmark,.top.searching .tools{visibility:hidden}
  .banners{padding:12px 16px 0}
  .savebar{left:0;bottom:calc(66px + env(safe-area-inset-bottom));padding:10px 16px}
  body.has-savebar .page{padding-bottom:180px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .fieldmode .pad{bottom:calc(66px + env(safe-area-inset-bottom))}
}
@media (min-width:921px){.top [data-search]{display:none}}
@media (max-width:560px){
  .top .tools .devpill{display:none}
  .top .tools .langbtn .lname,.top .tools .sync .sync-l{display:none}
  .top .tools .langbtn .lcode,.top .tools .sync .sync-s{display:inline}
  .head h1{font-size:24px}
  .ph-sess h2{font-size:28px}
  .ledger>div,.hbar{grid-template-columns:minmax(90px,120px) 1fr 70px;gap:8px}
  .outrow{grid-template-columns:minmax(0,1fr) 96px 44px}
  .metric{padding:14px 16px}
}
@media print{
  .banners,.savebar,.toast,.overlay,dialog{display:none!important}
}
/* Windows High Contrast / forced colours: keep the edges and states the palette drew. */
@media (forced-colors:active){
  .btn,.iconbtn,.navi,.filters button,.seg button,.opts span,.types span,.day,.cowcard,.ph-cow,.keys button,.tabs button{border:1px solid ButtonText}
  .navi[aria-current="page"],.filters button[aria-pressed="true"],.seg button[aria-pressed="true"],.day[aria-current="date"],.ph-cow.sel,.tabs button[aria-selected="true"]{outline:2px solid Highlight}
  .st::before,.legend i,.gauge .me,.gauge .band,.ledger .bar i,.hbar .bar i,.pill .dot,.runway>i{forced-color-adjust:none}
}

/* Language: one button that names the other language and switches to it. */
.langbtn{cursor:pointer;border-color:var(--edge)}
.langbtn .ic{width:16px;height:16px;color:var(--ink-3)}
.langbtn b{font-weight:750;letter-spacing:.04em}
@media (pointer:coarse){.langbtn,.sync{min-height:44px}}
.navsheet .langbtn{background:var(--navy-2);border-color:var(--navy-3);color:var(--navy-ink)}
.navsheet .langbtn .ic{color:var(--navy-dim)}
.langbtn .lcode,.sync .sync-s{display:none}
.navsheet .langbtn .lname{display:inline}.navsheet .langbtn .lcode{display:none}
.rowlink{border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:10px;min-height:24px;min-width:24px}
.contents{display:contents}
.setbody{display:flex;flex-direction:column;gap:16px}
.setbody>.card{padding:18px 20px}
.setbody>.card.stack{display:flex}
.setbody h3{font-size:16px}
.need .who b b,.need .who b em{display:inline}
svg.sp{width:92px;height:34px;flex:none}
.note span b,.note span em,.note span a{display:inline}
.sessm .v{justify-content:flex-start;align-items:center;gap:8px}
h1[tabindex="-1"]:focus,h1[tabindex="-1"]:focus-visible{outline:none}
/* ---------- photo the scale ---------- */
dialog.cam{width:min(620px,100%);max-width:620px}
.camf{display:flex;flex-direction:column;height:100%;max-height:100dvh}
.cam-stage{position:relative;flex:1;min-height:300px;background:#000;overflow:hidden;touch-action:none}
.cam-stage video,.cam-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cam-guide{position:absolute;border:3px solid #4ADE80;border-radius:10px;box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:move;touch-action:none}
.cam-guide:focus-visible{outline:3px solid #fff;outline-offset:2px}
.cam-h{position:absolute;right:-14px;bottom:-14px;width:28px;height:28px;border-radius:50%;background:#4ADE80;border:3px solid #0B1220;cursor:nwse-resize}
.cam-read{padding:12px 22px;min-height:48px;font-size:15px}
.cam-read .warn{color:var(--warn);font-weight:750}
@media (max-width:640px){dialog.cam{height:100dvh;max-height:100dvh;border-radius:0}.cam-stage{min-height:0}}
.ph-photo{display:inline-flex;align-items:center;gap:6px}
.scalepics{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.scalepic{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--card-2)}
.scalepic .thumb{flex:none}
.scalepic .who{flex:1;min-width:0;font-size:13px}
.scalepic .who b{display:block;font-size:14px}
.scalepic.bad{border-color:var(--bad);background:var(--bad-bg)}
.pad-read{gap:10px}
.pad-read .btn{margin-left:auto}
dialog.sheet .camf{height:100%;max-height:100dvh}
.cam-stage{min-height:52vh}
@media (max-width:640px){dialog.sheet.cam{height:100dvh;max-height:100dvh;border-radius:0;margin:0}}
.cam-frame{position:absolute;inset:6%;border:2px dashed rgba(255,255,255,.55);border-radius:14px;pointer-events:none}
.cam-zoom{position:absolute;left:12px;top:12px;max-width:62%;max-height:34%;border:3px solid #4ADE80;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);background:#000}
.cam-stage canvas.cam-zoom{inset:auto;width:auto;height:auto}
.scalepics{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.scalepic{align-items:flex-start}
.scalepic .thumb{width:118px;height:88px}
.scalepic .thumb-open{background:#0B1220}
.scalepic .thumb-open img{object-fit:contain}

/* View as: the owner using another role's view. The top bar and a strip say so. */
.viewbtn{cursor:pointer;border-color:var(--edge)}
.viewbtn .ic{width:16px;height:16px;color:var(--ink-3)}
.viewbtn.on{background:var(--vio-bg);color:var(--vio);border-color:var(--vio)}
.viewbtn.on .ic{color:var(--vio)}
@media (pointer:coarse){.viewbtn{min-height:44px}}
@media (max-width:560px){.top .tools .viewbtn .lname{display:none}}
.viewstrip{position:sticky;top:76px;z-index:25;max-width:1296px;margin:12px auto 0;align-items:center;flex-wrap:wrap;box-shadow:var(--sh-2)}
.viewstrip>div{flex:1 1 240px}
@media (min-width:921px){.viewstrip{margin:12px 32px 0}}
@media (max-width:920px){.viewstrip{top:68px;margin:10px 12px 0}}
/* the buyer's own page */
.buyerpage{min-height:100vh}
.bp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--navy)}
.bp-top img{height:26px;width:auto}
.bp-page{max-width:560px;margin:0 auto;padding:18px 14px 40px;display:flex;flex-direction:column;gap:14px}
.bp-name{font-size:26px}
/* health cases */
.iconbtn.bell{position:relative}
.iconbtn.bell .count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--bad);color:var(--on-green);font-size:12px;font-weight:800;display:grid;place-items:center}
.iconbtn.bell.hot{border-color:var(--bad);color:var(--bad);animation:bellpulse 1.4s ease-in-out infinite}
@keyframes bellpulse{50%{box-shadow:0 0 0 5px var(--bad-bg)}}
@media (prefers-reduced-motion:reduce){.iconbtn.bell.hot{animation:none}}
a.need{color:inherit;text-decoration:none}
a.need.dim{opacity:.6}
.caserow{border-radius:12px}
.caserow:hover .who b{text-decoration:underline}
.item-ic.sev-emergency{background:var(--bad-bg);color:var(--bad)}
.item-ic.sev-urgent{background:var(--warn-bg);color:var(--warn)}
.item-ic.sev-routine{background:var(--info-bg);color:var(--info)}
.mc-live.flash{filter:brightness(1.8)}
.mc-rec{position:absolute;top:12px;left:12px;width:14px;height:14px;border-radius:50%;background:#e11;box-shadow:0 0 0 4px rgba(238,17,17,.35)}
.mc-mode{margin:10px 16px 0}
.mc-mode button{display:inline-flex;align-items:center;gap:6px}
.mc-shots{padding:6px 16px 0}
.mc-v{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:750;color:var(--ink-2)}
.thumb>.mc-v{width:100%;height:100%;justify-content:center;border-radius:10px;border:1px solid var(--edge);background:var(--paper-2)}
.lightbox video{max-width:100%;max-height:78vh;border-radius:8px;background:#000}
.lb-cap{position:absolute;left:16px;right:16px;bottom:14px;text-align:center;color:#fff;font-size:13px;font-weight:650}
.rc-worse{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:650}
.rc-worse input{width:20px;height:20px}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line-2)}
.timeline li{position:relative;padding:0 0 14px 12px}
.timeline li::before{content:"";position:absolute;left:-25px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--card);border:2px solid var(--green)}
.timeline li b{display:block;font-size:14px}
.timeline li p{margin-top:4px;font-size:13.5px}
.back{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--ink-2);text-decoration:none}
.back .ic{transform:rotate(180deg)}
.mc-shots .thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px;border:1px solid var(--edge)}
.mc-mode [aria-pressed="true"]{background:var(--green-3);color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
h2.grp{font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 -8px}
/* resource centre */
.learngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.learntile{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line-2);border-radius:14px;background:var(--card);color:inherit;text-decoration:none;min-height:64px}
.learntile:hover{border-color:var(--green)}
.learntile b{display:block;font-size:14px;line-height:1.25}
.learntile small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.learntile.done small{color:var(--ok)}
.learnlist{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:1.45}
.learnlist.dont li::marker{content:"✕  ";color:var(--bad)}
p.lead{font-size:16.5px;line-height:1.55}
/* vet bills */
.billrow{display:grid;grid-template-columns:1fr 80px 110px 44px;gap:8px;align-items:center}
@media (max-width:520px){.billrow{grid-template-columns:1fr 64px 90px 44px}}
.contents>.note,.contents>.head{grid-column:1/-1}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
label.check{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border:1px solid var(--line-2);border-radius:12px;font-weight:600}
label.check input{width:20px;height:20px}
.fixedcow{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line-2);border-radius:14px;background:var(--card-2)}
.fixedcow b{display:block;font-size:16px}.fixedcow span{display:block;font-size:13px;color:var(--ink-3)}
.refchip{display:inline-block;font:600 11px/1.6 ui-monospace,monospace;padding:0 6px;border-radius:6px;background:var(--card-2);border:1px solid var(--line-2);color:var(--ink-2);vertical-align:1px;letter-spacing:.02em}
/* needs action */
.needs-pop{position:fixed;right:16px;bottom:84px;z-index:80;display:flex;align-items:center;gap:12px;max-width:420px;padding:12px 12px 12px 16px;border-radius:16px;background:var(--card);border:1px solid var(--green);box-shadow:var(--sh-2)}
.needs-pop b{display:block}.needs-pop span{display:block;font-size:13px;color:var(--ink-3)}
.timeline.ticket li.done::before{background:var(--green)}
.timeline.ticket li.now::before{border-color:var(--am);background:var(--am)}
.timeline.ticket li.later{opacity:1}.timeline.ticket li.later b,.timeline.ticket li.later .hint{color:var(--ink-2)}   /* later steps: quieter, but still readable (no fading below contrast) */
.timeline.ticket li .btn{margin-top:6px}

/* =====================================================================
   Phones, tablets and other browsers (the device review)
   ===================================================================== */
/* D10: browsers without color-mix / unprefixed backdrop-filter get a solid bar */
@supports not (background:color-mix(in srgb,red 50%,blue)){.top{background:var(--paper)}}
.top{-webkit-backdrop-filter:blur(12px) saturate(1.4)}
/* D1: iPhone notch and home bar: the top bar and pages keep clear of them */
.top{padding-top:env(safe-area-inset-top);height:calc(68px + env(safe-area-inset-top))}
@media (max-width:920px){@supports (padding:max(0px)){.page{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}}
/* U1/D7: on a phone the top bar keeps the bell, sync, role and search; language and theme are in Menu and Settings */
@media (max-width:420px){
  .top{gap:8px;padding-left:12px;padding-right:12px}
  .top .tools{gap:6px;min-width:0}
  .top .tools .langbtn,.top .tools #theme-btn{display:none}
  .top .tools .pill{padding-left:10px;padding-right:10px}
}
/* the hero's sun sits on the words below a wide screen */
@media (max-width:1100px){.hero .hills .sun{display:none}}
/* U3: a to-do row on a phone: the words take the line, the state and the button go under them */
@media (max-width:560px){
  .need{flex-wrap:wrap;row-gap:6px}
  .need>.who{flex:1 1 calc(100% - 56px)}
  .need>.who~*{margin-left:auto}
  .need>.who~*~*{margin-left:0}
}
/* U4: state pills wrap instead of pushing the row wide */
.st{max-width:100%;white-space:normal;overflow-wrap:anywhere}
/* D11: iPhone zooms into any field under 16px; on touch screens every field is 16px */
@media (pointer:coarse){input,select,textarea,#q{font-size:16px}}
/* U17: sort controls and table headings are big enough to tap */
@media (pointer:coarse){.sortbar select{min-height:44px}.th-sort{min-height:44px}}
/* D12: the "new things need you" pop-up stays clear of the home bar and within a phone */
.needs-pop{max-width:calc(100vw - 32px);bottom:calc(84px + env(safe-area-inset-bottom))}
@media (min-width:921px){.needs-pop{bottom:24px}}
/* D19: text at 200% grows boxes instead of cutting them */
.navi{height:auto;min-height:40px}
@media (max-width:920px){.rail .navi{min-height:54px}}
/* D20: long text keeps a readable line on wide screens */
.page p,.learn p,.note div{max-width:75ch}
/* D3: printing from the dark theme prints on white */
@media print{
  :root,:root[data-theme="dark"]{color-scheme:light;
    --paper:#FFFFFF; --paper-2:#F6F4EF; --card:#FFFFFF; --card-2:#FBFAF7; --line:#D6CFC1; --line-2:#C9C1B0; --edge:#8A8676;
    --ink:#0B1220; --ink-2:#3B4453; --ink-3:#5A6170;
    --green:#13773A; --green-2:#0E5E2D; --green-3:#E3F1E7; --on-green:#FFFFFF;
    --ok:#13773A; --ok-bg:#E3F1E7; --warn:#9A4A0B; --warn-bg:#FBEEDB; --bad:#B42318; --bad-bg:#FBE8E6; --info:#1D4E89; --info-bg:#E6EEF8}
  .tw{overflow:visible!important}
}
/* the day strip scrolls inside its row (a flex child only shrinks with min-width:0); sparklines give way */
.daystrip{min-width:0}
.metric .v{min-width:0}.metric .v>*{min-width:0}
svg.sp{max-width:40%;flex-shrink:1}
/* scale photos on a phone: one column that fits, the photo above the figures, buttons wrap */
.scalepics{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.scalepic .row{flex-wrap:wrap}
@media (max-width:420px){.scalepic{flex-direction:column}.scalepic .thumb{width:100%;height:160px}}
/* a list of treated cows, one per line; pills in card headers stay on one line (only to-do rows wrap them) */
.wdlist{margin:6px 0 4px;padding-left:18px}.wdlist li{margin:2px 0}
.st{white-space:nowrap;overflow-wrap:normal}.need .st{white-space:normal;overflow-wrap:anywhere}
/* U11: on a phone a screen's secondary actions sit behind More */
.more-btn{display:none}
@media (max-width:560px){.head .sec,.acts .sec{display:none}.show-more .sec{display:inline-flex!important}.head .more-btn,.acts .more-btn{display:inline-flex}}
/* Cards inside a display:contents wrapper (the cow page's tab panel) are grid items too: full width unless
   they carry a span (zero specificity, so .s4 … .s8 still win). */
:where(.page>.contents>*){grid-column:1/-1}
/* The animal's header: her actions on their own row under the name, never over it; a long name wraps. */
.profile{grid-template-columns:auto minmax(0,1fr)}
.profile .acts{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
.profile h1{overflow-wrap:anywhere}
/* a row of name chips (treated cows) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
a.chipx{text-decoration:none;color:inherit}
/* Pills wrap in lists and cards (a long state never runs out of its box); in a figure card's header they
   stay on one line and the header wraps instead. Long names break rather than spill. */
.st{white-space:normal;overflow-wrap:anywhere}
.metric .st{white-space:normal;overflow-wrap:normal;max-width:100%}
.metric .l{flex-wrap:wrap;row-gap:4px}
.cowcard h2,.cowcard h3,.cowcard b,.who b,.scalepic .who b,.profile h1{overflow-wrap:anywhere}
.btn.big{white-space:normal;overflow-wrap:anywhere;text-align:center}
.ph-cow b,.ph-cow .who b{overflow-wrap:anywhere;min-width:0}
/* the recorder's cow row: her name keeps its room; the figure and buttons go to a second line when they don't fit */
.ph-cow{flex-wrap:wrap;row-gap:8px}
.ph-cow .who{flex:1 1 120px;min-width:120px}
.ph-cow .who b{overflow-wrap:break-word}
.ph-cow>.val,.ph-cow>.btn,.ph-cow>.iconbtn{flex:none}

/* the toast never sits on the "new things need you" pop-up */
body:has(#needs-pop:not([hidden])) .toast{bottom:calc(170px + env(safe-area-inset-bottom))}
/* U16: a wide table on a phone: one card per row, each value with its column's name */
@media (max-width:560px){
  table.t.stackable thead{display:none}
  table.t.stackable,table.t.stackable tbody,table.t.stackable tr,table.t.stackable td{display:block;width:100%}
  table.t.stackable tr{padding:10px 0;border-bottom:1px solid var(--line)}
  table.t.stackable td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border:0;text-align:right}
  table.t.stackable td::before{content:attr(data-label);font-weight:650;color:var(--ink-3);text-align:left;flex:none;max-width:45%}
  table.t.stackable td:first-child{font-weight:700;justify-content:flex-start;text-align:left}
  table.t.stackable td:first-child::before{content:none}
  .tw:has(table.stackable){overflow:visible}
}

/* the camera: its source video stays live but unseen (iPhone Safari stops a hidden one); on a short screen the stage shrinks so the buttons stay in view */
.cam-stage video.cam-src{opacity:0;width:1px;height:1px;inset:auto;pointer-events:none}
@media (max-width:640px),(max-height:760px){.cam-stage{min-height:0}}

/* ============ standards floor (WCAG 2.2 target size, legibility, iOS input zoom) ============
   Text no smaller than 12 px; on touch screens every control is at least 44 px tall (the visible
   chip stays small: transparent top/bottom borders give the finger its room), inputs 16 px so
   iPhone Safari doesn't zoom; on a mouse, 24 px. */
.eyebrow,.prio,.navlbl{font-size:12px}
.navi .n{font-size:12px}
small,.small{font-size:max(12px,.8em)}
table.t th,.a4 th{font-size:max(12px,1em)}
.refchip{font-size:12px}
@media (pointer:coarse){
  table.t input.cell,input.sess-t,#q{min-height:44px!important;font-size:16px!important}
  .who2,a.rowlink,a.need{min-height:44px}
  button.rowlink,.more,.linkbtn,a.chipx,a.refchip{border-top:13px solid transparent;border-bottom:13px solid transparent;background-clip:padding-box}
  button.rowlink,.linkbtn{min-width:44px}
  [data-sp-photo]{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .btn,.seg button,.seg>*{min-height:44px;min-width:44px}
  a.chipx{height:auto;min-height:44px;border-width:10px 0}
  .th-sort{min-width:44px}
  button.pill{min-width:44px}
  details>summary{padding:12px 0}
  .navi .n{min-width:18px;height:18px}
}
@media (pointer:fine){
  button.rowlink,.more,.linkbtn,a.refchip,[data-sp-photo]{display:inline-flex;align-items:center;min-height:24px;min-width:24px}
  .th-sort{min-width:24px}
  details>summary{min-height:24px;display:list-item;padding:3px 0}
}
/* long text never pushes the page sideways: full-width note rows and phone card-tables wrap */
table.t td[colspan]{white-space:normal}
table.t.stackable td{white-space:normal;overflow-wrap:anywhere}
@media (max-width:560px){table.t.stackable td:empty{display:none}}
.hint{overflow-wrap:anywhere}
.acts-cell{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
/* the phone's bottom bar: short names on one line; the Menu sheet lists every screen under its section */
.navi .short{display:none}
@media (max-width:920px){
  .rail .navi .full{display:none}.rail .navi .short{display:inline;white-space:nowrap}
  .rail .navi .n{top:2px;left:calc(50% + 4px);right:auto}
  .navsheet .navlbl{display:block}
  .navsheet .navi .n{right:8px}
}
.navsheet .foot .who{display:flex;flex-direction:column;line-height:1.25}
.navsheet .foot .who .role{font-size:12px;color:var(--navy-dim)}

/* ============ the account button and sheet (like a typical mobile app) ============
   Phone: the logo, top left, opens who you are, sync, my account, switch role, language, theme,
   settings, help and sign out; the top bar keeps only search and the bell. Computer: the name at the
   foot of the side menu opens the same sheet. */
.acct-btn{all:unset;position:relative;display:none;width:44px;height:44px;border-radius:12px;cursor:pointer;flex:none;place-items:center}
.acct-btn:focus-visible{outline:3px solid var(--focus,#4ade80);outline-offset:2px}
.acct-btn img{width:34px;height:34px;border-radius:9px}
.acct-ini{position:absolute;right:-4px;bottom:-4px;min-width:22px;height:22px;padding:0 4px;border-radius:11px;background:var(--green);color:var(--on-green);font:800 12px/22px var(--font);text-align:center;box-shadow:0 0 0 2px var(--card)}
.acct-dot{position:absolute;right:-2px;top:-2px;width:11px;height:11px;border-radius:50%;background:var(--am,#d97706);box-shadow:0 0 0 2px var(--card)}
.acct-dot[data-s="err"]{background:var(--bad)}
.acct-foot{all:unset;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;cursor:pointer;border-radius:12px;padding:4px}
.acct-foot:hover{background:var(--navy-2)}.acct-foot:focus-visible{outline:3px solid var(--focus,#4ade80)}
.acctsheet .in{max-width:560px;margin:0 auto}
/* computer: the account menu opens just above the name at the foot of the side menu */
@media (min-width:921px){
  dialog.acctsheet{position:fixed;inset:auto auto 76px 16px;margin:0;width:380px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 100px);border-radius:18px}
  dialog.acctsheet::backdrop{background:rgba(11,18,32,.25)}
  .acctsheet .grab{display:none}
  .tools .langbtn,.tools #theme-btn{display:none}
}
.acct-head{display:flex;align-items:center;gap:14px;padding:8px 4px 14px}
.acct-head h2{margin:0;font-size:19px;color:var(--navy-ink)}
.acct-head .who span{display:block;font-size:13px;color:var(--navy-dim)}
.me.big{width:52px;height:52px;font-size:18px;flex:none}
.acct-sync{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--navy-2);font-size:14px}
.acct-sync>span:nth-child(2){flex:1;min-width:0}
.acct-sync .dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:none}
.acct-sync[data-s="local"] .dot,.acct-sync[data-s="wait"] .dot{background:var(--am,#d97706)}.acct-sync[data-s="err"] .dot{background:var(--bad)}
.acct-list{display:flex;flex-direction:column;margin-top:10px}
.acct-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 10px;border-radius:12px;cursor:pointer;color:var(--navy-ink)}
.acct-row+.acct-row{border-top:1px solid var(--navy-3)}
.acct-row:hover,.acct-row:focus-visible{background:var(--navy-2)}.acct-row:focus-visible{outline:3px solid var(--focus,#4ade80)}
.acct-row>.ic:first-child{color:var(--navy-dim);flex:none}
.acct-row .acct-l{flex:1;min-width:0;display:flex;flex-direction:column}
.acct-row .acct-l b{font-size:15px}.acct-row .acct-l small{font-size:12.5px;color:var(--navy-dim)}
.acct-row.static{cursor:default}.acct-row.static:hover{background:none}
.acct-row .seg{background:var(--navy-2);border-color:var(--navy-3)}.acct-row .seg button{color:var(--navy-dim);min-height:36px}
.acct-row .seg button[aria-pressed="true"]{background:var(--navy-ink);color:var(--navy)}
.acct-row.danger b{color:#f87171}.acct-row.danger>.ic{color:#f87171}
.acct-ver{text-align:center;margin-top:10px;color:var(--navy-dim)}
@media (max-width:920px){
  .acct-btn{display:grid}
  .tools #sync,.tools .langbtn,.tools #theme-btn{display:none}
  .navsheet .foot{display:none}
}
/* ============ breeding guide (owner course) ============ */
.bg-prose{max-width:38em;font-size:16px;line-height:1.6;display:grid;gap:12px}
.bg-prose p{margin:0}
.bg-prose .tw{margin:4px 0}
.bg-prose th[scope=row]{font-weight:650;text-align:left}
.bg-steps{margin:0;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.5}
.bg-toc ol{margin:0 0 4px;padding-left:22px;display:grid;gap:2px}
.bg-toc .linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;text-align:left}
.bg-toc .linkbtn svg{width:16px;height:16px}
.bg-lesson{scroll-margin-top:72px}
.bg-lesson h2:focus{outline:none}
.bg-q{border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;margin:0;display:grid;gap:6px;min-width:0}
.bg-q legend{font-weight:700;padding:0 4px;font-size:15px;line-height:1.4}
.bg-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 8px;border-radius:10px;cursor:pointer;line-height:1.35}
.bg-opt input{width:20px;height:20px;flex:none;accent-color:var(--green)}
.bg-opt:hover{background:var(--info-bg)}
.bg-why{display:none;margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.bg-q.shown .bg-why{display:block}
.bg-q.shown .bg-opt.right{background:var(--ok-bg);font-weight:650}
.bg-fact .bg-v{font-style:normal;font-size:16px;white-space:nowrap}
.bg-pager{gap:10px;flex-wrap:wrap}
.bg-pager .btn{max-width:100%;white-space:normal;text-align:left}
@media (max-width:560px){.bg-prose{font-size:15.5px}.bg-toc .linkbtn{min-height:44px}}
@media print{
  .bg-lesson,.bg-quiz,.bg-q{break-inside:avoid;page-break-inside:avoid}
  .bg-prose{max-width:none;font-size:11pt}
  .bg-why{display:block}
}
/* a tap is felt: a slight press, no grey flash */
button,a,.btn,.navi,.acct-row,.need{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){
  .btn,.navi,.iconbtn,.acct-row,a.need,.cowcard,.rowlink{transition:transform .08s ease}
  .btn:active,.navi:active,.iconbtn:active,.acct-row:active,a.need:active,.cowcard:active{transform:scale(.97)}
}

/* ============ terms: a small "?" after a word opens its meaning (js/glossary.js) ============ */
.term-end{white-space:nowrap}
.termtip{all:unset;box-sizing:content-box;display:inline-grid;place-items:center;width:17px;height:17px;margin:-4px 0 0 1px;vertical-align:super;border-radius:50%;
  background:var(--paper-2);color:var(--ink-2);font:800 12px/1 var(--font);cursor:pointer;border:4px solid transparent;background-clip:padding-box;position:relative}
.termtip::after{content:"";position:absolute;inset:-10px 0}   /* a finger-tall target around the small mark, never wider than it (nothing sticks out of a card) */
.termtip:hover,.termtip[aria-expanded="true"]{background-color:var(--green);color:var(--on-green)}
.termtip:focus-visible{outline:3px solid var(--focus,#4ade80);outline-offset:1px}
.tipbox{position:absolute;z-index:90;display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:var(--card);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--sh-3);font-size:14px;line-height:1.45}
.tipbox b{font-size:15px}.tipbox .tip-all{align-self:flex-start;color:var(--green);font-weight:700;min-height:32px;display:inline-flex;align-items:center}
dl.glossary{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px 28px;margin:0}
dl.glossary dt{font-weight:750;font-size:15px}dl.glossary dd{margin:3px 0 0;color:var(--ink-2);line-height:1.5;max-width:70ch}
dl.glossary>div{scroll-margin-top:80px}
.a4 .termtip,.a4 .tipbox{display:none}
@media print{.termtip,.tipbox{display:none}}
/* the mating plan: the straw picker goes under the name on a phone */
.plan-row{flex-wrap:wrap;gap:8px 12px}
.plan-sel{flex:1 1 220px;max-width:100%;min-width:0;min-height:44px}
details.plan-more summary{min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--green);cursor:pointer}
/* the guide's decision blocks: make sure / spot / do / stop, worked examples, and cows to act on */
.bg-sec{border-left:4px solid var(--line-2);padding:4px 0 4px 14px;display:grid;gap:6px}
.bg-sec h3{margin:0;font-size:15px;display:flex;align-items:center;gap:8px}
.bg-sec h3 .ic{width:18px;height:18px;flex:none}
.bg-sec .learnlist{margin:0}
.bg-ensure{border-color:var(--info)}.bg-ensure h3 .ic{color:var(--info)}
.bg-spot{border-color:var(--am,#d97706)}.bg-spot h3 .ic{color:var(--am,#d97706)}
.bg-do{border-color:var(--green)}.bg-do h3 .ic{color:var(--green)}
.bg-stop{border-color:var(--bad)}.bg-stop h3 .ic{color:var(--bad)}
.bg-ex{margin:0;border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;background:var(--card-2);display:grid;gap:8px}
.bg-ex figcaption{font-weight:750;display:flex;align-items:center;gap:8px}
.bg-ex figcaption .ic{width:18px;height:18px;flex:none}
.bg-ex dl{margin:0;display:grid;gap:4px}
.bg-ex dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line-2);padding:4px 0}
.bg-ex dt{min-width:0;overflow-wrap:anywhere}
.bg-ex dd{margin:0;font-weight:700;text-align:right;white-space:nowrap}
.bg-ex p{margin:0;font-size:14px;color:var(--ink-2)}
.bg-act{color:var(--bad);font-weight:650}
.bg-cows{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.bg-cow{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:1px;width:100%;min-height:44px;padding:6px 10px;border-radius:10px;background:var(--card-2);cursor:pointer;justify-content:center}
.bg-cow:hover{background:var(--info-bg)}.bg-cow:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.bg-cow b{font-size:14px}.bg-cow span{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.bg-fact .who{min-width:0;flex:1}
@media (max-width:560px){.bg-ex dl div{flex-direction:column;gap:0}.bg-ex dd{text-align:left;white-space:normal}}
@media print{.bg-cow{background:none;padding:2px 0;min-height:0}.bg-ex{break-inside:avoid}}
/* a lesson's tables and worked examples keep to the screen (grid items otherwise grow to their widest content) */
.bg-prose>*,.bg-sec>*,.bg-ex>*{min-width:0}
.bg-prose table.t tbody th{white-space:normal;overflow-wrap:anywhere;text-align:left}
@media (max-width:560px){table.t.stackable th{display:block;width:100%}}
.bg-fact{flex-wrap:wrap}.bg-fact .who{flex:1 1 260px}
/* plain links inside rows and lists (a cow's name, a record): a finger-tall target that moves nothing */
@media (pointer:coarse){
  :where(#page a:not([class])){display:inline-block;padding:12px 0;margin:-12px 0}
  a.who,.vetdesk a.who{min-height:44px}
  #page select,#page textarea,#page input:not([type=checkbox]):not([type=radio]):not([type=range]),dialog select,dialog textarea,dialog input:not([type=checkbox]):not([type=radio]):not([type=range]){font-size:max(16px,1em)}
}
@media (pointer:fine){
  :where(#page a:not([class])){display:inline-block;padding:4px 0;margin:-4px 0}
}
/* printable pages (passport, register, statement, invoice) on a small screen: the paper fits the
   screen and a wide table scrolls inside it; printing still uses true A4 (the print rules) */
@media screen and (max-width:900px){
  .sheet-wrap{padding:0;background:none}
  .a4{width:100%;min-height:0;padding:18px 16px;box-shadow:none;border-radius:14px;gap:5mm}
  .a4 .lh{flex-wrap:wrap;gap:8px}.a4 .lh .doc{text-align:left}
  .a4 .kv,.a4 .kv4,.a4 .two,.a4 .foot{grid-template-columns:1fr 1fr}
  .a4 .idrow{grid-template-columns:1fr}
  .a4 table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* a statement on a phone: date, details, charged, paid, balance; litres and price under each delivery;
   the closing balance straight after the summary (paper keeps every column) */
.a4 .d-short,.a4 .lp-sub{display:none}
@media screen and (max-width:600px){
  .a4 table.stmt{display:table;width:100%;table-layout:fixed;font-size:13px}.a4 table.stmt td,.a4 table.stmt th{padding:1.8mm 1mm;overflow-wrap:anywhere;letter-spacing:0}
  .a4 table.stmt th:nth-child(1){width:17%}.a4 table.stmt th:nth-child(2){width:29%}.a4 table.stmt th:nth-child(5),.a4 table.stmt th:nth-child(7){width:19%}.a4 table.stmt th:nth-child(6){width:16%}
  .a4 table.stmt th{text-transform:none;font-size:12px;overflow-wrap:normal;word-break:keep-all;hyphens:none}
  .a4 table.stmt .lp{display:none}.a4 .d-long{display:none}.a4 .d-short{display:inline;white-space:nowrap}
  .a4 .lp-sub{display:block;color:#555;font-size:12px}
  .a4:has(table.stmt) .status-box{order:1}.a4:has(table.stmt) table.stmt{order:2}.a4:has(table.stmt) .foot{order:3}
}
/* audit follow-ups: thumbnail labels readable on their tint; the search key hint at 12 px; a very short name still a finger wide */
.thumb .hint,.thumb-open .hint,button[data-open] .hint{color:var(--ink-2)}
.find kbd{font-size:12px}
@media (pointer:coarse){:where(#page a:not([class])){min-width:44px}}
.fixed-act{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border-radius:12px;background:var(--green-3);font-size:16px}.fixed-act .ic{color:var(--green)}
.fixed-val{margin:0;padding:10px 14px;border-radius:12px;background:var(--paper-2);min-height:44px;display:flex;align-items:center}

/* ============ breeding course: course home, module tabs, one lesson at a time ============ */
.bg-h2{font-size:18px;margin:8px 0 -4px;grid-column:1/-1}
.bg-hero .body{display:grid;gap:14px;padding:22px}
.bg-hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bg-pct{display:block;font-size:44px;line-height:1.05;letter-spacing:-.02em}
.bg-next{margin:0;color:var(--ink-2);font-size:14px}
.bg-bar{height:8px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.bg-bar i{display:block;height:100%;border-radius:99px;background:var(--green);min-width:0;transition:width .3s}
ol.bg-mods{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px}
.bg-mod{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border:1px solid var(--line-2);border-radius:18px;background:var(--card);color:inherit;text-decoration:none;height:100%;box-sizing:border-box}
.bg-mod:hover{border-color:var(--green)}.bg-mod:focus-visible{outline:3px solid var(--focus,#4ade80);outline-offset:2px}
.bg-num{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);font-weight:800;font-size:15px}
.bg-mod.done .bg-num{background:var(--green);color:var(--on-green)}.bg-num .ic{width:18px;height:18px}
.bg-mod-b{flex:1;min-width:0;display:grid;gap:6px}
.bg-mod-b>b{font-size:16px;line-height:1.3}
.bg-sum{color:var(--ink-2);font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bg-meta{font-size:12.5px;color:var(--ink-3)}
.bg-mod>.st{flex:none}
.bg-mhead .sub{max-width:62ch}.bg-mhead .bg-bar{margin-top:12px;max-width:520px}
.bg-tabs{grid-column:1/-1;display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line-2);scrollbar-width:none}
.bg-tabs a{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;color:var(--ink-2);text-decoration:none;font-weight:650;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.bg-tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--green)}
.bg-count{font-size:12px;font-weight:750;padding:2px 8px;border-radius:99px;background:var(--paper-2);color:var(--ink-2)}
.bg-learn{grid-column:1/-1;display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.bg-side{position:sticky;top:84px}
.bg-toc-m summary{list-style:none;cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;padding:0 4px}
.bg-toc-m summary::-webkit-details-marker{display:none}
ol.bg-toc2{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bg-toc2 a{display:flex;align-items:flex-start;gap:10px;padding:10px;border-radius:12px;color:inherit;text-decoration:none;line-height:1.35;font-size:14px}
.bg-toc2 a:hover{background:var(--paper-2)}.bg-toc2 a[aria-current="step"]{background:var(--green-3);font-weight:700}
.bg-toc2 small{display:block;color:var(--ink-3);font-weight:400;font-size:12px}
.bg-dot{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;border:2px solid var(--line-2)}
.bg-dot.on{background:var(--green);border-color:var(--green);color:var(--on-green)}.bg-dot .ic{width:14px;height:14px}
.bg-lesson .body{padding:26px 28px;display:grid;gap:14px}
.bg-lt{font-size:24px;line-height:1.25;margin:0;letter-spacing:-.01em}
.bg-lesson .bg-prose{max-width:66ch}
.bg-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:16px;border-top:1px solid var(--line-2)}
.bg-when{display:flex;align-items:center;gap:6px;margin:0}
details.bg-more summary{min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--green);cursor:pointer}
.print-only{display:none}
@media (max-width:920px){
  .bg-learn{grid-template-columns:1fr;gap:12px}
  .bg-side{position:static}
  .bg-toc-m{border:1px solid var(--line-2);border-radius:14px;padding:4px 8px;background:var(--card)}
  .bg-lesson .body{padding:20px 16px}
  .bg-lt{font-size:21px}
  .bg-pct{font-size:36px}
  .bg-foot .btn{flex:1 1 auto}
}
@media print{
  #page[data-view="guide"] > *:not(.bg-mhead):not(.bg-printall){display:none!important}
  .print-only{display:block}.bg-printall section{break-inside:avoid-page;margin-top:8mm}
}
a.btn,a.btn:hover{text-decoration:none}
.bg-tabs a{margin:0 0 -1px;flex:none}.bg-toc2 a{margin:0}
#page .term,#page .term-end,dialog .term,dialog .term-end{display:inline;font:inherit;color:inherit}   /* a marked term stays part of its sentence (row styles make spans blocks) */
.scalepic .thumb-open .hint{color:#E7ECF3}   /* the scale photo tile is always dark */
/* a long label wraps inside its button instead of pushing the page sideways */
.btn{max-width:100%}
#page .btn,dialog .btn{white-space:normal;text-align:center;line-height:1.25}
#page .btn:not(.sm):not(.big),dialog .btn:not(.sm):not(.big){height:auto;min-height:42px;padding-block:8px}
/* figure cards: label, figure, then status + target at the foot, so a row of cards lines up */
.metric .l{display:block}
.metric .t{margin-top:auto;flex-wrap:wrap;row-gap:6px}
.metric .t>span{min-width:0}
/* module cards: no empty bar before you start; status in the meta line; the title keeps the width */
.bg-mod{padding:16px 18px 18px}
.bg-state{color:var(--info);font-weight:750}.bg-state.done{color:var(--ok,var(--green))}
.bg-mod .bg-bar{height:6px;margin-top:2px}
.bg-mod:hover{border-color:var(--line-2);background:var(--card-2,var(--card))}
.metric .t{flex-direction:column;align-items:flex-start;gap:6px}
@media (max-width:560px){.metrics .metric .l{min-height:2.7em}}   /* two cards side by side: the figures line up even when one label wraps */
/* the lesson card hugs its text; on a wide screen the room beside it holds the module at a glance */
.bg-learn{grid-template-columns:240px minmax(0,760px);justify-content:start}
.bg-lesson{max-width:760px}.bg-lesson .bg-prose{max-width:none}
.bg-aside{display:none}
@media (min-width:1400px){
  .bg-learn{grid-template-columns:240px minmax(0,760px) minmax(240px,320px)}
  .bg-aside{display:grid;gap:14px;position:sticky;top:84px;align-self:start}
}
.bg-aside h3{margin:0 0 10px;font-size:15px}
.bg-kn{margin:0;display:grid;gap:8px}.bg-kn div{display:grid;gap:2px}
.bg-kn dt{font-size:12.5px;color:var(--ink-3)}.bg-kn dd{margin:0;font-weight:700;font-size:14px}
.bg-farm-n{margin:0 0 8px;font-size:14px}.bg-farm-n .fig{font-size:22px}
.bg-more-l{display:inline-flex;align-items:center;min-height:32px;color:var(--green);font-weight:700;font-size:14px}
@media (max-width:920px){.bg-learn{grid-template-columns:1fr}.bg-lesson{max-width:none}}
/* stray space and crushed columns */
/* a table never squeezes a name to one letter a line: names break between words, the first column keeps its room */
table.t .who b,table.t .who span{overflow-wrap:normal;word-break:normal}
table.t td:first-child{min-width:170px}
table.t td:last-child{min-width:120px}
/* figure cards grow to 300 px at most, never stretched across a row (two to a row still on a phone) */
@media (min-width:561px){.metrics{grid-template-columns:repeat(auto-fit,minmax(170px,300px))}}
/* settings pages read at a form's width on a wide screen */
#page[data-view="settings"]>*{max-width:780px;width:100%}
table.t td.dim:last-child{min-width:240px}
table.t .r,table.t .fig,table.t td.r,table.t th.r{white-space:nowrap;overflow-wrap:normal}   /* a figure in a table never breaks across lines */
/* phones: tables shown as cards — rows keep an inner margin, and a cell's content stays together opposite its label */
@media (max-width:560px){
  table.t.stackable tr{padding:12px 16px}
  table.t.stackable td{justify-content:flex-start;flex-wrap:wrap;column-gap:8px}
  table.t.stackable td::before{margin-right:auto}
  table.t.stackable td>*{text-align:right}
  /* a figure card alone on its row uses the width: label on top, the figure left, status and target right */
  .metrics>.metric:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:end}
  .metrics>.metric:last-child:nth-child(odd) .l{grid-column:1/-1;min-height:0}
  .metrics>.metric:last-child:nth-child(odd) .t{align-items:flex-end;text-align:right;margin-top:0}
}
@media (max-width:560px){
  table.t.stackable td{justify-content:flex-end}            /* a value that wraps stays on the right, under the first */
  table.t.stackable td:first-child{justify-content:flex-start}
  table.t.stackable td:first-child>*{text-align:left}
}
@media (max-width:560px){table.t.stackable .rowlink{border-width:0;min-width:0;padding:0;text-align:right}table.t.stackable td:first-child .rowlink{text-align:left}}   /* the whole card row is the tap target here */
@media (max-width:560px){.metrics{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}   /* two to a row even inside another card */

/* ---------- Owner & GM: decisions, the month's budget, the GM's report (js/views/brief.js, decisions.js, budget.js, gmreport.js) ---------- */
.decide{display:grid;gap:8px;padding:14px 0 14px 14px;border-top:1px solid var(--line);border-left:4px solid var(--warn);margin-left:-2px}
.decide:first-child{border-top:0}
.decide.done{border-left-color:var(--line-2)}
.decide.ok{border-left-color:var(--ok)} .decide.bad{border-left-color:var(--bad)} .decide.q{border-left-color:var(--info)}
.decide-k{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.decide h3{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.decide-rec{font-size:14px;background:var(--paper-2);border-radius:var(--r-s);padding:9px 11px;color:var(--ink-2);overflow-wrap:anywhere}
.decide-rec b{color:var(--ink)}
.decide .log{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}
.decide .log li{overflow-wrap:anywhere}
.decide .log b{color:var(--ink)}
.budget{display:grid;gap:12px}
.bline{display:grid;gap:5px;font-size:13px}
.bline-h{display:flex;justify-content:space-between;gap:10px;color:var(--ink-2)}
.bline-h b{color:var(--ink)}
.track{position:relative;height:8px;border-radius:4px;background:var(--paper-2)}
.track>i{display:block;height:100%;border-radius:4px;background:var(--green)}
.track>i.warn{background:var(--am)} .track>i.bad{background:var(--bad)}
.track>.pace{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:1px;background:var(--ink)}
.gm-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;margin:0;font-size:14px}
.gm-kv dt{color:var(--ink-2)} .gm-kv dd{margin:0;text-align:right;font-weight:700}
.gmnote{display:grid;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.gmnote b{color:var(--ink)}
.plan-t td.fig,.plan-t th.r{text-align:right}
.dial{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.dial .step{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:grid;gap:4px;font-size:14px;color:var(--ink-2)}
.dial .step b{color:var(--ink);font-size:15px}
.dial .step.on{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.card .body>.gmnote:first-child{border-top:0;margin-top:0;padding-top:0}
/* Farm reports (js/views/farmreport.js): the period tabs and arrows above the A4 page */
.rp-bar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between}
.rp-when{font-size:15px;min-width:0;overflow-wrap:anywhere;text-align:center}
.ic.flip{transform:scaleX(-1)}
.a4 .rp-sec{break-inside:avoid;display:grid;gap:2.5mm}
.a4 .rp-list{margin:0;padding-left:5mm;display:grid;gap:1.2mm;font-size:9pt}
.a4 .rp-note{border-left:2px solid #13773A;padding:1mm 0 1mm 4mm;display:grid;gap:1.5mm}
.a4 .kv4 div b small{font-weight:400;color:#666}
/* Calf feeding (Settings): the programme's steps, age and litres side by side */
.cf-steps{display:grid;gap:8px;max-width:360px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
.cf-head{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* Roles & responsibilities (js/views/jobs.js): your job first, as a document; the team as cards that open */
.jd-me{padding:22px 24px;display:grid;gap:20px}
.jd-top{display:flex;gap:16px;align-items:flex-start}
.jd-top h2{font-size:26px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin:2px 0 6px}
.jd-lead{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:60ch;margin:0}
.jd-tile{flex:none;width:52px;height:52px;border-radius:var(--r);background:var(--green-3);color:var(--green-2);display:grid;place-items:center}
.jd-tile .ic{width:26px;height:26px}
.jd-tile.sm{width:42px;height:42px;border-radius:12px}.jd-tile.sm .ic{width:22px;height:22px}
.jd-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.jd-isco{font-size:12px;color:var(--ink-3)}
.jd-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
.jd-col{display:grid;gap:20px;align-content:start}
.jd-cols h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--ink);margin:0 0 10px}
.jd-cols h3 .ic{width:18px;height:18px;color:var(--green)}
.jd-ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.jd-ul li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start}
.jd-ul li .ic{width:18px;height:18px;margin-top:2px}
.jd-ul.ok .ic{color:var(--ok)} .jd-ul.no .ic{color:var(--bad)}
.jd-ul.plain li{grid-template-columns:8px minmax(0,1fr)}
.jd-ul.plain li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);margin-top:9px}
.jd-note{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.jd-note p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.jd-note.law{background:var(--info-bg);border-color:transparent}
.jd-note.law h3 .ic,.jd-note.law .jd-ul.plain li::before{color:var(--info);background:var(--info)}
.jd-note.law h3 .ic{background:none}
.jd-row>summary{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;list-style:none;min-height:64px}
.jd-row>summary::-webkit-details-marker{display:none}
.jd-row>summary::marker{content:""}
.jd-h{flex:1;min-width:0;display:grid;gap:3px}
.jd-h b{font-size:16px}
.jd-h span{font-size:14px;line-height:1.45;color:var(--ink-2)}
.jd-chev{flex:none;color:var(--ink-3);transition:transform .15s}
.jd-row[open] .jd-chev{transform:rotate(90deg)}
.jd-row>summary:hover .jd-h b{color:var(--green)}
.jd-in{padding:0 20px 20px;display:grid;gap:18px;border-top:1px solid var(--line);padding-top:16px;margin:0 0 0}
.jd-with{display:grid;gap:14px}
.jd-w{display:flex;gap:12px;align-items:flex-start}
.jd-w>div{display:grid;gap:4px;min-width:0}.jd-w>div>span:not(.st){font-size:14px;line-height:1.45;color:var(--ink-2)}.jd-w .st{justify-self:start}
.jd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.jd-cell{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--card-2)}
.jd-cell b{font-size:15px}.jd-cell p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.jd-foot{margin:12px 0 0}
@media (max-width:760px){.jd-cols{grid-template-columns:minmax(0,1fr)}.jd-me{padding:18px 16px}.jd-top h2{font-size:22px}.jd-lead{font-size:16px}.jd-row>summary{padding:14px 16px}.jd-in{padding:14px 16px 18px}}
@media (prefers-reduced-motion:reduce){.jd-chev{transition:none}}

/* ---------- herd advice (js/views/advice.js) ----------
   One piece of advice: the animal, what to do and a level stripe (colour plus the status word beside the title,
   never colour alone), the reasons as a short list, the note, then the actions. */
.adv{display:grid;gap:8px;padding:14px 0 14px 14px;border-top:1px solid var(--line);border-left:4px solid var(--line-2);margin-left:-2px}
.adv:first-child{border-top:0}
.adv.bad{border-left-color:var(--bad)} .adv.warn{border-left-color:var(--warn)} .adv.ok{border-left-color:var(--ok)}
.adv-h{display:flex;align-items:center;gap:12px;min-width:0}
.adv-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;flex:1;min-width:0}
.adv-t b{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.adv-v{font-weight:700;white-space:nowrap;color:var(--ink)}
.adv-r{margin:0;padding-left:20px;color:var(--ink-2);display:grid;gap:2px}
.adv-n{margin:0;color:var(--ink-3)}
.adv .row{gap:8px;flex-wrap:wrap}
.adv-aside summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.adv-aside .body p{margin:6px 0;color:var(--ink-2)}
.adv-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
@media (max-width:480px){.adv-h{flex-wrap:wrap;align-items:flex-start}.adv-v{flex-basis:100%;padding-left:52px}}
/* the Milker's language toggle (Kiswahili is theirs only, i18n.js): on their top bar at every size, as the
   language code, so it is one tap away; nobody else has it */
.top .tools .langbtn.on{display:inline-flex}
.top .tools .langbtn.on .lname{display:none}.top .tools .langbtn.on .lcode{display:inline}