/* Nagrania - the phone app. Values copied from the program's tokens (frontend/src/styles/tokens.css): this page is
   served by its own small server, outside Vite, so it cannot import them. */
:root {
  --tlo-okno: #D3DDD1;
  --tlo-plyta: #1F4D3D;
  --tlo-karta: #FFFFFF;
  --tlo-wglebienie: #EDEFF2;
  --tekst: #1B1F26;
  --tekst-2: #5C6470;
  --tekst-na-plycie: #F2F3F5;
  --linia: #D5D9DF;
  --zloto: #B08A4A;
  --blad: #B3261E;
  --ok: #1E7A4F;
  --uwaga: #8A5A15;
  --blad-tlo: color-mix(in srgb, var(--blad) 8%, var(--tlo-karta));
  --ok-tlo: color-mix(in srgb, var(--ok) 8%, var(--tlo-karta));
  --uwaga-tlo: color-mix(in srgb, var(--uwaga) 8%, var(--tlo-karta));
  --promien-sm: 6px;
  --promien-md: 10px;
  --promien-lg: 14px;
  --cien-okno: 0 2px 4px rgb(20 26 34 / .08), 0 14px 32px -8px rgb(20 26 34 / .22);
  --o-1: 4px; --o-2: 8px; --o-3: 12px; --o-4: 16px; --o-5: 20px; --o-6: 24px; --o-8: 32px; --o-12: 48px;
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 18px; --t-xl: 22px; --t-3xl: 36px;
  --pismo-tytul: ui-serif, "New York", Georgia, serif;
  --pismo-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pismo-mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--tlo-okno);
  color: var(--tekst);
  font: var(--t-md)/1.45 var(--pismo-ui);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.gora {
  background: var(--tlo-plyta);
  color: var(--tekst-na-plycie);
  padding: var(--o-4) var(--o-5) var(--o-3);
  margin-top: calc(-1 * env(safe-area-inset-top));
  padding-top: calc(env(safe-area-inset-top) + var(--o-4));
}
.gora h1 { margin: 0; font: 600 var(--t-xl)/1.2 var(--pismo-tytul); letter-spacing: .01em; }
.polaczenie { margin: var(--o-1) 0 0; font-size: var(--t-xs); color: color-mix(in srgb, var(--tekst-na-plycie) 80%, transparent); }
.polaczenie.zle { color: #F4C7A1; }

main { padding: var(--o-4); max-width: 560px; margin: 0 auto; }

.nagrywarka {
  background: var(--tlo-karta);
  border-radius: var(--promien-lg);
  box-shadow: var(--cien-okno);
  padding: var(--o-6) var(--o-4) var(--o-5);
  text-align: center;
}
.czas { margin: 0; font: 500 var(--t-3xl)/1.1 var(--pismo-mono); font-variant-numeric: tabular-nums; color: var(--tekst-2); }
.nagrywa .czas { color: var(--tekst); }
.poziom { height: 4px; margin: var(--o-3) auto var(--o-5); width: 60%; background: var(--tlo-wglebienie); border-radius: 2px; overflow: hidden; }
.poziom span { display: block; height: 100%; width: 0; background: var(--ok); transition: width 80ms linear; }
.guzik-nagraj {
  width: 96px; height: 96px; border-radius: 50%;
  border: 4px solid var(--linia); background: var(--tlo-karta);
  display: grid; place-items: center; cursor: pointer; padding: 0; margin: 0 auto;
  transition: transform 120ms ease, border-color 120ms ease;
}
.guzik-nagraj:active { transform: scale(.95); }
.guzik-nagraj .kropka { width: 64px; height: 64px; border-radius: 50%; background: var(--blad); transition: all 160ms ease; }
.nagrywa .guzik-nagraj { border-color: color-mix(in srgb, var(--blad) 35%, var(--linia)); }
.nagrywa .guzik-nagraj .kropka { width: 34px; height: 34px; border-radius: var(--promien-sm); }
.podpis { margin: var(--o-3) 0 0; font-weight: 600; }
.ostrzezenie { margin: var(--o-3) auto 0; max-width: 34ch; font-size: var(--t-xs); color: var(--uwaga); }
.wstrzymane .ostrzezenie { font-size: var(--t-sm); font-weight: 600; }
.wstrzymane .czas { color: var(--uwaga); }

.guzik-drugi {
  display: block; margin: var(--o-4) 0 0; padding: var(--o-3) var(--o-4);
  background: var(--tlo-karta); border-radius: var(--promien-md);
  text-align: center; font-weight: 600; color: var(--tlo-plyta); cursor: pointer;
  border: 1px solid var(--linia);
}
.guzik-drugi:active { background: var(--tlo-wglebienie); }

.naglowek-listy { margin: var(--o-8) 0 var(--o-2); font: 600 var(--t-sm)/1.2 var(--pismo-ui); color: var(--tekst-2); text-transform: uppercase; letter-spacing: .06em; }
.lista { list-style: none; margin: 0; padding: 0; background: var(--tlo-karta); border-radius: var(--promien-lg); overflow: hidden; }
.lista:empty { display: none; }
.lista li { border-top: 1px solid var(--linia); }
.lista li:first-child { border-top: 0; }
.lista button {
  display: grid; grid-template-columns: 1fr auto; gap: var(--o-1) var(--o-3); align-items: center;
  width: 100%; text-align: left; background: none; border: 0; padding: var(--o-3) var(--o-4); cursor: pointer;
}
.lista button:active { background: var(--tlo-wglebienie); }
.lista .tytul { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .dane { grid-column: 1; font-size: var(--t-xs); color: var(--tekst-2); }
.pusto { color: var(--tekst-2); text-align: center; font-size: var(--t-sm); }

.plakietka {
  grid-row: 1 / span 2; grid-column: 2;
  font-size: var(--t-xs); font-weight: 600; padding: 2px var(--o-2); border-radius: 999px; white-space: nowrap;
  background: var(--tlo-wglebienie); color: var(--tekst-2);
}
.plakietka.gotowe { background: var(--ok-tlo); color: var(--ok); }
.plakietka.blad { background: var(--blad-tlo); color: var(--blad); }
.plakietka.praca { background: var(--uwaga-tlo); color: var(--uwaga); }

#ekran-parowanie h2 { font: 600 var(--t-xl)/1.2 var(--pismo-tytul); margin: var(--o-2) 0 var(--o-2); }
#ekran-parowanie .metka { margin: 0 0 var(--o-4); }
#kod {
  width: 100%; padding: var(--o-3); border: 1px solid var(--linia); border-radius: var(--promien-md);
  background: var(--tlo-karta); font: 600 var(--t-xl)/1.2 var(--pismo-mono); letter-spacing: .12em; text-align: center;
  text-transform: uppercase;
}
.blad-tekst { color: var(--blad); font-size: var(--t-sm); margin: var(--o-3) 0 0; }
#ekran-opis h2 { font: 600 var(--t-xl)/1.2 var(--pismo-tytul); margin: var(--o-2) 0 var(--o-4); }
#ekran-opis input, #ekran-opis textarea {
  width: 100%; padding: var(--o-3); border: 1px solid var(--linia); border-radius: var(--promien-md);
  background: var(--tlo-karta); font-size: var(--t-md);
}
.wybor { display: flex; flex-wrap: wrap; gap: var(--o-2); margin: var(--o-4) 0; }
.wybor button {
  padding: var(--o-2) var(--o-3); border-radius: 999px; border: 1px solid var(--linia); background: var(--tlo-karta);
  font-size: var(--t-sm); cursor: pointer;
}
.wybor button[aria-pressed="true"] { background: var(--tlo-plyta); color: var(--tekst-na-plycie); border-color: var(--tlo-plyta); }
.rzad { display: flex; gap: var(--o-3); margin-top: var(--o-4); }
.guzik-glowny {
  flex: 1; padding: var(--o-3); border: 0; border-radius: var(--promien-md);
  background: var(--tlo-plyta); color: var(--tekst-na-plycie); font-weight: 600; cursor: pointer;
}
.guzik-cichy { padding: var(--o-3) var(--o-4); border: 0; background: none; color: var(--tekst-2); cursor: pointer; }

.wstecz { border: 0; background: none; color: var(--tlo-plyta); font-weight: 600; padding: var(--o-2) 0; cursor: pointer; font-size: var(--t-md); }
.karta { background: var(--tlo-karta); border-radius: var(--promien-lg); padding: var(--o-4); margin-top: var(--o-3); }
.karta h2 { margin: 0 0 var(--o-1); font: 600 var(--t-xl)/1.25 var(--pismo-tytul); }
.karta h3 { margin: 0 0 var(--o-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-2); }
.karta p { margin: 0; }
.metka { font-size: var(--t-sm); color: var(--tekst-2); }
.uwagi { list-style: none; margin: 0; padding: 0; }
.uwagi li { padding: var(--o-2) 0; border-top: 1px solid var(--linia); }
.uwagi li:first-child { border-top: 0; padding-top: 0; }
.uwagi .rodzaj { font-size: var(--t-xs); font-weight: 600; color: var(--tlo-plyta); text-transform: uppercase; letter-spacing: .04em; }
.uwagi .cytat { font-size: var(--t-sm); color: var(--tekst-2); font-style: italic; }
.transkrypcja p { margin: 0 0 var(--o-2); font-size: var(--t-sm); }
.transkrypcja time { font-family: var(--pismo-mono); font-size: var(--t-xs); color: var(--tekst-2); margin-right: var(--o-2); }
.edycja { display: grid; gap: var(--o-2); }
.edycja input { width: 100%; padding: var(--o-2) var(--o-3); border: 1px solid var(--linia); border-radius: var(--promien-sm); }
.ponow { margin-top: var(--o-3); }