Spaces:
Restarting
Restarting
| /* Space page (web/js/space.js), the value renderer (render.js) and schema forms (schemaform.js). */ | |
| /* status */ | |
| .sp-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); display: inline-block; } | |
| .sp-chip.ok .dot { background: var(--ok); } .sp-chip.err .dot { background: var(--err); } .sp-chip.live .dot { background: var(--live); animation: sp-pulse 1.2s ease-in-out infinite; } | |
| @keyframes sp-pulse { 50% { opacity: .35; } } | |
| .sp-st { display: flex; align-items: center; gap: 9px; font-size: 15px; margin-bottom: 8px; } | |
| .sp-st-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; } | |
| .sp-st.ok .sp-st-dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); } | |
| .sp-st.err .sp-st-dot { background: var(--err); } | |
| .sp-st.live .sp-st-dot { background: var(--live); animation: sp-pulse 1.2s ease-in-out infinite; } | |
| .sp-st-note { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; } | |
| #sp-status .btn + .btn, #sp-status .btn.block + a.btn { margin-top: 8px; } | |
| #sp-st-msg .note-box { margin-top: 10px; } | |
| .sp-steps { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--faint); } | |
| .sp-steps li { display: flex; align-items: center; gap: 8px; } | |
| .sp-steps i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex: none; } | |
| .sp-steps li.done { color: var(--muted); } .sp-steps li.done i { background: var(--ok); border-color: var(--ok); } | |
| .sp-steps li.now { color: var(--text); font-weight: 500; } .sp-steps li.now i { border-color: var(--live); background: var(--live); animation: sp-pulse 1.2s ease-in-out infinite; } | |
| /* what it offers */ | |
| .sp-caps dd code { font-size: 12px; } | |
| .sp-caps dd { line-height: 1.8; } | |
| /* the app */ | |
| .sp-app { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); } | |
| .sp-app-bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--border); min-width: 0; } | |
| .sp-app-bar code { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } | |
| .sp-app-bar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dc); flex: none; } | |
| .sp-app-bar .icon-btn { width: 30px; height: 30px; flex: none; } | |
| .sp-app .space-app { border: 0; border-radius: 0; display: block; height: min(72vh, 680px); } | |
| .sp-app.full { position: fixed; inset: 14px; z-index: 1000; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); border-radius: var(--r-lg); } | |
| .sp-app.full .space-app { flex: 1; height: auto; } | |
| body:has(.sp-app.full) { overflow: hidden; } | |
| body:has(.sp-app.full)::after { content: ""; position: fixed; inset: 0; z-index: 990; background: color-mix(in srgb, #000 45%, transparent); } | |
| /* playground */ | |
| .pg { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; } | |
| .pg-ctl { display: grid; gap: 10px; position: sticky; top: calc(var(--header-h) + 12px); } | |
| .pg-sess { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--muted); background: var(--surface-2); min-height: 36px; } | |
| .pg-sess .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dc); flex: none; } | |
| .pg-sess > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .pg-sess b { color: var(--text); } | |
| .pg-opts { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; } | |
| .pg-opts[open] { padding-bottom: 10px; } | |
| .pg-opts-b { display: grid; gap: 8px; margin-top: 8px; } | |
| .pg-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; } | |
| .pg-act { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); } | |
| .pg-desc { font-size: 12.5px; color: var(--muted); margin: -2px 0 0; white-space: pre-line; } | |
| .pg-desc:empty { display: none; } | |
| .pg-confirm { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; cursor: pointer; } | |
| .pg-confirm input { margin-top: 2px; flex: none; } | |
| .pg-log { min-height: 300px; max-height: 76vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overscroll-behavior: contain; } | |
| .pg-empty { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 300px; padding: 24px; text-align: center; color: var(--muted); } | |
| .pg-empty .ic { color: var(--faint); } | |
| .pg-empty b { color: var(--text); } | |
| .pg-empty p { font-size: 13px; max-width: 380px; } | |
| .pg-entry { border-bottom: 1px solid var(--border); } | |
| .pg-entry:last-of-type { border-bottom: 0; } | |
| .pg-entry > summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; font-size: 12.5px; min-width: 0; } | |
| .pg-entry > summary::-webkit-details-marker { display: none; } | |
| .pg-entry > summary:hover { background: var(--surface-2); } | |
| .pg-op { font: 600 11px var(--mono); padding: 2px 7px; border-radius: 5px; background: var(--surface-2); color: var(--muted); text-transform: lowercase; flex: none; } | |
| .pg-op.reset { color: var(--live); background: color-mix(in srgb, var(--live) 12%, transparent); } | |
| .pg-op.call { color: var(--c-music, #7c4ee4); background: color-mix(in srgb, var(--c-music, #7c4ee4) 12%, transparent); } | |
| .pg-lbl { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } | |
| .pg-body { padding: 4px 14px 14px; } | |
| .pg-wait { color: var(--faint); font-size: 13px; padding: 6px 0; } | |
| .xs { font-size: 11.5px; } | |
| /* tasks */ | |
| .tk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } | |
| .tk-bar .seg { margin: 0; } | |
| .tk-pager { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } | |
| .tk-pager .icon-btn { width: 30px; height: 30px; border: 1px solid var(--border); } | |
| .tk-pager .icon-btn:disabled { opacity: .35; cursor: default; } | |
| .tk-pager span { min-width: 110px; text-align: center; } | |
| .tk-tbl { max-height: none; } | |
| .tk-tbl tbody tr { cursor: pointer; } | |
| .tk-tbl tbody tr:hover, .tk-tbl tbody tr.on { background: var(--surface-2); } | |
| .tk-tbl tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } | |
| .tk-tbl td { font-size: 12.5px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; } | |
| .tk-detail { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } | |
| .tk-detail-h { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 12.5px; } | |
| .tk-detail-h .btn { font-family: var(--font); } | |
| .tk-detail-h { min-width: 0; } | |
| .tk-title { flex: 1; min-width: 0; display: grid; gap: 4px; } | |
| .tk-title small { font: 12px var(--font); color: var(--muted); } | |
| .tk-title b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .tk-detail-h > button { flex: none; } | |
| .tk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px 0; } | |
| .tk-actions .primary { margin-left: auto; } | |
| .tk-inputs { display: grid; gap: 16px; padding: 6px 0 12px; min-width: 0; } | |
| .tk-inputs section { min-width: 0; overflow-wrap: anywhere; } | |
| .tk-inputs h3 { text-transform: capitalize; font-size: 12px; color: var(--muted); margin: 0 0 8px; } | |
| .tk-record { border-top: 1px solid var(--border); padding-top: 12px; font-size: 13px; min-width: 0; } | |
| .tk-record summary { cursor: pointer; color: var(--muted); padding-bottom: 8px; } | |
| .tk .seg { flex-wrap: wrap; max-width: 100%; } | |
| .tk .seg button { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } | |
| .tk-bar { flex-wrap: wrap; } | |
| .tk-detail .rv-kv dd, .tk-detail .rv-str { overflow-wrap: anywhere; } | |
| .tk-detail .note-box { margin-bottom: 12px; } | |
| .tk-detail-b { padding: 12px 14px; max-height: 560px; overflow: auto; } | |
| /* connect */ | |
| .sp-url { margin-bottom: 14px; } | |
| .sp-url-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); min-width: 0; } | |
| .sp-url-k { font: 700 10.5px var(--font); letter-spacing: .04em; color: var(--faint); flex: none; } | |
| .sp-url-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; } | |
| .sp-url .fine { margin-top: 8px; line-height: 1.7; } | |
| .sp-agents { flex-wrap: wrap; margin-bottom: 10px; } | |
| .sp-file { margin: 0 0 6px; } | |
| .sp-snip { position: relative; margin-bottom: 8px; } | |
| .sp-snip pre { margin: 0; padding-right: 44px; white-space: pre-wrap; overflow-wrap: anywhere; } | |
| .sp-snip .sp-copy { position: absolute; top: 6px; right: 6px; width: 30px; padding: 0; background: var(--surface); border: 1px solid var(--border); } | |
| .btn.ghost { background: transparent; } | |
| .mcp-tool > summary .link { margin-left: auto; font-size: 12px; } | |
| /* rich values */ | |
| .rv-kv { display: grid; grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); gap: 6px 14px; font-size: 13px; margin: 0; } | |
| .rv-kv > dt { color: var(--faint); font-family: var(--mono); font-size: 12px; padding-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } | |
| .rv-kv > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } | |
| .rv-kv details > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; } | |
| .rv-kv details[open] > summary { margin-bottom: 6px; } | |
| .rv-str { white-space: pre-wrap; } | |
| .rv-pre { margin: 0; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; font: 12px/1.55 var(--mono); | |
| white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; } | |
| .rv-text { font-size: 13.5px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; max-height: 420px; overflow: auto; } | |
| .rv-num, .rv-bool, .rv-null { font-family: var(--mono); font-size: 12.5px; } | |
| .rv-bool.true { color: var(--ok); } .rv-bool.false { color: var(--bad); } .rv-null { color: var(--faint); } | |
| .rv-faint { color: var(--faint); font-size: 12.5px; } | |
| .rv-list { display: inline-flex; flex-wrap: wrap; gap: 4px; } | |
| .rv-list span { font: 11.5px var(--mono); padding: 1px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); } | |
| .rv-ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; } | |
| .rv-img { max-width: min(100%, 520px); max-height: 420px; border-radius: 6px; border: 1px solid var(--border); background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 14px 14px; display: block; } | |
| .rv-video { display: block; max-width: 100%; max-height: 520px; } | |
| .rv-audio { width: min(100%, 420px); height: 36px; } | |
| .rv-table { overflow: auto; max-height: 420px; border: 1px solid var(--border); border-radius: 7px; } | |
| .rv-table table { border-collapse: collapse; font-size: 12px; width: 100%; } | |
| .rv-table th, .rv-table td { padding: 5px 9px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } | |
| .rv-table th { position: sticky; top: 0; background: var(--surface-2); font-weight: 600; font-family: var(--mono); font-size: 11.5px; color: var(--muted); } | |
| .rv-chat { display: grid; gap: 8px; } | |
| .rv-msg { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface); } | |
| .rv-msg.user { background: var(--surface-2); } | |
| .rv-msg.system { border-style: dashed; } | |
| .rv-role { display: block; font: 600 11px var(--mono); color: var(--faint); margin-bottom: 4px; text-transform: lowercase; } | |
| .rv-msg .rv-text, .rv-msg .rv-pre { background: none; border: 0; padding: 0; } | |
| .rv-call { font-size: 12px; margin-top: 6px; padding: 6px 8px; background: var(--surface-2); border-radius: 6px; overflow-wrap: anywhere; } | |
| .rv-obs-h { display: flex; gap: 8px; margin: 2px 0 10px; } | |
| .rv-obs-h:empty { display: none; } | |
| .rv-reward { font: 12px var(--mono); padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); } | |
| .rv-reward b { color: var(--text); } | |
| .rv-reward.pos { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .rv-reward.pos b { color: var(--ok); } | |
| .rv-reward.neg { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); } | |
| .rv-done { font: 12px var(--font); padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); } | |
| .rv-done.yes { color: var(--text); font-weight: 600; } | |
| .rv-done.err { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); } | |
| /* schema forms */ | |
| .sf { display: grid; gap: 10px; } | |
| .sf-f > span { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; } | |
| .sf-f > span code { font-size: 12px; font-weight: 600; } | |
| .sf-f > span em { font-style: normal; font-size: 11.5px; color: var(--faint); } | |
| .sf-check { display: inline-flex; align-items: center; gap: 8px; font: 12.5px var(--mono); color: var(--muted); } | |
| .sf-none { font-size: 12.5px; color: var(--faint); } | |
| .sf textarea.input { resize: vertical; min-height: 60px; font-size: 12.5px; } | |
| @media (max-width: 980px) { | |
| .pg { grid-template-columns: minmax(0, 1fr); } | |
| .pg-ctl { position: static; } | |
| .pg-log { max-height: none; } | |
| } | |
| @media (max-width: 560px) { | |
| .rv-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } | |
| .rv-kv > dt { max-width: none; margin-top: 6px; } | |
| .pg-row { grid-template-columns: 1fr 1fr; } | |
| .tk-pager span { min-width: 80px; } | |
| .sp-app.full { inset: 0; border-radius: 0; } | |
| } | |
| .sp-app-frame { position: relative; } | |
| .sp-app-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; | |
| background: var(--surface-2); transition: opacity .25s; pointer-events: none; } | |
| .sp-app-frame.loaded .sp-app-load { opacity: 0; } | |
| .sp-app.full .sp-app-frame { flex: 1; display: flex; flex-direction: column; } | |
| .pg-entry > summary .xs, .pg-entry > summary .rv-reward { white-space: nowrap; flex: none; } | |
| .mcp-tool > summary .d { order: 3; } | |
| .mcp-tool > summary .link { order: 2; } | |
| /* environment pages (env.js) and task pages (task.js), any format */ | |
| .rw-how { margin-bottom: 14px; } | |
| .rw-about { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; max-width: 900px; } | |
| .rw-about:last-child { margin-bottom: 0; } | |
| .rw-about b { color: var(--text); } | |
| .rw-roles { gap: 6px 16px; } | |
| .rw-roles dd code { font-size: 12px; } | |
| .rw-wide { grid-column: 1 / -1; list-style: none; } | |
| #note .note-box { margin-bottom: 10px; } | |
| .results-head .grow { flex: 1; } | |
| .layout.bare { grid-template-columns: minmax(0, 1fr); } | |
| .layout.bare > .filters, .layout.bare > .sheet-scrim { display: none; } | |
| .tb-sub select { height: 40px; min-width: 170px; max-width: 260px; } | |
| .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } | |
| .chip.fw { color: var(--text); border: 1px solid var(--border-strong); background: transparent; font-weight: 500; } | |
| .tp-nav { display: inline-flex; align-items: center; gap: 6px; } | |
| .tp-nav span { font-variant-numeric: tabular-nums; } | |
| .tp-nav .btn { width: 30px; height: 28px; padding: 0; } | |
| .tp-nav .btn.disabled { opacity: .35; pointer-events: none; } | |
| .tp-links { display: grid; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; } | |
| .tp-links p { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0; color: var(--muted); } | |
| .tp-links p > svg { flex: none; align-self: center; color: var(--faint); } | |
| /* blocks (blocks.js) */ | |
| .panel-b > * + .kv, .panel-b > .kv + * { margin-top: 14px; } | |
| .bl-label { margin-top: 16px; display: flex; align-items: center; gap: 8px; } | |
| .bl-note { margin: 10px 0 0; display: flex; gap: 6px; align-items: baseline; } | |
| .bl-note > svg { flex: none; align-self: center; color: var(--faint); } | |
| .bl-steps { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; } | |
| .bl-disclose { margin-top: 12px; } | |
| .panel-b > .bl-files:first-child { margin-top: 0; } | |
| label.check { display: flex; align-items: center; gap: 8px; font-size: 13px; } | |
| label.check em { font-style: normal; color: var(--faint); font-size: 12px; } | |
| .sp-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } | |
| .sp-way { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; } | |
| .sp-way > b { display: flex; align-items: center; gap: 6px; font-size: 13px; } | |
| .sp-way p { font-size: 12.5px; color: var(--muted); margin: 0; } | |
| .sp-way .btn { justify-self: start; } | |
| @media (max-width: 760px) { .sp-ways { grid-template-columns: 1fr; } } | |
| /* one column (≤1024px, app.css): on Space and row pages the status (or the run box) comes first, the facts after the content */ | |
| @media (max-width: 1024px) { | |
| .tp-side.split { display: contents; } | |
| .tp-side.split > .first { order: -1; } | |
| .tp-side.split > .last { order: 2; } | |
| } | |
| @media (max-width: 760px) { | |
| .rw-roles { grid-template-columns: auto minmax(0, 1fr); } | |
| .rw-roles dt { margin: 0; } | |
| } | |
| .rv-clip { position: relative; } | |
| .rv-tog { position: absolute; opacity: 0; pointer-events: none; } | |
| .rv-clip-b { max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); } | |
| .rv-tog:checked + .rv-clip-b { max-height: none; -webkit-mask-image: none; mask-image: none; } | |
| .rv-more { display: inline-flex; margin-top: 4px; font-size: 12px; color: var(--focus); cursor: pointer; } | |
| .rv-more .c, .rv-tog:checked ~ .rv-more .o { display: none; } | |
| .rv-tog:checked ~ .rv-more .c { display: inline; } | |
| .rv-tog:focus-visible ~ .rv-more { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } | |
| .rv-clip-b .rv-text, .rv-clip-b .rv-pre { max-height: none; } | |
| .pg-modes { margin: 0; } | |
| .pg-modes button { flex: 1; justify-content: center; } | |
| .cn-wrap .cn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; max-width: 900px; } | |
| .cn-wrap .sp-url .fine { margin: 6px 0 0; } | |
| /* an overview section folded until opened (env.js) */ | |
| .ov-fold { margin-bottom: 14px; } | |
| .ov-fold > summary { cursor: pointer; list-style: none; } | |
| .ov-fold > summary::-webkit-details-marker { display: none; } | |
| .ov-fold > summary .chev { transition: transform .15s; color: var(--faint); flex: none; } | |
| .ov-fold[open] > summary .chev { transform: rotate(90deg); } | |
| .ov-fold:not([open]) > summary { border-bottom: 0; } | |
| .bl-stats { margin: 0 0 14px; } | |
| .bl-custom + .bl-custom { margin-top: 14px; } | |
| /* community filters on a phone: the search takes its own line, the selects share the next ones */ | |
| @media (max-width: 760px) { | |
| .cm-filters .search { flex: 1 1 100%; } | |
| .cm-filters .input, .cm-filters .cm-more { flex: 1 1 140px; min-width: 140px; } | |
| .cm-filters .cm-more > summary { width: 100%; justify-content: center; } | |
| } | |
| /* ── Space page: header, interface, sources (space.js) ── */ | |
| /* the facts line: a status word with a small dot, then facts split by a middle dot */ | |
| /* every fact has a leading dot; the one starting each line is clipped off, so no line starts or ends with one */ | |
| .sp-facts { display: block; overflow: hidden; } | |
| .sp-fi { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; margin-left: -18px; } | |
| .sp-fi > * { display: inline-flex; align-items: center; gap: 6px; } | |
| .sp-fi > *::before { content: "·"; color: var(--faint); width: 18px; margin-right: -6px; text-align: center; flex: none; } | |
| .sp-facts code { font-size: 12px; } | |
| .sp-facts .sk.line { width: 120px; display: inline-block; vertical-align: middle; } | |
| .sp-state { display: inline-flex; align-items: center; gap: 6px; color: var(--text); } | |
| .sp-state .dot { --dc: var(--faint); } | |
| .sp-state.ok .dot { --dc: var(--ok); } .sp-state.err .dot { --dc: var(--err); } | |
| .sp-state.live .dot { --dc: var(--live); animation: sp-pulse 1.2s ease-in-out infinite; } | |
| .sp-links { gap: 6px 16px; font-size: 13px; } | |
| .sp-links a, .sp-links .link { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); } | |
| .sp-links a:hover { color: var(--text); } | |
| .sp-links .ic { color: var(--faint); } | |
| /* where a fact comes from: live, last seen, or a file at a revision */ | |
| .sp-src { font-size: 11.5px; color: var(--faint); white-space: nowrap; } | |
| .sp-src code { font-size: 11px; color: var(--faint); background: none; padding: 0; } | |
| .sp-src a, a.sp-fl { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; } | |
| .sp-src a:hover, a.sp-fl:hover { color: var(--text); text-decoration-color: currentColor; } | |
| .sp-if { gap: 10px 20px; } | |
| .sp-if dd { display: grid; gap: 4px; min-width: 0; } | |
| .if-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; line-height: 1.7; } | |
| .if-v > span:first-child { min-width: 0; overflow-wrap: anywhere; } | |
| .if-v code { font-size: 12px; } | |
| .sp-note { margin: 12px 0 0; display: flex; gap: 6px; align-items: baseline; } | |
| .sp-after { margin-top: 10px; } | |
| .sp-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 8px; font-size: 13px; } | |
| .sp-sub b { font-weight: 600; } | |
| .sp-sub b code { font-size: 12px; font-weight: 600; } | |
| * + .sp-sub { margin-top: 16px; } | |
| .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; } | |
| /* the playground while it sleeps, the app until it's opened */ | |
| .sp-asleep { display: grid; gap: 10px; justify-items: start; } | |
| .sp-asleep p { margin: 0; } | |
| .sp-wait-line { display: flex; align-items: center; gap: 8px; } | |
| .sp-msg:empty { display: none; } | |
| .sp-msg .note-box { margin-top: 10px; } | |
| .sp-app-off { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 8px 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); min-width: 0; } | |
| .sp-app-off code { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 160px; } | |
| .sp-app-off .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dc); flex: none; } | |
| .sp-app-off .grow { display: none; } | |
| /* rewards, schemas */ | |
| .sp-rw dd { min-width: 0; overflow-wrap: anywhere; line-height: 1.7; } | |
| .sp-rw .sp-src { margin-left: 6px; } | |
| .sp-fns { margin-top: 2px; } | |
| .sp-block { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 8px; min-width: 0; } | |
| .sp-bk { font-weight: 600; font-size: 12px; justify-self: start; } | |
| .sp-more { margin-top: 4px; } | |
| .sp-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } | |
| .sp-more > summary::-webkit-details-marker { display: none; } | |
| .sp-more > summary .chev { transition: transform .15s; color: var(--faint); } | |
| .sp-more[open] > summary .chev { transform: rotate(90deg); } | |
| .sp-more-b { margin-top: 12px; } | |
| /* files: the environment's own files first, then the tree */ | |
| .sp-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; font-size: 12.5px; font-family: var(--mono); } | |
| .sp-files { min-width: 0; } | |
| /* connect, conformance */ | |
| .sp-tabs { flex-wrap: wrap; } | |
| .sp-cf-note { margin: 0 0 10px; } | |
| .sp-cf td:first-child { min-width: 200px; } | |
| .sp-cfs { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; } | |
| .sp-cfs .dot { --dc: var(--faint); } | |
| .sp-cfs.pass .dot { --dc: var(--ok); } .sp-cfs.fail .dot { --dc: var(--err); } | |
| .sp-crit { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; } | |
| .sp-crit code { font-size: 12px; } | |
| @media (max-width: 560px) { | |
| .sp-if { grid-template-columns: minmax(0, 1fr); gap: 2px; } | |
| .sp-if dt { margin-top: 10px; } | |
| .sp-if dt:first-child { margin-top: 0; } | |
| .sp-rw { grid-template-columns: minmax(0, 1fr); gap: 2px; } | |
| .sp-rw dt { margin-top: 8px; } | |
| } | |
| /* ── field tables (space.js fieldTable): a name and a type never break inside a word ── */ | |
| .sp-cq { container-type: inline-size; } | |
| .sp-doc { font-size: 13px; color: var(--muted); margin: 0 0 8px; max-width: 900px; } | |
| .sp-doc p { margin: 0 0 6px; } | |
| .sp-doc code { font-size: 12px; } | |
| .sp-ft { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); margin-bottom: 16px; overflow-x: auto; } /* a schema too deep to fit scrolls; nothing is hidden */ | |
| .sp-ft.sub { margin: 8px 0 4px; } | |
| .sp-ft table { width: 100%; border-collapse: collapse; font-size: 12.5px; } | |
| .sp-ft th, .sp-ft td { padding: 7px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: normal; word-break: normal; } | |
| .sp-ft tbody tr:last-child > td { border-bottom: 0; } | |
| .sp-ft th { background: var(--surface-2); color: var(--muted); font-weight: 600; white-space: nowrap; } | |
| .sp-ft .ft-n { white-space: nowrap; width: 1%; } | |
| .sp-ft .ft-n code { font-weight: 600; } | |
| .sp-ft .ft-s { white-space: nowrap; width: 1%; } | |
| .sp-ft .ft-t { width: 26%; min-width: 120px; } | |
| .sp-ft .ft-d { overflow-wrap: anywhere; color: var(--text); line-height: 1.55; } | |
| /* a type (a long union, an OpenAI request type nested six deep) wraps; a field's name still never breaks */ | |
| .sp-ft .ft-s:not(.ft-n) { white-space: normal; min-width: 90px; } | |
| .sp-ft .ft-s code { overflow-wrap: anywhere; } | |
| .sp-ft .ft-d code, .sp-ft .ft-t code { font-size: 12px; } | |
| .ft-tag { display: block; font-size: 11.5px; color: var(--faint); font-family: var(--font); white-space: normal; margin-top: 2px; } | |
| .ft-ty { display: inline; } | |
| .ft-ty code { white-space: nowrap; } | |
| .ft-or { color: var(--faint); padding: 0 4px; } | |
| .ft-or::after { content: "\200B"; } /* "a|b|c" has no space to break at: a union wraps after each bar, never inside a name */ | |
| .ft-enum { display: flex; flex-wrap: wrap; gap: 3px 4px; margin-top: 5px; } | |
| .ft-enum code { font-size: 11.5px; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; } | |
| .ft-def { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; } | |
| .sp-ft tr.ft-sub > td { background: var(--surface-2); padding: 6px 12px 8px; } | |
| .sp-ft tr.ft-sub summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } | |
| .sp-ft tr.ft-sub summary::-webkit-details-marker { display: none; } | |
| .sp-ft tr.ft-sub summary .chev { transition: transform .15s; color: var(--faint); } | |
| .sp-ft tr.ft-sub details[open] > summary .chev { transform: rotate(90deg); } | |
| .sp-ft.sp-grid .ft-s { white-space: normal; min-width: 70px; } | |
| .sp-ft.sp-cf td:first-child code { white-space: nowrap; } | |
| /* one block per field when the column is narrow */ | |
| @container (max-width: 540px) { | |
| .sp-ft thead { display: none; } | |
| .sp-ft table, .sp-ft tbody { display: block; } | |
| .sp-ft tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 9px 12px; border-bottom: 1px solid var(--border); } | |
| .sp-ft tbody tr:last-child { border-bottom: 0; } | |
| .sp-ft td { display: block; padding: 0; border: 0; width: auto ; min-width: 0; } | |
| .sp-ft td.ft-d { grid-column: 1 / -1; } | |
| .sp-ft .ft-n, .sp-ft .ft-s { white-space: normal; } | |
| .sp-ft .ft-n code, .sp-ft .ft-ty code { overflow-wrap: anywhere; white-space: normal; } | |
| .sp-ft tr.ft-sub { display: block; } | |
| .sp-ft tr.ft-sub > td { display: block; } | |
| } | |
| /* ── the playground: controls, then what came back (space.js obsView) ── */ | |
| .pg { grid-template-columns: minmax(0, 1fr); } | |
| .pg-ctl { position: static; } | |
| @container (min-width: 640px) { | |
| .pg { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); } | |
| .pg-ctl { position: sticky; top: calc(var(--header-h) + 12px); } | |
| } | |
| .pg-log { max-height: none; overflow: visible; min-height: 240px; } | |
| .pg-entry > summary { border-radius: var(--r); } | |
| .pg-body { padding: 4px 14px 14px; min-width: 0; } | |
| .pgv { display: grid; gap: 12px; min-width: 0; } | |
| .pgv.sub { gap: 8px; } | |
| .pgv-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; font-size: 13px; color: var(--muted); margin: 4px 0 12px; } | |
| .pgv-status > * + *::before { content: "·"; color: var(--faint); padding: 0 8px; } | |
| .pgv-status b { color: var(--text); font-weight: 600; } | |
| .pgv-rw.pos b { color: var(--ok); } .pgv-rw.neg b { color: var(--err); } | |
| .pgv-said { color: var(--text); overflow-wrap: break-word; min-width: 0; } | |
| .pgv-err { color: var(--err); font-weight: 600; } | |
| .pgv-sec { display: grid; gap: 4px; min-width: 0; } | |
| .pgv-k { font: 600 11.5px var(--mono); color: var(--faint); } | |
| .pgv-txt { white-space: pre-wrap; overflow-wrap: break-word; font-size: 13.5px; line-height: 1.6; color: var(--text); } | |
| .pgv-md { font-size: 13.5px; } | |
| .pgv-media img, .pgv-media .rv-img { max-width: 100%; max-height: 520px; height: auto; } | |
| .pgv-val { min-width: 0; overflow-wrap: break-word; font-size: 13px; } | |
| .pgv-val .rv-table { max-height: none; } | |
| .pgv-val .rv-pre, .pgv-val .rv-text { max-height: none; overflow: visible; } | |
| .pgv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; } | |
| .pgv-grid > div { min-width: 0; } | |
| .pgv-grid > div.wide { grid-column: span 2; } | |
| .pgv-grid dt { font: 11.5px var(--mono); color: var(--faint); overflow-wrap: anywhere; } | |
| .pgv-grid dd { margin: 1px 0 0; font-size: 13px; overflow-wrap: break-word; min-width: 0; } | |
| .pgv-num { font: 12.5px var(--mono); } | |
| .pgv-list { display: flex; flex-wrap: wrap; gap: 3px 4px; } | |
| .pgv-list code { font-size: 11.5px; padding: 0 5px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); } | |
| .pgv-inl { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; } | |
| .pgv-inl i { font-style: normal; color: var(--faint); font-family: var(--mono); font-size: 11.5px; } | |
| .pgv-fold { position: relative; } | |
| .pgv-tog { position: absolute; opacity: 0; pointer-events: none; } | |
| .pgv-fold-b { max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); } | |
| .pgv-tog:checked + .pgv-fold-b { max-height: none; -webkit-mask-image: none; mask-image: none; } | |
| .pgv-more { display: inline-flex; margin-top: 4px; font-size: 12px; color: var(--focus); cursor: pointer; } | |
| .pgv-more .c, .pgv-tog:checked ~ .pgv-more .o { display: none; } | |
| .pgv-tog:checked ~ .pgv-more .c { display: inline; } | |
| .pgv-tog:focus-visible ~ .pgv-more { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } | |
| .tk-detail-b { max-height: none; overflow: visible; } | |
| @container (max-width: 420px) { .pgv-grid > div.wide { grid-column: auto; } .pgv-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } | |
| .sp-cq .sec-label code { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); } | |
| .pg-ctl, .pg-log { min-width: 0; } | |
| /* the controls' one column is the track's width, never its widest content: a long task id (an OCR bench's | |
| "nayana-c1.867c99…") or a long split name truncates instead of pushing every control over the results */ | |
| .pg-ctl { grid-template-columns: minmax(0, 1fr); } | |
| .pg-ctl > * { min-width: 0; } | |
| .pg-row { min-width: 0; } | |
| .pg-row > * { min-width: 0; } | |
| /* the same for what came back: one-column grids are the pane's width, and a long token (a path, a hash, an id) breaks | |
| anywhere instead of widening its column past the pane ("break-word" doesn't lower a grid's minimum; "anywhere" does) */ | |
| .pgv, .pgv-sec, .pg-body { grid-template-columns: minmax(0, 1fr); } | |
| .pgv-txt, .pgv-said, .pgv-val, .pgv-grid dd, .pg-sess code { overflow-wrap: anywhere; } | |
| .pg-ctl .input, .pg-ctl select, .pg-ctl textarea { min-width: 0; max-width: 100%; } | |
| .pg-ctl .field > span { flex-wrap: wrap; } | |
| .pg-entry > summary .rv-reward { background: none; padding: 0; font-weight: 600; } | |
| .sp-cq .sp-shot { max-height: 260px; } | |