.history-pagination {
  --iso-diameter: 152px;
  width: min(100%, 480px);
  margin: 24px auto 0;
}

.history-dial-window {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(var(--iso-diameter) / 2);
  border-bottom: 1px solid var(--line);
  touch-action: pan-y;
}

.history-focus-ring {
  --iso-radius: calc(var(--iso-diameter) * .335);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: var(--iso-diameter);
  height: var(--iso-diameter);
  margin: 0 auto;
  border: 1px solid #8b947c3d;
  border-radius: 50%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(circle, transparent 58%, #11180eee 59% 65%, transparent 66%),
    linear-gradient(135deg, #3c4631, #0b110b 48%, #232c1e);
  box-shadow: 0 7px 16px #0005, inset 0 1px 1px #c5d3ab36, inset 0 -2px 3px #000c;
}

.history-focus-ring::before {
  content: "";
  position: absolute;
  inset: 34%;
  z-index: 2;
  border: 1px solid #020602b8;
  border-radius: 50%;
  background: linear-gradient(145deg, #242d20, #11180f 65%);
  box-shadow: inset 0 1px 3px #0008, 0 1px 0 #bac8a21c;
  pointer-events: none;
}

.history-focus-ring::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 3px;
  left: calc(50% - 1px);
  width: 2px;
  height: 9px;
  background: var(--accent);
  pointer-events: none;
}

.history-focus-ring:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -3px;
}

.history-focus-ring.is-dragging {
  cursor: grabbing;
}

.history-focus-ridges,
.history-focus-numbers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.history-focus-ridges {
  border-radius: 50%;
  background: repeating-conic-gradient(#030803 0deg 2deg, #7d896b73 2.5deg 3deg, #172012 3.5deg 5deg);
  -webkit-mask-image: radial-gradient(circle, transparent 62%, #000 63%);
  mask-image: radial-gradient(circle, transparent 62%, #000 63%);
  transform: rotate(var(--iso-angle, 0deg));
  transition: transform .42s cubic-bezier(.22, .68, .2, 1);
}

.history-focus-ridge {
  display: none;
}

.history-focus-number {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  min-width: 30px;
  padding: 10px 3px;
  color: var(--muted);
  opacity: var(--page-opacity, 1);
  font: 400 12px/1.4 ui-monospace, "Courier New", monospace;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  transform: translate(-50%, -50%) rotate(var(--page-angle, 0deg)) translateY(calc(0px - var(--iso-radius))) rotate(calc(0deg - var(--page-angle, 0deg)));
  transition: transform .42s cubic-bezier(.22, .68, .2, 1), opacity .32s, color .3s;
  pointer-events: auto;
  cursor: pointer;
}

.history-focus-number.is-active {
  color: var(--accent);
  cursor: grab;
}

.history-page-status {
  margin-top: 8px;
  color: var(--muted);
  font: 400 9px/1.7 ui-monospace, "Courier New", monospace;
  letter-spacing: .1em;
  text-align: center;
}

@media (max-width: 760px) {
  .history-pagination {
    --iso-diameter: 136px;
    margin-top: 18px;
  }

  .history-focus-number {
    font-size: 11px;
  }

  .history-page-status {
    margin-top: 8px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-focus-ridges,
  .history-focus-number {
    transition: none;
  }
}

#history-panel .history-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "title filter count";
  align-items: center;
  gap: 12px 24px;
}

#history-panel .history-heading-title {
  grid-area: title;
  min-width: 0;
}

#history-panel .history-section-heading > #bookings-count {
  grid-area: count;
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}

#history-panel .history-filter {
  grid-area: filter;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
}

#history-panel .history-filter-label {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  transition: color .2s;
}

#history-panel .history-filter-label.is-active,
#history-panel .history-filter[data-history-filter="completed"] [data-filter="completed"],
#history-panel .history-filter[data-history-filter="upcoming"] [data-filter="upcoming"] {
  color: var(--accent);
}

#history-filter-toggle {
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  height: 28px;
  padding: 0;
  border: 1px solid #85887859;
  border-radius: 15px;
  background: linear-gradient(180deg, #020402, #11150f);
  box-shadow: inset 0 2px 4px #000e, 0 1px 0 #a5a69b29, 0 -1px 1px #000b;
}

#history-filter-toggle::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  top: 2px;
  left: 2px;
  width: 44px;
  height: 22px;
  border: 1px solid #73786a47;
  border-radius: 11px;
  background:
    linear-gradient(90deg, transparent calc(50% - 2px), #3b4035 calc(50% - 2px), #a5a08a calc(50% - .7px), #171c14 50%, #5e6454 calc(50% + 1px), transparent calc(50% + 2px)),
    radial-gradient(ellipse at 35% 0, #6d726030, transparent 70%),
    linear-gradient(100deg, #1d221a, #252a21 43%, #0c100b 48%, #171c14);
  box-shadow: 1px 1px 3px #000d, inset 0 1px 0 #b4b49d24, inset 0 -1px 1px #000b;
  transform: translateX(0);
  transition: transform .2s ease;
}

#history-filter-toggle::after {
  content: "";
  position: absolute;
  inset: -9px -4px;
}

#history-filter-toggle[aria-checked="true"]::before {
  transform: translateX(14px);
}

#history-filter-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  #history-panel .history-section-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title count" "filter filter";
    gap: 8px 18px;
  }

  #history-panel .history-filter {
    width: 100%;
    justify-self: stretch;
    gap: 10px;
  }

  #history-panel .history-filter-label {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #history-filter-toggle::before,
  #history-panel .history-filter-label {
    transition: none;
  }
}

#bookings-list > .booking-disclosure {
  position: relative;
  display: block;
  border: 0;
  padding: 0;
}

#bookings-list:has(> .booking-disclosure) {
  position: relative;
  min-height: 240px;
  padding: 10px 0;
}

#bookings-list:has(> .booking-disclosure)::before,
#bookings-list:has(> .booking-disclosure)::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 0;
  right: 0;
  height: 10px;
  border-block: 1px solid var(--line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Crect x='5' y='0' width='10' height='8' rx='.8' fill='%230b110b' fill-opacity='.45' stroke='%23a5a69b' stroke-opacity='.3' stroke-width='.8'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-origin: content-box;
  background-clip: content-box;
  pointer-events: none;
}

#bookings-list:has(> .booking-disclosure)::before {
  top: 0;
}

#bookings-list:has(> .booking-disclosure)::after {
  bottom: 0;
}

#bookings-list .booking-disclosure-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 12px;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 6px 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#bookings-list .booking-disclosure-summary::-webkit-details-marker {
  display: none;
}

#bookings-list .booking-disclosure-summary::marker {
  content: "";
}

#bookings-list .booking-disclosure-summary::after {
  content: "";
  justify-self: end;
  width: 8px;
  height: 10px;
  margin-right: 2px;
  border: 0;
  color: var(--muted);
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: color .2s;
  pointer-events: none;
}

#bookings-list .booking-disclosure[open] > .booking-disclosure-summary::after {
  color: var(--accent);
  clip-path: none;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}

#bookings-list .booking-disclosure-summary:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

#bookings-list .booking-disclosure-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bookings-list .booking-disclosure-separator {
  color: var(--muted);
  font-size: 12px;
}

#bookings-list .booking-disclosure-price {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  white-space: nowrap;
}

#bookings-list .booking-disclosure-content {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: start;
  gap: 20px;
  padding: 12px 0 18px;
}

#bookings-list .booking-disclosure:not([open]) > .booking-disclosure-content {
  display: none;
}

#bookings-list .booking-disclosure-content > img {
  width: 100px;
  height: 90px;
  object-fit: cover;
}

#bookings-list .booking-disclosure-content > div {
  min-width: 0;
}

#bookings-list .booking-disclosure-content > .booking-card-side {
  display: block;
  grid-column: 3;
  min-width: 0;
  padding-left: 0;
  text-align: right;
}

#bookings-list .booking-disclosure-content .booking-card-actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  #bookings-list .booking-disclosure-summary {
    gap: 10px;
    font-size: 14px;
  }

  #bookings-list .booking-disclosure-content {
    grid-template-columns: 85px minmax(0, 1fr);
    gap: 10px 14px;
    padding: 12px 0 16px;
  }

  #bookings-list .booking-disclosure-content > img {
    width: 85px;
    height: 90px;
  }

  #bookings-list .booking-disclosure-content > .booking-card-side {
    grid-column: 2;
    text-align: left;
  }

  #bookings-list .booking-disclosure-content .booking-card-actions {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  #bookings-list .booking-disclosure-summary::after {
    transition: none;
  }
}

@media (max-width: 760px) {
  .is-portal .portal:has(> #history-panel:not([hidden])) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  #history-panel {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 183px - env(safe-area-inset-bottom));
  }

  #history-panel > .history-section-heading,
  #history-panel > #bookings-list {
    flex: 0 0 auto;
  }

  #history-panel > #history-pagination {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 18px;
  }
}

@media (max-width: 440px) {
  #history-panel {
    min-height: calc(100svh - 170px - env(safe-area-inset-bottom));
  }
}