:root { --desc-font:11.5px; --desc-heading:13.5px; --desc-title-font:18px; }
* { scrollbar-color:rgba(120,130,140,0.35) transparent; scrollbar-width:thin; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(120,130,140,0.35); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(150,160,170,0.55); }
html, body { height:100%; margin:0; background:#1e1b2e; overflow:hidden; }
.container-fluid { padding:0 !important; margin:0 !important; }
#main-row { display:flex; height:100vh; overflow:hidden; }
/* When the site nav bar is present, the graph area + full-height sidebar sit below it (minus 46px),
   so their bottoms stay on-screen and scrollable. */
body:has(#site-nav) #main-row,
body:has(#site-nav) #info-sidebar,
body:has(#site-nav) #sidebar-resize-handle { height:calc(100vh - 46px); }

/* ── Shared top nav bar (static site; kept in sync with articles/article.css + articles.html) ── */
#site-nav { display:flex; align-items:center; gap:22px; height:46px; padding:0 20px;
  background:#081626; border-bottom:1px solid rgba(255,255,255,0.12);
  font-family:Arial,Helvetica,sans-serif; position:relative; z-index:1000; box-sizing:border-box; }
/* #site-nav-slot: the graph page's header cluster covers this bar, so render.js gives the cluster a slot
   that site-nav.js fills with its own copy of the "Draft/final projects" dropdown — styled the same. */
#site-nav-slot { font-family:Arial,Helvetica,sans-serif; white-space:nowrap; }
#site-nav a, #site-nav-slot a { color:#e8eef4; text-decoration:none; }
#site-nav .nav-brand { font-weight:700; font-size:16px; letter-spacing:0.02em; }
#site-nav .nav-dropdown, #site-nav-slot .nav-dropdown { position:relative; }
#site-nav .nav-dropdown > a, #site-nav-slot .nav-dropdown > a { font-size:14px; opacity:0.92; }
#site-nav .nav-caret, #site-nav-slot .nav-caret { font-size:10px; margin-left:4px; opacity:0.7; }
#site-nav .nav-menu, #site-nav-slot .nav-menu { position:absolute; top:100%; left:0; min-width:260px; background:#081626;
  border:1px solid rgba(255,255,255,0.14); border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,0.35);
  padding:6px 0; display:none; max-height:70vh; overflow-y:auto; }
#site-nav .nav-dropdown:hover .nav-menu, #site-nav .nav-menu:hover,
#site-nav-slot .nav-dropdown:hover .nav-menu, #site-nav-slot .nav-menu:hover { display:block; }
#site-nav .nav-menu a, #site-nav-slot .nav-menu a { display:block; padding:7px 16px; font-size:13.5px; white-space:nowrap; color:#e8eef4; }
#site-nav .nav-menu a:hover, #site-nav-slot .nav-menu a:hover { background:rgba(255,255,255,0.08); }
#site-nav .nav-menu .nav-menu-empty, #site-nav-slot .nav-menu .nav-menu-empty { padding:7px 16px; font-size:13px; color:rgba(232,238,244,0.7); font-style:italic; }
body.light-mode #site-nav { background:#e2eaf3; border-bottom-color:rgba(0,0,0,0.12); }
body.light-mode #site-nav a, body.light-mode #site-nav-slot a { color:#0b2740; }
body.light-mode #site-nav .nav-menu, body.light-mode #site-nav-slot .nav-menu { background:#eef2f8; border-color:rgba(0,0,0,0.14); }
body.light-mode #site-nav .nav-menu a:hover, body.light-mode #site-nav-slot .nav-menu a:hover { background:rgba(0,0,0,0.06); }

/* ── Editable node titles + descriptions (author app inline UI) ── */
body.author-editable .node-title-edit { cursor:text; }
body.author-editable .node-title-edit:hover { background:rgba(255,255,255,0.12); }
.node-title-edit:focus { background:rgba(255,255,255,0.20); box-shadow:0 0 0 1px rgba(255,255,255,0.5); }
body.light-mode .node-title-edit:hover { background:rgba(0,0,0,0.08); }
body.light-mode .node-title-edit:focus { background:rgba(0,0,0,0.12); box-shadow:0 0 0 1px rgba(0,0,0,0.4); }
body.author-editable .inline-node-desc { cursor:text; }
body.author-editable .inline-node-desc:hover { box-shadow:inset 0 0 0 1px rgba(120,180,255,0.4); }
/* On touch devices a finger-drag on the description should scroll the column at the same speed as
   dragging the title — not get slowed by the browser's text-selection. Disable selection there on
   touch only (desktop mouse keeps selectable text). Overrides the inline user-select on the node.
   touch-action:none is the key: without it the browser claims the touch gesture on the text overlay
   (native scroll/selection) before our JS threshold is crossed, so our column-scroll only partially
   drives it and the scroll feels sluggish. Disabling native touch behaviour hands the whole gesture
   to our capture-phase drag handler, matching the empty/canvas areas (Cytoscape sets its own
   touch-action:none on the canvas). Links inside still tap fine (a tap has no drag to consume). */
@media (pointer: coarse) {
  /* The whole inline graph is driven by our own touch handlers (per-column scroll + two-finger pinch),
     so disable ALL native touch gestures inside it. Setting it on #graph-area covers every descendant
     (nodes, titles, descriptions, canvas) — needed for pinch, where one finger often lands on a node
     title (touch-action:auto) and the browser would otherwise claim the gesture as native page-zoom.
     The header controls live outside #graph-area, so they're unaffected. */
  body.inline-mode #graph-area { touch-action:none !important; }
  /* Descendant selectors still disable text selection/callout on the description (touch-action doesn't
     inherit, but the graph-area rule above already handles gestures). */
  .inline-node-desc, .inline-node-desc *,
  .inline-article-body, .inline-article-body * {
    user-select:none !important; -webkit-user-select:none !important;
    -webkit-touch-callout:none; touch-action:none !important; }
}

/* ── "Read full article →" link inside descriptions (inline node + sidebar + mobile) ── */
.article-link { display:inline-block; margin-top:10px; padding:5px 12px; border-radius:6px;
  font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:600; text-decoration:none;
  color:#0b3552; background:#78e6e7; pointer-events:auto !important; cursor:pointer; }
.article-link:hover { background:#8ff0f1; }
/* "Read more in window" — a plain underlined text link matching the "Read more here" toggle (not a pill) */
.inline-article-link { position:relative; z-index:7; color:inherit; font-weight:600;
  text-decoration:underline; opacity:0.9; white-space:nowrap; pointer-events:auto !important; cursor:pointer; }
.inline-article-link:hover { opacity:1; }
body.light-mode .article-link { background:#1a7a7b; color:#eafcff; }

/* Article controls under a node description: "▸ Read here" toggle + external link on one row,
   then the unfolded article body (a capped, self-scrolling region so the node stays a sane height). */
.inline-article-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:10px; }
.inline-article-row .article-link { margin-top:0; }
/* the "Read more" links line up with the description text they follow (render.js descAlign) */
.inline-node-desc[style*="text-align:right"] .inline-article-row { justify-content:flex-end; }
.inline-node-desc[style*="text-align:center"] .inline-article-row { justify-content:center; }
.inline-article-expand { position:relative; z-index:7; pointer-events:auto !important; cursor:pointer;
  user-select:none; -webkit-user-select:none; font-weight:600; text-decoration:underline;
  opacity:0.9; white-space:nowrap; }
.inline-article-expand:hover { opacity:1; }
.inline-article-body { position:relative; z-index:7; pointer-events:auto; margin-top:8px;
  padding:8px 4px 2px; cursor:text;   /* no max-height: the node grows to fit the whole article */
  border-top:1px solid rgba(255,255,255,0.28); }
body.light-mode .inline-article-body { border-top-color:rgba(0,0,0,0.18); }

.col-spacer { width:3vw; flex-shrink:0; }

#info-sidebar {
  width:28.4%; min-width:319px; max-width:739px; flex-shrink:0; height:100vh;
  display:flex; flex-direction:column;
  background:rgba(8,22,38,0.97);
  overflow:hidden; }
#page-title {
  flex-shrink:0; background:#1e1b2e; color:rgba(255,255,255,0.9);
  font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:11px;
  padding:10px 14px 8px; letter-spacing:0.01em;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; flex-direction:column; gap:6px; }
#page-title-text { font-size:20px; line-height:1.25; }
#controls-row { display:flex; gap:6px; align-items:center; }
#sidebar-scroll {
  flex:1; min-height:0; overflow-y:auto;
  padding:4px 4px; box-sizing:border-box; }
#sidebar-hint {
  flex:1; min-height:0;
  color:rgba(150,150,150,0.6); font-family:Arial,Helvetica,sans-serif;
  font-size:2.5vh; font-weight:bold; line-height:1.25;
  display:flex; align-items:center;
  justify-content:center; text-align:center;
  padding:8px; box-sizing:border-box; margin-bottom:0; }
#desc-panel {
  display:none; flex-direction:column;
  flex:1; min-height:0;
  border:1.5px solid var(--col-project, #ffad33); }
#acc-desc > .acc-body {
  max-height:none !important; height:0; overflow:hidden !important;
  display:flex !important; flex-direction:column;
  transition:height 0.3s ease,opacity 0.22s ease,padding 0.22s ease; }
#acc-desc.acc-open > .acc-body { height:13vh; padding:2px 2px 2px !important; }
#acc-desc.desc-visible.acc-open > .acc-body { height:60vh; }
#desc-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:4px 4px 2px 4px; flex-shrink:0;
  border-bottom:1px solid rgba(255,173,51,0.25); }
#desc-title {
  color:var(--col-project, #ffad33); font-family:Arial,Helvetica,sans-serif;
  font-size:var(--desc-title-font); font-weight:bold; line-height:1.3; flex:1; padding-right:8px; }
#desc-close {
  background:none; border:1px solid var(--col-project-dim, rgba(255,173,51,0.4));
  color:var(--col-project, #ffad33); font-size:12px; cursor:pointer;
  padding:1px 6px; flex-shrink:0; line-height:1.4; }
#desc-close:hover { background:var(--col-project-hover, rgba(255,173,51,0.12)); }
#desc-body {
  color:rgba(255,255,255,0.82); font-family:Arial,Helvetica,sans-serif;
  font-size:var(--desc-font); line-height:1.65; padding:6px 6px 4px;
  flex:1; min-height:0; overflow-y:auto; }

#sidebar-resize-handle {
  width:5px; flex-shrink:0; height:100vh; cursor:col-resize; align-self:flex-end;
  background:rgba(180,190,200,0.3); transition:background 0.15s; }
#sidebar-resize-handle:hover,
#sidebar-resize-handle.dragging { background:rgba(180,190,200,0.55); }

#graph-area { flex:1; min-width:0; overflow:hidden;
              background:#0b3552; position:relative; }
#cy { display:block; width:100%; background:#0b3552; pointer-events:auto; }

.col-hdr { position:absolute; pointer-events:none;
  font-family:Arial,Helvetica,sans-serif; line-height:1.2; z-index:10; text-align:center; }
.col-hdr b    { display:block; }
.col-hdr span { display:block; margin-top:2px; }
/* Per-column Open all / Collapse all buttons — right of the title, stacked, colour-matched to the column */
.col-hdr-inner { display:flex; align-items:center; justify-content:center; gap:6px; }
.col-hdr-text  { text-align:center; }
.col-hdr-btns  { display:flex; flex-direction:column; gap:2px; flex:none; pointer-events:auto; }
.col-hdr-btn {
  font-family:Arial,Helvetica,sans-serif; font-weight:bold; white-space:nowrap; cursor:pointer;
  color:inherit; background:rgba(255,255,255,0.10); border:1px solid currentColor;
  border-radius:3px; padding:0 6px; line-height:1.5; }
.col-hdr-btn:hover { background:rgba(255,255,255,0.22); }
body.light-mode .col-hdr-btn { background:rgba(0,0,0,0.06); }
body.light-mode .col-hdr-btn:hover { background:rgba(0,0,0,0.14); }

#vote-section { font-size:var(--desc-font); }
#vote-section a { font-size:var(--desc-font) !important; }
.funding-body { color:rgba(255,255,255,0.8); font-family:Arial,Helvetica,sans-serif;
  font-size:var(--desc-font); line-height:1.6; }

/* ── Accordions ──────────────────────────────────────────────────────── */
.acc-section {
  margin-bottom:5px; border-radius:5px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.09);
  background:rgba(0,0,0,0.18); }
.acc-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 10px; cursor:pointer;
  user-select:none; -webkit-user-select:none;
  background:var(--acc-bg,#0b3552);
  border-left:2.5px solid rgba(255,255,255,0.18);
  transition:background 0.15s,border-color 0.15s; }
.acc-header:hover {
  background:var(--acc-bg-hover,rgba(255,255,255,0.08));
  border-left-color:rgba(255,255,255,0.35); }
.acc-section.acc-open > .acc-header {
  border-left-color:rgba(255,255,255,0.5);
  background:var(--acc-bg,#0b3552); }
.acc-title {
  color:rgba(255,255,255,0.88); font-family:Arial,Helvetica,sans-serif;
  font-size:14.5px; font-weight:bold; letter-spacing:0.2px; flex:1; }
.acc-arrow {
  color:rgba(255,255,255,0.45); font-size:9px;
  transition:transform 0.22s ease; transform:rotate(-90deg);
  margin-left:6px; display:inline-block; line-height:1; }
.acc-section.acc-open > .acc-header .acc-arrow {
  transform:rotate(0deg); color:rgba(255,255,255,0.7); }
.acc-body {
  overflow:hidden; max-height:0; padding:0 10px; opacity:0;
  transition:max-height 0.3s ease,padding 0.22s ease,opacity 0.22s ease; }
.acc-section.acc-open > .acc-body {
  padding:8px 10px 10px; opacity:1; }

/* ── Mobile bottom sheet ─────────────────────────────────────────────── */
#mobile-bottom-sheet {
  display:none; position:fixed; bottom:0; left:0; right:0;
  max-height:50vh; background:rgba(8,22,38,0.97);
  border-top:2px solid var(--col-project, #ffad33);
  flex-direction:column; z-index:100;
  transform:translateY(100%); transition:transform 0.25s ease-out; }
#mobile-bottom-sheet.visible { transform:translateY(0); }
#mobile-bs-grab {
  flex-shrink:0; height:20px; cursor:ns-resize;
  display:flex; align-items:center; justify-content:center; }
#mobile-bs-grab::after {
  content:''; width:36px; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.3); }
#mobile-bs-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:0 14px 6px; flex-shrink:0;
  border-bottom:1px solid var(--col-project-dim2, rgba(255,173,51,0.25)); }
#mobile-bs-title {
  color:var(--col-project, #ffad33); font-family:Arial,Helvetica,sans-serif;
  font-size:17px; font-weight:bold; line-height:1.3; flex:1; padding-right:10px; }
#mobile-bs-close {
  background:none; border:1px solid var(--col-project-dim, rgba(255,173,51,0.4));
  color:var(--col-project, #ffad33); font-size:16px; cursor:pointer;
  padding:2px 8px; flex-shrink:0; line-height:1.4;
  min-width:32px; min-height:32px; text-align:center; }
#mobile-bs-body {
  flex:1; min-height:0; overflow-y:auto;
  color:rgba(255,255,255,0.82); font-family:Arial,Helvetica,sans-serif;
  font-size:14px; line-height:1.65; padding:10px 14px 16px; }
#mobile-info-btn {
  display:none; position:fixed; bottom:12px; right:12px; z-index:99;
  background:rgba(8,22,38,0.9); border:1.5px solid #78e6e7;
  color:#78e6e7; font-family:Arial,Helvetica,sans-serif;
  font-size:13px; font-weight:bold; padding:8px 16px;
  border-radius:20px; cursor:pointer;
  min-width:44px; min-height:44px; }

/* ── Language toggle ────────────────────────────────────────────────── */
#mode-btn {
  background:none; border:1px solid rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.6); font-size:14px;
  cursor:pointer; padding:1px 6px; border-radius:3px;
  font-family:Arial,Helvetica,sans-serif; transition:all 0.15s;
  line-height:1.4; }
#mode-btn:hover { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.9); }
.lang-btn {
  background:none; border:1px solid rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.5); font-size:16px; font-weight:bold;
  cursor:pointer; padding:1px 5px; border-radius:3px;
  font-family:Arial,Helvetica,sans-serif; transition:all 0.15s;
  line-height:1.4; }
.lang-btn.lang-active { color:rgba(255,255,255,0.9); border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.1); }
.lang-btn:not(.lang-active) { opacity:0.45; }
#github-btn {
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.45); border:1px solid rgba(255,255,255,0.22);
  border-radius:3px; padding:2px 5px; text-decoration:none;
  transition:all 0.15s; margin-left:auto; }
#github-btn:hover { color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.1); }
#github-btn svg { fill:currentColor; }
.fi-only { display:none !important; }
body.lang-fi .en-only { display:none !important; }
body.lang-fi .fi-only { display:block !important; }
body.lang-fi span.fi-only, body.lang-fi b.fi-only, body.lang-fi a.fi-only { display:inline !important; }

/* ── Mobile overrides ────────────────────────────────────────────────── */
@media (max-width: 1499px) and (min-width: 769px) and (min-height: 501px) {
  .col-spacer { display:none; }
}
@media (max-width: 768px), (max-height: 500px) and (max-width: 1100px) {
  html, body { overflow:hidden; height:100dvh; }
  #main-row { height:100dvh; overflow:hidden; }
  .col-spacer { display:none; }
  #sidebar-resize-handle { display:none; }
  #cy { pointer-events:auto; }
  #mobile-bottom-sheet { display:none !important; }
  #mobile-info-btn { display:none !important; }
  #mobile-top-zone { position:absolute; top:0; left:0; right:0; height:55px; z-index:20; }
  /* Old, separate mobile layout — only when the unified inline UI is switched off. */
  body:not(.unified-ui) #main-row { flex-direction:column; }
  body:not(.unified-ui) #info-sidebar { display:none; }
  body:not(.unified-ui) #graph-area { width:100%; flex:none; height:55dvh; overflow:hidden; position:relative; }
  body:not(.unified-ui) #mob-handle { display:flex; }
  body:not(.unified-ui) #mob-panel { display:flex; padding-bottom:env(safe-area-inset-bottom, 0px); }
  /* Unified inline UI on a narrow screen: full-height graph, same as desktop inline. */
  body.unified-ui #graph-area { width:100%; height:100dvh; overflow:hidden; position:relative; }
  /* On mobile (narrow) hide only the page TITLE TEXT to free header space; the language flags and
     other controls live in the same #page-title container and must stay visible. */
  body.unified-ui #page-title-text { display:none !important; }
}
/* Unified UI: the old mobile chrome never appears, at any width. */
body.unified-ui #mob-handle,
body.unified-ui #mob-panel,
body.unified-ui #mobile-bottom-sheet,
body.unified-ui #mobile-info-btn { display:none !important; }

/* ── Mobile split panel ──────────────────────────────────────────────── */
#mob-handle {
  display:none; flex:none; height:16px; width:100%;
  cursor:ns-resize; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.25); z-index:10; }
#mob-handle::after {
  content:''; width:40px; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.3); }
#mob-panel {
  display:none; flex:1; min-height:0; flex-direction:column;
  background:rgba(8,22,38,0.97); overflow:hidden; position:relative; }
#mob-tab-bar {
  flex:none; display:flex;
  border-bottom:1px solid rgba(255,255,255,0.1); }
.mob-tab {
  flex:1; background:none; border:none;
  border-bottom:2px solid transparent;
  color:rgba(255,255,255,0.5);
  font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:bold;
  padding:9px 4px 8px; cursor:pointer;
  transition:color 0.15s,border-color 0.15s; }
.mob-tab.mob-tab-active {
  color:rgba(255,255,255,0.9);
  border-bottom-color:var(--col-skill, #78e6e7); }
#mob-tab-content { flex:1; min-height:0; overflow-y:auto; }
.mob-tab-pane {
  display:none; padding:10px 14px 16px;
  color:rgba(255,255,255,0.82); font-family:Arial,Helvetica,sans-serif;
  font-size:14px; line-height:1.65; }
.mob-tab-pane.mob-tab-pane-active { display:block; }
#mob-desc-panel {
  display:none; flex-direction:column;
  position:absolute; inset:0;
  background:rgba(8,22,38,0.97); z-index:5; overflow:hidden; }
#mob-desc-panel.mob-desc-visible { display:flex; }
#mob-desc-header {
  flex:none; display:flex; justify-content:space-between; align-items:flex-start;
  padding:9px 14px 6px;
  border-bottom:1px solid var(--col-project-dim2, rgba(255,173,51,0.25)); }
#mob-desc-title {
  color:var(--col-project, #ffad33); font-family:Arial,Helvetica,sans-serif;
  font-size:17px; font-weight:bold; line-height:1.3; flex:1; padding-right:10px; }
#mob-desc-close {
  background:none; border:1px solid var(--col-project-dim, rgba(255,173,51,0.4));
  color:var(--col-project, #ffad33); font-size:16px; cursor:pointer;
  padding:2px 8px; flex:none; line-height:1.4; min-width:32px; min-height:32px; text-align:center; }
#mob-desc-body {
  flex:1; min-height:0; overflow-y:auto;
  color:rgba(255,255,255,0.82); font-family:Arial,Helvetica,sans-serif;
  font-size:14px; line-height:1.65; padding:10px 14px 16px; }

/* ── Light mode overrides ─────────────────────────────────────────────── */
body.light-mode #page-title { color:rgba(0,0,0,0.82); }
body.light-mode .acc-title  { color:rgba(0,0,0,0.82) !important; }
body.light-mode .acc-arrow  { color:rgba(0,0,0,0.4)  !important; }
body.light-mode .acc-section { border-color:rgba(0,0,0,0.10); background:rgba(0,0,0,0.04); }
body.light-mode .acc-header { border-left-color:rgba(0,0,0,0.18); }
body.light-mode .acc-section.acc-open > .acc-header { border-left-color:rgba(0,0,0,0.4); }
body.light-mode #sidebar-hint { color:rgba(0,0,0,0.35) !important; }
body.light-mode #desc-body  { color:rgba(0,0,0,0.82) !important; }
body.light-mode #desc-body h3,
body.light-mode #desc-body h4,
body.light-mode #desc-body h5,
body.light-mode #desc-body h6 { color:rgba(0,0,0,0.82) !important; }
body.light-mode .funding-body { color:rgba(0,0,0,0.75) !important; }
body.light-mode #vote-section,
body.light-mode #vote-section div,
body.light-mode #vote-section a { color:rgba(0,0,0,0.8) !important; }
body.light-mode #acc-about .acc-body,
body.light-mode #acc-about .acc-body div { color:rgba(0,0,0,0.8) !important; }
body.light-mode .lang-btn { border-color:rgba(0,0,0,0.2) !important; color:rgba(0,0,0,0.5) !important; }
body.light-mode .lang-btn.lang-active { color:rgba(0,0,0,0.85) !important; border-color:rgba(0,0,0,0.55) !important; background:rgba(0,0,0,0.07) !important; }
body.light-mode #mode-btn { border-color:rgba(0,0,0,0.2) !important; color:rgba(0,0,0,0.55) !important; }
body.light-mode #mode-btn:hover { background:rgba(0,0,0,0.07) !important; }
body.light-mode #site-url-label { color:rgba(0,0,0,0.8) !important; }
body.light-mode #github-btn { border-color:rgba(0,0,0,0.2) !important; color:rgba(0,0,0,0.4) !important; }
body.light-mode #github-btn:hover { background:rgba(0,0,0,0.07) !important; color:rgba(0,0,0,0.7) !important; }
body.light-mode #sidebar-resize-handle { background:rgba(0,0,0,0.15); }
body.light-mode #mobile-bottom-sheet { background:rgba(220,232,245,0.97); }
body.light-mode #mobile-bs-body { color:rgba(0,0,0,0.82) !important; }
body.light-mode #mob-panel { background:rgba(220,232,245,0.97); }
body.light-mode #mob-desc-panel { background:rgba(220,232,245,0.97); }
body.light-mode .mob-tab { color:rgba(0,0,0,0.45); }
body.light-mode .mob-tab.mob-tab-active { color:rgba(0,0,0,0.85); }
body.light-mode .mob-tab-pane,
body.light-mode .mob-tab-pane div { color:rgba(0,0,0,0.8) !important; }
body.light-mode #mob-desc-body { color:rgba(0,0,0,0.82) !important; }
body.light-mode #mob-handle { background:rgba(0,0,0,0.12); }
body.light-mode #mob-handle::after { background:rgba(0,0,0,0.25); }

/* ── Inline UI mode (experimental) ──────────────────────────────────────── */
#inline-sidebar-btn { display:none; }
body.inline-mode #inline-sidebar-btn {
  display:block; position:fixed; top:10px; left:10px; z-index:1000;
  background:rgba(8,22,38,0.92); color:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,0.25); border-radius:6px;
  font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:bold;
  padding:6px 12px; cursor:pointer; }
body.inline-mode #inline-sidebar-btn:hover { background:rgba(20,40,60,0.96); }
/* Info sidebar becomes a compact controls box pinned to the top-right of the graph area.
   Site info now lives in the "About" nodes, so this box only holds the title + controls. */
body.inline-mode #info-sidebar {
  position:fixed !important; top:8px !important; right:8px !important; left:auto !important;
  width:auto !important; min-width:0 !important; max-width:min(340px,44vw) !important;
  height:auto !important; max-height:none !important;
  z-index:1000; background:transparent; overflow:visible;
  border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.4); }
body.inline-mode #info-sidebar #page-title {
  border-radius:8px; border-bottom:none; padding:8px 12px 8px;
  background:rgba(8,22,38,0.92); }
body.inline-mode #info-sidebar #page-title-text { font-size:15px; }
/* Header cluster spanning the bar: title/controls on the LEFT, zoom + Open/Collapse on the RIGHT. */
body.inline-mode #inline-header-right {
  position:fixed; top:0; left:0; right:0; min-height:46px; z-index:1001;
  display:flex; align-items:center; flex-wrap:wrap; column-gap:16px; row-gap:4px;
  align-content:center; padding:3px 10px; box-sizing:border-box;
  /* full width with the bar's own colour (render.js applyTopBarColor), so when the cluster wraps onto a
     second row the top bar visibly extends down with it instead of the second row floating on the map */
  border-bottom:1px solid rgba(255,255,255,0.12); }
body.light-mode.inline-mode #inline-header-right { border-bottom-color:rgba(0,0,0,0.12); }
/* Column-button strip: the last row of the top bar (render.js ensureColumnButtonStrip), holding each
   column's Open all / Close all centred over the column. It carries the bar's bottom line instead. */
body.inline-mode #col-btn-strip {
  position:fixed; left:0; right:0; z-index:1001; height:36px; box-sizing:border-box;
  border-bottom:1px solid rgba(255,255,255,0.12); }
body.light-mode.inline-mode #col-btn-strip { border-bottom-color:rgba(0,0,0,0.12); }
body.inline-mode.col-strip-on #inline-header-right { border-bottom-color:transparent; }
#col-btn-strip .col-btn-pair { position:absolute; top:50%; transform:translate(-50%, -50%); display:flex; gap:8px; white-space:nowrap; }
/* 1.5x the old 11px buttons; outline as on the bar's own Open all / Close all (.inline-allbtn), text
   still in the column's colour */
#col-btn-strip .col-hdr-btn { font-size:16.5px; padding:1px 9px; line-height:1.5;
  border:1px solid rgba(255,255,255,0.25); border-radius:5px; }
body.light-mode #col-btn-strip .col-hdr-btn { border-color:rgba(0,0,0,0.25); }
/* Right cluster starts at the description-size control (leftmost right-aligned item), so the font
   control and zoom sit together, next to each other, pushed to the right of the bar. */
body.inline-mode #inline-header-right #inline-descfont { margin-left:auto; }
/* Graph page: the nav brand ("Interests") stays hidden (desktop AND mobile — mobile is never .inline-mode).
   The "Draft/final projects" dropdown shows: in inline mode the header cluster covers the bar, so the
   cluster's own copy (#site-nav-slot, next to the title/controls) is the one shown and the bar's is hidden;
   otherwise the bar's own dropdown shows. Article pages keep their full bar. */
body:has(#graph-area) #site-nav .nav-brand { display:none !important; }
body.inline-mode:has(#graph-area) #site-nav .nav-dropdown { display:none !important; }
body:not(.inline-mode) #site-nav-slot { display:none !important; }
body.inline-mode #inline-header-right #inline-allbtns {
  position:static; transform:none; top:auto; left:auto; right:auto; height:auto; gap:2px; }
/* Open all / Close all side by side when the bar has room, stacked when it doesn't: the toolbar is a
   wrapping row that starts at its narrowest (one button wide), may grow into free space up to both
   buttons' width, and wraps the second button below the first whenever it can't get that width. */
body.inline-mode #inline-header-right #inline-allbtns {
  flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:center;
  flex:1 1 min-content; max-width:max-content; gap:2px 4px; }
body.inline-mode #inline-header-right #info-sidebar {
  position:static !important; top:auto !important; right:auto !important; left:auto !important;
  height:auto !important; max-width:none !important; box-shadow:none !important; border-radius:0 !important; }
body.inline-mode #inline-header-right #info-sidebar #page-title {
  flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; row-gap:4px;
  padding:0; background:transparent !important; border-radius:0; }
/* The header bar is ONE colour (the nav bar's): applyColors() paints #page-title with the graph
   background and #info-sidebar with the sidebar colour as inline styles, which would show as a
   differently coloured block behind the title/flags inside the bar — hence the !important. */
body.inline-mode #inline-header-right #info-sidebar { background:transparent !important; }
body.inline-mode #inline-header-right #info-sidebar #page-title-text { font-size:13px; white-space:nowrap; }
body.inline-mode #inline-header-right .inline-allbtn { font-size:10.5px; padding:2px 6px; }
body.inline-mode #inline-header-right .inline-btnlbl { font-size:10px; min-width:42px; }
body.inline-mode #sidebar-scroll { display:none !important; }
body.inline-mode #sidebar-resize-handle { display:none; }
/* Graph fills the whole row */
body.inline-mode #graph-area { width:100%; flex:1 1 100%; overflow:hidden; }
/* Links inside in-node descriptions are clickable (rest of the node stays click-through to toggle) */
.inline-node-desc a { pointer-events:auto !important; cursor:pointer; }
body.light-mode.inline-mode #inline-sidebar-btn {
  background:rgba(226,234,243,0.95); color:rgba(0,0,0,0.8); border-color:rgba(0,0,0,0.25); }
/* Open all / Collapse all (per-column) controls (inline UI) */
#inline-allbtns { display:none; }
body.inline-mode #inline-allbtns { display:flex; flex-direction:column; gap:4px;
  position:fixed; top:8px; left:12px; z-index:1001; align-items:flex-start; }
body.inline-mode .inline-btnrow { display:flex; gap:4px; align-items:center; }
body.inline-mode .inline-btnlbl {
  color:rgba(255,255,255,0.75); font-family:Arial,Helvetica,sans-serif; font-size:11px;
  font-weight:bold; min-width:52px; text-align:right; margin-right:2px; }
body.inline-mode .inline-allbtn {
  background:rgba(8,22,38,0.92); color:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,0.25); border-radius:5px;
  font-family:Arial,Helvetica,sans-serif; font-size:11.5px; font-weight:bold;
  padding:3px 8px; cursor:pointer; }
body.inline-mode .inline-allbtn:hover { background:rgba(20,40,60,0.96); }
body.light-mode.inline-mode .inline-btnlbl { color:rgba(0,0,0,0.6); }
body.light-mode.inline-mode .inline-allbtn {
  background:rgba(226,234,243,0.95); color:rgba(0,0,0,0.8); border-color:rgba(0,0,0,0.25); }
/* Touch devices: the header controls are finger targets, so enlarge Open all / Close all (they were
   shrunk to 10.5px for the desktop header cluster) and the zoom / font-size buttons. Placed after the
   base rules so it wins at equal specificity. */
@media (pointer: coarse) {
  body.inline-mode #inline-header-right .inline-allbtn,
  body.inline-mode .inline-allbtn { font-size:15px; padding:8px 14px; border-radius:7px; }
  body.inline-mode .inline-zoombtn { width:34px; height:34px; font-size:18px; }
  body.inline-mode #inline-zoom-pct, body.inline-mode #inline-descfont-val { font-size:13px; }
}
/* Mobile (narrow): keep the whole header on ONE row. Hide the site address (GitHub link + light-mode
   toggle stay); tighten gaps and shrink the zoom/font controls so everything fits. Placed after the
   coarse-pointer block so these compact sizes win. If the row is still wider than the screen it scrolls
   sideways rather than wrapping. */
@media (max-width: 768px), (max-height: 500px) and (max-width: 1100px) {
  body.unified-ui #site-url-label { display:none !important; }
  body.unified-ui #inline-header-right {
    flex-wrap:nowrap; overflow-x:auto; column-gap:6px; left:0; right:0; padding-left:6px; padding-right:6px;
    -ms-overflow-style:none; scrollbar-width:none; }
  body.unified-ui #inline-header-right::-webkit-scrollbar { display:none; }
  body.unified-ui #inline-header-right > * { flex:none; }
  body.unified-ui #inline-header-right #info-sidebar #page-title { gap:5px; flex-wrap:nowrap; }
  body.unified-ui #controls-row { gap:5px; }
  body.unified-ui .lang-btn { padding:0 2px; font-size:15px; }
  /* Zoom buttons are removed on mobile (pinch-to-zoom still works) to free header space. */
  body.unified-ui #inline-zoom { display:none !important; }
  body.unified-ui #inline-descfont { gap:2px; }
  body.unified-ui .inline-zoombtn { width:27px; height:27px; font-size:15px; }
  body.unified-ui #inline-descfont-val { min-width:30px; font-size:11px; }
  body.unified-ui #inline-header-right .inline-allbtn { font-size:12px; padding:6px 9px; }
  /* Open all / Close all side by side (not stacked) so they don't eat vertical header space. */
  body.unified-ui #inline-allbtns { flex-direction:row; gap:4px; }
  /* the one-row mobile bar scrolls sideways instead, so keep the pair side by side there */
  body.unified-ui #inline-header-right #inline-allbtns { flex:none; flex-wrap:nowrap; max-width:none; }
}
/* Zoom control (−  100%  +  ⤢) — sits in the header cluster; pinch / Ctrl+wheel also zoom */
#inline-zoom { display:none; }
body.inline-mode #inline-zoom { display:flex; align-items:center; gap:3px; }
body.inline-mode .inline-zoombtn {
  background:rgba(8,22,38,0.92); color:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,0.25); border-radius:5px;
  font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:bold; line-height:1;
  width:22px; height:22px; padding:0; cursor:pointer; }
body.inline-mode .inline-zoombtn:hover { background:rgba(20,40,60,0.96); }
body.inline-mode #inline-zoom-pct {
  color:rgba(255,255,255,0.8); font-family:Arial,Helvetica,sans-serif; font-size:10.5px;
  font-weight:bold; min-width:34px; text-align:center; }
body.light-mode.inline-mode .inline-zoombtn {
  background:rgba(226,234,243,0.95); color:rgba(0,0,0,0.8); border-color:rgba(0,0,0,0.25); }
body.light-mode.inline-mode #inline-zoom-pct { color:rgba(0,0,0,0.6); }

/* Description text-size control (A− / A+), styled like the zoom cluster, sitting next to it. */
#inline-descfont { display:none; }
body.inline-mode #inline-descfont { display:flex; align-items:center; gap:3px; }
body.inline-mode #inline-descfont-val {
  color:rgba(255,255,255,0.8); font-family:Arial,Helvetica,sans-serif; font-size:10.5px;
  font-weight:bold; min-width:34px; text-align:center; }
body.inline-mode .inline-descfont-sm { font-size:10px; }   /* small A = shrink */
body.inline-mode .inline-descfont-lg { font-size:15px; }   /* big A = grow */
body.light-mode.inline-mode #inline-descfont-val { color:rgba(0,0,0,0.6); }