/* ═══════════════════════════════════════════════════════════════
   Reference knowledge-unit ontology viewer.
   Three levels: Knowledge Area -> Knowledge Unit -> Topic.
   Tokens come from base.css; only view-specific rules live here.
═══════════════════════════════════════════════════════════════ */

.body-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;}
.rf-view{flex:1;display:flex;flex-direction:column;overflow:hidden;}

/* ── Search in the tabbar ──────────────────────────────────── */
.rf-search{
  font-family:'Outfit',sans-serif;font-size:.76rem;
  padding:.34rem .7rem;border:1.2px solid var(--bdr2);border-radius:7px;
  background:var(--sf);color:var(--tx);width:230px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.rf-search:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,146,14,.12);}
.rf-search::placeholder{color:var(--dim);}
.rf-hits{font-size:.68rem;color:var(--mu);margin-left:.55rem;white-space:nowrap;}

/* ── Toolbar ───────────────────────────────────────────────── */
.rf-toolbar{
  flex-shrink:0;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  padding:.5rem 1rem;background:var(--sf);
  border-bottom:1.2px solid var(--bdr);
}
.rf-label{font-size:.68rem;color:var(--mu);font-weight:500;margin-right:.15rem;}
.rf-btn{
  font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:500;
  padding:.3rem .62rem;border:1.2px solid var(--bdr2);border-radius:6px;
  background:var(--sf);color:var(--mu);cursor:pointer;
  transition:all .14s;white-space:nowrap;
}
.rf-btn:hover{border-color:var(--gold);color:var(--goldd);background:#fdfaf0;}
.rf-btn.active{background:rgba(184,146,14,.12);border-color:var(--gold);color:var(--goldd);}
.rf-icon{font-size:.9rem;line-height:1;padding:.24rem .5rem;font-weight:600;}
.rf-zoom{display:flex;gap:.25rem;margin-left:.55rem;}
.rf-hint{margin-left:auto;font-size:.66rem;color:var(--dim);white-space:nowrap;}

/* ── Tree canvas ───────────────────────────────────────────── */
.rf-canvas{
  flex:1;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 1px 1px, var(--bdr) 1px, transparent 0) 0 0/22px 22px,
    var(--bg);
  touch-action:none;              /* let d3.zoom own touch gestures */
}
#rf-svg{width:100%;height:100%;display:block;cursor:grab;}
#rf-svg:active{cursor:grabbing;}
.rf-loading{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:.82rem;color:var(--mu);
}

/* Links */
.rf-link{fill:none;stroke:var(--bdr2);stroke-width:1.4px;transition:stroke .18s,stroke-width .18s;}
.rf-link.on-path{stroke:var(--gold);stroke-width:2.2px;}

/* Nodes */
.rf-node{cursor:pointer;}
.rf-node-box{
  rx:7;stroke-width:1.4px;
  transition:filter .16s,stroke-width .16s;
}
.rf-node:hover .rf-node-box{filter:brightness(.97);stroke-width:2.2px;}
.rf-node.match .rf-node-box{stroke:var(--gold);stroke-width:2.6px;}
.rf-node.dimmed{opacity:.22;}
.rf-node-label{
  font-family:'Outfit',sans-serif;font-weight:500;
  fill:var(--tx);pointer-events:none;dominant-baseline:middle;
}
.rf-node-id{
  font-family:'DM Mono',monospace;font-size:9px;
  fill:var(--mu);pointer-events:none;dominant-baseline:middle;
}
.rf-toggle{
  font-family:'Outfit',sans-serif;font-size:9px;font-weight:700;
  fill:#fff;pointer-events:none;text-anchor:middle;dominant-baseline:central;
}
.rf-count{
  font-family:'DM Mono',monospace;font-size:8.5px;
  fill:var(--mu);pointer-events:none;dominant-baseline:middle;
}

/* ── Outline view ──────────────────────────────────────────── */
.rf-outline{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:1.1rem 1.2rem 4rem;
  -webkit-overflow-scrolling:touch;
}
.rf-area{
  background:var(--sf);border:1.2px solid var(--bdr);border-radius:11px;
  margin-bottom:.85rem;overflow:hidden;box-shadow:var(--shadow);
  max-width:1000px;margin-left:auto;margin-right:auto;
}
.rf-area-head{
  display:flex;align-items:center;gap:.7rem;
  padding:.8rem 1rem;cursor:pointer;user-select:none;
  border-left:5px solid var(--gold);
  transition:background .14s;
}
.rf-area-head:hover{background:#fafbfe;}
.rf-area-id{
  font-family:'DM Mono',monospace;font-size:.68rem;color:#fff;
  background:var(--gold);padding:.16rem .42rem;border-radius:5px;flex-shrink:0;
}
.rf-area-name{
  font-family:'Crimson Pro',serif;font-size:1.06rem;font-weight:700;
  color:var(--tx);flex:1;line-height:1.25;
}
.rf-area-meta{font-size:.67rem;color:var(--mu);white-space:nowrap;flex-shrink:0;}
.rf-chev{
  font-size:.72rem;color:var(--mu);transition:transform .2s;flex-shrink:0;
}
.rf-area.open .rf-chev{transform:rotate(90deg);}
.rf-area-body{display:none;padding:.2rem .9rem .9rem;}
.rf-area.open .rf-area-body{display:block;}
.rf-area-desc{
  font-size:.78rem;color:var(--mu);line-height:1.55;
  padding:0 .2rem .7rem;border-bottom:1px dashed var(--bdr);margin-bottom:.7rem;
}

.rf-unit{
  border:1px solid var(--bdr);border-radius:8px;
  margin-bottom:.5rem;background:var(--dimfill);overflow:hidden;
}
.rf-unit-head{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  padding:.55rem .7rem;cursor:pointer;user-select:none;
}
.rf-unit-head:hover{background:#e9edf7;}
.rf-unit-id{font-family:'DM Mono',monospace;font-size:.65rem;color:var(--mu);flex-shrink:0;}
.rf-unit-name{font-size:.85rem;font-weight:600;color:var(--tx);flex:1;min-width:140px;}
.rf-badge{
  font-size:.6rem;font-weight:600;padding:.13rem .42rem;border-radius:4px;
  white-space:nowrap;letter-spacing:.02em;
}
.rf-badge.core{background:rgba(184,146,14,.15);color:var(--goldd);}
.rf-badge.elective{background:var(--bdr);color:var(--mu);}
.rf-badge.bloom{background:rgba(79,70,229,.11);color:#4f46e5;}
.rf-unit-body{display:none;padding:.1rem .75rem .7rem;}
.rf-unit.open .rf-unit-body{display:block;}
.rf-unit-desc{font-size:.75rem;color:var(--mu);line-height:1.55;margin-bottom:.55rem;}
.rf-topic{
  display:flex;gap:.5rem;align-items:baseline;
  padding:.3rem 0;border-top:1px dashed var(--bdr);
}
.rf-topic-id{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--dim);flex-shrink:0;min-width:74px;}
.rf-topic-name{font-size:.76rem;font-weight:500;color:var(--tx);flex-shrink:0;}
.rf-topic-desc{font-size:.72rem;color:var(--mu);line-height:1.5;}
.rf-hidden{display:none !important;}
.rf-empty{text-align:center;color:var(--mu);font-size:.8rem;padding:2.5rem 1rem;}

/* ── Detail panel ──────────────────────────────────────────── */
.rf-panel{
  position:fixed;top:0;right:0;height:100%;width:370px;
  background:var(--sf);border-left:1.5px solid var(--bdr);
  box-shadow:var(--shadow-lg);z-index:60;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:1.4rem 1.3rem 3rem;
  -webkit-overflow-scrolling:touch;
}
.rf-panel.open{transform:translateX(0);}
.rf-panel-scrim{
  position:fixed;inset:0;background:rgba(24,38,62,.34);
  z-index:55;opacity:0;pointer-events:none;transition:opacity .26s;
}
.rf-panel-scrim.open{opacity:1;pointer-events:auto;}
.rf-panel-close{
  position:absolute;top:.7rem;right:.9rem;
  background:none;border:none;font-size:1.5rem;line-height:1;
  color:var(--mu);cursor:pointer;padding:.2rem .4rem;border-radius:6px;
}
.rf-panel-close:hover{background:var(--dimfill);color:var(--tx);}
.rf-p-kind{
  font-size:.63rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.3rem;
}
.rf-p-id{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--mu);margin-bottom:.45rem;}
.rf-p-name{
  font-family:'Crimson Pro',serif;font-size:1.32rem;font-weight:700;
  color:var(--tx);line-height:1.24;margin-bottom:.6rem;
}
.rf-p-desc{font-size:.82rem;color:var(--mu);line-height:1.62;margin-bottom:.9rem;}
.rf-p-badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem;}
.rf-p-sec{
  font-size:.63rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mu);margin:1rem 0 .45rem;
  padding-bottom:.28rem;border-bottom:1px solid var(--bdr);
}
.rf-p-item{
  padding:.42rem .55rem;border-radius:6px;background:var(--dimfill);
  margin-bottom:.34rem;cursor:pointer;transition:background .14s;
}
.rf-p-item:hover{background:#e9edf7;}
.rf-p-item-name{font-size:.78rem;font-weight:600;color:var(--tx);}
.rf-p-item-id{font-family:'DM Mono',monospace;font-size:.62rem;color:var(--dim);}
.rf-p-item-desc{font-size:.71rem;color:var(--mu);line-height:1.45;margin-top:.15rem;}
.rf-p-crumb{font-size:.7rem;color:var(--mu);margin-bottom:.75rem;}
.rf-p-crumb a{color:var(--goldd);text-decoration:none;cursor:pointer;}
.rf-p-crumb a:hover{text-decoration:underline;}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:900px){
  .rf-hint{display:none;}
  .rf-search{width:150px;}
  .rf-panel{width:min(340px,88vw);}
}
@media (max-width:640px){
  .rf-toolbar{padding:.45rem .6rem;gap:.28rem;}
  .rf-btn{font-size:.66rem;padding:.26rem .5rem;}
  .rf-label{display:none;}
  .rf-search{width:100%;order:10;margin-top:.3rem;}
  .rf-hits{order:11;}
  .rf-outline{padding:.7rem .6rem 4rem;}
  .rf-area-name{font-size:.95rem;}
  .rf-topic{flex-direction:column;gap:.1rem;}
  .rf-topic-id{min-width:0;}
  .rf-panel{width:100%;border-left:none;padding:1.2rem 1rem 3rem;}
}