/*
 * Clinical Intelligence primitives.
 * Every selector and custom property is isolated from the current hc-* layer.
 */

.hc-ci-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hc-ci-surface {
    color: var(--hc-ci-color-text);
    font-family: var(--hc-ci-font-family);
    font-size: var(--hc-ci-font-size-body);
    line-height: var(--hc-ci-line-height-body);
}

.hc-ci-surface :where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--hc-ci-color-focus);
    outline-offset: 2px;
    box-shadow: var(--hc-ci-shadow-focus);
}

.hc-ci-shell {
    width: min(100%, var(--hc-ci-container-wide));
    margin-inline: auto;
    padding-inline: var(--hc-ci-page-padding);
}

.hc-ci-product-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--hc-ci-size-control);
    gap: var(--hc-ci-space-3);
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-small);
}

.hc-ci-product-bar__identity,
.hc-ci-product-bar__actions,
.hc-ci-row__heading,
.hc-ci-row__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hc-ci-space-2);
}

.hc-ci-section {
    padding-block: var(--hc-ci-space-6);
    border-top: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-section__header,
.hc-ci-entity-header,
.hc-ci-row,
.hc-ci-state-message {
    display: grid;
    gap: var(--hc-ci-space-3);
}

.hc-ci-section__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: var(--hc-ci-space-5);
}

.hc-ci-section__header h2,
.hc-ci-entity-header h1 {
    margin: 0;
    color: var(--hc-ci-color-text);
    font-weight: var(--hc-ci-font-weight-medium);
    line-height: var(--hc-ci-line-height-title);
}

.hc-ci-section__header h2 {
    font-size: var(--hc-ci-font-size-title);
}

.hc-ci-section__description {
    max-width: 46rem;
    margin: var(--hc-ci-space-2) 0 0;
    color: var(--hc-ci-color-text-muted);
}

.hc-ci-section__footer {
    margin-top: var(--hc-ci-space-4);
}

.hc-ci-entity-header h1 {
    font-size: var(--hc-ci-font-size-display);
}

.hc-ci-eyebrow,
.hc-ci-meta,
.hc-ci-section-meta {
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-metadata);
    line-height: var(--hc-ci-line-height-compact);
}

.hc-ci-eyebrow {
    margin: 0 0 var(--hc-ci-space-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hc-ci-meta,
.hc-ci-section-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hc-ci-space-2) var(--hc-ci-space-4);
}

.hc-ci-entity-header {
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.6fr);
    align-items: center;
    padding-block: var(--hc-ci-space-6);
}

.hc-ci-entity-header__content {
    max-width: 48rem;
}

.hc-ci-entity-header__subtitle,
.hc-ci-entity-header__definition {
    color: var(--hc-ci-color-text-muted);
}

.hc-ci-entity-header__subtitle {
    margin: var(--hc-ci-space-2) 0 0;
    font-size: var(--hc-ci-font-size-small);
}

.hc-ci-entity-header__definition {
    margin: var(--hc-ci-space-4) 0 0;
    font-size: var(--hc-ci-font-size-body);
}

.hc-ci-entity-header__meta,
.hc-ci-entity-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hc-ci-space-2) var(--hc-ci-space-4);
    margin-top: var(--hc-ci-space-4);
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-small);
}

.hc-ci-entity-header__visual {
    min-width: 0;
}

.hc-ci-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: var(--hc-ci-size-row);
    padding: var(--hc-ci-space-3) var(--hc-ci-space-4);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-medium);
    background: var(--hc-ci-color-surface);
    transition:
        border-color var(--hc-ci-motion-fast) var(--hc-ci-motion-easing),
        background-color var(--hc-ci-motion-fast) var(--hc-ci-motion-easing);
}

.hc-ci-row[data-selected='true'] {
    color: var(--hc-ci-color-text-on-selected);
    border-color: var(--hc-ci-color-surface-selected);
    background: var(--hc-ci-color-surface-selected);
}

.hc-ci-row__main {
    min-width: 0;
}

.hc-ci-row__heading {
    flex-wrap: nowrap;
}

.hc-ci-row__aside {
    justify-content: flex-end;
}

.hc-ci-row__title,
.hc-ci-row__description {
    margin: 0;
}

.hc-ci-row__title {
    color: inherit;
    font-weight: var(--hc-ci-font-weight-medium);
}

.hc-ci-row__description {
    margin-top: var(--hc-ci-space-1);
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-small);
}

.hc-ci-row[data-selected='true'] .hc-ci-row__description {
    color: rgb(255 255 255 / 72%);
}

.hc-ci-catalog-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hc-ci-space-3);
    min-height: var(--hc-ci-size-row);
    padding: var(--hc-ci-space-3) var(--hc-ci-space-4);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-medium);
    color: var(--hc-ci-color-text);
    background: var(--hc-ci-color-surface);
    text-decoration: none;
    transition:
        border-color var(--hc-ci-motion-fast) var(--hc-ci-motion-easing),
        background-color var(--hc-ci-motion-fast) var(--hc-ci-motion-easing);
}

.hc-ci-catalog-row:hover {
    border-color: var(--hc-ci-color-border-strong);
    color: var(--hc-ci-color-text);
    background: var(--hc-ci-gradient-selected), var(--hc-ci-color-surface);
}

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

.hc-ci-catalog-row__title {
    font-weight: var(--hc-ci-font-weight-medium);
}

.hc-ci-catalog-row__description,
.hc-ci-catalog-row__value {
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-small);
}

.hc-ci-catalog-row__description {
    overflow-wrap: anywhere;
}

.hc-ci-catalog-row__value {
    white-space: nowrap;
}

.hc-ci-relation-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--hc-ci-space-2);
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-small);
}

.hc-ci-relation-mark::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    content: '';
}

.hc-ci-relation-mark--supporting {
    color: var(--hc-ci-color-support);
}

.hc-ci-relation-mark--contextual {
    color: var(--hc-ci-color-context);
}

.hc-ci-relation-mark--contextual::before {
    border-radius: 1px;
    transform: rotate(45deg);
}

.hc-ci-relation-mark--conflicting {
    color: var(--hc-ci-color-conflict);
}

.hc-ci-relation-mark--conflicting::before {
    border-radius: 0;
    background:
        linear-gradient(45deg, transparent 42%, currentColor 43% 57%, transparent 58%),
        linear-gradient(-45deg, transparent 42%, currentColor 43% 57%, transparent 58%);
}

.hc-ci-relation-mark--weak {
    color: var(--hc-ci-color-weak);
}

.hc-ci-relation-mark--weak::before {
    border: var(--hc-ci-border-width) solid currentColor;
    background: transparent;
}

.hc-ci-relation-mark--default::before {
    width: 0.625rem;
    height: var(--hc-ci-border-width);
    border-radius: 0;
}

.hc-ci-grade,
.hc-ci-state-label {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: var(--hc-ci-size-control-compact);
    padding-inline: var(--hc-ci-space-3);
    border: var(--hc-ci-border-width) solid currentColor;
    border-radius: var(--hc-ci-radius-pill);
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-metadata);
    line-height: 1;
}

.hc-ci-grade--strong {
    color: var(--hc-ci-color-support);
}

.hc-ci-grade--moderate {
    color: var(--hc-ci-color-context);
}

.hc-ci-grade--limited {
    color: var(--hc-ci-color-conflict);
}

.hc-ci-result-row {
    --hc-ci-result-accent: var(--hc-ci-color-border-strong);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hc-ci-space-3);
    min-height: var(--hc-ci-size-row);
    padding: var(--hc-ci-space-3) var(--hc-ci-space-4);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-medium);
    background: var(--hc-ci-color-surface);
    box-shadow: inset var(--hc-ci-semantic-border-width) 0 0 var(--hc-ci-result-accent);
}

.hc-ci-result-row--normal {
    --hc-ci-result-accent: var(--hc-ci-color-normal);
}

.hc-ci-result-row--boundary {
    --hc-ci-result-accent: var(--hc-ci-color-boundary);
}

.hc-ci-result-row--high,
.hc-ci-result-row--low {
    --hc-ci-result-accent: var(--hc-ci-color-danger);
}

.hc-ci-result-row--pending,
.hc-ci-result-row--unavailable {
    --hc-ci-result-accent: var(--hc-ci-color-text-muted);
}

.hc-ci-result-row__main,
.hc-ci-result-row__value {
    display: grid;
    gap: var(--hc-ci-space-1);
}

.hc-ci-result-row__value {
    justify-items: end;
    font-size: var(--hc-ci-font-size-small);
}

.hc-ci-reference-band {
    display: grid;
    gap: var(--hc-ci-space-2);
    margin: 0;
}

.hc-ci-reference-band__labels,
.hc-ci-reference-band__track {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.hc-ci-reference-band__labels {
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-metadata);
    text-align: center;
}

.hc-ci-reference-band__track {
    position: relative;
    height: var(--hc-ci-space-3);
    overflow: visible;
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-pill);
}

.hc-ci-reference-band__zone--low,
.hc-ci-reference-band__zone--high {
    background: var(--hc-ci-color-surface-subtle);
}

.hc-ci-reference-band__zone--normal {
    background: rgb(53 107 85 / 12%);
    border-inline: var(--hc-ci-border-width) solid var(--hc-ci-color-border-strong);
}

.hc-ci-reference-band__marker {
    position: absolute;
    top: 50%;
    width: var(--hc-ci-space-3);
    height: var(--hc-ci-space-3);
    border: 2px solid var(--hc-ci-color-surface);
    border-radius: var(--hc-ci-radius-pill);
    background: var(--hc-ci-result-accent, var(--hc-ci-color-action));
    box-shadow: 0 0 0 1px var(--hc-ci-result-accent, var(--hc-ci-color-action));
    transform: translate(-50%, -50%);
}

.hc-ci-reference-band--normal {
    --hc-ci-result-accent: var(--hc-ci-color-normal);
}

.hc-ci-reference-band--boundary {
    --hc-ci-result-accent: var(--hc-ci-color-boundary);
}

.hc-ci-reference-band--high,
.hc-ci-reference-band--low {
    --hc-ci-result-accent: var(--hc-ci-color-danger);
}

.hc-ci-reference-band figcaption {
    display: flex;
    justify-content: space-between;
    gap: var(--hc-ci-space-3);
}

.hc-ci-state-message {
    padding: var(--hc-ci-space-4);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-left-width: var(--hc-ci-semantic-border-width);
    border-radius: var(--hc-ci-radius-medium);
    background: var(--hc-ci-color-surface);
}

.hc-ci-state-message--partial,
.hc-ci-state-message--stale {
    border-left-color: var(--hc-ci-color-boundary);
}

.hc-ci-state-message--loading,
.hc-ci-state-message--empty,
.hc-ci-state-message--no-match {
    border-left-color: var(--hc-ci-color-context);
}

.hc-ci-state-message--unavailable {
    border-left-color: var(--hc-ci-color-danger);
    background: var(--hc-ci-color-danger-surface);
}

.hc-ci-state-message[aria-busy='true'] .hc-ci-state-label::after {
    margin-left: var(--hc-ci-space-2);
    content: '…';
}

.hc-ci-state-message__content h3,
.hc-ci-state-message__content p {
    margin: 0;
}

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

.hc-ci-state-message__action {
    color: var(--hc-ci-color-action);
    font-weight: var(--hc-ci-font-weight-medium);
}

.hc-ci-organ-visual {
    width: 100%;
    min-height: 12rem;
    color: var(--hc-ci-color-action);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-large);
    background: var(--hc-ci-gradient-ambient), var(--hc-ci-color-surface-subtle);
    box-shadow: var(--hc-ci-shadow-surface);
}

.hc-ci-organ-visual__contour {
    fill: rgb(255 255 255 / 44%);
    stroke: currentColor;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.hc-ci-organ-visual__tissue {
    fill: none;
    stroke: var(--hc-ci-color-context);
    stroke-width: 0.75;
    stroke-dasharray: 2 5;
    opacity: 0.55;
    vector-effect: non-scaling-stroke;
}

.hc-ci-organ-visual__signal {
    fill: var(--hc-ci-color-surface);
    stroke: var(--hc-ci-color-action);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.hc-ci-tissue-field {
    width: 100%;
    min-height: 10rem;
    color: var(--hc-ci-color-action);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-large);
    background: var(--hc-ci-gradient-signal), var(--hc-ci-color-surface-subtle);
}

.hc-ci-tissue-field__structure {
    fill: rgb(255 255 255 / 38%);
    stroke: currentColor;
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}

.hc-ci-tissue-field__line {
    fill: none;
    stroke: var(--hc-ci-color-context);
    stroke-width: 0.75;
    stroke-dasharray: 2 5;
    opacity: 0.65;
    vector-effect: non-scaling-stroke;
}

.hc-ci-tissue-field__active {
    fill: var(--hc-ci-color-surface);
    stroke: var(--hc-ci-color-action);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.hc-ci-tissue-signal {
    min-width: 0;
    margin: 0;
    color: var(--hc-ci-color-text);
}

.hc-ci-tissue-signal svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hc-ci-tissue-signal figcaption {
    margin-top: var(--hc-ci-space-1);
    text-align: center;
}

.hc-ci-tissue-signal__halo,
.hc-ci-tissue-signal__signal-field {
    fill: var(--hc-ci-tissue-signal-fill);
}

.hc-ci-tissue-signal__flow {
    fill: var(--hc-ci-tissue-flow-fill);
    opacity: 0.72;
}

.hc-ci-tissue-signal__outer,
.hc-ci-tissue-signal__inner,
.hc-ci-tissue-signal__capillary {
    vector-effect: non-scaling-stroke;
}

.hc-ci-tissue-signal__outer {
    fill: rgb(21 87 228 / 4%);
    stroke: var(--hc-ci-color-action);
    stroke-width: 1.5;
    stroke-opacity: 0.48;
}

.hc-ci-tissue-signal__inner {
    fill: rgb(25 118 154 / 3%);
    stroke: var(--hc-ci-color-context);
    stroke-width: 1.5;
    stroke-opacity: 0.42;
}

.hc-ci-tissue-signal__capillary {
    fill: none;
    stroke: var(--hc-ci-color-border-strong);
    stroke-width: 1;
    stroke-opacity: 0.72;
}

.hc-ci-tissue-signal__signal-field {
    stroke: var(--hc-ci-color-action);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.hc-ci-tissue-signal__signal-core {
    fill: var(--hc-ci-color-action);
}

.hc-ci-tissue-signal__signal--context .hc-ci-tissue-signal__signal-field {
    stroke: var(--hc-ci-color-context);
}

.hc-ci-tissue-signal__signal--context .hc-ci-tissue-signal__signal-core {
    fill: var(--hc-ci-color-context);
}

.hc-ci-tissue-signal--section svg {
    max-height: 10rem;
}

.hc-ci-tissue-signal--mechanism svg {
    height: 100%;
    min-height: 15rem;
}

.hc-ci-signal-field {
    position: relative;
    min-height: 7rem;
    margin: 0;
    overflow: hidden;
    border-radius: var(--hc-ci-radius-large);
    background: var(--hc-ci-gradient-ambient), var(--hc-ci-color-surface-subtle);
}

.hc-ci-signal-field--ambient {
    opacity: 0.84;
}

.hc-ci-signal-field--section {
    min-height: 4.5rem;
}

.hc-ci-signal-field svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.hc-ci-signal-field__area {
    fill: var(--hc-ci-signal-fill);
}

.hc-ci-signal-field__line,
.hc-ci-signal-field__measured {
    fill: none;
    stroke: var(--hc-ci-color-action);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.hc-ci-signal-field__line {
    opacity: 0.38;
}

.hc-ci-signal-field__measured {
    stroke: var(--hc-ci-color-context);
    stroke-width: 2;
}

.hc-ci-signal-field figcaption {
    position: absolute;
    inset-inline: var(--hc-ci-space-3);
    bottom: var(--hc-ci-space-2);
}

.hc-ci-object-navigator {
    position: sticky;
    top: var(--hc-ci-space-4);
    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);
    background: var(--hc-ci-color-surface);
    box-shadow: var(--hc-ci-shadow-surface);
}

.hc-ci-object-navigator ul {
    display: grid;
    gap: var(--hc-ci-space-1);
    padding: 0;
    margin: 0;
    list-style: none;
}

.hc-ci-object-navigator a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hc-ci-space-2);
    min-height: var(--hc-ci-size-control);
    padding-inline: var(--hc-ci-space-3);
    border-radius: var(--hc-ci-radius-small);
    color: var(--hc-ci-color-text-muted);
    transition:
        color var(--hc-ci-motion-fast) var(--hc-ci-motion-easing),
        background-color var(--hc-ci-motion-fast) var(--hc-ci-motion-easing);
}

.hc-ci-object-navigator a:hover,
.hc-ci-object-navigator a[aria-current='location'] {
    color: var(--hc-ci-color-text);
    background: var(--hc-ci-gradient-selected);
}

.hc-ci-object-navigator a[aria-current='location'] {
    box-shadow: inset var(--hc-ci-semantic-border-width) 0 0 var(--hc-ci-color-action);
}

.hc-ci-object-navigator__count {
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-metadata);
    font-variant-numeric: tabular-nums;
}

.hc-ci-candidate-fit--strong {
    --hc-ci-fit-accent: var(--hc-ci-color-support);
}

.hc-ci-candidate-fit--medium {
    --hc-ci-fit-accent: var(--hc-ci-color-context);
}

.hc-ci-candidate-fit--weak {
    --hc-ci-fit-accent: var(--hc-ci-color-weak);
}

.hc-ci-candidate-fit--insufficient {
    --hc-ci-fit-accent: var(--hc-ci-color-conflict);
}

.hc-ci-convergence {
    display: grid;
    grid-template-columns: minmax(18rem, 1.35fr) minmax(13rem, 0.65fr);
    align-items: center;
    gap: var(--hc-ci-space-6);
    margin: 0;
}

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

.hc-ci-convergence__relation {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hc-ci-space-3);
    min-height: var(--hc-ci-size-row-compact);
    padding: var(--hc-ci-space-2) var(--hc-ci-space-3);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-medium);
    background: var(--hc-ci-color-surface);
}

.hc-ci-convergence__content,
.hc-ci-clinical-spine__content,
.hc-ci-mechanism__content,
.hc-ci-clinical-sequence__content {
    display: grid;
    gap: var(--hc-ci-space-1);
}

.hc-ci-convergence__connector {
    position: absolute;
    inset-inline-start: 100%;
    top: 50%;
    width: var(--hc-ci-space-6);
    border-top: var(--hc-ci-border-width) solid var(--hc-ci-color-border-strong);
    transform-origin: left center;
}

.hc-ci-convergence__relation:first-child .hc-ci-convergence__connector {
    transform: rotate(12deg);
}

.hc-ci-convergence__relation:last-child .hc-ci-convergence__connector {
    transform: rotate(-12deg);
}

.hc-ci-convergence__candidate {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--hc-ci-space-2);
    min-height: 9rem;
    padding: var(--hc-ci-space-5);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-left: var(--hc-ci-semantic-border-width) solid var(--hc-ci-fit-accent, var(--hc-ci-color-border-strong));
    border-radius: var(--hc-ci-radius-large);
    background: var(--hc-ci-gradient-signal), var(--hc-ci-color-surface);
    box-shadow: var(--hc-ci-shadow-surface);
}

.hc-ci-clinical-spine {
    position: relative;
    display: grid;
    gap: var(--hc-ci-space-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

.hc-ci-clinical-spine::before {
    position: absolute;
    inset-block: var(--hc-ci-space-4);
    inset-inline-start: calc(var(--hc-ci-space-4) - 1px);
    border-inline-start: var(--hc-ci-border-width) solid var(--hc-ci-color-border-strong);
    content: '';
}

.hc-ci-clinical-spine__item,
.hc-ci-clinical-spine__candidate {
    position: relative;
    display: grid;
    grid-template-columns: var(--hc-ci-size-control-compact) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hc-ci-space-3);
    min-height: var(--hc-ci-size-row-compact);
    padding: var(--hc-ci-space-2) var(--hc-ci-space-3) var(--hc-ci-space-2) 0;
}

.hc-ci-clinical-spine__index {
    z-index: 1;
    display: grid;
    width: var(--hc-ci-size-control-compact);
    height: var(--hc-ci-size-control-compact);
    place-items: center;
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border-strong);
    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-clinical-spine__candidate {
    grid-template-columns: var(--hc-ci-size-control-compact) minmax(0, 1fr);
    padding: var(--hc-ci-space-3);
    margin-top: var(--hc-ci-space-2);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-inline-start: var(--hc-ci-semantic-border-width) solid var(--hc-ci-fit-accent, var(--hc-ci-color-border-strong));
    border-radius: var(--hc-ci-radius-medium);
    background: var(--hc-ci-gradient-selected), var(--hc-ci-color-surface);
}

.hc-ci-mechanism {
    display: grid;
    grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1.45fr);
    align-items: stretch;
    gap: var(--hc-ci-space-4);
    margin: 0;
}

.hc-ci-mechanism:not(:has(.hc-ci-mechanism__visual)) {
    grid-template-columns: minmax(0, 1fr);
}

.hc-ci-mechanism__visual .hc-ci-organ-visual,
.hc-ci-mechanism__visual .hc-ci-tissue-signal {
    height: 100%;
    min-height: 15rem;
}

.hc-ci-mechanism__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    padding: 0;
    margin: 0;
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-large);
    background: var(--hc-ci-color-surface);
    list-style: none;
}

.hc-ci-mechanism__step {
    position: relative;
    display: flex;
    min-height: 10rem;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--hc-ci-space-3);
    padding: var(--hc-ci-space-4);
    border-inline-end: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-mechanism__step:last-child {
    border-inline-end: 0;
    background: var(--hc-ci-gradient-selected);
}

.hc-ci-mechanism__code {
    color: var(--hc-ci-color-context);
    font-size: var(--hc-ci-font-size-metadata);
    font-weight: var(--hc-ci-font-weight-medium);
    letter-spacing: 0.05em;
}

.hc-ci-mechanism__arrow,
.hc-ci-clinical-sequence__arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    inset-inline-end: calc(-1 * var(--hc-ci-space-3));
    display: grid;
    width: var(--hc-ci-space-5);
    height: var(--hc-ci-space-5);
    place-items: center;
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-pill);
    color: var(--hc-ci-color-action);
    background: var(--hc-ci-color-surface);
    transform: translateY(-50%);
}

.hc-ci-clinical-sequence {
    margin: 0;
}

.hc-ci-clinical-sequence__context {
    padding: var(--hc-ci-space-3) var(--hc-ci-space-4);
    margin-bottom: var(--hc-ci-space-3);
    border-inline-start: var(--hc-ci-semantic-border-width) solid var(--hc-ci-color-context);
    background: var(--hc-ci-color-surface-subtle);
}

.hc-ci-clinical-sequence__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--hc-ci-space-2);
    padding: 0;
    margin: 0 0 var(--hc-ci-space-3);
    list-style: none;
}

.hc-ci-clinical-sequence__steps li {
    position: relative;
    display: grid;
    grid-template-columns: var(--hc-ci-size-control-compact) minmax(0, 1fr);
    align-content: start;
    gap: var(--hc-ci-space-3);
    min-height: 7.5rem;
    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);
    background: var(--hc-ci-color-surface);
}

.hc-ci-clinical-sequence__index {
    display: grid;
    width: var(--hc-ci-size-control-compact);
    height: var(--hc-ci-size-control-compact);
    place-items: center;
    border-radius: var(--hc-ci-radius-pill);
    color: var(--hc-ci-color-text-on-selected);
    background: var(--hc-ci-color-action);
    font-size: var(--hc-ci-font-size-metadata);
}

.hc-ci-trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--hc-ci-space-3);
}

.hc-ci-trend-grid__period {
    grid-column: 1 / -1;
}

.hc-ci-trend-card,
.hc-ci-marker-focus {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-large);
    background: var(--hc-ci-color-surface);
}

.hc-ci-trend-card__header,
.hc-ci-marker-focus__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hc-ci-space-3);
    padding: var(--hc-ci-space-3);
    border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-marker-focus__header {
    gap: var(--hc-ci-space-4);
    padding: var(--hc-ci-space-4);
}

.hc-ci-trend-card__header > span,
.hc-ci-trend-card__latest,
.hc-ci-marker-focus__header > span,
.hc-ci-marker-focus__latest {
    display: flex;
    flex-direction: column;
    gap: var(--hc-ci-space-1);
}

.hc-ci-trend-card__latest,
.hc-ci-marker-focus__latest {
    align-items: flex-end;
    text-align: end;
}

.hc-ci-trend-card__latest {
    font-size: var(--hc-ci-font-size-small);
}

.hc-ci-trend-card__plot,
.hc-ci-marker-focus__plot {
    display: block;
    width: 100%;
    height: 8.5rem;
    overflow: visible;
    background: var(--hc-ci-gradient-section);
}

.hc-ci-marker-focus__plot {
    height: 18rem;
}

.hc-ci-trend-card__reference,
.hc-ci-marker-focus__reference {
    fill: rgb(53 107 85 / 10%);
}

.hc-ci-trend-card__grid,
.hc-ci-marker-focus__grid {
    fill: none;
    stroke: var(--hc-ci-color-border);
    stroke-width: 0.4;
    vector-effect: non-scaling-stroke;
}

.hc-ci-marker-focus__grid {
    stroke-width: 0.5;
}

.hc-ci-trend-card__line,
.hc-ci-marker-focus__line {
    fill: none;
    stroke: var(--hc-ci-color-action);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.hc-ci-trend-card__point,
.hc-ci-marker-focus__point {
    fill: var(--hc-ci-color-surface);
    stroke: var(--hc-ci-color-action);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.hc-ci-marker-focus__threshold {
    stroke: var(--hc-ci-color-boundary);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}

.hc-ci-marker-focus__thresholds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--hc-ci-space-3);
    padding: var(--hc-ci-space-4);
    margin: 0;
    border-top: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    list-style: none;
}

.hc-ci-marker-focus__thresholds li {
    display: flex;
    flex-direction: column;
    gap: var(--hc-ci-space-1);
}

.hc-ci-candidate-matrix {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-large);
    background: var(--hc-ci-color-surface);
}

.hc-ci-candidate-lane {
    --hc-ci-fit-accent: var(--hc-ci-color-border-strong);

    display: grid;
    grid-template-columns: minmax(14rem, 1.4fr) repeat(var(--hc-ci-signal-count, 1), minmax(5rem, 0.6fr));
    min-width: max-content;
    border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-candidate-lane:last-child {
    border-bottom: 0;
}

.hc-ci-candidate-lane--header {
    color: var(--hc-ci-color-text-muted);
    background: var(--hc-ci-color-surface-subtle);
    font-size: var(--hc-ci-font-size-metadata);
}

.hc-ci-candidate-lane[data-selected='true'] {
    background: var(--hc-ci-gradient-selected);
    box-shadow: inset var(--hc-ci-semantic-border-width) 0 0 var(--hc-ci-fit-accent);
}

.hc-ci-candidate-lane > * {
    display: grid;
    align-content: center;
    gap: var(--hc-ci-space-1);
    min-height: var(--hc-ci-size-row);
    padding: var(--hc-ci-space-3);
    border-inline-end: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-candidate-lane > *:last-child {
    border-inline-end: 0;
}

.hc-ci-signal-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--hc-ci-space-2);
    color: var(--hc-ci-color-weak);
}

.hc-ci-candidate-lane .hc-ci-signal-cell {
    justify-content: center;
    text-align: center;
}

.hc-ci-signal-cell--supports {
    color: var(--hc-ci-color-support);
}

.hc-ci-signal-cell--contextual {
    color: var(--hc-ci-color-context);
}

.hc-ci-signal-cell--conflicts {
    color: var(--hc-ci-color-conflict);
}

.hc-ci-signal-cell--unknown {
    color: var(--hc-ci-color-weak);
}

.hc-ci-pair-comparison {
    overflow: hidden;
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-large);
    background: var(--hc-ci-color-surface);
}

.hc-ci-pair-comparison__header,
.hc-ci-pair-comparison__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.8fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--hc-ci-space-3);
}

.hc-ci-pair-comparison__header {
    padding: var(--hc-ci-space-4);
    background: var(--hc-ci-gradient-section);
    text-align: center;
}

.hc-ci-pair-comparison__header h3 {
    margin: 0;
}

.hc-ci-pair-comparison__versus {
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-metadata);
    text-transform: uppercase;
}

.hc-ci-pair-comparison__signals {
    border-top: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-pair-comparison__row {
    min-height: var(--hc-ci-size-row);
    padding: var(--hc-ci-space-2) var(--hc-ci-space-4);
    border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    text-align: center;
}

.hc-ci-pair-comparison__row .hc-ci-signal-cell {
    justify-content: center;
}

.hc-ci-pair-comparison__differentiator {
    display: flex;
    flex-direction: column;
    gap: var(--hc-ci-space-1);
    padding: var(--hc-ci-space-4);
    border-inline-start: var(--hc-ci-semantic-border-width) solid var(--hc-ci-color-action);
    background: var(--hc-ci-color-surface-subtle);
}

.hc-ci-threshold-ladder {
    margin: 0;
}

.hc-ci-threshold-ladder__levels {
    display: grid;
    gap: var(--hc-ci-space-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

.hc-ci-threshold-ladder__level {
    display: grid;
    grid-template-columns: var(--hc-ci-size-control) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hc-ci-space-3);
    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);
    background: var(--hc-ci-color-surface);
}

.hc-ci-threshold-ladder__level[data-active='true'] {
    border-color: var(--hc-ci-color-action);
    background: var(--hc-ci-gradient-selected), var(--hc-ci-color-surface);
}

.hc-ci-threshold-ladder__index {
    display: grid;
    width: var(--hc-ci-size-control);
    height: var(--hc-ci-size-control);
    place-items: center;
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border-strong);
    border-radius: var(--hc-ci-radius-pill);
    color: var(--hc-ci-color-text-muted);
    font-variant-numeric: tabular-nums;
}

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

.hc-ci-threshold-ladder__signals {
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-small);
}

.hc-ci-threshold-ladder__signal {
    justify-self: end;
    padding: var(--hc-ci-space-2) var(--hc-ci-space-3);
    border-radius: var(--hc-ci-radius-pill);
    background: var(--hc-ci-color-surface-subtle);
    font-size: var(--hc-ci-font-size-small);
}

.hc-ci-threshold-ladder figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hc-ci-space-2) var(--hc-ci-space-4);
    margin-top: var(--hc-ci-space-3);
}

@media (max-width: 40rem) {
    .hc-ci-product-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--hc-ci-space-2);
        padding-block: var(--hc-ci-space-2);
    }

    .hc-ci-product-bar__identity,
    .hc-ci-product-bar__actions {
        width: 100%;
    }

    .hc-ci-product-bar__actions {
        padding-top: var(--hc-ci-space-2);
        border-top: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    }

    .hc-ci-section__header,
    .hc-ci-entity-header,
    .hc-ci-row,
    .hc-ci-result-row,
    .hc-ci-state-message {
        grid-template-columns: 1fr;
    }

    .hc-ci-row__aside,
    .hc-ci-result-row__value {
        justify-content: flex-start;
        justify-items: start;
    }

    .hc-ci-catalog-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .hc-ci-catalog-row__value {
        white-space: normal;
    }

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

    .hc-ci-convergence {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--hc-ci-space-3);
    }

    .hc-ci-convergence__evidence {
        padding-inline-start: var(--hc-ci-space-4);
        border-inline-start: var(--hc-ci-border-width) solid var(--hc-ci-color-border-strong);
    }

    .hc-ci-convergence__relation {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .hc-ci-convergence__relation > .hc-ci-grade {
        grid-column: 2;
        justify-self: start;
    }

    .hc-ci-convergence__connector {
        inset-inline-start: calc(-1 * var(--hc-ci-space-4));
        width: var(--hc-ci-space-4);
        transform: none !important;
    }

    .hc-ci-convergence__candidate {
        min-height: auto;
    }

    .hc-ci-clinical-spine__item {
        grid-template-columns: var(--hc-ci-size-control-compact) minmax(0, 1fr);
    }

    .hc-ci-clinical-spine__item > .hc-ci-relation-mark,
    .hc-ci-clinical-spine__item > .hc-ci-grade {
        grid-column: 2;
    }

    .hc-ci-mechanism {
        grid-template-columns: minmax(0, 1fr);
    }

    .hc-ci-mechanism__visual .hc-ci-organ-visual,
    .hc-ci-mechanism__visual .hc-ci-tissue-signal {
        min-height: 12rem;
    }

    .hc-ci-mechanism__steps,
    .hc-ci-clinical-sequence__steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .hc-ci-mechanism__step {
        min-height: auto;
        border-inline-end: 0;
        border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    }

    .hc-ci-mechanism__step:last-child {
        border-bottom: 0;
    }

    .hc-ci-mechanism__arrow,
    .hc-ci-clinical-sequence__arrow {
        top: auto;
        bottom: calc(-1 * var(--hc-ci-space-3));
        inset-inline-end: 50%;
        transform: translateX(50%) rotate(90deg);
    }

    .hc-ci-clinical-sequence__steps li {
        min-height: auto;
    }

    .hc-ci-trend-card__header,
    .hc-ci-marker-focus__header {
        grid-template-columns: minmax(0, 1fr);
    }

    .hc-ci-trend-card__latest,
    .hc-ci-marker-focus__latest {
        align-items: flex-start;
        text-align: start;
    }

    .hc-ci-marker-focus__plot {
        height: 13rem;
    }

    .hc-ci-candidate-lane {
        grid-template-columns: minmax(9rem, 1fr) repeat(var(--hc-ci-signal-count, 1), minmax(2.75rem, 0.4fr));
    }

    .hc-ci-pair-comparison__header,
    .hc-ci-pair-comparison__row {
        grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 1fr);
    }

    .hc-ci-pair-comparison__row {
        padding-inline: var(--hc-ci-space-2);
    }

    .hc-ci-pair-comparison__row .hc-ci-signal-cell {
        flex-direction: column;
    }

    .hc-ci-threshold-ladder__level {
        grid-template-columns: var(--hc-ci-size-control) minmax(0, 1fr);
    }

    .hc-ci-threshold-ladder__signal {
        grid-column: 2;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hc-ci-surface *,
    .hc-ci-surface *::before,
    .hc-ci-surface *::after {
        scroll-behavior: auto !important;
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}