/* Production composition of the accepted workspace. Material physics live in materials.css. */
body {
  --bg:var(--page); --bg-edge:var(--page); --surface-solid:var(--node); --surface-chip:var(--coat); --panel:var(--coat);
  --gray-100:var(--field); --gray-200:var(--line); --gray-300:var(--line); --gray-400:var(--muted); --gray-500:var(--muted); --gray-600:var(--muted); --gray-700:var(--ink); --gray-800:var(--ink);
  --accent-ink:var(--accent); --accent-weak:var(--accent-wash); --node-border:var(--line); --connector:color-mix(in srgb,var(--muted) 80%,var(--canvas));
  --glass-bg:var(--coat); --glass-border:var(--rim); --glass-blur:10px; --glass-sat:100%; --blur:10px; --saturation:100%; --bevel:1px;
  --primary:var(--button); --primary-top:var(--button-top); --on-primary:var(--button-text); --primary-border:var(--low-rim); --primary-rim:var(--reflection); --on-accent:var(--button-text);
  --ok:var(--tone-done-light); --ok-ink:var(--tone-done-light); --err:var(--tone-error-light); --err-ink:var(--tone-error-light); --warn:var(--tone-review-light); --warn-ink:var(--tone-review-light);
  --shadow-color:rgb(var(--shadow) / .08); --scrim:rgb(var(--shadow) / .24); --branch:rgb(var(--shadow) / .025);
  --duration:300ms; --travel:20px; --sidebar-w:0px;
  background:var(--page); color-scheme:light;
}
body[data-theme='dark'] { color-scheme:dark; --ok:var(--tone-done-dark); --ok-ink:var(--tone-done-dark); --err:var(--tone-error-dark); --err-ink:var(--tone-error-dark); --warn:var(--tone-review-dark); --warn-ink:var(--tone-review-dark); }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button,summary { touch-action:manipulation; }
button:disabled { cursor:wait; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.icon { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; width:18px; height:18px; }
.icon-button { display:inline-grid; place-items:center; flex:0 0 auto; width:36px; height:36px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; }
.icon-button:hover { background:var(--field); color:var(--ink); }
.platform-bar { position:fixed; z-index:42; inset:8px 24px auto; display:flex; align-items:center; justify-content:space-between; height:42px; pointer-events:none; }
.platform-bar > * { pointer-events:auto; }
.menu-btn.quiet-control { position:static; display:flex; align-items:center; gap:10px; width:auto; height:40px; background:transparent; border:0; border-radius:7px; padding:0 8px; color:var(--ink); font:500 13px var(--font-ui); }
.menu-btn .icon:last-child { width:14px; transform:rotate(90deg); }
.profile-menu { position:relative; }
summary { list-style:none; cursor:pointer; } summary::-webkit-details-marker { display:none; }
.profile-popover { position:absolute; top:46px; right:0; width:286px; padding:14px; border-radius:12px; }
.profile-popover p { overflow-wrap:anywhere; margin:4px 8px 12px; font-size:12px; color:var(--muted); }
.profile-popover a,.profile-popover form button { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); width:100%; background:transparent; border:0; min-height:42px; padding:8px; text-align:left; border-radius:7px; }
.profile-popover a:hover,.profile-popover form button:hover { background:var(--field); }
.theme-options { display:flex; gap:3px; padding:3px; margin:12px 0; background:var(--field); border:1px solid var(--line); border-radius:8px; }
.theme-options button { flex:1; min-height:34px; border:0; background:transparent; border-radius:5px; color:var(--muted); font-size:12px; }
.theme-options button[aria-pressed='true'] { background:var(--accent-wash); color:var(--ink); }
.shell,#center { height:100dvh; min-height:100dvh; }
.graph { inset:56px 12px 12px; border:1px solid var(--line); border-radius:16px; background:var(--canvas); }
.wf-header { position:absolute; inset:68px 24px auto; padding:12px 16px; min-height:0; gap:10px; border-radius:12px; z-index:30; }
.wf-header h1 { font-size:17px; font-weight:550; }
.wf-title-row { align-items:center; gap:12px; }
.wf-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.wf-toolbar > .access-open { margin-left:auto; }
.used-by { white-space:normal; font-size:11px; }
.run-picker-btn,.sched-btn { display:flex; align-items:center; gap:8px; height:38px; padding:6px 10px; border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--ink); font-size:12px; }
.rp-caret .icon { width:14px; transform:rotate(90deg); }
.run-picker[open] > summary,.sched-picker[open] > summary { background:var(--field); }
#run-action { flex-shrink:0; }
.run-stop { position:static; margin:0; }
.hdr-run { min-height:38px; min-width:100px; font-size:12px; border-radius:7px; }
.hdr-run.btn-stop { background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none; }
.run-history { background:var(--paper); width:360px; border:1px solid var(--line); border-radius:12px; max-height:65dvh; overflow:auto; }
.history-new { width:100%; min-height:48px; display:flex; align-items:center; gap:12px; padding:12px; background:transparent; border:0; border-bottom:1px solid var(--line); cursor:pointer; text-align:left; }
.history-new:hover { background:var(--field); }
.run-row { border-radius:6px; }
.run-row-on { background:var(--accent-wash); }
.sched-body { width:370px; max-height:70dvh; overflow:auto; padding:20px; border-radius:12px; }
.field input,.field textarea,.field select { background:var(--field); color:var(--ink); border:1px solid var(--line); border-radius:7px; min-height:42px; padding:10px; width:100%; }
.field textarea { resize:vertical; }
.field input[type='checkbox'] { width:auto; min-height:auto; }
.sched-days { gap:4px; } .day-chip { flex:1; } .day-chip span { min-height:36px; display:grid; place-items:center; padding:6px; border-radius:6px; }
.technical,.repeat-settings,.sched-inputs { border-top:1px solid var(--line); margin:16px 0 0; }
.technical > summary,.repeat-settings > summary,.sched-inputs > summary { display:flex; align-items:center; gap:8px; min-height:44px; font-size:12px; font-weight:500; padding:8px 0; }
.technical summary .icon,.repeat-settings summary .icon { width:14px; height:14px; transition:transform 160ms; }
.technical[open] > summary .icon,.repeat-settings[open] > summary .icon { transform:rotate(90deg); }
.repeat-settings > summary span { margin-left:auto; color:var(--muted); font-weight:400; }
.technical pre { margin:8px 0 16px; padding:12px; background:var(--field); border-radius:7px; max-height:340px; overflow:auto; font:12px/1.6 var(--font-code); white-space:pre-wrap; overflow-wrap:anywhere; }
.repeat-settings { padding-bottom:16px; }
.graph-controls { position:fixed; left:auto; right:26px; bottom:26px; z-index:22; margin:0; }
.gc-btn { width:36px; height:36px; } .gc-scale { font-size:11px; color:var(--muted); min-width:44px; text-align:center; }
.tree-controls { position:fixed; left:26px; bottom:26px; z-index:22; padding:3px; border-radius:9px; }
#tree-toggle { position:relative; } .tool-on { display:none; position:absolute; bottom:4px; width:3px; height:3px; border-radius:50%; background:var(--accent); }
#tree-toggle[aria-pressed='true'] { color:var(--accent); background:var(--accent-wash); } #tree-toggle[aria-pressed='true'] .tool-on { display:block; }
#run-tree { position:fixed; z-index:24; left:26px; top:var(--drawer-top,184px); bottom:82px; width:310px; border-radius:12px; display:flex; flex-direction:column; overflow:hidden; }
#run-tree header,#sidebar header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; }
#run-tree h2,#sidebar h2 { margin:0; font-size:14px; font-weight:550; }
.run-tree-body { overflow:auto; padding:4px 8px 16px; }
.step-branch { list-style:none; padding:0; margin:0; }
.tree-children { margin-left:22px; padding-left:8px; border-left:1px solid var(--palette-rail); }
.step-row { display:flex; align-items:center; gap:0; min-height:38px; border-radius:6px; }
.step-row:hover,.step-row.selected { background:var(--field); }
.tree-expand { width:28px; height:32px; } .tree-expand .icon { width:14px; transition:transform 160ms; }
.tree-expand[aria-expanded='true'] .icon { transform:rotate(90deg); }
.tree-gap { width:28px; flex:0 0 28px; }
.tree-step { flex:1; min-width:0; background:none; border:0; display:flex; align-items:center; gap:9px; padding:8px 4px; text-align:left; font-size:12px; overflow-wrap:anywhere; cursor:pointer; }
.tree-step span { min-width:0; } .tree-branch-name { font-size:11px; color:var(--muted); margin:8px; }
#sidebar { display:none; position:fixed; inset:58px auto auto 24px; width:380px; max-height:calc(100dvh - 90px); border-radius:14px; padding:8px; z-index:45; }
#sidebar.open { display:flex; transform:none; }
.sidebar-dismiss { position:fixed; inset:0; border:0; background:rgb(var(--shadow) / .13); z-index:41; }
.catalog-search { margin:6px 8px 10px; background:var(--field); } .sidebar-scroll { min-height:0; overflow:auto; }
.wf-section-label { margin:12px 12px 6px; }
.wf-components { margin-top:14px; } .wf-components summary { display:flex; align-items:center; gap:8px; }
.wf-components summary .icon { width:14px; } .wf-components[open] summary .icon { transform:rotate(90deg); }
.wf-link { min-height:40px; }
.cube { background:var(--node); border:1px solid var(--line); box-shadow:0 2px 3px rgb(var(--shadow) / .04); }
.cube.active,.loop.active,.fan-out.active { outline:none; border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); background:color-mix(in srgb,var(--accent) 14%,var(--node)); box-shadow:inset 0 1px 0 var(--reflection),0 4px 8px -5px rgb(var(--shadow) / .2); }
.cube-id { font-family:var(--font-ui); font-weight:550; }
.cube-status.state { font-size:11px; gap:9px; color:var(--signal); }
.cube .cube-status { margin-top:auto; }
.cube-status .lamp { width:6px; height:6px; }
/* Keep the small pending label readable after whole-card compositing. */
.cube.is-muted .cube-status { --signal:var(--ink); }
.cube-running,.cube-failed,.cube-waiting_manual { border-color:var(--line); animation:none; }
#drawer { position:fixed; top:var(--drawer-top,184px); right:26px; bottom:82px; width:348px; max-width:calc(100vw - 24px); padding:0; border-radius:14px; overflow:hidden; z-index:25; background:var(--coat); }
.drawer-inner { height:100%; display:flex; flex-direction:column; min-height:0; }
.drawer-inner > .edge-light { z-index:2; }
.drawer-head { padding:16px 12px 10px 20px; margin:0; flex-shrink:0; gap:8px; }
.drawer-title { margin:0; font-size:14px; font-weight:550; flex:1; }
.drawer-close { margin-left:0; width:36px; height:36px; flex:0 0 36px; }
.drawer-head .step-settings { margin-left:auto; }
.drawer-meta { padding:0 20px 14px; }
.detail-tabs { display:flex; align-items:center; padding:0 16px; gap:12px; border-bottom:1px solid var(--line); flex-shrink:0; }
.detail-tabs button { position:relative; min-height:44px; padding:8px 4px; border:0; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; }
.detail-tabs button[aria-selected='true'] { color:var(--ink); }
.detail-tabs button[aria-selected='true']::after { content:''; position:absolute; bottom:-1px; height:2px; background:var(--accent); left:4px; right:4px; border-radius:2px; }
.detail-body { overflow:auto; overscroll-behavior:contain; padding:18px 20px 24px; min-height:0; flex:1; background:var(--paper); }
.drawer-content > .drawer-state { display:none; }
.chip-open { min-height:40px; background:var(--field); text-align:left; }
.inspector-log { padding:0; margin:0; list-style:none; } .inspector-log li { border-bottom:1px solid var(--line); padding:10px 0; }
.inspector-log pre { font:12px/1.65 var(--font-code); white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }
.modal-backdrop { background:var(--scrim); backdrop-filter:none; -webkit-backdrop-filter:none; }
.modal-panel { width:min(900px,calc(100vw - 32px)); max-height:90dvh; border:1px solid var(--rim); border-radius:16px; background:var(--coat); backdrop-filter:blur(10px) saturate(100%); -webkit-backdrop-filter:blur(10px) saturate(100%); padding:7px; box-shadow:inset 0 1px 0 var(--rim),0 24px 80px rgb(var(--shadow) / .22); animation:panel-enter 300ms cubic-bezier(.2,.8,.25,1); }
.modal-head { padding:8px 12px 12px; border:0; }
.modal-title { color:var(--ink); flex:1; }
.modal-body { border-radius:10px; background:var(--paper); padding:28px 36px; }
.modal-body .md-body { max-width:70ch; margin:auto; font-size:16px; line-height:1.8; }
.md-body h1 { font-size:28px; line-height:1.3; } .md-body h2 { margin-top:28px; font-size:21px; } .md-body h3 { margin-top:24px; font-size:18px; }
.md-body table { display:block; max-width:100%; overflow:auto; }
.connections { display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; }
.connection-list { border-right:1px solid var(--line); padding-right:16px; }
.connection-list button { display:flex; gap:10px; align-items:center; min-height:60px; width:100%; border:0; border-radius:7px; padding:10px; background:none; text-align:left; cursor:pointer; }
.connection-list button > span { flex:1; min-width:0; overflow-wrap:anywhere; font-size:12px; } .connection-list small { display:block; color:var(--muted); margin-top:4px; }
.connection-list [aria-pressed='true'] { background:var(--accent-wash); }
.connection-back { display:none; }
.connection-detail { min-width:0; }
.secret-row { background:transparent; border:0; padding:0; margin:0; }
.acct-page { margin:0 auto; padding:76px 24px 40px; max-width:1050px; height:100dvh; overflow:auto; }
.acct-page > h1 { font-size:24px; margin-bottom:24px; }
.acct-page > .acct-panel { border:1px solid var(--line); background:var(--paper); border-radius:12px; margin:20px 0; padding:24px; }
.acct-page > .acct-panel.glass { background:transparent; backdrop-filter:none; box-shadow:none; padding:0; border:0; }
.account-tabs { padding:0; } .account-tabs button { font-size:13px; }
.auth-form .error-card { max-width:440px; padding:28px; border-radius:16px; }
.auth-form .error-page { padding:24px; }
.run-queue { left:26px; bottom:85px; max-width:350px; font-size:12px; }
@keyframes panel-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
#drawer:not(:empty),#sidebar.open { animation:panel-enter 300ms cubic-bezier(.2,.8,.25,1); }
@media(max-width:1024px) {
 .platform-bar { inset:6px 12px auto; } .wf-header { inset:64px 16px auto; padding:10px 12px; }
 .graph { inset:54px 6px 6px; } .wf-header h1 { font-size:15px; }
 #drawer { top:auto; bottom:8px; right:8px; width:calc(100vw - 16px); max-width:none; height:min(620px,72dvh); max-height:calc(100dvh - 70px); z-index:40; }
 #run-tree { top:auto; bottom:62px; left:8px; width:calc(100vw - 16px); height:min(600px,68dvh); }
 .graph-controls { bottom:16px; right:16px; } .tree-controls { bottom:16px; left:16px; }
 #sidebar { left:8px; right:8px; width:auto; top:54px; }
 .icon-button,.drawer-close { width:40px; height:40px; }
 .gc-btn { width:36px; height:36px; } .run-queue { left:16px; bottom:66px; }
 .sched-body,.run-history { position:fixed; inset:auto 12px auto; top:var(--drawer-top,180px); width:auto; max-height:calc(100dvh - var(--drawer-top,180px) - 16px); }
 .acct-page { padding:70px 16px 24px; }
}
@media(max-width:700px) {
 .wf-toolbar { gap:6px; } .wf-header h1 { font-size:14px; }
 .wf-title-row { gap:6px; } .badge { font-size:11px; }
 .run-picker-btn,.sched-btn { padding:5px 8px; font-size:11px; height:36px; }
 .hdr-run { min-width:80px; min-height:36px; padding:6px 10px; }
 .wf-toolbar .access-open { width:34px; height:36px; }
 .sp-kind { display:inline-flex; } .sp-kind .icon { width:14px; } .sched-btn .sp-time { font-size:11px; }
 .field input,.field textarea,.field select { font-size:16px; }
 .modal-backdrop { padding:8px; } .modal-panel { width:100%; max-height:calc(100dvh - 16px); } .modal-body { padding:20px 16px; }
 .connections { display:block; } .connection-list { border:0; padding:0; } .connection-detail { display:none; }
 .connections[data-connection-view='detail'] .connection-list { display:none; } .connections[data-connection-view='detail'] .connection-detail { display:block; } .connection-back { display:flex; margin-bottom:20px; }
 .md-body h1 { font-size:24px; } .acct-page > .acct-panel { padding:18px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
@media(prefers-reduced-transparency:reduce) { .modal-panel { background:var(--field); backdrop-filter:none; -webkit-backdrop-filter:none; } }
/* Panels overlay the graph; opening an inspector never resizes the canvas. */
body:has(#drawer:not(:empty)) #graph { right:12px; }
@media(max-width:1024px) { body:has(#drawer:not(:empty)) #graph { right:6px; } #drawer { left:auto; } }
@media(min-width:1025px) { #run-tree:not([hidden]) ~ .graph-controls { right:26px; } }
.account-identity { color:var(--muted); font-size:12px; }
@media(max-width:700px) { .wf-title-row { flex-wrap:wrap; } .rp-kind { display:none; } .sp-days { display:none; } .sp-kind { font-size:0; } .sched-btn .sp-kind .icon { font-size:14px; } .menu-btn.quiet-control { font-size:12px; } .catalog-search input { font-size:16px; } }
.run-history[popover],.sched-body[popover] { position:fixed; margin:0; right:auto; bottom:auto; color:var(--ink); }
.run-history[popover]:not(:popover-open),.sched-body[popover]:not(:popover-open) { display:none; }
.run-history[popover]::backdrop,.sched-body[popover]::backdrop { background:transparent; }
.tree-item { display:flex; align-items:center; gap:8px; margin-left:32px; padding:6px 4px; min-height:32px; font-size:11px; text-decoration:none; }
.tree-item:hover { background:var(--field); }

/* Readable ink on tinted production badges; light sources keep their accepted hues. */
body[data-theme='light'] .badge, body[data-theme='light'] .item-tile { color:var(--ink); }
html[data-status-palette] body[data-theme='light'] .drawer-meta .state { color:var(--muted); }
.wf-title-row h1 { flex:1; }
.auth-form .btn-run { min-height:44px; }
/* The accepted daylight selection is a 5% wash: its idle label stays readable. */
body[data-theme='light'] .cube.active { background:color-mix(in srgb,var(--accent) 5%,var(--node)); }

/* A run's saved calls stay available within the catalog popup. */
.wf-calls > summary { display:flex; align-items:center; list-style:none; cursor:pointer; }
.wf-calls > summary::-webkit-details-marker { display:none; }
.wf-calls > summary > .twisty { display:grid; place-items:center; width:24px; height:32px; flex:0 0 24px; }
.wf-calls > summary .twisty .icon { width:14px; transition:transform .15s; }
.wf-calls[open] > summary .twisty .icon { transform:rotate(90deg); }
.wf-calls > summary > .wf-link { flex:1; min-width:0; }
.wf-nav.wf-children { padding-left:16px; margin:0; }

/* The installation empty state has no persistent sidebar beside it. */
.empty-state { width:min(480px,calc(100% - 32px)); margin:calc(56px + 4dvh) auto 16px; max-height:calc(96dvh - 72px); overflow:auto; }