.topology-mnemonic {
    max-width: 32rem;
    margin-inline: auto;
}

.topology-mnemonic .topo-shape {
    width: 7rem;
    height: 7rem;
}

.topology-context-card,
.topology-explorer {
    min-width: 0;
    margin-top: var(--space-5);
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-link);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-resting);
}

.topology-context-card--historical {
    border-left-color: var(--secondary-color);
}

.topology-context-card--later {
    border-left-color: var(--color-muted);
}

.topology-context-card h3,
.topology-context-card h4,
.topology-explorer h3,
.topology-explorer h4,
.topology-explorer h5 {
    margin: 0 0 var(--space-3);
    color: var(--primary-color);
}

.topology-layer-label {
    margin: 0 0 var(--space-2);
    color: var(--color-muted);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.topology-source-links {
    font-family: var(--font-ui);
    font-size: 0.92rem;
}

.topology-worked-example {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.topology-noscript-note {
    margin-top: var(--space-4);
    padding: var(--space-3);
    color: var(--color-ink);
    background: var(--color-nav-hover);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
}

.topology-explorer__header {
    max-width: var(--measure-reading);
    margin-bottom: var(--space-5);
}

.topology-explorer__intro,
.topology-help,
.topology-quantifier-note {
    color: var(--color-muted);
}

.topology-parse-preview,
.topology-scope-note {
    margin-top: var(--space-3);
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
}

.topology-parse-preview {
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.topology-workspace {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
}

.topology-editor,
.topology-formula-editor,
.topology-output {
    min-width: 0;
}

.topology-editor,
.topology-formula-editor {
    padding: var(--space-4);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.topology-field-label,
.topology-control-label {
    display: block;
    margin-top: var(--space-4);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-weight: 750;
}

.topology-field-label select,
.topology-field-label input {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: var(--space-2);
}

.topology-explorer select,
.topology-explorer input[type="text"] {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
}

.topology-choice-group[aria-invalid="true"],
.topology-explorer select[aria-invalid="true"],
.topology-explorer input[aria-invalid="true"] {
    border-color: #a33a0b;
    box-shadow: 0 0 0 1px #a33a0b;
}

.topology-formula-input {
    font-family: var(--font-mono) !important;
    font-size: 1.05rem !important;
}

.topology-choice-group,
.topology-valuation-row {
    min-width: 0;
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
}

.topology-choice-group > legend,
.topology-valuation-row > legend {
    padding-inline: var(--space-2);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-weight: 750;
}

.topology-inline-choice,
.topology-subset-choice {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    min-height: 2.5rem;
    margin: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-mono);
}

.topology-inline-choice:has(input:checked),
.topology-subset-choice:has(input:checked) {
    border-color: var(--color-link);
    box-shadow: inset 3px 0 0 var(--color-link);
    font-weight: 750;
}

.topology-inline-choice input,
.topology-subset-choice input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-link);
}

.topology-subset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: var(--space-1);
    max-height: 18rem;
    overflow: auto;
    overscroll-behavior: contain;
}

.topology-valuation-grid {
    display: grid;
    gap: var(--space-2);
}

.topology-valuation-row {
    margin: 0;
    background: var(--color-surface);
}

.topology-operator-buttons,
.topology-example-buttons,
.topology-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.topology-actions {
    margin-top: var(--space-4);
}

.topology-explorer button {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 700;
    line-height: 1.3;
}

.topology-explorer button:hover:not(:disabled) {
    border-color: var(--color-link);
}

.topology-explorer button:disabled {
    color: var(--color-muted);
    background: var(--color-surface-muted);
    cursor: not-allowed;
    opacity: 0.72;
}

.topology-explorer .topology-primary-action {
    color: #ffffff;
    background: var(--color-link);
    border-color: var(--color-link);
}

.topology-explorer .topology-primary-action:disabled {
    color: var(--color-muted);
    background: var(--color-surface-muted);
    border-color: var(--color-border);
}

.topology-explorer :is(button, input, select, summary):focus-visible,
.topology-table-scroll:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.topology-live-status,
.topology-error {
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-weight: 700;
}

.topology-live-status {
    background: var(--color-nav-hover);
    border: 1px solid var(--color-border-strong);
}

.topology-error,
.topology-error-detail {
    color: #7a2e0c;
}

.topology-error {
    background: #fff2e8;
    border: 2px solid #a33a0b;
}

.topology-output {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 2px solid var(--color-border-strong);
}

.topology-result-block {
    min-width: 0;
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.topology-machine-status {
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-weight: 800;
}

.topology-definition-list {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    margin: var(--space-3) 0 0;
}

.topology-definition-list dt {
    font-family: var(--font-ui);
    font-weight: 800;
}

.topology-definition-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
}

.topology-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.topology-result-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    background: var(--color-surface);
    font-size: 0.92rem;
}

.topology-result-table th,
.topology-result-table td {
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    text-align: start;
    vertical-align: top;
}

.topology-result-table th {
    background: var(--color-nav-hover);
    font-family: var(--font-ui);
}

.topology-result-table td {
    font-family: var(--font-mono);
}

.topology-trace summary {
    margin-top: var(--space-3);
    padding: var(--space-2);
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 750;
}

@media (max-width: 52rem) {
    .topology-workspace {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 30rem) {
    .topology-context-card,
    .topology-explorer,
    .topology-editor,
    .topology-formula-editor,
    .topology-result-block {
        padding: var(--space-3);
    }

    .topology-definition-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .topology-definition-list dd {
        margin-bottom: var(--space-2);
    }

    .topology-actions > button {
        flex: 1 1 100%;
    }
}

@media print {
    .topology-workspace,
    .topology-live-status,
    .topology-error,
    .topology-noscript-note {
        display: none !important;
    }

    .topology-context-card,
    .topology-explorer,
    .topology-result-block,
    .topology-worked-example {
        color: #000000 !important;
        background: #ffffff !important;
        border: 1px solid #777777 !important;
        box-shadow: none !important;
    }

    .topology-context-card,
    .topology-explorer {
        margin: 0 0 6mm !important;
        break-inside: auto;
    }

    .topology-output,
    .topology-result-block {
        display: block !important;
    }

    .topology-table-scroll {
        overflow: visible !important;
    }

    .topology-result-table {
        min-width: 0 !important;
        font-size: 8pt;
    }

    .topology-trace:not([open]) > :not(summary) {
        display: block !important;
    }
}