/* A case connects the work; specific analysis outputs belong to their source. */
.product-system { --graph-line:#837462; --graph-text:#e7e0d7; --graph-soft:#c4b8a9; --graph-accent:#e7bf93; background:#292622; color:var(--graph-text); border:1px solid #49423a; border-radius:5px; overflow:hidden; }
.system-top { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:7px 14px 7px 26px; min-height:58px; border-bottom:1px solid #50483f; font-size:13px; }
.system-board { position:relative; display:grid; grid-template-columns:1fr 1.2fr 1fr; grid-template-rows:auto auto auto; gap:24px 64px; padding:30px 30px 24px; }
.system-connections { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.system-connections path { fill:none; stroke:var(--graph-line); stroke-width:1.15; }.system-connections path.is-active { stroke:var(--graph-accent); stroke-width:1.8; }.system-connections .system-arrow { stroke:var(--graph-line); stroke-width:1.2; }
.system-packet { fill:var(--graph-accent); offset-distance:50%; opacity:.9; }[data-playing=true] .system-packet { animation:system-travel 2s linear infinite; }
@keyframes system-travel { from { offset-distance:0%; opacity:0; } 12%,88% { opacity:1; } to { offset-distance:100%; opacity:0; } }
.system-node { position:relative; z-index:1; min-width:0; display:block; border:1px solid #625747; border-radius:4px; padding:20px; background:#312d28; transition:background .2s,border-color .2s; }
.system-node:hover,.system-node:focus-visible { border-color:var(--graph-accent); }.system-node.is-current { border-color:var(--graph-accent); background:#42372b; }.system-node.is-source { border-color:#b89b7a; }
.system-node-heading { display:flex; align-items:center; gap:10px; }.system-node-heading>svg { width:20px; height:20px; flex-shrink:0; color:#dfc3a4; }.system-node-heading>strong { font-size:15px; font-weight:550; line-height:1.6; }
.system-node p { color:var(--graph-soft); font-size:12px; line-height:1.85; margin-top:9px; }.system-node small { display:block; font-size:11px; line-height:1.8; color:var(--graph-soft); margin-top:12px; }
.node-communication { grid-area:1/1; }.node-materials { grid-area:2/1; }.node-case { grid-area:1/2/3/3; background:#f2ece2; color:#302b25; border-color:#c9b69d; padding:24px; }.node-case.is-current { background:#f8f2e8; border-color:#e7bf93; }.node-case.is-source { border-color:#e7bf93; }
.node-case .system-node-heading>svg { color:#8a613e; }.node-case .system-node-heading>strong { font-family:var(--serif); font-size:23px; font-weight:600; }.node-case>p { color:#736554; font-size:11px; margin-top:8px; }
.case-facts { margin:22px 0 20px; padding:0; list-style:none; display:grid; gap:12px; }.case-facts>li { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12px; line-height:1.7; color:#655847; }.case-facts strong { font-family:var(--sans); font-size:14px; font-weight:550; color:#332d26; }.case-facts .fact-unverified { color:#8b532d; }
.system-case-artifact { border-top:1px solid #cbbda9; padding-top:16px; min-height:103px; }.system-case-artifact>small { margin:0; font-size:10px; color:#786650; letter-spacing:.06em; }.system-case-artifact>p { margin-top:7px; font-size:13px; color:#44392c; line-height:1.85; }
.material-outputs { display:flex; flex-wrap:wrap; gap:6px; margin-top:15px; }.material-outputs>span { border:1px solid #78634f; padding:3px 7px; border-radius:2px; font-size:10px; color:#dec6aa; line-height:1.8; }
.system-quote { margin:15px 0 0; padding:11px 12px; border-left:2px solid #b79774; background:#25221e; font-family:var(--serif); font-size:13px; line-height:1.9; color:#e4d6c3; }.system-quote>small { margin-top:6px; font-family:var(--sans); font-size:10px; color:#bdb09f; }.system-files { display:grid; gap:6px; margin-top:13px; }.system-files>span { display:flex; align-items:center; gap:8px; font-size:11px; line-height:1.8; color:#dfd0ba; }.system-files svg { width:14px; height:14px; flex-shrink:0; color:#b79774; }
.node-document { grid-area:1/3; }.node-hearing { grid-area:2/3; }.workflow-outputs { margin-top:13px; display:grid; gap:5px; }.workflow-outputs>span { padding-left:13px; position:relative; font-size:12px; color:#d4c7b6; line-height:1.8; }.workflow-outputs>span:before { content:''; width:4px; height:4px; border:1px solid #b79774; position:absolute; left:0; top:.65em; }
.node-todo { grid-area:3/2/4/4; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 18px; background:#302b25; }.node-todo .system-node-heading>strong { font-size:13px; }.node-todo>p { margin:0; font-size:11px; text-align:right; }
.system-support { display:flex; align-items:center; justify-content:space-between; gap:18px 32px; padding:17px 30px; border-top:1px solid #50483f; background:#24211e; }.system-support>strong { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:500; }.system-support svg { width:19px; height:19px; color:#dfc3a4; }.system-support>span { font-size:11px; color:var(--graph-soft); line-height:1.9; }
@media(max-width:1100px) { .system-board { gap:22px 40px; padding:25px 22px 22px; }.system-node { padding:16px; }.node-case { padding:20px; }.case-facts { margin-block:19px; }.system-node-heading>strong { font-size:14px; }.node-case .system-node-heading>strong { font-size:21px; }.system-support { padding-inline:22px; } }
@media(max-width:860px) { .system-board { gap:22px 28px; padding:22px 18px; grid-template-columns:1fr 1.15fr 1fr; }.system-node { padding:15px 12px; }.system-node-heading { align-items:flex-start; flex-wrap:wrap; gap:7px; }.system-node-heading>strong { font-size:13px; }.system-node p { font-size:11px; }.node-case { padding:17px; }.node-case .system-node-heading>strong { font-size:19px; }.case-facts>li { flex-wrap:wrap; gap:1px 8px; }.case-facts { gap:9px; }.system-case-artifact { min-height:116px; }.node-todo { padding:12px; }.system-support { align-items:flex-start; }.system-support>strong { flex-shrink:0; } }
@media(max-width:700px) { .system-top { min-height:62px; padding:6px 9px 6px 16px; font-size:12px; }.system-board { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 20px; padding:20px 18px; }.node-communication { grid-area:1/1; }.node-materials { grid-area:1/2; }.system-node { padding:16px 12px; }.node-case { grid-area:2/1/3/3; padding:22px; }.node-case .system-node-heading { align-items:center; }.node-case .system-node-heading>strong { font-size:23px; }.case-facts { margin-block:18px; gap:9px; }.case-facts>li { flex-wrap:nowrap; }.system-case-artifact { min-height:85px; }.node-document { grid-area:3/1; }.node-hearing { grid-area:3/2; }.node-todo { grid-area:4/1/5/3; display:block; }.node-todo>p { margin-top:6px; text-align:left; }.system-support { padding:16px 18px; flex-direction:column; gap:8px; }.system-support>span { font-size:11px; }.material-outputs { gap:5px; }.material-outputs>span { padding:2px 5px; }.workflow-outputs>span { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .system-packet { animation:none!important; offset-distance:50%; }.system-node { transition:none; } }