/*
 * Koupe public booking + manage pages.
 *
 * Same cinematic monochrome language as the marketing site
 * (node/apps/marketing/app/globals.css) and the staff app (app.css): black and
 * white, Inter 300 for display type with tight tracking, 400 for reading, 500
 * for labels; sharp buttons and inputs, pill chips, 8px cards, no shadows.
 * Colour has one job: errors (#b3261e), so a problem is never missed.
 *
 * Accessibility notes (WCAG 2.1 AA):
 *  - muted text is #4a4a4a (8.9:1) and subtle text #6b6b6b (5.3:1 on white,
 *    4.9:1 on the #f5f5f5 panels); nothing that must be read is lighter.
 *  - control outlines use #8c8c8c (3.4:1), enough for 1.4.11; #ddd is only for
 *    decorative dividers.
 *  - selected states never rely on colour alone: a chosen service shows a
 *    ticked box, chosen cards and days invert to black, the language in use
 *    is filled; aria-pressed / aria-current carry the same to assistive tech.
 *  - every target is at least 44px; hover styles only where hover exists.
 * Class names are the contract with assets/js/*.js: restyle, never rename.
 */
:root {
  --k-bg: #ffffff;
  --k-soft: #f5f5f5;
  --k-mist: #eeeeee;
  --k-fg: #000000;
  --k-muted: #4a4a4a;
  --k-subtle: #6b6b6b;
  --k-faint: #9a9a9a; /* disabled only: WCAG exempts inactive controls */
  --k-line: #dddddd;
  --k-line-strong: #8c8c8c;
  --k-ink: #000000;
  --k-ink-hover: #2f2f2f;
  --k-on-ink: #ffffff;
  --k-on-ink-muted: #bdbdbd;
  --k-danger: #b3261e;
  --k-danger-soft: #fdecea;
  --k-radius: 8px;
  --k-pill: 100px;
  --k-touch: 44px;
  --k-cta: 52px;
  --k-col: 480px;
  --k-font: Inter, "Helvetica Neue", Arial, sans-serif;
  --k-ease: 150ms ease;
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

.k-body {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-fg);
  font: 400 16px/1.5 var(--k-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Language bar + page fill one screen together, so a short page never scrolls just to reach the footer. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.k-shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--k-col);
  margin: 0 auto;
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
}

:focus-visible { outline: 2px solid var(--k-fg); outline-offset: 2px; }
/* Headings receive focus from script on each step, for screen readers; they are not controls. */
.k-step h2:focus,
.k-empty h2:focus { outline: none; }

/* --- language switch ---------------------------------------------------- */
.k-lang {
  position: relative;
  z-index: 1; /* keeps the links' enlarged hit area above the page below */
  width: 100%;
  max-width: var(--k-col);
  margin: 0 auto;
  padding: 12px 16px 0;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.k-lang a {
  position: relative;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-pill);
  color: var(--k-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color var(--k-ease), background-color var(--k-ease);
}
/* 44px hit area around a quieter 34px pill (offsets are from the padding box, inside the 1px border). */
.k-lang a::after { content: ""; position: absolute; inset: -6px -4px; }
.k-lang a[aria-current="true"] { background: var(--k-ink); border-color: var(--k-ink); color: var(--k-on-ink); }

/* --- header ------------------------------------------------------------- */
.k-head { margin: 8px 0 20px; }
.k-eyebrow {
  margin: 0 0 8px;
  color: var(--k-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.k-shop {
  margin: 0;
  font-size: clamp(32px, 9vw, 48px);
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* progress */
.k-progress { margin: 20px 0 0; }
.k-progress ol {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.k-progress li { height: 3px; background: var(--k-line); }
.k-progress li[data-done] { background: var(--k-ink); }
.k-progress p { margin: 0; font-size: 13px; color: var(--k-subtle); font-variant-numeric: tabular-nums; }

/* --- sections ----------------------------------------------------------- */
.k-step { display: flex; flex-direction: column; gap: 20px; }
.k-step h2 {
  margin: 4px 0 0;
  font-size: 28px;
  line-height: 1.12;
  font-weight: 300;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.k-group { display: flex; flex-direction: column; gap: 10px; }
.k-label {
  margin: 0;
  color: var(--k-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.k-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* selectable cards (services, staff) */
.k-card {
  width: 100%;
  min-height: 68px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-radius);
  background: var(--k-bg);
  color: var(--k-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--k-ease), background-color var(--k-ease), color var(--k-ease);
  -webkit-tap-highlight-color: transparent;
}
.k-card[aria-pressed="true"] { background: var(--k-ink); border-color: var(--k-ink); color: var(--k-on-ink); }
.k-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.k-card-title { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.k-card-sub { font-size: 14px; line-height: 1.4; color: var(--k-subtle); overflow-wrap: anywhere; }
.k-card-right { flex-shrink: 0; text-align: right; font-weight: 500; font-size: 16px; font-variant-numeric: tabular-nums; }
.k-card-right small { display: block; font-size: 13px; font-weight: 400; color: var(--k-subtle); }
.k-card[aria-pressed="true"] :is(.k-card-sub, .k-card-right small) { color: var(--k-on-ink-muted); }

/* Services are a multi-pick: a tick box says "chosen" without relying on the fill. */
.k-card[data-key^="svc-"]::before,
.k-card[aria-pressed="true"]:not([data-key^="svc-"])::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--k-fg);
  background: var(--k-bg) no-repeat center / 16px 16px;
}
/* The barber you picked (seen when coming back) gets the same tick, at the end of the row. */
.k-card[data-key^="svc-"][aria-pressed="true"]::before,
.k-card[aria-pressed="true"]:not([data-key^="svc-"])::after {
  border-color: var(--k-on-ink);
  background-color: var(--k-on-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
}

.k-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--k-ink);
  color: var(--k-on-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.k-avatar img { width: 100%; height: 100%; object-fit: cover; }
.k-card[aria-pressed="true"] .k-avatar { background: var(--k-on-ink); color: var(--k-ink); }

/* Availability line under a barber: a dot marks "has a time", text says when (wraps cleanly in French). */
.k-badge {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  color: var(--k-subtle);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.k-badge[data-tone="success"] { color: var(--k-fg); }
.k-badge[data-tone="success"]::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: currentColor;
}
.k-card[aria-pressed="true"] .k-badge { color: var(--k-on-ink-muted); }
.k-card[aria-pressed="true"] .k-badge[data-tone="success"] { color: var(--k-on-ink); }

/* sticky summary bar */
.k-summary {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 4px -16px 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--k-fg);
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.k-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.k-summary-row span:last-child { font-size: 17px; font-weight: 500; }

/* --- buttons ------------------------------------------------------------ */
.k-btn {
  min-height: var(--k-cta);
  width: 100%;
  padding: 12px 20px;
  border: 1px solid var(--k-ink);
  border-radius: 0;
  background: var(--k-ink);
  color: var(--k-on-ink);
  font: 500 16px/1.2 var(--k-font);
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--k-ease), color var(--k-ease), border-color var(--k-ease);
  -webkit-tap-highlight-color: transparent;
}
.k-btn:disabled { background: var(--k-mist); border-color: var(--k-mist); color: var(--k-subtle); cursor: not-allowed; }
.k-btn[data-variant="ghost"] {
  width: auto;
  min-height: var(--k-touch);
  padding: 0 12px;
  margin-left: -12px;
  border-color: transparent;
  background: transparent;
  color: var(--k-fg);
  font-size: 15px;
}
.k-btn[data-variant="outline"] { background: var(--k-bg); color: var(--k-fg); border-color: var(--k-ink); }
.k-btn[data-variant="danger"] { background: var(--k-danger); border-color: var(--k-danger); color: var(--k-on-ink); }

.k-icon-btn {
  width: var(--k-touch);
  height: var(--k-touch);
  padding: 0;
  border: 1px solid var(--k-line-strong);
  border-radius: 0;
  background: var(--k-bg);
  color: var(--k-fg);
  font: 400 24px/1 var(--k-font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--k-ease), background-color var(--k-ease);
}
.k-icon-btn:disabled { border-color: var(--k-line); color: var(--k-faint); cursor: not-allowed; }

/* --- time step ---------------------------------------------------------- */
.k-week { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.k-month { font-size: 15px; font-weight: 500; text-transform: capitalize; text-align: center; }
.k-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.k-day {
  min-height: 68px;
  padding: 0;
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-pill);
  background: var(--k-bg);
  color: var(--k-fg);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: border-color var(--k-ease), background-color var(--k-ease), color var(--k-ease);
  -webkit-tap-highlight-color: transparent;
}
.k-day span:first-child { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.k-day span:last-child { font-size: 18px; font-weight: 400; font-variant-numeric: tabular-nums; }
.k-day[aria-pressed="true"] { background: var(--k-ink); border-color: var(--k-ink); color: var(--k-on-ink); }
/* Closed or out of range: no outline (a shape cue, not only a paler grey). */
.k-day:disabled { border-color: transparent; background: transparent; color: var(--k-faint); cursor: not-allowed; }

.k-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); /* 3 across on a 320px phone, 5 on desktop */
  gap: 8px;
}
.k-slot {
  width: 100%;
  min-height: 48px;
  padding: 0 4px;
  border: 1px solid var(--k-line-strong);
  border-radius: 0;
  background: var(--k-bg);
  color: var(--k-fg);
  font: 500 15px/1.2 var(--k-font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--k-ease), background-color var(--k-ease), color var(--k-ease);
  -webkit-tap-highlight-color: transparent;
}
.k-slot:active:not(:disabled) { background: var(--k-ink); border-color: var(--k-ink); color: var(--k-on-ink); }
.k-slot:disabled { color: var(--k-faint); border-color: var(--k-line); cursor: wait; }

.k-skeleton {
  height: 48px;
  background: linear-gradient(90deg, var(--k-mist), #f8f8f8, var(--k-mist));
  background-size: 200% 100%;
  animation: k-shimmer 1.2s infinite;
}
@keyframes k-shimmer { to { background-position: -200% 0; } }

.k-empty-box {
  margin: 0;
  padding: 24px 16px;
  border-radius: var(--k-radius);
  background: var(--k-soft);
  color: var(--k-muted);
  text-align: center;
  font-size: 15px;
}

/* hold timer: a black band, so it reads as "attention" without a warning colour */
.k-hold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--k-touch);
  padding: 10px 16px;
  background: var(--k-ink);
  color: var(--k-on-ink);
  font-size: 14px;
  font-weight: 500;
}
.k-hold [data-hold-left] { font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.k-hold button { border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: var(--k-touch); }
.k-hold :focus-visible { outline-color: var(--k-on-ink); }

/* --- details form ------------------------------------------------------- */
.k-form { display: flex; flex-direction: column; gap: 20px; }
.k-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.k-field label { font-size: 14px; font-weight: 500; }
.k-hint { font-size: 13px; font-weight: 400; color: var(--k-subtle); }
.k-field input,
.k-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--k-line-strong);
  border-radius: 0;
  background: var(--k-bg);
  color: var(--k-fg);
  font: 400 16px/1.4 var(--k-font); /* 16px: no zoom-on-focus in iOS Safari */
  transition: border-color var(--k-ease);
}
.k-field textarea { min-height: 96px; resize: vertical; }
.k-field input:focus,
.k-field textarea:focus { outline: 2px solid var(--k-fg); outline-offset: -1px; border-color: var(--k-fg); }
/* Invalid: red and a doubled edge, plus the message below; never colour alone. */
.k-field [aria-invalid="true"] { border-color: var(--k-danger); box-shadow: inset 0 0 0 1px var(--k-danger); }
.k-field [aria-invalid="true"]:focus { outline-color: var(--k-danger); }
.k-error { margin: 0; font-size: 13px; font-weight: 500; color: var(--k-danger); }
.k-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 360px) { .k-row { grid-template-columns: 1fr; } }

.k-consent {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.k-consent legend { padding: 0 6px; margin-left: -6px; }
.k-check { display: flex; gap: 12px; align-items: flex-start; }
.k-check input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--k-ink); cursor: pointer; }
.k-check label { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 500; line-height: 1.4; cursor: pointer; }
.k-check label span { font-size: 13px; font-weight: 400; color: var(--k-muted); }
.k-check input[aria-invalid="true"] { outline: 2px solid var(--k-danger); outline-offset: 1px; }
.k-sender { margin: 0; font-size: 12px; color: var(--k-subtle); }

/* recap */
.k-recap {
  padding: 16px 18px;
  border-radius: var(--k-radius);
  background: var(--k-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}
.k-recap strong { font-weight: 500; }
.k-recap > strong:first-child { font-size: 16px; }
.k-recap-line { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.k-recap-line span:last-child { flex-shrink: 0; }
.k-recap hr { width: 100%; border: 0; border-top: 1px solid var(--k-line); margin: 6px 0; }
.k-recap a { color: var(--k-fg); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* confirmation */
.k-done { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.k-done-mark {
  width: 56px;
  height: 56px;
  margin: 8px auto 4px;
  border-radius: 50%;
  background: var(--k-ink);
  color: var(--k-on-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.k-done h2 { margin: 0; font-size: 32px; }
.k-done p { margin: 0; color: var(--k-muted); }

/* toast (lib.js) */
.k-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 448px;
  padding: 14px 18px;
  background: var(--k-ink);
  color: var(--k-on-ink);
  font-size: 14px;
  font-weight: 500;
  z-index: 20;
}
.k-toast[data-tone="error"] { background: var(--k-danger); }

/* status pill (manage) */
.k-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: 1px solid var(--k-ink);
  border-radius: var(--k-pill);
  background: var(--k-ink);
  color: var(--k-on-ink);
  font-size: 13px;
  font-weight: 500;
}
.k-pill[data-status="completed"] { background: var(--k-bg); color: var(--k-fg); }
.k-pill[data-status="cancelled"],
.k-pill[data-status="no_show"] { background: var(--k-danger-soft); border-color: var(--k-danger); color: var(--k-danger); }

.k-dialog {
  border: 0;
  border-radius: var(--k-radius);
  padding: 24px;
  max-width: min(420px, calc(100vw - 32px));
  color: var(--k-fg);
  font-family: var(--k-font);
}
.k-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.k-dialog h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.15; font-weight: 300; letter-spacing: -0.03em; }
.k-dialog p { margin: 0 0 20px; color: var(--k-muted); }
.k-dialog-actions { display: flex; flex-direction: column; gap: 8px; }

.k-loading, .k-note { color: var(--k-subtle); font-size: 14px; }
.k-empty { text-align: center; padding: 48px 0; }
.k-empty :is(h1, h2) { margin: 0 0 10px; font-size: 30px; line-height: 1.1; font-weight: 300; letter-spacing: -0.03em; }
.k-empty p { color: var(--k-muted); margin: 0; }

.k-foot { margin-top: auto; padding-top: 40px; text-align: center; font-size: 12px; letter-spacing: 0.02em; color: var(--k-subtle); }
.k-foot a { color: inherit; }

.k-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- hover, only where a pointer can hover (no sticky states after a tap) --- */
@media (hover: hover) {
  .k-lang a:not([aria-current="true"]):hover { border-color: var(--k-fg); background: var(--k-soft); }
  .k-card:hover { border-color: var(--k-fg); }
  .k-card[aria-pressed="true"]:hover { background: var(--k-ink-hover); }
  .k-btn:hover:not(:disabled) { background: var(--k-ink-hover); border-color: var(--k-ink-hover); }
  .k-btn[data-variant="ghost"]:hover { background: var(--k-soft); border-color: transparent; }
  .k-btn[data-variant="outline"]:hover:not(:disabled) { background: var(--k-soft); border-color: var(--k-ink); }
  .k-btn[data-variant="danger"]:hover:not(:disabled) { background: #8f1e18; border-color: #8f1e18; }
  .k-icon-btn:hover:not(:disabled) { border-color: var(--k-fg); background: var(--k-soft); }
  .k-day:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--k-fg); background: var(--k-soft); }
  .k-slot:hover:not(:disabled) { background: var(--k-ink); border-color: var(--k-ink); color: var(--k-on-ink); }
  .k-field input:hover:not(:focus),
  .k-field textarea:hover:not(:focus) { border-color: var(--k-fg); }
  .k-field [aria-invalid="true"]:hover:not(:focus) { border-color: var(--k-danger); }
}

/* Press feedback for touch (the grey tap flash is turned off above). */
.k-btn:not([data-variant]):active:not(:disabled) { background: var(--k-ink-hover); border-color: var(--k-ink-hover); }
.k-btn:is([data-variant="outline"], [data-variant="ghost"]):active:not(:disabled),
.k-icon-btn:active:not(:disabled),
.k-card:not([aria-pressed="true"]):active,
.k-day:not([aria-pressed="true"]):active:not(:disabled) { background: var(--k-soft); }
.k-btn[data-variant="danger"]:active:not(:disabled) { background: #8f1e18; border-color: #8f1e18; }

@media (max-width: 359px) {
  .k-days { gap: 3px; }
  .k-day span:first-child { font-size: 10px; letter-spacing: 0.02em; }
}

@media (min-width: 768px) {
  :root { --k-col: 560px; }
  .k-shell { padding: 24px 24px 40px; }
  .k-lang { padding: 20px 24px 0; }
  /* Phone: the bar spans the screen. Wider: it lines up with the column. */
  .k-summary { margin-inline: 0; padding-inline: 0; }
  .k-step h2 { font-size: 32px; }
  .k-head { margin-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}