/* Shared drawing vocabulary. Each explanation includes only the equipment it needs. */
:root {
  --nw-ink: #233b46;
  --nw-paper: #fffdf7;
  --nw-rule: #dfd4bc;
  --nw-connected: #286b58;
  --nw-disconnected: #9c4439;
  --nw-inactive: #74838a;
  --nw-warning: #674712;
}
.nw-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
/* The same glyph and size identify a device even when its state changes. */
:is(#cmdb-map, #external-use-diagram, #fw-workbench, #recovery-flow, .connection-diagram) .nw-icon {
  display: block; flex-shrink: 0; width: 40px; height: 40px; margin: 0 auto 6px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  color: var(--nw-ink);
}
#cmdb-map .nw-icon { margin: 0; }
#fw-workbench .nw-work-routes { background: var(--nw-paper); padding: 18px 14px; }
.nw-work-route + .nw-work-route { border-top: 1px solid var(--nw-rule); margin-top: 22px; padding-top: 20px; }
#fw-workbench .nw-work-route h3 { margin: 0 0 18px; font-size: 16px; line-height: 1.6; }
#fw-workbench .connection-path { grid-template-columns: minmax(0,1fr) 60px minmax(0,1.2fr) 60px minmax(0,1fr); }
#fw-workbench .connection-firewall, .connection-blocked .connection-firewall {
  background: #edf1f3; border-color: #c5d1d5; color: var(--nw-ink);
}
#external-path[data-stage="before"] .connection-firewall { background: #fff0cd; border-color: #c6a365; color: var(--nw-warning); }
#fw-workbench .nw-route-note { font-size: 12px; line-height: 1.65; margin: 10px 0 0; color: #526772; }
#fw-workbench .connection-node { min-height: 150px; box-sizing: border-box; padding: 10px 5px; display: grid; grid-template-rows: 40px auto; align-content: start; justify-items: center; gap: 8px; }
#pos-reading { font-size: 15px; color: var(--nw-connected); }
#external-server-state { color: var(--nw-disconnected); }
.nw-link { min-width: 0; text-align: center; color: var(--nw-connected); }
.nw-link-label { display: block; font-size: 11px; line-height: 1.5; color: #526772; }
.nw-link svg { display: block; width: 100%; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nw-link .nw-stop { display: none; }
.nw-link[data-state="pending"] { color: var(--nw-inactive); }
.nw-link[data-state="pending"] .nw-tip { display: none; }
.nw-link[data-state="blocked"] { color: var(--nw-disconnected); }
.nw-link[data-state="blocked"] .nw-line { stroke-dasharray: 2 3; }
.nw-link[data-state="blocked"] .nw-tip { display: none; }
.nw-link[data-state="blocked"] .nw-stop { display: block; }
.connection-arrow, .connection-blocked .connection-arrow { color: var(--nw-connected); }
.connection-blocked .connection-stopped { color: var(--nw-disconnected); }
.connection-result b, .connection-blocked .connection-result b { background: var(--nw-ink); color: #fff; }
/* Past/current comparisons retain their structure, while sharing the drawing style. */
#external-use-diagram .use-stage, #external-use-diagram .use-store {
  background: var(--nw-paper); border: 0; border-radius: 0; padding: 18px 14px; color: var(--nw-ink);
}
#external-use-diagram .use-stage + .use-stage, #external-use-diagram .use-store { border-top: 1px solid var(--nw-rule); }
#external-use-diagram .use-gate { background: #edf1f3; border: 1px solid #c5d1d5; border-radius: 6px; color: var(--nw-ink); }
#external-use-diagram .use-open { background: #fff0cd; border-color: #c6a365; color: var(--nw-warning); outline: none; }
#external-use-diagram .use-link { color: var(--nw-connected); }
#external-use-diagram .use-unused { color: var(--nw-inactive); }
#external-use-diagram .use-route { grid-template-columns: minmax(0,1fr) 50px minmax(0,1.2fr) 50px minmax(0,1fr); }
/* A recovery figure shows the lost POS connection, without adding an irrelevant FW. */
#recovery-flow .recovery-phase { background: var(--nw-paper); border: 0; border-radius: 0; padding: 18px 14px; }
#recovery-flow .recovery-phase + .recovery-phase { border-top: 1px solid var(--nw-rule); }
#recovery-flow .recovery-connection { grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr); }
#recovery-flow .connection-line > span { background: var(--nw-paper); }
#recovery-flow .recovery-device { font-size: 13px; line-height: 1.6; }
#recovery-flow .recovery-device > span { min-height: 42px; }
#recovery-flow .recovery-device strong { font-size: 13px; }
#recovery-flow .recovery-link { color: var(--nw-connected); }
#recovery-flow .recovery-phase:not([data-phase="0"]) .recovery-link { color: var(--nw-disconnected); }
#cmdb-map { color: var(--nw-ink); }
#cmdb-map .cmdb-arrow { border-color: #526772; color: #526772; }
#cmdb-map .cmdb-arrow::after { border-color: #526772; }
#cmdb-map .cmdb-host { border: 1px solid var(--nw-rule); border-radius: 6px; background: var(--nw-paper); }
#cmdb-map .cmdb-app { margin-left: 0; border: 1px solid #c5d1d5; border-left: 3px solid #748b95; background: #fff; }
@media (max-width: 480px) {
  #fw-workbench .connection-path { grid-template-columns: minmax(0,1fr); gap: 5px; }
  #fw-workbench .connection-node { min-height: 100px; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto; align-content: center; justify-items: start; padding: 10px; gap: 12px; }
  #fw-workbench .connection-node .nw-icon, .connection-diagram .connection-node .nw-icon { margin: 0; }
  #fw-workbench .nw-link { display: flex; align-items: center; gap: 14px; text-align: left; padding-left: 17px; }
  #fw-workbench .nw-link svg { width: 28px; height: 28px; transform: rotate(90deg); order: -1; }
  #fw-workbench .nw-link-label { font-size: 12px; }
  #external-use-diagram .use-route { grid-template-columns: minmax(0,1fr); gap: 5px; }
  #external-use-diagram .use-node { display: grid; grid-template-columns: 42px minmax(0,1fr); column-gap: 12px; text-align: left; padding: 8px 10px; }
  #external-use-diagram .use-node > svg { grid-row: 1 / span 4; width: 40px; height: 40px; margin: 0; }
  #external-use-diagram .use-node b { font-size: 15px; }
  #external-use-diagram .use-node small, #external-use-diagram .use-node strong { grid-column: 2; font-size: 12px; margin: 0; }
  #external-use-diagram .use-link { display: flex; align-items: center; gap: 14px; padding-left: 17px; text-align: left; }
  #external-use-diagram .use-link svg { width: 28px; height: 28px; transform: rotate(90deg); order: -1; }
  #external-use-diagram .use-link > span { font-size: 12px; }
}