/* --- Layout ------------------------------------------------------------ */
:root{
  --bg:#0f1821;
  --panel:#0b121a;
  --ink:#e6edf3;
  --muted:#9fb0c0;
  --accent:#7dc1ff;
  --badge:#162332;
  --badge-ink:#bcd5eb;
  --link:#9bd4ff;
  --row-gap:6px;
  --font: 14px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font:var(--font);
}
.bar{
  position:sticky; top:0; z-index:2;
  display:flex; gap:8px; align-items:center;
  padding:10px 12px; background:var(--panel); border-bottom:1px solid #1e2a3a;
}
.input{background:#0e1721; color:var(--ink); border:1px solid #243243; padding:6px 8px; border-radius:8px}
.input.wide{min-width:420px}
.input.search{min-width:320px}
.btn{background:#142233; color:var(--ink); border:1px solid #26354a; padding:6px 10px; border-radius:10px; cursor:pointer}
.btn:hover{border-color:#3b5170}
.muted{color:var(--muted)}
.spacer{flex:1}

main{display:grid; grid-template-columns: 1fr 360px; height:calc(100% - 52px)}
.tree{overflow:auto; padding:12px 16px}
.details{overflow:auto; border-left:1px solid #223145; background:var(--panel); padding:12px 16px}

/* --- Tree rows (Groups) ------------------------------------------------ */
ul{list-style:none; margin:0; padding-left:36px}
.node-row{
  display:flex; align-items:center; gap:8px; min-height:26px;
  padding:6px 4px; border-radius:8px;
}
.node-row:hover{background:#0e1a27}
.twisty{
  width:18px; height:18px; border:none; background:none; color:var(--muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:16px;
  flex-shrink:0; padding:0;
}
.bull{width:6px; height:6px; border-radius:50%; background:#31465e; margin-right:6px}
.node.group .title {
  font-size: 16px;
}
.title a{color:var(--link); text-decoration:none}
.title a:hover{text-decoration:underline}

/* Group badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px; background:var(--badge); color:var(--badge-ink);
  font-size:12px;
}
.badge .count{opacity:.9}

/* visibility */
.collapsed > ul,
.stmt-main-content.collapsed > .stmt-content {
  display:none
}

/* dashed guide lines (left rail) */
.tree .rail{position:absolute; left:12px; top:0; bottom:0; width:1px; border-left:1px dashed #2a3b52; opacity:.7}
.level-0 .rail{left:24px}
.level-1 .rail{left:48px}
.level-2 .rail{left:72px}
.level-3 .rail{left:96px}

/* --- Statement Block --------------------------------------------------- */
.node.stmt { margin-top: 12px; }
.stmt-block {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
}

.stmt-col-left, .stmt-col-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}
.stmt-col-right { align-items: flex-end; }

.stmt-col-middle {
  display: flex;
  flex-direction: column;
}

.stmt-main-content {
  background: var(--panel);
  border: 1px solid #223145;
  border-radius: 8px;
  overflow: hidden;
  flex-grow: 1; /* Pushes tags to the bottom */
  min-height: 54px; /* Creates minimum space */
}

.stmt-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #0e1721;
}
.node.stmt .stmt-header .title {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink); /* Swapped */
}

.stmt-content {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--badge-ink); /* Swapped */
  white-space: pre-wrap;
  border-top: 1px solid #223145;
}

.stmt-tags-container {
  padding: 6px 0;
}

/* Meta Badges (for all columns) */
.meta-badge {
  display: inline-flex;
  gap: 6px;
  padding: 3px 8px;
  background: #162332;
  border: 1px solid #223145;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  color: var(--badge-ink);
  text-decoration: none;
}
.meta-badge-label { color: var(--muted); }
.meta-badge-value { font-weight: 500; }
.link-badge:not(.disabled):hover {
  border-color: #3b5170;
  color: var(--link);
}
.link-badge.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}