.engineering-figure.product-example-figure { width:100%; max-width:960px; margin-inline:auto; }
.flat-illustration:has(.product-example-figure) { width:100%; max-width:960px; margin-inline:auto; }
.product-example-figure figcaption { font-size:14px; }
.product-window { border:1px solid #c7d7e6; border-radius:13px; background:white; overflow:hidden; box-shadow:0 20px 55px #1029510d; color:var(--ink); }
.product-window-bar { display:flex; align-items:center; gap:20px; min-height:58px; padding:12px 22px; border-bottom:1px solid var(--line); background:white; color:var(--navy); border-top:3px solid var(--blue); }
.product-wordmark { display:flex; gap:9px; align-items:center; font-size:16px; font-weight:650; letter-spacing:-.02em; }
.product-wordmark>span { display:grid; place-items:center; width:26px; height:26px; background:#ffffff16; border:1px solid #ffffff40; border-radius:6px; font-size:16px; }
.product-view-name { font-size:14px; color:var(--muted); border-left:1px solid var(--line); padding-left:20px; }
.product-example-tag { margin-left:auto; font-size:12px; color:var(--blue); background:var(--sky); border:1px solid var(--line); border-radius:5px; padding:4px 8px; white-space:nowrap; }
.product-workspace-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; background:#f5f8fb; padding:12px 22px; border-bottom:1px solid var(--line); font-size:14px; }
.product-workspace-bar>span:first-child { display:flex; align-items:center; gap:8px; }
.product-project-icon { display:grid; place-items:center; border-radius:5px; background:#e4edf7; color:var(--blue); width:25px; height:25px; font-weight:600; }
.product-project-meta,.product-record-count { color:var(--muted); font-size:12px; }
.product-content-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; padding:26px 24px; }
.product-overline { display:block; font-size:12px; font-weight:600; letter-spacing:.055em; color:var(--muted); line-height:1.6; }
.product-content-heading h4 { font-size:24px; line-height:1.3; font-weight:600; letter-spacing:-.025em; margin:7px 0 9px; color:var(--navy); }
.product-content-heading p { font-size:15px; color:var(--muted); margin:0; line-height:1.6; }
.product-content-heading p strong { color:var(--blue); font-weight:600; }
.product-content-heading p s { margin:0 5px; }
.product-status { display:inline-flex; align-self:flex-start; padding:5px 9px; background:#f7ece1; color:#865028; border:1px solid #eddbc9; font-size:12px; font-weight:550; border-radius:5px; line-height:1.5; }
.impact-workspace { display:grid; grid-template-columns:minmax(0,1fr) 260px; border-top:1px solid var(--line); }
.impact-canvas { padding:20px 18px 16px; min-width:0; background-color:#f8fafc; background-image:radial-gradient(#d3dfeb .7px,transparent .7px); background-size:16px 16px; }
.impact-canvas-key { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; margin-bottom:24px; }
.impact-key { display:flex; align-items:center; gap:6px; }
.impact-key i { height:2px; width:20px; background:var(--blue); }
.impact-graph { position:relative; }
.impact-connectors { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.impact-connectors>path { fill:none; stroke:#a3bdd3; stroke-width:1.5px; }
.impact-connectors>path.is-related { stroke:var(--blue); stroke-width:2.3px; }
.impact-nodes { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(136px,auto)); gap:42px 25px; align-items:center; }
.impact-node { display:flex; flex-direction:column; align-items:flex-start; width:100%; min-width:0; min-height:136px; padding:13px 11px; border:1px solid #b8cde0; border-radius:8px; background:white; box-shadow:0 3px 8px #10295108; text-align:left; font-family:inherit; cursor:pointer; }
.impact-node:hover { border-color:var(--blue); background:#f7fbff; }
.impact-node.is-selected { border-color:var(--blue); box-shadow:0 0 0 2px #1b4f8a20; background:#edf5fc; }
.impact-node:focus-visible,.trace-select:focus-visible,.trace-toolbar :is(input,select):focus-visible,.trace-table-scroll:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.impact-node-kind { font-size:12px; color:var(--muted); line-height:1.4; }
.impact-node strong { font-size:14px; line-height:1.35; font-weight:600; margin:6px 0; color:var(--navy); }
.impact-node-id { color:var(--blue); font-size:12px; line-height:1.5; }
.impact-node-state { color:#865028; font-size:12px; line-height:1.4; margin-top:10px; }
.impact-node[data-node="CHG-042"] { grid-area:1 / 1 / 3 / 2; }
.impact-node[data-node="SYS-042"] { grid-area:1 / 2; }
.impact-node[data-node="ARCH-017"] { grid-area:2 / 2; }
.impact-node[data-node="TST-042"] { grid-area:1 / 3; }
.impact-node[data-node="INT-008"] { grid-area:2 / 3; }
.impact-node[data-node="EV-018"] { grid-area:1 / 4 / 3 / 5; }
.product-canvas-note { font-size:12px; line-height:1.7; color:var(--muted); margin:24px 0 0; }
.impact-inspector { padding:22px; background:white; border-left:1px solid var(--line); }
.impact-inspector h5 { font-size:20px; line-height:1.3; font-weight:600; color:var(--navy); margin:8px 0 12px; letter-spacing:-.02em; }
.impact-inspector>p { font-size:14px; color:var(--muted); line-height:1.65; margin:16px 0; }
.product-next-action { padding:15px; margin:20px 0; border:1px solid var(--line); border-radius:7px; background:#f5f8fc; }
.product-next-action>strong { font-size:14px; color:var(--navy); font-weight:600; }
.product-next-action p { font-size:14px; line-height:1.6; margin:7px 0 0; color:var(--muted); }
.impact-inspector .product-source { font-size:12px; margin:6px 0 0; }
.product-window-footer { display:flex; justify-content:space-between; gap:14px; padding:12px 22px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.6; background:#fbfcfd; }
.trace-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:8px; margin:0 24px 22px; overflow:hidden; background:#f7fafc; }
.trace-summary>div { display:flex; flex-direction:column; gap:6px; padding:16px 20px; }
.trace-summary>div+div { border-left:1px solid var(--line); }
.trace-summary strong { font-size:26px; font-weight:550; line-height:1.2; color:var(--navy); letter-spacing:-.04em; }
.trace-summary span { font-size:12px; line-height:1.6; color:var(--muted); }
.trace-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:0 24px 20px; }
.trace-search { position:relative; flex:1; min-width:210px; max-width:400px; }
.trace-search svg { position:absolute; width:18px; height:18px; left:12px; top:13px; stroke:var(--muted); fill:none; stroke-width:1.6px; pointer-events:none; }
.trace-search input { width:100%; border:1px solid #b8ccde; border-radius:6px; padding:11px 12px 11px 38px; font:400 14px var(--font-body); color:var(--ink); background:white; min-height:44px; }
.trace-filter { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; }
.trace-filter select { min-height:44px; font:400 14px var(--font-body); color:var(--ink); border:1px solid #b8ccde; border-radius:6px; background:white; padding:9px 28px 9px 10px; }
.trace-result-count { margin-left:auto; color:var(--muted); font-size:12px; }
.trace-table-scroll { overflow-x:auto; }
.trace-table { width:100%; min-width:840px; border-collapse:collapse; text-align:left; }
.trace-table th,.trace-table td { padding:15px 17px; border-top:1px solid var(--line); vertical-align:middle; font-size:14px; }
.trace-table thead th { background:#f6f9fc; font-size:12px; font-weight:600; color:var(--muted); }
.trace-table tbody th { width:29%; font-weight:400; }
.trace-table tr.is-selected { background:#f0f6fc; }
.trace-table tr[hidden],.trace-detail[hidden],.trace-empty[hidden] { display:none; }
.trace-select { border:0; padding:0; background:transparent; font-family:inherit; text-align:left; cursor:pointer; }
.trace-select strong { display:block; color:var(--blue); font-size:14px; font-weight:600; margin-bottom:5px; text-decoration:underline; text-underline-offset:3px; }
.trace-select span { color:var(--ink); font-size:14px; line-height:1.5; }
.trace-record { color:var(--blue); white-space:nowrap; font-size:12px; font-variant-numeric:tabular-nums; }
.trace-record-missing { color:#915429; }
.trace-status { display:inline-block; padding:4px 7px; border-radius:5px; font-size:12px; line-height:1.5; white-space:nowrap; }
.trace-status-linked { color:#326451; background:#eaf3ef; }
.trace-status-review,.trace-status-gap { color:#8a4e25; background:#f8ecdf; }
.trace-detail { display:grid; grid-template-columns:minmax(160px,.7fr) 1.8fr; align-items:start; gap:26px; padding:22px 24px; border-top:1px solid var(--line); background:#f4f8fc; }
.trace-detail strong { display:block; margin-top:6px; color:var(--navy); font-size:15px; font-weight:600; line-height:1.5; }
.trace-detail p { font-size:14px; line-height:1.7; color:var(--muted); margin:0; }
.trace-empty { padding:24px; color:var(--muted); font-size:15px; }
.trace-scroll-hint { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:1120px) { .impact-workspace { grid-template-columns:1fr; } .impact-inspector { border-left:0; border-top:1px solid var(--line); } .impact-inspector>p { max-width:850px; } .product-next-action { margin:14px 0; } }
@media(max-width:850px) { .trace-scroll-hint { display:block; font-size:12px; color:var(--muted); margin:0; padding:0 24px 12px; } .product-content-heading { flex-direction:column; gap:14px; } .trace-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .trace-summary>div:nth-child(3) { border-left:0; border-top:1px solid var(--line); } .trace-summary>div:nth-child(4) { border-top:1px solid var(--line); } .product-record-count { display:none; } }
@media(max-width:600px) {
 .product-window-bar { padding:12px 14px; gap:10px; flex-wrap:wrap; }
 .product-view-name { padding-left:10px; }
 .product-example-tag { margin-left:0; }
 .product-workspace-bar { padding:12px 14px; }
 .product-project-meta { display:none; }
 .product-content-heading { padding:22px 16px; }
 .product-content-heading h4 { font-size:22px; }
 .impact-canvas { padding:18px 14px; }
 .impact-canvas-key { flex-direction:column; gap:8px; }
 .impact-nodes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 26px; }
 .impact-node[data-node] { grid-area:auto; min-height:140px; }
 .impact-node strong { font-size:15px; }
 .impact-inspector { padding:20px 16px; }
 .product-window-footer { flex-direction:column; gap:5px; padding:12px 16px; }
 .trace-summary { margin:0 16px 20px; }
 .trace-summary>div { padding:14px; }
 .trace-toolbar { padding:0 16px 16px; gap:12px; }
 .trace-search { flex-basis:100%; max-width:none; }
 .trace-result-count { margin-left:0; }
 .trace-scroll-hint { padding-left:16px; }
 .trace-detail { grid-template-columns:1fr; gap:12px; padding:20px 16px; }
}

.product-wordmark img { display:block; width:124px; height:auto; }
@media(max-width:720px) { .impact-nodes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 26px; } .impact-node[data-node] { grid-area:auto; min-height:140px; } }