/* BPMN Lineage OS 2.0 — additive presentation layer. It is embedded only into dashboard_os.html. No data, route or business resolver lives in this file. */ html[data-ui-variant="os"]{ color-scheme:dark light; /* Map OS variables to canonical design tokens */ --os-ink-1000: var(--raw-navy-950); --os-ink-950: var(--raw-navy-950); --os-ink-900: var(--raw-slate-800); --os-ink-850: var(--raw-slate-800); --os-ink-800: var(--raw-slate-700); --os-cobalt: var(--raw-blue-600); --os-cobalt-2: var(--raw-blue-500); --os-cyan: var(--raw-cyan-500); --os-mint: var(--raw-green-600); --os-violet: var(--raw-violet-600); --os-amber: var(--raw-amber-600); --os-red: var(--raw-red-600); --os-canvas: var(--surface-canvas); --os-surface: var(--surface-primary); --os-surface-soft: var(--surface-secondary); --os-line: var(--border-default); --os-line-dark: var(--raw-blue-900); --os-text: var(--text-primary); --os-muted: var(--text-muted); --os-shadow:0 16px 42px -32px rgba(4,18,34,.78),0 2px 8px rgba(4,18,34,.06); --os-shadow-float:0 28px 70px -34px rgba(1,10,22,.82),0 8px 24px rgba(1,10,22,.12); background:var(--os-ink-1000); } html[data-ui-variant="os"] body{ min-width:320px; padding-left:72px; background:var(--os-canvas)!important; color:var(--os-text); } html[data-ui-variant="os"] *{scrollbar-color:var(--raw-blue-300) transparent} html[data-ui-variant="os"] *::-webkit-scrollbar{width:10px;height:10px} html[data-ui-variant="os"] *::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:#66809a;background-clip:padding-box} html[data-ui-variant="os"] *::-webkit-scrollbar-track{background:transparent} /* Precision icon rail. Every button proxies an existing dashboard control. */ .os-control-rail{ position:fixed;inset:0 auto 0 0;z-index:130;width:72px; display:flex;flex-direction:column;align-items:center;gap:8px; padding:10px 8px 12px;border-right:1px solid var(--os-line-dark); background:linear-gradient(180deg,var(--os-ink-950),var(--os-ink-2) 72%,var(--os-ink)); box-shadow:12px 0 34px -28px rgba(0,0,0,.8); } .os-rail-brand{ width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center; border:1px solid rgba(255,255,255,.15); /* keep light divider for brand mark */border-radius:13px; background:linear-gradient(145deg,var(--os-cobalt-2),var(--os-cobalt)); box-shadow:0 14px 30px -17px rgba(15,98,254,.95),inset 0 1px rgba(255,255,255,.22); color:#fff; } .os-rail-brand svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .os-rail-divider{width:38px;height:1px;flex:0 0 1px;margin:2px 0;background:linear-gradient(90deg,transparent,var(--os-ink-800),transparent)} .os-rail-scroll{width:100%;display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;gap:5px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none} .os-rail-scroll::-webkit-scrollbar{display:none} .os-rail-button,.os-rail-link{ position:relative;width:46px;height:44px;flex:0 0 44px;display:grid;place-items:center; padding:0;border:1px solid transparent;border-radius:10px;background:transparent; color:#8ba3bd;text-decoration:none!important;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease; } .os-rail-button svg,.os-rail-link svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round} .os-rail-button:hover,.os-rail-link:hover{border-color:var(--os-ink-800);background:var(--os-ink-900);color:#fff;transform:translateY(-1px)} .os-rail-button[aria-current="page"],.os-rail-button[aria-pressed="true"]{ border-color:var(--os-cobalt-2);background:linear-gradient(180deg,var(--os-cobalt-2),var(--os-cobalt));color:#fff; box-shadow:0 10px 24px -16px rgba(33,199,246,.9),inset 0 1px rgba(255,255,255,.18); } .os-rail-button::after,.os-rail-link::after{ content:attr(data-tip);position:absolute;left:54px;top:50%;z-index:150; transform:translate(6px,-50%);min-width:max-content;max-width:260px; padding:7px 10px;border:1px solid #284a69;border-radius:8px;background:#071a2e; color:#eaf4ff;font-size:11px;font-weight:650;letter-spacing:.01em; box-shadow:var(--os-shadow-float);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,transform .14s ease; } .os-rail-button:hover::after,.os-rail-button:focus-visible::after,.os-rail-link:hover::after,.os-rail-link:focus-visible::after{opacity:1;visibility:visible;transform:translate(0,-50%)} .os-rail-link{margin-top:auto;color:#7f96ae} .os-rail-button:focus-visible,.os-rail-link:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(33,199,246,.32)} /* Header becomes a compact observability command bar. */ html[data-ui-variant="os"] .topbar{ z-index:45!important;padding:0!important;border:0!important;border-bottom:1px solid var(--os-line-dark)!important; background:var(--os-ink-950)!important;box-shadow:0 15px 32px -30px rgba(0,0,0,.88)!important; } html[data-ui-variant="os"] .topbar .row:first-child{ min-height:64px!important;display:flex!important;align-items:center!important;gap:16px!important; padding:8px 20px!important;border:0!important;background:linear-gradient(90deg,var(--os-ink-950),var(--os-ink-2) 62%,var(--os-ink))!important; } html[data-ui-variant="os"] .topbar h1{min-width:0!important;flex:1;color:#f7fbff!important;font-size:18px!important;font-weight:730!important;letter-spacing:-.03em!important} html[data-ui-variant="os"] .topbar h1 .dot{width:38px!important;height:38px!important;flex-basis:38px!important;margin-right:10px!important;border-radius:11px!important;background:linear-gradient(145deg,var(--os-cobalt-2),var(--os-cobalt))!important;box-shadow:0 12px 24px -15px rgba(33,199,246,.95)!important} html[data-ui-variant="os"] .product-kicker{color:#78a4cb!important;font-size:8px!important;letter-spacing:.16em!important} html[data-ui-variant="os"] #brandName{color:#f7fbff} html[data-ui-variant="os"] #rootLabel{max-width:320px!important;color:#7f98b2!important} html[data-ui-variant="os"] .release-badge{border-color:#285171!important;background:#0b2945!important;color:#c8e8ff!important} .os-variant-pill{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 10px;border:1px solid #2c5273;border-radius:999px;background:#0a223b;color:#b9d8f3;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase} .os-variant-pill::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--os-cyan);box-shadow:0 0 10px rgba(33,199,246,.8)} html[data-ui-variant="os"] body.os-runtime-ready .topbar .views, html[data-ui-variant="os"] body.os-runtime-ready .topbar .deepdive{display:none!important} html[data-ui-variant="os"] .topbar .row:nth-child(2){ min-height:68px!important;display:grid!important;grid-template-columns:auto minmax(300px,1.15fr) minmax(220px,.72fr) minmax(180px,.45fr) minmax(300px,1fr) auto!important; gap:12px!important;padding:12px 18px!important;border:0!important;border-top:1px solid #173652!important;background:#07182b!important; } html[data-ui-variant="os"] .topbar .field-picker, html[data-ui-variant="os"] .filter-control, html[data-ui-variant="os"] #counters{min-height:44px!important;border:1px solid #24435f!important;border-radius:9px!important;background:#0b2239!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important} html[data-ui-variant="os"] .topbar .field-picker label, html[data-ui-variant="os"] .filter-control label{color:#7891ac!important;font-size:8px!important;letter-spacing:.14em!important} html[data-ui-variant="os"] .topbar input[list], html[data-ui-variant="os"] .topbar select, html[data-ui-variant="os"] .searchbox{border:0!important;background:transparent!important;color:#edf6ff!important;box-shadow:none!important} html[data-ui-variant="os"] .topbar option{background:#0b2239;color:#f0f7ff} html[data-ui-variant="os"] #counters{display:flex!important;align-items:center!important;color:#b9cadd!important;white-space:nowrap!important} html[data-ui-variant="os"] #counters::before{content:"";width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--os-mint);box-shadow:0 0 10px rgba(31,191,159,.7)} /* Three-pane investigation workspace. */ html[data-ui-variant="os"] .layout{gap:12px!important;padding:12px!important;background:radial-gradient(circle at 55% 0,#f3f8fc 0,var(--os-canvas) 54%,#e3ebf3 100%)!important} html[data-ui-variant="os"] .layout.detail-open{grid-template-columns:290px minmax(0,1fr) minmax(390px,470px)!important} html[data-ui-variant="os"] .layout.left-collapsed.detail-open{grid-template-columns:minmax(0,1fr) minmax(390px,470px)!important} html[data-ui-variant="os"] .panel,html[data-ui-variant="os"] .timeline{border:1px solid #d4dee8!important;border-radius:13px!important;background:var(--os-surface)!important;box-shadow:var(--os-shadow)!important;overflow:hidden} html[data-ui-variant="os"] .panel>h2,html[data-ui-variant="os"] .timeline h2{min-height:50px!important;padding:0 14px!important;border-bottom:1px solid #e0e7ef!important;background:linear-gradient(180deg,#fff,#f8fbfd)!important;color:#1b2d42!important;font-size:12.5px!important;font-weight:760!important} html[data-ui-variant="os"] .layout>main.panel>h2::before{width:5px!important;height:24px!important;margin-right:9px!important;border-radius:999px!important;background:linear-gradient(180deg,var(--os-cyan),var(--os-cobalt))!important;box-shadow:none!important} /* Context inventory becomes the dark left context rail from the designs. */ html[data-ui-variant="os"] #categoryPanel{border-color:#183754!important;background:var(--os-ink-900)!important;box-shadow:0 20px 44px -34px rgba(0,0,0,.9)!important} html[data-ui-variant="os"] #categoryPanel>h2{border-bottom-color:#1d3c59!important;background:#071a2e!important;color:#dcecff!important} html[data-ui-variant="os"] #categoryPanel>h2::before{background:var(--os-cyan)!important;border:0!important;box-shadow:0 0 0 4px rgba(33,199,246,.1)!important} html[data-ui-variant="os"] #categoryPanel .meta{color:#7893ae!important} html[data-ui-variant="os"] #categoryPanel .body{background:linear-gradient(180deg,#081c31,#061629)!important} html[data-ui-variant="os"] .cat-list .cat{margin:8px!important;padding:12px!important;border:1px solid #1c3c59!important;border-radius:10px!important;background:#0b2239!important;color:#dce9f6!important;box-shadow:none!important} html[data-ui-variant="os"] .cat-list .cat:hover{border-color:#326a99!important;background:#0e2a46!important;transform:translateY(-1px)} html[data-ui-variant="os"] .cat-list .cat.active{border-color:#3ca6ff!important;background:linear-gradient(145deg,#103a63,#0c2c4b)!important;box-shadow:inset 3px 0 0 var(--os-cyan),0 14px 28px -24px rgba(33,199,246,.8)!important} html[data-ui-variant="os"] .cat-list .cat b{color:#f3f8ff!important} html[data-ui-variant="os"] .cat-list .cat .name{color:#f3f8ff!important} html[data-ui-variant="os"] .cat-list .cat .muted,html[data-ui-variant="os"] .cat-list .cat small{color:#8ea6bf!important} html[data-ui-variant="os"] .cat-list .badge{border-color:#31516e!important;background:#112c47!important;color:#bcd2e7!important} /* Canvas: white analysis surface with dotted topology substrate. */ html[data-ui-variant="os"] .layout>main.panel{border-color:#cdd9e4!important;background:#fff!important} html[data-ui-variant="os"] #intelContext{border-bottom-color:#dfe7ef!important;background:#f8fbfd!important} html[data-ui-variant="os"] #canvasToolbar{border-bottom-color:#dfe7ef!important;background:#fff!important} html[data-ui-variant="os"] #canvas{background-color:#fbfdff!important;background-image:radial-gradient(#c7d8e9 .72px,transparent .72px)!important;background-size:16px 16px!important} html[data-ui-variant="os"] #canvas svg{filter:drop-shadow(0 14px 20px rgba(24,54,86,.05))} html[data-ui-variant="os"] #canvas .svg-step:focus-visible rect, html[data-ui-variant="os"] #canvas .map-node:focus-visible rect{stroke:var(--os-cobalt)!important;stroke-width:3!important;filter:drop-shadow(0 0 7px rgba(15,98,254,.45))} html[data-ui-variant="os"] .toolbar button,html[data-ui-variant="os"] .intel-context button{min-height:36px;border-radius:8px!important} html[data-ui-variant="os"] .toolbar button.active,html[data-ui-variant="os"] .toolbar button[aria-pressed="true"]{border-color:var(--os-cobalt)!important;background:var(--os-cobalt)!important;color:#fff!important;box-shadow:0 8px 16px -12px rgba(15,98,254,.8)!important} html[data-ui-variant="os"] .enh-ctrls{border-color:#cbd8e5!important;border-radius:10px!important;background:rgba(255,255,255,.96)!important;box-shadow:var(--os-shadow-float)!important} html[data-ui-variant="os"] .enh-ctrls button{border:1px solid transparent!important;background:#f4f8fb!important;color:#24415f!important} html[data-ui-variant="os"] .enh-ctrls button:hover{border-color:#a9cef4!important;background:#eaf4ff!important;color:#0f62fe!important} /* Right Evidence Lens: only occupies space when the existing app opens it. */ html[data-ui-variant="os"] #detailPanel{border-color:#173b5b!important;background:linear-gradient(180deg,#09213a,#06182b)!important;color:#d9e9f8!important;box-shadow:0 24px 60px -38px rgba(1,10,22,.95)!important} html[data-ui-variant="os"] #detailPanel>h2{border-bottom-color:#1c3d5b!important;background:#071b30!important;color:#f2f8ff!important} html[data-ui-variant="os"] #detailPanel>h2::before{content:"EVIDENCE LENS";margin-right:auto;color:#69bafa;font-size:8px;font-weight:850;letter-spacing:.16em} html[data-ui-variant="os"] #detailPanel>.body{background:transparent!important;color:#d9e9f8!important} html[data-ui-variant="os"] #detailPanel .card,html[data-ui-variant="os"] #detailPanel .detail-card,html[data-ui-variant="os"] #detailPanel .section-card,html[data-ui-variant="os"] #detailPanel .intel-surface{border-color:#214766!important;background:#0c2944!important;color:#dcebf8!important;box-shadow:none!important} html[data-ui-variant="os"] #detailPanel h3,html[data-ui-variant="os"] #detailPanel h4,html[data-ui-variant="os"] #detailPanel b{color:#f4f9ff!important} html[data-ui-variant="os"] #detailPanel .muted,html[data-ui-variant="os"] #detailPanel small,html[data-ui-variant="os"] #detailPanel p{color:#9eb3c8!important} html[data-ui-variant="os"] #detailPanel a{color:#75c7ff!important} html[data-ui-variant="os"] #detailPanel button{border-color:#2a5274;background:#102f4e;color:#e6f2fc} html[data-ui-variant="os"] #detailPanel button:hover{border-color:#3ca6ff;background:#143b60} html[data-ui-variant="os"] #detailPanel .intel-kpi{border-color:#214866!important;background:#0d2b47!important} html[data-ui-variant="os"] #detailPanel .intel-kpi strong{color:#fff!important} /* Bottom lineage rail and release footer. */ html[data-ui-variant="os"] .timeline{border-color:#b9d7f2!important;background:#f8fbfe!important} html[data-ui-variant="os"] .timeline h2{background:#071b30!important;border-bottom-color:#1f3d58!important;color:#eaf5ff!important} html[data-ui-variant="os"] .timeline .tl-body{background:linear-gradient(180deg,#f7fbfe,#eef5fa)!important} html[data-ui-variant="os"] .tl-step{border-radius:10px!important;box-shadow:0 10px 24px -22px rgba(7,31,55,.7)!important} html[data-ui-variant="os"] .foot-shell{border-top-color:#173650!important;background:#061426!important;color:#a9bed3!important} html[data-ui-variant="os"] .foot{background:#061426!important} html[data-ui-variant="os"] .foot .kpi-mini{border-color:#1f405d!important;background:#0a2239!important;color:#a9bed3!important} html[data-ui-variant="os"] .foot .kpi-mini b{color:#6ec8ff!important} /* KPI/data cards use semantic top accents rather than decorative gradients. */ html[data-ui-variant="os"] .process-insights>div,html[data-ui-variant="os"] .intel-kpi,html[data-ui-variant="os"] .kpi{position:relative;border-color:#d7e1eb!important;border-radius:11px!important;background:#fff!important;box-shadow:0 12px 26px -24px rgba(7,31,55,.68)!important} html[data-ui-variant="os"] .process-insights>div::before,html[data-ui-variant="os"] .intel-kpi::before{content:"";position:absolute;inset:0 0 auto;height:2px;border-radius:11px 11px 0 0;background:var(--os-cobalt-2)} html[data-ui-variant="os"] .process-insights>div:nth-child(3n+2)::before,html[data-ui-variant="os"] .intel-kpi:nth-child(3n+2)::before{background:var(--os-violet)} html[data-ui-variant="os"] .process-insights>div:nth-child(3n)::before,html[data-ui-variant="os"] .intel-kpi:nth-child(3n)::before{background:var(--os-mint)} /* Full-screen workbenches. Existing modal IDs and event lifecycle stay intact. */ html[data-ui-variant="os"] .modal{background:rgba(1,8,17,.78)!important;backdrop-filter:blur(7px)} html[data-ui-variant="os"] .modal .box{border:1px solid #224665!important;border-radius:14px!important;background:#f5f8fb!important;box-shadow:0 34px 100px -36px rgba(0,0,0,.9)!important} html[data-ui-variant="os"] .modal .box>header{min-height:60px!important;border-bottom-color:#1c3d5a!important;background:#06182b!important;color:#f3f8ff!important} html[data-ui-variant="os"] .modal .box>header h2{font-size:15px!important;letter-spacing:-.02em} html[data-ui-variant="os"] .modal .box>header h2::before{content:"LINEAGE OS / ";color:#4eb8ff;font-size:8px;font-weight:850;letter-spacing:.16em} html[data-ui-variant="os"] .modal .box>header button{min-width:72px;min-height:38px;border-color:#31516f!important;background:#0e2b47!important;color:#e7f3ff!important} html[data-ui-variant="os"] .modal .box>header button:hover{border-color:#51adf6!important;background:#143b5f!important} html[data-ui-variant="os"] #m-mapping .box,html[data-ui-variant="os"] #m-evidence .box{background:#061426!important;color:#d9e7f4!important} html[data-ui-variant="os"] #m-mapping .content,html[data-ui-variant="os"] #m-evidence .content{background:radial-gradient(circle at 50% 0,#0b2844,#061426 68%)!important} html[data-ui-variant="os"] #m-mapping table,html[data-ui-variant="os"] #m-evidence table{color:#d9e7f4!important} html[data-ui-variant="os"] #m-mapping th,html[data-ui-variant="os"] #m-evidence th{border-color:#24445f!important;background:#0b2944!important;color:#8fc9f4!important} html[data-ui-variant="os"] #m-mapping td,html[data-ui-variant="os"] #m-evidence td{border-color:#183650!important;background:#081d32!important} html[data-ui-variant="os"] #m-mapping tr:hover td,html[data-ui-variant="os"] #m-evidence tr:hover td{background:#0d2a46!important} html[data-ui-variant="os"] #m-mapping .search,html[data-ui-variant="os"] #m-evidence .search{border-color:#284967!important;background:#0a223a!important;color:#eaf4fe!important} html[data-ui-variant="os"] #m-export .excel-intro{border-color:#bdd9f2!important;background:linear-gradient(135deg,#f0f8ff,#f8fbfd)!important} html[data-ui-variant="os"] #m-export .excel-card{border-color:#d2dee9!important;border-radius:11px!important;background:#fff!important;box-shadow:0 12px 30px -28px rgba(7,31,55,.7)!important} .os-export-badge{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:6px 9px;border:1px solid #9fd0f7;border-radius:8px;background:#eaf6ff;color:#175d98;font-size:10px;font-weight:750} .os-export-badge::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--os-cyan)} /* Explicit state semantics and focus. */ html[data-ui-variant="os"] :focus-visible{outline:0!important;box-shadow:0 0 0 3px rgba(33,199,246,.32)!important} html[data-ui-variant="os"] .evidence-state.HIGH,html[data-ui-variant="os"] .trust-badge.HIGH{border-color:#53d6bb!important;background:#e8fbf6!important;color:#087a64!important} html[data-ui-variant="os"] .evidence-state.MED,html[data-ui-variant="os"] .trust-badge.MED{border-color:#f5c36b!important;background:#fff7e6!important;color:#9a5a00!important} html[data-ui-variant="os"] .evidence-state.LOW,html[data-ui-variant="os"] .trust-badge.LOW{border-color:#ff9b94!important;background:#fff0ef!important;color:#b42318!important} html[data-ui-variant="os"] .state-panel{border-radius:12px!important} /* Responsive: at compact widths the original complete navigation returns. */ @media(max-width:1180px){ html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:minmax(280px,1fr) minmax(200px,.7fr) minmax(160px,.45fr) minmax(240px,.8fr)!important} html[data-ui-variant="os"] #counters{grid-column:1/-1!important;justify-self:stretch!important} html[data-ui-variant="os"] .layout.detail-open{grid-template-columns:260px minmax(0,1fr)!important} } @media(max-width:1024px){ html[data-ui-variant="os"] body{padding-left:0} .os-control-rail{display:none} html[data-ui-variant="os"] body.os-runtime-ready .topbar .views, html[data-ui-variant="os"] body.os-runtime-ready .topbar .deepdive{display:flex!important} html[data-ui-variant="os"] .topbar .row:first-child{flex-wrap:wrap!important} html[data-ui-variant="os"] .topbar .views,html[data-ui-variant="os"] .topbar .deepdive{width:100%;overflow-x:auto;flex:0 0 100%} html[data-ui-variant="os"] .topbar .views button,html[data-ui-variant="os"] .topbar .deepdive button{flex:0 0 auto;min-height:44px!important} .os-variant-pill{margin-left:auto} } @media(max-width:840px){ html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:1fr!important;padding:8px 10px!important} html[data-ui-variant="os"] #counters{grid-column:auto!important} html[data-ui-variant="os"] .layout,html[data-ui-variant="os"] .layout.detail-open,html[data-ui-variant="os"] .layout.left-collapsed.detail-open{grid-template-columns:1fr!important;padding:8px!important;gap:8px!important} html[data-ui-variant="os"] .layout.detail-open #detailPanel{position:fixed!important;inset:8px!important;width:auto!important;z-index:90!important} html[data-ui-variant="os"] .modal .box{border-radius:10px!important} } @media(max-width:560px){ html[data-ui-variant="os"] .topbar .row:first-child{padding:9px 10px!important} html[data-ui-variant="os"] .topbar h1 .dot{width:36px!important;height:36px!important;flex-basis:36px!important} .os-variant-pill{min-height:26px;padding:0 8px;font-size:8px} html[data-ui-variant="os"] #rootLabel{display:none!important} } @media(prefers-reduced-motion:reduce){ .os-rail-button,.os-rail-link{transition:none!important} html[data-ui-variant="os"] *{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ------------------------------------------------------------------------- Reference-fidelity composition — OS 2.0 preview.2 The prompt-pack is a layout system, not a dark theme. These rules keep the Classic DOM/contracts but reproduce its global header, context rail, white analysis workspace, per-view Lens treatment and compact status rail. ------------------------------------------------------------------------- */ html[data-ui-variant="os"] body{padding-left:52px!important;background:#eaf0f5!important} .os-control-rail{top:64px!important;width:52px!important;padding:8px 3px 10px!important;gap:5px!important} .os-rail-scroll{gap:3px!important} .os-rail-button,.os-rail-link{width:44px!important;height:42px!important;flex-basis:42px!important;border-radius:7px!important} .os-rail-button svg,.os-rail-link svg{width:19px!important;height:19px!important} .os-rail-button::after,.os-rail-link::after{left:48px!important} html[data-ui-variant="os"] .topbar{margin-left:-52px!important;width:calc(100% + 52px)!important} html[data-ui-variant="os"] .topbar .row:first-child{ min-height:64px!important;height:64px!important;flex-wrap:nowrap!important;gap:12px!important;padding:8px 16px!important; background:#061426!important; } html[data-ui-variant="os"] .topbar h1{flex:0 1 262px!important;min-width:205px!important;max-width:295px!important;margin:0!important;overflow:hidden!important;font-size:16px!important} html[data-ui-variant="os"] .topbar h1 .dot{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:8px!important} html[data-ui-variant="os"] #rootLabel{display:none!important} html[data-ui-variant="os"] .release-badge{padding:4px 7px!important;font-size:8px!important} .os-variant-pill{min-height:24px!important;padding:0 8px!important;font-size:7.5px!important;border-radius:6px!important} .os-global-nav{display:flex;align-items:stretch;align-self:stretch;min-width:0;overflow:hidden;border-left:1px solid #1a3854} .os-top-nav-button{ position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:100%;padding:0 13px; border:0;border-right:1px solid #132f49;border-radius:0;background:transparent;color:#9db1c5;font:700 11px/1.1 inherit;white-space:nowrap; } .os-global-nav .os-top-nav-button{border-color:#132f49!important;border-width:0 1px 0 0!important;border-radius:0!important;background:transparent!important;color:#9db1c5!important;box-shadow:none!important;opacity:1!important} .os-top-nav-button svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .os-top-nav-button::after{content:"";position:absolute;inset:auto 11px 0;height:2px;border-radius:2px;background:transparent} .os-global-nav .os-top-nav-button:hover{background:#0b2137!important;color:#fff!important} .os-global-nav .os-top-nav-button[aria-current="page"],.os-global-nav .os-top-nav-button[aria-pressed="true"]{background:#0f62d6!important;color:#fff!important} .os-top-nav-button[aria-current="page"]::after,.os-top-nav-button[aria-pressed="true"]::after{background:#21c7f6;box-shadow:0 -2px 10px rgba(33,199,246,.58)} .os-global-search{ display:flex;align-items:center;gap:9px;width:clamp(230px,24vw,390px);height:38px;margin-left:auto;padding:0 11px; border:1px solid #27455f;border-radius:7px;background:#0a2036;color:#8fa6bb;font:550 11px/1 inherit;text-align:left; } .topbar .os-global-search{flex:1 1 260px!important;max-width:390px!important;margin-left:0!important;border-color:#27455f!important;background:#0a2036!important;color:#8fa6bb!important;box-shadow:none!important;opacity:1!important} .os-global-search svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:#6fc8ff;stroke-width:1.7} .os-global-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .os-global-search kbd{margin-left:auto;padding:3px 6px;border:1px solid #31516c;border-radius:4px;background:#07192b;color:#94abc0;font:700 8px/1 inherit} .topbar .os-global-search:hover{border-color:#4a8fca!important;background:#0c2843!important;color:#dcecff!important} html[data-ui-variant="os"] body.os-runtime-ready .topbar .views, html[data-ui-variant="os"] body.os-runtime-ready .topbar .deepdive{display:none!important} html[data-ui-variant="os"] .topbar .row:nth-child(2){ min-height:68px!important;display:grid!important;grid-template-columns:auto minmax(300px,1.15fr) minmax(220px,.72fr) minmax(180px,.45fr) minmax(300px,1fr) auto!important; gap:12px!important;padding:12px 18px!important;border:0!important;border-top:1px solid #173652!important;background:#07182b!important; } html[data-ui-variant="os"] .topbar .field-picker, html[data-ui-variant="os"] .filter-control, html[data-ui-variant="os"] #counters{min-height:42px!important;border-color:#d0dbe6!important;border-radius:7px!important;background:#fff!important;color:#263a51!important;box-shadow:0 1px 2px rgba(6,20,38,.04)!important} html[data-ui-variant="os"] .topbar .field-picker label, html[data-ui-variant="os"] .filter-control label{color:#718399!important} html[data-ui-variant="os"] .topbar input[list], html[data-ui-variant="os"] .topbar select, html[data-ui-variant="os"] .searchbox{color:#263a51!important} html[data-ui-variant="os"] .topbar option{background:#fff!important;color:#17273a!important} html[data-ui-variant="os"] #counters{color:#53677e!important} html[data-ui-variant="os"] .layout{height:calc(100vh - 198px)!important;min-height:430px!important;gap:8px!important;padding:8px!important;background:#eaf0f5!important} html[data-ui-variant="os"] .layout.detail-open{grid-template-columns:268px minmax(0,1fr) minmax(350px,410px)!important} html[data-ui-variant="os"] .layout.left-collapsed.detail-open{grid-template-columns:minmax(0,1fr) minmax(350px,410px)!important} html[data-ui-variant="os"] .layout.lineage-open{grid-template-rows:minmax(300px,1fr) 148px!important} html[data-ui-variant="os"] .panel,html[data-ui-variant="os"] .timeline{border-radius:8px!important;box-shadow:0 5px 18px -14px rgba(6,20,38,.45)!important} html[data-ui-variant="os"] .panel>h2,html[data-ui-variant="os"] .timeline h2{min-height:44px!important;height:44px!important;padding:0 12px!important;font-size:12px!important} html[data-ui-variant="os"] .layout>main.panel>h2::before{height:18px!important;width:3px!important;margin-right:7px!important} html[data-ui-variant="os"] #categoryPanel{background:#081a2d!important} html[data-ui-variant="os"] #categoryPanel>h2{background:#07182a!important} html[data-ui-variant="os"] #categoryPanel .body{background:#081a2d!important} html[data-ui-variant="os"] .cat-list .cat{margin:5px 7px!important;padding:9px 10px!important;border-radius:7px!important} html[data-ui-variant="os"] .cat-list .cat:hover{transform:none!important} html[data-ui-variant="os"] #intelContext{min-height:37px!important;padding-block:5px!important} html[data-ui-variant="os"] #canvasToolbar{min-height:46px!important;padding-block:5px!important} html[data-ui-variant="os"] #canvas{min-height:0!important} /* Detail treatment changes by product surface: dark evidence on graph focus, quiet light facts everywhere else, exactly as in the supplied screens. */ html[data-ui-variant="os"] #detailPanel{border-color:#d3dde7!important;background:#fff!important;color:#17273a!important;box-shadow:0 14px 34px -28px rgba(6,20,38,.7)!important} html[data-ui-variant="os"] #detailPanel>h2{border-bottom-color:#dce4ec!important;background:#fff!important;color:#17273a!important} html[data-ui-variant="os"] #detailPanel>h2::before{color:#377fbf!important} html[data-ui-variant="os"] #detailPanel>.body{background:#f8fafc!important;color:#17273a!important} html[data-ui-variant="os"] #detailPanel .card,html[data-ui-variant="os"] #detailPanel .detail-card,html[data-ui-variant="os"] #detailPanel .section-card,html[data-ui-variant="os"] #detailPanel .intel-surface{border-color:#d7e1eb!important;background:#fff!important;color:#17273a!important} html[data-ui-variant="os"] #detailPanel h3,html[data-ui-variant="os"] #detailPanel h4,html[data-ui-variant="os"] #detailPanel b{color:#17273a!important} html[data-ui-variant="os"] #detailPanel .muted,html[data-ui-variant="os"] #detailPanel small,html[data-ui-variant="os"] #detailPanel p{color:#677a90!important} html[data-ui-variant="os"] #detailPanel a{color:#0f62c7!important} html[data-ui-variant="os"] #detailPanel button{border-color:#c8d6e4;background:#fff;color:#20384f} html[data-ui-variant="os"] #detailPanel button:hover{border-color:#66a7df;background:#eef7ff} html[data-ui-variant="os"] #detailPanel .intel-kpi{border-color:#d5e0ea!important;background:#f7fafc!important} html[data-ui-variant="os"] #detailPanel .intel-kpi strong{color:#17273a!important} html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel{border-color:#173b5b!important;background:#071b30!important;color:#d9e9f8!important} html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel>h2{border-bottom-color:#1c3d5b!important;background:#071b30!important;color:#f2f8ff!important} html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel>.body{background:#081d32!important;color:#d9e9f8!important} html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel .card,html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel .detail-card,html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel .section-card,html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel .intel-surface{border-color:#214766!important;background:#0c2944!important;color:#dcebf8!important} html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel h3,html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel h4,html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel b,html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel .intel-kpi strong{color:#fff!important} html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel .muted,html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel small,html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel p{color:#9eb3c8!important} html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel .intel-kpi{border-color:#214866!important;background:#0d2b47!important} .os-graph-guide{display:grid;grid-template-columns:1fr 1.15fr 1fr;min-height:47px;border-bottom:1px solid #dbe5ee;background:#fff} .os-graph-guide[hidden]{display:none!important} .os-graph-guide>div{display:flex;align-items:center;gap:7px;padding:7px 14px;border-right:1px solid #e1e8ef} .os-graph-guide>div:last-child{border-right:0} .os-graph-guide b{color:#193249;font-size:10px;text-transform:uppercase;letter-spacing:.09em} .os-graph-guide span{color:#8291a2;font-size:9px} .os-focus-toggle,.os-field360-toggle{margin-left:auto!important;min-height:29px!important;padding:0 10px!important;border:1px solid #c4d3e1!important;border-radius:6px!important;background:#fff!important;color:#24415c!important;font:700 9px/1 inherit!important} .os-focus-toggle:hover,.os-field360-toggle:hover{border-color:#5da9e8!important;background:#eef7ff!important;color:#0d64b3!important} .os-focus-docks{position:fixed;right:14px;bottom:14px;z-index:175;display:none;gap:7px} .os-focus-docks button{min-height:38px;padding:0 13px;border:1px solid #2f5575;border-radius:7px;background:#071b30;color:#eaf5ff;font:750 10px/1 inherit;box-shadow:0 12px 30px -18px rgba(0,0,0,.75)} body.os-focus-mode .os-focus-docks{display:flex} body.os-focus-mode .topbar .row:nth-child(2),body.os-focus-mode #categoryPanel,body.os-focus-mode #detailPanel,body.os-focus-mode .timeline,body.os-focus-mode .foot-shell{display:none!important} body.os-focus-mode .layout,body.os-focus-mode .layout.detail-open,body.os-focus-mode .layout.left-collapsed.detail-open{height:calc(100vh - 64px)!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;padding:0!important} body.os-focus-mode .layout>main.panel{grid-column:1!important;grid-row:1!important;border:0!important;border-radius:0!important} body.os-focus-mode.os-focus-context-open #categoryPanel{display:flex!important;position:fixed;left:58px;top:72px;bottom:12px;width:280px;z-index:170} body.os-focus-mode.os-focus-evidence-open #detailPanel{display:flex!important;position:fixed;right:12px;top:72px;bottom:12px;width:390px;z-index:170} .os-milestone-ribbon{display:flex;align-items:center;gap:5px;min-height:48px;padding:6px 10px;overflow-x:auto;border-bottom:1px solid #dbe5ee;background:#f7fafc;scrollbar-width:thin} .os-milestone-ribbon[hidden]{display:none!important} .os-ribbon-label{position:sticky;left:0;z-index:2;display:inline-flex;align-items:center;align-self:stretch;padding:0 9px;border-right:1px solid #dce5ed;background:#f7fafc;color:#667b91;font-size:9px;font-weight:800;text-transform:uppercase;white-space:nowrap} .os-milestone-ribbon button{width:30px;height:30px;flex:0 0 30px;padding:0;border:1px solid #b9d5ec;border-radius:50%;background:#fff;color:#2b678f;font:800 8px/1 inherit} .os-milestone-ribbon button:hover{border-color:#1597da;background:#eaf7ff;color:#075b90} /* Field 360 is generated from the active field/detail evidence; the original tracer stays one click away and remains the only data source. */ #canvas.os-field360-active>.os-field360{display:grid!important} #canvas.os-field360-active>:not(.os-field360){display:none!important} body.os-field360-technical #canvas.os-field360-active>.os-field360{display:none!important} body.os-field360-technical #canvas.os-field360-active>:not(.os-field360){display:block!important} .os-field360{min-height:100%;grid-template-columns:minmax(270px,340px) minmax(500px,1fr);background:#f6f9fc} .os-field-facts{padding:18px;border-right:1px solid #d8e2eb;background:#fff;overflow:auto} .os-field-facts header{padding-bottom:14px;border-bottom:1px solid #dfe7ee} .os-field-facts header span{color:#2276b9;font-size:8px;font-weight:850;letter-spacing:.15em} .os-field-facts h3{margin:5px 0 0;color:#14273b;font-size:16px;letter-spacing:-.02em} .os-field-facts article{margin-top:13px;padding:12px;border:1px solid #d7e2eb;border-radius:7px;background:#f8fafc} .os-field-facts article>b{color:#15324a;font-size:10px;text-transform:uppercase;letter-spacing:.09em} .os-field-facts dl,.os-mapping-lens dl{margin:9px 0 0} .os-field-facts dl>div,.os-mapping-lens dl>div{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(110px,1.2fr);gap:9px;padding:7px 0;border-top:1px solid #e1e8ef} .os-field-facts dt,.os-mapping-lens dt{color:#77899c;font-size:9px} .os-field-facts dd,.os-mapping-lens dd{margin:0;color:#193048;font-size:10px;font-weight:700;overflow-wrap:anywhere} .os-field-rings{position:relative;display:grid;place-items:center;min-height:510px;padding:30px;overflow:hidden;background-image:radial-gradient(#c7d8e9 .65px,transparent .65px);background-size:16px 16px} .os-field-rings .ring{display:grid;place-items:center;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset} .ring-systems{width:min(57vw,590px);height:min(57vw,590px);background:rgba(36,113,186,.10);border:2px solid #5598cb} .ring-steps{width:76%;height:76%;background:rgba(38,179,166,.12);border:2px solid #37a99d} .ring-origin{width:68%;height:68%;background:rgba(122,76,224,.12);border:2px solid #8668ce} .ring-field{width:60%;height:60%;background:#071b30;border:3px solid #21c7f6;color:#fff;box-shadow:0 20px 40px -25px rgba(3,24,45,.8)!important} .os-field-rings .ring>span{position:absolute;display:flex;flex-direction:column;align-items:center;max-width:180px;color:#44627d;font-size:8px;font-weight:750;text-transform:uppercase;letter-spacing:.08em;text-align:center;pointer-events:none} .ring-systems>span{transform:translateY(-255px)}.ring-steps>span{transform:translateY(-182px)}.ring-origin>span{transform:translateY(-115px)}.ring-field>span{transform:none;color:#8edcff!important} .os-field-rings .ring strong{display:block;margin-top:4px;color:#183650;font-size:11px;letter-spacing:0;text-transform:none;overflow-wrap:anywhere} .ring-field strong{max-width:145px;color:#fff!important;font-size:15px!important;overflow-wrap:normal!important;word-break:normal}.ring-field small{margin-top:5px;color:#9ab2c8;font-size:9px;letter-spacing:0;text-transform:none} .os-ring-legend{position:absolute;left:20px;bottom:16px;display:flex;gap:13px;padding:8px 10px;border:1px solid #d5e0e9;border-radius:6px;background:rgba(255,255,255,.92);color:#557086;font-size:9px} .os-ring-legend span:nth-child(1){color:#8668ce}.os-ring-legend span:nth-child(2){color:#299e91}.os-ring-legend span:nth-child(3){color:#3e88bf} /* Specialized full-screen workbenches. */ html[data-ui-variant="os"] #m-mapping .box,html[data-ui-variant="os"] #m-loader .box,html[data-ui-variant="os"] #m-systems .box,html[data-ui-variant="os"] #m-evidence .box{width:calc(100vw - 24px)!important;max-width:none!important;height:calc(100vh - 24px)!important;max-height:none!important;margin:12px!important} .os-mapping-workbench{display:grid!important;grid-template-columns:minmax(0,1fr) 330px;grid-template-rows:auto auto minmax(0,1fr);gap:10px!important;padding:12px!important;overflow:hidden!important} .os-mapping-workbench>.search,.os-mapping-workbench>#mappingSearch{grid-column:1/2} .os-mapping-workbench>#mappingKpis{grid-column:1/2} .os-mapping-workbench>#mappingTable,.os-mapping-workbench>.table-wrap{grid-column:1/2;min-height:0;overflow:auto} .os-mapping-lens{grid-column:2;grid-row:1/-1;min-width:0;padding:16px;border:1px solid #244865;border-radius:8px;background:#0a2238;color:#dceaf7;overflow:auto} .os-mapping-lens header span,.os-evidence-strip span{color:#59baff;font-size:8px;font-weight:850;letter-spacing:.15em} .os-mapping-lens h3{margin:7px 0 0;color:#fff;font-size:15px;overflow-wrap:anywhere} .os-trace-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:16px 0;padding:13px;border:1px solid #214766;border-radius:7px;background:#071b2f;color:#76c8ff;font-size:10px;text-align:center} .os-trace-flow strong{overflow-wrap:anywhere}.os-trace-flow i{color:#45d0b3;font-style:normal} .os-mapping-lens dl>div{border-color:#1e405d!important}.os-mapping-lens dt{color:#8fa6ba}.os-mapping-lens dd{color:#e9f4fd} .os-mapping-lens p{margin-top:15px;padding-top:12px;border-top:1px solid #21425e;color:#9eb3c7;font-size:9px;line-height:1.55} html[data-ui-variant="os"] #m-mapping tr.os-selected-row td{background:#103b60!important;box-shadow:inset 3px 0 0 #21c7f6} .os-loader-audit,.os-systems-workbench{background:#f4f7fa!important;color:#17283b!important} .os-loader-journey{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:8px;margin-bottom:12px;padding:13px;border:1px solid #d6e1ea;border-radius:8px;background:#fff} .os-loader-journey article{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;min-width:0;padding:11px;border:1px solid #d9e4ed;border-radius:7px;background:#f7fafc} .os-loader-journey article>span{grid-row:1/4;align-self:start;display:grid;place-items:center;width:27px;height:27px;border-radius:6px;background:#0f62d6;color:#fff;font-size:8px;font-weight:850} .os-loader-journey article>b{color:#2d4960;font-size:9px;text-transform:uppercase}.os-loader-journey article>strong{color:#102b43;font-size:17px}.os-loader-journey article>small{color:#73879a;font-size:8px}.os-loader-journey>i{color:#4d91c8;font-style:normal} .os-loader-audit #loaderBody,.os-systems-workbench #systemsBody{border:1px solid #d6e0e9;border-radius:8px;background:#fff!important} .os-system-landscape{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:7px;margin-bottom:12px;padding:12px;border:1px solid #d6e1ea;border-radius:8px;background:#fff} .os-system-landscape header{grid-column:1/-1;display:flex;min-height:40px!important;align-items:center;justify-content:space-between;padding:0 0 9px!important;border:0!important;border-bottom:1px solid #e0e7ee!important;background:#fff!important;color:#243d54!important} .os-system-landscape header span{color:#2479bc;font-size:8px;font-weight:850;letter-spacing:.15em}.os-system-landscape header b{color:#243d54;font-size:10px} .os-system-landscape button{display:flex;min-height:54px;flex-direction:column;align-items:flex-start;justify-content:center;padding:8px 10px;border:1px solid #cbdbe8;border-radius:7px;background:#f8fafc;color:#1d3b54;text-align:left} .os-system-landscape button:hover{border-color:#5ba9e3;background:#eef8ff}.os-system-landscape button span{font-size:9px;font-weight:800}.os-system-landscape button small{margin-top:3px;color:#72869a;font-size:7.5px} .os-evidence-strip{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-bottom:12px;padding:13px 15px;border:1px solid #234968;border-radius:8px;background:#0a243d;color:#dceaf7} .os-evidence-strip span{grid-row:1/3}.os-evidence-strip b{color:#fff;font-size:11px}.os-evidence-strip small{color:#9eb4c8;font-size:9px} html[data-ui-variant="os"] .foot-shell{min-height:64px!important;max-height:64px!important;border-color:#d4dee7!important;background:#f8fafc!important;color:#61758a!important} html[data-ui-variant="os"] .foot{background:#f8fafc!important} html[data-ui-variant="os"] .foot .kpi-mini{border-color:#d6e1ea!important;background:#fff!important;color:#667b90!important} html[data-ui-variant="os"] .foot .kpi-mini b{color:#176cae!important} @media(max-width:1540px){ .os-top-nav-button{padding-inline:10px}.os-global-search{width:260px} html[data-ui-variant="os"] .topbar h1{flex-basis:235px!important;max-width:250px!important} } @media(max-width:1360px){ html[data-ui-variant="os"] .topbar h1 .release-badge,html[data-ui-variant="os"] .topbar h1 .os-variant-pill{display:none!important} .os-top-nav-button{padding-inline:8px}.os-top-nav-button span{font-size:10px}.os-global-search{width:205px}.os-global-search kbd{display:none} html[data-ui-variant="os"] .layout.detail-open{grid-template-columns:252px minmax(0,1fr)!important} html[data-ui-variant="os"] .layout.detail-open #detailPanel{position:fixed!important;top:134px;right:8px;bottom:72px;width:min(410px,calc(100vw - 68px));z-index:82!important;box-shadow:0 24px 70px -28px rgba(5,22,40,.55)!important} .os-field360{grid-template-columns:290px minmax(460px,1fr)} .ring-systems{width:min(51vw,520px);height:min(51vw,520px)} .ring-systems>span{transform:translateY(-222px)}.ring-steps>span{transform:translateY(-160px)}.ring-origin>span{transform:translateY(-100px)} } @media(max-width:1120px){ .os-global-nav{overflow-x:auto}.os-top-nav-button span{display:none}.os-top-nav-button{width:44px;flex:0 0 44px}.os-global-search{width:185px} html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:minmax(230px,1fr) minmax(165px,.65fr) minmax(140px,.45fr) minmax(210px,.8fr)!important} html[data-ui-variant="os"] #counters{display:none!important} } @media(min-width:901px) and (max-width:1024px){.os-control-rail{display:flex!important}} @media(max-width:900px){ html[data-ui-variant="os"] body{padding-left:0!important}.os-control-rail{display:none!important} html[data-ui-variant="os"] .topbar{margin-left:0!important;width:100%!important} html[data-ui-variant="os"] .topbar h1{min-width:170px!important;flex-basis:180px!important}.os-global-search{width:44px;flex:0 0 44px;padding:0;justify-content:center}.os-global-search span{display:none} html[data-ui-variant="os"] .topbar .row:nth-child(2){height:auto!important;grid-template-columns:1fr 1fr!important} html[data-ui-variant="os"] .layout{height:calc(100vh - 208px)!important;grid-template-columns:minmax(0,1fr)!important} html[data-ui-variant="os"] #categoryPanel{position:fixed!important;left:8px;top:134px;bottom:72px;width:280px;z-index:82!important} html[data-ui-variant="os"] .layout.left-collapsed #categoryPanel{display:none!important} html[data-ui-variant="os"] .layout.detail-open #detailPanel{top:134px;width:calc(100vw - 16px)} .os-field360{grid-template-columns:1fr;overflow:auto}.os-field-facts{border-right:0;border-bottom:1px solid #d8e2eb}.os-field-rings{min-height:520px} .os-mapping-workbench{grid-template-columns:1fr;grid-template-rows:auto auto minmax(260px,1fr) auto;overflow:auto!important}.os-mapping-lens{grid-column:1;grid-row:auto;min-height:270px} .os-loader-journey{grid-template-columns:1fr 1fr}.os-loader-journey>i{display:none} } @media(max-width:620px){ html[data-ui-variant="os"] .topbar h1{flex:1!important;min-width:0!important}.os-variant-pill,.release-badge{display:none!important} .os-global-nav{order:3;flex:0 0 auto}.os-evidence-nav{display:none}.os-global-search{margin-left:0} html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:1fr!important} .os-loader-journey{grid-template-columns:1fr}.os-system-landscape{grid-template-columns:1fr 1fr} } /* ======================================================================== 2.0.0-preview.3 — reference-screen composition The Classic DOM remains mounted as the interaction authority. These view-specific workspaces are read-only projections of that live model. ======================================================================== */ html[data-ui-variant="os"]{--os-ink:#061426;--os-panel:#0a2035;--os-panel-2:#0d2944;--os-blue:#0f62fe;--os-cyan:#21c7f6;--os-mint:#1fbf9f;--os-violet:#7a4ce0;--os-amber:#f0a429;--os-paper:#fbfcfe;--os-line:#d9e2ec;--os-text:#15233a;--os-muted:#6c7c91} html[data-ui-variant="os"] body{background:radial-gradient(circle at 52% -30%,#12385d 0,#07182a 38%,#061426 78%)!important;color:var(--os-text)} html[data-ui-variant="os"] .topbar{border-bottom:1px solid #173650!important;background:linear-gradient(180deg,#061426 0,#07192b 100%)!important;box-shadow:0 12px 30px -24px #000!important} html[data-ui-variant="os"] .topbar .row:first-child{height:64px!important;padding:0 18px 0 14px!important;gap:16px!important} html[data-ui-variant="os"] .topbar h1{flex:0 0 230px!important;min-width:230px!important;font-size:17px!important;letter-spacing:-.025em!important} html[data-ui-variant="os"] .topbar h1::before{content:'';width:28px;height:28px;flex:0 0 28px;border:1px solid #dbeeff;border-radius:8px;background:linear-gradient(135deg,transparent 45%,rgba(33,199,246,.35));box-shadow:inset 0 0 0 5px #07192b,0 0 18px rgba(33,199,246,.12)} html[data-ui-variant="os"] .topbar h1::before{display:none!important}html[data-ui-variant="os"] .topbar h1>#rootLabel{display:none!important}html[data-ui-variant="os"] .topbar h1>.dot{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:9px!important;background:linear-gradient(145deg,#0f62fe,#168eea)!important;box-shadow:0 10px 24px -15px #1396ff!important} html[data-ui-variant="os"] .topbar h1 .release-badge,html[data-ui-variant="os"] .topbar h1 .os-variant-pill{display:none!important} .os-global-nav{height:46px!important;gap:4px!important;padding:4px!important;border:0!important;background:transparent!important} .os-top-nav-button{height:38px!important;min-width:auto!important;padding:0 13px!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:7px 7px 2px 2px!important;background:transparent!important;color:#aebfd0!important;box-shadow:none!important} .os-top-nav-button:hover{background:#0d2944!important;color:#fff!important}.os-top-nav-button[aria-current="page"],.os-top-nav-button[aria-pressed="true"]{border-bottom-color:#2898ff!important;background:linear-gradient(180deg,#12365a,#0c2742)!important;color:#5cb4ff!important} .os-top-nav-button svg{width:17px!important;height:17px!important}.os-top-nav-button span{font-size:11px!important;font-weight:700!important} .os-global-search{height:40px!important;width:min(330px,24vw)!important;margin-left:auto!important;border-color:#1b3a56!important;border-radius:9px!important;background:#081d32!important;color:#a9bbcc!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important} .os-global-search kbd{border-color:#36516b!important;background:#0d2944!important;color:#b8cad9!important} .os-control-rail{top:64px!important;width:52px!important;border-right:1px solid #18354f!important;background:#07192b!important}.os-rail-scroll{padding:9px 6px!important;gap:7px!important}.os-rail-button,.os-rail-link{width:40px!important;height:40px!important;border-radius:8px!important;color:#9eb4c7!important}.os-rail-button:hover,.os-rail-link:hover{background:#102f4d!important;color:#fff!important}.os-rail-button[aria-pressed="true"]{background:linear-gradient(145deg,#0f62fe,#138bee)!important;color:#fff!important;box-shadow:0 7px 18px -9px #0f62fe!important} html[data-ui-variant="os"] .topbar .row:nth-child(2){height:72px!important;grid-template-columns:185px 190px minmax(220px,1fr) 240px 175px 265px!important;gap:10px!important;padding:8px 10px!important;border-top:1px solid #17344f!important;border-bottom:1px solid #1f4666!important;background:#0a2035!important} html[data-ui-variant="os"] .topbar .row:nth-child(2)::before{content:'Környezet · WSI (Prod)';display:flex;align-items:center;height:52px;padding:0 13px;border:1px solid #234866;border-radius:9px;background:#0c2944;color:#c8d7e5;font-size:10px;font-weight:700} html[data-ui-variant="os"] .topbar .field-picker,html[data-ui-variant="os"] .topbar .filter-control,html[data-ui-variant="os"] .topbar .text-filter{height:52px!important;padding:6px 11px!important;border:1px solid #234866!important;border-radius:9px!important;background:#0c2944!important} html[data-ui-variant="os"] .topbar .field-picker label,html[data-ui-variant="os"] .topbar .filter-control label{font-size:7px!important;color:#8fa7bc!important;letter-spacing:.13em!important} html[data-ui-variant="os"] .topbar input[list],html[data-ui-variant="os"] .topbar select,html[data-ui-variant="os"] .searchbox{height:28px!important;border:0!important;background:transparent!important;color:#f2f7fc!important;font-size:11px!important} html[data-ui-variant="os"] #counters{height:52px!important;min-height:52px!important;border-color:#235374!important;background:#0b2a46!important;color:#9ed4ff!important} html[data-ui-variant="os"] .layout{height:calc(100vh - 208px)!important;min-height:520px!important;grid-template-columns:242px minmax(0,1fr) 330px!important;grid-template-rows:minmax(0,1fr) 34px!important;gap:8px!important;padding:8px 8px 0!important;background:transparent!important} html[data-ui-variant="os"] .layout.detail-open,html[data-ui-variant="os"] .layout.left-collapsed.detail-open{grid-template-columns:242px minmax(0,1fr) 330px!important} html[data-ui-variant="os"] .layout.left-collapsed.detail-open{grid-template-columns:minmax(0,1fr) 330px!important} html[data-ui-variant="os"] .layout.lineage-open{grid-template-rows:minmax(0,1fr) 34px!important} html[data-ui-variant="os"] #categoryPanel,html[data-ui-variant="os"] #detailPanel,html[data-ui-variant="os"] .layout>main.panel{min-width:0;border:1px solid #1c405e!important;border-radius:9px!important;box-shadow:0 18px 45px -32px #000!important} html[data-ui-variant="os"] #categoryPanel{background:#0a2035!important}html[data-ui-variant="os"] #categoryPanel>h2{background:#0a2035!important;color:#e4eef7!important}html[data-ui-variant="os"] #categoryPanel .body{background:#0a2035!important} html[data-ui-variant="os"] #categoryPanel .cat-list{padding:5px!important}html[data-ui-variant="os"] #categoryPanel .cat{min-height:78px!important;margin:4px!important;padding:10px 10px 9px!important;border:1px solid #1a3a55!important;background:#0c2944!important;color:#d7e4ef!important}html[data-ui-variant="os"] #categoryPanel .cat.active{border-color:#1687ff!important;background:linear-gradient(135deg,#0c3152,#0e416b)!important;box-shadow:inset 3px 0 0 #2898ff,0 9px 22px -17px #1687ff!important} html[data-ui-variant="os"] #categoryPanel .cat .name{font-size:11px!important;color:#f4f8fc!important}html[data-ui-variant="os"] #categoryPanel .cat .sub,html[data-ui-variant="os"] #categoryPanel .cat .meta{color:#91a7bb!important}html[data-ui-variant="os"] #categoryPanel .badge{border-color:#2b506c!important;background:#0a2138!important;color:#c3d5e4!important} html[data-ui-variant="os"] .layout>main.panel{background:var(--os-paper)!important;border-color:#cad8e5!important}html[data-ui-variant="os"] .layout>main.panel>h2{background:#fff!important;color:#17263b!important} html[data-ui-variant="os"] #intelContext{background:#f8fafc!important}html[data-ui-variant="os"] #canvasToolbar{display:none!important}html[data-ui-variant="os"] .os-graph-guide{display:none!important} html[data-ui-variant="os"] #canvas{padding:0!important;background:#fff!important;overflow:hidden!important} /* Adatfolyam command view — the full Classic graph is retained behind the explicit technical topology switch. */ #canvas.os-command-active>.os-command-graph{display:flex!important}#canvas.os-command-active>:not(.os-command-graph){display:none!important}body.os-command-technical #canvas.os-command-active>.os-command-graph{display:none!important}body.os-command-technical #canvas.os-command-active>:not(.os-command-graph){display:block!important} .os-command-graph{height:100%;min-height:540px;flex-direction:column;background:#fff;color:#17263b} .os-command-graph>header,.os-story-map>header{display:flex;align-items:center;justify-content:space-between;height:48px;flex:0 0 48px;padding:0 14px;border-bottom:1px solid #dce4ec;background:#fff}.os-command-graph>header>div:first-child,.os-story-map>header>div:first-child{display:flex;align-items:center;gap:10px;color:#718198;font-size:10px}.os-command-graph>header b,.os-story-map>header b{color:#0f62fe}.os-command-graph>header i,.os-story-map>header i{font-style:normal;color:#b4c0cc}.os-command-actions,.os-story-map>header>div:last-child{display:flex;gap:6px}.os-command-actions button,.os-story-map>header button{min-height:32px;padding:0 10px;border:1px solid #cfdae5;border-radius:7px;background:#fff;color:#31465e;font-size:9px;font-weight:750} .os-command-head{display:grid;grid-template-columns:1fr 1fr 1fr;height:54px;flex:0 0 54px;border-bottom:1px solid #e0e7ee;background:#fbfcfe}.os-command-head span{display:flex;align-items:center;gap:8px;padding:0 5.5%;color:#15243a}.os-command-head b{font-size:12px}.os-command-head small{color:#7b899b;font-size:8px}.os-command-head span:first-child b{color:#138846}.os-command-head span:nth-child(2) b{color:#0f62fe}.os-command-head span:last-child b{color:#7a4ce0} .os-command-stage{position:relative;min-height:0;flex:1;overflow:hidden;background-color:#fcfdff;background-image:radial-gradient(#d9e3ee .75px,transparent .75px);background-size:18px 18px}.os-command-edges{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}.os-command-edges path{fill:none;stroke:#d6dee8;stroke-width:1.5;opacity:.68;marker-end:url(#osArrow)}.os-command-edges path.primary{stroke:#0f62fe;stroke-width:5;opacity:.9}.os-command-edges path.primary.violet{stroke:#6f35df;stroke-width:6}.os-command-edges path.muted{stroke:#cbd5df} .os-node-column{position:absolute;inset:0;z-index:2;pointer-events:none}.os-command-node{position:absolute;top:var(--node-y);width:176px;min-height:58px;transform:translateY(-50%);padding:9px 10px 8px 39px;border:1px solid #d4dde7;border-radius:8px;background:rgba(255,255,255,.96);color:#25364d;text-align:left;box-shadow:0 5px 14px -12px #09223b;pointer-events:auto}.os-node-column.source .os-command-node{left:4%}.os-node-column.process .os-command-node{left:50%;transform:translate(-50%,-50%);width:190px}.os-node-column.target .os-command-node{right:4%}.os-command-node .os-node-icon{position:absolute;left:10px;top:12px;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#eff5fb;color:#1d6fd1}.os-command-node b{display:block;overflow:hidden;color:#24364e;font-size:10px;white-space:nowrap;text-overflow:ellipsis}.os-command-node small{display:block;margin-top:3px;overflow:hidden;color:#76879a;font-size:8px;white-space:nowrap;text-overflow:ellipsis}.os-command-node em{display:inline-flex;margin-top:6px;padding:3px 6px;border-radius:4px;background:#dff7e8;color:#178345;font-size:7px;font-style:normal;font-weight:800}.os-command-node.selected{border:1.5px solid #0f62fe;box-shadow:0 0 0 2px rgba(15,98,254,.08),0 8px 20px -15px #0f62fe}.os-command-node.target.selected{border-color:#7a4ce0}.os-command-node.target.selected .os-node-icon{background:#f1ebff;color:#7a4ce0} .os-command-controls{position:absolute;left:14px;bottom:12px;z-index:4;display:flex;gap:5px}.os-command-controls button,.os-command-controls b{display:grid;place-items:center;min-width:34px;height:32px;padding:0 8px;border:1px solid #cfdae5;border-radius:6px;background:#fff;color:#31465e;font-size:9px}.os-command-map{position:absolute;right:14px;bottom:12px;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:145px;height:72px;padding:9px;border:1.5px solid #0f62fe;border-radius:7px;background:rgba(249,252,255,.94)}.os-command-map span{border-radius:3px;background:linear-gradient(180deg,#d9edff,#edf6ff)} /* Reference Evidence Lens */ html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel{background:#081d32!important}html[data-ui-variant="os"][data-os-view="sankey"] #detailPanel>.body.os-command-lens-active>:not(.os-command-lens){display:none!important}body.os-lens-expanded #detailPanel>.body.os-command-lens-active>:not(.os-command-lens){display:block!important}body.os-lens-expanded .os-command-lens{display:none!important} .os-command-lens{padding:14px;color:#d9e8f6}.os-lens-field{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid #21425e}.os-field-glyph{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:linear-gradient(145deg,#7a4ce0,#4f2bad);color:#fff;font-weight:850}.os-lens-field h3{margin:0!important;color:#fff!important;font-size:18px!important}.os-lens-field small{color:#9eb4c8!important}.os-lens-field>strong{margin-left:auto;color:#36d39d!important;font-size:9px!important}.os-command-lens dl{margin:10px 0}.os-command-lens dl>div{display:grid;grid-template-columns:42% 58%;padding:8px 0;border-bottom:1px solid #173b57}.os-command-lens dt{color:#93aabe;font-size:8px}.os-command-lens dd{margin:0;color:#fff;font-size:9px;font-weight:750}.os-lens-systems{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}.os-lens-systems span{padding:4px 7px;border:1px solid #275373;border-radius:999px;background:#0d3150;color:#bfe7ff;font-size:7px}.os-confidence{display:grid;grid-template-columns:1fr auto;gap:6px;padding:12px 0;border-top:1px solid #21425e}.os-confidence span{font-size:9px}.os-confidence b{color:#41dda5;font-size:8px}.os-confidence i{grid-column:1/-1;height:5px;border-radius:5px;background:#1d3b54;overflow:hidden}.os-confidence u{display:block;height:100%;background:linear-gradient(90deg,#16b982,#40d58e);text-decoration:none}.os-lens-evidence>b{display:block;margin:6px 0 8px;color:#fff;font-size:10px}.os-lens-evidence article{display:flex;align-items:center;gap:9px;margin:6px 0;padding:8px;border:1px solid #1c415e;border-radius:7px;background:#0b2944}.os-lens-evidence article>span{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#103a5f;color:#65bfff;font-size:8px;font-weight:800}.os-lens-evidence strong{display:block;color:#e8f2fb;font-size:9px}.os-lens-evidence small{color:#91a9bd!important;font-size:7px}.os-lens-expand{width:100%;height:36px;margin-top:10px;border:1px solid #2b5676!important;border-radius:7px!important;background:#0d3150!important;color:#e4f3ff!important;font-size:9px!important;font-weight:800!important} /* BPMN story-map composition */ #canvas.os-story-active>.os-story-map{display:flex!important}#canvas.os-story-active>:not(.os-story-map){display:none!important}body.os-story-technical #canvas.os-story-active>.os-story-map{display:none!important}body.os-story-technical #canvas.os-story-active>:not(.os-story-map){display:block!important}.os-story-map{height:100%;min-height:540px;flex-direction:column;background:#fff;color:#17263b}.os-story-ribbon{display:flex;align-items:center;gap:9px;height:62px;flex:0 0 62px;padding:7px 14px;border-bottom:1px solid #dce5ed;background:#fbfcfe;overflow-x:auto}.os-story-ribbon>b{min-width:90px;font-size:9px}.os-story-ribbon button{position:relative;width:28px;height:28px;flex:0 0 28px;border:1.5px solid #5e9ce0;border-radius:50%;background:#fff;color:#1e66bd;font-size:8px;font-weight:850}.os-story-ribbon button::after{content:'';position:absolute;left:27px;top:12px;width:10px;border-top:1px solid #b8c7d7}.os-story-lanes{position:relative;min-height:0;flex:1;overflow:auto;background:#fff}.os-story-lane{display:grid;grid-template-columns:120px minmax(700px,1fr);min-height:74px;border-bottom:1px solid #e2e8ef}.os-story-lane>header{display:flex;flex-wrap:wrap;align-content:center;gap:3px 7px;padding:10px 12px;border-right:1px solid #dbe3eb;background:#f9fbfd}.os-story-lane>header span{grid-row:1/3;color:#0f62fe}.os-story-lane>header b{max-width:80px;overflow:hidden;color:#34465d;font-size:9px;white-space:nowrap;text-overflow:ellipsis}.os-story-lane>header small{width:100%;padding-left:20px;color:#8a99aa;font-size:7px}.os-story-flow{position:relative;min-width:760px}.os-story-flow::before{content:'';position:absolute;left:5%;right:5%;top:50%;border-top:1px solid #b6c5d4}.os-story-flow button{position:absolute;left:var(--story-x);top:50%;width:126px;min-height:48px;transform:translate(-50%,-50%);padding:7px 7px 6px 31px;border:1px solid #bfd2e6;border-radius:6px;background:#fff;color:#33475f;text-align:left;box-shadow:0 4px 12px -11px #0a1f34}.os-story-flow button>span{position:absolute;left:7px;top:8px;padding:3px 5px;border-radius:4px;background:#eaf3ff;color:#0f62fe;font-size:7px;font-weight:850}.os-story-flow button b{display:block;overflow:hidden;font-size:8px;white-space:nowrap;text-overflow:ellipsis}.os-story-flow button small{display:block;margin-top:3px;color:#8191a3;font-size:7px}.os-story-minimap{position:absolute;right:12px;bottom:12px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:150px;height:70px;padding:10px;border:1.5px solid #0f62fe;border-radius:6px;background:rgba(248,252,255,.95)}.os-story-minimap i{border-radius:2px;background:#d9e9f9}.os-story-map>footer{display:flex;align-items:center;gap:18px;height:42px;flex:0 0 42px;padding:0 14px;border-top:1px solid #dce5ed;background:#fbfcfe;color:#65788f;font-size:7px} /* Keep the field journey as a visible, one-click bottom drawer. */ html[data-ui-variant="os"] .timeline{grid-column:1/-1!important;grid-row:2!important;min-height:34px!important;height:34px!important;border-color:#24455f!important;background:#0a2035!important;overflow:hidden!important}html[data-ui-variant="os"] .timeline>h2{height:34px!important;min-height:34px!important;background:#0a2035!important;color:#dce8f2!important}html[data-ui-variant="os"] .timeline>.body{display:none!important}html[data-ui-variant="os"] .timeline:hover,html[data-ui-variant="os"] .timeline:focus-within{position:relative;z-index:20;height:150px!important;margin-top:-116px!important}html[data-ui-variant="os"] .timeline:hover>.body,html[data-ui-variant="os"] .timeline:focus-within>.body{display:block!important;background:#fff!important} html[data-ui-variant="os"] .foot-shell{height:70px!important;min-height:70px!important;max-height:70px!important;margin-left:52px!important;border-top:1px solid #183951!important;background:#07192b!important;color:#d2dfeb!important}html[data-ui-variant="os"] .foot{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important;padding:7px!important;background:#07192b!important}html[data-ui-variant="os"] .foot .kpi-mini{min-height:54px!important;border-color:#1c405e!important;border-radius:8px!important;background:#0a2742!important;color:#a9bfd1!important}html[data-ui-variant="os"] .foot .kpi-mini b{color:#fff!important;font-size:13px!important} @media(min-width:1181px){html[data-ui-variant="os"] .layout.detail-open #detailPanel{position:relative!important;inset:auto!important;width:auto!important;z-index:auto!important}} @media(max-width:1180px){html[data-ui-variant="os"] .layout,html[data-ui-variant="os"] .layout.detail-open{grid-template-columns:218px minmax(0,1fr)!important}.os-command-node{width:150px}.os-command-node b{font-size:9px}.os-node-column.source .os-command-node{left:2%}.os-node-column.target .os-command-node{right:2%}.os-command-edges{opacity:.8}} @media(max-width:900px){html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:1fr 1fr!important;height:auto!important}html[data-ui-variant="os"] .topbar .row:nth-child(2)::before{display:none!important}html[data-ui-variant="os"] .layout{height:calc(100vh - 214px)!important}.os-command-head small{display:none}.os-command-node{width:126px;padding-left:30px}.os-node-column.process .os-command-node{width:140px}.os-command-node .os-node-icon{left:6px}.os-command-edges{opacity:.65}.os-story-lane{grid-template-columns:96px minmax(620px,1fr)}} /* Reference workbenches --------------------------------------------------- These panels reuse the mounted Classic tables and controls. The added surfaces only provide the information architecture shown in the UI pack. */ html[data-ui-variant="os"] #m-mapping, html[data-ui-variant="os"] #m-evidence{background:rgba(2,12,24,.34)!important;backdrop-filter:blur(3px)} html[data-ui-variant="os"] #m-mapping .box, html[data-ui-variant="os"] #m-evidence .box, html[data-ui-variant="os"] #m-loader .box, html[data-ui-variant="os"] #m-systems .box{ width:calc(100vw - 66px)!important;height:calc(100vh - 70px)!important;max-width:none!important;max-height:none!important; margin:64px 7px 6px 59px!important;border-radius:9px!important;overflow:hidden!important;box-shadow:0 28px 80px -42px #000!important; } html[data-ui-variant="os"] #m-mapping .box>header, html[data-ui-variant="os"] #m-evidence .box>header, html[data-ui-variant="os"] #m-loader .box>header, html[data-ui-variant="os"] #m-systems .box>header{height:48px!important;min-height:48px!important;padding:0 14px!important} /* 02 — Data Mapping Workbench */ .os-mapping-workbench{ grid-template-columns:minmax(0,1fr) 325px!important;grid-template-rows:68px 92px minmax(0,1fr)!important; gap:8px!important;padding:8px!important;background:#07192b!important;color:#dceaf7!important; } .os-mapping-filters{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(105px,1fr));gap:6px;padding:7px;border:1px solid #1e415e;border-radius:8px;background:#0a2239} .os-mapping-filters span{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:7px 9px;border:1px solid #234968;border-radius:6px;background:#0c2944} .os-mapping-filters small{overflow:hidden;color:#86a0b8;font-size:7px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis} .os-mapping-filters b{margin-top:5px;overflow:hidden;color:#eef6fd;font-size:9px;white-space:nowrap;text-overflow:ellipsis} .os-mapping-topology{grid-column:1;display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:4px;padding:9px 12px;border:1px solid #173b57;border-radius:8px;background:radial-gradient(circle at 50% 50%,#102c49,#081d32 72%)} .os-mapping-topology article{min-width:0;padding:9px 11px;border:1px solid #245176;border-radius:7px;background:#0b2842} .os-mapping-topology article.transform{border-color:#684ec3;background:#172445}.os-mapping-topology>i{color:#55b7ff;font-style:normal;text-align:center} .os-mapping-topology small{color:#80a6c5;font-size:7px;font-weight:850;letter-spacing:.1em}.os-mapping-topology b,.os-mapping-topology span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .os-mapping-topology b{margin-top:4px;color:#fff;font-size:10px}.os-mapping-topology span{margin-top:3px;color:#9eb3c7;font-size:7px} .os-mapping-workbench>#mappingSearch,.os-mapping-workbench>.search{display:none!important} .os-mapping-workbench>#mappingKpis{display:grid!important;position:static!important;grid-column:1;grid-row:2;align-self:stretch;width:205px;z-index:2;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px!important;background:transparent!important;pointer-events:none} .os-mapping-workbench>#mappingKpis .kpi{min-width:60px;padding:5px 7px!important;border-color:#214563!important;background:#0b2a46!important;color:#bdd1e2!important}.os-mapping-workbench>#mappingKpis .kpi strong{color:#fff!important;font-size:14px!important} .os-mapping-workbench>.os-mapping-topology{grid-row:2;margin-left:212px} .os-mapping-workbench>#mappingTable,.os-mapping-workbench>.table-wrap{grid-column:1;grid-row:3;min-height:0;border:1px solid #1d405d!important;border-radius:8px!important;background:#082039!important;overflow:auto!important} .os-mapping-workbench table{min-width:950px!important;background:#082039!important;color:#cbd9e5!important}.os-mapping-workbench th{position:sticky;top:0;z-index:2;background:#0b2944!important;color:#8fa8bd!important}.os-mapping-workbench td{border-color:#173751!important;background:#09233b!important;color:#c9d8e4!important}.os-mapping-workbench tbody tr:hover td{background:#0e3150!important} .os-mapping-lens{grid-column:2!important;grid-row:2/-1!important;border-color:#214968!important;background:#0a2239!important}.os-trace-facts{display:grid;gap:5px;margin-top:12px}.os-trace-facts b{color:#fff;font-size:9px}.os-trace-facts span{padding:7px;border:1px solid #214866;border-radius:5px;background:#0d2c49;color:#abd0eb;font-size:8px} /* 03 — Evidence Explorer / release quality */ .os-evidence-workbench{display:grid!important;grid-template-rows:auto 360px minmax(0,1fr)!important;gap:8px!important;padding:8px!important;overflow:hidden!important;background:#07192b!important;color:#dbe9f5!important} .os-evidence-workbench>.os-evidence-strip{margin:0!important}.os-evidence-network-shell{display:grid;grid-template-columns:185px minmax(0,1fr) 280px;gap:8px;min-height:0} .os-evidence-network-shell>aside,.os-evidence-network,.os-resolution-lens{min-width:0;border:1px solid #1d405d;border-radius:8px;background:#0a2239} .os-evidence-network-shell>aside:first-child{padding:10px}.os-evidence-network-shell>aside header,.os-resolution-lens header{display:flex;align-items:center;justify-content:space-between;padding-bottom:9px;border-bottom:1px solid #1d405d;color:#fff;font-size:9px} .os-evidence-network-shell>aside article{display:flex;align-items:center;gap:8px;margin-top:7px;padding:9px;border:1px solid #204562;border-radius:6px;background:#0c2944}.os-evidence-network-shell>aside article>span{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#113a60;color:#69c1ff;font-size:8px}.os-evidence-network-shell>aside article b{overflow:hidden;color:#dceaf6;font-size:8px;white-space:nowrap;text-overflow:ellipsis} .os-gate-list{display:grid;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid #1c405d}.os-gate-list>b{color:#8ea8bd;font-size:8px;text-transform:uppercase}.os-gate-list span{display:flex;justify-content:space-between;color:#b7cad9;font-size:7px}.os-gate-list em{color:#38d6a0;font-style:normal;font-weight:800}.os-gate-list em.warn{color:#ffbd4d} .os-evidence-network{position:relative;overflow:hidden;background-color:#081d32;background-image:radial-gradient(#224865 .65px,transparent .65px);background-size:17px 17px}.os-evidence-network>header{position:absolute;left:12px;top:10px;z-index:3;color:#8fa9be;font-size:8px}.os-evidence-network>header b{margin-left:8px;color:#fff}.os-evidence-network>svg{position:absolute;inset:35px 0 28px;width:100%;height:calc(100% - 63px)}.os-evidence-network>svg path{fill:none;stroke:#24bad1;stroke-width:1.4;stroke-dasharray:5 4;opacity:.8} .os-evidence-network button{position:absolute;z-index:2;min-width:122px;max-width:180px;padding:9px;border:1px solid #2474b2;border-radius:7px;background:#0a2b48;color:#dbeafa;text-align:left}.os-evidence-network button b,.os-evidence-network button small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.os-evidence-network button b{font-size:8px}.os-evidence-network button small{margin-top:3px;color:#8fa8bd;font-size:7px}.os-evidence-network .center{left:50%;top:50%;width:170px;min-height:70px;transform:translate(-50%,-50%);border-color:#a95eff;background:linear-gradient(145deg,#3a246b,#201e54);text-align:center}.os-evidence-network .center span{display:block;color:#d6b7ff;font-size:13px}.os-evidence-network .center b{margin-top:4px;color:#fff;font-size:11px}.os-evidence-network .s0{left:5%;top:14%}.os-evidence-network .s1{right:5%;top:12%}.os-evidence-network .s2{left:5%;bottom:14%}.os-evidence-network .s3{right:5%;bottom:13%}.os-evidence-network .s4{left:39%;top:8%}.os-evidence-network .s5{left:39%;bottom:8%}.os-evidence-network footer{position:absolute;left:12px;bottom:9px;display:flex;gap:12px;color:#8ea8bd;font-size:7px} .os-resolution-lens{padding:12px}.os-resolution-lens header span{padding:3px 6px;border:1px solid #a23d55;border-radius:4px;color:#ff8499;font-size:7px}.os-resolution-lens h3{margin:14px 0 0;color:#fff;font-size:15px}.os-resolution-lens p{color:#9db2c5;font-size:8px;line-height:1.45}.os-resolution-lens dl{margin:13px 0}.os-resolution-lens dl>div{display:grid;grid-template-columns:43% 57%;padding:8px 0;border-top:1px solid #1e405d}.os-resolution-lens dt{color:#88a1b7;font-size:8px}.os-resolution-lens dd{margin:0;color:#eef6fc;font-size:8px;font-weight:700;overflow-wrap:anywhere}.os-resolution-lens button{width:100%;height:35px;border:1px solid #216cb0;border-radius:6px;background:#0f62d6;color:#fff;font-size:8px;font-weight:800} .os-evidence-workbench>#evidenceSearch{display:none!important}.os-evidence-workbench>#evidenceKpis{display:none!important}.os-evidence-workbench>#evidenceBody{min-height:0!important;overflow:auto!important;border:1px solid #1d405d!important;border-radius:8px!important;background:#082039!important}.os-evidence-workbench table{background:#082039!important;color:#c6d5e2!important}.os-evidence-workbench th{position:sticky;top:0;z-index:2;background:#0b2944!important;color:#91a9bd!important}.os-evidence-workbench td{border-color:#173751!important;background:#09233b!important;color:#c7d7e3!important} /* 07 — Loader audit */ .os-loader-audit{display:block!important;padding:8px!important;overflow:hidden!important}.os-loader-shell{display:grid;grid-template-columns:225px minmax(0,1fr) 292px;gap:8px;height:100%;min-height:0}.os-loader-runs,.os-source-lens{min-width:0;border:1px solid #d6e1ea;border-radius:8px;background:#fff;overflow:auto}.os-loader-runs{padding:10px}.os-loader-runs header{padding-bottom:10px;border-bottom:1px solid #e1e8ef;color:#22394f}.os-loader-runs article{margin-top:10px;padding:12px;border:1px solid #bad8f5;border-radius:7px;background:#edf7ff}.os-loader-runs article b{display:block;color:#0f62c7;font-size:11px}.os-loader-runs article span{display:block;margin-top:8px;color:#667b8f;font-size:8px}.os-loader-runs article small{display:inline-flex;margin-top:8px;padding:3px 6px;border-radius:999px;background:#ddf7e9;color:#16814a;font-size:7px;font-weight:800}.os-loader-runs p{margin-top:14px;color:#77899b;font-size:8px;line-height:1.5} .os-loader-center{display:flex;min-width:0;min-height:0;flex-direction:column;overflow:hidden}.os-loader-center .os-loader-journey{flex:0 0 auto}.os-loader-center #loaderSearch{flex:0 0 auto}.os-loader-center #loaderBody{min-height:0;flex:1;overflow:auto!important}.os-source-lens{padding:13px}.os-source-lens header{display:flex;justify-content:space-between;padding-bottom:11px;border-bottom:1px solid #e0e8ef}.os-source-lens header b{color:#183149;font-size:11px}.os-source-lens header span{color:#13834d;font-size:8px;font-weight:800}.os-source-lens h3{margin:14px 0 0;color:#172e45;font-size:17px}.os-source-lens>p{color:#74879a;font-size:9px}.os-source-lens dl{margin-top:14px}.os-source-lens dl>div{display:grid;grid-template-columns:40% 60%;padding:8px 0;border-top:1px solid #e2e9ef}.os-source-lens dt{color:#7c8ea0;font-size:8px}.os-source-lens dd{margin:0;color:#263d54;font-size:8px;font-weight:700;overflow-wrap:anywhere}.os-source-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:15px}.os-source-totals span{padding:10px 7px;border:1px solid #dae4ec;border-radius:6px;background:#f8fafc;text-align:center}.os-source-totals b{display:block;color:#12304a;font-size:15px}.os-source-totals small{color:#8291a1;font-size:7px} /* 08 — System catalogue and ecosystem landscape */ .os-systems-workbench{padding:8px!important;overflow:hidden!important}.os-systems-shell{display:grid;grid-template-columns:230px minmax(0,1fr) 292px;gap:8px;height:100%;min-height:0}.os-system-inventory,.os-system-lens{min-width:0;border:1px solid #d6e1ea;border-radius:8px;background:#fff;overflow:auto}.os-system-inventory{padding:10px}.os-system-inventory>header{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #e0e7ee;color:#263d53;font-size:9px}.os-domain-filters{display:flex;flex-wrap:wrap;gap:4px;padding:9px 0}.os-domain-filters button{height:25px;padding:0 8px;border:1px solid #d3dfe9;border-radius:5px;background:#fff;color:#526a80;font-size:7px}.os-domain-filters button.active{border-color:#0f62fe;background:#eaf3ff;color:#0f62c7}.os-system-inventory nav{display:grid;gap:3px}.os-system-inventory nav button{display:grid;grid-template-columns:22px 1fr;gap:2px 7px;padding:8px;border:1px solid transparent;border-radius:6px;background:#fff;color:#253b52;text-align:left}.os-system-inventory nav button:hover,.os-system-inventory nav button.active{border-color:#7bb7ed;background:#edf7ff}.os-system-inventory nav button>span{grid-row:1/3;color:#8da0b1;font-size:8px}.os-system-inventory nav b,.os-system-inventory nav small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.os-system-inventory nav b{font-size:9px}.os-system-inventory nav small{color:#8494a4;font-size:7px} .os-system-center{display:flex;min-width:0;min-height:0;flex-direction:column;overflow:hidden}.os-system-center>.os-system-landscape{flex:0 0 auto}.os-system-center>#systemsBody{min-height:0;flex:1;overflow:auto!important}.os-system-lens{padding:14px}.os-system-lens header{display:flex;justify-content:space-between;padding-bottom:11px;border-bottom:1px solid #e0e7ee;color:#1e344b;font-size:10px}.os-system-lens header span{color:#0f62c7;font-size:7px}.os-system-lens h3{margin:14px 0 0;color:#172d44;font-size:17px}.os-system-lens>p{color:#738699;font-size:8px;line-height:1.5}.os-system-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:14px;border:1px solid #d8e2eb;border-radius:7px;overflow:hidden}.os-system-stats span{padding:12px;border-right:1px solid #d8e2eb}.os-system-stats span:last-child{border:0}.os-system-stats b{display:block;color:#0f62d6;font-size:15px}.os-system-stats small{color:#7f8fa0;font-size:7px}.os-system-lens h4{margin:17px 0 8px;color:#30485e;font-size:9px}.os-system-copy{max-height:150px;padding:9px;border:1px solid #dde5ec;border-radius:6px;background:#f8fafc;color:#61758a;font-size:7px;line-height:1.5;overflow:auto}.os-system-lens>button{width:100%;height:38px;margin-top:10px;border:1px solid #0f62fe;border-radius:6px;background:#0f62fe;color:#fff;font-size:8px;font-weight:800}.os-system-lens>button.secondary{border-color:#cbd9e5;background:#fff;color:#315069} .os-system-center>.os-system-landscape{display:block;min-height:0;flex:1;margin:0;padding:0;overflow:auto}.os-landscape-canvas{position:relative;min-width:720px;min-height:530px;padding:12px;background-color:#fbfdff;background-image:radial-gradient(#d8e3ed .7px,transparent .7px);background-size:18px 18px}.os-landscape-canvas>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.os-landscape-canvas>svg path{fill:none;stroke:#7a4ce0;stroke-width:1.5;opacity:.62}.os-domain-group{position:absolute;width:245px;padding:9px;border:1px solid #bcdff1;border-radius:8px;background:rgba(255,255,255,.93)}.os-domain-group h4{position:absolute;left:12px;top:-15px;margin:0;padding:0 6px;background:#fbfdff;color:#0f7fc1;font-size:10px}.os-domain-group button{position:relative;display:block;width:100%;min-height:47px;margin:5px 0;padding:7px 58px 7px 9px;border:1px solid #d5e0e9;border-radius:6px;background:#fff;color:#254057;text-align:left}.os-domain-group button.active-scope{border-color:#70c7e8;background:#f0fbff}.os-domain-group button span,.os-domain-group button small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.os-domain-group button span{font-size:8px;font-weight:800}.os-domain-group button small{margin-top:3px;color:#7b8e9f;font-size:7px}.os-domain-group button em{position:absolute;right:7px;top:7px;color:#188950;font-size:6px;font-style:normal}.os-domain-group.d0{left:3%;top:36px}.os-domain-group.d1{left:36%;top:52px}.os-domain-group.d2{left:3%;top:290px}.os-domain-group.d3{right:3%;top:38px}.os-domain-group.d4{right:3%;top:260px}.os-domain-group.d5{left:36%;top:310px}.os-landscape-canvas footer{position:absolute;left:16px;bottom:10px;display:flex;gap:18px;color:#667c91;font-size:7px} @media(max-width:1180px){ .os-mapping-workbench{grid-template-columns:minmax(0,1fr) 280px!important}.os-mapping-filters{grid-template-columns:repeat(4,minmax(100px,1fr))}.os-evidence-network-shell{grid-template-columns:150px minmax(0,1fr) 235px}.os-loader-shell,.os-systems-shell{grid-template-columns:190px minmax(0,1fr) 240px} } @media(max-width:1360px) and (min-width:901px){ html[data-ui-variant="os"] .topbar h1{min-width:198px!important;flex-basis:198px!important;max-width:198px!important;font-size:15px!important;white-space:nowrap!important;overflow:visible!important} html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:150px 172px minmax(180px,1fr) 182px 140px 210px!important} .os-top-nav-button{padding-inline:7px!important}.os-top-nav-button span{font-size:9px!important}.os-global-search{width:205px!important} .os-command-node{min-height:52px;padding-top:7px;padding-bottom:6px}.os-command-node em{margin-top:4px} } @media(max-width:900px){ html[data-ui-variant="os"] #m-mapping .box,html[data-ui-variant="os"] #m-evidence .box,html[data-ui-variant="os"] #m-loader .box,html[data-ui-variant="os"] #m-systems .box{width:calc(100vw - 12px)!important;margin-left:6px!important} .os-mapping-workbench,.os-evidence-workbench{display:block!important;overflow:auto!important}.os-mapping-filters{grid-template-columns:1fr 1fr}.os-mapping-topology{margin:8px 0}.os-mapping-lens{margin-top:8px}.os-evidence-network-shell,.os-loader-shell,.os-systems-shell{grid-template-columns:1fr;height:auto}.os-evidence-network{min-height:360px}.os-loader-runs,.os-source-lens,.os-system-inventory,.os-system-lens{max-height:none} } /* Focus mode must win over every responsive grid rule. */ html[data-ui-variant="os"] body.os-focus-mode .layout, html[data-ui-variant="os"] body.os-focus-mode .layout.detail-open, html[data-ui-variant="os"] body.os-focus-mode .layout.left-collapsed.detail-open{ position:fixed!important;left:52px!important;right:0!important;top:64px!important;bottom:0!important;width:auto!important;height:auto!important; display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;padding:0!important;background:#fff!important; } html[data-ui-variant="os"] body.os-focus-mode .layout>main.panel{display:flex!important;grid-column:1/-1!important;grid-row:1!important;width:100%!important;min-width:0!important;height:100%!important;border:0!important;border-radius:0!important} html[data-ui-variant="os"] body.os-focus-mode .layout>main.panel #canvas{min-height:0!important;flex:1!important} body.os-focus-mode .os-focus-docks{display:block!important;inset:0!important;pointer-events:none} body.os-focus-mode .os-focus-docks button{position:fixed;top:50%;z-index:190;min-width:34px;height:180px;padding:10px 7px;transform:translateY(-50%);writing-mode:vertical-rl;pointer-events:auto} body.os-focus-mode .os-focus-docks button:first-child{left:52px;border-radius:0 8px 8px 0} body.os-focus-mode .os-focus-docks button:last-child{right:0;border-radius:8px 0 0 8px} @media(max-width:1360px) and (min-width:901px){ .os-field360{grid-template-columns:220px minmax(350px,1fr)!important}.os-field-facts{padding:10px!important}.os-field-facts article{padding:9px!important} .ring-systems{width:min(31vw,390px)!important;height:min(31vw,390px)!important}.ring-systems>span{transform:translateY(-165px)!important}.ring-steps>span{transform:translateY(-118px)!important}.ring-origin>span{transform:translateY(-75px)!important} } /* ======================================================================== 2.0.0-preview.4 — presentation-only legibility and responsive polish This layer deliberately changes no display contract, data binding, route, state, event handler or truth resolver. It only strengthens the existing preview.3 composition at the supplied reference and compact viewports. ======================================================================== */ html[data-ui-variant="os"]{ --os-p4-shell:var(--surface-inverse); --os-p4-shell-raised:var(--surface-nav-elevated); --os-p4-shell-surface:#0c2944; --os-p4-workspace:var(--surface-secondary); --os-p4-paper:var(--surface-primary); --os-p4-line:var(--border-default); --os-p4-line-dark:var(--raw-blue-900); --os-p4-copy:var(--text-primary); --os-p4-muted:var(--text-muted); --os-p4-focus:var(--action-secondary); --os-p4-control:44px; } html[data-ui-variant="os"], html[data-ui-variant="os"] body{ width:100%; max-width:100%; overflow-x:clip; } html[data-ui-variant="os"] body{ font-family:Inter,"IBM Plex Sans","Segoe UI Variable Text","Segoe UI",sans-serif!important; font-size:14px!important; line-height:1.45; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } html[data-ui-variant="os"] :is(.topbar,.layout,.panel,.modal,.modal .box,.modal .content,#canvas,.timeline,.foot-shell){ min-width:0; max-width:100%; } html[data-ui-variant="os"] :is(.layout,.modal .content,.table-wrap,#mappingTable,#evidenceBody,#loaderBody,#systemsBody){ overscroll-behavior:contain; } /* Readable shell and quiet light investigation surfaces. */ html[data-ui-variant="os"] .topbar, .os-control-rail{background:var(--os-p4-shell)!important} @media(min-width:769px){ html[data-ui-variant="os"] .topbar .row:nth-child(2){ width:calc(100% - 52px)!important; margin-left:52px!important; } } html[data-ui-variant="os"] .topbar .row:first-child{ background:linear-gradient(90deg,#061426 0,#07192b 66%,#081d32 100%)!important; } html[data-ui-variant="os"] .topbar .row:nth-child(2){ min-height:84px!important; height:84px!important; gap:10px!important; padding:8px 10px!important; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; } html[data-ui-variant="os"] .topbar .row:nth-child(2)::before, html[data-ui-variant="os"] .topbar :is(.field-picker,.filter-control,.text-filter), html[data-ui-variant="os"] #counters{ min-height:68px!important; height:68px!important; padding:7px 11px!important; border-color:var(--os-p4-line-dark)!important; background:var(--os-p4-shell-surface)!important; } html[data-ui-variant="os"] .topbar .row:nth-child(2)::before{ font-size:13px!important; line-height:1.3; } html[data-ui-variant="os"] .topbar :is(.field-picker,.filter-control) label{ font-size:11px!important; line-height:1.2!important; letter-spacing:.08em!important; } html[data-ui-variant="os"] .topbar :is(input[list],select,.searchbox){ min-height:44px!important; height:44px!important; font-size:14px!important; line-height:1.25!important; } html[data-ui-variant="os"] #counters{font-size:13px!important} html[data-ui-variant="os"] .topbar h1{font-size:18px!important} .os-top-nav-button{ min-height:44px!important; height:44px!important; padding-inline:12px!important; } .os-top-nav-button span, .os-global-search{font-size:13px!important} .os-global-search{min-height:44px!important;height:44px!important} .os-global-search kbd{font-size:11px!important} html[data-ui-variant="os"] .layout{ height:calc(100dvh - 218px)!important; min-height:480px!important; background:linear-gradient(180deg,#edf3f8 0,#e6edf4 100%)!important; } html[data-ui-variant="os"] .layout>main.panel{ border-color:#c8d6e3!important; background:var(--os-p4-paper)!important; box-shadow:0 16px 38px -30px rgba(6,20,38,.7)!important; } html[data-ui-variant="os"] .panel>h2, html[data-ui-variant="os"] .timeline h2{ min-height:48px!important; height:48px!important; font-size:14px!important; line-height:1.25!important; } html[data-ui-variant="os"] #categoryPanel .cat{ min-height:84px!important; border-color:#1d405d!important; background:#0b263f!important; } html[data-ui-variant="os"] #categoryPanel .cat .name, html[data-ui-variant="os"] #categoryPanel .cat b{font-size:14px!important;line-height:1.3!important} html[data-ui-variant="os"] #categoryPanel .cat :is(.sub,.meta,small){font-size:12px!important;line-height:1.4!important} html[data-ui-variant="os"] #categoryPanel .badge{font-size:12px!important} /* Every visible native/proxy action retains a genuine 44px target. */ html[data-ui-variant="os"] :is( .os-rail-button,.os-rail-link,.toolbar button,.enh-ctrls button, .intel-context button,.panel>h2 button,.timeline>h2 button, .modal button,.modal input,.modal select,.modal textarea, .os-focus-toggle,.os-field360-toggle,.os-focus-docks button, .os-command-actions button,.os-command-controls button, .os-story-ribbon button,.os-story-flow button,.os-milestone-ribbon button, .os-domain-filters button,.os-system-inventory nav button, .os-domain-group button,.os-evidence-network button, .os-resolution-lens button,.os-system-lens>button ){ min-height:var(--os-p4-control)!important; } .os-rail-button,.os-rail-link{ width:44px!important; height:44px!important; flex-basis:44px!important; } html[data-ui-variant="os"] :is(.toolbar button,.enh-ctrls button,.intel-context button){min-width:44px!important} html[data-ui-variant="os"] .modal :is(button,input,select,textarea){font-size:14px!important} html[data-ui-variant="os"] .modal input:is([type="checkbox"],[type="radio"]){ width:18px!important; min-height:18px!important; height:18px!important; } html[data-ui-variant="os"] .modal label:has(>input:is([type="checkbox"],[type="radio"])){ min-height:44px; display:inline-flex; align-items:center; gap:8px; } /* Focus must be unmistakable on both paper and ink surfaces. */ html[data-ui-variant="os"] :focus-visible{ outline:3px solid var(--os-p4-focus)!important; outline-offset:3px!important; box-shadow:0 0 0 2px #061426,0 0 0 6px rgba(33,199,246,.38)!important; } html[data-ui-variant="os"] :is(.field-picker,.filter-control,.text-filter,.os-global-search):focus-within{ border-color:var(--os-p4-focus)!important; box-shadow:0 0 0 3px rgba(33,199,246,.22)!important; } html[data-ui-variant="os"] #canvas :is(.svg-step,.map-node):focus-visible{ outline:0!important; filter:drop-shadow(0 0 7px rgba(15,98,254,.6)); } /* Command view, story map and Field 360 legibility. */ .os-command-graph>header, .os-story-map>header{min-height:52px!important;height:52px!important} .os-command-graph>header>div:first-child, .os-story-map>header>div:first-child{font-size:13px!important} .os-command-head{height:62px!important;flex-basis:62px!important} .os-command-head b{font-size:14px!important} .os-command-head small{font-size:12px!important} .os-command-node{width:198px;min-height:66px;padding:10px 12px 9px 42px} .os-node-column.process .os-command-node{width:214px} .os-command-node b{font-size:13px!important;line-height:1.25} .os-command-node small{font-size:12px!important;line-height:1.25} .os-command-node em{font-size:11px!important} .os-command-actions button, .os-command-controls button, .os-command-controls b{font-size:13px!important} .os-command-controls button,.os-command-controls b{height:44px!important;min-width:44px!important} .os-command-map{width:168px;height:86px} .os-story-ribbon{height:68px!important;flex-basis:68px!important} .os-story-ribbon>b{font-size:13px!important} .os-story-ribbon button{width:44px!important;height:44px!important;flex-basis:44px!important;font-size:12px!important} .os-story-ribbon button::after{left:43px!important;top:20px!important} .os-story-lane>header b{font-size:13px!important} .os-story-lane>header small{font-size:11px!important} .os-story-flow button b{font-size:12px!important} .os-story-flow button small{font-size:11px!important} .os-story-flow button>span{font-size:11px!important} .os-story-map>footer{min-height:48px!important;height:48px!important;flex-basis:48px!important;font-size:12px!important} .os-milestone-ribbon{min-height:64px!important} .os-ribbon-label{font-size:12px!important} .os-milestone-ribbon button{width:44px!important;height:44px!important;flex-basis:44px!important;font-size:12px!important} .os-field-facts header span{font-size:11px!important} .os-field-facts article>b{font-size:13px!important} .os-field-facts dt,.os-mapping-lens dt{font-size:12px!important} .os-field-facts dd,.os-mapping-lens dd{font-size:14px!important;line-height:1.4!important} .os-field-rings .ring>span{font-size:12px!important;line-height:1.35!important} .os-field-rings .ring strong{font-size:14px!important} .ring-field strong{font-size:17px!important} .ring-field small,.os-ring-legend{font-size:12px!important} /* Calm, readable Mapping and Evidence workbenches. */ html[data-ui-variant="os"] #m-mapping .content, html[data-ui-variant="os"] #m-evidence .content, .os-mapping-workbench, .os-evidence-workbench{ background:linear-gradient(180deg,#081d32 0,#061426 100%)!important; } html[data-ui-variant="os"] #m-mapping .box, html[data-ui-variant="os"] #m-evidence .box, html[data-ui-variant="os"] #m-loader .box, html[data-ui-variant="os"] #m-systems .box{ position:fixed!important; inset:64px 7px 6px 59px!important; width:auto!important; height:auto!important; margin:0!important; } .os-mapping-filters{gap:8px;padding:9px;background:#0a2239!important} .os-mapping-filters span{min-height:58px;padding:8px 10px} .os-mapping-filters small{font-size:11px!important;line-height:1.2} .os-mapping-filters b{font-size:13px!important;line-height:1.3} .os-mapping-topology{min-height:104px} .os-mapping-topology small{font-size:11px!important} .os-mapping-topology b{font-size:13px!important} .os-mapping-topology span{font-size:12px!important} .os-mapping-workbench>#mappingKpis .kpi{font-size:12px!important} .os-mapping-workbench>#mappingKpis .kpi strong{font-size:16px!important} .os-mapping-workbench{ grid-template-rows:68px 92px auto minmax(0,1fr)!important; } .os-mapping-workbench>#mappingSearch, .os-mapping-workbench>.search{ display:block!important; grid-column:1; grid-row:3; width:100%; min-height:44px; color:#eaf4fe!important; } .os-mapping-workbench>#mappingTable, .os-mapping-workbench>.table-wrap{grid-row:4} .os-mapping-workbench :is(table,th,td), .os-evidence-workbench :is(table,th,td){font-size:13px!important;line-height:1.4!important} .os-mapping-workbench th,.os-mapping-workbench td, .os-evidence-workbench th,.os-evidence-workbench td{padding-block:10px!important} .os-mapping-workbench tbody tr:hover td, .os-evidence-workbench tbody tr:hover td{background:#0d2d49!important} .os-mapping-lens h3{font-size:18px!important} .os-mapping-lens p{font-size:13px!important} .os-trace-flow,.os-trace-facts b{font-size:13px!important} .os-trace-facts span{font-size:12px!important;line-height:1.4} .os-evidence-strip span{font-size:11px!important} .os-evidence-strip b{font-size:14px!important} .os-evidence-strip small{font-size:12px!important} .os-evidence-workbench{grid-template-rows:auto clamp(330px,40vh,460px) auto auto minmax(0,1fr)!important} .os-evidence-workbench>.os-evidence-strip{grid-row:1} .os-evidence-workbench>.os-evidence-network-shell{grid-row:2} .os-evidence-workbench>#evidenceSearch{ display:block!important; grid-row:3; width:100%; min-height:44px; color:#eaf4fe!important; } .os-evidence-workbench>#evidenceKpis{ display:flex!important; grid-row:4; min-width:0; margin:0!important; overflow-x:auto; } .os-evidence-workbench>#evidenceKpis .kpi{ display:flex; min-height:44px; align-items:center; flex:0 0 auto; border-color:#214563!important; background:#0b2a46!important; color:#d7e8f6!important; } .os-evidence-workbench>#evidenceBody{grid-row:5} .os-evidence-network-shell>aside header, .os-resolution-lens header{font-size:13px!important} .os-evidence-network-shell>aside article b{font-size:12px!important} .os-gate-list>b{font-size:12px!important} .os-gate-list span{font-size:12px!important} .os-evidence-network>header{font-size:12px!important} .os-evidence-network button b{font-size:12px!important} .os-evidence-network button small{font-size:11px!important} .os-evidence-network footer{font-size:11px!important} .os-resolution-lens header span{font-size:11px!important} .os-resolution-lens h3{font-size:18px!important} .os-resolution-lens p{font-size:13px!important} .os-resolution-lens dt{font-size:12px!important} .os-resolution-lens dd{font-size:13px!important} .os-resolution-lens button{font-size:14px!important} /* Loader and catalogue keep their light audit-workspace character. */ .os-loader-audit,.os-systems-workbench{background:var(--os-p4-workspace)!important} .os-loader-runs header,.os-source-lens header b{font-size:14px!important} .os-loader-runs article b{font-size:14px!important} .os-loader-runs article span,.os-loader-runs p{font-size:12px!important} .os-loader-runs article small{font-size:11px!important} .os-source-lens>p,.os-source-lens dt,.os-source-lens dd{font-size:13px!important} .os-source-totals small{font-size:11px!important} .os-system-inventory>header,.os-system-lens header{font-size:13px!important} .os-domain-filters button{height:44px!important;font-size:12px!important} .os-system-inventory nav button{min-height:56px!important} .os-system-inventory nav button>span{font-size:12px!important} .os-system-inventory nav b{font-size:13px!important} .os-system-inventory nav small{font-size:11px!important} .os-system-lens header span{font-size:11px!important} .os-system-lens>p,.os-system-lens dt,.os-system-lens dd{font-size:13px!important} .os-system-stats small,.os-system-copy{font-size:12px!important} .os-system-lens h4{font-size:13px!important} .os-system-lens>button{font-size:14px!important} .os-domain-group h4{font-size:13px!important} .os-domain-group button{min-height:56px!important} .os-domain-group button span{font-size:12px!important} .os-domain-group button small{font-size:11px!important} .os-domain-group button em{font-size:10px!important} .os-landscape-canvas footer{font-size:11px!important} /* Keep the Classic canvas controls available wherever the OS composition does not provide equivalent proxies, and whenever a technical view is active. */ html[data-ui-variant="os"]:not([data-os-view="sankey"]):not([data-os-view="bpmn"]):not([data-os-view="tracer"]) #canvasToolbar, html[data-ui-variant="os"] body.os-command-technical #canvasToolbar, html[data-ui-variant="os"] body.os-story-technical #canvasToolbar, html[data-ui-variant="os"] body.os-field360-technical #canvasToolbar{ display:flex!important; } /* 1920 / 1600: preserve generous context, canvas and Lens proportions. */ @media(min-width:1601px){ html[data-ui-variant="os"] .layout.detail-open{grid-template-columns:260px minmax(0,1fr) 370px!important} .os-mapping-workbench{grid-template-columns:minmax(0,1fr) 360px!important} .os-loader-shell{grid-template-columns:250px minmax(0,1fr) 320px} .os-systems-shell{grid-template-columns:260px minmax(0,1fr) 320px} } /* 1600 / 1440: retain all controls and use local horizontal scrolling. */ @media(max-width:1600px){ html[data-ui-variant="os"] .topbar h1{min-width:205px!important;flex-basis:215px!important} .os-top-nav-button{padding-inline:9px!important} .os-global-search{width:230px!important} html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:repeat(6,minmax(160px,1fr))!important} } /* 1280: the existing Lens becomes a reversible overlay; no data is hidden. */ @media(max-width:1360px) and (min-width:1025px){ html[data-ui-variant="os"] .layout, html[data-ui-variant="os"] .layout.detail-open{grid-template-columns:230px minmax(0,1fr)!important} html[data-ui-variant="os"] .layout.left-collapsed.detail-open{grid-template-columns:minmax(0,1fr)!important} html[data-ui-variant="os"] .layout.detail-open #detailPanel{ position:fixed!important; inset:156px 10px 76px auto!important; width:min(420px,calc(100vw - 72px))!important; z-index:182!important; } .os-mapping-filters{grid-template-columns:repeat(4,minmax(140px,1fr))} .os-evidence-network-shell{grid-template-columns:170px minmax(0,1fr) 260px} } /* 1024 / 768: navigation and filters scroll locally, drawers overlay. */ @media(max-width:1024px){ html[data-ui-variant="os"] body{padding-left:52px!important} .os-control-rail{display:flex!important} html[data-ui-variant="os"] .topbar{margin-left:-52px!important;width:calc(100% + 52px)!important} html[data-ui-variant="os"] .topbar .row:first-child{gap:8px!important} html[data-ui-variant="os"] .topbar h1{min-width:180px!important;flex-basis:190px!important} .os-global-nav{overflow-x:auto!important;scrollbar-width:thin} .os-top-nav-button{width:44px!important;flex:0 0 44px!important;padding-inline:0!important} .os-top-nav-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .os-global-search{width:176px!important;flex:0 1 176px!important} html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:repeat(6,minmax(178px,1fr))!important} html[data-ui-variant="os"] .layout, html[data-ui-variant="os"] .layout.detail-open{grid-template-columns:218px minmax(0,1fr)!important} html[data-ui-variant="os"] .layout.left-collapsed.detail-open{grid-template-columns:minmax(0,1fr)!important} html[data-ui-variant="os"] .layout.detail-open #detailPanel{ position:fixed!important; inset:156px 8px 74px auto!important; width:min(410px,calc(100vw - 68px))!important; z-index:182!important; } .os-mapping-filters{grid-template-columns:repeat(3,minmax(140px,1fr))} .os-loader-shell,.os-systems-shell{grid-template-columns:210px minmax(0,1fr) 260px} } @media(max-width:768px){ html[data-ui-variant="os"] body{padding-left:0!important;padding-bottom:52px!important} .os-control-rail{ display:flex!important; inset:auto 0 0!important; width:100%!important; height:52px!important; flex-direction:row!important; border-top:1px solid var(--os-p4-line-dark)!important; border-right:0!important; } .os-control-rail .os-rail-scroll{ display:flex!important; min-width:0; flex:1; flex-direction:row!important; gap:6px!important; padding:4px 6px!important; overflow-x:auto!important; overflow-y:hidden!important; } .os-control-rail :is(.os-rail-button,.os-rail-link){ width:44px!important; height:44px!important; flex:0 0 44px!important; } .os-control-rail>.os-rail-link{margin:4px 6px 4px 0!important} html[data-ui-variant="os"] .topbar{margin-left:0!important;width:100%!important} html[data-ui-variant="os"] .topbar .row:first-child{ min-height:116px!important; height:auto!important; flex-wrap:wrap!important; padding:8px!important; } html[data-ui-variant="os"] .topbar h1{flex:1 1 210px!important;min-width:180px!important} .os-global-search{width:44px!important;flex:0 0 44px!important;padding:0!important;justify-content:center!important} .os-global-search span,.os-global-search kbd{display:none!important} .os-global-nav{order:3;width:100%;height:48px!important;flex:0 0 100%;overflow-x:auto!important} .os-top-nav-button{display:flex!important} .os-evidence-nav{display:flex!important} html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:repeat(6,minmax(210px,1fr))!important} html[data-ui-variant="os"] .layout, html[data-ui-variant="os"] .layout.detail-open, html[data-ui-variant="os"] .layout.left-collapsed.detail-open{ height:calc(100dvh - 270px)!important; min-height:500px!important; grid-template-columns:minmax(0,1fr)!important; } html[data-ui-variant="os"] #categoryPanel, html[data-ui-variant="os"] .layout.detail-open #detailPanel{ position:fixed!important; inset:8px!important; width:auto!important; max-width:none!important; z-index:210!important; } html[data-ui-variant="os"] .layout.left-collapsed #categoryPanel{display:none!important} html[data-ui-variant="os"] #m-mapping .box, html[data-ui-variant="os"] #m-evidence .box, html[data-ui-variant="os"] #m-loader .box, html[data-ui-variant="os"] #m-systems .box{ inset:0!important; width:100vw!important; height:100dvh!important; max-width:100vw!important; max-height:100dvh!important; margin:0!important; border-radius:0!important; } html[data-ui-variant="os"] :is(#m-mapping,#m-evidence,#m-loader,#m-systems){padding:0!important} .os-mapping-workbench,.os-evidence-workbench{display:block!important;overflow:auto!important} .os-mapping-filters{grid-template-columns:1fr 1fr} .os-mapping-topology,.os-mapping-workbench>.os-mapping-topology{margin:10px 0!important} .os-mapping-workbench>#mappingKpis{position:static!important;width:auto!important;grid-template-columns:repeat(3,minmax(90px,1fr))} .os-mapping-workbench>#mappingTable,.os-mapping-workbench>.table-wrap{min-height:360px} .os-mapping-lens{margin-top:10px;min-height:320px} .os-evidence-network-shell,.os-loader-shell,.os-systems-shell{grid-template-columns:1fr;height:auto} .os-evidence-network{min-height:420px} .os-loader-runs,.os-source-lens,.os-system-inventory,.os-system-lens{max-height:none} .os-command-graph,.os-story-map{overflow-x:auto} .os-command-graph>header,.os-command-head,.os-command-stage{min-width:720px} .os-field360{grid-template-columns:1fr!important;overflow:auto} .os-field-facts{border-right:0;border-bottom:1px solid var(--os-p4-line)} .os-field-rings{min-height:460px;padding:18px} .ring-systems{width:min(86vw,400px)!important;height:min(86vw,400px)!important} .ring-systems>span{transform:translateY(-168px)!important} .ring-steps>span{transform:translateY(-120px)!important} .ring-origin>span{transform:translateY(-76px)!important} html[data-ui-variant="os"] body.os-focus-mode .layout, html[data-ui-variant="os"] body.os-focus-mode .layout.detail-open, html[data-ui-variant="os"] body.os-focus-mode .layout.left-collapsed.detail-open{left:0!important;bottom:52px!important} body.os-focus-mode .os-focus-docks button:first-child{left:0!important} body.os-focus-mode.os-focus-context-open #categoryPanel, body.os-focus-mode.os-focus-evidence-open #detailPanel{inset:8px!important;width:auto!important} } /* 390: one-column workbench sections and contained wide technical canvases. */ @media(max-width:480px){ html[data-ui-variant="os"] .topbar h1{font-size:16px!important} html[data-ui-variant="os"] .topbar h1 .dot{width:34px!important;height:34px!important;flex-basis:34px!important} html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:repeat(6,minmax(232px,1fr))!important} html[data-ui-variant="os"] .layout, html[data-ui-variant="os"] .layout.detail-open, html[data-ui-variant="os"] .layout.left-collapsed.detail-open{padding:6px!important;gap:6px!important} .os-mapping-filters{grid-template-columns:1fr} .os-mapping-workbench>#mappingKpis{grid-template-columns:1fr!important} .os-evidence-network-shell>aside, .os-resolution-lens,.os-loader-runs,.os-source-lens,.os-system-inventory,.os-system-lens{padding:12px} .os-evidence-network{min-width:620px} .os-evidence-network-shell{overflow-x:auto} .os-loader-journey{grid-template-columns:1fr!important} .os-system-landscape{grid-template-columns:1fr!important} .os-domain-filters{display:grid;grid-template-columns:1fr 1fr} .os-domain-filters button{width:100%} .os-field-facts{padding:12px!important} .os-field-rings{min-height:400px;overflow:auto} .ring-systems{width:340px!important;height:340px!important} .ring-systems>span{transform:translateY(-142px)!important} .ring-steps>span{transform:translateY(-101px)!important} .ring-origin>span{transform:translateY(-63px)!important} .os-ring-legend{position:static;margin:12px;flex-wrap:wrap} } @media(forced-colors:active){ html[data-ui-variant="os"] :focus-visible{ outline:3px solid Highlight!important; box-shadow:none!important; } } @media(prefers-reduced-motion:reduce){ html[data-ui-variant="os"] *, html[data-ui-variant="os"] *::before, html[data-ui-variant="os"] *::after{ scroll-behavior:auto!important; animation:none!important; transition:none!important; } html[data-ui-variant="os"] :is(.cat,.os-rail-button,.os-rail-link):hover{transform:none!important} } /* ======================================================================== 2.0.0-preview.5 — reference fidelity reconstruction Final, additive presentation override for the eight 1672 × 941 reference screens. The Classic DOM remains the functional authority; this block only controls shell geometry, workspace composition, density and containment. ======================================================================== */ html[data-ui-variant="os"]{ --os-p5-shell-height:58px; --os-p5-context-height:72px; --os-p5-context-offset:var(--os-p5-context-height); --os-p5-rail-width:52px; --os-p5-footer-height:70px; --os-p5-modal-head:48px; --os-p5-dense-copy:11.75px; --os-p5-dense-pad-y:5px; --os-p5-dense-pad-x:7px; } /* Screen state is explicit so removing the context row also returns its space to the active canvas. Existing data-os-view values remain a safe fallback. */ html[data-ui-variant="os"]:is( [data-os-screen="bpmn"], [data-os-screen="story"], [data-os-screen="story-map"], [data-os-screen="bpmn-story-map"], [data-os-screen="field360"], [data-os-screen="field-360"] ), html[data-ui-variant="os"][data-os-modal-open]:not([data-os-modal-open="none"]), html[data-ui-variant="os"][data-os-view="bpmn"], html[data-ui-variant="os"][data-os-view="tracer"] body:not(.os-field360-technical){ --os-p5-context-offset:0px; } html[data-ui-variant="os"].os-search-active{--os-p5-context-offset:var(--os-p5-context-height)} html[data-ui-variant="os"][data-os-screen]{ width:100%; max-width:100%; overflow-x:clip; } html[data-ui-variant="os"][data-os-modal-open]:not([data-os-modal-open="none"]){overflow:hidden} /* 58px global shell ------------------------------------------------------ */ html[data-ui-variant="os"] .topbar .row:first-child{ height:var(--os-p5-shell-height)!important; min-height:var(--os-p5-shell-height)!important; padding:0 14px 0 10px!important; gap:10px!important; flex-wrap:nowrap!important; } html[data-ui-variant="os"] .topbar h1{ flex-basis:218px!important; min-width:205px!important; max-width:230px!important; font-size:16px!important; } html[data-ui-variant="os"] .topbar h1>.dot{ width:36px!important; height:36px!important; flex-basis:36px!important; } .os-global-nav{height:44px!important;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none} .os-global-nav::-webkit-scrollbar{display:none} .os-top-nav-button{height:40px!important;min-height:40px!important;padding-inline:10px!important} .os-global-search{height:40px!important;min-height:40px!important} .os-control-rail{top:var(--os-p5-shell-height)!important} html[data-ui-variant="os"] .topbar .row:nth-child(2){ min-height:var(--os-p5-context-height)!important; height:var(--os-p5-context-height)!important; padding:7px 9px!important; } html[data-ui-variant="os"] .topbar .row:nth-child(2)::before, html[data-ui-variant="os"] .topbar :is(.field-picker,.filter-control,.text-filter), html[data-ui-variant="os"] #counters{ min-height:56px!important; height:56px!important; padding:5px 9px!important; } html[data-ui-variant="os"] .topbar :is(input[list],select,.searchbox){ min-height:38px!important; height:38px!important; font-size:12.5px!important; } html[data-ui-variant="os"]:is( [data-os-screen="bpmn"], [data-os-screen="story"], [data-os-screen="story-map"], [data-os-screen="bpmn-story-map"], [data-os-screen="field360"], [data-os-screen="field-360"] ) .topbar .row:nth-child(2), html[data-ui-variant="os"][data-os-modal-open]:not([data-os-modal-open="none"]) .topbar .row:nth-child(2), html[data-ui-variant="os"][data-os-view="bpmn"] .topbar .row:nth-child(2), html[data-ui-variant="os"][data-os-view="tracer"] body:not(.os-field360-technical) .topbar .row:nth-child(2){ display:none!important; } html[data-ui-variant="os"][data-os-screen][data-os-view].os-search-active body .topbar .row:nth-child(2){display:grid!important} html[data-ui-variant="os"] .layout, html[data-ui-variant="os"] .layout.detail-open, html[data-ui-variant="os"] .layout.left-collapsed.detail-open{ height:calc(100dvh - var(--os-p5-shell-height) - var(--os-p5-context-offset) - var(--os-p5-footer-height))!important; min-height:420px!important; } /* All eight Classic modals become integrated workspaces below the persistent product shell and beside the function rail. */ html[data-ui-variant="os"] :is( #m-mapping,#m-loader,#m-repositories,#m-flow, #m-export,#m-evidence,#m-systems,#m-manual ).modal{ padding:0!important; background:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } html[data-ui-variant="os"][data-os-modal-open]:not([data-os-modal-open="none"]) .topbar{z-index:410!important} html[data-ui-variant="os"][data-os-modal-open]:not([data-os-modal-open="none"]) .os-control-rail{z-index:411!important} html[data-ui-variant="os"] :is( #m-mapping,#m-loader,#m-repositories,#m-flow, #m-export,#m-evidence,#m-systems,#m-manual ).modal.open, html[data-ui-variant="os"] :is( #m-mapping,#m-loader,#m-repositories,#m-flow, #m-export,#m-evidence,#m-systems,#m-manual ).modal[aria-hidden="false"]{ z-index:400!important; } html[data-ui-variant="os"] :is( #m-mapping,#m-loader,#m-repositories,#m-flow, #m-export,#m-evidence,#m-systems,#m-manual ).modal .box{ position:fixed!important; inset:var(--os-p5-shell-height) 0 0 var(--os-p5-rail-width)!important; width:auto!important; height:auto!important; max-width:none!important; max-height:none!important; margin:0!important; border:0!important; border-top:1px solid #1b3d59!important; border-left:1px solid #1b3d59!important; border-radius:0!important; box-shadow:none!important; } html[data-ui-variant="os"] .modal .box>header{ height:var(--os-p5-modal-head)!important; min-height:var(--os-p5-modal-head)!important; padding:0 6px 0 14px!important; border-bottom:1px solid #1d405d!important; background:#07192b!important; } html[data-ui-variant="os"] .modal .box>header h2{ min-width:0; margin:0!important; overflow:hidden; color:#edf6fd!important; font-size:13px!important; font-weight:750!important; line-height:1.2!important; letter-spacing:-.01em!important; white-space:nowrap; text-overflow:ellipsis; } html[data-ui-variant="os"] .modal .box>header h2::before{display:none!important;content:""!important} html[data-ui-variant="os"] .modal .box>header :is( .modal-close,[data-modal-close],[data-close],button.close,button:last-child ){ position:relative; width:44px!important; min-width:44px!important; max-width:44px!important; height:44px!important; min-height:44px!important; padding:0!important; overflow:hidden; border:0!important; border-radius:7px!important; background:transparent!important; color:transparent!important; font-size:0!important; box-shadow:none!important; } html[data-ui-variant="os"] .modal .box>header :is( .modal-close,[data-modal-close],[data-close],button.close,button:last-child )::before{ content:"×"; position:absolute; inset:0; display:grid; place-items:center; color:#c6d7e6; font:400 24px/1 "Segoe UI",sans-serif; } html[data-ui-variant="os"] .modal .box>header :is( .modal-close,[data-modal-close],[data-close],button.close,button:last-child ):hover{background:#102f4d!important} html[data-ui-variant="os"] .modal .content{ min-width:0; min-height:0; max-width:none; padding:8px!important; overflow:hidden; } /* Dense workbench rhythm: data density returns to the reference scale while primary actions, inputs, selects and modal close controls retain 44px. */ html[data-ui-variant="os"] :is( .os-mapping-workbench,.os-evidence-workbench,.os-loader-audit, .os-systems-workbench,.os-manual-workbench,.os-repository-control ) :is(table,thead,tbody,tr,th,td){ font-size:var(--os-p5-dense-copy)!important; line-height:1.28!important; } html[data-ui-variant="os"] :is( .os-mapping-workbench,.os-evidence-workbench,.os-loader-audit, .os-systems-workbench,.os-manual-workbench,.os-repository-control ) :is(th,td){ padding:var(--os-p5-dense-pad-y) var(--os-p5-dense-pad-x)!important; } html[data-ui-variant="os"] :is(.os-mapping-workbench,.os-evidence-workbench) th{ height:30px; font-size:11.5px!important; font-weight:760!important; letter-spacing:.015em; } html[data-ui-variant="os"] :is(.os-mapping-workbench,.os-evidence-workbench) td{height:29px} html[data-ui-variant="os"] :is( .os-mapping-workbench,.os-evidence-workbench,.os-loader-audit, .os-systems-workbench,.os-manual-workbench,.os-repository-control ) :is(.primary,[data-primary-action],[data-os-system-action],input,select){ min-height:44px!important; } .os-mapping-workbench{grid-template-rows:58px 84px 44px minmax(0,1fr)!important;gap:7px!important;padding:7px!important} .os-mapping-filters{gap:6px!important;padding:6px!important} .os-mapping-filters span{min-height:46px!important;padding:5px 8px!important} .os-mapping-filters small{font-size:9.5px!important}.os-mapping-filters b{font-size:11.5px!important;margin-top:3px!important} .os-mapping-topology{min-height:84px!important;padding:7px 9px!important} .os-mapping-topology article{padding:7px 9px!important} .os-mapping-topology :is(small,span){font-size:10px!important}.os-mapping-topology b{font-size:12px!important} .os-mapping-workbench>#mappingKpis{padding:3px!important}.os-mapping-workbench>#mappingKpis .kpi{padding:4px 6px!important;font-size:10.5px!important} .os-mapping-workbench>#mappingKpis .kpi strong{font-size:14px!important} .os-mapping-lens{padding:12px!important}.os-mapping-lens h3{font-size:15px!important}.os-mapping-lens p{font-size:11.5px!important}.os-mapping-lens :is(dt,dd){font-size:11.5px!important} .os-trace-facts span{padding:5px 7px!important;font-size:11px!important} .os-evidence-workbench{grid-template-rows:auto clamp(260px,36vh,390px) 44px 44px minmax(0,1fr)!important;gap:7px!important;padding:7px!important} .os-evidence-network-shell{gap:7px!important}.os-evidence-network-shell>aside,.os-resolution-lens{padding:9px!important} .os-evidence-network-shell>aside :is(header,b,span),.os-resolution-lens :is(header,dt,dd,p){font-size:11.5px!important} .os-evidence-network button{padding:7px!important}.os-evidence-network button b{font-size:11.5px!important}.os-evidence-network button small{font-size:10.5px!important} /* Explicit edge grammars. Runtime uses data-os-edge-state; the legacy aliases stay supported for portable carriers generated before preview.5. */ .os-command-edges path.os-explicit-edge{ fill:none!important; stroke:#4c7fa9!important; stroke-width:1.45!important; opacity:.68!important; } .os-command-edges :is(path.verified,path[data-edge-state="verified"],path[data-os-edge-state="verified"],[data-edge-kind="verified"] path), .os-command-edges path.primary{ stroke:#0f62fe!important; stroke-width:3.25!important; stroke-dasharray:none!important; opacity:.92!important; } .os-command-edges :is(path.candidate,path[data-edge-state="candidate"],path[data-os-edge-state="candidate"],[data-edge-kind="candidate"] path){ stroke:#8267d9!important; stroke-width:1.6!important; stroke-dasharray:6 5!important; opacity:.72!important; } .os-command-edges :is(path.muted,path.observed,path[data-edge-state="muted"],path[data-os-edge-state="observed"],[data-edge-kind="muted"] path){ stroke:#b9c6d2!important; stroke-width:1.15!important; stroke-dasharray:none!important; opacity:.42!important; } .os-command-edges :is(path.blocked,path[data-os-edge-state="blocked"]){ stroke:#c44d62!important; stroke-width:1.7!important; stroke-dasharray:3 4!important; opacity:.78!important; } .os-command-edges :is(text,.os-edge-label,.edge-label){ fill:#526b82!important; stroke:#fff; stroke-width:4px; paint-order:stroke fill; font-size:9.5px; font-weight:720; letter-spacing:.01em; } .os-story-sequence, .os-story-sequence-edges, .os-system-edges, .os-evidence-explicit-edges, .os-evidence-edges{ position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; } .os-story-sequence :is(path,line,polyline), .os-story-sequence-edges :is(path,line,polyline){fill:none;stroke:#8fa5b9;stroke-width:1.2;opacity:.7} :is(.os-story-sequence,.os-story-sequence-edges) :is(path.verified,[data-edge-state="verified"],[data-os-edge-state="verified"]){stroke:#0f62fe;stroke-width:1.75;opacity:.9} :is(.os-story-sequence,.os-story-sequence-edges) :is(path.candidate,[data-edge-state="candidate"],[data-os-edge-state="candidate"]){stroke:#8267d9;stroke-dasharray:5 4} :is(.os-story-sequence,.os-story-sequence-edges) :is(text,.os-edge-label,.edge-label){fill:#60768a;stroke:#fff;stroke-width:3px;paint-order:stroke fill;font-size:9px;font-weight:700} .os-system-edges :is(path,line,polyline){fill:none;stroke:#7a4ce0;stroke-width:1.45;opacity:.68} .os-system-edges :is(path.verified,[data-edge-state="verified"],[data-os-edge-state="verified"]){stroke:#6757d7;stroke-width:1.8;opacity:.88} .os-system-edges :is(path.candidate,[data-edge-state="candidate"],[data-os-edge-state="candidate"]){stroke:#8aa0b4;stroke-dasharray:5 5;opacity:.56} .os-system-edges :is(path.blocked,[data-os-edge-state="blocked"]){stroke:#d25871;stroke-dasharray:3 4;opacity:.8} .os-system-edges :is(text,.os-edge-label,.os-system-edge-label,.edge-label){fill:#536b80;stroke:#fbfdff;stroke-width:4px;paint-order:stroke fill;font-size:9px;font-weight:720} :is(.os-evidence-explicit-edges,.os-evidence-edges) :is(path,line,polyline){fill:none;stroke:#21b8d2;stroke-width:1.35;stroke-dasharray:none;opacity:.82} :is(.os-evidence-explicit-edges,.os-evidence-edges) :is(path.candidate,[data-edge-state="candidate"],[data-os-edge-state="candidate"]){stroke:#9270df;stroke-dasharray:5 4;opacity:.66} :is(.os-evidence-explicit-edges,.os-evidence-edges) :is(path.muted,path.observed,[data-edge-state="muted"],[data-os-edge-state="observed"]){stroke:#53748d;stroke-dasharray:3 5;opacity:.52} :is(.os-evidence-explicit-edges,.os-evidence-edges) :is(path.blocked,[data-os-edge-state="blocked"]){stroke:#eb6b80;stroke-dasharray:3 4;opacity:.82} :is(.os-evidence-explicit-edges,.os-evidence-edges) :is(text,.os-edge-label,.edge-label){fill:#a8c7da;stroke:#081d32;stroke-width:4px;paint-order:stroke fill;font-size:9px;font-weight:720} /* 01 / 05 — Command View and Focus Mode -------------------------------- */ .os-command-graph{min-height:0!important} .os-command-graph>header{height:46px!important;min-height:46px!important;flex-basis:46px!important;padding-inline:12px!important} .os-command-graph>header>div:first-child{font-size:11.5px!important} .os-command-head{height:50px!important;flex-basis:50px!important} .os-command-head b{font-size:12.5px!important}.os-command-head small{font-size:10px!important} .os-command-stage{min-height:440px;background-size:17px 17px!important} .os-command-node{ width:clamp(146px,15.5vw,178px)!important; min-height:54px!important; padding:7px 9px 7px 36px!important; border-radius:7px!important; } .os-node-column.process .os-command-node{width:clamp(158px,17vw,192px)!important} .os-node-column.source .os-command-node{left:3.5%!important}.os-node-column.target .os-command-node{right:3.5%!important} .os-command-node .os-node-icon{left:8px!important;top:9px!important;width:21px!important;height:21px!important} .os-command-node b{font-size:11.5px!important}.os-command-node small{font-size:9.5px!important}.os-command-node em{margin-top:4px!important;font-size:9px!important} .os-command-controls{left:10px!important;bottom:10px!important}.os-command-controls button,.os-command-controls b{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;font-size:11.5px!important} .os-command-map{right:10px!important;bottom:10px!important;width:150px!important;height:76px!important;padding:7px!important} html[data-ui-variant="os"] body.os-focus-mode .layout, html[data-ui-variant="os"] body.os-focus-mode .layout.detail-open, html[data-ui-variant="os"] body.os-focus-mode .layout.left-collapsed.detail-open{ left:var(--os-p5-rail-width)!important; top:var(--os-p5-shell-height)!important; bottom:0!important; } body.os-focus-mode .os-focus-docks button:first-child{left:var(--os-p5-rail-width)!important} body.os-focus-mode .os-command-graph>header{height:44px!important;min-height:44px!important;flex-basis:44px!important} body.os-focus-mode .os-command-head{height:48px!important;flex-basis:48px!important} body.os-focus-mode .os-command-node{width:clamp(164px,17vw,210px)!important} body.os-focus-mode .os-node-column.process .os-command-node{width:clamp(178px,19vw,226px)!important} /* 04 — Story Map: keep many lanes and nodes visible at 941px height. */ .os-story-map{min-height:0!important} .os-story-map>header{height:44px!important;min-height:44px!important;flex-basis:44px!important;padding-inline:12px!important} .os-story-map>header>div:first-child{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .os-story-ribbon{height:52px!important;min-height:52px!important;flex-basis:52px!important;gap:4px!important;padding:4px 10px!important} .os-story-ribbon>b{min-width:76px!important;font-size:11px!important} .os-story-ribbon button{ isolation:isolate; width:32px!important; min-width:32px!important; flex-basis:32px!important; height:44px!important; min-height:44px!important; padding:0!important; border:0!important; background:transparent!important; font-size:10px!important; } .os-story-ribbon button::before{ content:""; position:absolute; left:50%; top:50%; z-index:-1; width:25px; height:25px; transform:translate(-50%,-50%); border:1.5px solid currentColor; border-radius:50%; background:#fff; } .os-story-ribbon button::after{left:28px!important;top:21px!important;width:8px!important} .os-story-lane{grid-template-columns:108px minmax(680px,1fr)!important;min-height:58px!important} .os-story-lane>header{padding:6px 9px!important}.os-story-lane>header b{font-size:11.5px!important}.os-story-lane>header small{font-size:9.5px!important} .os-story-flow{min-width:700px!important;overflow:hidden}.os-story-flow button{z-index:2;width:112px!important;min-height:44px!important;padding:5px 6px 5px 27px!important} .os-story-flow button>span{left:5px!important;top:6px!important;font-size:9px!important}.os-story-flow button b{font-size:10.5px!important}.os-story-flow button small{font-size:9px!important} .os-story-minimap{right:9px!important;bottom:9px!important;width:138px!important;height:62px!important;padding:7px!important} .os-story-map>footer{height:36px!important;min-height:36px!important;flex-basis:36px!important;font-size:10px!important} /* 06 — Field 360: facts + complete ring + progressive Evidence Lens. */ .os-field360:has(>.os-field360-lens){ grid-template-columns:minmax(250px,305px) minmax(420px,1fr) minmax(260px,305px)!important; min-height:0!important; height:100%; } .os-field-facts{padding:12px!important}.os-field-facts article{padding:9px!important;margin-bottom:7px!important} .os-field-facts :is(dt,dd){font-size:11.5px!important}.os-field-facts article>b{font-size:12px!important} .os-field-rings{min-height:0!important;height:100%;padding:18px!important;overflow:hidden!important} .ring-systems{ width:min(52vh,45vw,520px)!important; height:min(52vh,45vw,520px)!important; } .ring-systems>span{transform:translateY(-218px)!important}.ring-steps>span{transform:translateY(-156px)!important}.ring-origin>span{transform:translateY(-98px)!important} .os-field-rings .ring>span{font-size:10.5px!important}.os-field-rings .ring strong{font-size:12.5px!important}.ring-field strong{font-size:16px!important} .os-field360-lens{ min-width:0; min-height:0; padding:13px; border-left:1px solid #d8e2eb; background:#fff; color:#23394e; overflow:auto; } .os-field360-lens>header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #dce5ed;color:#1d3349;font-size:11.5px;font-weight:800} .os-field360-lens h3{margin:12px 0 5px;color:#172d43;font-size:16px}.os-field360-lens p{color:#65798c;font-size:11.5px;line-height:1.45} .os-field360-lens dl{margin:12px 0}.os-field360-lens dl>div{display:grid;grid-template-columns:42% 58%;gap:7px;padding:7px 0;border-top:1px solid #e0e7ee} .os-field360-lens :is(dt,dd){margin:0;font-size:11.5px;overflow-wrap:anywhere}.os-field360-lens dt{color:#7a8c9e}.os-field360-lens dd{color:#253b51;font-weight:700} .os-field360-lens :is(button,a[role="button"]){min-height:44px!important} /* 07 — six-stage loader with stable totals. */ .os-loader-shell{grid-template-columns:220px minmax(0,1fr) 286px!important} .os-loader-center{height:100%} .os-loader-journey{ display:flex!important; min-width:0; min-height:92px; gap:5px!important; padding:8px!important; overflow-x:auto; overflow-y:hidden; } .os-loader-journey article{ min-width:96px; min-height:74px; flex:1 1 112px; grid-template-columns:25px minmax(0,1fr)!important; gap:2px 6px!important; padding:7px!important; } .os-loader-journey article>span{width:25px!important;height:25px!important}.os-loader-journey article>b{font-size:9.5px!important}.os-loader-journey article>strong{font-size:14px!important}.os-loader-journey article>small{font-size:9px!important} .os-loader-journey>i{display:grid;place-items:center;flex:0 0 12px} .os-source-totals{position:sticky;bottom:0;grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:10px!important;background:#fff} .os-source-totals span{padding:7px 5px!important}.os-source-totals b{font-size:14px!important}.os-source-totals small{font-size:9.5px!important} /* 08 — landscape owns the center; original details expand on intent. */ .os-systems-shell{grid-template-columns:228px minmax(0,1fr) 286px!important} .os-system-center{height:100%!important;min-height:0!important} .os-system-center>.os-system-landscape{height:100%!important;min-height:0!important;flex:1 1 auto!important} .os-landscape-canvas{height:100%!important;min-height:500px!important} .os-landscape-canvas>.os-system-edges{display:block!important} .os-system-center>#systemsBody{ position:relative; min-height:40px!important; max-height:40px!important; flex:0 0 40px!important; margin-top:6px; overflow:hidden!important; transition:max-height .16s ease,flex-basis .16s ease; } .os-system-center>#systemsBody::before{ content:"Eredeti rendszeradat · fókusz vagy rámutatás a kibontáshoz"; position:sticky; top:0; z-index:4; display:flex; min-height:38px; align-items:center; padding:0 10px; border-bottom:1px solid #dce5ed; background:#f8fafc; color:#60778b; font-size:10.5px; font-weight:750; } .os-system-center>#systemsBody:is(:hover,:focus-within){ max-height:min(28vh,230px)!important; flex-basis:min(28vh,230px)!important; overflow:auto!important; } /* Product guide and repository control use the same integrated workspace grammar, while retaining their original controls and native handlers. */ html[data-ui-variant="os"] :is(.os-manual-workbench,.manual-fixture){ min-width:0; min-height:0; height:100%; max-height:100%; border-radius:8px!important; overflow:hidden!important; } .os-manual-workbench{display:grid!important;grid-template-rows:auto minmax(0,1fr);background:#f5f8fb!important;color:#20364b!important} .os-manual-workbench>header{display:grid;grid-template-columns:minmax(240px,1fr) minmax(260px,390px);gap:12px;padding:12px 16px;border-bottom:1px solid #d8e3ec;background:#fff} .os-manual-workbench :is(input[type="search"],input:not([type])){min-height:44px!important} .os-manual-workbench :is(.os-manual-shell,.manual-shell){display:grid;grid-template-columns:220px minmax(0,1fr);min-height:0;overflow:hidden} .os-manual-workbench :is(nav,aside){min-width:0;padding:10px;border-right:1px solid #d8e3ec;background:#f2f6f9;overflow:auto} .os-manual-workbench main{min-width:0;min-height:0;padding:12px 15px;background:#fff;overflow:auto} html[data-ui-variant="os"] :is(.os-repository-control,.repository-fixture){ display:grid!important; grid-template-columns:210px minmax(360px,1fr) 270px!important; min-width:0; min-height:0; height:100%; max-height:100%; gap:8px!important; padding:8px!important; background:#07192b!important; overflow:hidden!important; } html[data-ui-variant="os"] :is(.os-repository-control,.repository-fixture)>:is(nav,aside,main,section){min-width:0;min-height:0;overflow:auto} .os-repository-control :is(input,select){min-height:44px!important}.os-repository-control :is(.primary,[data-repository-action]){min-height:44px!important} /* Synthetic contract helpers remain conspicuous without masking the canvas. */ html[data-ui-variant="os"][data-preview-kind="synthetic"] .synthetic-banner{ left:calc(var(--os-p5-rail-width) + 6px)!important; right:auto!important; bottom:5px!important; width:auto!important; max-width:min(390px,calc(100vw - var(--os-p5-rail-width) - 190px))!important; transform:none!important; padding:4px 8px!important; overflow:hidden; border-width:1px!important; border-radius:999px!important; font-size:7.5px!important; line-height:1.2!important; letter-spacing:.055em!important; white-space:nowrap; text-overflow:ellipsis; box-shadow:0 5px 16px rgba(0,0,0,.2)!important; } html[data-ui-variant="os"][data-preview-kind="synthetic"] .smoke-panel{ right:6px!important; bottom:5px!important; left:auto!important; width:auto!important; max-width:min(430px,calc(100vw - var(--os-p5-rail-width) - 12px))!important; max-height:52vh!important; border-radius:8px!important; box-shadow:0 10px 28px rgba(0,0,0,.28)!important; } html[data-ui-variant="os"][data-preview-kind="synthetic"] .smoke-panel header{min-height:36px!important;padding:3px 4px 3px 9px!important;font-size:9px!important} html[data-ui-variant="os"][data-preview-kind="synthetic"] .smoke-panel header button{width:44px!important;height:44px!important;min-height:44px!important} html[data-ui-variant="os"][data-preview-kind="synthetic"] .smoke-panel:not(.has-result) pre{display:none!important} html[data-ui-variant="os"][data-preview-kind="synthetic"] .smoke-panel.has-result{width:min(430px,calc(100vw - var(--os-p5-rail-width) - 12px))!important} /* 1600 / 1440 / 1280 --------------------------------------------------- */ @media(max-width:1600px){ html[data-ui-variant="os"] .topbar h1{flex-basis:205px!important;min-width:195px!important} .os-top-nav-button{padding-inline:8px!important}.os-global-search{width:220px!important} .os-field360:has(>.os-field360-lens){grid-template-columns:250px minmax(390px,1fr) 280px!important} .ring-systems{width:min(50vh,42vw,490px)!important;height:min(50vh,42vw,490px)!important} .ring-systems>span{transform:translateY(-205px)!important}.ring-steps>span{transform:translateY(-147px)!important}.ring-origin>span{transform:translateY(-92px)!important} } @media(max-width:1360px) and (min-width:1025px){ html[data-ui-variant="os"] .layout,html[data-ui-variant="os"] .layout.detail-open{grid-template-columns:220px minmax(0,1fr)!important} html[data-ui-variant="os"] .layout.detail-open #detailPanel{inset:calc(var(--os-p5-shell-height) + var(--os-p5-context-offset) + 8px) 8px 72px auto!important} .os-mapping-workbench{grid-template-columns:minmax(0,1fr) 290px!important} .os-loader-shell,.os-systems-shell{grid-template-columns:190px minmax(0,1fr) 250px!important} .os-field360:has(>.os-field360-lens){grid-template-columns:225px minmax(360px,1fr) 255px!important} .ring-systems{width:min(47vh,34vw,420px)!important;height:min(47vh,34vw,420px)!important} .ring-systems>span{transform:translateY(-176px)!important}.ring-steps>span{transform:translateY(-126px)!important}.ring-origin>span{transform:translateY(-79px)!important} } /* 1024: local scroll and progressive secondary panes. */ @media(max-width:1024px){ html[data-ui-variant="os"] .topbar h1{flex-basis:180px!important;min-width:170px!important} html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:repeat(6,minmax(168px,1fr))!important} html[data-ui-variant="os"] :is( #m-mapping,#m-loader,#m-repositories,#m-flow, #m-export,#m-evidence,#m-systems,#m-manual ).modal .box{inset:var(--os-p5-shell-height) 0 0 var(--os-p5-rail-width)!important} .os-mapping-workbench,.os-evidence-workbench{overflow:auto!important} .os-mapping-workbench{grid-template-columns:minmax(620px,1fr) 270px!important} .os-evidence-network-shell{grid-template-columns:160px minmax(430px,1fr) 235px!important;min-width:850px} .os-loader-shell,.os-systems-shell{grid-template-columns:180px minmax(500px,1fr) 235px!important;overflow-x:auto} .os-field360:has(>.os-field360-lens){grid-template-columns:230px minmax(480px,1fr)!important;overflow:auto!important} .os-field360-lens{grid-column:1/-1;border-top:1px solid #d8e2eb;border-left:0} .os-manual-workbench :is(.os-manual-shell,.manual-shell){grid-template-columns:190px minmax(0,1fr)} html[data-ui-variant="os"] :is(.os-repository-control,.repository-fixture){grid-template-columns:180px minmax(400px,1fr)!important;overflow:auto!important} html[data-ui-variant="os"] :is(.os-repository-control,.repository-fixture)>:last-child{grid-column:1/-1} } /* 768: rail becomes the bottom tool bar, while the 58px shell remains one row. */ @media(max-width:768px){ html[data-ui-variant="os"]{--os-p5-footer-height:52px} html[data-ui-variant="os"] .topbar .row:first-child{ height:var(--os-p5-shell-height)!important; min-height:var(--os-p5-shell-height)!important; padding:5px 6px!important; flex-wrap:nowrap!important; } html[data-ui-variant="os"] .topbar h1{flex:0 0 164px!important;min-width:150px!important;max-width:164px!important;font-size:14px!important} html[data-ui-variant="os"] .topbar h1>.dot{width:34px!important;height:34px!important;flex-basis:34px!important} .os-global-nav{order:initial!important;width:auto!important;height:46px!important;flex:1 1 auto!important} .os-global-search{width:44px!important;min-width:44px!important;flex:0 0 44px!important} html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:repeat(6,minmax(196px,1fr))!important} html[data-ui-variant="os"] .layout, html[data-ui-variant="os"] .layout.detail-open, html[data-ui-variant="os"] .layout.left-collapsed.detail-open{ height:calc(100dvh - var(--os-p5-shell-height) - var(--os-p5-context-offset) - var(--os-p5-footer-height))!important; min-height:420px!important; } html[data-ui-variant="os"] :is( #m-mapping,#m-loader,#m-repositories,#m-flow, #m-export,#m-evidence,#m-systems,#m-manual ).modal .box{inset:var(--os-p5-shell-height) 0 52px 0!important} .os-mapping-workbench,.os-evidence-workbench{display:block!important;overflow:auto!important} .os-mapping-workbench>*{margin-bottom:7px!important}.os-mapping-lens{min-height:260px!important} .os-evidence-network-shell{grid-template-columns:150px minmax(430px,1fr) 220px!important;min-width:820px;height:360px!important} .os-loader-shell,.os-systems-shell{display:block!important;overflow:auto!important} .os-loader-runs,.os-source-lens,.os-system-inventory,.os-system-lens{max-height:none!important;margin-bottom:8px} .os-loader-journey{display:grid!important;grid-template-columns:repeat(3,minmax(120px,1fr))!important;overflow:visible}.os-loader-journey>i{display:none!important} .os-system-center>#systemsBody{max-height:none!important;flex-basis:auto!important;overflow:auto!important} .os-field360:has(>.os-field360-lens){display:block!important;overflow:auto!important}.os-field-rings{min-height:470px!important;height:470px!important} .ring-systems{width:min(78vw,400px)!important;height:min(78vw,400px)!important}.ring-systems>span{transform:translateY(-168px)!important}.ring-steps>span{transform:translateY(-120px)!important}.ring-origin>span{transform:translateY(-76px)!important} .os-manual-workbench>header{grid-template-columns:1fr!important}.os-manual-workbench :is(.os-manual-shell,.manual-shell){grid-template-columns:1fr!important;overflow:auto}.os-manual-workbench :is(nav,aside){border-right:0;border-bottom:1px solid #d8e3ec} html[data-ui-variant="os"] :is(.os-repository-control,.repository-fixture){display:block!important;overflow:auto!important} html[data-ui-variant="os"] :is(.os-repository-control,.repository-fixture)>*{margin-bottom:8px} html[data-ui-variant="os"][data-preview-kind="synthetic"] .synthetic-banner{left:6px!important;bottom:57px!important;max-width:calc(100vw - 190px)!important} html[data-ui-variant="os"][data-preview-kind="synthetic"] .smoke-panel{right:6px!important;bottom:57px!important;max-width:calc(100vw - 12px)!important} html[data-ui-variant="os"] body.os-focus-mode .layout, html[data-ui-variant="os"] body.os-focus-mode .layout.detail-open, html[data-ui-variant="os"] body.os-focus-mode .layout.left-collapsed.detail-open{left:0!important;top:var(--os-p5-shell-height)!important;bottom:52px!important} body.os-focus-mode .os-focus-docks button:first-child{left:0!important} } /* 390: one visible shell row and contained technical canvases. */ @media(max-width:480px){ html[data-ui-variant="os"] .topbar h1{flex:0 0 44px!important;min-width:44px!important;max-width:44px!important;font-size:0!important;overflow:hidden!important} html[data-ui-variant="os"] .topbar h1>span:not(.dot){display:none!important} .os-top-nav-button{width:44px!important;min-width:44px!important;flex:0 0 44px!important;padding:0!important}.os-top-nav-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} html[data-ui-variant="os"] .topbar .row:nth-child(2){grid-template-columns:repeat(6,minmax(224px,1fr))!important} html[data-ui-variant="os"] .modal .box>header{padding-left:10px!important}.modal .box>header h2{font-size:12px!important} .os-mapping-workbench :is(table),.os-evidence-workbench :is(table){min-width:760px!important} .os-evidence-network-shell{min-width:790px!important} .os-loader-journey{grid-template-columns:1fr!important}.os-loader-journey article{min-width:0!important} .os-story-map>header,.os-story-ribbon,.os-story-lanes,.os-story-map>footer{min-width:720px} .os-field-rings{min-width:360px!important;min-height:410px!important;height:410px!important}.ring-systems{width:340px!important;height:340px!important}.ring-systems>span{transform:translateY(-142px)!important}.ring-steps>span{transform:translateY(-101px)!important}.ring-origin>span{transform:translateY(-63px)!important} html[data-ui-variant="os"][data-preview-kind="synthetic"] .synthetic-banner{max-width:calc(100vw - 118px)!important;font-size:7px!important} html[data-ui-variant="os"][data-preview-kind="synthetic"] .smoke-panel.has-result{width:calc(100vw - 12px)!important} } @media(forced-colors:active){ html[data-ui-variant="os"] :is(.modal .box,.os-field360-lens,.os-manual-workbench,.os-repository-control){border:1px solid CanvasText!important} html[data-ui-variant="os"] :is(.os-command-edges,.os-story-sequence,.os-story-sequence-edges,.os-system-edges,.os-evidence-explicit-edges,.os-evidence-edges) :is(path,line,polyline){stroke:CanvasText!important;opacity:1!important} html[data-ui-variant="os"] :is(.os-command-edges,.os-story-sequence,.os-story-sequence-edges,.os-system-edges,.os-evidence-explicit-edges,.os-evidence-edges) :is(.verified,[data-edge-state="verified"],[data-os-edge-state="verified"]){stroke:Highlight!important} html[data-ui-variant="os"] .synthetic-banner{border-color:CanvasText!important;background:Canvas!important;color:CanvasText!important} } @media(prefers-reduced-motion:reduce){ html[data-ui-variant="os"] .os-system-center>#systemsBody{transition:none!important} html[data-ui-variant="os"] :is(.os-command-edges,.os-story-sequence,.os-story-sequence-edges,.os-system-edges,.os-evidence-explicit-edges,.os-evidence-edges) *{animation:none!important;transition:none!important} } /* ------------------------------------------------------------------------ 2.0.0-preview.5 — reference fidelity follow-up: Loader + System catalogue Presentation-only contracts for the runtime workbenches represented by reference screens 07 and 08. No labels, metrics or relationships originate here; selectors only arrange runtime-provided controls and explicit edges. ------------------------------------------------------------------------ */ /* 07 — audit loader: dark command strip, run rail, six-stage journey, table workspace and a persistent source/validation Lens. */ html[data-ui-variant="os"] .os-loader-audit:has(>.os-loader-toolbar){ display:grid!important; grid-template-rows:52px minmax(0,1fr); gap:0!important; padding:0!important; overflow:hidden!important; } html[data-ui-variant="os"] .os-loader-audit:has(>.os-loader-toolbar)>.os-loader-shell{ width:auto; height:auto!important; margin:8px; min-height:0; } .os-loader-toolbar{ display:flex; min-width:0; min-height:52px; align-items:center; justify-content:space-between; gap:12px; padding:5px 12px; border-bottom:1px solid #17334e; background:#071b2f; color:#d9e7f3; } .os-loader-breadcrumb{ display:flex; min-width:0; align-items:center; gap:9px; color:#9fb2c5; font-size:11.5px; white-space:nowrap; overflow:hidden; } .os-loader-breadcrumb :is(a,button,span,b,strong){ min-width:0; color:inherit; overflow:hidden; text-overflow:ellipsis; } .os-loader-breadcrumb :is(b,strong,[aria-current="page"]){color:#f5f9fc;font-weight:800} .os-loader-breadcrumb :is(i,[aria-hidden="true"]){color:#59748e;font-style:normal} .os-loader-actions{display:flex;min-width:0;align-items:center;justify-content:flex-end;gap:7px} .os-loader-actions :is(button,a[role="button"]){ display:inline-flex; min-width:44px; min-height:44px!important; align-items:center; justify-content:center; gap:7px; padding:0 13px; border:1px solid #31506c; border-radius:6px; background:#0b2238; color:#ecf5fc; font-size:11.5px; font-weight:750; white-space:nowrap; } .os-loader-actions :is(.primary,[data-os-loader-action="new"]){border-color:#0f62fe;background:#0f62fe;color:#fff} .os-loader-actions :is([data-read-only],[aria-disabled="true"]){border-color:#31506c;background:#071829;color:#b8c8d7} .os-loader-shell{grid-template-columns:300px minmax(0,1fr) 365px!important} .os-loader-runs{padding:8px!important;background:#fff!important} .os-loader-runs>header{display:flex;min-height:38px;align-items:center;justify-content:space-between;padding:0 7px 7px!important} .os-loader-runs [data-os-run]{ position:relative; display:grid; width:100%; min-height:86px!important; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; align-content:center; margin:0 0 6px; padding:10px 11px; border:1px solid #d9e4ed; border-radius:7px; background:#fff; color:#243d55; text-align:left; } .os-loader-runs [data-os-run]:is(.active,[aria-current="true"]){ border-color:#0f62fe; background:#f7fbff; box-shadow:0 0 0 1px #0f62fe,inset 3px 0 0 #0f62fe; } .os-loader-runs [data-os-run] :is(b,strong){font-size:12px;color:#143a66} .os-loader-runs [data-os-run] :is(span,small){font-size:10px;color:#687e92} .os-loader-runs [data-os-run]>b{grid-column:1;grid-row:1;min-width:0;overflow-wrap:anywhere} .os-loader-runs [data-os-run]>span{grid-column:1/-1;grid-row:2;min-width:0} .os-loader-runs [data-os-run]>small{grid-column:1/-1;grid-row:3;justify-self:start} .os-loader-runs [data-os-run] :is(em,[data-status]){ grid-column:2; grid-row:1; justify-self:end; align-self:start; padding:3px 6px; border:1px solid #b7dfca; border-radius:999px; background:#ecfaf2; color:#16814a; font-size:8.5px; font-style:normal; font-weight:850; } .os-loader-center{gap:0!important} .os-loader-center>.os-loader-journey{flex:0 0 auto} .os-loader-journey{ position:relative; display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:8px!important; min-width:0; min-height:116px; margin:0 0 8px!important; padding:9px!important; overflow:visible!important; } .os-loader-journey:not(:has(>article:nth-of-type(6))){grid-template-columns:repeat(auto-fit,minmax(105px,1fr))!important} .os-loader-journey>i{display:none!important} .os-loader-journey article{ position:relative; min-width:0!important; min-height:96px!important; align-content:center; padding:9px 8px!important; border-color:#d6e1ea!important; background:linear-gradient(180deg,#fff,#f9fbfd)!important; box-shadow:0 1px 2px rgba(11,35,57,.04); } .os-loader-journey article:not(:last-of-type)::after{ content:""; position:absolute; top:50%; right:-9px; z-index:2; width:9px; height:1px; background:#9eafbf; transform:translateY(-50%); } .os-loader-journey article>span{width:30px!important;height:30px!important;border-radius:7px!important;font-size:9px!important} .os-loader-journey article>b{font-size:10.5px!important;line-height:1.25;text-transform:none!important;overflow-wrap:anywhere} .os-loader-journey article>strong{font-size:13px!important;line-height:1.2;overflow-wrap:anywhere} .os-loader-journey article>small{font-size:9px!important;line-height:1.25} .os-loader-tabs{ display:flex; min-height:42px; align-items:end; gap:4px; padding:0 5px; border-bottom:1px solid #d9e3eb; background:#fff; overflow-x:auto; } .os-loader-tabs :is(button,a[role="tab"]){ position:relative; min-width:44px; min-height:42px!important; padding:0 10px; border:0; background:transparent; color:#61758a; font-size:10.5px; font-weight:750; white-space:nowrap; } .os-loader-tabs :is(.active,[aria-selected="true"]){color:#0f62c7} .os-loader-tabs :is(.active,[aria-selected="true"])::after{content:"";position:absolute;right:5px;bottom:0;left:5px;height:2px;background:#0f62fe} .os-loader-table-toolbar{ display:flex; min-height:48px; align-items:center; gap:7px; padding:5px; border-bottom:1px solid #dde5ec; background:#fff; } .os-loader-table-toolbar :is(input,select){min-width:0;min-height:38px!important;height:38px!important;font-size:10.5px!important} .os-loader-table-toolbar input{flex:1 1 280px} .os-loader-table-toolbar :is(button,a[role="button"]){min-width:44px;min-height:44px!important;padding-inline:10px;font-size:10.5px;white-space:nowrap} .os-source-lens{position:relative;padding:12px!important;overflow:auto!important} .os-source-lens>header{position:sticky;top:-12px;z-index:3;min-height:43px;align-items:center;padding:0 0 8px!important;background:#fff} .os-validation-summary{margin-top:12px;padding-top:10px;border-top:1px solid #dce5ed;color:#30495f} .os-validation-summary>header{display:flex;min-height:34px;align-items:center;justify-content:space-between;gap:8px;border:0!important;font-size:11px;font-weight:800} .os-validation-summary :is(nav,[role="tablist"]){display:flex;gap:3px;border-bottom:1px solid #dce5ed;overflow-x:auto} .os-validation-summary :is(nav,[role="tablist"]) button{min-width:44px;min-height:40px!important;border:0;background:transparent;color:#61758a;font-size:9.5px;white-space:nowrap} .os-validation-summary :is(nav,[role="tablist"]) button:is(.active,[aria-selected="true"]){color:#0f62c7;box-shadow:inset 0 -2px #0f62fe} .os-validation-summary :is(dl,ul){margin:9px 0;padding:0;list-style:none} .os-validation-summary :is(dl>div,li){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:6px 0;border-bottom:1px solid #e4eaf0;font-size:10px} .os-validation-summary :is(dd,strong,b){margin:0;font-variant-numeric:tabular-nums} /* 08 — catalogue: reference-width inventory and Lens, seven-domain map with explicit edge layer plus compact tools, legend and minimap overlays. */ .os-systems-shell{grid-template-columns:300px minmax(0,1fr) 340px!important} .os-system-inventory,.os-system-lens{scrollbar-gutter:stable} .os-system-center>.os-system-landscape{overflow:hidden!important} .os-system-landscape>header{min-height:40px!important;padding:0 10px!important} .os-landscape-canvas{ height:calc(100% - 40px)!important; min-width:820px!important; min-height:650px!important; padding:12px 12px 104px!important; overflow:hidden; } .os-landscape-canvas>.os-system-edges{z-index:0!important;display:block!important} .os-domain-group{ z-index:1; width:clamp(195px,27%,270px)!important; padding:8px!important; border-color:#beddeb!important; background:rgba(255,255,255,.96)!important; box-shadow:0 2px 8px rgba(22,55,82,.045); } .os-domain-group button{min-height:45px!important;margin:4px 0!important;padding:6px 52px 6px 8px!important} .os-domain-group button span{font-size:10.5px!important}.os-domain-group button small{font-size:9px!important}.os-domain-group button em{font-size:8px!important} .os-domain-group.d0{left:2%!important;right:auto!important;top:44px!important} .os-domain-group.d1{left:auto!important;right:3%!important;top:44px!important;width:clamp(300px,41%,410px)!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px} .os-domain-group.d1 h4{grid-column:1/-1}.os-domain-group.d1 button{margin:0!important} .os-domain-group.d2{left:2%!important;right:auto!important;top:252px!important} .os-domain-group.d3{left:36.5%!important;right:auto!important;top:270px!important} .os-domain-group.d4{left:auto!important;right:3%!important;top:252px!important} .os-domain-group.d5{left:2%!important;right:auto!important;top:475px!important;width:clamp(210px,29%,290px)!important} .os-domain-group.d6{left:36.5%!important;right:auto!important;top:485px!important;width:clamp(210px,29%,290px)!important} .os-domain-group.d7{left:auto!important;right:3%!important;top:475px!important;width:clamp(210px,29%,290px)!important} .os-landscape-canvas>footer{left:14px!important;bottom:94px!important;z-index:2} .os-system-map-tools{ position:absolute; top:14px; right:12px; z-index:4; display:grid; width:44px; border:1px solid #d4dfe8; border-radius:7px; background:#fff; box-shadow:0 4px 14px rgba(17,47,73,.08); overflow:hidden; } .os-system-map-tools button{width:44px;min-width:44px;min-height:44px!important;border:0;border-bottom:1px solid #e0e7ed;background:#fff;color:#27435c;font-size:12px} .os-system-map-tools button:last-child{border-bottom:0} .os-system-map-tools button:is(:hover,:focus-visible){background:#edf6ff;color:#0f62c7} .os-system-map-tools button:disabled{cursor:not-allowed;opacity:.38} .os-domain-group button em{max-width:48px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right} .os-system-legend{ position:absolute; left:14px; bottom:12px; z-index:3; display:flex; max-width:min(470px,58%); min-height:68px; align-items:center; gap:12px 20px; padding:9px 12px; border:1px solid #d4dfe8; border-radius:7px; background:rgba(255,255,255,.96); color:#5d7388; font-size:9px; box-shadow:0 2px 9px rgba(17,47,73,.06); } .os-system-legend :is(ul,dl){display:flex;flex-wrap:wrap;gap:7px 15px;margin:0;padding:0;list-style:none} .os-system-legend :is(li,dl>div){display:flex;align-items:center;gap:6px;white-space:nowrap} .os-system-minimap{ position:absolute; right:12px; bottom:12px; z-index:3; width:174px; height:92px; padding:5px; border:1px solid #cbd8e3; border-radius:6px; background:rgba(246,250,253,.96); box-shadow:0 2px 9px rgba(17,47,73,.07); overflow:hidden; } .os-system-minimap :is(svg,canvas,img){display:block;width:100%;height:100%;object-fit:contain} .os-system-minimap [data-os-viewport]{position:absolute;border:2px solid #0f62fe;background:rgba(15,98,254,.08)} /* Intermediate desktops retain the three-pane reference rhythm. */ @media(max-width:1600px) and (min-width:1361px){ .os-loader-shell{grid-template-columns:260px minmax(0,1fr) 320px!important} .os-systems-shell{grid-template-columns:260px minmax(0,1fr) 310px!important} .os-domain-group{width:clamp(190px,27%,250px)!important} .os-domain-group.d1{width:clamp(280px,40%,370px)!important} } @media(max-width:1360px) and (min-width:1025px){ .os-loader-shell{grid-template-columns:205px minmax(0,1fr) 270px!important} .os-systems-shell{grid-template-columns:210px minmax(0,1fr) 270px!important} .os-loader-runs [data-os-run]{min-height:78px!important;padding:8px} .os-loader-journey{gap:5px!important;padding:7px!important} .os-loader-journey article{min-height:90px!important;padding:7px 6px!important}.os-loader-journey article>b{font-size:9.5px!important}.os-loader-journey article>strong{font-size:11.5px!important} .os-landscape-canvas{min-width:760px!important} .os-domain-group{width:25.5%!important}.os-domain-group.d1{width:39%!important} } @media(max-width:1024px){ .os-loader-toolbar{min-width:760px}.os-loader-audit:has(>.os-loader-toolbar){overflow:auto!important} .os-loader-shell{grid-template-columns:180px minmax(720px,1fr) 260px!important;min-width:1176px;overflow:visible!important} .os-systems-shell{grid-template-columns:190px minmax(820px,1fr) 250px!important;min-width:1276px;overflow:visible!important} .os-loader-journey{grid-template-columns:repeat(6,minmax(105px,1fr))!important} .os-landscape-canvas{min-width:820px!important} } @media(max-width:768px){ html[data-ui-variant="os"] .os-loader-audit:has(>.os-loader-toolbar){display:block!important;overflow:auto!important} .os-loader-toolbar{position:sticky;top:0;z-index:8;min-width:720px} .os-loader-shell,.os-systems-shell{display:block!important;min-width:0!important;overflow:auto!important} html[data-ui-variant="os"] .os-loader-audit:has(>.os-loader-toolbar)>.os-loader-shell{margin:7px;height:auto!important} .os-loader-runs,.os-source-lens,.os-system-inventory,.os-system-lens{max-height:none!important} .os-loader-journey,.os-loader-journey:has(>article:nth-of-type(6)){grid-template-columns:repeat(3,minmax(150px,1fr))!important;min-width:500px;overflow:auto!important} .os-loader-table-toolbar{min-width:620px} .os-system-center>.os-system-landscape{height:720px!important;overflow:auto!important} .os-landscape-canvas{height:680px!important;min-width:820px!important} } @media(max-width:480px){ .os-loader-actions{flex:0 0 auto}.os-loader-actions :is(button,a[role="button"]){padding-inline:9px} .os-loader-journey,.os-loader-journey:has(>article:nth-of-type(6)){grid-template-columns:1fr!important;min-width:280px!important} .os-loader-journey article:not(:last-of-type)::after{display:none} .os-loader-tabs,.os-loader-table-toolbar{min-width:620px} .os-system-legend{max-width:450px}.os-system-minimap{width:150px;height:82px} } @media(forced-colors:active){ html[data-ui-variant="os"] :is(.os-loader-toolbar,.os-loader-runs [data-os-run],.os-loader-tabs,.os-loader-table-toolbar,.os-validation-summary,.os-system-map-tools,.os-system-legend,.os-system-minimap){border:1px solid CanvasText!important;background:Canvas!important;color:CanvasText!important} html[data-ui-variant="os"] :is(.os-loader-tabs,.os-validation-summary) [aria-selected="true"]{outline:2px solid Highlight!important} } @media(prefers-reduced-motion:reduce){ html[data-ui-variant="os"] :is(.os-loader-toolbar,.os-loader-runs [data-os-run],.os-loader-tabs,.os-loader-table-toolbar,.os-validation-summary,.os-system-map-tools,.os-system-legend,.os-system-minimap) *{scroll-behavior:auto!important;transition:none!important} } /* Desktop OS runtime owns the viewport. Child panels and integrated workbenches keep their existing local overflow contracts; mobile retains document scrolling for stacked content. */ @media(min-width:769px){ html[data-ui-variant="os"]{ height:100dvh; min-height:0; max-height:100dvh; overflow:hidden; overscroll-behavior:none; } html[data-ui-variant="os"] body.os-runtime-ready{ position:fixed; inset:0; width:100%; height:100dvh; min-height:0!important; max-height:100dvh; box-sizing:border-box; overflow:hidden!important; overscroll-behavior:none; } } /* ---- system landscape: routed edges, selected-first, labels in pills ---- */ .os-system-edges path.os-explicit-edge{fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-width:1.6px} .os-system-edges path.os-explicit-edge.verified{stroke:#0f62fe} .os-system-edges path.os-explicit-edge.candidate{stroke:#71869a;stroke-dasharray:5 4} .os-system-edges path.os-explicit-edge.blocked{stroke:#d43b4f} .os-system-edges path.os-explicit-edge.observed{stroke:#168a8a} .os-system-edges path.os-explicit-edge.primary{stroke-width:2.3px;opacity:1} .os-system-edges path.os-explicit-edge.muted{opacity:.3} .os-system-edges marker polygon{fill:#0f62fe} .os-system-edges .os-edge-pill rect{fill:#fff;stroke:#c9d7e4;stroke-width:1} .os-system-edges .os-edge-pill text{font-size:9.5px;font-weight:700;fill:#2b4763;font-family:inherit} .os-landscape-canvas [data-os-system-key].selected{outline:2px solid #0f62fe!important;outline-offset:1px!important;background:#eef4ff!important} .os-landscape-canvas>footer .os-system-edge-filter{display:inline-flex;align-items:center;gap:6px;margin-left:14px;font-size:10.5px;color:#3f5b72;cursor:pointer;user-select:none} .os-landscape-canvas>footer .os-system-edge-filter input{margin:0;accent-color:#0f62fe}