*, *::before, *::after { box-sizing: border-box; }
html { background: #f3f6fa; color: #0f2644; }
body {
  margin: 0;
  min-height: 100dvh;
  background: #f3f6fa;
  color: #0f2644;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
body.is-desk { background: #f3f6fa; }
::selection { background: #d5e4f5; color: #0f2644; }
:focus-visible { outline: 2px solid #1e5ba1; outline-offset: 3px; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: #0a223f;
}
.gate form {
  width: min(24rem, 100%);
  padding: 36px 28px 28px;
  border-radius: 18px;
  background: #fff;
}
.gate img { display: block; width: 148px; height: auto; margin: 0 auto 28px; }
.gate h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.03em;
  text-align: center;
}
.gate p { margin: 10px 0 0; color: #3e5674; text-align: center; }
.gate label { display: grid; gap: 8px; margin-top: 28px; font-size: 13px; font-weight: 700; }
.field { position: relative; }
.gate input, .desk input, .desk select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #c5d3e2;
  border-radius: 10px;
  background: #fff;
  color: #0f2644;
  font-size: 16px;
}
.gate input { padding-right: 44px; letter-spacing: 0.12em; }
.reveal {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 48px;
  border: 0;
  background: transparent;
  color: #3e5674;
}
.primary, .ghost {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
}
.primary { background: #0a223f; color: #fff; }
.primary:active { background: #08182d; }
.gate .primary { width: 100%; margin-top: 12px; }
.status { min-height: 1.3em; margin: 12px 0 0; font-size: 14px; color: #8b2e2e; }
.status.is-ok { color: #1e5ba1; }

.top {
  display: none;
  position: sticky;
  top: 0;
  z-index: 2;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: #0a223f;
}
.top img { width: 120px; height: auto; background: #fff; padding: 6px 8px; }
.ghost { padding: 0 16px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
body.is-desk .top { display: flex; }
body.is-desk .gate { display: none; }

.desk {
  display: none;
  width: min(880px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 72px;
}
body.is-desk .desk { display: block; }
.desk h1 {
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.lede { margin: 0 0 32px; max-width: 62ch; color: #3e5674; }
.desk h2 {
  margin: 36px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.note { margin: 0 0 16px; max-width: 68ch; color: #3e5674; }
.empty { margin: 0; color: #3e5674; }

.rows { display: grid; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid #d6e0e9;
}
.row > * { min-width: 0; }
.when { font-variant-numeric: tabular-nums; font-weight: 700; }
.session { margin: 0; }
.state {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1e5ba1;
}
.state.is-cancelled, .state.is-expired { color: #8b2e2e; }
.state.is-held { color: #3e5674; }

.block-form {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 8px;
}
.block-form > * { min-width: 0; }
.block-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.block-form .primary { padding: 0 18px; }
.block-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #d6e0e9;
}
.link {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #1e5ba1;
  font-weight: 700;
}

.bars { display: grid; gap: 14px; }
.bar-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.bar-head span { font-variant-numeric: tabular-nums; font-weight: 400; color: #3e5674; }
.track { height: 8px; margin-top: 6px; border-radius: 99px; background: #e2eaf4; }
.track i { display: block; height: 8px; border-radius: 99px; background: #1e5ba1; }

@media (max-width: 720px) {
  .row, .block-form { grid-template-columns: 1fr; }
  .desk h1 { font-size: 32px; }
}