.booking-workspace {
  display: grid;
  grid-template-columns: minmax(245px, .76fr) minmax(0, 1.5fr);
  gap: clamp(16px, 3vw, 34px);
  align-items: start;
}
.booking-plan, .booking-case {
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.booking-plan {
  padding: 20px;
  background: var(--soft-blue);
  border-top: 4px solid var(--brand);
}
.booking-plan h3 { margin: 5px 0; font-size: 25px }
.booking-plan > p { font-size: 14px; color: var(--quiet) }
.booking-plan dl { margin: 16px 0 0 }
.booking-plan dl > div {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid #cbdde7;
}
.booking-plan dt { font: 700 15px/1.55 ui-monospace, monospace; color: #14547a }
.booking-plan dd { margin: 0; font-size: 15px }
.booking-instructions { margin-bottom: 16px }
.booking-case { background: white; margin: 10px 0 0 }
.booking-case > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--ink);
  list-style: none;
}
.booking-case > summary::-webkit-details-marker { display: none }
.booking-case > summary::after { content: '+'; margin-left: auto; font-size: 22px; color: var(--blue) }
.booking-case[open] > summary::after { content: '−' }
.case-index {
  flex: none;
  border-radius: 6px;
  background: var(--soft-yellow);
  color: #574400;
  font: 750 15px/1 ui-monospace, monospace;
  padding: 10px 8px;
}
.booking-case small {
  display: block;
  color: var(--quiet);
  font: 650 12px/1.5 system-ui, sans-serif;
}
.booking-case > summary strong { line-height: 1.25; display: block }
.booking-body { padding: 0 16px 14px }
.booking-body > p { padding: 0 }
.booking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 15px 0 11px;
}
.booking-grid fieldset { min-width: 0; border: 0; padding: 0; margin: 0 }
.booking-grid legend { margin-bottom: 6px; padding: 0; font-weight: 750 }
.account-fields { display: flex; gap: 7px; flex-wrap: wrap }
.account-fields input {
  --cell: 1.44em;
  width: calc(4 * var(--cell) + 2px);
  height: 40px;
  border: 1px solid #728d9e;
  border-radius: 3px;
  padding: 0 0 0 calc((var(--cell) - 1ch) / 2);
  font: 650 17px/1 ui-monospace, monospace;
  letter-spacing: calc(var(--cell) - 1ch);
  color: var(--ink);
  background: repeating-linear-gradient(to right, white 0 calc(var(--cell) - 1px), #aec4d0 calc(var(--cell) - 1px) var(--cell));
}
.booking-check {
  color: white;
  background: #15567c;
  border: 0;
  padding: 9px 15px;
  border-radius: 6px;
  font: 700 15px/1.5 system-ui, sans-serif;
  cursor: pointer;
}
.booking-feedback:not(:empty) { margin: 9px 0 0; font-weight: 650; color: var(--ink) }
.booking-solution { border-top: 1px solid var(--rule); padding-top: 5px }
.booking-key code { white-space: nowrap }
@media (max-width: 760px) {
  .booking-workspace { grid-template-columns: 1fr }
}
@media (min-width: 761px) and (min-height: 650px) {
  .booking-plan { position: sticky; top: 16px }
}
.booking-exercises [hidden], .booking-mark:empty, .booking-status:empty { display: none }
.booking-exercises > .booking-check { margin-top: 18px }
.booking-mark { text-align: right; margin-left: auto }
.booking-case[data-result=correct] .booking-mark { color: #216349 }
.booking-case[data-result=retry] .booking-mark { color: #884321 }
.booking-status { font-weight: 700; margin: 12px 0 }
.booking-outcome { padding: 18px 20px; border-left: 4px solid var(--brand); border-radius: 0 10px 10px 0; background: var(--soft-blue) }
.booking-outcome h3 { margin: 0 0 8px; font-size: clamp(23px, 2.2vw, 30px) }
.booking-outcome .btn { margin-top: 12px }