/* Portfolio skin over the KB tool. Loaded last; overrides tokens only. */

:root {
  --bg: #0c0c0b;
  --pan: #171716;
  --pan2: #232322;
  --ink: #f2f1ec;
  --mut: #a5a49d;
  --acc: #7c9bff;
  --line: rgba(165, 164, 157, 0.25);

  --node-apparatus: #9fb2c8;
  --node-evidence: #4cc9ff;
  --node-consensus: #a06bff;
  --node-construct: #4fd6ac;
  --node-lens: #ffc46a;
  --node-thesis: #e0567a;
  --node-default: #8a8983;

  --edge-derived-from: #8a8983;
  --edge-supports: #4fd6ac;
  --edge-contradicts: #ff6b6b;
  --edge-critiques: #ff6b6b;
  --edge-reinterprets: #7c9bff;
  --edge-rests-on: #8a8983;
  --edge-extends: #4fd6ac;
  --edge-weakens: #e0567a;
  --edge-strengthens: #4fd6ac;
  --edge-threatens: #ff9a66;
  --edge-kin: #6b6a64;
  --edge-converges-with: #57cfa0;
  --edge-in-tension-with: #ff9a66;
  --edge-qualifies: #9aa0aa;
  --edge-evaluates: #a06bff;
  --edge-default: #6b6a64;
  --edge-warn: #ff6b6b;
}

body.light {
  --bg: #fafaf8;
  --pan: #f1f0ec;
  --pan2: #e8e7e2;
  --ink: #111110;
  --mut: #55544f;
  --acc: #4763b8;
  --line: rgba(85, 84, 79, 0.25);
}

body {
  font-family: "Instrument Sans", "Inter", sans-serif !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
}

.msym {
  font-family: "Material Symbols Outlined" !important;
}

#md h1, #md h2, #md h3 {
  font-family: "Instrument Sans", sans-serif !important;
  font-weight: 600 !important;
}

.topbar a.icon-btn {
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Align the tool's FAB + legend to the site toggle's vertical axis (icon centers at 39px from edge) */
.fab { right: 11px; }
.legendpop { right: 11px; }

#theme { display: none !important; }

::view-transition-old(root) { z-index: 2; animation: none; }
::view-transition-new(root) { z-index: 1; animation: none; }

/* Dropdown: equal row heights (checkmark glyph was inflating the selected row) */
.viewdd-opt { line-height: 20px; }
.viewdd-opt.on::after { line-height: 1; font-size: 18px; }

/* Hidden views: Phase 0 + after-IDC */
.viewdd-opt[data-v="ccm"], .viewdd-opt[data-v="ccpi"] { display: none; }

/* Glassmorphic cards */
.topbar, .viewdd-menu, #detail, .legendpop {
  background: rgba(23, 23, 22, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(242, 241, 236, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
body.light .topbar, body.light .viewdd-menu, body.light #detail, body.light .legendpop {
  background: rgba(250, 250, 248, 0.55);
  border: 1px solid rgba(17, 17, 16, 0.10);
  box-shadow: 0 8px 32px rgba(17, 17, 16, 0.12);
}

/* Fix: topbar glass moved to ::before so the dropdown (its descendant)
   can blur the page behind it — an element with backdrop-filter becomes
   the backdrop root for its children. */
.topbar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(23, 23, 22, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
body.light .topbar { background: transparent; }
body.light .topbar::before { background: rgba(250, 250, 248, 0.55); }

/* Corner theme toggle: same hover treatment as topbar icon buttons */
.kb-corner {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--mut);
  transition: background .15s ease, color .15s ease, right .35s ease;
}
.kb-corner:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}

/* Legend FAB: circular glass */
.fab {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(23, 23, 22, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(242, 241, 236, 0.12);
  color: var(--ink);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.fab:hover { background: rgba(242, 241, 236, 0.10); }
body.light .fab {
  background: rgba(250, 250, 248, 0.55);
  border-color: rgba(17, 17, 16, 0.10);
  box-shadow: 0 8px 32px rgba(17, 17, 16, 0.12);
}
body.light .fab:hover { background: rgba(17, 17, 16, 0.08); }

/* Legend FAB active state: keep the glass, accent the icon (matches topbar .icon-btn.on) */
.fab.on {
  background: rgba(23, 23, 22, 0.58);
  color: var(--acc);
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
}
body.light .fab.on {
  background: rgba(250, 250, 248, 0.55);
  color: var(--acc);
}

/* Panel header: glass like its panel, not a solid slab */
#detail .hd {
  background: rgba(23, 23, 22, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body.light #detail .hd { background: rgba(250, 250, 248, 0.55); }
#detail .pill { font-weight: 600; }

/* Fix: #detail loses its backdrop-filter (it made the panel a backdrop root,
   killing the sticky header's blur). The panel glass is painted by an
   #app::after layer with identical geometry, sitting just beneath it. */
#detail {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#app:has(#detail:not(.hidden))::after {
  content: "";
  position: absolute;
  right: 8px; top: 8px; bottom: 8px;
  width: 412px;
  border-radius: var(--r-7);
  background: rgba(23, 23, 22, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  z-index: 4;
  pointer-events: none;
}
body.light #app:has(#detail:not(.hidden))::after {
  background: rgba(250, 250, 248, 0.55);
  box-shadow: 0 8px 32px rgba(17, 17, 16, 0.12);
}

/* Inline code chips + relation counters: translucent ink wash instead of solid pan2 */
#md code, .rel .cnt {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

/* Progressive-depth: refresh + frontier controls retired */
#frontierToggle, #reload, .topbar .sep { display: none !important; }

/* Topbar: no card — controls float like everywhere else on the site */
.topbar { background: transparent; border: none; box-shadow: none; }
.topbar::before { display: none; }
body.light .topbar { background: transparent; border: none; box-shadow: none; }

/* Tooltips (same treatment as the main site) */
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--ink);
  color: var(--bg);
  font-family: "Instrument Sans", sans-serif;
  font-size: 12px;
  line-height: 1.3;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 70;
}
[data-tip]:hover::after { opacity: 1; transition-delay: 0.25s; }