/* Composed pages (Shared/PageComposer) and the page designer (Pages/PageDesigner.razor).
   Blocks use the form row grid; Wide / Medium / Narrow follow the PAGE width via container
   queries: Wide >= 992px, Medium 576–991px, Narrow < 576px. Cell variables come from
   PageLayout.CellStyle. */

.pg-page { container-type: inline-size; container-name: pgpage; min-width: 0; color: var(--rz-text-color); }
.pg-sec { position: relative; }
.pg-sec__inner { max-width: var(--pg-max, 1200px); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }

.pg-row { display: flex; flex-wrap: wrap; margin: 0 -10px; row-gap: 20px; align-items: flex-start; }
.pg-break { flex-basis: 100%; height: 0; display: var(--pg-bl, none); }
.pg-cell { position: relative; box-sizing: border-box; padding: 0 10px; min-width: 0; max-width: 100%; flex: var(--pg-fl, 0 0 100%); margin-left: var(--pg-ol, 0); }
@container pgpage (max-width: 991.98px) {
    .pg-cell { flex: var(--pg-fm, 0 0 100%); margin-left: var(--pg-om, 0); }
    .pg-break { display: var(--pg-bm, none); }
}
@container pgpage (max-width: 575.98px) {
    .pg-cell { flex: var(--pg-fs, 0 0 100%); margin-left: var(--pg-os, 0); }
    .pg-break { display: var(--pg-bs, none); }
    .pg-h1 { font-size: 1.9rem; }
}

/* ── Static blocks ───────────────────────────────────────────────────── */
.pg-h { margin: 0; line-height: 1.2; color: inherit; }
.pg-h1 { font-size: 2.6rem; font-weight: 700; }
.pg-h2 { font-size: 1.7rem; font-weight: 600; }
.pg-h3 { font-size: 1.25rem; font-weight: 600; }
.pg-text { margin: 0; white-space: pre-line; line-height: 1.55; }
.pg-text--lead { font-size: 1.2rem; opacity: 0.9; }
.pg-text--small { font-size: 0.85rem; opacity: 0.8; }
.pg-field-label { display: block; font-size: 0.8rem; opacity: 0.7; }
.pg-img { display: block; width: 100%; border-radius: 8px; background: rgba(0, 0, 0, 0.06); }
.pg-img-link { display: block; }
.pg-hr { border: 0; border-top: 1px solid var(--rz-border-color, #e0e0e0); margin: 4px 0; }

.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: 4px; border: 0;
          font: 500 0.9rem var(--rz-text-font-family, inherit); letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.pg-btn--primary { background: var(--rz-primary); color: var(--rz-on-primary, #fff); }
.pg-btn--secondary { background: var(--rz-secondary, #455a64); color: var(--rz-on-secondary, #fff); }
.pg-btn--light { background: var(--rz-base-200, #eceff1); color: var(--rz-text-color); }
.pg-btn--link { background: transparent; color: var(--rz-primary); padding: 0 4px; text-transform: none; letter-spacing: 0; }
.pg-btn:hover { filter: brightness(0.95); text-decoration: none; }
.pg-btn[disabled] { opacity: 0.6; cursor: default; }
.pg-btn .rzi { font-size: 20px; }

.pg-counter { text-align: center; padding: 20px; border-radius: 8px; background: var(--rz-base-100, #f5f7fa); }
.pg-counter__value { font-size: 2.2rem; font-weight: 700; color: var(--rz-primary); }
.pg-counter__label { font-size: 0.95rem; opacity: 0.85; }

.pg-search { position: relative; display: flex; gap: 8px; padding: 8px; border-radius: 8px; background: var(--rz-base-background-color, #fff); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.pg-search__icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--rz-text-tertiary-color, #6b6f76); pointer-events: none; }
.pg-search__input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px 0 40px; border: 1px solid var(--rz-input-border-color, #c4c7cc); border-radius: 4px; font: inherit; color: var(--rz-text-color); background: var(--rz-input-background-color, #fff); }
.pg-search__input:focus { outline: 2px solid var(--rz-primary); outline-offset: -1px; }

.pg-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 90px; padding: 12px;
                  border: 1px dashed var(--rz-border-color, #c4c7cc); border-radius: 8px; color: var(--rz-text-secondary-color); font-size: 0.85rem; text-align: center; }
.pg-placeholder .rzi { font-size: 28px; }

.pg-host { position: relative; }
.pg-host__admin { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* ── Designer chrome ─────────────────────────────────────────────────── */
.pg-page--design .pg-sec { outline: 1px dashed #b0bec5; outline-offset: -1px; padding-top: 34px !important; }
.pg-page--design .pg-sec--sel { outline: 2px solid var(--rz-primary); outline-offset: -2px; }
.pg-sec__tag { position: absolute; top: 6px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; border-radius: 4px;
               background: rgba(255, 255, 255, 0.85); color: #37474f; font: 500 0.75rem var(--rz-text-font-family, inherit); cursor: pointer; }
.pg-sec__tag .rzi { font-size: 16px; }
.pg-sec__tag:hover { background: #fff; color: var(--rz-primary); }

.pg-page--design .pg-row { min-height: 60px; }
.pg-page--design .pg-cell { padding-top: 26px; }
.pg-page--design .pg-cell::before { content: ""; position: absolute; inset: 0 4px; border: 1px solid transparent; border-radius: 6px; pointer-events: none; }
.pg-page--design .pg-cell:hover::before { border-color: #90caf9; }
.pg-page--design .pg-cell--sel::before { border: 2px solid var(--rz-primary); }
.pg-page--design .pg-cell__content { pointer-events: none; user-select: none; }
.pg-cell__chrome { position: absolute; top: 2px; left: 6px; right: 6px; z-index: 2; display: flex; align-items: center; gap: 2px; min-width: 0; }
.pg-cell__grip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 3px; color: #78909c; cursor: grab; }
.pg-cell__grip:hover { background: #eceff1; color: #37474f; }
.pg-cell__grip .rzi { font-size: 18px; }
.pg-cell__tag { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; height: 22px; padding: 0 6px; border: 0; border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
                background: #eceff1; color: #37474f; font: 500 0.72rem var(--rz-text-font-family, inherit); cursor: pointer; }
.pg-cell__tag .rzi { font-size: 14px; }
.pg-cell--dyn > .pg-cell__chrome .pg-cell__tag { background: #fff3e0; color: #bf360c; }
.pg-cell--sel > .pg-cell__chrome .pg-cell__tag { background: var(--rz-primary); color: #fff; }
.pg-cell__edit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border: 1px solid #ffcc80; border-radius: 3px;
                  background: #fff; color: #bf360c; font: 500 0.72rem var(--rz-text-font-family, inherit); cursor: pointer; white-space: nowrap; }
.pg-cell__edit .rzi { font-size: 14px; }
.pg-cell__edit:hover, .pg-cell__edit:focus-visible { background: #fff3e0; border-color: #fb8c00; }
.pg-link { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px; border-radius: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
            font: 500 0.68rem var(--rz-text-font-family, inherit); }
.pg-link .rzi { font-size: 13px; }
.pg-link--set { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.pg-link--use { background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9; }
.pg-page--design .pg-cell--link-set::before { border: 2px dashed #2e7d32; background: rgba(46, 125, 50, 0.04); }
.pg-page--design .pg-cell--link-use::before { border: 2px dashed #1565c0; background: rgba(21, 101, 192, 0.04); }
.pg-tag__aud { margin-left: 4px; padding: 0 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.12); font-size: 0.65rem; }
.pg-handle { position: absolute; top: 50%; width: 9px; height: 34px; margin-top: -17px; border-radius: 4px; background: var(--rz-primary); cursor: ew-resize; z-index: 3; touch-action: none; }
.pg-handle--l { left: 0; }
.pg-handle--r { right: 0; }
.pg-empty { flex: 1 1 100%; margin: 0 10px; padding: 18px; border: 1px dashed #90caf9; border-radius: 6px; background: #f5faff; color: #1565c0; font-size: 0.85rem; text-align: center; }

/* Drop markers and the 12-column guide (classes set by card-designer.js) */
.pg-page--design .cg-drop-before::after,
.pg-page--design .cg-drop-after::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--rz-primary); z-index: 4; }
.pg-page--design .cg-drop-before::after { left: 2px; }
.pg-page--design .cg-drop-after::after { right: 2px; }
.pg-page--design .pg-row.cg-drop-end { box-shadow: inset 0 -3px 0 var(--rz-primary); }
.pg-page--design .cg-dragging { opacity: 0.4; }
.pg-page--design.cg-show-guides .pg-row,
.cg-show-guides .pg-page--design .pg-row {
    background-image: repeating-linear-gradient(to right, rgba(25, 118, 210, 0.07) 0, rgba(25, 118, 210, 0.07) calc(100% / 12 - 20px), transparent calc(100% / 12 - 20px), transparent calc(100% / 12));
    background-origin: content-box; background-clip: content-box; padding: 0 10px;
}

/* ── Page designer layout ────────────────────────────────────────────── */
.pd { display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - 120px); }
.pd__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; background: var(--rz-base-background-color, #fff); border: 1px solid var(--rz-border-color, #e0e0e0); border-radius: 6px; }
.pd__title { display: flex; flex-direction: column; min-width: 0; }
.pd__title b { font-weight: 500; font-size: 1rem; }
.pd__title small { color: var(--rz-text-secondary-color); font-size: 0.75rem; }
.pd__grow { flex: 1 1 12px; }
.pd__body { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.pd__left { flex: 0 1 260px; min-width: 220px; max-width: 300px; display: flex; flex-direction: column; background: var(--rz-base-background-color, #fff); border: 1px solid var(--rz-border-color, #e0e0e0); border-radius: 6px; max-height: calc(100vh - 150px); overflow: auto; }
.pd__center { flex: 999 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pd__right { flex: 0 1 320px; min-width: 270px; max-width: 360px; display: flex; flex-direction: column; gap: 12px; padding: 12px; box-sizing: border-box; background: var(--rz-base-background-color, #fff); border: 1px solid var(--rz-border-color, #e0e0e0); border-radius: 6px; max-height: calc(100vh - 150px); overflow: auto; }
.pd__canvas-info { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--rz-text-secondary-color); }
.pd__viewport { overflow-x: auto; overflow-y: hidden; border-radius: 6px; }
.pd__frame { margin: 0 auto; background: var(--rz-body-background-color, #fff); border: 1px solid var(--rz-border-color, #e0e0e0); border-radius: 6px; overflow: hidden; transform-origin: top left; }
.pd__tabs { display: flex; border-bottom: 1px solid var(--rz-border-color, #e0e0e0); }
.pd__tabs button { flex: 1; height: 42px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--rz-text-secondary-color); font: 500 0.8rem var(--rz-text-font-family, inherit); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.pd__tabs button.on { color: var(--rz-primary); border-bottom-color: var(--rz-primary); }
.pd__pane { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.pd__h { margin: 4px 0 0; font: 500 0.7rem var(--rz-text-font-family, inherit); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rz-text-secondary-color); }
.pd__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pd__tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 4px; border: 1px solid var(--rz-border-color, #e0e0e0); border-radius: 6px;
            background: var(--rz-base-background-color, #fff); color: var(--rz-text-color); font: 0.72rem var(--rz-text-font-family, inherit); text-align: center; cursor: grab; }
.pd__tile:hover { border-color: #90caf9; background: #f5faff; }
.pd__tile .rzi { font-size: 22px; color: #546e7a; }
.pd__tile--dyn .rzi { color: #e65100; }
.pd__tile--dyn::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #e65100; }
.pd__tree { display: flex; flex-direction: column; gap: 1px; }
.pd__node { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 30px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: var(--rz-text-color); font: 0.82rem var(--rz-text-font-family, inherit); text-align: left; cursor: pointer; }
.pd__node:hover { background: var(--rz-base-100, #f5f5f5); }
.pd__node.on { background: #e3f2fd; color: #0d47a1; }
.pd__node .rzi { font-size: 18px; color: #546e7a; }
.pd__node--dyn .rzi { color: #e65100; }
.pd__node small { margin-left: auto; color: var(--rz-text-tertiary-color, #757575); font-size: 0.7rem; white-space: nowrap; }
.pd__node span.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd__box { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--rz-border-color, #e0e0e0); border-radius: 6px; }
.pd__hint { margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--rz-text-secondary-color); }
.pd__key { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--rz-border-color, #e0e0e0); border-radius: 6px; }
.pd__key-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pd__key-head code { flex: 0 0 auto; white-space: nowrap; padding: 1px 6px; border-radius: 4px; background: #eceff1; color: #263238; font-size: 0.8rem; font-weight: 600; }
.pd__key-head small { min-width: 0; margin-left: auto; color: var(--rz-text-tertiary-color, #757575); font-size: 0.7rem; text-align: right; }
.pd__key-role { display: flex; align-items: center; gap: 4px; margin-top: 4px; font: 600 0.68rem var(--rz-text-font-family, inherit); letter-spacing: 0.04em; text-transform: uppercase; }
.pd__key-role .rzi { font-size: 14px; }
.pd__key-role--set { color: #2e7d32; }
.pd__key-role--use { color: #1565c0; }
.pd__linkrow { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 4px 6px; border: 0; border-left: 3px solid transparent; border-radius: 4px; background: transparent; text-align: left; cursor: pointer; font: 0.8rem var(--rz-text-font-family, inherit); color: var(--rz-text-color); }
.pd__linkrow:hover { background: var(--rz-base-100, #f5f5f5); }
.pd__linkrow.on { background: #e3f2fd; }
.pd__linkrow--set { border-left-color: #66bb6a; }
.pd__linkrow--use { border-left-color: #42a5f5; }
.pd__linkrow .rzi { font-size: 16px; color: #546e7a; margin-top: 1px; }
.pd__linkrow .n { display: flex; flex-direction: column; min-width: 0; }
.pd__linkrow .n b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd__linkrow .n b em { font-style: normal; font-weight: 400; color: var(--rz-text-tertiary-color, #757575); }
.pd__linkrow .n small { color: var(--rz-text-secondary-color); font-size: 0.7rem; line-height: 1.3; overflow-wrap: anywhere; }
.pd__linkinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pd__linkinfo small { color: var(--rz-text-secondary-color); font-size: 0.72rem; overflow-wrap: anywhere; }
.pd__set { color: #2e7d32; }
.pd__use { color: #1565c0; }
.pd__tpl { border-color: #ffcc80; background: #fffaf3; }
.pd__tpl-head { display: flex; align-items: center; gap: 8px; }
.pd__tpl-head > .rzi { color: #e65100; }
.pd__tpl-head b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd__tpl-head small { color: var(--rz-text-secondary-color); }
.pd__inline { display: flex; gap: 8px; align-items: flex-end; }
.pd__inline > * { flex: 1 1 0; min-width: 0; }
.pd__filter { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 6px; background: var(--rz-base-100, #f5f7fa); }

/* Record picker block (PagePickerBlock) and its settings in the designer */
.pg-picker { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pd__picker { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pd__picker .rz-fieldset { margin: 0; }
.pd__keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--rz-text-secondary-color); }
.pd__key { border: 1px solid var(--rz-base-400); border-radius: 10px; background: var(--rz-base-background-color, #fff); padding: 1px 8px; font: inherit; font-family: ui-monospace, Consolas, monospace; cursor: pointer; }
.pd__key:hover { border-color: var(--rz-primary); color: var(--rz-primary); }

/* ── Container block (PageContainerBlock): tabs, accordion, wizard, panel ─ */
.pg-box { min-width: 0; }
.pg-box__icon { font-size: 18px; margin-right: 6px; vertical-align: -4px; }
.pg-box .pg-placeholder .rzi { margin: 0; }

.pg-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--rz-base-300, #dfe3e8); }
.pg-tabs__tab { position: relative; min-height: 44px; padding: 0 18px; border: 0; border-radius: 6px 6px 0 0; background: transparent; color: var(--rz-text-secondary-color);
                font-family: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; }
.pg-tabs__tab:hover { color: var(--rz-text-color); background: var(--rz-base-100, #f5f7fa); }
.pg-tabs__tab.is-on { color: var(--rz-primary); }
.pg-tabs__tab.is-on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: var(--rz-primary); }
.pg-tabs__panel { padding: 20px 10px 4px; }

.pg-acc__item { margin-bottom: 8px; border: 1px solid var(--rz-base-300, #dfe3e8); border-radius: 8px; overflow: hidden; background: var(--rz-base-background-color, #fff); }
.pg-acc__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; background: transparent;
                color: var(--rz-text-color); font-family: inherit; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; }
.pg-acc__head:hover { background: var(--rz-base-100, #f5f7fa); }
.pg-acc__chev { color: var(--rz-text-secondary-color); transition: transform 0.15s; }
.pg-acc__item.is-open .pg-acc__chev { transform: rotate(180deg); }
.pg-acc__body { padding: 16px; border-top: 1px solid var(--rz-base-200, #eceff1); }

.pg-steps { display: flex; flex-wrap: wrap; row-gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.pg-steps__item { position: relative; flex: 1 1 0; min-width: 110px; }
.pg-steps__item:not(:first-child)::before { content: ""; position: absolute; top: 20px; left: -50%; right: 50%; height: 2px; background: var(--rz-base-300, #dfe3e8); }
.pg-steps__item.is-on::before,
.pg-steps__item.is-done::before { background: var(--rz-primary); }
.pg-steps__item button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 4px; border: 0; background: transparent;
                         color: var(--rz-text-secondary-color); font-family: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; }
.pg-steps__item button:disabled { cursor: default; }
.pg-steps__num { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
                 background: var(--rz-base-200, #eceff1); color: var(--rz-text-color); font-weight: 600; }
.pg-steps__num .rzi { font-size: 18px; }
.pg-steps__item.is-on button { color: var(--rz-primary); }
.pg-steps__item.is-on .pg-steps__num { background: var(--rz-primary); color: #fff; }
.pg-steps__item.is-done .pg-steps__num { background: var(--rz-primary-light, #90caf9); color: var(--rz-primary-darker, #0d47a1); }
.pg-steps__panel { padding: 8px 10px; }
.pg-steps__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rz-base-200, #eceff1); }
.pg-steps__count { font-size: 0.85rem; color: var(--rz-text-secondary-color); }

.pg-panel { margin-bottom: 12px; border: 1px solid var(--rz-base-300, #dfe3e8); border-radius: 10px; overflow: hidden; background: var(--rz-base-background-color, #fff); }
.pg-panel:last-child, .pg-acc__item:last-child { margin-bottom: 0; }
.pg-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 0 16px; border: 0;
                  border-bottom: 1px solid var(--rz-base-200, #eceff1); background: var(--rz-base-50, #fafbfc); color: var(--rz-text-color);
                  font-family: inherit; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; }
.pg-panel__head--static { cursor: default; }
.pg-panel__body { padding: 16px; }

/* Designer: a container's tabs, steps, titles and panes stay usable; nested blocks keep their own chrome */
.pg-page--design .pg-cell__content--box { pointer-events: auto; user-select: none; }
.pg-page--design .pg-box .pg-row { min-height: 70px; }
.pg-cell--box > .pg-cell__chrome .pg-cell__tag { background: #e8eaf6; color: #283593; }
.pg-cell--box.pg-cell--sel > .pg-cell__chrome .pg-cell__tag { background: var(--rz-primary); color: #fff; }
.pd__noderow { display: flex; align-items: center; gap: 2px; }
.pd__noderow > .pd__node { flex: 1 1 auto; min-width: 0; }
.pd__nodeedit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 4px; background: transparent; color: #e65100; cursor: pointer; }
.pd__nodeedit .rzi { font-size: 17px; }
.pd__nodeedit:hover, .pd__nodeedit:focus-visible { background: #fff3e0; }
.pd__node--pane { cursor: default; color: var(--rz-text-secondary-color); font-size: 0.8rem; }
.pd__node--pane:hover { background: transparent; }

/* ── Choice block: buttons that set a page value ─────────────────────── */
.pg-choice { display: flex; flex-direction: column; gap: 8px; }
.pg-choice__label { font-weight: 600; font-size: 0.9rem; }
.pg-choice__bar { display: flex; flex-wrap: wrap; border: 1px solid var(--rz-border-color, #d0d4d9); border-radius: 8px; overflow: hidden; align-self: flex-start; max-width: 100%; }
.pg-choice__opt { font: inherit; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; min-height: 44px; padding: 0 16px; border: 0; border-right: 1px solid var(--rz-border-color, #d0d4d9); background: var(--rz-base-background-color, #fff); color: var(--rz-text-color, #212121); cursor: pointer; }
.pg-choice__opt:last-child { border-right: 0; }
.pg-choice__opt:hover { background: var(--rz-base-100, #f5f5f5); }
.pg-choice__opt:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: -2px; }
.pg-choice__opt--on, .pg-choice__opt--on:hover { background: var(--rz-primary-lighter, #e3e7fb); color: var(--rz-primary-darker, #2b2f9e); }
.pg-choice__hint { font-size: 0.85rem; color: var(--rz-text-secondary-color, #5f6368); }
.pg-choice--dark .pg-choice__bar { border-color: #3a3f46; }
.pg-choice--dark .pg-choice__opt { background: #23262b; color: #fff; border-right-color: #3a3f46; }
.pg-choice--dark .pg-choice__opt:hover { background: #2f3339; }
.pg-choice--dark .pg-choice__opt--on, .pg-choice--dark .pg-choice__opt--on:hover { background: #fff; color: #15171a; }
.pg-choice--dark .pg-choice__hint { color: #c9cdd2; }

/* ── Stat block ───────────────────────────────────────────────────────── */
.pg-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; background: var(--rz-base-background-color, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); height: 100%; box-sizing: border-box; }
.pg-stat__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rz-text-secondary-color, #5f6368); }
.pg-stat__value { font: 600 1.8rem/1.15 "Source Code Pro", ui-monospace, monospace; }
.pg-stat__record { font-size: 0.95rem; }

/* ── Chart block: dots on two number fields ──────────────────────────── */
.pg-chart { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 10px; background: var(--rz-base-background-color, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.pg-chart__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 0.875rem; color: var(--rz-text-secondary-color, #5f6368); }
.pg-chart__keys { display: flex; flex-wrap: wrap; gap: 14px; }
.pg-chart__keys > span { display: inline-flex; align-items: center; gap: 6px; }
.pg-chart__dot-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.pg-chart__tier--0 { background: #0f7a6c; }
.pg-chart__tier--1 { background: #8a94a6; }
.pg-chart__tier--2 { background: #c2410c; }
.pg-chart__tier--9 { background: #1976d2; }
.pg-chart__scroll { overflow-x: auto; }
.pg-chart__grid { min-width: 640px; padding-top: 14px; display: grid; grid-template-columns: 70px 1fr; grid-template-rows: 1fr 40px; box-sizing: border-box; }
.pg-chart__yaxis, .pg-chart__xaxis { position: relative; font: 500 0.78rem/1 "Source Code Pro", ui-monospace, monospace; color: var(--rz-text-secondary-color, #5f6368); }
.pg-chart__yaxis span { position: absolute; right: 10px; transform: translateY(50%); white-space: nowrap; }
.pg-chart__xaxis span { position: absolute; top: 10px; transform: translateX(-50%); white-space: nowrap; }
.pg-chart__xaxis span:last-child { transform: translateX(-100%); }
.pg-chart__plot { position: relative; border-left: 1px solid #a9afb6; border-bottom: 1px solid #a9afb6; }
.pg-chart__hline { position: absolute; left: 0; right: 0; border-top: 1px dashed #e3e5e8; }
.pg-chart__vline { position: absolute; top: 0; bottom: 0; border-left: 1px dashed #e3e5e8; }
.pg-chart__pt { position: absolute; width: 0; height: 0; }
.pg-chart__dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.pg-chart__dot::before { content: ""; position: absolute; inset: -10px; }
.pg-chart__dot:disabled { cursor: default; }
.pg-chart__dot--picked { left: -11px; top: -11px; width: 22px; height: 22px; border-color: #15171a; }
.pg-chart__tag { position: absolute; left: 16px; top: -30px; z-index: 1; white-space: nowrap; font-size: 0.8rem; font-weight: 600; background: #15171a; color: #fff; padding: 4px 8px; border-radius: 6px; pointer-events: none; }
.pg-chart__axes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 0.85rem; color: var(--rz-text-secondary-color, #5f6368); }
.pg-chart__note { font-size: 0.85rem; color: #8a1c13; }

/* ── Button steps and page actions (PageActionStepsEditor, Page → Page actions) ─ */
.pd__steps { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pd__step { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 6px; background: var(--rz-base-100, #f5f7fa); }
.pd__step-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pd__step-head > .rzi { font-size: 18px; color: #546e7a; }
.pd__step-head b { flex: 1 1 auto; min-width: 0; font-weight: 500; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd__step-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
                background: var(--rz-primary); color: var(--rz-on-primary, #fff); font-size: 0.7rem; font-weight: 600; }
.pd__problem { display: flex; align-items: flex-start; gap: 4px; margin: 0; font-size: 0.75rem; line-height: 1.4; color: #c62828; }
.pd__problem .rzi { flex: 0 0 auto; font-size: 16px; }
.pd__action { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pd__action .rzi { font-size: 18px; color: #546e7a; }
.pd__action .n { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; font-size: 0.82rem; }
.pd__action .n b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd__action .n small { color: var(--rz-text-secondary-color); font-size: 0.7rem; overflow-wrap: anywhere; }
.pd__action--on { padding: 4px; border-radius: 4px; background: #e3f2fd; }

/* ── Wires (page designer Connect mode, js/page-wires.js) ───────────── */
.pg-link--hide { background: #eceff1; color: #37474f; border: 1px solid #cfd8dc; }
.pg-port { position: absolute; top: 50%; z-index: 5; width: 16px; height: 16px; margin-top: -8px; box-sizing: border-box; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.pg-port--out { right: -2px; background: #2e7d32; cursor: crosshair; }
.pg-port--out:hover { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.35); }
.pg-port--in { left: -2px; background: #1565c0; pointer-events: none; display: none; }
.pw-dragging .pg-port--in { display: block; }
.pg-page--connect .pg-cell[data-wire-take].pw-target::before { border: 2px dashed #1565c0; background: rgba(21, 101, 192, 0.08); }
.pg-page--connect .pg-cell.pw-source::before { border: 2px solid #2e7d32; }
.pg-page--connect .pg-cell:not([data-wire-take]).pw-dim { opacity: 0.55; }
.pd__frame { position: relative; }
.pd__wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 6; }
.pd__wires path.pw-line { fill: none; stroke: #78909c; stroke-width: 2.5; stroke-linecap: round; }
.pd__wires path.pw-line.on { stroke: #1565c0; stroke-width: 3.5; }
.pd__wires path.pw-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.pd__wires path.pw-hit:hover + path.pw-line { stroke: #1e88e5; }
.pd__wires path.pw-drag { fill: none; stroke: #1565c0; stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: round; }
.pd__wires .pw-label { font: 500 11px var(--rz-text-font-family, sans-serif); fill: #fff; pointer-events: none; }
.pd__wires rect.pw-label-bg { fill: #78909c; pointer-events: none; }
.pd__wires rect.pw-label-bg.on { fill: #1565c0; }
.pd__connect-hint { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: #263238; color: #fff; font-size: 0.78rem; }
.pd__connect-hint .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.pd__wire-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pd__wire-row .rzi { font-size: 16px; }