/* The app's palette, verbatim from design/src/styles.css. The portal is a
   different surface but the same house, and a stylist moves between the two
   all day — a second, nearly-right dark grey would read as a bug.

   Fonts are named, never fetched: an @font-face would be a network dependency
   on a salon's wifi and a hole in the CSP for one typeface. Space Grotesk and
   Space Mono render where they are installed; elsewhere the stack lands on the
   platform's own grotesque, which is what the design intends anyway. */
:root {
  --page: #08080A;
  --bg: #0B0B0E;
  --card: #131317;
  --card2: #16161B;
  --ink: #F4F2EE;
  --ink3: #B4B4BE;
  --mute: #8A8A92;
  --mute2: #6E6E78;
  --acc: #C8FF4D;
  --onAcc: #0B0B0E;
  --accWash: rgba(200, 255, 77, 0.06);
  --accLine: rgba(200, 255, 77, 0.32);
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.14);
  --bad: #FF8A73;

  --sans: 'Space Grotesk', ui-sans-serif, -apple-system, 'Segoe UI', Inter, system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, 'Roboto Mono', monospace;
}

* { box-sizing: border-box; }

/* The screens toggle on `hidden`, and any `display` in a class rule outranks
   the user-agent's `[hidden] { display: none }`. Without this the signed-in
   shell renders underneath the sign-in screen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.01em; }
.muted { color: var(--mute); }
.hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.eyebrow {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute2);
}

/* ── the redeem screen ─────────────────────────────────────────────────── */

.gate {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 32px 20px;
  /* One soft accent wash, top-left, so the empty screen is not a black void. */
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(200, 255, 77, 0.05), transparent 60%),
    var(--page);
}

.gate-card {
  width: 100%;
  max-width: 420px;
  align-self: center;
}

.gate-title {
  margin: 0 0 10px;
  font-size: clamp(34px, 6vw, 46px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.gate-copy { margin: 0 0 28px; color: var(--ink3); max-width: 34ch; }
.gate-form { display: grid; gap: 10px; }
.gate-foot { color: var(--mute2); margin: 0; }

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute2);
}

/* ── controls ──────────────────────────────────────────────────────────── */

.input,
.select,
.composer-text,
.day-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.composer-text { resize: vertical; min-height: 44px; }
.input::placeholder, .composer-text::placeholder { color: var(--mute2); }
.input:focus, .select:focus, .composer-text:focus, .day-input:focus { border-color: var(--line2); }
.day-input { width: auto; font-family: var(--mono); font-size: 13px; color-scheme: dark; }
.select { appearance: none; cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--line2);
  border-radius: 9px;
  background: var(--card2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.btn:hover { background: #1D1D23; }
.btn:disabled { opacity: 0.45; cursor: progress; }

.btn.accent {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--onAcc);
  font-weight: 700;
}

.btn.accent:hover { background: #D7FF74; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink3); }
.btn.ghost:hover { background: var(--card); color: var(--ink); }

/* ── chrome ────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: rgba(8, 8, 10, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand-sub { color: var(--acc); letter-spacing: 0.16em; text-transform: uppercase; font-size: 10px; }

.nav { display: flex; gap: 4px; margin-inline-start: auto; }

.nav a {
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--mute);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--acc); background: var(--accWash); }

.who { display: flex; align-items: center; gap: 12px; }
.who .mono { color: var(--ink3); }

.main {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 42px) clamp(16px, 4vw, 40px) 80px;
}

.pane-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.pane-title {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.06;
}

.pane-sub { margin: 8px 0 0; color: var(--mute); }
.back { color: var(--mute); text-decoration: none; }
.back:hover { color: var(--acc); }

.banner {
  margin: 0 0 22px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-inline-start: 2px solid var(--accLine);
  border-radius: 0 9px 9px 0;
  background: var(--card);
  color: var(--ink3);
  font-size: 14px;
}

.empty { color: var(--mute2); font-size: 14px; margin: 14px 0; }

/* ── rows ──────────────────────────────────────────────────────────────── */

.rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.rows:empty, .rows > .empty { background: var(--page); }

.row {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: var(--bg);
  color: inherit;
  text-align: start;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.row:hover { background: var(--card2); }
.row-time { color: var(--acc); min-width: 52px; }
.row-body { display: grid; flex: 1; min-width: 0; }
.row-body strong { font-weight: 500; letter-spacing: -0.01em; }
.row-sub { color: var(--mute); font-size: 13px; }

.chip {
  padding: 4px 9px;
  border: 1px solid var(--line2);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

.chip-started { color: var(--acc); border-color: var(--accLine); background: var(--accWash); }
.chip-completed { color: var(--mute2); }

/* ── booking ───────────────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }

.card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
}

.side { display: grid; gap: 20px; }
.thread-card { display: grid; gap: 14px; padding: 0; }
.log-wrap { max-height: min(58vh, 560px); overflow: auto; padding: 18px; }
.log { display: grid; gap: 12px; }

.msg {
  justify-self: start;
  max-width: 78%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 13px 13px 13px 3px;
  background: var(--card);
}

.msg-provider {
  justify-self: end;
  border-radius: 13px 13px 3px 13px;
  border-color: var(--accLine);
  background: var(--accWash);
}

.msg-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-time { display: block; margin-top: 5px; color: var(--mute2); }
/* A fixed width, not max-width: the bubble is sized by its content, so a
   percentage width collapses an image-only message to nothing. */
.msg-image { display: block; width: 240px; max-width: 100%; border-radius: 9px; margin-top: 4px; }

.composer { display: grid; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.composer-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── media grids ───────────────────────────────────────────────────────── */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.grid > .empty { grid-column: 1 / -1; }

.tile {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card2);
  overflow: hidden;
}

/* Only the selectable tiles are buttons; the ones in a collection are display. */
button.tile { cursor: pointer; }

.tile.picked { border-color: var(--acc); box-shadow: inset 0 0 0 2px var(--acc); }
.thumb, .result-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb.missing, .result-image.missing { background: repeating-linear-gradient(45deg, #16161B, #16161B 6px, #1C1C21 6px, #1C1C21 12px); }

.gen { display: grid; gap: 10px; }
.result:empty { display: none; }
.result { display: grid; gap: 8px; }
.result-image { aspect-ratio: 3 / 4; border-radius: 11px; border: 1px solid var(--accLine); }

.rows + .card { margin-top: 20px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.inline-form .input { flex: 1 1 180px; width: auto; }

/* ── toast ─────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  inset-block-end: 20px;
  inset-inline: 20px;
  z-index: 20;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--bad);
  border-radius: 10px;
  background: #1A1113;
  color: var(--ink);
  font-size: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.toast.ok { border-color: var(--accLine); background: #12160B; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .nav { margin-inline-start: 0; order: 3; width: 100%; }
  .who { margin-inline-start: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}