/* App surfaces (booking, manage, barber, admin) share the site's design system.
   Fonts load from the site being served at web root. */
@font-face { font-family: 'Anton'; src: url('/assets/fonts/anton-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #0b0d11; --surface: #14171d; --surface-hi: #1a1e26;
  --line: #262b34; --line-hi: #39404c;
  --text: #f4f5f7; --muted: #98a0ad;
  --red: #e03a3d; --red-soft: rgba(224, 58, 61, 0.13);
  --green: #35c17b;
  --r: 16px; --r-sm: 10px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --sans: 'Archivo', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line-hi); border-radius: var(--r-sm);
  padding: 0.8rem 1rem; width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}

.shell { max-width: 860px; margin-inline: auto; padding: 1.25rem; }
.wide { max-width: 1280px; }

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: rgba(11,13,17,0.9);
  backdrop-filter: blur(12px); z-index: 20;
}
.brand { font-family: var(--display); letter-spacing: 0.05em; font-size: 1rem; }
.brand .the { font-size: 0.62em; color: var(--muted); }
.brand .shave { color: var(--red); }

.h-display {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 0.95;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 1.6rem; border-radius: var(--r-sm); font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease), transform 140ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: #ee4649; }
.btn-ghost { border-color: var(--line-hi); }
.btn-ghost:hover { border-color: var(--text); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.25rem;
}

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.55rem 0.9rem; border: 1px solid var(--line-hi);
  border-radius: var(--r-sm); font-weight: 600; font-size: 0.95rem;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease), transform 140ms var(--ease);
}
.chip:hover { border-color: var(--text); }
.chip:active { transform: scale(0.96); }
.chip.on { background: var(--red); border-color: var(--red); color: #fff; }
.chip.off { opacity: 0.35; pointer-events: none; }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.error { color: #ff7b7d; font-weight: 600; }
.grid { display: grid; gap: 0.75rem; min-width: 0; }
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; min-width: 0; }
.spread { justify-content: space-between; }
.stack { display: grid; gap: 1.25rem; min-width: 0; }

/* Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content. A horizontally scrollable child (the day strip) then
   stretches the whole page instead of scrolling inside itself, which pushed
   the Next button off screen on phones. Letting these shrink to zero is what
   makes the inner overflow actually work. */
.stack > *, .grid > *, .row > * { min-width: 0; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--surface-hi); border: 1px solid var(--line-hi);
  border-radius: var(--r-sm); padding: 0.8rem 1.2rem; z-index: 50;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5); max-width: min(92vw, 480px);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .chip { transition: none; }
}