/* rumpage components, ported from the design system (design/README.md, direction A · Notizbuch).
   Only tokens from tokens.css — never a raw colour or shadow here. */


/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
:where(a) { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(a):hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-width) solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--paper); }
.rp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rp-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.rp-icon--sm { width: 16px; height: 16px; }
.rp-mono { font-family: var(--font-mono); font-size: 14px; line-height: 20px; }
.rp-muted { color: var(--ink-muted); }
.rp-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.rp-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rp-h { font: 600 18px/24px var(--font-sans); margin: 0; }
.rp-title { font: 500 28px/34px var(--font-serif); margin: 0; }

/* ---------- buttons ---------- */
.rp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 18px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 16px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .12s, border-color .12s; }
.rp-btn:hover { background: var(--surface-sunk); }
.rp-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rp-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.rp-btn--quiet { background: transparent; border-color: transparent; color: var(--ink); }
.rp-btn--quiet:hover { background: var(--surface-sunk); }
.rp-btn--danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.rp-btn--danger:hover { filter: brightness(.92); }
.rp-btn--sm { min-height: var(--control-height-sm); padding: 0 12px; font-size: 15px; }
.rp-btn--icon { padding: 0; width: var(--control-height); }
.rp-btn--sm.rp-btn--icon { width: var(--control-height-sm); }
.rp-btn[disabled], .rp-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.rp-btn[aria-busy="true"] .rp-btn__label::after { content: "…"; }
.rp-btn--publish { min-height: 40px; }

/* ---------- fields ---------- */
.rp-field { display: flex; flex-direction: column; gap: var(--space-2); }
.rp-field__label { font: 600 15px/20px var(--font-sans); color: var(--ink); display: flex; gap: var(--space-2); align-items: baseline; }
.rp-field__opt { font-weight: 400; color: var(--ink-muted); font-size: 14px; }
.rp-field__help { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.rp-field__error { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--danger-ink); font-weight: 600; margin: 0; }
.rp-field__count { font: 500 13px/18px var(--font-sans); color: var(--ink-faint); margin-left: auto; }
.rp-field--error .rp-input { border-color: var(--danger-ink); border-width: 2px; padding-left: 11px; }

.rp-input { width: 100%; min-height: var(--control-height); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-sans); }
.rp-input::placeholder { color: var(--ink-faint); }
.rp-input:disabled, .rp-input[readonly] { background: var(--surface-sunk); }
textarea.rp-input { min-height: 104px; resize: vertical; }
.rp-input--title { font: 500 28px/34px var(--font-serif); padding: 8px 12px; border-color: transparent; background: transparent; }
.rp-input--title:hover { border-color: var(--line); }
.rp-input--title:focus { border-color: var(--line-strong); background: var(--surface); }
.rp-input--mono { font-family: var(--font-mono); font-size: 15px; }
.rp-prefix { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.rp-prefix__pre { display: flex; align-items: center; padding: 0 0 0 12px; color: var(--ink-muted); font-family: var(--font-mono); font-size: 15px; white-space: nowrap; }
.rp-prefix .rp-input { border: 0; padding-left: 2px; }
.rp-prefix:focus-within { outline: var(--focus-width) solid var(--ink); outline-offset: 2px; }
.rp-prefix .rp-input:focus-visible { outline: none; box-shadow: none; }

.rp-select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* checkbox / radio */
.rp-check { display: inline-flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; font-size: 16px; line-height: 24px; }
.rp-check input { appearance: none; margin: 2px 0 0; width: 20px; height: 20px; flex: none; border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: var(--radius-sm); display: grid; place-content: center; cursor: pointer; }
.rp-check input[type="radio"] { border-radius: 50%; }
.rp-check input:checked { background: var(--ink); border-color: var(--ink); }
.rp-check input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--paper); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.rp-check input[type="radio"]:checked { background: var(--surface); border: 6px solid var(--ink); }
.rp-check__hint { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* toggle: the switch carries "An/Aus" text so state isn't colour-only */
.rp-toggle { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.rp-toggle input { appearance: none; margin: 0; width: 44px; height: 26px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--surface-sunk); position: relative; cursor: pointer; flex: none; transition: background-color .15s; }
.rp-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink-muted); transition: transform .15s, background-color .15s; }
.rp-toggle input:checked { background: var(--ink); border-color: var(--ink); }
.rp-toggle input:checked::after { transform: translateX(18px); background: var(--paper); }
.rp-toggle__state { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); min-width: 2.5em; }

/* choice as segmented control (≤4 options) */
.rp-segment { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.rp-segment label { position: relative; }
.rp-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rp-segment span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; font-weight: 600; font-size: 15px; border-left: 1px solid var(--line); }
.rp-segment label:first-child span { border-left: 0; }
.rp-segment input:checked + span { background: var(--ink); color: var(--paper); }
.rp-segment input:focus-visible + span { outline: var(--focus-width) solid var(--ink); outline-offset: -4px; box-shadow: inset 0 0 0 4px var(--paper); }

/* ---------- form sheet & sections ---------- */
.rp-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sheet); padding: var(--space-6); }
.rp-section { display: flex; flex-direction: column; gap: var(--space-5); }
.rp-section + .rp-section { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.rp-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.rp-section__head p { margin: 4px 0 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
details.rp-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); }
details.rp-section > summary::-webkit-details-marker { display: none; }
details.rp-section > summary .rp-icon { transition: transform .15s; }
details.rp-section[open] > summary .rp-icon { transform: rotate(90deg); }

/* ---------- repeater ---------- */
.rp-repeater { display: flex; flex-direction: column; gap: var(--space-3); }
.rp-rep-row { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.rp-rep-row__head { display: flex; align-items: center; gap: var(--space-2); padding: 4px 4px 4px 8px; background: var(--surface-sunk); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.rp-rep-row:not([open]) .rp-rep-row__head, .rp-rep-row--closed .rp-rep-row__head { border-radius: var(--radius-md); }
.rp-rep-row__grip { cursor: grab; color: var(--ink-muted); display: inline-flex; padding: 6px 2px; }
.rp-rep-row__num { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); width: 1.5em; text-align: right; }
.rp-rep-row__title { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-rep-row__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.rp-rep-row--dragging { box-shadow: var(--shadow-float); transform: rotate(-.6deg); }
.rp-rep-add { align-self: flex-start; }

/* ---------- link field ---------- */
.rp-link { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.rp-link__target { display: flex; align-items: center; gap: var(--space-3); padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-sunk); }
.rp-link__target-text { flex: 1; min-width: 0; }
.rp-link__target-text strong { display: block; }

/* ---------- rich text ---------- */
.rp-rte { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.rp-rte__bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.rp-rte__btn { min-width: var(--control-height-sm); height: var(--control-height-sm); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; font: 600 14px/1 var(--font-sans); padding: 0 8px; }
.rp-rte__btn:hover { background: var(--surface-sunk); }
.rp-rte__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rp-rte__sep { width: 1px; background: var(--line); margin: 6px 4px; }
.rp-rte__content { padding: 12px 14px; min-height: 140px; font-size: 16px; line-height: 26px; }
.rp-rte__content p { margin: 0 0 12px; }
.rp-rte__content h3 { font: 600 18px/24px var(--font-sans); margin: 16px 0 8px; }
.rp-rte__content ul { margin: 0 0 12px; padding-left: 22px; }

/* ---------- badges & status ---------- */
.rp-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px 8px; border-radius: var(--radius-sm); font: 500 13px/20px var(--font-sans); border: 1px solid transparent; white-space: nowrap; }
.rp-badge .rp-icon { width: 14px; height: 14px; stroke-width: 2; }
.rp-badge--draft { color: var(--draft-ink); border: 1px dashed var(--line-strong); background: transparent; }
.rp-badge--hidden { color: var(--ink-muted); background: var(--surface-sunk); }
.rp-badge--published { color: var(--success-ink); background: var(--success-soft); }
.rp-badge--changed { color: var(--accent-ink); background: var(--accent-soft); }
.rp-badge--error { color: var(--danger-ink); background: var(--danger-soft); }
.rp-badge--template { color: var(--ink-muted); border-color: var(--line); background: var(--surface); }
.rp-badge--role { color: var(--ink); background: var(--surface-sunk); }
.rp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.5px var(--accent-ink); flex: none; }

/* save-state chip: the always-visible "where am I" line */
.rp-savestate { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); font: 500 13px/18px var(--font-sans); color: var(--ink-muted); padding: 5px 10px 5px 8px; border-radius: var(--radius-pill); background: var(--surface-sunk); }
.rp-savestate--dirty { color: var(--accent-ink); background: var(--accent-soft); }
.rp-savestate--saved { color: var(--success-ink); }
.rp-savestate--error { color: var(--danger-ink); background: var(--danger-soft); }
.rp-savestate .rp-icon { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- notices / flash / toast ---------- */
.rp-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); font-size: 15px; line-height: 22px; border: 1px solid transparent; }
.rp-notice .rp-icon { margin-top: 1px; }
.rp-notice__body { flex: 1; min-width: 0; }
.rp-notice__body strong { display: block; }
.rp-notice__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.rp-notice--info { background: var(--info-soft); color: var(--info-ink); }
.rp-notice--info .rp-notice__body { color: var(--ink); }
.rp-notice--success { background: var(--success-soft); color: var(--success-ink); }
.rp-notice--success .rp-notice__body { color: var(--ink); }
.rp-notice--warning { background: var(--accent-soft); color: var(--accent-ink); }
.rp-notice--warning .rp-notice__body { color: var(--ink); }
.rp-notice--error { background: var(--danger-soft); color: var(--danger-ink); }
.rp-notice--error .rp-notice__body { color: var(--ink); }
.rp-toast { display: flex; gap: var(--space-3); align-items: center; padding: 12px 12px 12px 16px; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); border: 1px solid var(--line); font-size: 15px; max-width: 420px; }
.rp-toast__icon--success { color: var(--success-ink); }
.rp-toast__icon--error { color: var(--danger-ink); }
.rp-toast__text { flex: 1; }

/* ---------- dialog ---------- */
.rp-scrim { position: absolute; inset: 0; background: var(--scrim); display: grid; place-items: center; padding: var(--space-4); }
.rp-dialog { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: var(--space-5); width: min(440px, 100%); border: 1px solid var(--line); }
.rp-dialog h2 { font: 600 18px/24px var(--font-sans); margin: 0 0 var(--space-2); }
.rp-dialog p { margin: 0 0 var(--space-3); color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.rp-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap-reverse; }

/* ---------- empty state ---------- */
.rp-empty { text-align: center; padding: var(--space-7) var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-muted); }
.rp-empty__icon { width: 32px; height: 32px; color: var(--ink-muted); stroke-width: 1.5; }
.rp-empty h3 { font: 500 22px/28px var(--font-serif); color: var(--ink); margin: var(--space-3) 0 var(--space-2); }
.rp-empty p { margin: 0 auto var(--space-5); max-width: 36ch; font-size: 15px; line-height: 22px; }

/* ---------- tabs & language switch ---------- */
.rp-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--line); overflow-x: auto; }
.rp-tab { position: relative; padding: 10px 0 12px; font-weight: 600; color: var(--ink-muted); text-decoration: none; background: none; border: 0; font-size: 16px; font-family: inherit; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.rp-tab[aria-selected="true"], .rp-tab[aria-current="page"] { color: var(--ink); }
.rp-tab[aria-selected="true"]::after, .rp-tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ink); border-radius: 2px 2px 0 0; }
.rp-lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-sunk); }
.rp-lang a, .rp-lang button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; border-radius: var(--radius-pill); font: 600 13px/1 var(--font-sans); letter-spacing: .04em; color: var(--ink-muted); text-decoration: none; border: 0; background: none; cursor: pointer; }
.rp-lang [aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sheet); }
.rp-lang .rp-lang__missing { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------- breadcrumb ---------- */
.rp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; padding: 0; list-style: none; }
.rp-crumbs a { color: var(--ink-muted); text-decoration: none; }
.rp-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.rp-crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.rp-crumbs li + li::before { content: "/"; color: var(--line-strong); }
.rp-crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- top bar ---------- */
.rp-topbar { height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-4) 0 var(--space-5); border-bottom: 1px solid var(--line); background: var(--paper); }
.rp-wordmark { font: 600 17px/1 var(--font-sans); letter-spacing: -.01em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; }
.rp-wordmark b { font-weight: 600; color: var(--accent-ink); }
.rp-site-switch { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 10px; border-radius: var(--radius-md); border: 1px solid transparent; background: none; color: var(--ink); font: 600 15px/20px var(--font-sans); cursor: pointer; min-width: 0; }
.rp-site-switch:hover { border-color: var(--line); background: var(--surface); }
.rp-site-switch__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-topbar__sep { width: 1px; height: 24px; background: var(--line); }
.rp-topbar__spacer { flex: 1; }
.rp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-sunk); color: var(--ink); display: inline-grid; place-items: center; font: 600 13px/1 var(--font-sans); border: 1px solid var(--line); flex: none; }

/* ---------- page tree ---------- */
.rp-tree { list-style: none; margin: 0; padding: 0; }
.rp-tree .rp-tree { padding-left: 28px; position: relative; }
.rp-tree .rp-tree::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 22px; border-left: 1px solid var(--line); }
.rp-tree-row { display: flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 4px 8px 4px 4px; border-radius: var(--radius-md); position: relative; }
.rp-tree-row:hover { background: var(--surface-sunk); }
.rp-tree-row__grip { color: var(--ink-muted); cursor: grab; display: inline-flex; padding: 6px 2px; opacity: .6; }
.rp-tree-row:hover .rp-tree-row__grip, .rp-tree-row:focus-within .rp-tree-row__grip { opacity: 1; }
.rp-tree-row__toggle { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 0; background: none; color: var(--ink-muted); border-radius: var(--radius-sm); cursor: pointer; padding: 0; }
.rp-tree-row__toggle[aria-expanded="true"] .rp-icon { transform: rotate(90deg); }
.rp-tree-row__toggle--none { visibility: hidden; }
.rp-tree-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 4px 0; }
.rp-tree-row__title { font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); }
.rp-tree-row__addr { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-tree-row__meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rp-tree-row__actions { display: flex; gap: 2px; opacity: 0; }
.rp-tree-row:hover .rp-tree-row__actions, .rp-tree-row:focus-within .rp-tree-row__actions { opacity: 1; }
.rp-tree-row--current { background: var(--accent-soft); }
.rp-tree-row--current .rp-tree-row__title { color: var(--accent-ink); }
.rp-tree-row--dragging { background: var(--surface); box-shadow: var(--shadow-float); transform: rotate(-.6deg); }
.rp-tree-row--ghost { opacity: .35; }
.rp-tree-drop { height: 0; border-top: 2px solid var(--ink); position: relative; margin: 6px 0 6px 36px; }
.rp-tree-drop::before { content: ""; position: absolute; left: -6px; top: -5px; width: 8px; height: 8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.rp-tree-row--drop-into { outline: 2px dashed var(--ink); outline-offset: -2px; background: var(--accent-soft); }

/* ---------- edit screen layout ---------- */
.rp-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); align-items: start; }
.rp-edit__form { max-width: var(--measure); width: 100%; justify-self: end; }
.rp-edit__head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.rp-preview { position: sticky; top: var(--space-5); background: var(--surface-sunk); border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.rp-preview__bar { display: flex; align-items: center; gap: var(--space-2); padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); }
.rp-preview__frame { background: var(--preview-ground); margin: 12px; border-radius: 6px; box-shadow: var(--shadow-sheet); overflow: hidden; }
.rp-actionbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-5); background: var(--paper); border-top: 1px solid var(--line); }

/* ---------- lists (users, activity, history) ---------- */
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-list > li { display: flex; align-items: center; gap: var(--space-3); padding: 14px 0; border-bottom: 1px solid var(--line); }
.rp-list > li:last-child { border-bottom: 0; }
.rp-list__main { flex: 1; min-width: 0; }
.rp-list__main strong { font-weight: 600; }
.rp-list__meta { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---------- media ---------- */
.rp-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
.rp-media { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.rp-media__thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--surface-sunk); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; color: var(--ink-muted); }
.rp-media__name { font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-media__meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: flex; gap: 6px; align-items: center; }
.rp-dropzone { border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; color: var(--ink-muted); }
.rp-dropzone--active { border-color: var(--ink); background: var(--accent-soft); color: var(--ink); }

/* ---------- phone ---------- */
@media (max-width: 720px) {
  .rp-edit { grid-template-columns: 1fr; padding: var(--space-4); }
  .rp-preview { position: static; }
  .rp-sheet { padding: var(--space-4); border-radius: var(--radius-md); }
  .rp-topbar { padding: 0 var(--space-2) 0 var(--space-4); gap: var(--space-2); }
  .rp-tree-row__actions { opacity: 1; }
  .rp-tree-row__meta .rp-badge--template { display: none; }
}

/* ---------- side tree (edit screen, left column) ---------- */
.rp-edit--tree { grid-template-columns: 248px minmax(0, 1fr) minmax(0, 1fr); }
.rp-edit--tree .rp-edit__form { justify-self: stretch; }
.rp-sidetree { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); padding-right: var(--space-3); border-right: 1px solid var(--line); min-height: 60vh; }
.rp-sidetree__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 4px 8px; }
.rp-sidetree__title { font: 600 15px/20px var(--font-sans); color: var(--ink); text-decoration: none; }
.rp-sidetree__title:hover { text-decoration: underline; }
.rp-sidetree__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.rp-sidetree__hidden { color: var(--ink-muted); display: inline-flex; }
.rp-tree--compact .rp-tree-row { min-height: 40px; padding: 0 6px 0 4px; gap: 2px; }
.rp-tree--compact .rp-tree-row__grip, .rp-tree--compact .rp-tree-row__addr, .rp-tree--compact .rp-badge--template, .rp-tree--compact .rp-tree-row__actions { display: none; }
.rp-tree--compact .rp-tree-row__main { padding: 8px 0; }
.rp-tree--compact .rp-tree-row__title { font-weight: 500; font-size: 15px; }
.rp-tree--compact .rp-tree-row--current .rp-tree-row__title { font-weight: 600; }
.rp-tree--compact .rp-tree-row__toggle { width: 22px; }
.rp-tree--compact .rp-tree { padding-left: 18px; }
.rp-tree--compact .rp-tree::before { left: 14px; bottom: 20px; }
.rp-tree--compact .rp-badge { padding: 0 6px; font-size: 12px; line-height: 18px; }
@media (max-width: 1279px) {
  .rp-edit--tree { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rp-edit--tree .rp-sidetree { display: none; }
}

/* =====================================================================
   App additions: pieces the real app needs beyond the design previews.
   Same rules: tokens only.
   ===================================================================== */

/* ---------- basics the components rely on ---------- */
[hidden] { display: none !important; }
a.rp-site-switch, a.rp-btn { text-decoration: none; }

/* ---------- layout shells ---------- */
.rp-screen { max-width: 1240px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-8); }
.rp-screen--narrow { max-width: 760px; }
.rp-screen__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.rp-screen__intro { margin: 0 0 var(--space-5); color: var(--ink-muted); font-size: 15px; line-height: 22px; }
@media (max-width: 720px) { .rp-screen { padding: var(--space-5) var(--space-4) var(--space-7); } }

/* ---------- top bar: areas and account menu ---------- */
.rp-areas { display: flex; gap: 4px; }
.rp-areas [aria-current="page"] { background: var(--surface-sunk); }
.rp-site-name { font: 600 15px/20px var(--font-sans); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 720px) {
  .rp-areas, .rp-topbar__sep, .rp-topbar .rp-badge--changed { display: none; }
}

/* ---------- menus (details/summary, no JS needed) ---------- */
.rp-menu { position: relative; }
.rp-menu > summary { list-style: none; cursor: pointer; }
.rp-menu > summary::-webkit-details-marker { display: none; }
.rp-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; display: flex; flex-direction: column; padding: 4px; margin: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.rp-menu__list form { margin: 0; }
.rp-menu__item { display: flex; width: 100%; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: 400 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; text-align: left; white-space: nowrap; }
.rp-menu__item:hover { background: var(--surface-sunk); }
.rp-menu__item[disabled] { color: var(--ink-faint); cursor: not-allowed; background: none; }
.rp-menu__sep { height: 1px; background: var(--line); margin: 4px 0; }
.rp-menu__note { padding: 6px 10px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* ---------- dialog (native <dialog>) ---------- */
dialog.rp-dialog { position: fixed; margin: auto; color: var(--ink); }
dialog.rp-dialog::backdrop { background: var(--scrim); }

/* ---------- toasts ---------- */
.rp-toasts { position: fixed; left: var(--space-5); bottom: var(--space-5); z-index: 50; display: flex; flex-direction: column; gap: var(--space-2); }
.rp-toast { animation: rp-toast-in .15s ease-out; }
@keyframes rp-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 720px) { .rp-toasts { left: var(--space-4); right: var(--space-4); bottom: calc(var(--control-height) + var(--space-6)); align-items: center; } }

/* ---------- notices: field links ---------- */
.rp-notice__list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px var(--space-3); }
.rp-notice + .rp-notice, .rp-notice + .rp-sheet, .rp-notices { margin-bottom: var(--space-4); }
.rp-notices { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------- conflict comparison ---------- */
.rp-diff { margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.rp-diff__row { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.rp-diff del { color: var(--ink-muted); }
.rp-diff ins { text-decoration-thickness: 2px; }
.rp-diff__who { display: block; font-size: 13px; color: var(--ink-muted); }

/* ---------- edit screen: preview frame, toggles, drawer ---------- */
.rp-preview__iframe { display: block; width: 100%; height: calc(100vh - var(--topbar-height) - 140px); min-height: 420px; border: 0; background: var(--preview-ground); }
.rp-preview--phone .rp-preview__frame { width: 390px; max-width: calc(100% - 24px); margin: 12px auto; }
.rp-preview__note { margin: 0 14px 12px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.rp-actionbar--sheet { margin-top: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); z-index: 10; }
.rp-edit__preview-toggle, .rp-edit__tree-toggle { display: none; }
.rp-edit__title { margin: -8px -12px 0; width: calc(100% + 24px); }
@media (max-width: 1279px) {
  .rp-edit__tree-toggle { display: inline-flex; }
  .rp-edit--tree .rp-sidetree.rp-sidetree--open { display: flex; position: fixed; z-index: 40; top: var(--topbar-height); left: 0; bottom: 0; width: 300px; overflow: auto; padding: var(--space-4); background: var(--surface); box-shadow: var(--shadow-float); border-right: 1px solid var(--line); }
}
@media (max-width: 1099px) {
  .rp-edit--tree { grid-template-columns: minmax(0, 1fr); }
  .rp-edit__form { justify-self: center; }
  .rp-edit__preview-toggle { display: inline-flex; }
  .rp-edit .rp-preview { display: none; position: static; }
  .rp-edit--show-preview .rp-preview { display: flex; }
  .rp-edit--show-preview .rp-edit__form > :not(.rp-actionbar) { display: none; }
  .rp-actionbar { position: sticky; bottom: 0; }
}

/* ---------- page tree screen ---------- */
.rp-tree-screen { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-6); align-items: start; }
.rp-tree-screen--no-panel { grid-template-columns: minmax(0, 1fr); }
.rp-tree-screen__panel { position: sticky; top: var(--space-5); }
.rp-tree-screen__panel[hidden] { display: none; }
@media (max-width: 1023px) { .rp-tree-screen { grid-template-columns: minmax(0, 1fr); } .rp-tree-screen__panel { position: static; order: -1; } }
.rp-tree-row__actions .rp-menu > summary { list-style: none; }
.rp-tree-row:has(.rp-menu[open]) .rp-tree-row__actions { opacity: 1; }
.rp-tree li[data-collapsed] > .rp-tree { display: none; }
.rp-tree--searching li[data-collapsed] > .rp-tree { display: block; }
.rp-tree--searching .rp-tree-row__grip { visibility: hidden; }
.rp-tree-row--match .rp-tree-row__title { width: fit-content; background: var(--accent-soft); border-radius: var(--radius-sm); box-shadow: 0 0 0 3px var(--accent-soft); }
.rp-tree-search { margin-bottom: var(--space-3); max-width: 420px; }
.rp-check-sub { display: block; margin: var(--space-5) 0 0; }
.rp-check-sub + .rp-list { margin-top: 0; }
.rp-tree-search .rp-field__help { margin-top: var(--space-2); }
.rp-legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); font-size: 14px; color: var(--ink-muted); align-items: center; }
.rp-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.rp-trash-row__meta { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .rp-tree-row--dragging, .rp-rep-row--dragging { transform: none; }
}

/* ---------- edit form details ---------- */
.rp-rte__source { display: block; width: 100%; border: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--surface); color: var(--ink); font: 400 14px/22px var(--font-mono); resize: vertical; }
.rp-rte__note { margin: 0; padding: 6px 14px 8px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.rp-input--date { max-width: 220px; }
.rp-link:has(input[value="page"]:checked) .rp-link__url,
.rp-link:has(input[value="url"]:checked) .rp-link__page { display: none; }
.rp-rep-row--closed .rp-rep-row__body { display: none; }
.rp-rep-row--removed { display: none; }
.rp-summary-line { color: var(--ink-muted); font-size: 14px; margin-left: auto; font-weight: 400; }
.rp-edit__state { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rp-history { max-height: 60vh; overflow: auto; }
.rp-field--error .rp-prefix { border-color: var(--danger-ink); border-width: 2px; }
.rp-field--error .rp-prefix .rp-input { border: 0; padding-left: 2px; }
.rp-menu__list--up { top: auto; bottom: calc(100% + 4px); }
.rp-history__item { color: var(--ink); }
.rp-row--tight { gap: var(--space-2); }
.rp-stack--tight { gap: var(--space-3); }
.rp-fieldset { border: 0; padding: 0; margin: 0; }
.rp-fieldset > legend { margin-bottom: var(--space-2); padding: 0; }
.rp-preview__title { color: var(--ink); }
.rp-flush { margin: 0; }
.rp-field__label--sub { font-size: 14px; }
.rp-row--between { justify-content: space-between; margin-bottom: var(--space-4); }
.rp-tab__count { font-weight: 500; }
.rp-notices--spaced { margin: var(--space-3) 0; }
.rp-notices:not(:has(*)) { display: none; }
.rp-tree-row__actions form { margin: 0; }

/* ---------- phones: nothing scrolls sideways at 360px ---------- */
@media (max-width: 720px) {
  .rp-topbar { gap: var(--space-2); }
  .rp-site-switch, .rp-site-name { flex: 0 1 auto; min-width: 0; }
  .rp-btn--publish { padding: 0 12px; }
  .rp-btn--publish .rp-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rp-actionbar { flex-wrap: wrap; padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .rp-actionbar .rp-topbar__spacer { display: none; }
  .rp-actionbar .rp-savestate { order: -1; flex: 1 1 100%; justify-content: center; }
  details.rp-section > summary { flex-wrap: wrap; }
  .rp-summary-line { margin-left: 0; flex: 1 1 100%; }
  .rp-edit__state { align-items: flex-start; }
  .rp-tree-row__addr { max-width: 60vw; }
}

/* ---------- sign-in screens ---------- */
.rp-auth { min-height: 100vh; display: grid; place-items: start center; padding: var(--space-8) var(--space-4); }
.rp-auth__card { width: min(400px, 100%); padding: var(--space-6); }
.rp-auth__card .rp-wordmark { margin-bottom: 28px; display: inline-flex; }
.rp-auth__title { font: 500 30px/36px var(--font-serif); margin: 0 0 var(--space-5); }
.rp-auth__lead { margin: calc(var(--space-5) * -1 + var(--space-2)) 0 var(--space-5); color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.rp-auth__lead strong { color: var(--ink); }
.rp-auth .rp-btn--primary { width: 100%; }
.rp-auth__alt { text-align: center; font-size: 15px; margin: 0; }
.rp-code-input { font: 400 24px/32px var(--font-mono); letter-spacing: .3em; text-align: center; }

/* ---------- site home and lists of links ---------- */
.rp-display { font: 500 34px/40px var(--font-serif); letter-spacing: -.01em; margin: 0 0 6px; }
.rp-screen--home { max-width: 1080px; }
.rp-home { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.rp-home .rp-h { margin-bottom: var(--space-2); }
@media (max-width: 900px) { .rp-home { grid-template-columns: minmax(0, 1fr); } }
.rp-nav-list a.rp-list__main { color: var(--ink); text-decoration: none; }
.rp-nav-list a.rp-list__main:hover strong { text-decoration: underline; }
.rp-list.rp-sheet { padding: 0 var(--space-5); }
.rp-day { font: 600 13px/18px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); margin: var(--space-5) 0 4px; }
.rp-inline-form { margin: 0; display: flex; gap: var(--space-2); align-items: center; }
.rp-select--sm { width: 160px; min-height: var(--control-height-sm); padding: 4px 36px 4px 10px; font-size: 15px; }
.rp-invite { margin-top: var(--space-5); }
.rp-invite .rp-h { margin-bottom: var(--space-4); }
.rp-invite__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 160px; gap: var(--space-3); align-items: start; }
@media (max-width: 720px) { .rp-invite__row { grid-template-columns: minmax(0, 1fr); } }
.rp-title--spaced { margin: var(--space-3) 0 var(--space-4); }
.rp-client { align-items: flex-start; }
.rp-client__sites { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.rp-client__sites li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.rp-menu__form { padding: var(--space-3); gap: var(--space-3); min-width: 260px; }
@media (max-width: 720px) {
  .rp-list > li { flex-wrap: wrap; }
  .rp-list > li > .rp-list__main { flex: 1 1 calc(100% - 48px); }
  .rp-list > li > .rp-avatar ~ .rp-list__actions { margin-left: 44px; }
}

.rp-list__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rp-form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.rp-tree-hint { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-3) 0 0; }
.rp-lang__missing { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; font: 600 13px/1 var(--font-sans); letter-spacing: .04em; color: var(--ink-faint); text-decoration: line-through; }
.rp-lang-sheet + .rp-lang-sheet { margin-top: var(--space-4); }
.rp-lang-sheet__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); align-items: start; }
.rp-lang-sheet__staff { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.rp-history-screen { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .rp-history-screen { grid-template-columns: minmax(0, 1fr); } }
.rp-versions a.rp-list__main { color: var(--ink); text-decoration: none; padding: 0 var(--space-2); }
.rp-versions__current { background: var(--accent-soft); border-radius: var(--radius-md); }
.rp-versions__current strong { color: var(--accent-ink); }

/* ---------- media ---------- */
.rp-dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.rp-dropzone p { margin: 0; }
.rp-dropzone label.rp-btn { cursor: pointer; }
.rp-dropzone label.rp-btn:focus-within { outline: var(--focus-width) solid var(--ink); outline-offset: 2px; }
.rp-media-list { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.rp-media__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-media-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .rp-media-detail { grid-template-columns: minmax(0, 1fr); } }
.rp-media-detail__preview { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); align-items: center; }
.rp-media-detail__preview img { max-width: 100%; max-height: 70vh; border-radius: var(--radius-md); }
.rp-media-used { margin-top: var(--space-5); }
.rp-mono-title { font-family: var(--font-mono); font-size: 22px; line-height: 28px; overflow-wrap: anywhere; }
.rp-asset-field { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.rp-asset-field__preview { grid-row: span 2; width: 96px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--surface-sunk); display: grid; place-items: center; overflow: hidden; color: var(--ink-muted); }
.rp-asset-field__preview img { width: 100%; height: 100%; object-fit: cover; }
.rp-asset-field__name { font-family: var(--font-mono); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-picker { width: min(760px, 100%); }
.rp-picker h2 { margin: 0; }
.rp-picker__upload { cursor: pointer; margin: var(--space-3) 0; }
.rp-picker__grid { list-style: none; padding: 0; margin: 0; max-height: 60vh; overflow: auto; }
.rp-picker__grid button.rp-media { border: 0; background: none; padding: 4px; cursor: pointer; border-radius: var(--radius-lg); text-align: left; font: inherit; color: inherit; width: 100%; }
.rp-picker__grid button.rp-media:hover { background: var(--surface-sunk); }
.rp-tree-row[draggable="true"] { cursor: default; }
.rp-tree-row[draggable="true"] .rp-tree-row__grip { cursor: grab; }
@media (max-width: 720px) { .rp-tree-row__grip { display: none; } }

/* ---------- rich text (Tiptap / ProseMirror) ---------- */
.rp-rte:focus-within { outline: var(--focus-width) solid var(--ink); outline-offset: 2px; }
.rp-rte .ProseMirror:focus-visible { outline: none; box-shadow: none; }
.rp-rte .ProseMirror { outline: none; white-space: pre-wrap; word-wrap: break-word; min-height: 120px; }
.rp-rte .ProseMirror > :last-child { margin-bottom: 0; }
.rp-rte .ProseMirror a { color: var(--accent-ink); }
.rp-rte .ProseMirror ol { margin: 0 0 12px; padding-left: 22px; }
.rp-rte .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--ink-faint); float: left; height: 0; pointer-events: none; }

/* ---------- publish ---------- */
.rp-home { grid-template-areas: "publish nav" "share nav" "recent nav"; }
.rp-home__share { grid-area: share; }
.rp-share-details { margin-top: var(--space-3); }
.rp-home > #veroeffentlichen { grid-area: publish; }
.rp-home__recent { grid-area: recent; }
.rp-home__nav { grid-area: nav; }
@media (max-width: 900px) { .rp-home { grid-template-areas: "publish" "nav" "share" "recent"; } }
.rp-publish-form { margin-top: var(--space-4); }
.rp-publish-button { width: 100%; min-height: 52px; font-size: 17px; }
.rp-publish-ask { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--accent-soft); }
.rp-publish-ask p { margin: 0 0 var(--space-2); }
.rp-publish-ask__note { white-space: pre-wrap; }
.rp-publish-ask__decline > summary { list-style: none; display: inline-flex; }
.rp-publish-ask__decline > summary::-webkit-details-marker { display: none; }
.rp-publish-ask__decline[open] > summary { margin-bottom: var(--space-3); }
.rp-publish-progress { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.rp-progress { width: 100%; height: 10px; appearance: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.rp-progress::-webkit-progress-bar { background: var(--line); }
.rp-progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); }
.rp-progress::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-pill); }
.rp-progress:indeterminate { background: linear-gradient(90deg, var(--line) 0%, var(--accent-soft) 50%, var(--line) 100%) 0 0 / 200% 100%; animation: rp-progress-wait 1.4s linear infinite; }
.rp-progress:indeterminate::-moz-progress-bar { background: transparent; }
@keyframes rp-progress-wait { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rp-progress:indeterminate { animation: none; } }
.rp-h--spaced { margin-top: var(--space-6); }
.rp-change-count { text-decoration: none; }
@media (max-width: 720px) { .rp-change-count { display: none; } }
.rp-copy { flex-wrap: nowrap; }
.rp-copy .rp-input { min-height: var(--control-height-sm); font-size: 14px; }

/* ---------- support ---------- */
a.rp-nav-link { color: var(--ink); text-decoration: none; }
a.rp-nav-link:hover strong { text-decoration: underline; }
.rp-thread { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.rp-thread__message { display: flex; gap: var(--space-3); align-items: flex-start; }
.rp-thread__body { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.rp-thread__message--staff .rp-thread__body { background: var(--surface-sunk); }
.rp-thread__message--internal .rp-thread__body { border-style: dashed; border-color: var(--line-strong); }
.rp-thread__meta { margin: 0 0 var(--space-2); font-size: 14px; color: var(--ink-muted); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.rp-thread__text { overflow-wrap: anywhere; }
.rp-inbox-filters { margin: var(--space-3) 0 var(--space-5); }
.rp-inbox-filters .rp-input { width: auto; flex: 1 1 160px; }

/* ---------- forms ---------- */
.rp-form-row__options, .rp-form-row__input-only { display: none; }
.rp-form-row[data-type="select"] .rp-form-row__options, .rp-form-row[data-type="radio"] .rp-form-row__options { display: flex; }
.rp-form-row:is([data-type="text"], [data-type="textarea"], [data-type="email"], [data-type="tel"], [data-type="select"], [data-type="radio"], [data-type="checkbox"], [data-type="consent"], [data-type="date"], [data-type="number"]) .rp-form-row__input-only { display: flex; }
.rp-form-row[hidden] { display: none; }
.rp-form-row__consent { display: none; }
.rp-form-row[data-type="consent"] .rp-form-row__consent { display: block; }
/* Consent is always required and full width: those settings would only mislead. */
.rp-form-row[data-type="consent"] .rp-field:has(select[name$="[width]"]),
.rp-form-row[data-type="consent"] .rp-check:has(input[name$="[required]"]) { display: none; }
/* builder (X-01): palette, grips, drop line, live preview beside it */
.rp-form-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: var(--space-6); align-items: start; }
.rp-form-preview { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.rp-form-preview__head { padding: var(--space-3) var(--space-4); background: var(--surface-sunk); border-bottom: 1px solid var(--line); font-size: 14px; }
.rp-form-preview__frame { display: block; width: 100%; height: 320px; border: 0; background: #fff; }
@media (max-width: 1000px) {
  .rp-form-editor { grid-template-columns: minmax(0, 1fr); }
  .rp-form-preview { position: static; }
}
.rp-palette { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.rp-palette > p { flex-basis: 100%; margin: 0 0 var(--space-1); }
.rp-palette__item { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: grab; }
.rp-palette__item:active { cursor: grabbing; }
.rp-palette__item:focus-visible { outline: var(--focus-width) solid var(--ink); outline-offset: 2px; }
.rp-rep-row__grip { display: inline-flex; align-items: center; color: var(--ink-muted); cursor: grab; padding: 4px 0; }
.rp-rep-row__grip:active { cursor: grabbing; }
.rp-rep-row--ghost { opacity: .35; }
.rp-rep-row__fold .rp-icon { transition: transform .12s; }
.rp-rep-row--closed .rp-rep-row__fold .rp-icon { transform: rotate(-90deg); }
.rp-builder-drop { height: 0; border-top: 2px solid var(--ink); position: relative; margin: 2px 0; }
.rp-builder-drop::before { content: ""; position: absolute; left: -6px; top: -5px; width: 8px; height: 8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.rp-attachments { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rp-attachments img { display: block; width: 160px; height: 110px; object-fit: cover; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.rp-attachments__file { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); text-decoration: none; }
.rp-file { padding: 8px; min-height: auto; }
.rp-focus { position: relative; cursor: crosshair; line-height: 0; }
.rp-focus img { width: 100%; height: auto; }
.rp-focus__dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink), var(--shadow-float); pointer-events: none; }
.rp-focus-crops { display: flex; gap: var(--space-3); align-items: flex-end; }
.rp-focus-crops img { object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-sunk); }
.rp-focus-crops__square { width: 96px; height: 96px; }
.rp-focus-crops__wide { width: 200px; height: 80px; }
.rp-focus-range { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); }
.rp-builder__empty { margin: 0; padding: var(--space-5); border: 2px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-muted); text-align: center; }
@media (pointer: coarse) { .rp-rep-row__grip { display: none; } }
/* Phones: the name needs the room; the type shows inside the row, and the arrows move it. */
@media (max-width: 560px) { .rp-form-row .rp-rep-row__grip, .rp-form-row [data-type-label] { display: none; } }
.rp-submission { display: grid; grid-template-columns: minmax(8rem, 30%) 1fr; gap: 4px var(--space-3); margin: 0 0 var(--space-2); }
.rp-submission dt { color: var(--ink-muted); font-size: 14px; }
.rp-submission dd { margin: 0; overflow-wrap: anywhere; }
.rp-codes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-2); }
.rp-codes li { padding: var(--space-2) var(--space-3); background: var(--surface-sunk); border-radius: var(--radius-sm); }
.rp-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2); }
.rp-qr { background: var(--preview-ground); padding: var(--space-3); border-radius: var(--radius-md); align-self: flex-start; }
.rp-mood { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-2) var(--space-4); }