/* Celestine — Estimated Staff Time Saved calculator (2026-11-02). Same file on the website and
   the dashboard. Each page sets the --stc-* colors from its own design tokens. */
.stc { --stc-accent: #A2615A; --stc-text: #302D2A; --stc-muted: #5A554F; --stc-line: #E7E0D6;
       --stc-field: #FFFFFF; --stc-soft: #F1E7E4; color: var(--stc-text); }
.stc-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px 16px; align-items: start; }
.stc-field { display: flex; flex-direction: column; min-width: 0; }
/* Labels share one height (up to three lines) so every box lines up across the row. */
.stc-label { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--stc-text); margin-bottom: 6px;
             min-height: 4.05em; display: flex; align-items: flex-end; }
.stc-box { display: flex; align-items: center; gap: 6px; background: var(--stc-field); border: 1px solid var(--stc-line);
           border-radius: 10px; padding: 0 12px; min-height: 46px; }
.stc-box:focus-within { border-color: var(--stc-accent); box-shadow: 0 0 0 3px rgba(162,97,90,.16); }
.stc-affix { color: var(--stc-muted); font-size: 15px; }
.stc-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--stc-text);
             font: inherit; font-size: 17px; font-weight: 600; padding: 10px 0; outline: none; -moz-appearance: textfield; }
.stc-input::-webkit-outer-spin-button, .stc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stc-ref { font-size: 12.5px; color: var(--stc-muted); margin-top: 6px; line-height: 1.4; }
.stc-results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 22px; }
.stc-group { border-top: 2px solid var(--stc-line); padding-top: 10px; }
.stc-group-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stc-muted); margin-bottom: 4px; }
.stc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; font-size: 15px; }
.stc-row + .stc-row { border-top: 1px dashed var(--stc-line); }
.stc-row-label { color: var(--stc-muted); }
.stc-row-value { font-weight: 700; color: var(--stc-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stc-total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
             background: var(--stc-soft); border: 1px solid rgba(162,97,90,.28); border-left: 5px solid var(--stc-accent);
             border-radius: 12px; padding: 16px 20px; }
.stc-total-label { font-size: 16px; font-weight: 700; color: var(--stc-text); }
.stc-total-value { font-size: 32px; font-weight: 800; color: var(--stc-accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stc-note { margin: 12px 0 0; font-size: 13px; color: var(--stc-muted); line-height: 1.5; }
@media (max-width: 640px) {
  .stc-inputs { grid-template-columns: 1fr; }
  .stc-label { min-height: 0; }
  .stc-results { grid-template-columns: 1fr; }
  .stc-total-value { font-size: 28px; }
}