/* ===== Theme: Tutor Me Medical PT Assessment Game style ===== */
.abg-app {
  --ink:#1a1a1a;
  --muted:#6b6b6b;
  --bg:#ffffff;
  --card:#ffffff;
  --accent:#f5b700;
  --good:#1c9c5a;
  --warn:#f4a100;
  --bad:#e44;
  font-family: 'Inter', ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  padding: clamp(12px, 2vw, 24px);
  max-width: 980px;
  margin: 0 auto;
}

/* ===== Hero ===== */
.abg-hero {
  text-align:center;
  padding: 20px 12px 10px;
  border-bottom: 2px solid #f2f2f2;
}
.abg-hero h1 {
  font-size: clamp(30px, 5vw, 44px);
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #101010;
}
.abg-tag {
  color: #505050;
  margin: 0 auto 12px;
  font-size: 1.05rem;
}

/* ===== Card ===== */
.abg-card {
  background: var(--card);
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  padding: 18px;
  margin: 16px 0;
}
.abg-card.soft {
  background: #fafafa;
  border: 1px solid #eaeaea;
}

/* ===== Form ===== */
.abg-grid {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.abg-grid.oxy,
.abg-grid.ag { grid-template-columns: repeat(4, 1fr); }

.abg-row {
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}
.abg-row .abg-switch { margin-left:auto; }

label span {
  display:block;
  font-size: 1rem;           /* larger intake labels */
  color: var(--muted);
  margin-bottom: 4px;
}
input[type="number"] {
  width:100%;
  padding:12px 14px;         /* larger inputs */
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1.1rem;         /* larger input text */
  outline: none;
  background:#fff;
}
input[type="number"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245,183,0,0.25);
}

/* Toggles & Switches */
.abg-toggle {
  display:flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius: 999px; border:1px solid #ccc;
  cursor:pointer; background: #fff;
}
.abg-toggle input { appearance:none; width:14px; height:14px; border-radius:50%; border:2px solid var(--accent); }
.abg-toggle input:checked { background: var(--accent); }

.abg-switch { display:flex; align-items:center; gap:10px; cursor:pointer; }
.abg-switch input { display:none; }
.abg-switch .slider { width:40px; height:22px; background:#ddd; border-radius:999px; position:relative; }
.abg-switch .slider::after { content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 2px 4px rgba(0,0,0,.15); }
.abg-switch input:checked + .slider { background: var(--accent); }
.abg-switch input:checked + .slider::after { transform: translateX(18px); }
.abg-switch .label { color: var(--muted); font-size:.9rem; }

/* ===== Buttons: centered & bigger ===== */
.abg-actions {
  width: 100%;
  display: flex;
  justify-content: center; /* center buttons */
  gap: 12px;
  margin-top: 16px;
}
.abg-btn {
  background: var(--accent);
  color:#000;
  border:none;
  padding:12px 22px;        /* bigger button */
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  font-size: 1.1rem;        /* bigger text */
  transition: background .2s ease;
}
.abg-btn:hover { background: #ffcc33; }
.abg-btn.ghost { background: transparent; color: var(--ink); border:1px solid #ccc; }

/* ===== Results ===== */
.abg-results[hidden]{ display:none !important; } /* ensure hidden by CSS too */

.abg-results h2 {
  display:flex; align-items:center; gap:8px; margin:6px 0 8px;
  font-size: 1.25rem; font-weight: 700;
}
#summary { font-size: 1.1rem; font-weight: 600; color: #1a1a1a; }

/* Chip shows overall status */
.chip { font-size: 1rem; font-weight: 700; color:#fff; padding:6px 14px; border-radius: 999px; }
.chip.good{ background: var(--good); }   /* Normal */
.chip.warn{ background: var(--warn); }   /* Compensated */
.chip.bad{  background: var(--bad); }    /* Decompensated */

.abg-columns { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.abg-list { margin:8px 0 0; padding-left: 18px; font-size: .98rem; }
.abg-divider { height:1px; background:#e5e5e5; margin:14px 0; }
.abg-details summary { cursor:pointer; color: var(--accent); font-weight: 600; }
.abg-footer { text-align:center; color: var(--muted); font-size:.85rem; margin-top:10px; }

/* ===== Responsive ===== */
@media (max-width: 860px){
  .abg-grid{ grid-template-columns: repeat(2, 1fr); }
  .abg-grid.oxy, .abg-grid.ag { grid-template-columns: repeat(2, 1fr); }
  .abg-columns{ grid-template-columns: 1fr; }
}