/* * Graph Theatre – optional, deliberately linear visual layer. * Activated only by after styles.css. * No rule affects the classic or presenter views. */ html.theatre-mode body:not(.is-presenting) { min-width: 320px; background: radial-gradient(circle at 68% -8%, rgba(255, 212, 0, .1), transparent 34rem), #070908; } html.theatre-mode body:not(.is-presenting) .topbar { min-height: 70px; padding: .75rem clamp(1rem, 2.4vw, 2.5rem); border-color: rgba(255, 212, 0, .18); background: rgba(7, 9, 8, .94); } html.theatre-mode body:not(.is-presenting) .brand img { width: 38px; height: 38px; } html.theatre-mode body:not(.is-presenting) .brand h1 { font-size: clamp(1.05rem, 1.5vw, 1.35rem); } html.theatre-mode body:not(.is-presenting) .topbar__claim { max-width: 31rem; font-size: .78rem; } html.theatre-mode body:not(.is-presenting) .topbar__actions { gap: .6rem; } html.theatre-mode body:not(.is-presenting) .theatre-classic-link { display: inline-flex; align-items: center; text-decoration: none; } html.theatre-mode body:not(.is-presenting) main { display: flex; width: min(1540px, calc(100vw - 2rem)); margin: 0 auto; padding: clamp(1rem, 2vw, 2rem) 0 4rem; flex-direction: column; gap: 1rem; } html.theatre-mode body:not(.is-presenting) .presenter-stage { order: 0; } html.theatre-mode body:not(.is-presenting) .orientation-panel { order: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr); gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.4rem, 3vw, 2.75rem); border-color: rgba(255, 212, 0, .24); border-radius: 22px; background: linear-gradient(120deg, rgba(255, 212, 0, .08), transparent 46%), #0c0f0e; } html.theatre-mode body:not(.is-presenting) .orientation-panel h2 { max-width: 12ch; margin-bottom: 1rem; font-size: clamp(2.5rem, 4.8vw, 5.1rem); line-height: .96; letter-spacing: -.055em; text-wrap: balance; } html.theatre-mode body:not(.is-presenting) .orientation-panel__intro > p:not(.eyebrow, .safety-note) { max-width: 42rem; color: #c1c7c3; font-size: clamp(.94rem, 1.15vw, 1.08rem); } html.theatre-mode body:not(.is-presenting) .safety-note { max-width: 40rem; border-radius: 0; background: transparent; } html.theatre-mode body:not(.is-presenting) .orientation-concepts { align-content: center; grid-template-columns: 1fr; gap: .65rem; } html.theatre-mode body:not(.is-presenting) .orientation-concepts article { padding: .85rem 0 .85rem 1rem; border: 0; border-left: 1px solid rgba(255, 212, 0, .32); border-radius: 0; background: transparent; } html.theatre-mode body:not(.is-presenting) .orientation-concepts p { margin-top: .25rem; } html.theatre-mode body:not(.is-presenting) .story-panel { order: 2; margin: 0; padding: 1rem 1.2rem; grid-template-columns: minmax(280px, 1fr) minmax(260px, .7fr) auto; border-color: rgba(255, 212, 0, .28); border-radius: 16px; background: #101311; } html.theatre-mode body:not(.is-presenting) .story-panel h2 { font-size: 1.25rem; } html.theatre-mode body:not(.is-presenting) .signal-diagnosis, html.theatre-mode body:not(.is-presenting) .custom-change { background: #0a0d0c; } html.theatre-mode body:not(.is-presenting) .metrics { order: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(255, 212, 0, .18); border-radius: 14px; background: #0b0e0d; } html.theatre-mode body:not(.is-presenting) .metrics article { min-width: 0; padding: .8rem 1rem; border: 0; border-right: 1px solid #282d2b; border-radius: 0; background: transparent; } html.theatre-mode body:not(.is-presenting) .metrics article:last-child { border-right: 0; } html.theatre-mode body:not(.is-presenting) .metrics span { color: var(--yellow); font-size: clamp(1rem, 1.7vw, 1.55rem); } html.theatre-mode body:not(.is-presenting) .workspace { order: 4; display: flex; min-width: 0; flex-direction: column; gap: .8rem; } html.theatre-mode body:not(.is-presenting) .network-panel { order: 1; width: 100%; min-width: 0; padding: 1rem; overflow: hidden; border-color: rgba(255, 212, 0, .22); border-radius: 20px; background: linear-gradient(rgba(52, 57, 65, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 57, 65, .12) 1px, transparent 1px), #090c0b; background-size: 44px 44px; } html.theatre-mode body:not(.is-presenting) .network-panel .section-heading { position: static; display: flex; padding: 0 0 .85rem; border-bottom: 1px solid rgba(255, 212, 0, .16); background: transparent; } html.theatre-mode body:not(.is-presenting) .network-panel .section-heading h2 { font-size: clamp(1.3rem, 2.2vw, 2rem); } html.theatre-mode body:not(.is-presenting) .network-scroll { width: 100%; height: min(70vh, 780px); min-height: 620px; max-height: none; margin-top: .8rem; border: 0; background: rgba(5, 7, 6, .78); } html.theatre-mode body:not(.is-presenting) #network-svg { min-height: 100%; } html.theatre-mode body:not(.is-presenting) .explain-panel { position: static; order: 2; width: 100%; max-height: none; padding: 1rem 1.2rem; border-color: rgba(105, 167, 255, .26); background: #101413; } html.theatre-mode body:not(.is-presenting) .detail-content { min-height: 0; } html.theatre-mode body:not(.is-presenting) .explain-panel .legend { grid-template-columns: repeat(6, minmax(0, 1fr)); } html.theatre-mode body:not(.is-presenting) .storyboard { order: 5; margin: 0; border-color: rgba(105, 167, 255, .22); background: #101413; } html.theatre-mode body:not(.is-presenting) .runner { order: 6; margin: 0; padding: 1.2rem; border: 1px solid #272d2a; border-radius: 16px; background: #0e1210; } html.theatre-mode body:not(.is-presenting) footer { background: #070908; } html.theatre-mode body:not(.is-presenting) :is(button, select, textarea, a):focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; } @media (max-width: 1050px) { html.theatre-mode body:not(.is-presenting) .orientation-panel { grid-template-columns: 1fr; } html.theatre-mode body:not(.is-presenting) .orientation-panel h2 { font-size: clamp(2.5rem, 8vw, 4.5rem); } html.theatre-mode body:not(.is-presenting) .orientation-concepts { grid-template-columns: repeat(3, 1fr); } html.theatre-mode body:not(.is-presenting) .story-panel { grid-template-columns: 1fr 1fr; } html.theatre-mode body:not(.is-presenting) .story-panel > div:first-child { grid-column: 1 / -1; } html.theatre-mode body:not(.is-presenting) .story-panel .button { grid-column: 2; } } @media (max-width: 700px) { html.theatre-mode body:not(.is-presenting) main { width: min(100% - 1.2rem, 1540px); } html.theatre-mode body:not(.is-presenting) .orientation-panel { padding: 1.2rem; } html.theatre-mode body:not(.is-presenting) .orientation-panel h2 { font-size: clamp(2.35rem, 12vw, 3.5rem); } html.theatre-mode body:not(.is-presenting) .orientation-concepts, html.theatre-mode body:not(.is-presenting) .story-panel, html.theatre-mode body:not(.is-presenting) .metrics, html.theatre-mode body:not(.is-presenting) .explain-panel .legend { grid-template-columns: 1fr; } html.theatre-mode body:not(.is-presenting) .story-panel > div:first-child, html.theatre-mode body:not(.is-presenting) .story-panel .button { grid-column: auto; } html.theatre-mode body:not(.is-presenting) .metrics article { border-right: 0; border-bottom: 1px solid #282d2b; } html.theatre-mode body:not(.is-presenting) .network-panel { padding: .7rem; } html.theatre-mode body:not(.is-presenting) .network-panel .section-heading { display: block; } html.theatre-mode body:not(.is-presenting) .network-scroll { height: 620px; min-height: 620px; } } @media (prefers-reduced-motion: reduce) { html.theatre-mode body:not(.is-presenting), html.theatre-mode body:not(.is-presenting) *, html.theatre-mode body:not(.is-presenting) *::before, html.theatre-mode body:not(.is-presenting) *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* Umschaltbare Farbwelten – ausschließlich für die parallele Theatre-Ansicht. */ html.theatre-mode { color-scheme: dark; --bg: #11141a; --panel: #191e27; --panel-2: #202733; --line: #566170; --text: #f7f5ed; --muted: #bac3ce; --yellow: #ffd400; --orange: #ff9848; --green: #58d59b; --blue: #79b8ff; --red: #ff7373; --purple: #c09aff; --theatre-topbar: #0d1118; --theatre-hero: #171d27; --theatre-canvas: #0b1018; --theatre-control: #202735; --theatre-node: #1b2430; --theatre-node-border: #718098; --theatre-edge: #68778c; --theatre-grid: rgba(126, 151, 184, .1); --theatre-changed: #3b330b; --theatre-stale: #452815; --theatre-updating: #303b4b; --theatre-review: #2d2240; --theatre-blocked: #481f20; } html.theatre-mode[data-theatre-theme="night"] { --bg: #030405; --panel: #0b0d10; --panel-2: #121419; --line: #3c424b; --text: #f5f5f3; --muted: #aab0b8; --blue: #78b5ff; --theatre-topbar: #050607; --theatre-hero: #0b0d11; --theatre-canvas: #050608; --theatre-control: #17191e; --theatre-node: #11141a; --theatre-node-border: #505965; --theatre-edge: #59626d; --theatre-grid: rgba(130, 140, 155, .06); --theatre-changed: #332e0a; --theatre-stale: #352012; --theatre-updating: #32353a; --theatre-review: #241a34; --theatre-blocked: #361718; } html.theatre-mode[data-theatre-theme="day"] { color-scheme: light; --bg: #f3f0e7; --panel: #fffdf7; --panel-2: #ebe9e1; --line: #8b918d; --text: #181c1a; --muted: #56615d; --yellow: #c99f00; --orange: #c75b16; --green: #18734f; --blue: #155fa8; --red: #b83535; --purple: #6949a3; --theatre-topbar: #fffdf7; --theatre-hero: #fffaf0; --theatre-canvas: #edf1ed; --theatre-control: #e6e9e4; --theatre-node: #fffefa; --theatre-node-border: #737d78; --theatre-edge: #737f7a; --theatre-grid: rgba(67, 82, 75, .11); --theatre-changed: #fff2a8; --theatre-stale: #ffe2cb; --theatre-updating: #e1ebe7; --theatre-review: #eee4ff; --theatre-blocked: #ffe1e1; } html.theatre-mode[data-theatre-theme] body { color: var(--text); background: radial-gradient(circle at 68% -8%, color-mix(in srgb, var(--yellow) 10%, transparent), transparent 34rem), var(--bg); } html.theatre-mode[data-theatre-theme="presentation"] body { background: radial-gradient(circle at 12% -18%, color-mix(in srgb, var(--yellow) 10%, transparent), transparent 32rem), radial-gradient(circle at 88% -12%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 36rem), var(--bg); } html.theatre-mode[data-theatre-theme="night"] body { background: radial-gradient(circle at 86% -14%, color-mix(in srgb, var(--blue) 6%, transparent), transparent 34rem), radial-gradient(circle at 12% -20%, color-mix(in srgb, var(--purple) 5%, transparent), transparent 30rem), var(--bg); } html.theatre-mode[data-theatre-theme="day"] body { background: radial-gradient(circle at 12% -18%, color-mix(in srgb, var(--yellow) 13%, transparent), transparent 32rem), radial-gradient(circle at 88% -12%, color-mix(in srgb, var(--blue) 6%, transparent), transparent 36rem), var(--bg); } html.theatre-mode[data-theatre-theme] body .topbar { border-color: color-mix(in srgb, var(--yellow) 28%, transparent); background: color-mix(in srgb, var(--theatre-topbar) 94%, transparent); } html.theatre-mode .theatre-theme-switcher { display: flex; align-items: center; gap: .18rem; padding: .22rem; border: 1px solid var(--line); border-radius: 999px; background: var(--theatre-control); box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 35%, transparent); } html.theatre-mode .theatre-theme-switcher button { min-width: 3.15rem; min-height: 30px; padding: .28rem .58rem; color: var(--muted); background: transparent; border: 0; border-radius: 999px; cursor: pointer; font-size: .72rem; font-weight: 850; } html.theatre-mode .theatre-theme-switcher button:hover, html.theatre-mode .theatre-theme-switcher button:focus-visible { color: var(--text); } html.theatre-mode .theatre-theme-switcher button[aria-pressed="true"] { color: #11130f; background: var(--yellow); box-shadow: 0 2px 10px color-mix(in srgb, var(--yellow) 30%, transparent); } html.theatre-mode[data-theatre-theme] body .orientation-panel, html.theatre-mode[data-theatre-theme] body .presenter-stage { border-color: color-mix(in srgb, var(--yellow) 32%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 48%), var(--theatre-hero); } html.theatre-mode[data-theatre-theme="presentation"] body :is(.orientation-panel, .presenter-stage) { background: linear-gradient(120deg, color-mix(in srgb, var(--yellow) 9%, transparent), transparent 42%), radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 42%), var(--theatre-hero); } html.theatre-mode[data-theatre-theme="night"] body :is(.orientation-panel, .presenter-stage) { background: linear-gradient(120deg, color-mix(in srgb, var(--yellow) 4%, transparent), transparent 44%), radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--purple) 6%, transparent), transparent 42%), var(--theatre-hero); } html.theatre-mode[data-theatre-theme="day"] body :is(.orientation-panel, .presenter-stage) { background: linear-gradient(120deg, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 44%), radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--blue) 7%, transparent), transparent 42%), var(--theatre-hero); } html.theatre-mode[data-theatre-theme] body .story-panel, html.theatre-mode[data-theatre-theme] body .metrics, html.theatre-mode[data-theatre-theme] body .explain-panel, html.theatre-mode[data-theatre-theme] body .storyboard, html.theatre-mode[data-theatre-theme] body .runner, html.theatre-mode[data-theatre-theme] body .network-panel { color: var(--text); border-color: var(--line); background-color: var(--panel); } html.theatre-mode[data-theatre-theme] body:not(.is-presenting) .network-panel { background: linear-gradient(var(--theatre-grid) 1px, transparent 1px), linear-gradient(90deg, var(--theatre-grid) 1px, transparent 1px), var(--panel); background-size: 44px 44px; } html.theatre-mode[data-theatre-theme] body .network-scroll { background: var(--theatre-canvas); border-color: var(--line); } html.theatre-mode[data-theatre-theme] body.is-presenting main { padding: clamp(.7rem, 1.35vw, 1.35rem); gap: clamp(.65rem, 1vw, 1rem); } html.theatre-mode[data-theatre-theme] body.is-presenting .network-panel, html.theatre-mode[data-theatre-theme] body.is-presenting .network-scroll { border: 1px solid var(--line); background: var(--theatre-canvas); } html.theatre-mode[data-theatre-theme] body .presenter-zoom-controls, html.theatre-mode[data-theatre-theme] body .button:not(.button--primary):not(.button--success):not(.button--danger), html.theatre-mode[data-theatre-theme] body .zoom-button, html.theatre-mode[data-theatre-theme] body select, html.theatre-mode[data-theatre-theme] body textarea { color: var(--text); border-color: var(--line); background: var(--theatre-control); } html.theatre-mode[data-theatre-theme] body .button--quiet { background: transparent !important; } html.theatre-mode[data-theatre-theme] body .dependency-edge { stroke: var(--theatre-edge); stroke-width: 1.5; } html.theatre-mode[data-theatre-theme] body .dependency-edge.is-affected { stroke: var(--orange); stroke-width: 2; opacity: .95; } html.theatre-mode[data-theatre-theme] body .dependency-edge.is-incoming { stroke: var(--blue); stroke-width: 2.7; } html.theatre-mode[data-theatre-theme] body .dependency-edge.is-outgoing { stroke: var(--yellow); stroke-width: 2.7; } html.theatre-mode[data-theatre-theme] body .dependency-edge.is-dimmed { opacity: .18; } html.theatre-mode[data-theatre-theme] body .document-node rect { fill: var(--theatre-node); stroke: var(--theatre-node-border); stroke-width: 1.5; } html.theatre-mode[data-theatre-theme] body .document-node.is-neighbor rect { stroke: var(--text); stroke-width: 2; } html.theatre-mode[data-theatre-theme] body .document-node.is-dimmed { opacity: .34; } html.theatre-mode[data-theatre-theme] body .document-node .node-title { fill: var(--text); font-size: 12.7px; } html.theatre-mode[data-theatre-theme] body .document-node .node-agent { fill: var(--muted); font-size: 10px; } html.theatre-mode[data-theatre-theme] body .document-node .node-status { fill: var(--muted); font-size: 8.5px; } html.theatre-mode[data-theatre-theme] body .document-node[data-status="changed"] rect { fill: var(--theatre-changed); } html.theatre-mode[data-theatre-theme] body .document-node[data-status="stale"] rect { fill: var(--theatre-stale); } html.theatre-mode[data-theatre-theme] body .document-node[data-status="updating"] rect { fill: var(--theatre-updating); stroke: var(--text); } html.theatre-mode[data-theatre-theme] body .document-node[data-status="review"] rect { fill: var(--theatre-review); } html.theatre-mode[data-theatre-theme] body .document-node[data-status="blocked"] rect { fill: var(--theatre-blocked); } html.theatre-mode[data-theatre-theme] body .layer-label { fill: var(--muted); font-size: 13px; } html.theatre-mode[data-theatre-theme] body .storyboard-scenes li, html.theatre-mode[data-theatre-theme] body .wave-list li, html.theatre-mode[data-theatre-theme] body .log-panel { color: var(--muted); border-color: var(--line); background: var(--theatre-canvas); } @media (max-width: 700px) { html.theatre-mode body.is-presenting .topbar__actions { display: flex; width: auto; margin-left: auto; } html.theatre-mode body.is-presenting .theatre-theme-switcher button { min-width: 2.7rem; padding-inline: .42rem; } }