/* 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-s4);
  --pa-pad: var(--pa-s5);
  --pa-side-w: 248px;
  --pa-rail-w: 72px;
  --pa-top-h: 56px;
  --pa-tab-h: 64px;
  --pa-max: 1280px;
  --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, body { margin: 0; padding: 0; }
html { scroll-padding-top: calc(var(--pa-top-h) + 12px); }
body {
  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; } }

/* ---- shell ------------------------------------------------------------------ */
.pa-shell { display: grid; grid-template-columns: var(--pa-side-w) minmax(0, 1fr); min-height: 100dvh; }
.pa-shell.is-rail { grid-template-columns: var(--pa-rail-w) minmax(0, 1fr); }
.pa-side {
  position: sticky; top: 0; align-self: start; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--cx-rail); border-right: 1px solid var(--cx-border);
  display: flex; flex-direction: column; gap: var(--pa-s3);
  padding: calc(var(--pa-s3) + var(--pa-safe-top)) var(--pa-s3) var(--pa-s4);
}
.pa-side-head { display: flex; align-items: center; gap: var(--pa-s2); min-height: 44px; }
.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 { display: flex; flex-direction: column; gap: 2px; }
.pa-nav-group { color: var(--cx-text-3); font-size: var(--cx-text-meta); font-weight: 600; letter-spacing: .02em; padding: var(--pa-s4) var(--pa-s3) var(--pa-s1); }
.pa-nav a, .pa-side-link {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: max(var(--pa-tap), 36px); 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: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pa-accent); }
.pa-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--pa-s2); padding-top: var(--pa-s3); border-top: 1px solid var(--cx-border-soft); }
.pa-plan-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2); }
.pa-side-foot .pa-plan-line { padding: 0 var(--pa-s3); }
.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-side { padding: 0 var(--pa-s3); }
.pa-business-top { max-width: 240px; }

/* The rail: labels hidden, icons centred; the toggle (desktop) or the band (tablet) chooses it. */
.pa-shell.is-rail .pa-brand-text, .pa-shell.is-rail .pa-nav a span, .pa-shell.is-rail .pa-side-link span,
.pa-shell.is-rail .pa-nav-group, .pa-shell.is-rail .pa-side-foot .pa-plan-line, .pa-shell.is-rail .pa-business-side { display: none; }
.pa-shell.is-rail .pa-side-head { flex-direction: column; }
.pa-shell.is-rail .pa-nav a, .pa-shell.is-rail .pa-side-link { justify-content: center; padding: 0; min-height: 44px; }
.pa-shell.is-rail .pa-nav-group + a { margin-top: var(--pa-s3); }
.pa-shell.is-rail .pa-rail-toggle .pa-ico { transform: rotate(180deg); }
.pa-shell.is-rail .pa-brand { justify-content: center; padding: 0; flex: none; }

.pa-frame { min-width: 0; display: flex; flex-direction: column; }
.pa-topbar {
  position: sticky; top: 0; z-index: 20; 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, 3vw, 32px) 0;
  background: color-mix(in srgb, var(--cx-canvas) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--cx-border-soft);
}
.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; }
.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), 38px); padding: 0 var(--pa-s2) 0 var(--pa-s3);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius); 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; }
.pa-badge { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pa-accent); 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 { min-width: 0; flex: 1; padding: var(--pa-s6) clamp(16px, 3vw, 32px) calc(48px + 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-s5); }
.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, always. */
@media (min-width: 641px) and (max-width: 1179px) {
  .pa-shell, .pa-shell.is-rail { grid-template-columns: var(--pa-rail-w) minmax(0, 1fr); }
  .pa-shell .pa-brand-text, .pa-shell .pa-nav a span, .pa-shell .pa-side-link span, .pa-shell .pa-nav-group,
  .pa-shell .pa-side-foot .pa-plan-line, .pa-shell .pa-business-side, .pa-shell .pa-rail-toggle { display: none; }
  .pa-shell .pa-nav a, .pa-shell .pa-side-link { justify-content: center; padding: 0; min-height: 44px; }
  .pa-shell .pa-nav-group + a { margin-top: var(--pa-s3); }
  .pa-shell .pa-brand { justify-content: center; padding: 0; flex: none; }
  .pa-side-head { justify-content: center; }
  .pa-nav a[aria-current="page"]::before { left: -12px; }
  .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: block; }
  .pa-side {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 50; height: 100dvh;
    transform: translateX(-104%); transition: transform var(--pa-base) var(--pa-ease); box-shadow: var(--cx-shadow-3);
  }
  .pa-shell.is-nav-open .pa-side { transform: none; }
  .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; }
  .pa-searchbar, .pa-business-top, .pa-top-actions [data-products], .pa-top-actions [data-connect-theme-toggle] { 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-main { padding: var(--pa-s4) var(--pa-s4) calc(var(--pa-tab-h) + 28px + var(--pa-safe-bottom)); }
  .pa-view { gap: var(--pa-s4); }
  .pa-lead, .pa-eyebrow { display: none; }
  h1 { font-size: 22px; }
  .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: color-mix(in srgb, var(--cx-surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--cx-border);
  }
  .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 span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pa-tabbar a[aria-current="page"] { color: var(--cx-text); }
  .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 { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pa-s3) var(--pa-s4); }
.pa-head > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; }
.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 { color: var(--cx-text-3); font-size: var(--cx-text-meta); font-weight: 600; letter-spacing: .02em; }
.pa-lead { color: var(--cx-text-2); max-width: 72ch; }
.pa-count { display: inline-flex; vertical-align: middle; align-items: center; min-height: 24px; padding: 0 9px; margin-left: 6px; border-radius: var(--cx-radius-pill); background: var(--cx-surface-2); color: var(--cx-text-2); font-size: var(--cx-text-small); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.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-back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--pa-tap); color: var(--cx-text-2); text-decoration: none; }
.pa-link-btn { font-weight: 600; text-decoration: none; min-height: var(--pa-tap); display: inline-flex; align-items: center; color: var(--cx-text-2); }
.pa-link-btn:hover { color: var(--cx-text); text-decoration: underline; }

/* ---- 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);
  transition: background-color var(--pa-fast) var(--pa-ease), border-color var(--pa-fast) var(--pa-ease), transform var(--pa-fast) var(--pa-ease);
}
.pa-btn:hover { background: var(--cx-hover); color: var(--cx-text); }
.pa-btn:active { transform: translateY(1px); }
.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); 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; }
.pa-seg button:hover { color: var(--cx-text); }
.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-s4); min-width: 0; box-shadow: var(--cx-shadow-1);
}
.pa-panel.is-flush { padding: 0; gap: 0; overflow: hidden; }
.pa-panel-pad { padding: var(--pa-pad); }
.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-s5); min-width: 0; }
.pa-grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--pa-s5); align-items: start; }
.pa-grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--pa-s4); }
@media (max-width: 1023px) { .pa-grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pa-panel { padding: var(--pa-s4); border-radius: var(--cx-radius); } .pa-panel-pad { padding: var(--pa-s4); } }

.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-s4) var(--pa-s6); 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-pad); 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 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); gap: var(--pa-s3); }
.pa-kpi { position: relative; background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); padding: var(--pa-s4); display: flex; flex-direction: column; gap: 4px; min-width: 0; box-shadow: var(--cx-shadow-1); }
.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: 6px; }
.pa-kpi b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.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 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pa-kpi b { font-size: 20px; } .pa-kpi-icon { display: none; } }
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); transform: translateY(-1px); }

.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-s3) var(--pa-s4); 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; }
.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-s3) 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; }

.pa-empty { padding: var(--pa-s8) var(--pa-s4); display: flex; flex-direction: column; gap: var(--pa-s2); align-items: center; text-align: center; }
.pa-empty-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--cx-surface-2); color: var(--cx-text-3); margin-bottom: var(--pa-s2); }
.pa-empty p { color: var(--cx-text-2); max-width: 46ch; }
.pa-empty .pa-actions { justify-content: center; 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; } }
.pa-menu { position: fixed; z-index: 60; 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-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); display: inline-flex; align-items: 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; }
}