.product-brand-mark {
    color: var(--wb-accent);
}

svg.wb-sidebar-brand-logo {
    block-size: 3rem;
    color: var(--wb-accent);
    display: block;
    flex: 0 0 auto;
    inline-size: 3rem;
}

.wb-sidebar-brand-copy {
    min-inline-size: 0;
}

.wb-sidebar-brand-copy > span,
.wb-sidebar-brand-note {
    display: block;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wb-shell-alert-stack {
    display: grid;
    gap: var(--wb-s3);
    padding: var(--wb-s4) var(--wb-s6) 0;
}

.wb-shell-alert-stack:empty {
    display: none;
}

/*
 * Composes on wb-callout for the surface, border, and padding; WebBlocks has no
 * pre-wrap text block, so only the wrapping is declared here.
 */
.wb-admin-prose {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
}

.wb-admin-prose.limited {
    max-height: 280px;
    overflow: auto;
}

.wb-admin-prose.plain {
    background: transparent;
    border: 0;
    padding: 0;
}

.timeline {
    display: grid;
    gap: var(--wb-s3);
}

.timeline-item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: var(--wb-s2);
    align-items: start;
}

.timeline-marker {
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: var(--wb-r-full);
    background: var(--wb-primary);
}

.timeline-body {
    padding: var(--wb-s3);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-r-md);
    background: var(--wb-surface-2);
    overflow-wrap: anywhere;
}

/* Stacked cards need breathing room; WebBlocks leaves outer spacing to the page. */
.wb-card + .wb-card,
.wb-card + .wb-grid,
.wb-grid + .wb-card,
.wb-grid + .wb-grid {
    margin-top: var(--wb-s4);
}

/* 2fr/1fr split — wb-grid-2 is equal columns, so this stays app CSS. */
.two-column {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: start;
}

summary.wb-btn {
    width: max-content;
    list-style: none;
}

summary.wb-btn::-webkit-details-marker {
    display: none;
}

/*
 * WebBlocks already gives <pre> its surface, border, radius, and padding. Only
 * the wrapping is ours: the framework scrolls long lines horizontally, and
 * these panes hold prose and command output that should wrap instead.
 */
pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

[data-workbench-updates-layout="designed"] {
    --wb-updates-ok-bg: color-mix(in srgb, #22c55e 13%, var(--wb-surface));
    --wb-updates-ok-border: color-mix(in srgb, #22c55e 24%, var(--wb-border));
    --wb-updates-info-bg: color-mix(in srgb, var(--wb-accent) 12%, var(--wb-surface));
    --wb-updates-info-border: color-mix(in srgb, var(--wb-accent) 28%, var(--wb-border));
    --wb-updates-warning-bg: color-mix(in srgb, #f59e0b 14%, var(--wb-surface));
    --wb-updates-warning-border: color-mix(in srgb, #f59e0b 28%, var(--wb-border));
}

[data-workbench-updates-card="summary"] {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--wb-accent) 18%, var(--wb-border));
}

[data-workbench-updates-card="summary"] > .wb-card-header {
    align-items: center;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--wb-accent) 9%, transparent), transparent 62%),
        color-mix(in srgb, var(--wb-surface-2) 78%, transparent);
}

[data-workbench-updates-hero] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    gap: var(--wb-s5);
    align-items: stretch;
    padding: clamp(var(--wb-s4), 3vw, var(--wb-s6));
    border: 1px solid var(--wb-updates-ok-border);
    border-radius: var(--wb-r-lg);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, #22c55e 22%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, #22c55e 16%, transparent), transparent 62%),
        var(--wb-updates-ok-bg);
}

[data-workbench-updates-state="update_available"] [data-workbench-updates-hero] {
    border-color: var(--wb-updates-info-border);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--wb-accent) 24%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--wb-accent) 16%, transparent), transparent 62%),
        var(--wb-updates-info-bg);
}

[data-workbench-updates-state="server_error"] [data-workbench-updates-hero] {
    border-color: var(--wb-updates-warning-border);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, #f59e0b 24%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, #f59e0b 16%, transparent), transparent 62%),
        var(--wb-updates-warning-bg);
}

[data-workbench-updates-hero-main] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--wb-s4);
    align-items: center;
    min-inline-size: 0;
}

[data-workbench-updates-hero-main] p {
    margin: var(--wb-s1) 0 0;
}

[data-workbench-updates-hero-aside] {
    display: grid;
    align-content: space-between;
    gap: var(--wb-s3);
    min-inline-size: 0;
    padding: var(--wb-s4);
    border: 1px solid color-mix(in srgb, var(--wb-border) 64%, transparent);
    border-radius: var(--wb-r-lg);
    background: color-mix(in srgb, var(--wb-surface) 82%, transparent);
}

[data-workbench-updates-hero-aside] strong {
    display: block;
    margin-block: var(--wb-s1);
    font-size: 1.35rem;
}

[data-workbench-updates-hero-icon],
[data-workbench-updates-card-icon],
[data-workbench-updates-check-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 9999px;
    color: var(--wb-accent-text);
    background: color-mix(in srgb, var(--wb-surface) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-border) 70%, transparent);
}

[data-workbench-updates-hero-icon] {
    block-size: 3.25rem;
    inline-size: 3.25rem;
    font-size: 1.35rem;
    background: color-mix(in srgb, var(--wb-surface) 82%, transparent);
}

[data-workbench-updates-card-icon] {
    block-size: 2.5rem;
    inline-size: 2.5rem;
}

[data-workbench-updates-check-icon] {
    block-size: 1.75rem;
    inline-size: 1.75rem;
    color: var(--wb-success, #16a34a);
}

[data-workbench-updates-version-path] {
    overflow-wrap: anywhere;
}

[data-workbench-updates-version-path] strong {
    display: block;
    margin-block-start: var(--wb-s1);
    font-size: 1.25rem;
}

[data-workbench-updates-metrics] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--wb-s3);
}

[data-workbench-updates-metrics] > div {
    min-inline-size: 0;
    padding: var(--wb-s3);
    border: 1px solid color-mix(in srgb, var(--wb-border) 72%, transparent);
    border-radius: var(--wb-r-md);
    background: color-mix(in srgb, var(--wb-surface-2) 64%, transparent);
}

[data-workbench-updates-metrics] strong {
    display: block;
    margin-block-start: var(--wb-s1);
    overflow-wrap: anywhere;
}

[data-workbench-updates-card="safety-summary"] .wb-card-body {
    padding: var(--wb-s4);
}

[data-workbench-updates-card="safety-summary"] .wb-card {
    position: relative;
    overflow: hidden;
}

[data-workbench-updates-card="safety-summary"] .wb-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: color-mix(in srgb, var(--wb-accent) 52%, transparent);
}

[data-workbench-updates-safety-card] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--wb-s3);
    align-items: start;
}

[data-workbench-updates-safety-card] .wb-cluster {
    margin-block-end: var(--wb-s1);
}

[data-workbench-updates-card="details"] {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr);
    align-items: start;
}

[data-workbench-updates-check] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--wb-s3);
    align-items: center;
    min-inline-size: 0;
    padding: var(--wb-s3);
    border: 1px solid color-mix(in srgb, var(--wb-border) 70%, transparent);
    border-radius: var(--wb-r-md);
    background: color-mix(in srgb, var(--wb-surface-2) 46%, transparent);
}

[data-workbench-updates-check] .wb-list-item-sub {
    margin-block-start: 0.125rem;
}

@media (max-width: 768px) {
    .wb-shell-alert-stack {
        padding-inline: var(--wb-s4);
    }

    .form-grid,
        [data-workbench-updates-hero-main],
    [data-workbench-updates-safety-card],
    [data-workbench-updates-check] {
        grid-template-columns: 1fr;
    }

    [data-workbench-updates-check] .wb-status-pill {
        justify-self: start;
    }
}