/* calculator.css - form input dan kotak hasil bergaya slip gaji */
.calc {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 1.3rem; margin: 1.4rem 0;
}
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.field .hint { display: block; font-size: .88rem; color: var(--c-muted); margin-top: .25rem; }
.input, .select {
  width: 100%; font: inherit; padding: .65rem .75rem; color: var(--c-ink);
  background: #fff; border: 1px solid #98a4b0; border-radius: var(--radius);
}
.input:focus, .select:focus { border-color: var(--c-primary); }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix span {
  display: flex; align-items: center; padding: 0 .75rem; background: var(--c-tint);
  border: 1px solid #98a4b0; border-right: 0; border-radius: var(--radius) 0 0 var(--radius); font-weight: 600;
}
.input-prefix .input { border-radius: 0 var(--radius) var(--radius) 0; font-variant-numeric: tabular-nums; }
.field-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.field-error { color: var(--c-danger); font-weight: 600; margin: .6rem 0 0; }

/* Kotak hasil: baris dengan garis titik-titik seperti slip gaji */
.result { margin-top: 1.6rem; background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--c-primary); padding: 1.1rem 1.3rem; }
.result h2, .result h3 { margin: 0 0 .8rem; font-size: 1.15rem; }
.slip { margin: 0; }
.slip-row { display: flex; align-items: baseline; gap: .6rem; padding: .3rem 0; }
.slip-row dt { color: var(--c-muted); }
.slip-row dd { margin: 0; margin-left: auto; font-variant-numeric: tabular-nums; text-align: right; }
.slip-row::after { content: none; }
.slip-row { border-bottom: 1px dotted #9aa6b2; }
.slip-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: .8rem; padding: .7rem .8rem; background: var(--c-tint);
  border-top: 3px double var(--c-primary);
}
.slip-total dt { font-weight: 700; }
.slip-total dd { margin: 0; font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.result .note { font-size: .9rem; color: var(--c-muted); margin: .8rem 0 0; }