/* Connect product apps — the one shell all six products and the /apps hub share.

   CONNECT_APPS_ENTERPRISE_V1 (2026-10-16). Colour, type, radius, shadow and motion come only
   from tokens: the Connect theme (/static/src/site/connect-theme.css) re-pointed for these pages
   by apps/shared/tokens.css (charcoal and neutral, copper as the one accent). There are no raw
   colours here. Device classes: phone <= 640 (tab bar, drawer), tablet 641-1179 (icon rail),
   desktop >= 1180 (labelled rail, collapsible). Motion is transform/opacity only, 120-260ms,
   with a reduced-motion path. */

:root {
  --pa-s1: 4px; --pa-s2: 8px; --pa-s3: 12px; --pa-s4: 16px; --pa-s5: 20px; --pa-s6: 24px; --pa-s7: 32px; --pa-s8: 40px;
  --pa-gap: var(--pa-s3);
  --pa-pad: var(--pa-s3);
  --pa-side-w: 248px;
  --pa-rail-w: 72px;
  --pa-top-h: 48px;
  --pa-tab-h: 64px;
  --pa-max: 1680px;
  --pa-tap: 24px;
  --pa-ctl: 36px;
  --pa-fast: 120ms;
  --pa-base: 180ms;
  --pa-slow: 260ms;
  --pa-ease: cubic-bezier(.2, .8, .2, 1);
  --pa-safe-top: env(safe-area-inset-top, 0px);
  --pa-safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (pointer: coarse) { :root { --pa-tap: 44px; --pa-ctl: 44px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: calc(var(--pa-top-h) + 12px);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--cx-border-strong) 50%, transparent) transparent;
}
/* Modern slim scrollbar across all routes and browsers */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cx-border-strong) 45%, transparent);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--cx-border-strong) 75%, transparent);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }
body {
  margin: 0;
  padding: 0;
  background: var(--cx-canvas);
  color: var(--cx-text);
  font-family: var(--cx-font, system-ui, sans-serif);
  font-size: var(--cx-text-body, 14px);
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
img, svg { max-width: 100%; }
a { color: var(--cx-link); text-underline-offset: 2px; }
a:hover { color: var(--cx-link-hover); }
:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; border-radius: var(--cx-radius-sm); }
h1, h2, h3 { margin: 0; line-height: 1.25; overflow-wrap: anywhere; letter-spacing: -.01em; }
h1 { font-size: var(--cx-text-page, 26px); font-weight: 680; letter-spacing: -.02em; }
h2 { font-size: var(--cx-text-section, 16px); font-weight: 650; }
h3 { font-size: var(--cx-text-body, 14px); font-weight: 650; }
p { margin: 0; }
.pa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pa-ico { flex: none; display: block; }
.pa-skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--cx-radius-sm); background: var(--cx-action); color: var(--cx-action-ink); text-decoration: none; font-weight: 650; transition: transform var(--pa-base) var(--pa-ease); }
.pa-skip:focus { transform: translateY(72px); color: var(--cx-action-ink); }
.pa-boot { min-height: 100dvh; display: grid; place-items: center; }
.pa-boot .pa-mark { animation: pa-pulse 1.4s ease-in-out infinite; }
@keyframes pa-pulse { 50% { opacity: .45; } }

/* ---- Surface Stabilization & Anti-Bleed (Clean Enterprise Workspace) ---- */
html:has(.mc)::before,
html:has(.mc)::after,
html:has(.pa-shell)::before,
html:has(.pa-shell)::after {
  display: none !important;
}

html:has(.mc),
html:has(.pa-shell),
body:has(.pa-shell) {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--cx-canvas) !important;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---- shell ------------------------------------------------------------------ */
.pa-shell {
  display: grid;
  grid-template-columns: var(--pa-side-w) minmax(0, 1fr);
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background-color: var(--cx-canvas) !important;
}
.pa-shell.is-rail { grid-template-columns: var(--pa-rail-w) minmax(0, 1fr); }
/* Three fixed bands: the head (logo, collapse) and the foot (plan, business, the person) never move;
   only the navigation between them scrolls, and the workspace's scroll never reaches the sidebar. */
.pa-side {
  position: relative;
  align-self: stretch;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  z-index: 25;
  background: var(--cx-rail) !important;
  border-right: 1px solid var(--cx-border) !important;
  display: flex;
  flex-direction: column;
  padding: calc(var(--pa-s2) + var(--pa-safe-top)) var(--pa-s3) calc(var(--pa-s3) + var(--pa-safe-bottom));
}
.pa-side-head { flex: none; display: flex; align-items: center; gap: var(--pa-s2); min-height: 0; padding-bottom: var(--pa-s2); border-bottom: 1px solid var(--cx-border-soft); }
.pa-logo { flex: none; width: 32px; height: 32px; border-radius: 9px; box-shadow: var(--cx-shadow-1); }
.pa-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cx-text); min-height: var(--pa-tap); padding: 0 var(--pa-s2); flex: 1; min-width: 0; border-radius: var(--cx-radius-sm); }
.pa-brand:hover { color: var(--cx-text); background: var(--cx-hover); }
.pa-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pa-brand-text strong { font-size: 15px; font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-brand-text small { color: var(--cx-text-3); font-size: var(--cx-text-meta); }
.pa-mark { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--pa-mark); color: var(--pa-mark-ink); box-shadow: var(--cx-shadow-1); }
.pa-mark.is-sm { width: 26px; height: 26px; border-radius: 7px; }
.pa-mark.is-lg { width: 52px; height: 52px; border-radius: 14px; }
.pa-rail-toggle { color: var(--cx-text-3); }
.pa-nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cx-border) transparent; scrollbar-gutter: stable;
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 calc(-1 * var(--pa-s3)); padding: var(--pa-s2) var(--pa-s3);
}
.pa-nav .pa-side-link { margin-top: var(--pa-s2); }
.pa-nav-group { color: var(--cx-text-3); font-size: var(--cx-text-meta); font-weight: 600; letter-spacing: .02em; padding: var(--pa-s3) var(--pa-s3) 2px; }
.pa-nav a, .pa-side-link {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: max(var(--pa-tap), 32px); padding: 0 var(--pa-s3);
  border-radius: var(--cx-radius-sm); color: var(--cx-text-2); text-decoration: none; font-weight: 520;
  transition: background-color var(--pa-fast) var(--pa-ease), color var(--pa-fast) var(--pa-ease);
}
.pa-nav a span, .pa-side-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pa-nav a .pa-ico, .pa-side-link .pa-ico { color: var(--cx-text-3); }
.pa-nav a:hover, .pa-side-link:hover { background: var(--cx-hover); color: var(--cx-text); }
.pa-nav a[aria-current="page"] { background: var(--cx-selected); color: var(--cx-text); font-weight: 650; }
.pa-nav a[aria-current="page"] .pa-ico { color: var(--pa-accent); }
.pa-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pa-accent); }
/* CRM Plus Unified: the rail's module sections (shell.js navInner). Each module's heading opens its
   home; the open module's screens sit under it; a locked module keeps its heading with a lock and
   the word Upgrade. */
.pa-nav-section { display: flex; flex-direction: column; gap: 2px; }
.pa-nav-section + .pa-nav-section, .pa-nav > a + .pa-nav-section { margin-top: var(--pa-s1); }
.pa-nav a.pa-nav-module { font-weight: 620; color: var(--cx-text); }
.pa-nav a.pa-nav-module.is-here:not([aria-current]) .pa-ico { color: var(--pa-accent); }
.pa-nav-section.is-open { padding-bottom: var(--pa-s2); border-bottom: 1px solid var(--cx-border-soft); }
.pa-nav-lock {
  display: inline-flex; align-items: center; gap: 3px; margin-left: auto; flex: none; padding: 1px 6px;
  border-radius: var(--cx-radius-pill); border: 1px solid var(--cx-border); color: var(--cx-text-2);
  font-size: var(--cx-text-meta); font-weight: 600; line-height: 1.4;
}
.pa-nav-lock .pa-ico { color: var(--cx-text-3); }
.pa-shell.is-rail .pa-nav-lock { position: absolute; top: 4px; right: 4px; margin: 0; padding: 1px; font-size: 0; gap: 0; border: 0; background: var(--cx-surface); }
.pa-shell.is-rail .pa-nav-section.is-open { border-bottom: 0; padding-bottom: 0; }
/* The Digital Office workspace's All Tools (shell.js navInner): every module's screens, folded under the four
   departments; open while the screen on show is one of them. */
.pa-nav-more { display: flex; flex-direction: column; gap: 2px; margin-top: var(--pa-s1); }
.pa-nav-more > summary { display: flex; align-items: center; gap: 10px; min-height: max(var(--pa-tap), 32px); padding: 0 var(--pa-s3);
  border-radius: var(--cx-radius-sm); color: var(--cx-text-2); font-weight: 600; list-style: none; cursor: pointer;
  transition: background-color var(--pa-fast) var(--pa-ease), color var(--pa-fast) var(--pa-ease); }
.pa-nav-more > summary::-webkit-details-marker { display: none; }
.pa-nav-more > summary .pa-ico { color: var(--cx-text-3); }
.pa-nav-more > summary .pa-ico:last-child { margin-left: auto; transition: transform var(--pa-fast) var(--pa-ease); }
.pa-nav-more[open] > summary .pa-ico:last-child { transform: rotate(180deg); }
.pa-nav-more > summary:hover { background: var(--cx-hover); color: var(--cx-text); }
.pa-nav-more > summary:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: -2px; }
/* The top bar's way back to the department a service card was opened from (shell.js topBack). */
.pa-top-back { flex: 0 1 auto; gap: 6px; min-width: 0; max-width: 32vw; }
.pa-top-back[hidden] { display: none; }
.pa-top-back > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 640px) { .pa-top-back > span { display: none; } }
/* The phone's tabs are the open module's (shell.js tabLinks); the wrapper keeps the tab grid. */
.pa-tabbar-links { display: contents; }
/* The locked module's own words (shell.js renderLocked), above the upgrade. */
.pa-preview-figure { display: block; width: 100%; max-width: 560px; height: auto; border-radius: var(--cx-radius-md); margin: 0 0 var(--pa-s4); }
.pa-upgrade-slot:empty { display: none; }
/* A resource's second level (shell.js navLink, `subnav`): the chevron beside its link opens a group
   under it. Height eases through a 0fr -> 1fr row; reduced motion drops it (the block at the end). */
.pa-nav-parent { position: relative; display: flex; flex-direction: column; flex: none; }
.pa-nav-parent > a { padding-right: 44px; }
.pa-nav-count { margin-left: auto; flex: none; font-size: var(--cx-text-meta); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--pa-accent-text); }
.pa-nav-parent.is-open .pa-nav-count { display: none; }
/* Open, the group carries the highlight; its link keeps only the accent mark and the bold. */
.pa-nav-parent.is-open > a[aria-current="page"] { background: transparent; }
.pa-sub-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: max(var(--pa-tap), 32px); height: max(var(--pa-tap), 32px); padding: 0; border: 0; border-radius: var(--cx-radius-sm);
  background: transparent; color: var(--cx-text-3); cursor: pointer; transition: background-color var(--pa-fast) var(--pa-ease), color var(--pa-fast) var(--pa-ease);
}
.pa-sub-toggle:hover { background: var(--cx-hover); color: var(--cx-text); }
.pa-sub-toggle:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: -2px; }
.pa-sub-toggle .pa-ico { transition: transform var(--pa-base) var(--pa-ease); }
.pa-sub-toggle[aria-expanded="true"] .pa-ico { transform: rotate(90deg); }
.pa-sub { flex: none; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--pa-base) var(--pa-ease), opacity var(--pa-base) var(--pa-ease); }
.pa-sub.is-open { grid-template-rows: 1fr; opacity: 1; }
/* No vertical padding here (a closed 0fr row would still show it): the resource's content spaces itself. */
.pa-sub-inner { min-height: 0; overflow: hidden; padding-left: var(--pa-s4); }
.pa-shell.is-rail .pa-sub, .pa-shell.is-rail .pa-sub-toggle { display: none; }
.pa-shell.is-rail .pa-nav-parent > a { padding-right: 0; }
.pa-side-foot { flex: none; display: flex; flex-direction: column; gap: var(--pa-s2); padding-top: var(--pa-s3); border-top: 1px solid var(--cx-border-soft); margin-top: auto; }
.pa-user {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: var(--pa-s1) var(--pa-s2);
  border: 1px solid transparent; border-radius: var(--cx-radius-sm); background: transparent; color: var(--cx-text);
  font: inherit; text-align: left; cursor: pointer; transition: background-color var(--pa-fast) var(--pa-ease), border-color var(--pa-fast) var(--pa-ease);
}
.pa-user:hover, .pa-user[aria-expanded="true"] { background: var(--cx-hover); border-color: var(--cx-border-soft); }
.pa-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pa-user-text strong { font-size: var(--cx-text-small); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-user-text small { color: var(--cx-text-3); font-size: var(--cx-text-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-user > .pa-ico { color: var(--cx-text-3); }
.pa-profile { display: flex; align-items: center; gap: var(--pa-s3); margin-bottom: var(--pa-s4); }
.pa-tip {
  position: fixed; z-index: 70; pointer-events: none; padding: 5px 10px; border-radius: var(--cx-radius-sm);
  background: var(--cx-text); color: var(--cx-canvas); font-size: var(--cx-text-small); font-weight: 600; white-space: nowrap;
  box-shadow: var(--cx-shadow-2); animation: pa-fade var(--pa-fast) var(--pa-ease);
}
.pa-plan-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2); }
.pa-business { display: flex; align-items: center; gap: var(--pa-s2); color: var(--cx-text-3); min-width: 0; }
.pa-business .pa-select { min-height: max(var(--pa-tap), 34px); padding-top: 4px; padding-bottom: 4px; font-size: var(--cx-text-small); }
.pa-business-top { max-width: 240px; }

/* The collapsed rail is drawn at the end of this file (CONNECT_APPS_RAIL_V2). shell.js sets .is-rail: desktop by
   preference, tablet unless peeked open. */

.pa-frame {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pa-topbar {
  flex: none;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--pa-s3);
  min-height: calc(var(--pa-top-h) + var(--pa-safe-top));
  height: calc(var(--pa-top-h) + var(--pa-safe-top));
  padding: var(--pa-safe-top) clamp(12px, 1.6vw, 24px) 0;
  background: var(--cx-canvas) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--cx-border-soft) !important;
}
.pa-topbar .pa-menu-btn, .pa-topbar .pa-top-title, .pa-topbar .pa-search-icon { display: none; }
.pa-top-title { align-items: center; gap: var(--pa-s2); min-width: 0; flex: 1; }
/* On a phone the screen's name is the module switcher (shell.js data-module-switch). */
button.pa-top-title {
  border: 0; background: transparent; color: inherit; font: inherit; padding: 0 var(--pa-s1); margin: 0; cursor: pointer; text-align: left;
  min-height: var(--pa-tap); border-radius: var(--cx-radius-sm);
}
button.pa-top-title:hover { background: var(--cx-hover); }
button.pa-top-title > .pa-ico { flex: none; color: var(--cx-text-3); }
.pa-top-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.pa-searchbar {
  flex: 1; max-width: 520px; display: flex; align-items: center; gap: var(--pa-s2); min-height: max(var(--pa-tap), 34px); height: 34px; padding: 0 var(--pa-s2) 0 var(--pa-s3);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm); background: var(--cx-surface); color: var(--cx-text-3);
  font: inherit; cursor: pointer; text-align: left; transition: border-color var(--pa-fast) var(--pa-ease), box-shadow var(--pa-fast) var(--pa-ease);
}
.pa-searchbar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-searchbar:hover { border-color: var(--cx-border-strong); box-shadow: var(--cx-shadow-1); }
.pa-top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--pa-s1); }
.pa-top-actions .pa-icon-btn { color: var(--cx-text-2); }
.pa-bell { position: relative; }
/* The count is 12px text: --cx-warning keeps the copper family at AA in both themes (Day white on it 5.5:1,
   Dark ink on it 8.4:1); --pa-accent's Day copper gave white only 4.1:1. */
.pa-badge { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cx-warning); color: var(--cx-action-ink); font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--cx-canvas); }
.pa-account { border: 0; background: transparent; padding: 3px; border-radius: 50%; cursor: pointer; min-width: var(--pa-tap); min-height: var(--pa-tap); display: grid; place-items: center; margin-left: var(--pa-s1); }
.pa-account:hover .pa-avatar { box-shadow: 0 0 0 3px var(--cx-hover); }
.pa-main {
  /* The containing block of everything absolute inside it (hidden switch inputs, screen-reader text), so
     nothing escapes the scroller, lengthens the document and lets focus scroll the fixed shell away. */
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: calc(100% - var(--pa-top-h) - var(--pa-safe-top));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  padding: var(--pa-pad, var(--pa-s3)) clamp(12px, 1.6vw, 24px) calc(32px + var(--pa-safe-bottom));
}
.pa-main:focus { outline: none; }
.pa-view { max-width: var(--pa-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--pa-s3); }
.pa-view, .pa-stack { gap: var(--pa-s3); }
.pa-grid-2 { gap: var(--pa-s3); }
.pa-view[aria-busy="true"] > :not(.pa-panel):not(.pa-kpis):not(.pa-skel-detail) { opacity: .7; }
.pa-tabbar { display: none; }

/* Tablet: the icon rail by default; the toggle opens the full sidebar over the workspace. */
@media (min-width: 641px) and (max-width: 1023px) {
  .pa-shell, .pa-shell.is-rail { grid-template-columns: var(--pa-rail-w) minmax(0, 1fr); }
  .pa-shell.is-peek .pa-side { position: fixed; inset: 0 auto 0 0; width: var(--pa-side-w); z-index: 50; box-shadow: var(--cx-shadow-3); }
  .pa-shell.is-peek .pa-frame { grid-column: 2; }
  .pa-scrim.is-peek { position: fixed; inset: 0; background: var(--cx-overlay); z-index: 45; animation: pa-fade var(--pa-base) var(--pa-ease); }
  .pa-business-top { max-width: 180px; }
}
@media (max-width: 1179px) { .pa-business-top .pa-ico { display: none; } }

/* Phone: one column, a drawer for everything, a tab bar for the four that matter most. */
@media (max-width: 640px) {
  .pa-shell, .pa-shell.is-rail {
    display: flex;
    flex-direction: column;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
  /* Closed, the drawer is off screen and out of the tab order: visibility flips after the slide. */
  .pa-side {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 50; height: 100dvh; visibility: hidden;
    transform: translateX(-104%); transition: transform var(--pa-base) var(--pa-ease), visibility 0s linear var(--pa-base); box-shadow: var(--cx-shadow-3);
  }
  .pa-shell.is-nav-open .pa-side { transform: none; visibility: visible; transition: transform var(--pa-base) var(--pa-ease); }
  .pa-scrim { position: fixed; inset: 0; background: var(--cx-overlay); z-index: 45; animation: pa-fade var(--pa-base) var(--pa-ease); }
  .pa-shell .pa-rail-toggle { display: none; }
  .pa-topbar .pa-menu-btn, .pa-topbar .pa-top-title { display: flex; }
  /* The business picker and the product switcher live only in this header, so the phone keeps both. */
  .pa-searchbar, .pa-top-actions [data-connect-theme-toggle] { display: none; }
  .pa-business-top { max-width: 120px; }
  .pa-top-title .pa-mark { display: none; }
  .pa-topbar .pa-search-icon { display: grid; }
  .pa-inbox { min-height: 0; }
  .pa-topbar { gap: var(--pa-s1); padding-left: var(--pa-s2); padding-right: var(--pa-s2); }
  .pa-frame {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .pa-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--pa-s2) var(--pa-s3) calc(var(--pa-tab-h) + 20px + var(--pa-safe-bottom));
    /* Focus scrolled into view stops above the fixed tab bar, never behind it (WCAG 2.4.11). */
    scroll-padding-bottom: calc(var(--pa-tab-h) + var(--pa-safe-bottom) + var(--pa-s3));
  }
  .pa-view { gap: var(--pa-s4); }
  .pa-lead, .pa-eyebrow { display: none; }
  h1 { font-size: 19px; }
  .pa-tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; inset: auto 0 0 0; z-index: 30;
    min-height: calc(var(--pa-tab-h) + var(--pa-safe-bottom)); padding: 0 var(--pa-s1) var(--pa-safe-bottom);
    background: var(--cx-surface) !important; backdrop-filter: none !important; border-top: 1px solid var(--cx-border-soft) !important;
  }
  .pa-tabbar a, .pa-tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; min-width: 0;
    color: var(--cx-text-3); text-decoration: none; font: inherit; font-size: 12px; font-weight: 560; border: 0; background: transparent; cursor: pointer;
  }
  .pa-tabbar a[aria-current="page"] {
    /* The label is text on the accent tint, so it takes the kit's text-on-accent token: the accent fill colour
       there was 3.5:1 in Day (PC acceptance r4, D-34); the icon keeps the accent (non-text, 3:1). */
    color: var(--pa-accent-text); font-weight: 650;
    background: color-mix(in srgb, var(--pa-accent) 14%, transparent);
    border-radius: var(--cx-radius-md);
    margin: 4px 2px; min-height: 48px;
  }
  .pa-tabbar a[aria-current="page"] .pa-ico { color: var(--pa-accent); }
  body { font-size: 14px; }
}
@keyframes pa-fade { from { opacity: 0; } }

/* ---- page heads -------------------------------------------------------------- */
.pa-head { align-items: center; flex-wrap: nowrap; gap: var(--pa-s3); display: flex; justify-content: space-between; }
.pa-head > div:first-child { flex: 1 1 auto; flex-direction: row; align-items: baseline; flex-wrap: nowrap; gap: var(--pa-s3); min-width: 0; display: flex; }
.pa-head.is-detail { align-items: center; }
.pa-head-id { display: flex !important; flex-direction: row !important; align-items: center; gap: var(--pa-s3) !important; }
.pa-head-id > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-eyebrow { display: none; }
.pa-head h1 { font-size: 20px; flex: none; white-space: nowrap; font-weight: 680; letter-spacing: -.02em; }
.pa-count { display: inline-flex; vertical-align: middle; align-items: center; min-height: 20px; padding: 0 9px; margin-left: 0; border-radius: var(--cx-radius-pill); background: var(--cx-surface-2); color: var(--cx-text-2); font-size: var(--cx-text-meta); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pa-lead { flex: 1 1 0; min-width: 0; max-width: none; font-size: var(--cx-text-small); color: var(--cx-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-back { flex: none; min-height: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--cx-text-2); text-decoration: none; }
.pa-crumbs a { display: inline-flex; align-items: center; gap: 4px; min-height: var(--pa-tap); color: var(--cx-text-2); text-decoration: none; font-weight: 560; }
.pa-crumbs a:hover { color: var(--cx-text); }
.pa-link-btn { font-weight: 600; text-decoration: none; min-height: var(--pa-tap); min-width: var(--pa-tap); display: inline-flex; align-items: center; justify-content: center; color: var(--cx-text-2); }
.pa-link-btn:hover { color: var(--cx-text); text-decoration: underline; }
.pa-head > .pa-actions { flex: none; flex-wrap: nowrap; display: flex; align-items: center; gap: var(--pa-s2); }
/* A phone keeps the title on its own line and wraps the actions under it: never squeezed or clipped. */
@media (max-width: 640px) {
  .pa-head { flex-wrap: wrap; row-gap: var(--pa-s2); }
  .pa-head > .pa-actions { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
}

@media (min-width: 641px) {
  /* Stuck, it sits under the scroller's top padding, and the rows scrolled by in that strip (2026-10-23):
     a band of the canvas above it, as tall as the padding, covers the strip. At rest the band falls on
     the empty padding, so nothing moves. */
  .pa-view > .pa-head:first-child {
    box-shadow: 0 calc(-1 * var(--pa-pad, var(--pa-s3))) 0 0 var(--cx-canvas);
    position: sticky; top: 0; z-index: 15; margin: calc(-1 * var(--pa-s3)) calc(-1 * clamp(12px, 1.6vw, 24px)) 0;
    padding: var(--pa-s2) clamp(12px, 1.6vw, 24px); min-height: 52px;
    background: var(--cx-canvas);
    border-bottom: 1px solid var(--cx-border-soft);
  }
  /* Focus scrolled up into view stops clear of that sticky head, focus ring included (WCAG 2.4.11). The head
     sticks inside the scroller's top padding, so the line is: that padding, the head (one row of --pa-ctl
     controls, 44px on touch, with its padding and border), then one step of air. */
  .pa-main { scroll-padding-top: calc(var(--pa-pad, var(--pa-s3)) + var(--pa-ctl) + 2 * var(--pa-s2) + 1px + var(--pa-s3)); }
  /* A table's sticky head (kit.css) stops under this one: its height, the larger of its floor and one row
     of controls with their padding, plus the border. */
  .pa-view:has(> .pa-head:first-child) { --pa-table-top: calc(max(52px, var(--pa-ctl) + 2 * var(--pa-s2)) + 1px); }
}

/* ---- controls ------------------------------------------------------------------ */
.pa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--pa-ctl); min-width: var(--pa-tap); padding: 0 14px;
  border-radius: var(--cx-radius-sm); border: 1px solid var(--cx-border-strong);
  background: var(--cx-surface); color: var(--cx-text); font: inherit; font-weight: 600; font-size: var(--cx-text-small);
  cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: var(--cx-shadow-1);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--pa-fast) var(--pa-ease), border-color var(--pa-fast) var(--pa-ease), transform var(--pa-fast) var(--pa-ease), box-shadow var(--pa-fast) var(--pa-ease);
}
.pa-btn:hover { background: var(--cx-hover); color: var(--cx-text); }
.pa-btn:active { transform: translateY(1px) scale(0.98); }
.pa-btn:disabled, .pa-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.pa-btn.is-primary { background: var(--cx-action); border-color: var(--cx-action); color: var(--cx-action-ink); }
.pa-btn.is-primary:hover { background: var(--cx-action-hover); border-color: var(--cx-action-hover); color: var(--cx-action-ink); }
.pa-btn.is-danger { color: var(--cx-danger-text); border-color: var(--cx-border-strong); }
.pa-btn.is-danger:hover { background: var(--cx-danger-soft); border-color: var(--cx-danger); }
.pa-btn.is-danger-solid { background: var(--cx-danger); border-color: var(--cx-danger); color: var(--cx-action-ink); }
.pa-btn.is-quiet { border-color: transparent; background: transparent; box-shadow: none; }
.pa-btn.is-quiet:hover { background: var(--cx-hover); }
.pa-btn.is-sm { min-height: max(var(--pa-tap), 30px); padding: 0 10px; font-size: var(--cx-text-meta); }
.pa-btn.is-busy { cursor: progress; position: relative; color: transparent !important; }
.pa-btn.is-busy::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cx-text-3); border-top-color: transparent; animation: pa-spin .7s linear infinite; }
.pa-btn.is-primary.is-busy::after { border-color: var(--cx-action-ink); border-top-color: transparent; }
@keyframes pa-spin { to { transform: rotate(360deg); } }
.pa-icon-btn { padding: 0; width: var(--pa-ctl); }
.pa-icon-btn.is-sm { width: max(var(--pa-tap), 30px); padding: 0; }
.pa-actions { display: flex; flex-wrap: wrap; gap: var(--pa-s2); align-items: center; }
.pa-kbd { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border: 1px solid var(--cx-border); border-bottom-width: 2px; border-radius: 5px; background: var(--cx-surface-2); color: var(--cx-text-2); font: 600 12px/1 var(--cx-font-mono, monospace); }

.pa-form { display: flex; flex-direction: column; gap: var(--pa-s4); max-width: 680px; }
.pa-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--pa-s4); }
.pa-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pa-field > label, .pa-label { font-weight: 600; font-size: var(--cx-text-small); color: var(--cx-text); }
.pa-optional { color: var(--cx-text-3); font-weight: 500; }
.pa-help { color: var(--cx-text-3); font-size: var(--cx-text-meta); }
.pa-field-error { color: var(--cx-danger-text); font-size: var(--cx-text-meta); font-weight: 600; }
.pa-input, .pa-select, .pa-textarea {
  width: 100%; min-height: var(--pa-ctl); padding: 8px 12px; font: inherit; color: var(--cx-text);
  background: var(--cx-input); border: 1px solid var(--cx-border-strong); border-radius: var(--cx-radius-sm);
  transition: border-color var(--pa-fast) var(--pa-ease), box-shadow var(--pa-fast) var(--pa-ease);
}
.pa-input:hover, .pa-select:hover, .pa-textarea:hover { border-color: var(--cx-text-3); }
.pa-input:focus, .pa-select:focus, .pa-textarea:focus { outline: none; border-color: var(--cx-focus); box-shadow: 0 0 0 3px var(--pa-accent-soft); }
.pa-input[aria-invalid="true"], .pa-select[aria-invalid="true"], .pa-textarea[aria-invalid="true"] { border-color: var(--cx-danger); }
.pa-select.is-compact { width: auto; min-width: 150px; }
.pa-textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
@media (pointer: coarse) { .pa-input, .pa-select, .pa-textarea { font-size: 16px; } }
.pa-fieldset { border: 0; padding: 0; margin: 0; }
.pa-switch { display: flex; align-items: center; gap: 10px; min-height: var(--pa-tap); cursor: pointer; font-weight: 600; font-size: var(--cx-text-small); }
.pa-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pa-switch-track { flex: none; width: 36px; height: 20px; border-radius: 10px; background: var(--cx-border-strong); position: relative; transition: background-color var(--pa-fast) var(--pa-ease); }
.pa-switch-track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--cx-surface); box-shadow: var(--cx-shadow-1); transition: transform var(--pa-fast) var(--pa-ease); }
.pa-switch input:checked + .pa-switch-track { background: var(--cx-action); }
.pa-switch input:checked + .pa-switch-track::after { transform: translateX(16px); }
.pa-switch input:focus-visible + .pa-switch-track { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.pa-radios { display: flex; flex-direction: column; gap: var(--pa-s2); }
.pa-radio { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm); cursor: pointer; min-height: var(--pa-tap); transition: border-color var(--pa-fast) var(--pa-ease), background-color var(--pa-fast) var(--pa-ease); }
.pa-radio:hover { background: var(--cx-hover); }
.pa-radio input { margin: 3px 0 0; accent-color: var(--cx-action); width: 16px; height: 16px; flex: none; }
.pa-radio:has(input:checked) { border-color: var(--cx-action); background: var(--cx-surface-2); }
.pa-days { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-day { position: relative; }
.pa-day input { position: absolute; opacity: 0; }
.pa-day span { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: var(--pa-ctl); padding: 0 10px; border: 1px solid var(--cx-border-strong); border-radius: var(--cx-radius-sm); font-weight: 600; font-size: var(--cx-text-small); cursor: pointer; }
.pa-day input:checked + span { background: var(--cx-action); border-color: var(--cx-action); color: var(--cx-action-ink); }
.pa-day input:focus-visible + span { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.pa-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border-radius: var(--cx-radius-sm); background: var(--cx-surface-2); border: 1px solid var(--cx-border-soft); }
.pa-seg button { min-height: max(var(--pa-tap), 30px); min-width: var(--pa-tap); padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: var(--cx-text-2); font: inherit; font-size: var(--cx-text-small); font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--pa-fast) var(--pa-ease), transform var(--pa-fast) var(--pa-ease); }
.pa-seg button:hover { color: var(--cx-text); }
.pa-seg button:active { transform: scale(0.97); }
.pa-seg button[aria-pressed="true"] { background: var(--cx-surface); color: var(--cx-text); box-shadow: var(--cx-shadow-1); }
.pa-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 0; max-width: 420px; color: var(--cx-text-3); }
.pa-search .pa-ico { position: absolute; left: 11px; pointer-events: none; }
.pa-search input { width: 100%; min-height: max(var(--pa-tap), 34px); padding: 6px 12px 6px 34px; font: inherit; font-size: var(--cx-text-small); color: var(--cx-text); background: var(--cx-input); border: 1px solid var(--cx-border-strong); border-radius: var(--cx-radius-sm); }
.pa-search input:focus { outline: none; border-color: var(--cx-focus); box-shadow: 0 0 0 3px var(--pa-accent-soft); }
@media (pointer: coarse) { .pa-search input { font-size: 16px; } }

/* ---- surfaces -------------------------------------------------------------------- */
.pa-panel {
  background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg);
  padding: var(--pa-pad); display: flex; flex-direction: column; gap: var(--pa-s3); min-width: 0; box-shadow: var(--cx-shadow-1);
}
/* `clip` cuts the corners as `hidden` did but makes no scroll container, so a table's head can stick to
   the page's scroll (kit.css, "sticky heads"); `hidden` stays as the fallback where `clip` is unknown. */
.pa-panel.is-flush { padding: 0; gap: 0; overflow: hidden; overflow: clip; }
.pa-panel-pad { padding: var(--pa-s3); }
.pa-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--pa-s2); }
.pa-stack { display: flex; flex-direction: column; gap: var(--pa-s3); min-width: 0; }
.pa-grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--pa-s3); align-items: start; }
.pa-grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--pa-s3); }
@media (max-width: 1023px) { .pa-grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pa-panel { padding: var(--pa-s3); border-radius: var(--cx-radius); } .pa-panel-pad { padding: var(--pa-s3); } }

.pa-banner { display: flex; gap: var(--pa-s3); align-items: flex-start; padding: var(--pa-s3) var(--pa-s4);
  border-radius: var(--cx-radius); border: 1px solid var(--cx-border); background: var(--cx-surface-2); }
.pa-banner > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pa-banner p { color: var(--cx-text-2); }
.pa-banner.is-ok { background: var(--cx-success-soft); border-color: color-mix(in srgb, var(--cx-success) 40%, transparent); }
.pa-banner.is-warn { background: var(--cx-warning-soft); border-color: color-mix(in srgb, var(--cx-warning) 40%, transparent); }
.pa-banner.is-bad { background: var(--cx-danger-soft); border-color: color-mix(in srgb, var(--cx-danger) 40%, transparent); }
.pa-banner.is-info { background: var(--cx-info-soft); border-color: color-mix(in srgb, var(--cx-info) 30%, transparent); }
.pa-banner strong { overflow-wrap: anywhere; }
.pa-banner .pa-actions { margin-top: 6px; }
.pa-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--cx-text-3); }
.is-ok > .pa-dot { background: var(--cx-success); }
.is-warn > .pa-dot { background: var(--cx-warning); }
.is-bad > .pa-dot { background: var(--cx-danger); }
.is-info > .pa-dot { background: var(--cx-info); }

/* The status card at the top of an Overview: is it ready, and the next step if not. */
.pa-status-card { display: flex; flex-wrap: wrap; gap: var(--pa-s3) var(--pa-s5); justify-content: space-between; align-items: center;
  background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); padding: var(--pa-s3) var(--pa-s4); box-shadow: var(--cx-shadow-1); }
.pa-status-main { display: flex; gap: var(--pa-s3); align-items: flex-start; min-width: 0; flex: 1 1 320px; }
.pa-status-main > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pa-status-main p { color: var(--cx-text-2); }
.pa-status-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cx-surface-2); color: var(--cx-text-2); }
.pa-status-card.is-ok .pa-status-icon { background: var(--cx-success-soft); color: var(--cx-success-text); }
.pa-status-card.is-warn .pa-status-icon { background: var(--pa-accent-soft); color: var(--pa-accent-text); }
.pa-status-card.is-bad .pa-status-icon { background: var(--cx-danger-soft); color: var(--cx-danger-text); }
.pa-status-progress { display: flex; flex-direction: column; gap: 8px; flex: 0 1 300px; min-width: 220px; }
.pa-status-progress .pa-btn { align-self: flex-start; }
@media (max-width: 640px) { .pa-status-progress { min-width: 0; flex-basis: 100%; } }

.pa-kpis:not(.is-compact):not(.is-money) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--pa-s2); }
.pa-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--pa-s2); }
.pa-kpi { position: relative; background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); padding: var(--pa-s2) var(--pa-s3); display: flex; flex-direction: column; gap: 4px; min-width: 0; box-shadow: var(--cx-shadow-1); }
.pa-kpi b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.pa-kpi-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--cx-surface-2); color: var(--cx-text-2); margin-bottom: 0; }
.pa-kpi:has(> .pa-kpi-icon) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--pa-s3); row-gap: 0; }
.pa-kpi:has(> .pa-kpi-icon) > .pa-kpi-icon { grid-row: 1 / span 2; margin: 0; }
.pa-kpi:has(> .pa-kpi-icon) > :not(.pa-kpi-icon) { grid-column: 2; }
.pa-kpi span:not(.pa-kpi-icon) { color: var(--cx-text-2); font-size: var(--cx-text-meta); overflow-wrap: anywhere; }
@media (max-width: 640px) { .pa-kpis:not(.is-compact):not(.is-money) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pa-kpi b { font-size: 20px; } .pa-kpi:has(> .pa-kpi-icon) { column-gap: var(--pa-s2); } }
ul.pa-kpis { list-style: none; margin: 0; padding: 0; }
a.pa-kpi { color: var(--cx-text); text-decoration: none; min-height: var(--pa-tap); transition: border-color var(--pa-fast) var(--pa-ease), transform var(--pa-fast) var(--pa-ease); }
a.pa-kpi:hover { border-color: var(--cx-border-strong); color: var(--cx-text); }

.pa-shortcuts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pa-shortcuts a { display: flex; align-items: center; gap: var(--pa-s3); padding: 10px var(--pa-s2); min-height: 44px; border-radius: var(--cx-radius-sm); color: var(--cx-text); text-decoration: none; }
.pa-shortcuts a:hover { background: var(--cx-hover); color: var(--cx-text); }
.pa-shortcuts a .pa-ico { color: var(--cx-text-3); }
.pa-shortcuts span { display: flex; flex-direction: column; min-width: 0; }
.pa-shortcuts strong { font-weight: 600; font-size: var(--cx-text-small); }
.pa-shortcuts small { color: var(--cx-text-3); font-size: var(--cx-text-meta); }
.pa-feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--pa-s4); }
.pa-feature-list li { display: flex; gap: var(--pa-s3); }
.pa-feature-list .pa-ico { color: var(--pa-accent); margin-top: 2px; }
.pa-feature-list p { color: var(--cx-text-2); font-size: var(--cx-text-small); }

/* ---- lists and tables --------------------------------------------------------------- */
.pa-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2) var(--pa-s3); padding: var(--pa-s2) var(--pa-s3); border-bottom: 1px solid var(--cx-border-soft); }
.pa-toolbar .pa-select.is-compact { margin-left: auto; }
.pa-table { width: 100%; border-collapse: collapse; font-size: var(--cx-text-small); }
.pa-table th { text-align: left; font-size: var(--cx-text-meta); font-weight: 600; color: var(--cx-text-3); padding: 10px var(--pa-s4); border-bottom: 1px solid var(--cx-border-soft); white-space: nowrap; background: var(--cx-surface); }
.pa-table td { padding: 12px var(--pa-s4); border-bottom: 1px solid var(--cx-border-soft); vertical-align: middle; min-width: 0; }
@media (min-width: 641px) {
  .pa-table th { padding-top: 7px; padding-bottom: 7px; }
  .pa-table td { padding-top: 6px; padding-bottom: 6px; }
  /* A row's stretched .pa-row-link covers the row, so on a touch screen the row is the tap target: 44 px at least.
     block-size, not min-block-size: a table row ignores min-height and treats height as its minimum. */
  @media (any-pointer: coarse) { .pa-table tbody tr { block-size: var(--pa-ctl); } }
}
.pa-table tbody tr { position: relative; transition: background-color var(--pa-fast) var(--pa-ease); content-visibility: auto; contain-intrinsic-size: auto 60px; }
.pa-table tbody tr:hover { background: var(--cx-hover); }
.pa-table tbody tr:last-child td { border-bottom: 0; }
.pa-table .is-meta { color: var(--cx-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-table .is-actions { width: 1%; white-space: nowrap; text-align: right; }
.pa-cell-main { display: flex; align-items: center; gap: var(--pa-s3); min-width: 0; }
.pa-cell-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pa-row-link { color: var(--cx-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.pa-row-link::after { content: ""; position: absolute; inset: 0; }
.pa-row-link:hover { color: var(--cx-text); text-decoration: underline; }
.pa-row-link:focus-visible { outline: none; }
.pa-row-link:focus-visible::after { outline: 2px solid var(--cx-focus); outline-offset: -2px; border-radius: var(--cx-radius-sm); }
.pa-row-actions { position: relative; z-index: 1; display: inline-flex; gap: 4px; align-items: center; }
.pa-list-foot { display: flex; justify-content: center; padding: var(--pa-s3); }
.pa-list-foot:empty { display: none; }
@media (max-width: 640px) {
  .pa-toolbar { padding: var(--pa-s3); }
  .pa-toolbar .pa-search { flex-basis: 100%; max-width: none; }
  .pa-toolbar .pa-select.is-compact { margin-left: 0; }
  .pa-table, .pa-table tbody, .pa-table tr, .pa-table td { display: block; width: 100%; }
  .pa-table thead { display: none; }
  .pa-table tbody tr { padding: var(--pa-s3) var(--pa-s4); border-bottom: 1px solid var(--cx-border-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .pa-table tbody tr:last-child { border-bottom: 0; }
  .pa-table td { padding: 0; border: 0; width: auto; }
  .pa-table td:first-child { width: 100%; }
  .pa-table td.is-actions { margin-left: auto; width: auto; }
  .pa-table td[data-label]:empty { display: none; }
}

.pa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pa-row { position: relative; display: flex; align-items: center; gap: var(--pa-s3); padding: var(--pa-s2) 0; border-top: 1px solid var(--cx-border-soft); min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 56px; }
.pa-row:first-child { border-top: 0; }
.pa-row.is-stack { align-items: flex-start; }
.pa-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-row-title { color: var(--cx-text); font-weight: 600; overflow-wrap: anywhere; }
.pa-row-sub { color: var(--cx-text-2); font-size: var(--cx-text-meta); overflow-wrap: anywhere; }
.pa-row-side { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--pa-s2); flex: none; max-width: 55%; }
@media (max-width: 640px) { .pa-row { flex-wrap: wrap; } .pa-row-side { max-width: none; width: 100%; justify-content: flex-start; } }

.pa-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 9px; border-radius: var(--cx-radius-pill);
  background: var(--cx-surface-2); color: var(--cx-text-2); font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1;
}
.pa-chip.is-ok { background: var(--cx-success-soft); color: var(--cx-success-text); }
.pa-chip.is-warn { background: var(--cx-warning-soft); color: var(--cx-warning-text); }
.pa-chip.is-bad { background: var(--cx-danger-soft); color: var(--cx-danger-text); }
.pa-chip.is-info { background: var(--cx-info-soft); color: var(--cx-info-text); }
.pa-chip.is-accent { background: var(--pa-accent-soft); color: var(--pa-accent-text); }
.pa-meta { color: var(--cx-text-3); font-size: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.pa-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--cx-surface-2); border: 1px solid var(--cx-border); color: var(--cx-text-2); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.pa-avatar.is-lg { width: 44px; height: 44px; font-size: 15px; }
.pa-account .pa-avatar { width: 32px; height: 32px; background: var(--pa-mark); color: var(--pa-mark-ink); border: 0; }

/* Empty states: one row - picture, what and why, the next step */
.pa-empty {
  display: grid; grid-template-columns: auto minmax(0, 62ch) auto; justify-content: center; align-items: center;
  column-gap: var(--pa-s4); row-gap: 2px; padding: var(--pa-s4); text-align: left;
}
.pa-empty-icon { grid-row: 1 / span 2; margin: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--cx-surface-2); color: var(--cx-text-3); }
.pa-empty > h3 { grid-column: 2; align-self: end; }
.pa-empty > p { grid-column: 2; align-self: start; max-width: none; color: var(--cx-text-2); }
.pa-empty > .pa-actions { grid-column: 3; grid-row: 1 / span 2; margin: 0; justify-content: flex-start; }
@media (max-width: 640px) {
  .pa-empty { grid-template-columns: auto minmax(0, 1fr); padding: var(--pa-s3); column-gap: var(--pa-s3); }
  .pa-empty > .pa-actions { grid-column: 2; grid-row: 3; margin-top: var(--pa-s2); }
}

.pa-dl { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); gap: 10px var(--pa-s4); margin: 0; font-size: var(--cx-text-small); }
.pa-dl dt { color: var(--cx-text-3); padding-top: 1px; }
.pa-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.pa-detail-side .pa-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.pa-detail-side .pa-dl dd { margin-bottom: var(--pa-s3); }
@media (max-width: 640px) { .pa-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .pa-dl dd { margin-bottom: var(--pa-s2); } }

.pa-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--pa-s5); align-items: start; }
.pa-detail-main, .pa-detail-side { display: flex; flex-direction: column; gap: var(--pa-s5); min-width: 0; }
@media (max-width: 1023px) { .pa-detail { grid-template-columns: minmax(0, 1fr); } }
.pa-customer-head { display: flex; gap: var(--pa-s3); align-items: center; }
.pa-customer-head > div { min-width: 0; }
.pa-customer .pa-btn { align-self: flex-start; }

.pa-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pa-s2); }
.pa-step { display: flex; gap: var(--pa-s3); align-items: center; padding: var(--pa-s4); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); background: var(--cx-surface); flex-wrap: wrap; }
.pa-step.is-next { border-color: var(--cx-border-strong); box-shadow: var(--cx-shadow-2); }
.pa-step-mark { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--cx-border-strong); font-size: 12px; font-weight: 700; color: var(--cx-text-3); font-variant-numeric: tabular-nums; }
.pa-step.is-next .pa-step-mark { border-color: var(--pa-accent); color: var(--pa-accent-text); }
.pa-step.is-done .pa-step-mark { background: var(--cx-success); border-color: var(--cx-success); color: var(--cx-action-ink); }
.pa-step.is-done h3 { color: var(--cx-text-2); }
.pa-step-body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pa-step-body p { color: var(--cx-text-2); font-size: var(--cx-text-small); overflow-wrap: anywhere; }

.pa-meter { display: flex; flex-direction: column; gap: 6px; }
.pa-meter-top { display: flex; justify-content: space-between; gap: var(--pa-s2); flex-wrap: wrap; font-size: var(--cx-text-small); }
.pa-bar { height: 6px; border-radius: var(--cx-radius-pill); background: var(--cx-surface-2); overflow: hidden; }
.pa-bar span { display: block; height: 100%; background: var(--cx-text); border-radius: inherit; transition: width var(--pa-slow) var(--pa-ease); }
.pa-bar.is-accent span { background: var(--pa-accent); }
.pa-bar.is-warn span { background: var(--cx-warning); }
.pa-bar.is-bad span { background: var(--cx-danger); }

.pa-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--pa-s4); }
.pa-plan { border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); background: var(--cx-surface); padding: var(--pa-pad); display: flex; flex-direction: column; gap: var(--pa-s3); min-width: 0; }
.pa-plan.is-current { border-color: var(--cx-action); box-shadow: 0 0 0 1px var(--cx-action); }
.pa-price { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pa-plan ul { margin: 0; padding-left: 18px; color: var(--cx-text-2); display: flex; flex-direction: column; gap: 4px; }
.pa-plan .pa-btn { margin-top: auto; }

.pa-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pa-s3); }
.pa-timeline li { position: relative; border-left: 2px solid var(--cx-border); padding: 0 0 0 var(--pa-s4); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pa-timeline li.is-waiting { border-left-color: var(--pa-accent); }
.pa-timeline li p { color: var(--cx-text-2); font-size: var(--cx-text-small); overflow-wrap: anywhere; white-space: pre-wrap; }
.pa-tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2); }
.pa-day-head { font-size: var(--cx-text-meta); font-weight: 650; color: var(--cx-text-3); padding: var(--pa-s2) 0 0; }
.pa-pre { margin: 0; padding: var(--pa-s3); background: var(--cx-surface-2); border-radius: var(--cx-radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--cx-font-mono, monospace); font-size: 12px; max-width: 100%; }
.pa-filters { display: flex; flex-wrap: wrap; gap: var(--pa-s2); align-items: center; }

/* ---- skeletons ------------------------------------------------------------------------ */
.pa-skel { display: block; height: 12px; border-radius: 6px; background: var(--cx-surface-2); background-image: linear-gradient(90deg, transparent, var(--cx-hover), transparent); background-size: 200% 100%; animation: pa-shimmer 1.2s ease-in-out infinite; }
.pa-skel.w40 { width: 40%; } .pa-skel.w60 { width: 60%; } .pa-skel.w70 { width: 70%; } .pa-skel.w80 { width: 80%; } .pa-skel.h28 { height: 28px; }
.pa-skel-row { display: flex; gap: var(--pa-s3); align-items: center; padding: 10px 0; }
.pa-skel-dot { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.pa-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pa-skel-box { min-height: 96px; gap: 12px; }
.pa-skel-detail { display: flex; flex-direction: column; gap: var(--pa-s4); }
@keyframes pa-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- overlays: dialog, sheet, menu, palette, toasts ------------------------------------- */
.pa-dialog { border: 0; padding: 0; background: transparent; color: var(--cx-text); max-width: none; max-height: none; }
.pa-dialog::backdrop { background: var(--cx-overlay); animation: pa-fade var(--pa-base) var(--pa-ease); }
.pa-dialog[open] { animation: pa-rise var(--pa-base) var(--pa-ease); }
@keyframes pa-rise { from { opacity: 0; transform: translateY(8px); } }
.pa-dialog.is-modal { width: min(440px, calc(100vw - 32px)); margin: auto; background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); box-shadow: var(--cx-shadow-3); }
.pa-dialog-body { display: flex; gap: var(--pa-s4); padding: var(--pa-s6) var(--pa-s6) var(--pa-s4); }
.pa-dialog-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pa-dialog-text p { color: var(--cx-text-2); }
.pa-dialog-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cx-surface-2); color: var(--cx-text-2); }
.pa-dialog-icon.is-danger { background: var(--cx-danger-soft); color: var(--cx-danger-text); }
.pa-dialog-foot { display: flex; justify-content: flex-end; gap: var(--pa-s2); padding: var(--pa-s4) var(--pa-s6) var(--pa-s6); flex-wrap: wrap; }
.pa-dialog.is-sheet { margin: 0 0 0 auto; height: 100dvh; width: min(520px, 100vw); background: var(--cx-surface); border-left: 1px solid var(--cx-border); box-shadow: var(--cx-shadow-3); }
.pa-dialog.is-sheet.is-wide { width: min(760px, 100vw); }
.pa-dialog.is-sheet[open] { animation: pa-slide var(--pa-slow) var(--pa-ease); }
@keyframes pa-slide { from { transform: translateX(24px); opacity: 0; } }
.pa-sheet { display: flex; flex-direction: column; height: 100%; }
.pa-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pa-s3); padding: calc(var(--pa-s5) + var(--pa-safe-top)) var(--pa-s6) var(--pa-s4); border-bottom: 1px solid var(--cx-border-soft); }
.pa-sheet-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pa-sheet-body { flex: 1; overflow-y: auto; padding: var(--pa-s5) var(--pa-s6); display: flex; flex-direction: column; gap: var(--pa-s4); overscroll-behavior: contain; }
.pa-sheet-foot { display: flex; justify-content: flex-end; gap: var(--pa-s2); padding: var(--pa-s4) var(--pa-s6) calc(var(--pa-s4) + var(--pa-safe-bottom)); border-top: 1px solid var(--cx-border-soft); background: var(--cx-surface); }
@media (max-width: 640px) {
  .pa-dialog.is-sheet { margin: auto 0 0; height: auto; max-height: 92dvh; width: 100vw; border-left: 0; border-top: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg) var(--cx-radius-lg) 0 0; }
  .pa-dialog.is-sheet[open] { animation: pa-up var(--pa-slow) var(--pa-ease); }
  .pa-sheet { max-height: 92dvh; }
  .pa-sheet-head { padding: var(--pa-s4); }
  .pa-sheet-body { padding: var(--pa-s4); }
  .pa-sheet-foot { padding: var(--pa-s3) var(--pa-s4) calc(var(--pa-s3) + var(--pa-safe-bottom)); }
  .pa-sheet-foot .pa-btn { flex: 1; }
}
@keyframes pa-up { from { transform: translateY(32px); opacity: 0; } }
/* A menu the person just opened sits above toasts (70): on a phone a toast covered a menu's last items. */
.pa-menu { position: fixed; z-index: 75; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); padding: 6px; background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); box-shadow: var(--cx-shadow-3); animation: pa-rise var(--pa-fast) var(--pa-ease); }
.pa-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: max(var(--pa-tap), 36px); padding: 0 10px; border: 0; border-radius: var(--cx-radius-sm); background: transparent; color: var(--cx-text); font: inherit; font-size: var(--cx-text-small); text-align: left; text-decoration: none; cursor: pointer; }
.pa-menu-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-menu-item .pa-ico { color: var(--cx-text-3); }
.pa-menu-item:hover, .pa-menu-item:focus-visible { background: var(--cx-hover); color: var(--cx-text); outline: none; }
.pa-menu-item:disabled { opacity: 1; color: var(--cx-text-2); cursor: default; }
.pa-menu-item:disabled:hover { background: transparent; }
.pa-menu-item.is-danger, .pa-menu-item.is-danger .pa-ico { color: var(--cx-danger-text); }
.pa-menu-sep { height: 1px; margin: 6px 4px; background: var(--cx-border-soft); }
.pa-dialog.is-palette { width: min(640px, calc(100vw - 24px)); margin: 12vh auto auto; background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); box-shadow: var(--cx-shadow-3); overflow: hidden; }
.pa-palette-input { display: flex; align-items: center; gap: var(--pa-s3); padding: 0 var(--pa-s4); border-bottom: 1px solid var(--cx-border-soft); color: var(--cx-text-3); }
.pa-palette-input input { flex: 1; min-height: 54px; border: 0; background: transparent; color: var(--cx-text); font: inherit; font-size: 16px; outline: none; }
.pa-palette-list { max-height: min(56dvh, 460px); overflow-y: auto; padding: 6px; }
.pa-palette-title { padding: 10px 10px 4px; font-size: var(--cx-text-meta); font-weight: 650; color: var(--cx-text-3); }
.pa-palette-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: var(--cx-radius-sm); cursor: pointer; }
.pa-palette-item .pa-ico { color: var(--cx-text-3); }
.pa-palette-item[aria-selected="true"] { background: var(--cx-selected); }
.pa-palette-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.pa-palette-hint { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cx-text-3); font-size: var(--cx-text-meta); }
.pa-palette-empty { padding: var(--pa-s6) var(--pa-s4); text-align: center; color: var(--cx-text-3); }
.pa-palette-foot { display: flex; gap: var(--pa-s4); padding: 10px var(--pa-s4); border-top: 1px solid var(--cx-border-soft); color: var(--cx-text-3); font-size: var(--cx-text-meta); }
.pa-palette-foot span { display: inline-flex; gap: 4px; align-items: center; }
@media (max-width: 640px) { .pa-dialog.is-palette { margin: 8px auto auto; } .pa-palette-foot { display: none; } }
.pa-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pa-keys li { display: flex; justify-content: space-between; align-items: center; gap: var(--pa-s3); padding: 10px 0; border-top: 1px solid var(--cx-border-soft); font-size: var(--cx-text-small); }
.pa-keys li:first-child { border-top: 0; }

.pa-toast-wrap { position: fixed; right: var(--pa-s4); bottom: calc(var(--pa-s4) + var(--pa-safe-bottom)); z-index: 70; display: flex; flex-direction: column; gap: var(--pa-s2); max-width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.pa-toast { display: flex; align-items: center; gap: var(--pa-s3); background: var(--cx-action); color: var(--cx-action-ink); padding: 10px 10px 10px var(--pa-s4); border-radius: var(--cx-radius); box-shadow: var(--cx-shadow-3); overflow-wrap: anywhere; font-size: var(--cx-text-small); font-weight: 560; pointer-events: auto; animation: pa-rise var(--pa-base) var(--pa-ease); }
.pa-toast span { flex: 1; min-width: 0; }
.pa-toast.is-bad { background: var(--cx-danger); color: var(--cx-action-ink); }
.pa-toast-action { flex: none; min-height: max(var(--pa-tap), 30px); padding: 0 10px; border: 1px solid currentColor; border-radius: var(--cx-radius-sm); background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 640px) { .pa-toast-wrap { left: var(--pa-s3); right: var(--pa-s3); bottom: calc(var(--pa-tab-h) + 12px + var(--pa-safe-bottom)); max-width: none; } }

/* ---- conversations: a list beside a reading pane; messages; the composer ---------------- */
.pa-inbox { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); min-height: min(72dvh, 820px); padding: 0; gap: 0; }
.pa-inbox-list { border-right: 1px solid var(--cx-border-soft); display: flex; flex-direction: column; min-width: 0; }
.pa-inbox-list .pa-toolbar { flex-direction: column; align-items: stretch; }
.pa-inbox-list .pa-search { max-width: none; flex: none; }
.pa-inbox-list .pa-seg { flex: none; align-self: flex-start; }
.pa-inbox-items { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1; max-height: 70dvh; }
.pa-inbox-item { position: relative; display: flex; gap: 10px; padding: 10px; border-radius: var(--cx-radius); cursor: pointer; min-width: 0; }
.pa-inbox-item:hover { background: var(--cx-hover); }
.pa-inbox-item[aria-current="true"] { background: var(--cx-selected); }
.pa-inbox-item .pa-cell-text { flex: 1; }
.pa-inbox-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pa-inbox-top .pa-row-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-inbox-item .pa-row-sub { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pa-reader { display: flex; flex-direction: column; min-width: 0; }
.pa-reader-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pa-s2) var(--pa-s3); padding: var(--pa-s4) var(--pa-s5); border-bottom: 1px solid var(--cx-border-soft); }
.pa-reader-head > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-reader { container-type: inline-size; }
.pa-reader-body { flex: 1; padding: var(--pa-s5); display: flex; flex-direction: column; gap: var(--pa-s4); }
.pa-reader-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pa-s4); align-items: start; }
.pa-reader-main, .pa-reader-side { display: flex; flex-direction: column; gap: var(--pa-s4); min-width: 0; }
@container (min-width: 760px) { .pa-reader-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); } .pa-reader-side { position: sticky; top: calc(var(--pa-top-h) + var(--pa-s4)); } }
.pa-msg-subject { font-size: var(--cx-text-small); color: var(--cx-text); }
.pa-back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--pa-tap); color: var(--cx-text-2); text-decoration: none; font-weight: 560; font-size: var(--cx-text-small); }
.pa-back:hover { color: var(--cx-text); }
.pa-reader-empty { flex: 1; display: grid; place-items: center; }
@media (max-width: 900px) { .pa-inbox { grid-template-columns: minmax(0, 1fr); } .pa-inbox-list { border-right: 0; } .pa-inbox-items { max-height: none; } .pa-inbox.has-open .pa-inbox-list { display: none; } .pa-inbox:not(.has-open) .pa-reader { display: none; } }
.pa-thread { display: flex; flex-direction: column; gap: var(--pa-s3); }
.pa-msg { max-width: min(680px, 92%); display: flex; flex-direction: column; gap: 6px; padding: var(--pa-s3) var(--pa-s4); border-radius: var(--cx-radius-lg); border: 1px solid var(--cx-border); background: var(--cx-surface); }
.pa-msg.is-out { align-self: flex-end; background: var(--cx-surface-2); border-color: var(--cx-border-soft); }
.pa-msg.is-system { align-self: center; max-width: 92%; background: transparent; border-style: dashed; }
.pa-msg-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: var(--cx-text-meta); color: var(--cx-text-3); }
.pa-msg-head strong { color: var(--cx-text); font-size: var(--cx-text-small); }
.pa-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--cx-text-small); line-height: 1.6; }
.pa-composer { border: 1px solid var(--cx-border-strong); border-radius: var(--cx-radius-lg); background: var(--cx-surface); padding: var(--pa-s3); display: flex; flex-direction: column; gap: var(--pa-s2); box-shadow: var(--cx-shadow-1); }
.pa-composer:focus-within { border-color: var(--cx-focus); box-shadow: 0 0 0 3px var(--pa-accent-soft); }
.pa-composer textarea { border: 0; padding: 4px; min-height: 96px; background: transparent; box-shadow: none !important; }
.pa-composer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pa-s2); align-items: center; }
.pa-composer-note { color: var(--cx-text-3); font-size: var(--cx-text-meta); display: flex; align-items: center; gap: 6px; }

/* ---- boards (deals, the Live Office) and the funnel ---------------------------------------- */
.pa-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); align-items: start; gap: var(--pa-s3); overflow-x: auto; padding-bottom: var(--pa-s2); scroll-snap-type: x proximity; }
.pa-col { background: var(--cx-surface-2); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-lg); padding: var(--pa-s3); display: flex; flex-direction: column; gap: var(--pa-s2); min-width: 0; scroll-snap-align: start; min-height: 160px; }
.pa-col.is-drop { border-color: var(--pa-accent); background: var(--pa-accent-soft); }
.pa-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pa-s2); padding: 2px 4px 6px; }
.pa-col-head h2 { font-size: var(--cx-text-small); }
.pa-card-sm { position: relative; background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); padding: var(--pa-s3); display: flex; flex-direction: column; gap: 6px; box-shadow: var(--cx-shadow-1); min-width: 0; }
.pa-card-sm[draggable="true"] { cursor: grab; }
.pa-card-sm.is-dragging { opacity: .5; }
.pa-card-sm h3 { font-size: var(--cx-text-small); overflow-wrap: anywhere; }
.pa-card-sm .pa-select { min-height: max(var(--pa-tap), 32px); padding-top: 4px; padding-bottom: 4px; font-size: var(--cx-text-meta); }
.pa-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }
.pa-value { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .pa-board { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; } }
.pa-funnel { display: flex; flex-direction: column; gap: 6px; }
.pa-funnel-row { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) 56px; gap: var(--pa-s3); align-items: center; min-height: 34px; text-decoration: none; color: var(--cx-text); border-radius: var(--cx-radius-sm); padding: 2px 6px; }
.pa-funnel-row:hover { background: var(--cx-hover); color: var(--cx-text); }
.pa-funnel-label { font-size: var(--cx-text-small); font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-funnel-bar { height: 22px; border-radius: 6px; background: var(--cx-surface-2); overflow: hidden; }
.pa-funnel-bar span { display: block; height: 100%; min-width: 4px; background: var(--pa-chart-1); border-radius: 6px; transition: width var(--pa-slow) var(--pa-ease); }
.pa-funnel-row:nth-child(n+4) .pa-funnel-bar span { background: var(--pa-chart-3); }
.pa-funnel-bar span.is-zero { min-width: 0; }
.pa-funnel-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
@media (max-width: 640px) { .pa-funnel-row { grid-template-columns: minmax(0, 1fr) 44px; } .pa-funnel-bar { grid-column: 1 / -1; grid-row: 2; height: 10px; } }

/* ---- employees, cards -------------------------------------------------------------------- */
.pa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--pa-s4); list-style: none; margin: 0; padding: 0; }
.pa-card { position: relative; border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); background: var(--cx-surface); padding: var(--pa-pad); display: flex; flex-direction: column; gap: var(--pa-s3); min-width: 0; box-shadow: var(--cx-shadow-1); transition: border-color var(--pa-fast) var(--pa-ease), transform var(--pa-fast) var(--pa-ease), box-shadow var(--pa-fast) var(--pa-ease); }
.pa-card:hover { border-color: var(--cx-border-strong); box-shadow: var(--cx-shadow-2); }
.pa-card p { color: var(--cx-text-2); font-size: var(--cx-text-small); }
.pa-card .pa-actions { margin-top: auto; position: relative; z-index: 1; }
.pa-card-head { display: flex; align-items: center; gap: var(--pa-s3); min-width: 0; }
.pa-card-head > div { min-width: 0; flex: 1; }
.pa-card-head h2, .pa-card-head h3 { overflow-wrap: anywhere; }

/* ---- the transcript of a call -------------------------------------------------------------- */
.pa-transcript { display: flex; flex-direction: column; gap: 10px; }
.pa-turn { display: flex; gap: 10px; align-items: flex-start; max-width: 720px; }
.pa-turn.is-agent { align-self: flex-end; flex-direction: row-reverse; }
.pa-turn-bubble { padding: 10px 14px; border-radius: 14px; background: var(--cx-surface-2); font-size: var(--cx-text-small); line-height: 1.55; overflow-wrap: anywhere; }
.pa-turn.is-agent .pa-turn-bubble { background: var(--cx-action); color: var(--cx-action-ink); }
.pa-turn-who { font-size: 12px; color: var(--cx-text-3); margin-bottom: 2px; }

/* ---- sign in -------------------------------------------------------------------------------- */
.pa-signin { min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + var(--pa-safe-top)) 16px calc(24px + var(--pa-safe-bottom)); }
.pa-signin-card { width: min(100%, 420px); background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); padding: clamp(20px, 5vw, 32px); display: flex; flex-direction: column; gap: var(--pa-s4); box-shadow: var(--cx-shadow-2); }
.pa-signin-card .pa-form { max-width: none; }
.pa-signin-card .pa-btn { width: 100%; }
.pa-signin-card .pa-brand { padding: 0; flex: none; }
.pa-signin-card .pa-brand > span { display: flex; flex-direction: column; line-height: 1.2; }
.pa-signin-card .pa-brand small { color: var(--cx-text-3); font-size: var(--cx-text-meta); }
.pa-invitation { display: flex; flex-direction: column; gap: var(--pa-s3); padding: var(--pa-s4); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); }
.pa-invitation p { margin: 0; overflow-wrap: anywhere; }
.pa-invitation-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--pa-s2); }
.pa-divider { display: flex; align-items: center; gap: var(--pa-s3); color: var(--cx-text-3); font-size: var(--cx-text-meta); }
.pa-divider::before, .pa-divider::after { content: ""; flex: 1; height: 1px; background: var(--cx-border); }
.pa-tabs { display: flex; gap: 4px; padding: 4px; background: var(--cx-surface-2); border-radius: var(--cx-radius); }
.pa-tabs button { flex: 1; min-height: var(--pa-ctl); border: 0; border-radius: var(--cx-radius-sm); background: transparent; font: inherit; color: var(--cx-text-2); cursor: pointer; }
.pa-tabs button[aria-selected="true"] { background: var(--cx-surface); color: var(--cx-text); font-weight: 600; box-shadow: var(--cx-shadow-1); }
.pa-foot-links { display: flex; flex-wrap: wrap; gap: var(--pa-s3); justify-content: center; font-size: var(--cx-text-meta); }
.pa-foot-links a { color: var(--cx-text-3); min-height: var(--pa-tap); min-width: var(--pa-tap); display: inline-flex; align-items: center; justify-content: center; }

/* ---- the /apps hub --------------------------------------------------------------------------- */
.pa-hub { min-height: 100dvh; display: flex; flex-direction: column; }
.pa-hub-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--pa-s3); min-height: calc(var(--pa-top-h) + var(--pa-safe-top)); padding: var(--pa-safe-top) clamp(16px, 4vw, 48px) 0; background: color-mix(in srgb, var(--cx-canvas) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cx-border-soft); }
.pa-hub-top .pa-brand { flex: none; }
.pa-hub-main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 48px) 56px; display: flex; flex-direction: column; gap: var(--pa-s6); }
.pa-hub-hero { display: flex; flex-direction: column; gap: var(--pa-s2); max-width: 760px; }
.pa-hub-hero h1 { font-size: clamp(28px, 4vw, 38px); }
.pa-hub-hero p { color: var(--cx-text-2); font-size: 16px; }
.pa-hub-card .pa-mark { width: 40px; height: 40px; border-radius: 11px; }
.pa-hub-card h2 { font-size: 17px; }
.pa-hub-card .pa-row-link::after { border-radius: var(--cx-radius-lg); }
.pa-hub-foot { display: flex; flex-wrap: wrap; gap: var(--pa-s4); justify-content: space-between; color: var(--cx-text-3); font-size: var(--cx-text-meta); border-top: 1px solid var(--cx-border-soft); padding-top: var(--pa-s4); }
.pa-hub-foot a { color: var(--cx-text-3); }

.pa-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--cx-text-small); color: var(--cx-text-2); }
.pa-checks li { display: flex; align-items: center; gap: 8px; }
.pa-checks .is-ok .pa-ico { color: var(--cx-success); }
.pa-checks .is-bad .pa-ico { color: var(--cx-danger); }
.pa-checks .is-todo .pa-ico { color: var(--cx-text-3); }
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }
.pa-save-state { min-height: 24px; display: inline-flex; align-items: center; }
.pa-inline-form .pa-form { max-width: none; }

/* ---- CONNECT_APPS_WORKFLOWS_V1 (2026-10-16): the product screens' own pieces --------------- */
.pa-mark.is-soft { background: var(--cx-surface-2); color: var(--cx-text-2); box-shadow: none; font-weight: 700; }
.pa-code { font-family: var(--cx-font-mono, ui-monospace, monospace); font-size: var(--cx-text-meta); padding: 2px 6px; border-radius: 6px; background: var(--cx-surface-2); overflow-wrap: anywhere; }
.pa-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 46ch; }
.pa-group-title { font-size: var(--cx-text-meta); font-weight: 650; color: var(--cx-text-3); margin: var(--pa-s4) 0 var(--pa-s1); }
.pa-meters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--pa-s3) var(--pa-s5); }
.pa-score { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--cx-surface-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.pa-summary { background: var(--cx-surface-2); border-color: var(--cx-border-soft); box-shadow: none; }
.pa-summary p { font-size: var(--cx-text-body); line-height: 1.6; }
.pa-search.is-lg { max-width: none; flex: none; margin-bottom: var(--pa-s3); }
.pa-search.is-lg input { min-height: 48px; font-size: 16px; padding-left: 40px; }
.pa-search.is-lg .pa-ico { left: 13px; }
.pa-switch.is-compact { min-height: 0; position: relative; }
@media (pointer: coarse) { .pa-switch.is-compact { min-height: var(--pa-tap); } }
.pa-hub-card .pa-checks { font-size: var(--cx-text-small); }
.pa-hub-card .pa-mark img { width: 20px; height: 20px; }
.pa-hub-card .pa-card-head > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pa-turn .pa-avatar { flex: none; }
[data-people]:empty { display: none; }
.pa-form-grid > .is-wide { grid-column: 1 / -1; }
.pa-form-grid.is-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.pa-row-sub .pa-ico, .pa-help .pa-ico, .pa-meta .pa-ico, .pa-card-sm p .pa-ico { display: inline-block; vertical-align: -2px; }
.pa-kpis.is-compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); }
.pa-kpis.is-compact .pa-kpi { padding: var(--pa-s3) var(--pa-s4); }
.pa-kpis.is-compact .pa-kpi b { font-size: 20px; }
.pa-kpis.is-money { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.pa-kpis.is-money .pa-kpi b { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-composer .pa-composer-note { padding: 0 4px; }
@media (max-width: 640px) {
  .pa-col { min-height: 0; }
  .pa-panel-head .pa-seg, .pa-toolbar .pa-seg, .pa-inbox-list .pa-seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .pa-seg button { flex: none; }
}
.pa-tl-title { display: inline; min-width: 0; }
.pa-tl-title .pa-ico { display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--cx-text-3); }
.pa-avatar.is-bot { background: var(--cx-action); color: var(--cx-action-ink); }
[data-people] .pa-row { cursor: pointer; border-radius: var(--cx-radius-sm); }
[data-people] .pa-row:hover, [data-people] .pa-row:focus-visible { background: var(--cx-hover); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .pa-side, .pa-topbar, .pa-tabbar, .pa-actions, .pa-toolbar { display: none !important; }
  .pa-shell { display: block; }
  .pa-panel { box-shadow: none; break-inside: avoid; }
}

/* ---- Feedback and Share Connect: the shell's entry points (ADVOCACY-CONTRACT.md section 6, W08) ----
   The sheets and pages themselves are styled by feedback.css, share.css, recognition.css and
   social-connect.css; this block is only what the shell and the hub add around them. */
.pa-topbar .pa-feedback-btn { width: 44px; min-width: 44px; min-height: 44px; }
.pa-recognition-slot { margin-top: var(--pa-s5); min-width: 0; }
.pa-recognition-slot[hidden] { display: none; }
.pa-hub-advocacy {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pa-s4);
  padding: clamp(16px, 2.6vw, 28px); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg);
  background: var(--cx-surface); min-width: 0;
}
.pa-hub-advocacy > div:first-child { flex: 1 1 320px; min-width: 0; }
.pa-hub-advocacy h2 { margin: 0 0 var(--pa-s1); font-size: clamp(18px, 2vw, 20px); letter-spacing: -.01em; }
.pa-hub-advocacy p { margin: 0; color: var(--cx-text-2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .pa-hub-advocacy .pa-actions { width: 100%; } .pa-hub-advocacy .pa-btn { flex: 1 1 auto; justify-content: center; } }
@media (max-width: 640px) {
  /* One control per function, and every one inside the bar. The title is the module switch, and the
     account menu and the palette both carry Send feedback, so the phone bar drops those two icons:
     with them, a workspace with two businesses pushed the module icon to x 378-422 on a 390 px phone
     and squeezed the business select to 26 px (2026-10-23). The screen's name and the business (A2)
     PA_TOPBAR_PHONE_V2 (2026-10-30, the Owner's decision replacing the shared-floor layout): measured at 360 px
     the title got 42 px while 52 of the 57 screen names need more (up to 182 px), and the business select
     showed "Every bu". The screen's name is the page's own heading right under the bar, so where a business
     picker is shown the bar gives the picker every pixel the buttons leave; the module switch stays one step
     away in the drawer's All Tools and in search. Without a picker the title stays, in two lines if it needs
     them, inside the same 48 px bar. */
  .pa-topbar .pa-feedback-btn, .pa-topbar [data-products] { display: none; }
  .pa-topbar .pa-top-title { flex: 1 1 96px; min-width: 72px; }
  .pa-topbar:has(.pa-business-top) .pa-top-title { display: none; }
  .pa-topbar:has(.pa-business-top) .pa-top-actions { flex: 1 1 auto; min-width: 0; }
  .pa-topbar .pa-business-top { flex: 1 1 auto; min-width: 88px; max-width: none; margin-right: auto; }
  .pa-topbar .pa-business-top .pa-select { width: 100%; min-width: 0; padding-left: 10px; text-overflow: ellipsis; }
  .pa-top-title strong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    font-size: 14px; line-height: 1.15; overflow-wrap: anywhere; }
  .pa-head h1 { white-space: normal; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; }
}
/* The narrowest phones (320 px): the 44 px buttons touch, and the business keeps those pixels. */
@media (max-width: 340px) { .pa-topbar, .pa-topbar .pa-top-actions { gap: 0; } }

/* CONNECT_PREMIUM_POLISH_V1 (2026-10-24) - one quiet layer over the shared components: pressed and loading
   feedback, compact notices, softer cards. Colour comes from the theme and the tones (connect-theme.css);
   motion is transform/opacity, 120-180ms, with a reduced-motion path. The focus ring stays the global
   :focus-visible one above: inputs and the composer carry their own ring on purpose, never a second. */
.pa-btn.is-primary { box-shadow: var(--cx-elev-1); }
.pa-btn.is-primary:hover { box-shadow: var(--cx-elev-2); }
.pa-panel { box-shadow: var(--cx-elev-1); }
.pa-banner { gap: var(--pa-s2); padding: 10px var(--pa-s3); font-size: var(--cx-text-small); }
.pa-banner > div { gap: 2px; }
.pa-banner .pa-actions { margin-top: 4px; }
.pa-chip { letter-spacing: .005em; }
@media (prefers-reduced-motion: reduce) {
  .pa-btn, .pa-btn:active { transition: none; transform: none; }
  .pa-skel { animation: none; }
}

/* CONNECT_PLAN_CARDS_V1 (2026-10-24) - a plan is one radio option (billing.js planOption): compact, equal height,
   the price first, three allowances, "Everything in ..." folded; the chosen plan carries the accent border and a
   faint wash, a recommended one (only where the catalogue says so) a blue edge. One action below the plans. */
.pa-plans { border: 0; margin: 0; padding: 0; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--pa-s3); align-items: stretch; }
.pa-plans .pa-plan { position: relative; padding: 0; gap: 0; transition: border-color var(--pa-fast) var(--pa-ease), box-shadow var(--pa-fast) var(--pa-ease); }
.pa-plan-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pa-plan-main { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; padding: var(--pa-s3) var(--pa-s4); cursor: pointer; }
.pa-plan.is-static .pa-plan-main { cursor: default; }
.pa-plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-s2); min-width: 0; }
.pa-plan-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.pa-plan-name::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--cx-border-strong); background: var(--cx-surface); }
.pa-plan.is-static:not(.is-current) .pa-plan-name::before { display: none; }
.pa-plans .pa-plan .pa-price { display: block; margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.pa-plans .pa-plan .pa-price .pa-meta { font-size: var(--cx-text-small); font-weight: 500; letter-spacing: 0; }
.pa-plan-top { display: grid; gap: 4px; margin-top: 2px; }
.pa-plan-li { display: flex; align-items: flex-start; gap: 6px; min-width: 0; color: var(--cx-text-2); font-size: var(--cx-text-small); }
.pa-plan-li > svg { flex: none; margin-top: 2px; color: var(--cx-success); }
.pa-plan-li > span { min-width: 0; overflow-wrap: anywhere; }
.pa-plan-more { padding: 4px var(--pa-s4) var(--pa-s2); border-top: 1px solid var(--cx-border-soft); font-size: var(--cx-text-small); }
.pa-plan-more summary { padding: 6px 0; color: var(--cx-link); font-weight: 600; cursor: pointer; list-style: none; }
.pa-plan-more summary::-webkit-details-marker { display: none; }
.pa-plan-more summary::after { content: " +"; }
.pa-plan-more[open] summary::after { content: " \2212"; }
.pa-plans .pa-plan .pa-plan-more ul { margin: 2px 0 4px; padding-left: 18px; gap: 2px; }
.pa-plans .pa-plan:hover:not(.is-static) { border-color: var(--cx-border-strong); box-shadow: var(--cx-elev-2); }
.pa-plans .pa-plan.is-recommended { border-color: color-mix(in srgb, var(--cx-tone-blue) 45%, var(--cx-border)); }
.pa-plans .pa-plan:has(.pa-plan-radio:checked) {
  border-color: var(--cx-accent); box-shadow: 0 0 0 1px var(--cx-accent), var(--cx-elev-2);
  background: linear-gradient(165deg, color-mix(in srgb, var(--cx-accent) 8%, var(--cx-surface)) 0%, var(--cx-surface) 62%);
}
.pa-plans .pa-plan:has(.pa-plan-radio:checked) .pa-plan-name::before { border-color: var(--cx-accent); background: radial-gradient(circle, var(--cx-accent) 0 4px, var(--cx-surface) 4.5px); }
.pa-plans .pa-plan:has(.pa-plan-radio:focus-visible) { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.pa-plan-cta { position: sticky; bottom: var(--pa-s2); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2) var(--pa-s3);
  margin-top: var(--pa-s3); padding: var(--pa-s3); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg);
  background: color-mix(in srgb, var(--cx-surface) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--cx-elev-2); }
.pa-plan-cta[hidden], .pa-plan-payer[hidden] { display: none; }
.pa-plan-cta-sum { flex: 1 1 200px; min-width: 0; margin: 0; }
.pa-plan-payer { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--pa-s2); }
.pa-plan-payer > p { grid-column: 1 / -1; margin: 0; }
.pa-plan-payer label { display: grid; gap: 4px; font-size: var(--cx-text-meta); font-weight: 600; color: var(--cx-text-2); }
@media (max-width: 640px) {
  .pa-plans { grid-template-columns: minmax(0, 1fr); }
  .pa-plan-cta { bottom: calc(var(--pa-tab-h, 56px) + var(--pa-safe-bottom, 0px) + var(--pa-s2)); }
  .pa-plan-cta .pa-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .pa-plans .pa-plan { transition: none; } }

/* CONNECT_SETUP_FREE_V1 (2026-10-24) - one line on a channel's connection screens while the account has no
   plan for it: connecting is free; the line's action is the connection itself (locked page) or See Plans. */
.pa-setup-free { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2) var(--pa-s3); margin: 0 0 var(--pa-s3);
  padding: 8px 8px 8px 12px; border: 1px solid color-mix(in srgb, var(--cx-success) 30%, var(--cx-border-soft));
  border-radius: var(--cx-radius); background: var(--cx-success-soft); color: var(--cx-success-text); font-size: var(--cx-text-small); }
.pa-setup-free > p { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 260px; min-width: 0; margin: 0; }
.pa-setup-free > p > svg { flex: none; }

/* INBOX_CHAT_V2 (2026-10-30): the conversation inbox as a chat workspace (shared/inbox.js, `cfg.chat`).
   Desktop: a fixed-height workspace where the list and the thread scroll and the reply box stays in view;
   a phone or tablet reading a chat: the page is the scroller and the reply box sticks above the tab bar.
   A list row is one link (the whole row is the target): who, what was last said, what it needs.
   Colour only beside a word; tokens only; motion is transform/opacity with the global reduced-motion path. */
.pa-inbox.is-chat .pa-inbox-item { display: block; padding: 0; }
.pa-inbox-link { display: flex; gap: var(--pa-s3); align-items: flex-start; width: 100%; min-height: 64px; padding: var(--pa-s3); border-radius: var(--cx-radius); color: inherit; text-decoration: none; }
.pa-inbox-link:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: -2px; }
.pa-inbox-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-inbox.is-chat .pa-inbox-top { align-items: baseline; gap: var(--pa-s2); }
.pa-inbox-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; color: var(--cx-text); }
.pa-inbox-time { flex: none; font-size: var(--cx-text-meta); color: var(--cx-text-3); font-variant-numeric: tabular-nums; }
.pa-inbox-preview { font-size: var(--cx-text-small); line-height: 1.4; color: var(--cx-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pa-inbox-you { color: var(--cx-text-3); }
.pa-inbox-item.is-unread .pa-inbox-name { font-weight: 700; }
.pa-inbox-item.is-unread .pa-inbox-preview { color: var(--cx-text); }
.pa-inbox-item.is-unread .pa-inbox-time { color: var(--cx-success-text); font-weight: 650; }
.pa-inbox-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; min-height: 20px; }
.pa-inbox-flag { font-size: var(--cx-text-meta); font-weight: 650; color: var(--cx-warning-text); }
.pa-inbox-unread { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--cx-radius-pill); background: var(--cx-success); color: var(--cx-surface); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.pa-state { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--cx-radius-pill); font-size: 12px; font-weight: 650; line-height: 18px; white-space: nowrap; }
.pa-state.is-ok { background: var(--cx-success-soft); color: var(--cx-success-text); }
.pa-state.is-warn { background: var(--cx-warning-soft); color: var(--cx-warning-text); }
.pa-state.is-bad { background: var(--cx-danger-soft); color: var(--cx-danger-text); }
.pa-state.is-info { background: var(--cx-info-soft); color: var(--cx-info-text); }
.pa-state.is-pill { padding: 3px 10px; font-size: var(--cx-text-meta); }
.pa-btn.is-icon { width: max(var(--pa-tap), 32px); padding: 0; justify-content: center; }

.pa-inbox.is-chat .pa-reader { position: relative; }
.pa-inbox.is-chat .pa-reader-head { flex-wrap: nowrap; justify-content: flex-start; gap: var(--pa-s3); padding: var(--pa-s3) var(--pa-s5); border-bottom: 1px solid var(--cx-border-soft); }
.pa-reader-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pa-reader-who h2 { margin: 0; font-size: var(--cx-text-body); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-reader-who .pa-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-inbox.is-chat .pa-reader-head > .pa-actions { flex: none; flex-wrap: nowrap; }
.pa-inbox.is-chat .pa-reader-body { padding: 0; gap: 0; }
.pa-inbox.is-chat .pa-reader-main { gap: var(--pa-s3); padding-bottom: var(--pa-s4); }
.pa-inbox.is-chat .pa-thread { gap: var(--pa-s2); padding: var(--pa-s4) var(--pa-s5); }
.pa-inbox.is-chat .pa-thread:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: -2px; }
.pa-inbox.is-chat .pa-reader-main > :is(.pa-composer, .pa-tpl-composer, .pa-optout-note, .pa-draft) { margin: 0 var(--pa-s5); }
.pa-inbox.is-chat .pa-reader-side { padding: var(--pa-s4); }
.pa-side-close { display: none; }
.pa-who-state { display: none; font-size: 12px; font-weight: 650; }
.pa-who-state.is-ok { color: var(--cx-success-text); }
.pa-who-state.is-warn { color: var(--cx-warning-text); }
.pa-who-state.is-bad { color: var(--cx-danger-text); }
.pa-send { flex: none; }
.pa-composer-fill { flex: 1 1 auto; }
@container (max-width: 480px) {
  .pa-inbox.is-chat .pa-composer .pa-btn-label { display: none; }
  .pa-inbox.is-chat .pa-composer :is([data-ai], [data-tpl]) { width: max(var(--pa-tap), 32px); padding: 0; justify-content: center; }
}

.pa-day { display: flex; justify-content: center; margin: var(--pa-s2) 0 var(--pa-s1); }
.pa-day span { padding: 2px 10px; border-radius: var(--cx-radius-pill); background: var(--cx-surface); border: 1px solid var(--cx-border-soft); font-size: 12px; font-weight: 600; color: var(--cx-text-2); box-shadow: var(--cx-shadow-1); }
.pa-msg.is-chat { align-self: flex-start; max-width: min(560px, 82%); gap: 4px; padding: var(--pa-s2) var(--pa-s3); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-lg) var(--cx-radius-lg) var(--cx-radius-lg) var(--pa-s1); background: var(--cx-surface); box-shadow: var(--cx-shadow-1); }
.pa-msg.is-chat.is-out { align-self: flex-end; border-color: transparent; border-radius: var(--cx-radius-lg) var(--cx-radius-lg) var(--pa-s1) var(--cx-radius-lg); background: var(--cx-success-soft); }
.pa-msg.is-chat.is-failed { border-color: var(--cx-danger); }
.pa-msg.is-chat .pa-msg-body { font-size: var(--cx-text-body); line-height: 1.5; }
.pa-msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 12px; color: var(--cx-text-3); font-variant-numeric: tabular-nums; }
.pa-msg-state { display: inline-flex; align-items: center; gap: 2px; }
.pa-msg-state.is-read { color: var(--cx-success-text); font-weight: 600; }
.pa-msg-state.is-failed { color: var(--cx-danger-text); font-weight: 650; }
.pa-msg-error { margin: 0; font-size: var(--cx-text-meta); color: var(--cx-danger-text); }
.pa-msg.is-chat > .pa-btn { align-self: flex-end; }
.pa-msg-author, .pa-msg-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; color: var(--cx-text-2); }
.pa-file { display: flex; align-items: center; gap: var(--pa-s2); min-width: min(240px, 100%); padding: var(--pa-s2); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-sm); background: var(--cx-surface); }
.pa-file-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--cx-radius-sm); background: var(--cx-surface-2); color: var(--cx-text-2); }
.pa-file-text { display: flex; flex-direction: column; min-width: 0; }
.pa-file-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cx-text-small); }
.pa-file-text span { font-size: var(--cx-text-meta); color: var(--cx-text-3); }

.pa-inbox.is-chat .pa-composer { gap: var(--pa-s2); padding: var(--pa-s2) var(--pa-s2) var(--pa-s2) var(--pa-s3); box-shadow: var(--cx-shadow-1); }
.pa-inbox.is-chat .pa-composer textarea { min-height: 44px; max-height: 200px; resize: none; padding: 10px 4px; font-size: var(--cx-text-body); line-height: 1.5; }
.pa-inbox.is-chat .pa-composer-bar { flex-wrap: nowrap; gap: var(--pa-s2); }
.pa-inbox.is-chat .pa-composer-bar > .pa-actions { flex: none; flex-wrap: nowrap; }
.pa-inbox.is-chat .pa-composer-note { flex: 1 1 auto; min-width: 0; margin: 0; }
.pa-inbox.is-chat .pa-composer-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-tpl-composer { display: flex; flex-direction: column; gap: var(--pa-s3); padding: var(--pa-s3) var(--pa-s4); border: 1px solid var(--cx-border-strong); border-radius: var(--cx-radius-lg); background: var(--cx-surface); box-shadow: var(--cx-shadow-1); }
.pa-tpl-composer form { display: flex; flex-direction: column; gap: var(--pa-s3); }
.pa-tpl-note, .pa-optout-note { display: flex; align-items: flex-start; gap: var(--pa-s2); }
.pa-tpl-note p, .pa-optout-note p { margin: 0; }
.pa-tpl-note .pa-ico { margin-top: 3px; color: var(--cx-warning-text); flex: none; }
.pa-tpl-list { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--pa-s2); }
.pa-tpl-option { display: flex; gap: var(--pa-s2); min-height: 44px; padding: var(--pa-s2) var(--pa-s3); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); cursor: pointer; transition: border-color var(--pa-fast) var(--pa-ease); }
.pa-tpl-option:hover { border-color: var(--cx-border-strong); }
.pa-tpl-option:has(input:checked) { border-color: var(--cx-action); box-shadow: inset 0 0 0 1px var(--cx-action); }
.pa-tpl-option:has(input:focus-visible) { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.pa-tpl-option input { margin-top: 3px; accent-color: var(--cx-action); flex: none; }
.pa-tpl-option > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa-tpl-body { font-size: var(--cx-text-small); color: var(--cx-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pa-tpl-composer .pa-composer-bar { justify-content: space-between; }
.pa-optout-note { padding: var(--pa-s3) var(--pa-s4); border-radius: var(--cx-radius-lg); background: var(--cx-danger-soft); color: var(--cx-danger-text); }
.pa-optout-note .pa-ico { margin-top: 3px; flex: none; }
.pa-draft { display: flex; flex-direction: column; gap: var(--pa-s2); padding: var(--pa-s3); border: 1px dashed var(--cx-border-strong); border-radius: var(--cx-radius-lg); background: var(--cx-surface); }
.pa-draft-head { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--cx-text-meta); font-weight: 650; color: var(--cx-text-2); }
.pa-draft .pa-btn { align-self: flex-start; }

/* The customer column fits beside the chat from 760px of pane; below that it is a drawer the header opens. */
@container (min-width: 760px) {
  .pa-inbox.is-chat [data-side-toggle] { display: none; }
  .pa-inbox.is-chat .pa-reader-side { border-left: 1px solid var(--cx-border-soft); }
}
@container (max-width: 759px) {
  .pa-inbox.is-chat .pa-reader-side { display: none; }
  .pa-inbox.is-chat .pa-reader.show-side .pa-reader-side { display: flex; position: absolute; inset: 0 0 0 auto; z-index: 5; width: min(340px, 92%); overflow-y: auto; background: var(--cx-surface); box-shadow: var(--cx-shadow-3); animation: pa-side-in var(--pa-base) var(--pa-ease); }
  .pa-inbox.is-chat .pa-reader.show-side .pa-side-close { display: inline-flex; align-self: flex-end; }
}
@keyframes pa-side-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (min-width: 901px) {
  .pa-inbox.is-chat { height: clamp(520px, calc(100dvh - var(--pa-top-h) - 150px), 1200px); min-height: 0; }
  .pa-inbox.is-chat .pa-inbox-list, .pa-inbox.is-chat .pa-inbox-items { min-height: 0; max-height: none; }
  .pa-inbox.is-chat .pa-reader { min-height: 0; overflow: hidden; }
  .pa-inbox.is-chat .pa-reader-body { flex: 1 1 auto; min-height: 0; }
  .pa-inbox.is-chat .pa-reader-grid { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .pa-inbox.is-chat .pa-reader-main { min-height: 0; }
  .pa-inbox.is-chat .pa-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .pa-inbox.is-chat .pa-reader-side { position: static; min-height: 0; overflow-y: auto; }
  .pa-inbox.is-chat .pa-tpl-list { max-height: 216px; overflow-y: auto; }
  .pa-inbox.is-chat .pa-day { position: sticky; top: 0; z-index: 1; }
  .pa-inbox.is-chat .pa-thread > :first-child { margin-top: auto; }
}
@media (max-width: 900px) {
  .pa-inbox-screen.is-reading > .pa-head, .pa-inbox-screen.is-reading > .pa-banner { display: none; }
  /* .pa-main is the scroller here, so sticky offsets count from its top, not the window's. */
  .pa-inbox.is-chat .pa-reader-head { position: sticky; top: 0; z-index: 3; background: var(--cx-surface); padding: var(--pa-s2) var(--pa-s3); border-radius: var(--cx-radius) var(--cx-radius) 0 0; }
  .pa-inbox.is-chat .pa-thread { padding: var(--pa-s3); }
  .pa-inbox.is-chat .pa-reader-main > :is(.pa-composer, .pa-tpl-composer, .pa-optout-note, .pa-draft) { margin: 0 var(--pa-s3); }
  .pa-inbox.is-chat .pa-reader-main > :is(.pa-composer, .pa-tpl-composer, .pa-optout-note) { position: sticky; bottom: var(--pa-s2); z-index: 2; box-shadow: var(--cx-shadow-2); }
  .pa-inbox.is-chat .pa-reader.show-side .pa-reader-side { position: fixed; inset: var(--pa-top-h) 0 0 auto; z-index: 60; }
  .pa-msg.is-chat { max-width: 88%; }
}
@media (max-width: 640px) {
  .pa-inbox.is-chat .pa-reader-main > :is(.pa-composer, .pa-tpl-composer, .pa-optout-note) { bottom: calc(var(--pa-tab-h) + var(--pa-safe-bottom) + var(--pa-s2)); }
  .pa-inbox.is-chat .pa-reader.show-side .pa-reader-side { bottom: calc(var(--pa-tab-h) + var(--pa-safe-bottom)); width: 100%; }
  .pa-inbox.is-chat .pa-composer textarea { font-size: 16px; }
  .pa-inbox.is-chat .pa-composer-note { display: none; }
  .pa-inbox.is-chat .pa-composer-bar { justify-content: space-between; }
  /* One header row: back, who (with the window under the name), the actions. */
  .pa-inbox.is-chat .pa-reader-head { gap: var(--pa-s2); padding-left: var(--pa-s1); }
  .pa-inbox.is-chat .pa-reader-head > .pa-avatar, .pa-inbox.is-chat .pa-reader-head .pa-state.is-pill, .pa-inbox.is-chat .pa-back-label { display: none; }
  .pa-inbox.is-chat .pa-back { justify-content: center; min-width: var(--pa-tap); }
  .pa-inbox.is-chat .pa-head-act .pa-btn-label { display: none; }
  .pa-inbox.is-chat .pa-head-act { width: max(var(--pa-tap), 32px); padding: 0; justify-content: center; }
  .pa-who-state { display: block; }
}

/* PA_BIZ_OFFER_V1 (2026-10-30) - a "Choose a business" banner or empty state lists the businesses as buttons (shell.js
   offerBusinesses): the screen is one tap from working. Names wrap rather than run past the edge. */
.pa-biz-offer { display: flex; flex-wrap: wrap; gap: var(--pa-s2); margin-top: var(--pa-s3); }
.pa-empty .pa-biz-offer { justify-content: center; }
.pa-biz-offer .pa-btn { max-width: 100%; white-space: normal; text-align: start; }
.pa-biz-offer .pa-btn > span { overflow-wrap: anywhere; }
.pa-biz-offer .pa-help { flex-basis: 100%; margin: 0; }

/* The assistant launcher holds its badge; its rule lives here because chat.css now loads with the Chat (2026-10-30). */
[data-assistant-open] { position: relative; }

/* UI_SYSTEM_V1 (2026-10-30, docs/frontend/UI-QUALITY-GATE.md) - one height for every single-line control, and a
   button never squeezed below its label. Measured on Contacts: the View select drew 39 px, Save View 30 px, the
   search 34 px, Sort 39 px, a date filter 41 px - each component sized itself (a minimum plus its own padding), so
   one row held four heights. And .pa-btn's min-width replaced flexbox's min-content floor, so a shrinking row cut
   "Save View" to 74 px around a 77 px label. Fields now take --pa-ctl exactly (36 px, 44 px on touch); a small
   button in a filter or tool row takes the same; a button keeps its label and the row wraps instead. :where()
   keeps the field rule at the base rule's weight, so a screen's own height still wins. */
:where(.pa-input:not(textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]), .pa-select:not([multiple]):not([size])) {
  height: var(--pa-ctl); padding-top: 0; padding-bottom: 0;
}
.pa-search input { min-height: 0; height: var(--pa-ctl); padding-top: 0; padding-bottom: 0; }
.pa-btn { flex-shrink: 0; }
/* A date field's last tab stop is the browser's own picker button, inside the field: :focus leaves the field and the
   ring went with it. :focus-within keeps the field's ring while its picker has the focus. */
.pa-input:focus-within { outline: none; border-color: var(--cx-focus); box-shadow: 0 0 0 3px var(--pa-accent-soft); }
.pa-head h1 { flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
/* ROW_LINK_V2: a row link's ::after overlay covers its row or card, and every control in it sits above the overlay -
   the Deals board's and Contacts' stage selects opened the record instead of the menu. The kit lifts them in
   .pa-records; this does it for the shell's rows and cards, at zero weight so a screen's own positioning wins. */
:where(.pa-row, .pa-card, .pa-card-sm, tr) :where(button, select, input, textarea, summary, label, a:not(.pa-row-link)) { position: relative; z-index: 1; }
:where(.pa-toolbar, .pa-filters) .pa-btn.is-sm { min-height: var(--pa-ctl); }   /* the kit's filter rows: kit.css */

/* CONNECT_APPS_RAIL_V2 (2026-10-30) - the sidebar (shell.js): every row keeps its place between the two widths, so
   collapsing moves nothing but the width. An icon sits on x = 36 in both, which is the middle of the 72px rail; a row
   keeps its height; a group's label fades and leaves its hairline; labels stay in the DOM as each row's name. Tokens
   only, transform and opacity only apart from the width itself, and nothing moves under reduced motion. */

/* ---- the width ---------------------------------------------------------------------------- */
@media (max-width: 640px) { .pa-bell .pa-badge { left: auto; right: 0; } }
.pa-more-fields { display: flex; flex-direction: column; gap: var(--pa-s3); }
.pa-more-fields > summary { cursor: pointer; font-weight: 600; }
.pa-select-find { margin-bottom: var(--pa-s1); }
@media (min-width: 1024px) { .pa-shell { transition: grid-template-columns var(--pa-base) var(--pa-ease); } }
@keyframes pa-peek { from { width: var(--pa-rail-w); } }
.pa-shell.is-peek .pa-side { animation: pa-peek var(--pa-base) var(--pa-ease); }

/* ---- what fades when the rail narrows ------------------------------------------------------ */
.pa-brand-text, .pa-user-text, .pa-nav a > span:not(.pa-nav-count), .pa-nav-more > summary > span:not(.pa-nav-count),
.pa-nav-more > summary > .pa-ico:last-child, .pa-user > .pa-ico, .pa-foot-biz > span, .pa-foot-biz > .pa-ico:last-child {
  transition: opacity var(--pa-fast) var(--pa-ease) 70ms;
}
.pa-shell.is-rail :is(.pa-brand-text, .pa-user-text, .pa-nav a > span:not(.pa-nav-count), .pa-nav-more > summary > span:not(.pa-nav-count),
  .pa-nav-more > summary > .pa-ico:last-child, .pa-user > .pa-ico, .pa-foot-biz > span, .pa-foot-biz > .pa-ico:last-child) {
  opacity: 0; transition-delay: 0ms;
}

/* ---- the header ---------------------------------------------------------------------------- */
.pa-side-head { position: relative; min-height: 44px; padding-bottom: var(--pa-s2); --pa-rail-hit: max(var(--pa-tap), 30px); }
.pa-brand-text { white-space: nowrap; }
.pa-brand-text small { line-height: 1.3; }
.pa-brand:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: -2px; }
/* The Connect "C" around a chevron. The button is the target (30px, 44px on touch) and the glyph is what shows: beside
   the name when open; collapsed, a small badge on the logo's upper corner, its C clear of the logo's own. */
.pa-rail-toggle.pa-icon-btn { position: absolute; inset: 0 0 var(--pa-s2) auto; z-index: 2; display: grid; place-items: center; width: var(--pa-rail-hit); height: var(--pa-rail-hit);
  min-width: 0; min-height: 0; margin-block: auto; padding: 0; border: 0; border-radius: var(--cx-radius-sm); background: transparent; color: var(--cx-text-2); box-shadow: none;
  transition: transform var(--pa-base) var(--pa-ease), background-color var(--pa-fast) var(--pa-ease); }
.pa-rail-toggle.pa-icon-btn:hover { background: var(--cx-hover); color: var(--cx-text); }
.pa-rail-toggle.pa-icon-btn:active { transform: none; }
.pa-rail-toggle.pa-icon-btn:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: -2px; }
.pa-rail-c { display: block; width: 24px; height: 24px; box-sizing: border-box; padding: 1px; border-radius: 50%; fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--pa-base) var(--pa-ease), background-color var(--pa-fast) var(--pa-ease), box-shadow var(--pa-fast) var(--pa-ease); }
.pa-rail-c-arc { stroke: var(--cx-accent); }
.pa-rail-c-chev { stroke: currentColor; transform-box: view-box; transform-origin: 12px 12px; transition: transform var(--pa-base) var(--pa-ease); }
.pa-shell.is-rail .pa-rail-c-chev { transform: rotate(180deg); }
.pa-shell.is-rail .pa-brand { padding-right: 0; }
.pa-shell.is-rail .pa-rail-toggle.pa-icon-btn, .pa-shell.is-rail .pa-rail-toggle.pa-icon-btn:active { background: transparent; transform: translate(max(8px, calc((var(--pa-rail-hit) - 30px) / 2 + 6px)), -13px); }
.pa-shell.is-rail .pa-rail-c { transform: scale(.84); background: var(--cx-surface); box-shadow: 0 0 0 1.5px var(--cx-rail), var(--cx-shadow-2); }
.pa-shell.is-rail .pa-rail-toggle.pa-icon-btn:hover .pa-rail-c { background: var(--cx-hover); }

/* ---- rows ------------------------------------------------------------------------------------ */
.pa-nav a, .pa-nav-more > summary { min-height: max(var(--pa-tap), 36px); padding-inline: 11px var(--pa-s2); }
.pa-nav a > .pa-ico, .pa-nav-more > summary > .pa-ico:first-child { flex: none; margin-inline: 4px; transition: color var(--pa-fast) var(--pa-ease); }
.pa-nav a:hover > .pa-ico, .pa-nav-more > summary:hover > .pa-ico { color: var(--cx-text); }
.pa-nav a:focus-visible, .pa-nav-more > summary:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: -2px; }
.pa-nav-group { position: relative; padding: var(--pa-s3) 11px var(--pa-s1); transition: color var(--pa-fast) var(--pa-ease); }
.pa-nav-group::after { content: ""; position: absolute; inset: 62% 12px auto; height: 1px; background: var(--cx-border-soft); opacity: 0; transition: opacity var(--pa-fast) var(--pa-ease); }
.pa-shell.is-rail .pa-nav-group { color: transparent; }
.pa-shell.is-rail .pa-nav-group::after { opacity: 1; }
.pa-shell.is-rail .pa-nav { scrollbar-gutter: auto; scrollbar-width: none; }

/* The four departments, each in its dashboard tone. */
.pa-nav a[data-tone="blue"] { --pa-tone-soft: var(--cx-tone-blue-soft); --pa-tone-ink: var(--cx-tone-blue-ink); }
.pa-nav a[data-tone="amber"] { --pa-tone-soft: var(--cx-tone-amber-soft); --pa-tone-ink: var(--cx-tone-amber-ink); }
.pa-nav a[data-tone="teal"] { --pa-tone-soft: var(--cx-tone-teal-soft); --pa-tone-ink: var(--cx-tone-teal-ink); }
.pa-nav a[data-tone="violet"] { --pa-tone-soft: var(--cx-tone-violet-soft); --pa-tone-ink: var(--cx-tone-violet-ink); }
.pa-nav a[data-tone] > .pa-ico, .pa-nav a[data-tone][aria-current="page"] > .pa-ico, .pa-nav a[data-tone]:hover > .pa-ico { box-sizing: border-box; width: 26px; height: 26px; margin-inline: 0; padding: 4px;
  border-radius: 8px; background: var(--pa-tone-soft); color: var(--pa-tone-ink); }
.pa-nav a[data-tone][aria-current="page"] > .pa-ico { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pa-tone-ink) 45%, transparent); }

/* A folded group: All Tools, a product's groups, Account. Parent, then child, then its screens. */
.pa-nav-more { gap: 0; margin-top: 2px; }
.pa-nav-more > a, .pa-nav-more > .pa-nav-section, .pa-nav-more > .pa-nav-more, .pa-nav-more > .pa-nav-parent { margin-top: 2px; }
.pa-nav-more > summary > span:not(.pa-nav-count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-nav-more[data-nav-more="account"] { margin-top: auto; padding-top: var(--pa-s2); }
.pa-nav-more:has(a[aria-current="page"]) > summary { color: var(--cx-text); font-weight: 650; }
.pa-nav-more:has(a[aria-current="page"]) > summary > .pa-ico:first-child { color: var(--pa-accent); }
.pa-nav-more.is-sub > summary { min-height: max(var(--pa-tap), 30px); gap: var(--pa-s2); padding-left: 15px; color: var(--cx-text-3); font-size: var(--cx-text-meta); font-weight: 600; }
.pa-nav-more.is-sub > a, .pa-nav-more.is-sub > .pa-nav-parent > a { padding-left: var(--pa-s4); font-size: var(--cx-text-small); }
.pa-nav-more.is-sub[open] { padding-bottom: var(--pa-s1); }
.pa-nav-more a[aria-current="page"]::before { left: 0; }
@supports selector(::details-content) {
  .pa-nav { interpolate-size: allow-keywords; }
  .pa-nav-more::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size var(--pa-base) var(--pa-ease), opacity var(--pa-fast) var(--pa-ease), content-visibility var(--pa-base) allow-discrete; }
  .pa-nav-more[open]::details-content { block-size: auto; opacity: 1; }
}
/* Collapsed there is no room for a group: its head stands for it, marks where the person is, and opens the sidebar. */
.pa-shell.is-rail .pa-nav-more > :not(summary) { display: none; }
.pa-shell.is-rail .pa-nav-more:has(a[aria-current="page"]) > summary { background: var(--cx-selected); }

/* ---- counts ---------------------------------------------------------------------------------- */
/* Two kinds, the same shape in both widths: unread (copper) wants reading, work (neutral) is a live figure. A count is
   never drawn at zero, shows 99+ from 100 with the true number in its name, and rolls up to a closed group's head. */
.pa-nav-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; box-sizing: border-box; padding: 0 6px; border-radius: var(--cx-radius-pill);
  background: var(--cx-accent-soft); color: var(--pa-accent-text); font-size: 12px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; transition: transform var(--pa-fast) var(--pa-ease); }
.pa-nav-count.is-work { background: var(--cx-surface-2); box-shadow: inset 0 0 0 1px var(--cx-border); color: var(--cx-text-2); }
.pa-nav-count[hidden] { display: none; }
.pa-nav .pa-nav-count > span[aria-hidden] { overflow: visible; }
.pa-nav-more[open] > summary > .pa-nav-count { display: none; }
.pa-nav-more > summary > .pa-nav-count { margin-left: auto; }
.pa-nav-more > summary > .pa-nav-count + .pa-sr + .pa-ico, .pa-nav-more > summary > .pa-nav-count + .pa-ico { margin-left: var(--pa-s2); }
.pa-shell.is-rail :is(.pa-nav a, .pa-nav-more > summary) > .pa-nav-count { position: absolute; top: 1px; right: 0; width: max-content; min-width: 16px; height: 16px; margin: 0; padding: 0 4px; overflow: visible; box-shadow: 0 0 0 2px var(--cx-rail); }
.pa-shell.is-rail .pa-nav a > .pa-nav-count.is-work { background: var(--cx-action-soft); }
.pa-bell .pa-badge { top: 2px; right: auto; left: 54%; min-width: 18px; box-sizing: border-box; border-radius: var(--cx-radius-pill); font-variant-numeric: tabular-nums; line-height: 18px; }

/* ---- the footer ------------------------------------------------------------------------------ */
.pa-side-foot { gap: 2px; padding-top: var(--pa-s2); }
.pa-foot-biz { display: flex; align-items: center; gap: 10px; width: 100%; min-height: max(var(--pa-tap), 32px); box-sizing: border-box; padding: 0 var(--pa-s2) 0 var(--pa-s4); border: 0; border-radius: var(--cx-radius-sm);
  background: transparent; color: var(--cx-text-2); font: inherit; font-size: var(--cx-text-small); font-weight: 600; text-align: left; }
.pa-foot-biz > .pa-ico { flex: none; color: var(--cx-text-3); }
.pa-foot-biz > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.pa-foot-biz { cursor: pointer; transition: background-color var(--pa-fast) var(--pa-ease), color var(--pa-fast) var(--pa-ease); }
button.pa-foot-biz:hover, button.pa-foot-biz[aria-expanded="true"] { background: var(--cx-hover); color: var(--cx-text); }
button.pa-foot-biz:focus-visible, .pa-user:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: -2px; }
.pa-user { gap: 10px; min-height: max(var(--pa-tap), 44px); }
.pa-user-text { white-space: nowrap; }
.pa-user .pa-avatar { background: var(--cx-action); border-color: var(--cx-action); color: var(--cx-action-ink); }

/* ---- reduced motion ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pa-shell, .pa-rail-toggle.pa-icon-btn, .pa-rail-c, .pa-rail-c-chev, .pa-nav-group, .pa-nav-group::after, .pa-nav-count, .pa-nav-more::details-content,
  .pa-brand-text, .pa-user-text, .pa-nav a > span, .pa-nav-more > summary > span, .pa-nav-more > summary > .pa-ico, .pa-user > .pa-ico, .pa-foot-biz > span, .pa-foot-biz > .pa-ico { transition: none; }
  .pa-shell.is-peek .pa-side { animation: none; }
}

/* CONNECT_APPS_PREFERENCES_V1 (2026-10-30) - a person's display choices (preferences.js sets these on <html>):
   density and text size move the scale's tokens, so every screen follows; a phone keeps its 44px targets and its
   type floor. Reduced motion is the person's own choice, whatever their device says. */
html[data-density="compact"] { --pa-s3: 10px; --pa-s4: 12px; --pa-s5: 16px; --pa-s6: 20px; }
html[data-text-size="large"] { --cx-text-body: 16px; --cx-text-small: 15px; --cx-text-meta: 14px; --cx-text-section: 18px; }
/* Telugu (i18n.js sets <html lang="te">): each device's own Telugu face comes right after Inter, which has no Telugu
   glyphs, so Telugu text never falls to a crude last-resort font. */
html[lang="te"] { --cx-font: "Inter", "Noto Sans Telugu", "Nirmala UI", "Kohinoor Telugu", "Telugu Sangam MN", "Gautami",
  "Segoe UI", Roboto, system-ui, sans-serif; }
/* :not(#_) lifts this above every component's own transition without !important. */
html[data-motion="reduced"]:not(#_) *, html[data-motion="reduced"]:not(#_) *::before, html[data-motion="reduced"]:not(#_) *::after {
  animation-duration: 1ms; animation-delay: 0ms; animation-iteration-count: 1; transition-duration: 1ms; transition-delay: 0ms; scroll-behavior: auto;
}