[data-archbro-ui="next"] #view-architecture,[data-archbro-ui="next"] .ui-next-architecture-root,[data-archbro-ui="next"] .next-architecture-layout,[data-archbro-ui="next"] .next-architecture-graph{width:100%;max-width:100%;min-width:0} /* Source V41 summary / rich-node type sizes, scoped to the Living overview. */ [data-archbro-ui="next"] .next-graph-svg[data-layout-version="visible-horizontal-2"] .next-graph-node .next-graph-node-label{font-size:15.25px} [data-archbro-ui="next"] .next-graph-svg[data-layout-version="visible-horizontal-2"] .next-graph-node.is-area-summary .next-graph-node-label{font-size:18px} [data-archbro-ui="next"] .next-graph-svg[data-layout-version="visible-horizontal-2"] .next-graph-node-count{font-size:13px} [data-archbro-ui="next"] .ui-next-architecture-root{display:grid;gap:16px;color:var(--ui-next-ink)} [data-archbro-ui="next"] .next-architecture-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:22px 24px;border:1px solid var(--ui-next-line);border-radius:var(--ui-next-radius-md);background:var(--ui-next-surface)} [data-archbro-ui="next"] .next-architecture-heading{min-width:0;flex:1 1 320px} [data-archbro-ui="next"] .next-architecture-heading small,[data-archbro-ui="next"] .next-panel-heading small,[data-archbro-ui="next"] .next-inspector-title small{display:block;color:var(--ui-next-muted);font-size:12px;font-weight:850;letter-spacing:.08em} [data-archbro-ui="next"] .next-architecture-heading h2{margin:7px 0 5px;font-size:clamp(24px,3vw,36px);line-height:1.1;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-architecture-heading p{max-width:820px;margin:0;color:var(--ui-next-muted);font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-architecture-header-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto} [data-archbro-ui="next"] .next-architecture-header-actions button,[data-archbro-ui="next"] .next-resource-banner button,[data-archbro-ui="next"] .next-graph-toolbar button,[data-archbro-ui="next"] .next-panel-heading button,[data-archbro-ui="next"] .next-navigator-row button,[data-archbro-ui="next"] .next-graph-empty button{min-height:44px;border:1px solid var(--ui-next-line);border-radius:9px;background:var(--ui-next-surface);color:var(--ui-next-ink);padding:0 11px;font-size:12px;font-weight:750;cursor:pointer} [data-archbro-ui="next"] .next-architecture-header-actions button:hover,[data-archbro-ui="next"] .next-resource-banner button:hover,[data-archbro-ui="next"] .next-graph-toolbar button:hover:not(:disabled),[data-archbro-ui="next"] .next-panel-heading button:hover,[data-archbro-ui="next"] .next-navigator-row button:hover{border-color:var(--ui-next-accent);color:var(--ui-next-accent);background:var(--ui-next-accent-soft)} [data-archbro-ui="next"] .next-architecture-header-actions button:focus-visible,[data-archbro-ui="next"] .next-resource-banner button:focus-visible,[data-archbro-ui="next"] .next-graph-toolbar button:focus-visible,[data-archbro-ui="next"] .next-panel-heading button:focus-visible,[data-archbro-ui="next"] .next-navigator-row button:focus-visible,[data-archbro-ui="next"] .next-search-field input:focus-visible,[data-archbro-ui="next"] .next-filter-field select:focus-visible,[data-archbro-ui="next"] .next-navigator-resizer:focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:2px;box-shadow:0 0 0 5px var(--ui-next-focus)} [data-archbro-ui="next"] .next-architecture-view-nav{margin-top:-2px} [data-archbro-ui="next"] .next-architecture-identity{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0;padding:11px 14px;border:1px solid var(--ui-next-line);border-radius:12px;background:var(--ui-next-surface-muted)} [data-archbro-ui="next"] .next-architecture-identity strong,[data-archbro-ui="next"] .next-architecture-identity span{min-width:0;font-size:12px;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-architecture-identity span{color:var(--ui-next-muted);text-align:right} [data-archbro-ui="next"] .next-resource-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--ui-next-line);border-radius:12px;background:var(--ui-next-surface)} [data-archbro-ui="next"] .next-resource-banner>div{display:grid;gap:3px;min-width:0} [data-archbro-ui="next"] .next-resource-banner strong{font-size:12px} [data-archbro-ui="next"] .next-resource-banner span{color:var(--ui-next-muted);font-size:12px;line-height:1.45;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-resource-banner.is-error{border-color:color-mix(in srgb,var(--ui-next-danger) 40%,var(--ui-next-line));background:color-mix(in srgb,var(--ui-next-danger) 7%,var(--ui-next-surface))} [data-archbro-ui="next"] .next-resource-banner.is-refreshing{border-color:color-mix(in srgb,var(--ui-next-accent) 35%,var(--ui-next-line));background:color-mix(in srgb,var(--ui-next-accent) 6%,var(--ui-next-surface))} [data-archbro-ui="next"] .next-architecture-layout{display:grid;grid-template-columns:var(--navigator-width,224px) 8px minmax(420px,1fr) minmax(260px,300px);gap:12px;align-items:stretch;min-height:620px} [data-archbro-ui="next"] .next-architecture-layout.is-navigator-collapsed{grid-template-columns:52px 8px minmax(420px,1fr) minmax(260px,300px)} [data-archbro-ui="next"] .next-architecture-navigator,[data-archbro-ui="next"] .next-architecture-graph,[data-archbro-ui="next"] .next-architecture-inspector{min-width:0;border:1px solid var(--ui-next-line);border-radius:var(--ui-next-radius-md);background:var(--ui-next-surface);overflow:hidden} [data-archbro-ui="next"] .next-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:12px 14px;border-bottom:1px solid var(--ui-next-line);background:var(--ui-next-surface-muted)} [data-archbro-ui="next"] .next-panel-heading>div{display:grid;gap:3px;min-width:0} [data-archbro-ui="next"] .next-panel-heading strong{font-size:12px;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-panel-heading button{width:30px;min-height:44px;padding:0;flex:0 0 auto} [data-archbro-ui="next"] .next-architecture-navigator.is-collapsed .next-panel-heading{justify-content:center;padding:12px 8px} [data-archbro-ui="next"] .next-architecture-navigator.is-collapsed .next-panel-heading>div,[data-archbro-ui="next"] .next-architecture-navigator.is-collapsed .next-navigator-content{display:none} [data-archbro-ui="next"] .next-navigator-content{display:grid;gap:12px;padding:13px;max-height:740px;overflow:auto;overscroll-behavior:contain} [data-archbro-ui="next"] .next-search-field,[data-archbro-ui="next"] .next-filter-field{display:grid;gap:5px;color:var(--ui-next-muted);font-size:12px;font-weight:750} [data-archbro-ui="next"] .next-search-field input,[data-archbro-ui="next"] .next-filter-field select{width:100%;min-width:0;min-height:44px;border:1px solid var(--ui-next-line);border-radius:9px;background:var(--ui-next-surface);color:var(--ui-next-ink);padding:0 10px;font-size:12px} [data-archbro-ui="next"] .next-navigator-result-count{color:var(--ui-next-muted);font-size:12px} [data-archbro-ui="next"] .next-navigator-tree{display:grid;gap:2px;min-width:0} [data-archbro-ui="next"] .next-navigator-row{display:grid;grid-template-columns:24px minmax(0,1fr) 26px;align-items:center;gap:3px;min-width:0;padding-left:calc(var(--tree-depth,0) * 13px);border-radius:8px} [data-archbro-ui="next"] .next-navigator-row.is-selected{background:var(--ui-next-accent-soft)} [data-archbro-ui="next"] .next-navigator-row.is-focused{box-shadow:inset 3px 0 0 var(--ui-next-accent)} [data-archbro-ui="next"] .next-navigator-row.is-muted{opacity:.42} [data-archbro-ui="next"] .next-navigator-row .next-navigator-toggle,[data-archbro-ui="next"] .next-navigator-row .next-navigator-focus{width:24px;min-height:24px;padding:0;border-color:transparent;background:transparent} [data-archbro-ui="next"] .next-navigator-toggle-spacer{width:24px;height:24px} [data-archbro-ui="next"] .next-navigator-row .next-navigator-label{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;min-height:44px;border-color:transparent;background:transparent;padding:4px 5px;text-align:left} [data-archbro-ui="next"] .next-navigator-label>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-archbro-ui="next"] .next-navigator-kind{flex:0 0 auto;max-width:48%;padding:3px 5px;border-radius:999px;background:var(--ui-next-surface-muted);color:var(--ui-next-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-archbro-ui="next"] .next-navigator-resizer{position:relative;width:8px;min-height:100%;cursor:col-resize;border-radius:999px} [data-archbro-ui="next"] .next-navigator-resizer::after{content:"";position:absolute;inset:6px 3px;border-radius:999px;background:var(--ui-next-line)} [data-archbro-ui="next"] .next-navigator-resizer:hover::after,[data-archbro-ui="next"] .next-navigator-resizer:focus-visible::after{background:var(--ui-next-accent)} [data-archbro-ui="next"].ui-next-resizing,[data-archbro-ui="next"].ui-next-resizing *{cursor:col-resize!important;user-select:none!important} [data-archbro-ui="next"] .next-architecture-graph{display:grid;grid-template-rows:auto auto minmax(480px,1fr);min-height:620px} [data-archbro-ui="next"] .next-graph-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 12px;border-bottom:1px solid var(--ui-next-line);background:var(--ui-next-surface)} [data-archbro-ui="next"] .next-segmented{display:inline-flex;border:1px solid var(--ui-next-line);border-radius:10px;overflow:hidden;background:var(--ui-next-surface-muted)} [data-archbro-ui="next"] .next-segmented button{min-height:32px;border:0;border-radius:0;background:transparent;padding:0 10px} [data-archbro-ui="next"] .next-segmented button+button{border-left:1px solid var(--ui-next-line)} [data-archbro-ui="next"] .next-segmented button.active{background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-graph-zoom-controls{display:flex;gap:4px;margin-left:auto} [data-archbro-ui="next"] .next-graph-zoom-controls button{min-width:34px;padding:0 8px} [data-archbro-ui="next"] .next-clear-selection:disabled{opacity:.4;cursor:not-allowed} [data-archbro-ui="next"] .next-graph-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 12px;border-bottom:1px solid var(--ui-next-line);background:var(--ui-next-surface-muted)} [data-archbro-ui="next"] .next-graph-meta span{padding:3px 7px;border:1px solid var(--ui-next-line);border-radius:999px;background:var(--ui-next-surface);color:var(--ui-next-muted);font-size:12px} [data-archbro-ui="next"] .next-graph-stage{position:relative;min-width:0;min-height:480px;overflow:hidden;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ui-next-line) 72%,transparent) 1px,transparent 1.5px);background-size:20px 20px} [data-archbro-ui="next"] .next-graph-svg{display:block;width:100%;height:100%;min-height:480px;touch-action:none;cursor:grab;outline:none} [data-archbro-ui="next"] .next-graph-svg:focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:-2px} [data-archbro-ui="next"] .next-graph-svg.is-panning{cursor:grabbing} [data-archbro-ui="next"] .next-graph-background{fill:transparent} [data-archbro-ui="next"] .next-graph-edge{color:color-mix(in srgb,var(--ui-next-muted) 78%,var(--ui-next-line));transition:opacity .15s ease,color .15s ease} [data-archbro-ui="next"] .next-graph-edge-line{fill:none;stroke:currentColor;stroke-width:2} [data-archbro-ui="next"] .next-graph-edge-hit{fill:none;stroke:transparent;stroke-width:18;pointer-events:stroke;cursor:pointer} [data-archbro-ui="next"] .next-graph-edge.category-data{color:var(--ui-next-warning)} [data-archbro-ui="next"] .next-graph-edge.category-event{color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-graph-edge.is-selected{color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-graph-edge.is-selected .next-graph-edge-line{stroke-width:3.4} [data-archbro-ui="next"] .next-graph-edge.is-dimmed{opacity:.16} [data-archbro-ui="next"] .next-graph-edge.is-covered{pointer-events:none} [data-archbro-ui="next"] .next-graph-arrow path{fill:currentColor;stroke:none} [data-archbro-ui="next"] .next-graph-edge-label{cursor:pointer;pointer-events:all;transition:opacity .15s ease} [data-archbro-ui="next"] .next-graph-edge-label rect{fill:var(--ui-next-surface);stroke:var(--ui-next-line);stroke-width:1;pointer-events:all} [data-archbro-ui="next"] .next-graph-edge-label text{fill:var(--ui-next-muted);font-size:12px;font-weight:700;pointer-events:none} [data-archbro-ui="next"] .next-graph-edge-label.is-selected rect{stroke:var(--ui-next-accent);stroke-width:2} [data-archbro-ui="next"] .next-graph-edge-label.is-selected text{fill:var(--ui-next-accent)} [data-archbro-ui="next"] .next-graph-edge-label.is-dimmed{opacity:.16} [data-archbro-ui="next"] .next-graph-group-frame{cursor:pointer;transition:opacity .15s ease} [data-archbro-ui="next"] .next-graph-group-frame rect{stroke:color-mix(in srgb,var(--ui-next-accent) 30%,var(--ui-next-line));stroke-width:1.5;stroke-dasharray:8 6;fill:var(--ui-next-accent-soft);fill-opacity:.22;pointer-events:stroke} [data-archbro-ui="next"] .next-graph-group-frame.is-collapsed rect{fill:var(--ui-next-surface);fill-opacity:.97;stroke-dasharray:none} [data-archbro-ui="next"] .next-graph-group-frame.is-selected rect{stroke:var(--ui-next-accent);stroke-width:3} [data-archbro-ui="next"] .next-graph-group-frame.is-dimmed{opacity:.55} [data-archbro-ui="next"] .next-graph-node{cursor:pointer;color:var(--ui-next-ink);transition:opacity .15s ease} [data-archbro-ui="next"] .next-graph-node>rect{fill:var(--ui-next-surface);stroke:var(--ui-next-line);stroke-width:1.5;filter:drop-shadow(0 2px 3px rgba(0,0,0,.08))} [data-archbro-ui="next"] .next-graph-node.is-group>rect{fill:var(--ui-next-accent-soft);stroke:color-mix(in srgb,var(--ui-next-accent) 45%,var(--ui-next-line))} [data-archbro-ui="next"] .next-graph-node.is-selected>rect{stroke:var(--ui-next-accent);stroke-width:3} [data-archbro-ui="next"] .next-graph-node.is-dimmed{opacity:.22} [data-archbro-ui="next"] .next-graph-node text{pointer-events:none} [data-archbro-ui="next"] .next-graph-node-label{fill:var(--ui-next-ink);font-size:12px;font-weight:800} [data-archbro-ui="next"] .next-graph-node-kind{fill:var(--ui-next-muted);font-size:12px;font-weight:750;text-transform:uppercase} [data-archbro-ui="next"] .next-graph-node-source{fill:var(--ui-next-muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px} [data-archbro-ui="next"] .next-graph-group-toggle{cursor:pointer;color:var(--ui-next-accent);pointer-events:all} [data-archbro-ui="next"] .next-graph-group-toggle :is(circle,rect){fill:var(--ui-next-surface-muted);stroke:var(--ui-next-line);stroke-width:1;vector-effect:non-scaling-stroke} [data-archbro-ui="next"] .next-graph-group-toggle:hover :is(circle,rect){fill:var(--ui-next-hover);stroke:var(--ui-next-muted)} [data-archbro-ui="next"] .next-graph-group-toggle:focus-visible :is(circle,rect){fill:var(--ui-next-accent-soft);stroke:var(--ui-next-accent);stroke-width:2} [data-archbro-ui="next"] .next-graph-group-toggle path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round} [data-archbro-ui="next"] .next-graph-node:focus-visible>rect,[data-archbro-ui="next"] .next-graph-edge:focus-visible .next-graph-edge-line,[data-archbro-ui="next"] .next-graph-group-frame:focus-visible rect{stroke:var(--ui-next-accent);stroke-width:3;outline:none} [data-archbro-ui="next"] .next-graph-group-toggle:focus-visible{outline:none} [data-archbro-ui="next"] .next-graph-empty{display:grid;place-items:center;align-content:center;gap:9px;min-height:480px;padding:30px;text-align:center;color:var(--ui-next-muted)} [data-archbro-ui="next"] .next-graph-empty strong{color:var(--ui-next-ink);font-size:15px} [data-archbro-ui="next"] .next-graph-empty p{max-width:65ch;margin:0;font-size:14px;line-height:1.55;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-graph-empty button:disabled{opacity:.65;cursor:not-allowed} [data-archbro-ui="next"] .next-graph-spinner{width:28px;height:28px;border:3px solid var(--ui-next-line);border-top-color:var(--ui-next-accent);border-radius:50%;animation:uiNextSpin .9s linear infinite} @keyframes uiNextSpin{to{transform:rotate(360deg)}} [data-archbro-ui="next"] .next-architecture-inspector{min-height:620px} [data-archbro-ui="next"] .next-inspector-content{display:grid;gap:16px;padding:15px;max-height:740px;overflow:auto;overscroll-behavior:contain} [data-archbro-ui="next"] .next-inspector-title h3{margin:7px 0 6px;font-size:16px;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-inspector-title p,[data-archbro-ui="next"] .next-inspector-section p{margin:0;color:var(--ui-next-muted);font-size:12px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-inspector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0} [data-archbro-ui="next"] .next-inspector-field{display:grid;align-content:start;gap:4px;min-width:0;padding:9px;border:1px solid var(--ui-next-line);border-radius:9px;background:var(--ui-next-surface-muted)} [data-archbro-ui="next"] .next-inspector-field.is-wide{grid-column:1/-1} [data-archbro-ui="next"] .next-inspector-field dt{color:var(--ui-next-muted);font-size:12px;font-weight:750} [data-archbro-ui="next"] .next-inspector-field dd{margin:0;font-size:12px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-inspector-field dd.is-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px} [data-archbro-ui="next"] .next-inspector-section{display:grid;gap:8px;padding-top:2px} [data-archbro-ui="next"] .next-inspector-section h4{margin:0;font-size:12px} [data-archbro-ui="next"] .next-inspector-evidence,[data-archbro-ui="next"] .next-inspector-details ul{display:grid;gap:6px;margin:0;padding-left:18px;color:var(--ui-next-muted);font-size:12px;line-height:1.45} [data-archbro-ui="next"] .next-inspector-evidence a{color:var(--ui-next-accent);overflow-wrap:anywhere} [data-archbro-ui="next"] .next-inspector-details{border-top:1px solid var(--ui-next-line);padding-top:11px;color:var(--ui-next-muted);font-size:12px} [data-archbro-ui="next"] .next-inspector-details summary{cursor:pointer;color:var(--ui-next-ink);font-weight:750} [data-archbro-ui="next"] .next-inspector-notice{margin:0;padding:9px;border:1px solid color-mix(in srgb,var(--ui-next-warning) 45%,var(--ui-next-line));border-radius:9px;background:color-mix(in srgb,var(--ui-next-warning) 8%,var(--ui-next-surface));color:var(--ui-next-warning);font-size:12px;line-height:1.45} [data-archbro-ui="next"] .next-panel-empty{margin:10px;color:var(--ui-next-muted);font-size:12px} @media(max-width:1180px){[data-archbro-ui="next"] .next-architecture-layout{grid-template-columns:var(--navigator-width,196px) 8px minmax(0,1fr);min-height:0}[data-archbro-ui="next"] .next-architecture-layout.is-navigator-collapsed{grid-template-columns:52px 8px minmax(0,1fr)}[data-archbro-ui="next"] .next-architecture-inspector{grid-column:1/-1;min-height:0}[data-archbro-ui="next"] .next-inspector-content{max-height:none}[data-archbro-ui="next"] .next-architecture-graph{min-height:560px}[data-archbro-ui="next"] .next-architecture-navigator{min-height:560px}} @media(max-width:1050px){[data-archbro-ui="next"] .next-architecture-layout,[data-archbro-ui="next"] .next-architecture-layout.is-navigator-collapsed{grid-template-columns:minmax(0,1fr);min-height:0}[data-archbro-ui="next"] .next-navigator-resizer{display:none}[data-archbro-ui="next"] .next-architecture-graph{grid-row:1;min-height:560px}[data-archbro-ui="next"] .next-architecture-navigator,[data-archbro-ui="next"] .next-architecture-navigator.is-collapsed{grid-row:2;min-height:0}[data-archbro-ui="next"] .next-architecture-inspector{grid-row:3;grid-column:1;min-height:0}[data-archbro-ui="next"] .next-navigator-content{max-height:420px}[data-archbro-ui="next"] .next-graph-zoom-controls{margin-left:0}[data-archbro-ui="next"] .next-clear-selection{margin-left:auto}} @media(max-width:820px){[data-archbro-ui="next"] .next-architecture-header{align-items:stretch;flex-direction:column}[data-archbro-ui="next"] .next-architecture-header-actions{justify-content:space-between}[data-archbro-ui="next"] .next-architecture-identity{align-items:flex-start;flex-direction:column}[data-archbro-ui="next"] .next-architecture-identity span{text-align:left}[data-archbro-ui="next"] .next-architecture-layout,[data-archbro-ui="next"] .next-architecture-layout.is-navigator-collapsed{grid-template-columns:1fr}[data-archbro-ui="next"] .next-architecture-navigator,[data-archbro-ui="next"] .next-architecture-navigator.is-collapsed{min-height:0}[data-archbro-ui="next"] .next-architecture-navigator.is-collapsed .next-navigator-content{display:none}[data-archbro-ui="next"] .next-architecture-graph{min-height:520px}[data-archbro-ui="next"] .next-graph-stage,[data-archbro-ui="next"] .next-graph-svg,[data-archbro-ui="next"] .next-graph-empty{min-height:420px}} @media(prefers-reduced-motion:reduce){[data-archbro-ui="next"] .next-graph-edge,[data-archbro-ui="next"] .next-graph-node,[data-archbro-ui="next"] .next-graph-group-frame{transition:none}} /* PR5 task architecture round-trip */ [data-archbro-ui="next"] .next-architecture-task-context{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--ui-next-accent) 34%,var(--ui-next-line));border-radius:12px;background:var(--ui-next-accent-soft)} [data-archbro-ui="next"] .next-architecture-task-context.is-missing{border-color:color-mix(in srgb,var(--ui-next-warning) 38%,var(--ui-next-line));background:color-mix(in srgb,var(--ui-next-warning) 7%,var(--ui-next-surface))} [data-archbro-ui="next"] .next-architecture-task-context>div{display:grid;gap:3px;min-width:0} [data-archbro-ui="next"] .next-architecture-task-context small{color:var(--ui-next-accent);font-size:12px;font-weight:850;letter-spacing:.08em} [data-archbro-ui="next"] .next-architecture-task-context.is-missing small{color:var(--ui-next-warning)} [data-archbro-ui="next"] .next-architecture-task-context strong{font-size:12px;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-architecture-task-context span{color:var(--ui-next-muted);font-size:12px;line-height:1.45;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-architecture-task-context button{flex:0 0 auto;min-height:44px;border:1px solid var(--ui-next-accent);border-radius:9px;background:var(--ui-next-accent);color:var(--ui-next-on-accent);padding:0 12px;font-size:12px;font-weight:800;cursor:pointer} [data-archbro-ui="next"] .next-architecture-task-context button:hover{filter:brightness(.94)} [data-archbro-ui="next"] .next-architecture-task-context button:focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:2px;box-shadow:0 0 0 5px var(--ui-next-focus)} @media(max-width:700px){[data-archbro-ui="next"] .next-architecture-task-context{align-items:stretch;flex-direction:column}[data-archbro-ui="next"] .next-architecture-task-context button{align-self:flex-start}} /* PR5 Architecture panel defaults */ [data-archbro-ui="next"] .next-architecture-layout.is-inspector-collapsed{grid-template-columns:var(--navigator-width,224px) 8px minmax(420px,1fr) 52px} [data-archbro-ui="next"] .next-architecture-layout.is-navigator-collapsed.is-inspector-collapsed{grid-template-columns:52px 8px minmax(420px,1fr) 52px} [data-archbro-ui="next"] .next-inspector-heading-actions{display:flex;align-items:center;gap:5px} [data-archbro-ui="next"] .next-architecture-inspector.is-collapsed{min-width:52px} [data-archbro-ui="next"] .next-architecture-inspector.is-collapsed .next-panel-heading{padding:10px;justify-content:center} [data-archbro-ui="next"] .next-architecture-inspector.is-collapsed .next-panel-heading>div, [data-archbro-ui="next"] .next-architecture-inspector.is-collapsed [data-inspector-clear], [data-archbro-ui="next"] .next-architecture-inspector.is-collapsed .next-inspector-content{display:none} @media(max-width:1180px){[data-archbro-ui="next"] .next-architecture-layout.is-inspector-collapsed,[data-archbro-ui="next"] .next-architecture-layout.is-navigator-collapsed.is-inspector-collapsed{grid-template-columns:var(--navigator-width,196px) 8px minmax(0,1fr)}[data-archbro-ui="next"] .next-architecture-inspector.is-collapsed{grid-column:1/-1;min-width:0;min-height:52px}[data-archbro-ui="next"] .next-architecture-inspector.is-collapsed .next-panel-heading{justify-content:flex-end}} @media(max-width:1050px){[data-archbro-ui="next"] .next-architecture-layout.is-inspector-collapsed,[data-archbro-ui="next"] .next-architecture-layout.is-navigator-collapsed.is-inspector-collapsed{grid-template-columns:minmax(0,1fr)}} /* V41 presentation. Keep the formal graph renderer, camera and semantic IDs. */ [data-archbro-ui="next"][data-ui-next-route="architecture"] #workspace{padding:0;overflow:hidden} [data-archbro-ui="next"][data-ui-next-route="architecture"] #view-architecture, [data-archbro-ui="next"] #uiNextArchitectureSurface{height:100%;min-height:0;margin:0;padding:0} /* The header follows the workspace width, not the window, so it still fits when the Ask drawer takes the right side. */ [data-archbro-ui="next"] .architecture-v41-workspace{display:flex;flex-direction:column;height:100%;min-height:0;gap:0;container:architecture-workspace/inline-size} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header{flex:none;display:flex;align-items:center;flex-wrap:nowrap;height:64px;min-height:64px;gap:14px;padding:0 18px;border:0;border-radius:0;background:var(--ui-next-surface)} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header h2{flex:none;min-width:0;margin:0;font-size:18px;line-height:24px;letter-spacing:-.02em;font-weight:720;white-space:nowrap} [data-archbro-ui="next"] .architecture-progress-status{display:flex;align-items:center;gap:8px;min-width:0;padding-left:2px} [data-archbro-ui="next"] .architecture-progress-status>span:last-child{display:flex;min-width:0;flex-direction:column} [data-archbro-ui="next"] .architecture-progress-status strong{overflow:hidden;color:var(--ui-next-ink);font-size:12px;line-height:16px;font-weight:690;text-overflow:ellipsis;white-space:nowrap} [data-archbro-ui="next"] .architecture-progress-status small{overflow:hidden;color:var(--ui-next-muted);font-size:12px;line-height:14px;text-overflow:ellipsis;white-space:nowrap} [data-archbro-ui="next"] .architecture-progress-status .status-dot{flex:none;width:7px;height:7px;margin:0;border-radius:50%;background:var(--ui-next-success)} [data-archbro-ui="next"] .architecture-progress-status .status-dot.is-historical{background:var(--ui-next-muted)} [data-archbro-ui="next"] .architecture-progress-status .status-dot.is-proposal, [data-archbro-ui="next"] .architecture-progress-status .status-dot.is-draft{background:var(--ui-next-warning)} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions{flex:none;display:flex;align-items:center;gap:6px;margin-left:auto} [data-archbro-ui="next"] .architecture-view-menu{position:relative;flex:none;z-index:60} [data-archbro-ui="next"] .architecture-view-button{display:flex;align-items:center;gap:8px;min-height:44px;padding:7px 10px;border:1px solid var(--ui-next-line);border-radius:6px;background:var(--ui-next-surface);font-size:12px;font-weight:650;cursor:pointer;list-style:none} [data-archbro-ui="next"] .architecture-view-button::-webkit-details-marker{display:none} [data-archbro-ui="next"] .architecture-view-button:hover{background:var(--ui-next-hover)} [data-archbro-ui="next"] .architecture-view-options{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:10px;width:244px;padding:12px;border:1px solid var(--ui-next-line);border-radius:8px;background:var(--ui-next-surface);box-shadow:0 8px 30px rgba(20,24,30,.12)} [data-archbro-ui="next"] .architecture-view-options .next-segmented{display:flex;border-radius:6px} [data-archbro-ui="next"] .architecture-view-options .next-segmented button{flex:1;min-height:44px;border:0;border-radius:0;padding:5px 10px;background:transparent;color:var(--ui-next-muted);font-size:12px;cursor:pointer} [data-archbro-ui="next"] .architecture-view-options .next-segmented button.active{background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-repo-bar{flex:none;flex-wrap:nowrap;min-height:49px} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-ref-select{width:195px} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-ref-select select{width:100%;max-width:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-resource-banner, [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-task-context{flex:none;margin:0;border-radius:0;border-width:0 0 1px;padding:9px 18px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout{flex:1;display:grid;grid-template-columns:var(--navigator-width,240px) 6px minmax(0,1fr) 320px;grid-template-rows:minmax(0,1fr);align-items:stretch;min-width:0;min-height:0;gap:0;overflow:hidden} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.is-navigator-collapsed{grid-template-columns:52px 0 minmax(0,1fr) 320px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.is-inspector-collapsed{grid-template-columns:var(--navigator-width,240px) 6px minmax(0,1fr) 52px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.is-navigator-collapsed.is-inspector-collapsed{grid-template-columns:52px 0 minmax(0,1fr) 52px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-navigator, [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector, [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph{grid-row:1;grid-column:auto;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;border:0;border-radius:0;background:var(--ui-next-surface)} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-navigator{background:var(--ui-next-surface-muted)} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector{border-left:1px solid var(--ui-next-line)} [data-archbro-ui="next"] .architecture-v41-workspace .next-panel-heading{flex:none;min-height:60px;padding:13px 11px 8px;border:0;background:transparent} [data-archbro-ui="next"] .architecture-v41-workspace .next-panel-heading>div{gap:1px} [data-archbro-ui="next"] .architecture-v41-workspace .next-panel-heading small{font-size:12px;line-height:15px;font-weight:500;letter-spacing:0} [data-archbro-ui="next"] .architecture-v41-workspace .next-panel-heading strong{font-size:15px;line-height:21px;font-weight:620} [data-archbro-ui="next"] .architecture-v41-workspace .next-panel-heading button{min-height:44px;width:44px;height:44px;border:0;background:transparent;padding:0;color:var(--ui-next-muted);font-size:16px;font-weight:400} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-content{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:11px;min-height:0;max-height:none;overflow:auto;padding:0 11px 13px} [data-archbro-ui="next"] .architecture-v41-workspace .next-search-field input, [data-archbro-ui="next"] .architecture-v41-workspace .next-filter-field select{min-height:44px;border-radius:6px;font-size:12px;font-weight:400} [data-archbro-ui="next"] .next-navigator-filter-menu{font-size:12px;color:var(--ui-next-muted)} [data-archbro-ui="next"] .next-navigator-filter-menu summary{cursor:pointer;min-height:18px} [data-archbro-ui="next"] .next-navigator-filter-menu[open] summary{margin-bottom:6px} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-result-count{font-size:12px} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-tree{gap:7px} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row{grid-template-columns:20px minmax(0,1fr) 24px;gap:0;min-height:62px;padding-top:6px;padding-bottom:6px;border:1px solid var(--ui-next-line-soft);border-radius:6px;background:var(--ui-next-surface)} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row.is-selected{border-color:var(--ui-next-accent);background:var(--ui-next-accent-soft);box-shadow:inset 3px 0 var(--ui-next-accent)} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row .next-navigator-label{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:48px;padding:4px 2px;font-size:14px;font-weight:650} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-kind{max-width:100%;padding:0;border-radius:0;background:transparent;color:var(--ui-next-muted);font-size:12px;line-height:16px;font-weight:400} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-resizer{grid-row:1;grid-column:auto;width:6px;min-height:0;border-left:1px solid var(--ui-next-line);border-right:1px solid var(--ui-next-line);border-radius:0;background:var(--ui-next-surface-muted)} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-resizer::after{inset:45% 1px;border-radius:0;background:var(--ui-next-muted);opacity:.4} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph{position:relative;display:block;overflow:hidden} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-stage{position:absolute;inset:0;min-width:0;min-height:0;background:var(--ui-next-canvas)} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-svg{width:100%;height:100%;min-height:0} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-toolbar{position:absolute;left:10px;bottom:10px;z-index:4;display:flex;align-items:center;flex-wrap:nowrap;gap:3px;max-width:calc(100% - 20px);min-height:38px;padding:2px;border:1px solid var(--ui-next-line);border-radius:6px;background:var(--ui-next-surface);box-shadow:0 1px 3px rgba(20,24,30,.05)} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-toolbar button{min-height:44px;min-width:44px;height:44px;padding:0 7px;border:0;border-radius:4px;font-size:16px;font-weight:400;background:transparent;color:var(--ui-next-muted)} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-toolbar button:hover{background:var(--ui-next-hover);color:var(--ui-next-ink)} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-toolbar .next-clear-selection{min-width:0;font-size:12px} [data-archbro-ui="next"] .next-zoom-label{min-width:33px;text-align:center;font-size:12px;color:var(--ui-next-muted)} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-meta{position:absolute;right:16px;bottom:16px;z-index:2;display:flex;gap:12px;align-items:center;flex-wrap:nowrap;max-width:calc(100% - 190px);padding:0;border:0;background:transparent;pointer-events:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-meta span{overflow:hidden;padding:0;border:0;border-radius:0;background:transparent;color:var(--ui-next-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-empty{height:100%;min-height:0} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-content{flex:1;display:block;min-height:0;max-height:none;overflow:auto;padding:5px 20px 20px} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-title h3{margin:2px 0 0;font-size:22px;line-height:29px;letter-spacing:-.35px;font-weight:620} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-title p{max-width:68ch;margin:8px 0 0;font-size:14px;line-height:1.55} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-title small{font-size:12px;font-weight:500;letter-spacing:0} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-grid{display:block;margin:16px 0 5px;border-top:1px solid var(--ui-next-line-soft);border-bottom:1px solid var(--ui-next-line-soft)} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-field{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:start;gap:10px;margin:0;padding:9px 0;border:0;border-radius:0;background:transparent} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-field+.next-inspector-field{border-top:1px solid var(--ui-next-line-soft)} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-field dt{font-size:12px;line-height:18px;font-weight:400} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-field dd{font-size:14px;line-height:18px;font-weight:650} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-field dd.is-code{font-size:12px;font-weight:500} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-section{margin-top:12px;padding:0} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-section h4{font-size:14px;font-weight:650} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-section p{max-width:68ch;font-size:14px;line-height:1.55} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-navigator.is-collapsed .next-panel-heading, [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector.is-collapsed .next-panel-heading{justify-content:center;padding:10px} [data-archbro-ui="next"] .architecture-v41-workspace .is-collapsed .next-navigator-content, [data-archbro-ui="next"] .architecture-v41-workspace .is-collapsed .next-inspector-content{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-drawer-toggle{display:none;align-items:center;justify-content:center;min-height:44px;padding:4px 9px;border:1px solid var(--ui-next-line);border-radius:6px;background:var(--ui-next-surface);color:var(--ui-next-ink);font-size:12px;cursor:pointer} [data-archbro-ui="next"] .architecture-v41-workspace [data-architecture-drawer="inspector"]{display:inline-flex;flex:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-label>span{max-width:100%} @media(max-width:1300px){ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout{grid-template-columns:196px 6px minmax(0,1fr) 270px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.is-navigator-collapsed{grid-template-columns:52px 0 minmax(0,1fr) 270px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.is-inspector-collapsed{grid-template-columns:196px 6px minmax(0,1fr) 52px} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-meta span:last-child{display:none} } @media(max-width:1100px){ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header{flex-direction:row;padding:0 14px;gap:8px} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-drawer-toggle{display:inline-flex;flex:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions .architecture-drawer-toggle{width:auto} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-progress-status small{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout{position:relative;display:block} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph{width:100%;height:100%} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-resizer, [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-meta, [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-navigator, [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .is-navigator-drawer-open .next-architecture-navigator, [data-archbro-ui="next"] .architecture-v41-workspace .is-inspector-drawer-open .next-architecture-inspector{display:flex;position:absolute;top:0;bottom:0;z-index:40;width:310px;max-width:85vw;height:auto;border:1px solid var(--ui-next-line);box-shadow:0 8px 30px rgba(41,38,55,.11)} [data-archbro-ui="next"] .architecture-v41-workspace .is-navigator-drawer-open .next-architecture-navigator{left:0} [data-archbro-ui="next"] .architecture-v41-workspace .is-inspector-drawer-open .next-architecture-inspector{right:0} } @media(max-width:800px){ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header{padding:0 10px;gap:8px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header h2{font-size:15px} [data-archbro-ui="next"] .architecture-progress-status{max-width:112px;margin-left:auto} } @media(max-width:620px){ [data-archbro-ui="next"] .architecture-v41-workspace .architecture-progress-status{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-repo-bar{flex-wrap:wrap;padding:8px 10px} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-ref-select{width:160px} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-code-pin{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-current-summary{flex-basis:100%} } /* V41 progressive view menu and selected-component details. */ [data-archbro-ui="next"] .architecture-view-options{gap:2px;width:288px;padding:6px} [data-archbro-ui="next"] .architecture-view-options>button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:52px;padding:8px 10px;border:0;border-radius:5px;background:transparent;color:var(--ui-next-ink);text-align:left;cursor:pointer} [data-archbro-ui="next"] .architecture-view-options>button:hover{background:var(--ui-next-hover)} [data-archbro-ui="next"] .architecture-view-options>button.active{background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} [data-archbro-ui="next"] .architecture-view-options>button strong{font-size:12px;line-height:18px;font-weight:650} [data-archbro-ui="next"] .architecture-view-options>button small{color:var(--ui-next-muted);font-size:12px;line-height:16px} [data-archbro-ui="next"] .architecture-view-options{width:310px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 145px);overflow:auto;padding:8px;gap:3px} [data-archbro-ui="next"] .architecture-menu-label{padding:7px 9px 5px;color:var(--ui-next-muted);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} [data-archbro-ui="next"] .architecture-view-options hr{width:100%;margin:6px 0;border:0;border-top:1px solid var(--ui-next-line-soft)} [data-archbro-ui="next"] .architecture-view-options>button{position:relative;min-height:56px;padding:9px 30px 9px 10px} [data-archbro-ui="next"] .architecture-view-options>button strong{font-size:14px} [data-archbro-ui="next"] .architecture-view-options>button small{font-size:12px;font-weight:400} [data-archbro-ui="next"] .architecture-view-options>button[aria-checked="true"]{color:var(--ui-next-accent);background:var(--ui-next-accent-soft)} [data-archbro-ui="next"] .architecture-view-options>button[aria-checked="true"]::after{content:'✓';position:absolute;right:12px;top:12px} [data-archbro-ui="next"] .architecture-view-options>button:is([data-architecture-canvas],[data-architecture-focus],[data-architecture-refresh]){min-height:38px;justify-content:center;font-size:14px;font-weight:500} [data-archbro-ui="next"] .architecture-view-options>button.architecture-menu-action{min-height:40px;justify-content:center;font-size:14px;font-weight:500} [data-archbro-ui="next"] .architecture-view-options>button:disabled{opacity:.45;cursor:default} [data-archbro-ui="next"] .architecture-preferences{font-size:12px} [data-archbro-ui="next"] .architecture-preferences>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:8px 10px;list-style:none;font-weight:650;cursor:pointer;color:var(--ui-next-muted)} [data-archbro-ui="next"] .architecture-preferences>summary::-webkit-details-marker{display:none} [data-archbro-ui="next"] .architecture-preferences>summary::after{content:'⌄'} [data-archbro-ui="next"] .architecture-preferences[open]>summary::after{content:'⌃'} [data-archbro-ui="next"] .architecture-preferences>div{padding:0 8px 8px;display:grid;gap:4px} [data-archbro-ui="next"] .architecture-preferences button{padding:7px 8px;border:0;border-radius:4px;text-align:left;background:transparent;color:var(--ui-next-ink);font:inherit;cursor:pointer} [data-archbro-ui="next"] .architecture-preferences button:hover{background:var(--ui-next-hover)} [data-archbro-ui="next"] .architecture-preferences button:disabled{color:var(--ui-next-muted);opacity:.65;cursor:default} [data-archbro-ui="next"] .architecture-preferences p{margin:4px 8px;color:var(--ui-next-muted);font-size:12px;line-height:1.5} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-disclosure{margin:0;border-bottom:1px solid var(--ui-next-line-soft)} [data-archbro-ui="next"] .architecture-v41-workspace .next-inspector-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:10px 0;list-style:none;cursor:pointer} [data-archbro-ui="next"] .next-inspector-disclosure>summary::-webkit-details-marker{display:none} [data-archbro-ui="next"] .next-inspector-disclosure>summary>span:first-child{display:flex;min-width:0;flex-direction:column;gap:1px} [data-archbro-ui="next"] .next-inspector-disclosure summary strong{font-size:14px;line-height:18px;font-weight:650} [data-archbro-ui="next"] .next-inspector-disclosure summary small{color:var(--ui-next-muted);font-size:12px;line-height:16px} [data-archbro-ui="next"] .next-disclosure-state{flex:none;color:var(--ui-next-accent);font-size:12px;line-height:17px;font-weight:650} [data-archbro-ui="next"] .next-disclosure-state .when-open{display:none} [data-archbro-ui="next"] .next-inspector-disclosure[open] .when-open{display:inline} [data-archbro-ui="next"] .next-inspector-disclosure[open] .when-closed{display:none} [data-archbro-ui="next"] .next-inspector-disclosure-body{padding:0 0 12px;font-size:12px;color:var(--ui-next-muted)} [data-archbro-ui="next"] .next-inspector-connection{display:block;width:100%;padding:8px 0;border:0;border-top:1px solid var(--ui-next-line-soft);background:transparent;color:var(--ui-next-ink);text-align:left;cursor:pointer} [data-archbro-ui="next"] .next-inspector-connection:hover{color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-inspector-connection strong,[data-archbro-ui="next"] .next-inspector-connection small{display:block} [data-archbro-ui="next"] .next-inspector-connection strong{font-size:12px;line-height:17px;font-weight:650} [data-archbro-ui="next"] .next-inspector-connection small{margin-top:2px;color:var(--ui-next-muted);font-size:12px;line-height:15px} [data-archbro-ui="next"] .next-architecture-filter-summary{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 14px;border-bottom:1px solid var(--ui-next-line);background:var(--ui-next-accent-soft);color:var(--ui-next-ink);font-size:12px;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-architecture-filter-summary button{flex:none;margin-left:auto;min-height:32px;padding:4px 10px;border:1px solid var(--ui-next-line);border-radius:6px;background:var(--ui-next-surface);color:var(--ui-next-ink);cursor:pointer} /* Slim Architecture header: the version row shares one bar with the title and core actions, and Focus mode hides it. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header{height:auto;min-height:52px;padding:4px 12px 4px 18px;gap:10px;border-bottom:1px solid var(--ui-next-line)} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header.has-version-control>.architecture-progress-status{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header>.architecture-repo-bar{flex:1 1 auto;min-width:0;min-height:0;padding:0;border:0;background:transparent;gap:6px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header .architecture-ref-select{width:168px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header>.architecture-repo-bar.is-unavailable{flex-wrap:nowrap} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header>.architecture-repo-bar.is-unavailable small{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions{gap:6px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions>button,[data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions .architecture-view-button{min-height:44px;border-radius:6px} [data-archbro-ui="next"] .architecture-v41-workspace :is(.architecture-header-button,.architecture-focus-toggle){display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;white-space:nowrap} [data-archbro-ui="next"] :is(.architecture-header-button,.architecture-focus-toggle,.architecture-focus-controls button)>.ui-icon{flex:none;width:16px;height:16px} /* Focus mode: the Canvas fills the workspace in every layout; panels open only as overlays above the canvas toolbar. */ [data-archbro-ui="next"] .ui-next-architecture-root.architecture-v41-workspace.is-focus-mode .architecture-body.next-architecture-layout{position:relative;display:block;overflow:hidden;scrollbar-gutter:auto} [data-archbro-ui="next"] .ui-next-architecture-root.architecture-v41-workspace.is-focus-mode .architecture-body.next-architecture-layout>.next-architecture-graph{width:100%;height:100%;min-height:0} [data-archbro-ui="next"] .ui-next-architecture-root.architecture-v41-workspace.is-focus-mode .architecture-body.next-architecture-layout>:is(.next-navigator-resizer,.next-architecture-navigator,.next-architecture-inspector){display:none} [data-archbro-ui="next"] .ui-next-architecture-root.architecture-v41-workspace.is-focus-mode .architecture-body.next-architecture-layout.is-navigator-drawer-open>.next-architecture-navigator, [data-archbro-ui="next"] .ui-next-architecture-root.architecture-v41-workspace.is-focus-mode .architecture-body.next-architecture-layout.is-inspector-drawer-open>.next-architecture-inspector{display:flex;position:absolute;z-index:40;width:320px;max-width:85%;height:auto;min-height:0;max-height:none;border:1px solid var(--ui-next-line);box-shadow:0 8px 30px rgba(41,38,55,.11)} [data-archbro-ui="next"] .ui-next-architecture-root.architecture-v41-workspace.is-focus-mode .architecture-body.next-architecture-layout.is-navigator-drawer-open>.next-architecture-navigator, [data-archbro-ui="next"] .ui-next-architecture-root.architecture-v41-workspace.is-focus-mode .architecture-body.next-architecture-layout.is-inspector-drawer-open.is-inspector-on-left>.next-architecture-inspector{inset:0 auto 48px 0} [data-archbro-ui="next"] .ui-next-architecture-root.architecture-v41-workspace.is-focus-mode .architecture-body.next-architecture-layout.is-inspector-drawer-open>.next-architecture-inspector{inset:0 0 48px auto} [data-archbro-ui="next"] .architecture-focus-controls{position:absolute;top:10px;right:10px;z-index:42;display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--ui-next-line);border-radius:8px;background:var(--ui-next-surface);box-shadow:0 3px 16px rgba(20,24,30,.1)} [data-archbro-ui="next"] .ui-next-architecture-root.architecture-v41-workspace.is-focus-mode .architecture-body.next-architecture-layout.is-inspector-drawer-open:not(.is-inspector-on-left)>.architecture-focus-controls{right:calc(min(320px,85%) + 10px)} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-focus-controls button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--ui-next-ink);font:inherit;font-size:12px;font-weight:650;white-space:nowrap;cursor:pointer} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-focus-controls button:hover{background:var(--ui-next-hover)} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-focus-controls button[aria-expanded="true"]{background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} [data-archbro-ui="next"] .architecture-v41-workspace .architecture-focus-controls .architecture-focus-exit{color:var(--ui-next-accent)} /* The phone area list starts below the floating controls instead of under them. */ [data-archbro-ui="next"] .ui-next-architecture-root.architecture-v41-workspace.is-focus-mode .architecture-body.next-architecture-layout .has-mobile-areas .next-mobile-areas{padding-top:58px} @container architecture-workspace (max-width:1180px){ /* Icon buttons keep their names as tooltips and for assistive technology. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header :is(.architecture-current-sha:not(.is-draft),.architecture-code-pin){display:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header .architecture-header-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header :is(.architecture-header-button,.architecture-focus-toggle){width:44px;min-width:44px;padding:0} } @container architecture-workspace (max-width:1100px){ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header{padding:4px 10px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header .architecture-current-summary{display:none} } @container architecture-workspace (max-width:760px){ /* Two rows: title and actions, then the version row. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header{flex-wrap:wrap;row-gap:4px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header>.architecture-repo-bar{order:3;flex-basis:100%;flex-wrap:nowrap} } @container architecture-workspace (max-width:620px){ /* Phones: icon buttons and the view menu share the first row; the tab bar already names the page. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header h2, [data-archbro-ui="next"] .architecture-v41-workspace .architecture-header-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions{flex:1 1 0;min-width:0} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions .architecture-view-menu{flex:1 1 auto;min-width:0} /* Two icon buttons follow the menu here, so the panel aligns with the end of the row to stay on screen. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions{position:relative;z-index:60} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions .architecture-view-menu{position:static} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions .architecture-view-button{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header .architecture-ref-select{width:150px} [data-archbro-ui="next"] .architecture-v41-workspace :is(.architecture-header-button,.architecture-focus-toggle,.architecture-focus-controls button){width:44px;min-width:44px;padding:0} [data-archbro-ui="next"] .ui-next-architecture-root.architecture-v41-workspace.is-focus-mode .architecture-body.next-architecture-layout:is(.is-inspector-drawer-open,.is-navigator-drawer-open)>.architecture-focus-controls{display:none} } /* Goal targets share the formal graph controls without changing Living data. */ [data-archbro-ui="next"] .next-graph-node.target-added > rect { stroke: #27835b; } [data-archbro-ui="next"] .next-graph-node.target-removed > rect { stroke: #c54848; stroke-dasharray: 6 4; } [data-archbro-ui="next"] .next-graph-node.target-modified > rect { stroke: #b47a18; } [data-archbro-ui="next"] .next-graph-node.target-accepted > rect { stroke: #637590; } [data-archbro-ui="next"] .next-graph-node.target-complete > rect { stroke: #27835b; stroke-width: 2; } [data-archbro-ui="next"] .next-target-task-badge { fill: var(--text-secondary); font-size: 10px; font-weight: 650; pointer-events: none; } [data-archbro-ui="next"] .next-graph-edge.target-edge-added .next-graph-edge-line { stroke: #27835b; } [data-archbro-ui="next"] .next-graph-edge.target-edge-removed .next-graph-edge-line { stroke: #c54848; stroke-dasharray: 6 4; } [data-archbro-ui="next"] .next-graph-edge.target-edge-modified .next-graph-edge-line { stroke: #b47a18; } [data-archbro-ui="next"] .architecture-v41-workspace > .target-legend { flex-wrap: wrap; margin: 0; padding: 8px 20px; } /* Keep view and Details controls inside narrow viewports, including Target titles. */ @container architecture-workspace (max-width:520px){ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header{flex-wrap:wrap;height:auto;min-height:52px;padding:4px 10px;gap:6px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header h2{flex:1;overflow:hidden;text-overflow:ellipsis} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions{flex:1 1 0;min-width:0;justify-content:flex-end;margin-left:0} } /* V41 area cards with flat children and adjoining, quiet graph/details regions. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-tree{gap:6px} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row.is-area{min-height:66px;grid-template-columns:minmax(0,1fr) 32px;padding:0 0 0 9px} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row.is-area .next-navigator-label{grid-column:1;grid-row:1;font-size:12px;font-weight:650;min-height:64px;padding:7px 5px} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row.is-area .next-navigator-toggle{grid-column:2;grid-row:1;width:32px;height:100%;border-left:1px solid var(--ui-next-line-soft);border-radius:0;font-size:19px;font-weight:400} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row .next-navigator-focus{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row.is-component{min-height:44px;padding:0 5px 0 calc(8px + var(--tree-depth,0)*8px);grid-template-columns:14px minmax(0,1fr);border:0;background:transparent;border-radius:4px} [data-archbro-ui="next"] .architecture-v41-workspace .is-component .next-navigator-toggle-spacer{width:12px;height:12px;border:1px solid var(--ui-next-muted);border-radius:2px;transform:rotate(30deg) scale(.65)} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row.is-component .next-navigator-label{min-height:44px;padding:5px;font-size:12px;font-weight:500} [data-archbro-ui="next"] .architecture-v41-workspace .is-component .next-navigator-kind{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row:hover{background:var(--ui-next-hover)} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row.is-selected{background:var(--ui-next-accent-soft)} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.is-inspector-empty{grid-template-columns:var(--navigator-width,240px) 6px minmax(0,1fr) 0} [data-archbro-ui="next"] .architecture-v41-workspace .is-inspector-empty.is-navigator-collapsed{grid-template-columns:52px 0 minmax(0,1fr) 0} [data-archbro-ui="next"] .architecture-v41-workspace .is-inspector-empty:not(.is-inspector-drawer-open) .next-architecture-inspector{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-node.is-dimmed{opacity:.65} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-edge.is-dimmed{opacity:.4} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-group-frame rect{stroke:var(--ui-next-line);stroke-dasharray:none;fill:var(--ui-next-surface-muted);fill-opacity:.15} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-group-frame.is-dimmed{opacity:.65} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-node>rect{filter:none;stroke-width:1.2} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-node.is-selected>rect{stroke-width:2} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-node-label{font-size:14px;font-weight:650} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-node-source{font-family:inherit;font-size:12px} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-node.is-area-summary .next-graph-node-label{font-size:16px;font-weight:700} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-node.is-area-summary .next-graph-node-count{font-size:12px;font-weight:650} /* Ownership and task progress stay attached to raw component IDs on the accepted graph. */ [data-archbro-ui="next"] .next-graph-owner{pointer-events:none} [data-archbro-ui="next"] .next-graph-owner circle{fill:var(--ui-next-accent);stroke:var(--ui-next-surface);stroke-width:1.5;vector-effect:non-scaling-stroke} [data-archbro-ui="next"] .next-graph-owner text{fill:#fff;font-family:inherit;font-size:8px;font-weight:700;pointer-events:none} [data-archbro-ui="next"] .next-graph-owner.is-unassigned circle{fill:var(--ui-next-surface);stroke:var(--ui-next-warning);stroke-dasharray:2 2} [data-archbro-ui="next"] .next-graph-owner.is-unassigned text{fill:var(--ui-next-warning)} [data-archbro-ui="next"] .next-graph-owner-label{fill:var(--ui-next-muted);font-size:9px;font-weight:600;pointer-events:none} [data-archbro-ui="next"] .next-graph-progress{pointer-events:none} [data-archbro-ui="next"] .next-graph-progress-label{fill:var(--ui-next-muted);font-size:8px;font-weight:650} [data-archbro-ui="next"] .next-graph-progress-track{fill:var(--ui-next-line)} [data-archbro-ui="next"] .next-graph-progress-fill{fill:var(--ui-next-accent)} [data-archbro-ui="next"] .next-graph-progress.progress-status-done .next-graph-progress-fill{fill:var(--ui-next-success)} [data-archbro-ui="next"] .next-graph-progress.progress-status-blocked .next-graph-progress-fill{fill:var(--ui-next-danger)} [data-archbro-ui="next"] .next-graph-progress.progress-status-not-started .next-graph-progress-fill{fill:var(--ui-next-warning)} [data-archbro-ui="next"] .next-graph-node.progress-colour-done>rect{fill:var(--ui-next-success-bg);stroke:var(--ui-next-success)} [data-archbro-ui="next"] .next-graph-node.progress-colour-in-progress>rect{fill:var(--ui-next-accent-soft);stroke:var(--ui-next-accent)} [data-archbro-ui="next"] .next-graph-node.progress-colour-blocked>rect{fill:color-mix(in srgb,var(--ui-next-danger) 9%,var(--ui-next-surface));stroke:var(--ui-next-danger)} [data-archbro-ui="next"] .next-graph-node.progress-colour-not-started>rect{fill:var(--ui-next-warning-bg);stroke:var(--ui-next-warning)} [data-archbro-ui="next"] .next-graph-node.progress-colour-no-tasks>rect{stroke-dasharray:4 3} [data-archbro-ui="next"] .next-progress-colour-toggle.is-active{border-color:var(--ui-next-accent);background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-graph-toolbar [data-progress-colour-status]{align-self:center;color:var(--ui-next-muted);font-size:10px} [data-archbro-ui="next"] .next-inspector-current-facts{margin:10px 0;padding:9px 10px;border-left:3px solid var(--ui-next-warning);background:var(--ui-next-warning-bg);color:var(--ui-next-ink);font-size:11px;line-height:1.5} [data-archbro-ui="next"] .next-progress-section{display:grid;gap:9px;padding:12px 0;border-bottom:1px solid var(--ui-next-line-soft)} [data-archbro-ui="next"] .next-progress-section h4,[data-archbro-ui="next"] .next-ownership-section h4{margin:0;font-size:13px;font-weight:700} [data-archbro-ui="next"] .next-progress-status{display:flex;align-items:center;justify-content:space-between;gap:12px} [data-archbro-ui="next"] .next-progress-status>span{color:var(--ui-next-accent);font-size:11px;font-weight:650} [data-archbro-ui="next"] .next-progress-status .progress-status-done{color:var(--ui-next-success)} [data-archbro-ui="next"] .next-progress-status .progress-status-blocked{color:var(--ui-next-danger)} [data-archbro-ui="next"] .next-progress-status .progress-status-not-started{color:var(--ui-next-warning)} [data-archbro-ui="next"] .next-progress-status>strong{font-size:14px} [data-archbro-ui="next"] .next-progress-section dl{display:grid;gap:5px;margin:0} [data-archbro-ui="next"] .next-progress-section dl>div{display:flex;justify-content:space-between;gap:10px;color:var(--ui-next-muted);font-size:11px} [data-archbro-ui="next"] .next-progress-section dd{margin:0;color:var(--ui-next-ink);font-weight:650} [data-archbro-ui="next"] .next-progress-track{appearance:none;-webkit-appearance:none;display:block;width:100%;height:5px;border:0;overflow:hidden;border-radius:4px;background:var(--ui-next-line-soft)} [data-archbro-ui="next"] .next-progress-track::-webkit-progress-bar{background:var(--ui-next-line-soft)} [data-archbro-ui="next"] .next-progress-track::-webkit-progress-value{background:var(--ui-next-accent)} [data-archbro-ui="next"] .next-progress-track::-moz-progress-bar{background:var(--ui-next-accent)} [data-archbro-ui="next"] .next-inspector-tabs{display:flex;gap:3px;margin:0 0 10px;border-bottom:1px solid var(--ui-next-line-soft)} [data-archbro-ui="next"] .next-inspector-tabs [role="tab"]{min-height:36px;padding:7px 10px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ui-next-muted);font:inherit;font-size:11px;font-weight:650;cursor:pointer} [data-archbro-ui="next"] .next-inspector-tabs [role="tab"][aria-selected="true"]{border-bottom-color:var(--ui-next-accent);color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-inspector-tabs [role="tab"]:focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:1px} [data-archbro-ui="next"] .next-inspector-tab-panel{min-width:0} [data-archbro-ui="next"] .next-inspector-external-panel{min-height:60px;color:var(--ui-next-muted);font-size:12px;line-height:1.5} [data-archbro-ui="next"] .next-ownership-section{padding:12px 0;border-bottom:1px solid var(--ui-next-line-soft)} [data-archbro-ui="next"] .next-ownership-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px} [data-archbro-ui="next"] .next-ownership-heading button,[data-archbro-ui="next"] .next-ownership-dialog button{min-height:32px;padding:5px 9px;border:1px solid var(--ui-next-line);border-radius:6px;background:var(--ui-next-surface);color:var(--ui-next-ink);font:inherit;font-size:11px;font-weight:650;cursor:pointer} [data-archbro-ui="next"] .next-ownership-heading button:hover,[data-archbro-ui="next"] .next-ownership-dialog button:hover{border-color:var(--ui-next-accent);color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-ownership-people{display:grid;gap:7px;margin:0;padding:0;list-style:none} [data-archbro-ui="next"] .next-ownership-person,[data-archbro-ui="next"] .next-ownership-candidate>span{display:flex;align-items:center;gap:9px;min-width:0} [data-archbro-ui="next"] .next-ownership-person>span:last-child,[data-archbro-ui="next"] .next-ownership-candidate>span>span:last-child{display:grid;min-width:0;gap:1px} [data-archbro-ui="next"] .next-ownership-person strong,[data-archbro-ui="next"] .next-ownership-candidate strong{overflow-wrap:anywhere;color:var(--ui-next-ink);font-size:11px;font-weight:650} [data-archbro-ui="next"] .next-ownership-person small,[data-archbro-ui="next"] .next-ownership-candidate small{color:var(--ui-next-muted);font-size:10px} [data-archbro-ui="next"] .next-ownership-avatar{display:inline-grid;flex:none;width:28px;height:28px;place-items:center;border-radius:50%;background:var(--ui-next-accent-soft);color:var(--ui-next-accent);font-size:9px;font-weight:750} [data-archbro-ui="next"] .next-ownership-avatar.is-unassigned{border:1px dashed var(--ui-next-warning);background:var(--ui-next-surface);color:var(--ui-next-warning)} [data-archbro-ui="next"] .next-ownership-unassigned{display:flex;align-items:center;gap:9px;color:var(--ui-next-warning);font-size:11px} [data-archbro-ui="next"] .next-ownership-empty{color:var(--ui-next-muted);font-size:11px} [data-archbro-ui="next"] .next-ownership-dialog{width:min(520px,calc(100vw - 32px));max-height:min(82dvh,680px);overflow:auto;padding:0;border:1px solid var(--ui-next-line);border-radius:10px;background:var(--ui-next-surface);color:var(--ui-next-ink);box-shadow:0 18px 58px rgba(20,25,32,.25)} [data-archbro-ui="next"] .next-ownership-dialog::backdrop{background:rgba(15,20,30,.42)} [data-archbro-ui="next"] .next-ownership-dialog-heading{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--ui-next-line-soft);background:var(--ui-next-surface)} [data-archbro-ui="next"] .next-ownership-dialog-heading h4{margin:0;font-size:15px} [data-archbro-ui="next"] .next-ownership-dialog-heading button{width:32px;padding:0;font-size:18px} [data-archbro-ui="next"] .next-ownership-dialog [data-ownership-dialog-body]{padding:15px 16px;color:var(--ui-next-muted);font-size:12px;line-height:1.5} [data-archbro-ui="next"] .next-ownership-dialog form{display:grid;gap:15px} [data-archbro-ui="next"] .next-ownership-owner-field{display:grid;gap:6px;color:var(--ui-next-ink);font-size:12px;font-weight:650} [data-archbro-ui="next"] .next-ownership-owner-field select{min-height:38px;padding:6px 9px;border:1px solid var(--ui-next-line);border-radius:6px;background:var(--ui-next-surface);color:var(--ui-next-ink);font:inherit} [data-archbro-ui="next"] .next-ownership-dialog fieldset{min-width:0;margin:0;padding:10px;border:1px solid var(--ui-next-line-soft);border-radius:7px} [data-archbro-ui="next"] .next-ownership-warning{margin:0;padding:8px 9px;border-left:3px solid var(--ui-next-warning);background:var(--ui-next-warning-bg);color:var(--ui-next-ink);font-size:11px} [data-archbro-ui="next"] .next-ownership-dialog legend{padding:0 5px;color:var(--ui-next-ink);font-size:12px;font-weight:650} [data-archbro-ui="next"] .next-ownership-candidates{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:5px} [data-archbro-ui="next"] .next-ownership-candidate{display:flex;align-items:center;gap:8px;min-width:0;padding:7px;border-radius:5px;cursor:pointer} [data-archbro-ui="next"] .next-ownership-candidate:hover{background:var(--ui-next-hover)} [data-archbro-ui="next"] .next-ownership-candidate input{flex:none;accent-color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-ownership-candidate>span{min-width:0} [data-archbro-ui="next"] .next-ownership-error{margin:0;padding:8px 10px;border-left:3px solid var(--ui-next-danger);background:color-mix(in srgb,var(--ui-next-danger) 8%,var(--ui-next-surface));color:var(--ui-next-ink)} [data-archbro-ui="next"] .next-ownership-dialog-actions{display:flex;justify-content:flex-end;gap:8px} [data-archbro-ui="next"] .next-ownership-dialog-actions [type="submit"]{border-color:var(--ui-next-accent);background:var(--ui-next-accent);color:#fff} [data-archbro-ui="next"] .next-ownership-dialog button:disabled{opacity:.6;cursor:wait} [data-archbro-ui="next"] .next-mobile-area-owner,[data-archbro-ui="next"] .next-mobile-area-progress{display:flex;align-items:center;gap:6px;margin-top:7px;color:var(--ui-next-muted);font-size:10px;line-height:15px} [data-archbro-ui="next"] .next-mobile-area-owner .next-ownership-avatar{width:20px;height:20px;font-size:8px} [data-archbro-ui="next"] .next-mobile-area-owner.is-unassigned{color:var(--ui-next-warning)} [data-archbro-ui="next"] .next-mobile-area-progress.progress-status-done{color:var(--ui-next-success)} [data-archbro-ui="next"] .next-mobile-area-progress.progress-status-blocked{color:var(--ui-next-danger)} [data-archbro-ui="next"] .next-mobile-area-progress.progress-status-not-started{color:var(--ui-next-warning)} @media(max-width:1100px){[data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.is-inspector-empty{display:block}} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-node-count{fill:var(--ui-next-muted);font-size:12px} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-node.is-group:not(.is-dimmed) .next-graph-node-count{fill:var(--ui-next-success)} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-node.is-group>rect{fill:var(--ui-next-surface);stroke:var(--ui-next-line)} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-node.is-selected>rect{stroke:var(--ui-next-accent)} /* V41 phone entry starts with readable areas rather than a miniature full map. */ [data-archbro-ui="next"] .next-mobile-areas, [data-archbro-ui="next"] .next-mobile-area-back{display:none} @media(max-width:620px){ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph.has-mobile-areas{display:block;overflow:auto;background:var(--ui-next-canvas)} [data-archbro-ui="next"] .has-mobile-areas :is(.next-graph-stage,.next-graph-toolbar,.next-graph-meta){display:none} [data-archbro-ui="next"] .next-mobile-areas{display:block;padding:24px 14px} [data-archbro-ui="next"] .next-mobile-areas header>small{color:var(--ui-next-muted);font-size:12px;font-weight:650} [data-archbro-ui="next"] .next-mobile-areas h3{margin:5px 0;font-size:20px;font-weight:650;line-height:26px} [data-archbro-ui="next"] .next-mobile-areas p{margin:0 0 16px;color:var(--ui-next-muted);font-size:14px;line-height:20px} [data-archbro-ui="next"] .next-mobile-area-list{display:grid;gap:9px} [data-archbro-ui="next"] .next-mobile-area-list>button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--ui-next-line);border-radius:10px;text-align:left;background:var(--ui-next-surface);color:var(--ui-next-ink);font:inherit;cursor:pointer} [data-archbro-ui="next"] .next-mobile-area-list>button:hover{border-color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-mobile-area-list>button>span:first-child>strong{display:block;font-size:15px;line-height:21px} [data-archbro-ui="next"] .next-mobile-area-list>button>span:first-child>small{display:block;margin-top:4px;color:var(--ui-next-muted);font-size:12px;line-height:18px} [data-archbro-ui="next"] .next-mobile-area-count{display:grid;grid-template-columns:1fr 16px;align-items:center;justify-items:end;gap:0 7px} [data-archbro-ui="next"] .next-mobile-area-count b{font-size:14px} [data-archbro-ui="next"] .next-mobile-area-count small{grid-column:1;font-size:12px;color:var(--ui-next-muted);white-space:nowrap} [data-archbro-ui="next"] .next-mobile-area-count>.ui-icon{grid-column:2;grid-row:1/3;width:16px;height:16px;color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-mobile-area-back{position:absolute;z-index:4;top:10px;left:10px;display:block;padding:7px 10px;border:1px solid var(--ui-next-line);border-radius:6px;background:var(--ui-next-surface);color:var(--ui-next-ink);font:inherit;font-size:12px;cursor:pointer} [data-archbro-ui="next"] .is-columns-rules .next-mobile-area-back~.next-graph-stage .next-canvas-stage-caption{top:52px} } /* V41: quiet thin connectors, crossing casing, bounded marker proportions. Relationship copy is revealed on selection, hover or keyboard focus. */ [data-archbro-ui="next"] .next-graph-edge-casing{fill:none;stroke:var(--ui-next-surface);stroke-width:5;pointer-events:none;stroke-linecap:round;stroke-linejoin:round} [data-archbro-ui="next"] .next-graph-edge-line{stroke-linecap:round;stroke-linejoin:round;pointer-events:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-edge-line{stroke-width:1.2} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-edge:is(.is-selected,:hover,:focus-visible) .next-graph-edge-line{stroke-width:2} [data-archbro-ui="next"] .next-graph-arrow{pointer-events:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-edge-label{visibility:hidden;pointer-events:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-edge-label:is(.is-selected,.is-preview,.has-parallel-operations){visibility:visible} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-edge-label rect{fill:none;stroke:none;pointer-events:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-edge-label text{fill:var(--ui-next-accent);font-weight:650;paint-order:stroke;stroke:var(--ui-next-surface);stroke-width:4;stroke-linejoin:round;vector-effect:non-scaling-stroke} /* Living disclosure: explicit Area navigation and readable relationship badges. */ [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-graph{display:flex;flex-direction:column} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-graph-stage{position:relative;inset:auto;flex:1;min-height:0} [data-archbro-ui="next"] .is-living-disclosure .next-area-rail{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-bottom:1px solid var(--ui-next-line);background:var(--ui-next-surface);flex:none} [data-archbro-ui="next"] .next-area-rail button{font:inherit;font-size:13px;padding:5px 9px;border:1px solid var(--ui-next-line);border-radius:6px;color:var(--ui-next-ink);background:var(--ui-next-surface);cursor:pointer} [data-archbro-ui="next"] .next-area-rail [data-canvas-offscreen]{align-self:center;flex:0 0 260px;max-width:100%;height:20px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--ui-next-muted);margin-left:auto} [data-archbro-ui="next"] .next-area-minimap{width:180px;height:24px;align-self:center;flex:none} [data-archbro-ui="next"] .next-area-minimap g{fill:var(--ui-next-muted);cursor:pointer} [data-archbro-ui="next"] .next-area-minimap [data-minimap-viewport]{fill:color-mix(in srgb,var(--ui-next-accent) 15%,transparent);stroke:var(--ui-next-accent);stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none} [data-archbro-ui="next"] .is-living-disclosure .next-graph-edge-label{visibility:visible;pointer-events:auto;cursor:pointer} [data-archbro-ui="next"] .is-living-disclosure .next-graph-edge-label rect{fill:var(--ui-next-surface);stroke:var(--ui-next-line)} [data-archbro-ui="next"] .is-living-disclosure .next-graph-edge-label text{fill:var(--ui-next-ink);stroke:none;font-size:var(--living-label-font,12px)} [data-archbro-ui="next"] .is-living-disclosure .is-semantic-overview :is(.next-graph-node-source,.next-graph-node-count,.next-graph-node-kind){display:none} [data-archbro-ui="next"] .is-living-disclosure .is-semantic-overview .has-overview-count .next-graph-node-count{display:block} [data-archbro-ui="next"] .is-living-disclosure .is-semantic-overview .next-graph-edge-label:not(.is-bundle-count):not(.is-selected):not(.is-preview){visibility:hidden;pointer-events:none} [data-archbro-ui="next"] .is-living-disclosure .next-graph-node.is-root-group:not(.is-selected)>rect{stroke:var(--ui-next-line)} [data-archbro-ui="next"] .is-living-disclosure .next-graph-node.is-group:not(.is-root-group)>rect{fill:color-mix(in srgb,var(--ui-next-accent) 5%,var(--ui-next-surface))} [data-archbro-ui="next"] .is-living-disclosure .next-architecture-inspector{display:none} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .architecture-drawer-toggle{display:inline-flex} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .architecture-body{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-graph{flex:none;min-height:440px;height:100%} [data-archbro-ui="next"] .is-living-disclosure .next-architecture-navigator{display:none} [data-archbro-ui="next"] .is-living-disclosure .is-navigator-drawer-open .next-architecture-navigator{display:flex;position:absolute;inset:0 auto 0 0;width:310px;max-width:85%;z-index:40} [data-archbro-ui="next"] .is-living-disclosure .next-navigator-resizer{display:none} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .is-inspector-drawer-open .next-architecture-inspector{display:flex;position:relative;inset:auto;flex:none;width:100%;max-width:none;height:auto;min-height:180px;max-height:420px;border-top:1px solid var(--ui-next-line);box-shadow:none} /* Details respects the selection preference and sits below the Canvas; the stage retains its height and its camera, and cards cannot be covered. */ @media(max-width:1100px){ [data-archbro-ui="next"] .is-living-disclosure .architecture-body{display:flex;flex-direction:column;overflow-y:auto} [data-archbro-ui="next"] .is-living-disclosure .next-architecture-graph{flex:none;min-height:440px;height:100%} [data-archbro-ui="next"] .is-living-disclosure .is-inspector-drawer-open .next-architecture-inspector{position:relative;inset:auto;flex:none;width:100%;max-width:none;max-height:420px;border-top:1px solid var(--ui-next-line);box-shadow:none} } @media(min-width:1101px){ [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .architecture-body.next-architecture-layout{display:grid;grid-template-columns:var(--navigator-width,240px) 6px minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-content:start} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .architecture-body.next-architecture-layout.is-navigator-collapsed{grid-template-columns:52px 6px minmax(0,1fr)} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-navigator{display:flex;grid-column:1;grid-row:1} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-navigator-resizer{display:block;grid-column:2;grid-row:1} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-graph{grid-column:3;grid-row:1} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-inspector{grid-column:1/-1;grid-row:2} /* The desktop navigator is already a column: opening it keeps the column instead of floating over the caption and first card. */ [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .architecture-body.next-architecture-layout.is-navigator-drawer-open{grid-template-columns:var(--navigator-width,240px) 6px minmax(0,1fr)} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .architecture-body.is-navigator-drawer-open .next-architecture-navigator{position:static;inset:auto;width:auto;max-width:none;height:auto;max-height:none;z-index:auto;box-shadow:none} } /* Living fan-in: one shared trunk and a screen-sized junction marker. */ [data-archbro-ui="next"] .is-living-disclosure .next-graph-stage svg, [data-archbro-ui="next"] .is-living-disclosure .next-graph-stage svg *{user-select:none;-webkit-user-select:none} [data-archbro-ui="next"] .is-living-disclosure .next-graph-junction{fill:currentColor;stroke:var(--ui-next-surface);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none} [data-archbro-ui="next"] .is-living-disclosure .next-graph-junction-hit{fill:transparent;stroke:none;pointer-events:all} [data-archbro-ui="next"] .is-living-disclosure .is-connection-preview .next-graph-edge-line{stroke:var(--ui-next-accent);stroke-width:3} [data-archbro-ui="next"] .is-living-disclosure .next-graph-node.is-connection-preview>rect{stroke:var(--ui-next-accent);stroke-width:2} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-graph-toolbar{position:relative;inset:auto;flex:none;align-self:flex-start;margin:0;min-height:48px;border-radius:0;border:0;box-shadow:none;flex-wrap:wrap} [data-archbro-ui="next"] .next-graph-disclosure-controls{display:inline-flex;gap:4px;margin-left:8px;padding-left:8px;border-left:1px solid var(--ui-next-line)} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-toolbar [data-graph-disclosure]{padding:0 10px;font-size:12px;font-weight:600;white-space:nowrap} [data-archbro-ui="next"] .is-living-disclosure .next-graph-meta{display:none} /* Details overlays the existing stage rather than adding an off-screen row. Its side follows the selected target, leaving that card exposed. */ [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .architecture-body{position:relative;overflow:clip;grid-template-rows:minmax(0,1fr)} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .is-inspector-drawer-open .next-architecture-inspector{position:absolute;grid-area:auto;inset:0 0 48px auto;z-index:8;width:320px;max-width:85%;height:auto;min-height:0;max-height:calc(100% - 48px);border:1px solid var(--ui-next-line);box-shadow:0 8px 30px rgba(41,38,55,.11)} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .is-inspector-drawer-open.is-inspector-on-left .next-architecture-inspector{inset:0 auto 48px 0} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-navigator{min-height:0;height:100%} /* The target tree has a neutral shared trunk. Color marks the authored type only on the short segment leaving a child; peek reveals the hidden branches. */ [data-archbro-ui="next"] .is-living-disclosure .next-graph-edge{color:var(--ui-next-muted)} [data-archbro-ui="next"] .is-living-disclosure .next-graph-edge-line{stroke:currentColor;stroke-width:2} [data-archbro-ui="next"] .is-living-disclosure .next-graph-edge-casing{stroke:var(--ui-next-canvas);stroke-width:4} [data-archbro-ui="next"] .is-living-disclosure .next-graph-junction{stroke:var(--ui-next-canvas)} [data-archbro-ui="next"] .is-living-disclosure .next-graph-origin{stroke:var(--ui-next-muted);stroke-width:2;fill:none;pointer-events:none;stroke-linecap:round} [data-archbro-ui="next"] .is-living-disclosure .next-graph-origin.category-data{stroke:#bc8731} [data-archbro-ui="next"] .is-living-disclosure .next-graph-origin.category-event{stroke:var(--ui-next-accent)} [data-archbro-ui="next"] .is-living-disclosure .is-peek-only:not(.is-connection-preview), [data-archbro-ui="next"] .is-living-disclosure .is-tree-hidden{display:none;pointer-events:none} [data-archbro-ui="next"] .is-living-disclosure .is-summary-branch.is-connection-preview{display:none;pointer-events:none} [data-archbro-ui="next"] .is-living-disclosure .connection-peek .next-graph-edge:not(.is-connection-preview), [data-archbro-ui="next"] .is-living-disclosure .connection-peek .next-graph-edge-label:not(.is-connection-preview){opacity:.15} [data-archbro-ui="next"] .is-living-disclosure .connection-peek .next-graph-node:not(.is-connection-preview){opacity:.42} [data-archbro-ui="next"] .is-living-disclosure .next-graph-edge.is-connection-preview{color:var(--ui-next-accent);opacity:1} [data-archbro-ui="next"] .is-living-disclosure .next-graph-edge:focus{outline:none} [data-archbro-ui="next"] .is-living-disclosure .next-graph-edge.is-connection-preview .next-graph-edge-line{stroke:currentColor;stroke-width:2} [data-archbro-ui="next"] .is-living-disclosure .next-graph-edge-label.is-aggregate-count rect{stroke-dasharray:2 2} [data-archbro-ui="next"] .is-living-disclosure .next-graph-edge-label.is-incoming-count rect{stroke:var(--ui-next-accent)} /* ---- Living overview palette (column rules) --------------------------------- Neutral steel lines, one blue for everything that is focused, a colour per Area and a colour per kind of component. Lines never carry a type colour. */ [data-archbro-ui="next"] .is-columns-rules{ --cv-edge:#9dacc4;--cv-edge-ink:#58708d;--cv-badge-line:#d7e1ef; --cv-focus:#3069e8;--cv-focus-ink:#2359cb;--cv-focus-soft:#e9f0ff;--cv-focus-line:#6094f7; --cv-area-0:#476eda;--cv-area-1:#4d9e92;--cv-area-2:#9b80cf;--cv-area-3:#d7a252;--cv-area-4:#5c8ea8;--cv-area-5:#ae8593; --cv-kind-service:#4169c3;--cv-kind-data_store:#7b58c4;--cv-kind-ui:#c08a3e;--cv-kind-external_service:#3c9e8b; --cv-kind-infrastructure:#4e93b4;--cv-kind-agent:#a45d9b;--cv-kind-tool:#7a8a3c;--cv-kind-state:#b07e52; } [data-archbro-ui="next"][data-theme="dark"] .is-columns-rules,[data-theme="dark"] [data-archbro-ui="next"] .is-columns-rules{ --cv-edge:#6b7b94;--cv-edge-ink:#b4c2d6;--cv-badge-line:#3a4659; --cv-focus:#6c9bff;--cv-focus-ink:#a9c5ff;--cv-focus-soft:#1f2c4a;--cv-focus-line:#4d7ae0; --cv-area-0:#7f9cf0;--cv-area-1:#73c1b4;--cv-area-2:#bba3e8;--cv-area-3:#e6bb78;--cv-area-4:#84b4cc;--cv-area-5:#cba5b3; --cv-kind-service:#86a3e6;--cv-kind-data_store:#b196ea;--cv-kind-ui:#e2b36d;--cv-kind-external_service:#6ccbb6; --cv-kind-infrastructure:#7cbad6;--cv-kind-agent:#d796cd;--cv-kind-tool:#b6c46b;--cv-kind-state:#d7a77c; } [data-archbro-ui="next"] .is-columns-rules .next-graph-edge{color:var(--cv-edge)} [data-archbro-ui="next"] .is-columns-rules .next-graph-edge-line{stroke-width:1.9} [data-archbro-ui="next"] .is-columns-rules .next-graph-fan-in.is-arch .next-graph-edge-line{stroke-dasharray:6 5} [data-archbro-ui="next"] .is-columns-rules .next-graph-junction{fill:var(--cv-edge)} [data-archbro-ui="next"] .is-columns-rules .next-graph-edge.is-connection-preview, [data-archbro-ui="next"] .is-columns-rules .next-graph-edge.is-selected{color:var(--cv-focus)} [data-archbro-ui="next"] .is-columns-rules .is-connection-preview .next-graph-edge-line{stroke:var(--cv-focus);stroke-width:2.6;stroke-dasharray:none} [data-archbro-ui="next"] .is-columns-rules .next-graph-fan-in.is-connection-preview .next-graph-junction{fill:var(--cv-focus)} [data-archbro-ui="next"] .is-columns-rules .next-graph-edge-label rect{fill:var(--ui-next-surface);stroke:var(--cv-badge-line);stroke-width:1.4;rx:7} [data-archbro-ui="next"] .is-columns-rules .next-graph-edge-label text{fill:var(--cv-edge-ink);font-weight:750} [data-archbro-ui="next"] .is-columns-rules .next-graph-edge-label.is-connection-preview rect, [data-archbro-ui="next"] .is-columns-rules .next-graph-edge-label.is-selected rect{fill:var(--cv-focus-soft);stroke:var(--cv-focus-line)} [data-archbro-ui="next"] .is-columns-rules .next-graph-edge-label.is-connection-preview text, [data-archbro-ui="next"] .is-columns-rules .next-graph-edge-label.is-selected text{fill:var(--cv-focus-ink)} [data-archbro-ui="next"] .is-columns-rules .next-graph-edge-label.is-incoming-count rect{stroke:var(--cv-badge-line)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node.is-connection-preview>rect{stroke:var(--cv-focus);stroke-width:2} [data-archbro-ui="next"] .is-columns-rules .next-graph-node.is-selected>rect{stroke:var(--cv-focus);stroke-width:2.6} /* Areas, groups and components */ [data-archbro-ui="next"] .is-columns-rules [data-area="0"]{--cv-area:var(--cv-area-0)} [data-archbro-ui="next"] .is-columns-rules [data-area="1"]{--cv-area:var(--cv-area-1)} [data-archbro-ui="next"] .is-columns-rules [data-area="2"]{--cv-area:var(--cv-area-2)} [data-archbro-ui="next"] .is-columns-rules [data-area="3"]{--cv-area:var(--cv-area-3)} [data-archbro-ui="next"] .is-columns-rules [data-area="4"]{--cv-area:var(--cv-area-4)} [data-archbro-ui="next"] .is-columns-rules [data-area="5"]{--cv-area:var(--cv-area-5)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node>rect.next-graph-area-stripe{fill:var(--cv-area);stroke:none;filter:none;pointer-events:none} [data-archbro-ui="next"] .is-columns-rules .next-graph-node.is-root-group>rect{fill:var(--ui-next-surface);stroke:color-mix(in srgb,var(--cv-area) 38%,var(--ui-next-line))} [data-archbro-ui="next"] .is-columns-rules .next-graph-node.is-group:not(.is-root-group)>rect{fill:color-mix(in srgb,var(--cv-area) 9%,var(--ui-next-surface));stroke:color-mix(in srgb,var(--cv-area) 28%,var(--ui-next-line));stroke-width:1} [data-archbro-ui="next"] .is-columns-rules .next-graph-node.is-group:not(.is-root-group) .next-graph-node-label{font-size:12px;fill:var(--ui-next-muted);font-weight:760} [data-archbro-ui="next"] .is-columns-rules .next-graph-group-frame[data-depth="0"] rect{fill:color-mix(in srgb,var(--cv-area) 5%,var(--ui-next-surface-muted));fill-opacity:.55;stroke:color-mix(in srgb,var(--cv-area) 40%,var(--ui-next-line));stroke-width:1.4;stroke-dasharray:none} [data-archbro-ui="next"] .is-columns-rules .next-graph-group-frame:not([data-depth="0"]) rect{fill:transparent;stroke:color-mix(in srgb,var(--cv-area) 22%,var(--ui-next-line-soft));stroke-width:1;stroke-dasharray:none;rx:12} [data-archbro-ui="next"] .is-columns-rules .next-graph-node>rect.next-graph-kind-accent{fill:var(--cv-kind,var(--cv-area));stroke:none;filter:none;pointer-events:none} [data-archbro-ui="next"] .is-columns-rules .next-graph-node[data-kind="service"]{--cv-kind:var(--cv-kind-service)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node[data-kind="data_store"]{--cv-kind:var(--cv-kind-data_store)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node[data-kind="ui"]{--cv-kind:var(--cv-kind-ui)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node[data-kind="external_service"]{--cv-kind:var(--cv-kind-external_service)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node[data-kind="infrastructure"]{--cv-kind:var(--cv-kind-infrastructure)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node[data-kind="agent"]{--cv-kind:var(--cv-kind-agent)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node[data-kind="tool"]{--cv-kind:var(--cv-kind-tool)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node[data-kind="state"]{--cv-kind:var(--cv-kind-state)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node:not(.is-group) .next-graph-node-kind{fill:var(--cv-kind,var(--ui-next-muted))} [data-archbro-ui="next"] .is-columns-rules .is-solo{display:none} /* Emphasis belongs to individual relationships, including always-visible internal arrows. */ [data-archbro-ui="next"] .is-columns-rules .connection-peek .is-merge.is-connection-preview [data-part-members]:not(.is-connection-preview){opacity:.15} /* Keep the real Canvas controls reachable while its navigator drawer is open. The drawer must not turn a Fit click into navigation to a hidden list row. */ [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .is-navigator-drawer-open .next-architecture-navigator{bottom:48px;height:auto;max-height:calc(100% - 48px)} [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar{z-index:41} /* Match the reference Show all connections control. Routes already exist; the preference changes visibility only. Do not compound opacity on nested parts. */ [data-archbro-ui="next"] .is-columns-rules .show-all-connections .is-peek-only:not(.is-connection-preview):not(.is-solo){display:inline;pointer-events:auto} [data-archbro-ui="next"] .is-columns-rules .show-all-connections .next-graph-edge.is-peek-only:not(.is-connection-preview), [data-archbro-ui="next"] .is-columns-rules .show-all-connections .next-graph-edge-label.is-peek-only:not(.is-connection-preview), [data-archbro-ui="next"] .is-columns-rules .show-all-connections .next-graph-fan-in:not(.is-peek-only)>[data-peek-part]:not(.is-connection-preview){opacity:.55} [data-archbro-ui="next"] .is-columns-rules .show-all-connections.connection-peek .next-graph-edge:not(.is-connection-preview), [data-archbro-ui="next"] .is-columns-rules .show-all-connections.connection-peek .next-graph-edge-label:not(.is-connection-preview){opacity:.15} /* Canvas Lab v1.4 presentation: original card hierarchy, type glyphs, palette, dotted stage and neutral/blue connection states; actions live in the view menu. */ [data-archbro-ui="next"] .is-columns-rules{--cv-stage:#f7f9fc;--cv-dot:#dce4ef;--cv-surface:#fff;--cv-surface-2:#f8fafc;--cv-frame:#fbfcfe;--cv-line:#e3e8ef;--cv-ink:#172235;--cv-ink-2:#334155;--cv-muted:#526178;--cv-faint:#526178;--cv-shadow:rgba(32,60,102,.065);--cv-type-bg:#edf3ff} [data-theme="dark"] [data-archbro-ui="next"] .is-columns-rules,[data-archbro-ui="next"][data-theme="dark"] .is-columns-rules{--cv-stage:#101824;--cv-dot:#263448;--cv-surface:#1a2535;--cv-surface-2:#1d2a3c;--cv-frame:#152030;--cv-line:#314158;--cv-ink:#e3eaf5;--cv-ink-2:#c7d3e5;--cv-muted:#adbbcf;--cv-faint:#adbbcf;--cv-shadow:rgba(0,0,0,.18);--cv-type-bg:#233757} /* The graph fills the measured body. Legacy 440px minima clip the footer in short panes. */ [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-architecture-graph{min-height:0} [data-archbro-ui="next"] .is-columns-rules .next-graph-stage{position:relative;background-color:var(--cv-stage);background-image:radial-gradient(circle,var(--cv-dot) .8px,transparent .9px);background-size:22px 22px} [data-archbro-ui="next"] .is-columns-rules .next-graph-background{fill:transparent} [data-archbro-ui="next"] .is-columns-rules .next-graph-node.cv-node>rect.cv-card-bounds{fill:transparent;stroke:none;stroke-width:0;filter:none;pointer-events:none} [data-archbro-ui="next"] .is-columns-rules .cv-card-host,[data-archbro-ui="next"] .is-columns-rules .cv-card-host *{box-sizing:border-box;user-select:none;-webkit-user-select:none} [data-archbro-ui="next"] .is-columns-rules .cv-card-host{height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif;color:var(--cv-ink);line-height:1.35;cursor:pointer} [data-archbro-ui="next"] .is-columns-rules .cv-card,[data-archbro-ui="next"] .is-columns-rules .cv-head{height:100%;width:100%;position:relative} [data-archbro-ui="next"] .is-columns-rules .cv-area{background:var(--cv-surface);border:1px solid var(--cv-line);border-radius:13px;overflow:hidden;box-shadow:0 7px 28px var(--cv-shadow),0 2px 5px var(--cv-shadow)} [data-archbro-ui="next"] .is-columns-rules .cv-stripe{height:4px;background:var(--cv-area)} [data-archbro-ui="next"] .is-columns-rules .cv-inside{padding:15px 18px 0} [data-archbro-ui="next"] .is-columns-rules .cv-overline{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.2px;font-weight:800;color:var(--cv-faint)} [data-archbro-ui="next"] .is-columns-rules .cv-index{color:var(--cv-muted);font-size:12px;font-weight:800;letter-spacing:.2px;flex:none} [data-archbro-ui="next"] .is-columns-rules .cv-kind{margin-left:auto;background:var(--cv-surface-2);border-radius:3px;padding:3px 6px;letter-spacing:.4px;color:var(--cv-muted)} [data-archbro-ui="next"] .is-columns-rules .cv-area .cv-name{font-size:18px;font-weight:770;letter-spacing:-.4px;line-height:1.35;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-archbro-ui="next"] .is-columns-rules .cv-description{font-size:12px;line-height:1.3;color:var(--cv-muted);margin-top:4px;height:32px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} [data-archbro-ui="next"] .is-columns-rules .cv-chips{display:flex;gap:6px;margin-top:8px;min-width:0;height:28px;overflow:hidden} [data-archbro-ui="next"] .is-columns-rules .cv-chip{border:1px solid var(--cv-line);background:var(--cv-surface-2);border-radius:5px;color:var(--cv-muted);font-size:12px;padding:4px 7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%} [data-archbro-ui="next"] .is-columns-rules .cv-foot{position:absolute;left:18px;right:12px;bottom:0;height:42px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--cv-line)} [data-archbro-ui="next"] .is-columns-rules .cv-stat{font-size:12px;color:var(--cv-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-archbro-ui="next"] .is-columns-rules .cv-stat strong{font-size:12px;color:var(--cv-ink-2);margin-right:2px} [data-archbro-ui="next"] .is-columns-rules .cv-toggle{pointer-events:auto;flex:none;min-height:28px;border:0;background:transparent;color:var(--cv-focus-ink);font-size:12px;font-weight:700;padding:6px;border-radius:6px;font-family:inherit;cursor:pointer} [data-archbro-ui="next"] .is-columns-rules .cv-toggle:hover{background:var(--cv-focus-soft)} [data-archbro-ui="next"] .is-columns-rules .cv-head{display:flex;align-items:center;gap:10px;padding:0 10px 0 16px;background:var(--cv-surface)} [data-archbro-ui="next"] .is-columns-rules .cv-root-head{border-radius:13px 13px 0 0;overflow:hidden;border-bottom:1px solid var(--cv-line)} [data-archbro-ui="next"] .is-columns-rules .cv-root-head:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--cv-area)} [data-archbro-ui="next"] .is-columns-rules .cv-head .cv-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0;font-size:13px;line-height:1.15;font-weight:740;color:var(--cv-ink-2);overflow:hidden;overflow-wrap:anywhere} [data-archbro-ui="next"] .is-columns-rules .cv-root-head .cv-name{font-size:16px;font-weight:760;letter-spacing:-.3px} [data-archbro-ui="next"] .is-columns-rules .cv-meta{display:block;font-size:12px;line-height:1.2;color:var(--cv-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-archbro-ui="next"] .is-columns-rules .cv-group-head{background:var(--cv-surface-2);border-bottom:1px solid var(--cv-line);border-radius:10px 10px 0 0;padding-left:12px} [data-archbro-ui="next"] .is-columns-rules .cv-number{width:26px;height:26px;border:1px solid var(--cv-line);background:var(--cv-surface);border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:730;color:var(--cv-faint);flex:none} [data-archbro-ui="next"] .is-columns-rules .cv-leaf{display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--cv-surface);border:1px solid var(--cv-line);border-radius:8px;box-shadow:0 1px 3px var(--cv-shadow)} [data-archbro-ui="next"] .is-columns-rules .cv-glyph{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:780;background:var(--cv-type-bg);color:var(--cv-ink-2)} [data-archbro-ui="next"] .is-columns-rules [data-kind="data_store"] .cv-glyph{background:color-mix(in srgb,var(--cv-kind-data_store) 10%,var(--cv-surface))} [data-archbro-ui="next"] .is-columns-rules [data-kind="ui"] .cv-glyph{background:color-mix(in srgb,var(--cv-kind-ui) 10%,var(--cv-surface))} [data-archbro-ui="next"] .is-columns-rules [data-kind="external_service"] .cv-glyph{background:color-mix(in srgb,var(--cv-kind-external_service) 10%,var(--cv-surface))} [data-archbro-ui="next"] .is-columns-rules [data-kind="infrastructure"] .cv-glyph{background:color-mix(in srgb,var(--cv-kind-infrastructure) 10%,var(--cv-surface))} [data-archbro-ui="next"] .is-columns-rules .cv-text{flex:1;min-width:0;display:flex;flex-direction:column} [data-archbro-ui="next"] .is-columns-rules .cv-leaf .cv-name{font-size:13px;line-height:1.2;font-weight:710;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} [data-archbro-ui="next"] .is-columns-rules .cv-type{font-size:12px;color:var(--cv-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-archbro-ui="next"] .is-columns-rules .cv-change{flex:none;font-size:12px;font-weight:700;line-height:1;padding:4px 7px;border-radius:999px;color:var(--review-change-color);background:color-mix(in srgb,var(--review-change-color) 12%,var(--cv-surface));border:1px solid color-mix(in srgb,var(--review-change-color) 40%,transparent);white-space:nowrap} [data-archbro-ui="next"] .is-columns-rules .cv-overline .cv-change{margin-left:auto} [data-archbro-ui="next"] .is-columns-rules .cv-overline .cv-change+.cv-kind{margin-left:0} [data-archbro-ui="next"] .is-columns-rules .cv-node[class*="review-change-"] :is(.cv-leaf,.cv-area,.cv-head){outline:2px solid var(--review-change-color);outline-offset:-2px} [data-archbro-ui="next"] .is-columns-rules .next-graph-node.is-selected .cv-card{border:2px solid var(--cv-focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--cv-focus) 9%,transparent)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node.is-selected .cv-leaf{background:var(--cv-focus-soft)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node.is-connection-preview:not(.is-selected) .cv-card{border-color:var(--cv-focus-line)} [data-archbro-ui="next"] .is-columns-rules .next-graph-node.is-selected .cv-head{box-shadow:inset 0 0 0 2px var(--cv-focus)} [data-archbro-ui="next"] .is-columns-rules .next-graph-group-frame[data-depth="0"] rect{fill:var(--cv-frame);fill-opacity:1;stroke:var(--cv-line);stroke-width:1;rx:13} [data-archbro-ui="next"] .is-columns-rules .next-graph-group-frame:not([data-depth="0"]) rect{fill:var(--cv-surface);stroke:var(--cv-line);stroke-width:1;rx:10} [data-archbro-ui="next"] .is-columns-rules .is-semantic-overview .cv-description,[data-archbro-ui="next"] .is-columns-rules .is-semantic-overview .cv-chips,[data-archbro-ui="next"] .is-columns-rules .is-semantic-overview .cv-type{visibility:hidden} [data-archbro-ui="next"] .is-columns-rules .next-canvas-stage-caption{position:absolute;top:12px;left:18px;z-index:3;pointer-events:none;color:var(--cv-ink-2);background:var(--cv-stage);padding:8px;border-radius:8px;max-width:calc(100% - 36px)} [data-archbro-ui="next"] .is-columns-rules .next-canvas-stage-caption strong{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:760} [data-archbro-ui="next"] .is-columns-rules .next-canvas-stage-caption i{width:11px;height:11px;border-radius:50%;background:#65b6a9;border:3px solid #ddf3ef} [data-archbro-ui="next"] .is-columns-rules .next-canvas-stage-caption>span{display:block;font-size:12px;color:var(--cv-faint);margin:6px 0 0 20px} [data-archbro-ui="next"] .is-columns-rules .next-canvas-stage-caption small{display:block;font-size:12px;margin-top:4px} [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar{align-self:flex-end;margin:4px 24px;min-height:40px;padding:0;border:1px solid var(--cv-line);border-radius:8px;background:var(--cv-surface);box-shadow:0 3px 16px var(--cv-shadow);flex-wrap:nowrap} [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar button{min-height:36px;height:36px;min-width:36px;width:36px;color:var(--cv-muted)} [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar .next-progress-colour-toggle{width:auto;padding:0 10px;font-size:12px;white-space:nowrap} [data-archbro-ui="next"] .is-columns-rules .next-zoom-label{width:44px;text-align:center;color:var(--cv-ink-2);font-size:12px;font-weight:720} /* Reading details follow the same card and connection palette as the canvas. */ [data-archbro-ui="next"] .is-columns-rules .cv-heading-text{flex:1;min-width:0} [data-archbro-ui="next"] .is-columns-rules .next-panel-heading [data-inspector-clear]{width:auto;font-size:12px;padding:0 6px} [data-archbro-ui="next"] .is-columns-rules .cv-chip-count{flex:none;min-width:32px;max-width:none;text-align:center} [data-archbro-ui="next"] .is-columns-rules .next-graph-node.cv-node, [data-archbro-ui="next"] .is-columns-rules .connection-peek .next-graph-node.cv-node{opacity:1} [data-archbro-ui="next"] .is-columns-rules .next-architecture-inspector{background:var(--cv-surface);border-color:var(--cv-line);color:var(--cv-ink-2)} [data-archbro-ui="next"] .is-columns-rules .next-inspector-content{padding:24px} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-breadcrumb{font-size:11px;color:var(--cv-muted);font-weight:650} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-reading h3{margin:12px 0;font-size:24px;line-height:1.3;letter-spacing:-.5px;color:var(--cv-ink)} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-reading>p{font-size:13px;line-height:1.7;color:var(--cv-muted)} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-reading h4{font-size:13px;margin:22px 0 14px;color:var(--cv-ink-2)} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--cv-line);border-radius:10px;background:var(--cv-surface-2);margin:22px 0;overflow:hidden} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-stats>div{display:flex;flex-direction:column;align-items:center;padding:18px 4px;gap:8px;border-right:1px solid var(--cv-line)} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-stats>div:last-child{border-right:0} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-stats strong{font-size:25px;line-height:1;color:var(--cv-focus-ink)} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-stats span{font-size:11px;color:var(--cv-muted)} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-tabs{display:flex;border-bottom:1px solid var(--cv-line);margin-bottom:16px} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-tabs button{flex:1;min-width:0;padding:12px 0;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--cv-muted);font-size:11px;font-weight:700;cursor:pointer} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-tabs button[aria-pressed="true"]{color:var(--cv-focus);border-bottom-color:var(--cv-focus)} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-relationship{display:flex;align-items:flex-start;gap:8px;width:100%;padding:14px;border:1px solid var(--cv-line);border-radius:10px;background:var(--cv-surface);text-align:left;margin:8px 0;cursor:pointer} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-relationship[hidden]{display:none} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-relationship>span{flex:1;min-width:0} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-relationship strong{font-size:12px;line-height:1.6;color:var(--cv-ink-2)} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-relationship small{display:block;margin-top:4px;color:var(--cv-muted);font-size:11px;line-height:1.5} [data-archbro-ui="next"] .is-columns-rules .cv-relationship-type{font-size:9px;line-height:1.4;padding:4px 6px;border-radius:5px;background:#4778e6;color:white;max-width:100px;overflow-wrap:anywhere;flex:none} [data-archbro-ui="next"] .is-columns-rules .cv-relationship-type[data-category*="support"]{background:#4ca78d} [data-archbro-ui="next"] .is-columns-rules .cv-relationship-type[data-category*="event"]{background:#dd9a42} [data-archbro-ui="next"] .is-columns-rules .cv-relationship-type[data-category*="data"]{background:#8e75d8} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-pair{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0;width:100%;background:transparent;border:0;border-bottom:1px solid var(--cv-line);color:var(--cv-ink-2);font-size:12px;text-align:left;cursor:pointer} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-pair b{background:var(--cv-focus-soft);color:var(--cv-focus);padding:4px 7px;border-radius:4px} [data-archbro-ui="next"] .is-columns-rules .next-graph-edge-label.is-aggregate-count rect{stroke-dasharray:none;rx:7} [data-archbro-ui="next"] .is-columns-rules .next-graph-edge-label.is-incoming-count rect{stroke-dasharray:none;rx:7} /* Canvas Lab panels share the canvas palette; selection never changes sides. */ [data-archbro-ui="next"] .is-columns-rules :is(.next-architecture-navigator,.next-architecture-inspector){--ui-next-accent:var(--cv-focus);--ui-next-accent-soft:var(--cv-focus-soft);--ui-next-surface:var(--cv-surface);--ui-next-surface-muted:var(--cv-surface-2);--ui-next-line:var(--cv-line);--ui-next-ink:var(--cv-ink);--ui-next-muted:var(--cv-muted);--ui-next-focus:color-mix(in srgb,var(--cv-focus) 12%,transparent);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif} /* Current team facts use the existing reading-stat surface and tokens. */ [data-archbro-ui="next"] .is-columns-rules .cv-inspector-stats.cv-inspector-team{grid-template-columns:repeat(2,minmax(0,1fr));margin:12px 0} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-team>div{padding:12px 8px;min-width:0} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-team strong{font-size:13px;line-height:1.4;overflow-wrap:anywhere;text-align:center} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-team-owner{display:flex;align-items:center;justify-content:center;gap:6px} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-team-owner.is-unassigned{color:var(--ui-next-warning)} [data-archbro-ui="next"] .next-graph-svg[data-backend-projection] .next-graph-node-label[data-label-size="area"]{font-size:28px} [data-archbro-ui="next"] .next-graph-svg[data-backend-projection] .next-graph-node-label[data-label-size="group"]{font-size:24px} [data-archbro-ui="next"] .next-graph-svg[data-backend-projection] .next-graph-node-label[data-label-size="card"]{font-size:20px} /* Icon buttons use the shared SVG icons rather than text glyphs, so they follow the theme and look the same in every font. */ [data-archbro-ui="next"] :is(.architecture-drawer-toggle,[data-architecture-refresh],.next-graph-toolbar button,.next-panel-heading button)>.ui-icon{width:18px;height:18px} [data-archbro-ui="next"] .cv-toggle{display:inline-flex;align-items:center;gap:3px} [data-archbro-ui="next"] .cv-toggle>.ui-icon{width:13px;height:13px} /* Sidebars: one-line headings, icon rail for the collapsed navigator, tooltips instead of explanatory text. */ [data-archbro-ui="next"] .next-panel-title{display:flex;align-items:center;gap:8px;min-width:0} [data-archbro-ui="next"] .next-panel-title .ui-icon{flex:none;color:var(--ui-next-muted)} [data-archbro-ui="next"] .next-panel-title strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-archbro-ui="next"] .next-panel-heading button{display:inline-flex;align-items:center;justify-content:center} [data-archbro-ui="next"] :is(.next-architecture-navigator,.next-architecture-inspector).is-collapsed .next-panel-title{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-panel-heading{min-height:52px;padding-top:8px} [data-archbro-ui="next"] .is-columns-rules .next-panel-heading [data-inspector-clear]{width:44px;padding:0;font-size:16px} [data-archbro-ui="next"] [data-tip]{position:relative} [data-archbro-ui="next"] [data-tip]::after{content:attr(data-tip);position:absolute;z-index:60;top:calc(100% + 4px);right:0;width:max-content;max-width:240px;padding:5px 9px;border-radius:6px;background:var(--ui-next-ink);color:var(--ui-next-surface);font-size:12px;font-weight:500;line-height:1.35;text-align:left;white-space:normal;opacity:0;visibility:hidden;pointer-events:none} [data-archbro-ui="next"] [data-tip]:is(:hover,:focus-visible)::after{opacity:1;visibility:visible} [data-archbro-ui="next"] :is(.is-collapsed,.next-navigator-rail) [data-tip]::after{top:50%;right:auto;left:calc(100% + 8px);transform:translateY(-50%)} [data-archbro-ui="next"] .next-architecture-navigator.is-collapsed{overflow:visible;position:relative;z-index:35} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-navigator.is-collapsed .next-panel-heading{padding:8px 0;min-height:52px} [data-archbro-ui="next"] .next-navigator-rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 0 14px;overflow:visible} [data-archbro-ui="next"] .next-rail-divider{width:24px;height:1px;background:var(--ui-next-line)} [data-archbro-ui="next"] .next-rail-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ui-next-muted);font-size:13px;font-weight:700;cursor:pointer} [data-archbro-ui="next"] .next-rail-button:hover{background:var(--ui-next-hover);color:var(--ui-next-ink)} [data-archbro-ui="next"] .next-rail-area{color:var(--ui-next-ink);border:2px solid var(--cv-area,var(--ui-next-line));background:color-mix(in srgb,var(--cv-area,transparent) 12%,transparent);font-variant-numeric:tabular-nums} [data-archbro-ui="next"] .next-rail-area:hover{background:color-mix(in srgb,var(--cv-area,var(--ui-next-hover)) 24%,transparent)} [data-archbro-ui="next"] .next-rail-area.is-selected{background:color-mix(in srgb,var(--cv-area,var(--ui-next-accent)) 30%,transparent);box-shadow:0 0 0 2px var(--ui-next-surface-muted),0 0 0 4px var(--cv-area,var(--ui-next-accent))} [data-archbro-ui="next"] .next-rail-area.is-muted{opacity:.42} /* Many areas: the rail scrolls inside the panel. The scroller reaches 260px past the rail, transparent to the pointer, so the tooltips beside the buttons stay inside it and are not clipped; only the buttons take pointer events. */ [data-archbro-ui="next"] .next-architecture-navigator.is-collapsed .next-navigator-rail{flex:1 1 auto;align-self:flex-start;box-sizing:border-box;width:calc(100% + 260px);min-height:0;padding-right:260px;overflow-y:auto;scrollbar-width:none;pointer-events:none} [data-archbro-ui="next"] .next-architecture-navigator.is-collapsed .next-navigator-rail>*{pointer-events:auto} [data-archbro-ui="next"] .next-navigator-toggle,[data-archbro-ui="next"] .next-navigator-focus{display:inline-flex;align-items:center;justify-content:center} [data-archbro-ui="next"] .next-navigator-filter-menu summary{display:flex;align-items:center;gap:6px} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row.is-area{min-height:48px} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row.is-area .next-navigator-label{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-height:46px} [data-archbro-ui="next"] .architecture-v41-workspace .next-navigator-row.is-area .next-navigator-kind.is-count{min-width:24px;padding:1px 8px;border-radius:999px;background:var(--ui-next-hover);color:var(--ui-next-muted);font-size:12px;line-height:18px;text-align:center;font-variant-numeric:tabular-nums} [data-archbro-ui="next"] .is-columns-rules .next-inspector-content{padding:16px 18px 20px} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-reading h3{margin:6px 0 8px;font-size:18px;line-height:1.35;letter-spacing:-.2px} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-lede p{margin:0;font-size:13px;line-height:1.55;color:var(--cv-muted)} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-lede.is-clamped p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-more{min-height:28px;padding:2px 0;border:0;background:transparent;color:var(--cv-focus-ink);font-size:12px;font-weight:650;cursor:pointer} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-more:hover{text-decoration:underline} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-stats{margin:14px 0} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-stats>div{padding:10px 4px;gap:4px} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-stats strong{font-size:20px} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-team>div{padding:8px} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-reading h4{margin:14px 0 8px} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-tabs{margin-bottom:10px} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-tabs button{padding:8px 0} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-relationship{padding:10px 12px} [data-archbro-ui="next"] .is-columns-rules .cv-inspector-relationship small{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px} /* P1 view: All / P1 switch in the canvas toolbar. Cards and lines without unfinished P1 work dim in place, so the layout never moves when the view changes. */ [data-archbro-ui="next"] .next-p1-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:7px;background:var(--ui-next-surface-muted)} [data-archbro-ui="next"] .next-p1-switch .next-p1-option,[data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar .next-p1-option{display:inline-flex;align-items:center;gap:6px;width:auto;min-width:0;height:32px;min-height:32px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--ui-next-muted);font-size:12px;font-weight:600;white-space:nowrap} [data-archbro-ui="next"] .next-p1-switch .next-p1-option[aria-pressed="true"],[data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar .next-p1-option[aria-pressed="true"]{background:var(--ui-next-accent);color:var(--ui-next-on-accent)} [data-archbro-ui="next"] .next-p1-count{padding:0 6px;border-radius:999px;background:color-mix(in srgb,currentColor 16%,transparent);font-size:11px;font-variant-numeric:tabular-nums} [data-archbro-ui="next"] .is-columns-rules .next-canvas-stage-caption>.next-p1-caption{color:var(--cv-ink-2)} [data-archbro-ui="next"] .next-graph-svg.is-p1-view .next-graph-node.is-not-p1,[data-archbro-ui="next"] .is-columns-rules .next-graph-svg.is-p1-view .next-graph-node.cv-node.is-not-p1{opacity:.32;filter:saturate(.25)} [data-archbro-ui="next"] .next-graph-svg.is-p1-view .next-graph-edge:not(.is-p1){opacity:.22} [data-archbro-ui="next"] .is-columns-rules .next-graph-svg.is-p1-view .cv-node.is-p1:not(.is-selected) :is(.cv-area,.cv-leaf){border-color:var(--ui-next-accent);box-shadow:0 0 0 1px var(--ui-next-accent)} [data-archbro-ui="next"] .is-columns-rules .cv-p1{flex:none;padding:3px 7px;border-radius:999px;background:var(--ui-next-danger-bg);color:var(--ui-next-danger);font-size:12px;font-weight:700;letter-spacing:0;white-space:nowrap} [data-archbro-ui="next"] .is-columns-rules .cv-overline .cv-p1{margin-left:auto} [data-archbro-ui="next"] .is-columns-rules .cv-overline .cv-p1+.cv-kind{margin-left:0} /* Phone area list: the switch sits under the heading, areas keep their order and dim. */ @media(max-width:620px){ [data-archbro-ui="next"] .next-mobile-areas .next-p1-switch{margin:0 0 10px} [data-archbro-ui="next"] .next-mobile-areas .next-p1-option{height:36px;min-height:36px;padding:0 14px;font-size:13px;cursor:pointer} [data-archbro-ui="next"] .next-mobile-areas .next-p1-caption{display:block;margin:0 0 14px;color:var(--ui-next-muted);font-size:13px;line-height:19px} [data-archbro-ui="next"] .next-mobile-area-list>button.is-p1{border-color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-mobile-area-list>button.is-not-p1{opacity:.45} [data-archbro-ui="next"] .next-mobile-area-list>button>span:first-child>small.next-mobile-area-p1{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;background:var(--ui-next-danger-bg);color:var(--ui-next-danger);font-weight:700} [data-archbro-ui="next"] .next-mobile-area-list>button[class*="review-change-"]{border:1px dashed var(--review-change-color)} [data-archbro-ui="next"] .next-mobile-area-list>button>span:first-child>small.next-mobile-area-change{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--review-change-color) 12%,transparent);color:var(--review-change-color);font-weight:700} } @media (prefers-reduced-motion:no-preference){ [data-archbro-ui="next"] .next-mobile-area-list>button, [data-archbro-ui="next"] .next-graph-svg .next-graph-node,[data-archbro-ui="next"] .next-graph-svg .next-graph-edge{transition:opacity .18s ease,filter .18s ease} } /* The user's open Ask proposal, drawn over the accepted map until it is accepted or discarded. */ [data-archbro-ui="next"] .next-architecture-graph.has-chat-proposal{position:relative} [data-archbro-ui="next"] .next-chat-proposal-bar{--chat-proposal-color:var(--ui-next-success);position:absolute;z-index:7;top:12px;left:18px;right:18px;display:flex;align-items:center;gap:12px;min-width:0;padding:7px 8px 7px 12px;border:1px solid color-mix(in srgb,var(--chat-proposal-color) 42%,var(--ui-next-line));border-radius:10px;background:var(--ui-next-surface);color:var(--ui-next-ink);box-shadow:0 6px 18px color-mix(in srgb,var(--ui-next-ink) 8%,transparent)} [data-archbro-ui="next"] .next-chat-proposal-bar.is-error{--chat-proposal-color:var(--ui-next-danger)} [data-archbro-ui="next"] .next-chat-proposal-bar.is-draft{--chat-proposal-color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-chat-proposal-bar.is-draft.is-stale{--chat-proposal-color:var(--ui-next-warning)} /* The editor opens beside the bar, never over its Save button. */ @media(min-width:761px){[data-archbro-ui="next"] .next-architecture-layout.is-inspector-drawer-open:not(.is-inspector-on-left)>.has-chat-proposal .next-chat-proposal-bar{right:calc(min(310px,85vw) + 12px)}} [data-archbro-ui="next"] .next-chat-proposal-state{display:inline-flex;align-items:center;gap:7px;flex:none;font-size:12px;font-weight:760;color:var(--chat-proposal-color);white-space:nowrap} [data-archbro-ui="next"] .next-chat-proposal-state i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 20%,transparent)} [data-archbro-ui="next"] .next-chat-proposal-bar.is-loading .next-chat-proposal-state i{animation:next-chat-proposal-pulse 1.2s ease-in-out infinite} [data-archbro-ui="next"] .next-chat-proposal-copy{display:grid;gap:1px;flex:1;min-width:0} [data-archbro-ui="next"] .next-chat-proposal-copy strong{font-size:13px;font-weight:720;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-archbro-ui="next"] .next-chat-proposal-copy small{font-size:12px;color:var(--ui-next-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-archbro-ui="next"] .next-chat-proposal-actions{display:flex;align-items:center;gap:6px;flex:none} [data-archbro-ui="next"] .next-chat-proposal-actions button{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 12px;border:1px solid var(--ui-next-line);border-radius:7px;background:var(--ui-next-surface);color:var(--ui-next-ink);font:inherit;font-size:13px;font-weight:650;white-space:nowrap;cursor:pointer} [data-archbro-ui="next"] .next-chat-proposal-actions button.is-primary{border-color:var(--ui-next-accent);background:var(--ui-next-accent);color:var(--ui-next-on-accent)} [data-archbro-ui="next"] .next-chat-proposal-actions button.is-quiet{border-color:transparent;color:var(--ui-next-muted);padding:0 8px} [data-archbro-ui="next"] .next-chat-proposal-actions button.is-quiet .ui-icon{order:2} [data-archbro-ui="next"] .next-chat-proposal-actions button:disabled{opacity:.6;cursor:progress} [data-archbro-ui="next"] .next-chat-proposal-actions button:focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:2px} [data-archbro-ui="next"] .is-columns-rules .has-chat-proposal .next-canvas-stage-caption{top:72px} [data-archbro-ui="next"] .is-columns-rules .cv-node.review-change-added :is(.cv-leaf,.cv-area,.cv-head){outline-style:dashed} [data-archbro-ui="next"] .is-columns-rules .cv-node.review-change-removed :is(.cv-leaf,.cv-area,.cv-head){outline-style:dashed;opacity:.72} [data-archbro-ui="next"] .is-columns-rules .cv-node.review-change-removed .cv-name{text-decoration:line-through} /* Draft and Ask previews: changed cards, areas holding changes and changed routes carry the change colour; the rest steps back. */ [data-archbro-ui="next"] .is-columns-rules .cv-node[class*="review-change-"] :is(.cv-leaf,.cv-area,.cv-head){outline-width:2.5px;outline-offset:-1px;background:color-mix(in srgb,var(--review-change-color) 10%,var(--cv-surface));box-shadow:0 0 0 5px color-mix(in srgb,var(--review-change-color) 18%,transparent),0 7px 24px var(--cv-shadow)} [data-archbro-ui="next"] .is-columns-rules .cv-node[class*="review-change-"] .cv-stripe{height:5px;background:var(--review-change-color)} [data-archbro-ui="next"] .is-columns-rules .cv-node[class*="review-change-"] .cv-change{display:inline-flex;align-items:center;gap:3px;padding:4px 8px;background:var(--review-change-color);border-color:transparent;color:var(--cv-surface)} [data-archbro-ui="next"] .is-columns-rules .cv-change b{font-weight:900} [data-archbro-ui="next"] .is-columns-rules .cv-node.has-changes-inside{--review-change-color:var(--ui-next-warning)} [data-archbro-ui="next"] .is-columns-rules .cv-node.has-changes-inside:not([class*="review-change-"]) :is(.cv-area,.cv-head){outline:2px dashed color-mix(in srgb,var(--review-change-color) 75%,transparent);outline-offset:-1px} [data-archbro-ui="next"] .is-columns-rules .has-change-overlay .cv-node:not([class*="review-change-"]):not(.has-changes-inside):not(.is-selected):not(:hover):not(:focus-visible) .cv-card-host{opacity:.5} [data-archbro-ui="next"] .is-columns-rules .has-change-overlay :is(.next-graph-edge-line,.next-graph-arrow,.next-graph-junction){opacity:.4} [data-archbro-ui="next"] .is-columns-rules .has-change-overlay .next-graph-edge-label:not([data-review-change]){opacity:.55} [data-archbro-ui="next"] .is-columns-rules .has-change-overlay [data-review-change] .next-graph-edge-line{opacity:1;stroke:var(--review-change-color);stroke-width:3.2} [data-archbro-ui="next"] .is-columns-rules .has-change-overlay .next-graph-edge[class*="review-change-"]{color:var(--review-change-color)} [data-archbro-ui="next"] .is-columns-rules .has-change-overlay .next-graph-edge[class*="review-change-"] :is(.next-graph-arrow,.next-graph-junction){opacity:1} [data-archbro-ui="next"] .is-columns-rules .has-change-overlay .next-graph-fan-in[class*="review-change-"] g:not([data-review-change])>.next-graph-edge-line{stroke:var(--cv-edge)} [data-archbro-ui="next"] .is-columns-rules .has-change-overlay [data-review-change="removed"] .next-graph-edge-line{stroke-dasharray:7 5} [data-archbro-ui="next"] .next-change-legend{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 12px;color:var(--ui-next-muted);font-size:12px} [data-archbro-ui="next"] .next-change-legend>span{display:inline-flex;align-items:center;gap:5px} [data-archbro-ui="next"] .next-change-legend i{width:10px;height:10px;border-radius:3px;border:2px solid var(--legend);background:color-mix(in srgb,var(--legend) 18%,transparent)} [data-archbro-ui="next"] .next-change-legend .is-added{--legend:var(--ui-next-success)} [data-archbro-ui="next"] .next-change-legend .is-modified{--legend:var(--ui-next-warning)} [data-archbro-ui="next"] .next-change-legend .is-removed{--legend:var(--ui-next-danger)} @media(max-width:760px){[data-archbro-ui="next"] .next-change-legend{display:none}} @keyframes next-chat-proposal-pulse{50%{opacity:.35}} @media(max-width:760px){ [data-archbro-ui="next"] .next-chat-proposal-bar{flex-wrap:wrap;gap:8px} [data-archbro-ui="next"] .next-chat-proposal-copy{flex-basis:calc(100% - 120px)} [data-archbro-ui="next"] .next-chat-proposal-actions{flex:1 1 100%;justify-content:flex-end} } @media(max-width:620px){ [data-archbro-ui="next"] .has-mobile-areas .next-chat-proposal-bar{position:static;margin:14px 14px 0} } @media(prefers-reduced-motion:reduce){ [data-archbro-ui="next"] .next-chat-proposal-bar.is-loading .next-chat-proposal-state i{animation:none} } /* ---- Diagram styles (diagram-styles.js) ------------------------------------- Galaxy: Areas as glowing clusters on a ring, lines in their two Areas' colours, Area lines flowing. Atlas: a grid of Area boxes joined by one weighted connector per pair of Areas. Both reuse the column palette for cards, focus and badges. */ [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks){--gx-0:#3b82f6;--gx-1:#22b96b;--gx-2:#f26d5b;--gx-3:#8b5cf6;--gx-4:#d99a0b;--gx-5:#0ea5b7;--gx-ink:var(--cv-ink,#172235);--gx-muted:var(--cv-muted,#526178);--gx-dot:var(--cv-surface,#fff);--gx-text:var(--diagram-text-scale,1)} [data-archbro-ui="next"][data-theme="dark"] :is(.is-diagram-galaxy,.is-diagram-stacks),[data-theme="dark"] [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks){--gx-0:#6ea8ff;--gx-1:#4fd79a;--gx-2:#ff9686;--gx-3:#b197ff;--gx-4:#f2c14e;--gx-5:#45c9d8} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) [data-area="0"]{--gx:var(--gx-0)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) [data-area="1"]{--gx:var(--gx-1)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) [data-area="2"]{--gx:var(--gx-2)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) [data-area="3"]{--gx:var(--gx-3)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) [data-area="4"]{--gx:var(--gx-4)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) [data-area="5"]{--gx:var(--gx-5)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) .gx-stop{stop-color:var(--gx)} [data-archbro-ui="next"] .is-diagram-galaxy .gx-backdrop{pointer-events:none} [data-archbro-ui="next"] .is-diagram-galaxy .gx-backdrop[data-area="0"] .gx-halo{fill:url(#gx-halo-0)} [data-archbro-ui="next"] .is-diagram-galaxy .gx-backdrop[data-area="1"] .gx-halo{fill:url(#gx-halo-1)} [data-archbro-ui="next"] .is-diagram-galaxy .gx-backdrop[data-area="2"] .gx-halo{fill:url(#gx-halo-2)} [data-archbro-ui="next"] .is-diagram-galaxy .gx-backdrop[data-area="3"] .gx-halo{fill:url(#gx-halo-3)} [data-archbro-ui="next"] .is-diagram-galaxy .gx-backdrop[data-area="4"] .gx-halo{fill:url(#gx-halo-4)} [data-archbro-ui="next"] .is-diagram-galaxy .gx-backdrop[data-area="5"] .gx-halo{fill:url(#gx-halo-5)} [data-archbro-ui="next"] .is-diagram-galaxy .gx-ring{fill:none;stroke:var(--gx);stroke-opacity:.38;stroke-width:1.2;stroke-dasharray:2 6;stroke-linecap:round} /* Lines: the steel route stays for hit-testing and badges; the gradient stroke is what shows. */ [data-archbro-ui="next"] .is-diagram-galaxy .next-graph-edge-line,[data-archbro-ui="next"] .is-diagram-galaxy .is-connection-preview .next-graph-edge-line{stroke:transparent} [data-archbro-ui="next"] .is-diagram-galaxy .next-graph-edge-casing{stroke:var(--cv-stage);stroke-width:3.5;stroke-opacity:.8} [data-archbro-ui="next"] .is-diagram-galaxy .gx-stroke{fill:none;stroke-width:1.5;stroke-opacity:.62;stroke-linecap:round;pointer-events:none} [data-archbro-ui="next"] .is-diagram-galaxy .is-area-pair .gx-stroke{stroke-width:2.4;stroke-opacity:.78} [data-archbro-ui="next"] .is-diagram-galaxy .gx-flow{fill:none;stroke:var(--cv-surface);stroke-width:1.4;stroke-opacity:.85;stroke-dasharray:5 70;stroke-linecap:round;pointer-events:none} [data-archbro-ui="next"] .is-diagram-galaxy .is-connection-preview .gx-stroke{stroke-opacity:1;stroke-width:2.8} [data-archbro-ui="next"] .is-diagram-galaxy .next-graph-edge.is-selected .gx-stroke{stroke-opacity:1;stroke-width:3.4} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) .next-graph-fan-in .next-graph-arrow{color:var(--gx-muted)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) .next-graph-fan-in[data-to-area="0"] .next-graph-arrow{color:var(--gx-0)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) .next-graph-fan-in[data-to-area="1"] .next-graph-arrow{color:var(--gx-1)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) .next-graph-fan-in[data-to-area="2"] .next-graph-arrow{color:var(--gx-2)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) .next-graph-fan-in[data-to-area="3"] .next-graph-arrow{color:var(--gx-3)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) .next-graph-fan-in[data-to-area="4"] .next-graph-arrow{color:var(--gx-4)} [data-archbro-ui="next"] :is(.is-diagram-galaxy,.is-diagram-stacks) .next-graph-fan-in[data-to-area="5"] .next-graph-arrow{color:var(--gx-5)} /* Card lists: column cards in Areas placed like Galaxy. Bands between Areas and card lines take their Areas' colours. */ [data-archbro-ui="next"] .is-diagram-stacks .next-graph-edge-line,[data-archbro-ui="next"] .is-diagram-stacks .is-connection-preview .next-graph-edge-line{stroke:transparent} [data-archbro-ui="next"] .is-diagram-stacks .next-graph-edge-casing{stroke:var(--cv-stage);stroke-width:4;stroke-opacity:.9} [data-archbro-ui="next"] .is-diagram-stacks .gx-stroke{fill:none;stroke-width:2.2;stroke-opacity:.95;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} [data-archbro-ui="next"] .is-diagram-stacks .is-area-pair .gx-stroke{stroke-opacity:.72} [data-archbro-ui="next"] .is-diagram-stacks .is-area-pair[data-weight="1"] .gx-stroke{stroke-width:2.5} [data-archbro-ui="next"] .is-diagram-stacks .is-area-pair[data-weight="2"] .gx-stroke{stroke-width:4} [data-archbro-ui="next"] .is-diagram-stacks .is-area-pair[data-weight="3"] .gx-stroke{stroke-width:5.5} [data-archbro-ui="next"] .is-diagram-stacks .is-area-pair[data-weight="4"] .gx-stroke{stroke-width:7.5} [data-archbro-ui="next"] .is-diagram-stacks .is-area-pair[data-weight="5"] .gx-stroke{stroke-width:10} [data-archbro-ui="next"] .is-diagram-stacks .is-area-pair .next-graph-edge-casing{stroke-width:12} [data-archbro-ui="next"] .is-diagram-stacks .is-area-pair.is-connection-preview .gx-stroke,[data-archbro-ui="next"] .is-diagram-stacks .next-graph-edge.is-selected .gx-stroke{stroke-opacity:1} [data-archbro-ui="next"] .is-diagram-stacks .is-merge .gx-stroke{stroke-width:2.4} [data-archbro-ui="next"] .is-diagram-stacks [data-hub]:not([data-hub-primary]):not(.is-connection-preview){display:none} [data-archbro-ui="next"] .is-columns-rules .is-diagram-stacks.connection-peek .next-graph-node.cv-node:not(.is-root-group):not(.is-connection-preview):not(.is-selected){opacity:.38} [data-archbro-ui="next"] .is-diagram-stacks .cv-relation{color:var(--cv-ink);font-weight:600} /* Cores, dots and their names */ [data-archbro-ui="next"] .is-diagram-galaxy .gx-node{cursor:pointer} [data-archbro-ui="next"] .is-diagram-galaxy .gx-node:focus{outline:none} [data-archbro-ui="next"] .is-diagram-galaxy .gx-core-glow{fill:var(--gx);fill-opacity:.12} [data-archbro-ui="next"] .is-diagram-galaxy .gx-core{fill:color-mix(in srgb,var(--gx) 18%,var(--cv-surface));stroke:var(--gx);stroke-width:2.2} [data-archbro-ui="next"] .is-diagram-galaxy .is-gx-area .gx-core{fill:color-mix(in srgb,var(--gx) 12%,var(--cv-surface));stroke-width:2.4} [data-archbro-ui="next"] .is-diagram-galaxy .is-gx-area .gx-node text,[data-archbro-ui="next"] .is-diagram-galaxy .is-gx-area text{stroke:none} [data-archbro-ui="next"] .is-diagram-galaxy .gx-core-index{fill:var(--gx);font-size:13px;font-weight:800;pointer-events:none} [data-archbro-ui="next"] .is-diagram-galaxy .gx-node text{paint-order:stroke;stroke:var(--cv-stage);stroke-width:3px;stroke-linejoin:round} [data-archbro-ui="next"] .is-diagram-galaxy .gx-area-name{fill:var(--gx-ink);font-size:calc(15px * var(--gx-planet-text,var(--gx-text)));font-weight:760;letter-spacing:-.2px} [data-archbro-ui="next"] .is-diagram-galaxy .gx-area-name.is-open{font-size:calc(15px * var(--gx-area-text,var(--gx-text)))} [data-archbro-ui="next"] .is-diagram-galaxy .gx-area-meta{fill:var(--gx-muted);font-size:.8em;font-weight:600;letter-spacing:0} [data-archbro-ui="next"] .is-diagram-galaxy .gx-dot-glow{fill:var(--gx);fill-opacity:.14} [data-archbro-ui="next"] .is-diagram-galaxy .gx-dot{fill:var(--gx-dot);stroke:var(--gx);stroke-width:2} [data-archbro-ui="next"] .is-diagram-galaxy .gx-icon{fill:none;stroke:var(--gx);stroke-width:1.4;stroke-linejoin:round;pointer-events:none} [data-archbro-ui="next"] .is-diagram-galaxy .gx-leaf-name{fill:var(--gx-ink);font-size:calc(12.5px * var(--gx-leaf-text,var(--gx-text)));font-weight:640;transition:opacity .15s ease} [data-archbro-ui="next"] .is-diagram-galaxy .gx-leaf-name.is-yielded{opacity:0} [data-archbro-ui="next"] .is-diagram-galaxy .gx-node:is(:hover,:focus-visible,.is-selected,.is-connection-preview) .gx-leaf-name.is-yielded{opacity:1} [data-archbro-ui="next"] .is-diagram-galaxy .gx-arc{fill:none;stroke:var(--gx);stroke-opacity:.5;stroke-width:3;stroke-linecap:round} [data-archbro-ui="next"] .is-diagram-galaxy .gx-arc-hit{fill:none;stroke:transparent;stroke-width:22;pointer-events:stroke} [data-archbro-ui="next"] .is-diagram-galaxy .gx-arc-guide{fill:none;stroke:none} [data-archbro-ui="next"] .is-diagram-galaxy .gx-group-name{fill:var(--gx);font-size:calc(11px * var(--gx-text));font-weight:760;letter-spacing:.3px} [data-archbro-ui="next"] .is-diagram-galaxy .gx-toggle{cursor:pointer} [data-archbro-ui="next"] .is-diagram-galaxy .gx-toggle circle{fill:var(--cv-surface);stroke:var(--gx);stroke-width:1.6} [data-archbro-ui="next"] .is-diagram-galaxy .gx-toggle path{fill:none;stroke:var(--gx);stroke-width:2;stroke-linecap:round} [data-archbro-ui="next"] .is-diagram-galaxy .gx-toggle:hover circle,[data-archbro-ui="next"] .is-diagram-galaxy .gx-toggle:focus-visible circle{fill:var(--gx)} [data-archbro-ui="next"] .is-diagram-galaxy .gx-toggle:hover path,[data-archbro-ui="next"] .is-diagram-galaxy .gx-toggle:focus-visible path{stroke:var(--cv-surface)} [data-archbro-ui="next"] .is-diagram-galaxy .gx-toggle:focus{outline:none} [data-archbro-ui="next"] .is-diagram-galaxy .gx-node.is-selected :is(.gx-core,.gx-dot){stroke:var(--cv-focus);stroke-width:3.2} [data-archbro-ui="next"] .is-diagram-galaxy .gx-node.is-selected :is(.gx-core-glow,.gx-dot-glow){fill:var(--cv-focus);fill-opacity:.24} [data-archbro-ui="next"] .is-diagram-galaxy .gx-node.is-selected .gx-arc{stroke:var(--cv-focus);stroke-opacity:1;stroke-width:4} [data-archbro-ui="next"] .is-diagram-galaxy .gx-node.is-connection-preview:not(.is-selected) :is(.gx-core,.gx-dot){stroke-width:3} [data-archbro-ui="next"] .is-diagram-galaxy .gx-node:focus-visible :is(.gx-core,.gx-dot){stroke:var(--cv-focus);stroke-width:3} [data-archbro-ui="next"] .is-diagram-galaxy.connection-peek .gx-node:not(.is-connection-preview){opacity:.32} [data-archbro-ui="next"] .is-diagram-galaxy.connection-peek .gx-backdrop{opacity:.5} [data-archbro-ui="next"] .is-diagram-galaxy .gx-node.is-dimmed{opacity:.3} [data-archbro-ui="next"] .is-diagram-galaxy .gx-change{fill:var(--review-change-color);font-size:12px;font-weight:800} [data-archbro-ui="next"] .is-diagram-galaxy .gx-node[class*="review-change-"] :is(.gx-core,.gx-dot){stroke:var(--review-change-color);stroke-width:3} [data-archbro-ui="next"] .is-diagram-galaxy .gx-change-ring{fill:none;stroke:var(--review-change-color);stroke-width:2;stroke-dasharray:3 3} [data-archbro-ui="next"] .is-diagram-galaxy .gx-node.has-changes-inside{--review-change-color:var(--ui-next-warning)} [data-archbro-ui="next"] .is-diagram-galaxy.is-p1-view .gx-node.is-not-p1{opacity:.3} /* Upstream/downstream trace: only the walked lines stay, in the trace colour, fainter with each step; light pulses run caller -> callee. */ [data-archbro-ui="next"] .is-columns-rules{--reach-up:#7a52d6;--reach-up-soft:#efe8fd;--reach-down:#178a5f;--reach-down-soft:#e2f5ec} [data-theme="dark"] [data-archbro-ui="next"] .is-columns-rules,[data-archbro-ui="next"][data-theme="dark"] .is-columns-rules{--reach-up:#b49bff;--reach-up-soft:#2b2547;--reach-down:#5cd6a6;--reach-down-soft:#16352a} [data-archbro-ui="next"] .is-diagram-galaxy.is-reach-up{--gx-reach:var(--reach-up)} [data-archbro-ui="next"] .is-diagram-galaxy.is-reach-down{--gx-reach:var(--reach-down)} [data-archbro-ui="next"] .is-diagram-galaxy.is-reach .next-graph-fan-in.is-area-pair{opacity:.1} [data-archbro-ui="next"] .is-diagram-galaxy.is-reach .next-graph-fan-in:not(.is-area-pair):not(.is-connection-preview), [data-archbro-ui="next"] .is-diagram-galaxy.is-reach .next-graph-fan-in:not(.is-area-pair) [data-part-members]:not(.is-connection-preview){display:none} [data-archbro-ui="next"] .is-diagram-galaxy.is-reach .next-graph-edge-label{display:none} [data-archbro-ui="next"] .is-diagram-galaxy.is-reach [data-reach-hop].is-connection-preview .gx-stroke{stroke:var(--gx-reach);stroke-opacity:1;stroke-width:3} [data-archbro-ui="next"] .is-diagram-galaxy.is-reach [data-reach-hop="2"].is-connection-preview{opacity:.62} [data-archbro-ui="next"] .is-diagram-galaxy.is-reach [data-reach-hop="3"].is-connection-preview{opacity:.42} [data-archbro-ui="next"] .is-diagram-galaxy.is-reach .next-graph-fan-in.is-connection-preview:not(.is-area-pair) .next-graph-arrow{color:var(--gx-reach)} [data-archbro-ui="next"] .is-diagram-galaxy .gx-reach-pulse{display:none;fill:none;stroke:var(--cv-surface);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:6 26;pointer-events:none} [data-archbro-ui="next"] .is-diagram-galaxy.is-reach .is-connection-preview>.gx-reach-pulse{display:inline} [data-archbro-ui="next"] .is-diagram-galaxy .gx-reach-tags{pointer-events:none} [data-archbro-ui="next"] .is-diagram-galaxy .gx-reach-tag rect{fill:var(--gx-reach)} [data-archbro-ui="next"] .is-diagram-galaxy .gx-reach-tag text{fill:var(--cv-surface);font-size:11px;font-weight:700} [data-archbro-ui="next"] .is-diagram-galaxy .gx-reach-tag.is-origin rect{fill:var(--gx-ink)} [data-archbro-ui="next"] .is-columns-rules .cv-reach{margin:22px 0 0;display:flex;flex-direction:column;gap:10px} [data-archbro-ui="next"] .is-columns-rules .cv-reach h4{margin:0} [data-archbro-ui="next"] .is-columns-rules .cv-reach-directions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} [data-archbro-ui="next"] .is-columns-rules .cv-reach-direction{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:9px 10px;border:1px solid var(--cv-line);border-radius:10px;background:var(--cv-surface);color:var(--cv-ink-2);text-align:left;cursor:pointer} [data-archbro-ui="next"] .is-columns-rules .cv-reach-direction strong{max-width:100%;overflow:hidden;font-size:13px;font-weight:700;white-space:nowrap;text-overflow:ellipsis} [data-archbro-ui="next"] .is-columns-rules .cv-reach-direction small{font-size:11px;color:var(--cv-muted)} [data-archbro-ui="next"] .is-columns-rules .cv-reach-direction[data-reach-direction="up"][aria-pressed="true"]{border-color:var(--reach-up);background:var(--reach-up-soft);color:var(--reach-up)} [data-archbro-ui="next"] .is-columns-rules .cv-reach-direction[data-reach-direction="down"][aria-pressed="true"]{border-color:var(--reach-down);background:var(--reach-down-soft);color:var(--reach-down)} [data-archbro-ui="next"] .is-columns-rules .cv-reach-direction[aria-pressed="true"] small{color:inherit} [data-archbro-ui="next"] .is-columns-rules .cv-reach-depth{display:flex;align-items:center;gap:10px} [data-archbro-ui="next"] .is-columns-rules .cv-reach-depth>small{flex:none;font-size:11px;color:var(--cv-muted)} [data-archbro-ui="next"] .is-columns-rules .cv-reach-depth>div{display:flex;flex:1;gap:2px;padding:2px;border-radius:8px;background:var(--cv-surface-2);border:1px solid var(--cv-line)} [data-archbro-ui="next"] .is-columns-rules .cv-reach-depth button{flex:1;min-width:0;padding:5px 2px;border:0;border-radius:6px;background:transparent;color:var(--cv-muted);font-size:12px;cursor:pointer} [data-archbro-ui="next"] .is-columns-rules .cv-reach-depth button[aria-pressed="true"]{background:var(--cv-surface);color:var(--cv-ink);font-weight:700;box-shadow:0 0 0 1px var(--cv-line)} [data-archbro-ui="next"] .is-columns-rules .cv-reach-summary{margin:0;font-size:12px;line-height:1.6;color:var(--cv-ink-2);font-variant-numeric:tabular-nums} [data-archbro-ui="next"] .is-columns-rules .cv-reach-summary small{display:block;color:var(--cv-muted)} [data-archbro-ui="next"] .is-columns-rules .cv-reach-list{display:flex;flex-direction:column;gap:3px;margin:0;padding:0;list-style:none;max-height:220px;overflow:auto;font-size:12px;color:var(--cv-ink-2)} [data-archbro-ui="next"] .is-columns-rules .cv-reach-list li{display:flex;gap:8px;align-items:baseline} [data-archbro-ui="next"] .is-columns-rules .cv-reach-list span{flex:none;min-width:3.4em;font-size:11px;font-weight:700;color:var(--cv-muted)} [data-archbro-ui="next"] .is-columns-rules .cv-reach.is-up .cv-reach-list span{color:var(--reach-up)} [data-archbro-ui="next"] .is-columns-rules .cv-reach.is-down .cv-reach-list span{color:var(--reach-down)} [data-archbro-ui="next"] .is-columns-rules .cv-reach-hint{margin:0;padding-top:8px;border-top:1px solid var(--cv-line);font-size:11px;color:var(--cv-muted)} @media (prefers-reduced-motion:no-preference){ [data-archbro-ui="next"] .is-diagram-galaxy .gx-flow{animation:gx-flow 3.2s linear infinite} [data-archbro-ui="next"] .is-diagram-galaxy .gx-core-glow{animation:gx-breathe 4.8s ease-in-out infinite} [data-archbro-ui="next"] .is-diagram-galaxy .gx-reach-pulse{animation:gx-reach 1.1s linear infinite} [data-archbro-ui="next"] .is-diagram-galaxy .gx-reach-pulse.is-back{animation-direction:reverse} } @media(prefers-reduced-motion:reduce){[data-archbro-ui="next"] .is-diagram-galaxy :is(.gx-flow,.gx-reach-pulse){display:none!important}} @keyframes gx-flow{to{stroke-dashoffset:-75}} @keyframes gx-reach{to{stroke-dashoffset:-32}} @keyframes gx-breathe{50%{fill-opacity:.26}} /* Atlas: weighted connectors between Area boxes; card lines on demand. */ [data-archbro-ui="next"] .is-diagram-atlas .next-graph-fan-in.is-area-pair .next-graph-edge-line{stroke:color-mix(in srgb,var(--cv-edge) 85%,var(--cv-surface));stroke-linecap:round;stroke-dasharray:none} [data-archbro-ui="next"] .is-diagram-atlas .next-graph-fan-in.is-area-pair.is-arch .next-graph-edge-line{stroke-dasharray:8 6} [data-archbro-ui="next"] .is-diagram-atlas .next-graph-fan-in.is-area-pair[data-weight="1"] .next-graph-edge-line{stroke-width:2} [data-archbro-ui="next"] .is-diagram-atlas .next-graph-fan-in.is-area-pair[data-weight="2"] .next-graph-edge-line{stroke-width:3.2} [data-archbro-ui="next"] .is-diagram-atlas .next-graph-fan-in.is-area-pair[data-weight="3"] .next-graph-edge-line{stroke-width:4.6} [data-archbro-ui="next"] .is-diagram-atlas .next-graph-fan-in.is-area-pair[data-weight="4"] .next-graph-edge-line{stroke-width:6} [data-archbro-ui="next"] .is-diagram-atlas .next-graph-fan-in.is-area-pair[data-weight="5"] .next-graph-edge-line{stroke-width:7.5} [data-archbro-ui="next"] .is-diagram-atlas .next-graph-fan-in.is-area-pair .next-graph-edge-casing{stroke-width:10} [data-archbro-ui="next"] .is-diagram-atlas .next-graph-fan-in.is-area-pair.is-connection-preview .next-graph-edge-line{stroke:var(--cv-focus-line)} [data-archbro-ui="next"] .is-diagram-atlas .next-graph-fan-in.is-merge .next-graph-edge-line{stroke-width:1.8} [data-archbro-ui="next"] .is-diagram-atlas .next-graph-edge-label.is-aggregate-count rect{stroke-dasharray:none;rx:9} /* View menu trigger: a drawn chevron that turns when the menu is open. */ [data-archbro-ui="next"] .architecture-view-button-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-archbro-ui="next"] .architecture-view-chevron{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;margin-left:-2px;color:var(--ui-next-muted)} [data-archbro-ui="next"] .architecture-view-chevron .ui-icon{width:14px;height:14px;stroke-width:2} [data-archbro-ui="next"] .architecture-view-menu[open] .architecture-view-chevron{transform:rotate(180deg);color:var(--ui-next-ink)} @media (prefers-reduced-motion:no-preference){[data-archbro-ui="next"] .architecture-view-chevron{transition:transform .16s ease}} /* Diagram style: three pictured choices in one row. */ [data-archbro-ui="next"] .architecture-style-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:2px 2px 0} [data-archbro-ui="next"] .architecture-style-options>button{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:62px;padding:8px 4px 7px;border:1px solid var(--ui-next-line);border-radius:8px;background:var(--ui-next-surface);color:var(--ui-next-muted);font:inherit;font-size:12px;font-weight:650;line-height:16px;cursor:pointer} [data-archbro-ui="next"] .architecture-style-options>button:hover{background:var(--ui-next-hover);color:var(--ui-next-ink)} [data-archbro-ui="next"] .architecture-style-options>button[aria-checked="true"]{border-color:var(--ui-next-accent);background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} [data-archbro-ui="next"] .architecture-style-options>button:focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:2px} [data-archbro-ui="next"] .architecture-style-options svg{flex:none} [data-archbro-ui="next"] .architecture-style-hint{display:block;padding:4px 4px 2px;color:var(--ui-next-muted);font-size:12px;line-height:16px} /* One-time tip that the diagram has several styles. Top right of the canvas, under the view menu. */ [data-archbro-ui="next"] .architecture-style-tip{position:absolute;top:12px;right:16px;z-index:6;width:min(300px,calc(100% - 32px));padding:14px 14px 12px;border:1px solid var(--ui-next-line);border-radius:12px;background:var(--ui-next-surface);color:var(--ui-next-ink);box-shadow:0 12px 32px rgb(15 23 42 / .18)} [data-archbro-ui="next"] .architecture-style-tip strong{display:block;font-size:14px;line-height:20px;font-weight:720} [data-archbro-ui="next"] .architecture-style-tip p{margin:4px 0 10px;font-size:12px;line-height:18px;color:var(--ui-next-muted)} [data-archbro-ui="next"] .architecture-style-tip-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} [data-archbro-ui="next"] .architecture-style-tip-options>button,[data-archbro-ui="next"] .architecture-style-tip-close{min-height:34px;padding:0 8px;border:1px solid var(--ui-next-line);border-radius:8px;background:var(--ui-next-surface);color:var(--ui-next-ink);font:inherit;font-size:12px;font-weight:650;cursor:pointer} [data-archbro-ui="next"] .architecture-style-tip-options>button:hover,[data-archbro-ui="next"] .architecture-style-tip-close:hover{background:var(--ui-next-hover)} [data-archbro-ui="next"] .architecture-style-tip-options>button[aria-pressed="true"]{border-color:var(--ui-next-accent);background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} [data-archbro-ui="next"] .architecture-style-tip-close{display:block;margin:10px 0 0 auto;border-color:transparent;background:var(--ui-next-accent);color:var(--ui-next-on-accent,#fff)} [data-archbro-ui="next"] .architecture-style-tip-close:hover{background:color-mix(in srgb,var(--ui-next-accent) 86%,#000)} [data-archbro-ui="next"] .architecture-style-tip button:focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:2px} /* Chips on the canvas edge name a selection's partners the camera cannot show. */ [data-archbro-ui="next"] .canvas-offscreen-partners{position:absolute;inset:0;z-index:3;pointer-events:none} [data-archbro-ui="next"] .canvas-offscreen-chip{position:absolute;left:-9999px;top:0;display:inline-flex;align-items:center;gap:6px;max-width:300px;padding:5px 10px 5px 8px;border:1px solid color-mix(in srgb,var(--ui-next-accent) 45%,var(--ui-next-line));border-radius:999px;background:var(--ui-next-surface);color:var(--ui-next-text);box-shadow:0 2px 10px rgb(15 23 42 / 14%);font:600 12px/1.2 inherit;white-space:nowrap;cursor:pointer;pointer-events:auto} [data-archbro-ui="next"] .canvas-offscreen-chip span{max-width:160px;overflow:hidden;text-overflow:ellipsis} [data-archbro-ui="next"] .canvas-offscreen-chip small{color:var(--ui-next-muted);font-weight:700;font-size:12px} [data-archbro-ui="next"] .canvas-offscreen-chip:hover,[data-archbro-ui="next"] .canvas-offscreen-chip:focus-visible{border-color:var(--ui-next-accent);background:color-mix(in srgb,var(--ui-next-accent) 10%,var(--ui-next-surface))} [data-archbro-ui="next"] .canvas-offscreen-arrow{flex:none;color:var(--ui-next-accent);transition:transform .15s ease} [data-archbro-ui="next"] .canvas-offscreen-dot{flex:none;width:10px;height:10px;border-radius:50%;border:2px solid var(--chip-dot,var(--ui-next-accent));background:color-mix(in srgb,var(--chip-dot,var(--ui-next-accent)) 22%,var(--ui-next-surface))} /* A partner that comes into view glides into its component and fades. */ /* A chip and its own lines light together: the lines glow, a pulse runs towards the chip, the rest fade. */ [data-archbro-ui="next"] .canvas-offscreen-chip.is-linked{border-color:var(--ui-next-accent);background:color-mix(in srgb,var(--ui-next-accent) 14%,var(--ui-next-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-next-accent) 28%,transparent),0 2px 10px rgb(15 23 42 / 14%)} [data-archbro-ui="next"] .canvas-offscreen-notch{position:absolute;width:0;height:0;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent var(--ui-next-accent);pointer-events:none} [data-archbro-ui="next"] .canvas-offscreen-notch[hidden]{display:none} [data-archbro-ui="next"] .next-graph-svg.is-chip-tracing [data-part-members]:not(.is-chip-lit)>:is(.gx-stroke,.next-graph-edge-line,.gx-flow,.gx-reach-pulse), [data-archbro-ui="next"] .next-graph-svg.is-chip-tracing .next-graph-fan-in:not(:has(.is-chip-lit)) .next-graph-arrow{opacity:.15} [data-archbro-ui="next"] .next-graph-svg.is-chip-tracing [data-part-members].is-chip-lit{opacity:1} [data-archbro-ui="next"] .next-graph-svg.is-chip-tracing .is-chip-lit>.gx-stroke{stroke-opacity:1;stroke-width:4.2;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ui-next-accent) 75%,transparent))} [data-archbro-ui="next"] .next-graph-svg.is-chip-tracing:not(.is-diagram-galaxy,.is-diagram-stacks) .is-chip-lit>.next-graph-edge-line{stroke:var(--ui-next-accent);stroke-width:4;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ui-next-accent) 75%,transparent))} [data-archbro-ui="next"] .canvas-chip-pulse{fill:none;stroke:var(--cv-surface,#fff);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:6 26;pointer-events:none} @media (prefers-reduced-motion:no-preference){ [data-archbro-ui="next"] .canvas-chip-pulse{animation:gx-reach 1.1s linear infinite} [data-archbro-ui="next"] .canvas-chip-pulse.is-back{animation-direction:reverse} } @media (prefers-reduced-motion:reduce){[data-archbro-ui="next"] .canvas-chip-pulse{display:none}} [data-archbro-ui="next"] .canvas-offscreen-chip.is-landing{opacity:0;transform:scale(.6);pointer-events:none;transition:left .22s ease,top .22s ease,opacity .22s ease,transform .22s ease} /* Canvas toolbar: diagram style, open every area and all connections sit beside zoom. */ [data-archbro-ui="next"] .next-style-switch{display:inline-flex;align-items:center;gap:2px;padding:0 4px;border-left:1px solid var(--cv-line,var(--ui-next-line));border-right:1px solid var(--cv-line,var(--ui-next-line))} [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar .next-style-option{width:40px;min-width:40px;border-radius:6px} [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar .next-style-option[aria-checked="true"]{background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar .next-canvas-tool{width:auto;padding:0 10px;font-size:12px;font-weight:600;white-space:nowrap} [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar .next-connections-toggle[aria-pressed="true"]{background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} /* Trace bar: shown above the canvas toolbar while a Galaxy component is selected. */ [data-archbro-ui="next"] .next-trace-bar{position:absolute;right:24px;bottom:56px;z-index:41;display:flex;align-items:center;gap:4px;max-width:calc(100% - 48px);padding:3px 4px 3px 10px;border:1px solid var(--cv-line,var(--ui-next-line));border-radius:8px;background:var(--cv-surface,var(--ui-next-surface));box-shadow:0 3px 16px var(--cv-shadow,rgb(15 23 42 / 12%));flex-wrap:wrap} [data-archbro-ui="next"] .next-trace-label{color:var(--ui-next-muted);font-size:12px;font-weight:600;white-space:nowrap} [data-archbro-ui="next"] .next-trace-divider{width:1px;height:22px;margin:0 4px;background:var(--cv-line,var(--ui-next-line))} [data-archbro-ui="next"] .next-trace-depths{display:inline-flex;gap:2px} [data-archbro-ui="next"] .next-trace-bar button{height:32px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--ui-next-ink);font:inherit;font-size:12px;font-weight:650;white-space:nowrap;cursor:pointer} [data-archbro-ui="next"] .next-trace-bar button:hover:not(:disabled){background:var(--ui-next-hover)} [data-archbro-ui="next"] .next-trace-bar button:disabled{color:var(--ui-next-muted);opacity:.55;cursor:default} [data-archbro-ui="next"] .next-trace-bar button:focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:1px} [data-archbro-ui="next"] .next-trace-bar .next-trace-depth[aria-pressed="true"]{background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-trace-bar .next-trace-direction[data-reach-direction="up"][aria-pressed="true"]{background:color-mix(in srgb,#7c5cff 18%,transparent);color:#6d4cf0} [data-archbro-ui="next"] .next-trace-bar .next-trace-direction[data-reach-direction="down"][aria-pressed="true"]{background:color-mix(in srgb,#16a34a 18%,transparent);color:#15803d} [data-theme="dark"] [data-archbro-ui="next"] .next-trace-bar .next-trace-direction[data-reach-direction="up"][aria-pressed="true"],[data-archbro-ui="next"][data-theme="dark"] .next-trace-bar .next-trace-direction[data-reach-direction="up"][aria-pressed="true"]{color:#b8a6ff} [data-theme="dark"] [data-archbro-ui="next"] .next-trace-bar .next-trace-direction[data-reach-direction="down"][aria-pressed="true"],[data-archbro-ui="next"][data-theme="dark"] .next-trace-bar .next-trace-direction[data-reach-direction="down"][aria-pressed="true"]{color:#6ee7a0} /* The first-visit style tip sits bottom-left, where neither Details nor the toolbar covers it. */ [data-archbro-ui="next"] .architecture-style-tip{top:auto;right:auto;left:16px;bottom:16px} [data-archbro-ui="next"] .architecture-style-tip-options>button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:64px;padding:8px 4px} [data-archbro-ui="next"] .architecture-style-tip-options svg{flex:none;color:var(--ui-next-muted)} [data-archbro-ui="next"] .architecture-style-tip-options>button[aria-pressed="true"] svg{color:var(--ui-next-accent)} /* A Galaxy name is as easy to press as its dot. */ [data-archbro-ui="next"] .next-graph-svg.is-diagram-galaxy .gx-node :is(.gx-leaf-name,.gx-area-name){pointer-events:auto;cursor:pointer} /* Review uses the existing canvas; its summary and decisions stay outside the stage. */ [data-archbro-ui="next"] .is-draft-review .next-draft-review-heading{flex:1;min-width:0} [data-archbro-ui="next"] .is-draft-review .next-draft-review-heading h2{overflow:hidden;text-overflow:ellipsis} [data-archbro-ui="next"] .next-draft-review-heading small{color:var(--ui-next-muted);font-size:12px} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .next-draft-review-back{width:auto;min-width:0;padding:0 10px;font-size:12px} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .architecture-body.next-architecture-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .architecture-body.is-inspector-drawer-open{grid-template-columns:minmax(0,1fr) 320px} /* Review hides System areas, so a collapsed rail keeps no column there either. */ [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .architecture-body.next-architecture-layout.is-navigator-collapsed{grid-template-columns:minmax(0,1fr)} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .architecture-body.next-architecture-layout.is-navigator-collapsed.is-inspector-drawer-open{grid-template-columns:minmax(0,1fr) 320px} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .next-architecture-graph{grid-column:1;grid-row:1;min-width:0;min-height:0;height:100%} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .next-navigator-resizer{display:none} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .architecture-body>.next-architecture-navigator{display:none} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .architecture-body.is-navigator-drawer-open>.next-architecture-navigator{display:flex;position:absolute;inset:0 auto 0 0;z-index:40;width:240px;max-width:85%;height:100%} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .architecture-body>.next-architecture-inspector{display:none} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .architecture-body.is-inspector-drawer-open>.next-architecture-inspector{display:flex;position:static;grid-column:2;grid-row:1;inset:auto;z-index:auto;width:auto;max-width:none;height:100%;min-height:0;max-height:none;border-width:0 0 0 1px;box-shadow:none;background:var(--ui-next-surface)} [data-archbro-ui="next"] .next-draft-review-summary{display:grid;gap:16px;animation:next-draft-review-in .18s ease-out} [data-archbro-ui="next"] .next-draft-review-summary h3{margin:0;font-size:14px} [data-archbro-ui="next"] .next-draft-check{margin:0;color:var(--ui-next-muted);font-size:12px;line-height:1.6} [data-archbro-ui="next"] .next-draft-review-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none} [data-archbro-ui="next"] .next-draft-review-steps>li{min-width:0;padding:12px;border:1px solid var(--ui-next-line);border-radius:10px} [data-archbro-ui="next"] .next-draft-review-steps>li.has-doubt{border-color:color-mix(in srgb,var(--ui-next-warning) 60%,var(--ui-next-line))} [data-archbro-ui="next"] .next-draft-step-heading{display:flex;align-items:start;gap:6px} [data-archbro-ui="next"] .next-draft-step-heading button{border:0;background:none;color:inherit;cursor:pointer;font:inherit;font-size:13px;line-height:1.5;padding:4px;min-height:32px} [data-archbro-ui="next"] .next-draft-step-heading [data-draft-review-select]{display:flex;flex:1;gap:8px;min-width:0;text-align:left;overflow-wrap:anywhere} [data-archbro-ui="next"] .next-draft-step-heading [data-draft-review-select] span{flex:none;color:var(--ui-next-muted);font-size:11px;line-height:20px} [data-archbro-ui="next"] .next-draft-step-heading [data-draft-review-undo]{flex:none;width:32px;font-size:20px} [data-archbro-ui="next"] .next-draft-doubt p{margin:10px 0;color:var(--ui-next-muted);font-size:12px;line-height:1.6} [data-archbro-ui="next"] .next-draft-doubt>div{display:grid;gap:6px} [data-archbro-ui="next"] .next-draft-doubt button{display:grid;gap:4px;min-height:40px;padding:10px;border:1px solid var(--ui-next-line);border-radius:7px;background:var(--ui-next-surface);color:var(--ui-next-ink);font:inherit;font-size:12px;text-align:left;cursor:pointer} [data-archbro-ui="next"] .next-draft-doubt button.is-recommended{border-color:var(--ui-next-accent);background:var(--ui-next-accent-soft)} [data-archbro-ui="next"] .next-draft-doubt button small{color:var(--ui-next-accent);font-size:11px} [data-archbro-ui="next"] .next-draft-manual-label{color:var(--ui-next-muted);font-size:11px} [data-archbro-ui="next"] .next-draft-review-summary+.next-draft-editor{margin-top:6px} [data-archbro-ui="next"] .next-draft-review-decisions{flex:none;position:relative;z-index:101;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;border-top:1px solid var(--ui-next-line);background:var(--ui-next-surface)} [data-archbro-ui="next"] .next-draft-review-decisions p{margin:0;min-width:0;color:var(--ui-next-muted);font-size:12px;line-height:1.5} [data-archbro-ui="next"] .next-draft-review-decisions>div{display:flex;flex:none;gap:8px} [data-archbro-ui="next"] .next-draft-review-decisions button{min-height:40px;padding:8px 14px;border:1px solid var(--ui-next-line);border-radius:8px;background:var(--ui-next-surface);color:var(--ui-next-ink);font:inherit;font-size:13px;cursor:pointer} [data-archbro-ui="next"] .next-draft-review-decisions button.is-primary{border-color:var(--ui-next-accent);background:var(--ui-next-accent);color:var(--ui-next-on-accent);font-weight:650} [data-archbro-ui="next"] .next-draft-review-decisions button.is-danger{color:var(--ui-next-danger)} [data-archbro-ui="next"] :is(.next-draft-review-decisions,.next-draft-review-summary) button{transition:transform .18s ease-out,background-color .18s ease-out,border-color .18s ease-out} [data-archbro-ui="next"] :is(.next-draft-review-decisions,.next-draft-review-summary) button:active:not(:disabled){transform:scale(.97)} [data-archbro-ui="next"] :is(.next-draft-review-decisions,.next-draft-review-summary) button:disabled{opacity:.5;cursor:default} [data-archbro-ui="next"] :is(.next-draft-review-decisions,.next-draft-review-summary) button:focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:2px} [data-archbro-ui="next"]:has([data-draft-review]) .ui-next-ask-drawer{max-height:calc(100dvh - var(--ask-top) - 96px)} [data-archbro-ui="next"] .next-review-own-draft{width:100%;margin:0 0 16px;border:1px solid var(--ui-next-line);border-radius:10px;background:var(--ui-next-surface)} @keyframes next-draft-review-in{from{opacity:0;transform:translateY(5px)}} @media(max-width:760px){ [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .next-architecture-header{flex-wrap:wrap;height:auto;min-height:96px;gap:4px 10px;padding:8px 12px} [data-archbro-ui="next"] .is-draft-review .next-draft-review-back{order:1} [data-archbro-ui="next"] .is-draft-review .next-architecture-header-actions{order:2;margin-left:auto} [data-archbro-ui="next"] .is-draft-review .next-draft-review-heading{order:3;flex-basis:100%} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .next-draft-review-heading h2{display:block;position:static;width:auto;height:auto;clip:auto;max-width:100%;font-size:16px;line-height:22px} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .architecture-body.next-architecture-layout{display:flex;flex-direction:column;overflow-y:auto} /* The shared viewport pins the body height inline; leave room below it for Review's summary. */ [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .next-architecture-graph{flex:none;height:360px!important;min-height:360px} [data-archbro-ui="next"] .architecture-v41-workspace.is-draft-review .architecture-body.is-inspector-drawer-open>.next-architecture-inspector{flex:none;height:auto;min-height:180px;border-width:1px 0 0} [data-archbro-ui="next"] .is-draft-review .next-inspector-content{overflow:visible} [data-archbro-ui="next"] .next-draft-review-decisions{flex-direction:column;align-items:stretch;gap:6px;padding:8px 12px max(8px,env(safe-area-inset-bottom))} [data-archbro-ui="next"] .next-draft-review-decisions>div{justify-content:flex-end} [data-archbro-ui="next"] .next-draft-review-decisions button{min-height:44px} [data-archbro-ui="next"]:has([data-draft-review]) .ui-next-ask-drawer{inset:auto 0 104px;max-height:calc(100dvh - var(--workspace-topbar-height,112px) - 116px)} [data-archbro-ui="next"] .next-review-own-draft{flex-wrap:wrap;gap:8px} } @media(prefers-reduced-motion:reduce){ [data-archbro-ui="next"] .next-draft-review-summary{animation:none} [data-archbro-ui="next"] :is(.next-draft-review-decisions,.next-draft-review-summary) button{transition:none} [data-archbro-ui="next"] :is(.next-draft-review-decisions,.next-draft-review-summary) button:active{transform:none} } @media(max-width:620px){ /* Phone: the toolbar wraps onto a second row instead of running off screen, and the style buttons there replace the tip. */ [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar{align-self:stretch;flex-wrap:wrap;justify-content:center;margin:4px 8px;max-width:calc(100% - 16px)} [data-archbro-ui="next"] .architecture-style-tip{display:none} /* The phone opens Areas from its own list, and Expand all stays in the view menu. */ [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar .next-canvas-tool[data-graph-disclosure]{display:none} [data-archbro-ui="next"] .architecture-v41-workspace.is-columns-rules .next-graph-toolbar .next-canvas-tool{padding:0 8px} [data-archbro-ui="next"] .next-trace-bar{left:8px;right:8px;max-width:none;justify-content:center} } /* Header "Copy for agent": a popover that shows the whole-architecture prompt beside one Copy button. */ [data-archbro-ui="next"] .architecture-agent-menu{position:relative;flex:none;z-index:60} [data-archbro-ui="next"] .architecture-agent-menu>summary{list-style:none;cursor:pointer;min-height:44px;border:1px solid var(--ui-next-line);border-radius:6px;background:var(--ui-next-surface);font-size:12px;font-weight:650;color:var(--ui-next-ink)} [data-archbro-ui="next"] .architecture-agent-menu>summary::-webkit-details-marker{display:none} [data-archbro-ui="next"] .architecture-agent-menu[open]>summary{border-color:var(--ui-next-accent);color:var(--ui-next-accent);background:var(--ui-next-accent-soft)} @media (hover:hover) and (pointer:fine){[data-archbro-ui="next"] .architecture-agent-menu>summary:hover{background:var(--ui-next-hover)}} [data-archbro-ui="next"] .architecture-agent-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:10px;width:min(560px,calc(100vw - 24px));padding:14px;border:1px solid var(--ui-next-line);border-radius:10px;background:var(--ui-next-surface);box-shadow:0 8px 30px rgba(20,24,30,.18);transform-origin:top right;animation:agent-panel-in .16s cubic-bezier(.23,1,.32,1)} [data-archbro-ui="next"] .architecture-agent-panel header{display:grid;gap:2px} [data-archbro-ui="next"] .architecture-agent-panel header strong{font-size:14px} [data-archbro-ui="next"] .architecture-agent-panel header small{color:var(--ui-next-muted);font-size:12px;line-height:1.4} [data-archbro-ui="next"] .architecture-agent-text{margin:0;max-height:min(46vh,380px);overflow:auto;padding:12px;border:1px solid var(--ui-next-line);border-radius:8px;background:var(--ui-next-bg,var(--ui-next-hover));color:var(--ui-next-ink);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text} [data-archbro-ui="next"] .architecture-agent-panel footer{display:flex;align-items:center;justify-content:space-between;gap:12px} [data-archbro-ui="next"] .architecture-agent-panel footer>span{color:var(--ui-next-muted);font-size:12px} [data-archbro-ui="next"] .architecture-agent-panel .architecture-agent-copy{min-height:40px;padding:0 18px;border:1px solid var(--ui-next-accent);border-radius:8px;background:var(--ui-next-accent);color:var(--ui-next-on-accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .15s ease} [data-archbro-ui="next"] .architecture-agent-panel .architecture-agent-copy:active:not(:disabled){transform:scale(.97)} [data-archbro-ui="next"] .architecture-agent-panel .architecture-agent-copy:disabled{opacity:.5;cursor:default} [data-archbro-ui="next"] .architecture-agent-panel .architecture-agent-copy[data-state="copied"]{color:var(--ui-next-success);border-color:var(--ui-next-success);background:var(--ui-next-success-bg)} [data-archbro-ui="next"] .architecture-agent-panel .architecture-agent-copy[data-state="failed"]{color:var(--ui-next-danger);border-color:var(--ui-next-danger);background:var(--ui-next-danger-bg)} @keyframes agent-panel-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){[data-archbro-ui="next"] .architecture-agent-panel{animation:none}} @media (max-width:620px){ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-header-actions .architecture-agent-menu{position:static} [data-archbro-ui="next"] .architecture-agent-panel{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;transform-origin:bottom center} [data-archbro-ui="next"] .architecture-agent-text{max-height:52vh} } /* Header version pill: version and state in one press that opens History. */ [data-archbro-ui="next"] .architecture-v41-workspace .ui-next-version-control.is-compact{gap:6px;min-height:0;padding:0;border:0;background:none} [data-archbro-ui="next"] .architecture-version-pill{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border:1px solid var(--ui-next-line);border-radius:6px;background:var(--ui-next-surface);color:var(--ui-next-ink);font:inherit;font-size:12px;font-weight:650;cursor:pointer;white-space:nowrap} [data-archbro-ui="next"] .architecture-version-pill .status-dot{width:7px;height:7px;border-radius:50%;background:var(--ui-next-success)} [data-archbro-ui="next"] .architecture-version-pill .status-dot:not(.is-accepted){background:var(--ui-next-warning)} [data-archbro-ui="next"] .architecture-version-pill>span:not(.status-dot){color:var(--ui-next-muted);font-weight:600} [data-archbro-ui="next"] .architecture-version-pill>.ui-icon{width:14px;height:14px;color:var(--ui-next-muted)} @media (hover:hover) and (pointer:fine){[data-archbro-ui="next"] .architecture-version-pill:hover{background:var(--ui-next-hover)}} [data-archbro-ui="next"] .next-graph-toolbar .architecture-focus-toggle.is-canvas{width:auto;min-width:0;padding:0 8px;border:0;background:transparent} /* Floating header: the architecture controls sit inside the canvas as two glass clusters (areas, version and the area back link on the left; edit, view, copy and Details on the right), so the map starts right under the product navigation. Review keeps its own header row. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph>.next-architecture-header.is-floating{position:absolute;z-index:45;inset:8px 8px auto;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:6px 8px;height:auto;min-height:0;padding:0;border:0;background:transparent;pointer-events:none} [data-archbro-ui="next"] .next-architecture-header.is-floating :is(.next-architecture-header-lead,.next-architecture-header-actions){display:flex;align-items:center;flex:none;gap:2px;min-width:0;margin:0;padding:3px;border:1px solid color-mix(in srgb,var(--ui-next-line) 80%,transparent);border-radius:12px;background:color-mix(in srgb,var(--ui-next-surface) 88%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 2px rgba(17,19,24,.05),0 6px 20px rgba(17,19,24,.08);pointer-events:auto} [data-archbro-ui="next"] .next-architecture-header.is-floating .next-architecture-header-lead{flex:none;max-width:100%} /* When both clusters do not fit, the tools wrap below and keep to the right. */ [data-archbro-ui="next"] .next-architecture-header.is-floating .next-architecture-header-actions{margin-left:auto} [data-archbro-ui="next"] .next-architecture-header.is-floating h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} [data-archbro-ui="next"] .next-architecture-header.is-floating :is(.architecture-drawer-toggle,.architecture-header-button,.architecture-view-button,.architecture-version-pill,.next-mobile-area-back){position:static;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:40px;height:40px;min-height:40px;margin:0;padding:0 10px;border:0;border-radius:9px;background:transparent;box-shadow:none;color:var(--ui-next-ink);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,transform .16s cubic-bezier(.23,1,.32,1)} [data-archbro-ui="next"] .next-architecture-header.is-floating :is(.architecture-drawer-toggle,.architecture-header-button){padding:0} [data-archbro-ui="next"] .next-architecture-header.is-floating :is(.architecture-drawer-toggle,.architecture-header-button,.architecture-view-button,.architecture-version-pill,.next-mobile-area-back):active{transform:scale(.97)} @media (hover:hover) and (pointer:fine){[data-archbro-ui="next"] .next-architecture-header.is-floating :is(.architecture-drawer-toggle,.architecture-header-button,.architecture-view-button,.architecture-version-pill,.next-mobile-area-back):hover{background:var(--ui-next-hover);color:var(--ui-next-ink)}} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-drawer-toggle[aria-expanded="true"]{background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-architecture-header.is-floating>.next-architecture-header-lead>.architecture-repo-bar{display:flex;align-items:center;flex:0 1 auto;min-width:0;min-height:0;margin:0;padding:0;border:0;background:transparent;gap:2px} [data-archbro-ui="next"] .next-architecture-header.is-floating .next-mobile-area-back{position:relative;inset:auto;margin-left:3px;color:var(--ui-next-muted)} [data-archbro-ui="next"] .next-architecture-header.is-floating .next-mobile-area-back::before{content:"";position:absolute;left:-3px;top:10px;bottom:10px;width:1px;background:var(--ui-next-line)} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-view-menu{position:relative} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-progress-status{display:none} /* Wider canvases keep both clusters on one row and never move them: Details opens below them, and a long view or version label shortens before anything wraps. */ @container architecture-workspace (min-width:621px){ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph>.next-architecture-header.is-floating{flex-wrap:nowrap} [data-archbro-ui="next"] .next-architecture-header.is-floating :is(.next-architecture-header-lead,.next-architecture-header-actions,.architecture-view-menu){flex:0 1 auto;min-width:0} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-view-button{min-width:0;max-width:100%} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-view-button-text{min-width:0;overflow:hidden;text-overflow:ellipsis} [data-archbro-ui="next"] .next-architecture-header.is-floating :is(.architecture-repo-bar,.architecture-version-pill,.architecture-drawer-toggle,.next-mobile-area-back){flex:none} } /* Wide canvases show the button names, so those buttons get their own padding. */ @container architecture-workspace (min-width:1181px){ [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-header-button{padding:0 10px} } /* What starts at the canvas top moves below the clusters. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph:has(>.next-architecture-header.is-floating):not(:has(>.next-chat-proposal-bar)) .next-mobile-areas{padding-top:64px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph.has-mobile-areas:has(>.next-architecture-header.is-floating)>.next-chat-proposal-bar{margin-top:68px} /* The phone area list has no map, so it has no map tools either. */ @media(max-width:620px){[data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph.has-mobile-areas>.next-canvas-dock{display:none}} @container architecture-workspace (max-width:620px){ /* Phones: icons only; the version keeps its dot and number, the view menu its icon. */ [data-archbro-ui="next"] .next-architecture-header.is-floating{gap:6px} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-version-pill>span:not(.status-dot), [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-header-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-version-pill{padding:0 8px;gap:5px} [data-archbro-ui="next"] .next-architecture-header.is-floating .next-architecture-header-actions{flex:0 1 auto;min-width:0} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-view-button{gap:2px;padding:0 6px} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-view-button-text, [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-version-pill>.ui-icon{display:none} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-view-icon{display:inline-flex} [data-archbro-ui="next"] .next-architecture-header.is-floating :is(.architecture-drawer-toggle,.architecture-header-button){min-width:38px;width:38px} /* 44px-tall touch targets on phones; the row stays one line down to 320px. */ [data-archbro-ui="next"] .next-architecture-header.is-floating :is(.architecture-drawer-toggle,.architecture-header-button,.architecture-view-button,.architecture-version-pill,.next-mobile-area-back){height:44px;min-height:44px} /* The area back link keeps its arrow; its name stays as the accessible label and tooltip. */ [data-archbro-ui="next"] .next-architecture-header.is-floating .next-mobile-area-back{width:38px;min-width:38px;padding:0;font-size:0} [data-archbro-ui="next"] .next-architecture-header.is-floating .next-mobile-area-back::after{content:"←";font-size:17px;line-height:1} /* A phone's Details or areas drawer covers the canvas; its own header takes over. */ [data-archbro-ui="next"] .next-architecture-layout:is(.is-inspector-drawer-open,.is-navigator-drawer-open) .next-architecture-graph>.next-architecture-header.is-floating{display:none} } [data-archbro-ui="next"] .architecture-view-icon{display:none} [data-archbro-ui="next"] .architecture-view-icon>.ui-icon{width:18px;height:18px} /* The smallest phones keep both clusters on one row, clear of the unsaved-draft bar below them. */ @container architecture-workspace (max-width:360px){ [data-archbro-ui="next"] .next-architecture-header.is-floating :is(.architecture-drawer-toggle,.architecture-header-button){min-width:34px;width:34px} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-view-button{padding:0 4px} [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-version-pill{padding:0 6px} } /* Bottom dock: the canvas tools and the trace controls float on the canvas as two glass pills, side by side when they fit; the trace pill moves above the tools when they do not. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph>.next-canvas-dock{position:absolute;z-index:41;inset:auto 8px 8px;display:flex;flex-wrap:wrap-reverse;align-items:flex-end;justify-content:space-between;gap:6px;pointer-events:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-canvas-dock>:is(.next-graph-toolbar,.next-trace-bar){position:static;inset:auto;flex:0 1 auto;align-self:auto;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:2px;min-width:0;max-width:100%;min-height:0;margin:0;padding:3px;border:1px solid color-mix(in srgb,var(--ui-next-line) 80%,transparent);border-radius:12px;background:color-mix(in srgb,var(--ui-next-surface) 88%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 2px rgba(17,19,24,.05),0 6px 20px rgba(17,19,24,.08);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;pointer-events:auto} [data-archbro-ui="next"] .architecture-v41-workspace .next-canvas-dock>:is(.next-graph-toolbar,.next-trace-bar)::-webkit-scrollbar{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-canvas-dock .next-graph-toolbar button{flex:none;height:40px;min-height:40px;min-width:40px;border-radius:9px} [data-archbro-ui="next"] .architecture-v41-workspace .next-canvas-dock .next-trace-bar{padding-left:10px} [data-archbro-ui="next"] .architecture-v41-workspace .next-canvas-dock .next-trace-bar button{flex:none;height:34px;border-radius:8px} [data-archbro-ui="next"] .architecture-v41-workspace .next-canvas-dock .next-trace-depths{flex:none} @container architecture-workspace (max-width:620px){ /* Phones: each pill keeps one row and scrolls sideways; the trace drops its labels. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-canvas-dock>:is(.next-graph-toolbar,.next-trace-bar){flex-basis:100%;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent)} [data-archbro-ui="next"] .architecture-v41-workspace .next-canvas-dock .next-trace-label{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-canvas-dock .next-trace-bar{justify-content:flex-start;padding-left:3px} } /* An unsaved Ask draft's bar sits just below the floating clusters. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph:has(>.next-architecture-header.is-floating)>.next-chat-proposal-bar{top:64px;left:8px;right:8px} /* Details sits under the top clusters and runs to the canvas bottom, so opening it never moves a control; the bottom tools stay on the canvas beside it. */ @container architecture-workspace (min-width:621px){ [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-layout.is-inspector-drawer-open:has(>.next-architecture-graph>.next-architecture-header.is-floating)>.next-architecture-inspector{top:64px;bottom:8px;max-height:none;border-right:0;border-radius:12px 0 0 12px} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-layout.is-inspector-drawer-open.is-inspector-on-left:has(>.next-architecture-graph>.next-architecture-header.is-floating)>.next-architecture-inspector{border-right:1px solid var(--ui-next-line);border-left:0;border-radius:0 12px 12px 0} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.is-inspector-drawer-open:not(.is-inspector-on-left,.is-inspector-collapsed)>.next-architecture-graph>.next-canvas-dock{right:336px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.is-inspector-drawer-open.is-inspector-on-left:not(.is-inspector-collapsed)>.next-architecture-graph>.next-canvas-dock{left:336px} /* The unsaved-draft bar keeps its Review button clear of Details too. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.is-inspector-drawer-open:not(.is-inspector-on-left,.is-inspector-collapsed)>.next-architecture-graph:has(>.next-architecture-header.is-floating)>.next-chat-proposal-bar{right:336px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.is-inspector-drawer-open.is-inspector-on-left:not(.is-inspector-collapsed)>.next-architecture-graph:has(>.next-architecture-header.is-floating)>.next-chat-proposal-bar{left:336px} } /* Details reads as one calm column: one Ask button with Copy for agent beside it, owner and tasks as label and value rows, and the relationship counts only on the tabs. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-actions{display:flex;align-items:center;gap:6px;margin:12px 0 18px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-ask{flex:1 1 auto;justify-content:center;gap:7px;min-height:36px;height:36px;padding:0 12px;border:1px solid color-mix(in srgb,var(--ui-next-accent) 24%,transparent);border-radius:9px;background:var(--ui-next-accent-soft);color:var(--ui-next-accent);transition:background-color .15s ease,border-color .15s ease,transform .16s cubic-bezier(.23,1,.32,1)} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-ask-icon{width:auto;height:auto;border-radius:0;background:none} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-ask-icon>.ui-icon{width:16px;height:16px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-ask-text strong{font-size:13px;font-weight:600;white-space:nowrap} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-ask-text small{display:none} @media (hover:hover) and (pointer:fine){[data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-ask:hover{border-color:color-mix(in srgb,var(--ui-next-accent) 40%,transparent);background:color-mix(in srgb,var(--ui-next-accent) 16%,var(--ui-next-surface))}} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 16px;margin:0 0 18px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-facts>div{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;min-height:30px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-facts span{color:var(--ui-next-muted);font-size:12px;font-weight:500} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-facts strong{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-width:0;color:var(--ui-next-ink);font-size:13px;font-weight:500;line-height:1.4;text-align:left;overflow-wrap:anywhere} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-facts .cv-inspector-team-owner.is-unassigned{color:var(--ui-next-muted)} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-facts .cv-inspector-team-owner.is-unassigned::before{content:"";flex:none;width:16px;height:16px;border:1.5px dashed color-mix(in srgb,var(--ui-next-muted) 70%,transparent);border-radius:50%;box-sizing:border-box} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector .cv-inspector-facts .next-ownership-avatar{width:20px;height:20px;font-size:9px} /* Panel scrollbars are thin and quiet, without the system arrow buttons. */ [data-archbro-ui="next"] :is(.next-architecture-inspector,.next-architecture-navigator,.ui-next-ask-drawer) ::-webkit-scrollbar{width:10px;height:10px} [data-archbro-ui="next"] :is(.next-architecture-inspector,.next-architecture-navigator,.ui-next-ask-drawer) ::-webkit-scrollbar-track{background:transparent} [data-archbro-ui="next"] :is(.next-architecture-inspector,.next-architecture-navigator,.ui-next-ask-drawer) ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:color-mix(in srgb,var(--ui-next-ink) 18%,transparent) padding-box} [data-archbro-ui="next"] :is(.next-architecture-inspector,.next-architecture-navigator,.ui-next-ask-drawer) ::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--ui-next-ink) 32%,transparent)} [data-archbro-ui="next"] :is(.next-architecture-inspector,.next-architecture-navigator,.ui-next-ask-drawer) ::-webkit-scrollbar-button{display:none;width:0;height:0} @supports not selector(::-webkit-scrollbar){[data-archbro-ui="next"] :is(.next-inspector-content,.next-navigator-content,.ui-next-ask-drawer *){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ui-next-ink) 22%,transparent) transparent}} /* The first-visit style tip sits just above the canvas dock, over the style switcher it points to. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-graph:has(>.next-canvas-dock) .architecture-style-tip{left:8px;bottom:64px;z-index:42} /* The canvas fills the workspace on a desktop: System areas floats over its left edge as Details does over the right, and the camera keeps the map clear of both. Collapsed, System areas is a slim rail of its areas; the header's menu button is that rail's job there. */ @media(min-width:1101px){ [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .architecture-body.next-architecture-layout.has-floating-canvas{grid-template-columns:minmax(0,1fr)} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-layout.has-floating-canvas>.next-architecture-graph{grid-column:1/-1} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-layout.has-floating-canvas>.next-navigator-resizer, [data-archbro-ui="next"] .next-architecture-layout.has-floating-canvas>.next-architecture-graph>.next-architecture-header.is-floating [data-architecture-drawer="navigator"]{display:none} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-layout.has-floating-canvas>.next-architecture-navigator{position:absolute;z-index:9;top:64px;bottom:8px;left:0;width:var(--navigator-width,240px);max-width:40%;height:auto;min-height:0;border-left:0;border-radius:0 12px 12px 0;box-shadow:0 8px 30px rgba(41,38,55,.11)} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-layout.has-floating-canvas>.next-architecture-navigator.is-collapsed{width:56px;bottom:auto;max-height:calc(100% - 72px)} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.has-floating-canvas:not(.is-navigator-collapsed)>.next-architecture-graph>:is(.next-canvas-dock,.next-chat-proposal-bar){left:calc(min(var(--navigator-width,240px),40%) + 8px)} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-layout.has-floating-canvas.is-navigator-collapsed>.next-architecture-graph>:is(.next-canvas-dock,.next-chat-proposal-bar){left:64px} /* Collapsed, Details is a slim rail on the right edge, as System areas is on the left; its button opens it again. */ [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure:not(.is-focus-mode,.is-draft-review) .next-architecture-layout.has-floating-canvas.is-inspector-collapsed>.next-architecture-inspector{display:flex;flex-direction:column;position:absolute;z-index:9;grid-area:auto;inset:64px 0 auto auto;width:56px;min-width:56px;max-width:none;height:auto;min-height:0;max-height:none;border:1px solid var(--ui-next-line);border-right:0;border-radius:12px 0 0 12px;background:var(--ui-next-surface);box-shadow:0 8px 30px rgba(41,38,55,.11);overflow:visible;animation:next-inspector-rail-in .18s cubic-bezier(.23,1,.32,1)} [data-archbro-ui="next"] .architecture-v41-workspace.is-living-disclosure .next-architecture-layout.has-floating-canvas.is-inspector-collapsed>.next-architecture-inspector .next-panel-heading{justify-content:center;min-height:52px;padding:8px 0;border:0} } @keyframes next-inspector-rail-in{from{opacity:0;transform:translateX(8px)}} @media (prefers-reduced-motion:reduce){[data-archbro-ui="next"] .next-architecture-layout.has-floating-canvas.is-inspector-collapsed>.next-architecture-inspector{animation:none}} /* Details' rail sits on the right edge, so its tooltips open to the left. */ [data-archbro-ui="next"] .next-architecture-inspector.is-collapsed [data-tip]::after{right:calc(100% + 8px);left:auto} /* Header clusters are icons with tooltips; only the version and the view menu keep their words. */ [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-header-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} [data-archbro-ui="next"] .next-architecture-header.is-floating :is(.architecture-drawer-toggle,.architecture-header-button){width:40px;min-width:40px;padding:0} @container architecture-workspace (min-width:1181px){ [data-archbro-ui="next"] .next-architecture-header.is-floating .architecture-header-button{padding:0} } /* Canvas menus: Display and Trace open just above their toolbar button as one calm card. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-toolbar.canvas-controls button.next-canvas-menu-button{display:inline-flex;align-items:center;gap:6px;flex:none;width:auto;height:40px;min-height:40px;padding:0 6px 0 10px;border:0;border-radius:9px;background:transparent;color:var(--ui-next-ink);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .16s cubic-bezier(.23,1,.32,1)} [data-archbro-ui="next"] .next-canvas-menu-button>.ui-icon{width:16px;height:16px;color:var(--ui-next-muted)} [data-archbro-ui="next"] .next-canvas-menu-button:active{transform:scale(.97)} @media (hover:hover) and (pointer:fine){[data-archbro-ui="next"] .architecture-v41-workspace .next-graph-toolbar.canvas-controls button.next-canvas-menu-button:hover{background:var(--ui-next-hover)}} [data-archbro-ui="next"] .architecture-v41-workspace .next-graph-toolbar.canvas-controls button.next-canvas-menu-button.is-open{background:var(--ui-next-accent-soft);color:var(--ui-next-accent)} [data-archbro-ui="next"] .next-canvas-menu-button.is-open>.ui-icon{color:currentColor} [data-archbro-ui="next"] .next-canvas-menu-button:focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:-2px} [data-archbro-ui="next"] .next-canvas-menu-summary{color:var(--ui-next-accent);font-variant-numeric:tabular-nums} [data-archbro-ui="next"] .next-canvas-menu-chevron{display:inline-flex;color:var(--ui-next-muted);transition:transform .2s cubic-bezier(.23,1,.32,1)} [data-archbro-ui="next"] .next-canvas-menu-chevron .ui-icon{width:14px;height:14px} [data-archbro-ui="next"] .next-canvas-menu-button.is-open .next-canvas-menu-chevron{color:currentColor;transform:rotate(180deg)} [data-archbro-ui="next"] .next-canvas-menu-panel{position:absolute;z-index:46;display:flex;flex-direction:column;align-items:stretch;gap:2px;width:max-content;min-width:220px;max-width:min(320px,calc(100% - 16px));padding:6px;border:1px solid color-mix(in srgb,var(--ui-next-line) 80%,transparent);border-radius:12px;background:color-mix(in srgb,var(--ui-next-surface) 96%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 2px rgba(17,19,24,.06),0 12px 32px rgba(17,19,24,.16);color:var(--ui-next-ink);pointer-events:auto;transform-origin:bottom left;animation:next-canvas-menu-in .16s cubic-bezier(.23,1,.32,1)} [data-archbro-ui="next"] .next-canvas-menu-panel[hidden]{display:none} @keyframes next-canvas-menu-in{from{opacity:0;transform:translateY(4px) scale(.98)}} @media(prefers-reduced-motion:reduce){[data-archbro-ui="next"] .next-canvas-menu-panel{animation:none}} /* Display: one action per line; the two switches show their state on the right. */ [data-archbro-ui="next"] .next-canvas-menu-panel>:is(.next-canvas-tool,.next-progress-colour-toggle){display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:36px;min-height:36px;margin:0;padding:0 10px;border:0;border-radius:8px;background:transparent;box-shadow:none;color:var(--ui-next-ink);font:inherit;font-size:13px;font-weight:500;text-align:left;white-space:nowrap;cursor:pointer;transition:background-color .15s ease} @media (hover:hover) and (pointer:fine){[data-archbro-ui="next"] .next-canvas-menu-panel>:is(.next-canvas-tool,.next-progress-colour-toggle):hover{background:var(--ui-next-hover)}} [data-archbro-ui="next"] .next-canvas-menu-panel>:is(.next-canvas-tool,.next-progress-colour-toggle):focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:-2px} [data-archbro-ui="next"] .next-canvas-menu-panel>:is(.next-connections-toggle,.next-follow-toggle,.next-progress-colour-toggle)::after{content:"";flex:none;width:28px;height:16px;border-radius:999px;background:radial-gradient(circle,#fff 0 5px,transparent 5.5px) 0 50%/16px 16px no-repeat,color-mix(in srgb,var(--ui-next-muted) 45%,transparent);transition:background-position .18s cubic-bezier(.23,1,.32,1),background-color .18s ease} [data-archbro-ui="next"] .next-canvas-menu-panel>:is(.next-connections-toggle,.next-follow-toggle,.next-progress-colour-toggle)[aria-pressed="true"]::after{background-color:var(--ui-next-accent);background-position:12px 50%} [data-archbro-ui="next"] .next-canvas-menu-panel>.next-p1-switch{display:grid;grid-template-columns:1fr 1fr;margin:4px 2px;padding:2px} [data-archbro-ui="next"] .next-canvas-menu-panel>.next-p1-switch .next-p1-option{justify-content:center;height:32px;cursor:pointer} [data-archbro-ui="next"] .next-canvas-menu-panel>[data-progress-colour-status]{padding:4px 10px;color:var(--ui-next-muted);font-size:12px} /* Trace: which way on the first line, how far on the second. */ [data-archbro-ui="next"] .next-canvas-menu-panel>.next-trace-bar{position:static;inset:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4px;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none} [data-archbro-ui="next"] .next-canvas-menu-panel>.next-trace-bar>.next-trace-label:first-child, [data-archbro-ui="next"] .next-canvas-menu-panel>.next-trace-bar>.next-trace-divider{display:none} [data-archbro-ui="next"] .next-canvas-menu-panel>.next-trace-bar>.next-trace-label{grid-column:1/-1;padding:6px 4px 0} [data-archbro-ui="next"] .next-canvas-menu-panel>.next-trace-bar .next-trace-depths{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:2px} [data-archbro-ui="next"] .next-canvas-menu-panel>.next-trace-bar button{height:36px;justify-content:center} /* A seated Ask shares the Details column: the head stays, the rest folds into one line that opens in place, and Ask rests in the slot at the column's foot, never over the map. */ [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector.is-ask-seat>.next-inspector-content{flex:0 1 auto;min-height:0;padding-bottom:8px} [data-archbro-ui="next"] .architecture-v41-workspace .next-architecture-inspector.is-ask-seat>.cv-inspector-ask-slot{flex:1 0 200px;min-height:200px;margin:0 8px 8px} [data-archbro-ui="next"] .architecture-v41-workspace .is-ask-seat .cv-inspector-reading.is-seat-head{margin-bottom:12px} [data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-more>summary{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px 0 12px;border:1px solid color-mix(in srgb,var(--ui-next-line) 85%,transparent);border-radius:10px;color:var(--ui-next-ink);font-size:13px;font-weight:600;list-style:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease} [data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-more>summary::-webkit-details-marker{display:none} [data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-more>summary b{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--ui-next-accent-soft);color:var(--ui-next-accent);font-size:11px;font-variant-numeric:tabular-nums} [data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-more>summary small{flex:1 1 auto;min-width:0;overflow:hidden;color:var(--ui-next-muted);font-size:12px;font-weight:500;text-overflow:ellipsis;white-space:nowrap} [data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-more>summary>span:first-child{flex:none} [data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-chevron{display:inline-flex;margin-left:auto;color:var(--ui-next-muted);transition:transform .2s cubic-bezier(.23,1,.32,1)} [data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-chevron .ui-icon{width:14px;height:14px} [data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-more[open]>summary .cv-inspector-seat-chevron{transform:rotate(180deg)} @media (hover:hover) and (pointer:fine){[data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-more>summary:hover{border-color:var(--ui-next-line);background:var(--ui-next-hover)}} [data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-more>summary:focus-visible{outline:2px solid var(--ui-next-accent);outline-offset:2px} [data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-more[open]>summary{margin-bottom:14px} [data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-more>.cv-inspector-reading>.cv-inspector-actions:first-child{margin-top:0} @media(prefers-reduced-motion:reduce){[data-archbro-ui="next"] .architecture-v41-workspace .cv-inspector-seat-chevron{transition:none}} /* A quiet "A" on the canvas opens Ask without going through the header or Details. */ [data-archbro-ui="next"] .next-architecture-graph>.next-ask-launcher{position:absolute;z-index:40;left:50%;margin-left:-20px;bottom:14px;width:40px;height:40px;padding:0;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--ui-next-accent) 30%,transparent);border-radius:50%;background:color-mix(in srgb,var(--ui-next-surface) 70%,transparent);opacity:.62;cursor:pointer;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 1px 2px rgba(17,19,24,.06),0 4px 14px rgba(17,19,24,.1);transition:opacity 160ms ease,transform 140ms cubic-bezier(.23,1,.32,1),background-color 160ms ease} @media (hover:hover){[data-archbro-ui="next"] .next-architecture-graph>.next-ask-launcher:hover{opacity:1;background:var(--ui-next-surface)}} [data-archbro-ui="next"] .next-architecture-graph>.next-ask-launcher:focus-visible{opacity:1;outline:2px solid var(--ui-next-accent);outline-offset:2px} [data-archbro-ui="next"] .next-architecture-graph>.next-ask-launcher:active{transform:scale(.94)} [data-archbro-ui="next"].ui-next-ask-open .next-ask-launcher{display:none} @media (max-width:620px){[data-archbro-ui="next"] .next-architecture-graph.has-mobile-areas>.next-ask-launcher{display:none}} @media (prefers-reduced-motion:reduce){[data-archbro-ui="next"] .next-architecture-graph>.next-ask-launcher{transition:none}} [data-archbro-ui="next"] .next-architecture-graph>.next-ask-launcher img{width:22px;height:22px;display:block}