/* ============================================================
   Talent2Role — vertical chrome (preview banner + switcher)
   ============================================================ */

/* ---------- preview banner ---------- */
.t2r-preview{
  position:relative;z-index:120;display:flex;align-items:flex-start;gap:12px;
  padding:11px 46px 11px 20px;background:#FFF8E6;border-bottom:1px solid #F2D9A0;
  font-size:.83rem;color:#7A5410;line-height:1.5;
}
.t2r-preview strong{
  flex:none;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.7rem;
  background:#D97706;color:#fff;padding:3px 9px;border-radius:99px;margin-top:1px;
}
.t2r-preview button{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:0;font-size:1.25rem;color:#B08A3C;cursor:pointer;line-height:1;padding:4px;
}
.t2r-preview button:hover{color:#7A5410}

/* ---------- vertical switcher ---------- */
.t2r-switch{position:relative;display:inline-block}
.t2r-switch-btn{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:99px;
  border:1px solid var(--line);background:#fff;font-size:.84rem;font-weight:600;cursor:pointer;
  color:var(--ink);transition:border-color .15s, box-shadow .15s;
}
.t2r-switch-btn:hover{border-color:#C9D0E0;box-shadow:var(--shadow-xs)}
.t2r-caret{color:var(--muted);font-size:.7rem;margin-left:1px}
.t2r-dot{width:9px;height:9px;border-radius:99px;flex:none;display:inline-block}

.t2r-switch-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:268px;background:#fff;
  border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:7px;
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .15s, transform .15s;z-index:140;
}
.t2r-switch.on .t2r-switch-menu{opacity:1;pointer-events:auto;transform:none}
.t2r-switch-head{
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#9AA4BC;padding:9px 11px 7px;
}
.t2r-switch-menu a{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  font-size:.88rem;color:var(--slate);transition:background .13s;
}
.t2r-switch-menu a:hover{background:var(--bg-soft);color:var(--ink)}
.t2r-switch-menu a.on{background:var(--primary-50);color:var(--primary);font-weight:600}
.t2r-sw-name{display:flex;flex-direction:column;line-height:1.3;flex:1;font-weight:600}
.t2r-sw-name small{font-weight:400;font-size:.72rem;color:var(--muted)}
.t2r-switch-menu a.on .t2r-sw-name small{color:var(--primary-400)}
.t2r-switch-menu em{
  font-style:normal;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#B08A3C;background:#FFF8E6;padding:2px 7px;border-radius:99px;flex:none;
}
.t2r-switch-menu em.cur{color:var(--primary);background:var(--primary-50)}
.t2r-portal{
  border-top:1px solid var(--line-2);margin-top:5px;padding-top:11px !important;
  font-size:.82rem;color:var(--muted) !important;
}

@media (max-width:760px){
  .t2r-preview{font-size:.78rem;padding:10px 40px 10px 14px}
  .t2r-switch-menu{right:auto;left:0}
}