/* ===================================================
   FEATURE-001 — Neuer Eintrag (MVP)
   Przyczłapka do Bulbulatora · Sprint S01
   ===================================================
   Platform: iPad-first (Referenz: iPad 9, 810 × 1080)
   Basis = iPad. Telefon und Przeglądarka = Adaptation.
   =================================================== */
:root {
  --tlo-biurka: #e8e2d6;
  --papier: #faf6ee;
  --papier-cien: #ebe4d4;
  --tekst: #3a3429;
  --tekst-lekki: #7a7264;
  --linia: #c9bfb0;
  --linia-aktywna: #8a7d6b;
  --cien-kartki: 0 4px 24px rgba(58, 52, 41, 0.12),
                 0 1px 3px rgba(58, 52, 41, 0.08);
  --szerokosc-kartki: 42rem;
  --odstep-pole: 2.5rem;
  --odstep-wewnetrzny: clamp(1.5rem, 5vw, 2.75rem);
  --font-etykieta: 0.9375rem;
  --font-wpis: clamp(1.125rem, 2.8vw, 1.375rem);
  --font-tytul: clamp(1.5rem, 4vw, 2rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--tlo-biurka);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(0, 0, 0, 0.04) 0%, transparent 50%);
}

/* --- Biurko (tło) --- */

.biurko {
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem) clamp(0.75rem, 3vw, 2rem);
  min-height: 100dvh;
}

/* --- Kartka --- */

.kartka {
  position: relative;
  width: 100%;
  max-width: var(--szerokosc-kartki);
  margin-top: 1rem;
  background: var(--papier);
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.6) 0%,
      transparent 8%
    ),
    repeating-linear-gradient(
      transparent,
      transparent 27px,
      rgba(201, 191, 176, 0.18) 27px,
      rgba(201, 191, 176, 0.18) 28px
    );
  background-position: 0 var(--odstep-wewnetrzny);
  box-shadow: var(--cien-kartki);
  border-radius: 0 0 3px 3px;
}

/* Oderwana krawędź — jak wyrwana kartka z kalendarza */

.kartka__oderwanie {
  height: 1.25rem;
  margin-bottom: 0.5rem;
  background:
    linear-gradient(180deg, var(--tlo-biurka) 0%, transparent 100%),
    var(--papier);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 20 L0 8 Q5 14 10 8 Q15 2 20 8 Q25 14 30 8 Q35 2 40 8 Q45 14 50 8 Q55 2 60 8 Q65 14 70 8 Q75 2 80 8 Q85 14 90 8 Q95 2 100 8 Q105 14 110 8 Q115 2 120 8 Q125 14 130 8 Q135 2 140 8 Q145 14 150 8 Q155 2 160 8 Q165 14 170 8 Q175 2 180 8 Q185 14 190 8 Q195 2 200 8 Q205 14 210 8 Q215 2 220 8 Q225 14 230 8 Q235 2 240 8 Q245 14 250 8 Q255 2 260 8 Q265 14 270 8 Q275 2 280 8 Q285 14 290 8 Q295 2 300 8 Q305 14 310 8 Q315 2 320 8 Q325 14 330 8 Q335 2 340 8 Q345 14 350 8 Q355 2 360 8 Q365 14 370 8 Q375 2 380 8 Q385 14 390 8 Q395 2 400 8 L400 20 Z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 20 L0 8 Q5 14 10 8 Q15 2 20 8 Q25 14 30 8 Q35 2 40 8 Q45 14 50 8 Q55 2 60 8 Q65 14 70 8 Q75 2 80 8 Q85 14 90 8 Q95 2 100 8 Q105 14 110 8 Q115 2 120 8 Q125 14 130 8 Q135 2 140 8 Q145 14 150 8 Q155 2 160 8 Q165 14 170 8 Q175 2 180 8 Q185 14 190 8 Q195 2 200 8 Q205 14 210 8 Q215 2 220 8 Q225 14 230 8 Q235 2 240 8 Q245 14 250 8 Q255 2 260 8 Q265 14 270 8 Q275 2 280 8 Q285 14 290 8 Q295 2 300 8 Q305 14 310 8 Q315 2 320 8 Q325 14 330 8 Q335 2 340 8 Q345 14 350 8 Q355 2 360 8 Q365 14 370 8 Q375 2 380 8 Q385 14 390 8 Q395 2 400 8 L400 20 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
}

/* --- Nagłówek kartki --- */

.kartka__naglowek {
  padding: 0 var(--odstep-wewnetrzny) 1.5rem;
  border-bottom: 1px solid var(--linia);
}

.kartka__etykieta {
  margin: 0 0 0.25rem;
  font-size: var(--font-etykieta);
  font-weight: 400;
  color: var(--tekst-lekki);
}

.kartka__tytul {
  margin: 0;
  font-size: var(--font-tytul);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--tekst);
}

/* --- Pola --- */

.kartka__pola {
  display: flex;
  flex-direction: column;
  gap: var(--odstep-pole);
  padding: var(--odstep-wewnetrzny);
  padding-bottom: clamp(2rem, 6vw, 4rem);
}

.pole {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pole__rzad {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.pole--polowa {
  flex: 1;
}

.pole--waskie {
  max-width: 12rem;
}

.pole__etykieta {
  font-size: var(--font-etykieta);
  font-weight: 400;
  color: var(--tekst-lekki);
}

.pole__wpis {
  width: 100%;
  margin: 0;
  padding: 0.625rem 0 0.5rem;
  font-family: inherit;
  font-size: var(--font-wpis);
  font-weight: 400;
  line-height: 1.4;
  color: var(--tekst);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linia);
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}

.pole__wpis::placeholder {
  color: var(--linia);
}

.pole__wpis:focus {
  border-bottom-color: var(--linia-aktywna);
  border-bottom-width: 2px;
  padding-bottom: calc(0.5rem - 1px);
}

.pole__wpis--wielolinia {
  min-height: 9rem;
  padding-top: 0.5rem;
  line-height: 1.75;
  resize: vertical;
  border: none;
  border-bottom: 1px solid var(--linia);
  background: transparent;
}

/* Natywne kontrolki daty i godziny — spójny wygląd */

.pole__wpis[type="date"],
.pole__wpis[type="time"] {
  min-height: 2.75rem;
  font-family: inherit;
  color: var(--tekst);
}

.pole__wpis[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

.pole__wpis[type="date"]::-webkit-calendar-picker-indicator,
.pole__wpis[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}

.pole--paket {
  gap: 0.5rem;
}

.pole__paket-platzhalter {
  margin: 0;
  padding: 0.625rem 0 0.5rem;
  font-size: var(--font-wpis);
  font-style: italic;
  font-weight: 400;
  color: var(--tekst-lekki);
  opacity: 0.65;
  border-bottom: 1px dashed var(--linia);
}

/* --- Telefon (Adaptation unter iPad 9) --- */

@media (max-width: 50.5625rem) {
  .pole__rzad {
    flex-direction: column;
    gap: var(--odstep-pole);
  }

  .kartka {
    margin-top: 0;
  }

  :root {
    --odstep-pole: 2rem;
  }
}

/* --- Przeglądarka (Adaptation über iPad) --- */

@media (min-width: 64rem) {
  .biurko {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* --- Preferencje użytkownika --- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .pole__wpis {
    transition: none;
  }
}