.canvas-stage {
    grid-area: canvas;
    align-self: stretch;
}

.tour-panel {
    grid-area: tour;
    align-self: start;
    gap: var(--space-lg);
}

.panel,
.canvas-stage {
    min-height: 0;
    min-width: 0;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--panel-shadow);
}

.panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4xl);
    padding: var(--panel-padding);
    overflow: auto;
}

.panel.instance-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-xl);
    overflow: visible;
}

.instance-message {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-panel);
    color: var(--danger-emphasis);
    background: linear-gradient(90deg, var(--danger-bg) 0%, var(--danger-bg-soft) 100%);
    font-size: var(--font-size-small);
    line-height: var(--line-height-label);
    box-shadow: var(--danger-shadow);
}

.instance-message[hidden] {
    display: none;
}

.message-close {
    flex: 0 0 auto;
    border-color: var(--danger-border);
    color: var(--danger-emphasis);
}

.panel-heading.split {
    justify-content: space-between;
    gap: var(--cluster-gap);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    margin: 0;
}

.stat-grid div {
    min-height: var(--metric-card-min-height);
    padding: var(--space-xl);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-control);
    background: var(--panel-soft-bg);
}

.stat-grid dt {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-label);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}

.stat-grid dd {
    margin: 0;
    color: var(--text);
    font-size: var(--font-size-stat);
    font-weight: var(--font-weight-label);
    line-height: var(--line-height-tight);
    overflow-wrap: anywhere;
}

.haystack-section {
    display: grid;
    gap: var(--cluster-gap);
    padding: var(--section-padding);
    border: 1px solid var(--attention-border);
    border-radius: var(--radius-panel);
    background: linear-gradient(180deg, var(--attention-bg-soft) 0%, var(--attention-bg) 100%);
}

.haystack-grid div {
    border-color: var(--attention-border);
    background: var(--panel-translucent-bg);
}

.description,
.complexity-note,
.status-message {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-size-body);
    line-height: var(--line-height-longform);
}

.prose,
.standard-copy {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-size-body);
    line-height: var(--line-height-longform);
}

.inline-formula {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    margin: 0 0.04em;
    color: var(--math-text);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02em;
    font-weight: 700;
    line-height: 1;
    vertical-align: baseline;
}

.inline-formula sup {
    margin-left: 0.03em;
    font-size: 0.68em;
    line-height: 1;
    transform: translateY(-0.32em);
}

.stat-grid dd .inline-formula {
    margin: 0;
    font-family: var(--font-ui);
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
}

.complexity-note {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--attention-text);
    background: transparent;
}

.panel-actions,
.tour-controls,
.download-row {
    gap: var(--control-gap);
    flex-wrap: wrap;
}

.file-action {
    position: relative;
    overflow: hidden;
}

.file-action input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.canvas-stage {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.canvas-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cluster-gap);
    padding: var(--space-2xl) var(--space-3xl);
    border-bottom: 1px solid var(--panel-border);
}

.solver-validation-banner {
    display: grid;
    gap: var(--space-xs);
    margin: var(--space-lg) var(--space-3xl);
    padding: var(--space-xl) var(--space-xl);
    border: 1px solid var(--warning-border-strong);
    border-radius: var(--radius-control);
    color: var(--warning-text);
    background: var(--warning-bg);
    font-size: var(--font-size-small);
    line-height: var(--line-height-copy);
}

.solver-validation-banner[hidden] {
    display: none;
}

.solver-validation-banner strong {
    color: var(--warning-strong);
    font-size: var(--font-size-control);
}

.solver-validation-banner span {
    color: var(--warning-text);
}

.visual-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--control-gap);
    flex-wrap: wrap;
}

.visual-actions .view-mode-toggle {
    flex: 0 0 auto;
}

.graph-more-options-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--control-gap);
    flex-wrap: wrap;
    padding: var(--space-lg) var(--space-3xl);
    border-top: 1px solid var(--panel-border);
    background: var(--panel-soft-bg);
}

.graph-more-options-row .options-panel {
    top: auto;
    right: auto;
    bottom: calc(100% + 8px);
    left: 0;
}

.options-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.options-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: min(360px, calc(100vw - 36px));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--control-gap);
    padding: var(--space-lg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-panel);
    background: var(--panel-bg);
    box-shadow: var(--panel-shadow);
}

.options-panel[hidden] {
    display: none;
}

.options-panel .view-mode-toggle,
.options-panel .switch,
.options-panel .range-control {
    grid-column: 1 / -1;
}

.options-panel .tool-button,
.options-panel .view-mode-toggle,
.options-panel .switch,
.options-panel .range-control {
    width: 100%;
}

.options-close-button {
    grid-column: 1 / -1;
    justify-self: end;
}

.range-control {
    min-height: var(--control-height);
    display: grid;
    gap: var(--space-xs);
    align-items: center;
    color: var(--text);
    font-size: var(--font-size-control-small);
}

.range-control > span {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
}

.range-control output {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.range-control input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
}

.view-mode-toggle {
    height: var(--control-height);
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-control);
    background: var(--panel-soft-bg);
}

.mode-button {
    height: var(--control-height-compact);
    border-color: transparent;
    padding: 0 var(--space-control-compact-x);
    background: transparent;
    color: var(--muted);
    font-size: var(--font-size-control-small);
}

.mode-button.active {
    color: var(--on-primary);
    background: var(--primary);
    box-shadow: var(--active-action-shadow);
}

.canvas-tour-row {
    display: flex;
    align-items: center;
    gap: var(--control-gap);
    flex-wrap: wrap;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--panel-border);
}

.canvas-tour-row .tour-controls {
    flex: 1 1 auto;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.canvas-tour-row .switch,
.canvas-tour-row .tool-button {
    height: var(--control-height-compact);
    flex: 0 0 auto;
    padding: 0 var(--space-control-compact-x);
    font-size: var(--font-size-control-small);
}

.animation-control-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.gap-overlay-control {
    justify-content: center;
}

.gap-overlay-control[hidden] {
    display: none;
}

.canvas-tour-row .animation-action.active-primary {
    color: var(--on-primary);
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: var(--action-shadow);
}

.canvas-tour-row .animation-action:disabled {
    color: var(--control-disabled-accent);
    background: var(--panel-soft-bg);
    border-color: var(--control-disabled-border);
    box-shadow: none;
    opacity: 0.72;
}

.canvas-tour-row .animation-step {
    min-width: 74px;
    gap: var(--space-sm);
    padding: 0 var(--space-control-compact-x);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-label);
}

.animation-help-text {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 20;
    width: min(320px, 78vw);
    padding: var(--tooltip-padding);
    border: 1px solid var(--tooltip-border);
    border-radius: var(--radius-panel);
    color: var(--tooltip-text);
    background: var(--tooltip-bg);
    box-shadow: var(--panel-shadow);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-copy-strong);
    line-height: var(--tooltip-line-height);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: var(--tooltip-transition);
}

.animation-help-text[hidden] {
    display: none;
}

.animation-action:hover ~ .animation-help-text,
.animation-action:focus-visible ~ .animation-help-text {
    opacity: 1;
    transform: translateY(0);
}

.tour-metrics {
    display: grid;
    align-items: start;
    gap: var(--space-sm);
    margin: 0;
}

.tour-metrics div {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, auto) auto;
    align-items: center;
    justify-content: start;
    gap: var(--space-sm);
}

.tour-metrics dt {
    color: var(--muted);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-label);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}

.tour-metrics dd {
    margin: 0;
    color: var(--text);
    font-size: var(--font-size-overlay-metric);
    font-weight: var(--font-weight-label);
    text-align: right;
    line-height: 1;
}

.graph-metrics-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.graph-metric-pill {
    position: absolute;
    width: max-content;
    max-width: calc(100% - 20px);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--overlay-pill-border);
    border-radius: var(--radius-control);
    background: var(--overlay-pill-bg);
    box-shadow: var(--shadow-overlay);
    backdrop-filter: blur(10px);
}

.graph-metric-gaps {
    top: 10px;
    right: 10px;
}

.graph-metric-longest-path {
    bottom: 10px;
    right: 10px;
}

.canvas-pills {
    margin-left: auto;
    gap: var(--control-gap);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.canvas-pills span,
.state-dot,
.status-chip {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 0 var(--space-control-compact-x);
    color: var(--neutral-pill-text);
    background: var(--neutral-pill-bg);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-label);
}

.canvas-pills span.success {
    color: var(--success-text);
    background: var(--success-bg);
}

.canvas-pills span.error,
.status-chip.error {
    color: var(--danger-text);
    background: var(--danger-pill-bg);
}

.canvas-pills span.warning,
.state-dot.warning,
.status-chip.warning {
    color: var(--warning-pill-text);
    background: var(--warning-pill-bg);
}

.status-chip.success {
    color: var(--success-text);
    background: var(--success-bg);
}

.canvas-pills span[hidden] {
    display: none;
}

#visual-surface {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: clamp(440px, calc(100vh - 260px), 620px);
    height: 100%;
    background:
        linear-gradient(var(--canvas-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--canvas-grid-line) 1px, transparent 1px),
        var(--canvas-grid-bg);
    background-size: var(--canvas-grid-size) var(--canvas-grid-size);
}

#modern-cy,
#graph-3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#graph-3d-canvas {
    display: block;
    cursor: grab;
    background: var(--canvas-dark-bg);
}

#visual-surface.three-d-active {
    background: var(--canvas-dark-bg);
}

#graph-3d-canvas:active {
    cursor: grabbing;
}

#graph-3d-canvas[hidden],
#modern-cy[hidden] {
    display: none;
}

.sequence {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    margin: 0;
    padding: var(--space-lg) var(--space-xl) var(--space-md);
    resize: none;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-control);
    color: var(--sequence-text);
    background: var(--code-bg);
    font-family: var(--font-mono);
    font-size: var(--font-size-control-small);
    white-space: nowrap;
    word-break: normal;
    line-height: var(--line-height-label);
}

.sequence:focus {
    outline: 2px solid var(--sequence-focus-ring);
    border-color: var(--sequence-focus-border);
}

.download-row {
    margin-top: 0;
}

.status-message.error,
.state-dot.error {
    color: var(--danger-text);
}

.state-dot.active {
    color: var(--success-text);
    background: var(--success-bg);
}