/* Three simpler alternatives; the existing diagram remains the default. */
.local-diagram{border:1px solid var(--line);border-radius:5px;padding:22px 28px 18px;overflow:hidden}
.local-diagram-top{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#b8b8b0;font-size:13px}
.local-diagram-top span:first-child{display:flex;align-items:center;gap:9px}
.local-diagram-top svg{width:14px;height:14px;flex:none}
.local-diagram-top span:last-child{color:#858580}
.local-diagram-headings{display:grid;grid-template-columns:36% 34% 30%;margin-top:30px;font-size:14px;color:#c3c3bb}
.local-diagram-headings span:nth-child(2){padding-left:6%}
.local-diagram-headings span:last-child{padding-left:4%}
.local-diagram-stage{position:relative;height:256px;margin-top:8px}
.local-diagram-canvas{display:block;width:100%;height:100%}
.local-diagram-output{position:absolute;inset:0 0 0 72%;display:grid;grid-template-rows:repeat(3,1fr);pointer-events:none}
.local-output-row{align-self:center;min-width:0;padding-bottom:17px}
.local-output-row strong{display:block;font-size:14px;font-weight:400;line-height:1.25;color:#c8c8c1}
.local-output-row span{display:block;font-size:12px;color:#92928d;line-height:1.35;margin-top:5px}
.local-output-row .local-detail{display:inline;font:inherit;color:inherit;margin:0}
.local-diagram-foot{font-size:13px;color:#92928c;line-height:1.5;margin-top:16px}
.local-diagram-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.local-raw-labels{position:absolute;inset:0 68% 0 0;display:grid;grid-template-rows:repeat(3,1fr);pointer-events:none}
.local-raw-labels p{align-self:center;color:#999991;font-size:14px;line-height:1.45;max-width:265px}
[data-local-visual="field"] .local-diagram-headings{grid-template-columns:36% 34% 30%}
[data-local-visual="lanes"] .local-diagram-output{left:48%;right:16%}
[data-local-visual="lanes"] .local-output-row{padding:0}
[data-local-visual="lanes"] .local-output-row strong{display:inline-block;border-radius:3px;background:#b9b9b2;color:#101010;padding:6px 10px;font-size:14px}
[data-local-visual="lanes"] .local-output-row:nth-child(2) strong{background:#97978f}
[data-local-visual="lanes"] .local-output-row:nth-child(3) strong{background:#74746d;color:#eee}
[data-local-visual="lanes"] .local-output-row span{margin-top:7px}
[data-local-visual="lanes"] .local-diagram-headings{grid-template-columns:48% 36% 16%}
[data-local-visual="lanes"] .local-diagram-headings span:nth-child(n){padding:0}
@media(max-width:760px){
  .local-diagram{padding:18px 18px 16px}
  .local-diagram-headings{font-size:12px;margin-top:26px}
  .local-diagram-stage{height:258px}
  .local-diagram-output{left:67%}
  .local-output-row strong{font-size:13px}
  .local-output-row span{font-size:12px}
  .local-diagram-headings{grid-template-columns:33% 32% 35%}
  [data-local-visual="field"] .local-diagram-headings{grid-template-columns:33% 32% 35%}
  .local-diagram-top{font-size:12px}
  .local-raw-labels{right:69%}
  .local-raw-labels p{font-size:12px}
  [data-local-visual="lanes"] .local-diagram-output{left:45%;right:14%}
  [data-local-visual="lanes"] .local-output-row strong{font-size:12px;padding:5px 7px}
  [data-local-visual="lanes"] .local-diagram-headings{grid-template-columns:45% 41% 14%}
}
@media(max-width:520px){
  .local-diagram{padding-inline:14px}
  .local-diagram-top{align-items:flex-start;gap:12px}
  .local-diagram-top span:last-child{max-width:110px;text-align:right}
  .local-diagram-stage{height:360px}
  .local-diagram-headings{font-size:12px;column-gap:2px}
  .local-output-row{padding-bottom:21px}
  .local-output-row strong{font-size:12px}
  .local-output-row span{font-size:12px;line-height:1.35}
  .local-output-row .local-detail{display:none}
  .local-output-row strong,.local-output-row span{overflow-wrap:anywhere}
  .local-diagram-foot{font-size:12px;max-width:270px;margin-top:12px}
  [data-local-visual="lanes"] .local-diagram-headings span:last-child{font-size:0}
}