/* Minimal overrides on top of Tailwind CDN.
   Design spec amendment: polaroid card + folded letter + Caveat signature.
   iPhone polish: prevent zoom on input focus, respect safe area insets. */

.caveat-font {
  font-family: "Caveat", cursive;
  font-weight: 500;
}

/* iOS Safari zooms inputs with font-size < 16px on focus. Force all form
   controls to at least 16px to prevent the zoom-to-field behavior. This is
   the single most important mobile fix for this app. */
input,
select,
textarea {
  font-size: 16px;
}

/* Safe area insets: iPhone home indicator + notch. The viewport meta already
   uses viewport-fit=cover, so we can use env() for the safe insets. */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Subtle card elevation for history rows and the log form card. */
.card-elevated {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Number inputs: remove spinner buttons on WebKit for a cleaner look.
   Users tap directly into the field on mobile anyway. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* iOS Safari renders <input type="date"> as its own gray pill with centered
   text that ignores most CSS. Force it to match our other inputs. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff;
  color: #171717;
  font-family: inherit;
  line-height: 1.2;
  display: block;
  width: 100%;
}
/* Text inside the date input is centered by default on iOS — left-align it
   so it matches the rest of the form. */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.5em;
}
/* Subtle calendar picker indicator on WebKit. */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.4;
  filter: grayscale(1);
}

/* Polaroid verdict card.
   Tilt is set inline via JS on each render for ±2° random rotation. */
.polaroid {
  position: relative;
  width: 320px;
  min-height: 220px;
  padding: 28px 24px 20px 24px;
  background-color: #fdfaf0; /* default OK cream, overridden by JS per verdict */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  transform: rotate(var(--tilt, -1deg));
}

@media (min-width: 640px) {
  .polaroid {
    width: 380px;
    min-height: 260px;
  }
}

.polaroid.ok    { background-color: #fdfaf0; }
.polaroid.wait  { background-color: #fef3c7; }
.polaroid.stop  { background-color: #fee2e2; }

.tape-tl,
.tape-tr {
  position: absolute;
  top: -6px;
  width: 44px;
  height: 18px;
  background-color: rgba(240, 232, 208, 0.75);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.tape-tl { left: 12px; transform: rotate(-4deg); }
.tape-tr { right: 12px; transform: rotate(3deg); }

/* Folded paper letter — larger, flat, with a visible crease line. */
.letter-paper {
  position: relative;
  padding: 40px 32px 28px 32px;
  background-color: #fdfaf0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  border-radius: 2px;
}

.letter-crease {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 50%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

/* Keep visible focus rings for a11y without looking ugly. */
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 2px solid rgba(23, 23, 23, 0.4);
  outline-offset: 1px;
}