/* Each tab's loading outline (app.js renderDashboardWorkspaceLoading), drawn
   to that tab's layout: the same page margins, the same header (it is the
   page's own header element, with grey bars where its words go), then the
   tab's filters, rows and cards at their sizes. When the page arrives its
   content lands in the shapes that were already there. The shimmer, the
   base bar and Today's outline are in styles/refinelook.css. */

/* The legacy rule for the loading class centres its children (a logo, once),
   and browsers now apply that to block layout too: the outline's header
   shrank to its contents. Every piece takes the page's full width. */
body.pro-mode .dashboard-workspace-loading.rl-skeleton {
  place-items: stretch;
  justify-items: stretch;
}

/* ---- Page margins: the tabs drawn edge to edge keep the rail's room only. */
body.pro-mode .dashboard-shell .dashboard-content:has(> .rl-skeleton:is([data-skeleton="calendar"], [data-skeleton="messages"], [data-skeleton="ai"], [data-skeleton="home"])) {
  padding: 0 0 0 var(--dashboard-rail-width);
}
body.pro-mode .dashboard-shell .dashboard-content:has(> .rl-skeleton:is([data-skeleton="bookings"], [data-skeleton="customers"])) {
  padding-top: 18px;
}
body.pro-mode .dashboard-workspace-loading.rl-skeleton:is([data-skeleton="calendar"], [data-skeleton="messages"], [data-skeleton="ai"], [data-skeleton="home"]) {
  max-width: none;
}
/* Tabs that fill the window hold their height, so the outline does too. */
body.pro-mode .dashboard-workspace-loading.rl-skeleton:is([data-skeleton="calendar"], [data-skeleton="messages"], [data-skeleton="ai"]) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: 100dvh;
  overflow: hidden;
}
body.pro-mode .dashboard-workspace-loading.rl-skeleton[data-skeleton="bookings"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: calc(100dvh - 34px);
  overflow: hidden;
}
body.pro-mode .rl-skeleton:is([data-skeleton="calendar"], [data-skeleton="messages"], [data-skeleton="ai"], [data-skeleton="bookings"]) > .rl-skeleton-body {
  flex: 1 1 auto;
  min-height: 0;
}
/* The header keeps its height; the body takes what is left. */
body.pro-mode .rl-skeleton:is([data-skeleton="calendar"], [data-skeleton="messages"], [data-skeleton="ai"], [data-skeleton="bookings"]) > .business-page-header { flex: none; }

/* Blocks on a tab stand 16px apart, as the tabs' own blocks do (Today keeps
   its own spacing). */
body.pro-mode .rl-skeleton:not([data-skeleton="today"]) > .rl-skeleton-body { gap: 16px; }

/* Today (its outline is in styles/refinelook.css): the heights its cards have
   now, the floor of five lanes, the two figure cards and the list of what
   needs attention. */
body.pro-mode .rl-skeleton[data-skeleton="today"] > .rl-skeleton-body { gap: 18px; }
body.pro-mode .rl-skeleton[data-skeleton="today"] .rl-sk-floor { min-height: 303px; }
body.pro-mode .rl-skeleton[data-skeleton="today"] .rl-sk-metric { min-height: 22.75rem; }
body.pro-mode .rl-skeleton[data-skeleton="today"] .rl-sk-needs { min-height: 349px; }

/* ---- Pieces. */
/* A word's bar inside the element the word will be in: the line keeps the
   height of the real line. */
body.pro-mode .rl-sk.rl-sk-text {
  display: inline-block;
  max-width: 100%;
  height: 0.62em;
  vertical-align: middle;
  border-radius: 6px;
}
body.pro-mode .rl-sk.rl-sk-control { flex: none; max-width: 100%; border-radius: 999px; }
body.pro-mode .rl-sk.rl-sk-control.is-tile { border-radius: 11px; }
body.pro-mode .rl-sk.rl-sk-avatar { flex: none; border-radius: 999px; }
body.pro-mode .rl-sk-lines { display: grid; flex: 0 1 auto; gap: 7px; min-width: 0; }
body.pro-mode .rl-sk-lines > .rl-sk { max-width: 100%; }
body.pro-mode .rl-sk-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
body.pro-mode .rl-sk.rl-sk-dot.is-small { width: 10px; height: 10px; }
body.pro-mode .rl-sk.rl-sk-dot.is-tiny { width: 16px; height: 16px; }
body.pro-mode .rl-sk.rl-sk-dot.is-ring { width: 18px; height: 18px; background: none; border: 2px solid var(--rl-sk-base, #eceeeb); animation: none; }
body.pro-mode .rl-sk-panel {
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #e3e7e4;
  border-radius: 16px;
  background: #fff;
}
body.pro-mode .rl-sk.rl-sk-figure-sm { width: 1.4rem; height: 1.1rem; border-radius: 6px; }
body.pro-mode .rl-sk.rl-sk-figure-md { width: 7rem; height: 1.6rem; border-radius: 8px; }
body.pro-mode .rl-sk.rl-sk-check { width: 18px; height: 18px; flex: none; border-radius: 5px; }
body.pro-mode .rl-sk.rl-sk-thumb { width: 40px; height: 40px; flex: none; border-radius: 10px; }

/* ---- The page header: the page's own element, so its title, date line,
   actions and row of views sit where the page puts them. */
body.pro-mode .rl-skeleton > .business-page-header.rl-sk-header .business-header-actions { align-items: center; }
body.pro-mode .dashboard-shell .dashboard-content .rl-skeleton > .business-page-header.rl-sk-header .business-header-actions > .rl-sk { min-height: 0; }
body.pro-mode .rl-skeleton > .business-page-header.rl-sk-header + .rl-skeleton-body { margin-top: 16px; }
/* A tab laid out as a column already spaces its header from what follows. */
body.pro-mode .rl-skeleton[data-skeleton="bookings"] > .business-page-header.rl-sk-header + .rl-skeleton-body { margin-top: 0; }
body.pro-mode .rl-sk-views { display: flex; align-items: center; justify-content: space-between; }
body.pro-mode .rl-sk-view-tabs { display: flex; align-items: center; gap: 28px; }
body.pro-mode .rl-sk-view-tabs > span { display: inline-flex; align-items: center; height: 34px; font-size: 15px; }
body.pro-mode .rl-sk-view-aside { display: flex; align-items: center; gap: 10px; }
/* Team's views are taller, with the seat count at their end. */
body.pro-mode .rl-skeleton[data-skeleton="team"] .rl-sk-view-tabs > span,
body.pro-mode .rl-skeleton[data-skeleton="team"] .rl-sk-view-aside { height: 44px; }
body.pro-mode .rl-sk-summary { display: inline-flex; align-items: center; gap: 6px; height: 45px; padding: 0 8px; border: 1px solid #e3e7e4; border-radius: 999px; background: #fff; }

/* ---- Rows of filters, over a list or a grid. */
body.pro-mode .rl-sk-filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 12px;
}
body.pro-mode .rl-sk-filterbar > span:empty { flex: 1 1 auto; }
body.pro-mode .rl-sk-filterbar > .rl-sk-chips { flex: 1 1 auto; }
body.pro-mode .rl-sk-filterbar.is-flat { min-height: 0; padding: 14px 16px; border-bottom: 1px solid #eef1ef; }
body.pro-mode .rl-sk-filterbar.is-flat > .rl-sk-chips { flex: 0 1 auto; }
body.pro-mode .rl-sk-filterbar.is-customers > .rl-sk-chips { flex: 0 1 auto; }

/* ---- Calendar: its compact header, the strip of controls, the week. */
body.pro-mode .dashboard-shell .dashboard-content .business-workspace-page.dashboard-workspace-loading.rl-skeleton > .business-page-header.rl-sk-header.rl-sk-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  margin: 0;
  padding: 14px 24px;
  box-sizing: border-box;
}
body.pro-mode .dashboard-shell .dashboard-content .business-workspace-page.dashboard-workspace-loading.rl-skeleton > .business-page-header.rl-sk-header.rl-sk-calendar-head + .rl-skeleton-body { margin-top: 0; }
body.pro-mode .rl-sk-mode-tabs { display: flex; align-items: center; gap: 30px; height: 44px; font-size: 15px; }
body.pro-mode .rl-sk-calendar-toolbar { display: flex; flex: none; align-items: flex-start; gap: 8px; height: 56px; padding: 4px 24px 0; box-sizing: border-box; }
body.pro-mode .rl-sk-calendar-toolbar > .is-round { margin-top: -4px; }
body.pro-mode .rl-sk.rl-sk-period { flex: 1 1 auto; }
body.pro-mode .rl-skeleton[data-skeleton="calendar"] > .rl-skeleton-body { gap: 0; }
body.pro-mode .rl-sk-calendar-surface {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 10px 10px;
  overflow: hidden;
  border: 1px solid #e3e7e4;
  border-radius: 14px;
  background: #fff;
}
body.pro-mode .rl-sk-calendar-staff {
  display: grid;
  grid-template-columns: repeat(3, 616px);
  height: 42px;
  margin-left: 48px;
  border-bottom: 1px solid #eef1ef;
}
body.pro-mode .rl-sk-calendar-staff > span { display: flex; align-items: center; justify-content: center; gap: 8px; border-right: 1px solid #eef1ef; }
body.pro-mode .rl-sk-calendar-days {
  display: grid;
  grid-template-columns: 48px repeat(21, 88px);
  height: 30px;
  border-bottom: 1px solid #eef1ef;
}
body.pro-mode .rl-sk-calendar-days > span { display: grid; place-items: center; border-right: 1px solid #f3f5f4; }
body.pro-mode .rl-sk-calendar-body { display: grid; grid-template-columns: 48px minmax(0, 1fr); height: 100%; }
body.pro-mode .rl-sk-calendar-axis > span { display: flex; justify-content: center; height: 80px; padding-top: 6px; box-sizing: border-box; }
body.pro-mode .rl-sk-calendar-grid {
  display: grid;
  grid-template-columns: repeat(21, 88px);
  background-image: linear-gradient(#eef1ef 1px, transparent 1px);
  background-size: 100% 80px;
}
body.pro-mode .rl-sk-calendar-grid > span { position: relative; border-right: 1px solid #f3f5f4; }
body.pro-mode .rl-sk.rl-sk-event { position: absolute; right: 5px; left: 4px; border-radius: 9px; }

/* ---- Bookings: dates down the side, a column for each stylist. */
body.pro-mode .rl-skeleton[data-skeleton="bookings"] > .rl-skeleton-body { gap: 10px; }
body.pro-mode .rl-sk-filterbar > .rl-sk-chips > .is-chip:first-child { width: 3.6rem; }
body.pro-mode .rl-sk-booking-grid { flex: 1 1 auto; min-height: 0; overflow: hidden; }
body.pro-mode .rl-sk-booking-row { display: grid; grid-template-columns: 104px repeat(5, minmax(0, 1fr)); border-bottom: 1px solid #eef1ef; }
body.pro-mode .rl-sk-booking-row > span { display: grid; align-content: start; gap: 17px; min-width: 0; padding: 8px; border-right: 1px solid #eef1ef; }
body.pro-mode .rl-sk-booking-row > span:last-child { border-right: 0; }
body.pro-mode .rl-sk-booking-row > span:first-child { gap: 8px; padding: 14px 12px; }
body.pro-mode .rl-sk-booking-row.is-head > span { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 12px; box-sizing: border-box; }
body.pro-mode .rl-sk-booking-row:not(.is-head) { min-height: 140px; }
body.pro-mode .rl-sk-booking-card {
  display: grid;
  align-content: space-between;
  height: 125px;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid #eef1ef;
  border-radius: 12px;
}

/* ---- Services: figures and filters, then each category's rows. */
body.pro-mode .rl-skeleton[data-skeleton="services"] > .rl-skeleton-body { gap: 14px; }
body.pro-mode .rl-sk-filterbar.is-services { min-height: 56px; padding: 0 16px; }
body.pro-mode .rl-sk-figures { display: flex; flex: 1 1 auto; align-items: center; gap: 22px; }
body.pro-mode .rl-sk-figures > span { display: flex; align-items: center; gap: 6px; }
body.pro-mode .rl-sk-figures.is-inline { gap: 18px; }
body.pro-mode .rl-sk-filterbar.is-services > .rl-sk-chips { flex: 0 1 auto; }
body.pro-mode .rl-sk-category { overflow: hidden; }
body.pro-mode .rl-sk-category-head { display: flex; align-items: center; gap: 10px; height: 53px; padding: 0 10px 0 18px; border-bottom: 1px solid #eef1ef; background: #fafbfa; }
body.pro-mode .rl-sk-category-head > span:empty { flex: 1 1 auto; }
body.pro-mode .rl-sk-service-row { display: flex; align-items: center; gap: 14px; height: 67px; padding: 0 22px 0 30px; border-bottom: 1px solid #f1f3f2; }
body.pro-mode .rl-sk-service-row > span:empty { flex: 1 1 auto; }
body.pro-mode .rl-sk-service-row > .rl-sk-lines + span:empty + .rl-sk-lines,
body.pro-mode .rl-sk-service-row > .rl-sk-lines ~ .rl-sk-lines { justify-items: end; width: 5.6rem; }
body.pro-mode .rl-sk-avatars { display: flex; width: 6rem; justify-content: flex-end; }
body.pro-mode .rl-sk-avatars > .rl-sk-avatar + .rl-sk-avatar { margin-left: -5px; }
body.pro-mode .rl-sk-category-foot { display: flex; align-items: center; height: 61px; padding: 0 18px; }

/* ---- Team: figures and filters, then a card per stylist. */
body.pro-mode .rl-skeleton[data-skeleton="team"] > .rl-skeleton-body { gap: 30px; }
body.pro-mode .rl-sk-filterbar.is-team { min-height: 59px; padding: 0 12px 0 18px; }
body.pro-mode .rl-sk-filterbar.is-team > .rl-sk-chips { flex: 0 1 auto; }
body.pro-mode .rl-sk-card-grid { display: grid; gap: 14px; }
body.pro-mode .rl-sk-card-grid.is-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.pro-mode .rl-sk-team-card { display: grid; align-content: start; gap: 12px; height: 245px; overflow: hidden; padding: 18px 19px; }
body.pro-mode .rl-sk-team-card-head { display: flex; align-items: center; gap: 12px; }
body.pro-mode .rl-sk-team-card-row { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #f1f3f2; }
body.pro-mode .rl-sk-days { display: flex; gap: 4px; }

/* ---- A table of rows: products, customers, the payments ledger. */
body.pro-mode .rl-sk-table { overflow: hidden; }
body.pro-mode .rl-sk-table-row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid #f1f3f2;
}
body.pro-mode .rl-sk-table-row:last-child { border-bottom: 0; }
body.pro-mode .rl-sk-table-row > span:empty { flex: 1 1 auto; }
body.pro-mode .rl-sk-table.is-customers .rl-sk-table-row { display: grid; grid-template-columns: 18px 232px 172px 172px 152px 288px minmax(0, 1fr); gap: 12px; min-height: 52px; }
body.pro-mode .rl-sk-table.is-customers .rl-sk-table-row.is-head { min-height: 44px; background: #fafbfa; }
body.pro-mode .rl-sk-table.is-customers .rl-sk-table-row > span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
body.pro-mode .rl-skeleton[data-skeleton="customers"] > .rl-skeleton-body { gap: 12px; }
body.pro-mode .rl-skeleton[data-skeleton="customers"] > .business-page-header.rl-sk-header + .rl-skeleton-body { margin-top: 12px; }
body.pro-mode .rl-sk-filterbar.is-customers { min-height: 61px; padding-block: 0; }
/* The table fills the window to its foot, as the page's does. */
body.pro-mode .rl-sk-table.is-customers { height: calc(100dvh - 257px); min-height: 240px; }
body.pro-mode .rl-sk-table.is-ledger { padding: 26px 26px 8px; }
body.pro-mode .rl-sk-table-title { display: flex; align-items: center; height: 21px; margin-bottom: 14px; padding: 0; }
body.pro-mode .rl-sk-table.is-ledger .rl-sk-table-row { display: grid; grid-template-columns: 155px minmax(0, 1fr) 124px 117px 150px 107px 141px; gap: 0; min-height: 37px; padding: 0 8px; }
body.pro-mode .rl-sk-table.is-ledger .rl-sk-table-row.is-head { min-height: 37px; border-radius: 8px; background: #f7f8f7; }
body.pro-mode .rl-sk-table.is-ledger .rl-sk-table-row:nth-child(n + 7) { min-height: 53px; }
body.pro-mode .rl-sk-table-row.is-product > .rl-sk-lines { flex: 0 1 16rem; }

/* ---- Payments: the four figures. */
body.pro-mode .rl-sk-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.pro-mode .rl-sk-metric-card { display: flex; align-items: flex-start; gap: 14px; min-height: 108px; padding: 18px 17px; }
body.pro-mode .rl-sk-metric-card .rl-sk-lines { gap: 9px; }

/* ---- Reviews: filters, the count, the cards. */
body.pro-mode .rl-sk-review-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; min-height: 93px; padding: 15px; }
body.pro-mode .rl-sk-review-filters > span { display: grid; gap: 8px; align-content: start; }
body.pro-mode .rl-sk-results-line { display: flex; align-items: center; height: 18px; margin-top: 3px; }
body.pro-mode .rl-sk-results-line > span:empty { flex: 1 1 auto; }
body.pro-mode .rl-sk-card-grid.is-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.pro-mode .rl-sk-review-card { display: grid; align-content: start; gap: 12px; min-height: 270px; padding: 18px; }
body.pro-mode .rl-sk-review-top,
body.pro-mode .rl-sk-review-foot { display: flex; align-items: center; justify-content: space-between; }
body.pro-mode .rl-sk-review-foot { margin-top: 10px; padding-top: 14px; border-top: 1px solid #f1f3f2; }
body.pro-mode .rl-sk-stars { display: flex; align-items: center; gap: 3px; }
body.pro-mode .rl-sk.rl-sk-star { width: 14px; height: 14px; border-radius: 4px; }

/* ---- Analytics: the figures, then the trend beside the breakdown. */
body.pro-mode .rl-skeleton .rl-sk-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; }
body.pro-mode .rl-skeleton .rl-sk-kpis > div { display: grid; gap: 12px; align-content: start; min-height: 119px; padding: 18px 18px 16px; box-sizing: border-box; border-left: 1px solid #eef1ef; }
body.pro-mode .rl-skeleton .rl-sk-kpis > div:first-child { border-left: 0; }
/* The view's twelve columns: the trend takes eight, the breakdown four. */
body.pro-mode .rl-skeleton .rl-sk-analytics-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
body.pro-mode .rl-skeleton .rl-sk-analytics-row > :first-child { grid-column: span 8; }
body.pro-mode .rl-skeleton .rl-sk-analytics-row > :last-child { grid-column: span 4; }
body.pro-mode .rl-sk-chart-card { display: flex; flex-direction: column; gap: 14px; min-height: 429px; padding: 18px 20px; }
body.pro-mode .rl-sk-chart-card .rl-sk-chart { flex: 1 1 auto; height: auto; min-height: 200px; }
/* The trend is a line over its area: a wave in grey, under which the
   chart's own area will lie. */
body.pro-mode .rl-sk.rl-sk-area {
  flex: 1 1 auto;
  min-height: 200px;
  border-radius: 0;
  clip-path: polygon(0 62%, 6% 48%, 12% 70%, 18% 38%, 24% 30%, 30% 66%, 36% 44%, 42% 24%, 48% 58%, 54% 40%, 60% 18%, 66% 52%, 72% 34%, 78% 62%, 84% 28%, 90% 46%, 95% 22%, 100% 12%, 100% 100%, 0 100%);
  opacity: 0.8;
}
body.pro-mode .rl-sk-bars { display: grid; flex: 1 1 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; justify-items: center; min-height: 200px; border-bottom: 1px solid #e3e7e4; }
body.pro-mode .rl-sk-bars > .rl-sk-col { width: 22px; }

/* ---- Messages: the inbox down the side, the conversation beside it. */
body.pro-mode .dashboard-shell .dashboard-content .business-workspace-page.dashboard-workspace-loading.rl-skeleton > .business-page-header.rl-sk-header.rl-sk-messages-head { display: flex; align-items: center; justify-content: space-between; min-height: 66px; margin: 0; padding: 0 24px; box-sizing: border-box; border-bottom: 1px solid #eef1ef; background: #fff; }
body.pro-mode .dashboard-shell .dashboard-content .business-workspace-page.dashboard-workspace-loading.rl-skeleton > .business-page-header.rl-sk-header.rl-sk-messages-head + .rl-skeleton-body { margin-top: 0; }
body.pro-mode .rl-sk-messages { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100%; }
body.pro-mode .rl-sk-inbox { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid #eef1ef; background: #fff; }
body.pro-mode .rl-sk-inbox-head { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; }
body.pro-mode .rl-sk-inbox-search { padding: 4px 12px 14px; }
body.pro-mode .rl-sk-inbox-row { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px; }
body.pro-mode .rl-sk-chat { display: grid; grid-template-rows: 65px minmax(0, 1fr); min-width: 0; }
body.pro-mode .rl-sk-chat-head { display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid #eef1ef; background: #fff; }
body.pro-mode .rl-sk-chat-head > span:empty { flex: 1 1 auto; }
body.pro-mode .rl-sk-chat-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
body.pro-mode .rl-sk-chat-panes > div { display: flex; flex-direction: column; gap: 14px; padding: 40px 30px 16px; border-right: 1px solid #eef1ef; }
body.pro-mode .rl-sk-message-card { display: grid; gap: 8px; width: min(270px, 80%); padding: 14px 16px; border: 1px solid #eef1ef; border-radius: 12px; background: #fff; }
body.pro-mode .rl-sk-chat-compose { margin-top: auto; }

/* ---- AI Agent: the chats down the side, the question in the middle. */
body.pro-mode .rl-skeleton[data-skeleton="ai"] > .rl-skeleton-body { gap: 0; }
body.pro-mode .rl-sk-ai { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100%; }
body.pro-mode .rl-sk-ai-history { display: grid; align-content: start; gap: 21px; padding: 22px 15px; border-right: 1px solid #eef1ef; background: #fff; }
body.pro-mode .rl-sk-ai-history > .rl-sk-ai-history-title { height: 16px; padding: 0; }
body.pro-mode .rl-sk-ai-history > span { display: flex; align-items: center; height: 18px; padding: 0 8px; }
body.pro-mode .rl-sk-ai-chat { display: grid; grid-template-rows: 78px minmax(0, 1fr); min-width: 0; }
body.pro-mode .rl-sk-ai-head { display: flex; align-items: center; gap: 14px; padding: 0 30px; }
body.pro-mode .rl-sk-ai-head > span:empty { flex: 1 1 auto; }
body.pro-mode .rl-sk-ai-welcome { display: grid; justify-items: center; align-content: center; gap: 22px; width: min(756px, 90%); margin: 0 auto; padding-bottom: calc(12vh - 14px); }
body.pro-mode .rl-sk-ai-welcome > .rl-sk-ai-sub { margin: -8px 0 9px; }
body.pro-mode .rl-sk.rl-sk-ai-title { width: 17rem; height: 1.9rem; border-radius: 10px; }
body.pro-mode .rl-sk-ai-welcome > .rl-sk-control { border-radius: 999px; }

/* ---- Notifications: measured to business/notifications.css. The activity
   on the left (tabs, headings over cards of 58px rows) and on the right a box
   for Needs your answer over a box for Messages; one column under 1100px. */
body.pro-mode .rl-sk-notice-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 30%, 500px); grid-template-areas: "main side"; align-items: start; gap: 28px; }
body.pro-mode .rl-sk-notice-main { display: grid; grid-area: main; gap: 16px; min-width: 0; }
body.pro-mode .rl-sk-notice-side { display: grid; grid-area: side; gap: 16px; min-width: 0; }
body.pro-mode .rl-sk-notice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.pro-mode .rl-sk-notice-toolbar > span { display: flex; flex-wrap: wrap; gap: 6px; }
body.pro-mode .rl-sk-notice-group { display: grid; gap: 8px; }
body.pro-mode .rl-sk-notice-group + .rl-sk-notice-group { margin-top: 4px; }
body.pro-mode .rl-sk-notice-list { display: grid; padding: 0; overflow: hidden; border-radius: 12px; }
body.pro-mode .rl-sk-notice-box { display: grid; padding: 14px 0 6px; overflow: hidden; border-radius: 14px; }
body.pro-mode .rl-sk-notice-box > .rl-sk-line { margin: 0 16px 8px; }
body.pro-mode .rl-sk-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 58px; padding: 0 16px; box-sizing: border-box; }
body.pro-mode .rl-sk-notice + .rl-sk-notice { border-top: 1px solid #eef0ee; }
body.pro-mode .rl-sk-notice > span { display: grid; flex: 1 1 0; gap: 6px; min-width: 0; }
body.pro-mode .rl-sk-notice.is-answer { padding-bottom: 12px; }
body.pro-mode .rl-sk-notice-answers { display: flex; flex: 1 1 100%; gap: 6px; padding-left: 44px; }
@media (max-width: 1100px) {
  body.pro-mode .rl-sk-notice-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; gap: 20px; }
}

/* ---- Settings: the subjects, then the first subject's cards. */
body.pro-mode .rl-sk-settings { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; gap: 28px; }
body.pro-mode .rl-sk-settings-nav { display: grid; gap: 2px; }
body.pro-mode .rl-sk-settings-nav > .rl-sk-control { margin-bottom: 10px; }
body.pro-mode .rl-sk-settings-nav > span { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 6px; }
body.pro-mode .rl-sk-settings-body { display: grid; gap: 16px; }
body.pro-mode .rl-sk-settings-head { display: grid; gap: 10px; min-height: 48px; }
body.pro-mode .rl-sk.rl-sk-section-title { height: 1.1rem; }
body.pro-mode .rl-skeleton[data-skeleton="settings"] > .business-page-header.rl-sk-header + .rl-skeleton-body { margin-top: 18px; }
body.pro-mode .rl-sk-settings-card { display: grid; align-content: start; gap: 16px; min-height: 306px; padding: 20px; }
body.pro-mode .rl-sk-settings-card.is-first { min-height: 404px; }
body.pro-mode .rl-sk-settings-card-head { display: flex; align-items: center; gap: 12px; }
body.pro-mode .rl-sk-fields { display: grid; gap: 14px; }
body.pro-mode .rl-sk-fields.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.pro-mode .rl-sk-fields > span { display: grid; gap: 8px; }

/* ---- Home: the salon's link, then its page as customers see it. */
body.pro-mode .rl-sk-home { display: grid; gap: 0; }
body.pro-mode .rl-sk-home-link { display: flex; align-items: center; gap: 14px; min-height: 91px; margin: 18px 40px 0; padding: 0 14px 0 16px; border-radius: 18px; }
body.pro-mode .rl-sk-home-link > span:empty { flex: 1 1 auto; }
/* The salon page as customers see it: the back link, the name, the line
   about the salon, its rating, the photos and the row of sections, each
   where the page sets it (its words 10px in from the back link). */
body.pro-mode .rl-sk-home-page { display: grid; justify-items: start; gap: 0; padding: 20px 57px 0 48px; }
body.pro-mode .rl-sk-home-page > :not(:first-child) { margin-left: 10px; }
body.pro-mode .rl-sk.rl-sk-home-title { width: min(30rem, 70%); height: 56px; margin-top: 9px; border-radius: 12px; }
body.pro-mode .rl-sk-home-page > .rl-sk-line:nth-of-type(3) { margin-top: 15px; }
body.pro-mode .rl-sk-home-page > .rl-sk-line:nth-of-type(4) { margin-top: 13px; }
body.pro-mode .rl-sk-home-meta { display: flex; gap: 14px; margin-top: 28px; }
body.pro-mode .rl-sk-home-gallery { display: grid; justify-self: stretch; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; height: 446px; margin-top: 27px; }
body.pro-mode .rl-sk-home-gallery > span { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.pro-mode .rl-sk.rl-sk-photo { width: 100%; height: 100%; border-radius: 16px; }
body.pro-mode .rl-sk-home-tabs { display: flex; align-items: center; gap: 26px; height: 55px; }

/* Bookings' header puts its search and buttons on a row of their own on a
   narrower screen, as the page does. */
@media (min-width: 761px) and (max-width: 1240px) {
  body.pro-mode .dashboard-shell .dashboard-content .rl-skeleton[data-skeleton="bookings"] > .business-page-header { grid-template-columns: minmax(0, 1fr); }
  body.pro-mode .dashboard-shell .dashboard-content .rl-skeleton[data-skeleton="bookings"] > .business-page-header .business-header-actions { grid-area: 2 / 1; width: 100%; justify-self: stretch; }
}

/* ---- A phone: one column of whatever stood side by side. */
@media (max-width: 760px) {
  /* The header's buttons fill their rows, as the page's do. */
  body.pro-mode .dashboard-shell .dashboard-content .rl-skeleton > .business-page-header.rl-sk-header .business-header-actions > .rl-sk { flex: 1 0 auto; }
  body.pro-mode .rl-skeleton .rl-sk-analytics-row > * { grid-column: auto !important; }
  body.pro-mode .dashboard-shell .dashboard-content:has(> .rl-skeleton:is([data-skeleton="calendar"], [data-skeleton="messages"], [data-skeleton="ai"], [data-skeleton="home"])) { padding: 0; }
  body.pro-mode .rl-sk-calendar-toolbar > .rl-sk-control:nth-child(4) { display: none; }
  body.pro-mode .rl-sk-calendar-staff { grid-template-columns: repeat(3, 100vw); margin-left: 40px; }
  body.pro-mode .rl-sk-booking-row { grid-template-columns: 86px repeat(5, 225px); }
  body.pro-mode .rl-skeleton[data-skeleton="bookings"] .rl-sk-filterbar { flex-wrap: nowrap; }
  body.pro-mode .rl-skeleton[data-skeleton="bookings"] .rl-sk-filterbar > .rl-sk-control { display: none; }
  body.pro-mode .rl-sk-card-grid.is-team,
  body.pro-mode .rl-sk-card-grid.is-reviews,
  body.pro-mode .rl-skeleton .rl-sk-analytics-row,
  body.pro-mode .rl-sk-settings,
  body.pro-mode .rl-sk-messages,
  body.pro-mode .rl-sk-ai { grid-template-columns: minmax(0, 1fr); }
  body.pro-mode .rl-sk-metrics,
  body.pro-mode .rl-skeleton .rl-sk-kpis,
  body.pro-mode .rl-sk-review-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.pro-mode .rl-sk-settings-nav,
  body.pro-mode .rl-sk-ai-history,
  body.pro-mode .rl-sk-inbox + .rl-sk-chat,
  body.pro-mode .rl-sk-service-row > :is(.rl-sk-lines ~ .rl-sk-lines, .rl-sk-avatars) { display: none; }
  body.pro-mode .rl-sk-filterbar { flex-wrap: wrap; }
  body.pro-mode .rl-sk-home-link,
  body.pro-mode .rl-sk-home-page { margin-inline: 16px; padding-inline: 0; }
  body.pro-mode .rl-sk-home-gallery { height: 260px; }
  body.pro-mode .rl-sk-table.is-customers .rl-sk-table-row { grid-template-columns: 18px minmax(0, 1fr) 120px; }
  body.pro-mode .rl-sk-table.is-customers .rl-sk-table-row > span:nth-child(n + 4) { display: none; }
  body.pro-mode .rl-sk-table.is-ledger .rl-sk-table-row { grid-template-columns: 100px minmax(0, 1fr) 80px; }
  body.pro-mode .rl-sk-table.is-ledger .rl-sk-table-row > span:nth-child(n + 4) { display: none; }
}