/* ============================================================
   All-in-One Calculator — the small amount of CSS Tailwind
   utilities cannot express: the LCD result card, ad frames,
   focus rings and motion preferences.
   ============================================================ */

:root {
  --lcd-bg: #0f6a68;
  --lcd-bg-2: #114747;
  --lcd-ink: #d7f6f1;
  --rule: rgba(215, 246, 241, .28);
}

/* ---------- signature: the LCD / receipt result card ---------- */
.lcd {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(111, 217, 205, .30), transparent 55%),
    linear-gradient(160deg, var(--lcd-bg) 0%, var(--lcd-bg-2) 100%);
  color: var(--lcd-ink);
  position: relative;
  overflow: hidden;
}
/* faint horizontal scan lines, like a real segment display */
.lcd::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.lcd__figure {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
/* torn-receipt divider between headline figure and the breakdown */
.lcd__tear {
  border-top: 1px dashed var(--rule);
  position: relative;
}
.lcd__tear::before,
.lcd__tear::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #f1f5f9;
}
.dark .lcd__tear::before,
.dark .lcd__tear::after { background: #0b1220; }
.lcd__tear::before { left: -19px; }
.lcd__tear::after  { right: -19px; }

.lcd__row { font-variant-numeric: tabular-nums; }
.lcd__row + .lcd__row { border-top: 1px solid rgba(215, 246, 241, .13); }

/* proportion bar (principal vs interest, etc.) */
.bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.14); }
.bar > span { display: block; height: 100%; }

/* result appears with a short, quiet transition */
.result-enter { animation: resultIn .28s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes resultIn {
  from { opacity: 0; transform: translateY(6px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

/* ---------- ad frames: reserved, labelled, never intrusive ---------- */
.ad-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.25rem .75rem .75rem;
  border: 1px dashed #cbd5e1;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .5);
}
.dark .ad-slot { border-color: #1b2740; background: rgba(17, 26, 43, .5); }
.ad-slot__tag {
  position: absolute;
  top: .35rem;
  left: .75rem;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #94a3b8;
}
.ad-slot__ph {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #94a3b8;
}

/* ---------- forms & focus ---------- */
.field-input {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  padding: .625rem .75rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: #0b1220;
  transition: border-color .15s, box-shadow .15s;
}
.field-input:focus {
  outline: none;
  border-color: #14a39a;
  box-shadow: 0 0 0 3px rgba(20, 163, 154, .18);
}
.dark .field-input { background: #111a2b; border-color: #2b3a55; color: #f1f5f9; }
select.field-input { font-family: Inter, sans-serif; }
textarea.field-input { font-size: 14px; min-height: 92px; resize: vertical; }
.field-input[aria-invalid="true"] { border-color: #e11d48; }

/* hide number spinners — the keypad and inputs are cleaner without them */
.field-input[type="number"]::-webkit-outer-spin-button,
.field-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field-input[type="number"] { -moz-appearance: textfield; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #14a39a;
  outline-offset: 2px;
}

/* favourite marked state */
.fav-btn.is-fav { color: #f59e0b; }
.fav-btn.is-fav svg { fill: currentColor; }

/* scientific keypad */
.key {
  border-radius: .75rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  padding: .7rem .25rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  transition: transform .06s, background .15s;
}
.key:active { transform: scale(.95); }
.dark .key { background: #111a2b; border-color: #2b3a55; color: #e2e8f0; }
.key--fn { background: #f1f5f9; font-size: 12.5px; }
.dark .key--fn { background: #1b2740; }
.key--op { background: #0f6a68; border-color: #0f6a68; color: #fff; }
.key--eq { background: #f59e0b; border-color: #f59e0b; color: #1b1200; }

/* utilities */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  header, footer, .ad-slot, .no-print { display: none !important; }
  .lcd { background: #fff !important; color: #000 !important; border: 1px solid #000; }
}