/* SW-C-2026-009 «Контрольный центр параметров». Only tokens from :root (styles.css);
   no new colors, radii or shadows here. */
.pcx { color: var(--text); font-size: var(--font-16); line-height: 1.5; }
.pcx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pcx :focus-visible, .pcx-layer :focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pcx button, .pcx-layer button { font-weight: 600; }

/* toolbar and status */
.pcx-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.pcx-status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-14); font-weight: 400; margin-right: auto; }
.pcx-status.is-failed { color: var(--color-danger-text); }
.pcx-tertiary { width: auto; color: var(--text-secondary); }
.pcx-spinner { width: 14px; height: 14px; border-radius: var(--radius-pill); border: 2px solid var(--line-strong); border-top-color: var(--color-action); animation: pcx-spin 0.8s linear infinite; }
@keyframes pcx-spin { to { transform: rotate(360deg); } }

/* grid */
.pcx-grid { display: grid; gap: var(--space-4); align-items: start; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); }
/* Three columns only when the content area fits a center wider than the sides (see wideFrom in JS). */
.pcx-wide .pcx-grid { grid-template-columns: 320px minmax(400px, 1fr) 320px; }
.pcx-master, .pcx-detail-card, .pcx-aside, .pcx-type-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.pcx-master { display: grid; gap: var(--space-5); }
.pcx-zone { display: grid; gap: var(--space-2); }
.pcx-zone-head, .pcx-detail-head { display: flex; align-items: center; gap: var(--space-2); }
.pcx-zone-title { margin: 0; font-size: var(--font-14); font-weight: 600; color: var(--text-secondary); flex: 1; }
.pcx-detail-head h2 { margin: 0; font-size: var(--font-20); font-weight: 700; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcx-detail-head h2.pcx-clamp { -webkit-line-clamp: 2; }
.pcx-meta, .pcx-note, .pcx-row-meta, .pcx-label { color: var(--text-secondary); font-size: var(--font-14); font-weight: 400; margin: 0; }
.pcx-label { font-weight: 600; }
.pcx-detail-card { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.pcx-master, .pcx-zone, .pcx-detail, .pcx-aside, .pcx-type-card { min-width: 0; }
.pcx-zone, .pcx-master, .pcx-aside { grid-template-columns: minmax(0, 1fr); }

/* lists and rows */
.pcx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); grid-template-columns: minmax(0, 1fr); }
.pcx-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); }
.pcx-row:hover { background: var(--surface-hover); }
.pcx-row.is-selected { background: var(--surface-selected); }
.pcx-row-main, .pcx-name-button, .pcx-title-button { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); border: 0; background: transparent; color: inherit; text-align: left; padding: var(--space-2); border-radius: var(--radius-sm); min-height: 36px; cursor: pointer; font: inherit; }
.pcx-title-button { font-size: inherit; font-weight: 700; padding: 0; }
.pcx-row-body { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
/* Titles keep whole words: break-word does not lower the min-content width (anywhere does),
   so only a word longer than the whole line is split. Badge and meta wrap below the title. */
.pcx-row-title { font-weight: 600; overflow-wrap: break-word; word-break: normal; min-width: 0; }
.pcx-name-button { flex: 0 1 auto; min-width: min(8ch, 100%); }
/* Whole-row buttons (left list, periods) share the line with ⋯/switch: they shrink, never push them down. */
.pcx-row > .pcx-row-main { flex: 1 1 0; min-width: 0; }
.pcx-name-button + .pcx-badge, .pcx-row-body > .pcx-row-meta { flex: none; }
.pcx-row-main .pcx-row-meta { flex-basis: 100%; }
.pcx-row.is-hidden .pcx-row-title { color: var(--text-secondary); }
.pcx-row.is-deleting .pcx-row-title { text-decoration: line-through; color: var(--text-secondary); }
.pcx-type-card.is-deleting h2 { text-decoration: line-through; color: var(--text-secondary); }
.pcx-row > .pcx-note { flex-basis: 100%; padding: 0 var(--space-2) var(--space-2); }
.pcx-row-state { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-14); color: var(--text-secondary); }
.pcx-row-state.is-failed { color: var(--color-danger-text); }
/* Saving / failed / pending-delete states take their own line on every width: the title never shrinks. */
.pcx-row > .pcx-tools, .pcx-row > .pcx-switch { align-self: flex-start; }
.pcx-row > .pcx-row-state, .pcx-row > .pcx-note { flex-basis: 100%; }
.pcx-inline-button { width: auto; min-height: 32px; padding: var(--space-1) var(--space-3); }
.pcx-badge { display: inline-flex; align-items: center; padding: 0 var(--space-2); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); color: var(--text-secondary); font-size: var(--font-12); font-weight: 600; line-height: 1.6; }
.pcx-badge-danger { color: var(--color-danger-text); background: var(--color-danger-soft); border-color: transparent; }

/* icon buttons, ↑↓ visible on hover/focus on desktop */
.pcx-icon { width: 32px; height: 32px; min-width: 32px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text); padding: 0; position: relative; }
.pcx-icon::after { content: ''; position: absolute; inset: -6px; }
.pcx-icon:hover { background: var(--surface-hover); border-color: var(--line); }
.pcx-icon:disabled { color: var(--text-secondary); cursor: not-allowed; }
.pcx-tools { display: inline-flex; gap: var(--space-1); flex: none; }
/* Center rows keep room for ↑/↓ (shown on hover/focus). In the narrow left list they take no room
   until the row is hovered or focused, so titles keep their width; Alt+↑/↓ and ⋯ always work. */
.pcx-desk .pcx-tools [data-act="move"] { visibility: hidden; }
.pcx-desk .pcx-row:hover .pcx-tools [data-act="move"], .pcx-desk .pcx-row:focus-within .pcx-tools [data-act="move"] { visibility: visible; }
/* Left list (Б3): the switch and ⋯ sit in one fixed block at the top right; the title line keeps room
   for it, meta and notes use the full width; nothing appears on hover, so rows never jump. In this
   narrow column order changes via ⋯ (Выше/Ниже/В начало/В конец) and Alt+↑/↓; ↑/↓ are in the center. */
.pcx-master { --pcx-tools-w: var(--space-6); }
.pcx-desk .pcx-master .pcx-tools [data-act="move"] { display: none; }
.pcx-desk .pcx-master .pcx-row > .pcx-tools { position: absolute; top: var(--space-1); right: var(--space-2); }
.pcx-desk .pcx-master .pcx-row > .pcx-switch { position: absolute; top: var(--space-1); right: calc(var(--space-2) + var(--pcx-tools-w) + var(--space-1)); }
.pcx-desk .pcx-master .pcx-row > .pcx-row-main { flex-basis: 100%; }
.pcx-desk .pcx-master .pcx-row-head { padding-right: var(--pcx-tools-w); }
.pcx-desk .pcx-master .pcx-period-row .pcx-row-head { padding-right: calc(var(--pcx-tools-w) + var(--tap) + var(--space-1)); }
.pcx-desk .pcx-master .pcx-none-row > .pcx-icon { position: absolute; top: var(--space-1); right: var(--space-2); }

/* switch */
.pcx-switch { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); border: 0; background: transparent; color: var(--text-secondary); padding: var(--space-1); min-height: 36px; border-radius: var(--radius-pill); font-size: var(--font-14); }
.pcx-switch-track { width: 36px; height: 20px; border-radius: var(--radius-pill); background: var(--switch-track-off); position: relative; flex: none; }
.pcx-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--paper); transition: transform 0.15s; }
.pcx-switch[aria-checked="true"] .pcx-switch-track { background: var(--color-action); }
.pcx-switch[aria-checked="true"] .pcx-switch-track::after { transform: translateX(16px); }

/* forms */
.pcx-add { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.pcx-add input { flex: 1 1 14rem; min-height: var(--tap); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.pcx-add > button, .pcx-editor-actions > button { width: auto; min-height: var(--tap); }
.pcx-add > .pcx-hint, .pcx-add > .pcx-limit { flex-basis: 100%; }
.pcx-add-button, .pcx-restore, .pcx-add-row { width: auto; justify-self: start; min-height: var(--tap); }
.pcx-hint { color: var(--color-danger-text); font-size: var(--font-14); margin: 0; }
.pcx-limit { color: var(--color-warn-text); background: var(--color-warn-soft); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--font-14); margin: 0; }
.pcx-search input { min-height: var(--tap); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.pcx-rename { flex: 1 1 14rem; display: grid; gap: var(--space-1); }
.pcx-rename-input { min-height: 36px; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-weight: 600; }
.pcx-empty { color: var(--text-secondary); font-size: var(--font-14); margin: 0; display: grid; gap: var(--space-2); }
.pcx-empty p { margin: 0; }
.pcx-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pcx-empty-actions .ghost-button { width: auto; min-height: var(--tap); border-color: var(--line); }

/* editor */
.pcx-editor { display: grid; gap: var(--space-4); }
.pcx-field { display: grid; gap: var(--space-2); }
.pcx-field > label, .pcx-weekdays legend { font-size: var(--font-14); font-weight: 600; }
.pcx-field input, .pcx-field select { min-height: var(--tap); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.pcx-stepper { display: inline-flex; align-items: center; gap: var(--space-2); }
.pcx-stepper input { width: 6rem; text-align: center; }
.pcx-stepper .pcx-icon { width: var(--tap); height: var(--tap); border-color: var(--line); }
.pcx-weekdays { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.pcx-segments { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.pcx-segments button { min-width: 0; padding: 0; }
.pcx-segments button { min-height: var(--tap); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--text); }
.pcx-segments [aria-checked="true"] { background: var(--color-action); border-color: var(--color-action); color: var(--paper); }
.pcx-check, .pcx-radio { display: flex; gap: var(--space-2); align-items: flex-start; min-height: var(--tap); padding: var(--space-2) 0; }
.pcx-check input, .pcx-radio input { width: 20px; height: 20px; min-width: 20px; margin: 2px 0 0; }
.pcx-radio + select { margin: 0 0 var(--space-2) calc(20px + var(--space-2)); width: auto; max-width: 100%; min-height: var(--tap); }
.pcx-dist { display: block; color: var(--text-secondary); font-weight: 400; font-size: var(--font-14); }
.pcx-editor-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pcx-rule-preview { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); }
.pcx-rule-preview p { margin: 0; }
.pcx-calendar-label { font-size: var(--font-14); font-weight: 600; color: var(--text-secondary); text-transform: none; }
.pcx-calendar-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.pcx-day { display: grid; justify-items: center; padding: var(--space-1) 0; border-radius: var(--radius-sm); border: 2px solid transparent; font-size: var(--font-14); }
.pcx-day-wd { font-size: var(--font-12); color: var(--text-secondary); }
.pcx-day.is-weekend .pcx-day-wd { font-weight: 700; }
.pcx-day.is-range { background: var(--surface-selected); font-weight: 600; }
.pcx-day.is-today { border-color: var(--color-action); }
.pcx-readonly { display: grid; gap: var(--space-3); }
.pcx-readonly p { margin: 0; }

/* callouts */
.pcx-callout { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--paper); margin-bottom: var(--space-3); }
.pcx-callout p { margin: 0; }
.pcx-callout-danger { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: transparent; }
.pcx-callout-warn, .pcx-callout-conflict { background: var(--color-warn-soft); color: var(--color-warn-text); border-color: transparent; }
.pcx-callout-info { background: var(--surface-hover); }
.pcx-callout-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pcx-callout-actions .ghost-button, .pcx-callout > .ghost-button { width: auto; min-height: var(--tap); border-color: var(--line-strong); color: inherit; }
.pcx-diff { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
.pcx-diff dd { margin: 0; overflow-wrap: anywhere; }

/* preview */
.pcx-aside { display: grid; gap: var(--space-3); position: sticky; top: var(--space-4); }
.pcx-preview-fold { border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: var(--space-4); }
.pcx-preview-fold summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.pcx-preview-card { display: grid; gap: var(--space-3); }
.pcx-preview-card .task-parameter-chip, .pcx-card-after .task-parameter-chip { max-width: 100%; }
.pcx-preview-card .task-parameter-chip strong, .pcx-card-after .task-parameter-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcx-preview-choices { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: var(--space-1); }
.pcx-preview-choices label { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.pcx-preview-choices input { width: auto; }
.pcx-preview-choices span, .pcx-preview-groups li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcx-preview-focus { display: grid; gap: var(--space-3); }
.pcx-preview-focus select { max-width: 100%; }
.pcx-preview-groups { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.task-parameter-chip.is-struck strong { color: var(--text-secondary); }
.pcx-examples { margin: 0; padding-left: var(--space-5); }
.pcx-examples li { overflow-wrap: anywhere; }

/* toast */
.pcx-toast-host { position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: 60; width: min(560px, calc(100vw - var(--space-6))); }
.pcx-toast { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--ink); color: var(--paper); box-shadow: var(--shadow-overlay); }
.pcx-toast p { margin: 0; flex: 1; overflow-wrap: anywhere; }
.pcx-toast-action { border: 1px solid var(--paper); background: transparent; color: var(--paper); border-radius: var(--radius-sm); min-height: var(--tap); padding: 0 var(--space-3); }
.pcx-toast.is-error { background: var(--color-danger-text); }

/* dialogs and sheets */
.pcx-backdrop { position: fixed; inset: 0; z-index: 70; background: var(--line-strong); display: grid; place-items: center; padding: var(--space-4); }
.pcx-dialog { width: min(560px, 100%); max-height: calc(100vh - var(--space-6)); overflow: auto; background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-overlay); padding: var(--space-5); display: grid; gap: var(--space-3); }
.pcx-dialog h2 { margin: 0; font-size: var(--font-20); font-weight: 700; overflow-wrap: anywhere; }
.pcx-dialog p { margin: 0; }
.pcx-dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
.pcx-dialog-actions > button { width: auto; min-height: var(--tap); }
/* Secondary buttons in dialogs, sheets and callouts are real buttons, not links (Б5). */
.pcx-dialog-actions > .ghost-button, .pcx-sheet-name .ghost-button, .pcx-editor-actions > .ghost-button, .pcx-sheet-full > .ghost-button { width: auto; justify-content: center; text-align: center; border: 1px solid var(--line-strong); color: var(--text); font-weight: 600; min-height: var(--tap); }
.pcx-sheet-name .ghost-button:disabled { color: var(--text-secondary); cursor: not-allowed; }
.pcx-actions-note { flex-basis: 100%; text-align: right; }
.pcx-final { font-weight: 700; color: var(--text); }
.pcx-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.pcx-row-head .pcx-badge { flex: none; }
.pcx-row-main .pcx-row-head, .pcx-row-main .pcx-row-meta { flex-basis: 100%; }
.pcx-option-row .pcx-row-body { flex-direction: column; align-items: flex-start; padding-left: var(--space-2); }
.pcx-option-row .pcx-name-button { padding: var(--space-1) 0; max-width: 100%; }
.pcx-option-row .pcx-row-head, .pcx-option-row .pcx-row-meta { max-width: 100%; }
.pcx-option-row > .pcx-tools { align-self: flex-start; }
/* Menus at the button (> 760 px), no dimming (Ж1). */
.pcx-popover-layer { position: fixed; inset: 0; z-index: 70; }
.pcx-popover { position: fixed; width: min(280px, calc(100vw - var(--space-4))); max-height: calc(100vh - var(--space-6)); overflow: auto; padding: var(--space-3); gap: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pcx-dialog h2.pcx-popover-title { font-size: var(--font-14); font-weight: 600; color: var(--text-secondary); }
.pcx-danger-button { border: 0; border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); background: var(--color-danger); color: var(--paper); }
.pcx-danger-button:disabled { background: var(--switch-track-off); cursor: not-allowed; }
.pcx-consequences { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.pcx-menu { display: grid; gap: var(--space-1); }
.pcx-menu hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-4) 0 var(--space-1); width: 100%; }
.pcx-menu-item { min-height: var(--tap); border: 0; background: transparent; color: var(--text); text-align: left; padding: 0 var(--space-3); border-radius: var(--radius-sm); }
.pcx-menu-item:hover { background: var(--surface-hover); }
.pcx-menu-item.is-danger { color: var(--color-danger-text); }
.pcx-keys { margin: 0; padding-left: var(--space-5); }
.pcx-sheet-name { display: grid; gap: var(--space-2); }
.pcx-sheet-name input { min-height: var(--tap); }
.pcx-skeleton { height: var(--tap); border-radius: var(--radius-md); background: var(--surface-hover); margin-bottom: var(--space-2); }

/* narrow: ≤1023 phone-like, content up to 720 */
/* Room for the sticky SW header: banners, rows and the editor scrolled into view stay below it (ТЗ §3.8.8). */
.pcx-root, .pcx-layer { --pcx-sticky-top: calc(var(--space-7) * 3); }
.pcx-callout, .pcx-detail-card, .pcx-row, .pcx-type-card, .pcx-editor .pcx-field { scroll-margin-top: var(--pcx-sticky-top); }
@media (max-width: 900px) { .pcx-root, .pcx-layer { --pcx-sticky-top: calc(var(--space-7) * 2); } }
/* One height for the phone bottom zone (Б12): add button + zone switch. */
.pcx-root, .pcx-layer { --pcx-bottom: calc(var(--tap) * 2 + var(--space-2) * 3 + var(--space-1) * 2 + env(safe-area-inset-bottom)); }
.pcx-narrow { max-width: 720px; margin: 0 auto; padding-bottom: calc(var(--pcx-bottom) + var(--space-4)); }
.pcx-narrow-body { display: grid; gap: var(--space-4); }
.pcx-narrow .pcx-type-card { display: grid; gap: var(--space-2); }
.pcx-narrow .pcx-row { min-height: 52px; }
.pcx-narrow .pcx-icon { width: var(--tap); height: var(--tap); min-width: var(--tap); }
.pcx-narrow .pcx-icon::after { inset: 0; }
.pcx-narrow .pcx-tools { gap: var(--space-2); }
.pcx-narrow .pcx-tools [data-act="move"] { display: none; }
.pcx-narrow .pcx-tools-on [data-act="move"] { display: inline-grid; }
.pcx-narrow .pcx-tools-on [data-act="menu"] { display: none; }
.pcx-narrow .pcx-row { flex-wrap: wrap; }
.pcx-narrow .pcx-period-row .pcx-row-main { flex: 1 1 0; min-width: 0; }
.pcx-narrow .pcx-period-row .pcx-switch { min-height: var(--tap); }
.pcx-narrow .pcx-row > .pcx-note, .pcx-narrow .pcx-row > .pcx-row-state { flex-basis: 100%; }
.pcx-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--paper); border-top: 1px solid var(--line); padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); display: grid; gap: var(--space-2); }
.pcx-bottom-add { display: flex; justify-content: flex-end; }
.pcx-bottom-add .primary-button, .pcx-wide-button { min-height: var(--tap); }
.pcx-wide-button { width: 100%; }
.pcx-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); background: var(--surface-hover); border-radius: var(--radius-md); padding: var(--space-1); }
.pcx-segmented button { min-height: var(--tap); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); }
.pcx-segmented [aria-selected="true"] { background: var(--color-action); color: var(--paper); font-weight: 700; }
.pcx-segmented [aria-selected="true"]:focus-visible, .pcx-segments [aria-checked="true"]:focus-visible { box-shadow: var(--focus-ring); }
.pcx-bottom-form .pcx-add { flex-wrap: nowrap; }
.pcx-bottom-form .pcx-add > .pcx-hint, .pcx-bottom-form .pcx-add > .pcx-limit { display: none; }
.pcx-root:has(.pcx-narrow) + .pcx-layer .pcx-toast-host { bottom: calc(var(--pcx-bottom) + var(--space-2)); }
@media (max-width: 760px) {
  .pcx-inline-button { min-height: var(--tap); }
  .pcx-backdrop { place-items: end stretch; padding: 0; }
  .pcx-sheet { width: 100%; max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
  .pcx-sheet-full { height: 100vh; max-height: 100vh; border-radius: 0; padding: var(--space-3) var(--space-3) calc(var(--space-5) + env(safe-area-inset-bottom)); }
  .pcx-sheet-full .pcx-detail-card { border: 0; padding: 0; background: transparent; }
  .pcx-dialog, .pcx-dialog * { min-width: 0; }
  .pcx-field select, .pcx-field input { max-width: 100%; }
  .pcx-sheet .pcx-dialog-actions { flex-direction: column; flex-wrap: nowrap; }
  .pcx-sheet .pcx-dialog-actions > button { width: 100%; }
  .pcx-sheet-full .pcx-sticky-preview { position: sticky; top: calc(-1 * var(--space-5)); z-index: 1; background: var(--paper); padding-top: var(--space-2); }
  /* While «Название» is being typed the pinned preview folds to one line and never covers the field. */
  .pcx-sheet-full .pcx-editor:has([data-editor="title"]:focus) .pcx-sticky-preview .pcx-rule-preview > :not(:first-child) { display: none; }
  .pcx-sheet-full .pcx-editor:has([data-editor="title"]:focus) .pcx-sticky-preview .pcx-rule-preview > p:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pcx-sheet-full .pcx-editor-actions > button { flex: 1 1 100%; }
  .pcx-sheet .pcx-dialog-actions > .ghost-button { width: 100%; }
  .pcx-sheet-name .ghost-button { width: 100%; }
  .pcx-actions-note { text-align: center; flex-basis: auto; }
  .pcx-sheet-full > .ghost-button { width: 100%; justify-content: flex-start; }
  .pcx-sheet-full .pcx-editor-actions { position: sticky; bottom: calc(-1 * var(--space-5)); background: var(--paper); padding: var(--space-2) 0 env(safe-area-inset-bottom); z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pcx-spinner { animation: none; }
  .pcx-switch-track::after { transition: none; }
}