/* eGFR Calculator — Tool Stylesheet v1.0
   Inherits LML theme CSS variables. Self-contained, no theme changes needed. */

/* ── Page layout ────────────────────────────────────────────────────────── */
.egfr-page { display: flex; flex-direction: column; gap: 20px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.egfr-hero          { text-align: center; padding: 32px 0 8px; }
.egfr-hero h1       {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 800; color: var(--color-dark, #0f172a);
    margin: 8px 0 10px; letter-spacing: -0.02em;
}
.egfr-hero-sub      { font-size: var(--text-lg, 1.125rem); color: var(--color-text-muted, #64748b); margin: 0; }

/* ── Card ───────────────────────────────────────────────────────────────── */
.egfr-card {
    background: var(--color-white, #fff);
    border: 1.5px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}
.egfr-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    background: var(--color-surface, #f8fafc);
}
.egfr-card-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--color-text, #1e293b);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.egfr-card-title svg { stroke: var(--color-primary, #0D7C7C); flex-shrink: 0; }

/* ── Form ───────────────────────────────────────────────────────────────── */
.egfr-form {
    padding: 24px 20px;
    display: flex; flex-direction: column; gap: 20px;
}
.egfr-field-group   { display: flex; flex-direction: column; gap: 6px; }
.egfr-field-group label {
    font-size: 13px; font-weight: 700; color: var(--color-text, #1e293b);
}
.egfr-input-row     { display: flex; align-items: center; gap: 10px; }
.egfr-hint          { font-size: 11px; color: var(--color-text-muted, #64748b); margin: 0; }

/* Input */
.egfr-input {
    padding: 10px 14px;
    border: 1.5px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    font-size: 16px; font-weight: 600; color: var(--color-dark, #0f172a);
    outline: none; transition: border-color .15s, box-shadow .15s;
    width: 160px;
}
.egfr-input--sm     { width: 120px; }
.egfr-input:focus   {
    border-color: var(--color-primary, #0D7C7C);
    box-shadow: 0 0 0 3px rgba(13,124,124,.12);
}
.egfr-unit-label    { font-size: 13px; color: var(--color-text-muted, #64748b); font-weight: 600; }

/* Unit toggle */
.egfr-unit-toggle   { display: flex; border: 1.5px solid var(--color-border, #e2e8f0); border-radius: 6px; overflow: hidden; }
.egfr-unit-btn {
    padding: 8px 14px; font-size: 12px; font-weight: 600;
    background: #fff; color: var(--color-text-muted, #64748b);
    border: none; cursor: pointer; transition: all .15s;
}
.egfr-unit-btn.active {
    background: var(--color-primary, #0D7C7C); color: #fff;
}
.egfr-unit-btn:hover:not(.active) { background: var(--color-surface, #f8fafc); }

/* Sex toggle */
.egfr-sex-toggle    { display: flex; gap: 8px; }
.egfr-sex-btn {
    padding: 9px 24px; font-size: 13px; font-weight: 700;
    border-radius: var(--radius-md, 8px);
    border: 2px solid var(--color-border, #e2e8f0);
    background: #fff; color: var(--color-text-muted, #64748b);
    cursor: pointer; transition: all .15s;
}
.egfr-sex-btn.active {
    border-color: var(--color-primary, #0D7C7C);
    background: var(--color-primary-light, rgba(13,124,124,.08));
    color: var(--color-primary, #0D7C7C);
}
.egfr-sex-btn:hover:not(.active) { border-color: var(--color-border-dark, #cbd5e1); }

/* Calculate button */
.egfr-calc-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; background: var(--color-primary, #0D7C7C);
    color: #fff; font-size: 15px; font-weight: 700;
    border: none; border-radius: var(--radius-btn, 50px);
    cursor: pointer; transition: background .15s;
    align-self: flex-start;
}
.egfr-calc-btn:hover   { background: var(--color-primary-dark, #0a6363); }
.egfr-calc-btn svg     { stroke: #fff; }

/* ── Result ─────────────────────────────────────────────────────────────── */
.egfr-result {
    padding: 24px 20px;
    border-top: 1.5px solid var(--color-border, #e2e8f0);
    background: var(--color-surface-teal, #f0fdfb);
}
.egfr-result-main   { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }

/* Value */
.egfr-result-value-wrap { text-align: center; min-width: 120px; }
.egfr-result-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted, #64748b); margin-bottom: 4px; }
.egfr-result-value  { font-size: 3rem; font-weight: 900; color: var(--color-primary, #0D7C7C); line-height: 1; }
.egfr-result-unit   { font-size: 11px; color: var(--color-text-muted, #64748b); margin-top: 4px; }

/* Stage card */
.egfr-stage-card {
    flex: 1; padding: 14px 18px;
    border-radius: var(--radius-md, 8px);
    border: 2px solid transparent;
    min-width: 200px;
}
.egfr-stage-card[data-stage="G1"]  { background: #dcfce7; border-color: #86efac; }
.egfr-stage-card[data-stage="G2"]  { background: #e8f7f7; border-color: #5eead4; }
.egfr-stage-card[data-stage="G3a"] { background: #fef3c7; border-color: #fcd34d; }
.egfr-stage-card[data-stage="G3b"] { background: #ffedd5; border-color: #fdba74; }
.egfr-stage-card[data-stage="G4"]  { background: #fee2e2; border-color: #fca5a5; }
.egfr-stage-card[data-stage="G5"]  { background: #fce7f3; border-color: #f9a8d4; }
.egfr-stage-name    { font-size: 18px; font-weight: 800; margin-bottom: 6px; color: var(--color-dark, #0f172a); }
.egfr-stage-desc    { font-size: 13px; line-height: 1.5; color: var(--color-text, #1e293b); }

/* Interpretation */
.egfr-interpretation {
    background: #fff; border-radius: var(--radius-md, 8px);
    padding: 14px 16px; font-size: 13px; line-height: 1.6;
    border: 1px solid var(--color-border, #e2e8f0);
}
.egfr-interpretation ul { margin: 8px 0 0 16px; padding: 0; }
.egfr-interpretation li { margin-bottom: 4px; }
.egfr-interp-title  { font-weight: 700; color: var(--color-dark, #0f172a); margin-bottom: 8px; font-size: 14px; }

/* ── Stages table ───────────────────────────────────────────────────────── */
.egfr-stages-table-wrap { overflow-x: auto; }
.egfr-stages-table  { width: 100%; border-collapse: collapse; font-size: 13px; }
.egfr-stages-table th {
    background: var(--color-surface, #f8fafc); padding: 10px 14px;
    text-align: left; font-weight: 700; color: var(--color-text-secondary, #475569);
    border-bottom: 2px solid var(--color-border, #e2e8f0); white-space: nowrap;
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.egfr-stages-table td {
    padding: 10px 14px; border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    color: var(--color-text, #1e293b); vertical-align: middle;
}
.egfr-row--g1 td:first-child  { border-left: 4px solid #22c55e; }
.egfr-row--g2 td:first-child  { border-left: 4px solid #14b8a6; }
.egfr-row--g3a td:first-child { border-left: 4px solid #f59e0b; }
.egfr-row--g3b td:first-child { border-left: 4px solid #f97316; }
.egfr-row--g4 td:first-child  { border-left: 4px solid #ef4444; }
.egfr-row--g5 td:first-child  { border-left: 4px solid #db2777; }

/* ── Formula explainer ──────────────────────────────────────────────────── */
.egfr-explainer     { padding: 20px; font-size: 13px; line-height: 1.7; color: var(--color-text, #1e293b); }
.egfr-explainer p   { margin: 0 0 14px; }
.egfr-formula-box {
    background: var(--color-surface, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    padding: 14px 16px; margin: 0 0 14px;
}
.egfr-formula-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted, #64748b); margin-bottom: 8px; }
.egfr-formula {
    display: block; font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 13px; color: var(--color-dark, #0f172a); word-break: break-word; line-height: 1.6;
    white-space: normal;
}
.egfr-formula-note  { font-size: 11px; color: var(--color-text-muted, #64748b); margin-top: 8px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .egfr-result-main   { flex-direction: column; }
    .egfr-result-value  { font-size: 2.5rem; }
    .egfr-input         { width: 100%; max-width: 200px; }
    .egfr-calc-btn      { width: 100%; justify-content: center; }
    .egfr-stages-table  { font-size: 12px; }
}