/* ============================================================
   SKANER WIZYTÓWEK — kierunek "AKCYDENS"
   Szwajcarska precyzja arkusza drukarskiego: papierowa biel,
   czarny tusz, jedna sygnałowa czerwień vermilion.

   KONTRAKT CZERWIENI (WCAG): #F2330D wolno używać WYŁĄCZNIE do
   elementów graficznych i napisów >= 18 px bold. Każdy drobny
   czerwony tekst używa ciemnego #C7280A. Nie łamać.
   ============================================================ */

:root {
  color-scheme: light;
  --paper: #FAFAF7;   /* tło arkusza */
  --sheet: #FFFFFF;   /* modale, karty */
  --ink: #101010;     /* tusz: tekst, linie, belka */
  --ink-2: #55534E;   /* tusz rozcieńczony: metadane, placeholdery */
  --hair: rgba(16, 16, 16, 0.18);  /* separatory listy */
  --verm: #F2330D;      /* akcent graficzny */
  --verm-dark: #C7280A; /* czerwony tekst drobny */
  --ease-sheet: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  padding-bottom: 132px;
  -webkit-font-smoothing: antialiased;
}

/* Ziarno papieru — jeden fixed pseudo-element, nigdy na kartach */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 200;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typografia narzędziowa ---------- */
.kicker, .mast-metrics, .export-row, .footnote, .empty-cue,
.rows .row-no, .rows .row-data, legend, label, .busy-label, .toast, .user-line {
  font-family: 'IBM Plex Mono', monospace;
}

.kicker {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 10px;
}

h1, h2 { margin: 0; }

/* ---------- Masthead ---------- */
.masthead {
  padding: calc(18px + env(safe-area-inset-top)) 20px 0;
  max-width: 680px; margin: 0 auto;
}
.mast-row { display: flex; align-items: baseline; justify-content: space-between; }
.mast-title {
  font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; letter-spacing: 0.015em;
  font-size: clamp(34px, 9vw, 46px); line-height: 1.02;
}
.mast-metrics {
  margin: 8px 0 12px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
}
.mast-metrics #contactCount { color: var(--ink); }

.rule-double { border-top: 1px solid var(--ink); position: relative; }
.rule-double::after {
  content: ''; position: absolute; left: 0; right: 0; top: 3px;
  border-top: 1px solid var(--ink);
}

main { max-width: 680px; margin: 0 auto; padding: 0 20px; }

/* ---------- Wyszukiwarka ---------- */
.search-row {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 0 10px; position: relative;
}
.search-row svg { width: 19px; height: 19px; flex: none; color: var(--ink); }
.search-row input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: 500 16px 'Archivo', sans-serif; color: var(--ink);
  padding: 4px 0;
}
.search-row input::placeholder { color: var(--ink-2); font-weight: 400; }
.search-row::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 1px solid var(--ink);
  transition: border-color .15s;
}
.search-row:focus-within::after { border-bottom: 2px solid var(--verm); }

/* ---------- Eksporty ---------- */
.export-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0 4px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.export-row .sep { color: var(--ink-2); }

.btn-text {
  border: 0; background: none; padding: 4px 0; cursor: pointer;
  font: 500 11px 'IBM Plex Mono', monospace;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.btn-text:hover { text-decoration-thickness: 2px; }
.btn-text.danger { color: var(--verm-dark); }

.btn-icon {
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  width: 40px; height: 40px; cursor: pointer; padding: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.btn-icon:hover { background: var(--ink); color: var(--paper); }
.btn-icon svg { width: 100%; height: 100%; }

/* ---------- Lista kontaktów ---------- */
.rows { list-style: none; margin: 6px 0 0; padding: 0; }
.row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "no thumb body" "no thumb actions";
  column-gap: 14px; row-gap: 8px;
  min-height: 72px; padding: 16px 0;
  border-bottom: 1px solid var(--hair);
  animation: row-in .24s var(--ease-sheet) both;
}
.row:nth-child(1) { animation-delay: 0ms; }
.row:nth-child(2) { animation-delay: 40ms; }
.row:nth-child(3) { animation-delay: 80ms; }
.row:nth-child(4) { animation-delay: 120ms; }
.row:nth-child(5) { animation-delay: 160ms; }
.row:nth-child(n+6) { animation-delay: 200ms; }
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.row-no {
  grid-area: no; align-self: start;
  font-size: 10px; letter-spacing: 0.08em; color: var(--ink-2);
  padding-top: 3px; font-variant-numeric: tabular-nums;
}
.row-thumb {
  grid-area: thumb;
  width: 64px; height: 41px; object-fit: cover;
  background: var(--sheet);
  border: 1px solid var(--ink); padding: 3px; /* passe-partout */
}
.row-thumb.placeholder {
  display: flex; align-items: center; justify-content: center;
}
.row-thumb.placeholder svg { width: 22px; height: 22px; color: var(--ink-2); }
.row-body { grid-area: body; min-width: 0; }
.row-name {
  font-weight: 600; font-size: 17px; line-height: 1.25;
  overflow-wrap: anywhere;
}
.row-meta { color: var(--ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
.row-data {
  color: var(--ink-2); font-size: 11px; letter-spacing: 0.02em;
  margin-top: 2px; overflow-wrap: anywhere;
}
.row-note {
  margin-top: 6px; padding-left: 9px;
  border-left: 2px solid var(--verm);
  font-size: 13px; line-height: 1.4; color: var(--ink);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.row-actions { grid-area: actions; display: flex; align-items: center; gap: 16px; }

.btn-chip {
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font: 600 10.5px 'IBM Plex Mono', monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 12px; cursor: pointer;
  transition: background .12s, color .12s;
}
.btn-chip:hover { background: transparent; color: var(--ink); }
.btn-chip:active { transform: translateY(1px); }

/* ---------- Stan pusty ---------- */
.empty { text-align: center; padding: 42px 10px 20px; }
.viewfinder { width: min(300px, 82vw); display: block; margin: 0 auto 8px; }
.pulse { animation: vf-pulse 2s ease-in-out infinite; }
@keyframes vf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.empty-title {
  font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(21px, 6vw, 26px); letter-spacing: 0.01em; margin: 10px 0 6px;
}
.empty-sub { color: var(--ink-2); margin: 0 auto; max-width: 300px; }
.empty-cue {
  margin-top: 22px; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--verm-dark);
}

/* ---------- Belka SKANUJ ---------- */
.scanbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  border: 0; border-top: 3px solid var(--verm);
  min-height: 66px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  cursor: pointer; user-select: none;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800; font-stretch: 118%;
  font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase;
  overflow: hidden;
}
.scanbar:active { filter: brightness(1.25); }
.scanbar svg { width: 24px; height: 24px; flex: none; }
.scanbar .scanline {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--verm);
  left: -3%; opacity: 0;
}
.scanbar.busy { pointer-events: none; }
.scanbar.busy .scanline { opacity: 1; animation: sweep 1.2s linear infinite; }
@keyframes sweep { from { left: -3%; } to { left: 103%; } }

/* ---------- Bramka rejestracji ---------- */
.gate {
  min-height: 100dvh; display: flex; align-items: center;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(30px + env(safe-area-inset-bottom));
}
.gate-inner { max-width: 460px; margin: 0 auto; width: 100%; }
.gate .viewfinder { width: min(240px, 62vw); margin: 0 0 26px; }
.gate-title {
  font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(34px, 10.2vw, 56px); line-height: 0.98; letter-spacing: 0.005em;
  margin: 0 0 16px;
}
.gate-title .dot { color: var(--verm); }
.gate-sub { color: var(--ink-2); margin: 0 0 28px; max-width: 340px; }

/* ---------- Formularze ---------- */
label {
  display: block; margin-bottom: 16px;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}
input, textarea, select {
  display: block; width: 100%; margin-top: 6px;
  border: 0; border-bottom: 1px solid rgba(16,16,16,0.4);
  background: transparent; border-radius: 0;
  padding: 8px 0; outline: none;
  font: 500 16px 'Archivo', sans-serif; color: var(--ink);
  letter-spacing: normal; text-transform: none;
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus {
  border-bottom: 2px solid var(--verm);
  margin-bottom: -1px; /* bez skoku layoutu */
}
textarea { resize: vertical; line-height: 1.45; }
select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23101010' stroke-width='1.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; padding-right: 20px;
}

fieldset { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
legend {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 0 12px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
legend::after { content: ''; flex: 1; border-top: 1px solid var(--ink); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.field-error {
  min-height: 1em; margin: 0 0 10px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--verm-dark);
}
.footnote { font-size: 10.5px; letter-spacing: 0.05em; color: var(--ink-2); margin: 12px 0 0; }
.footnote.warn { color: var(--verm-dark); }
.user-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 8px; font-size: 12px; letter-spacing: 0.04em; color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---------- Przyciski główne ---------- */
.btn-bar {
  display: block; width: 100%;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 16px 20px; cursor: pointer;
  font-family: 'Archivo', sans-serif;
  font-weight: 800; font-stretch: 118%; font-size: 15px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: filter .12s;
}
.btn-bar:hover { filter: brightness(1.3); }
.btn-bar:active { transform: translateY(1px); }

/* ---------- Modale (arkusze) ---------- */
.modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(16, 16, 16, 0.42);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--sheet);
  border: 1px solid var(--ink);
  width: 100%; max-width: 620px; max-height: 92dvh; overflow-y: auto;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom));
  animation: sheet-in .32s var(--ease-sheet);
  /* crop marks w rogach (8 gradientów) */
  background-image:
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position:
    left 6px top 6px, left 6px top 6px,
    right 6px top 6px, right 6px top 6px,
    left 6px bottom 6px, left 6px bottom 6px,
    right 6px bottom 6px, right 6px bottom 6px;
}
@keyframes sheet-in { from { transform: translateY(48px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) {
  .modal { align-items: center; padding: 24px; }
}

.modal.scanner .scanner-stage { animation: none; }
.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 16px;
}
.sheet-title {
  font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(24px, 7vw, 30px); line-height: 1.05;
}
.sheet-sub {
  margin: 4px 0 0; font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
}
.sheet-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 18px;
}
.sheet-actions .btn-bar { width: auto; flex: 1; max-width: 300px; }

.edit-photo {
  width: 100%; max-height: 200px; object-fit: contain;
  background: var(--paper); border: 1px solid var(--ink); padding: 4px;
  margin-bottom: 6px;
}

/* ---------- Przetwarzanie ---------- */
.sheet-busy {
  max-width: 340px; text-align: center; padding: 34px 26px;
  align-self: center; margin: 0 20px;
}
.busy-strip {
  height: 3px; background: rgba(16,16,16,0.12);
  position: relative; overflow: hidden; margin-bottom: 20px;
}
.busy-strip::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34%;
  background: var(--verm);
  animation: strip 1.1s linear infinite;
}
@keyframes strip { from { left: -34%; } to { left: 100%; } }
.busy-label {
  margin: 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- Toast (NAD belką SKANUJ) ---------- */
.toast {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(94px + env(safe-area-inset-bottom));
  z-index: 90;
  background: var(--ink); color: var(--paper);
  border-left: 3px solid var(--paper);
  padding: 13px 16px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  max-width: 620px; margin: 0 auto;
  animation: sheet-in .2s var(--ease-sheet);
}
.toast.error { border-left-color: var(--verm); }

/* ---------- Skaner: aparat na żywo ---------- */
.modal.scanner { background: var(--ink); align-items: stretch; padding: 0; }
.scanner-stage { position: relative; width: 100%; height: 100dvh; overflow: hidden; }
#camVideo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--ink);
}
.scan-guide {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: min(86vw, 560px); aspect-ratio: 85.6 / 54;
  /* przyciemnienie wszystkiego POZA ramką */
  box-shadow: 0 0 0 200vmax rgba(16, 16, 16, 0.55);
  border: 1.5px dashed rgba(250, 250, 247, 0.85);
  /* narożniki ramki (8 gradientów w kolorze vermilion) */
  background-image:
    linear-gradient(var(--verm), var(--verm)), linear-gradient(var(--verm), var(--verm)),
    linear-gradient(var(--verm), var(--verm)), linear-gradient(var(--verm), var(--verm)),
    linear-gradient(var(--verm), var(--verm)), linear-gradient(var(--verm), var(--verm)),
    linear-gradient(var(--verm), var(--verm)), linear-gradient(var(--verm), var(--verm));
  background-repeat: no-repeat;
  background-size: 26px 3px, 3px 26px, 26px 3px, 3px 26px, 26px 3px, 3px 26px, 26px 3px, 3px 26px;
  background-position:
    left -1px top -1px, left -1px top -1px,
    right -1px top -1px, right -1px top -1px,
    left -1px bottom -1px, left -1px bottom -1px,
    right -1px bottom -1px, right -1px bottom -1px;
}
.scanner-top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(16px + env(safe-area-inset-top)) 18px 12px;
}
.scanner-hint {
  margin: 0; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper);
}
.btn-icon.light { border-color: var(--paper); color: var(--paper); }
.btn-icon.light:hover { background: var(--paper); color: var(--ink); }
.btn-text.light { color: var(--paper); }
.scanner-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 26px calc(26px + env(safe-area-inset-bottom));
}
.scanner-spacer { width: 64px; }
#btnShutter {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--verm); border: 4px solid var(--paper);
  cursor: pointer; transition: transform .08s;
}
#btnShutter:active { transform: scale(0.92); }

/* ---------- Instalacja i stopka ---------- */
.install-banner {
  display: block; width: 100%; text-align: center;
  padding: 12px 0 2px;
}
.install-steps {
  margin: 4px 0 8px; padding-left: 20px;
  font-size: 15px; line-height: 1.6;
}
.install-steps li { margin-bottom: 10px; }
.powered {
  margin: 30px 0 8px; text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}
.powered a {
  color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.powered a:hover { text-decoration-thickness: 2px; }
.gate .powered { margin-top: 34px; text-align: left; }

/* ---------- Dostępność ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.hidden, [hidden] { display: none !important; }