/* rpa-demo.css — the sandbox agent of the demo "Vom Posteingang zum Auftrag" on /automation/rpa only (linked by scripts/pages/30-services.mjs; shell markup: scripts/pages/lib-services/rpa-demo.mjs; everything that changes is drawn by assets/js/rpa-demo.js). Sprint 39: a four-step simulation; Sprint 42: one small application. .rd the block. Its colours are variables; two sets exist: default the service page's own dark surfaces .rd--light a light panel in the look of the tool pages (/website-check): ground #f4f1fc, white cards, ink #17152b, one accent #5b3fd6. The page uses this one (LOOK in the markup module; decision in docs/logs/sprint-39-rpa.md). .rd-top the fictional business, what can be tried, the three servicemen .rd-in Posteingang: example tabs, the e-mail, the note, the bot check's place, the button .rd-run the agent's steps with their results .rd-tool five tabs: Kalender · Freigaben · Postausgang · Erinnerungslauf · Protokoll Buttons (founder, 3 Oct 2026). Where the flow waits for the visitor there is a .rd-wait block: one instruction line (.rd-do, "Bitte drücken Sie „…“, um ….") directly above one button. .rd-btn--primary the one action of a waiting state: filled accent, the only filled control of its block .rd-btn--quiet a secondary action: outline .rd-btn--link a way to another tab: underlined text A busy button ([aria-disabled="true"]) shows a turning mark and a "working" label. Nothing else looks like a control: calendar cells, chips and step heads have no pointer, no hover and no button shape. Every state carries a word; colour only supports it. Focus is always visible (3 px ring). Reduced motion: no pulse, no spin, no transitions. Tap targets are at least 44 px high. Usable from 375 px. */ .rd { --rd-ground: color-mix(in srgb, var(--rx-ink, #fffdfd) 4%, transparent); --rd-surface: color-mix(in srgb, var(--rx-ink, #fffdfd) 7%, transparent); --rd-soft: color-mix(in srgb, var(--rx-accent, #b197fc) 14%, transparent); --rd-ink: var(--colors--primary-text, #fffdfd); --rd-muted: var(--colors--secondary-text, #b0abab); --rd-line: color-mix(in srgb, var(--rx-ink, #fffdfd) 14%, transparent); --rd-accent: var(--rx-accent, #b197fc); --rd-accent-strong: var(--rx-accent, #b197fc); --rd-on-accent: var(--rx-on-accent, #1d1d1d); --rd-shadow: none; --rd-ok: #7ddba8; --rd-ok-bg: color-mix(in srgb, #7ddba8 16%, transparent); --rd-warn: #ffc56b; --rd-warn-bg: color-mix(in srgb, #ffc56b 16%, transparent); --rd-high: #ff9d94; --rd-error-bg: #4a1512; --rd-error-ink: #ffd9d4; position: relative; padding: 16px; border: 1px solid var(--rd-line); border-radius: 28px; background: var(--rd-ground); color: var(--rd-ink); font-family: var(--font-families--primary); } .rd--light { --rd-ground: #f4f1fc; --rd-surface: #ffffff; --rd-soft: #ece8f8; --rd-ink: #17152b; --rd-muted: #55536b; --rd-line: rgba(23, 21, 43, 0.14); --rd-accent: #5b3fd6; --rd-accent-strong: #4a31b8; --rd-on-accent: #ffffff; --rd-shadow: 0 1px 2px rgba(23, 21, 43, 0.05), 0 18px 44px -20px rgba(75, 50, 170, 0.3); --rd-ok: #156a40; --rd-ok-bg: #e4f4ec; --rd-warn: #7a4f00; --rd-warn-bg: #fdf1d8; --rd-high: #b42318; --rd-error-bg: #fde9e6; --rd-error-ink: #96190f; border-color: transparent; color-scheme: light; background: radial-gradient(70% 60% at 50% 0%, rgba(124, 58, 237, 0.14), transparent 70%), #f4f1fc; } .rd :where(h3, h4, p, ol, ul, dl, dd, table) { margin: 0; } .rd :where(ol, ul) { padding: 0; list-style: none; } .rd [hidden] { display: none !important; } .rd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .rd-nojs { padding: 16px; color: var(--rd-ink); } /* without JavaScript the controls would do nothing: only the