/* Regulatory Graph Explorer: page-specific styles.
   Inherits brand tokens (--ivory, --sage, --gold, --font-display, --font-body etc.)
   from the shared /css/style.css. Node-type colors below are new, distinct from
   both the brand accents and the dashboard's reserved status ramp
   (--good/--warning/--serious/--critical), which this page never uses. */

:root {
  --node-article:       #5B7C99;
  --node-article-light: color-mix(in srgb, #5B7C99 16%, var(--surface));
  --node-annex:         #4A8F8C;
  --node-annex-light:   color-mix(in srgb, #4A8F8C 16%, var(--surface));
  --node-recital:       #8B6F9E;
  --node-recital-light: color-mix(in srgb, #8B6F9E 16%, var(--surface));
  --node-definition:       #B98356;
  --node-definition-light: color-mix(in srgb, #B98356 16%, var(--surface));
  /* NAIC Model Bulletin graph's types: aliased to the EU AI Act graph's
     colors rather than new ones -- "section" is the same kind of primary
     structural unit as "article", "component" the same kind of sub-element
     as "annex". Both graphs share the definition color as-is. */
  --node-section:       var(--node-article);
  --node-section-light: var(--node-article-light);
  --node-component:       var(--node-annex);
  --node-component-light: var(--node-annex-light);
}

:root[data-theme="dark"] {
  --node-article:    #7FA3C2;
  --node-annex:      #6BB5B1;
  --node-recital:    #B092C4;
  --node-definition: #D6A87A;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  /* The whole layout is sized to fit exactly one viewport (header + main +
     footer); only .rge-panel scrolls internally for long content. Without
     this, focusing an SVG node (native browser behaviour on click, not
     something this page's JS triggers) can scroll-into-view the whole
     document in some browsers, visibly jumping the graph. */
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font-family: var(--font-body);
}

.rge-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.rge-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.rge-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.rge-header-title h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.3;
}

.rge-header-title p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.15rem 0 0;
}

/* Main layout
   Explicitly overrides every property the shared /css/style.css's generic
   `main { ... }` rule sets (flex-direction, max-width, margin, padding,
   justify-content) -- <main class="rge-main"> is still a real <main>
   element, so that rule's element-selector matches here too, and any
   property this class rule doesn't set falls through to it regardless of
   the class selector's higher specificity (cascade is per-property, not
   per-rule). Found via testing: without this, the layout silently rendered
   as a single column at every width, not the intended side-by-side graph
   + panel on desktop. */
.rge-main {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  width: 100%;
}

.rge-graph-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--border);
}

.rge-svg {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--ivory);
}

.rge-legend {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.9rem;
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--white, var(--ivory));
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
}

.rge-legend-item { display: flex; align-items: center; gap: 0.35rem; }
.rge-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* Visually hidden but reachable by keyboard/screen reader -- real <button>
   elements mirroring each graph node, avoiding the SVG-focus scroll quirk
   (see graph.js). Standard "visually hidden, not display:none" pattern so
   they stay in the tab order. */
.rge-sr-nav {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.rge-sr-nav button:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  clip: auto;
  z-index: 10;
  background: var(--white, var(--ivory));
  border: 2px solid var(--gold);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

/* Graph nodes/edges (SVG) */
.rge-edge {
  stroke: var(--border);
  stroke-width: 1;
  fill: none;
}

.rge-node-hit {
  fill: transparent;
  cursor: pointer;
}

.rge-node-circle {
  stroke: var(--ivory);
  stroke-width: 1.5;
  transition: r 0.15s ease;
}

.rge-node-circle.type-article { fill: var(--node-article); }
.rge-node-circle.type-annex { fill: var(--node-annex); }
.rge-node-circle.type-recital { fill: var(--node-recital); }
.rge-node-circle.type-definition { fill: var(--node-definition); }
.rge-node-circle.type-section { fill: var(--node-section); }
.rge-node-circle.type-component { fill: var(--node-component); }

.rge-node.selected .rge-node-circle { stroke: var(--gold); stroke-width: 2.5; }

.rge-node-label {
  font-family: var(--font-body);
  font-size: 9px;
  fill: var(--text);
  pointer-events: none;
  user-select: none;
}

.rge-node-hit:focus-visible + .rge-node-circle,
.rge-node:focus-visible .rge-node-circle {
  stroke: var(--gold);
  stroke-width: 3;
}

/* Detail panel */
.rge-panel {
  width: 380px;
  flex-shrink: 0;
  padding: 1.5rem;
  overflow-y: auto;
}

.rge-panel-empty p {
  color: var(--muted);
  font-size: 0.9rem;
}

.rge-panel-type {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--border);
}

.rge-panel-type.type-article { color: var(--node-article); border-color: var(--node-article); }
.rge-panel-type.type-annex { color: var(--node-annex); border-color: var(--node-annex); }
.rge-panel-type.type-recital { color: var(--node-recital); border-color: var(--node-recital); }
.rge-panel-type.type-definition { color: var(--node-definition); border-color: var(--node-definition); }
.rge-panel-type.type-section { color: var(--node-section); border-color: var(--node-section); }
.rge-panel-type.type-component { color: var(--node-component); border-color: var(--node-component); }

.rge-panel h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  margin: 0 0 0.15rem;
}

.rge-panel-subtitle {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

.rge-panel-text {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.rge-amended-badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
}

.rge-amended-badge.amended-true { color: var(--sage); border-color: var(--sage); }
.rge-amended-badge.amended-false { color: var(--muted); }
.rge-amended-badge.amended-unverified { color: var(--gold); border-color: var(--gold); }

.rge-amendment-note {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 1rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--border);
}

.rge-source-link {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--sage);
  margin-bottom: 1.25rem;
}

.rge-panel-refs-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.rge-ref-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.4rem;
  background: none;
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.rge-ref-btn:hover { border-color: var(--sage); }

/* Footer disclaimer: always visible, never dismissible */
.rge-footer {
  border-top: 1px solid var(--border);
  padding: 0.75rem 1.5rem;
  flex-shrink: 0;
}

.rge-footer p {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  max-width: 900px;
}

/* Mobile */
@media (max-width: 640px) {
  .rge-main { flex-direction: column; }

  /* Sized relative to .rge-main's own resolved height, not the viewport --
     vh units here previously ignored how much space the header/footer
     actually take (their disclaimer/title text wraps to several lines at
     this width), causing the panel to overflow past the footer. graph-wrap
     grows to fill whatever's left after the panel takes what it needs. */
  .rge-graph-wrap {
    flex: 1 1 auto;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .rge-panel {
    flex: 0 0 auto;
    width: 100%;
    max-height: 45%;
  }

  .rge-header-title h1 { font-size: 1rem; }
}