/* Fleet ontology: scalable graph with an accessible table and raw file index. */
.rt-og { padding: 20px; min-width: 0; max-width: 100%; color: var(--ink); }
.rt-og [hidden] { display: none !important; }
.rt-og h2 { font-size: 19px; margin: 0 0 8px; }
.rt-og-grade { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.rt-og-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.rt-og-controls label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 12px; }
.rt-og-controls select { max-width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; }
.rt-og-controls [aria-pressed="true"] { background: var(--lav); color: var(--blue2); border-color: var(--blue); }
.rt-og-predicates { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-og-predicates > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font-family: var(--mono); font-size: 10px; background: var(--soft); }
.rt-og-predicates small { color: var(--muted); font-family: inherit; font-size: 9px; }
.rt-og [data-graph-pred][data-hi="true"] { border-color: var(--blue); background: var(--lav); color: var(--blue2); }
.rt-og [data-graph-pred][data-complete="true"] { box-shadow: inset 0 -3px var(--amber); }
.rt-og-caption { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; margin: 16px 0 10px; }
.rt-og-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rt-og-stage { min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); overflow-x: auto; }
.rt-og [data-graph-status] { font-size: 13px; padding: 14px; }
.rt-og [data-graph-empty] { color: var(--muted); padding: 14px; margin: 0; font-size: 13px; }
.rt-og svg { display: block; width: 100%; min-width: 1000px; height: auto; touch-action: pan-x pan-y; }
.rt-og [data-graph-link] line { stroke: var(--muted); stroke-width: 1.3; opacity: .55; }
.rt-og [data-graph-link][data-grade="observed"] line { stroke-dasharray: 7 4; }
.rt-og [data-graph-link][data-grade="inferred"] line { stroke-dasharray: 2 4; }
.rt-og [data-graph-link][data-role="subclass"] line { stroke-dasharray: 9 3; }
.rt-og [data-graph-link] text { visibility: hidden; font-family: var(--mono); font-size: 15px; fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--soft); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.rt-og svg[data-edge-labels="true"] [data-graph-link] text,
.rt-og [data-graph-link]:hover text, .rt-og [data-graph-link]:focus text,
.rt-og [data-graph-link][data-hi="true"] text, .rt-og [data-graph-link][data-complete="true"] text,
.rt-og [data-graph-link][data-used="true"] text { visibility: visible; }
.rt-og [data-graph-link]:focus-visible { outline: none; }
.rt-og [data-graph-link]:focus-visible line { stroke: var(--amber); stroke-width: 4; opacity: 1; }
.rt-og [data-graph-link][data-complete="true"] line { stroke: var(--amber); stroke-width: 3; opacity: 1; }
.rt-og [data-graph-link][data-hi="true"] line, .rt-og [data-graph-link][data-used="true"] line { stroke: var(--blue); stroke-width: 3; opacity: 1; }
.rt-og [data-graph-link][data-hi="true"][data-complete="true"] line { stroke: var(--blue); stroke-dasharray: 8 3; }
.rt-og [data-graph-node] { cursor: pointer; outline: none; }
.rt-og [data-graph-node] circle, .rt-og [data-graph-node] rect { fill: var(--panel); stroke: var(--blue); stroke-width: 1.6; }
.rt-og [data-graph-node][data-role="action"] circle { fill: var(--lav); }
.rt-og [data-graph-node][data-role="team"] circle { fill: var(--green-bg); stroke: var(--green); }
.rt-og [data-graph-node][data-role="anchor"] circle { stroke: var(--muted); stroke-dasharray: 4 3; }
.rt-og [data-graph-node][data-role="attribute"] rect, .rt-og [data-graph-node][data-role="literal"] rect { fill: var(--panel); stroke: var(--muted); }
.rt-og [data-graph-node][data-hi="true"] rect { fill: var(--lav); stroke: var(--blue); stroke-width: 3; }
.rt-og [data-graph-node] text { fill: var(--ink); font-size: 20px; pointer-events: none; paint-order: stroke; stroke: var(--soft); stroke-width: 4px; stroke-linejoin: round; }
.rt-og [data-graph-node] .rt-og-class { fill: var(--muted); }
.rt-og [data-graph-node]:focus-visible circle, .rt-og [data-graph-node]:focus-visible rect,
.rt-og [data-graph-node][aria-pressed="true"] circle, .rt-og [data-graph-node][aria-pressed="true"] rect { stroke: var(--amber); stroke-width: 4; }
.rt-og [data-graph-inspector] { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 12px; overflow-wrap: anywhere; max-height: 650px; overflow-y: auto; }
.rt-og [data-graph-inspector] h3 { margin: 0 0 12px; font-size: 15px; }
.rt-og [data-graph-inspector] h4 { font-size: 12px; margin: 16px 0 6px; }
.rt-og [data-graph-inspector] dt { color: var(--muted); }
.rt-og [data-graph-inspector] dd { margin: 2px 0 8px; font-family: var(--mono); font-size: 11px; }
.rt-og [data-graph-inspector] ul { padding-left: 16px; line-height: 1.7; }
.rt-og [data-graph-wm] { white-space: normal; text-align: left; }
.rt-og-legend { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 14px 0; font-size: 11px; color: var(--muted); }
.rt-og-limits { color: var(--muted); font-size: 12px; line-height: 1.7; }
.rt-og details { margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; }
.rt-og summary { cursor: pointer; font-size: 12px; color: var(--blue2); overflow-wrap: anywhere; }
.rt-og-table-wrap { overflow-x: auto; max-width: 100%; margin-top: 10px; }
.rt-og table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; text-align: left; }
.rt-og th, .rt-og td { vertical-align: top; border-bottom: 1px solid var(--line); padding: 9px; overflow-wrap: anywhere; }
.rt-og th { color: var(--muted); }
.rt-og caption { text-align: left; color: var(--muted); padding: 8px; }
.rt-og [data-graph-files] { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 14px; }
.rt-og [data-graph-files] h3 { font-size: 16px; }
.rt-og [data-graph-files] h4 { font-size: 13px; margin: 20px 0 7px; }
.rt-og [data-graph-files] p { color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.rt-og a { color: var(--blue2); }
.rt-og [data-graph-select] { border: 0; background: none; padding: 0; color: var(--blue2); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.rt-og :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 800px) {
  .rt-og-columns { grid-template-columns: minmax(0, 1fr); }
  .rt-og [data-graph-inspector] { max-height: 380px; }
}
@media (max-width: 600px) {
  .rt-og { padding: 12px; }
  .rt-og-controls > label { width: 100%; }
  .rt-og-controls select { width: 100%; }
  .rt-og th, .rt-og td { padding: 6px 3px; font-size: 10px; }
  .rt-og [data-graph-files] table, .rt-og [data-graph-files] tbody, .rt-og [data-graph-file], .rt-og [data-graph-file] td { display: block; width: 100%; }
  .rt-og [data-graph-files] thead { display: none; }
  .rt-og [data-graph-file] { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .rt-og [data-graph-file] td { border: 0; font-size: 11px; }
  .rt-og [data-graph-file] td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }
}