/* ============================================================================
   ToolBench — calc.css
   Shared UI for the calculator family (Percentage, Age, Date Difference,
   Discount, GST, EMI, Time Duration, Fuel Cost, Countdown, Stopwatch).
   Loaded via the registry's 'css' key on every calculator page.

   Tokens come from site.css; .card/.btn/.panel/.chips/.tabs/.seg/.opts/.err
   come from tools.css. Neither is redeclared here.
   ============================================================================ */

/* ------------------------------------------------------------------ fields -- */
.field{margin:0 0 14px}
.field-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;margin:0 0 6px}
.lbl{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blueprint)}
.inp{
  display:block;width:100%;padding:12px;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  color:var(--ink);
  font:400 16px/1.5 var(--mono);   /* >=16px: stops iOS Safari zooming on focus */
}
.inp:focus{outline:0;border-color:var(--blueprint);box-shadow:0 0 0 3px rgba(44,110,142,.14)}
.inp.is-bad{border-color:var(--danger)}
.hint{display:block;margin-top:5px;font-size:12.5px;color:var(--slate-light)}

.fieldgrid{display:grid;gap:12px 16px;grid-template-columns:1fr;margin:0 0 6px}
@media (min-width:576px){.fieldgrid{grid-template-columns:1fr 1fr}}
.fieldgrid-3{grid-template-columns:1fr}
@media (min-width:576px){.fieldgrid-3{grid-template-columns:repeat(3,1fr)}}

/* -------------------------------------------------------------- calc actions -- */
.calc-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.calc-actions .btn-primary{flex:1 1 auto}
@media (min-width:576px){.calc-actions .btn-primary{flex:0 0 auto;min-width:180px}}

/* -------------------------------------------------------------- result card -- */
.result{
  margin:20px 0 0;padding:20px;text-align:center;
  background:var(--ink);border-radius:var(--radius);
  background-image:linear-gradient(rgba(127,209,224,.06) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(127,209,224,.06) 1px,transparent 1px);
  background-size:24px 24px;
}
.result-label{margin:0 0 6px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blueprint-light)}
.result-big{margin:0;font:700 clamp(28px,7vw,44px)/1.1 var(--display);color:#fff}
.result-big small{display:block;margin-top:6px;font:400 13px/1.4 var(--mono);color:var(--slate-light-ink)}
.result-sub{margin:8px 0 0;font:400 14px/1.5 var(--sans);color:var(--slate-light-ink)}

.result-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0 0}
.result-chip{
  padding:10px 16px;min-width:88px;
  background:var(--ink-soft);border:1px solid rgba(127,209,224,.18);border-radius:var(--radius);
}
.result-chip b{display:block;font:600 20px/1.1 var(--display);color:#fff}
.result-chip span{display:block;margin-top:3px;font:400 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-light-ink)}

.result-grid{display:grid;gap:1px;margin:16px 0 0;background:rgba(127,209,224,.15);border-radius:var(--radius);overflow:hidden}
@media (min-width:576px){.result-grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:576px){.result-grid-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:576px){.result-grid-4{grid-template-columns:repeat(4,1fr)}}
.result-row{padding:12px 16px;background:var(--ink-soft);text-align:left}
.result-row dt{margin:0 0 4px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-light-ink)}
.result-row dd{margin:0;font:600 17px/1.3 var(--display);color:#fff}

.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0}

/* ---------------------------------------------------------------- formula -- */
.formula{
  margin:22px 0 0;padding:16px;background:#fff;
  border-left:3px solid var(--blueprint-light);border-radius:0 var(--radius) var(--radius) 0;
}
.formula h2{margin:0 0 8px;font:500 16px/1.3 var(--display);color:var(--ink)}
.formula code{
  display:block;margin:10px 0;padding:10px 12px;
  background:var(--paper);border-radius:2px;
  font:400 14px/1.6 var(--mono);color:var(--ink);overflow-x:auto;white-space:pre;
}
.formula p{margin:0 0 8px;font-size:14.5px;color:var(--slate)}
.formula p:last-child{margin:0}

/* ------------------------------------------------------------------ modes -- */
.calc-modes{margin:0 0 18px}

/* -------------------------------------------------------- disclaimer strip -- */
.disclaimer{
  display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:11px 13px;
  background:var(--warn-bg);border-left:3px solid var(--amber);border-radius:0 var(--radius) var(--radius) 0;
  font-size:13.5px;color:var(--warn-ink);
}

/* ============================================================ timer digits ==
   Countdown Timer and Stopwatch share this large monospaced digit display. */
.timer-display{
  margin:20px 0;padding:28px 16px;text-align:center;
  background:var(--ink);border-radius:var(--radius);
}
.timer-digits{
  margin:0;font:700 clamp(32px,10vw,64px)/1.1 var(--mono);color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.timer-digits .ms{font-size:.5em;color:var(--slate-light-ink)}
.timer-caption{margin:8px 0 0;font:400 13px/1.5 var(--sans);color:var(--slate-light-ink)}

.timer-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0 0}
.timer-controls .btn{min-width:110px}

.lap-table{width:100%;margin:18px 0 0;border-collapse:collapse;font:400 14px/1.5 var(--mono)}
.lap-table th,.lap-table td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--paper-line)}
.lap-table th:first-child,.lap-table td:first-child{text-align:left}
.lap-table th{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-light)}
.lap-table .is-best td{color:var(--success-ink);font-weight:600}
.lap-table .is-worst td{color:var(--danger-ink)}

.fullscreen-btn{position:absolute;top:16px;right:16px}