orca.ui_style

comptime STYLE = ":root {\n  --bg: #fbf9f7; --surface: #ffffff; --border: #e3dcd4;\n  --text: #17151a; --muted: #6b645d; --faint: #948c84;\n  --ember: #c33c10; --lake: #0d6a70; --ok: #1f7a3d; --bad: #b42318;\n  --mono: ui-monospace, SFMono-Regular, \22SF Mono\22, Menlo, Consolas, monospace;\n  --sans: ui-sans-serif, system-ui, -apple-system, \22Segoe UI\22, Roboto, sans-serif;\n  color-scheme: light dark;\n}\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #0e0d11; --surface: #17161d; --border: #2a2833;\n    --text: #eeeae4; --muted: #a49d95; --faint: #7b746d;\n    --ember: #ff7a45; --lake: #4ecdc4; --ok: #5fd08a; --bad: #ff7b72;\n  }\n}\n* { box-sizing: border-box; }\nbody { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }\na { color: var(--lake); }\ncode, pre { font-family: var(--mono); font-size: 0.9em; }\npre { white-space: pre-wrap; }\n.top { display: flex; align-items: baseline; gap: 1.5rem; padding: 0.8rem 1rem;\n  border-bottom: 1px solid var(--border); background: var(--surface); }\n.top__brand { font-weight: 700; color: var(--ember); text-decoration: none; }\n.top nav { display: flex; gap: 1rem; }\n.top nav a { color: var(--muted); text-decoration: none; }\n.top nav a[aria-current] { color: var(--text); font-weight: 600; }\n.top__user { margin-left: auto; color: var(--muted); }\n.top__user form { display: inline; }\n.top__user button { font: inherit; color: var(--muted); background: none; border: 0;\n  padding: 0; cursor: pointer; text-decoration: underline; }\nform.login { display: grid; gap: 0.6rem; max-width: 20rem; }\nform.login input { display: block; width: 100%; }\n.error { color: var(--bad, #b3261e); }\nmain { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }\nh1 { font-size: 1.6rem; margin: 0.2rem 0 1rem; }\nh2 { font-size: 1.15rem; margin: 2rem 0 0.6rem; }\n.crumb { margin: 0; color: var(--muted); font-size: 0.875rem; }\n.muted, .empty { color: var(--muted); }\n.more { font-size: 0.875rem; }\n.scroll { overflow-x: auto; }\ntable { border-collapse: collapse; width: 100%; background: var(--surface);\n  border: 1px solid var(--border); font-size: 0.875rem; }\nth, td { text-align: left; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--border);\n  vertical-align: top; }\nth { color: var(--faint); font-weight: 600; font-size: 0.75rem; text-transform: uppercase;\n  letter-spacing: 0.05em; }\ntd { white-space: nowrap; }\ntd.error { white-space: normal; color: var(--bad); font-family: var(--mono); font-size: 0.8rem; max-width: 32rem; }\n.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.2rem; margin: 0; }\n.facts dt { color: var(--muted); }\n.facts dd { margin: 0; overflow-wrap: anywhere; }\n.status { font-family: var(--mono); font-size: 0.75rem; padding: 0.05rem 0.45rem;\n  border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }\n.status--succeeded { color: var(--ok); }\n.status--failed { color: var(--bad); }\n.status--running { color: var(--ember); }\n.status--queued, .status--pending, .status--skipped, .status--cancelled { color: var(--faint); }\n.filters { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end; margin-bottom: 1rem; }\n.filters label { display: grid; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }\ninput, button, select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--border);\n  border-radius: 4px; background: var(--surface); color: var(--text); }\nbutton { cursor: pointer; }\nbutton:hover { border-color: var(--lake); }\nbutton.danger { color: var(--bad); }\nbutton.danger:hover { border-color: var(--bad); }\n.actions { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: end; margin: 1rem 0; }\nform.action { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0; }\nform.action label { display: grid; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }\npre.log { background: var(--surface); border: 1px solid var(--border); padding: 0.8rem 1rem;\n  font-size: 0.8rem; line-height: 1.45; max-height: 70vh; overflow: auto; white-space: pre-wrap; }\npre.error { color: var(--bad); background: var(--surface); border: 1px solid var(--border);\n  border-left: 3px solid var(--bad); padding: 0.6rem 0.9rem; }\n.dag { display: block; margin: 0.5rem 0 0.5rem; font-family: var(--mono); }\n.dag rect { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }\n.dag__edge { fill: none; stroke: var(--faint); stroke-width: 1.5; }\n.dag__head { fill: var(--faint); }\n.dag__name { font-size: 13px; font-weight: 600; fill: var(--text); }\n.dag__kind { font-size: 11px; fill: var(--muted); }\n.dag a:hover rect { stroke: var(--lake); }\n.doc { font-size: 0.75rem; font-weight: 400; margin-left: 0.5rem; color: var(--faint); }\n.dag__box--succeeded rect { stroke: var(--ok); }\n.dag__box--failed rect { stroke: var(--bad); stroke-width: 2; }\n.dag__box--running rect { stroke: var(--ember); stroke-width: 2; }\n.dag__box--skipped rect, .dag__box--pending rect, .dag__box--queued rect,\n.dag__box--cancelled rect { stroke-dasharray: 4 3; }\nh2 .status { vertical-align: middle; margin-left: 0.4rem; }\n.graph { display: block; margin: 0.5rem 0; font-family: var(--mono); }\n.graph rect { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }\n.graph a:hover rect { stroke: var(--lake); }\n.graph__edge { fill: none; stroke: var(--faint); stroke-width: 1.5; }\n.graph__head { fill: var(--faint); }\n.graph__label { font-size: 13px; font-weight: 600; fill: var(--text); }\n.graph__sub { font-size: 11px; fill: var(--muted); }\n.graph__node--dataset rect { stroke: var(--lake); }\n.graph__node--pipeline rect { stroke: var(--ember); }\n.graph__node--source rect { stroke-dasharray: 4 3; }\n.graph__node--start rect { stroke: var(--ember); stroke-width: 2.5; }\n.tl { display: block; margin: 0.5rem 0; font-family: var(--mono); }\n.tl__lane, .tl__time { font-size: 11px; fill: var(--muted); }\n.tl__tick { stroke: var(--border); }\n.tl__count { fill: none; stroke: var(--lake); stroke-width: 2; }\n.tl--0 { fill: var(--lake); } .tl--1 { fill: var(--ember); } .tl--2 { fill: var(--ok); }\n.tl--3 { fill: #7a5af8; } .tl--4 { fill: #b54708; } .tl--5 { fill: #c11574; }\n.tl---1 { fill: var(--faint); }\n.runs--ok { fill: var(--ok); } .runs--bad { fill: var(--bad); } .runs--other { fill: var(--faint); }\n.runs--none { fill: transparent; }\n"