/* The screen kit's styles - CONNECT_APPS_KIT_V1 (2026-10-22), over apps/shared/app.css.

   The CRM's approved screen pieces, made shared so every product screen (CRM Plus first) draws
   them the same way: values unchanged from apps/crm/crm.css, where they began as `cr-*`. Linked by
   every product page right after app.css; drawn by apps/shared/kit.js and by screens directly.
   Colour only from the theme tokens (--cx-*) and the app's names (--pa-*), so Day and Dark both come
   from connect-theme.css; no !important, no @layer. Every class here is new: nothing restyles a
   class another stylesheet owns, so linking this file changes no screen that does not use it.

   Layout classes as everywhere in /apps: Compact <= 640 px, Medium 641-1179, Expanded >= 1180. */

/* ---- evidence and trust: a word, the colour only repeats it ---------------------------------- */
.pa-ev { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: var(--cx-radius-pill); border: 1px solid var(--cx-border); background: var(--cx-surface); color: var(--cx-text-2); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.pa-ev.is-ok { border-color: transparent; background: var(--cx-success-soft); color: var(--cx-success-text); }
.pa-ev.is-warn { border-color: transparent; background: var(--cx-warning-soft); color: var(--cx-warning-text); }
.pa-ev.is-bad { border-color: transparent; background: var(--cx-danger-soft); color: var(--cx-danger-text); }
.pa-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--pa-s4); }

/* ---- a section's own states, the summary over a list, the controls over the panels ----------- */
.pa-section-error { padding: var(--pa-s3) 0; }
.pa-panel.is-flush > .pa-section-error, .pa-panel.is-flush .pa-section-error { padding: var(--pa-s4); }
.pa-list-sum { margin: 0; padding: var(--pa-s3) var(--pa-s4) 0; color: var(--cx-text-3); font-size: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.pa-panel:not(.is-flush) > .pa-list-sum, .pa-panel:not(.is-flush) .pa-list-sum { padding: 0 0 var(--pa-s2); }
.pa-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pa-s3); margin-bottom: var(--pa-s4); }
.pa-filterbar .pa-meta { margin: 0; }

/* ---- tables: a records table, and one that keeps its columns in its own sideways scroller ----- */
.pa-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-sm); }
.pa-scroll:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
/* Controls inside a row sit above the row's full-row link (.pa-row-link::after). */
.pa-records button, .pa-records input, .pa-records select, .pa-records textarea, .pa-records summary, .pa-records label, .pa-records a:not(.pa-row-link) { position: relative; z-index: 1; }

/* ---- sticky heads: a long table keeps its column names in sight (contract section 3) ----------- */
/* On Medium and up the page scrolls in .pa-main and the page head sticks at its top, so a table's head
   sticks just under it. Only a table that sits straight in a flush panel, or in a plain wrapper or the
   section a page() draws into it, sticks: one inside its own scroller (.pa-scroll, a product's wrapper) would be pushed
   down inside that box by the offset, so it stays as it was. */
/* The offset, --pa-table-top, is set beside that page head in app.css. */
@media (min-width: 641px) {
  .pa-panel.is-flush > .pa-table thead th,
  .pa-panel.is-flush > :is(div:not([class]), [data-section], [data-rows]) > .pa-table thead th { position: sticky; top: var(--pa-table-top, 0px); z-index: 2; box-shadow: inset 0 -1px 0 var(--cx-border-soft); }
}

/* ---- forms: labelled groups, basics first, the rest behind "More options" ------------------------ */
.pa-group { display: flex; flex-direction: column; gap: var(--pa-s4); min-width: 0; margin: 0; padding: 0; border: 0; }
.pa-group + .pa-group { padding-top: var(--pa-s5); border-top: 1px solid var(--cx-border-soft); }
.pa-group > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--pa-s1); font-size: var(--cx-text-section); font-weight: 650; color: var(--cx-text); }
.pa-group > legend + * { clear: both; }
.pa-group-help { margin: calc(-1 * var(--pa-s3)) 0 0; color: var(--cx-text-3); font-size: var(--cx-text-small); }
.pa-more { min-width: 0; border-top: 1px solid var(--cx-border-soft); padding-top: var(--pa-s3); }
.pa-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: max(var(--pa-tap), 32px); cursor: pointer; list-style: none; color: var(--cx-text-2); font-size: var(--cx-text-small); font-weight: 600; }
.pa-more > summary::-webkit-details-marker { display: none; }
.pa-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--pa-fast) var(--pa-ease); }
.pa-more[open] > summary::before { transform: rotate(45deg); }
.pa-more > summary:hover { color: var(--cx-text); }
.pa-more > summary:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; border-radius: var(--cx-radius-sm); }
.pa-more[open] > summary { margin-bottom: var(--pa-s3); }
.pa-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2) var(--pa-s3); padding-top: var(--pa-s2); }
.pa-form-foot .pa-saved { margin-right: auto; }

/* ---- saved, sent: the outcome with the server's evidence (a time, a number), said in words ------- */
.pa-saved { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--cx-text-2); font-size: var(--cx-text-meta); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pa-saved::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-success); }
.pa-saved.is-pending::before { background: var(--cx-text-3); }
.pa-saved.is-bad { color: var(--cx-danger-text); }
.pa-saved.is-bad::before { background: var(--cx-danger); }
.pa-saved:empty { display: none; }

/* ---- tabs over one shared panel; a section nav of links; views as links in a segmented control - */
.pa-tabstrip { display: flex; gap: 2px; margin: calc(-1 * var(--pa-s2)) 0 var(--pa-s4); border-bottom: 1px solid var(--cx-border-soft); overflow-x: auto; scrollbar-width: none; }
.pa-tabstrip::-webkit-scrollbar { display: none; }
.pa-tabstrip [role=tab] { position: relative; min-height: max(var(--pa-tap), 44px); padding: 0 var(--pa-s3); border: 0; background: transparent; color: var(--cx-text-2); font: inherit; font-size: var(--cx-text-small); font-weight: 600; cursor: pointer; white-space: nowrap; }
.pa-tabstrip [role=tab]:hover { color: var(--cx-text); }
.pa-tabstrip [role=tab][aria-selected="true"] { color: var(--cx-text); }
.pa-tabstrip [role=tab][aria-selected="true"]::after { content: ""; position: absolute; left: var(--pa-s2); right: var(--pa-s2); bottom: -1px; height: 2px; border-radius: 2px; background: var(--pa-accent); }
.pa-tabstrip [role=tab]:focus-visible, .pa-tabpanel:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: -2px; }
.pa-tabpanel { min-height: 120px; }
.pa-tabpanel .pa-panel-head h2, .pa-tabpanel > div > h2 { font-size: var(--cx-text-section); }

.pa-sectionnav ul { list-style: none; margin: 0 0 var(--pa-s3); padding: 0; display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--cx-border-soft); }
.pa-sectionnav a { position: relative; display: inline-flex; align-items: center; min-height: max(var(--pa-tap), 40px); padding: 0 var(--pa-s3); color: var(--cx-text-2); font-size: var(--cx-text-small); font-weight: 600; text-decoration: none; }
.pa-sectionnav a:hover { color: var(--cx-text); }
.pa-sectionnav a[aria-current="page"] { color: var(--cx-text); }
.pa-sectionnav a[aria-current="page"]::after { content: ""; position: absolute; left: var(--pa-s2); right: var(--pa-s2); bottom: -1px; height: 2px; border-radius: 2px; background: var(--pa-accent); }
.pa-sectionnav a:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: -2px; }

.pa-views { margin-bottom: var(--pa-s2); }
.pa-views a { display: inline-flex; align-items: center; min-height: max(var(--pa-tap), 30px); padding: 0 12px; border-radius: 5px; color: var(--cx-text-2); font-size: var(--cx-text-small); font-weight: 600; text-decoration: none; }
.pa-views a:hover { color: var(--cx-text); }
.pa-views a[aria-current="page"] { background: var(--cx-surface); color: var(--cx-text); box-shadow: var(--cx-shadow-1); }
.pa-views a:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 1px; }

/* ---- smart filters: search, a fold of filters, the active ones as removable chips ------------ */
.pa-filter-panel { display: grid; gap: var(--pa-s3); }
.pa-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pa-s3); min-width: 0; }
.pa-filter { margin: 0; min-width: 0; }
.pa-filter label { font-size: var(--cx-text-meta); color: var(--cx-text-3); font-weight: 600; }
.pa-filter .pa-select.is-compact, .pa-filter .pa-input.is-compact { min-width: 140px; max-width: 220px; }
.pa-filter-q { flex: 1 1 260px; max-width: 420px; min-width: 0; }
.pa-filter-box { flex-basis: 100%; min-width: 0; }
.pa-filter-box > summary { display: inline-flex; align-items: center; gap: 6px; min-height: max(var(--pa-tap), 32px); cursor: pointer; color: var(--cx-text-2); font-size: var(--cx-text-small); font-weight: 600; }
.pa-filter-box > summary:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; border-radius: var(--cx-radius-sm); }
.pa-filter-box[open] > .pa-filter-row { margin-top: var(--pa-s2); }
.pa-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2); }
.pa-active-filters:empty { display: none; }
.pa-chip-x { display: inline-flex; align-items: center; gap: 6px; min-height: max(var(--pa-tap), 28px); padding: 0 10px; border: 1px solid var(--cx-border); border-radius: var(--cx-radius-pill); background: var(--cx-surface-2); color: var(--cx-text); font: inherit; font-size: var(--cx-text-meta); font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.pa-chip-x:hover { border-color: var(--cx-border-strong); }
.pa-chip-x:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }

/* ---- selection: the row's leading slot becomes the tick (regression contract 13), the bar ---- */
.pa-pick-col { width: 1%; }
.pa-pick, .pa-pick-all { position: relative; display: inline-grid; place-items: center; width: max(var(--pa-tap), 32px); height: max(var(--pa-tap), 32px); cursor: pointer; }
.pa-pick input, .pa-pick-all input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pa-pick-all input { position: static; opacity: 1; width: 16px; height: 16px; accent-color: var(--cx-action); }
.pa-pick .pa-avatar, .pa-pick-tick { grid-area: 1 / 1; }
.pa-pick-tick { display: none; width: 32px; height: 32px; border-radius: 50%; place-items: center; background: var(--cx-action); color: var(--cx-action-ink); }
.pa-pick input:checked ~ .pa-pick-tick { display: grid; }
.pa-pick input:checked ~ .pa-avatar { visibility: hidden; }
.pa-pick input:focus-visible ~ .pa-avatar, .pa-pick input:focus-visible ~ .pa-pick-tick { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.pa-bulkbar { position: sticky; top: var(--pa-s2); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2) var(--pa-s3); margin-bottom: var(--pa-s3); padding: var(--pa-s3) var(--pa-s4); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); background: var(--cx-surface); box-shadow: var(--cx-shadow-2); }
.pa-bulkbar[hidden] { display: none; }
.pa-bulkbar .pa-actions { margin-left: auto; flex-wrap: wrap; }
/* A bulk result is per item (O3): what was skipped, and why, under the count. */
.pa-skipped { margin: var(--pa-s2) 0 var(--pa-s4); padding-left: var(--pa-s5); color: var(--cx-text-2); font-size: var(--cx-text-small); }
.pa-skipped li { overflow-wrap: anywhere; }

/* ---- tags; an input with its button on one line ------------------------------------------------ */
.pa-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: var(--cx-radius-pill); background: var(--cx-surface-2); color: var(--cx-text-2); font-size: 12px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
a.pa-tag:hover { color: var(--cx-text); text-decoration: underline; }
.pa-tags { list-style: none; margin: 0 0 var(--pa-s3); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pa-tags li { display: inline-flex; align-items: center; gap: 2px; }
.pa-tag-x { display: inline-grid; place-items: center; width: max(var(--pa-tap), 24px); height: max(var(--pa-tap), 24px); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cx-text-3); cursor: pointer; }
.pa-tag-x:hover { color: var(--cx-text); background: var(--cx-hover); }
.pa-tag-x:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 1px; }
.pa-inline { display: flex; gap: var(--pa-s2); align-items: center; }
.pa-inline .pa-input { flex: 1; min-width: 0; }

/* ---- a numbered wizard: upload, map, results --------------------------------------------------- */
.pa-wizard { list-style: none; margin: 0 0 var(--pa-s4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--pa-s2); counter-reset: step; }
.pa-wizard li { counter-increment: step; display: inline-flex; align-items: center; gap: 6px; color: var(--cx-text-3); font-size: var(--cx-text-small); font-weight: 600; }
.pa-wizard li::before { content: counter(step); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--cx-border); font-size: 12px; }
.pa-wizard li[aria-current="step"] { color: var(--cx-text); }
.pa-wizard li[aria-current="step"]::before { background: var(--cx-action); border-color: var(--cx-action); color: var(--cx-action-ink); }

/* ---- figures with their evidence; a series as bars --------------------------------------------- */
.pa-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--pa-s3); }
.pa-figure { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pa-figure b { font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pa-figure-label { color: var(--cx-text-2); font-size: var(--cx-text-small); font-weight: 600; }
.pa-figure[data-evidence="estimated"] b { font-weight: 600; }
.pa-chart { margin: 0 0 var(--pa-s3); }
.pa-chart figcaption { display: flex; gap: var(--pa-s2); align-items: baseline; margin-bottom: var(--pa-s2); font-weight: 600; font-size: var(--cx-text-small); }
.pa-chart svg { display: block; width: 100%; height: 160px; }
.pa-chart-bar { fill: var(--pa-chart-1); }
.pa-chart-bar:hover { fill: var(--pa-accent); }
.pa-chart-base { stroke: var(--cx-border); stroke-width: 0.4; vector-effect: non-scaling-stroke; }
.pa-chart-axis { display: flex; justify-content: space-between; color: var(--cx-text-3); font-size: var(--cx-text-meta); font-variant-numeric: tabular-nums; }

/* ---- Compact (<= 640 px): one column, filters stack, the page is the only scroller ------------ */
@media (max-width: 640px) {
  .pa-filter-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .pa-filter-box { flex-basis: auto; }
  .pa-filter-q { flex: none; max-width: none; }
  .pa-filter .pa-select.is-compact, .pa-filter .pa-input.is-compact { width: 100%; max-width: none; min-width: 0; }
  .pa-filter .pa-select, .pa-filter .pa-input, .pa-inline .pa-input { font-size: 16px; }
  .pa-bulkbar { top: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); position: sticky; }
  .pa-bulkbar .pa-actions { margin-left: 0; }
  .pa-figure b { font-size: 20px; }
  .pa-sectionnav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pa-sectionnav a { white-space: nowrap; }
  /* A data table inside its own scroller stays a table (a table may scroll sideways, the page never). */
  .pa-scroll .pa-table { display: table; width: max-content; min-width: 100%; }
  .pa-scroll .pa-table thead { display: table-header-group; }
  .pa-scroll .pa-table tbody { display: table-row-group; }
  .pa-scroll .pa-table tr, .pa-scroll .pa-table tbody tr { display: table-row; padding: 0; }
  .pa-scroll .pa-table td, .pa-scroll .pa-table th { display: table-cell; width: auto; padding: 8px var(--pa-s3); border-bottom: 1px solid var(--cx-border-soft); }
}
@media (any-pointer: coarse) { .pa-sectionnav ul, .pa-tabstrip { overscroll-behavior-x: contain; } }
@media (prefers-reduced-motion: reduce) { .pa-chart-bar { transition: none; } .pa-more > summary::before { transition: none; } }

/* KIT_FILTERS_V2 (2026-10-30, docs/frontend/UI-QUALITY-GATE.md) - a filter set is a grid of equal columns, closed
   until it is used. Each field took its own width (140-220 px by its longest option), so eleven filters drew a
   ragged block that, open by default on every desktop, pushed Contacts' list below the fold. The box now opens when
   a filter is set or the person left it open (kit.filterBoxOpen); the set filters show as chips either way. */
.pa-filter-box > .pa-filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); align-items: end; }
.pa-filter-box .pa-filter .pa-select.is-compact, .pa-filter-box .pa-filter .pa-input.is-compact { width: 100%; min-width: 0; max-width: none; }
/* A small button in a filter row takes the fields' height (UI_SYSTEM_V1): Save View drew 30 px beside 39 px. */
:is(.pa-filter-row, .pa-filterbar) :is(button, a).is-sm { min-height: var(--pa-ctl); }   /* (0,2,1): above .pa-btn.is-sm in app.css */

/* ---- The media viewer (`shared/media-viewer.js`): pictures, video, sound and PDFs, full screen -------------------
   Moved from the Email reader (render.css) when CRM's billing documents needed it too (FB-U6BZW3ZK). */
.pa-viewer {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  margin: 0; padding: 0; border: 0;
  background: var(--cx-overlay);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  color: var(--cx-text); z-index: 10000; overflow: hidden;
  display: flex; flex-direction: column;
}
.pa-viewer::backdrop { background: transparent; }
.pa-viewer-chrome { display: flex; flex-direction: column; width: 100%; height: 100%; }
.pa-viewer-head {
  display: flex; align-items: center; gap: var(--pa-s3); padding: var(--pa-s2) var(--pa-s4);
  background: color-mix(in srgb, var(--cx-surface) 92%, transparent);
  border-bottom: 1px solid var(--cx-border-soft); backdrop-filter: blur(12px);
  z-index: 10;
}
.pa-viewer-tag {
  font-size: 12px; font-weight: 750; padding: 2px 8px; border-radius: 4px;
  background: var(--cx-info-soft); color: var(--cx-info-text);
}
.pa-viewer-tag.is-image { background: var(--cx-accent-soft); color: var(--cx-link); }
.pa-viewer-tag.is-video { background: var(--cx-warning-soft); color: var(--cx-warning-text); }
.pa-viewer-tag.is-audio { background: var(--cx-success-soft); color: var(--cx-success-text); }
.pa-viewer-tag.is-pdf { background: var(--cx-danger-soft); color: var(--cx-danger-text); }
.pa-viewer-title {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 650;
  display: flex; align-items: baseline; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pa-viewer-size { font-size: 12px; color: var(--cx-text-3); font-variant-numeric: tabular-nums; }
.pa-viewer-pos {
  font-size: 12px; font-weight: 650; color: var(--cx-text-2); font-variant-numeric: tabular-nums;
  padding: 2px 8px; background: var(--cx-surface-2); border-radius: 4px; border: 1px solid var(--cx-border-soft);
}
.pa-viewer-acts { display: flex; align-items: center; gap: 4px; }
.pa-viewer-close { color: var(--cx-text); border-radius: var(--cx-radius-sm); }
.pa-viewer-stage {
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: var(--pa-s4); user-select: none;
}
.pa-viewer-viewport {
  max-width: 90vw; max-height: 85vh; display: flex; align-items: center; justify-content: center;
}
.pa-viewer-img {
  max-width: 85vw; max-height: 80vh; object-fit: contain;
  box-shadow: 0 8px 32px var(--cx-shadow-3); border-radius: var(--cx-radius);
  transition: transform 0.15s ease-out;
}
.pa-viewer-video {
  max-width: 85vw; max-height: 80vh; border-radius: var(--cx-radius);
  box-shadow: 0 8px 32px var(--cx-shadow-3);
}
.pa-viewer-audio { width: min(560px, 85vw); }
.pa-viewer-pdf {
  width: 85vw; height: 80vh; border: 1px solid var(--cx-border-soft);
  border-radius: var(--cx-radius); background: var(--cx-surface);
}
.pa-viewer-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--cx-border-soft);
  background: color-mix(in srgb, var(--cx-surface) 90%, transparent); color: var(--cx-text);
  backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer;
  transition: transform var(--pa-fast) var(--pa-ease), background-color var(--pa-fast) var(--pa-ease);
  z-index: 5;
}
.pa-viewer-arrow.is-prev { left: 20px; }
.pa-viewer-arrow.is-next { right: 20px; }
.pa-viewer-arrow:hover:not(:disabled) {
  background: var(--cx-hover);
}
.pa-viewer-arrow:active:not(:disabled) { transform: translateY(-50%) scale(0.94); }
.pa-viewer-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
@media (max-width: 640px) {
  .pa-viewer-arrow { width: 36px; height: 36px; }
  .pa-viewer-arrow.is-prev { left: 8px; }
  .pa-viewer-arrow.is-next { right: 8px; }
}
@media (pointer: coarse) {
  .pa-viewer-acts > * { min-height: var(--pa-ctl); }
}

/* The Connect Assistant's install box (apps/shared/assistant-install.js): Phone Carrier and Marketplaces. */
.pa-install-steps { margin: 0; padding-left: 1.5em; display: grid; gap: var(--pa-s2); }
.pa-install-steps p { margin: 0; overflow-wrap: anywhere; }
.pa-install-steps .pa-actions { margin-top: var(--pa-s1); }
.pa-install-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2); margin-top: var(--pa-s1); }
.pa-install-copy code { padding: 2px 6px; border-radius: 6px; background: var(--cx-surface-2); }