/* ============================================================
   PITBULL DIGESTIVE HEALTH CALCULATOR
   Design tokens
   ============================================================ */
.pdhc-root{
  --pdhc-bg:#12171B;
  --pdhc-bg-alt:#171D22;
  --pdhc-surface:#1D262C;
  --pdhc-surface-2:#252F36;
  --pdhc-border:#313B42;
  --pdhc-border-soft:#293238;
  --pdhc-gold:#C9A15C;
  --pdhc-gold-strong:#E0BC7C;
  --pdhc-gold-soft:rgba(201,161,92,.14);
  --pdhc-teal:#4FA88F;
  --pdhc-teal-soft:rgba(79,168,143,.14);
  --pdhc-rust:#D8734A;
  --pdhc-rust-soft:rgba(216,115,74,.14);
  --pdhc-red:#E0574A;
  --pdhc-red-soft:rgba(224,87,74,.14);
  --pdhc-text:#F2EFE9;
  --pdhc-text-muted:#9AA3AA;
  --pdhc-text-faint:#6B747B;
  --pdhc-font-display:'Oswald',sans-serif;
  --pdhc-font-body:'Inter',sans-serif;
  --pdhc-font-mono:'JetBrains Mono',monospace;
  --pdhc-radius:14px;
  --pdhc-radius-sm:8px;
  color-scheme: dark;
}
.pdhc-root *{box-sizing:border-box;}
.pdhc-root{
  background:
    radial-gradient(1200px 480px at 12% -10%, rgba(201,161,92,.10), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(79,168,143,.08), transparent 55%),
    var(--pdhc-bg);
  color:var(--pdhc-text);
  font-family:var(--pdhc-font-body);
  line-height:1.5;
  padding:clamp(20px,4vw,56px) 16px 64px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.pdhc-wrap{max-width:920px;margin:0 auto;}

/* ---------- Header ---------- */
.pdhc-header{margin-bottom:28px;}
.pdhc-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--pdhc-font-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pdhc-gold-strong);
  background:var(--pdhc-gold-soft);
  border:1px solid rgba(201,161,92,.35);
  padding:5px 12px 5px 10px;border-radius:999px;
  margin-bottom:16px;
}
.pdhc-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pdhc-gold-strong);box-shadow:0 0 0 3px rgba(201,161,92,.25);}
.pdhc-root h1.pdhc-h1{
  font-family:var(--pdhc-font-display) !important;
  font-weight:600 !important;
  font-size:clamp(30px,4.4vw,44px) !important;
  letter-spacing:.01em !important;
  line-height:1.08 !important;
  margin:0 0 10px !important;
  text-transform:uppercase !important;
  background:none !important;
  -webkit-text-fill-color:initial !important;
}
.pdhc-root h1.pdhc-h1 .pdhc-h1-line1{color:var(--pdhc-teal) !important;}
.pdhc-root h1.pdhc-h1 span:not(.pdhc-h1-line1){color:var(--pdhc-gold-strong) !important;}
.pdhc-sub{color:var(--pdhc-text-muted);font-size:15px;max-width:56ch;margin:0;}

/* ---------- Stepper ("leash line") ---------- */
.pdhc-stepper{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin:32px 0 22px;
  position:relative;
  counter-reset: pdhc-step;
}
.pdhc-step{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  flex:1;position:relative;
  font-family:var(--pdhc-font-mono);
}
.pdhc-step:not(:last-child)::after{
  content:"";position:absolute;top:15px;left:calc(50% + 22px);right:calc(-50% + 22px);
  height:2px;background:var(--pdhc-border);
  background-image:linear-gradient(to right, var(--pdhc-border) 60%, transparent 0%);
  background-size:8px 2px;background-repeat:repeat-x;
}
.pdhc-step.is-complete:not(:last-child)::after{
  background-image:none;background-color:var(--pdhc-teal);
}
.pdhc-step-dot{
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--pdhc-border);
  background:var(--pdhc-surface);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--pdhc-text-faint);
  margin-bottom:8px;transition:all .25s ease;z-index:1;
}
.pdhc-step.is-active .pdhc-step-dot{
  border-color:var(--pdhc-gold);color:var(--pdhc-gold-strong);
  box-shadow:0 0 0 4px var(--pdhc-gold-soft);
}
.pdhc-step.is-complete .pdhc-step-dot{
  border-color:var(--pdhc-teal);background:var(--pdhc-teal);color:#0d1a16;
}
.pdhc-step-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pdhc-text-faint);}
.pdhc-step.is-active .pdhc-step-label{color:var(--pdhc-text);}
.pdhc-step.is-complete .pdhc-step-label{color:var(--pdhc-text-muted);}

/* ---------- Card ---------- */
.pdhc-card{
  background:var(--pdhc-surface);
  border:1px solid var(--pdhc-border-soft);
  border-radius:var(--pdhc-radius);
  padding:clamp(18px,3vw,32px);
  position:relative;
  overflow:hidden;
}
.pdhc-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg, var(--pdhc-gold), var(--pdhc-teal));
}
.pdhc-panel{display:none;animation:pdhc-fade .35s ease;}
.pdhc-panel.is-active{display:block;}
@keyframes pdhc-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.pdhc-panel-title{
  font-family:var(--pdhc-font-display);
  text-transform:uppercase;letter-spacing:.03em;
  font-size:20px;font-weight:600;margin:0 0 4px;
  display:flex;align-items:center;gap:10px;
}
.pdhc-panel-title small{
  font-family:var(--pdhc-font-mono);font-size:12px;color:var(--pdhc-gold);
  border:1px dashed rgba(201,161,92,.5);border-radius:6px;padding:2px 7px;
}
.pdhc-panel-desc{color:var(--pdhc-text-muted);font-size:13.5px;margin:0 0 22px;}

/* ---------- Form grid & fields ---------- */
.pdhc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;}
.pdhc-grid.pdhc-grid-3{grid-template-columns:1fr 1fr 1fr;}
.pdhc-field{margin-bottom:0;}
.pdhc-field.pdhc-span-2{grid-column:1 / -1;}
.pdhc-label{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--pdhc-text-muted);margin-bottom:8px;
}
.pdhc-info{
  width:15px;height:15px;border-radius:50%;
  border:1px solid var(--pdhc-text-faint);color:var(--pdhc-text-faint);
  font-size:10px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--pdhc-font-mono);cursor:help;flex-shrink:0;
}
.pdhc-input, .pdhc-select{
  width:100%;background:var(--pdhc-bg-alt);
  border:1px solid var(--pdhc-border);color:var(--pdhc-text);
  border-radius:var(--pdhc-radius-sm);padding:11px 12px;
  font-family:var(--pdhc-font-body);font-size:14.5px;
  transition:border-color .15s ease, box-shadow .15s ease;
  appearance:none;
}
.pdhc-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%239AA3AA'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:32px;
}
.pdhc-input:focus, .pdhc-select:focus{
  outline:none;border-color:var(--pdhc-gold);box-shadow:0 0 0 3px var(--pdhc-gold-soft);
}
.pdhc-weight-row{display:flex;gap:8px;}
.pdhc-weight-row .pdhc-input{flex:1;}
.pdhc-unit-toggle{
  display:flex;border:1px solid var(--pdhc-border);border-radius:var(--pdhc-radius-sm);overflow:hidden;flex-shrink:0;
}
.pdhc-unit-toggle button{
  background:var(--pdhc-bg-alt);color:var(--pdhc-text-muted);border:none;
  padding:0 14px;font-family:var(--pdhc-font-mono);font-size:12.5px;font-weight:600;cursor:pointer;
}
.pdhc-unit-toggle button.is-active{background:var(--pdhc-gold);color:#1a1406;}

/* Segmented control */
.pdhc-seg{display:flex;flex-wrap:wrap;gap:8px;}
.pdhc-seg label{
  border:1px solid var(--pdhc-border);border-radius:999px;
  padding:8px 14px;font-size:13px;color:var(--pdhc-text-muted);
  cursor:pointer;transition:all .15s ease;user-select:none;
}
.pdhc-seg input{position:absolute;opacity:0;pointer-events:none;}
.pdhc-seg input:checked + label{
  background:var(--pdhc-gold-soft);border-color:var(--pdhc-gold);color:var(--pdhc-gold-strong);
}
.pdhc-seg label:hover{border-color:var(--pdhc-text-faint);}

/* Slider (BCS) */
.pdhc-slider-wrap{background:var(--pdhc-bg-alt);border:1px solid var(--pdhc-border);border-radius:var(--pdhc-radius-sm);padding:16px 16px 12px;}
.pdhc-slider{width:100%;accent-color:var(--pdhc-gold);height:6px;}
.pdhc-slider-scale{display:flex;justify-content:space-between;font-family:var(--pdhc-font-mono);font-size:10.5px;color:var(--pdhc-text-faint);margin-top:4px;}
.pdhc-slider-readout{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;}
.pdhc-slider-readout .val{font-family:var(--pdhc-font-display);font-size:26px;color:var(--pdhc-gold-strong);}
.pdhc-slider-readout .desc{font-size:12.5px;color:var(--pdhc-text-muted);text-align:right;max-width:60%;}

/* Checkbox grid */
.pdhc-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.pdhc-check{position:relative;}
.pdhc-check input{position:absolute;opacity:0;}
.pdhc-check label{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--pdhc-border);border-radius:var(--pdhc-radius-sm);
  padding:9px 11px;font-size:13px;color:var(--pdhc-text-muted);cursor:pointer;transition:all .15s ease;
}
.pdhc-check label::before{
  content:"";width:14px;height:14px;border-radius:4px;border:1px solid var(--pdhc-text-faint);flex-shrink:0;
}
.pdhc-check input:checked + label{border-color:var(--pdhc-teal);color:var(--pdhc-text);background:var(--pdhc-teal-soft);}
.pdhc-check input:checked + label::before{background:var(--pdhc-teal);border-color:var(--pdhc-teal);}

/* ---------- Footer nav ---------- */
.pdhc-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px;}
.pdhc-btn{
  font-family:var(--pdhc-font-body);font-weight:600;font-size:14px;
  border-radius:999px;padding:12px 24px;cursor:pointer;border:1px solid transparent;
  transition:transform .12s ease, opacity .15s ease, box-shadow .15s ease;
  display:inline-flex;align-items:center;gap:8px;
}
.pdhc-btn:active{transform:scale(.97);}
.pdhc-btn-primary{background:var(--pdhc-gold);color:#1a1406;}
.pdhc-btn-primary:hover{box-shadow:0 6px 20px rgba(201,161,92,.28);}
.pdhc-btn-ghost{background:transparent;border-color:var(--pdhc-border);color:var(--pdhc-text-muted);}
.pdhc-btn-ghost:hover{border-color:var(--pdhc-text-faint);color:var(--pdhc-text);}
.pdhc-btn-teal{background:var(--pdhc-teal);color:#07211b;}
.pdhc-btn:disabled{opacity:.35;cursor:not-allowed;}
.pdhc-btn:focus-visible, .pdhc-input:focus-visible, .pdhc-select:focus-visible{outline:2px solid var(--pdhc-gold);outline-offset:2px;}

/* ---------- Results ---------- */
.pdhc-results-top{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center;margin-bottom:26px;}
.pdhc-tag{position:relative;display:flex;align-items:center;justify-content:center;}
.pdhc-tag svg{width:100%;height:auto;}
.pdhc-tag-score{position:absolute;text-align:center;}
.pdhc-tag-score .num{font-family:var(--pdhc-font-display);font-size:44px;color:var(--pdhc-text);display:block;line-height:1;}
.pdhc-tag-score .lbl{font-family:var(--pdhc-font-mono);font-size:10px;letter-spacing:.1em;color:var(--pdhc-text-faint);text-transform:uppercase;}
.pdhc-risk-badge{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--pdhc-font-mono);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  padding:7px 14px;border-radius:999px;margin-bottom:12px;
}
.pdhc-risk-low{background:var(--pdhc-teal-soft);color:var(--pdhc-teal);border:1px solid rgba(79,168,143,.4);}
.pdhc-risk-moderate{background:var(--pdhc-gold-soft);color:var(--pdhc-gold-strong);border:1px solid rgba(201,161,92,.4);}
.pdhc-risk-high{background:var(--pdhc-red-soft);color:var(--pdhc-red);border:1px solid rgba(224,87,74,.4);}
.pdhc-results-summary h3{font-family:var(--pdhc-font-display);text-transform:uppercase;font-size:22px;margin:0 0 8px;}
.pdhc-results-summary p{color:var(--pdhc-text-muted);font-size:14px;margin:0;}

.pdhc-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;}
.pdhc-stat{
  background:var(--pdhc-bg-alt);border:1px solid var(--pdhc-border-soft);border-radius:var(--pdhc-radius-sm);
  padding:14px;
}
.pdhc-stat .k{font-family:var(--pdhc-font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--pdhc-text-faint);margin-bottom:6px;}
.pdhc-stat .v{font-family:var(--pdhc-font-display);font-size:22px;color:var(--pdhc-text);}
.pdhc-stat .v small{font-family:var(--pdhc-font-body);font-size:11px;color:var(--pdhc-text-muted);font-weight:400;text-transform:none;letter-spacing:0;}

.pdhc-bars{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.pdhc-bar-row .top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;}
.pdhc-bar-row .top .name{color:var(--pdhc-text-muted);}
.pdhc-bar-row .top .amt{font-family:var(--pdhc-font-mono);color:var(--pdhc-text);}
.pdhc-bar-track{height:8px;border-radius:999px;background:var(--pdhc-bg-alt);border:1px solid var(--pdhc-border-soft);overflow:hidden;}
.pdhc-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg, var(--pdhc-teal), var(--pdhc-gold));transition:width 1s ease;}

.pdhc-reco{border:1px dashed var(--pdhc-border);border-radius:var(--pdhc-radius);padding:18px 18px 6px;margin-bottom:20px;}
.pdhc-reco h4{
  font-family:var(--pdhc-font-display);text-transform:uppercase;font-size:15px;margin:0 0 12px;
  display:flex;align-items:center;gap:8px;color:var(--pdhc-gold-strong);
}
.pdhc-reco ul{margin:0;padding:0;list-style:none;}
.pdhc-reco li{
  display:flex;gap:10px;padding:0 0 12px;font-size:13.5px;color:var(--pdhc-text-muted);line-height:1.55;
}
.pdhc-reco li::before{content:"→";color:var(--pdhc-teal);font-weight:700;flex-shrink:0;}

.pdhc-probiotic{
  background:var(--pdhc-teal-soft);border:1px solid rgba(79,168,143,.35);border-radius:var(--pdhc-radius);
  padding:16px 18px;margin-bottom:20px;font-size:13.5px;color:var(--pdhc-text);
}
.pdhc-probiotic strong{color:var(--pdhc-teal);}

.pdhc-disclaimer{font-size:11.5px;color:var(--pdhc-text-faint);border-top:1px solid var(--pdhc-border-soft);padding-top:14px;line-height:1.6;}

.pdhc-result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .pdhc-grid, .pdhc-grid-3{grid-template-columns:1fr;}
  .pdhc-check-grid{grid-template-columns:repeat(2,1fr);}
  .pdhc-stat-grid{grid-template-columns:repeat(2,1fr);}
  .pdhc-results-top{grid-template-columns:1fr;text-align:center;}
  .pdhc-tag{max-width:180px;margin:0 auto;}
  .pdhc-step-label{display:none;}
  .pdhc-nav{flex-wrap:wrap;}
  .pdhc-nav .pdhc-btn{flex:1;justify-content:center;}
}
@media (max-width:480px){
  .pdhc-check-grid{grid-template-columns:1fr 1fr;}
  .pdhc-stat-grid{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){
  .pdhc-panel, .pdhc-bar-fill, .pdhc-step-dot{transition:none;animation:none;}
}
@media print{
  .pdhc-stepper, .pdhc-nav, .pdhc-result-actions{display:none !important;}
  .pdhc-root{background:#fff;color:#111;padding:0;}
  .pdhc-card{border:none;padding:0;}
  .pdhc-card::before{display:none;}
}

/* Toast */
.pdhc-toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--pdhc-surface-2);border:1px solid var(--pdhc-gold);color:var(--pdhc-text);
  padding:10px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;
  transition:all .25s ease;z-index:999;font-family:var(--pdhc-font-mono);
}
.pdhc-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);}