/* ==========================================================================
   assets/calc-mobile.css — phone-width fixes shared by every calculator.
   Nothing here applies on a wide layout; see calc-mobile.js for the why.
   ========================================================================== */

/* The result line that follows the reader through the inputs. Slim on
   purpose: it carries one or two numbers, never the card. */
.calc-peek {
  position: fixed; left: 12px; right: 12px; z-index: 29;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .5rem .85rem; min-height: 2.75rem;
  border: 1px solid rgba(245, 158, 11, .55); border-radius: .9rem;
  background: rgba(8, 13, 26, .94); color: #e2e8f0;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: inherit; text-align: right; cursor: pointer;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.calc-peek.is-on { opacity: 1; transform: none; pointer-events: auto; }
.calc-peek__vals { display: flex; gap: 1rem; min-width: 0; }
.calc-peek__item { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.calc-peek__label {
  font-size: .7rem; font-weight: 600; color: #94a3b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calc-peek__num { font-size: 1.05rem; font-weight: 800; color: #fcd34d; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-peek__go { flex: none; font-size: .78rem; font-weight: 700; color: #fdc662; white-space: nowrap; }
@media (min-width: 1024px) { .calc-peek { display: none; } }
@media (prefers-reduced-motion: reduce) { .calc-peek { transition: none; } }

/* The two floating buttons. At 56px and 48px on a 390px screen they sat on
   top of field labels and the first digits of the result; smaller and
   tighter to the corners they still hit the 44px touch target. */
@media (max-width: 767px) {
  html #a11y-toggle { width: 44px; height: 44px; font-size: 22px; bottom: 12px; right: 12px; }
  html #a11y-panel { bottom: 64px; right: 12px; }
  html .back-to-top { width: 44px; height: 44px; bottom: 12px; left: 12px; }
}