* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f4f4f4;
  color: #222;
}

main {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
}

h1 { margin-bottom: 4px; }

/* ===== Hlavička (hero) ===== */
.hero {
  background: #141414;
  color: #fff;
}
/* Šachovnicový pruh jako cílová vlajka – dva šikmé gradienty vytvoří čtverečky 12×12 px */
.checker {
  height: 24px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%),
    linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}
.hero-inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px 20px;
  border-bottom: 4px solid #d62828;
}
.hero h1 {
  margin: 4px 0 16px;
  font-size: clamp(24px, 7vw, 40px); /* na mobilu menší, na počítači větší */
  overflow-wrap: anywhere; /* dlouhé slovo se na úzkém displeji zalomí, nevyteče */
  font-weight: 800;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.edition {
  margin: 0;
  color: #ff6b6b;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Informace o závodu: datum a místo přes celou šířku, příchod a start vedle sebe */
.event-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
.event-info > div {
  background: #222;
  border-left: 3px solid #d62828;
  border-radius: 6px;
  padding: 10px 12px;
}
.event-info > div:first-child,
.event-info > div:last-child { grid-column: 1 / -1; } /* 1 / -1 = od prvního do posledního sloupce */
.event-info dt {
  color: #aaa;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.event-info dd {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 700;
}
.event-info a { color: #fff; }
.event-info a::after { content: " ↗"; color: #ff6b6b; } /* šipka = otevře se mapa */

section {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

label {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
}

input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  font-size: 16px; /* 16px zabrání automatickému zoomu na iPhonu */
  border: 1px solid #bbb;
  border-radius: 6px;
}

/* Past na roboty – mimo obrazovku (display:none někteří roboti poznají a pole přeskočí) */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Souhlas s podmínkami: zaškrtávátko vedle textu, ne nad ním */
label.checkbox { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
label.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; }
.terms li { margin-bottom: 8px; }
.terms h2:first-child { margin-top: 0; }

/* E-mail a váha vedle sebe: e-mail zabere zbytek, váha 96 px (stačí na 3 číslice) */
.row { display: grid; grid-template-columns: 1fr 96px; gap: 8px; }
.row input { min-width: 0; } /* bez tohohle by dlouhý e-mail roztáhl sloupec mimo obrazovku */

/* Rozbalovací 4. člen: <summary> vypadá jako tlačítko s čárkovaným okrajem */
details { margin-bottom: 16px; }
details summary {
  padding: 12px;
  border: 1px dashed #bbb;
  border-radius: 8px;
  font-weight: 600;
  color: #d62828;
  cursor: pointer;
  list-style: none; /* schová výchozí trojúhelníček */
}
details summary::-webkit-details-marker { display: none; } /* trojúhelníček v Safari */
details[open] summary { display: none; } /* po rozbalení zmizí, zůstanou jen pole */
details fieldset { margin-bottom: 0; }

/* Pole, ke kterému se vztahuje chyba ze serveru (nastavuje app.js) */
input.invalid { border-color: #d62828; box-shadow: 0 0 0 2px rgba(214, 40, 40, 0.25); }
input.invalid:focus { outline-color: #d62828; } /* i s kurzorem v poli zůstane červené */

/* Telefon: pevná předvolba +420 vedle políčka */
.phone { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 400; }
.phone input { margin-top: 0; }

fieldset {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

legend { font-weight: 700; padding: 0 4px; }

button {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: #d62828;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

button:disabled { background: #999; }

.hint { font-weight: 400; color: #777; }
.free { font-size: 18px; font-weight: 700; }
.ok { color: #1a7f37; }
.error { color: #d62828; }

#teams li { margin-bottom: 8px; }

/* ===== Admin ===== */
main.admin { max-width: 1100px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
th { background: #fafafa; }
button.small { width: auto; padding: 6px 10px; font-size: 14px; }
button.danger { background: #fff; color: #d62828; border: 1px solid #d62828; }
button.secondary { background: #fff; color: #222; border: 1px solid #bbb; }
td.actions { white-space: nowrap; }
td.center { text-align: center; }
td input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
a.button {
  padding: 8px 14px;
  font-weight: 600;
  color: #fff;
  background: #d62828;
  border-radius: 6px;
  text-decoration: none;
}
td.actions button + button { margin-left: 6px; }

dialog {
  width: min(520px, 100% - 32px);
  max-height: calc(100% - 32px);
  border: 0;
  border-radius: 8px;
  padding: 16px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.4); } /* ztmavení stránky pod oknem */
dialog h2 { margin-top: 0; }
.dialog-buttons { display: flex; gap: 8px; }
#teams small { color: #666; }