/* Extracted main stylesheet from inline <style> in index.html */

/* Fonts utility */
.font-head{font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Theme vars */
:root{
  --bg:#ffffff; --fg:#111827; --muted:#6b7280; --card:#f8fafc; --border:#e5e7eb; --brand:#0f172a; --ok:#10b981; --warn:#f59e0b;
  --input-bg:#eff6ff; --factor-bg:#f3f4f6; --result-border:#86efac; --radius:16px; --shadow:0 6px 24px rgba(0,0,0,.06);
}

/* Resets and base */
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:860px;margin:0 auto;padding:20px}

/* Branding */
.brand { display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: left; gap: 18px; width: 100%; }
.brand img { width: 80px; height: 80px; border-radius: 50%; margin: 0; box-shadow: var(--shadow); background: #fff; flex-shrink: 0; }
.brand-title { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
header { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 18px; padding-bottom: 10px; position: relative; }
.brand h1{text-align:left}
.brand .sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px}
h1{font-size:2.2rem;margin:0;font-weight:700;letter-spacing:.01em}
h1,.section-title,label{font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.section-title{font-weight:700}
label{font-weight:600}

/* Step layouts */
.step1-grid{display:grid;grid-template-columns:1fr 160px;gap:12px;align-items:start}
.step1-fields{display:grid;gap:10px}
@media(max-width:720px){.step1-grid{grid-template-columns:1fr}}
.unit-row{display:grid;grid-template-columns:1fr 200px;gap:10px}

/* Step 4 measure group */
.measure-group{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:14px;padding:8px 12px;background:#fff}
.measure-group:focus-within{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.25)}
.measure-group .per{color:var(--muted);font-size:.95rem;margin:0}
.measure-group input,.measure-group select{border:none;background:transparent;padding:6px 8px;font-size:1rem}
.measure-group .kcal{box-shadow:inset -1px 0 0 var(--border);padding-right:12px;margin-right:4px;text-align:right}
.measure-group select{flex:0 0 auto;width:auto;min-width:64px;max-width:120px;border:1px solid var(--border);border-radius:10px;background:#f8fafc}
.measure-group input:focus,.measure-group select:focus{outline:none;box-shadow:none}
.measure-group.required-ring{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25)}
#foodTypeGroup { max-width: 420px; min-width: 100px; width: 100%; margin-bottom: 18px; }
#foodTypeGroup select { width: 100%; min-width: 100px; max-width: 420px; background: transparent; border: none; font-size: 1.13rem; font-family: inherit; padding: 8px 10px; }
.measure-group input.required-input{ border:1px solid #f59e0b !important; background:#fff7ed; border-radius:10px; box-shadow:0 0 0 2px rgba(245,158,11,.18); }

/* Inline measure */
.measure-row label{margin-bottom:6px}
.inline-measure{display:grid;grid-template-columns:minmax(72px,1fr) auto minmax(80px,max-content);align-items:center;column-gap:6px}
.per{color:var(--muted);font-size:.95rem;white-space:nowrap;margin:0 2px}
@media(max-width:720px){
  .inline-measure{grid-template-columns:minmax(56px,1fr) auto minmax(68px,max-content);column-gap:4px}
  .inline-measure input,.inline-measure select{padding:6px 8px;font-size:.95rem}
  .per{margin:0 1px;font-size:.9rem}
  .measure-group{width:100%}
}
.w-num{max-width:none;width:100%;min-width:0}
.w-unit{max-width:none;width:100%;min-width:0}
.kcal{max-width:110px}
@media(max-width:720px){.kcal{max-width:92px}}

/* Misc layout */
.row{display:grid;gap:10px}
.row.two{grid-template-columns:1fr 1fr}
.row.two.align-end{align-items:end}
@media(max-width:720px){.unit-row{grid-template-columns:1fr 1fr}}
.weight-hint{display:none;margin-top:0}
.sub{color:var(--muted);font-size:1.05rem}

/* Toolbar and buttons */
.toolbar { display: flex; gap: 12px; justify-content: center; margin: 0 0 16px 0; flex-wrap: wrap; }
@media (max-width: 720px) {
  .toolbar { flex-direction: row; justify-content: center; gap: 8px; margin-bottom: 10px; align-items: center; }
  .toolbar .btn { width: auto; min-width: 64px; }
}
.btn { background: linear-gradient(180deg, #ffb37a 0%, #ff914d 90%); color: #fff; border: 2px solid #ff914d; border-radius: 12px; padding: 9px 16px; cursor: pointer; font-size: .98rem; font-weight: 600; box-shadow: 0 2px 10px 0 rgba(255,145,77,0.12), 0 1.5px 0 #c96523; transition: box-shadow 0.14s, transform 0.12s, background 0.16s; will-change: box-shadow, transform; min-height: 46px; min-width: 64px; }
.btn:active, .btn:focus-visible { outline: none; box-shadow: 0 2px 14px 0 rgba(255,145,77,0.20), 0 2px 0 #c96523; background: linear-gradient(180deg, #ff914d 10%, #ffb37a 100%); }
.btn:hover, .btn:focus-visible { background: linear-gradient(180deg, #ffab64 0%, #ff914d 100%); box-shadow: 0 5px 22px 0 rgba(255,145,77,0.24), 0 3px 0 #c96523; transform: translateY(-2px) scale(1.03); }
.btn.purple, .toolbar .btn.purple { background: #a78bfa; color: #fff; border: 2px solid #7c3aed; border-radius: 16px; font-size: 1.01rem; min-height: 46px; min-width: 64px; box-shadow: none; transition: background 0.15s, border-color 0.15s; }
.btn.purple:active, .btn.purple:focus-visible, .toolbar .btn.purple:active, .toolbar .btn.purple:focus-visible { background: #7c3aed; color: #fff; border-color: #7c3aed; box-shadow: none; outline: none; }
.btn.purple:hover, .toolbar .btn.purple:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; box-shadow: none; }
@media (max-width: 720px) { .btn.purple, .toolbar .btn.purple { font-size: 1.08rem; min-height: 46px; min-width: 64px; } }

/* Cards, badges, chips */
.stack{display:grid;gap:12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card.input{background:var(--input-bg)}
.card.factor{background:var(--factor-bg)}
.card.result{background:#fff;border-left:6px solid var(--result-border)}
.section-title{display:flex;align-items:center;gap:10px;font-size:1.05rem;margin:0 0 10px}
.step{color:#111;background:#fde68a;border-radius:999px;padding:2px 10px;font-size:.88rem;border:1px solid #fbbf24;white-space:nowrap}
.badge{display:inline-block;border-radius:999px;font-size:.72rem;line-height:1;border:1px solid var(--border);padding:4px 8px;margin-left:8px;color:#374151}
.badge.input{background:#dbeafe;border-color:#bfdbfe}
.badge.factor{background:#e5e7eb;border-color:#d1d5db}
.badge.result{background:#dcfce7;border-color:#86efac;color:#065f46}

/* Inputs */
.card.input input, .card.input select{border-color:#bfdbfe;background:#ffffff}
.card.input input:focus, .card.input select:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.25)}
.required-ring{border-color:#f59e0b !important; box-shadow:0 0 0 3px rgba(245,158,11,.25) !important}
input.calc[readonly]{background:#f3f4f6;border-color:#e5e7eb;color:#111;cursor:default}
.note{color:var(--muted);font-size:.92rem}
label{display:block;font-size:.92rem;margin:10px 0 6px}
input,select{width:100%;padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:1rem}
input:focus-visible,select:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(96,165,250,.25);border-color:#60a5fa}
input[type=number]{appearance:textfield}

/* Pills */
.pillbar{display:flex;flex-wrap:wrap;gap:6px}
.pill{background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:.9rem}
.pill.ok{border-color:#10b981}
.pill.yellow{border-color:#f59e0b}
.pill.orange{border-color:#fb923c}
.pill.red{border-color:#ef4444}
.pill.weight{background:#ecfeff;border-color:#99f6e4}
.pill.rer{background:#eef2ff;border-color:#c7d2fe}
.pill.factor{background:#f3e8ff;border-color:#e9d5ff}
.pill.mer{background:#fff7ed;border-color:#fed7aa}
.pill.wet{background:#dbeafe;border-color:#bfdbfe}
.pill.dry{background:#fef3c7;border-color:#fde68a}
.pill.total{background:#dcfce7;border-color:#86efac}

/* Output */
.out{font-size:1.02rem;line-height:1.5;white-space:pre-wrap}
.illustration{max-width:120px;width:100%;height:auto;border-radius:14px;float:right;margin:0 0 8px 12px}
.hero-cat{max-width:140px;border-radius:18px;margin:0 0 8px 12px}
@media(max-width:720px){ .illustration{display:none} .sub svg{display:none} }
@media (max-width: 600px) {
  .brand { flex-direction: column; align-items: center; text-align: center; }
  .brand-title { align-items: center !important; text-align: center !important; width: 100% !important; }
  .brand-title h1 { text-align: center !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}
.name-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
@media(max-width:720px){.name-row{grid-template-columns:1fr 1fr}}

/* Feed line */
.feedline{background:#f6fdfb;border:1px solid #bbf7d0;border-radius:14px;padding:12px 14px;font-size:1.15rem;font-weight:700}
.feedline.warn{background:#fef9c3;border-color:#fde68a}
.feedline[data-state=warn]::before{content:"!";color:#92400e}
.feedline[data-state=incomplete]::before{content:"…";color:#92400e}
.feedheading{font-size:1.05rem;font-weight:600;margin:0 0 6px;color:var(--muted)}
.summary-list{margin:10px 0 0 18px}
.summary-list li{margin:4px 0}

/* Formula, banners */
.formula{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;background:#f8fafc;border:1px dashed #d1d5db;border-radius:12px;padding:10px;color:#0f172a}
.banner{margin:8px 0 0;padding:10px 12px;border-radius:12px;font-size:.9rem}
.banner.kitten{background:#e0f2fe;border:1px solid #93c5fd;color:#0c4a6e}
.banner.pregnant{background:#fde2e2;border:1px solid #fecaca;color:#7f1d1d}
.banner.loss{background:#fef3c7;border:1px solid #fde68a;color:#92400e}
details{margin-top:10px}
summary{cursor:pointer;font-weight:600}
.factor-table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--border);margin-top:8px}
.factor-table th,.factor-table td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left}
.factor-table th{background:#f3f4f6}

/* Toast */
.toast{position:fixed;display:flex;align-items:center;justify-content:center;gap:8px;left:50%;bottom:20px;transform:translateX(-50%);background:#ff914d;color:#0f172a;padding:10px 14px;border-radius:12px;font-size:.9rem;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s}
.toast.show{opacity:1}
.toast.top{top:18px;right:24px;left:auto;bottom:auto;transform:none}
.toast-icon{font-size:1rem;line-height:1}
.delta-text{font-weight:600;margin-left:8px}
.delta-text.ok{color:#10b981}
.delta-text.yellow{color:#f59e0b}
.delta-text.orange{color:#fb923c}
.delta-text.red{color:#ef4444}

/* Print consolidated moved already inside index; retained in external if needed */
/* Variables highlighting */
.cat-var { color: #7c3aed; font-weight: 600; }
.cal-var { color: #166534; font-weight: 700; }
.plan-var { color: #7c3aed; font-weight: 700; }
.goal-var { color: #f59e0b; font-weight: 700; }
.cal-var-blue { color: #7c3aed; font-weight: 700; }
.goal-var.goal-maintain { color: #22c55e; font-weight: 700; }
.goal-var.goal-change { color: #f5780b; font-weight: 700; }
.feedline > div > span,
.feedline > div > br { margin-bottom: 8px !important; display: block; }
.feedline > div > span:last-child,
.feedline > div > br:last-child { margin-bottom: 0 !important; }
.feedline-emoji { font-size: 1.5em; vertical-align: middle; }

/* Override row */
.override-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
@media (max-width: 600px) {
  .override-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* a11y focus-visible patch */
a:focus-visible, button:focus-visible, .btn:focus-visible, select:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Existing extracted non-critical blocks preserved below */

/* Step 2: Constrain BCS select width on larger viewports and left-align layout */
@media (min-width: 720px) {
  #step2 > div { display: block; }
  #step2 label[for="bcs"] { text-align: left; max-width: 640px; }
  #bcs { width: -moz-fit-content !important; width: fit-content !important; min-width: 0; max-width: 100%; display: inline-block; }
}

/* Step 5: Visually highlight the Wet Amount select as an editable input */
#step5 #wetAmountSel {
  border: 1px solid #f59e0b;
  background: #fff7ed;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(245,158,11,.18);
}
/* Extracted non-critical styles */
/* Step 2: Constrain BCS select width on larger viewports and left-align layout */
@media (min-width: 720px) {
  /* Left-align Step 2 content to match other steps */
  #step2 > div {
    display: block; /* revert to block flow so content aligns left */
  }
  #step2 label[for="bcs"] {
    text-align: left;
    max-width: 640px;
  }
  /* Make the BCS select size to its content instead of 100% */
  #bcs {
    width: -moz-fit-content !important; /* Firefox */
    width: fit-content !important;      /* Modern browsers */
    min-width: 0;
    max-width: 100%;
    display: inline-block;
  }
}

/* Step 5: Visually highlight the Wet Amount select as an editable input */
#step5 #wetAmountSel {
  border: 1px solid #f59e0b;
  background: #fff7ed;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(245,158,11,.18);
}
/* Consolidated print styles moved from index.html */
@media print {
  /* Base font/background */
  html { font-size: 11px; }
  body { background: #fff !important; }

  /* Hide non-print content */
  header, #step1, #step2, #step3, #step4, #step5, .toolbar, .btn, .illustration, details {
    display: none !important;
  }

  /* Show Step 6 content and branding */
  #step6 {
    display: block !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    page-break-after: avoid;
  }
  #printBranding { display: flex !important; }

  /* Neutralize colors/borders for readability */
  body,
  .card,
  .banner,
  .note,
  .feedline,
  .feedline span,
  .section-title,
  .feedheading,
  #feedLine,
  #lossNote,
  .pillbar,
  .pill {
    background: #fff !important;
    color: #111 !important;
    border: none !important;
    box-shadow: none !important;
  }
  .goal-var,
  .plan-var,
  .cat-var,
  .cal-var,
  .cal-var-blue {
    color: #111 !important;
    font-weight: 700 !important;
  }

  /* Layout tweaks */
  .wrap { padding: 0 !important; max-width: none !important; }
  .card { background:#fff; box-shadow:none; border-color:#d1d5db; padding:8px }
  .stack { gap: 6px }
  .section-title { margin-bottom: 6px }
  .row { gap: 6px }
  .out { font-size: 0.95rem }
  .pillbar { gap: 4px; display: none }
  .pill { padding: 4px 8px }
  a[href]:after { content: "" }
  #feedPlanHeading:empty { display: none }
  #feedPlanList:empty { display: none }
  section { break-inside: avoid }

  /* Chips visibility on print */
  #step6Chip { display: none !important; }
  #resultChip { display: inline-block !important; }

  /* Preserve color adjustments where supported */
  #step6 * {
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
/* Additional extracted styles moved from inline attributes in index.html */
/* Print branding (was inline on #printBranding) */
#printBranding {
  display: none;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
#printBranding img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: none;
  background: #fff;
  display: inline-block;
}

/* Step5 override / summary controls */
#step5OverrideContainer { display: none; margin-top: 10px; }
#step5OverrideContainer .override-label { font-size: 1.12rem; font-weight: 500; }
#overrideSummaryDiv { display: none; margin-top: 6px; }
#overrideSummaryDiv label { font-size: 1rem; font-weight: 500; cursor: pointer; }

/* Small helpers used in summary / notes previously inline */
#feedPlanHeading { margin-top: 8px; }
#kpiDiff { margin-top: 10px; }
#kpiPlan { margin-top: 10px; }

/* Loss note and advisory blocks */
#lossNote {
  font-size: 1.15rem;
  font-weight: 700;
  color: #3a342f;
  background: #fff7ed;
  border-radius: 10px;
  border: 1px solid #fdba74;
  padding: 10px 16px;
  margin-top: 18px;
  margin-bottom: 10px;
  display: block;
}
.note.advisory {
  font-size: 1.08rem;
  font-weight: 600;
  color: #3a342f;
  border-radius: 10px;
  padding: 10px 16px;
  display: block;
}
.note.advisory.loss { background:#fef3c7;border:1px solid #fde68a;margin-top:12px; }
.note.advisory.vet { background:#ede9fe;border:1px solid #a78bfa;margin-top:8px; }

/* Utility: compact inline flex used for small control groups */
.inline-flex-gap {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Checkbox visual sizes moved from inline styles */
#step5OverrideCheckbox, #overrideSummaryCheckbox {
  width: 22px;
  height: 22px;
  vertical-align: -2px;
}

/* Preserve existing specificity by placing these at the end of file */