:root{
  --paper:#f3f6f8;
  --paper2:#f8fafb;
  --ink:#111820;
  --muted:#66717c;
  --line:#aeb8c0;
  --line-soft:#d5dce1;
  --line-faint:#e5eaee;
  --wash:#e8eef2;
  --accent:#712CB2;
  --accent-soft:rgba(113,44,178,.10);
  --font-min:.875rem;
}

[hidden]{display:none !important}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size:16px;
}

body{
  height:100vh;
  overflow:hidden;
}

button,input{font:inherit;color:inherit}
button{cursor:pointer}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ---------- HEADER ---------- */

.topbar{
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 1rem;
  border-bottom:1px solid var(--line);
  background:rgba(243,246,248,.96);
  backdrop-filter:blur(10px);
}

.brand{
  border:0;
  background:none;
  padding:0;
  font-size:var(--font-min);
  color:var(--ink);
  font-weight:700;
  letter-spacing:.16em;
  text-decoration:none;
}

.header-tools{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.view-toggle{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.45);
}

.toggle,
.tool-button{
  min-height:34px;
  border:0;
  background:transparent;
  padding:.35rem .7rem;
  font-size:var(--font-min);
}

.toggle + .toggle{border-left:1px solid var(--line)}

.toggle.active{
  background:var(--ink);
  color:var(--paper2);
}

.tool-button{
  border:1px solid var(--line);
}

.tool-button[aria-pressed="true"]{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-soft);
}

.search-wrap input{
  width:220px;
  min-height:34px;
  border:0;
  border-bottom:1px solid var(--line);
  outline:0;
  background:transparent;
  padding:.35rem .15rem;
  font-size:var(--font-min);
}

.search-wrap input:focus{border-bottom-color:var(--accent)}

/* ---------- CANVAS ---------- */

.canvas{
  position:relative;
  height:calc(100vh - 54px);
  min-height:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(36,87,255,.035), transparent 20rem),
    linear-gradient(rgba(17,24,32,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,24,32,.025) 1px,transparent 1px),
    var(--paper2);
  background-size:auto, 32px 32px, 32px 32px, auto;
}

.canvas::before,
.canvas::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border:1px solid rgba(17,24,32,.045);
  border-radius:50%;
  z-index:0;
}
.canvas::before{
  width:46vw;height:46vw;
  left:-18vw;top:9vh;
}
.canvas::after{
  width:30vw;height:30vw;
  right:-8vw;bottom:-12vw;
}

.map-view,.graph-view{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}

.map-view:not([hidden]){display:grid}
.graph-view:not([hidden]){display:block}

/* ---------- MAP / CARTOGRAPHY ---------- */

.map-view{
  grid-template-columns:58fr 42fr;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
}

.question{
  min-width:0;
  min-height:0;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(248,250,251,.58);
}

.question::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.32),transparent 38%);
}

.question.selected>.question-head{
  background:var(--accent-soft);
  box-shadow:inset 3px 0 0 var(--accent);
}

.question.is-open>.question-head{
  border-bottom:1px solid var(--line);
}

.question-head{
  flex:0 0 auto;
  min-height:74px;
  padding:.8rem .9rem .72rem;
  cursor:default;
  position:relative;
  z-index:1;
}

.question-title{
  margin:0;
  max-width:26ch;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1rem,1.45vw,1.55rem);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-.02em;
}

.question-summary{
  margin:.42rem 0 0;
  max-width:60ch;
  color:var(--muted);
  font-size:var(--font-min);
  line-height:1.35;
}

.question-depth{
  position:absolute;
  top:.72rem;
  right:.72rem;
  color:var(--muted);
  font-size:var(--font-min);
  font-family:"Courier New",monospace;
}

.question-depth::before{
  content:"L";
  color:var(--accent);
  margin-right:.15rem;
}

.question-body{
  flex:1 1 auto;
  min-height:0;
  position:relative;
  z-index:1;
}

.question-preview{
  height:100%;
  display:flex;
  align-items:flex-end;
  padding:.72rem .9rem;
}

.objects{
  display:flex;
  flex-wrap:wrap;
  gap:.42rem .8rem;
}

.object{
  border:0;
  border-bottom:1px solid var(--line-soft);
  background:transparent;
  padding:.2rem 0;
  text-align:left;
  font-family:Georgia,"Times New Roman",serif;
  font-size:var(--font-min);
}

.object:hover{
  border-bottom-color:var(--accent);
  color:var(--accent);
}

.object span{
  margin-right:.45rem;
  font-family:"Courier New",monospace;
  font-size:var(--font-min);
  color:var(--muted);
  text-transform:uppercase;
}

.child-grid{
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  background:rgba(248,250,251,.44);
}

.child-grid.one{grid-template-columns:1fr}
.child-grid.two{grid-template-columns:1fr 1fr}
.child-grid.three{
  grid-template-columns:1.05fr .95fr;
  grid-template-rows:1fr 1fr;
}
.child-grid.three>.question:first-child{grid-row:1/3}
.child-grid.four{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
}
.child-grid.many{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
}

.question.compact>.question-head{
  min-height:56px;
  padding:.6rem .68rem;
}

.question.compact>.question-head .question-title{
  font-size:var(--font-min);
  line-height:1.14;
  max-width:30ch;
}

.question.compact>.question-head .question-summary{display:none}
.question.compact>.question-head .question-depth{top:.5rem;right:.5rem}
.question.compact>.question-body .question-preview{padding:.55rem .68rem}

/* Deep levels become cartographic rails instead of consuming vertical space. */
.question.rail-mode{
  flex-direction:row;
}

.question.rail-mode>.question-head{
  flex:0 0 54px;
  width:54px;
  min-height:0;
  height:100%;
  padding:.55rem .35rem;
  border-right:1px solid var(--line);
  border-bottom:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:rgba(232,238,242,.46);
}

.question.rail-mode.is-open>.question-head{border-bottom:0}

.question.rail-mode>.question-head .question-title{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  max-width:none;
  max-height:100%;
  overflow:hidden;
  font-size:var(--font-min);
  line-height:1.12;
  letter-spacing:0;
}

.question.rail-mode>.question-head .question-summary,
.question.rail-mode>.question-head .question-depth{display:none}

.question.rail-mode>.question-body{
  flex:1 1 auto;
  width:auto;
  height:100%;
}

.question.rail-tight>.question-head{
  flex-basis:42px;
  width:42px;
  padding:.45rem .28rem;
}

.question.rail-mode.selected>.question-head{
  background:var(--accent-soft);
  box-shadow:inset -3px 0 0 var(--accent);
}

/* ---------- SEARCH ---------- */

.search-panel{
  position:absolute;
  z-index:60;
  top:.65rem;
  right:1rem;
  width:min(480px,calc(100vw - 2rem));
  max-height:66vh;
  overflow:auto;
  border:1px solid var(--line);
  background:rgba(248,250,251,.98);
  box-shadow:0 18px 45px rgba(17,24,32,.10);
}

.search-result{
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line-soft);
  background:transparent;
  padding:.72rem .8rem;
  text-align:left;
}

.search-result:last-child{border-bottom:0}
.search-result:hover{background:var(--accent-soft)}

.search-result strong,
.search-result span{
  display:block;
  font-size:var(--font-min);
}

.search-result strong{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}

.search-result span{
  margin-top:.22rem;
  color:var(--muted);
  font-family:"Courier New",monospace;
}

.search-empty{
  padding:1rem;
  font-size:var(--font-min);
  color:var(--muted);
}

/* ---------- GRAPH ---------- */

.graph-view{
  overflow:hidden;
}

.graph-stage{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  cursor:grab;
  background:
    radial-gradient(circle at 48% 52%, rgba(36,87,255,.035), transparent 30rem),
    linear-gradient(rgba(17,24,32,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,24,32,.025) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px;
}

.graph-stage.is-panning{cursor:grabbing}

.graph-svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  user-select:none;
}

.graph-world{
  transform-origin:0 0;
}

.graph-edge{
  stroke:rgba(102,113,124,.58);
  stroke-width:1.1;
  fill:none;
}

.graph-edge.source-edge{
  stroke:rgba(36,87,255,.28);
  stroke-dasharray:3 4;
}

.graph-node{cursor:grab}
.graph-node.dragging{cursor:grabbing}

.graph-node rect{
  fill:rgba(248,250,251,.96);
  stroke:var(--line);
  stroke-width:1.1;
}

.graph-node.question-node:hover rect{
  stroke:var(--accent);
  stroke-width:1.4;
}

.graph-node.object-node rect{
  fill:#f2f5f7;
  stroke:#c8d0d6;
}

.graph-node.object-node:hover rect{
  stroke:var(--accent);
}

.graph-node text{
  fill:var(--ink);
  font-size:14px;
  font-family:Arial,sans-serif;
  pointer-events:none;
}

.graph-node .node-meta{
  fill:var(--muted);
  font-size:12px;
  font-family:"Courier New",monospace;
}

.graph-node.root rect{
  fill:var(--ink);
  stroke:var(--ink);
}

.graph-node.root text,
.graph-node.root .node-meta{
  fill:var(--paper2);
}

.graph-legend{
  position:absolute;
  left:1rem;
  bottom:.85rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  padding:.45rem .55rem;
  border:1px solid var(--line-soft);
  background:rgba(248,250,251,.90);
  color:var(--muted);
  font-size:var(--font-min);
  pointer-events:none;
}

.graph-legend span{
  display:flex;
  align-items:center;
  gap:.35rem;
}

.legend-dot{
  display:inline-block;
  width:9px;
  height:9px;
  border:1px solid var(--ink);
}

.question-dot{background:var(--paper2)}
.source-dot{
  border-color:var(--accent);
  background:var(--accent-soft);
}

/* ---------- INSPECTOR ---------- */

.inspector{
  position:fixed;
  z-index:80;
  top:54px;
  right:0;
  bottom:0;
  width:min(410px,92vw);
  padding:3rem 1.2rem 1.5rem;
  overflow:auto;
  border-left:1px solid var(--line);
  background:rgba(248,250,251,.985);
  transform:translateX(102%);
  transition:transform .16s ease;
}

.inspector.open{transform:translateX(0)}

.close{
  position:absolute;
  top:.65rem;
  right:.8rem;
  border:0;
  background:none;
  font-size:1.25rem;
}

.inspector .type,
.inspector h3,
.inspector p,
.inspector li,
.inspector small,
.inspector .link{
  font-size:var(--font-min);
}

.inspector .type{
  margin:0 0 .55rem;
  color:var(--muted);
  text-transform:uppercase;
  font-family:"Courier New",monospace;
}

.inspector h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.5rem;
  line-height:1.06;
  font-weight:400;
}

.inspector .lead{
  margin:.78rem 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
  line-height:1.45;
}

.inspector section{
  margin-top:1.45rem;
  padding-top:.75rem;
  border-top:1px solid var(--line-soft);
}

.inspector h3{
  margin:0 0 .5rem;
  text-transform:uppercase;
  font-family:"Courier New",monospace;
}

.inspector ul{list-style:none;margin:0;padding:0}
.inspector li+li{margin-top:.5rem}

.link{
  border:0;
  background:none;
  padding:0;
  color:var(--accent);
  text-align:left;
}

.link:hover{
  color:var(--accent);
}
.link:pressed{
  color:var(--accent);
}

@media(max-width:980px){
  .map-view{grid-template-columns:1fr}
  .search-wrap input{width:155px}
  .tool-button{display:none}
}