/* NODUS - The Sensemaking Tool v1.1.0 (c) 2026 Chris R. Chapman */
/* ══════════════════════════════════════════════════════════════════════════
   1. CORE RESET & DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

:root {
  --bg:       #090b12;
  --surface:  #0d1020;
  --border:   #181d30;

  /* Dialog Mapping Node Type Themes - Standardized Color Profiles Retained */
  --q-col: #4d9eff;   --q-bg: #081e38;   --q-bd: #1e4a8a;   --q-ic: #0e2d5a;   /* Question */
  --i-col: #f0b429;   --i-bg: #221800;   --i-bd: #7a5200;   --i-ic: #4a2e00;   /* Idea/Answer */
  --d-col: #fb923c;   --d-bg: #241509;   --d-bd: #8a3a00;   --d-ic: #5a2200;   /* Decision */
  --p-col: #34d399;   --p-bg: #02221a;   --p-bd: #0f6642;   --p-ic: #0d4a28;   /* Pro */
  --c-col: #f87171;   --c-bg: #231010;   --c-bd: #7a2222;   --c-ic: #4a1010;   /* Con */
  --pnd-col: #a3b8cc; --pnd-bg: #111424; --pnd-bd: #3a4a6a; --pnd-ic: #1c233a; /* Pending */
  --b-col: #c084fc;   --b-bg: #160d26;   --b-bd: #622fa0;   --b-ic: #331566;   /* Note/Background */
}

html, body { 
  height: 100%; 
  overflow: hidden; 
}

body {
  background: var(--bg);
  color: #c4cfe8;
  font-family: 'DM Sans', sans-serif;
  display: flex;
  flex-direction: column;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. APPLICATION TOPBAR LAYOUT & NAVIGATION CONTROLS
   ══════════════════════════════════════════════════════════════════════════ */
#hdr {
  height: 44px; /* Sleeker chrome header profile */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#hdr-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a9cc0;
}

.hdr-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

#hdr-toast {
  position: absolute;
  top: 50px; 
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  background: #1e293b; 
  padding: 6px 14px;
  border-radius: 20px; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000; 
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), top 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Fallback/Default style when classes aren't explicitly loaded yet */
  color: #c4cfe8;
  border: 1px solid rgba(196, 207, 232, 0.2);
}

#hdr-toast.hidden {
  opacity: 0 !important;
  top: 44px; 
  pointer-events: none;
}

/* ── Contextual Modifier Themes ── */

/* Success Variant - Green */
#hdr-toast.is-success {
  color: #34d399; 
  border: 1px solid rgba(52, 211, 153, 0.3);
}

/* Error Variant - Red */
#hdr-toast.is-error {
  color: #f87171; 
  border: 1px solid rgba(248, 113, 113, 0.3);
}

/* Warning Variant - Amber (Matches the UI's Idea profile) */
#hdr-toast.is-warning {
  color: #f0b429; 
  border: 1px solid rgba(240, 180, 41, 0.3);
}

/* ── Interactive Header Elements - Clean Typography ── */
.btn {
  background: #151a30;
  color: #a3b8cc;
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif; /* Shifted from monospace to optimize UI rhythm */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn:hover {
  background: #1e2545;
  color: #fff;
  border-color: #313d66;
}

/* ── Native Select Button Overrides ── */
select.btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256' fill='%23a3b8cc'><path d='M216,104a8,8,0,0,1-5.66,13.66l-76,76a8,8,0,0,1-11.32,0l-76-76a8,8,0,0,1,11.32-11.32L128,172.69l70.34-70.35A8,8,0,0,1,216,104Z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
select.btn option {
  background-color: var(--surface);
  color: #a3b8cc;
  font-family: 'DM Sans', sans-serif;
}
select.btn option:disabled {
  color: #3a5272;
}

/* ── Samples Dropdown Styling ────────────────────────────────────────────── */
.samples-select-container {
  display: flex;
  align-items: center;
  font-family: inherit;
}

.samples-select-container select {
  background-color: #1e293b;
  border: 1px solid #475569;
  color: #f8fafc;
  padding: 5px 32px 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: all 0.15s ease-in-out;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2394a3b8' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.34a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.samples-select-container select:hover {
  background-color: #24324a;
  border-color: #38bdf8;
}

/* ── Progressive Disclosure Dropdown Interface ── */
.legend-dropdown {
  position: relative;
}
.legend-content {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  flex-direction: column;
  gap: 10px;
  min-width: 150px;
}
.legend-dropdown:hover .legend-content,
.legend-dropdown:focus-within .legend-content {
  display: flex;
}
.leg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  color: #a3b8cc;
}
.leg-ic {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. THE INFINITE WORKSPACE GRAPH CANVAS
   ══════════════════════════════════════════════════════════════════════════ */
#wrap {
  flex: 1;
  overflow: auto;
  position: relative;
  background: var(--bg);
  background-image: radial-gradient(circle, #151933 1px, transparent 1px); /* Subtly lowered contrast to drop into backdrop */
  background-size: 26px 26px;
  background-position: 13px 13px;
  padding-top: 0;
  transition: padding-top 0.1s;
}
body.has-breadcrumb #wrap {
  padding-top: 28px;
}

#canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

#svg-layer {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 10;
}

/* Sub-map breadcrumb trail */
#map-breadcrumb {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  height: 28px;
  z-index: 100;
  pointer-events: all;
  overflow: hidden;
}
#map-breadcrumb.hidden {
  display: none;
}
.bc-link {
  color: #60a5fa;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  min-width: 0;
  flex-shrink: 1;
  transition: color 0.1s;
}
.bc-link:hover {
  color: #93c5fd;
  text-decoration: underline;
}
.bc-sep {
  color: #4a5568;
  user-select: none;
  flex-shrink: 0;
  padding: 0 6px;
}
.bc-current {
  color: #8fa0c4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  min-width: 0;
  flex-shrink: 1;
  font-weight: 600;
}
.guide-card {
  background: transparent;
  border: 1px dashed #2a3550;
  padding: 20px 24px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.guide-card h2 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #7a9cc0;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.guide-row {
  font-size: 12px;
  color: #6b7fa8;
}
.kbd {
  font-family: 'JetBrains Mono', monospace;
  color: #a3b8cc;
  background: #111424;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid #1c233a;
}


/* ══════════════════════════════════════════════════════════════════════════
   4. BASE NODE ARCHITECTURE & SUB-COMPONENTS
   ══════════════════════════════════════════════════════════════════════════ */
.node {
  position: absolute;
  width: 220px;
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  border: 1.5px solid;
  cursor: pointer;
  transition: box-shadow 0.12s, filter 0.12s;
  user-select: none;
  z-index: 10;
}
.node:hover { 
  filter: brightness(1.25); /* Calmed down hyper-brightness flare */
}

/* Iconic Type Badge Shell */
.ni {
  width: 34px;
  flex-shrink: 0;
  border-radius: 6px 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Core Editable Content Block */
.nt {
  flex: 1;
  padding: 9px 11px 9px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #ccd6f0;
  min-height: 44px;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  outline: none;
  border-left: 1px solid rgba(255,255,255,0.05);
}
.nt[contenteditable="true"] { 
  color: #fff; 
  caret-color: #fff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Inline markdown rendering */
.nt strong { font-weight: 900 }
.nt em     { font-style: italic; opacity: 0.9 }

/* Embedded URL Microformatting */
.url-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #a78bfa;
  opacity: 0.9;
  text-decoration: none;
  font-size: 11.5px;
  word-break: normal;
  overflow-wrap: break-word;
  transition: opacity 0.1s;
}
.url-link:hover { 
  opacity: 1;
  color: #c4b5fd;
  text-decoration: underline; 
}

/* ══════════════════════════════════════════════════════════════════════════
   5. DYNAMIC COLOR-THEME VARIATIONS & TOGGLE TOKENS
   ══════════════════════════════════════════════════════════════════════════ */

/* Question Theme (.nq) */
.nq { 
  background: var(--q-bg); 
  border-color: var(--q-bd); 
  --local-bg: var(--q-bg); 
  --local-bd: var(--q-bd); 
  --local-col: var(--q-col); 
}
.nq .ni { background: var(--q-ic); color: var(--q-col); }
.nq.sel { box-shadow: 0 0 0 2px var(--q-col), 0 0 20px rgba(77,158,255,.22); }

/* Idea / Position Theme (.na) */
.na { 
  background: var(--i-bg); 
  border-color: var(--i-bd); 
  --local-bg: var(--i-bg); 
  --local-bd: var(--i-bd); 
  --local-col: var(--i-col); 
}
.na .ni { background: var(--i-ic); color: var(--i-col); }
.na.sel { box-shadow: 0 0 0 2px var(--i-col), 0 0 20px rgba(240,180,41,.22); }

/* Decision Theme (.nd) */
.nd { 
  background: var(--d-bg);
  border-color: var(--d-bd);
}
.nd .ni { background: var(--d-ic); color: var(--d-col); }
.nd.sel { box-shadow: 0 0 0 2px var(--d-col), 0 0 20px rgba(251,146,60,.22); }

/* Pro Argument Theme (.np) */
.np { 
  background: var(--p-bg); 
  border-color: var(--p-bd); 
  --local-bg: var(--p-bg); 
  --local-bd: var(--p-bd); 
  --local-col: var(--p-col); 
}
.np .ni { background: var(--p-ic); color: var(--p-col); }
.np.sel { box-shadow: 0 0 0 2px var(--p-col), 0 0 20px rgba(52,211,153,.22); }

/* Con Argument Theme (.nc) */
.nc { 
  background: var(--c-bg); 
  border-color: var(--c-bd); 
  --local-bg: var(--c-bg); 
  --local-bd: var(--c-bd); 
  --local-col: var(--c-col); 
}
.nc .ni { background: var(--c-ic); color: var(--c-col); }
.nc.sel { box-shadow: 0 0 0 2px var(--c-col), 0 0 20px rgba(248,113,113,.22); }

/* Pending Workflow Variant (.npnd) */
.npnd { 
  background: var(--pnd-bg); 
  border-color: var(--pnd-bd); 
  border-style: dashed; 
  --local-bg: var(--pnd-bg); 
  --local-bd: var(--pnd-bd); 
  --local-col: var(--pnd-col); 
}
.npnd .ni { background: var(--pnd-ic); color: var(--pnd-col); }
.npnd.sel { box-shadow: 0 0 0 2px var(--pnd-bd), 0 0 20px rgba(163,184,204,.22); }

/* Note / Metadata Canvas Theme (.nb) */
.nb { 
  background: var(--b-bg); 
  border-color: var(--b-bd); 
  --local-bg: var(--b-bg); 
  --local-bd: var(--b-bd); 
  --local-col: var(--b-col); 
}
.nb .ni { background: var(--b-ic); color: var(--b-col); }
.nb.sel { box-shadow: 0 0 0 2px var(--b-col), 0 0 20px rgba(192,132,252,.22); }


/* ══════════════════════════════════════════════════════════════════════════
   6. SUBTREE EXPAND / COLLAPSE UI MECHANICS
   ══════════════════════════════════════════════════════════════════════════ */
.node-toggle {
  position: absolute;
  right: -10px; 
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  
  /* Global default fallback if no type matches */
  background: #161b33;
  border: 1px solid #3b4a75;
  color: #f1f5f9;
}

/* ── Contextual Theme Overrides (Handles both child or direct classing) ── */
.nq .node-toggle, .node-toggle.nq { background: var(--q-bg); border-color: var(--q-bd); color: var(--q-col); }
.na .node-toggle, .node-toggle.na { background: var(--i-bg); border-color: var(--i-bd); color: var(--i-col); }
.nd .node-toggle, .node-toggle.nd { background: var(--d-bg); border-color: var(--d-bd); color: var(--d-col); }
.np .node-toggle, .node-toggle.np { background: var(--p-bg); border-color: var(--p-bd); color: var(--p-col); }
.nc .node-toggle, .node-toggle.nc { background: var(--c-bg); border-color: var(--c-bd); color: var(--c-col); }
.npnd .node-toggle, .node-toggle.npnd { background: var(--pnd-bg); border-color: var(--pnd-bd); color: var(--pnd-col); }
.nb .node-toggle, .node-toggle.nb { background: var(--b-bg); border-color: var(--b-bd); color: var(--b-col); }

/* ── Contextual Hover States ── */
.node-toggle:hover { color: #fff; }
.nq .node-toggle:hover, .node-toggle.nq:hover { background: var(--q-bd); }
.na .node-toggle:hover, .node-toggle.na:hover { background: var(--i-bd); }
.nd .node-toggle:hover, .node-toggle.nd:hover { background: var(--d-bd); }
.np .node-toggle:hover, .node-toggle.np:hover { background: var(--p-bd); }
.nc .node-toggle:hover, .node-toggle.nc:hover { background: var(--c-bd); }
.npnd .node-toggle:hover, .node-toggle.npnd:hover { background: var(--pnd-bd); }
.nb .node-toggle:hover, .node-toggle.nb:hover { background: var(--b-bd); }

/* ── Sub-map Navigation Decorators ── */
.submap-dec {
  position: absolute;
  right: -10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  z-index: 11;
  background: #1a2540;
  border: 1px solid #3b4a75;
  color: #60a5fa;
  transition: background 0.15s, color 0.15s;
}
.submap-dec:hover {
  background: #243050;
  color: #93c5fd;
}
/* Ascend: top-right — upward movement */
.submap-dec--up {
  top: -10px;
}
/* Descend: bottom-right — downward movement */
.submap-dec--down {
  bottom: -10px;
}

/* Collapsed Ellipsis State Content Indicator */
.node-ellipsis {
  font-size: 10px;
  letter-spacing: -1px;
  margin-left: 1px;
  color: #94a3b8; 
}


/* ══════════════════════════════════════════════════════════════════════════
   7. FLOATING OVERLAYS & CONTROLS (DIALOGS / PICKERS)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Destructive Action Safety Gate ── */
#delete-dialog,
#clear-map-dialog,
#paste-map-dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
#delete-dialog.hidden,
#clear-map-dialog.hidden,
#paste-map-dialog.hidden { display: none; }

.dd-box {
  background: #0d1020;
  border: 1.5px solid #2a3550;
  border-radius: 10px;
  padding: 24px 28px 20px;
  width: 380px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dd-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #c4cfe8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dd-title svg { flex-shrink: 0; color: #f87171; }

.dd-body {
  font-size: 12px;
  color: #6b7fa8;
  line-height: 1.55;
}
.dd-body strong { color: #c4cfe8; }

.dd-count {
  font-size: 11.5px;
  font-family: 'JetBrains Mono', monospace;
  color: #4d78bb;
  background: #0a0e1a;
  border: 1px solid #1a2340;
  border-radius: 5px;
  padding: 7px 10px;
}

.dd-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.dd-btn {
  padding: 7px 18px;
  border-radius: 6px;
  border: 1.5px solid;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.1s;
  font-family: inherit;
}
.dd-btn:hover { filter: brightness(1.15); }

.dd-btn-cancel {
  background: #0d1020;
  border-color: #2a3550;
  color: #6b7fa8;
}
.dd-btn-delete {
  background: #3d0e0e;
  border-color: #5c1a1a;
  color: #f87171;
}

/* ── Contextual Node Retype Picker ── */
.retype-picker {
  position: absolute;
  display: flex;
  gap: 5px;
  background: #0d1020;
  border: 1.5px solid #2a3550;
  border-radius: 8px;
  padding: 6px 8px;
  z-index: 100;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  pointer-events: all;
}

.retype-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1.5px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.1s, border-color 0.1s;
  background: none;
}
.retype-btn:hover { 
  filter: brightness(1.3); 
  border-color: rgba(255,255,255,0.2); 
}

/* Swatch Color Assignments inside Picker */
.retype-btn.rq { background: var(--q-ic);  color: var(--q-col);  border-color: var(--q-bd); }
.retype-btn.ra { background: var(--i-ic);  color: var(--i-col);  border-color: var(--i-bd); }
.retype-btn.rd { background: var(--d-ic);  color: var(--d-col);  border-color: var(--d-bd); }
.retype-btn.rp { background: var(--p-ic);  color: var(--p-col);  border-color: var(--p-bd); }
.retype-btn.rc { background: var(--c-ic);  color: var(--c-col);  border-color: var(--c-bd); }
.retype-btn.rb { background: var(--b-ic);  color: var(--b-col);  border-color: var(--b-bd); }


/* ══════════════════════════════════════════════════════════════════════════
   8. FOOTER METADATA STATUS BAR
   ══════════════════════════════════════════════════════════════════════════ */
#status {
  height: 28px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: -0.01em;
  color: #8fa0c4;
  /* color: var(--i-col); */
}

.status-mode {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hints-pill {
  flex-shrink: 0;
  margin-left: 16px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: #60a5fa;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.hints-pill:hover {
  background: rgba(96,165,250,0.1);
  border-color: rgba(96,165,250,0.4);
}

/* Micro-Typography Target Elements */
.k {
  color: #60a5fa;
  font-weight: 600;
}
.dim {
  color: var(--i-col);
  margin: 0 4px;
  font-weight: 400;
}

/* Cut / Paste Mode — Dimmed Subtree */
.cut-pending {
  opacity: 0.75;
  filter: saturate(0.5);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. HINTS HUD PANEL
   ══════════════════════════════════════════════════════════════════════════ */
#hints-hud {
  position: fixed;
  top: 50%;
  right: 16px;
  transform:translateY(-50%);
  width: 300px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;

  /* background: var(--surface); */
  /* border: 1px solid var(--border); */
  
  background: #1e293b;
  border: 1px solid #334155;

  border-radius: 8px;

  /* box-shadow: 0 8px 32px rgba(0,0,0,0.5); */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);

  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;

  /* color: #8fa0c4; */
  color: #ccd6f0;

  z-index: 200;
  animation: hud-in 0.15s ease;
}
#hints-hud.hidden {
  display: none;
}
@keyframes hud-in {
  from { opacity: 0; transform: translateY(calc(-50% + 6px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}

.hud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.hud-title {
  font-size: 11px;
  font-weight: 600;
  color: #8fa0c4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hud-close {
  background: none;
  border: none;
  color: #4a5568;
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.1s;
}
.hud-close:hover { color: #8fa0c4; }

.hud-group {
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border);
}
.hud-group:last-child { border-bottom: none; }

.hud-label {
  font-size: 10px;
  font-weight: 600;
  /* color: #4a5568; */
  color: var(--i-col);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.hud-row {
  padding: 2px 0;
  color: #8fa0c4;
  line-height: 1.5;
}

.hud-section {
  padding: 8px 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   10. VIDEO DEMO CENTER WATERMARK
   ══════════════════════════════════════════════════════════════════════════ */
#video-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* Sits cleanly above the infinite canvas flow, but safely under UI controls */
  z-index: 5; 
  
  /* Crucial for screencasts: allows all mouse clicks/drags to pass right through */
  pointer-events: none; 
  
  /* Keeps it beautifully subtle as a backdrop matrix element */
  opacity: 0.30; 
  
  display: flex;
  justify-content: center;
  align-items: center;
}

#video-watermark img {
  /* Scales dynamically based on the width of your recording window */
  width: 35vw; 
  max-width: 450px;
  height: auto;
  display: block;
  
  /* Optional: Adds a slight blend to the dark background grid */
  /* filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)); */
}