/* Plate — onecore house system, matched to MyHealth and Steward.
   Warm paper, serif headings, one deep primary (onecore navy), red as punctuation only.
   18px base, 48px+ touch targets, tabular numbers, visible focus, no hover-only meaning. */
:root{
  --red:#D3121E; --red-100:#FCE8EB;
  --pri:#042B60; --pri-700:#0B4A9A; --pri-100:#E1E9F5; --pri-50:#F1F5FB;
  --ink:#0C1B2A; --paper:#F7F5F0; --card:#FFFFFF;
  --n100:#EFEDE7; --n200:#E3E1DA; --n300:#CFCCC3; --n500:#5B6470; --n700:#38404A;
  --green:#1D6B3A; --green-100:#E3F2E8; --amber:#8A5A00; --amber-100:#FFF3D6;
  --radius:10px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(12,27,42,.06),0 4px 14px rgba(12,27,42,.06);
  --shadow-up:0 2px 4px rgba(12,27,42,.08),0 10px 24px rgba(12,27,42,.10);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --wrap:960px; --bar:64px;
}
*{box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 56px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;font-variant-numeric:tabular-nums}
a{color:var(--pri-700)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,label.btn:focus-within{outline:3px solid var(--pri-700);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);color:var(--pri);line-height:1.2;margin:0 0 .45em}
h1{font-size:1.9rem} h2{font-size:1.35rem;margin-top:1.4em} h3{font-size:1.08rem}
p{margin:0 0 .7em}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px;z-index:9}

/* ---------- top bar + tabs ---------- */
.top{position:sticky;top:0;z-index:6;background:var(--pri);color:#fff;display:flex;align-items:center;gap:12px;
  min-height:var(--bar);padding:0 max(18px,calc((100vw - var(--wrap))/2 + 18px))}
.top .brand{color:#fff;text-decoration:none;font-family:var(--serif);font-size:1.3rem;font-weight:700;display:flex;align-items:center;gap:10px}
.top .brand .dot{width:12px;height:12px;border-radius:50%;background:var(--red);display:inline-block}
.top .brand small{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-left:2px}
.top select{font:inherit;font-size:.85rem;font-weight:600;background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.5);
  border-radius:var(--radius);padding:8px 10px;min-height:44px;max-width:44vw}
.top select option{color:var(--ink)}
.top .sp{flex:1}
.top a.lnk{color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;border:1.5px solid rgba(255,255,255,.5);border-radius:var(--radius);
  padding:6px 12px 6px 6px;min-height:44px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.top a.lnk:hover{background:rgba(255,255,255,.12)}
.nav{position:sticky;top:var(--bar);z-index:5;display:flex;gap:4px;overflow-x:auto;background:var(--card);border-bottom:1px solid var(--n200);
  padding:0 max(14px,calc((100vw - var(--wrap))/2 + 14px));scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;text-decoration:none;color:var(--n700);font-weight:600;font-size:.9rem;padding:14px 12px 12px;border-bottom:3px solid transparent;min-height:48px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--pri)}
.nav a.on{color:var(--pri);border-bottom-color:var(--red)}

main{max-width:var(--wrap);margin:0 auto;padding:22px 18px 40px}
footer.foot{max-width:var(--wrap);margin:0 auto;padding:18px 18px 34px;border-top:1px solid var(--n200);font-size:.78rem;color:var(--n500)}
footer.foot p{margin:0 0 4px}

/* ---------- type helpers ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--n500);margin:0 0 6px}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--red);border-radius:2px}
.sub{color:var(--n700);margin:.1em 0 1em}
.muted{color:var(--n500)}
.small{font-size:.86rem}

/* ---------- hero (home + animal) ---------- */
.hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:2px 0 18px}
.hero h1{margin:0 0 .15em}
.hero .sub{margin:0}
.hero .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.stat{background:var(--card);border:1px solid var(--n200);border-radius:var(--radius-lg);padding:12px 14px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);display:block}
a.stat:hover{border-color:var(--pri-700)}
.stat .v{font-family:var(--serif);font-size:1.7rem;color:var(--pri);font-weight:700;line-height:1.1}
.stat .l{font-size:.78rem;font-weight:600;color:var(--n700)}
.stat.r .v{color:var(--red)} .stat.y .v{color:var(--amber)}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--n200);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow);margin:0 0 14px;overflow-x:auto}
.card > h3:first-child,.card .row > h3{margin-bottom:.3em}
details.card summary{cursor:pointer;font-weight:700;color:var(--pri);min-height:32px;list-style-position:inside}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row .sp,.sp{flex:1}
.row h2{margin:0}
.secthead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 10px}
.secthead h2{margin:0}

/* animal grid — photo-forward cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:16px}
.card.animal{display:flex;flex-direction:column;padding:0;overflow:hidden;text-decoration:none;color:var(--ink);margin:0;transition:border-color .15s,box-shadow .15s,transform .05s}
.card.animal:hover{border-color:var(--pri-700);box-shadow:var(--shadow-up)}
.card.animal:active{transform:translateY(1px)}
.card.animal .ic{width:100%;aspect-ratio:4/3;height:auto;border-radius:0;background:var(--pri-100);display:flex;align-items:center;justify-content:center;font-size:3.2rem;object-fit:cover;flex:none}
.card.animal > span:last-child{display:block;padding:12px 14px 14px}
.card.animal b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--pri);margin-bottom:2px}
.card.animal .badge{display:inline-block;margin-top:6px}

/* ---------- buttons ---------- */
.btn{font:inherit;font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;
  border-radius:var(--radius);border:2px solid var(--pri);background:var(--pri);color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{background:var(--pri-700);border-color:var(--pri-700)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--card);color:var(--pri)}
.btn.ghost:hover{background:var(--pri-50)}
.btn.danger{background:var(--card);color:var(--red);border-color:var(--red)}
.btn.danger:hover{background:var(--red-100)}
.btn.sm{min-height:38px;padding:0 12px;font-size:.84rem;font-weight:600}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
label.btn{position:relative}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

/* ---------- forms ---------- */
label.lbl{display:block;font-weight:700;color:var(--pri);font-size:.9rem;margin:14px 0 5px}
.inp,select.inp,textarea.inp{width:100%;font:inherit;font-size:1rem;padding:11px 12px;border:2px solid var(--n200);border-radius:var(--radius);background:#fff;color:var(--ink);min-height:48px}
textarea.inp{min-height:96px}
.inp:focus{outline:none;border-color:var(--pri-700);box-shadow:0 0 0 3px var(--pri-100)}
input[type=file].inp{padding:9px;font-size:.88rem}
.chk{display:flex;gap:10px;align-items:center;margin:12px 0;font-weight:600;min-height:40px;cursor:pointer}
.chk input{width:22px;height:22px;accent-color:var(--pri)}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 12px;background:var(--pri-50);border-radius:var(--radius);padding:4px 12px}
.picks .chk{margin:6px 0}

/* ---------- tags (dot style, MyHealth) ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--pri-100);color:var(--pri);white-space:nowrap;vertical-align:middle}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.r{background:var(--red-100);color:var(--red)} .chip.y{background:var(--amber-100);color:var(--amber)}
.chip.g{background:var(--green-100);color:var(--green)} .chip.n{background:var(--n100);color:var(--n700)}

/* ---------- due rows ---------- */
.due{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--n200);flex-wrap:wrap}
.due:last-child{border-bottom:0}
.due .d{min-width:96px;color:var(--n700);font-size:.86rem;font-weight:600}
.due .w{flex:1;min-width:150px}
.due .w a{font-weight:700;text-decoration:none}

/* ---------- entries ---------- */
.entry{border-left:5px solid var(--n200)}
.entry.med{border-left-color:var(--pri-700)}
.entry .hd{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.entry h3{margin:0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;font-size:.92rem;margin:8px 0}
.kv dt{color:var(--n500)}.kv dd{margin:0}
.kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.kinds a{display:flex;gap:12px;align-items:center;padding:14px;background:var(--card);border:1.5px solid var(--n200);border-radius:var(--radius-lg);
  text-decoration:none;color:var(--ink);font-weight:600;box-shadow:var(--shadow);min-height:64px}
.kinds a:hover{border-color:var(--pri-700)}
.kinds a span:first-child{flex:none;width:40px;height:40px;border-radius:12px;background:var(--pri-100);display:grid;place-items:center;font-size:1.2rem}
.files a{margin-right:12px}

/* ---------- messages ---------- */
.warn{border-left:6px solid var(--amber);background:var(--amber-100);border-radius:var(--radius);padding:12px 16px;margin:0 0 14px}
.warn.alert{border-left-color:var(--red);background:var(--red-100)}
.err{border-left:6px solid var(--red);background:var(--red-100);color:var(--ink);border-radius:var(--radius);padding:12px 16px;margin:0 0 12px}
.okmsg{border-left:6px solid var(--green);background:var(--green-100);border-radius:var(--radius);padding:12px 16px;margin:0 0 14px}
.empty{background:var(--card);border:2px dashed var(--n300);border-radius:var(--radius-lg);padding:26px 20px;text-align:center;color:var(--n700);box-shadow:none}
.empty h3{color:var(--pri)}

/* ---------- tables ---------- */
table.t{width:100%;border-collapse:collapse;font-size:.9rem}
table.t th,table.t td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--n200);vertical-align:middle}
table.t th{color:var(--n700);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}

/* ---------- photos & avatars ---------- */
img.ic{object-fit:cover;padding:0}
.ahead{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pphoto{width:132px;height:132px;border-radius:var(--radius-lg);object-fit:cover;background:var(--pri-100);flex:none;box-shadow:var(--shadow);border:3px solid #fff}
.pphoto.ph{display:flex;align-items:center;justify-content:center;font-size:3.4rem}
.cphoto{float:right;width:110px;height:110px;object-fit:cover;border-radius:10px;margin:0 0 8px 12px}
.av{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--pri-100);color:var(--pri);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex:none}
.av.lg{width:72px;height:72px;font-size:1.4rem}
.av.sm{width:30px;height:30px;font-size:.72rem;background:#fff}
.who{display:flex;gap:10px;align-items:center}

/* ---------- misc ---------- */
.linkbox{word-break:break-all;background:var(--pri-50);border:1px solid var(--n200);border-radius:var(--radius);padding:10px 12px;font-family:ui-monospace,Menlo,monospace;font-size:.84rem}
.qr{max-width:220px;background:#fff;padding:8px;border-radius:8px;border:1px solid var(--n200)}
.qr svg{width:100%;height:auto}
pre.codes{font-size:1.1rem;line-height:1.8;background:var(--pri-50);padding:12px 16px;border-radius:var(--radius)}

/* care card */
.ecard{background:#fff;border:2px solid var(--pri);border-radius:var(--radius-lg);padding:18px 20px;max-width:600px;box-shadow:var(--shadow)}
.ecard h1{font-size:1.5rem}
.ecard h3{margin:14px 0 4px;font-family:var(--sans);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--pri)}
.ecard ul{margin:0;padding-left:20px}

/* sign-in pages */
.center{max-width:440px;margin:7vh auto;padding:0 16px}
.center .card{padding:28px 26px}
.logo{display:flex;align-items:center;gap:10px;color:var(--pri);font-family:var(--serif);font-weight:700;font-size:1.5rem;margin-bottom:8px}
.logo img{width:34px;height:34px}

/* loading */
.skeleton span{display:block;height:22px;margin:12px 0;border-radius:6px;background:linear-gradient(90deg,var(--n100),var(--n200),var(--n100));background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* small screens */
@media (max-width:520px){
  html{font-size:17px}
  h1{font-size:1.6rem}
  .top .brand small{display:none}
  .top a.lnk span.t{display:none}
  .top a.lnk{padding:6px}
  .statgrid{gap:8px}.stat{padding:10px}.stat .v{font-size:1.4rem}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card.animal .ic{font-size:2.4rem}
  .pphoto{width:104px;height:104px}
  .due .d{min-width:0;width:100%}
  .card{padding:16px}
}

/* print */
.print-only{display:none}
@media print{
  html{font-size:12pt} body{background:#fff}
  .top,.nav,.actions,.noprint,.skip{display:none!important}
  main{padding:0;max-width:none}.print-only{display:block}
  .card,.ecard,.stat{box-shadow:none;border:1px solid #bbb;break-inside:avoid}
  a{color:var(--ink);text-decoration:none}
  .chip{border:1px solid #999}
}
.photorow{margin-top:10px}
.due.usual{flex-wrap:nowrap}
.due.usual .w{min-width:0}
.due.usual .btn{flex:none}
@media (max-width:520px){.hero{flex-wrap:nowrap;align-items:flex-start;gap:14px}.hero .pphoto{width:92px;height:92px}.hero .pphoto.ph{font-size:2.4rem}}

/* ================= Plate additions ================= */
/* grade ring + grade chips */
.ring{width:88px;height:88px;flex:none}
.ring circle{fill:none;stroke-width:9}
.ring .bg{stroke:var(--n200)}
.ring .fg{stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.ring text{font-family:var(--serif);font-weight:700;fill:var(--pri);text-anchor:middle;dominant-baseline:central}
.ring .g{font-size:30px}.ring .n{font-size:11px;fill:var(--n500);font-family:var(--sans)}
.gA{stroke:#1D6B3A;fill:#1D6B3A}.gB{stroke:#3E8A3A;fill:#3E8A3A}.gC{stroke:#B07A00;fill:#B07A00}.gD{stroke:#C4561A;fill:#C4561A}.gF{stroke:var(--red);fill:var(--red)}
.grade{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;border-radius:8px;font-weight:800;font-family:var(--serif);font-size:1rem;color:#fff;padding:0 6px}
.grade.A{background:#1D6B3A}.grade.B{background:#3E8A3A}.grade.C{background:#B07A00}.grade.D{background:#C4561A}.grade.F{background:var(--red)}.grade.none{background:var(--n300)}

/* bars (SVG so no inline styles are needed) */
svg.bar{display:block;width:100%;height:10px;border-radius:5px;overflow:hidden}
svg.bar .bg{fill:var(--n100)} svg.bar .ok{fill:#2F7D45} svg.bar .mid{fill:#C99000} svg.bar .low{fill:var(--red)} svg.bar .tick{fill:var(--ink);opacity:.55}
.cat{display:grid;grid-template-columns:minmax(120px,170px) 1fr 42px;gap:4px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--n200)}
.cat:last-child{border-bottom:0}
.cat .nm{font-weight:700;font-size:.9rem;color:var(--pri)}
.cat .sc{text-align:right;font-weight:800}
.cat .why{grid-column:1/-1;font-size:.8rem;color:var(--n500);margin-top:-2px}
.trow{display:grid;grid-template-columns:minmax(110px,150px) 1fr auto;gap:4px 12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--n200);font-size:.9rem}
.trow:last-child{border-bottom:0}
.trow .v{font-weight:700;white-space:nowrap}

/* meals list */
.meal{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--n200);text-decoration:none;color:var(--ink)}
.meal:last-child{border-bottom:0}
.meal:hover .t b{text-decoration:underline}
.meal .tm{width:64px;flex:none;font-size:.8rem;color:var(--n500);font-weight:600}
.ty{text-transform:capitalize}
.meal .t{flex:1;min-width:0}
.meal .t b{display:block;color:var(--pri);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meal .t span{font-size:.82rem;color:var(--n500)}
.daynav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.daynav input{max-width:180px}

/* log editor */
.voice{display:flex;gap:8px;align-items:stretch}
.voice textarea{flex:1}
.mic{min-width:56px;padding:0 12px}
.mic.on{background:var(--red);border-color:var(--red);color:#fff}
.item{border:1.5px solid var(--n200);border-radius:var(--radius);padding:10px 12px;margin:0 0 10px;background:#fff}
.item .hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.item .hd input.nm{flex:1;min-width:160px;font-weight:700}
.item .g{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.item .g input{width:110px}
.item .src{font-size:.78rem;color:var(--n500);margin-top:6px}
.item .nut{font-size:.84rem;color:var(--n700);margin-top:4px}
.results{border:1px solid var(--n200);border-radius:var(--radius);margin:8px 0;max-height:360px;overflow:auto;background:#fff}
.results button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--n200);padding:10px 12px;font:inherit;font-size:.88rem;cursor:pointer;min-height:48px}
.results button:hover,.results button:focus-visible{background:var(--pri-50)}
.results button small{display:block;color:var(--n500)}
.flag{border-left:6px solid var(--n300);background:var(--n100);border-radius:var(--radius);padding:9px 14px;margin:0 0 8px;font-size:.9rem}
.flag.alert{border-left-color:var(--red);background:var(--red-100)}
.flag.warn{border-left-color:var(--amber);background:var(--amber-100)}
.flag.info{border-left-color:var(--pri-700);background:var(--pri-50)}
.sticky-pv{position:sticky;top:calc(var(--bar) + 56px)}
.cols{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
.cols > div{min-width:0}
.condgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 14px}
.weights .cat{grid-template-columns:minmax(120px,170px) 1fr 70px}
.weights input{min-height:40px;padding:6px 8px}
dl.kv.wide{grid-template-columns:max-content 1fr}
.spark{width:100%;height:46px;display:block}
.spark polyline{fill:none;stroke:var(--pri-700);stroke-width:2}
.spark circle{fill:var(--pri)}
@media (max-width:780px){.cols{grid-template-columns:1fr}.sticky-pv{position:static}}
@media (max-width:520px){.cat{grid-template-columns:110px 1fr 36px}.trow{grid-template-columns:96px 1fr auto}.meal .tm{width:52px}.ring{width:72px;height:72px}}