.fiber-overlay { position:fixed; z-index:10; right:0; bottom:0; left:0; box-sizing:border-box; height:30vh; max-height:30vh; overflow:hidden; background:white; border:1px solid #eadfca; border-radius:1rem 1rem 0 0; box-shadow:0 -8px 32px #111b3850; padding:.75rem clamp(1rem,4vw,4rem); display:flex; flex-direction:column; }
.fiber-overlay[hidden] { display:none; }
body.fiber-forest-open { --fiber-pane-height:45dvh; height:100dvh; overflow:hidden; }
body.fiber-forest-open #application-shell { height:calc(100dvh - var(--fiber-pane-height)); display:grid; grid-template-rows:auto minmax(0, 1fr); }
body.fiber-forest-open #application-shell > main { grid-row:2; align-self:stretch; width:100%; min-height:0; margin:0 auto; overflow-y:auto; overscroll-behavior:contain; padding-bottom:2rem; }
body.fiber-forest-open .fiber-overlay { position:static; width:100%; height:var(--fiber-pane-height); max-height:var(--fiber-pane-height); }
.fiber-overlay__header { display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.fiber-overlay__actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem; }
.fiber-overlay__header button { padding:.4rem .6rem; }
.fiber-overlay__actions [aria-pressed="true"] { background:var(--plum); }
.fiber-legend { display:flex; flex-wrap:wrap; gap:.3rem .8rem; color:#5a6371; font-size:.78rem; }
.fiber-legend span { display:inline-flex; align-items:center; gap:.3rem; }
.fiber-legend i { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; }
.fiber-legend__scope { background:#111b38; width:.82rem !important; height:.82rem !important; }
.fiber-legend__running { background:#4eaa75; }
.fiber-legend__completed { background:#5b315d; }
.fiber-legend__cancelled { background:#e99d20; }
.fiber-legend__faulted { background:#ff5c5c; }
.fiber-history { display:flex; align-items:end; gap:.25rem; height:3.4rem; overflow-x:auto; padding:.15rem 0 .1rem; }
.fiber-history button { flex:0 0 auto; border:0; border-radius:.3rem; color:#5a6371; font:inherit; font-size:.62rem; }
.fiber-history__live { align-self:center; padding:.3rem .45rem; background:#ff5c5c; color:white !important; font-size:.72rem !important; font-weight:700; }
.fiber-history__snapshot { display:flex; flex-direction:column; justify-content:end; align-items:center; gap:.1rem; width:3.2rem; height:100%; padding:0; background:transparent; }
.fiber-history__bar { display:block; width:1.5rem; height:var(--activity); min-height:.35rem; border-radius:.3rem .3rem .05rem .05rem; background:#5b315d; opacity:.68; }
.fiber-history__label { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fiber-history__label--faulted { color:#a32d2d; font-weight:800; }
.fiber-history__label--cancelled { color:#805000; font-weight:800; }
.fiber-history button[aria-current="true"] .fiber-history__bar { background:#ff5c5c; opacity:1; }
.fiber-history__live[aria-current="true"] { background:#5b315d; }
.fiber-simulations > strong { display:block; margin-bottom:.2rem; font-size:.75rem; }
.fiber-simulations__controls { display:flex; gap:.35rem; }
.fiber-simulations__controls select { min-width:0; margin:0; }
.fiber-simulations__controls button { padding:.35rem .55rem; }
.fiber-simulations__status { display:block; min-height:1rem; color:#5a6371; font-size:.7rem; }
.fiber-overlay__connection, .fiber-overlay__summary, .fiber-overlay__selection { margin:.35rem 0; font-size:.9rem; }
.fiber-overlay__connection[data-state="connected"] { color:#17643a; }
.fiber-overlay__connection[data-state="connecting"], .fiber-overlay__connection[data-state="disconnected"] { color:#805000; }
.fiber-overlay__selection { min-height:1.2rem; color:#5a6371; }
.fiber-forest { display:block; flex:1 1 0; min-height:0; width:100%; background:#fff9eb; border:1px solid #eadfca; border-radius:.65rem; cursor:grab; touch-action:none; }
.fiber-forest:active { cursor:grabbing; }
.fiber-tree-detail { position:absolute; inset:4rem clamp(1rem,4vw,4rem) 1.5rem; overflow:auto; background:white; border:1px solid #eadfca; border-radius:.65rem; box-shadow:0 8px 24px #111b3850; padding:1rem; }
.fiber-tree-detail > div:first-child { display:flex; justify-content:space-between; gap:.75rem; align-items:center; }
.fiber-tree-detail button { padding:.4rem .6rem; }
.fiber-scope { margin:.45rem 0; padding-left:.75rem; border-left:2px solid #d4d9e1; }
.fiber-scope > summary { cursor:pointer; font-weight:700; }
.fiber-node { margin:.35rem 0 .35rem .5rem; padding-left:.75rem; border-left:2px solid #eadfca; font-size:.9rem; }
.fiber-node--faulted, .fiber-node__error { color:#a32d2d; }
.fiber-node--cancelled, .fiber-node--cancellationrequested { color:#805000; }