/* IterOrbis public Traveler / Host switch - live70 text action button
   Guests can preview both public roles. Private account context stays gated. */

/* Desktop: explicit text action. Header may use more viewport width than content shell
   so long translated actions remain readable without hiding navigation. */
@media (min-width:981px){
  .topbar__inner{
    width:min(calc(100% - 32px),1600px)!important;
    max-width:none!important;
  }
  .topbar-actions{
    gap:4px!important;
    flex:0 0 auto!important;
  }
  .topbar-actions .role-switch{
    display:inline-flex!important;
    position:relative!important;
    inline-size:118px!important;
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
    height:58px!important;
    min-height:58px!important;
    padding:5px 8px!important;
    justify-content:center!important;
    align-items:center!important;
    gap:0!important;
    flex:0 0 auto!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }
  .topbar-actions .role-switch [data-role-label]{
    position:static!important;
    inline-size:auto!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    max-width:100px!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    clip:auto!important;
    white-space:normal!important;
    border:0!important;
    font-size:13px!important;
    line-height:1.05!important;
    text-align:center!important;
    text-overflow:clip!important;
  }
  .topbar-actions .role-switch::before,
  .topbar-actions .role-switch::after{content:none!important}
  .topbar-actions .role-switch__dot{
    position:absolute!important;
    inset-inline-end:6px!important;
    top:6px!important;
    width:7px!important;
    height:7px!important;
    flex:0 0 7px!important;
  }
}

/* 761-980 already uses hamburger navigation. Keep the text role action there. */
@media (min-width:761px) and (max-width:980px){
  .topbar-actions .role-switch{display:none!important}
  .mobile-role-switch{
    display:grid!important;
    grid-template-columns:8px 1fr auto;
    align-items:center;
    gap:8px;
    width:100%;
    min-height:44px;
    margin-top:6px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#f7faf8;
    color:var(--ink);
    text-align:start;
  }
  .mobile-role-switch>span{width:8px;height:8px;border-radius:50%;background:var(--green)}
  .mobile-role-switch b{font-size:9px;line-height:1.25}
  .mobile-role-switch em{font-style:normal;color:#7a8982}
  .role-host .mobile-role-switch{background:#fff5e8;border-color:#e8d4b6}
  .role-host .mobile-role-switch>span{background:var(--amber)}
}

/* Existing mobile presentation stays intact; only its translated label is now the action. */
@media (max-width:760px){
  .topbar-actions .role-switch{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .topbar-actions .role-switch{transition:none!important}
}