/* My Hair > Salons: each salon as a workspace that fits the screen, a bar to
   move between salons, and the doors Open dashboard walks through
   (ui/workspace-door.js). Colours are the brand's mint-to-violet. */
.rl-ws {
  --ws-mint: #8ff7d2;
  --ws-peri: #93a2f7;
  --ws-violet: #916be8;
  --ws-deep: #5b3fc4;
  --ws-ink: #17131f;
  --ws-mute: #6f6879;
  --ws-line: #ebe7f1;
  --ws-ease: cubic-bezier(.22, 1, .36, 1);
  --ws-spring: cubic-bezier(.34, 1.56, .64, 1);
  display: grid;
  gap: 20px;
  /* The page header's own space below its title is the bar's top margin:
     the bar sits as far from the title as from the salon below it. */
  margin-top: -10px;
}
.rl-ws-drafts { margin-bottom: 4px; }

/* The salons bar: one chip per salon, a glider under the chosen one. */
.rl-ws-tabs {
  position: relative;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--ws-line);
  border-radius: 18px;
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 10px 30px -24px rgb(40 24 90 / 50%);
  scrollbar-width: none;
}
.rl-ws-tabs::-webkit-scrollbar { display: none; }
.rl-ws-tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 8px 14px 8px 8px;
  border: 0;
  border-radius: 13px;
  color: var(--ws-ink);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease, transform 260ms var(--ws-spring);
}
.rl-ws-tab:hover { transform: translateY(-1px); }
.rl-ws-tab:active { transform: scale(.97); }
.rl-ws-tab:focus-visible { outline: 2px solid var(--ws-violet); outline-offset: 2px; }
.rl-ws-tab-avatar {
  display: grid;
  flex: none;
  width: 36px;
  height: 36px;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(140deg, var(--ws-peri), var(--ws-violet));
  font-weight: 700;
  transition: transform 300ms var(--ws-spring);
}
.rl-ws-tab-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rl-ws-tab[aria-selected="true"] .rl-ws-tab-avatar { transform: rotate(-4deg) scale(1.06); }
.rl-ws-tab-copy { display: grid; gap: 1px; }
.rl-ws-tab-copy b { max-width: 220px; overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.rl-ws-tab-copy small { color: var(--ws-mute); font-size: 12px; }
.rl-ws-tab-badge { display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 6px; border-radius: 999px; color: #fff; background: #d0663f; font-size: 11px; font-style: normal; font-weight: 700; }
.rl-ws-tabs.is-still .rl-ws-tab-glider { transition: none; }
.rl-ws-tab-glider {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: var(--ws-glider-w, 0);
  border-radius: 13px;
  background: linear-gradient(135deg, rgb(143 247 210 / 40%), rgb(147 162 247 / 34%) 55%, rgb(145 107 232 / 30%));
  box-shadow: inset 0 0 0 1px rgb(145 107 232 / 28%), 0 6px 18px -10px rgb(91 63 196 / 55%);
  transform: translateX(var(--ws-glider-x, 0));
  transition: transform 460ms var(--ws-spring), width 360ms var(--ws-ease);
}

/* One salon: the cover on the left, the numbers and the doorway on the right. */
.rl-ws-stage { position: relative; }
.rl-ws-salon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 18px;
  min-height: min(560px, calc(100vh - 290px));
}
.rl-ws-salon.is-arriving { animation: rl-ws-arrive 520ms var(--ws-ease) both; }
@keyframes rl-ws-arrive { from { opacity: 0; transform: translateX(var(--ws-from, 30px)) scale(.985); } to { opacity: 1; transform: none; } }

.rl-ws-cover {
  --ws-rx: 0deg;
  --ws-ry: 0deg;
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 340px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(150deg, #2a2142, #1a1528 60%, #2c1f46);
  box-shadow: 0 30px 60px -36px rgb(23 19 31 / 70%);
}
.rl-ws-cover-art { position: absolute; inset: 0; }
/* No photo: slow colour washes behind the salon's letter. */
.rl-ws-cover:not(.has-image) .rl-ws-cover-art {
  background:
    radial-gradient(circle at 22% 18%, rgb(143 247 210 / 30%), transparent 42%),
    radial-gradient(circle at 82% 78%, rgb(145 107 232 / 50%), transparent 52%),
    radial-gradient(circle at 60% 35%, rgb(147 162 247 / 24%), transparent 48%);
  background-size: 140% 140%;
  animation: rl-ws-wash 14s ease-in-out infinite alternate;
}
@keyframes rl-ws-wash { to { background-position: 100% 60%; } }
.rl-ws-cover-art img { width: 100%; height: 100%; object-fit: cover; }
.rl-ws-cover-art::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 8 16 / 5%) 20%, rgb(10 8 16 / 72%) 100%); content: ""; }
.rl-ws-monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, rgb(143 247 210 / 35%), transparent 45%), radial-gradient(circle at 80% 80%, rgb(145 107 232 / 55%), transparent 50%);
  font-size: clamp(120px, 16vw, 210px);
  font-weight: 800;
  letter-spacing: -.06em;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(135deg, #c4fde9 0%, #a9b5fb 48%, #c3a8f5 100%);
  filter: drop-shadow(0 20px 40px rgb(0 0 0 / 35%));
}
.rl-ws-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at var(--ws-mx, 50%) var(--ws-my, 0%), rgb(255 255 255 / 26%), transparent 42%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.rl-ws-cover.is-tilting .rl-ws-shine { opacity: 1; }
.rl-ws-cover-copy { position: relative; z-index: 2; display: grid; align-content: end; gap: 8px; width: 100%; padding: 26px; }
.rl-ws-role { justify-self: start; padding: 4px 11px; border: 1px solid rgb(255 255 255 / 35%); border-radius: 999px; background: rgb(255 255 255 / 14%); backdrop-filter: blur(8px); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.rl-ws-cover-copy h2 { margin: 0; color: #fff; font-size: clamp(30px, 3.4vw, 46px); font-weight: 750; letter-spacing: -.035em; line-height: 1.02; }
.rl-ws-cover-copy p { display: flex; align-items: center; gap: 6px; margin: 0; color: rgb(255 255 255 / 82%); font-size: 14px; }
.rl-ws-cover-copy p .icon { width: 15px; height: 15px; flex: none; }
.rl-ws-cover-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rl-ws-cover-links button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 999px;
  color: #fff;
  background: rgb(255 255 255 / 12%);
  backdrop-filter: blur(10px);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease, transform 260ms var(--ws-spring);
}
.rl-ws-cover-links button:hover { background: rgb(255 255 255 / 24%); transform: translateY(-2px); }
.rl-ws-cover-links .icon { width: 15px; height: 15px; }

.rl-ws-panel {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--ws-line);
  border-radius: 26px;
  background: linear-gradient(180deg, #fff, #fbfaff);
  box-shadow: 0 20px 50px -40px rgb(40 24 90 / 45%);
}
.rl-ws-panel-head { display: flex; align-items: center; justify-content: space-between; }
.rl-ws-panel-head .eyebrow { margin: 0; }
.rl-ws-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ws-mute); font-size: 12px; font-weight: 600; }
.rl-ws-live i { width: 7px; height: 7px; border-radius: 50%; background: #c9c2d6; animation: rl-ws-pulse 1.2s ease-in-out infinite; }
.rl-ws-live.is-saved i { background: #c9c2d6; animation: none; }
.rl-ws-live.is-live i { background: #1f9d6b; box-shadow: 0 0 0 0 rgb(31 157 107 / 50%); animation: rl-ws-live 2s ease-out infinite; }
@keyframes rl-ws-pulse { 50% { opacity: .35; } }
@keyframes rl-ws-live { 0% { box-shadow: 0 0 0 0 rgb(31 157 107 / 45%); } 70%, 100% { box-shadow: 0 0 0 7px rgb(31 157 107 / 0%); } }

.rl-ws-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: stretch; }
.rl-ws-stat {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--ws-line);
  border-radius: 18px;
  background: #fff;
  transition: transform 300ms var(--ws-spring), box-shadow 260ms ease, border-color 200ms ease;
}
.rl-ws-stat::before {
  position: absolute;
  inset: -40% -40% auto auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(147 162 247 / 22%), transparent 70%);
  content: "";
  transition: transform 500ms var(--ws-ease);
}
.rl-ws-stat:hover { border-color: #d8cdf5; box-shadow: 0 16px 30px -22px rgb(91 63 196 / 55%); transform: translateY(-3px); }
.rl-ws-stat:hover::before { transform: scale(1.5); }
.rl-ws-stat-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--ws-deep); background: #f1edff; }
.rl-ws-stat-icon .icon { width: 17px; height: 17px; }
.rl-ws-stat small { margin-top: 6px; color: var(--ws-mute); font-size: 12px; font-weight: 600; }
.rl-ws-stat strong { display: flex; align-items: baseline; gap: 2px; color: var(--ws-ink); font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.05; }
.rl-ws-stat strong span { color: var(--ws-mute); font-size: 17px; font-weight: 650; }
.rl-ws-stat em { color: var(--ws-mute); font-size: 12px; font-style: normal; line-height: 1.35; }
.rl-ws-stat.is-attention { border-color: #f3c9b6; background: linear-gradient(180deg, #fff, #fff6f1); }
.rl-ws-stat.is-attention .rl-ws-stat-icon { color: #b8471f; background: #ffe9df; animation: rl-ws-ring 2.4s ease-in-out infinite; }
@keyframes rl-ws-ring { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(3deg); } }
.rl-ws-stat.is-loading > * { border-radius: 8px; background: linear-gradient(90deg, #f1eef6, #f8f6fb, #f1eef6); background-size: 200% 100%; animation: rl-ws-shimmer 1.2s linear infinite; }
.rl-ws-stat.is-loading > small { width: 60%; height: 12px; }
.rl-ws-stat.is-loading > strong { width: 40%; height: 28px; }
.rl-ws-stat.is-loading > em { width: 80%; height: 11px; }
@keyframes rl-ws-shimmer { to { background-position: -200% 0; } }

/* Open dashboard: the doorway. A sheen crosses it under the pointer. */
.rl-ws-open {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(120deg, #6b4fd8, #8f6be8 45%, #6e8ef0);
  background-size: 160% 100%;
  box-shadow: 0 16px 34px -18px rgb(91 63 196 / 85%);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background-position 600ms var(--ws-ease), transform 300ms var(--ws-spring), box-shadow 300ms ease;
}
.rl-ws-open::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 35%) 50%, transparent 70%);
  content: "";
  transform: translateX(-100%);
  transition: transform 800ms var(--ws-ease);
}
.rl-ws-open:hover:not(:disabled) { background-position: 100% 0; box-shadow: 0 22px 40px -18px rgb(91 63 196 / 90%); transform: translateY(-2px); }
.rl-ws-open:hover:not(:disabled)::after { transform: translateX(100%); }
.rl-ws-open:active:not(:disabled) { transform: scale(.98); }
.rl-ws-open:disabled { cursor: progress; opacity: .85; }
.rl-ws-open i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 20%); transition: transform 300ms var(--ws-spring); }
.rl-ws-open:hover:not(:disabled) i { transform: translateX(4px); }
.rl-ws-open .icon { width: 16px; height: 16px; }
.rl-ws-jumps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rl-ws-jumps > span { margin-right: 4px; color: var(--ws-mute); font-size: 12px; font-weight: 650; }
.rl-ws-jumps button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ws-line);
  border-radius: 999px;
  color: var(--ws-ink);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, transform 260ms var(--ws-spring), color 200ms ease;
}
.rl-ws-jumps button .icon { width: 14px; height: 14px; color: var(--ws-deep); }
.rl-ws-jumps button:hover:not(:disabled) { border-color: #cdbff3; background: #f6f2ff; transform: translateY(-2px); }

/* Arriving on the page: the bar drops in, the cover opens from its centre,
   the numbers rise one after another and the doorway springs up. */
.rl-ws.is-entering .rl-ws-tabs { animation: rl-ws-drop 520ms var(--ws-ease) both; }
.rl-ws.is-entering .rl-ws-cover { animation: rl-ws-reveal 820ms var(--ws-ease) 80ms both; }
.rl-ws.is-entering .rl-ws-cover-copy > * { animation: rl-ws-rise 600ms var(--ws-ease) both; }
.rl-ws.is-entering .rl-ws-cover-copy > :nth-child(1) { animation-delay: 380ms; }
.rl-ws.is-entering .rl-ws-cover-copy > :nth-child(2) { animation-delay: 440ms; }
.rl-ws.is-entering .rl-ws-cover-copy > :nth-child(3) { animation-delay: 500ms; }
.rl-ws.is-entering .rl-ws-cover-copy > :nth-child(4) { animation-delay: 560ms; }
.rl-ws.is-entering .rl-ws-panel { animation: rl-ws-rise 640ms var(--ws-ease) 140ms both; }
.rl-ws.is-entering .rl-ws-stat,
.rl-ws-salon.is-arriving .rl-ws-stat { animation: rl-ws-rise 560ms var(--ws-ease) calc(240ms + var(--i, 0) * 60ms) both; }
.rl-ws.is-entering .rl-ws-open { animation: rl-ws-pop 620ms var(--ws-spring) 620ms both; }
.rl-ws.is-entering .rl-ws-jumps button { animation: rl-ws-rise 480ms var(--ws-ease) both; }
.rl-ws.is-entering .rl-ws-jumps button:nth-child(n) { animation-delay: 720ms; }
@keyframes rl-ws-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes rl-ws-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rl-ws-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes rl-ws-reveal { from { opacity: 0; clip-path: inset(8% 18% 8% 18% round 26px); transform: scale(.97); } to { opacity: 1; clip-path: inset(0 0 0 0 round 26px); transform: none; } }

@media (max-width: 1100px) {
  .rl-ws-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rl-ws-salon { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rl-ws-cover { min-height: 260px; }
}
@media (max-width: 560px) {
  .rl-ws-panel { padding: 14px; border-radius: 22px; }
  .rl-ws-cover { border-radius: 22px; }
  .rl-ws-stat strong { font-size: 26px; }
  .rl-ws-tab-copy b { max-width: 150px; }
}

/* ---- The launch (ui/workspace-launch.js) --------------------------------
   Quiet: the pressed button spins while the salon loads, the page fades to
   this plain ground, and the ground lifts off the finished dashboard. */
.ws-launch { position: fixed; inset: 0; z-index: 2147483000; background: #f7f6f8; opacity: 0; pointer-events: auto; }
.rl-ws-jumps button.is-opening { pointer-events: none; }
.rl-ws-jumps button.is-opening .pro-account-salon-spinner { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .rl-ws *, .rl-ws { animation: none !important; transition: none !important; }
  .rl-ws-cover { transform: none !important; }
}