.temporal-header { grid-template-columns: 190px auto minmax(240px, 410px) 1fr auto; }

.graph-context-panel {
  width: 288px;
  position: fixed;
  top: 96px;
  left: 16px;
  z-index: 15;
  padding: 12px;
  border: 1px solid rgba(198,209,202,.9);
  border-radius: 12px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 28px rgba(24,48,44,.08);
  backdrop-filter: blur(14px);
}
.view-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #f4f7f3; }
.view-switch button { min-height: 34px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.view-switch button.active { color: var(--teal); background: white; box-shadow: 0 1px 5px rgba(24,48,44,.1); }
.context-field { margin-top: 12px; display: grid; gap: 6px; }
.context-field span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.context-field select { width: 100%; height: 38px; padding: 0 9px; border: 1px solid var(--line-dark); border-radius: 8px; color: var(--ink); background: white; font-size: 12px; }
.slice-option { margin-top: 10px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.area-option { margin-top: 11px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.graph-focus { margin-top: 12px; padding: 10px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 9px; border: 1px solid #bad2c9; border-radius: 10px; background: var(--teal-soft); }
.graph-focus[hidden] { display: none; }
.graph-focus div { min-width: 0; }
.graph-focus span, .graph-focus strong, .graph-focus small { display: block; }
.graph-focus span { color: var(--teal); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.graph-focus strong { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px Manrope, sans-serif; }
.graph-focus small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.graph-focus button { width: 24px; height: 24px; border: 1px solid #bad2c9; border-radius: 7px; color: var(--teal); background: rgba(255,255,255,.75); cursor: pointer; }
.graph-counts { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }
.temporal-controls { top: 426px; }

.ownership-legend { position: fixed; left: 50%; bottom: 18px; z-index: 15; padding: 9px 14px; display: flex; gap: 14px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: rgba(255,255,255,.94); box-shadow: 0 9px 25px rgba(24,48,44,.08); font-size: 12px; font-weight: 600; transform: translateX(-50%); }
.ownership-legend span { display: inline-flex; align-items: center; gap: 6px; }
.owner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.owner-dot.owns { background: var(--teal); }
.owner-dot.projects { background: var(--blue); }
.owner-dot.reads { background: var(--plum); }
.owner-dot.governs { background: var(--amber); }

.temporal-component { cursor: pointer; transition: opacity 140ms ease; }
.temporal-component > rect { fill: rgba(255,255,255,.38); stroke: #cbd8d2; stroke-width: 1.5; stroke-dasharray: 7 7; transition: 140ms ease; }
.temporal-component:hover > rect, .temporal-component.focused > rect { fill: rgba(230,242,238,.5); stroke: #78a99a; stroke-width: 2.2; stroke-dasharray: none; }
.temporal-component.dimmed { opacity: .12; }
.component-title, .component-count { pointer-events: none; font-family: "DM Sans", sans-serif; }
.component-title { fill: #526b66; font-size: 16px; font-weight: 800; }
.component-count { fill: #879894; font-size: 10px; font-weight: 600; }
.overview-zoom .component-title { font-size: 34px; }
.overview-zoom .component-count { display: none; }
.detail-zoom .component-title { font-size: 14px; }

.temporal-node { cursor: pointer; transition: opacity 140ms ease; }
.manual-positioning .temporal-node { cursor: grab; }
.temporal-node > rect { fill: white; stroke: var(--line-dark); stroke-width: 1; }
.temporal-node:hover > rect { stroke: #84b6a7; stroke-width: 1.6; }
.temporal-node.selected > rect { fill: var(--teal-soft); stroke: var(--teal); stroke-width: 2; }
.temporal-node.highlighted > rect { stroke: var(--teal); stroke-width: 2; }
.temporal-node.focused > rect, .temporal-node.hover-context > rect { stroke: #6fa394; stroke-width: 1.8; }
.temporal-node.dimmed { opacity: .13; }
.temporal-node .node-accent { fill: var(--teal); }
.temporal-node.ontology .node-accent { fill: var(--blue); }
.temporal-node-copy { width: 100%; height: 100%; overflow: hidden; color: var(--ink); font-family: "DM Sans", sans-serif; }
.temporal-node-copy strong, .temporal-node-copy span, .temporal-node-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.temporal-node-copy strong { max-height: 48px; display: -webkit-box; overflow-wrap: anywhere; white-space: normal; font: 700 16px/1.25 Manrope, sans-serif; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.temporal-node-copy span { margin-top: 4px; white-space: nowrap; color: var(--muted); font-size: 11px; }
.temporal-node-copy small { margin-top: 4px; white-space: nowrap; color: var(--faint); font-size: 10px; }
.overview-zoom .temporal-node-copy { opacity: 0; }
.overview-zoom .temporal-node > rect { filter: none; fill: rgba(255,255,255,.82); }
.overview-zoom .temporal-node .node-accent { r: 8px; }
.mid-zoom .node-name { font-size: 19px; }
.mid-zoom .node-owners { display: none; }

.temporal-edge-group { cursor: pointer; opacity: .72; transition: opacity 130ms ease; }
.temporal-edge-group.dimmed { opacity: .06; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; }
.temporal-edge { fill: none; stroke: #92a69f; stroke-width: 1.7; pointer-events: none; transition: 120ms ease; }
.temporal-edge-group:hover, .temporal-edge-group.hover-context, .temporal-edge-group.focused, .temporal-edge-group.selected, .temporal-edge-group.highlighted { opacity: 1; }
.temporal-edge-group:hover .temporal-edge, .temporal-edge-group.hover-context .temporal-edge { stroke: var(--teal); stroke-width: 2.8; }
.temporal-edge-group.focused .temporal-edge, .temporal-edge-group.highlighted .temporal-edge { stroke-width: 2.3; }
.temporal-edge-group.selected .temporal-edge { stroke: var(--teal); stroke-width: 3.4; }
.temporal-edge-group.focus-outgoing .temporal-edge { stroke: var(--teal); }
.temporal-edge-group.focus-incoming .temporal-edge { stroke: var(--blue); }
.edge-label { opacity: 0; pointer-events: none; }
.edge-label rect { fill: rgba(255,255,255,.96); stroke: #b9c9c3; stroke-width: 1; }
.edge-label text { fill: #526763; font: 800 10px "DM Sans", sans-serif; letter-spacing: .025em; }
.temporal-edge-group:hover .edge-label, .temporal-edge-group.hover-context .edge-label, .temporal-edge-group.focused .edge-label, .temporal-edge-group.selected .edge-label { opacity: 1; }
.temporal-edge-group.focus-outgoing .edge-label rect { stroke: #7eb2a4; }
.temporal-edge-group.focus-incoming .edge-label rect { stroke: #8daec8; }

.graph-drawer { grid-template-rows: auto 1fr; }
.graph-drawer .drawer-body { padding-top: 16px; }
.detail-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.detail-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.detail-section-head { margin-bottom: 11px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.detail-section-head strong { font: 700 15px Manrope, sans-serif; }
.detail-section-head span { color: var(--faint); font-size: 11px; }
.owner-list { display: grid; gap: 8px; }
.owner-card { padding: 10px; display: grid; grid-template-columns: 1fr 112px auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfa; }
.owner-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.owner-card select { height: 34px; border: 1px solid var(--line-dark); border-radius: 7px; background: white; font-size: 11px; }
.owner-card button { border: 0; color: var(--danger); background: none; cursor: pointer; font-size: 11px; }
.owner-add { margin-top: 9px; display: grid; grid-template-columns: 1fr 112px auto; gap: 7px; }
.owner-add select { min-width: 0; height: 36px; border: 1px solid var(--line-dark); border-radius: 8px; background: white; font-size: 12px; }
.relationship-list { display: grid; gap: 7px; }
.relationship-row { width: 100%; padding: 10px; display: grid; grid-template-columns: 1fr auto; gap: 9px; border: 1px solid var(--line); border-radius: 9px; text-align: left; background: #fbfcfa; cursor: pointer; }
.relationship-row:hover { border-color: #9dbdb3; }
.relationship-row strong, .relationship-row small { display: block; }
.relationship-row strong { font-size: 12px; }
.relationship-row small { margin-top: 3px; color: var(--faint); font-size: 11px; }
.relationship-row span { align-self: center; color: var(--teal); font-size: 16px; }
.relationship-add { margin-top: 11px; padding: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf7; }
.relationship-add .wide { grid-column: 1 / -1; }
.relationship-add input, .relationship-add select { min-width: 0; height: 38px; padding: 0 9px; border: 1px solid var(--line-dark); border-radius: 8px; background: white; font-size: 12px; }
.graph-path { padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #f8faf7; font-size: 12px; line-height: 1.5; }
.graph-path strong { color: var(--ink); }

@media (max-width: 1100px) {
  .temporal-header .save-state { display: none; }
  .temporal-header { grid-template-columns: 170px auto minmax(220px, 1fr) auto; }
}

@media (max-width: 1500px) {
  .temporal-workspace:has(.graph-drawer.open) .graph-context-panel { opacity: 0; pointer-events: none; transform: translateX(-18px); }
  .graph-context-panel { transition: opacity 140ms ease, transform 140ms ease; }
}