/* Percentage calculator - three stacked question cards, each with a live result.
   Reuses base .field; colors come from theme tokens only. */

.pc-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px; margin-bottom: 16px;
}
.pc-title { font-size: 16px; color: var(--muted); font-weight: 600; margin-bottom: 12px; }

/* Equation line: text flowing around inline number inputs. */
.pc-eq {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 19px; line-height: 2;
}
.pc-num { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
/* Hide the spinner arrows - they crowd the narrow inline inputs. */
.pc-num::-webkit-outer-spin-button,
.pc-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pc-num { -moz-appearance: textfield; }

.pc-out {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.pc-out-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.pc-result {
    flex: 1; min-width: 0; font-size: 24px; font-weight: 700; color: var(--accent-strong);
    font-variant-numeric: tabular-nums; min-height: 1.4em;
}
.pc-result:empty::after { content: "-"; color: var(--faint); font-weight: 400; }