.network-root { --network-forest: #182e25; --network-dark: #12251e; --network-cream: #f4efd9; --network-peach: #edaa7c; --network-mint: #a4c9b2; --network-gold: #c9bc79; --network-stroke: #dce8d818; container-type: inline-size; container-name: bagel-network; }
.network-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.network-kicker { font-size: 10px; line-height: 1.5; font-weight: 700; letter-spacing: 1.8px; color: #78816d; }
.network-page-heading h1 { margin-top: 8px; letter-spacing: -1.5px; }
.network-page-heading > div > p:last-child { margin-top: 12px; font-size: 13px; color: #67735f; }
.network-page-heading p > span { margin: 0 7px; opacity: .55; }
.network-preview-tag { display: flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 11px; color: #56694f; border: 1px solid #d9dfce; border-radius: 20px; padding: 8px 11px; }
.network-preview-tag > span { width: 5px; height: 5px; border-radius: 50%; background: #839574; }
.network-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-width: 0; border: 1px solid #dce0d1; border-radius: 12px; overflow: hidden; background: #fcfbef; }
.network-workbench { min-width: 0; background: var(--network-dark); color: var(--network-cream); }
.network-toolbar { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 13px; padding: 21px 22px 0; }
.network-mode-switch { display: inline-flex; background: #0c1d16; padding: 4px; border: 1px solid #dce8d81a; border-radius: 7px; }
.network-mode-switch > button { padding: 8px 11px; border-radius: 4px; color: #99ab9b; font-size: 11px; font-weight: 600; }
.network-mode-switch > button[aria-pressed="true"] { color: #f6f0db; background: #344a3b; box-shadow: 0 1px 4px #0002; }
.network-mode-switch > button:hover { color: #fff7df; }
.network-store-filter select { padding: 9px 28px 9px 10px; border-radius: 4px; border: 1px solid #dee9d52a; color: #d8e0cc; background: #182e25; font: inherit; font-size: 11px; max-width: 190px; text-overflow: ellipsis; }
.network-store-filter option { color: #f4efd9; background: #182e25; }
.network-stage { position: relative; isolation: isolate; min-width: 0; height: 700px; overflow: hidden; cursor: grab; touch-action: pan-y; }
.network-stage.is-dragging { cursor: grabbing; user-select: none; }
.network-stage-texture { position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: radial-gradient(#d8e6ce2b .7px, transparent .9px); background-size: 23px 23px; mask-image: radial-gradient(ellipse at center, #0009, #0000 75%); }
.network-central-glow { width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, #c7d1aa13, #c7d1aa05 45%, transparent 68%); position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); pointer-events: none; }
.network-connections { position: absolute; inset: 0; height: 100%; width: 100%; pointer-events: none; overflow: visible; }
.network-orbit { fill: none; stroke: #e9ead628; stroke-width: 1; }
.network-orbit-inner { stroke: #e9ead623; stroke-dasharray: 3 6; }
.network-orbit-halo { stroke: #e9ead60a; }
.network-constellation-track { stroke: #e9ead617; stroke-width: 1; fill: none; stroke-dasharray: 3 6; }
.network-edge { fill: none; stroke-width: .7; opacity: .15; }
.network-edge-store { stroke: #e0d8ac; opacity: .22; }
.network-edge-growth { stroke: var(--network-peach); }
.network-edge-care { stroke: var(--network-mint); }
.network-edge-operations { stroke: var(--network-gold); }
.network-edge.is-active { opacity: .88; stroke-width: 1.8; }
.network-edge.is-muted { opacity: .045; }
.network-edge-planned { stroke-dasharray: 3 6; opacity: .2; }
.network-nodes { position: absolute; inset: 0; pointer-events: none; }
.network-node { --network-node-color: var(--network-peach); width: 144px; padding: 0; position: absolute; display: flex; align-items: center; flex-direction: column; transform: translate(-50%, -15px); color: var(--network-cream); pointer-events: auto; outline-offset: 5px; border-radius: 7px; cursor: pointer; }
.network-node::before { content: ''; position: absolute; width: 42px; height: 42px; border: 1px solid transparent; border-radius: 50%; top: -6px; left: calc(50% - 21px); pointer-events: none; }
.network-node-marker { position: relative; display: block; width: 30px; height: 30px; transition: transform .18s ease; flex-shrink: 0; }
.network-node-title { display: block; font-weight: 650; font-size: 13px; line-height: 1.4; margin-top: 7px; text-shadow: 0 1px 6px #12251e, 1px 0 5px #12251e, -1px 0 5px #12251e; }
.network-node-detail { display: block; color: #c0ccb7; font-size: 11px; line-height: 1.5; margin-top: 2px; }
.network-node:hover .network-node-marker { transform: scale(1.14) rotate(-8deg); }
.network-node:focus-visible { outline: 2px solid var(--network-peach); }
.network-node.is-selected::before { border-color: #eadbc773; box-shadow: 0 0 0 5px #e9ba8f0a; }
.network-node.is-selected .network-node-title { color: #fff8df; }
.network-node.is-muted { opacity: .52; }
.network-node.is-muted:hover, .network-node.is-muted:focus-visible { opacity: 1; }
.network-node-store { width: 105px; transform: translate(-50%, -17px); }
.network-node-store .network-node-marker { width: 34px; height: 34px; }
.network-node-store .network-node-title { letter-spacing: 1px; font-size: 12px; margin-top: 5px; }
.network-node-store .network-node-detail { font-size: 10px; white-space: nowrap; }
.network-node-store::before { top: -5px; width: 44px; height: 44px; left: calc(50% - 22px); }
.network-node-center { width: 150px; transform: translate(-50%, -42px); }
.network-node-center .network-node-marker { width: 84px; height: 84px; filter: drop-shadow(0 0 20px #eab8901a); }
.network-node-center .network-node-title { font-size: 15px; letter-spacing: -.5px; margin-top: 6px; }
.network-node-center .network-node-detail { font-size: 9px; letter-spacing: 1.4px; margin-top: 5px; color: #c0ccb7; }
.network-node-center::before { width: 92px; height: 92px; left: calc(50% - 46px); top: -4px; }
.network-node-center.is-selected::before { border-color: #eadbc729; box-shadow: 0 0 0 10px #e9ba8f04; }
.network-bagel { width: 100%; height: 100%; overflow: visible; }
.network-bagel-crust { fill: var(--network-node-color, var(--network-peach)); }
.network-bagel-rim { stroke: #fff0c9; stroke-width: 2.4; stroke-linecap: round; opacity: .5; fill: none; }
.network-sesame { stroke: #fff1cb; opacity: .83; }
.network-bagel-small .network-sesame { opacity: .72; stroke-width: 3.4; }
.network-group-care { --network-node-color: var(--network-mint); }
.network-group-operations { --network-node-color: var(--network-gold); }
.network-group-growth { --network-node-color: var(--network-peach); }
.network-view-tools { position: absolute; display: flex; align-items: center; gap: 3px; left: 22px; bottom: 16px; border: 1px solid #dce8d81c; border-radius: 5px; background: #12251ee8; padding: 3px; cursor: default; }
.network-view-tools button { height: 29px; min-width: 29px; padding: 0 7px; color: #e4e6d0; border-radius: 3px; font-size: 17px; }
.network-view-tools button:hover { background: #f4efd914; }
.network-view-tools button:disabled { opacity: .3; }
.network-view-tools output { color: #a9b49f; font-size: 9px; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.network-view-tools > span { height: 15px; width: 1px; margin: 0 4px; background: #dce8d81f; }
.network-view-tools .network-reset { font-size: 10px; padding: 0 10px; }
.network-map-footer { padding: 18px 22px 22px; border-top: 1px solid #dce8d810; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; align-items: center; }
.network-legend { display: flex; flex-wrap: wrap; gap: 16px; }
.network-legend > span { font-size: 9px; color: #b9c3ac; display: flex; align-items: center; gap: 6px; }
.network-legend i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; }
.network-legend-growth { background: var(--network-peach); }
.network-legend-care { background: var(--network-mint); }
.network-legend-operations { background: var(--network-gold); }
.network-map-footer > p { color: #82967f; font-size: 9px; }
.network-map-footer > p > span { margin: 0 5px; }
.network-inspector { display: flex; flex-direction: column; padding: 30px 23px 24px; min-width: 0; background: #fbfaee; }
.network-inspector-mark { --network-node-color: #e9a17b; width: 42px; height: 42px; display: block; margin-bottom: 23px; }
.network-inspector-mark .network-bagel-rim { stroke: #fff3ce; }
.network-inspector .network-kicker { font-size: 8px; letter-spacing: 1.25px; line-height: 1.7; }
.network-inspector .network-kicker > span { opacity: .6; padding: 0 3px; }
.network-inspector h2 { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.8px; margin-top: 10px; }
.network-inspector-description { font-size: 12px; line-height: 1.7; color: #5d6b52; margin-top: 15px; }
.network-inspector-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin: 27px 0 24px; padding: 23px 0; border-block: 1px solid #e3e3d3; }
.network-inspector-metrics > div { display: flex; flex-direction: column; gap: 5px; }
.network-inspector-metrics strong { font-size: 25px; letter-spacing: -1.1px; font-weight: 600; line-height: 1.2; color: #3a4e39; font-variant-numeric: tabular-nums; }
.network-inspector-metrics span { font-size: 11px; color: #5d6b52; white-space: nowrap; }
.network-two-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.network-inspector-copy h3 { font-size: 12px; font-weight: 650; color: #465841; margin-bottom: 10px; }
.network-inspector-copy > p { color: #5d6b52; font-size: 12px; line-height: 1.9; }
.network-inspector-note { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 22px; color: #5d6b52; }
.network-note-dot { flex-shrink: 0; width: 5px; height: 5px; margin-top: 5px; border-radius: 50%; background: #c7b986; }
.network-inspector-note p { font-size: 11px; line-height: 1.8; }
.network-workflow-list { display: flex; flex-direction: column; gap: 1px; }
.network-workflow-list button { width: 100%; display: flex; align-items: center; gap: 7px; padding: 10px 0; text-align: left; font-size: 12px; color: #4c5d43; }
.network-workflow-list button:hover { color: #32442f; }
.network-workflow-list strong { margin-left: auto; font-size: 10px; font-weight: 600; color: #465841; }
.network-workflow-list button > span:last-child { font-size: 14px; opacity: .65; }
.network-workflow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--network-node-color); flex-shrink: 0; }
.network-record-list { list-style: none; margin: 0; padding: 0; }
.network-record-list li { padding: 11px 0; border-bottom: 1px solid #e5e5d8; display: flex; flex-direction: column; gap: 6px; }
.network-record-list strong { font-size: 12px; line-height: 1.5; font-weight: 600; color: #53624a; overflow-wrap: anywhere; }
.network-record-list span { font-size: 11px; color: #5d6b52; }
.network-inspector-copy .network-more-records { margin-top: 10px; font-size: 11px; }
.network-open-button { width: 100%; margin-top: 26px; padding: 12px 11px; display: flex; align-items: center; gap: 6px; justify-content: space-between; text-align: left; background: #3a4e39; border-radius: 5px; color: #f8f3df; font-size: 12px; line-height: 1.5; font-weight: 600; }
.network-open-button:hover { background: #293e2a; }
.network-open-button > span { font-size: 14px; }
.network-inspector-footnote { color: #5d6b52; font-size: 10px; line-height: 1.85; margin-top: 12px; }
.network-bottom-note { display: flex; align-items: center; gap: 11px; padding: 19px 2px; color: #849077; }
.network-bottom-mark { font-size: 24px; line-height: 1; color: #b2b99a; }
.network-bottom-note p { font-size: 11px; line-height: 1.6; }
.network-bottom-note button { margin-left: auto; flex-shrink: 0; font-size: 10px; font-weight: 600; color: #68785b; padding: 6px 0 6px 12px; }
.network-bottom-note button span { margin-left: 5px; }
.network-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.network-node-status { display: inline-block; margin-top: 5px; padding: 2px 6px; max-width: 100%; border-radius: 4px; font-size: 10px; font-weight: 650; line-height: 1.5; background: #20382c; color: #c9d8bd; white-space: nowrap; }
.network-node-status.network-status-overdue { color: #ffe0c4; background: #593529; }
.network-node-status.network-status-approval { color: #f5e9af; background: #4e4926; }
.network-node-status.network-status-today { color: #d3edda; background: #294b39; }
.network-node-status.network-status-inactive { color: #c1c9b9; background: #28382c; }
.network-node-status.network-status-clear { background: transparent; font-weight: 500; color: #b9c9ae; }
.network-operational-metrics .has-overdue strong { color: #a54830; }
.network-operational-metrics .has-approval strong { color: #88721e; }
.network-action-list { list-style: none; margin: 0; padding: 0; }
.network-action-list > li { border-bottom: 1px solid #e0e3d2; }
.network-action-list button { width: 100%; display: flex; flex-direction: column; text-align: left; align-items: stretch; gap: 5px; padding: 12px 0; border-radius: 4px; }
.network-action-list button:hover, .network-record-list button:hover { background: #edf0df; }
.network-action-list button:focus-visible, .network-record-list button:focus-visible, .network-workflow-list button:focus-visible { outline: 2px solid #3b4f3b; outline-offset: 3px; }
.network-action-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.network-action-heading > strong { font-size: 12px; line-height: 1.5; font-weight: 650; color: #3b4f3b; overflow-wrap: anywhere; }
.network-action-status { flex-shrink: 0; font-size: 9px; font-weight: 700; padding: 3px 5px; border-radius: 3px; color: #58694d; background: #e7ebd9; }
.network-action-status.network-status-overdue { color: #92432c; background: #f7e0ce; }
.network-action-status.network-status-approval { color: #6b5a14; background: #ede7bc; }
.network-action-status.network-status-today { color: #3d6346; background: #e2ecda; }
.network-action-reason { font-size: 11px; line-height: 1.6; color: #5b6850; }
.network-action-owner { font-size: 10px; color: #65745a; line-height: 1.5; }
.network-action-link { color: #3b4f3b; font-size: 11px; font-weight: 650; margin-top: 3px; }
.network-queue-empty { font-size: 12px; line-height: 1.7; color: #5b6850; }
.network-record-list li > button { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 5px 0; border-radius: 4px; }
.network-connected-workflows { margin-top: 22px; }
.network-connected-workflows summary { font-size: 12px; font-weight: 650; color: #465841; cursor: pointer; padding: 7px 0; }
.network-workflow-status { display: block; margin-top: 4px; font-size: 10px; color: #68745d; }
.network-workflow-status.network-status-overdue { color: #92432c; }
.network-workflow-status.network-status-approval { color: #786318; }
.network-secondary-button { width: 100%; margin-top: 10px; padding: 10px; text-align: left; border: 1px solid #cdd6bf; color: #3b4f3b; border-radius: 5px; font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; }
.network-secondary-button:hover { background: #edf0df; }
@container bagel-network (max-width: 1040px) {
  .network-layout { grid-template-columns: minmax(0, 1fr) 285px; }
  .network-inspector { padding: 27px 20px 23px; }
  .network-node { width: 133px; }
  .network-node-title { font-size: 12px; }
  .network-node-store { width: 100px; }
}
@container bagel-network (max-width: 870px) {
  .network-layout { grid-template-columns: minmax(0, 1fr); }
  .network-stage { height: 640px; }
  .network-inspector { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 15px 32px; padding: 28px; }
  .network-inspector-top { grid-row: span 2; }
  .network-inspector-mark { margin-bottom: 15px; }
  .network-inspector-metrics { margin: 0; padding: 0 0 18px; border-top: 0; }
  .network-inspector-copy { grid-column: 2; }
  .network-inspector-note { margin-top: 0; padding-top: 5px; grid-column: 1 / -1; }
  .network-open-button { margin-top: 0; grid-column: 2; }
  .network-secondary-button { grid-column: 2; margin-top: 0; }
  .network-connected-workflows { margin-top: 0; }
  .network-inspector-footnote { margin-top: 0; grid-column: 1 / -1; }
}
@container bagel-network (max-width: 570px) {
  .network-page-heading { align-items: flex-start; margin-bottom: 22px; }
  .network-page-heading h1 { font-size: 30px; }
  .network-page-heading .network-kicker { font-size: 8px; letter-spacing: 1.3px; }
  .network-page-heading > div > p:last-child { font-size: 10px; }
  .network-preview-tag { display: none; }
  .network-toolbar { padding: 15px 14px 0; gap: 10px; }
  .network-mode-switch > button { font-size: 10px; padding: 8px; }
  .network-store-filter select { font-size: 10px; max-width: 128px; padding-left: 6px; padding-right: 20px; }
  .network-stage { height: 960px; cursor: default; }
  .network-central-glow { width: 230px; height: 230px; }
  .network-node { width: 140px; }
  .network-node-title { font-size: 13px; }
  .network-node-detail { font-size: 11px; }
  .network-node-store { width: 88px; }
  .network-node-store .network-node-detail { font-size: 10px; }
  .network-node-center .network-node-title { font-size: 16px; }
  .network-edge { opacity: .09; }
  .network-edge.is-active { opacity: .65; }
  .network-edge-store { opacity: .23; }
  .network-view-tools { bottom: 14px; left: 14px; }
  .network-map-footer { padding: 17px 16px 20px; gap: 13px; }
  .network-legend { gap: 13px; }
  .network-inspector { display: flex; gap: 0; padding: 26px; }
  .network-inspector h2 { font-size: 26px; }
  .network-inspector-description { font-size: 12px; max-width: 360px; }
  .network-inspector-metrics { width: 100%; border-top: 1px solid #e3e3d3; margin: 22px 0; padding: 19px 0; }
  .network-inspector-metrics span { font-size: 10px; }
  .network-inspector-copy { width: 100%; }
  .network-inspector-copy h3 { font-size: 12px; }
  .network-inspector-copy > p { font-size: 12px; }
  .network-inspector-note { margin-top: 20px; }
  .network-workflow-list button { font-size: 11px; padding: 10px 0; }
  .network-workflow-list strong { font-size: 12px; }
  .network-open-button { margin-top: 24px; font-size: 12px; padding: 13px; }
  .network-inspector-footnote { font-size: 10px; margin-top: 12px; }
  .network-bottom-note { align-items: flex-start; }
  .network-bottom-note p { font-size: 10px; }
  .network-bottom-note button { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .network-root *, .network-root *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}