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

:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #14181f;
  --ink-2: #4a5361;
  --ink-3: #6d7787;
  --line: #e2e6ec;
  --line-2: #cfd6e0;
  --accent: #0f6f5c;
  --accent-ink: #0b5446;
  --accent-soft: #e6f2ef;
  --warn-bg: #fff7e8;
  --warn-line: #f0d9a8;
  --warn-ink: #6b4c11;
  --radius: 12px;
  --bar-h: 64px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: 0;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 4px 0 14px;
  letter-spacing: -.01em;
}

h2 { font-size: 1.12rem; margin: 0 0 10px; }
h3 { font-size: 1rem; margin: 20px 0 6px; }

.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;
}

/* ---------- layout ---------- */

.cols { display: block; }

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

.result { margin-top: 14px; }

/* ---------- form ---------- */

.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }

label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 5px;
  letter-spacing: .01em;
}

input[type="number"],
input[type="text"],
select {
  width: 100%;
  min-height: 46px;
  padding: 9px 11px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236d7787' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.row { display: flex; gap: 8px; align-items: stretch; }
.row > input { flex: 1 1 auto; min-width: 0; }
.row > select { flex: 0 0 46%; }

.seg {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}

.seg-btn {
  min-width: 52px;
  min-height: 46px;
  padding: 0 12px;
  font: inherit;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 0;
  cursor: pointer;
}

.seg-btn + .seg-btn { border-left: 1px solid var(--line-2); }
.seg-btn.is-on { background: var(--accent-soft); color: var(--accent-ink); }

.hint {
  font-size: .8rem;
  color: var(--ink-3);
  margin: 6px 0 0;
}

.hint-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

.optional {
  margin: 4px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.optional > summary {
  cursor: pointer;
  font-size: .86rem;
  font-weight: 600;
  color: var(--accent-ink);
  padding: 4px 0 10px;
  list-style: none;
}

.optional > summary::-webkit-details-marker { display: none; }
.optional > summary::before { content: "+ "; font-weight: 700; }
.optional[open] > summary::before { content: "– "; }

.opt-tag {
  font-weight: 500;
  font-size: .74rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- result ---------- */

.big {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 2px 0 0;
  color: var(--accent-ink);
}

.big-sub { margin: 2px 0 14px; font-size: .84rem; color: var(--ink-3); }

.breakdown {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.breakdown dt { color: var(--ink-2); font-size: .86rem; margin: 0; }
.breakdown dd { margin: 0; font-weight: 600; font-size: .9rem; text-align: right; }

.notice {
  margin: 0;
  padding: 12px 13px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 9px;
  color: var(--warn-ink);
  font-size: .9rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.btn {
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  min-height: 44px;
  padding: 0 16px;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 9px;
  cursor: pointer;
}

.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn-ghost { background: #fff; color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { background: #f2f4f7; color: var(--ink); border-color: var(--line-2); }

.btn-small { min-height: 38px; padding: 0 14px; font-size: .85rem; }

/* ---------- mobile summary bar ---------- */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -4px 16px rgba(16, 24, 40, .08);
}

.bar-text { display: flex; flex-direction: column; min-width: 0; }
.bar-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.bar #bar-value { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the author rule below beats the UA [hidden] rule, so restate it explicitly */
.bar[hidden] { display: none; }

/* ---------- prose ---------- */

.prose {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-top: 18px;
}

.prose p, .prose li { color: var(--ink-2); }
.prose p { margin: 0 0 12px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 5px; }
.prose h2 { color: var(--ink); }

.formula {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: #f2f5f8;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem;
  color: var(--ink);
  overflow-x: auto;
}

.src {
  font-size: .84rem;
  color: var(--ink-3);
  border-left: 3px solid var(--accent-soft);
  padding-left: 12px;
}

.callout {
  background: var(--accent-soft);
  border: 1px solid #cfe4de;
  border-radius: 9px;
  padding: 12px 14px;
  color: var(--accent-ink) !important;
  font-size: .92rem;
}

table.ref {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-size: .88rem;
}

table.ref caption {
  text-align: left;
  font-size: .8rem;
  color: var(--ink-3);
  padding-bottom: 6px;
}

table.ref th, table.ref td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.ref thead th { background: #f2f5f8; color: var(--ink); font-size: .82rem; }
table.ref tbody td { color: var(--ink-2); }
table.ref tbody td:nth-child(2) { white-space: nowrap; font-weight: 600; color: var(--ink); }

.foot {
  margin-top: 22px;
  padding: 14px 2px 0;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--ink-3);
}

/* ---------- site chrome (added when the page became a site) ---------- */

.site-head {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.site-head .head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
}

.site-nav { display: flex; gap: 16px; flex-wrap: wrap; }

.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  padding: 3px 0;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--accent-ink); }

.foot-nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.foot-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 600;
}

.foot-nav a:hover,
.foot-nav a[aria-current="page"] { color: var(--accent-ink); }

.foot-fine { margin: 8px 0 0; font-size: .8rem; }

/* a plain content page reuses the prose card */
.page h2:first-child { margin-top: 0; }
.page ul { margin: 0 0 14px; padding-left: 20px; }

/* ---------- tablet / desktop ---------- */

@media (min-width: 760px) {
  .wrap { padding: 26px 20px 48px; }
  h1 { font-size: 2rem; }
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .result { margin-top: 0; }
  .card { padding: 20px; }
  .prose { padding: 24px 26px; }
  .bar { display: none !important; }
  .big { font-size: 2.5rem; }
}

/* A sticky result card taller than the viewport can never be read in full, so
   only stick it when there is real height to stick into (landscape phones and
   short windows keep it in flow). */
@media (min-width: 760px) and (min-height: 640px) {
  .result { position: sticky; top: 20px; }
}

@media (min-width: 1040px) {
  .cols { grid-template-columns: 1.08fr 1fr; }
}

/* ---------- print ---------- */

@media print {
  body { background: #fff; padding-bottom: 0 !important; }
  .bar, .actions, .site-head, .foot-nav, #form-card, #result-empty, .optional, #faq, #breed, .hint { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .card, .prose { border: 0; box-shadow: none; padding: 0 0 14px; break-inside: avoid; }
  .cols { display: block; }
  .result { position: static; margin: 0 0 18px; }
  .big { color: #000; font-size: 2rem; }
  .prose { margin-top: 14px; }
  table.ref { font-size: .8rem; }
  table.ref thead th { background: #eee; }
}