/* ScaleLounge portals V2: shell (sidebar, headers, phone bar, layout). Scoped under html.pv-app. */

html.pv-app .pv-frame {
  display: grid;
  grid-template-columns: var(--pv-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pv-page);
  /* Paints the sidebar colour down the whole first column, so a page taller than the window never
     shows page colour under the sticky sidebar (full-page captures, browser zoom). */
  box-shadow: inset var(--pv-sidebar-w) 0 0 var(--pv-side-bg);
}

html.pv-app .pv-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---- Sidebar: charcoal in both themes ------------------------------------------------------- */
html.pv-app .pv-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  background: var(--pv-side-bg);
  color: var(--pv-side-text);
  border-right: 1px solid var(--pv-side-border);
}

html.pv-app .pv-sidebar__brand {
  flex: none;
  padding: var(--pv-side-brandtop) 22px var(--pv-side-brandbottom) 24px;
}

html.pv-app .pv-brand {
  display: inline-block;
  border-radius: var(--pv-radius-sm);
}

/* 216px down to 180px (Katie 2026-10-17: the logo read too big at the top left). */
html.pv-app .pv-brand__logo {
  width: 180px;
  height: auto;
}

html.pv-app .pv-tagline {
  max-width: 206px;
  margin: var(--pv-side-taglinegap) 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pv-side-text);
}

/* Height-aware rhythm. The V2 proportions (a 46px row, 9px between rows, 22px between groups) hold
   from a 968px-tall window up, as in the review at 1824px. Below that, the spacing between rows and
   groups closes first, in step with the window height, so the whole menu, Support, Settings and the
   account block still fit a 1366 x 768 or 1440 x 900 laptop without scrolling. Rows never drop
   below the 44px touch target. Shorter still, the area under the brand scrolls (next rule), and
   below 560px the whole sidebar scrolls as one (the end of this file). */
html.pv-app .pv-sidebar {
  --pv-side-row: clamp(44px, calc(44px + (100vh - 768px) * 0.01), 46px);
  --pv-side-rowgap: clamp(0px, calc((100vh - 768px) * 0.045), 9px);
  --pv-side-groupgap: clamp(12px, calc(12px + (100vh - 768px) * 0.05), 22px);
  --pv-side-labelgap: clamp(4px, calc(4px + (100vh - 768px) * 0.02), 8px);
  --pv-side-brandtop: clamp(16px, calc(16px + (100vh - 768px) * 0.05), 26px);
  --pv-side-taglinegap: clamp(10px, calc(10px + (100vh - 768px) * 0.04), 18px);
  --pv-side-scrolltop: clamp(10px, calc(10px + (100vh - 768px) * 0.04), 18px);
  --pv-side-scrollbottom: clamp(6px, calc(6px + (100vh - 768px) * 0.05), 16px);
  --pv-side-brandbottom: clamp(0px, calc((100vh - 768px) * 0.02), 4px);
  --pv-side-footgap: clamp(12px, calc(12px + (100vh - 768px) * 0.06), 24px);
  --pv-side-acctgap: clamp(10px, calc(10px + (100vh - 768px) * 0.04), 18px);
  --pv-side-acctpad: clamp(8px, calc(8px + (100vh - 768px) * 0.03), 14px);
  --pv-side-acct: clamp(48px, calc(48px + (100vh - 768px) * 0.04), 56px);
}

/* The groups and the foot share one scroll area under the brand: on a short screen it scrolls,
   so Support, Settings and the account block are always reachable. */
html.pv-app .pv-sidebar__scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--pv-side-scrolltop) 16px var(--pv-side-scrollbottom);
  scrollbar-width: thin;
  scrollbar-color: #3A3E45 transparent;
}

html.pv-app .pv-sidebar__nav {
  flex: 1 0 auto;
}

html.pv-app .pv-sidebar__foot {
  flex: none;
  margin-top: var(--pv-side-footgap);
}

html.pv-app .pv-navgroup + .pv-navgroup {
  margin-top: var(--pv-side-groupgap);
}

html.pv-app .pv-navlabel {
  margin: 0 0 var(--pv-side-labelgap);
  padding: 0 12px;
  font-family: var(--pv-font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pv-side-label);
}

html.pv-app .pv-navlist {
  display: grid;
  gap: var(--pv-side-rowgap, 9px);
  list-style: none;
}

html.pv-app .pv-navlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--pv-side-row, 46px);
  padding: 0 12px;
  border-radius: var(--pv-radius);
  color: var(--pv-side-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .15s var(--pv-ease);
}

html.pv-app .pv-navlink:hover {
  background: var(--pv-side-hover);
}

html.pv-app .pv-navlink[aria-current="page"] {
  background: var(--pv-side-active-bg);
  color: var(--pv-side-active-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--pv-side-edge);
}

/* Focused AND current: keep the champagne edge and the sidebar-coloured gap around the ring. */
html.pv-app .pv-navlink[aria-current="page"]:focus-visible {
  box-shadow: inset 3px 0 0 var(--pv-side-edge), 0 0 0 2px var(--pv-side-bg);
}

html.pv-app .pv-navlink .pv-icon {
  flex: none;
}

html.pv-app .pv-navlink__label {
  min-width: 0;
}

html.pv-app .pv-navbadge {
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  padding: 0 7px;
  border-radius: var(--pv-radius-sm);
  background: var(--pv-side-badge-bg);
  color: var(--pv-side-badge-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

html.pv-app .pv-sidebar__account {
  margin-top: var(--pv-side-acctgap);
  padding-top: var(--pv-side-acctpad);
  border-top: 1px solid var(--pv-side-divider);
}

html.pv-app .pv-account {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--pv-side-acct);
  padding: 4px 8px;
  border: 0;
  border-radius: var(--pv-radius);
  background: none;
  color: var(--pv-side-text);
  text-align: left;
}

html.pv-app .pv-account:hover {
  background: var(--pv-side-hover);
}

html.pv-app .pv-account__text {
  display: grid;
  min-width: 0;
}

html.pv-app .pv-account__name {
  display: block;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.pv-app .pv-account__biz {
  display: block;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.35;
  color: var(--pv-side-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.pv-app .pv-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pv-avatar-bg);
  color: var(--pv-avatar-text);
  font-family: var(--pv-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

html.pv-app .pv-avatar--lg {
  width: 52px;
  height: 52px;
  font-size: 17px;
}

/* The account's photo, when there is one, fills its circle (OPEN-ITEMS 2.10). */
html.pv-app .pv-avatar--photo {
  overflow: hidden;
}

html.pv-app .pv-avatar--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Desktop header -------------------------------------------------------------------------- */
html.pv-app .pv-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--pv-header-h);
  padding: 0 var(--pv-pad);
  background: var(--pv-page);
  border-bottom: 1px solid var(--pv-divider);
}

html.pv-app .pv-header__left,
html.pv-app .pv-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

html.pv-app .pv-header__right {
  flex: none;
  gap: 10px;
}

html.pv-app .pv-ctxwrap {
  min-width: 0;
  margin-left: -8px;
}

html.pv-app .pv-ctx {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  color: var(--pv-text);
  white-space: nowrap;
}

html.pv-app .pv-ctx .pv-icon {
  flex: none;
}

html.pv-app .pv-ctx--select {
  max-width: 100%;
  padding: 0 8px;
  border: 0;
  border-radius: var(--pv-radius);
  background: none;
}

html.pv-app .pv-ctx--select:hover {
  background: var(--pv-surface-hover);
}

html.pv-app .pv-ctx__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

html.pv-app .pv-ctx__chev {
  margin-left: 2px;
}

html.pv-app .pv-envbadge {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid var(--pv-badge-border);
  border-radius: var(--pv-radius-xs);
  color: var(--pv-badge-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

html.pv-app .pv-envbadge__more {
  margin-left: 0.45em;
}

html.pv-app .pv-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--pv-radius);
  background: none;
  color: var(--pv-text-secondary);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

html.pv-app .pv-search-trigger:hover {
  background: var(--pv-surface-hover);
  color: var(--pv-text);
}

html.pv-app .pv-search-trigger .pv-icon {
  color: var(--pv-text);
}

html.pv-app .pv-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--pv-divider);
  border-radius: var(--pv-radius-xs);
  color: var(--pv-text-meta);
  font-family: var(--pv-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

html.pv-app .pv-iconbtn {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--pv-touch);
  height: var(--pv-touch);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--pv-radius);
  background: none;
  color: var(--pv-text);
}

html.pv-app .pv-iconbtn:hover {
  background: var(--pv-surface-hover);
}

html.pv-app .pv-iconbtn--bordered {
  border-color: var(--pv-border);
}

html.pv-app .pv-iconbtn__dot {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pv-accent-text);
  box-shadow: 0 0 0 2px var(--pv-page);
}

html.pv-app .pv-menu-btn,
html.pv-app .pv-search-icon {
  display: none;
}

html.pv-app .pv-menu-btn {
  flex: none;
  place-items: center;
  width: var(--pv-touch);
  height: var(--pv-touch);
  margin-left: -10px;
  padding: 0;
  border: 0;
  border-radius: var(--pv-radius);
  background: none;
  color: var(--pv-text);
}

/* ---- Main ------------------------------------------------------------------------------------ */
html.pv-app .pv-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1640px;
  padding: 32px var(--pv-pad) 56px;
  container-type: inline-size;
  container-name: pvmain;
}

html.pv-app .pv-main:focus,
html.pv-app .pv-main:focus-visible {
  outline: none;
  box-shadow: none;
}

html.pv-app .pv-boot {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

/* ---- Phone header and bottom bar (client, below 1024px) -------------------------------------- */
html.pv-app .pv-mheader {
  position: sticky;
  top: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 8px 14px 8px 20px;
  background: var(--pv-page);
  border-bottom: 1px solid var(--pv-divider);
}

/* The logo (Katie 2026-10-19: the real logo, not the name typed out). 150px wide on a phone, 132px on
   the narrowest; the link is the full 44px touch height. */
html.pv-app .pv-mheader__title {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  min-height: var(--pv-touch);
  border-radius: var(--pv-radius-sm);
  -webkit-tap-highlight-color: transparent;
}

html.pv-app .pv-mheader__logo {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
}

html.pv-app .pv-mheader__logo--dark {
  display: none;
}

html.pv-app[data-pv-theme="dark"] .pv-mheader__logo--light {
  display: none;
}

html.pv-app[data-pv-theme="dark"] .pv-mheader__logo--dark {
  display: block;
}

@media (max-width: 359px) {
  html.pv-app .pv-mheader__logo {
    width: 132px;
  }
}

html.pv-app .pv-mheader__right {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

html.pv-app .pv-mheader__right .pv-iconbtn {
  display: none;
}

html.pv-app .pv-mheader__avatar {
  display: inline-grid;
  place-items: center;
  width: var(--pv-touch);
  height: var(--pv-touch);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

html.pv-app .pv-mheader__avatar .pv-avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 700;
}

html.pv-app .pv-tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: none;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--pv-page);
  border-top: 1px solid var(--pv-divider);
}

html.pv-app .pv-tabbar__list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  list-style: none;
  max-width: 720px;
  margin: 0 auto;
}

html.pv-app .pv-tabbar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 62px;
  padding: 8px 2px 10px;
  border: 0;
  background: none;
  color: var(--pv-text-secondary);
  font-family: var(--pv-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

html.pv-app .pv-tabbar__link[aria-current="page"],
html.pv-app .pv-tabbar__link.is-current {
  color: var(--pv-text);
  font-weight: 700;
}

html.pv-app .pv-tabbar__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
}

html.pv-app .pv-tabbar__dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pv-accent-text);
  box-shadow: 0 0 0 2px var(--pv-page);
}

html.pv-app .pv-tabbar__label {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ---- Focus is never hidden under the sticky header or the phone bar (WCAG 2.2 SC 2.4.11) ------
   Whatever takes focus (Tab, Shift+Tab, an in-page link, find in page) scrolls clear of the sticky
   header (68px) and, on the client below 1024px, of the 62px phone header and the fixed bottom bar
   (62px, its top border and the home indicator), with 12px to spare. The same margins hold at 300
   to 400 percent zoom, where a desktop window gets the phone layout. */
html.pv-app {
  scroll-padding-top: calc(var(--pv-header-h) + 12px);
}

@media (max-width: 1023px) {
  html.pv-app:has(.pv-frame--client) {
    scroll-padding-top: 74px;
    scroll-padding-bottom: calc(75px + env(safe-area-inset-bottom));
  }
}

/* ---- Breakpoints ---------------------------------------------------------------------------- */
/* The V2 frame proportion (264px sidebar, 180px logo) from 1280px up. On a small desktop the
   sidebar keeps 248px, so the header still has room for the business name beside the badge. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html.pv-app {
    --pv-sidebar-w: 248px;
  }
}

@media (max-width: 1023px) {
  html.pv-app .pv-frame {
    grid-template-columns: minmax(0, 1fr);
    box-shadow: none;
  }
  html.pv-app .pv-frame > .pv-sidebar {
    display: none;
  }
  html.pv-app .pv-frame--client .pv-header {
    display: none;
  }
  html.pv-app .pv-frame--client .pv-mheader {
    display: flex;
  }
  html.pv-app .pv-frame--client .pv-tabbar {
    display: block;
  }
  html.pv-app .pv-menu-btn {
    display: inline-grid;
  }
  html.pv-app .pv-header {
    gap: 10px;
    padding: 0 16px 0 20px;
  }
  /* Admin below 1024px: the Menu button never shrinks, the business selector takes the room that
     is left (and never collapses below a readable few characters), and search is an icon. */
  html.pv-app .pv-header--admin .pv-ctxwrap {
    flex: 1 1 auto;
    min-width: 9ch;
  }
  html.pv-app .pv-header--admin .pv-search-trigger {
    display: none;
  }
  html.pv-app .pv-header--admin .pv-search-icon {
    display: inline-grid;
  }
  html.pv-app .pv-main {
    padding: 28px 24px 48px;
  }
  html.pv-app .pv-frame--client .pv-main {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  html.pv-app .pv-mheader__right .pv-iconbtn {
    display: inline-grid;
  }
}

@media (max-width: 760px) {
  html.pv-app .pv-envbadge__more {
    display: none;
  }
}

@media (max-width: 599px) {
  html.pv-app .pv-main {
    padding: 22px 20px 40px;
  }
  html.pv-app .pv-hide-narrow {
    display: none;
  }
  html.pv-app .pv-header {
    padding: 0 8px 0 18px;
  }
  html.pv-app .pv-header__left,
  html.pv-app .pv-header__right {
    gap: 6px;
  }
  /* Admin phone header: Menu, the business selector, search, notifications. The building icon
     goes and the DEMO / PRE-LAUNCH badge moves to the line above the page title (pv-app.js
     pageHead), as on the client phone (V2 page 18), so the business name stays readable. */
  html.pv-app .pv-header--admin .pv-ctx > .pv-icon:first-child,
  html.pv-app .pv-header--admin .pv-envbadge {
    display: none;
  }
  html.pv-app .pv-header--admin .pv-ctx--select {
    gap: 6px;
  }
}

@media (max-width: 359px) {
  html.pv-app .pv-header--admin {
    padding: 0 4px 0 12px;
  }
}

@media (max-width: 359px) {
  html.pv-app .pv-tabbar__link {
    font-size: 11px;
  }
  html.pv-app .pv-main {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* Short screens: the brand scrolls away with the rest, so the menu keeps its full height. */
@media (min-width: 1024px) and (max-height: 560px) {
  html.pv-app .pv-sidebar {
    overflow-y: auto;
  }
  html.pv-app .pv-sidebar__scroll {
    flex: none;
    overflow: visible;
  }
}

/* ---- Locked areas (Katie, 2026-10-09) ---------------------------------------------------------
   A family the plan does not open that the client may buy: a real link with a padlock. Tokens only, no
   opacity, no champagne (champagne already means "current" and "waiting"): the label in the sidebar's
   label grey (9.54:1 on #17191C), the padlock in its meta grey (11.37:1). Hover, focus and current are the
   normal row states. In the More sheet, "On other plans" heads its own list, each row saying its plan. */
html.pv-app .pv-navlink--locked {
  color: var(--pv-side-label);
}

html.pv-app .pv-navlink--locked .pv-icon {
  color: var(--pv-side-label);
}

html.pv-app .pv-navlink__lock {
  display: inline-flex;
  flex: none;
  margin-left: auto;
  color: var(--pv-side-meta);
}

html.pv-app .pv-navlink--locked[aria-current="page"],
html.pv-app .pv-navlink--locked[aria-current="page"] .pv-icon {
  color: var(--pv-side-active-text);
}

html.pv-app .pv-navlink--locked[aria-current="page"] .pv-navlink__lock {
  color: var(--pv-text-meta);
}

html.pv-app .pv-more__groups {
  display: grid;
  gap: 18px;
}

html.pv-app .pv-more__heading {
  margin: 0 12px 6px;
  color: var(--pv-text-secondary);
  font-family: var(--pv-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html.pv-app .pv-sheetlink--locked .pv-icon {
  color: var(--pv-text-secondary);
}

html.pv-app .pv-sheetlink__lock {
  display: inline-flex;
  flex: none;
  margin-left: auto;
  color: var(--pv-text-meta);
}

/* Katie's plan preview: the badge says the plan, in plain case. */
html.pv-app .pv-envbadge--preview {
  letter-spacing: 0.02em;
  text-transform: none;
}

@media (forced-colors: active) {
  html.pv-app .pv-navlink__lock,
  html.pv-app .pv-sheetlink__lock {
    color: LinkText;
  }
}