/* ---------------------------------------------------------------------------
   Operational Graph surfaces — impact drawer, change guard, trace, findings, map.

   Everything is scoped under .og so it cannot leak into the DevExpress shell.
   Colour tokens read the app's --proxus-* variables where they exist and fall
   back to the shell's real values otherwise, matching DeviceTagTrendOverlay.

   Deliberately light-only: the XAF shell has no dark-theme switch, so a
   prefers-color-scheme block here would make these panels dark while the rest
   of the app stayed light.
   --------------------------------------------------------------------------- */

/* ---------- popup sizing ----------
   The only rules here that reach outside .og, because the element to size is the XAF popup shell,
   which is not ours. Left alone it opens at full viewport width and the panel floats in a mostly
   empty sheet. Scoped with :has() so it can only ever affect popups that contain these surfaces. */

dxbl-modal-dialog.xafPopup:has(.og-drawer),
dxbl-modal-dialog.xafPopup:has(.og-guard) {
    width: 680px !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
}

dxbl-modal-dialog.xafPopup:has(.og-drawer) .dxbl-modal-body,
dxbl-modal-dialog.xafPopup:has(.og-guard) .dxbl-modal-body {
    max-height: min(70vh, 640px) !important;
    overflow-y: auto !important;
}

.og {
    --og-ground: var(--proxus-bg, #f5f5f5);
    --og-surface: #ffffff;
    --og-surface-2: #f7f9fa;
    --og-line: #d7dde1;
    --og-line-soft: #e6eaed;
    --og-text: var(--proxus-text, #242424);
    --og-muted: #5a6b75;
    --og-faint: #8a9aa4;
    --og-accent: var(--proxus-accent, #0f6cbd);
    --og-accent-soft: #e7f1fa;
    --og-upstream: #6e5d9c;

    --og-ok: #2e8b5f;
    --og-warn: #b57314;
    --og-crit: #b33a30;
    --og-idle: #7a8b95;
    --og-ok-bg: #e3f1ea;
    --og-warn-bg: #f6eddc;
    --og-crit-bg: #f7e4e2;
    --og-idle-bg: #e9edef;
    /* Switched off on purpose — deliberately colourless, so it never competes with a real fault. */
    --og-off: #94a3b8;
    --og-off-bg: #eef2f5;

    --og-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

    color: var(--og-text);
    font-size: 14px;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}

.og *,
.og *::before,
.og *::after {
    box-sizing: border-box;
}

.og h2,
.og h3,
.og h4 {
    margin: 0;
}

.og p {
    margin: 0;
}

/* ---------- shared atoms ---------- */

.og-eyebrow {
    font-family: var(--og-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--og-faint);
}

.og-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--og-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    padding: 3px 8px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.og-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.og-chip--ok { color: var(--og-ok); background: var(--og-ok-bg); border-color: rgba(46, 139, 95, .3); }
.og-chip--warn { color: var(--og-warn); background: var(--og-warn-bg); border-color: rgba(181, 115, 20, .3); }
.og-chip--crit { color: var(--og-crit); background: var(--og-crit-bg); border-color: rgba(179, 58, 48, .3); }
.og-chip--idle { color: var(--og-idle); background: var(--og-idle-bg); border-color: rgba(122, 139, 149, .3); }
.og-chip--off { color: var(--og-off); background: var(--og-off-bg); border-color: rgba(148, 163, 184, .45); }
.og-chip--off::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.og-empty {
    padding: 22px 16px;
    text-align: center;
    color: var(--og-muted);
    font-size: 13px;
}

/* Proof is a line weight, not a table column: solid means a typed configuration
   edge, dashed means a statically parsed inference. */
.og-proof {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-family: var(--og-mono);
    font-size: 10px;
    letter-spacing: .05em;
    color: var(--og-faint);
}

.og-proof::before {
    content: "";
    width: 14px;
    border-top: 2px solid var(--og-muted);
}

.og-proof--inferred::before {
    border-top-style: dashed;
}

/* ---------- surface A: impact drawer ---------- */

.og-drawer {
    display: flex;
    flex-direction: column;
    background: var(--og-surface);
    border: 1px solid var(--og-line);
    min-width: 0;
}

.og-drawer__head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--og-line-soft);
}

.og-drawer__kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.og-drawer__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.og-drawer__title h3 {
    font-size: 16px;
    font-weight: 650;
}

.og-drawer__title code {
    font-family: var(--og-mono);
    font-size: 11px;
    color: var(--og-faint);
}

.og-verdict {
    padding: 14px 16px;
    border-bottom: 1px solid var(--og-line-soft);
    font-size: 15px;
    line-height: 1.5;
}

.og-verdict strong {
    font-weight: 650;
    color: var(--og-accent);
}

.og-group {
    border-bottom: 1px solid var(--og-line-soft);
}

.og-group__summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 16px;
    display: grid;
    grid-template-columns: 3px 1fr auto;
    gap: 12px;
    align-items: center;
}

.og-group__summary::-webkit-details-marker {
    display: none;
}

.og-group__summary:hover,
.og-group[open] > .og-group__summary {
    background: var(--og-surface-2);
}

.og-group__summary:focus-visible {
    outline: 2px solid var(--og-accent);
    outline-offset: -2px;
}

.og-group__sev {
    align-self: stretch;
}

.og-group__sev--control { background: var(--og-crit); }
.og-group__sev--visibility { background: var(--og-warn); }
.og-group__sev--outbound { background: var(--og-accent); }
.og-group__sev--other { background: var(--og-idle); }
.og-group__sev--upstream { background: var(--og-upstream); }

.og-group__label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.og-group__label b {
    font-size: 13.5px;
    font-weight: 600;
}

.og-group__label span {
    font-size: 11.5px;
    color: var(--og-muted);
}

.og-group__count {
    font-family: var(--og-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--og-muted);
}

.og-group__rows {
    padding: 2px 16px 12px 31px;
    display: grid;
    gap: 10px;
}

.og-row {
    border-left: 1px solid var(--og-line);
    padding-left: 12px;
}

.og-row__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.og-row__top b {
    font-size: 13px;
    font-weight: 600;
}

.og-row__type {
    font-family: var(--og-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--og-faint);
    border: 1px solid var(--og-line);
    padding: 1px 5px;
}

.og-row__why {
    font-size: 12px;
    color: var(--og-muted);
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.og-drawer__foot {
    padding: 12px 16px;
    display: grid;
    gap: 8px;
    background: var(--og-surface-2);
    border-top: 1px solid var(--og-line-soft);
}

.og-note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 12px;
    color: var(--og-muted);
}

.og-note__mark {
    font-family: var(--og-mono);
    flex: none;
    color: var(--og-warn);
}

.og-note--hidden .og-note__mark {
    color: var(--og-idle);
}

.og-drawer__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
}

/* ---------- surface B: change guard ---------- */

.og-guard {
    display: grid;
    gap: 14px;
    padding: 4px 2px 2px;
    max-width: 620px;
}

.og-guard__lede {
    font-size: 14px;
}

.og-guard__lede b {
    font-weight: 650;
}

.og-guard__breakdown {
    border: 1px solid var(--og-line-soft);
}

.og-guard__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--og-line-soft);
    font-size: 13px;
}

.og-guard__row:last-child {
    border-bottom: 0;
}

.og-guard__row--muted {
    background: var(--og-surface-2);
    color: var(--og-muted);
}

.og-guard__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.og-guard__n {
    font-family: var(--og-mono);
    font-weight: 600;
}

.og-guard__note {
    font-size: 12.5px;
    color: var(--og-muted);
}

.og-guard__ack {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    padding: 10px 12px;
    border: 1px solid var(--og-line);
    cursor: pointer;
}

/* ---------- surface C: trace ---------- */

.og-trace__banner {
    padding: 14px 18px;
    border-bottom: 1px solid var(--og-line-soft);
    font-size: 14.5px;
}

.og-trace__banner--ok { background: var(--og-ok-bg); }
.og-trace__banner--warn { background: var(--og-warn-bg); }
.og-trace__banner--crit { background: var(--og-crit-bg); }

.og-trace__banner b {
    font-weight: 650;
}

.og-trace__guidance {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--og-muted);
}

.og-chain {
    padding: 6px 18px 18px;
}

.og-hop {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 14px;
}

.og-hop__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.og-hop__knot {
    width: 11px;
    height: 11px;
    border: 2px solid var(--og-idle);
    background: var(--og-surface);
    margin-top: 17px;
    flex: none;
    border-radius: 50%;
}

.og-hop__wire {
    width: 0;
    flex: 1;
    border-left: 2px solid var(--og-line);
    margin: 4px 0;
    min-height: 24px;
}

.og-hop--ok .og-hop__knot { border-color: var(--og-ok); }
.og-hop--warn .og-hop__knot { border-color: var(--og-warn); }
.og-hop--crit .og-hop__knot { border-color: var(--og-crit); background: var(--og-crit); }
.og-hop--off .og-hop__knot { border-color: var(--og-off); border-style: dashed; }

.og-hop__body {
    padding: 12px 0 6px;
    border-bottom: 1px solid var(--og-line-soft);
}

.og-hop:last-child .og-hop__body {
    border-bottom: 0;
}

.og-hop__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.og-hop__kind {
    font-family: var(--og-mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--og-faint);
    width: 96px;
    flex: none;
}

.og-hop__head b {
    font-size: 14.5px;
    font-weight: 600;
}

.og-hop__why {
    font-size: 12.5px;
    color: var(--og-muted);
    margin-top: 3px;
    padding-left: 106px;
    overflow-wrap: anywhere;
}

.og-hop__link {
    font-family: var(--og-mono);
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--og-faint);
    padding: 4px 0 0 106px;
}

@media (max-width: 640px) {
    .og-hop__kind { width: auto; }
    .og-hop__why,
    .og-hop__link { padding-left: 0; }
}

/* ---------- workbench shell ---------- */

.og-workbench {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.og-tabs {
    display: flex;
    align-items: center;
    border: 1px solid var(--og-line);
    border-bottom: 0;
    background: var(--og-surface-2);
    overflow-x: auto;
}

.og-tabs__spacer {
    flex: 1;
}

.og-tabs .og-eyebrow {
    padding-right: 14px;
    white-space: nowrap;
}

.og-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--og-line-soft);
    padding: 11px 18px;
    cursor: pointer;
    color: var(--og-muted);
    font-family: var(--og-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.og-tab:hover {
    color: var(--og-text);
    background: var(--og-surface);
}

.og-tab:focus-visible {
    outline: 2px solid var(--og-accent);
    outline-offset: -2px;
}

.og-tab[aria-selected="true"] {
    background: var(--og-surface);
    color: var(--og-text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--og-accent);
}

/* ---------- surface D: findings ---------- */

.og-panel {
    border: 1px solid var(--og-line);
    background: var(--og-surface);
}

.og-panel__head {
    padding: 11px 16px;
    border-bottom: 1px solid var(--og-line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--og-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--og-faint);
}

.og-stats {
    display: flex;
    gap: 22px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--og-line-soft);
    flex-wrap: wrap;
}

.og-stat {
    display: flex;
    flex-direction: column;
}

.og-stat b {
    font-family: var(--og-mono);
    font-size: 19px;
    font-weight: 650;
}

.og-stat span {
    font-family: var(--og-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--og-faint);
}

.og-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--og-line-soft);
    background: var(--og-surface-2);
}

.og-filter {
    appearance: none;
    background: var(--og-surface);
    border: 1px solid var(--og-line);
    cursor: pointer;
    font-family: var(--og-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 10px;
    color: var(--og-muted);
}

.og-filter[aria-pressed="true"] {
    background: var(--og-accent);
    border-color: var(--og-accent);
    color: #fff;
}

.og-filter:focus-visible {
    outline: 2px solid var(--og-accent);
    outline-offset: 1px;
}

.og-tablewrap {
    overflow-x: auto;
}

.og-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 760px;
}

.og-table thead th {
    text-align: left;
    padding: 9px 14px;
    border-bottom: 1px solid var(--og-line);
    font-family: var(--og-mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--og-faint);
    white-space: nowrap;
    background: var(--og-surface);
}

.og-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--og-line-soft);
    vertical-align: top;
    font-size: 13px;
}

.og-table tbody tr:hover {
    background: var(--og-surface-2);
}

.og-table__sev {
    width: 4px;
    padding: 0;
}

.og-table__sev--breaks { background: var(--og-crit); }
.og-table__sev--drift { background: var(--og-warn); }
.og-table__sev--waste { background: var(--og-idle); }

.og-table__obj {
    font-weight: 600;
}

.og-table__sub {
    display: block;
    font-family: var(--og-mono);
    font-size: 11px;
    color: var(--og-faint);
    margin-top: 1px;
}

.og-table__why {
    color: var(--og-muted);
    font-size: 12.5px;
    max-width: 46ch;
}

.og-table__n {
    font-family: var(--og-mono);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.og-table__act {
    text-align: right;
    white-space: nowrap;
}

/* ---------- surface E: lane map ---------- */

.og-map {
    position: relative;
    overflow-x: auto;
    background: var(--og-surface);
}

.og-map svg {
    display: block;
    width: 100%;
    height: auto;
}

.og-map__lane-label {
    font-family: var(--og-mono);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    fill: var(--og-faint);
}

.og-map__lane-sep {
    stroke: var(--og-line-soft);
    stroke-width: 1;
    stroke-dasharray: 2 5;
}

.og-map__edge {
    fill: none;
    stroke: var(--og-line);
    stroke-width: 1.4;
}

.og-map__edge--inferred { stroke-dasharray: 4 3; }
.og-map__edge--down { stroke: var(--og-accent); stroke-width: 1.9; }
.og-map__edge--up { stroke: var(--og-upstream); stroke-width: 1.9; }
.og-map__edge--dim { opacity: .22; }

.og-map__node { cursor: pointer; }

.og-map__box {
    fill: var(--og-surface);
    stroke: var(--og-line);
    stroke-width: 1;
}

.og-map__node:hover .og-map__box { stroke: var(--og-muted); }
.og-map__node:focus-visible .og-map__box { stroke: var(--og-accent); stroke-width: 2; }
.og-map__node--down .og-map__box { stroke: var(--og-accent); }
.og-map__node--up .og-map__box { stroke: var(--og-upstream); }
.og-map__node--root .og-map__box { stroke: var(--og-text); stroke-width: 2; }
.og-map__node--dim { opacity: .32; }

.og-map__label {
    font-size: 11.5px;
    font-weight: 600;
    fill: var(--og-text);
}

.og-map__sub {
    font-family: var(--og-mono);
    font-size: 9px;
    letter-spacing: .08em;
    fill: var(--og-faint);
    text-transform: uppercase;
}

.og-map__legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--og-line-soft);
    font-family: var(--og-mono);
    font-size: 10.5px;
    color: var(--og-muted);
    background: var(--og-surface-2);
}

.og-legend {
    display: flex;
    align-items: center;
    gap: 7px;
}

.og-legend i {
    width: 20px;
    border-top: 2px solid currentColor;
    display: inline-block;
}

.og-legend--down { color: var(--og-accent); }
.og-legend--up { color: var(--og-upstream); }
.og-legend--inferred i { border-top-style: dashed; }

.og-bounds {
    padding: 10px 16px;
    font-size: 12.5px;
    color: var(--og-muted);
    border-top: 1px solid var(--og-line-soft);
}

.og-bounds b {
    color: var(--og-text);
    font-weight: 600;
}