.workspace.architecture-mode {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
}

.workspace.architecture-mode .topbar,
.workspace.architecture-mode .metric-strip,
.workspace.architecture-mode .context-rail {
    display: none;
}

.architecture-view {
    --arch-bg: #edf4f6;
    --arch-map: #f5fafb;
    --arch-surface: rgba(248, 252, 253, 0.96);
    --arch-surface-strong: #ffffff;
    --arch-line: rgba(25, 83, 91, 0.18);
    --arch-line-strong: rgba(8, 127, 131, 0.4);
    --arch-text: #122126;
    --arch-text-soft: #40565c;
    --arch-muted: #71858a;
    --arch-cyan: #087f83;
    --arch-blue: #2f5bea;
    --arch-green: #207a4a;
    --arch-amber: #b7791f;
    --arch-red: #bd3d2a;
    --arch-violet: #7442a8;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 72px minmax(0, 1fr) 76px;
    width: 100%;
    height: calc(100vh - 48px);
    min-height: 760px;
    padding: 0;
    overflow: hidden;
    color: var(--arch-text);
    border-color: var(--arch-line-strong);
    border-radius: 6px;
    background:
        linear-gradient(rgba(25, 83, 91, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 83, 91, 0.045) 1px, transparent 1px),
        var(--arch-bg);
    background-size: 30px 30px;
    box-shadow: 0 24px 64px rgba(20, 54, 61, 0.16), inset 0 0 80px rgba(8, 127, 131, 0.045);
}

.architecture-view.active {
    display: grid;
}

:root[data-theme="dark"] .architecture-view {
    --arch-bg: #07090d;
    --arch-map: #070b10;
    --arch-surface: rgba(8, 12, 17, 0.94);
    --arch-surface-strong: #0b1016;
    --arch-line: rgba(143, 184, 196, 0.18);
    --arch-line-strong: rgba(143, 214, 222, 0.38);
    --arch-text: #eef7f7;
    --arch-text-soft: #b7c7ca;
    --arch-muted: #70858b;
    --arch-cyan: #58f3e7;
    --arch-blue: #63a9ff;
    --arch-green: #69eaa3;
    --arch-amber: #ffc766;
    --arch-red: #ff6577;
    --arch-violet: #c592ff;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.44), inset 0 0 90px rgba(88, 243, 231, 0.035), 0 0 38px rgba(69, 194, 188, 0.08);
}

.architecture-view::before {
    left: 28px;
}

.architecture-view button,
.architecture-view input {
    font: inherit;
}

.architecture-command-bar,
.architecture-map-workspace,
.architecture-activity-strip {
    position: relative;
    z-index: 3;
}

.architecture-command-bar {
    display: grid;
    grid-template-columns: 300px minmax(180px, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 0 22px;
    border-bottom: 1px solid var(--arch-line-strong);
    background: color-mix(in srgb, var(--arch-surface-strong) 92%, transparent);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.1);
}

.architecture-lockup,
.architecture-live-status,
.architecture-headline-metrics,
.architecture-headline-metrics > div,
.architecture-insight-header,
.architecture-section-title,
.architecture-impact-list > div,
.architecture-activity-strip,
.architecture-event-track,
.architecture-event-track article {
    display: flex;
    align-items: center;
}

.architecture-lockup {
    gap: 13px;
}

.architecture-mark {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--arch-cyan);
    background: color-mix(in srgb, var(--arch-cyan) 9%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--arch-cyan) 24%, transparent), inset 0 0 14px color-mix(in srgb, var(--arch-cyan) 8%, transparent);
    transform: rotate(45deg);
}

.architecture-mark i,
.architecture-mark b {
    position: absolute;
    display: block;
    border: 1px solid var(--arch-cyan);
}

.architecture-mark i {
    width: 15px;
    height: 15px;
}

.architecture-mark b {
    width: 5px;
    height: 5px;
    background: var(--arch-cyan);
    box-shadow: 0 0 10px var(--arch-cyan);
}

.architecture-lockup strong,
.architecture-lockup span {
    display: block;
}

.architecture-lockup strong,
.architecture-lockup span,
.architecture-live-status,
.architecture-headline-metrics span,
.architecture-control-heading span,
.architecture-rail-label,
.architecture-map-title span,
.architecture-map-coordinate,
.architecture-insight-header span,
.architecture-identity-code,
.architecture-strip-label span,
.architecture-event-track time,
.architecture-event-track article > span {
    font-family: "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.06em;
}

.architecture-lockup strong {
    font-size: 12px;
}

.architecture-lockup span {
    margin-top: 4px;
    color: var(--arch-muted);
    font-size: 9px;
}

.architecture-live-status {
    justify-self: start;
    gap: 9px;
    color: var(--arch-text-soft);
    font-size: 10px;
}

.architecture-live-status time {
    color: var(--arch-muted);
    font-size: 9px;
}

.architecture-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--arch-green);
    box-shadow: 0 0 13px var(--arch-green);
    animation: architecture-pulse 1.8s ease-in-out infinite;
}

.architecture-headline-metrics {
    align-self: stretch;
}

.architecture-headline-metrics > div {
    min-width: 98px;
    height: 100%;
    justify-content: space-between;
    gap: 14px;
    padding: 0 15px;
    border-left: 1px solid var(--arch-line);
}

.architecture-headline-metrics span {
    color: var(--arch-muted);
    font-size: 8px;
}

.architecture-headline-metrics strong {
    color: var(--arch-cyan);
    font-family: "DIN Alternate", "SFMono-Regular", Consolas, monospace;
    font-size: 20px;
}

.architecture-headline-metrics .architecture-risk-metric strong {
    color: var(--arch-red);
}

.architecture-map-workspace {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr) 310px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.architecture-control-rail,
.architecture-insight-panel {
    min-height: 0;
    overflow: auto;
    background: var(--arch-surface);
}

.architecture-control-rail {
    padding: 21px 16px;
    border-right: 1px solid var(--arch-line);
}

.architecture-control-heading span,
.architecture-control-heading strong {
    display: block;
}

.architecture-control-heading span,
.architecture-rail-label {
    color: var(--arch-cyan);
    font-size: 8px;
}

.architecture-control-heading strong {
    margin-top: 5px;
    font-size: 15px;
}

.architecture-mode-switch,
.architecture-branch-switch {
    display: grid;
    gap: 6px;
    margin-top: 18px;
}

.architecture-mode-switch button,
.architecture-branch-switch button {
    position: relative;
    min-height: 36px;
    padding: 0 10px;
    color: var(--arch-muted);
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
}

.architecture-mode-switch button:hover,
.architecture-mode-switch button.active,
.architecture-branch-switch button:hover,
.architecture-branch-switch button.active {
    color: var(--arch-text);
    border-color: var(--arch-line);
    background: color-mix(in srgb, var(--arch-cyan) 6%, transparent);
    box-shadow: inset 2px 0 var(--arch-cyan);
}

.architecture-branch-filter {
    margin-top: 22px;
}

.architecture-branch-switch {
    grid-template-columns: 1fr 1fr;
    margin-top: 9px;
}

.architecture-branch-switch button {
    text-align: center;
    font-family: "SFMono-Regular", Consolas, monospace;
}

.architecture-domain-filter {
    display: grid;
    gap: 9px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--arch-line);
}

.architecture-domain-filter > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.architecture-domain-filter button {
    min-height: 31px;
    padding: 0 8px;
    color: var(--arch-muted);
    border: 1px solid var(--arch-line);
    background: color-mix(in srgb, var(--arch-surface-strong) 72%, transparent);
    cursor: pointer;
    font-size: 10px;
}

.architecture-domain-filter button:hover,
.architecture-domain-filter button.active {
    color: var(--arch-text);
    border-color: color-mix(in srgb, var(--arch-blue) 64%, var(--arch-line));
    background: color-mix(in srgb, var(--arch-blue) 9%, transparent);
    box-shadow: inset 0 -2px var(--arch-blue), 0 0 16px color-mix(in srgb, var(--arch-blue) 10%, transparent);
}

.architecture-change-toggle {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 9px;
    color: var(--arch-text-soft);
    border: 1px solid var(--arch-line);
    background: color-mix(in srgb, var(--arch-amber) 3%, transparent);
    cursor: pointer;
}

.architecture-change-toggle input,
.architecture-layer-list input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.architecture-toggle-track {
    position: relative;
    display: block;
    width: 32px;
    height: 16px;
    border: 1px solid var(--arch-muted);
    background: color-mix(in srgb, var(--arch-muted) 8%, transparent);
}

.architecture-toggle-track i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: var(--arch-muted);
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.architecture-change-toggle input:checked + .architecture-toggle-track {
    border-color: var(--arch-amber);
}

.architecture-change-toggle input:checked + .architecture-toggle-track i {
    background: var(--arch-amber);
    box-shadow: 0 0 10px var(--arch-amber);
    transform: translateX(16px);
}

.architecture-change-toggle strong,
.architecture-change-toggle small {
    display: block;
}

.architecture-change-toggle strong {
    font-size: 9px;
}

.architecture-change-toggle small {
    margin-top: 3px;
    color: var(--arch-muted);
    font-size: 8px;
}

.architecture-search-field {
    display: grid;
    gap: 7px;
    margin-top: 20px;
    color: var(--arch-muted);
    font-size: 9px;
}

.architecture-search-field input {
    width: 100%;
    height: 34px;
    padding: 0 9px;
    color: var(--arch-text-soft);
    border: 1px solid var(--arch-line);
    border-radius: 0;
    outline: 0;
    background: color-mix(in srgb, var(--arch-surface-strong) 78%, transparent);
}

.architecture-search-field input:focus {
    border-color: var(--arch-cyan);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--arch-cyan) 9%, transparent);
}

.architecture-layer-list,
.architecture-signal-legend {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    padding-top: 17px;
    border-top: 1px solid var(--arch-line);
}

.architecture-layer-list label,
.architecture-signal-legend div {
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: var(--arch-text-soft);
    font-size: 10px;
}

.architecture-layer-list i {
    display: block;
    width: 8px;
    height: 8px;
    color: var(--arch-cyan);
    border: 1px solid currentColor;
    background: currentColor;
    box-shadow: 0 0 9px currentColor;
    transform: rotate(45deg);
}

.architecture-layer-list input:not(:checked) + i {
    color: var(--arch-muted) !important;
    background: transparent;
    box-shadow: none;
}

.architecture-layer-list i.shared { color: var(--arch-violet); }
.architecture-layer-list i.service { color: var(--arch-blue); }
.architecture-layer-list i.client { color: var(--arch-amber); }
.architecture-layer-list i.infra { color: var(--arch-green); }

.architecture-signal-legend i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.architecture-signal-legend i.active { background: var(--arch-amber); box-shadow: 0 0 10px var(--arch-amber); }
.architecture-signal-legend i.risk { background: var(--arch-red); box-shadow: 0 0 10px var(--arch-red); }
.architecture-signal-legend i.stable { border: 1px solid var(--arch-muted); }
.architecture-signal-legend i.dependency { background: var(--arch-violet); box-shadow: 0 0 10px var(--arch-violet); }

.architecture-star-map {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background:
        linear-gradient(color-mix(in srgb, var(--arch-cyan) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--arch-cyan) 5%, transparent) 1px, transparent 1px),
        var(--arch-map);
    background-size: 27px 27px;
}

.architecture-star-map::before {
    position: absolute;
    inset: 15px;
    z-index: 1;
    pointer-events: none;
    content: "";
    border: 1px solid color-mix(in srgb, var(--arch-cyan) 10%, transparent);
    clip-path: polygon(0 0, 84px 0, 84px 1px, 100% 1px, 100% 100%, calc(100% - 84px) 100%, calc(100% - 84px) calc(100% - 1px), 0 calc(100% - 1px));
}

#architecture-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
}

#architecture-canvas.dragging {
    cursor: grabbing;
}

.architecture-map-title {
    position: absolute;
    top: 26px;
    left: 30px;
    z-index: 2;
    max-width: 360px;
    pointer-events: none;
}

.architecture-map-title span {
    color: var(--arch-cyan);
    font-size: 8px;
}

.architecture-map-title strong {
    display: block;
    margin-top: 6px;
    font-size: 17px;
}

.architecture-map-title p {
    margin: 7px 0 0;
    color: var(--arch-muted);
    font-size: 10px;
    line-height: 1.6;
}

.architecture-map-coordinate {
    position: absolute;
    top: 28px;
    right: 26px;
    z-index: 2;
    display: grid;
    gap: 5px;
    color: var(--arch-muted);
    text-align: right;
    pointer-events: none;
    font-size: 7px;
}

.architecture-map-coordinate b {
    color: var(--arch-text-soft);
    font-size: 8px;
}

.architecture-map-actions {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 3;
    display: flex;
    border: 1px solid var(--arch-line-strong);
    background: color-mix(in srgb, var(--arch-surface-strong) 90%, transparent);
}

.architecture-map-actions button {
    width: 37px;
    height: 35px;
    padding: 0;
    color: var(--arch-text);
    border: 0;
    border-right: 1px solid var(--arch-line);
    background: transparent;
    cursor: pointer;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 16px;
}

.architecture-map-actions button:last-child {
    border-right: 0;
}

.architecture-map-actions button:hover {
    color: var(--arch-cyan);
    background: color-mix(in srgb, var(--arch-cyan) 8%, transparent);
}

.architecture-hover-card {
    position: absolute;
    z-index: 5;
    display: none;
    min-width: 160px;
    padding: 9px 11px;
    color: var(--arch-text-soft);
    border: 1px solid var(--arch-line-strong);
    background: color-mix(in srgb, var(--arch-surface-strong) 96%, transparent);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
    pointer-events: none;
    font-size: 9px;
    line-height: 1.55;
}

.architecture-hover-card strong,
.architecture-hover-card span {
    display: block;
}

.architecture-hover-card strong {
    color: var(--arch-text);
    font-size: 11px;
}

.architecture-insight-panel {
    border-left: 1px solid var(--arch-line-strong);
}

.architecture-insight-header {
    position: sticky;
    top: 0;
    z-index: 2;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--arch-line-strong);
    background: color-mix(in srgb, var(--arch-surface-strong) 96%, transparent);
}

.architecture-insight-header span,
.architecture-insight-header strong {
    display: block;
}

.architecture-insight-header > div > span {
    color: var(--arch-cyan);
    font-size: 7px;
}

.architecture-insight-header strong {
    margin-top: 5px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.architecture-node-state {
    flex: 0 0 auto;
    padding: 5px 7px;
    color: var(--arch-green);
    border: 1px solid currentColor;
    font-size: 8px !important;
}

.architecture-node-state.risk { color: var(--arch-red); }
.architecture-node-state.stable { color: var(--arch-muted); }
.architecture-node-state.warning { color: var(--arch-amber); }
.architecture-node-state.active { color: var(--arch-blue); }

.architecture-node-identity,
.architecture-detail-section {
    padding: 18px;
    border-bottom: 1px solid var(--arch-line);
}

.architecture-identity-code {
    color: var(--arch-muted);
    font-size: 8px;
}

.architecture-node-identity p,
.architecture-detail-section > p,
.architecture-risk-callout p {
    color: var(--arch-text-soft);
    font-size: 10px;
    line-height: 1.7;
}

.architecture-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

.architecture-tag-row span {
    padding: 4px 6px;
    color: var(--arch-muted);
    border: 1px solid var(--arch-line);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 8px;
}

.architecture-section-title {
    gap: 9px;
    margin-bottom: 13px;
}

.architecture-section-title span {
    color: var(--arch-cyan);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 8px;
}

.architecture-section-title strong {
    font-size: 11px;
}

.architecture-signal-grid {
    display: grid;
    grid-template-columns: 58px 58px minmax(0, 1fr);
    border: 1px solid var(--arch-line);
}

.architecture-signal-grid > div {
    min-width: 0;
    padding: 9px;
    border-right: 1px solid var(--arch-line);
}

.architecture-signal-grid > div:last-child {
    border-right: 0;
}

.architecture-signal-grid span,
.architecture-signal-grid strong {
    display: block;
}

.architecture-signal-grid span {
    color: var(--arch-muted);
    font-size: 7px;
}

.architecture-signal-grid strong {
    margin-top: 5px;
    color: var(--arch-cyan);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.architecture-signal-grid > div:last-child strong {
    color: var(--arch-text-soft);
    font-size: 8px;
    line-height: 1.45;
}

.architecture-change-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding-left: 17px;
    color: var(--arch-text-soft);
    font-size: 9px;
    line-height: 1.55;
}

.architecture-change-list li::marker {
    color: var(--arch-amber);
}

.architecture-impact-list {
    margin-top: 13px;
    border-top: 1px solid var(--arch-line);
}

.architecture-dependency-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.architecture-dependency-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 10px 11px;
    border: 1px solid var(--arch-line);
    background: color-mix(in srgb, var(--arch-surface-strong) 78%, transparent);
}

.architecture-dependency-list span {
    min-width: 0;
    color: var(--arch-text);
    font-family: "SFMono-Regular", Consolas, monospace;
    overflow-wrap: anywhere;
}

.architecture-dependency-list b {
    color: var(--arch-blue);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.architecture-dependency-list b.changed,
.architecture-dependency-list b.error {
    color: var(--arch-red);
}

.architecture-dependency-list small {
    grid-column: 1 / -1;
    min-width: 0;
    color: var(--arch-muted);
    font-size: 0.66rem;
    overflow-wrap: anywhere;
}

.architecture-impact-list > div {
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--arch-line);
    font-size: 9px;
}

.architecture-impact-list span {
    color: var(--arch-text-soft);
    overflow-wrap: anywhere;
}

.architecture-impact-list b {
    color: var(--arch-green);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 7px;
}

.architecture-risk-callout {
    padding: 11px;
    border-left: 2px solid var(--arch-red);
    background: color-mix(in srgb, var(--arch-red) 6%, transparent);
}

.architecture-risk-callout > span {
    color: var(--arch-red);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 7px;
}

.architecture-risk-callout p {
    margin: 7px 0 0;
}

.architecture-activity-strip {
    gap: 22px;
    padding: 0 22px;
    border-top: 1px solid var(--arch-line-strong);
    background: color-mix(in srgb, var(--arch-surface-strong) 94%, transparent);
}

.architecture-strip-label {
    flex: 0 0 145px;
}

.architecture-strip-label span,
.architecture-strip-label strong {
    display: block;
}

.architecture-strip-label span {
    color: var(--arch-cyan);
    font-size: 7px;
}

.architecture-strip-label strong {
    margin-top: 5px;
    font-size: 11px;
}

.architecture-event-track {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.architecture-event-track article {
    flex: 1;
    min-width: 0;
    height: 42px;
    gap: 9px;
    padding: 0 15px;
    border-left: 1px solid var(--arch-line);
}

.architecture-event-track time {
    color: var(--arch-muted);
    font-size: 7px;
}

.architecture-event-track article > span {
    flex: 0 0 auto;
    padding: 3px 5px;
    color: var(--arch-cyan);
    border: 1px solid currentColor;
    font-size: 6px;
}

.architecture-event-track p {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--arch-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
}

.architecture-event-track strong {
    color: var(--arch-text-soft);
}

@keyframes architecture-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.65; }
    50% { transform: scale(1.15); opacity: 1; }
}

@media (max-width: 1380px) {
    .architecture-command-bar {
        grid-template-columns: 260px 1fr;
    }

    .architecture-live-status {
        display: none;
    }

    .architecture-map-workspace {
        grid-template-columns: 170px minmax(0, 1fr) 280px;
    }

    .architecture-headline-metrics > div {
        min-width: 84px;
        padding: 0 11px;
    }
}

@media (max-width: 1120px) {
    .architecture-view {
        grid-template-rows: auto auto auto;
        height: auto;
        min-height: 0;
    }

    .architecture-command-bar {
        display: flex;
        min-height: 68px;
    }

    .architecture-headline-metrics {
        margin-left: auto;
    }

    .architecture-headline-metrics > div:nth-child(-n + 3) {
        display: none;
    }

    .architecture-map-workspace {
        grid-template-columns: 1fr;
    }

    .architecture-control-rail {
        display: grid;
        grid-template-columns: minmax(230px, 1fr) 150px 170px minmax(210px, 1fr);
        grid-template-areas:
            "mode branch changes search"
            "domain domain domain domain";
        gap: 11px 18px;
        padding: 13px 15px;
        border-right: 0;
        border-bottom: 1px solid var(--arch-line);
    }

    .architecture-control-heading,
    .architecture-layer-list,
    .architecture-signal-legend {
        display: none;
    }

    .architecture-mode-switch {
        grid-area: mode;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
    }

    .architecture-mode-switch button {
        padding: 0 6px;
        text-align: center;
    }

    .architecture-branch-filter {
        grid-area: branch;
        margin: 0;
    }

    .architecture-branch-filter > .architecture-rail-label {
        display: none;
    }

    .architecture-branch-switch {
        margin: 0;
    }

    .architecture-domain-filter {
        grid-area: domain;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        margin: 0;
        padding: 9px 0 0;
    }

    .architecture-domain-filter > div {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .architecture-change-toggle {
        grid-area: changes;
        margin: 0;
    }

    .architecture-search-field {
        grid-area: search;
        margin: 0;
    }

    .architecture-search-field > span {
        display: none;
    }

    .architecture-star-map {
        height: 570px;
    }

    .architecture-insight-panel {
        max-height: none;
        border-top: 1px solid var(--arch-line-strong);
        border-left: 0;
    }

    .architecture-activity-strip {
        display: none;
    }
}

@media (max-width: 980px) {
    .workspace.architecture-mode {
        padding: 18px 14px 34px;
    }

    .nav-tabs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .architecture-command-bar {
        padding: 0 13px;
    }

    .architecture-lockup span,
    .architecture-headline-metrics span {
        display: none;
    }

    .architecture-headline-metrics > div {
        min-width: auto;
        padding: 0 7px;
    }

    .architecture-control-rail {
        grid-template-columns: 1fr;
        grid-template-areas:
            "mode"
            "branch"
            "domain"
            "changes"
            "search";
    }

    .architecture-domain-filter {
        grid-template-columns: 1fr;
    }

    .architecture-map-title p,
    .architecture-map-coordinate {
        display: none;
    }

    .architecture-map-title {
        top: 19px;
        left: 19px;
    }

    .architecture-star-map {
        height: 500px;
    }

    .nav-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}