/* Protein Calculator — protein-calculator.css
   Mobile-first. Scoped to .pr-wrap */

.pr-wrap *,.pr-wrap *::before,.pr-wrap *::after{box-sizing:border-box;margin:0;padding:0}
.pr-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#1e293b;max-width:960px;margin:0 auto;background:#fff;border-radius:16px;border:1px solid #e2e8f0;overflow:hidden}

.pr-header{display:flex;align-items:center;gap:14px;padding:20px 24px;background:#0c4a6e}
.pr-header-icon{width:44px;height:44px;background:rgba(255,255,255,.12);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#7dd3fc;flex-shrink:0}
.pr-title{font-size:19px;font-weight:700;color:#fff;margin-bottom:3px}
.pr-subtitle{font-size:12.5px;color:#7dd3fc}

.pr-body{display:flex;flex-direction:column}
@media(min-width:720px){.pr-body{flex-direction:row;align-items:flex-start}.pr-form{width:44%;border-right:1px solid #e2e8f0}.pr-results{width:56%;position:sticky;top:0;max-height:100vh;overflow-y:auto}}

.pr-form{padding:20px;display:flex;flex-direction:column;gap:16px}
.pr-field{display:flex;flex-direction:column;gap:6px}
.pr-label{font-size:12px;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:.05em}
.pr-opt{font-weight:400;color:#94a3b8;text-transform:none;letter-spacing:0;font-size:11px}
.pr-hint{font-size:11.5px;color:#94a3b8;line-height:1.5}

.pr-btn-group{display:grid;gap:8px}
.pr-btn-2{grid-template-columns:1fr 1fr}
.pr-choice{padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;background:#f8fafc;font-size:13.5px;font-weight:600;color:#475569;cursor:pointer;transition:all .15s;text-align:center}
.pr-choice:hover{border-color:#0284c7;color:#0284c7}
.pr-choice.active{background:#0c4a6e;border-color:#0c4a6e;color:#fff}

.pr-select{width:100%;padding:10px 32px 10px 14px;height:46px;border:1.5px solid #cbd5e1;border-radius:10px;font-size:14px;color:#1e293b;background:#f8fafc;appearance:none;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:border-color .18s}
.pr-select:focus{border-color:#0284c7;background-color:#fff}

.pr-suffix-wrap{display:flex;align-items:center;border:1.5px solid #cbd5e1;border-radius:10px;overflow:hidden;background:#f8fafc;transition:border-color .18s}
.pr-suffix-wrap:focus-within{border-color:#0284c7;background:#fff}
.pr-suffix{padding:0 12px;font-size:13px;font-weight:600;color:#64748b;background:#f1f5f9;height:46px;display:flex;align-items:center;border-left:1px solid #e2e8f0;flex-shrink:0}
.pr-input{flex:1;border:none;background:transparent;padding:0 14px;height:46px;font-size:14px;color:#1e293b;outline:none;-moz-appearance:textfield;min-width:0}
.pr-input::-webkit-outer-spin-button,.pr-input::-webkit-inner-spin-button{-webkit-appearance:none}

.pr-goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pr-goal-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1.5px solid #e2e8f0;border-radius:10px;background:#f8fafc;cursor:pointer;transition:all .15s;text-align:center}
.pr-goal-btn svg{color:#94a3b8;transition:color .15s}
.pr-goal-btn:hover{border-color:#0284c7;background:#f0f9ff}
.pr-goal-btn:hover svg{color:#0284c7}
.pr-goal-btn.active{border-color:#0284c7;background:#f0f9ff;box-shadow:0 0 0 3px rgba(2,132,199,.1)}
.pr-goal-btn.active svg{color:#0c4a6e}
.pr-goal-name{font-size:12.5px;font-weight:700;color:#1e293b}
.pr-goal-sub{font-size:11px;color:#64748b}

.pr-disclaimer{display:flex;align-items:flex-start;gap:8px;background:#fefce8;border:1px solid #fde047;border-radius:9px;padding:10px 14px;font-size:12px;color:#854d0e;line-height:1.5}
.pr-disclaimer svg{flex-shrink:0;margin-top:1px;color:#ca8a04}

/* Results */
.pr-results{background:#f0f9ff;padding:20px}
.pr-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;gap:14px;color:#94a3b8;text-align:center}
.pr-placeholder p{font-size:13.5px;line-height:1.6;max-width:220px}

/* Hero */
.pr-hero{background:#0c4a6e;border-radius:14px;padding:20px;margin-bottom:14px;text-align:center}
.pr-hero-label{font-size:11px;font-weight:700;color:#7dd3fc;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.pr-hero-row{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-bottom:8px}
.pr-hero-block{display:flex;flex-direction:column;align-items:center;gap:3px}
.pr-hero-sub2{font-size:10px;font-weight:600;color:#7dd3fc;text-transform:uppercase;letter-spacing:.05em}
.pr-hero-num{font-size:26px;font-weight:800;color:rgba(255,255,255,.7)}
.pr-hero-main{font-size:42px;color:#fff}
.pr-hero-sep{font-size:24px;color:rgba(255,255,255,.3);padding-bottom:4px}
.pr-hero-rate{font-size:12.5px;color:#7dd3fc}

/* Per meal */
.pr-meals{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;margin-bottom:14px}
.pr-meals-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:4px}
.pr-meals-sub{font-size:12px;color:#94a3b8;margin-bottom:12px;line-height:1.5}
.pr-meal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:400px){.pr-meal-grid{grid-template-columns:1fr}}
.pr-meal-card{background:#f0f9ff;border:1px solid #bae6fd;border-radius:9px;padding:10px;text-align:center}
.pr-meal-num{font-size:10px;font-weight:700;text-transform:uppercase;color:#0369a1;letter-spacing:.05em;margin-bottom:3px}
.pr-meal-g{font-size:20px;font-weight:800;color:#0c4a6e}
.pr-meal-sub{font-size:11px;color:#64748b;margin-top:2px}

/* Food sources */
.pr-sources{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px}
.pr-sources-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:12px}
.pr-sources-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:420px){.pr-sources-grid{grid-template-columns:1fr}}
.pr-source-cat-label{font-size:11px;font-weight:700;color:#0c4a6e;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;padding-bottom:6px;border-bottom:1.5px solid #e0f2fe}
.pr-source-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:12.5px;color:#475569;border-bottom:1px solid #f1f5f9}
.pr-source-row:last-child{border-bottom:none}
.pr-source-val{font-weight:700;color:#0c4a6e;flex-shrink:0;margin-left:8px}

@media(max-width:480px){
  .pr-header,.pr-form,.pr-results{padding:16px}
  .pr-title{font-size:17px}
  .pr-hero-main{font-size:34px}
  .pr-hero-num{font-size:20px}
  .pr-goal-grid{grid-template-columns:1fr 1fr 1fr}
}