/* Salary + gratuity calculator: only what app.css doesn't cover. */
.tool-head .pill { margin-bottom: 12px; }
#sc-form, #gr-form { display: grid; gap: 16px; }
#sc-form fieldset, #gr-form fieldset { margin-bottom: 0; gap: 8px; }
#sc-form legend, #gr-form legend { font: 700 15px/1.3 var(--font); margin-bottom: 8px; }
#sc-form [hidden], #gr-form [hidden] { display: none; }
.sc-inr { position: relative; display: grid; }
.sc-inr::before { content: '₹'; position: absolute; left: 14px; line-height: 50px; color: var(--muted); font-weight: 400; pointer-events: none; }
.sc-inr input { padding-left: 30px; }
.hint.hot { color: var(--warn); font-weight: 600; }

.sc-out { display: grid; gap: 12px; }
.sc-h2 { margin: 0; font-size: 20px; }
.sc-label, .sc-sub, .sc-formula { margin: 0; color: var(--muted); font-size: 14px; }
.sc-big { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 8vw, 3rem); line-height: 1; color: var(--leaf); }
.sc-formula { font-variant-numeric: tabular-nums; }
.sc-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px; }
.sc-table caption { text-align: left; font-weight: 700; padding-bottom: 4px; }
.sc-table th { text-align: left; font-weight: 400; color: var(--muted); }
.sc-table th, .sc-table td { padding: 7px 0; border-bottom: 1px solid var(--border); }
.sc-table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.sc-table tr.sum th, .sc-table tr.sum td { font-weight: 700; color: var(--text); border-bottom: 0; }
.sc-adv { padding: 14px 16px; }
.sc-adv summary { cursor: pointer; font-weight: 600; color: var(--indigo); }
.sc-adv-in { display: grid; gap: 16px; margin-top: 14px; }