/* ============================================================
   Dog Calorie Calculator — single stylesheet, no dependencies
   ============================================================ */

:root{
  --ink:#10171b;
  --ink-2:#48555c;
  --ink-3:#7b878e;
  --paper:#fbfaf8;
  --card:#ffffff;
  --line:#e4ded5;
  --line-2:#efeae2;
  --primary:#0f5b57;
  --primary-tint:#eaf3f2;
  --accent:#c8481a;
  --accent-tint:#fdefe8;
  --warn:#8a4b00;
  --warn-tint:#fdf3e2;
  --ok:#0f5b57;
  --r:14px;
  --r-sm:9px;
  --shadow:0 1px 2px rgba(16,23,27,.05), 0 8px 24px -16px rgba(16,23,27,.18);
  --mono:ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dur:140ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}

.wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 24px }

a{ color:var(--primary); text-decoration:none; border-bottom:1px solid rgba(15,91,87,.28) }
a:hover{ border-bottom-color:var(--primary) }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:10px 16px; z-index:99; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0 }

/* ---------------- top bar ---------------- */
.topbar{ border-bottom:1px solid var(--line); background:rgba(251,250,248,.9); backdrop-filter:saturate(180%) blur(8px); position:sticky; top:0; z-index:20 }
.topbar-in{ display:flex; align-items:center; justify-content:space-between; height:58px }
.brand{ font-weight:640; font-size:15px; letter-spacing:-.01em }
.topnav{ display:flex; gap:22px }
.topnav a{ font-size:13.5px; color:var(--ink-2); border:0 }
.topnav a:hover{ color:var(--ink) }
@media(max-width:640px){ .topnav{display:none} }

/* ---------------- first screen ---------------- */
.calc{ padding:44px 0 8px }
h1{
  font-size:clamp(30px,4.4vw,44px);
  line-height:1.08; letter-spacing:-.032em; font-weight:680;
  margin:0 0 12px;
}
.eyebrow{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:14px;
}
.eyebrow b{ color:var(--primary); font-weight:700 }
.lede{
  margin:0 0 30px; max-width:62ch; font-size:16.5px;
  color:var(--ink-2); line-height:1.62;
}

.grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:24px; align-items:start;
}
@media(max-width:900px){ .grid{grid-template-columns:1fr; gap:18px} }

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

/* ---------------- inputs ---------------- */
.inputs{ padding:26px 26px 26px }
@media(max-width:520px){ .inputs{padding:20px 18px 22px} }

.field{ margin:0 0 20px }
.field-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:7px }
label,.flabel{
  display:block; font-size:12.5px; font-weight:620; letter-spacing:.045em;
  text-transform:uppercase; color:var(--ink-2);
}
.field-head label{ margin:0 }

input[type=number],select{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 13px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  min-height:46px;
}
select{
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-right:38px; cursor:pointer;
}
input[type=number]:hover,select:hover{ border-color:#cfc7bb }
input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(15,91,87,.16);
}
input.bad{ border-color:var(--accent); background:var(--accent-tint) }

.hint{ margin:7px 0 0; font-size:12.8px; line-height:1.5; color:var(--ink-3) }
.hint a{ color:var(--ink-2) }
.hint.hint-warn{ color:var(--warn) }

/* segmented control */
.seg{ display:flex; background:var(--line-2); border-radius:var(--r-sm); padding:3px; gap:3px }
.seg-btn{
  flex:1; appearance:none; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:14px; font-weight:560; color:var(--ink-2);
  padding:9px 6px; border-radius:6px; min-height:40px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.seg-btn:hover{ color:var(--ink) }
.seg-btn.is-on{ background:#fff; color:var(--ink); font-weight:620; box-shadow:0 1px 2px rgba(16,23,27,.10) }
.unit-seg{ flex:0 0 auto }
.unit-seg .seg-btn{ padding:6px 14px; min-height:32px; font-size:13px }

/* range */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:34px;
  background:transparent; margin:2px 0 0; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{ height:5px; border-radius:99px; background:var(--line-2) }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:#fff; border:1.5px solid var(--primary); margin-top:-10px;
  box-shadow:0 1px 4px rgba(16,23,27,.22);
  transition:transform var(--dur) var(--ease);
}
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.1) }
input[type=range]::-moz-range-track{ height:5px; border-radius:99px; background:var(--line-2) }
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:#fff;
  border:1.5px solid var(--primary); box-shadow:0 1px 4px rgba(16,23,27,.22);
}
.bcs-out{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--primary); font-variant-numeric:tabular-nums }
.scale{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-3); margin-top:-2px }

.food-row{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:8px }
@media(max-width:400px){ .food-row{grid-template-columns:1fr} }

.check{ margin-bottom:16px }
.cb{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink-2); cursor:pointer; text-transform:none; letter-spacing:normal; font-weight:400 }
.cb input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--primary); flex:0 0 auto }

.cta{
  width:100%; appearance:none; border:0; cursor:pointer;
  background:var(--primary); color:#fff; font:inherit; font-size:16px; font-weight:620;
  padding:15px 18px; border-radius:var(--r-sm); min-height:52px;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cta:hover{ background:#0c4a47 }
.cta:active{ transform:translateY(1px) }

.err{
  margin:12px 0 0; font-size:13.5px; color:var(--accent);
  background:var(--accent-tint); border:1px solid #f3d5c6; border-radius:var(--r-sm); padding:9px 12px;
}

.advisory{
  margin:9px 0 0; font-size:13px; line-height:1.5; color:var(--warn);
  background:var(--warn-tint); border-left:2px solid #d99a3c; border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:9px 12px;
}
.advisory button{
  appearance:none; border:0; background:transparent; padding:0; margin:0 0 0 4px;
  font:inherit; font-weight:620; color:var(--warn); text-decoration:underline; cursor:pointer;
}

/* ---------------- results ---------------- */
.results{ padding:26px; position:sticky; top:82px }
@media(max-width:900px){ .results{position:static} }
@media(max-width:520px){ .results{padding:20px 18px 22px} }

.empty{ padding:34px 0; text-align:center; color:var(--ink-3) }
.empty-k{ font-family:var(--mono); font-size:26px; letter-spacing:.16em; color:#d8d1c6; margin:0 0 10px }
.empty p{ margin:0; font-size:14px; max-width:34ch; margin-inline:auto }

.res-label{
  margin:0; font-size:12.5px; font-weight:620; letter-spacing:.045em;
  text-transform:uppercase; color:var(--ink-2);
}
.res-big{
  margin:6px 0 0; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
#mer{
  font-size:clamp(46px,7.4vw,62px); font-weight:680; letter-spacing:-.045em;
  line-height:1; color:var(--accent);
}
.res-big .unit{ font-size:15px; font-weight:600; color:var(--ink-2); letter-spacing:0 }
.res-range{ margin:8px 0 0; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums }

.kv{ margin:22px 0 0; padding:0; border-top:1px solid var(--line-2) }
.kv>div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line-2);
}
@media(max-width:520px){
  .kv>div{ flex-direction:column; align-items:flex-start; gap:4px; padding:13px 0 }
  .kv dd{ text-align:left }
}
.kv dt{ font-size:13.5px; color:var(--ink-2); margin:0 }
.kv dd{ margin:0; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right }
.kv .sub{ color:var(--ink-3); font-weight:400 }

.trace{
  margin:22px 0 0; background:var(--primary-tint);
  border:1px solid #d5e6e4; border-radius:var(--r-sm); padding:16px 16px 14px;
}
.trace-h{
  margin:0 0 10px; font-size:12.5px; font-weight:620; letter-spacing:.045em;
  text-transform:uppercase; color:var(--primary);
}
.trace-list{ margin:0; padding:0; list-style:none; counter-reset:t }
.trace-list li{
  counter-increment:t; position:relative; padding:0 0 9px 26px; font-size:13.5px;
  line-height:1.55; color:var(--ink);
}
.trace-list li:last-child{ padding-bottom:0 }
.trace-list li::before{
  content:counter(t); position:absolute; left:0; top:1px;
  width:18px; height:18px; border-radius:50%; background:#fff; border:1px solid #cfe0de;
  font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.trace-list code{
  font-family:var(--mono); font-size:12.8px; background:rgba(255,255,255,.75);
  border:1px solid #d5e6e4; border-radius:5px; padding:1px 5px;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.trace-src{ margin:11px 0 0; font-size:12px; color:var(--ink-3) }

.copy{
  margin-top:16px; width:100%; appearance:none; cursor:pointer;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  font:inherit; font-size:14px; font-weight:600; padding:12px; border-radius:var(--r-sm);
  min-height:44px;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.copy:hover{ border-color:#cfc7bb }
.copy.done{ background:var(--primary-tint); border-color:#cfe0de; color:var(--primary) }

/* coefficient table highlight */
.ctable tr.used{ background:var(--accent-tint); box-shadow:inset 3px 0 0 var(--accent) }
.ctable tr.used td{ font-weight:640 }
.ctable tr.used td:first-child::after{
  content:"used"; margin-left:9px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent);
}

/* ---------------- prose ---------------- */
.prose{ padding:58px 0 70px; max-width:74ch }
.prose h2{
  font-size:clamp(23px,2.7vw,29px); letter-spacing:-.026em; line-height:1.22;
  font-weight:660; margin:0 0 14px;
}
.prose h3{ font-size:18.5px; letter-spacing:-.018em; font-weight:640; margin:38px 0 10px }
.prose p{ margin:0 0 14px; color:var(--ink-2); font-size:16px; line-height:1.68 }
.prose strong{ color:var(--ink); font-weight:640 }

.formula{
  margin:20px 0 20px; padding:20px 22px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
}
.f1,.f2{ margin:0; font-family:var(--mono); font-size:16px; letter-spacing:-.01em; color:var(--ink) }
.f1{ margin-bottom:8px; font-size:17.5px; font-weight:600 }
.f2{ color:var(--primary); font-weight:600 }

.tablewrap{ overflow-x:auto; margin:16px 0 6px; -webkit-overflow-scrolling:touch }
.ctable{
  width:100%; border-collapse:collapse; font-size:14.5px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.ctable caption{ text-align:left; font-size:12.5px; color:var(--ink-3); padding:0 0 8px }
.ctable th{
  text-align:left; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); font-weight:620; padding:11px 14px; border-bottom:1px solid var(--line);
  background:var(--line-2);
}
.ctable td{ padding:11px 14px; border-bottom:1px solid var(--line-2) }
.ctable tr:last-child td{ border-bottom:0 }
.ctable .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; width:120px }

.map{ margin:0; padding-left:20px }
.map li{ margin:0 0 9px; color:var(--ink-2); font-size:15.5px; line-height:1.62 }
.map strong{ color:var(--ink) }

.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  cursor:pointer; padding:15px 2px; font-size:16px; font-weight:600;
  list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:baseline;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--primary); font-weight:600; font-size:18px; line-height:1 }
.faq details[open] summary::after{ content:"–" }
.faq p{ padding:0 2px 16px; margin:0 }

.src{ margin:0; padding-left:22px }
.src li{ margin:0 0 11px; font-size:13.5px; line-height:1.6; color:var(--ink-2) }

.foot{ border-top:1px solid var(--line); padding:26px 0 40px }
.foot p{ margin:0; font-size:13px; color:var(--ink-3); max-width:70ch }