/* Calculator-page-specific styles. Shared tokens/nav/footer live in styles.css */

header{
  margin-bottom:40px;
}
header p{
  font-size:16px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0;
}
.card{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px;
  box-shadow:0 1px 2px rgba(22,33,29,0.03);
}
.unit-toggle{
  display:inline-flex;
  background:var(--teal-soft);
  border-radius:999px;
  padding:4px;
  margin-bottom:32px;
  gap:2px;
}
.unit-toggle button{
  border:none;
  background:transparent;
  padding:9px 20px;
  border-radius:999px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:13px;
  color:var(--teal);
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.unit-toggle button.active{
  background:var(--teal);
  color:#fff;
}
.fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:8px;
}
.field label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:10px;
}
.field .row{
  display:flex;
  gap:10px;
}
.field input{
  width:100%;
  font-family:'Fraunces', serif;
  font-size:24px;
  font-weight:500;
  color:var(--ink);
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition:border-color .15s ease;
}
.field input:focus{
  border-color:var(--teal);
}
.field .unit-label{
  align-self:center;
  font-size:13px;
  color:var(--ink-soft);
  white-space:nowrap;
}
.divider{
  height:1px;
  background:var(--line);
  margin:28px 0;
}
.result-zone{
  display:none;
}
.result-zone.visible{
  display:block;
}
.result-top{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:6px;
}
.bmi-number{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:64px;
  line-height:1;
  color:var(--teal);
}
.bmi-category{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:999px;
  font-weight:500;
}
.cat-under{ background:#E5F0FA; color:var(--under); }
.cat-healthy{ background:#E3F4EA; color:var(--healthy); }
.cat-over{ background:#FBEFDD; color:var(--over); }
.cat-obese{ background:#FBE6E1; color:var(--obese); }

.gauge-wrap{
  margin:28px 0 8px;
}
.gauge-track{
  position:relative;
  height:14px;
  border-radius:999px;
  overflow:visible;
  background:linear-gradient(to right,
    var(--under) 0%, var(--under) 18.5%,
    var(--healthy) 18.5%, var(--healthy) 45%,
    var(--over) 45%, var(--over) 62%,
    var(--obese) 62%, var(--obese) 100%);
}
.gauge-marker{
  position:absolute;
  top:-7px;
  width:4px;
  height:28px;
  background:var(--ink);
  border-radius:2px;
  transform:translateX(-2px);
  transition:left .35s cubic-bezier(.2,.8,.2,1);
}
.gauge-marker::after{
  content:'';
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:6px solid var(--ink);
}
.gauge-labels{
  display:flex;
  justify-content:space-between;
  margin-top:14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.04em;
  color:var(--ink-soft);
}
.note{
  margin-top:26px;
  font-size:14px;
  line-height:1.65;
  color:var(--ink-soft);
  background:var(--teal-soft);
  border-radius:12px;
  padding:16px 18px;
}
.empty-hint{
  font-size:14px;
  color:var(--ink-soft);
  padding:8px 0 2px;
}

.info-section{
  margin-top:48px;
}
.info-section h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:24px;
  color:var(--teal);
  margin:0 0 18px;
}
.info-section p{
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink-soft);
  margin:0 0 20px;
}
.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}
.info-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px;
}
.info-card h3{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:14.5px;
  color:var(--ink);
  margin:0 0 8px;
}
.info-card p{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}
.range-table{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.range-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.range-row:last-child{ border-bottom:none; }
.range-row strong{
  flex:1;
  color:var(--ink);
}
.range-row span:last-child{
  color:var(--ink-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
}
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
}

.related-block{
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.related-block .related-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

@media (max-width:560px){
  .fields{grid-template-columns:1fr;}
  .card{padding:26px 20px;}
  .bmi-number{font-size:52px;}
  .info-grid{grid-template-columns:1fr;}
  .related-block .related-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .gauge-marker{transition:none;}
}