mirror of
https://github.com/razzant/ouroboros.git
synced 2026-10-03 20:27:56 +00:00
f552e4263e
`.available-subagent-route` and `.settings-custom-secret-row` pinned pixel track minimums that only the <=760px media query rescued; the Settings column is the window minus the sidebar, so at 761-980px windows the Agents and Secrets bodies scrolled sideways in every engine (+106 / +97 px at 780). The route grid now wraps with `repeat(auto-fit, minmax(min(100%, 130px), 1fr))`, the secret row shrinks its two fields with `minmax(0, ...)` while Remove keeps its own width, and the wizard's route grid mirrors the change; the media collapses stay. `tests/test_ui_settings_grid_tracks_browser.py` pins both tabs at 780px and the one-row route layout at 1280px (Chromium; the class is engine-independent).
1283 lines
26 KiB
CSS
1283 lines
26 KiB
CSS
:root {
|
|
--bg: #0b0910;
|
|
--panel: rgba(20, 18, 28, 0.92);
|
|
--panel-2: rgba(255, 255, 255, 0.04);
|
|
--panel-3: rgba(255, 255, 255, 0.03);
|
|
--border: rgba(255, 255, 255, 0.10);
|
|
--border-strong: rgba(201, 53, 69, 0.35);
|
|
--text: #edf2f7;
|
|
--muted: var(--text-meta);
|
|
--ghost: rgba(255, 255, 255, 0.28);
|
|
--shadow: 0 28px 64px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
padding: 16px;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(201, 53, 69, 0.12), transparent 35%),
|
|
radial-gradient(circle at top right, rgba(232, 121, 249, 0.12), transparent 30%),
|
|
var(--bg);
|
|
color: var(--text);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--ghost);
|
|
}
|
|
|
|
.wizard-shell {
|
|
max-width: 1080px;
|
|
min-height: calc(100vh - 32px);
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
padding: 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
|
|
backdrop-filter: blur(18px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.wizard-header {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
/* Was a one-off 32px (plus a 28px compact variant); joins the scale. */
|
|
.wizard-title {
|
|
margin: 0 0 4px;
|
|
font-size: var(--type-page);
|
|
line-height: var(--line-title);
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.wizard-subtitle {
|
|
margin: 0;
|
|
max-width: 760px;
|
|
color: var(--muted);
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-body);
|
|
}
|
|
|
|
.wizard-badge {
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
background: var(--panel-2);
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* One row of equal columns for HOWEVER many steps the setup contract declares.
|
|
A hardcoded column count wrapped the moment a step was added (the Agents step
|
|
pushed "Review before launch" onto a second row of its own). */
|
|
.wizard-steps {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.wizard-step {
|
|
min-width: 0;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
background: var(--panel-2);
|
|
transition: border-color 120ms ease, background 120ms ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.wizard-step.active {
|
|
border-color: var(--border-strong);
|
|
background: var(--accent-08);
|
|
box-shadow: inset 0 0 0 1px var(--accent-12);
|
|
}
|
|
|
|
.wizard-step.done {
|
|
border-color: rgba(34, 197, 94, 0.22);
|
|
}
|
|
|
|
.wizard-step-index {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 0;
|
|
padding: 4px 9px;
|
|
border-radius: 999px;
|
|
background: var(--status-neutral-bg);
|
|
color: var(--status-neutral-fg);
|
|
font-size: var(--type-meta);
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.wizard-step.active .wizard-step-index {
|
|
background: var(--accent-18);
|
|
color: var(--text);
|
|
}
|
|
|
|
.wizard-step-title {
|
|
margin: 0;
|
|
font-size: var(--type-meta);
|
|
font-weight: 600;
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
.wizard-step-copy {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.wizard-steps {
|
|
display: flex;
|
|
gap: 10px;
|
|
overflow-x: auto;
|
|
padding: 0 2px 4px;
|
|
scroll-snap-type: x proximity;
|
|
}
|
|
|
|
.wizard-step {
|
|
flex: 0 0 min(180px, calc(45vw - 18px));
|
|
scroll-snap-align: start;
|
|
}
|
|
}
|
|
|
|
.wizard-content {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
border: 1px solid var(--border);
|
|
background: var(--panel);
|
|
}
|
|
|
|
.step-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.step-title {
|
|
margin: 0 0 6px;
|
|
font-size: var(--type-page);
|
|
line-height: var(--line-title);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.step-copy {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
max-width: 780px;
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-body);
|
|
}
|
|
|
|
.panel-card,
|
|
.summary-card,
|
|
.wizard-choice,
|
|
.wizard-collapse,
|
|
.wizard-runtime-strip {
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: var(--panel-3);
|
|
}
|
|
|
|
.panel-card,
|
|
.summary-card,
|
|
.wizard-choice,
|
|
.wizard-runtime-strip {
|
|
padding: 14px;
|
|
}
|
|
|
|
.panel-card h3,
|
|
.summary-card h3,
|
|
.wizard-choice h3 {
|
|
margin: 0 0 8px;
|
|
font-size: var(--type-section);
|
|
line-height: var(--line-title);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.panel-card p,
|
|
.wizard-choice p,
|
|
.wizard-inline-note,
|
|
.field-note {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
.wizard-inline-note code,
|
|
.field-note code {
|
|
padding: 1px 4px;
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.grid.two {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.grid.three {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.field-grid,
|
|
.wizard-choice-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
|
|
|
|
.field-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.field-label-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Uppercase micro-label retired (docs/DESIGN.md "Hierarchy rule"). */
|
|
.field label {
|
|
color: var(--text-meta);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
font-weight: 600;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.field-clear {
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-meta);
|
|
cursor: pointer;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
.field-clear:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
|
|
.compatible-model-actions,
|
|
.compatible-model-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.compatible-model-actions {
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.compatible-model-list {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.compatible-load-status {
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
.selection-row,
|
|
.footer-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.selection-pill {
|
|
border: 1px solid var(--border);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: var(--text);
|
|
padding: 10px 14px;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.selection-pill:hover {
|
|
border-color: rgba(255, 255, 255, 0.24);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.selection-pill.active {
|
|
background: var(--accent-dim);
|
|
border-color: var(--border-strong);
|
|
}
|
|
|
|
.wizard-collapse {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wizard-collapse summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.wizard-collapse summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.wizard-collapse-body {
|
|
padding: 0 14px 14px;
|
|
}
|
|
|
|
.selection-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 5px 10px;
|
|
border-radius: 999px;
|
|
background: var(--status-neutral-bg);
|
|
color: var(--status-neutral-fg);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wizard-choice-grid.three {
|
|
/* Runtime-mode picker for contracts with three choices. */
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.wizard-choice-grid.four {
|
|
/* Cyber Pro adds a fourth access level to the same independent picker. */
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.wizard-choice {
|
|
cursor: pointer;
|
|
transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.wizard-choice:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.wizard-choice.active {
|
|
border-color: var(--border-strong);
|
|
background: var(--accent-08);
|
|
}
|
|
|
|
/* Choice-card chip. Only advisory/blocking declared a pair, so the three
|
|
runtime-mode chips rendered as bare white text; neutral is now the default. */
|
|
.wizard-choice .tone {
|
|
display: inline-flex;
|
|
margin-bottom: 10px;
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
background: var(--status-neutral-bg);
|
|
color: var(--status-neutral-fg);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.wizard-choice.advisory .tone {
|
|
background: var(--status-warn-bg);
|
|
color: var(--status-warn-fg);
|
|
}
|
|
|
|
.wizard-choice.blocking .tone {
|
|
background: var(--status-ok-bg);
|
|
color: var(--status-ok-fg);
|
|
}
|
|
|
|
.wizard-runtime-strip {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.wizard-runtime-status {
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
.wizard-runtime-status[data-tone="muted"] {
|
|
color: var(--status-neutral-fg);
|
|
}
|
|
|
|
.wizard-runtime-status[data-tone="ok"] {
|
|
color: var(--status-ok-fg);
|
|
}
|
|
|
|
.wizard-runtime-status[data-tone="error"] {
|
|
color: var(--status-error-fg);
|
|
}
|
|
|
|
/* Status = dot + text, matching the settings shell. */
|
|
.wizard-runtime-status[data-tone]::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-right: 7px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.wizard-test-result {
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-body);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.wizard-test-result[hidden] { display: none; }
|
|
|
|
.wizard-test-result[data-tone="ok"] {
|
|
border-color: rgba(34, 197, 94, 0.22);
|
|
color: var(--status-ok-fg);
|
|
}
|
|
|
|
.wizard-test-result[data-tone="warn"] {
|
|
border-color: rgba(245, 158, 11, 0.18);
|
|
color: var(--status-warn-fg);
|
|
}
|
|
|
|
.wizard-test-result[data-tone="error"] {
|
|
border-color: rgba(239, 68, 68, 0.18);
|
|
color: var(--status-error-fg);
|
|
}
|
|
|
|
.summary-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Key at meta ink, value at primary (docs/DESIGN.md "Hierarchy rule"). */
|
|
.summary-kv {
|
|
display: grid;
|
|
grid-template-columns: 200px minmax(0, 1fr);
|
|
gap: 10px;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
color: var(--text);
|
|
align-items: start;
|
|
}
|
|
|
|
.summary-kv strong {
|
|
color: var(--text-meta);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wizard-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer-copy {
|
|
max-width: 640px;
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
|
|
.wizard-error {
|
|
min-height: 22px;
|
|
color: var(--status-error-fg);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
Agents step (phase 3C). Semantics in docs/DESIGN.md §7 (onboarding density)
|
|
and §6 (row anatomy): one primary thing per row, meta ink for everything
|
|
else, and the artwork — not the ladder — is what a short viewport drops.
|
|
--------------------------------------------------------------------------- */
|
|
|
|
/* The figure column is sized to the diagram's own coordinate space, so its
|
|
labels render at the meta size instead of being scaled to illegibility. */
|
|
.agent-ladder-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
|
|
gap: 18px;
|
|
align-items: start;
|
|
}
|
|
|
|
.agent-ladder {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.agent-rung {
|
|
display: grid;
|
|
grid-template-columns: 62px minmax(0, 1fr);
|
|
gap: 10px;
|
|
align-items: start;
|
|
}
|
|
|
|
.agent-rung-tone {
|
|
justify-self: start;
|
|
padding: 2px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
background: var(--status-neutral-bg);
|
|
color: var(--status-neutral-fg);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
/* The last rung is the destination the owner is being shown, so it is the one
|
|
place on this step that carries the connected colour. */
|
|
.agent-rung:last-child .agent-rung-tone {
|
|
border-color: rgba(34, 197, 94, 0.32);
|
|
background: var(--status-ok-bg);
|
|
color: var(--status-ok-fg);
|
|
}
|
|
|
|
.agent-rung-text,
|
|
.agent-rung-title,
|
|
.agent-rung-body,
|
|
.agent-family-identity,
|
|
.agent-family-name,
|
|
.agent-family-status {
|
|
display: block;
|
|
}
|
|
|
|
.agent-rung-title {
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-title);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.agent-rung-body {
|
|
margin-top: 2px;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-body);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.agent-ladder-note {
|
|
margin-top: 10px;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-body);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
/* The rotation diagram. Every stroke is currentColor so the figure inherits the
|
|
wizard's ink; the accent is spent once, on the thing everything points at. */
|
|
.agents-rotation-figure {
|
|
margin: 0;
|
|
}
|
|
|
|
.agents-rotation-svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.agents-rotation-ink {
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.agents-rotation-ink text {
|
|
fill: currentColor;
|
|
stroke: none;
|
|
font-family: inherit;
|
|
font-size: var(--type-meta);
|
|
}
|
|
|
|
.agents-rotation-sub {
|
|
opacity: 0.62;
|
|
}
|
|
|
|
.agents-rotation-group {
|
|
stroke-dasharray: 4 4;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.agents-rotation-more {
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.agents-rotation-fill {
|
|
fill: currentColor;
|
|
stroke: none;
|
|
}
|
|
|
|
.agents-rotation-core {
|
|
stroke: var(--accent);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.agents-rotation-core-label {
|
|
font-weight: 600;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
/* One equivalent row per agent family: name + status on the left, its own
|
|
Connect on the right. No family is laid out differently for being first. */
|
|
.agent-family-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.agent-family-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 7px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: var(--panel-3);
|
|
}
|
|
|
|
.agent-family-name {
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-title);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.agent-family-status {
|
|
margin-top: 2px;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
color: var(--status-neutral-fg);
|
|
}
|
|
|
|
.agent-family-status[data-tone="ok"] { color: var(--status-ok-fg); }
|
|
.agent-family-status[data-tone="warn"] { color: var(--status-warn-fg); }
|
|
.agent-family-status[data-tone="error"] { color: var(--status-error-fg); }
|
|
|
|
.agent-family-status[data-tone]::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-right: 7px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.agent-service-note,
|
|
.agent-outcome {
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-body);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.agent-family-purpose {
|
|
color: var(--text-meta);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
.agent-family-heading {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: var(--space-2);
|
|
}
|
|
.wizard-footer [hidden] { display: none; }
|
|
.wizard-content .settings-section-copy {
|
|
font-size: var(--type-body);
|
|
color: var(--text-meta);
|
|
line-height: var(--line-body);
|
|
margin-block: var(--space-2);
|
|
}
|
|
.wizard-content .reviewer-slots-group { margin-block: var(--space-3); }
|
|
.wizard-content .reviewer-slot-controls > input,
|
|
.wizard-content .reviewer-slot-controls > select { min-width: 0; }
|
|
.subscription-quota-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
margin-block: var(--space-2);
|
|
font-size: var(--type-body);
|
|
color: var(--text-primary);
|
|
}
|
|
.subscription-quota-row > span {
|
|
font-size: var(--type-meta);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.agent-service-note {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.agent-service-note[data-tone="warn"] { color: var(--status-warn-fg); }
|
|
.agent-service-note[data-tone="error"] { color: var(--status-error-fg); }
|
|
|
|
.agent-outcome {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Mirror of the settings.css compact card (docs/DESIGN.md §6 row anatomy):
|
|
the wizard loads only this sheet. Same rhythm tokens, the wizard's own
|
|
surface tokens. */
|
|
.available-subagents-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
.available-subagents-toolbar,
|
|
.available-subagent-head,
|
|
.available-subagent-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.available-subagents-toolbar .btn-default,
|
|
.available-subagent-actions { margin-left: auto; }
|
|
|
|
.available-subagents-count,
|
|
.available-subagents-source,
|
|
.available-subagents-diagnostics,
|
|
.available-subagents-empty,
|
|
.available-subagent-meta {
|
|
color: var(--text-meta);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-body);
|
|
}
|
|
|
|
.available-subagents-diagnostics[data-tone="error"],
|
|
.available-subagent-meta[data-tone="error"] { color: var(--status-error-fg); }
|
|
|
|
.available-subagents-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.available-subagent-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
padding: var(--space-3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--panel-3);
|
|
}
|
|
|
|
/* An entry the owner tried to finish with an error is emphasised, not dimmed. */
|
|
.available-subagent-row[data-invalid] {
|
|
border-color: var(--status-error-border);
|
|
background: var(--status-error-bg);
|
|
}
|
|
|
|
.available-subagent-route {
|
|
display: grid;
|
|
/* A track minimum yields to the container: the viewport query does not know
|
|
the wizard column width, so the floor is capped at 100% of the row. */
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.available-subagent-heading {
|
|
margin: 0;
|
|
color: var(--text);
|
|
font-size: var(--type-body);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.available-subagent-head .settings-inline-status {
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Standalone mirror of style.css: onboarding does not load the app sheet. */
|
|
.harness-identity {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.harness-identity-mark {
|
|
inline-size: 1em;
|
|
block-size: 1em;
|
|
flex: 0 0 1em;
|
|
color: currentColor;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.harness-identity-label {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.available-subagent-route-identity-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
color: var(--text-meta);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
.available-subagent-purpose {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
color: var(--text-meta);
|
|
font-size: var(--type-meta);
|
|
}
|
|
|
|
/* One line that grows with its text up to four, then scrolls (`field-sizing`);
|
|
a shell without it keeps the one-line field and manual resize. */
|
|
.available-subagent-purpose textarea {
|
|
width: 100%;
|
|
field-sizing: content;
|
|
line-height: var(--line-body);
|
|
min-height: calc(var(--type-body) * var(--line-body) + 22px);
|
|
max-height: calc(4 * var(--type-body) * var(--line-body) + 22px);
|
|
overflow-y: auto;
|
|
resize: vertical;
|
|
}
|
|
|
|
.available-subagent-meta {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.available-subagent-actions .btn-default {
|
|
min-height: 34px;
|
|
padding: 0 11px;
|
|
}
|
|
|
|
/* The shared login card (harness_login_cards.js) renders the same markup here
|
|
as in Settings, but Settings' stylesheets are never loaded by this page — so
|
|
its classes are given the same anatomy against the wizard's own tokens. */
|
|
.harness-login-card {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: var(--panel-2);
|
|
}
|
|
|
|
.harness-login-card h4 {
|
|
margin: 0;
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-title);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.harness-login-card p {
|
|
margin: 0;
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-body);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.harness-signin-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.harness-signin-actions a.btn {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.harness-device-code p {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.harness-code {
|
|
display: inline-block;
|
|
padding: 8px 12px;
|
|
border: 1px dashed var(--border);
|
|
border-radius: 8px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: var(--type-page);
|
|
letter-spacing: 0.18em;
|
|
user-select: all;
|
|
}
|
|
|
|
.harness-code-entry {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
width: 100%;
|
|
}
|
|
|
|
.harness-code-entry label {
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.harness-code-entry-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.harness-code-entry-row input { width: auto; min-width: min(220px, 100%); flex: 1 1 220px; }
|
|
|
|
.harness-advanced {
|
|
align-self: stretch;
|
|
border-top: 1px solid var(--border);
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.harness-advanced summary {
|
|
cursor: pointer;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.harness-advanced[open] summary {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.harness-advanced p {
|
|
margin: 4px 0;
|
|
font-size: var(--type-meta);
|
|
}
|
|
|
|
.harness-attach-command {
|
|
margin: 0;
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: var(--type-meta);
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
user-select: all;
|
|
}
|
|
|
|
.settings-inline-note {
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-body);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.settings-inline-note[data-tone="ok"] { color: var(--status-ok-fg); }
|
|
.settings-inline-note[data-tone="warn"] { color: var(--status-warn-fg); }
|
|
.settings-inline-note[data-tone="error"] { color: var(--status-error-fg); }
|
|
|
|
.settings-inline-status {
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
color: var(--status-neutral-fg);
|
|
}
|
|
|
|
.settings-inline-status[data-tone="neutral"] { color: var(--status-neutral-fg); }
|
|
.settings-inline-status[data-tone="ok"] { color: var(--status-ok-fg); }
|
|
.settings-inline-status[data-tone="warn"] { color: var(--status-warn-fg); }
|
|
.settings-inline-status[data-tone="error"] { color: var(--status-error-fg); }
|
|
|
|
.settings-inline-status[data-tone]::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-right: 7px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
@media (max-height: 820px), (max-width: 900px) {
|
|
.wizard-shell {
|
|
gap: 10px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.wizard-header {
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Title shrinks dropped with the one-off sizes they adjusted; hiding the
|
|
copy below reclaims far more height. */
|
|
.wizard-subtitle,
|
|
.wizard-step-copy,
|
|
.step-copy,
|
|
.panel-card p,
|
|
.field-note,
|
|
.footer-copy {
|
|
display: none;
|
|
}
|
|
|
|
/* Agents step: the ARTWORK is what a short viewport drops, never the ladder.
|
|
Everything the diagram draws is stated in the text beside it, so hiding it
|
|
costs nothing and buys back ~180px. The login card's own sentences are
|
|
re-exempted from the blanket `.panel-card p` rule above: they are the live
|
|
sign-in instructions, not explanatory prose. */
|
|
.agents-rotation-figure {
|
|
display: none;
|
|
}
|
|
|
|
.agent-ladder-layout {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
/* Compact row anatomy: name and status share one line instead of stacking.
|
|
Three rows at two lines each was the single largest block of reclaimable
|
|
height on this step, and nothing is dropped — only re-flowed. */
|
|
.agent-family-identity {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.agent-family-status {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.agent-family-row {
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.agent-family-list {
|
|
gap: 5px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.agent-ladder {
|
|
gap: 6px;
|
|
}
|
|
|
|
.agent-ladder-note,
|
|
.agent-outcome {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.available-subagent-route {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.harness-login-card p {
|
|
display: block;
|
|
}
|
|
|
|
.wizard-steps {
|
|
gap: 8px;
|
|
}
|
|
|
|
.wizard-step {
|
|
padding: 8px 10px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.wizard-content {
|
|
gap: 12px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.step-title {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.panel-card,
|
|
.summary-card,
|
|
.wizard-choice,
|
|
.wizard-runtime-strip {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
|
|
.wizard-footer {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.wizard-error {
|
|
min-height: 16px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
body {
|
|
padding: 16px;
|
|
}
|
|
|
|
.wizard-shell {
|
|
min-height: calc(100vh - 32px);
|
|
padding: 14px;
|
|
}
|
|
|
|
.field-grid,
|
|
.grid.two,
|
|
.grid.three,
|
|
.wizard-choice-grid,
|
|
.wizard-choice-grid.four,
|
|
.agent-ladder-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.wizard-step {
|
|
flex-basis: 138px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.wizard-step-copy {
|
|
display: none;
|
|
}
|
|
|
|
.summary-kv {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.available-subagent-route {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.available-subagents-toolbar .btn-default {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.wizard-step {
|
|
flex-basis: 92px;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.wizard-step-title {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* track-migration:begin — Removed with the shared wizard role adapters. */
|
|
|
|
|
|
input:not(.ui-control):not(.ui-checkbox),
|
|
select:not(.ui-control):not(.ui-checkbox),
|
|
textarea:not(.ui-control):not(.ui-checkbox) {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
background: rgba(11, 9, 16, 0.72);
|
|
color: var(--text);
|
|
font-size: var(--type-body);
|
|
outline: none;
|
|
}
|
|
|
|
|
|
input:not(.ui-control):not(.ui-checkbox):focus,
|
|
select:not(.ui-control):not(.ui-checkbox):focus,
|
|
textarea:not(.ui-control):not(.ui-checkbox):focus {
|
|
border-color: var(--focus-accent-border);
|
|
box-shadow: 0 0 0 3px var(--focus-accent-ring);
|
|
}
|
|
/* track-migration:end */
|