:root{
  --paper: #ece3cd;
  --paper-2: #e3d8ba;
  --paper-3: #d8caa2;
  --ink: #201c15;
  --ink-dim: #57503e;
  --muted: #857a5c;

  --red: #c33b28;      /* concepts */
  --red-dim: #8a2a1c;
  --ochre: #cf9a2e;    /* persons */
  --ochre-dim: #93701f;
  --teal: #2d6b6f;     /* posts */
  --teal-dim: #1e484b;

  --line: #c3b489;
  --line-strong: #201c15;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "PT Sans", Arial, sans-serif;
  --font-label: "PT Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; touch-action: pan-x pan-y; overscroll-behavior: none; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  overflow:hidden;
}

/* ---------- boot screen ---------- */
#boot{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(32,28,21,.06) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(32,28,21,.06) 39px 40px),
    var(--paper);
  z-index: 100;
}
#boot[hidden]{ display:none; }
#boot-card{ text-align:center; width: 340px; position:relative; padding: 30px; }
#boot-card::before, #boot-card::after{
  content:""; position:absolute; width:18px; height:18px; top:0; left:0;
  border-top:2px solid var(--ink); border-left:2px solid var(--ink);
}
#boot-card::after{ left:auto; right:0; border-left:none; border-right:2px solid var(--ink); }
.boot-title{
  font-family: var(--font-display); font-size: 30px; font-weight:600; text-transform:uppercase;
  color: var(--ink); letter-spacing: 0.03em;
}
.boot-sub{ font-family: var(--font-label); font-size: 12px; color: var(--muted); margin-top: 12px; letter-spacing: .02em; text-transform:uppercase; }
.boot-bar{ height: 6px; width: 100%; background: var(--paper-3); margin-top: 20px; position:relative; }
.boot-bar::before{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 10%); opacity:.5; }
.boot-bar-fill{ height:100%; width: 0%; background: var(--red); transition: width .25s ease; }

/* ---------- layout ---------- */
#app{ height:100%; display:grid; grid-template-rows: 60px 1fr; grid-template-columns: 1fr; }
#app[hidden]{ display:none; }

#topbar{
  grid-row: 1; display:flex; align-items:center; gap:18px;
  padding: 0 20px; border-bottom: 3px solid var(--ink); background: var(--paper);
  position:relative; z-index: 20;
}
.tb-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.tb-mark{
  font-family: var(--font-display); font-size:18px; font-weight:600; color: var(--paper);
  background: var(--red); padding: 4px 9px; letter-spacing: 0.03em;
}
.tb-title{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; }
.tb-title-main{ font-family: var(--font-display); font-size: 19px; font-weight:600; text-transform:uppercase; letter-spacing:.01em; color: var(--ink); }
.tb-title-sub{ font-family: var(--font-label); font-size: 10.5px; color: var(--muted); }

.tb-search{ flex:1; max-width: 480px; position:relative; }
#search-input{
  width:100%; background: var(--paper-2); border:2px solid var(--ink); color: var(--ink);
  font-family: var(--font-body); font-size: 14px; padding: 8px 12px; border-radius: 0;
  outline:none;
}
#search-input::placeholder{ color: var(--muted); }
#search-input:focus{ border-color: var(--red); }
#search-results{
  position:absolute; top: 42px; left:0; right:0; background: var(--paper);
  border:2px solid var(--ink); max-height: 360px; overflow:auto;
  display:none; box-shadow: 6px 6px 0 rgba(32,28,21,.15); z-index: 30;
}
#search-results.show{ display:block; }
.sr-item{ padding:8px 12px; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); }
.sr-item:last-child{ border-bottom:none; }
.sr-item:hover{ background: var(--paper-2); }
.sr-item .sr-title{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-item .sr-type{ font-family: var(--font-label); font-size:9.5px; color: var(--muted); text-transform:uppercase; }

.tb-right{ display:flex; gap:8px; }
.tb-btn{
  font-family: var(--font-label); font-size: 11.5px; color: var(--ink); background: var(--paper-2);
  border:2px solid var(--ink); padding:7px 12px; cursor:pointer; white-space:nowrap; text-transform:uppercase;
  letter-spacing: .02em;
}
.tb-btn:hover{ background: var(--ink); color: var(--paper); }
.tb-btn.active{ color: var(--paper); background: var(--red); border-color: var(--red); }

/* ---------- filters panel ---------- */
#filters-panel{
  position:absolute; top:60px; right:20px; z-index: 25; background: var(--paper);
  border:2px solid var(--ink); padding: 18px 20px; width: 270px;
  box-shadow: 8px 8px 0 rgba(32,28,21,.15);
}
.fp-group{ margin-bottom:16px; }
.fp-label{ font-family: var(--font-label); font-size:10.5px; color: var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.chip{ display:flex; align-items:center; gap:8px; padding: 5px 0; font-size:14px; cursor:pointer; }
.chip input{ accent-color: var(--red); }
.chip b{ margin-left:auto; font-family: var(--font-label); font-weight:400; font-size:11px; color: var(--muted); }
.chip-posts span{ border-bottom: 3px solid var(--teal); }
.chip-concepts span{ border-bottom: 3px solid var(--red); }
.chip-persons span{ border-bottom: 3px solid var(--ochre); }
.fp-range{ display:flex; flex-direction:column; gap:4px; }
.fp-range input[type=range]{ width:100%; accent-color: var(--red); }
.fp-range-labels{ font-family: var(--font-label); font-size:11px; color: var(--ink-dim); margin-top:4px; }
#filters-reset{ width:100%; }

/* ---------- stage ---------- */
#stage{ position:relative; overflow:hidden; background: var(--paper); }
#stage::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 49px, rgba(32,28,21,.05) 49px 50px),
    repeating-linear-gradient(90deg, transparent 0 49px, rgba(32,28,21,.05) 49px 50px);
}
#graph-canvas{ position:absolute; inset:0; width:100%; height:100%; cursor: grab; z-index: 1; }
#graph-canvas:active{ cursor: grabbing; }

#hover-tip{
  position:absolute; pointer-events:none; z-index: 15; background: var(--ink);
  color: var(--paper); padding:6px 10px; font-size:13px;
  transform: translate(12px, -50%); white-space:nowrap;
}
#hover-tip .ht-type{ font-family: var(--font-label); font-size:10px; color: var(--paper-3); margin-right:6px; text-transform:uppercase; }

#legend{
  position:absolute; left:20px; bottom:20px; z-index:12; background: var(--paper);
  border:2px solid var(--ink); padding:12px 16px;
}
.legend-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--ink); padding:3px 0; font-family: var(--font-label); }
.legend-note{ font-size:10px; color: var(--muted); margin-top:5px; text-transform:uppercase; }
.dot{ width:11px; height:11px; display:inline-block; border: 1.5px solid var(--ink); }
.dot-concepts{ background-color: var(--red); transform: rotate(45deg); }
.dot-persons{ background-color: var(--ochre); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border:none; width:13px; height:11px; }
.dot-posts{ background-color: var(--teal); border-radius: 50%; }

#zoom-controls{ position:absolute; right:20px; bottom:20px; z-index:12; display:flex; flex-direction:column; gap:4px; }
#zoom-controls button{
  width:34px; height:34px; background: var(--paper); border:2px solid var(--ink); color: var(--ink);
  cursor:pointer; font-size:16px; font-family: var(--font-label);
}
#zoom-controls button:hover{ background: var(--ink); color: var(--paper); }

/* ---------- side panel (technical document page) ---------- */
#panel{
  position:absolute; top:60px; right:0; bottom:0; width: 440px; max-width: 92vw;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  z-index: 40; padding: 18px 18px 18px 10px;
}
#panel.open{ transform: translateX(0); }

.panel-card{
  position:relative; height:100%; overflow-y:auto; padding: 30px 28px 28px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(32,28,21,.18);
}
.panel-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background: var(--red); z-index:0;
}
.panel-card > *{ position:relative; z-index:1; margin-left: 6px; }

#panel-close{
  position:absolute; top:16px; right:16px; z-index:2; background: var(--ink); border: none; color: var(--paper);
  width: 28px; height: 28px;
  font-size:18px; line-height:1; cursor:pointer; font-family: var(--font-label);
}
#panel-close:hover{ background: var(--red); }

.panel-stamp{
  position:absolute; top:22px; right:56px; z-index:2; font-family: var(--font-label); font-size:10.5px;
  color: var(--paper); background: var(--teal); padding: 4px 10px;
  letter-spacing:.05em; text-transform:uppercase;
}
.panel-stamp.type-concepts{ background: var(--red); }
.panel-stamp.type-persons{ background: var(--ochre); }

.panel-eyebrow{ font-family: var(--font-label); font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; margin-top: 30px; }
#panel-title{ font-family: var(--font-display); font-size: 30px; font-weight:600; text-transform:uppercase; line-height:1.1; margin: 0 0 12px; color: var(--ink); }
.panel-meta{ font-family: var(--font-label); font-size:12px; color: var(--ink-dim); margin-bottom:20px; padding-bottom:16px; border-bottom: 2px solid var(--ink); }

.panel-body{ font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.panel-body h2,.panel-body h3,.panel-body h4{ font-family: var(--font-display); font-weight:600; text-transform:uppercase; margin: 20px 0 10px; color: var(--red); letter-spacing:.01em; }
.panel-body h2{ font-size:19px; } .panel-body h3{ font-size:16px; color: var(--ink-dim); } .panel-body h4{ font-size:15px; }
.panel-body p{ margin: 0 0 13px; }
.panel-body ul{ margin: 0 0 13px; padding-left: 20px; }
.panel-body li{ margin-bottom: 6px; }
.panel-body blockquote{ margin: 0 0 13px; padding: 10px 14px; border-left: 3px solid var(--ochre); color: var(--ink-dim); background: var(--paper-2); }
.panel-body hr{ border:none; border-top: 2px solid var(--ink); margin: 18px 0; }
.panel-body a{ color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--teal); }
.panel-body a:hover{ color: var(--red); border-color: var(--red); }
.panel-body a.unresolved{ color: var(--muted); border-bottom-style: dotted; cursor:default; }
.panel-body span.unresolved{ color: var(--muted); }

.panel-section{ margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--ink); }
.panel-section-title{ font-family: var(--font-label); font-size:10.5px; color: var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.panel-linklist{ display:flex; flex-wrap:wrap; gap:7px; }
.pl-item{
  font-size:12.5px; padding: 5px 10px; border:1.5px solid var(--ink); cursor:pointer;
  color: var(--ink); white-space:nowrap; max-width: 220px; overflow:hidden; text-overflow:ellipsis;
  background: var(--paper-2); font-family: var(--font-label);
}
.pl-item:hover{ background: var(--ink); color: var(--paper); }
.pl-item.type-posts{ border-left: 4px solid var(--teal); }
.pl-item.type-concepts{ border-left: 4px solid var(--red); }
.pl-item.type-persons{ border-left: 4px solid var(--ochre); }

@media (max-width: 720px){
  #panel{ width:100%; padding: 12px; top: 60px; }
  .tb-search{ display:none; }
}