.eyebrow,
.technical-label,
.section-index {
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.panel {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-primary);
}

.status-badge {
    display: inline-flex;
    min-height: var(--space-8);
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: var(--text-body-sm);
    font-weight: 600;
    white-space: nowrap;
}

.status-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    background: currentColor;
}

.status-ready {
    background: var(--status-success-surface);
    color: var(--status-success-text);
}

.status-warning {
    background: var(--status-warning-surface);
    color: var(--status-warning-text);
}

.status-error {
    background: var(--status-error-surface);
    color: var(--status-error-text);
}

.status-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.status-row {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-small);
    background: var(--surface-secondary);
}

.status-copy {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.status-copy h3 {
    font-size: var(--text-h3);
    font-weight: 600;
}

.status-copy p {
    color: var(--text-secondary);
    font-size: var(--text-body-sm);
    word-break: keep-all;
}

.status-value {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.status-value code {
    color: var(--text-primary);
}

.badge-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.action-link,
.inline-action {
    display: flex;
    min-height: var(--space-12);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-small);
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--duration-micro) ease-out, transform var(--duration-micro) ease-out;
    white-space: nowrap;
}

.action-link > span,
.inline-action > span {
    white-space: nowrap;
}

.action-link:hover,
.inline-action:hover {
    color: var(--accent-hover);
}

.action-link:active,
.inline-action:active {
    transform: scale(0.99);
}

.action-link:focus-visible,
.inline-action:focus-visible,
.skip-link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.metadata-list {
    display: grid;
}

.metadata-list > div {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--border-default);
}

.metadata-list > div:first-child {
    padding-block-start: 0;
}

.metadata-list > div:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}

.metadata-list dt {
    color: var(--text-muted);
}

.metadata-list dd {
    min-width: 0;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.flow-list {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    list-style: none;
}

.flow-list li {
    display: grid;
    grid-template-columns: var(--space-8) minmax(0, 1fr);
    column-gap: var(--space-3);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--border-default);
}

.flow-list li:last-child {
    border-block-end: 0;
}

.flow-list span {
    grid-row: 1 / 3;
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
}

.flow-list small {
    color: var(--text-muted);
    font-size: var(--text-body-sm);
}

.command-list {
    display: grid;
    gap: var(--space-2);
}

.command-list code {
    display: block;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-small);
    background: var(--surface-secondary);
    color: var(--text-primary);
}

.command-list span {
    margin-inline-end: var(--space-2);
    color: var(--accent-primary);
}