/* x-road.mn — landing page small overrides on top of Tailwind.
   Tailwind provides 99% of the styling; this file is for things
   Tailwind cannot express cleanly: SVG-diagram theming via CSS vars,
   mermaid container tweaks, smooth scroll, scrollbar polish. */

html { scroll-behavior: smooth; }

/* ── Hand-crafted SVG diagram palette (theme-aware) ────────────────
   Single source of truth for the colours used inside the inline SVG
   diagrams in index.html. The diagrams reference these via
   var(--diag-*); flipping html.dark flips all 3 diagrams at once. */
:root {
  --diag-bg:           #ffffff;
  --diag-cluster-bg:   #f8fafc;
  --diag-cluster-bd:   #cbd5e1;
  --diag-cluster-tx:   #475569;

  --diag-text:         #0f172a;
  --diag-text-dim:     #475569;
  --diag-text-muted:   #64748b;

  --diag-edge:         #94a3b8;
  --diag-edge-strong:  #475569;
  --diag-edge-label:   #475569;

  --diag-trust-bg:     #faf5ff;
  --diag-trust-bd:     #7c3aed;
  --diag-trust-tx:     #581c87;

  --diag-ctrl-bg:      #dbeafe;
  --diag-ctrl-bd:      #1d4ed8;
  --diag-ctrl-tx:      #1e3a8a;

  --diag-data-bg:      #ecfdf5;
  --diag-data-bd:      #047857;
  --diag-data-tx:      #064e3b;

  --diag-leaf-bg:      #f8fafc;
  --diag-leaf-bd:      #94a3b8;

  --diag-accent:       #2563eb;
  --diag-accent-soft:  #93c5fd;
  --diag-warn:         #d97706;
}
html.dark {
  --diag-bg:           transparent;
  --diag-cluster-bg:   rgba(255, 255, 255, 0.025);
  --diag-cluster-bd:   rgba(255, 255, 255, 0.10);
  --diag-cluster-tx:   #cbd5e1;

  --diag-text:         #e2e8f0;
  --diag-text-dim:     #cbd5e1;
  --diag-text-muted:   #94a3b8;

  --diag-edge:         #475569;
  --diag-edge-strong:  #94a3b8;
  --diag-edge-label:   #cbd5e1;

  --diag-trust-bg:     #2e1065;
  --diag-trust-bd:     #a78bfa;
  --diag-trust-tx:     #ddd6fe;

  --diag-ctrl-bg:      #172554;
  --diag-ctrl-bd:      #60a5fa;
  --diag-ctrl-tx:      #dbeafe;

  --diag-data-bg:      #022c22;
  --diag-data-bd:      #34d399;
  --diag-data-tx:      #d1fae5;

  --diag-leaf-bg:      #0f172a;
  --diag-leaf-bd:      #475569;

  --diag-accent:       #60a5fa;
  --diag-accent-soft:  #1e40af;
  --diag-warn:         #fbbf24;
}

/* SVG diagram class hooks — every <svg class="diagram"> uses these */
svg.diagram                  { display: block; max-width: 100%; height: auto; margin: 0 auto; font-family: Inter, system-ui, sans-serif; }
svg.diagram .cluster         { fill: var(--diag-cluster-bg); stroke: var(--diag-cluster-bd); stroke-dasharray: 4 4; }
svg.diagram .cluster-label   { fill: var(--diag-cluster-tx); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
svg.diagram .node            { stroke-width: 1.5; }
svg.diagram .node.trust      { fill: var(--diag-trust-bg); stroke: var(--diag-trust-bd); }
svg.diagram .node.ctrl       { fill: var(--diag-ctrl-bg);  stroke: var(--diag-ctrl-bd); }
svg.diagram .node.ctrl.root  { stroke-width: 2.5; }
svg.diagram .node.data       { fill: var(--diag-data-bg);  stroke: var(--diag-data-bd); }
svg.diagram .node.leaf       { fill: var(--diag-leaf-bg);  stroke: var(--diag-leaf-bd); }
svg.diagram .node-title      { fill: var(--diag-text); font-weight: 600; font-size: 14px; }
svg.diagram .node-sub        { fill: var(--diag-text-dim); font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
svg.diagram .node-meta       { fill: var(--diag-text-muted); font-size: 10.5px; font-style: italic; }
svg.diagram .node-tag        { fill: var(--diag-text); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; }
svg.diagram .node-tag.trust  { fill: var(--diag-trust-tx); }
svg.diagram .node-tag.ctrl   { fill: var(--diag-ctrl-tx); }
svg.diagram .node-tag.data   { fill: var(--diag-data-tx); }
svg.diagram .edge            { stroke: var(--diag-edge); fill: none; stroke-width: 1.5; }
svg.diagram .edge.dashed     { stroke-dasharray: 4 3; }
svg.diagram .edge.thick      { stroke: var(--diag-edge-strong); stroke-width: 2.5; }
svg.diagram .edge.accent     { stroke: var(--diag-accent); stroke-width: 2; }
svg.diagram .edge-arrow      { fill: var(--diag-edge); }
svg.diagram .edge-arrow.thick   { fill: var(--diag-edge-strong); }
svg.diagram .edge-arrow.accent  { fill: var(--diag-accent); }
svg.diagram .edge-label-bg   { fill: var(--diag-bg); stroke: var(--diag-cluster-bd); stroke-width: 1; }
svg.diagram .edge-label      { fill: var(--diag-edge-label); font-size: 10.5px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
svg.diagram .step-num        { fill: var(--diag-accent); font-weight: 700; font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
svg.diagram .accent-fill     { fill: var(--diag-accent); }
svg.diagram .star            { fill: var(--diag-warn); }

/* Refined typography ─────────────────────────────────────────────── */
svg.diagram .h-title         { fill: var(--diag-text); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
svg.diagram .h-host          { fill: var(--diag-text-dim); font-size: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
svg.diagram .h-meta          { fill: var(--diag-text-muted); font-size: 11px; }
svg.diagram .h-meta.italic   { font-style: italic; }
svg.diagram .h-id            { fill: var(--diag-text-muted); font-size: 10.5px; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.02em; }

/* Chip — small rounded pill used for subsystem tags + edge labels */
svg.diagram .chip-bg         { fill: var(--diag-bg); stroke: var(--diag-cluster-bd); stroke-width: 1; }
svg.diagram .chip-bg.trust   { fill: var(--diag-trust-bg); stroke: var(--diag-trust-bd); }
svg.diagram .chip-bg.ctrl    { fill: var(--diag-ctrl-bg);  stroke: var(--diag-ctrl-bd); }
svg.diagram .chip-bg.data    { fill: var(--diag-data-bg);  stroke: var(--diag-data-bd); }
svg.diagram .chip-bg.accent  { fill: var(--diag-bg); stroke: var(--diag-accent); }
svg.diagram .chip-text       { fill: var(--diag-text); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; font-family: 'JetBrains Mono', ui-monospace, monospace; text-anchor: middle; }
svg.diagram .chip-text.trust { fill: var(--diag-trust-tx); }
svg.diagram .chip-text.ctrl  { fill: var(--diag-ctrl-tx); }
svg.diagram .chip-text.data  { fill: var(--diag-data-tx); }
svg.diagram .chip-text.accent { fill: var(--diag-accent); }
svg.diagram .chip-text.normal { font-weight: 500; letter-spacing: 0; font-family: Inter, system-ui, sans-serif; }

/* Icons — strokes + fills follow node colour */
svg.diagram .icon            { stroke: var(--diag-text-dim); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
svg.diagram .icon.trust      { stroke: var(--diag-trust-bd); }
svg.diagram .icon.ctrl       { stroke: var(--diag-ctrl-bd); }
svg.diagram .icon.data       { stroke: var(--diag-data-bd); }
svg.diagram .icon-fill       { fill: var(--diag-text-muted); stroke: none; }
svg.diagram .icon-fill.trust { fill: var(--diag-trust-bd); }
svg.diagram .icon-fill.ctrl  { fill: var(--diag-ctrl-bd); }
svg.diagram .icon-fill.data  { fill: var(--diag-data-bd); }
svg.diagram .icon-bg         { fill: var(--diag-cluster-bg); stroke: var(--diag-cluster-bd); stroke-width: 1; }
svg.diagram .icon-bg.trust   { fill: var(--diag-trust-bg);   stroke: var(--diag-trust-bd); }
svg.diagram .icon-bg.ctrl    { fill: var(--diag-ctrl-bg);    stroke: var(--diag-ctrl-bd); }
svg.diagram .icon-bg.data    { fill: var(--diag-data-bg);    stroke: var(--diag-data-bd); }

/* Bus-bar (hub-and-spoke routing) */
svg.diagram .bus             { stroke: var(--diag-accent); stroke-width: 1.5; fill: none; opacity: 0.9; }
svg.diagram .bus-dot         { fill: var(--diag-accent); }

/* Sequence diagram — actor cards, lifeline, message arrows */
svg.diagram .lifeline        { stroke: var(--diag-cluster-bd); stroke-width: 1; stroke-dasharray: 2 6; fill: none; }
svg.diagram .activation      { fill: var(--diag-ctrl-bg); stroke: var(--diag-ctrl-bd); stroke-width: 1; opacity: 0.7; }
svg.diagram .step-chip       { fill: var(--diag-accent); }
svg.diagram .step-chip-text  { fill: #fff; font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', ui-monospace, monospace; text-anchor: middle; }
svg.diagram .phase-divider   { stroke: var(--diag-cluster-bd); stroke-width: 1; stroke-dasharray: 1 4; }
svg.diagram .phase-label     { fill: var(--diag-text-muted); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }

/* Mermaid diagrams are pre-rendered to SVG at build time (mmdc) and
   inlined into index.html inside <div class="mermaid-svg">. No runtime
   JS, no CDN dependency. Each diagram is rendered TWICE — once for
   each theme — and selectively shown via the theme classes below. */
.mermaid-svg {
  display: block;
  text-align: center;
}
.mermaid-svg svg {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ── Theme visibility ──────────────────────────────────────────────
   .theme-dark elements show only when <html class="dark"> is set.
   .theme-light elements show only when it is NOT set. */
.theme-dark   { display: none; }
.theme-light  { display: block; }
html.dark .theme-dark   { display: block; }
html.dark .theme-light  { display: none; }

/* Inline elements need inline display, not block. */
button .theme-dark, button .theme-light,
.inline .theme-dark, .inline .theme-light { display: none; }
button .theme-light { display: inline-block; }
html.dark button .theme-dark { display: inline-block; }
html.dark button .theme-light { display: none; }

/* Theme-toggle button icon visibility (sun in dark mode, moon in light) */
.theme-icon-sun  { display: none; }
.theme-icon-moon { display: inline-block; }
html.dark .theme-icon-sun  { display: inline-block; }
html.dark .theme-icon-moon { display: none; }

/* Scrollbar — match the dark surface so horizontal table/diagram
   scroll does not look like an OS afterthought. */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: #0b0f17; }
::-webkit-scrollbar-thumb {
  background: #1f2937;
  border-radius: 8px;
  border: 2px solid #0b0f17;
}
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* Anchor offset under the sticky header (16 = h-16 = 64px). */
section[id] { scroll-margin-top: 80px; }