/* ==========================================================================
   Tathved patient tools — shared styling (Growth Calculator, Vaccine Schedule,
   Milestone Tracker). Uses the brand tokens defined in custom.css.
   ========================================================================== */
.tool-area{ padding:70px 0 90px; background:linear-gradient(180deg,#f4fbfb 0%,#ffffff 60%); }
.tool-wrap{ max-width:1120px; margin:0 auto; }

/* intro + trust strip */
.tool-intro{ text-align:center; max-width:760px; margin:0 auto 34px; }
.tool-intro h2{ font-family:'Lora',Georgia,serif; color:var(--brand-navy); font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.4rem); margin:0 0 12px; }
.tool-intro p{ color:#4a585f; font-size:16px; line-height:1.7; margin:0; }
.tool-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:18px 0 0; }
.tool-badge{ display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--brand-navy);
  border:1px solid #e3eef0; border-radius:30px; padding:7px 15px; font-size:13px; font-weight:600;
  box-shadow:0 8px 20px rgba(15,44,94,.06); }
.tool-badge i{ color:var(--brand-teal); }

/* card shell */
.tool-card{ background:#fff; border:1px solid #e7eef0; border-radius:22px; padding:26px 26px 30px;
  box-shadow:0 22px 50px rgba(15,44,94,.08); }
.tool-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:24px; align-items:start; }
@media (max-width:900px){ .tool-grid{ grid-template-columns:1fr; } }

.tool-card__title{ display:flex; align-items:center; gap:10px; font-family:'Lora',Georgia,serif;
  color:var(--brand-navy); font-weight:700; font-size:20px; margin:0 0 18px; }
.tool-card__title i{ width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center;
  justify-content:center; border-radius:11px; font-size:16px; color:#fff;
  background:linear-gradient(135deg,var(--brand-teal),var(--brand-navy)); }

/* form */
.gc-form .gc-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gc-field{ margin:0 0 14px; }
.gc-field--full{ grid-column:1 / -1; }
.gc-field label{ display:block; font-size:13px; font-weight:600; color:var(--brand-navy); margin:0 0 6px; }
.gc-field label .opt{ color:#90a0a8; font-weight:500; }
.gc-field input, .gc-field select{ width:100%; height:46px; padding:0 14px; font-size:15px;
  color:#16314f; background:#fff; border:1.5px solid #dde7ea; border-radius:12px; outline:none;
  transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; }
.gc-field input:focus, .gc-field select:focus{ border-color:var(--brand-teal);
  box-shadow:0 0 0 4px rgba(34,171,164,.14); }
.gc-field .hint{ font-size:11.5px; color:#90a0a8; margin:5px 0 0; }
.gc-seg{ display:flex; gap:8px; position:relative; }
/* position:relative above + a pinned 1px box keeps these visually-hidden radios
   from resolving against the viewport and forcing a horizontal scrollbar. */
.gc-seg input{ position:absolute; left:0; top:0; width:1px; height:1px;
  opacity:0; pointer-events:none; }
.gc-seg label{ flex:1; text-align:center; margin:0; padding:11px 0; border:1.5px solid #dde7ea;
  border-radius:12px; cursor:pointer; font-weight:600; color:#5a6b73; transition:.15s; }
.gc-seg input:checked + label{ border-color:var(--brand-teal); color:var(--brand-navy);
  background:var(--brand-mint-tint); box-shadow:0 0 0 3px rgba(34,171,164,.12); }

.gc-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.gc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:none; border-radius:30px; padding:13px 22px; font-size:15px; font-weight:700; transition:.2s; }
.gc-btn--primary{ color:#fff; background:linear-gradient(135deg,var(--brand-teal),var(--brand-navy));
  box-shadow:0 14px 28px rgba(22,60,128,.22); }
.gc-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px rgba(22,60,128,.28); }
.gc-btn--ghost{ color:var(--brand-navy); background:#fff; border:1.5px solid #dde7ea; }
.gc-btn--ghost:hover{ border-color:var(--brand-teal); color:var(--brand-teal); }
.gc-btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* errors */
.gc-error{ background:#fdecea; border:1px solid #f5c4bd; color:#b03a2e; border-radius:12px;
  padding:11px 14px; font-size:13.5px; margin:0 0 14px; display:none; }
.gc-error.show{ display:block; }

/* results */
.gc-results{ display:none; }
.gc-results.show{ display:block; }
.gc-age{ background:var(--brand-sky-tint); border:1px solid #d6e6f6; border-radius:14px;
  padding:14px 16px; margin:0 0 16px; }
.gc-age strong{ color:var(--brand-navy); }
.gc-age .corr{ display:block; margin-top:5px; font-size:13px; color:var(--brand-sky-ink); }

.gc-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .gc-metrics{ grid-template-columns:1fr; } }
.gc-metric{ border:1px solid #e7eef0; border-radius:14px; padding:14px 15px; background:#fcfeff; }
.gc-metric__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gc-metric__name{ font-size:12.5px; font-weight:700; color:#5a6b73; text-transform:uppercase; letter-spacing:.4px; }
.gc-metric__val{ font-size:22px; font-weight:800; color:var(--brand-navy); margin:6px 0 2px; }
.gc-metric__val small{ font-size:13px; font-weight:600; color:#90a0a8; }
.gc-metric__sub{ font-size:12.5px; color:#5a6b73; }
.gc-dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.gc-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  padding:3px 9px; border-radius:20px; }
.lvl-normal{ background:#e6f7f2; color:#1b8a6b; } .dot-normal{ background:#1fae8c; }
.lvl-watch{ background:#fef5e3; color:#b9821a; }  .dot-watch{ background:#e8a91d; }
.lvl-consult{ background:#fdecea; color:#c0392b; } .dot-consult{ background:#d65745; }
.gc-metric--na{ opacity:.6; } .gc-metric--na .gc-metric__val{ color:#aab4ba; }

/* chart panel */
.gc-chart-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; }
.gc-chart-tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.gc-tab{ cursor:pointer; border:1.5px solid #dde7ea; background:#fff; color:#5a6b73; border-radius:20px;
  padding:6px 13px; font-size:12.5px; font-weight:600; }
.gc-tab.active{ border-color:var(--brand-teal); color:#fff; background:var(--brand-teal); }
.gc-chart-box{ position:relative; height:360px; }
.gc-legend{ display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 0; font-size:12px; color:#5a6b73; }
.gc-legend span{ display:inline-flex; align-items:center; gap:6px; }
.gc-legend i{ width:16px; height:3px; border-radius:2px; display:inline-block; }

/* visits / longitudinal */
.gc-visits{ margin:18px 0 0; }
.gc-visits h4{ font-size:14px; color:var(--brand-navy); margin:0 0 10px; font-weight:700; }
.gc-visits table{ width:100%; border-collapse:collapse; font-size:13px; }
.gc-visits th, .gc-visits td{ text-align:left; padding:8px 10px; border-bottom:1px solid #eef3f4; color:#4a585f; }
.gc-visits th{ color:#90a0a8; font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; }
.gc-visits tr:last-child td{ border-bottom:none; }
.gc-visits__empty{ font-size:13px; color:#90a0a8; }

/* notices + disclaimer */
.gc-notice{ display:flex; gap:11px; background:var(--brand-sky-tint); border:1px solid #d6e6f6;
  color:#2a567f; border-radius:12px; padding:12px 15px; font-size:13px; line-height:1.55; margin:16px 0 0; }
.gc-notice i{ color:var(--brand-sky-ink); margin-top:2px; }
.gc-disclaimer{ display:flex; gap:11px; background:#fff8ec; border:1px solid #f4e2bf; color:#8a6a1f;
  border-radius:14px; padding:14px 17px; font-size:12.5px; line-height:1.6; margin:26px auto 0; max-width:1120px; }
.gc-disclaimer i{ color:#d9a32a; margin-top:2px; font-size:15px; }
.gc-print-note{ font-size:11.5px; color:#a7b1b7; text-align:center; margin:14px 0 0; }

/* extra badge tones */
.lvl-sky{ background:var(--brand-sky-tint); color:var(--brand-sky-ink); }
.lvl-muted{ background:#eef2f4; color:#90a0a8; }

/* ===== Vaccine schedule ===== */
.vx-age{ font-size:15px; color:#4a585f; margin:0 0 14px; }
.vx-age strong{ color:var(--brand-navy); }
.vx-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 6px; }
.vx-chip{ display:inline-flex; align-items:center; gap:7px; border-radius:30px; padding:8px 15px;
  font-size:13px; font-weight:600; border:1px solid transparent; }
.vx-chip b{ font-size:15px; }
.vx-chip--overdue{ background:#fdecea; color:#c0392b; border-color:#f5c4bd; }
.vx-chip--due{ background:#fef5e3; color:#b9821a; border-color:#f4e2bf; }
.vx-chip--upcoming{ background:var(--brand-sky-tint); color:var(--brand-sky-ink); border-color:#d6e6f6; }
.vx-chip--done{ background:#e6f7f2; color:#1b8a6b; border-color:#bfe8db; }
.vx-section{ margin:22px 0 0; }
.vx-section h4{ font-size:14px; color:var(--brand-navy); margin:0 0 10px; font-weight:700; }
.vx-dorow{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border:1px solid #e7eef0; border-radius:12px; padding:11px 14px; margin:0 0 8px; background:#fcfeff; }
.vx-dorow__r{ display:flex; align-items:center; gap:10px; }
.vx-allclear{ display:flex; align-items:center; gap:9px; background:#e6f7f2; border:1px solid #bfe8db;
  color:#1b8a6b; border-radius:12px; padding:13px 16px; font-size:14px; font-weight:600; margin:18px 0 0; }
.vx-dose{ font-size:12px; font-weight:600; color:#90a0a8; }
.vx-note{ display:block; font-size:11.5px; color:#b9821a; margin-top:2px; }
.vx-prot{ display:block; font-size:12px; color:#5a6b73; margin-top:2px; }
.vx-date{ font-size:12.5px; font-weight:600; color:var(--brand-navy); white-space:nowrap; }

.vx-group{ border:1px solid #e7eef0; border-radius:14px; overflow:hidden; margin:0 0 12px; }
.vx-group__age{ background:var(--brand-mint-tint); color:var(--brand-navy); font-weight:700;
  font-size:13.5px; padding:9px 15px; }
.vx-table{ width:100%; border-collapse:collapse; }
.vx-table td{ padding:11px 15px; border-top:1px solid #eef3f4; vertical-align:top; font-size:14px; color:#16314f; }
.vx-table tr:first-child td{ border-top:none; }
.vx-stcell{ text-align:right; white-space:nowrap; }
.vx-stcell .gc-badge{ margin:0 8px; }
.vx-check{ width:30px; height:30px; border-radius:8px; border:1.5px solid #dde7ea; background:#fff;
  color:#cfd8dc; cursor:pointer; transition:.15s; vertical-align:middle; }
.vx-check:hover{ border-color:var(--brand-teal); color:var(--brand-teal); }
.vx-check.on{ background:var(--brand-teal); border-color:var(--brand-teal); color:#fff; }

/* ===== Milestone tracker ===== */
.ms-help{ font-size:13.5px; color:#5a6b73; background:var(--brand-mint-tint); border-radius:12px; padding:12px 15px; margin:0 0 18px; }
.ms-bandrow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .ms-bandrow{ grid-template-columns:1fr; } }
.ms-bandnote{ font-size:13px; color:var(--brand-sky-ink); background:var(--brand-sky-tint);
  border:1px solid #d6e6f6; border-radius:10px; padding:9px 13px; margin:0 0 18px; }
.ms-domain{ margin:0 0 20px; }
.ms-domain h4{ display:flex; align-items:center; gap:9px; font-size:15px; color:var(--brand-navy);
  font-weight:700; margin:0 0 10px; }
.ms-domain h4 i{ color:var(--brand-teal); }
.ms-item{ display:flex; align-items:flex-start; gap:12px; padding:11px 13px; border:1px solid #e7eef0;
  border-radius:12px; margin:0 0 8px; cursor:pointer; transition:.15s; background:#fff; }
.ms-item:hover{ border-color:var(--brand-teal); }
.ms-item.on{ background:var(--brand-mint-tint); border-color:var(--brand-teal); }
.ms-item input{ position:absolute; opacity:0; pointer-events:none; }
.ms-box{ flex:0 0 auto; width:24px; height:24px; border-radius:7px; border:1.5px solid #cdd8dc;
  background:#fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px;
  margin-top:1px; transition:.15s; }
.ms-item.on .ms-box{ background:var(--brand-teal); border-color:var(--brand-teal); }
.ms-txt{ font-size:14.5px; color:#16314f; line-height:1.45; }

.ms-verdict{ display:flex; gap:13px; align-items:flex-start; border-radius:14px; padding:16px 18px; }
.ms-verdict.lvl-normal{ background:#e6f7f2; } .ms-verdict.lvl-watch{ background:#fef5e3; } .ms-verdict.lvl-consult{ background:#fdecea; }
.ms-verdict .gc-dot{ width:14px; height:14px; margin-top:5px; }
.ms-verdict strong{ font-size:16px; color:var(--brand-navy); } .ms-verdict p{ margin:5px 0 0; font-size:14px; color:#4a585f; line-height:1.6; }
.ms-bars{ margin:18px 0 0; display:grid; gap:13px; }
.ms-bar__top{ display:flex; justify-content:space-between; align-items:center; font-size:13.5px; color:#4a585f; margin:0 0 6px; }
.ms-bar__top i{ color:var(--brand-teal); margin-right:6px; } .ms-bar__top strong{ color:var(--brand-navy); }
.ms-bar__track{ height:9px; background:#eef3f5; border-radius:6px; overflow:hidden; }
.ms-bar__fill{ display:block; height:100%; border-radius:6px; }
.fill-normal{ background:#1fae8c; } .fill-watch{ background:#e8a91d; } .fill-consult{ background:#d65745; }

/* print: show only the schedule / result */
@media print {
  header, footer, .mh-wa-float, .vl-offcanvas, .inner-header-section-area, .tool-intro,
  .gc-actions, .vx-check, .gc-disclaimer i, #ms-checklist-card .gc-actions { display:none !important; }
  .tool-area{ padding:0; background:#fff; }
  .tool-card{ box-shadow:none; border:none; padding:0; }
  .vx-group, .gc-disclaimer, .ms-domain, .ms-verdict{ break-inside:avoid; }
  body{ background:#fff; }
}