/* Tip calculator + bill splitter - inputs on top, result row below.
   Reuses base .field; colors come from theme tokens only. */

.tip-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.tip-field { display: flex; flex-direction: column; gap: 8px; }
.tip-field-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.tip-bill { max-width: 12rem; font-variant-numeric: tabular-nums; }

.tip-pct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tip-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tip-chips button {
    font: inherit; font-size: 14px; padding: 6px 12px; cursor: pointer;
    border: 1px solid var(--border-strong); border-radius: 8px;
    background: var(--surface); color: var(--text);
    transition: border-color .15s, background .15s, color .15s;
}
.tip-chips button:hover { border-color: var(--accent); color: var(--accent-strong); }
.tip-chips button.is-active { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }

.tip-input-unit { display: inline-flex; align-items: center; gap: 6px; }
.tip-pct { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.tip-unit { font-size: 14px; color: var(--muted); }

.tip-people { display: inline-flex; align-items: center; gap: 8px; }
.tip-step {
    font: inherit; font-size: 18px; line-height: 1; width: 2.4rem; height: 2.4rem; cursor: pointer;
    border: 1px solid var(--border-strong); border-radius: 8px;
    background: var(--surface); color: var(--text);
}
.tip-step:hover { border-color: var(--accent); color: var(--accent-strong); }
.tip-people-num { width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }

.tip-rounding { display: flex; flex-wrap: wrap; gap: 16px; }
.tip-check { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); cursor: pointer; }

/* Result row. */
.tip-results {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px; margin-bottom: 8px;
}
.tip-res { display: flex; flex-direction: column; gap: 2px; min-width: 6rem; }
.tip-res-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.tip-res-value { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tip-res-sub { font-size: 12px; color: var(--muted); }
.tip-res-accent { flex: 1; padding-left: 12px; border-left: 1px solid var(--border); }
.tip-res-accent .tip-res-value { color: var(--accent-strong); }

.tip-copy { align-self: flex-start; }