.hc-ci-condition {
    min-height: 100vh;
    padding-bottom: var(--hc-ci-space-7);
    background:
        radial-gradient(circle at 86% 5%, rgb(21 87 228 / 6%), transparent 28rem),
        radial-gradient(circle at 96% 18%, rgb(25 118 154 / 4%), transparent 22rem),
        var(--hc-ci-color-canvas);
}

.hc-ci-condition__bar {
    border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-condition__hero {
    border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    background: var(--hc-ci-color-surface);
}

.hc-ci-condition__hero .hc-ci-entity-header {
    min-height: 22rem;
}

.hc-ci-condition__aliases {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hc-ci-space-2);
    padding-bottom: var(--hc-ci-space-5);
}

.hc-ci-condition__alias {
    padding: var(--hc-ci-space-1) var(--hc-ci-space-3);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-pill);
    color: var(--hc-ci-color-text-muted);
    background: var(--hc-ci-color-surface);
    font-size: var(--hc-ci-font-size-metadata);
}

.hc-ci-condition__workspace {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr);
    gap: var(--hc-ci-space-6);
    align-items: start;
    padding-top: var(--hc-ci-space-6);
}

.hc-ci-condition__workspace .hc-ci-object-navigator {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hc-ci-condition__main {
    min-width: 0;
    border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-condition__main > .hc-ci-section:first-child {
    border-top: 0;
}

.hc-ci-condition__state {
    padding-bottom: var(--hc-ci-space-5);
}

.hc-ci-condition__main > .hc-ci-section {
    scroll-margin-top: 7rem;
}

.hc-ci-condition__overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(15rem, 0.7fr);
    gap: var(--hc-ci-space-5);
    align-items: stretch;
}

.hc-ci-condition__summary {
    align-self: center;
}

.hc-ci-condition__summary p {
    margin: 0;
}

.hc-ci-condition__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--hc-ci-space-4);
    border-top: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-condition__metric {
    display: grid;
    gap: var(--hc-ci-space-1);
    padding: var(--hc-ci-space-3) var(--hc-ci-space-3) var(--hc-ci-space-3) 0;
    border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-condition__metric:nth-child(even) {
    padding-inline-start: var(--hc-ci-space-3);
    border-inline-start: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-condition__metric strong {
    font-size: var(--hc-ci-font-size-title-small);
    font-weight: var(--hc-ci-font-weight-medium);
}

.hc-ci-condition__metric span {
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-metadata);
}

.hc-ci-condition__visual-field {
    min-height: 100%;
    padding-inline-start: var(--hc-ci-space-5);
    border-inline-start: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-condition__visual-field .hc-ci-signal-field,
.hc-ci-condition__visual-field .hc-ci-tissue-signal {
    height: 100%;
}

.hc-ci-condition__entity-list {
    display: grid;
    gap: var(--hc-ci-space-2);
}

.hc-ci-condition__notice {
    padding: var(--hc-ci-space-4);
    border-left: var(--hc-ci-semantic-border-width) solid var(--hc-ci-color-context);
    border-radius: var(--hc-ci-radius-medium);
    color: var(--hc-ci-color-text-muted);
    background: var(--hc-ci-color-surface-subtle);
}

.hc-ci-condition__notice strong,
.hc-ci-condition__notice p {
    margin: 0;
}

.hc-ci-condition__notice p {
    margin-top: var(--hc-ci-space-2);
}

.hc-ci-evidence-field {
    min-width: 0;
}

.hc-ci-evidence-field__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.62fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: var(--hc-ci-space-5);
    align-items: center;
    padding-block: var(--hc-ci-space-4);
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--hc-ci-color-action) 8%, transparent) 0 7rem, transparent 7.1rem),
        radial-gradient(circle at 50% 50%, transparent 0 10rem, color-mix(in srgb, var(--hc-ci-color-action) 10%, transparent) 10.05rem 10.1rem, transparent 10.15rem);
}

.hc-ci-evidence-field__hub {
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 15rem;
    isolation: isolate;
    text-align: center;
}

.hc-ci-evidence-field__hub-visual {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: -1;
    width: 18rem;
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: 0.72;
}

.hc-ci-evidence-field__hub-copy {
    display: grid;
    gap: var(--hc-ci-space-2);
    max-width: 12rem;
    padding: var(--hc-ci-space-4);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: 50%;
    background: var(--hc-ci-color-surface);
    box-shadow: var(--hc-ci-shadow-surface);
    aspect-ratio: 1;
    place-content: center;
}

.hc-ci-evidence-field__hub-copy > strong {
    font-size: var(--hc-ci-font-size-title-small);
    font-weight: var(--hc-ci-font-weight-medium);
}

.hc-ci-evidence-field__group {
    --hc-ci-convergence-role: var(--hc-ci-color-context);

    min-width: 0;
    align-self: start;
}

.hc-ci-evidence-field__group--defining {
    --hc-ci-convergence-role: var(--hc-ci-color-action);

    grid-column: 1;
    grid-row: 1;
}

.hc-ci-evidence-field__group--supporting {
    --hc-ci-convergence-role: var(--hc-ci-color-boundary);

    grid-column: 3;
    grid-row: 1;
}

.hc-ci-evidence-field__group--prognostic {
    --hc-ci-convergence-role: var(--hc-ci-color-normal);

    grid-column: 1;
    grid-row: 2;
}

.hc-ci-evidence-field__group--contextual {
    --hc-ci-convergence-role: var(--hc-ci-color-context);

    grid-column: 3;
    grid-row: 2;
}

.hc-ci-evidence-field__group > header {
    display: flex;
    gap: var(--hc-ci-space-2);
    align-items: flex-start;
    margin-bottom: var(--hc-ci-space-2);
}

.hc-ci-evidence-field__group > header > span:last-child {
    display: grid;
    gap: var(--hc-ci-space-1);
    min-width: 0;
}

.hc-ci-evidence-field__group > header strong {
    font-weight: var(--hc-ci-font-weight-medium);
}

.hc-ci-evidence-field__role-mark,
.hc-ci-convergence-signal__mark {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.25rem;
    border-radius: var(--hc-ci-radius-pill);
    background: var(--hc-ci-convergence-role);
}

.hc-ci-evidence-field__signals,
.hc-ci-evidence-field__more-body {
    display: grid;
    gap: var(--hc-ci-space-2);
    min-width: 0;
}

.hc-ci-convergence-signal {
    --hc-ci-convergence-role: var(--hc-ci-color-context);

    min-width: 0;
}

.hc-ci-convergence-signal--defining {
    --hc-ci-convergence-role: var(--hc-ci-color-action);
}

.hc-ci-convergence-signal--supporting {
    --hc-ci-convergence-role: var(--hc-ci-color-boundary);
}

.hc-ci-convergence-signal--prognostic {
    --hc-ci-convergence-role: var(--hc-ci-color-normal);
}

.hc-ci-convergence-signal > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--hc-ci-space-2);
    align-items: start;
    min-width: 0;
    padding: var(--hc-ci-space-3);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-medium);
    cursor: pointer;
    list-style: none;
    background: var(--hc-ci-color-surface);
    transition:
        border-color var(--hc-ci-motion-fast) var(--hc-ci-motion-easing),
        background var(--hc-ci-motion-fast) var(--hc-ci-motion-easing);
}

.hc-ci-convergence-signal > summary::-webkit-details-marker,
.hc-ci-evidence-field__more > summary::-webkit-details-marker {
    display: none;
}

.hc-ci-convergence-signal > summary:focus-visible,
.hc-ci-evidence-field__more > summary:focus-visible {
    outline: 0;
    box-shadow: var(--hc-ci-shadow-focus);
}

.hc-ci-convergence-signal[open] > summary {
    border-color: var(--hc-ci-convergence-role);
    background: var(--hc-ci-gradient-selected);
}

.hc-ci-convergence-signal__summary {
    display: grid;
    gap: var(--hc-ci-space-1);
    min-width: 0;
}

.hc-ci-convergence-signal__summary strong,
.hc-ci-convergence-signal__body,
.hc-ci-convergence-signal__related {
    overflow-wrap: anywhere;
}

.hc-ci-convergence-signal__summary strong {
    font-weight: var(--hc-ci-font-weight-medium);
}

.hc-ci-convergence-signal__toggle {
    position: relative;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
}

.hc-ci-convergence-signal__toggle::before,
.hc-ci-convergence-signal__toggle::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 0.65rem;
    height: var(--hc-ci-border-width);
    background: var(--hc-ci-color-text-muted);
    transform: translate(-50%, -50%);
}

.hc-ci-convergence-signal__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform var(--hc-ci-motion-fast) var(--hc-ci-motion-easing);
}

.hc-ci-convergence-signal[open] .hc-ci-convergence-signal__toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.hc-ci-convergence-signal__body {
    padding: var(--hc-ci-space-3);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-top: 0;
    border-radius: 0 0 var(--hc-ci-radius-medium) var(--hc-ci-radius-medium);
    color: var(--hc-ci-color-text-muted);
    background: var(--hc-ci-color-surface);
}

.hc-ci-convergence-signal__body p {
    margin: 0;
}

.hc-ci-convergence-signal__meta,
.hc-ci-convergence-signal__related > div,
.hc-ci-evidence-field__sources {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hc-ci-space-2);
    align-items: center;
}

.hc-ci-convergence-signal__meta,
.hc-ci-convergence-signal__related {
    margin-top: var(--hc-ci-space-3);
}

.hc-ci-convergence-signal__related {
    display: grid;
    gap: var(--hc-ci-space-1);
}

.hc-ci-evidence-field__more {
    margin-top: var(--hc-ci-space-2);
}

.hc-ci-evidence-field__more > summary {
    display: flex;
    gap: var(--hc-ci-space-2);
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: var(--hc-ci-space-2) 0;
    color: var(--hc-ci-color-action);
    cursor: pointer;
    list-style: none;
    font-size: var(--hc-ci-font-size-small);
    font-weight: var(--hc-ci-font-weight-medium);
}

.hc-ci-evidence-field__more-count {
    min-width: 1.35rem;
    padding-inline: var(--hc-ci-space-1);
    border-radius: var(--hc-ci-radius-pill);
    color: var(--hc-ci-color-text-muted);
    background: var(--hc-ci-color-surface-subtle);
    text-align: center;
    font-size: var(--hc-ci-font-size-metadata);
}

.hc-ci-evidence-field__more-count--desktop,
.hc-ci-evidence-field__more-label--close,
.hc-ci-evidence-field__more[open] .hc-ci-evidence-field__more-label--open,
.hc-ci-evidence-field__more[open] .hc-ci-evidence-field__more-count {
    display: none;
}

.hc-ci-evidence-field__more[open] .hc-ci-evidence-field__more-label--close {
    display: inline;
}

.hc-ci-evidence-field__state {
    margin: var(--hc-ci-space-4) 0 0;
    padding: var(--hc-ci-space-3) var(--hc-ci-space-4);
    border-left: var(--hc-ci-semantic-border-width) solid var(--hc-ci-color-context);
    background: var(--hc-ci-color-surface-subtle);
}

.hc-ci-evidence-field__sources {
    margin-top: var(--hc-ci-space-4);
    padding-top: var(--hc-ci-space-3);
    border-top: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

@media (min-width: 40.001rem) {
    .hc-ci-evidence-field__more-count--mobile {
        display: none;
    }

    .hc-ci-evidence-field__more-count--desktop {
        display: inline;
    }

    .hc-ci-evidence-field__more--desktop-count-0 > summary {
        display: none;
    }
}

@media (max-width: 64rem) {
    .hc-ci-condition__workspace {
        grid-template-columns: 1fr;
    }

    .hc-ci-condition__workspace > aside {
        order: -1;
    }

    .hc-ci-condition__workspace .hc-ci-object-navigator {
        position: static;
    }

    .hc-ci-condition__workspace .hc-ci-object-navigator ul {
        display: flex;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .hc-ci-condition__workspace .hc-ci-object-navigator li {
        flex: 0 0 auto;
    }
}

@media (max-width: 40rem) {
    .hc-ci-condition__hero .hc-ci-entity-header {
        min-height: 0;
    }

    .hc-ci-condition__workspace {
        gap: var(--hc-ci-space-4);
        padding-top: var(--hc-ci-space-4);
    }

    .hc-ci-condition__state {
        padding-bottom: var(--hc-ci-space-4);
    }

    .hc-ci-condition__overview-grid,
    .hc-ci-condition__metrics {
        grid-template-columns: 1fr;
    }

    .hc-ci-condition__visual-field {
        min-height: 8rem;
        padding: var(--hc-ci-space-4) 0 0;
        border-inline-start: 0;
        border-top: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    }

    .hc-ci-condition__metric:nth-child(even) {
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    .hc-ci-evidence-field__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: var(--hc-ci-space-4);
        padding-block: 0;
        background: transparent;
    }

    .hc-ci-evidence-field__hub,
    .hc-ci-evidence-field__group--defining,
    .hc-ci-evidence-field__group--supporting,
    .hc-ci-evidence-field__group--prognostic,
    .hc-ci-evidence-field__group--contextual {
        grid-column: 1;
        grid-row: auto;
    }

    .hc-ci-evidence-field__hub {
        justify-items: start;
        min-height: 8rem;
        text-align: left;
    }

    .hc-ci-evidence-field__hub-visual {
        inset: 50% 0 auto auto;
        width: 12rem;
        transform: translate(0, -50%);
        opacity: 0.54;
    }

    .hc-ci-evidence-field__hub-copy {
        max-width: min(16rem, 78%);
        padding: var(--hc-ci-space-3) 0 var(--hc-ci-space-3) var(--hc-ci-space-4);
        border: 0;
        border-left: var(--hc-ci-semantic-border-width) solid var(--hc-ci-color-action);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        aspect-ratio: auto;
        place-content: start;
    }
}
