/* ===== SCOPE / BASE ===== */
#medMathApp{
  --radius:14px; --gap:14px; --bg:#fff; --ink:#111; --muted:#6b7280; --accent:#bfe3ef;
  --line:#e5e7eb; --brand-yellow:#F2D335;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink); max-width: 1000px; margin:0 auto; padding-inline:8px;
}
#medMathApp *{box-sizing:border-box;}
/* Hide old big heading text but keep in DOM for screen readers */
#medMathApp #mma-title{position:absolute; left:-999em;}

/* ===== HEADER + NAV TABS (match site menu) ===== */
#medMathApp .mma-header{display:grid; gap:10px; align-items:end; margin:0 0 8px;}
@media (min-width:760px){ #medMathApp .mma-header{grid-template-columns: 1fr auto;} }

#medMathApp .mma-tabs{
  position:relative;
  display:flex;
  gap:28px;              /* spacing between items */
  justify-content:center; /* center the tab group */
  background:transparent;
  border:none;
  padding:0 4px;
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

#medMathApp .mma-tab{
  position:relative; flex:0 0 auto; background:transparent; border:none; cursor:pointer;
  padding:14px 0 10px; font-weight:700; font-size:16px; color:#111;
  transition: color .15s ease, opacity .15s ease;
}
#medMathApp .mma-tab:hover{ opacity:.75; }
#medMathApp .mma-tab[aria-selected="true"]{ color:#111; }

/* Yellow underline indicator */
#medMathApp .mma-inkbar{
  position:absolute; bottom:0; height:3px; width:0; left:0;
  background:var(--brand-yellow); border-radius:3px;
  transition:left .25s ease, width .25s ease;
  z-index:0;
}
#medMathApp .mma-tab{ z-index:1; }

/* ===== Card / Fields ===== */
#medMathApp .mma-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(14px,2.5vw,20px);}
#medMathApp .mma-row{display:grid;grid-template-columns:1fr 220px;gap:10px;margin-bottom:12px;align-items:center;}
#medMathApp .mma-row label{font-size:14px;color:var(--muted);}
#medMathApp .mma-row input[type="number"],
#medMathApp .mma-row input[type="text"],
#medMathApp .mma-row select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px;}
#medMathApp .mma-hint{font-size:12px;color:var(--muted);margin:-6px 0 8px;}

#medMathApp .mma-actions{display:flex;gap:10px;margin-top:6px;}
#medMathApp button{appearance:none;border:1px solid transparent;padding:10px 16px;border-radius:999px;background:var(--accent);color:#0b3b4a;font-weight:700;cursor:pointer;}
#medMathApp button.ghost{background:#f8fafc;border-color:var(--line);color:#111;}
#medMathApp button:disabled{opacity:.6;cursor:not-allowed;}

#medMathApp .mma-result{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px;font-size:15px;}
#medMathApp .mma-result .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
#medMathApp .mma-footnote{color:var(--muted);font-size:12px;margin:10px 4px 0;}

@media (max-width:700px){ #medMathApp .mma-row{grid-template-columns:1fr;} }