/*
 * Base styles. Values come from tokens.css only.
 * Propshaft includes every file in app/assets/stylesheets; custom properties resolve regardless of order.
 */
*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute wins over a component's display. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height);
  color: var(--ink);
  background: var(--surface-100);
  accent-color: var(--primary);
}

/* Keyboard focus: a 2px gap of the background, then 2px of the focus ring color. */
:focus-visible {
  outline: var(--border-selected) solid var(--focus-ring);
  outline-offset: var(--border-selected);
}

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-content: start;
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-4) var(--space-4) var(--space-6);
}

.page h1 {
  margin: 0;
  font-size: var(--font-size-title);
  line-height: 1.25;
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--letter-spacing-title);
}

.page h2 {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heavy);
}

.page p {
  margin: 0;
}

.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-1);
}

.field input {
  width: 100%;
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--ink);
  background: var(--surface-000);
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-md);
}

.button {
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: var(--font-weight-bold);
  color: var(--on-primary);
  background: var(--primary);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.button--secondary {
  color: var(--ink);
  background: var(--surface-200);
}

.link {
  color: var(--primary);
}

/* Lines up with the page content: the page column minus its side padding. */
.flash {
  margin: var(--space-3) max(var(--space-4), calc((100% - var(--content-width)) / 2 + var(--space-4))) 0;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-md);
}

.flash--notice {
  color: var(--success);
  background: var(--success-soft);
}

.flash--alert {
  color: var(--danger);
  background: var(--danger-soft);
}

.cabinet-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-4) var(--space-4) 0;
}

.cabinet-header__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--radius-sm);
}

.cabinet-header__business {
  font-weight: var(--font-weight-heavy);
}

/* Cabinet sections (TabBar): a bar fixed to the bottom of the phone screen, an icon over a label in each tab.
   On a wide screen it keeps the width of the phone column, like the rest of the cabinet. */
.tabs {
  position: fixed;
  inset: auto 0 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-2) var(--space-1) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: var(--surface-000);
  border-top: var(--border-hairline) solid var(--line);
}

.tabs__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  min-height: var(--tap-size-lg);
  font-size: var(--font-size-label);
  line-height: 1.4;
  font-weight: var(--font-weight-bold);
  color: var(--ink-muted);
  text-decoration: none;
}

.tabs__pill {
  display: grid;
  place-items: center;
  width: var(--tab-pill-width);
  height: var(--tab-pill-height);
  border-radius: var(--radius-pill);
}

.tabs__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabs__tab[aria-current="page"] {
  color: var(--ink);
  font-weight: var(--font-weight-heavy);
}

.tabs__tab[aria-current="page"] .tabs__pill {
  color: var(--on-primary-soft);
  background: var(--primary-soft);
}

/* Room for the tab bar under the last element of a screen. */
body:has(.tabs) {
  padding-bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
}

.menu {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface-000);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.menu li + li {
  border-top: var(--border-hairline) solid var(--line);
}

button.menu__link {
  width: 100%;
  font: inherit;
  font-weight: var(--font-weight-bold);
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-size-lg);
  padding-inline: var(--space-4);
  font-weight: var(--font-weight-bold);
  color: var(--ink);
  text-decoration: none;
}

/* A menu row with a second line; the row grows to fit it. */
.menu__hint {
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--ink-muted);
}

.menu__link:has(.menu__hint) {
  padding-block: var(--space-2);
}

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

.sheet .menu {
  border: var(--border-hairline) solid var(--line);
  box-shadow: none;
}

.sheet .menu__link {
  min-height: calc(var(--tap-size) + var(--space-4));
}

.choice-list {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.field select {
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--ink);
  background: var(--surface-000);
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-md);
}

.field__error {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--danger);
}

/* Hidden from people, visible to form-filling bots. */
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field__hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--ink-muted);
}

/* PhoneField (C-07): the country code inside the field on the left, the number on the right. */
.phone-input {
  display: flex;
  align-items: stretch;
  min-height: var(--tap-size);
  background: var(--surface-000);
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.phone-input:focus-within {
  border: var(--border-selected) solid var(--primary);
}

.phone-input--invalid,
.phone-input--invalid:focus-within {
  border: var(--border-selected) solid var(--danger);
}

/* The error below the field takes the hint's place. */
.phone-input--invalid ~ .field__hint {
  display: none;
}

.phone-input__country {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  min-width: var(--tap-size);
  padding: 0 var(--space-2) 0 var(--space-3);
  font: inherit;
  font-weight: var(--font-weight-bold);
  color: var(--ink);
  background: var(--surface-200);
  border: 0;
  border-right: var(--border-hairline) solid var(--line);
  cursor: pointer;
}

.phone-input__iso {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: var(--space-8);
  height: var(--space-6);
  padding: 0 var(--space-1);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-heavy);
  color: var(--on-primary-soft);
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
}

.phone-input__code {
  font-variant-numeric: tabular-nums;
}

.phone-input__chev {
  display: inline-flex;
  color: var(--ink-muted);
}

.phone-input .phone-input__number {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.phone-input__number::placeholder {
  font-weight: var(--font-weight-medium);
  color: var(--ink-muted);
}

.phone-input__status {
  display: flex;
  align-items: center;
  padding-right: var(--space-3);
  color: var(--success);
}

/* CountrySheet: the country picker of PhoneField, a bottom sheet over a scrim. */
.country-sheet {
  inset: auto 0 0;
  width: 100%;
  max-width: var(--content-width);
  max-height: 85dvh;
  margin: auto auto 0;
  padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  color: var(--ink);
  background: var(--surface-000);
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-sheet);
}

.country-sheet[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.country-sheet::backdrop {
  background: var(--scrim);
}

.country-sheet h2 {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heavy);
}

.country-sheet .sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.sheet-grip {
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-1);
  margin: 0 auto;
  background: var(--line);
  border-radius: var(--radius-pill);
}

.field .country-search {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-size);
  padding: 0 var(--space-3);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--ink-muted);
  background: var(--surface-200);
  border-radius: var(--radius-md);
}

.country-search input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

.country-search input::placeholder {
  color: var(--ink-muted);
}

.country-sheet__lists {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto;
}

.list-label {
  margin: 0;
  padding-top: var(--space-1);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  color: var(--ink-muted);
}

.country-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.country-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-size);
  padding: var(--space-2);
  font: inherit;
  color: var(--ink);
  text-align: start;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.country-option__name {
  flex: 1;
  overflow-wrap: anywhere;
}

.country-option__code {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.country-option__mark {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--space-6);
  color: var(--primary);
}

.country-option--selected {
  font-weight: var(--font-weight-bold);
  color: var(--on-primary-soft);
  background: var(--primary-soft);
}

.country-option--selected .country-option__code {
  color: var(--on-primary-soft);
}

/* A displayed phone number never wraps (C-07). */
.phone-text {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.field--checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-size);
}

/* A group of fields as a card; the legend sits inside it. */
.fieldset {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  background: var(--surface-000);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.fieldset legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-1);
  padding: 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heavy);
}

.field label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.field--checkbox label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.field--checkbox input {
  width: var(--space-6);
  height: var(--space-6);
  min-height: 0;
  flex-shrink: 0;
}

.field textarea {
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--ink);
  background: var(--surface-000);
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-md);
}

.weekday__times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.field input[type="time"] {
  width: 100%;
}

/* Day of a specialist (components/MasterDayScreen in the design system). */
.day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.day-head__date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--ink-muted);
}

.day-head__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
}

/* B-11: the day's content in one block: header, day strip and the chosen day, which is redrawn on its own. */
.schedule {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.schedule__day {
  display: contents;
}

/*
 * Day strip: the booking page day tiles at a fixed width, edge to edge, scrolling sideways over a few days
 * back and a week ahead; a month's name stays over its first visible day; "Pick a date" opens and closes the row.
 */
.strip {
  position: relative;
  display: flex;
  gap: var(--space-1);
  margin-inline: calc(-1 * var(--space-4));
  padding: 0 var(--space-4) var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.strip__days {
  display: flex;
  flex: none;
  gap: var(--space-1);
}

.strip__month {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-1);
}

.strip__month-name {
  position: sticky;
  left: 0;
  align-self: flex-start;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-heavy);
  color: var(--ink-muted);
}

.strip .day {
  flex: 0 0 var(--day-size);
}

.strip .day__number {
  line-height: 1.2;
}

/* Sits in the row of days, under the month names; its label may wrap to two lines. */
.strip .day--pick {
  align-self: flex-end;
  gap: var(--space-1);
  color: var(--primary);
  text-align: center;
}

.day--pick .day__weekday {
  line-height: 1.1;
}

.strip .day--dim:not([aria-current]) {
  background: var(--surface-200);
  box-shadow: none;
}

.day--dim .day__number {
  color: var(--ink-muted);
}

.day__dots {
  display: flex;
  gap: var(--space-1);
  height: var(--dot-size);
  margin-top: var(--space-1);
}

.day__dots i {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-pill);
  background: var(--primary);
}

.day__off {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--ink-muted);
}

.day[aria-current="date"] .day__number,
.day[aria-current="date"] .day__off {
  color: var(--on-primary);
}

.day[aria-current="date"] .day__dots i {
  background: var(--on-primary);
}

/* Month picker: seven columns from the first day of the week; today outlined, the chosen day filled. */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
  text-align: center;
}

.month-grid__weekday {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  color: var(--ink-muted);
}

.month-grid__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--tap-size);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heavy);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.month-grid__day--muted {
  font-weight: var(--font-weight-medium);
  color: var(--ink-muted);
}

.month-grid__day--today {
  box-shadow: inset 0 0 0 var(--border-selected) var(--primary);
}

.month-grid__day[aria-current="date"] {
  color: var(--on-primary);
  background: var(--primary);
}

.month-grid__dot {
  position: absolute;
  bottom: var(--space-1);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-pill);
  background: var(--primary);
}

.month-grid__day[aria-current="date"] .month-grid__dot {
  background: var(--on-primary);
}

/* Read by screen readers and reachable from the keyboard, not drawn. */
.visually-hidden:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.chips {
  display: flex;
  gap: var(--space-2);
  margin-inline: calc(-1 * var(--space-4));
  padding: var(--space-1) var(--space-4) var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.chips__chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  padding-inline: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-heavy);
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface-000);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}

.chips__chip[aria-current="true"] {
  color: var(--surface-100);
  background: var(--ink);
}

/* Small label inside a card: the client's language. */
.chip {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-heavy);
  text-decoration: none;
  background: var(--surface-200);
  border-radius: var(--radius-pill);
}

.timeline {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__row {
  display: grid;
  grid-template-columns: var(--time-column) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.timeline__time {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heavy);
  font-variant-numeric: tabular-nums;
}

.timeline__time--muted {
  font-size: var(--font-size-sm);
  color: var(--ink-muted);
}

/* An appointment (components/BookingCard). */
.booking-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-000);
  border: var(--border-selected) solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.booking-card--now {
  border-color: var(--primary);
}

.booking-card--past {
  background: var(--surface-200);
  box-shadow: none;
}

.booking-card__body {
  min-width: 0;
}

/* Long names wrap and are never cut. */
.booking-card__name {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.booking-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.booking-card__meta {
  font-size: var(--font-size-label);
  color: var(--ink-muted);
}

/* The pause inside a service: dashed, as in the design system. */
.timeline__pause {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  color: var(--on-primary-soft);
  background: var(--surface-000);
  border: var(--border-control) dashed var(--primary);
  border-radius: var(--radius-lg);
}

.timeline__block,
.timeline__break {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--font-weight-bold);
  color: var(--ink-muted);
  text-decoration: none;
  background: var(--surface-200);
  border-radius: var(--radius-lg);
}

.timeline__until {
  font-size: var(--font-size-label);
  font-variant-numeric: tabular-nums;
}

/* A free window: one row from one busy time to the next, with a plus to book into it. */
.timeline__free {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-size);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--ink-muted);
  text-decoration: none;
  border: var(--border-hairline) dashed var(--control-border);
  border-radius: var(--radius-lg);
}

.timeline__plus {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--plus-size);
  height: var(--plus-size);
  color: var(--on-primary-soft);
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
}

.icon {
  width: var(--icon-glyph-size);
  height: var(--icon-glyph-size);
  flex-shrink: 0;
}

/* The one main button of the schedule, floating above the tab bar. */
.fab {
  position: fixed;
  right: max(var(--space-4), calc((100% - var(--content-width)) / 2 + var(--space-4)));
  bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + var(--space-4));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-size-lg);
  padding: 0 var(--space-6) 0 var(--space-4);
  font-weight: var(--font-weight-heavy);
  color: var(--on-primary);
  text-decoration: none;
  background: var(--primary);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-fab);
}

/* Room for the floating button under the last row of the day. */
.page:has(.fab) {
  padding-bottom: calc(var(--tap-size-lg) + var(--space-8));
}

/* Empty or idle screen (components/EmptyState): swallow, a short line, one soft button. */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding-block: var(--space-6);
  text-align: center;
}

.empty__image {
  width: var(--empty-illustration-size);
  height: var(--empty-illustration-size);
}

.empty__text {
  color: var(--ink-muted);
}

.button--soft {
  color: var(--on-primary-soft);
  background: var(--primary-soft);
}

.button--block {
  width: 100%;
}

/* A square button with a single sign; the name is in aria-label. */
.button--icon {
  width: var(--tap-size);
  padding: 0;
  font-size: var(--font-size-title);
}

/* A button lying on the page background: "More actions". */
.button--surface {
  color: var(--ink);
  background: var(--surface-000);
  box-shadow: var(--shadow-card);
}

/* A destructive action next to a soft one: "Cancel". */
.button--danger {
  color: var(--danger);
  background: var(--surface-200);
}

/* No background: "Back", "Day off". */
.button--quiet {
  color: var(--primary);
  background: transparent;
}

/* The main action at the bottom of a screen: one per screen. */
.button--cta {
  width: 100%;
  min-height: var(--tap-size-lg);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heavy);
}

/* Booking page (components/BookingScreen in the design system). */
.booking {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 100dvh;
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-4) var(--space-4) 0;
}

.booking__title {
  margin: 0;
  font-size: var(--font-size-title);
  line-height: 1.25;
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--letter-spacing-title);
}

.booking__text {
  margin: 0;
  color: var(--ink-muted);
}

.booking-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.booking-header__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--radius-sm);
}

.booking-header__place {
  flex: 1;
}

.booking-header__name {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heavy);
}

.booking-header__address {
  margin: 0;
  font-size: var(--font-size-label);
  color: var(--ink-muted);
}

.language-switch {
  display: flex;
  gap: var(--space-1);
}

.language-switch a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  padding-inline: var(--space-2);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  color: var(--ink-muted);
  text-decoration: none;
}

.language-switch a[aria-current="true"] {
  color: var(--primary);
}

.steps {
  display: flex;
  gap: var(--space-2);
}

.steps__step {
  flex: 1;
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--line);
}

.steps__step--done {
  background: var(--primary);
}

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  text-decoration: none;
  background: var(--surface-000);
  border: var(--border-selected) solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.cards {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A secondary action inside a list card ("Edit", "Schedule"): a link-sized tap target. */
.card__action {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  margin-inline-end: var(--space-4);
  padding: 0;
  font: inherit;
  font-weight: var(--font-weight-bold);
  color: var(--primary);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.card--selected {
  border-color: var(--primary);
}

.card__name {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-bold);
}

.card__meta {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--ink-muted);
}

.card__price {
  font-weight: var(--font-weight-heavy);
  white-space: nowrap;
}

.days {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-block: var(--space-1);
  scrollbar-width: none;
}

.day {
  display: flex;
  flex: 0 0 calc((100% - 3 * var(--space-2)) / 4);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--day-size);
  color: var(--ink);
  text-decoration: none;
  background: var(--surface-000);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.day__weekday {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  color: var(--ink-muted);
}

.day__number {
  font-size: var(--font-size-time);
  font-weight: var(--font-weight-heavy);
}

.day[aria-current="date"],
.day[aria-current="date"] .day__weekday {
  color: var(--on-primary);
  background: var(--primary);
}

.slots-label {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  color: var(--ink-muted);
}

.slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--tap-size);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heavy);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface-000);
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-md);
}

.slot[aria-current="time"] {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}

/* Bottom sheet with the main action. */
.sheet {
  display: grid;
  gap: var(--space-3);
  margin: auto calc(-1 * var(--space-4)) 0;
  padding: var(--space-4) var(--space-4) var(--space-6);
  background: var(--surface-000);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-sheet);
}

/* In the cabinet the sheet opens over the day, above the tab bar; the day stays behind a scrim. */
#panel:has(.sheet)::before {
  content: "";
  position: fixed;
  inset: 0 0 calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
  z-index: 2;
  background: var(--scrim);
}

#panel .sheet {
  position: fixed;
  z-index: 3;
  inset: auto 0 calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
  max-width: var(--content-width);
  max-height: 80dvh;
  margin-inline: auto;
  overflow-y: auto;
}

.sheet h2 {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heavy);
  overflow-wrap: anywhere;
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Two actions side by side: "Reschedule" and "Cancel". */
.sheet__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.sheet .slots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* B-12: the returning client found by phone. */
.found {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-000);
  border: var(--border-selected) solid var(--primary);
  border-radius: var(--radius-md);
}

.found p {
  margin: 0;
}

.found__name {
  font-weight: var(--font-weight-heavy);
  overflow-wrap: anywhere;
}

/* A group of time options; each option is a radio button drawn as a slot. */
.slots-group {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.slots-group legend {
  padding: 0;
}

.slot-choice {
  display: block;
}

.slot-choice__input {
  position: absolute;
  opacity: 0;
}

.slot-choice__input:checked + .slot {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}

.slot-choice__input:focus-visible + .slot {
  outline: var(--border-selected) solid var(--focus-ring);
  outline-offset: var(--border-selected);
}

.slot-choice .slot {
  cursor: pointer;
}

.other-time summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-size);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.note {
  margin: 0;
  font-size: var(--font-size-label);
  text-align: center;
  color: var(--ink-muted);
}

/* "You're booked" */
.done {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-bottom: var(--space-6);
  text-align: center;
}

.done__image {
  width: var(--illustration-size);
  height: var(--illustration-size);
}

/* C-09: the client's appointment card: one colored tile with the time, then plain rows. */
.ticket {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: var(--space-2);
  text-align: start;
  background: var(--surface-000);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.ticket__hero {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--on-primary);
  background: var(--primary);
  border-radius: var(--radius-md);
}

.ticket--quiet .ticket__hero {
  color: var(--ink-muted);
  background: var(--surface-200);
}

/* A tear-off calendar leaf: weekday strip, day, month. */
.leaf {
  display: flex;
  flex: 0 0 var(--leaf-size);
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  color: var(--ink);
  background: var(--surface-000);
  border-radius: var(--radius-leaf);
}

.leaf__weekday {
  align-self: stretch;
  height: var(--leaf-strip-size);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  line-height: var(--leaf-strip-size);
  text-align: center;
  color: var(--on-accent);
  background: var(--accent);
}

.ticket--quiet .leaf__weekday {
  color: var(--ink-muted);
  background: var(--line);
}

.leaf__day {
  padding-top: var(--space-1);
  font-size: var(--font-size-title);
  line-height: 1.25;
  font-weight: var(--font-weight-heavy);
  font-variant-numeric: tabular-nums;
}

.leaf__month {
  padding-bottom: var(--space-2);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--ink-muted);
}

.ticket__time {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.ticket__start {
  font-size: var(--font-size-display);
  line-height: 1.2;
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--letter-spacing-display);
}

.ticket--cancelled .ticket__start {
  text-decoration: line-through;
}

/* A long status wraps inside the badge; the badge stays on the right. */
.ticket__hero .badge {
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}

/* The muted badge would vanish on the quiet tile. */
.ticket--quiet .badge--muted {
  background: var(--surface-000);
}

.ticket__list {
  margin: 0;
  padding: 0 var(--space-3);
}

.ticket__row + .ticket__row {
  border-top: var(--border-hairline) solid var(--line);
}

.ticket__row dd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding-block: var(--space-3);
  font-weight: var(--font-weight-bold);
}

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

.ticket__value {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ticket__address {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--ink-muted);
}

/* The specialist's initial, until specialists have photos. */
.avatar {
  display: flex;
  flex: 0 0 var(--avatar-size-sm);
  align-items: center;
  justify-content: center;
  height: var(--avatar-size-sm);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-heavy);
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-pill);
}

/* A round button that opens the place in maps. */
.nav-button {
  display: flex;
  flex: 0 0 var(--tap-size);
  align-items: center;
  justify-content: center;
  height: var(--tap-size);
  color: var(--on-primary-soft);
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
}

.ticket__row .nav-button .icon {
  color: inherit;
}

/* Label and value rows inside a panel (cabinet appointment). */
.ticket__list--inset {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-100);
  border-radius: var(--radius-md);
}

.ticket__list--inset .ticket__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border: 0;
}

.ticket__list--inset dt {
  color: var(--ink-muted);
}

.ticket__list--inset dd {
  display: block;
  padding: 0;
  text-align: end;
}

/* Status = color + word. */
.badge {
  justify-self: start;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-heavy);
  border-radius: var(--radius-pill);
}

.badge--success {
  color: var(--success);
  background: var(--success-soft);
}

.badge--muted {
  color: var(--ink-muted);
  background: var(--surface-200);
}

.badge--warning {
  color: var(--warning);
  background: var(--warning-soft);
}

.badge--danger {
  color: var(--danger);
  background: var(--danger-soft);
}

.badge--now {
  color: var(--on-primary);
  background: var(--primary);
}

/* A time slot that submits right away (rescheduling): the form must not break the slot grid. */
.slot-form {
  display: contents;
}

button.slot {
  width: 100%;
  font-family: inherit;
  cursor: pointer;
}

/* Links styled as buttons look like buttons. */
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* button_to wraps the button in a form: let it take the full width of the column. */
.button-form {
  width: 100%;
}

.button-form .button {
  width: 100%;
}

/* An appointment card on the schedule opens its panel. */
a.booking-card {
  color: var(--ink);
  text-decoration: none;
}

/* C-07: the verification code screen — a screen of its own, centered. */
.code-screen {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  margin-block: auto;
  text-align: center;
}

.code-screen .form {
  width: 100%;
}

/* One real input under six drawn boxes; without JavaScript it stays a plain field. */
.code-input {
  position: relative;
  display: grid;
  gap: var(--space-2);
  justify-items: center;
}

.code-input__label {
  font-size: var(--font-size-label);
  color: var(--ink-muted);
}

.code-input__field {
  width: 100%;
  min-height: var(--code-box-size);
  font: inherit;
  font-size: var(--font-size-code);
  text-align: center;
  letter-spacing: 0.4em;
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-md);
}

.code-input__boxes {
  display: none;
}

.code-input--enhanced .code-input__boxes {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.code-input--enhanced .code-input__field {
  position: absolute;
  inset: auto 0 0;
  height: var(--code-box-size);
  color: transparent;
  caret-color: transparent;
  background: transparent;
  border-color: transparent;
}

.code-input--enhanced .code-input__field:focus {
  outline: none;
}

.code-input__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--code-box-size);
  height: var(--code-box-size);
  font-size: var(--font-size-code);
  font-weight: var(--font-weight-heavy);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface-000);
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-md);
}

.code-input__box--filled {
  border-color: var(--ink);
}

.code-input__box--active {
  border: var(--border-selected) solid var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

/* "More" (variant A): who is signed in, rare screens in named groups, a quiet sign-out at the end. */
.menu-page {
  gap: var(--space-6);
}

.business-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-000);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.business-card__logo,
.business-card__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--business-logo-size);
  height: var(--business-logo-size);
  font-size: var(--font-size-time);
  font-weight: var(--font-weight-heavy);
}

.business-card__logo {
  color: var(--on-primary);
  background: var(--primary);
  border-radius: var(--radius-md);
}

.business-card__avatar {
  color: var(--on-primary-soft);
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
}

.business-card__text {
  display: grid;
  flex: 1;
  min-width: 0;
}

/* A long business name wraps; it is never cut. */
.business-card__name {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.business-card__role {
  font-size: var(--font-size-sm);
  color: var(--ink-muted);
}

.business-card__switch {
  flex: none;
}

.menu-group {
  display: grid;
  gap: var(--space-2);
}

/* Beats `.page h2`: a group title is a small label, not a section heading. */
.page .menu-group__title {
  margin: 0;
  padding-inline: var(--space-1);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.menu-rows {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--surface-000);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* The whole row is the link; the divider starts after the icon tile. */
.menu-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: var(--space-4);
  color: var(--ink);
  text-decoration: none;
}

.menu-row__body {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  align-self: stretch;
  min-width: 0;
  min-height: calc(var(--tap-size) + var(--space-4));
  padding-right: var(--space-4);
}

.menu-rows li + li .menu-row__body {
  border-top: var(--border-hairline) solid var(--line);
}

.menu-row__tile {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--icon-tile-size);
  height: var(--icon-tile-size);
  color: var(--on-primary-soft);
  background: var(--primary-soft);
  border-radius: var(--radius-tile);
}

.menu-row__text {
  display: grid;
  flex: 1;
  align-content: center;
  min-width: 0;
  padding-block: var(--space-2);
}

.menu-row__name {
  font-weight: var(--font-weight-bold);
}

.menu-row__hint {
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-row__body > .icon {
  color: var(--ink-muted);
}

/* Sign out: rare and final, so it has no fill. */
.sign-out {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--ink-muted);
  background: transparent;
}

/*
 * Sign-up and setup screens (B-01): a step screen with an optional back arrow and Stepper on top,
 * a title with one line "why", the content, and the main button at the bottom.
 */
.screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4) var(--space-6);
}

.screen__form {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.screen__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-size);
}

.screen__back {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--tap-size);
  height: var(--tap-size);
  margin-inline-start: calc(-1 * var(--space-3));
  color: var(--ink);
  border-radius: var(--radius-md);
}

.screen__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-content: start;
  flex: 1;
  padding-block: var(--space-3);
}

.screen__head {
  display: grid;
  gap: var(--space-2);
}

.screen__title {
  margin: 0;
  font-size: var(--font-size-title);
  line-height: 1.25;
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--letter-spacing-title);
}

.screen__title.text-display {
  font-size: var(--font-size-display);
  letter-spacing: var(--letter-spacing-display);
}

.screen__why {
  margin: 0;
  color: var(--ink-muted);
}

/* EventHead: the swallow over a centered title and its reason (setup finish). */
.event-head {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
}

.event-head__image {
  width: var(--empty-illustration-size);
  height: var(--empty-illustration-size);
}

.event-head .screen__title {
  text-wrap: balance;
}

.screen__actions {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
}

.screen__legal {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--ink-muted);
}

.screen .code-screen {
  margin-block: 0;
}

/* Welcome: the wordmark, the promise, and what happens next. */
.welcome {
  align-content: center;
}

.welcome__wordmark {
  margin: 0;
  color: var(--primary);
}

.next-steps {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: next-step;
}

.next-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-weight-bold);
  counter-increment: next-step;
}

.next-steps li::before {
  content: counter(next-step);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--icon-tile-size);
  height: var(--icon-tile-size);
  font-weight: var(--font-weight-heavy);
  color: var(--on-primary-soft);
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
}

/* Stepper: the setup progress, "N of M". */
.stepper {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
}

.stepper .steps {
  flex: 1;
}

.stepper__count {
  flex-shrink: 0;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  color: var(--ink-muted);
}

/* A group of choices with a small label (not a card, unlike .fieldset). */
.choice-group {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-group legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

/* ChoiceChip: one choice of several; chips size to their text and wrap, a long name wraps inside. */
.choice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.choice-chip {
  position: relative;
  max-width: 100%;
}

.choice-chip__input,
.segmented__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-chip__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--ink);
  background: var(--surface-000);
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.choice-chip__input:checked + .choice-chip__label {
  color: var(--surface-100);
  background: var(--ink);
  border-color: var(--ink);
}

.choice-chip__input:focus-visible + .choice-chip__label,
.segmented__input:focus-visible + .segmented__label {
  outline: var(--border-selected) solid var(--focus-ring);
  outline-offset: var(--border-selected);
}

/* Segmented: two options on one track. */
.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-200);
  border-radius: var(--radius-md);
}

.segmented__option {
  position: relative;
  display: grid;
}

.segmented__label {
  display: grid;
  place-items: center;
  min-height: var(--tap-size);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--ink-muted);
  border-radius: var(--radius-tile);
  cursor: pointer;
}

.segmented__input:checked + .segmented__label {
  color: var(--ink);
  background: var(--surface-000);
  box-shadow: var(--shadow-card);
}

/* CountryRow: the value, a secondary line and "Change"; the native select over it opens the picker. */
.country-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-size-lg);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-000);
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-md);
}

.country-row:focus-within {
  outline: var(--border-selected) solid var(--focus-ring);
  outline-offset: var(--border-selected);
}

.country-row--empty {
  border: var(--border-selected) solid var(--primary);
}

.country-row__icon {
  flex-shrink: 0;
  color: var(--primary);
}

.country-row__text {
  display: grid;
  flex: 1;
}

.country-row__value {
  font-weight: var(--font-weight-bold);
}

.country-row--empty .country-row__value {
  color: var(--ink-muted);
}

.country-row__details {
  font-size: var(--font-size-label);
  color: var(--ink-muted);
}

.country-row__details:empty {
  display: none;
}

.country-row__change {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-heavy);
  color: var(--primary);
}

/* Without JavaScript the row is a plain select; the controller draws the row over it. */
.field .country-row__select {
  flex: 1;
  border: 0;
}

.country-row:not(.country-row--enhanced) :is(.country-row__icon, .country-row__text, .country-row__change) {
  display: none;
}

.field .country-row--enhanced .country-row__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.button[disabled] {
  color: var(--ink-muted);
  background: var(--surface-200);
  cursor: default;
}

/* Setup wizard steps 2–4 and the finish (B-01). */
.callout {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-md);
}

.callout .icon {
  width: var(--icon-inline-size);
  height: var(--icon-inline-size);
}

.callout--warning {
  color: var(--warning);
  background: var(--warning-soft);
}

/* Good news in a line: the trial on the setup finish. */
.callout--accent {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

/* ServiceCheckRow: a ticked row is a card with the price field; an unticked one is quiet. */
.service-rows {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ServiceCheckRow: one line — the checkbox with the name and duration, and a compact price field on the right
   with the currency inside it. The no-price warning takes its own line under the row, inside the card. */
.service-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border: var(--border-hairline) solid var(--line);
  border-radius: var(--radius-md);
}

.service-row:has(.service-row__box:checked) {
  background: var(--surface-000);
  border-color: transparent;
  box-shadow: var(--shadow-card);
}

.service-row__check {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: var(--tap-size-lg);
  cursor: pointer;
}

/* The checkbox drawn by hand: a rounded square, filled with the primary color and a tick when checked. */
.service-row__box {
  appearance: none;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0;
  background: var(--surface-000);
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.service-row__box::before {
  content: "";
  width: var(--checkbox-tick-size);
  height: var(--checkbox-tick-size);
  background: var(--on-primary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  visibility: hidden;
}

.service-row__box:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.service-row__box:checked::before {
  visibility: visible;
}

.service-row__text {
  display: grid;
  min-width: 0;
}

.service-row__name {
  font-weight: var(--font-weight-bold);
}

.service-row__meta {
  font-size: var(--font-size-sm);
  color: var(--ink-muted);
}

/* The own service row: the checkbox and the name on the first line, the duration and the price on the second. */
.service-row__own {
  display: contents;
}

.service-row__own .service-row__check {
  flex: 0 0 auto;
}

.service-row__own .service-row__name-input {
  flex: 1 1 calc(100% - var(--space-6) - var(--space-3) - var(--space-2));
  min-width: 0;
  margin-block-start: var(--space-1);
}

.service-row__own :is(input[type="text"], select) {
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--ink);
  background: var(--surface-000);
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-md);
}

/* The own service row: the price field goes to the right end of its line. */
.service-row--own .service-row__price {
  margin-inline-start: auto;
}

.service-row__price {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
  width: var(--price-field-width);
  min-height: var(--tap-size);
  padding: 0 var(--space-2);
  font-weight: var(--font-weight-bold);
  background: var(--surface-000);
  border: var(--border-control) solid var(--control-border);
  border-radius: var(--radius-tile);
}

.service-row__price:focus-within {
  border-color: var(--primary);
}

.service-row__price input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.service-row__price input:focus-visible {
  outline: none;
}

.service-row__currency {
  color: var(--ink-muted);
}

.service-row:not(:has(.service-row__box:checked)) :is(.service-row__price, .service-row__warning) {
  display: none;
}

.service-row__warning {
  display: none;
  flex-basis: 100%;
  margin: 0;
  padding-block-end: var(--space-2);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  color: var(--warning);
}

.service-row:has(.service-row__box:checked):has(.service-row__price input:placeholder-shown) .service-row__warning {
  display: block;
}

/* Hours: seven day toggles in a row, presets two per row, own times revealed when chosen. */
.day-toggles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

.day-toggle {
  position: relative;
  display: grid;
}

.day-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.day-toggle__label {
  display: grid;
  place-items: center;
  min-height: var(--tap-size);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-heavy);
  color: var(--ink-muted);
  background: var(--surface-000);
  border: var(--border-control) solid var(--line);
  border-radius: var(--radius-tile);
  cursor: pointer;
}

.day-toggle__input:checked + .day-toggle__label {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}

.day-toggle__input:focus-visible + .day-toggle__label {
  outline: var(--border-selected) solid var(--focus-ring);
  outline-offset: var(--border-selected);
}

.hour-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.hour-presets .choice-chip__label {
  height: 100%;
  font-variant-numeric: tabular-nums;
}

.time-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.choice-group:not(:has(input[value="own"]:checked)) [data-reveal="own"],
.choice-group:not(:has(.switch:checked)) [data-reveal="lunch"] {
  display: none;
}

/* Switch: a checkbox drawn as a toggle. */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-size);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.switch {
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: var(--tap-size);
  height: var(--space-6);
  margin: 0;
  background: var(--control-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.switch::after {
  content: "";
  position: absolute;
  inset-block: var(--space-1);
  inset-inline-start: var(--space-1);
  width: calc(var(--space-6) - 2 * var(--space-1));
  background: var(--surface-000);
  border-radius: var(--radius-pill);
}

.switch:checked {
  background: var(--primary);
}

.switch:checked::after {
  inset-inline-start: calc(100% - var(--space-6) + var(--space-1));
}

.summary-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--primary-soft);
  border-radius: var(--radius-md);
}

.summary-card__label,
.summary-card__hint {
  font-size: var(--font-size-label);
  color: var(--on-primary-soft);
}

.summary-card__value {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heavy);
}

/* SpecialistRow: initial, name and a secondary line, actions on the right. */
.specialist-rows {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.specialist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  background: var(--surface-000);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.specialist-row .avatar {
  flex-basis: var(--icon-tile-size);
  height: var(--icon-tile-size);
  font-size: var(--font-size-md);
}

.specialist-row__text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.specialist-row__name {
  font-weight: var(--font-weight-bold);
}

.specialist-row__detail {
  font-size: var(--font-size-label);
  color: var(--ink-muted);
}

.specialist-row__switch {
  flex-basis: 100%;
}

.add-specialist__title {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heavy);
}

/* A bottom sheet in a <dialog>. */
.bottom-sheet {
  inset: auto 0 0;
  width: 100%;
  max-width: var(--content-width);
  max-height: 85dvh;
  margin: auto auto 0;
  padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  color: var(--ink);
  background: var(--surface-000);
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-sheet);
}

.bottom-sheet::backdrop {
  background: var(--scrim);
}

.bottom-sheet h2 {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heavy);
}

.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-size);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.check-row input {
  width: var(--space-6);
  height: var(--space-6);
  margin: 0;
}

.check-row--all {
  border-bottom: var(--border-hairline) solid var(--line);
}

/* Finish: a preview of the booking page and the link. */
.preview-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-000);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.preview-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.preview-card__head .business-card__logo {
  display: grid;
  place-items: center;
  width: var(--business-logo-size);
  height: var(--business-logo-size);
  font-weight: var(--font-weight-heavy);
}

.preview-card__place {
  display: grid;
  min-width: 0;
}

.preview-card__name {
  font-weight: var(--font-weight-heavy);
  overflow-wrap: anywhere;
}

.preview-card__meta {
  font-size: var(--font-size-label);
  color: var(--ink-muted);
}

.preview-card__services {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview-card__services li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.preview-card__services b {
  color: var(--ink);
}

.link-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--surface-000);
  border: var(--border-control) solid var(--line);
  border-radius: var(--radius-md);
}

.link-row__url {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--font-weight-bold);
}

.screen__actions form {
  display: grid;
}

/*
 * The landing at pickpick.me (B-43): a site header and footer around sections of one column,
 * up to --page-width on wide screens; the hero text and the demo card sit side by side when there is room.
 */
.site-header,
.landing__section,
.landing__panel,
.landing__note,
.site-footer__body {
  max-width: var(--page-width);
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
}

.site-header__logo {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-size);
  color: var(--ink);
  text-decoration: none;
}

.site-header__icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

.site-header__sign-in {
  padding-block: 0;
  padding-inline: var(--space-3);
}

/* Short codes (EN · RU · ME) in a square tap target; the full name is the aria-label. */
.language-switch--short a {
  justify-content: center;
  min-width: var(--tap-size);
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
}

.landing__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-4);
}

.landing__section--tight {
  gap: var(--space-4);
}

.landing__section h1,
.landing__section h2,
.landing__section h3,
.landing__section p,
.landing__panel h2,
.landing__panel p {
  margin: 0;
}

.hero {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-6);
}

.hero__text {
  display: flex;
  flex: 1 1 340px;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

/* Accent pill: good news in a word, "3 months free". */
.badge--accent {
  align-self: flex-start;
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: var(--content-width);
}

.hero__demo {
  display: flex;
  flex: 1 1 300px;
  justify-content: center;
  min-width: 0;
}

/* DemoCard: a static picture of what a client sees after booking. */
.demo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 340px;
  margin: 0;
  padding: var(--space-6);
  text-align: center;
  background: var(--surface-000);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.demo-card__image {
  width: 150px;
  height: 150px;
}

.demo-card__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.demo-card__time {
  color: var(--primary);
}

.demo-card__meta {
  color: var(--ink-muted);
}

.demo-card__status {
  margin-top: var(--space-1);
}

/* Cards and steps: one column on a phone, side by side when there is room. */
.landing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* FeatureCard: a title and a line of text; no action, unlike .card. */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-000);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.feature-card p {
  color: var(--ink-muted);
}

/* Business type chips: a word on a soft pill, nothing to tap. */
.type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.type-chips li {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-bold);
  background: var(--surface-200);
  border-radius: var(--radius-pill);
}

.landing__panel {
  margin-top: var(--space-6);
  padding-inline: var(--space-4);
}

/* CtaPanel: the closing call to action on a soft primary panel. */
.cta-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: var(--primary-soft);
  border-radius: var(--radius-lg);
}

.cta-panel p {
  color: var(--ink-muted);
}

.cta-panel .button--cta {
  max-width: var(--content-width);
}

.landing__note {
  padding: var(--space-8) var(--space-4) var(--space-6);
}

/* A quiet note aside from the page's task: "For clients". */
.callout--neutral {
  color: var(--ink-muted);
  background: var(--surface-200);
}

.site-footer {
  border-top: var(--border-hairline) solid var(--line);
}

.site-footer__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.site-footer__slogan {
  flex-grow: 1;
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: var(--font-size-title);
  font-weight: var(--font-weight-heavy);
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--primary);
}

.site-footer__copyright {
  width: 100%;
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--ink-muted);
}