/* ScaleLounge portals V2: base layer. Scoped under html.pv-app; no global resets outside it. */

html.pv-app {
  background: var(--pv-page);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The page itself never pans or bounces sideways on a phone (Katie 2026-10-19: "things are moving
   from left to right when they are not supposed to"). Anything wider than the screen, a table or a
   chart, scrolls inside its own box. The html's value goes to the viewport; clip on the body makes
   no scroll box, so the sticky phone header still sticks. */
html.pv-app {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

@supports (overflow: clip) {
  html.pv-app body {
    overflow-x: clip;
  }
}

html.pv-app body {
  margin: 0;
  min-height: 100vh;
  background: var(--pv-page);
  color: var(--pv-text);
  font-family: var(--pv-font-body);
  font-size: var(--pv-fs-body);
  font-weight: 400;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.pv-app *,
html.pv-app *::before,
html.pv-app *::after {
  box-sizing: border-box;
}

html.pv-app h1,
html.pv-app h2,
html.pv-app h3,
html.pv-app h4 {
  margin: 0;
  font-family: var(--pv-font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--pv-text);
  text-wrap: balance;
}

html.pv-app p {
  margin: 0;
  text-wrap: pretty;
}

/* Titles and subtitles of every kind (list rows, chips, cards, dialogs) never end on one word alone:
   Katie's standing rule. The heading rule above covers h1 to h4; this covers the titles that are
   links, spans or paragraphs, balanced. Balancing alone can still
   leave one word last ("Paid ads / request"), so pv-app.js also binds the last two words of every
   title and subtitle wherever they fit together on one line. */
html.pv-app [class*="title"],
html.pv-app [class*="__sub"] {
  text-wrap: balance;
}

html.pv-app img,
html.pv-app svg {
  display: block;
  max-width: 100%;
}

html.pv-app a {
  color: var(--pv-link);
}

html.pv-app button,
html.pv-app input,
html.pv-app select,
html.pv-app textarea {
  font: inherit;
  color: inherit;
}

html.pv-app button {
  cursor: pointer;
}

html.pv-app button:disabled {
  cursor: not-allowed;
}

html.pv-app ul,
html.pv-app ol {
  margin: 0;
  padding: 0;
}

html.pv-app table {
  border-collapse: collapse;
}

/* ---- Focus: visible, two-tone, never removed --------------------------------------------------
 * A ring in --pv-focus-ring with a gap in --pv-focus-gap: charcoal on light surfaces, champagne on
 * dark ones (V2 page 31). Panels re-declare both tokens, so the ring always contrasts with what is
 * behind it. */
html.pv-app :focus {
  outline: none;
}

html.pv-app :focus-visible {
  outline: 2px solid var(--pv-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--pv-focus-gap);
}

html.pv-app .pv-sidebar :focus-visible,
html.pv-app .pv-dialog--nav :focus-visible {
  outline-color: var(--pv-side-focus);
  box-shadow: 0 0 0 2px var(--pv-side-bg);
}

/* A contrasting panel that is itself the focus target (the Home lead tile is a link): the ring is
   drawn outside it, on the page, so it takes the page's ring and gap. The panel's own tokens would
   put a charcoal ring on the dark page (1.02:1) or a champagne one on white (2.69:1). */
html.pv-app .pv-lead:focus-visible,
html.pv-app .pv-priority:focus-visible,
html.pv-app .pv-feature:focus-visible,
html.pv-app .pv-tone-status:focus-visible {
  outline-color: var(--pv-page-focus-ring);
  box-shadow: 0 0 0 2px var(--pv-page);
}

/* ---- Accessibility helpers ------------------------------------------------------------------ */
html.pv-app .pv-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* A white pill with charcoal text in both themes: it appears over the charcoal sidebar on desktop
   (champagne ring there, as for every sidebar control) and over the page header below 1024px. */
html.pv-app .pv-skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--pv-side-active-bg);
  color: var(--pv-side-active-text);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--pv-border);
}

html.pv-app .pv-skip:focus {
  top: 12px;
}

@media (min-width: 1024px) {
  html.pv-app .pv-skip:focus-visible {
    outline-color: var(--pv-side-focus);
    box-shadow: 0 0 0 2px var(--pv-side-bg);
  }
}

html.pv-app [hidden] {
  display: none !important;
}

/* ---- Type helpers --------------------------------------------------------------------------- */
html.pv-app .pv-eyebrow {
  margin: 0;
  font-family: var(--pv-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-eyebrow--accent {
  color: var(--pv-accent-text);
}

html.pv-app .pv-meta {
  font-size: var(--pv-fs-meta);
  color: var(--pv-text-meta);
}

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

html.pv-app .pv-num {
  font-family: var(--pv-font-heading);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---- Motion --------------------------------------------------------------------------------- */
@keyframes pv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

@keyframes pv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pv-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes pv-sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.pv-app *,
  html.pv-app *::before,
  html.pv-app *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}