/* Icon */
.icon {
  width: 26px;
  height: 26px;
  fill: currentColor;
  fill-rule: evenodd;
}

/* Top row: glass bar and the add button on the right. */
.top-nav {
  position: fixed;
  z-index: 30;
  top: calc(var(--safe-top) + var(--bar-offset));
  left: 0;
  right: 0;
  width: var(--bar-width);
  height: var(--bar-height);
  margin: 0 auto;
  display: flex;
  gap: var(--bar-padding);
  transition: gap .4s var(--ease-smooth);
}

body:has(.bottom-nav.is-form) .top-nav,
body:has(.bottom-nav.is-form-front) .top-nav {
  z-index: 50;
}

body:has(.bottom-nav.is-form) .top-nav {
  pointer-events: none;
}

body:has(.bottom-nav.is-form) .bottom-add {
  pointer-events: auto;
}

body:has(.bottom-nav.is-date) .top-nav {
  gap: 0;
}

.top-bar {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: grid;
}

.top-switch,
.top-slot {
  grid-area: 1 / 1;
  min-width: 0;
  height: 100%;
}

.top-switch {
  z-index: 1;
  opacity: 1;
  transition: opacity .35s var(--ease-smooth);
}

.top-nav.is-single .top-switch {
  opacity: 0;
  pointer-events: none;
}

.top-switch > .tab-bar {
  width: 100%;
  height: 100%;
}

.top-slot {
  display: grid;
  place-items: center;
  width: 100%;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .35s var(--ease-smooth);
}

.top-nav.is-single .top-slot {
  opacity: 1;
}

body:has(.bottom-nav.is-form) .top-switch,
body:has(.bottom-nav.is-form) .top-slot {
  opacity: 0;
  pointer-events: none;
}

body:has(.bottom-nav.is-form) .top-nav.is-form-title .top-slot {
  opacity: 1;
}

/* Menu toggle: two lines turn into a cross */
.menu-toggle {
  display: grid;
  place-items: center;
  width: var(--tap-size);
  height: var(--tap-size);
  border-radius: var(--radius-capsule);
  transition: background .25s, scale .3s var(--ease-spring);
}

.menu-toggle:active {
  background: var(--glass-drop-fill-pressed);
  scale: 1.08;
}

.menu-mark {
  position: relative;
  width: 26px;
  height: 20px;
  transition: transform .4s var(--ease-smooth);
}

.menu-line {
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .4s var(--ease-smooth);
}

.menu-line:first-child { top: 4px; }
.menu-line:last-child { top: 14px; }

:is(.is-menu-open, .is-date) .menu-mark { transform: rotate(180deg); }
:is(.is-menu-open, .is-date) .menu-line:first-child { transform: translateY(5px) rotate(45deg); }
:is(.is-menu-open, .is-date) .menu-line:last-child { transform: translateY(-5px) rotate(-45deg); }

/* Tab bar capsule. --dock pins one of them to the bottom edge. */
.tab-bar {
  position: relative;
  height: 100%;
  padding: var(--bar-padding);
  display: grid;
  grid-template-columns: repeat(var(--tab-count), 1fr);
}

.bottom-menu-slot {
  position: relative;
  z-index: 3;
  align-self: flex-end;
  flex: 0 0 var(--bar-height);
  height: var(--bar-height);
}

.bottom-menu {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: scale .3s var(--ease-spring), opacity .4s var(--ease-smooth);
}

.bottom-nav.is-form .bottom-menu {
  opacity: 0;
  pointer-events: none;
}

.bottom-nav:not(:has(.menu-sheet.is-open)):not(.is-menu-busy) .bottom-menu:active {
  scale: 1.08;
}

/* Closed sheet is the glass of the menu button; it never swaps with another element. */
.menu-sheet.glass {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: var(--bar-height);
  height: var(--bar-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--bar-height);
  border-radius: calc(var(--bar-height) / 2);
  overflow: hidden;
  pointer-events: none;
  transition:
    width .4s var(--ease-out),
    height .4s var(--ease-out),
    border-radius .4s var(--ease-out),
    scale .3s var(--ease-spring),
    opacity .4s var(--ease-smooth);
}

.bottom-nav.is-form .menu-sheet.glass {
  opacity: 0;
}

.bottom-nav:not(.is-menu-busy):has(.bottom-menu:active) .menu-sheet.glass:not(.is-open) {
  scale: 1.08;
  transition:
    width .4s var(--ease-glide),
    height .4s var(--ease-glide),
    border-radius .4s var(--ease-glide),
    scale .3s var(--ease-spring),
    opacity .4s var(--ease-smooth);
}

.menu-sheet.glass.is-open {
  width: 100%;
  height: var(--menu-height);
  border-radius: var(--radius-card);
  pointer-events: auto;
  transition:
    width .4s var(--ease-glide),
    height .4s var(--ease-glide),
    border-radius .4s var(--ease-glide),
    scale .3s var(--ease-spring),
    opacity .4s var(--ease-smooth);
}

.menu-sheet.glass > * {
  flex: 0 0 auto;
  width: var(--menu-content-width);
  opacity: 0;
  transition: opacity .25s var(--ease-smooth);
}

.menu-sheet.glass.is-open > * {
  opacity: 1;
  transition-delay: .1s;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  padding: var(--bar-padding);
}

.menu-link {
  min-height: var(--tap-size);
  display: flex;
  align-items: center;
  padding: 0 var(--bar-padding);
  color: var(--fg);
  text-decoration: none;
  font-size: var(--text-body);
}

.menu-link + .menu-link {
  box-shadow: inset 0 1px 0 var(--separator);
}

.menu-link:active {
  background: var(--card-pressed);
}

.menu-link[aria-current='page'] {
  color: var(--accent);
}

.menu-backdrop {
  position: fixed;
  z-index: 1;
  inset: 0;
  background: rgb(0 0 0 / .5);
  opacity: 0;
  transition: opacity .4s var(--ease-smooth);
}

.menu-backdrop.is-visible {
  opacity: 1;
}

.is-scroll-locked {
  overflow: hidden;
}

.bottom-row {
  position: fixed;
  z-index: 30;
  bottom: calc(var(--safe-bottom) + var(--bar-offset));
  left: 0;
  right: 0;
  width: var(--bar-width);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: var(--bar-padding);
}

.bottom-row:has(.bottom-nav.is-form),
.bottom-row:has(.bottom-nav.is-form-front) {
  z-index: 50;
}

.bottom-row:has(.bottom-nav.is-form) {
  pointer-events: none;
}

.bottom-nav {
  --screen-inset: 0px;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--bar-height);
  display: flex;
  align-items: flex-end;
  gap: var(--bar-padding);
  transition: height .4s var(--ease-smooth);
}

.salon-switch {
  z-index: 3;
  flex: 0 0 var(--bar-height);
  width: var(--bar-height);
  height: var(--bar-height);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--text-group);
  text-transform: uppercase;
  transition: scale .3s var(--ease-spring), opacity .4s var(--ease-smooth);
}

.bottom-row:has(.menu-backdrop:not([hidden])) .salon-switch {
  z-index: 0;
}

.salon-switch:active {
  scale: 1.08;
}

.bottom-row:has(.bottom-nav.is-form) .salon-switch {
  opacity: 0;
  pointer-events: none;
}

.bottom-nav.is-date-open {
  height: var(--date-height);
}

.bottom-dock {
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
  width: calc(100% - var(--bar-height) - var(--bar-padding));
  min-width: 0;
  height: auto;
  transition: width .4s var(--ease-smooth), transform .4s var(--ease-smooth);
}

.bottom-nav.is-form .bottom-dock {
  width: var(--form-action-width);
  transform: translateX(var(--form-action-shift));
}

.bottom-nav.is-date-open .tab-bar--dock.glass,
.bottom-nav.is-date-open .date-bar {
  border-radius: var(--radius-card);
}

.tab-bar--dock {
  height: 100%;
  border-radius: calc(var(--bar-height) / 2);
  transition: border-radius .4s var(--ease-smooth);
}

.date-bar {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: calc(var(--bar-height) / 2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-smooth), border-radius .4s var(--ease-smooth);
}

.date-bar.is-open {
  justify-content: flex-start;
}

.date-bar__nav {
  display: flex;
  align-items: center;
  flex: 0 0 var(--bar-height);
  width: 100%;
  height: var(--bar-height);
}

.date-bar.is-open .date-bar__nav {
  display: none;
}

.date-bar__list {
  display: none;
  flex-direction: column;
  width: 100%;
  padding: var(--bar-padding) 0;
}

.date-bar.is-open .date-bar__list,
.date-bar__list.is-measuring {
  display: flex;
}

.date-bar__list.is-measuring {
  position: absolute;
  visibility: hidden;
}

.bottom-nav.is-date .date-bar {
  opacity: 1;
  pointer-events: auto;
}

.bottom-nav.is-date .tab-bar__item,
.bottom-nav.is-date .tab-bar__indicator,
.bottom-nav.is-form .tab-bar__item,
.bottom-nav.is-form .tab-bar__indicator {
  opacity: 0;
  pointer-events: none;
}

.dock-action {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: var(--text-label);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-smooth);
}

.bottom-nav.is-form .dock-action {
  opacity: 1;
  pointer-events: auto;
}

.bottom-nav.is-form .dock-action:disabled {
  color: var(--muted);
  pointer-events: none;
}

.dock-action:active {
  color: var(--fg);
}

.date-bar__step {
  flex: 0 0 var(--tap-size);
  align-self: stretch;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.date-bar__step.is-absent {
  visibility: hidden;
  pointer-events: none;
}

.date-bar__step::before {
  content: '';
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.date-bar__step--back::before {
  transform: rotate(-135deg);
}

.date-bar__step:active {
  color: var(--fg);
}

.date-bar__label {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: var(--tap-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}

.date-bar__label:active {
  color: var(--fg);
}

.date-bar__option {
  min-height: var(--tap-size);
  padding: 0 var(--bar-padding);
  color: var(--fg);
  font-size: var(--text-body);
  text-align: center;
}

.date-bar__option + .date-bar__option {
  box-shadow: inset 0 1px 0 var(--separator);
}

.date-bar__option[aria-current='true'] {
  background: var(--accent-wash);
  color: var(--accent);
}

.date-bar__option:active {
  background: var(--card-pressed);
}

.top-add {
  position: relative;
  flex: 0 0 var(--bar-height);
  min-width: 0;
  height: 100%;
  transition: flex-basis .4s var(--ease-smooth);
}

body:has(.bottom-nav.is-date) .top-add {
  flex-basis: 0;
}

.bottom-add {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: var(--bar-height);
  height: var(--bar-height);
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: scale .3s var(--ease-spring), opacity .4s var(--ease-smooth);
}

body:has(.bottom-nav.is-date) .bottom-add {
  opacity: 0;
  pointer-events: none;
}

.bottom-add__mark {
  position: relative;
  width: 18px;
  height: 18px;
  transition: transform .4s var(--ease-smooth);
}

body:has(.bottom-nav.is-form) .bottom-add__mark {
  transform: rotate(135deg);
}

.bottom-add__mark::before,
.bottom-add__mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.bottom-add__mark::before {
  width: 18px;
  height: 2px;
}

.bottom-add__mark::after {
  width: 2px;
  height: 18px;
}

.bottom-add:active {
  scale: 1.08;
}

.tab-bar__indicator {
  position: absolute;
  top: var(--bar-padding);
  bottom: var(--bar-padding);
  left: var(--bar-padding);
  width: calc((100% - 2 * var(--bar-padding)) / var(--tab-count));
  transform: translateX(calc(var(--tab-index) * 100%));
  transition: transform .45s var(--ease-glide), opacity .35s var(--ease-smooth);
}

/* The drop stretches while it flows; the stretch must stay within --bar-padding. */
.tab-bar__indicator.is-moving {
  animation: glass-drop-flow .45s var(--ease-smooth);
}

@keyframes glass-drop-flow {
  15% { scale: 1.1 .9; }
  50%, 100% { scale: 1 1; }
}

.tab-bar__item {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-decoration: none;
  transition: color .25s, scale .3s var(--ease-spring), opacity .35s var(--ease-smooth);
}

.tab-bar__item:active {
  scale: 1.15;
}

.tab-bar__item[aria-current='page'] {
  color: var(--accent);
}

.tab-bar__label {
  padding: 0 16px;
  font-size: var(--text-label);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-title {
  flex: 1;
  display: grid;
  place-items: center;
  font-size: var(--text-group);
  font-weight: 600;
}

/* Screen */
.screen {
  min-height: 100dvh;
  padding:
    calc(var(--safe-top) + var(--bar-offset) * 2 + var(--bar-height)) 0
    calc(var(--safe-bottom) + var(--bar-offset) * 2 + var(--bar-height));
  display: flex;
  flex-direction: column;
}

.screen:has(.pager) {
  height: 100dvh;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.pager {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
}

.pager__track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  display: flex;
  transform: translateX(var(--pager-x, 0px));
}

.pager__track.is-animating {
  transition: transform .4s var(--ease-glide);
}

.pager__page {
  flex: 0 0 50%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--safe-top) + var(--bar-offset) * 2 + var(--bar-height));
  padding-bottom: calc(var(--safe-bottom) + var(--bar-offset) * 2 + var(--bar-height));
}

/* Text colors (list `color`: 0, 1, 2) */
.text-primary { color: var(--fg); }
.text-secondary { color: var(--muted); }
.text-accent { color: var(--accent); }

.icon--sm {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.icon--xs {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-capsule);
  background: var(--badge-fill);
  font-size: var(--text-badge);
  font-weight: 600;
  white-space: nowrap;
}

.badge .icon {
  color: var(--muted);
}

.badge:has(.icon) {
  padding-left: 7px;
}

/* List */
.list {
  padding: 0 calc((100% - var(--bar-width)) / 2);
}

.list__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 6px 10px;
}

.list__items {
  list-style: none;
}

.list-item {
  position: relative;
  min-height: 64px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .2s;
}

.list-item:active {
  background: var(--card-pressed);
}

.list-item + .list-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 1px;
  background: var(--separator);
}

:is(.list-item__title, .list-item__summary, .list-item__hint) > .icon {
  color: var(--accent);
}

.list-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.list-item__title,
.list-item__summary,
.list-item__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.list-item__title {
  font-size: var(--text-body);
  font-weight: 600;
}

.list-item__summary {
  font-size: var(--text-caption);
}

.list-item__hint {
  flex-shrink: 0;
  font-size: var(--text-body);
  font-weight: 500;
}

.list-item__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.list-item__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Record form. One layout; fields come from the screen schema. */
.form-sheet {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transform: translateY(100%);
  pointer-events: none;
  transition: transform .4s var(--ease-smooth);
}

.form-sheet.is-open {
  transform: none;
  pointer-events: auto;
}

.form-sheet__fields {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  column-gap: calc(var(--bar-padding) * 2);
  row-gap: calc(var(--bar-padding) * 2);
  padding:
    calc(var(--safe-top) + var(--bar-offset) * 2 + var(--bar-height))
    calc(var(--bar-padding) * 2)
    calc(var(--safe-bottom) + var(--bar-offset) * 2 + var(--bar-height));
}

.form-field {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bar-padding);
}

.form-field--half {
  flex: 0 0 calc(50% - var(--bar-padding));
}

.form-field[hidden] {
  display: none;
}

.form-rule {
  flex: 1 0 100%;
  height: 1px;
  background: var(--separator);
}

.form-rule[hidden] {
  display: none;
}

.form-field__name {
  color: var(--fg);
  font-size: var(--text-body);
}

.form-field__control {
  width: 100%;
  min-height: var(--tap-size);
  padding: 0 calc(var(--bar-padding) * 2);
  border: 1px solid var(--separator);
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: var(--text-body);
}

.form-field__control--text {
  min-height: calc(var(--tap-size) * 2);
  padding-top: var(--bar-padding);
  padding-bottom: var(--bar-padding);
  resize: none;
}

.form-field__control:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent);
}

.form-field__control:disabled {
  color: var(--muted);
}

.form-field__read {
  display: flex;
  align-items: center;
  min-height: var(--tap-size);
  padding: 0 var(--bar-padding);
  color: color-mix(in srgb, var(--fg) 62%, var(--muted));
  font-size: var(--text-body);
}

.form-field__select {
  position: relative;
}

.form-field__select .form-field__control {
  appearance: none;
  padding-right: calc(var(--bar-height) / 2);
}

.form-field__select::after {
  content: '';
  position: absolute;
  right: calc(var(--bar-padding) * 2);
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -8px;
  border-top: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  transform: rotate(135deg);
  pointer-events: none;
}

.form-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bar-padding);
}

.form-choice[hidden] {
  display: none;
}

.form-choice {
  flex: 1 1 0;
  min-height: var(--tap-size);
  padding: 0 var(--bar-padding);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--card-surface);
  color: var(--fg);
  font-size: var(--text-body);
}

.form-choice[aria-pressed='true'] {
  background: var(--accent-wash);
  color: var(--accent);
}

.form-choice:active {
  background: var(--card-pressed);
}

.form-choice:disabled {
  color: var(--muted);
}

.form-picks {
  display: flex;
  flex-flow: row wrap;
  gap: var(--bar-padding);
}

.form-field[data-kind="catalog"] {
  margin-top: calc(var(--bar-padding) * 2);
}

.form-catalog {
  display: flex;
  flex-flow: row wrap;
  gap: var(--bar-padding);
}

.form-catalog > .form-field {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
}

.form-catalog__split {
  flex: 1 0 100%;
  height: 1px;
  margin-block: calc(var(--bar-padding) * 3);
  background: var(--separator);
}

.form-catalog__split[hidden] {
  display: none;
}

.form-pick {
  flex: 0 0 calc(50% - var(--bar-padding) / 2);
  min-height: var(--tap-size);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(var(--bar-padding) / 2);
  padding: var(--bar-padding);
  padding-left: calc(var(--bar-padding) * 2);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--card-surface);
  font-size: var(--text-body);
}

.form-catalog .form-pick {
  padding-block: calc(var(--bar-padding) * 1.5);
}

.form-pick__name,
.form-pick__price {
  width: 100%;
  text-align: left;
}

.form-pick__price {
  color: var(--muted);
  font-size: var(--text-caption);
}

.form-pick[aria-pressed='true'] {
  background: var(--accent-wash);
  color: var(--accent);
}

.form-pick[aria-pressed='true'] .form-pick__price {
  display: none;
}

.form-pick:active {
  background: var(--card-pressed);
}

.form-stepper {
  display: flex;
  align-items: center;
  gap: calc(var(--bar-padding) / 2);
}

.form-stepper__btn {
  flex: 0 0 var(--tap-size);
  width: var(--tap-size);
  height: var(--tap-size);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--card-surface);
  font-size: var(--text-body);
}

.form-stepper .form-field__control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding-inline: 0;
  text-align: center;
}

.form-stepper__btn:disabled {
  color: var(--muted);
  pointer-events: none;
}

.form-stepper__btn:active {
  background: var(--card-pressed);
}

.form-stepper__value {
  min-width: calc(var(--bar-padding) * 4);
  text-align: center;
  font-size: var(--text-body);
}

.form-pick[hidden] {
  display: none;
}