/* ==========================================================================
   Ondervale — DEMO page (Pam flagship 2026-08-26, Pam gate revision 2026-08-26)
   --------------------------------------------------------------------------
   Interactive slice: pick service → pick slot → confirm → calendar.
   Vanilla CSS only, token-driven, no new raw colors. WCAG AA, 1 breakpoint
   at 860px, reduced-motion safe, all focus visible.

   Gate revision: fix every overlap/squash at 360/768/1024/1440.
   - demo-shell: left column fluid, not fixed 340 that overflows 360
   - demo-week / demo-cal: true scroll containers at narrow, not squashed 60px cols
   - demo-service: allow wrap, keep price from overlapping
   - demo-step: wrap safe
   - intentional queue state: .demo-queue card replaces raw mailto link
   ========================================================================== */

.demo-shell {
  display: grid;
  gap: var(--space-8);
  align-items: start;
  /* prevent any inner scroll from bleeding to page */
  min-width: 0;
  overflow: clip;
}
@media (min-width: 860px) {
  .demo-shell { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
}

/* Left column — booking flow */
.demo-panel {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  min-width: 0;
  overflow: clip;
}
.demo-panel__kicker { margin-bottom: var(--space-3); }
.demo-panel__title { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.demo-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  min-width: 0;
}
.demo-step__num {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--text-small);
  font-weight: 800;
  flex: none;
}
.demo-step__num--done { background: #166534; }
.demo-step__num--muted { background: var(--gray-200); color: var(--gray-600); }
.demo-step__label { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
.demo-step__label.is-active { color: var(--color-text); }

.demo-services {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.demo-service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  cursor: pointer;
  font: inherit;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out);
}
.demo-service:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-1px); }
.demo-service[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.demo-service:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.demo-service > span:first-child { min-width: 0; flex: 1; }
.demo-service__name { font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-service__meta { font-size: var(--text-small); color: var(--color-text-muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-service__price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); flex: none; white-space: nowrap; }

.demo-slots { margin-bottom: var(--space-6); min-width: 0; }
.demo-slots__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.demo-slots__title { font-weight: 700; font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.demo-slots__hint { font-size: var(--text-small); color: var(--color-text-muted); }

/* — week grid: base 5 equal cols that never squash below 64px —
   At narrow we switch to a horizontal scroll strip (see media below). */
.demo-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(64px, 1fr));
  gap: var(--space-2);
  min-width: 0;
}
.demo-day { min-width: 0; }
.demo-day__head {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  text-align: center;
  margin-bottom: var(--space-2);
}
.demo-day__slots {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  min-height: 10rem;
}
.demo-slot {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: 1.5px dashed var(--gray-300);
  background: var(--color-surface-raised);
  color: var(--gray-600);
  transition: all var(--motion-fast) ease;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.demo-slot:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.demo-slot:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.demo-slot[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  border-style: solid;
}
.demo-slot:disabled {
  border-style: solid;
  background: color-mix(in srgb, var(--gray-200) 60%, white);
  color: var(--gray-500);
  cursor: not-allowed;
  opacity: 0.9;
  text-decoration: line-through;
}
.demo-slot__time { font-variant-numeric: tabular-nums; }

.demo-confirm {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--gray-50);
}
.demo-confirm__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-small); min-width: 0; }
.demo-confirm__row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-confirm__label { color: var(--color-text-muted); flex: none; }
.demo-confirm__value { font-weight: 700; }
.demo-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.demo-confirm__actions .btn { flex: 1 1 140px; min-width: 0; }
.demo-confirm__note { font-size: var(--text-small); color: var(--color-text-muted); margin: 0; }

.demo-success {
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, #166534 22%, transparent);
  background: color-mix(in srgb, #166534 7%, white);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.demo-success__icon {
  width: 28px; height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #166534;
  color: white;
}
.demo-success__icon svg { width: 16px; height: 16px; }
.demo-success__title { font-weight: 800; color: #166534; margin: 0 0 var(--space-1); }
.demo-success__text { margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }
.demo-success__detail { font-weight: 700; color: var(--color-text); word-break: break-word; }

/* — intentional queue card: the "ask for next slot" after success —
   Replaces the raw mailto link with a designed, honest next step. */
.demo-queue {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-3);
}
.demo-queue__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.demo-queue__icon {
  width: 36px; height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}
.demo-queue__icon svg { width: 18px; height: 18px; }
.demo-queue__title { font-weight: 800; font-size: var(--text-body); margin: 0; color: var(--color-text); }
.demo-queue__sub { font-size: var(--text-small); color: var(--color-text-muted); margin: 0; }
.demo-queue__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.demo-queue__actions .btn { flex: 1 1 160px; }
.demo-queue__note { font-size: var(--text-small); color: var(--color-text-muted); margin: 0; }

/* Right column — calendar */
.demo-calendar {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  min-width: 0;
}
.demo-calendar__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--gray-100);
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
}
.demo-calendar__dots { display: inline-flex; gap: 6px; flex: none; }
.demo-calendar__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); }
.demo-calendar__url {
  flex: 1;
  min-width: 0;
  padding: 0.35em 0.8em;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  min-width: 0;
}
.demo-calendar__biz { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.demo-calendar__avatar {
  width: 36px; height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}
.demo-calendar__avatar svg { width: 18px; height: 18px; }
.demo-calendar__name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-calendar__sub { font-size: var(--text-small); color: var(--color-text-muted); }
.demo-calendar__badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  white-space: nowrap;
  flex: none;
}

.demo-cal {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--gray-50);
  min-width: 0;
}
.demo-cal__day { min-width: 0; }
.demo-cal__head {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  text-align: center;
  margin-bottom: var(--space-2);
}
.demo-cal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  min-height: 14rem;
}
.demo-apt {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 10%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  font-size: var(--text-small);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
}
.demo-apt--new {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  animation: demo-pop 420ms var(--ease-out);
}
.demo-apt__top { display: flex; justify-content: space-between; gap: var(--space-2); font-weight: 800; min-width: 0; }
.demo-apt--new .demo-apt__top { color: var(--accent-contrast); }
.demo-apt__time { font-weight: 600; color: var(--gray-600); font-variant-numeric: tabular-nums; flex: none; }
.demo-apt--new .demo-apt__time { color: rgba(255,255,255,0.92); }
.demo-apt__svc { display: block; font-size: 0.92em; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-apt--new .demo-apt__svc { color: rgba(255,255,255,0.92); }
.demo-apt__client { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.demo-empty {
  border: 1.5px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--gray-500);
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

@keyframes demo-pop {
  0% { transform: translateY(-8px) scale(0.96); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-apt--new { animation: none; }
}

.demo-toast {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: min(22rem, calc(100vw - 2*var(--space-4)));
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.demo-toast.is-in { opacity: 1; transform: none; pointer-events: auto; }
.demo-toast__icon {
  width: 32px; height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}
.demo-toast__icon svg { width: 16px; height: 16px; }
.demo-toast__title { font-weight: 800; font-size: var(--text-small); margin: 0; }
.demo-toast__text { margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }

.demo-reset {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.demo-reset:hover { color: var(--accent-deep); }

/* Nicer focus for the whole demo page */
.demo-panel :focus-visible, .demo-slots :focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* — narrow scroll handling : week + calendar become horizontal strips —
   This is what the owner saw as "squashed/overlapping": at 360 the 5 cols
   were squeezed to ~64px and the time strings wrapped/overlapped. Now they
   keep 84–92px and scroll inside the card, never the page. */
@media (max-width: 860px) {
  .demo-panel { position: static; }
  .demo-calendar__head { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .demo-week,
  .demo-cal {
    grid-template-columns: repeat(5, 92px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: var(--space-2);
    scroll-snap-type: x proximity;
    /* subtle edge fade tells swipeable without adding chrome */
    mask-image: linear-gradient(to right, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
  }
  .demo-week .demo-day,
  .demo-cal .demo-cal__day { scroll-snap-align: start; }
  /* hide inner card scrollbars visually but keep them usable */
  .demo-week::-webkit-scrollbar,
  .demo-cal::-webkit-scrollbar { height: 6px; }
  .demo-week::-webkit-scrollbar-thumb,
  .demo-cal::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }
  /* swipe hint — only at narrow where scroll matters */
  .demo-slots::after {
    content: "← swipe to see all days →";
    display: block;
    text-align: center;
    font-size: var(--text-micro);
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    margin-top: var(--space-2);
  }
}
@media (max-width: 380px) {
  .demo-week,
  .demo-cal { grid-template-columns: repeat(5, 84px); }
  .demo-panel { padding: var(--space-4); }
  .demo-service { padding: var(--space-3); }
}
/* prevent page-level horizontal scroll: week/cal are the only scrollers */
.demo-panel,
.demo-calendar { max-width: 100%; }