:root{
  --bg:#ffffff;
  --text:#222222;
  --muted:#6b6b6b;
  --rule:#dddddd;
  --link:#1a0dab;
  --accent:#b31b1b;
  --hover:#f5f5f5;
  --ui:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --col-w:312px;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:var(--ui);
  font-size:13px;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;}

#app{display:flex;flex-direction:column;min-height:100vh;}

/* ---------------- header ---------------- */
.site-head{
  flex:0 0 auto;
  padding:10px 16px 8px;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.site-back{display:inline-block;font-size:12px;color:var(--muted);margin-bottom:4px;}
.site-back:hover{color:var(--link);text-decoration:underline;}
.head-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.brand{font-size:20px;font-weight:700;color:var(--accent);letter-spacing:-.01em;}
.brand-sub{font-size:12px;color:var(--muted);}
.search-row{display:flex;align-items:center;gap:14px;margin-top:8px;}
#search{
  width:340px;max-width:60vw;padding:4px 7px;font-family:var(--ui);font-size:13px;
  border:1px solid #aaaaaa;background:#ffffff;color:var(--text);outline:none;border-radius:0;
}
#search:focus{border-color:var(--accent);}
.help-link{font-size:12px;}

.search-results{
  position:absolute;left:16px;right:16px;top:100%;z-index:40;
  background:#ffffff;border:1px solid var(--rule);border-top:none;
  max-height:60vh;overflow-y:auto;padding:4px 0;
}
.sr-head{padding:5px 16px 4px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--rule);margin-bottom:2px;}
.sr-item{padding:4px 16px;cursor:pointer;line-height:1.35;}
.sr-item:hover{background:var(--hover);}
.sr-label{color:var(--link);}
.sr-item:hover .sr-label{text-decoration:underline;}
.sr-tag{font-size:11px;color:var(--muted);font-style:italic;margin-right:6px;}
.sr-crumb{font-size:11px;color:var(--muted);}
.sr-empty{padding:8px 16px;color:var(--muted);}

/* ---------------- breadcrumb ---------------- */
.breadcrumb{
  flex:0 0 auto;
  padding:7px 16px;border-bottom:1px solid var(--rule);
  font-size:12px;color:var(--muted);
  white-space:nowrap;overflow-x:auto;
}
.crumb{cursor:pointer;color:var(--link);}
.crumb:hover{text-decoration:underline;}
.crumb.current{color:var(--text);cursor:default;font-weight:700;}
.crumb.current:hover{text-decoration:none;}
.crumb-sep{color:#b8b8b8;margin:0 5px;}

/* ---------------- miller columns ---------------- */
.columns{
  flex:0 0 auto;
  height:300px;
  /* At the root landing (single column) let the strip grow so all/most of the
     26 top-level fields are visible without pushing the detail into deep
     whitespace; deeper views keep the compact fixed height. */
  min-height:min(560px,calc(100vh - 220px));
  display:flex;
  overflow-x:auto;overflow-y:hidden;
  border-bottom:2px solid var(--rule);
  background:#ffffff;
}
/* Once the user drills in, collapse back to the compact strip. */
.columns.deep{min-height:0;height:340px;}
.column{
  flex:0 0 var(--col-w);width:var(--col-w);
  height:100%;overflow-y:auto;overflow-x:hidden;
  border-right:1px solid var(--rule);
  padding:4px 0;
}
.col-row{
  display:flex;align-items:baseline;gap:6px;
  padding:3px 6px 3px 10px;cursor:pointer;line-height:1.3;
  border-left:3px solid transparent;
}
.col-row:hover{background:var(--hover);}
.col-row.active{border-left-color:var(--accent);background:#fbf0f0;}
.col-row.active .col-label{color:var(--accent);font-weight:700;}
.col-label{
  flex:1 1 auto;min-width:0;color:var(--link);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.col-row:hover .col-label{text-decoration:underline;}
.col-row.active:hover .col-label{text-decoration:none;}
.col-size{flex:0 0 auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}
.col-arrow{flex:0 0 auto;color:var(--muted);font-size:12px;width:9px;text-align:right;}

/* ---------------- detail ---------------- */
.detail{flex:0 0 auto;}
.detail-inner{max-width:780px;margin:0 auto;padding:26px 24px 80px;}

.node-title{font-size:21px;font-weight:700;line-height:1.2;margin:0 0 5px;color:var(--text);}
.detail-meta{font-size:12px;color:var(--muted);margin-bottom:4px;}
.detail-id{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:16px;}
.summary{font-family:var(--serif);font-size:14px;line-height:1.6;color:#333;margin:0 0 20px;}

.sec-head{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);border-bottom:1px solid var(--rule);
  padding-bottom:3px;margin:24px 0 12px;
}
.note{color:var(--muted);font-size:13px;line-height:1.5;padding:6px 0;max-width:760px;}
.conn-defs{margin:6px 0 0;}
.conn-defs dt{color:var(--text);font-weight:700;margin-top:6px;}
.conn-defs dd{margin:0 0 0 16px;}
.loading{color:var(--muted);padding:20px 0;}
.err-note{color:var(--accent);}
.retry-link{color:var(--link);cursor:pointer;text-decoration:underline;margin-left:4px;}

/* refs */
.refs{font-size:12px;line-height:1.7;margin-bottom:4px;}
.ref{font-family:var(--mono);font-size:11px;margin-right:10px;white-space:nowrap;}

/* questions */
.qlist{list-style:decimal;padding-left:26px;margin:0;}
.qitem{margin-bottom:18px;}
.qtext{font-family:var(--serif);font-size:14.5px;line-height:1.55;color:var(--text);}
.qmeta{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5;}
.qmeta .prereq-label{font-style:italic;}
.why-toggle{font-size:12px;color:var(--link);cursor:pointer;margin-top:4px;display:inline-block;user-select:none;}
.why-toggle:hover{text-decoration:underline;}
.why-body{font-size:12.5px;line-height:1.55;color:var(--muted);
  border-left:2px solid var(--rule);padding-left:10px;margin-top:6px;}

/* related elsewhere */
.rel-sub{font-size:12px;color:var(--muted);margin-bottom:8px;}
.rel-list{font-size:12.5px;line-height:1.85;}
.rel-item{display:block;}
.rel-link{color:var(--link);cursor:pointer;}
.rel-link:hover{text-decoration:underline;}
.rel-type{font-size:11px;color:var(--muted);font-style:italic;margin-left:6px;}
.rel-field{font-size:11px;color:var(--muted);margin-left:4px;}
.empty-rel{color:var(--muted);font-size:12px;}

@media (max-width:640px){
  .detail-inner{padding:16px 14px 80px;}
  #search{max-width:70vw;}
}